@canard/schema-form-antd-mobile-plugin/dist/index.mjs

Ant Design Mobile components plugin for @canard/schema-form providing mobile-optimized form inputs for React Native and mobile web

import { jsx, jsxs } from 'react/jsx-runtime';
import { Space, Button, Checkbox, Switch, Stepper, Radio, Slider, Input, TextArea } from 'antd-mobile';
import { map } from '@winglet/common-utils/array';
import { useHandle } from '@winglet/react-utils/hook';
import { useMemo, useCallback } from 'react';

const FormError = ({ errorMessage }) => errorMessage;

const FormGroup = ({ node, depth, path, name, required, Input, errorMessage, }) => {
    if (depth === 0)
        return jsx(Input, {});
    if (node.group === 'branch') {
        return (jsx(Space, { direction: "vertical", block: true, children: jsx(Input, {}) }));
    }
    else {
        return (jsxs(Space, { direction: "vertical", block: true, children: [jsxs("div", { children: [node.parentNode?.type !== 'array' && (jsxs("label", { htmlFor: path, children: [name, required && (jsx("span", { style: { marginLeft: 4, color: 'red' }, children: "*" }))] })), jsx(Input, {})] }), errorMessage] }));
    }
};

const FormInput = ({ Input }) => jsx(Input, {});

const FormLabel = ({ name, path, required }) => (jsxs("label", { htmlFor: path, children: [name, required && jsx("span", { style: { marginLeft: 4, color: 'red' }, children: "*" })] }));

const Add = (props) => (jsx("div", { children: jsx(Button, { size: "mini", ...props, children: "+" }) }));
const Remove = (props) => (jsx("div", { children: jsx(Button, { size: "mini", ...props, children: "-" }) }));
const FormTypeInputArray = ({ node, readOnly, disabled, ChildNodeComponents, style, }) => {
    const handleClick = useHandle(() => {
        node.push();
    });
    const handleRemoveClick = useHandle((index) => {
        node.remove(index);
    });
    return (jsxs("div", { style: style, children: [ChildNodeComponents &&
                map(ChildNodeComponents, (ChildNodeComponent, i) => {
                    const key = ChildNodeComponent.key;
                    return (jsxs("div", { style: { display: 'flex' }, children: [jsx(ChildNodeComponent, {}, key), !readOnly && (jsx(Remove, { disabled: disabled, onClick: () => handleRemoveClick(i) }))] }, key));
                }), !readOnly && (jsx("div", { children: jsx(Add, { disabled: disabled, onClick: handleClick }) }))] }));
};
const FormTypeInputArrayDefinition = {
    Component: FormTypeInputArray,
    test: {
        type: 'array',
    },
};

const FormTypeInputBoolean = ({ path, disabled, value, onChange, }) => {
    const [indeterminate, checked] = useMemo(() => [
        value !== undefined && typeof value !== 'boolean',
        value ?? undefined,
    ], [value]);
    const handleChange = useHandle(onChange);
    return (jsx(Checkbox, { id: path, disabled: disabled, indeterminate: indeterminate, checked: checked, onChange: handleChange, style: {
            '--icon-size': '24px',
            '--font-size': '20px',
        } }));
};
const FormTypeInputBooleanDefinition = {
    Component: FormTypeInputBoolean,
    test: {
        type: 'boolean',
    },
};

const FormTypeInputBooleanSwitch = ({ path, jsonSchema, disabled, value, onChange, context, }) => {
    const [checkedLabel, uncheckedLabel] = useMemo(() => {
        const alias = context?.checkboxLabels || jsonSchema.options?.alias || {};
        return [alias.checked, alias.unchecked];
    }, [context, jsonSchema]);
    const handleChange = useHandle(onChange);
    return (jsx(Switch, { disabled: disabled, checked: value ?? undefined, checkedText: checkedLabel, uncheckedText: uncheckedLabel, onChange: handleChange }, path));
};
const FormTypeInputBooleanSwitchDefinition = {
    Component: FormTypeInputBooleanSwitch,
    test: ({ type, formType }) => type === 'boolean' && formType === 'switch',
};

