From 868b9eaf36de9877c62a5f09bd580b5a2ae739f2 Mon Sep 17 00:00:00 2001
From: Naeem Baghi <naeem@darkpos.com>
Date: Tue, 25 Dec 2018 15:36:21 +0330
Subject: [PATCH 1/2] Examples: add title for arrays

---
 example/data/array.json       | 1 +
 example/data/simplearray.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/example/data/array.json b/example/data/array.json
index 63cdaab4..cf2806ec 100644
--- a/example/data/array.json
+++ b/example/data/array.json
@@ -6,6 +6,7 @@
     "properties": {
       "comments": {
         "type": "array",
+        "title": "Comments",
         "maxItems": 2,
         "items": {
           "type": "object",
diff --git a/example/data/simplearray.json b/example/data/simplearray.json
index bb18a0d9..4af9f97b 100644
--- a/example/data/simplearray.json
+++ b/example/data/simplearray.json
@@ -6,6 +6,7 @@
         "properties": {
             "comments": {
                 "type": "array",
+                "title": "Comments",
                 "maxItems": 2,
                 "items": {
                     "type": "object",

From 4990b7eca821953b3df6b1df38a105d57d136038 Mon Sep 17 00:00:00 2001
From: Naeem Baghi <naeem@darkpos.com>
Date: Tue, 25 Dec 2018 16:02:05 +0330
Subject: [PATCH 2/2] Add asterisk for required field's labels and some minor
 improvements

---
 src/Array.js                      |  8 +++---
 src/Checkbox.js                   |  2 +-
 src/FieldSet.js                   |  4 +--
 src/MultiSelect.js                | 15 ++++++++---
 src/NativeDateField.js            | 35 ++++++++++++------------
 src/Number.js                     | 44 +++++++++----------------------
 src/Radios.js                     |  6 ++---
 src/Select.js                     | 10 ++++---
 src/Text.js                       | 23 ++++++++++++----
 src/TextArea.js                   | 37 ++++++++++----------------
 src/TripleBoolean.js              |  7 +++--
 src/__tests__/DateCapture-test.js |  4 +--
 12 files changed, 96 insertions(+), 99 deletions(-)

diff --git a/src/Array.js b/src/Array.js
index 2b9de922..ab438812 100644
--- a/src/Array.js
+++ b/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
diff --git a/src/Checkbox.js b/src/Checkbox.js
index b3e8d91c..655e4158 100644
--- a/src/Checkbox.js
+++ b/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]}
diff --git a/src/FieldSet.js b/src/FieldSet.js
index c27aabb4..a246184b 100644
--- a/src/FieldSet.js
+++ b/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>
diff --git a/src/MultiSelect.js b/src/MultiSelect.js
index d3ddbf38..b2d12504 100644
--- a/src/MultiSelect.js
+++ b/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}
                                 />
                             ))}
diff --git a/src/NativeDateField.js b/src/NativeDateField.js
index 384bf586..aa090a8e 100644
--- a/src/NativeDateField.js
+++ b/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;
diff --git a/src/Number.js b/src/Number.js
index 2bd31e01..751d9ade 100755
--- a/src/Number.js
+++ b/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}
+        />
     );
 };
 
diff --git a/src/Radios.js b/src/Radios.js
index b69211e6..d27f164e 100644
--- a/src/Radios.js
+++ b/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}
diff --git a/src/Select.js b/src/Select.js
index 08a5053b..35313b29 100644
--- a/src/Select.js
+++ b/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}
                 >
diff --git a/src/Text.js b/src/Text.js
index 5b4f5369..bc7857ab 100755
--- a/src/Text.js
+++ b/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}
             />
         );
     }
diff --git a/src/TextArea.js b/src/TextArea.js
index 54fc4f4b..9d1d9d4a 100644
--- a/src/TextArea.js
+++ b/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);
diff --git a/src/TripleBoolean.js b/src/TripleBoolean.js
index 54f187bf..eccd1ff9 100644
--- a/src/TripleBoolean.js
+++ b/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,7 +65,7 @@ class TripleBoolean extends Component<Props, State> {
 
     displaySwitch() {
         const {
-            form: { title, yesLabel, noLabel, clearButtonLabel },
+            form: { title, yesLabel, noLabel, clearButtonLabel, required },
             onChangeValidate,
             value,
             localization: { getLocalizedString }
@@ -72,7 +73,9 @@ class TripleBoolean extends Component<Props, State> {
         const { yesChecked, noChecked } = this.state;
         return (
             <div style={this.divStyle}>
-                {getLocalizedString(title)}
+                <FormLabel required={required}>
+                    {title && getLocalizedString(title)}
+                </FormLabel>
                 <br />
                 <FormGroup>
                     <FormControlLabel
diff --git a/src/__tests__/DateCapture-test.js b/src/__tests__/DateCapture-test.js
index 6be216cc..6f40bbab 100644
--- a/src/__tests__/DateCapture-test.js
+++ b/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");
     });
 });