diff --git a/CHANGELOG.md b/CHANGELOG.md index e8b62447..d529dcd7 100644 --- 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 index 54199fe8..d03ca60d 100644 --- 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 index b12e3892..a1ed53c7 100644 --- 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); \ No newline at end of file diff --git a/lib/ComposedComponent.js b/lib/ComposedComponent.js index 76b525ee..8f13fbbc 100755 --- 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 index 829589fa..5845ea2d 100644 --- 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 index 9d7c9429..afa36431 100644 --- 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 index f900e0dd..e8b395aa 100644 --- 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; \ No newline at end of file diff --git a/lib/Number.js b/lib/Number.js index 6ffd0dbb..4116f539 100755 --- 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 index bf0a5155..b92ea3a6 100644 --- 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,7 +92,8 @@ 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, @@ -98,7 +101,7 @@ var Radios = function (_Component) { _react2.default.createElement( _FormLabel2.default, { component: "legend" }, - form.title + getLocalizedString(form.title) ), _react2.default.createElement( _RadioGroup2.default, diff --git a/lib/SchemaForm.js b/lib/SchemaForm.js index 464ee1e0..0124c729 100644 --- a/lib/SchemaForm.js +++ b/lib/SchemaForm.js @@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", { 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 _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; }; +/** + * Created by steve on 11/09/15. + */ + + var _react = require("react"); var _react2 = _interopRequireDefault(_react); @@ -81,10 +87,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons 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; } -/** - * Created by steve on 11/09/15. - */ +var formatDate = function formatDate(date) { + var value = date && (typeof date === "undefined" ? "undefined" : _typeof(date)) === "object" && date.toISOString().slice(0, 10) || date; + if (!value) value = ""; + if (value.length > 0) value = new Date(value).toISOString().slice(0, 10); + return value; +}; var SchemaForm = function (_Component) { _inherits(SchemaForm, _Component); @@ -120,6 +129,20 @@ var SchemaForm = function (_Component) { if ((0, _isNil2.default)(currentValue) && !(0, _isNil2.default)(value)) onModelChange(key, value, form.type, form); }; + _this.getLocalization = function () { + var localization = _this.props.localization; + + return { + getLocalizedString: localization && localization.getLocalizedString ? localization.getLocalizedString : function (value) { + return value; + }, + getLocalizedNumber: localization && localization.getLocalizedNumber ? localization.getLocalizedNumber : function (value) { + return value; + }, + getLocalizedDate: localization && localization.getLocalizedDate ? localization.getLocalizedDate : formatDate + }; + }; + _this.onChange = _this.onChange.bind(_this); _this.builder = _this.builder.bind(_this); return _this; @@ -138,7 +161,9 @@ var SchemaForm = function (_Component) { }, { key: "builder", value: function builder(form, model, index, mapper, onChange, _builder) { - var errors = this.props.errors; + var _props = this.props, + errors = _props.errors, + showErrors = _props.showErrors; var Field = this.mapper[form.type]; if (!Field) { @@ -162,7 +187,9 @@ var SchemaForm = function (_Component) { setDefault: this.setDefault, mapper: mapper, builder: _builder, - errorText: error + errorText: error, + localization: this.getLocalization(), + showErrors: showErrors }); } }, { @@ -170,14 +197,14 @@ var SchemaForm = function (_Component) { value: function render() { var _this2 = this; - var _props = this.props, - schema = _props.schema, - form = _props.form, - ignore = _props.ignore, - option = _props.option, - model = _props.model, - className = _props.className, - mapper = _props.mapper; + var _props2 = this.props, + schema = _props2.schema, + form = _props2.form, + ignore = _props2.ignore, + option = _props2.option, + model = _props2.model, + className = _props2.className, + mapper = _props2.mapper; var merged = _utils2.default.merge(schema, form, ignore, option); @@ -200,4 +227,8 @@ var SchemaForm = function (_Component) { return SchemaForm; }(_react.Component); +SchemaForm.defaultProps = { + localization: undefined, + showErrors: false +}; exports.default = SchemaForm; \ No newline at end of file diff --git a/lib/Select.js b/lib/Select.js index 4ff86dd1..79bc7856 100644 --- a/lib/Select.js +++ b/lib/Select.js @@ -71,7 +71,9 @@ var Select = function (_Component) { _createClass(Select, [{ key: "render", value: function render() { - var form = this.props.form; + var _props = this.props, + form = _props.form, + getLocalizedString = _props.localization.getLocalizedString; var currentValue = this.state.currentValue; var menuItems = form.titleMap.map(function (item, idx) { @@ -80,7 +82,7 @@ var Select = function (_Component) { _react2.default.createElement( _MenuItem2.default, { key: idx, value: item.value }, - item.name + getLocalizedString(item.name) ) ); }); @@ -90,13 +92,13 @@ var Select = function (_Component) { _react2.default.createElement( _InputLabel2.default, null, - form.title + getLocalizedString(form.title) ), _react2.default.createElement( _Select2.default, { value: currentValue || "", - placeholder: form.title, + placeholder: getLocalizedString(form.title), disabled: form.readonly, onChange: this.onSelected }, diff --git a/lib/Text.js b/lib/Text.js index abfa53a6..12a24a63 100755 --- a/lib/Text.js +++ b/lib/Text.js @@ -56,13 +56,14 @@ var Text = function (_React$Component) { form = _props.form, error = _props.error, value = _props.value, - onChangeValidate = _props.onChangeValidate; + onChangeValidate = _props.onChangeValidate, + getLocalizedString = _props.localization.getLocalizedString; return _react2.default.createElement(_TextField2.default, { type: form.type, - label: form.title, - placeholder: form.placeholder, - helperText: error || form.description, + label: getLocalizedString(form.title), + placeholder: getLocalizedString(form.placeholder), + helperText: getLocalizedString(error || form.description), error: !!error, onChange: onChangeValidate, value: value || "", diff --git a/lib/TextArea.js b/lib/TextArea.js index 20bd99a1..10ddfa60 100644 --- a/lib/TextArea.js +++ b/lib/TextArea.js @@ -22,12 +22,13 @@ var TextArea = function TextArea(_ref) { var form = _ref.form, value = _ref.value, error = _ref.error, - onChangeValidate = _ref.onChangeValidate; + onChangeValidate = _ref.onChangeValidate, + getLocalizedString = _ref.localization.getLocalizedString; return _react2.default.createElement(_TextField2.default, { type: form.type, - label: form.title, - placeholder: form.placeholder, - helperText: error || form.description, + label: getLocalizedString(form.title), + placeholder: getLocalizedString(form.placeholder), + helperText: getLocalizedString(error || form.description), onChange: onChangeValidate, error: !!error, value: value, diff --git a/lib/TripleBoolean.js b/lib/TripleBoolean.js index ed19cca5..fac35516 100644 --- a/lib/TripleBoolean.js +++ b/lib/TripleBoolean.js @@ -73,9 +73,14 @@ var TripleBoolean = function (_Component) { key: "displaySwitch", value: function displaySwitch() { var _props = this.props, - form = _props.form, + _props$form = _props.form, + title = _props$form.title, + yesLabel = _props$form.yesLabel, + noLabel = _props$form.noLabel, + clearButtonLabel = _props$form.clearButtonLabel, onChangeValidate = _props.onChangeValidate, - value = _props.value; + value = _props.value, + getLocalizedString = _props.localization.getLocalizedString; var _state = this.state, yesChecked = _state.yesChecked, noChecked = _state.noChecked; @@ -83,7 +88,7 @@ var TripleBoolean = function (_Component) { return _react2.default.createElement( "div", { style: this.divStyle }, - form.title, + getLocalizedString(title), _react2.default.createElement("br", null), _react2.default.createElement( _core.FormGroup, @@ -95,7 +100,7 @@ var TripleBoolean = function (_Component) { }, checked: yesChecked }), - label: "Yes" + label: yesLabel ? getLocalizedString(yesLabel) : "Yes" }), _react2.default.createElement(_core.FormControlLabel, { control: _react2.default.createElement(_core.Checkbox, { @@ -104,7 +109,7 @@ var TripleBoolean = function (_Component) { }, checked: noChecked }), - label: "No" + label: noLabel ? getLocalizedString(noLabel) : "No" }) ), value === "yes" || value === "no" ? _react2.default.createElement( @@ -117,7 +122,7 @@ var TripleBoolean = function (_Component) { return onChangeValidate(e, "unanswered"); } }, - "clear responce" + clearButtonLabel ? getLocalizedString(clearButtonLabel) : "clear response" ) : "" ); } diff --git a/lib/__tests__/ComposedComponent-test.js b/lib/__tests__/ComposedComponent-test.js index 9626637e..7662f108 100644 --- a/lib/__tests__/ComposedComponent-test.js +++ b/lib/__tests__/ComposedComponent-test.js @@ -68,7 +68,12 @@ describe("ComposedComponent", function () { var Composed = (0, _ComposedComponent2.default)(_Text2.default); - renderer.render(_react2.default.createElement(Composed, { form: cfg.form, model: cfg.model, mapper: cfg.mapper })); + renderer.render(_react2.default.createElement(Composed, { + form: cfg.form, + model: cfg.model, + mapper: cfg.mapper, + showErrors: true + })); var result = renderer.getRenderOutput(); diff --git a/lib/__tests__/Localizer-test.js b/lib/__tests__/Localizer-test.js new file mode 100644 index 00000000..c7be2378 --- /dev/null +++ b/lib/__tests__/Localizer-test.js @@ -0,0 +1,131 @@ +"use strict"; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _enzyme = require("enzyme"); + +var _enzymeAdapterReact = require("enzyme-adapter-react-16"); + +var _enzymeAdapterReact2 = _interopRequireDefault(_enzymeAdapterReact); + +var _SchemaForm = require("../SchemaForm"); + +var _SchemaForm2 = _interopRequireDefault(_SchemaForm); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +(0, _enzyme.configure)({ adapter: new _enzymeAdapterReact2.default() }); + +jest.dontMock("../ComposedComponent"); +jest.dontMock("../utils"); +jest.dontMock("lodash"); + +var getLocalizedString = function getLocalizedString(value) { + switch (value) { + case "first.name": + return "First Name"; + case "last.name": + return "Last Name"; + case "number.field": + return "Number Field"; + case "integer.field": + return "Integer Field"; + case "boolean.field": + return "Boolean Field"; + case "array.field": + return "Array Field"; + case "date.field": + return "Date Field"; + case "tBoolean.field": + return "T Boolean Field"; + default: + return value; + } +}; + +var localization = { + getLocalizedString: getLocalizedString +}; + +var config = { + form: ["firstName", "lastName", "numberField", "integerField", "booleanField", "dateField", "tBooleanField", "arrayField"], + schema: { + type: "object", + title: "Title", + properties: { + firstName: { + title: "first.name", + type: "string" + }, + lastName: { + title: "last.name", + type: "string" + }, + numberField: { + title: "number.field", + type: "string" + }, + integerField: { + title: "integer.field", + type: "integer" + }, + booleanField: { + title: "boolean.field", + type: "boolean" + }, + dateField: { + title: "date.field", + type: "date" + }, + tBooleanField: { + title: "tBoolean.field", + type: "date" + }, + arrayField: { + title: "array.field", + type: "boolean", + items: ["test1", "test2"] + } + } + } +}; + +describe("Localizer test", function () { + it("Schema that has localizer should render labels properly", function () { + var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_SchemaForm2.default, { + form: config.form, + schema: config.schema, + localization: localization + })); + var labels = wrapper.find("label"); + expect(wrapper.find("label").length).toBe(8); + labels.forEach(function (each, index) { + if (index === 0) expect(each.text()).toBe("First Name"); + if (index === 1) expect(each.text()).toBe("Last Name"); + if (index === 2) expect(each.text()).toBe("Number Field"); + if (index === 3) expect(each.text()).toBe("Integer Field"); + if (index === 4) expect(each.text()).toBe("Boolean Field"); + if (index === 5) expect(each.text()).toBe("Date Field"); + if (index === 6) expect(each.text()).toBe("T Boolean Field"); + if (index === 7) expect(each.find("Typography > span").text()).toBe("Array Field"); + }); + }); + + it("Schema that has not localizer should render labels properly", function () { + var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_SchemaForm2.default, { form: config.form, schema: config.schema })); + var labels = wrapper.find("label"); + expect(wrapper.find("label").length).toBe(8); + labels.forEach(function (each, index) { + if (index === 0) expect(each.text()).toBe("first.name"); + if (index === 1) expect(each.text()).toBe("last.name"); + if (index === 2) expect(each.text()).toBe("number.field"); + if (index === 3) expect(each.text()).toBe("integer.field"); + if (index === 4) expect(each.text()).toBe("boolean.field"); + if (index === 5) expect(each.text()).toBe("date.field"); + if (index === 6) expect(each.text()).toBe("tBoolean.field"); + if (index === 7) expect(each.find("Typography > span").text()).toBe("array.field"); + }); + }); +}); \ No newline at end of file diff --git a/lib/types/index.js b/lib/types/index.js new file mode 100644 index 00000000..9a390c31 --- /dev/null +++ b/lib/types/index.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/lib/types/localization.js b/lib/types/localization.js new file mode 100644 index 00000000..9a390c31 --- /dev/null +++ b/lib/types/localization.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/package.json b/package.json index 23b7e56f..1910e2d2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-schema-form", - "version": "0.6.5", + "version": "0.6.6", "description": "React json schema form", "keywords": [ "json schema",