const FormTypeInputNumber = ({ jsonSchema, readOnly, disabled, defaultValue, onChange, formatter, parser, }) => {
    const handleChange = useHandle((value) => {
        onChange(value);
    });
    return (jsx(Stepper, { inputReadOnly: readOnly, disabled: disabled, min: jsonSchema.minimum, max: jsonSchema.maximum, step: jsonSchema.multipleOf, formatter: formatter, parser: parser, defaultValue: defaultValue ?? undefined, onChange: handleChange }));
};
const FormTypeInputNumberDefinition = {
    Component: FormTypeInputNumber,
    test: {
        type: ['number', 'integer'],
    },
};

const FormTypeInputRadioGroup = ({ jsonSchema, disabled, defaultValue, onChange, context, style, }) => {
    const options = useMemo(() => {
        const alias = context.radioLabels || jsonSchema.options?.alias || {};
        return jsonSchema.enum
            ? map(jsonSchema.enum, (rawValue) => {
                const value = '' + rawValue;
                return {
                    value,
                    rawValue,
                    label: alias[value] || value,
                };
            })
            : [];
    }, [context, jsonSchema]);
    const initialValue = useMemo(() => options.find((option) => option.rawValue === defaultValue)?.value, [defaultValue, options]);
    const handleChange = useHandle((value) => {
        const selectedOption = options.find((opt) => opt.value === value);
        if (selectedOption === undefined)
            return;
        onChange(selectedOption.rawValue);
    });
    return (jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 8, ...style }, children: jsx(Radio.Group, { disabled: disabled, defaultValue: initialValue, onChange: handleChange, children: map(options, (option) => (jsx(Radio, { value: option.value, style: {
                    '--icon-size': '24px',
                    '--font-size': '20px',
                    '--gap': '6px',
                }, children: option.label }, option.value))) }) }));
};
const FormTypeInputRadioGroupDefinition = {
    Component: FormTypeInputRadioGroup,
    test: ({ type, formType, jsonSchema }) => {
        return ((type === 'string' || type === 'number' || type === 'integer') &&
            (formType === 'radio' || formType === 'radiogroup') &&
            !!jsonSchema.enum?.length);
    },
};

const FormTypeInputSlider = ({ jsonSchema, disabled, defaultValue, onChange, }) => {
    const handleChange = useCallback((value) => {
        if (value === null)
            onChange(NaN);
        else if (typeof value === 'number')
            onChange(value);
        else
            onChange(value);
    }, [onChange]);
    const { min, max, step, range, marks, ...changeHandler } = useMemo(() => {
        return {
            min: jsonSchema.minimum,
            max: jsonSchema.maximum,
            step: jsonSchema.multipleOf,
            range: jsonSchema.options?.range,
            marks: jsonSchema.options?.marks,
            ...(jsonSchema.options?.lazy === false
                ? { onChange: handleChange }
                : { onAfterChange: handleChange }),
        };
    }, [handleChange, jsonSchema]);
    return (jsx(Slider, { disabled: disabled, min: min, max: max, step: step, range: range, marks: marks, defaultValue: defaultValue ?? undefined, ...changeHandler }));
};
const FormTypeInputSliderDefinition = {
    Component: FormTypeInputSlider,
    test: ({ type, jsonSchema, format }) => {
        return (((type === 'number' || type === 'integer') && format === 'slider') ||
            (type === 'array' &&
                jsonSchema.items &&
                (jsonSchema.items.type === 'number' ||
                    jsonSchema.items.type === 'integer') &&
                format === 'slider'));
    },
};

const FormTypeInputString = ({ path, name, jsonSchema, readOnly, disabled, defaultValue, onChange, }) => {
    const type = jsonSchema.format === 'password' ? 'password' : 'text';
    const handleChange = useHandle(onChange);
    return (jsx(Input, { id: path, name: name, type: type, readOnly: readOnly, disabled: disabled, placeholder: jsonSchema.placeholder, defaultValue: defaultValue ?? undefined, onChange: handleChange }));
};
const FormTypeInputStringDefinition = {
    Component: FormTypeInputString,
    test: {
        type: 'string',
    },
};

