@react-formless/core
Version:
Data-driven react forms library written in typescript
182 lines • 14.1 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__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;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.styledInputsRenderMap = exports.Row = exports.plainHtmlElementRenderMap = exports.plainHtmlRenderMap = exports.ListInput = exports.CollectionInput = exports.StyledTextArea = void 0;
var React = require("react");
var utils_1 = require("@react-formless/utils");
var styled_components_1 = require("styled-components");
var __1 = require("..");
var Render = function (p) { return (p.condition ? p.value() : null); };
var StyledTitle = styled_components_1.default.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: #666;\n padding: 0;\n margin: 6px 0;\n"], ["\n color: #666;\n padding: 0;\n margin: 6px 0;\n"])));
var Title = function (p) { return (React.createElement(Render, { condition: !utils_1.isEmpty(p.text), value: function () { return React.createElement(StyledTitle, null, p.text); } })); };
var StyledLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 0.8rem;\n color: #666;\n"], ["\n font-size: 0.8rem;\n color: #666;\n"])));
var Label = function (p) { return (React.createElement(Render, { condition: !utils_1.isEmpty(p.text),
// eslint-disable-next-line jsx-a11y/label-has-for
value: function () { return React.createElement(StyledLabel, { htmlFor: p.htmlFor }, p.text); } })); };
var StyledError = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: #f88;\n"], ["\n color: #f88;\n"])));
var Error = function (_a) {
var validationResult = _a.validationResult, visited = _a.visited;
return (React.createElement(StyledError, null, validationResult && visited && validationResult.type === "Err" ? validationResult.value : ""));
};
var sharedStyle = styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%;\n color: rgba(0, 0, 0, 0.87);\n overflow-wrap: break-word;\n outline: none;\n display: flex;\n line-height: 34px;\n font-size: 16px;\n border: 1px solid rgb(223, 225, 229);\n padding: 0px 6px;\n margin: 0px 0px 4px;\n box-sizing: border-box;\n &::placeholder {\n color: #ccc;\n }\n"], ["\n width: 100%;\n color: rgba(0, 0, 0, 0.87);\n overflow-wrap: break-word;\n outline: none;\n display: flex;\n line-height: 34px;\n font-size: 16px;\n border: 1px solid rgb(223, 225, 229);\n padding: 0px 6px;\n margin: 0px 0px 4px;\n box-sizing: border-box;\n &::placeholder {\n color: #ccc;\n }\n"])));
var StyledInput = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), sharedStyle);
var Input = function (p) {
var r = __1.getElementsRenderMap(p.renderOptions);
var inputProps = __1.getInputProps(p);
var type = p.schema.type === "number" ? "number" : p.schema.type === "password" ? "password" : "text";
return (React.createElement(React.Fragment, null,
React.createElement(r.Title, { text: p.schema.sectionTitle }),
React.createElement(r.Label, { text: p.schema.name, htmlFor: inputProps.id }),
React.createElement(StyledInput, __assign({}, inputProps, { type: type })),
React.createElement(r.Error, __assign({}, p.state))));
};
exports.StyledTextArea = styled_components_1.default.textarea(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), sharedStyle);
var TextAreaInput = function (p) {
var r = __1.getElementsRenderMap(p.renderOptions);
return (React.createElement(React.Fragment, null,
React.createElement(r.Title, { text: p.schema.sectionTitle }),
React.createElement(r.Label, { text: p.schema.name }),
React.createElement(exports.StyledTextArea, __assign({}, __1.getInputProps(p))),
React.createElement(r.Error, __assign({}, p.state))));
};
var RadioInput = function (p) {
var r = __1.getElementsRenderMap(p.renderOptions);
var _a = __1.getInputProps(p), onChange = _a.onChange, inputProps = __rest(_a, ["onChange"]);
var handleClick = function (value) { return function () { return (onChange ? onChange({ target: { value: value } }) : null); }; };
return (React.createElement(React.Fragment, null,
React.createElement(r.Title, { text: p.schema.sectionTitle }),
React.createElement(r.Label, { text: p.schema.name }),
p.schema.values.map(function (_a) {
var name = _a[0], value = _a[1];
return (React.createElement("div", { key: value, onClick: handleClick(value) },
React.createElement("input", __assign({}, inputProps, { type: "radio", checked: "" + p.state.value === "" + value, onChange: handleClick(value) })),
React.createElement("span", null, name)));
})));
};
var SelectInput = function (p) {
var r = __1.getElementsRenderMap(p.renderOptions);
return (React.createElement(React.Fragment, null,
React.createElement(r.Title, { text: p.schema.sectionTitle }),
React.createElement(r.Label, { text: p.schema.name }),
React.createElement("select", __assign({ name: p.schema.name }, __1.getInputProps(p)), p.schema.values.map(function (_a) {
var name = _a[0], value = _a[1];
return (React.createElement("option", { value: value, key: value }, name));
}))));
};
var MultiselectInput = function (p) {
var r = __1.getElementsRenderMap(p.renderOptions);
var _a = __1.getExtInputProps(p), onChange = _a.onChange, value = _a.value;
var handleCheck = function (nv) { return function (e) { var _a, _b; return onChange(e.target.checked ? ((_a = p.state.value) === null || _a === void 0 ? void 0 : _a.concat(nv)) || [nv] : ((_b = p.state.value) === null || _b === void 0 ? void 0 : _b.filter(function (v) { return v !== nv; })) || []); }; };
return (React.createElement(React.Fragment, null,
React.createElement(r.Title, { text: p.schema.sectionTitle }),
React.createElement(r.Label, { text: p.schema.name }),
p.schema.values.map(function (v) { return (React.createElement("label", { key: v[0] },
React.createElement("input", { type: "checkbox", value: v[1], checked: (value === null || value === void 0 ? void 0 : value.includes(v[1])) || false, onChange: handleCheck(v[1]) }),
" ",
v[0])); })));
};
exports.CollectionInput = function (p) {
var r = __1.getElementsRenderMap(p.renderOptions);
var mutate = p.schema.mutate;
var onAddClick = function () {
return p.setDelta(__spreadArrays(p.state, [
__1.toFormState(p.schema.fields, mutate ? (utils_1.isFunction(mutate.createValue) ? mutate.createValue() : mutate.createValue) : null)
]));
};
var onRemoveClick = function (i) { return function () { return p.setDelta(p.state.filter(function (_, i2) { return i2 !== i; })); }; };
var getLabel = function () {
return mutate ? (p.state.length ? mutate.addNextLabel : mutate.addFirstLabel || mutate.addNextLabel) : "";
};
if (!p.state.length)
return (React.createElement(React.Fragment, null,
React.createElement(r.Title, { text: p.schema.sectionTitle }),
React.createElement(r.Label, { text: p.schema.name }),
mutate && React.createElement(r.Button, { onClick: onAddClick }, getLabel())));
return (React.createElement(React.Fragment, null,
React.createElement(r.Title, { text: p.schema.sectionTitle }),
React.createElement(r.Label, { text: p.schema.name }),
React.createElement(r.ItemChildrenWrapper, null,
p.state.map(function (state, index) { return (React.createElement(React.Fragment, { key: index },
React.createElement(__1.FormView, __assign({ schema: p.schema.fields, state: state, setState: function (d) { return p.setDelta(utils_1.replace(p.state, index, d)); } }, p.renderOptions)),
mutate && p.state.length > 0 ? (React.createElement(r.Button, { onClick: onRemoveClick(index) }, mutate.removeLabel || "Remove")) : null)); }),
mutate && React.createElement(r.Button, { onClick: onAddClick }, getLabel()))));
};
exports.ListInput = function (p) {
var mutate = p.schema.mutate;
var r = __1.getElementsRenderMap(p.renderOptions);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var onAdd = function () { return p.setDelta(__spreadArrays(p.state, [__1.toInputState(p.schema.field, mutate.createValue)])); };
var onRemove = function (i2) { return function () { return p.setDelta(p.state.filter(function (_, i) { return i2 !== i; })); }; };
return (React.createElement(React.Fragment, null,
React.createElement(r.Title, { text: p.schema.sectionTitle }),
React.createElement(r.ItemChildrenWrapper, null, p.state.map(function (s, index) { return (React.createElement(React.Fragment, { key: p.schema.type + "-" + index },
React.createElement(__1.FormItemView, { schema: p.schema.field, state: s, setDelta: function (value) { return p.setDelta(utils_1.replace(p.state, index, value)); }, renderOptions: p.renderOptions }),
mutate && p.state.length > 0 ? (React.createElement(r.Button, { onClick: onRemove(index) }, mutate.removeLabel || "Remove")) : null)); })),
mutate && React.createElement(r.Button, { onClick: onAdd }, mutate.addNextLabel)));
};
exports.plainHtmlRenderMap = {
text: Input,
password: Input,
number: Input,
customBox: Input,
email: Input,
textarea: TextAreaInput,
hidden: function () { return null; },
radio: RadioInput,
select: SelectInput,
customOption: SelectInput,
multiselect: MultiselectInput,
collection: exports.CollectionInput,
list: exports.ListInput
};
var Button = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-image: -webkit-linear-gradient(top, rgb(245, 245, 245), rgb(241, 241, 241));\n background-color: rgb(242, 242, 242);\n border: 1px solid rgb(242, 242, 242);\n border-radius: 4px;\n color: rgb(95, 99, 104);\n font-size: 14px;\n margin: 4px;\n padding: 0px 14px;\n line-height: 27px;\n height: 36px;\n text-align: center;\n cursor: pointer;\n user-select: none;\n outline: none;\n box-sizing: border-box;\n min-width: 90px;\n"], ["\n background-image: -webkit-linear-gradient(top, rgb(245, 245, 245), rgb(241, 241, 241));\n background-color: rgb(242, 242, 242);\n border: 1px solid rgb(242, 242, 242);\n border-radius: 4px;\n color: rgb(95, 99, 104);\n font-size: 14px;\n margin: 4px;\n padding: 0px 14px;\n line-height: 27px;\n height: 36px;\n text-align: center;\n cursor: pointer;\n user-select: none;\n outline: none;\n box-sizing: border-box;\n min-width: 90px;\n"])));
var ItemWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 2px;\n"], ["\n margin: 2px;\n"])));
exports.plainHtmlElementRenderMap = {
ItemWrapper: ItemWrapper,
Button: Button,
ItemChildrenWrapper: function (p) { return React.createElement("div", __assign({}, p)); },
DefaultFormItem: function () { return React.createElement("h1", null, "Not supported"); },
Title: Title,
Label: Label,
Error: Error
};
exports.Row = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n box-sizing: border-box;\n\n flex-direction: row;\n & > div {\n flex: 1;\n & > input {\n width: calc(100% - 12px);\n }\n }\n & > div:last-child > input {\n width: 100%;\n }\n"], ["\n display: flex;\n box-sizing: border-box;\n\n flex-direction: row;\n & > div {\n flex: 1;\n & > input {\n width: calc(100% - 12px);\n }\n }\n & > div:last-child > input {\n width: 100%;\n }\n"])));
exports.styledInputsRenderMap = {
Title: function (p) { return React.createElement(StyledTitle, null, p.value); },
Row: function (p) { return React.createElement(exports.Row, null, p.value); },
Custom: function () { return React.createElement("pre", null, "Implement me"); }
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
//# sourceMappingURL=PlainHtmlRenderMap.js.map