I12 render custom labels for required fields

example/data/array.json

@@ -6,6 +6,7 @@
     "properties": {
       "comments": {
         "type": "array",
+        "title": "Comments",
         "maxItems": 2,
         "items": {
           "type": "object",

example/data/simplearray.json

@@ -6,6 +6,7 @@
         "properties": {
             "comments": {
                 "type": "array",
+                "title": "Comments",
                 "maxItems": 2,
                 "items": {
                     "type": "object",

src/Array.js

@@ -8,8 +8,8 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Close";
-import Typography from "@material-ui/core/Typography";
 import cloneDeep from "lodash/cloneDeep";
+import FormLabel from "@material-ui/core/FormLabel";
 import utils from "./utils";
 import ComposedComponent from "./ComposedComponent";
 import type { Localization } from "./types";
@@ -208,9 +208,9 @@ class Array extends Component<Props, State> {
         return (
             <div>
                 <div>
-                    <Typography variant="h6">
-                        {getLocalizedString(form.title)}
-                    </Typography>
+                    <FormLabel variant="h6" required={form.required}>
+                        {form.title && getLocalizedString(form.title)}
+                    </FormLabel>
                     <div>{arrays}</div>
                 </div>
                 <Button

src/Checkbox.js

@@ -25,7 +25,7 @@ const FormCheckbox = ({
     <FormGroup row>
         <FormControlLabel
             className={form.className}
-            label={getLocalizedString(form.title)}
+            label={form.title && getLocalizedString(form.title)}
             control={
                 <Checkbox
                     name={form.key.slice(-1)[0]}

src/FieldSet.js

@@ -42,8 +42,8 @@ const FieldSet = ({
 
     return (
         <FormControl component="fieldset" className={classes.root}>
-            <FormLabel component="legend">
-                {getLocalizedString(form.title)}
+            <FormLabel component="legend" required={form.required}>
+                {form.title && getLocalizedString(form.title)}
             </FormLabel>
             <div className={classes.fields}>{forms}</div>
         </FormControl>

src/MultiSelect.js

@@ -97,16 +97,20 @@ class MultiSelect extends Component<Props, State> {
                         : classes.selectedMenuItem
                 }
             >
-                {getLocalizedString(item.name)}
+                {item.name && getLocalizedString(item.name)}
             </MenuItem>
         ));
         return (
             <FormControl fullWidth>
-                <InputLabel>{getLocalizedString(form.title)}</InputLabel>
+                <InputLabel required={form.required}>
+                    {form.title && getLocalizedString(form.title)}
+                </InputLabel>
                 <MuiSelect
                     multiple
                     value={currentValue || ""}
-                    placeholder={getLocalizedString(form.title)}
+                    placeholder={
+                        form.placeholder && getLocalizedString(form.placeholder)
+                    }
                     disabled={form.readonly}
                     onChange={this.onSelected}
                     MenuProps={MenuProps}
@@ -115,7 +119,10 @@ class MultiSelect extends Component<Props, State> {
                             {selected.map(value => (
                                 <Chip
                                     key={value}
-                                    label={getLocalizedString(getTitle(value))}
+                                    label={
+                                        getTitle(value) &&
+                                        getLocalizedString(getTitle(value))
+                                    }
                                     className={classes.chip}
                                 />
                             ))}

src/NativeDateField.js

@@ -4,8 +4,8 @@ Native date field.
 Contains common logic for final components Date and DateTime.
 */
 import React from "react";
-import TextField from "@material-ui/core/TextField";
 import type { Localization } from "./types";
+import Text from "./Text";
 
 type Props = {
     onChangeValidate: any,
@@ -15,20 +15,21 @@ type Props = {
     localization: Localization
 };
 
-const NativeDateField = ({
-    form,
-    value,
-    type,
-    onChangeValidate,
-    localization: { getLocalizedString, getLocalizedDate }
-}: Props) => (
-    <TextField
-        label={getLocalizedString(form.title)}
-        type={type}
-        value={getLocalizedDate(value)}
-        InputLabelProps={{ shrink: true }}
-        onChange={onChangeValidate}
-        disabled={form.readonly}
-    />
-);
+const NativeDateField = (props: Props) => {
+    const {
+        value,
+        localization: { getLocalizedDate },
+        form,
+        type
+    } = props;
+    return (
+        <Text
+            {...props}
+            form={Object.assign({}, form, { type })}
+            value={getLocalizedDate(value)}
+            otherProps={{ InputLabelProps: { shrink: true } }}
+        />
+    );
+};
+
 export default NativeDateField;

src/Number.js

@@ -3,12 +3,9 @@
  * Created by steve on 15/09/15.
  */
 import React from "react";
-import FormControl from "@material-ui/core/FormControl";
-import FormHelperText from "@material-ui/core/FormHelperText";
-import Input from "@material-ui/core/Input";
-import InputLabel from "@material-ui/core/InputLabel";
 import ComposedComponent from "./ComposedComponent";
 import type { Localization } from "./types";
+import Text from "./Text";
 
 type Props = {
     value: any,
@@ -29,38 +26,21 @@ type Props = {
  * There is no default number picker as part of Material-UI.
  * Instead, use a TextField and validate.
  */
-const NumberComponent = ({
-    form,
-    error,
-    onChangeValidate,
-    value,
-    localization: { getLocalizedString, getLocalizedNumber }
-}: Props) => {
+const NumberComponent = (props: Props) => {
+    const {
+        form,
+        value,
+        localization: { getLocalizedNumber }
+    } = props;
     let inputValue = value || value === 0 ? value : "";
     if (form.useLocalizer) inputValue = getLocalizedNumber(inputValue);
 
     return (
-        <FormControl fullWidth error={!!error}>
-            <InputLabel
-                htmlFor={`input-${form.key[0]}`}
-                required={form.required}
-            >
-                {getLocalizedString(form.title)}
-            </InputLabel>
-            <Input
-                id={`input-${form.key[0]}`}
-                type="string"
-                placeholder={getLocalizedString(form.placeholder)}
-                onChange={onChangeValidate}
-                value={inputValue}
-                disabled={form.readonly}
-            />
-            {Boolean(error || form.description) && (
-                <FormHelperText>
-                    {getLocalizedString(error || form.description)}
-                </FormHelperText>
-            )}
-        </FormControl>
+        <Text
+            {...props}
+            form={Object.assign({}, form, { type: "string" })}
+            value={inputValue}
+        />
     );
 };
 

src/Radios.js

@@ -36,7 +36,7 @@ class Radios extends Component<Props> {
                 // eslint-disable-next-line react/no-array-index-key
                 key={index}
                 control={<Radio />}
-                label={getLocalizedString(item.name)}
+                label={item.name && getLocalizedString(item.name)}
                 value={item.value}
                 disabled={form.readonly}
             />
@@ -53,8 +53,8 @@ class Radios extends Component<Props> {
         } = this.props;
         return (
             <FormControl component="fieldset" className={classes.formControl}>
-                <FormLabel component="legend">
-                    {getLocalizedString(form.title)}
+                <FormLabel component="legend" required={form.required}>
+                    {form.title && getLocalizedString(form.title)}
                 </FormLabel>
                 <RadioGroup
                     value={value}

src/Select.js

@@ -56,15 +56,19 @@ class Select extends Component<Props, State> {
         const menuItems = form.titleMap.map((item, idx) => (
             // eslint-disable-next-line react/no-array-index-key
             <MenuItem key={idx} value={item.value}>
-                {getLocalizedString(item.name)}
+                {item.name && getLocalizedString(item.name)}
             </MenuItem>
         ));
         return (
             <FormControl fullWidth>
-                <InputLabel>{getLocalizedString(form.title)}</InputLabel>
+                <InputLabel required={form.required}>
+                    {form.title && getLocalizedString(form.title)}
+                </InputLabel>
                 <MuiSelect
                     value={currentValue || ""}
-                    placeholder={getLocalizedString(form.title)}
+                    placeholder={
+                        form.placeholder && getLocalizedString(form.placeholder)
+                    }
                     disabled={form.readonly}
                     onChange={this.onSelected}
                 >

src/Text.js

@@ -14,10 +14,15 @@ type Props = {
     setDefault: any,
     error: any,
     onChangeValidate: any,
-    localization: Localization
+    localization: Localization,
+    otherProps?: any
 };
 
 class Text extends React.Component<Props> {
+    static defaultProps = {
+        otherProps: undefined
+    };
+
     constructor(props) {
         super(props);
         const { model, form, value, setDefault } = this.props;
@@ -31,19 +36,27 @@ class Text extends React.Component<Props> {
             error,
             value,
             onChangeValidate,
-            localization: { getLocalizedString }
+            localization: { getLocalizedString },
+            otherProps
         } = this.props;
         return (
             <TextField
                 type={form.type}
-                label={getLocalizedString(form.title)}
-                placeholder={getLocalizedString(form.placeholder)}
-                helperText={getLocalizedString(error || form.description)}
+                label={form.title && getLocalizedString(form.title)}
+                placeholder={
+                    form.placeholder && getLocalizedString(form.placeholder)
+                }
+                helperText={
+                    (error || form.description) &&
+                    getLocalizedString(error || form.description)
+                }
                 error={!!error}
                 onChange={onChangeValidate}
                 value={value || ""}
                 disabled={form.readonly}
                 fullWidth
+                required={form.required}
+                {...otherProps}
             />
         );
     }

src/TextArea.js

@@ -3,9 +3,9 @@
  * Created by steve on 15/09/15.
  */
 import React from "react";
-import TextField from "@material-ui/core/TextField";
 import ComposedComponent from "./ComposedComponent";
 import type { Localization } from "./types";
+import Text from "./Text";
 
 type Props = {
     form: any,
@@ -15,27 +15,18 @@ type Props = {
     localization: Localization
 };
 
-const TextArea = ({
-    form,
-    value,
-    error,
-    onChangeValidate,
-    localization: { getLocalizedString }
-}: Props) => (
-    <TextField
-        type={form.type}
-        label={getLocalizedString(form.title)}
-        placeholder={getLocalizedString(form.placeholder)}
-        helperText={getLocalizedString(error || form.description)}
-        onChange={onChangeValidate}
-        error={!!error}
-        value={value}
-        multiline
-        rows={form.rows}
-        rowsMax={form.rowsMax}
-        disabled={form.readonly}
-        fullWidth
-    />
-);
+const TextArea = (props: Props) => {
+    const { form } = props;
+    return (
+        <Text
+            {...props}
+            otherProps={{
+                multiline: true,
+                rows: form.rows,
+                rowsMax: form.rowsMax
+            }}
+        />
+    );
+};
 
 export default ComposedComponent(TextArea);

src/TripleBoolean.js

@@ -10,6 +10,7 @@ import {
     FormControlLabel,
     FormGroup
 } from "@material-ui/core";
+import FormLabel from "@material-ui/core/FormLabel";
 import ComposedComponent from "./ComposedComponent";
 import type { Localization } from "./types";
 
@@ -64,15 +65,17 @@ class TripleBoolean extends Component<Props, State> {
 
     displaySwitch() {
         const {
-            form: { title, yesLabel, noLabel, clearButtonLabel },
+            form: { title, yesLabel, noLabel, clearButtonLabel, required },
             onChangeValidate,
             value,
             localization: { getLocalizedString }
         } = this.props;
         const { yesChecked, noChecked } = this.state;
         return (
             <div style={this.divStyle}>
-                {getLocalizedString(title)}
+                <FormLabel required={required}>
+                    {title && getLocalizedString(title)}
+                </FormLabel>
                 <br />
                 <FormGroup>
                     <FormControlLabel

src/__tests__/DateCapture-test.js

@@ -43,8 +43,6 @@ describe("Date capture main test", () => {
                 onModelChange={onModelChange}
             />
         );
-        expect(result.find("input")[0].attribs.value).toEqual(
-            new Date("1947-01-8").toISOString().slice(0, 10)
-        );
+        expect(result.find("input")[0].attribs.value).toEqual("1947-01-8");
     });
 });