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

Semantic UI form renderer based on dynamic form generation

import React from 'react';
import names from 'classnames';
import { css } from 'emotion';
import { toJS as mobxToJs } from 'mobx';
import { interpolate } from '@tomino/toolbelt';
import { getPropValue } from './helpers';
export { css } from 'emotion';
export { default as names } from 'classnames';
export { Context } from './context';
export { handle, getValue, isNullOrEmpty, prop, processControl, valueSource } from './helpers';
export { DynamicComponent as DynamicControl, paintProps } from './wrapper';
export const select = css `
  .react-select__control {
    border: 0px;
    border-radius: 0 !important;
    min-height: 23px;
  }

  .react-select__indicators {
    height: 23px;
  }

  .react-select__indicator {
    padding: 2px;
  }

  .react-select__value-container {
    height: 23px;

    > div {
      /* position: absolute; */
      margin: 0px;
      padding: 0px;
    }
  }

  .react-select__single-value {
    margin-top: 0px;
  }

  .react-select__menu {
    border-radius: 0px;
    margin-top: 2px;
  }

  label: select;
`;
export const fieldSet = css `
  /* name: fieldset */
  border: solid 1px #ddd;
  border-radius: 5px;
  background-color: #fafafa;

  legend {
    padding: 0px 6px;
    font-weight: bold;
  }
`;
export const breakingLabel = css `
  display: block;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
`;
export const nonBreakingLabel = css `
  display: inline-block;
  font-weight: bold;
  padding-right: 6px;
  margin-top: 3px;
  margin-bottom: 3px;
`;
export const fullWidth = css `
  width: 100%;
`;
export const noPadding = css `
  padding: 0px !important;
`;
export const marginLess = css `
  margin: 0px !important;
`;
export const pointer = css `
  cursor: pointer !important;
  label: pointer;
`;
const missing = css `
  background: red;
  padding: 3px;
  border-radius: 3px;
  font-weight: bold;
  color: white;
`;
export function parseFromOwner(str, owner) {
    try {
        return interpolate(str, owner);
    }
    catch (ex) {
        return 'Error parsing string: ' + ex.message;
    }
}
export function sourceValue(prop) {
    return prop ? prop.source : null;
}
export function handlerValue(prop) {
    return prop ? prop.handler : null;
}
export function root(formElement) {
    let root = formElement;
    while (root.parent != null && (!root.pages || root.pages.length === 0)) {
        root = root.parent;
    }
    return root;
}
const extraProps = ['editorLabel'];
export function cleanProps(props) {
    const result = {};
    const js = toJS(props);
    for (let key of Object.keys(js)) {
        if (js[key] === '' || js[key] == null || js[key].length === 0 || extraProps.indexOf(key) >= 0) {
            continue;
        }
        result[key] = js[key];
    }
    return result;
}
export function tryInterpolate(text, owner) {
    try {
        return interpolate(text, owner);
    }
    catch (ex) {
        return 'Error: ' + ex.message;
    }
}
export function useMergeState(initialState) {
    const [state, setState] = React.useState(initialState);
    const setMergedState = (newState) => setState((prevState) => Object.assign({}, prevState, newState));
    return [state, setMergedState];
}
export function createComponents(props, className = null) {
    if (!props.formElement.elements || props.formElement.elements.length === 0) {
        return undefined;
    }
    return props.formElement.elements.map((e, i) => (React.createElement(React.Fragment, { key: i }, props.catalogue.createComponent({ ...props, className: '' }, e, className))));
}
export function createComponent1(props, formElement, context, className, extraProps) {
    if (!formElement || formElement.control === 'EditorCell') {
        return null;
    }
    if (props.catalogue.components[formElement.control] === undefined) {
        return React.createElement("div", { className: names(className, missing) }, formElement.control);
    }
    const hide = getPropValue(props, formElement, context, 'hidden', false);
    if (hide) {
        return null;
    }
    const controlDefinition = props.catalogue.components[formElement.control];
    const Control = controlDefinition.Component ||
        controlDefinition;
    Control.displayName = 'CreateComponentWrapper';
    let renderedControl = (React.createElement(Control, { owner: props.owner, className: className, handlers: props.handlers, catalogue: props.catalogue, formElement: formElement, extra: { ...props.extra, ...extraProps }, dataProps: props.dataProps }));
    return renderedControl;
}
export function toJS(obj) {
    return mobxToJs(obj);
}
export function addProviders(mainForm, form) {
    let formElement = form;
    if (form !== mainForm) {
        let model = toJS(mainForm);
        let provider = model;
        while (provider.elements &&
            provider.elements.length &&
            provider.elements[0].control.indexOf('Provider') >= 0) {
            provider = provider.elements[0];
        }
        if (provider != model) {
            provider.elements = [form];
            formElement = model;
        }
    }
    return formElement;
}
//# sourceMappingURL=common.js.map