naeemba · naeemba · Dec 24, 2018 · Dec 23, 2018 · Dec 23, 2018
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Changed
 
+## 0.6.6 - 2018-12-23
+### Added
+- Add support for localization #144. Thanks @naeemba
+
+### Changed
+- Validation behaviour on load #136 Thanks @naeemba
+
+
 ## 0.6.5 - 2018-12-18
 ### Added
 

diff --git a/lib/Array.js b/lib/Array.js
@@ -138,7 +138,8 @@ var Array = function (_Component) {
                 builder = _props2.builder,
                 model = _props2.model,
                 mapper = _props2.mapper,
-                onChange = _props2.onChange;
+                onChange = _props2.onChange,
+                getLocalizedString = _props2.localization.getLocalizedString;
             var stateModel = this.state.model;
 
             var arrays = [];
@@ -183,7 +184,7 @@ var Array = function (_Component) {
                     _react2.default.createElement(
                         _Typography2.default,
                         { variant: "h6" },
-                        form.title
+                        getLocalizedString(form.title)
                     ),
                     _react2.default.createElement(
                         "div",

diff --git a/lib/Checkbox.js b/lib/Checkbox.js
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
@@ -28,67 +26,28 @@ var _ComposedComponent2 = _interopRequireDefault(_ComposedComponent);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var FormCheckbox = function FormCheckbox(_ref) {
+    var form = _ref.form,
+        value = _ref.value,
+        getLocalizedString = _ref.localization.getLocalizedString,
+        onChangeValidate = _ref.onChangeValidate;
+    return _react2.default.createElement(
+        _FormGroup2.default,
+        { row: true },
+        _react2.default.createElement(_FormControlLabel2.default, {
+            className: form.className,
+            label: getLocalizedString(form.title),
+            control: _react2.default.createElement(_Checkbox2.default, {
+                name: form.key.slice(-1)[0],
+                value: form.key.slice(-1)[0],
+                checked: value || false,
+                disabled: form.readonly,
+                onChange: onChangeValidate
+            })
+        })
+    );
+};
 /**
  * Created by steve on 20/09/15.
  */
-
-
-var FormCheckbox = function (_Component) {
-    _inherits(FormCheckbox, _Component);
-
-    function FormCheckbox() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
-        _classCallCheck(this, FormCheckbox);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormCheckbox.__proto__ || Object.getPrototypeOf(FormCheckbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (e) {
-            var onChangeValidate = _this.props.onChangeValidate;
-
-            onChangeValidate(e);
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(FormCheckbox, [{
-        key: "render",
-        value: function render() {
-            var _this2 = this;
-
-            var _props = this.props,
-                form = _props.form,
-                value = _props.value;
-
-            return _react2.default.createElement(
-                _FormGroup2.default,
-                { row: true },
-                _react2.default.createElement(_FormControlLabel2.default, {
-                    className: form.className,
-                    label: form.title,
-                    control: _react2.default.createElement(_Checkbox2.default, {
-                        name: form.key.slice(-1)[0],
-                        value: form.key.slice(-1)[0],
-                        checked: value || false,
-                        disabled: form.readonly,
-                        onChange: function onChange(e) {
-                            return _this2.handleChange(e);
-                        }
-                    })
-                })
-            );
-        }
-    }]);
-
-    return FormCheckbox;
-}(_react.Component);
-
 exports.default = (0, _ComposedComponent2.default)(FormCheckbox);
diff --git a/lib/ComposedComponent.js b/lib/ComposedComponent.js
@@ -53,16 +53,25 @@ exports.default = function (ComposedComponent) {
 
             var _this$props = _this.props,
                 errorText = _this$props.errorText,
-                form = _this$props.form;
+                form = _this$props.form,
+                showErrors = _this$props.showErrors;
 
             _this.onChangeValidate = _this.onChangeValidate.bind(_this);
             var value = defaultValue(_this.props);
             var validationResult = _utils2.default.validate(form, value);
-            _this.state = {
-                value: value,
-                valid: !!(validationResult.valid || !value),
-                error: !validationResult.valid && (value ? validationResult.error.message : null) || errorText
-            };
+            if (!showErrors) {
+                _this.state = {
+                    value: value,
+                    valid: true,
+                    error: ""
+                };
+            } else {
+                _this.state = {
+                    value: value,
+                    valid: !!(validationResult.valid || !value),
+                    error: !validationResult.valid && (value ? validationResult.error.message : null) || errorText
+                };
+            }
             return _this;
         }
 
@@ -143,7 +152,16 @@ exports.default = function (ComposedComponent) {
             key: "getDerivedStateFromProps",
             value: function getDerivedStateFromProps(nextProps) {
                 var value = defaultValue(nextProps);
+                var showErrors = nextProps.showErrors;
+
                 var validationResult = _utils2.default.validate(nextProps.form, value);
+                if (!showErrors) {
+                    return {
+                        value: value,
+                        valid: true,
+                        error: ""
+                    };
+                }
                 return {
                     value: value,
                     valid: validationResult.valid,

diff --git a/lib/FieldSet.js b/lib/FieldSet.js
@@ -40,7 +40,8 @@ var FieldSet = function FieldSet(_ref) {
         builder = _ref.builder,
         model = _ref.model,
         onChange = _ref.onChange,
-        classes = _ref.classes;
+        classes = _ref.classes,
+        getLocalizedString = _ref.localization.getLocalizedString;
 
     var forms = form.items.map(function (f, index) {
         return builder(f, model, index, mapper, onChange, builder);
@@ -52,7 +53,7 @@ var FieldSet = function FieldSet(_ref) {
         _react2.default.createElement(
             _FormLabel2.default,
             { component: "legend" },
-            form.title
+            getLocalizedString(form.title)
         ),
         _react2.default.createElement(
             "div",

diff --git a/lib/MultiSelect.js b/lib/MultiSelect.js
@@ -112,7 +112,8 @@ var MultiSelect = function (_Component) {
         value: function render() {
             var _props = this.props,
                 form = _props.form,
-                classes = _props.classes;
+                classes = _props.classes,
+                getLocalizedString = _props.localization.getLocalizedString;
             var currentValue = this.state.currentValue;
 
             var getTitle = _utils2.default.getTitleByValue.bind(this, form.titleMap);
@@ -124,7 +125,7 @@ var MultiSelect = function (_Component) {
                         value: item.value,
                         className: currentValue.indexOf(item.value) === -1 ? classes.menuItem : classes.selectedMenuItem
                     },
-                    item.name
+                    getLocalizedString(item.name)
                 );
             });
             return _react2.default.createElement(
@@ -133,14 +134,14 @@ var MultiSelect = function (_Component) {
                 _react2.default.createElement(
                     _InputLabel2.default,
                     null,
-                    form.title
+                    getLocalizedString(form.title)
                 ),
                 _react2.default.createElement(
                     _Select2.default,
                     {
                         multiple: true,
                         value: currentValue || "",
-                        placeholder: form.title,
+                        placeholder: getLocalizedString(form.title),
                         disabled: form.readonly,
                         onChange: this.onSelected,
                         MenuProps: MenuProps,
@@ -151,7 +152,7 @@ var MultiSelect = function (_Component) {
                                 selected.map(function (value) {
                                     return _react2.default.createElement(_Chip2.default, {
                                         key: value,
-                                        label: getTitle(value),
+                                        label: getLocalizedString(getTitle(value)),
                                         className: classes.chip
                                     });
                                 })

diff --git a/lib/NativeDateField.js b/lib/NativeDateField.js
@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-/*
-Native date field. 
-Contains common logic for final components Date and DateTime.
-*/
-
-
 var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
@@ -21,23 +14,25 @@ var _TextField2 = _interopRequireDefault(_TextField);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/*
+Native date field. 
+Contains common logic for final components Date and DateTime.
+*/
 var NativeDateField = function NativeDateField(_ref) {
     var form = _ref.form,
         value = _ref.value,
         type = _ref.type,
-        onChangeValidate = _ref.onChangeValidate;
-
-    var fieldValue = value && (typeof value === "undefined" ? "undefined" : _typeof(value)) === "object" && value.toISOString().slice(0, 10) || value;
-    if (!fieldValue) fieldValue = "";
-    if (fieldValue.length > 0) fieldValue = new Date(fieldValue).toISOString().slice(0, 10);
+        onChangeValidate = _ref.onChangeValidate,
+        _ref$localization = _ref.localization,
+        getLocalizedString = _ref$localization.getLocalizedString,
+        getLocalizedDate = _ref$localization.getLocalizedDate;
     return _react2.default.createElement(_TextField2.default, {
-        label: form.title,
+        label: getLocalizedString(form.title),
         type: type,
-        value: fieldValue,
+        value: getLocalizedDate(value),
         InputLabelProps: { shrink: true },
         onChange: onChangeValidate,
         disabled: form.readonly
     });
 };
-
 exports.default = NativeDateField;
diff --git a/lib/Number.js b/lib/Number.js
@@ -42,27 +42,37 @@ var NumberComponent = function NumberComponent(_ref) {
     var form = _ref.form,
         error = _ref.error,
         onChangeValidate = _ref.onChangeValidate,
-        value = _ref.value;
+        value = _ref.value,
+        _ref$localization = _ref.localization,
+        getLocalizedString = _ref$localization.getLocalizedString,
+        getLocalizedNumber = _ref$localization.getLocalizedNumber;
+
+    var inputValue = value || value === 0 ? value : "";
+    if (form.useLocalizer) inputValue = getLocalizedNumber(inputValue);
+
     return _react2.default.createElement(
         _FormControl2.default,
         { fullWidth: true, error: !!error },
         _react2.default.createElement(
             _InputLabel2.default,
-            { htmlFor: "input-" + form.key[0], required: form.required },
-            form.title
+            {
+                htmlFor: "input-" + form.key[0],
+                required: form.required
+            },
+            getLocalizedString(form.title)
         ),
         _react2.default.createElement(_Input2.default, {
             id: "input-" + form.key[0],
             type: "string",
-            placeholder: form.placeholder,
+            placeholder: getLocalizedString(form.placeholder),
             onChange: onChangeValidate,
-            value: value || value === 0 ? value : "",
+            value: inputValue,
             disabled: form.readonly
         }),
         Boolean(error || form.description) && _react2.default.createElement(
             _FormHelperText2.default,
             null,
-            error || form.description
+            getLocalizedString(error || form.description)
         )
     );
 };

diff --git a/lib/Radios.js b/lib/Radios.js
@@ -70,12 +70,14 @@ var Radios = function (_Component) {
         }
 
         return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Radios.__proto__ || Object.getPrototypeOf(Radios)).call.apply(_ref, [this].concat(args))), _this), _this.renderItems = function (form) {
+            var getLocalizedString = _this.props.localization.getLocalizedString;
+
             return form.titleMap.map(function (item, index) {
                 return _react2.default.createElement(_FormControlLabel2.default
                 // eslint-disable-next-line react/no-array-index-key
                 , { key: index,
                     control: _react2.default.createElement(_Radio2.default, null),
-                    label: item.name,
+                    label: getLocalizedString(item.name),
                     value: item.value,
                     disabled: form.readonly
                 });
@@ -90,15 +92,16 @@ var Radios = function (_Component) {
                 classes = _props.classes,
                 form = _props.form,
                 value = _props.value,
-                onChangeValidate = _props.onChangeValidate;
+                onChangeValidate = _props.onChangeValidate,
+                getLocalizedString = _props.localization.getLocalizedString;
 
             return _react2.default.createElement(
                 _FormControl2.default,
                 { component: "fieldset", className: classes.formControl },
                 _react2.default.createElement(
                     _FormLabel2.default,
                     { component: "legend" },
-                    form.title
+                    getLocalizedString(form.title)
                 ),
                 _react2.default.createElement(
                     _RadioGroup2.default,