opendash
Version:
open.DASH data visualization framework
131 lines • 7.6 kB
JavaScript
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);
};
import * as React from "react";
import Schema from "async-validator";
import { Form } from "@ant-design/compatible";
import "@ant-design/compatible/assets/index.css";
import { Input, Select, Switch, Button, Checkbox, InputNumber } from "antd";
import { useTranslation, useObjectState, DataItemHistoryOptionsPicker, DataItemPicker, DataItemValuePicker, } from "..";
// Avoid warnings from the validator in the console
// @ts-ignore
Schema.warning = function () { };
export var FormGenerator = function (_a) {
var elements = _a.elements, externalState = _a.state, externalUpdateState = _a.updateState, onChange = _a.onChange, submitOptions = _a.submit, onSubmit = _a.onSubmit, settings = _a.settings, children = _a.children;
var t = useTranslation(["opendash"])[0];
var firstRunRef = React.useRef(true);
var _b = useObjectState({}), internalState = _b[0], internalUpdateState = _b[1];
var _c = React.useState({}), errorState = _c[0], setErrorState = _c[1];
var _d = useObjectState({}), dirtyState = _d[0], setDirtyState = _d[1];
var schema = React.useMemo(function () {
return new Schema(Object.fromEntries(elements
.filter(function (field) { return field.rules; })
.map(function (field) { return [field.key, field.rules]; })));
}, elements);
var hasExternalState = externalState && externalUpdateState;
var state = hasExternalState ? externalState : internalState;
var updateStateHandler = hasExternalState
? externalUpdateState
: function (key, value) {
var _a;
internalUpdateState((_a = {}, _a[key] = value, _a));
};
React.useEffect(function () {
if (!firstRunRef.current) {
if (onChange) {
onChange(state);
}
// @ts-ignore
schema.validate(state, {}, function (errors) {
if (errors) {
setErrorState(Object.fromEntries(errors.map(function (error) { return [error.field, error.message]; })));
}
else {
setErrorState({});
}
});
}
firstRunRef.current = false;
}, [externalState, internalState]);
var updateState = function (key, value) {
var _a;
updateStateHandler(key, value);
if (!dirtyState[key]) {
setDirtyState((_a = {}, _a[key] = true, _a));
}
};
var layout = settings && settings.layout ? settings.layout : "vertical";
return (
// <div style={{ padding: 20 }}>
React.createElement("div", null,
React.createElement(Form, { layout: layout, onSubmit: function (event) {
event.preventDefault();
if (onSubmit && !Object.values(errorState).some(function (e) { return e; })) {
onSubmit(state);
}
} },
React.createElement("div", null, elements.map(function (field) {
return (React.createElement(Form.Item, { key: field.key, label: t(field.label),
// hasFeedback
validateStatus: dirtyState[field.key]
? errorState[field.key]
? "error"
: "success"
: undefined, help: dirtyState[field.key] && errorState[field.key]
? errorState[field.key]
: "" },
React.createElement(FormGeneratorField, { field: field, value: state[field.key], setValue: function (v) {
updateState(field.key, v);
} })));
})),
children && React.createElement("div", null, children),
(onSubmit || submitOptions) && (React.createElement("div", null,
React.createElement(Button, __assign({ type: "primary", htmlType: "submit", disabled: Object.values(errorState).some(function (e) { return e; }) }, submitOptions)))))));
};
var FormGeneratorField = function (_a) {
var field = _a.field, value = _a.value, setValue = _a.setValue;
var _b, _c, _d, _e, _f, _g, _h;
var t = useTranslation(["opendash"])[0];
switch (field.type) {
case "input":
return (React.createElement(Input, { value: value, onChange: function (e) { return setValue(e.target.value); }, type: ((_b = field.settings) === null || _b === void 0 ? void 0 : _b.type) || "text", placeholder: ((_c = field.settings) === null || _c === void 0 ? void 0 : _c.placeholder) || void 0, prefix: ((_d = field.settings) === null || _d === void 0 ? void 0 : _d.prefix) || void 0, style: field.style }));
case "input.number":
return (React.createElement(InputNumber, __assign({ value: value, onChange: function (nextValue) { return setValue(nextValue); }, style: field.style }, field.settings)));
case "input.password":
return (React.createElement(Input.Password, { value: value, onChange: function (e) { return setValue(e.target.value); }, placeholder: ((_e = field.settings) === null || _e === void 0 ? void 0 : _e.placeholder) || void 0, prefix: ((_f = field.settings) === null || _f === void 0 ? void 0 : _f.prefix) || void 0, style: field.style }));
case "switch":
return (React.createElement(Switch, { checked: value, onChange: function (nextValue) {
setValue(nextValue);
}, style: field.style }));
case "checkbox":
return (React.createElement(Checkbox, { checked: value, onChange: function (e) {
setValue(e.target.checked);
}, style: field.style }));
case "textarea":
return (React.createElement(Input.TextArea, { value: value, onChange: function (e) { return setValue(e.target.value); }, rows: ((_g = field.settings) === null || _g === void 0 ? void 0 : _g.rows) || 4, style: field.style }));
case "select":
return (React.createElement(Select, { value: value, onChange: function (v) {
setValue(v);
}, style: field.style }, (_h = field.settings) === null || _h === void 0 ? void 0 : _h.options.map(function (option) {
return (React.createElement(Select.Option, { key: option.value, value: option.value }, t(option.label)));
})));
case "select-item":
return (React.createElement(DataItemPicker, { value: value, onChange: function (v) { return setValue(v); }, style: field.style }));
case "select-item-dimension":
return (React.createElement(DataItemValuePicker, { value: value, onChange: function (v) { return setValue(v); }, style: field.style }));
case "select-date":
return (React.createElement(DataItemHistoryOptionsPicker, { value: value, onChange: function (v) { return setValue(v); }, style: field.style }));
default:
console.warn("FormGenerator: Type '" + field.type + "' does not exist.");
return null;
}
};
//# sourceMappingURL=FormGenerator.js.map