@wener/ui/lib/src/antds/forms/builder.stories.js

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditService = exports.CreateService = exports.EditUser = exports.CreateUser = void 0;
const react_1 = __importStar(require("react"));
const antd_1 = require("antd");
const builder_1 = require("./builder");
const addon_actions_1 = require("@storybook/addon-actions");
const hooks_1 = require("../hooks");
const builder_2 = require("./builder");
const hocs_1 = require("../../hocs");
const lodash_1 = __importDefault(require("lodash"));
exports.default = {
    title: 'antds/forms/builder',
    decorators: [
        (storyFn) => {
            hooks_1.useAntdTheme({ theme: 'light' });
            return (react_1.default.createElement("div", null,
                react_1.default.createElement("div", { style: { minWidth: 400 } }, storyFn())));
        },
    ],
};
// 简单 - 处理没有特殊逻辑的场景
const SimpleForm = ({ form: formProps, initialValues, onSubmit, fields }) => {
    const [form] = antd_1.Form.useForm(formProps);
    const initial = react_1.useMemo(() => initialValues ?? builder_1.buildInitialValues(fields), []);
    return (react_1.default.createElement(antd_1.Form, { form: form, initialValues: initial, onFinish: onSubmit, labelCol: { span: 4 }, wrapperCol: { span: 20 } },
        initial?.id && react_1.default.createElement(builder_2.FormFieldBuilder, { pure: true, field: { key: 'id', label: 'ID', readOnly: true } }),
        react_1.default.createElement(builder_1.FormFieldsBuilder, { fields: fields }),
        react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'space-around' } },
            react_1.default.createElement(antd_1.Button, { htmlType: "submit", type: "primary" }, "\u63D0\u4EA4"),
            react_1.default.createElement(antd_1.Button, { htmlType: "reset", onClick: () => form.resetFields() }, "\u91CD\u7F6E"))));
};
const userFields = [
    { key: 'name', label: '名字', required: true },
    { key: 'age', label: '年龄', widget: 'number', defaultValue: 18 },
    { key: 'active', label: '激活', widget: 'switch' },
];
/// 直接传入一组字段定义即可
const UserForm = hocs_1.withProps(SimpleForm, { fields: userFields });
/// 没有初始值
exports.CreateUser = hocs_1.withProps(UserForm, {
    onSubmit: addon_actions_1.action('create'),
});
/// 有初始值
exports.EditUser = hocs_1.withProps(UserForm, {
    initialValues: {
        id: 123,
        name: 'wener',
        age: '22',
    },
    onSubmit: addon_actions_1.action('update'),
});
/// 服务表单 - 根据选项不同字段不同
const ServiceForm = ({ onSubmit, initialValues, form: formProps, }) => {
    const fields = [
        { key: 'name', label: '服务名字', required: true },
        {
            key: 'type',
            label: '服务类型',
            defaultValue: 'register',
            widget: 'select',
            options: [
                { value: 'register', label: '注册' },
                { value: 'continue', label: '续期' },
            ],
        },
    ];
    // key 加了前缀 - 会生成对象
    const typesFields = {
        register: [{ key: 'register.price', label: '价格' }],
        // 加了默认值
        continue: [{ key: 'continue.month', label: '月份', defaultValue: 12 }],
    };
    const [form] = antd_1.Form.useForm(formProps);
    const initial = react_1.useMemo(
    // () => initialValues ?? buildInitialValues([...fields, ...Object.values(typesFields).flat()]),
    () => initialValues ?? builder_1.buildInitialValues([...fields, ...lodash_1.default.flatten(Object.values(typesFields))]), []);
    const [type, setType] = react_1.useState(initial.type);
    return (react_1.default.createElement(antd_1.Form, { form: form, initialValues: initial, onFinish: onSubmit, labelCol: { span: 4 }, wrapperCol: { span: 20 }, onValuesChange: (v) => {
            if (v.type) {
                setType(v.type);
            }
        } },
        initial?.id && react_1.default.createElement(builder_2.FormFieldBuilder, { pure: true, field: { key: 'id', label: 'ID', readOnly: true } }),
        react_1.default.createElement(builder_1.FormFieldsBuilder, { pure: true, fields: fields }),
        react_1.default.createElement(antd_1.Divider, null, "\u8BE6\u7EC6\u4FE1\u606F"),
        react_1.default.createElement(builder_1.FormFieldsBuilder, { fields: typesFields[type] }),
        react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'space-around' } },
            react_1.default.createElement(antd_1.Button, { htmlType: "submit", type: "primary" }, "\u63D0\u4EA4"),
            react_1.default.createElement(antd_1.Button, { htmlType: "reset", onClick: () => form.resetFields() }, "\u91CD\u7F6E"))));
};
exports.CreateService = hocs_1.withProps(ServiceForm, { onSubmit: addon_actions_1.action('create') });
exports.EditService = hocs_1.withProps(ServiceForm, {
    initialValues: {
        id: 456,
        name: '测试',
        type: 'continue',
        continue: { month: 36 },
    },
    onSubmit: addon_actions_1.action('create'),
});
//# sourceMappingURL=builder.stories.js.map