@tomino/dynamic-form-semantic-ui/dist/mjs/properties/binding.js

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { observer } from 'mobx-react';
import { EditorContext } from '../editor/editor_context';
import { css } from '../common';
import { Select } from './select';
import { setValue } from '../helpers';
import { parseProps } from './properties_common';
import { renderControl } from './control_factory';
export const dot = (view) => 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;
`;
export const Binding = observer((componentProps) => {
    const context = React.useContext(EditorContext);
    const { formElement } = componentProps;
    const { value } = 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' };
            setValue(componentProps, context, '', 'value', '.handler');
            setView('source');
        }
        else if (view === 'source') {
            formElement.props.options = { handler: 'optionsHandlers' };
            setValue(componentProps, context, '', 'value', '.value');
            setView('handler');
        }
        else if (view === 'handler') {
            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 renderControl({
            ...componentProps,
            formElement: modifiedFormElement
        });
    }
    return (React.createElement("div", { className: "propertyInput" },
        view === 'value' ? (renderControl({
            ...componentProps,
            formElement: { ...formElement, bound: false }
        })) : (React.createElement(Select, Object.assign({ extra: view }, componentProps, { formElement: modifiedFormElement }))),
        React.createElement("div", { className: dot(view), onClick: changeView, title: `Green - Value
Yellow - Bound to data
Red - Handled by a function` })));
});
Binding.displayName = 'Binding';
//# sourceMappingURL=binding.js.map