@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
70 lines • 3.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const editor_context_1 = require("../editor/editor_context");
const common_1 = require("../common");
const select_1 = require("./select");
const helpers_1 = require("../helpers");
const properties_common_1 = require("./properties_common");
const control_factory_1 = require("./control_factory");
exports.dot = (view) => common_1.css `
min-width: 7px;
max-width: 7px;
width: 7px;
height: 7px;
background-color: ${view === 'value' ? 'green' : view === 'handler' ? 'red' : 'yellow'};
margin: 0px 6px;
cursor: pointer;
label: dot;
`;
exports.Binding = mobx_react_1.observer((componentProps) => {
const context = React.useContext(editor_context_1.EditorContext);
const { formElement } = componentProps;
const { value } = properties_common_1.parseProps(componentProps, context);
const [view, setView] = React.useState(value && value.handler ? 'handler' : value && value.source ? 'source' : 'value');
const changeView = React.useCallback(() => {
if (view === 'value') {
formElement.props.options = { handler: 'datasetSource' };
helpers_1.setValue(componentProps, context, '', 'value', '.handler');
setView('source');
}
else if (view === 'source') {
formElement.props.options = { handler: 'optionsHandlers' };
helpers_1.setValue(componentProps, context, '', 'value', '.value');
setView('handler');
}
else if (view === 'handler') {
helpers_1.setValue(componentProps, context, undefined, 'value');
setView('value');
}
}, [componentProps, context, formElement.props.options, view]);
const modifiedFormElement = React.useMemo(() => ({
...formElement,
bound: false,
props: {
...formElement.props,
bound: true,
changeBound: changeView,
view,
options: { handler: view === 'source' ? 'datasetSource' : 'optionsHandlers' }
}
}), [changeView, formElement, view]);
if (formElement.control === 'Table') {
return control_factory_1.renderControl({
...componentProps,
formElement: modifiedFormElement
});
}
return (React.createElement("div", { className: "propertyInput" },
view === 'value' ? (control_factory_1.renderControl({
...componentProps,
formElement: { ...formElement, bound: false }
})) : (React.createElement(select_1.Select, Object.assign({ extra: view }, componentProps, { formElement: modifiedFormElement }))),
React.createElement("div", { className: exports.dot(view), onClick: changeView, title: `Green - Value
Yellow - Bound to data
Red - Handled by a function` })));
});
exports.Binding.displayName = 'Binding';
//# sourceMappingURL=binding.js.map