const FormTypeInputStringCheckbox = ({ jsonSchema, disabled, defaultValue, onChange, context, }) => {
    const options = useMemo(() => {
        const alias = context.checkboxLabels ||
            jsonSchema.items?.options?.alias ||
            jsonSchema.options?.alias ||
            {};
        return jsonSchema.items?.enum
            ? map(jsonSchema.items.enum, (rawValue) => {
                const value = '' + rawValue;
                return {
                    value,
                    rawValue,
                    label: alias[value] || value,
                };
            })
            : [];
    }, [context, jsonSchema]);
    const initialValue = useMemo(() => {
        if (defaultValue === undefined)
            return undefined;
        return map(defaultValue, (v) => '' + v);
    }, [defaultValue]);
    const handleChange = useHandle((value) => {
        const convertedValues = map(value, (v) => {
            const option = options.find((opt) => opt.value === v.toString());
            return option ? option.rawValue : v.toString();
        });
        onChange(convertedValues);
    });
    return (jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 8 }, children: jsx(Checkbox.Group, { disabled: disabled, defaultValue: initialValue, onChange: handleChange, children: map(options, (option) => (jsx(Checkbox, { value: option.value, style: {
                    '--icon-size': '24px',
                    '--font-size': '20px',
                    '--gap': '6px',
                }, children: option.label }, option.value))) }) }));
};
const FormTypeInputStringCheckboxDefinition = {
    Component: FormTypeInputStringCheckbox,
    test: ({ type, formType, jsonSchema }) => {
        return (type === 'array' &&
            formType === 'checkbox' &&
            jsonSchema.items.type === 'string' &&
            jsonSchema.items.enum?.length);
    },
};

const FormTypeInputStringSwitch = ({ path, jsonSchema, disabled, value, onChange, context, }) => {
    const [checked, unchecked] = useMemo(() => {
        const [checked, unchecked] = jsonSchema.enum || [];
        return [
            checked !== undefined ? checked : 'on',
            unchecked !== undefined ? unchecked : 'off',
        ];
    }, [jsonSchema]);
    const [checkedLabel, uncheckedLabel] = useMemo(() => {
        const alias = context.switchLabels || jsonSchema.options?.alias || {};
        return [alias['' + checked] || checked, alias['' + unchecked] || unchecked];
    }, [checked, unchecked, context, jsonSchema]);
    const handleChange = useHandle((input) => {
        onChange(input ? checked : unchecked);
    });
    return (jsx(Switch, { disabled: disabled, checked: value === checked, checkedText: checkedLabel, uncheckedText: uncheckedLabel, onChange: handleChange }, path));
};
const FormTypeInputStringSwitchDefinition = {
    Component: FormTypeInputStringSwitch,
    test: ({ type, formType, jsonSchema }) => type === 'string' && formType === 'switch' && jsonSchema.enum?.length === 2,
};

const FormTypeInputTextarea = ({ path, name, jsonSchema, readOnly, disabled, defaultValue, onChange, }) => {
    const handleChange = useHandle(onChange);
    const autoSize = useMemo(() => ({
        minRows: jsonSchema.minRows,
        maxRows: jsonSchema.maxRows,
    }), [jsonSchema]);
    return (jsx(TextArea, { id: path, name: name, disabled: disabled, readOnly: readOnly, autoSize: autoSize, placeholder: jsonSchema.placeholder, defaultValue: defaultValue ?? undefined, onChange: handleChange }));
};
const FormTypeInputTextareaDefinition = {
    Component: FormTypeInputTextarea,
    test: ({ type, format, formType }) => type === 'string' && (format === 'textarea' || formType === 'textarea'),
};

const formTypeInputDefinitions = [
    FormTypeInputBooleanSwitchDefinition,
    FormTypeInputStringCheckboxDefinition,
    FormTypeInputStringSwitchDefinition,
    FormTypeInputRadioGroupDefinition,
    FormTypeInputArrayDefinition,
    FormTypeInputSliderDefinition,
    FormTypeInputTextareaDefinition,
    FormTypeInputStringDefinition,
    FormTypeInputNumberDefinition,
    FormTypeInputBooleanDefinition,
];

const plugin = {
    FormGroup,
    FormLabel,
    FormInput,
    FormError,
    formTypeInputDefinitions,
};

export { plugin };