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

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const emotion_1 = require("emotion");
const mobx_1 = require("mobx");
const toolbelt_1 = require("@tomino/toolbelt");
const helpers_1 = require("./helpers");
var emotion_2 = require("emotion");
exports.css = emotion_2.css;
var classnames_2 = require("classnames");
exports.names = classnames_2.default;
var context_1 = require("./context");
exports.Context = context_1.Context;
var helpers_2 = require("./helpers");
exports.handle = helpers_2.handle;
exports.getValue = helpers_2.getValue;
exports.isNullOrEmpty = helpers_2.isNullOrEmpty;
exports.prop = helpers_2.prop;
exports.processControl = helpers_2.processControl;
exports.valueSource = helpers_2.valueSource;
var wrapper_1 = require("./wrapper");
exports.DynamicControl = wrapper_1.DynamicComponent;
exports.paintProps = wrapper_1.paintProps;
exports.select = emotion_1.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;
`;
exports.fieldSet = emotion_1.css `
  /* name: fieldset */
  border: solid 1px #ddd;
  border-radius: 5px;
  background-color: #fafafa;

  legend {
    padding: 0px 6px;
    font-weight: bold;
  }
`;
exports.breakingLabel = emotion_1.css `
  display: block;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
`;
exports.nonBreakingLabel = emotion_1.css `
  display: inline-block;
  font-weight: bold;
  padding-right: 6px;
  margin-top: 3px;
  margin-bottom: 3px;
`;
exports.fullWidth = emotion_1.css `
  width: 100%;
`;
exports.noPadding = emotion_1.css `
  padding: 0px !important;
`;
exports.marginLess = emotion_1.css `
  margin: 0px !important;
`;
exports.pointer = emotion_1.css `
  cursor: pointer !important;
  label: pointer;
`;
const missing = emotion_1.css `
  background: red;
  padding: 3px;
  border-radius: 3px;
  font-weight: bold;
  color: white;
`;
function parseFromOwner(str, owner) {
    try {
        return toolbelt_1.interpolate(str, owner);
    }
    catch (ex) {
        return 'Error parsing string: ' + ex.message;
    }
}
exports.parseFromOwner = parseFromOwner;
function sourceValue(prop) {
    return prop ? prop.source : null;
}
exports.sourceValue = sourceValue;
function handlerValue(prop) {
    return prop ? prop.handler : null;
}
exports.handlerValue = handlerValue;
function root(formElement) {
    let root = formElement;
    while (root.parent != null && (!root.pages || root.pages.length === 0)) {
        root = root.parent;
    }
    return root;
}
exports.root = root;
const extraProps = ['editorLabel'];
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;
}
exports.cleanProps = cleanProps;
function tryInterpolate(text, owner) {
    try {
        return toolbelt_1.interpolate(text, owner);
    }
    catch (ex) {
        return 'Error: ' + ex.message;
    }
}
exports.tryInterpolate = tryInterpolate;
function useMergeState(initialState) {
    const [state, setState] = react_1.default.useState(initialState);
    const setMergedState = (newState) => setState((prevState) => Object.assign({}, prevState, newState));
    return [state, setMergedState];
}
exports.useMergeState = useMergeState;
function createComponents(props, className = null) {
    if (!props.formElement.elements || props.formElement.elements.length === 0) {
        return undefined;
    }
    return props.formElement.elements.map((e, i) => (react_1.default.createElement(react_1.default.Fragment, { key: i }, props.catalogue.createComponent({ ...props, className: '' }, e, className))));
}
exports.createComponents = createComponents;
function createComponent1(props, formElement, context, className, extraProps) {
    if (!formElement || formElement.control === 'EditorCell') {
        return null;
    }
    if (props.catalogue.components[formElement.control] === undefined) {
        return react_1.default.createElement("div", { className: classnames_1.default(className, missing) }, formElement.control);
    }
    const hide = helpers_1.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_1.default.createElement(Control, { owner: props.owner, className: className, handlers: props.handlers, catalogue: props.catalogue, formElement: formElement, extra: { ...props.extra, ...extraProps }, dataProps: props.dataProps }));
    return renderedControl;
}
exports.createComponent1 = createComponent1;
function toJS(obj) {
    return mobx_1.toJS(obj);
}
exports.toJS = toJS;
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;
}
exports.addProviders = addProviders;
//# sourceMappingURL=common.js.map