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

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const common_schemas_1 = require("./common_schemas");
function randomData(_editorState) {
    return {};
}
exports.randomData = randomData;
function assignControl(control, schema) {
    if (!control.control) {
        if (schema.type === 'boolean') {
            control.control = 'Checkbox';
        }
        else if (schema.$enum) {
            control.control = 'Select';
        }
    }
}
function root(schema) {
    let parent = schema;
    while (parent.parent != null) {
        parent = parent.parent;
    }
    return parent.schema;
}
exports.root = root;
function makeLabel(key) {
    let label = key[0].toUpperCase() + key.substring(1);
    for (let i = label.length - 1; i > 0; i--) {
        if (label[i].match(/[A-Z]/)) {
            label = label.substring(0, i) + ' ' + label.substring(i);
        }
    }
    return label;
}
function propGroup(groupName, props) {
    for (let key of Object.keys(props)) {
        props[key].control.group = groupName;
        if (!props[key].control.props) {
            props[key].control.props = {};
        }
        if (props[key].control.props.label == null) {
            props[key].control.props.label = makeLabel(key);
        }
    }
    return props;
}
exports.propGroup = propGroup;
function tableProp(props, text, extraColumns = []) {
    return prop({
        control: 'Table',
        props: { text, label: props.label },
        display: 'group',
        elements: [
            {
                control: 'Input',
                props: { placeholder: 'Value', value: { source: 'value' }, label: 'Value' }
            },
            {
                control: 'Input',
                props: { placeholder: 'Text', value: { source: 'text' }, label: 'Text' }
            },
            ...extraColumns
        ],
        type: 'array',
        items: {
            type: 'object',
            properties: {
                text: { type: 'string' },
                value: { type: 'string' },
                icon: { type: 'string' }
            }
        },
        ...props
    });
}
exports.tableProp = tableProp;
function gapProp(propDefinition) {
    return prop({
        control: 'Select',
        documentation: 'Spacing between cells',
        group: 'Basic',
        props: { label: 'Gap' },
        $enum: [
            {
                text: 'None',
                value: '0px'
            },
            {
                text: 'Tiny',
                value: '3px'
            },
            {
                text: 'Small',
                value: '6px'
            },
            {
                text: 'Normal',
                value: '12px'
            },
            {
                text: 'Big',
                value: '18px'
            },
            {
                text: 'Huge',
                value: '24px'
            }
        ],
        type: 'string',
        ...propDefinition
    });
}
exports.gapProp = gapProp;
function boundProp(prop = {}, bindingType = 'ValueSourceHandler', valueType = 'string') {
    const { items, properties, $enum, ...control } = prop;
    assignControl(control, prop);
    return {
        control: {
            ...control,
            bound: true,
            control: control.control || 'Input',
            props: {
                label: prop.label,
                ...prop.props,
                type: bindingType,
                options: (prop.props && prop.props.options) || { handler: 'datasetSource' }
            }
        },
        schema: { items, $enum, ...common_schemas_1.boundSchema(valueType, properties) }
    };
}
exports.boundProp = boundProp;
function handlerProp(prop = {}) {
    const { type = 'string', items, properties, $enum, ...control } = prop;
    return {
        control: {
            ...control,
            control: 'Select',
            props: { ...control.props, options: { handler: 'optionsHandlers' } }
        },
        schema: { type, items, properties, $enum }
    };
}
exports.handlerProp = handlerProp;
function dataProp(prop = {}) {
    const { type = 'string', items, properties, $enum, ...control } = prop;
    return {
        control: {
            ...control,
            control: 'Select',
            props: { ...control.props, options: { handler: 'datasetSource' } }
        },
        schema: { type, items, properties, $enum }
    };
}
exports.dataProp = dataProp;
function prop(prop = {}) {
    const { type = 'string', items, properties, $enum, ...control } = prop;
    assignControl(control, prop);
    if (prop.label) {
        control.props = { ...control.props, label: prop.label };
    }
    return {
        control,
        schema: { type, items, properties, $enum }
    };
}
exports.prop = prop;
function arrayProp(label, properties = null, itemType = null) {
    let elements = [];
    for (let key of Object.keys(properties)) {
        properties[key] = { type: properties[key] };
        elements.push({
            control: 'Input',
            props: { placeholder: makeLabel(key), value: { source: key }, label: makeLabel(key) }
        });
    }
    return {
        control: { control: 'Table', elements, props: { text: label, label: '' } },
        schema: { type: 'array', items: itemType ? { type: itemType } : { type: 'object', properties } }
    };
}
exports.arrayProp = arrayProp;
let id = 0;
function generateId() {
    return (id++).toString();
}
exports.generateId = generateId;
function generateUid() {
    return Date.now().toString();
}
exports.generateUid = generateUid;
exports.processor = {
    children: owner => owner.elements,
    name: owner => {
        return (owner.props.label && owner.props.label.value) || owner.control;
    },
    id: owner => (owner ? owner.uid : '')
};
function calculatePosition(layout, e) {
    return layout === 'row' ? calculateVerticalPosition(e) : calculateHorizontalPosition(e);
}
exports.calculatePosition = calculatePosition;
function calculateHorizontalPosition(e) {
    let element = e.currentTarget;
    let elementLeft = window.scrollX + element.getBoundingClientRect().left;
    let elementWidth = element.clientWidth;
    return e.pageX - elementLeft < elementWidth / 2 ? 'left' : 'right';
}
exports.calculateHorizontalPosition = calculateHorizontalPosition;
function calculateVerticalPosition(e) {
    let element = e.currentTarget;
    let elementTop = window.scrollX + element.getBoundingClientRect().top;
    let elementHeight = element.clientHeight;
    let dragStart = e.pageY;
    return dragStart - elementTop < elementHeight / 2 ? 'top' : 'bottom';
}
exports.calculateVerticalPosition = calculateVerticalPosition;
function createPath(element, context) {
    let stringPath = element.props.value ? element.props.value.source : null;
    let control = context.editorCatalogue.components[element.control];
    let parent = element.parent;
    while (parent != null && parent.props) {
        if (control &&
            control.valueProvider &&
            parent.props.value &&
            parent.props.value.source != null) {
            stringPath = parent.props.value.source + '.' + stringPath;
        }
        parent = parent.parent;
    }
    return stringPath.split('.');
}
exports.createPath = createPath;
function findSchemaByPath(path, schema) {
    for (let i = 0; i < path.length; i++) {
        schema =
            schema.type === 'array'
                ? schema.items.reference
                    ? schema.items.reference.properties.get(path[i])
                    : schema.items.properties.get(path[i])
                : schema.reference
                    ? schema.reference.properties.get(path[i])
                    : schema.properties
                        ? schema.properties.get(path[i])
                        : null;
    }
    return schema;
}
function findSchema(element, schema, context) {
    if (element && element.props.value && element.props.value.source) {
        if (element.props.value.source[0] === '/') {
            return findSchemaByPath(element.props.value.source.substring(1).split('.'), schema);
        }
        return findSchemaByPath(createPath(element, context), schema);
    }
    return null;
}
exports.findSchema = findSchema;
function findParentSchema(element, schema, context) {
    if (element && element.props.value && element.props.value.source) {
        let path = createPath(element, context);
        path.pop();
        return findSchemaByPath(path, schema);
    }
    return null;
}
exports.findParentSchema = findParentSchema;
//# sourceMappingURL=editor_common.js.map