Skip to content

Commit

Permalink
Move label gen from TexWidget to FieldTemplate for bootstrap4
Browse files Browse the repository at this point in the history
  • Loading branch information
newt10 committed Sep 2, 2021
1 parent 9c0dd42 commit 293261f
Show file tree
Hide file tree
Showing 9 changed files with 277 additions and 391 deletions.
19 changes: 17 additions & 2 deletions packages/bootstrap-4/src/FieldTemplate/FieldTemplate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,30 @@ const FieldTemplate = ({
rawErrors = [],
rawHelp,
rawDescription,
label,
schema,
required
}: FieldTemplateProps) => {

const shouldDisplayLabel = displayLabel && (label || schema.title);
const labelComponent = shouldDisplayLabel
? (
<Form.Label htmlFor={id} className={rawErrors.length > 0 ? "text-danger" : ""}>
{label || schema.title}
{required ? "*" : null}
</Form.Label>
)
: null;

return (
<Form.Group>
{children}
{displayLabel && rawDescription ? (
{labelComponent}
{shouldDisplayLabel && rawDescription ? (
<Form.Text className={rawErrors.length > 0 ? "text-danger" : "text-muted"}>
{rawDescription}
</Form.Text>
) : null}
{children}
{rawErrors.length > 0 && (
<ListGroup as="ul">
{rawErrors.map((error: string) => {
Expand Down
9 changes: 2 additions & 7 deletions packages/bootstrap-4/src/TextWidget/TextWidget.tsx
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const TextWidget = ({
readonly,
disabled,
type,
label,
value,
onChange,
onBlur,
Expand All @@ -35,11 +34,7 @@ const TextWidget = ({

// const classNames = [rawErrors.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
return (
<Form.Group className="mb-0">
<Form.Label className={rawErrors.length > 0 ? "text-danger" : ""}>
{label || schema.title}
{(label || schema.title) && required ? "*" : null}
</Form.Label>
<>
<Form.Control
id={id}
placeholder={placeholder}
Expand All @@ -65,7 +60,7 @@ const TextWidget = ({
})}
</datalist>
) : null}
</Form.Group>
</>
);
};

Expand Down
70 changes: 28 additions & 42 deletions packages/bootstrap-4/test/__snapshots__/Array.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -183,27 +183,20 @@ exports[`array fields fixed array 1`] = `
<div
className="form-group"
>
<div
className="mb-0 form-group"
>
<label
className="form-label"
/>
<input
autoFocus={false}
className="form-control"
disabled={false}
id="root_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={false}
required={true}
type="text"
value=""
/>
</div>
<input
autoFocus={false}
className="form-control"
disabled={false}
id="root_0"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={false}
required={true}
type="text"
value=""
/>
</div>
</div>
<div
Expand All @@ -221,27 +214,20 @@ exports[`array fields fixed array 1`] = `
<div
className="form-group"
>
<div
className="mb-0 form-group"
>
<label
className="form-label"
/>
<input
autoFocus={false}
className="form-control"
disabled={false}
id="root_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={false}
required={true}
type="number"
value=""
/>
</div>
<input
autoFocus={false}
className="form-control"
disabled={false}
id="root_1"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={false}
required={true}
type="number"
value=""
/>
</div>
</div>
<div
Expand Down
38 changes: 14 additions & 24 deletions packages/bootstrap-4/test/__snapshots__/ColorWidget.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -1,28 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ColorWidget simple 1`] = `
<div
className="mb-0 form-group"
>
<label
className="text-danger form-label"
>
Some simple label
*
</label>
<input
autoFocus={true}
className="is-invalid form-control"
disabled={false}
id="_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={true}
required={true}
type="color"
value="value"
/>
</div>
<input
autoFocus={true}
className="is-invalid form-control"
disabled={false}
id="_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={true}
required={true}
type="color"
value="value"
/>
`;
Original file line number Diff line number Diff line change
@@ -1,28 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DateTimeWidget simple 1`] = `
<div
className="mb-0 form-group"
>
<label
className="text-danger form-label"
>
Some simple label
*
</label>
<input
autoFocus={true}
className="is-invalid form-control"
disabled={false}
id="_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={true}
required={true}
type="datetime-local"
value="2020-07-30T13:41:00.268"
/>
</div>
<input
autoFocus={true}
className="is-invalid form-control"
disabled={false}
id="_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={true}
required={true}
type="datetime-local"
value="2020-07-30T13:41:00.268"
/>
`;
38 changes: 14 additions & 24 deletions packages/bootstrap-4/test/__snapshots__/DateWidget.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -1,28 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DateWidget simple 1`] = `
<div
className="mb-0 form-group"
>
<label
className="text-danger form-label"
>
Some simple label
*
</label>
<input
autoFocus={true}
className="is-invalid form-control"
disabled={false}
id="_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={true}
required={true}
type="date"
value="value"
/>
</div>
<input
autoFocus={true}
className="is-invalid form-control"
disabled={false}
id="_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
readOnly={true}
required={true}
type="date"
value="value"
/>
`;
Loading

0 comments on commit 293261f

Please sign in to comment.