react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
161 lines • 7.82 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 __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_i18next_1 = require("react-i18next");
var redux_1 = require("redux");
var FormItem_1 = require("../../redux/FormComponents/FormItem");
var __1 = require("../../");
var theme_1 = require("../../utils/theme");
var FIELDS_MIN_WIDTH = 250;
var styles = function () {
var _a;
return ({
container: {
flexDirection: 'column',
flexGrow: 1,
flexShrink: 0,
margin: theme_1.appTheme.defaultVerticalMargin,
},
objectContainer: (_a = {
width: '100%',
flexDirection: 'column'
},
_a[theme_1.web] = {
border: '1px solid #000000',
},
_a),
objectContainerWrap: {
flexWrap: 'wrap',
flexDirection: 'row',
},
formItemContainer: {
flex: 1,
margin: theme_1.appTheme.defaultVerticalMargin,
minWidth: FIELDS_MIN_WIDTH,
width: '100%',
},
});
};
var CArrayOfObjects = /** @class */ (function (_super) {
__extends(CArrayOfObjects, _super);
function CArrayOfObjects(props) {
var _this = _super.call(this, props) || this;
_this._totalAddedObjectsCount = 0;
if (!props.value || (!!props.value && props.value.length === 0)) {
_this.addObject();
}
_this._totalAddedObjectsCount = props.value ? props.value.length + 1 : 0;
_this._bindedAddObject = _this.addObject.bind(_this);
_this._bindedRemoveObject = _this.removeObject.bind(_this);
return _this;
}
CArrayOfObjects.prototype.onItemChange = function (objectIndex, field, newValue) {
var _a, _b;
var _c = this.props, value = _c.value, fields = _c.fields, onChange = _c.onChange;
var crtField = null;
for (var _i = 0, fields_1 = fields; _i < fields_1.length; _i++) {
var objField = fields_1[_i];
if (objField.field == field) {
crtField = objField;
break;
}
}
if (objectIndex >= value.length) {
return;
}
var newFieldValue = value.slice(0, objectIndex).concat([
__assign({}, value[objectIndex], (_a = {}, _a[field] = newValue, _a))
], value.slice(objectIndex + 1));
var error = !!crtField && !!crtField.fieldErrorChecker && crtField.fieldErrorChecker(newValue);
if (!!error) {
newFieldValue[objectIndex]._errors = __assign({}, (newFieldValue[objectIndex]._errors || {}), (_b = {}, _b[field] = error, _b));
}
else {
if (!!newFieldValue[objectIndex]._errors) {
delete newFieldValue[objectIndex]._errors;
}
}
onChange(newFieldValue);
!!crtField && !!crtField.extraOnChange && crtField.extraOnChange(newValue, !!error);
};
CArrayOfObjects.prototype.getValue = function (objectIndex, field) {
var value = this.props.value;
if (!!value && !!value[objectIndex] && !!value[objectIndex]) {
return value[objectIndex][field];
}
return undefined;
};
CArrayOfObjects.prototype.getError = function (objectIndex, field) {
var value = this.props.value;
return __1.getNestedField(value[objectIndex], ['_errors', field]) || undefined;
};
CArrayOfObjects.prototype.addObject = function () {
var _a = this.props, value = _a.value, onChange = _a.onChange;
onChange((value || []).concat([{ _overallIndex: this._totalAddedObjectsCount++ }]));
};
CArrayOfObjects.prototype.removeObject = function (index) {
var _a = this.props, value = _a.value, onChange = _a.onChange;
onChange((value || []).filter(function (val, valueIndex) { return index !== valueIndex; }));
};
CArrayOfObjects.prototype.render = function () {
var _this = this;
// let {classes, title, fields, t, wrapFields, value, error, field,} = this.props;
var _a = this.props, classes = _a.classes, title = _a.title, fields = _a.fields, t = _a.t, wrapFields = _a.wrapFields, value = _a.value, error = _a.error;
return (React.createElement(__1.View, { style: classes.container },
!!title && React.createElement(__1.Text, null, t(title)),
!!value && value.map(function (objValue, objectIndex) {
return React.createElement(__1.View, { key: title + '_item_' + objectIndex.toString(), style: [classes.objectContainer, wrapFields ? classes.objectContainerWrap : {}] },
fields.map(function (fieldDefinition, fieldIndex) { return (React.createElement(__1.View, { style: classes.formItemContainer, key: title + '_item_' + objectIndex + '_field_' + fieldIndex },
React.createElement(FormItem_1.FormItem
// style={{width: '100%',}}
, {
// style={{width: '100%',}}
fieldDefinition:
// fieldDefinition.type === FORM_INPUT_TYPES.ARRAY_PHOTO_UPLOAD ||
// fieldDefinition.type === FORM_INPUT_TYPES.PHOTO_UPLOAD
// ? {
// ...fieldDefinition,
// field: field + '_' +
// fieldDefinition.field + '_' +
// objValue._overallIndex !== null &&
// objValue._overallIndex !== undefined
// ? objValue._overallIndex
// : objectIndex,
// }
// : fieldDefinition
fieldDefinition, input: {
onChange: _this.onItemChange.bind(_this, objectIndex, fieldDefinition.field),
value: _this.getValue(objectIndex, fieldDefinition.field),
}, meta: { error: _this.getError(objectIndex, fieldDefinition.field) } }))); }),
React.createElement(__1.Button
// icon={iconList.cancel}
, {
// icon={iconList.cancel}
title: 'Remove object', onPress: _this.removeObject.bind(_this, objectIndex) }));
}),
React.createElement(__1.Button, { title: 'Add new object', onPress: this._bindedAddObject }),
!!error && React.createElement(__1.Text, { style: { color: 'red' } }, t(error))));
};
return CArrayOfObjects;
}(React.PureComponent));
var componentName = 'ArrayOfObjects';
exports.ArrayOfObjects = redux_1.compose(react_i18next_1.translate(), __1.createStyles(styles, componentName))(CArrayOfObjects);
//# sourceMappingURL=ArrayOfObjects.js.map