react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
134 lines • 6.33 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_i18next_1 = require("react-i18next");
var react_redux_1 = require("react-redux");
var redux_1 = require("redux");
var redux_form_1 = require("redux-form");
var enums_1 = require("../../utils/enums");
var ScrollView_1 = require("../../primitives/ScrollView/ScrollView");
var theme_1 = require("../../utils/theme");
var createStyles_1 = require("../../decorators/createStyles/createStyles");
var Text_1 = require("../../primitives/Text/Text");
var View_1 = require("../../primitives/View/View");
var common_1 = require("../../utils/common");
var FormItem_1 = require("./FormItem");
var REQUIRED_FIELD = 'REQUIRED_FIELD';
var styles = function () {
var _a;
return ({
container: {
width: 'auto',
},
noShrinkContainer: {
width: '100%',
flexShrink: 0,
},
innerContainer: (_a = {},
_a[theme_1.web] = {
overflowY: 'auto',
flexGrow: 1,
flexShrink: 0,
},
_a.margin = theme_1.appTheme.defaultVerticalMargin,
_a.flexDirection = 'column',
_a.overflow = 'hidden',
_a)
});
};
var FormField = redux_form_1.Field;
var CForm = /** @class */ (function (_super) {
__extends(CForm, _super);
function CForm(props) {
var _this = _super.call(this, props) || this;
_this._bindedOnTouchDict = {};
_this._fieldErrorCheckers = {};
if (!!props.validate) {
_this._fieldErrorCheckers['form'] = [props.validate];
}
for (var _i = 0, _a = props.fieldDefinitions; _i < _a.length; _i++) {
var field = _a[_i];
_this._bindedOnTouchDict[field.field] = _this.props.touch.bind(_this, props.form, field.field);
if (props.alwaysTouched) {
_this.props.touch(props.form, field.field);
}
_this._fieldErrorCheckers[field.field] = !!field.fieldErrorChecker
? [field.fieldErrorChecker]
: [];
if (props.allRequired || field.isRequired) {
_this._fieldErrorCheckers[field.field].push(function (value) { return !!value || value === 0 ? undefined : REQUIRED_FIELD; });
}
if (field.type === enums_1.FORM_INPUT_TYPES.TEXT) {
_this._fieldErrorCheckers[field.field].push(function (value) { return !!value && !!value.error ? value.error : undefined; });
}
// if (field.type == FORM_INPUT_TYPES.ARRAY_OF_OBJECTS) {
// this._fieldErrorCheckers[field.field].push(
// ( value: DBValue ) => {
// for (let index in value) {
// if (!!value[index]._errors) {
// for (let err in value[index]._errors) {
// if (!!value[index]._errors[err]) {
// return FIELD_HAS_ERRORS;
// }
// }
// }
// }
// return undefined;
// }
// )
// }
}
return _this;
}
CForm.prototype.componentWillReceiveProps = function (nextProps) {
if (!this.props.showErrors && !!nextProps.showErrors) {
for (var _i = 0, _a = nextProps.fieldDefinitions; _i < _a.length; _i++) {
var field = _a[_i];
if (nextProps.allRequired || field.isRequired) {
this._bindedOnTouchDict[field.field]();
}
}
}
if (nextProps.enableReinitialize &&
!common_1.shallowEqual(this.props.initialValues, nextProps.initialValues) &&
!!nextProps.initialValues) {
for (var field in nextProps.initialValues) {
nextProps.touch(nextProps.form, field);
}
}
};
CForm.prototype.render = function () {
var _this = this;
var _a = this.props, classes = _a.classes, fieldDefinitions = _a.fieldDefinitions, containerStyle = _a.containerStyle, formError = _a.formError, t = _a.t, noShrink = _a.noShrink, formClasses = _a.formClasses;
return (React.createElement(View_1.View, { style: [
noShrink ? classes.noShrinkContainer : classes.container,
formClasses ? formClasses.formContainer : ''
] },
React.createElement(ScrollView_1.ScrollView, { style: [classes.innerContainer, containerStyle] },
fieldDefinitions.map(function (formField, index) {
return React.createElement(FormField, { key: formField.field, name: formField.field, component: FormItem_1.FormItem, fieldDefinition: formField, validate: _this._fieldErrorCheckers[formField.field], style: [{ flexShrink: 0 }, formClasses ? formClasses.formField : ''], onTouch: _this._bindedOnTouchDict[formField.field] });
}),
!!formError &&
React.createElement(Text_1.Text, { style: { color: 'red', } }, t(formError)))));
};
return CForm;
}(React.PureComponent));
var componentName = 'Form';
exports.Form = redux_1.compose(redux_form_1.reduxForm({}), react_i18next_1.translate(), react_redux_1.connect(function (state, ownProps) {
var formName = ownProps.form;
return {
formError: common_1.getNestedField(state.form[formName], ['syncErrors', 'form']),
showErrors: common_1.getNestedField(state.formHelpers[formName], ['showErrors']),
};
}, {}), createStyles_1.createStyles(styles, componentName))(CForm);
//# sourceMappingURL=Form.js.map