@nutui/nutui-react 2.7.0 → 3.0.0-beta.0

package/dist/es/packages/form/useform.js

@@ -0,0 +1,341 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { _ as _ts_values } from "@swc/helpers/_/_ts_values";
+import { useRef } from "react";
+import Schema from "async-validator";
+export var SECRET = 'NUT_FORM_INTERNAL';
+/**
+ * 用于存储表单的数据
+ */ var FormStore = function FormStore() {
+    "use strict";
+    var _this = this;
+    var _this1 = this;
+    _class_call_check(this, FormStore);
+    var _this2 = this;
+    // 初始化数据
+    _define_property(this, "initialValues", {});
+    _define_property(this, "updateList", []);
+    // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
+    _define_property(this, "store", {});
+    // 所有的组件实例
+    _define_property(this, "fieldEntities", []);
+    // 校验成功或失败的回调，onFinish、onFinishFailed
+    _define_property(this, "callbacks", {});
+    _define_property(this, "errors", {});
+    /**
+   * 注册组件实例
+   * @param field
+   */ _define_property(this, "registerField", function(field) {
+        _this.fieldEntities.push(field);
+        return function() {
+            _this.fieldEntities = _this.fieldEntities.filter(function(item) {
+                return item !== field;
+            });
+            if (_this.store) {
+                delete _this.store[field.props.name];
+            }
+        };
+    });
+    /**
+   * 获取 formItem 的值
+   * @param name
+   */ _define_property(this, "getFieldValue", function(name) {
+        var _this_store;
+        return (_this_store = _this.store) === null || _this_store === void 0 ? void 0 : _this_store[name];
+    });
+    /**
+   * 获取全部字段
+   */ _define_property(this, "getFieldsValue", function(nameList) {
+        if (typeof nameList === 'boolean') {
+            return JSON.parse(JSON.stringify(_this.store));
+        }
+        var fieldsValue = {};
+        nameList.forEach(function(field) {
+            fieldsValue[field] = _this.getFieldValue(field);
+        });
+        return fieldsValue;
+    });
+    /**
+   * 设置 form 的初始值，之后在 reset 的时候使用
+   * @param values
+   * @param init
+   */ _define_property(this, "setInitialValues", function(values, init) {
+        if (init) {
+            _this.initialValues = values;
+            _this.store = values;
+        }
+    });
+    /**
+   * 存储组件数据
+   * @param newStore { [name]: newValue }
+   */ _define_property(this, "setFieldsValue", function(newStore) {
+        var needValidate = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
+        _this1.store = _object_spread({}, _this1.store, newStore);
+        _this1.fieldEntities.forEach(function(entity) {
+            var name = entity.props.name;
+            Object.keys(newStore).forEach(function(key) {
+                if (key === name) {
+                    entity.onStoreChange('update');
+                }
+            });
+        });
+        _this1.updateList.forEach(function(item) {
+            var shouldUpdate = item.condition;
+            if (typeof item.condition === 'function') {
+                shouldUpdate = item.condition();
+            }
+            if (shouldUpdate) {
+                item.entity.onStoreChange('update');
+            }
+        });
+        needValidate && _this1.validateFields();
+    });
+    _define_property(this, "setCallback", function(callback) {
+        _this.callbacks = _object_spread({}, _this.callbacks, callback);
+    });
+    _define_property(this, "validateFields", /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function(nameList) {
+            var filterEntitys, errs, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _loop, _iterator, _step, err;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        filterEntitys = [];
+                        errs = [];
+                        _this2.errors.length = 0;
+                        if (!nameList || nameList.length === 0) {
+                            filterEntitys = _this2.fieldEntities;
+                        } else {
+                            filterEntitys = _this2.fieldEntities.filter(function(param) {
+                                var name = param.props.name;
+                                return nameList.includes(name);
+                            });
+                        }
+                        _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                        _state.label = 1;
+                    case 1:
+                        _state.trys.push([
+                            1,
+                            6,
+                            7,
+                            8
+                        ]);
+                        _loop = function() {
+                            var entity, _entity_props, name, _entity_props_rules, rules, descriptor, validator, _this_store, param, errors, _errs;
+                            return _ts_generator(this, function(_state) {
+                                switch(_state.label){
+                                    case 0:
+                                        entity = _step.value;
+                                        _entity_props = entity.props, name = _entity_props.name, _entity_props_rules = _entity_props.rules, rules = _entity_props_rules === void 0 ? [] : _entity_props_rules;
+                                        descriptor = {};
+                                        if (rules.length) {
+                                            // 多条校验规则
+                                            if (rules.length > 1) {
+                                                descriptor[name] = [];
+                                                rules.forEach(function(v) {
+                                                    descriptor[name].push(v);
+                                                });
+                                            } else {
+                                                descriptor[name] = rules[0];
+                                            }
+                                        }
+                                        validator = new Schema(descriptor);
+                                        _state.label = 1;
+                                    case 1:
+                                        _state.trys.push([
+                                            1,
+                                            3,
+                                            4,
+                                            5
+                                        ]);
+                                        return [
+                                            4,
+                                            validator.validate(_define_property({}, name, (_this_store = _this2.store) === null || _this_store === void 0 ? void 0 : _this_store[name]))
+                                        ];
+                                    case 2:
+                                        _state.sent();
+                                        return [
+                                            3,
+                                            5
+                                        ];
+                                    case 3:
+                                        param = _state.sent();
+                                        errors = param.errors;
+                                        if (errors) {
+                                            ;
+                                            (_errs = errs).push.apply(_errs, _to_consumable_array(errors));
+                                            _this2.errors[name] = errors;
+                                        }
+                                        return [
+                                            3,
+                                            5
+                                        ];
+                                    case 4:
+                                        if (!errs || errs.length === 0) {
+                                            _this2.errors[name] = [];
+                                        }
+                                        return [
+                                            7
+                                        ];
+                                    case 5:
+                                        entity.onStoreChange('validate');
+                                        return [
+                                            2
+                                        ];
+                                }
+                            });
+                        };
+                        _iterator = filterEntitys[Symbol.iterator]();
+                        _state.label = 2;
+                    case 2:
+                        if (!!(_iteratorNormalCompletion = (_step = _iterator.next()).done)) return [
+                            3,
+                            5
+                        ];
+                        return [
+                            5,
+                            _ts_values(_loop())
+                        ];
+                    case 3:
+                        _state.sent();
+                        _state.label = 4;
+                    case 4:
+                        _iteratorNormalCompletion = true;
+                        return [
+                            3,
+                            2
+                        ];
+                    case 5:
+                        return [
+                            3,
+                            8
+                        ];
+                    case 6:
+                        err = _state.sent();
+                        _didIteratorError = true;
+                        _iteratorError = err;
+                        return [
+                            3,
+                            8
+                        ];
+                    case 7:
+                        try {
+                            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                                _iterator.return();
+                            }
+                        } finally{
+                            if (_didIteratorError) {
+                                throw _iteratorError;
+                            }
+                        }
+                        return [
+                            7
+                        ];
+                    case 8:
+                        return [
+                            2,
+                            errs
+                        ];
+                }
+            });
+        });
+        return function(nameList) {
+            return _ref.apply(this, arguments);
+        };
+    }());
+    _define_property(this, "submit", /*#__PURE__*/ _async_to_generator(function() {
+        var errors, _this_callbacks_onFinish, _this_callbacks, _this_callbacks_onFinishFailed, _this_callbacks1;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    return [
+                        4,
+                        _this2.validateFields()
+                    ];
+                case 1:
+                    errors = _state.sent();
+                    if (errors.length === 0) {
+                        ;
+                        (_this_callbacks_onFinish = (_this_callbacks = _this2.callbacks).onFinish) === null || _this_callbacks_onFinish === void 0 ? void 0 : _this_callbacks_onFinish.call(_this_callbacks, _this2.store);
+                    } else if (errors.length > 0) {
+                        ;
+                        (_this_callbacks_onFinishFailed = (_this_callbacks1 = _this2.callbacks).onFinishFailed) === null || _this_callbacks_onFinishFailed === void 0 ? void 0 : _this_callbacks_onFinishFailed.call(_this_callbacks1, _this2.store, errors);
+                    }
+                    return [
+                        2
+                    ];
+            }
+        });
+    }));
+    _define_property(this, "resetFields", function() {
+        _this.errors.length = 0;
+        _this.store = _this.initialValues;
+        _this.fieldEntities.forEach(function(entity) {
+            entity.onStoreChange('reset');
+        });
+    });
+    // 监听事件
+    _define_property(this, "registerUpdate", function(field, shouldUpdate) {
+        _this.updateList.push({
+            entity: field,
+            condition: shouldUpdate
+        });
+        return function() {
+            _this.updateList = _this.updateList.filter(function(i) {
+                return i.entity !== field;
+            });
+        };
+    });
+    _define_property(this, "dispatch", function(param) {
+        var name = param.name;
+        _this.validateFields([
+            name
+        ]);
+    });
+    _define_property(this, "getInternal", function(key) {
+        if (key === SECRET) {
+            return {
+                registerField: _this.registerField,
+                setCallback: _this.setCallback,
+                setInitialValues: _this.setInitialValues,
+                dispatch: _this.dispatch,
+                store: _this.store,
+                fieldEntities: _this.fieldEntities,
+                registerUpdate: _this.registerUpdate
+            };
+        }
+    });
+    _define_property(this, "getForm", function() {
+        return {
+            getFieldValue: _this.getFieldValue,
+            getFieldsValue: _this.getFieldsValue,
+            setFieldsValue: _this.setFieldsValue,
+            resetFields: _this.resetFields,
+            validateFields: _this.validateFields,
+            submit: _this.submit,
+            errors: _this.errors,
+            getInternal: _this.getInternal
+        };
+    });
+    this.callbacks = {
+        onFinish: function() {},
+        onFinishFailed: function() {}
+    };
+};
+export var useForm = function(form) {
+    var formRef = useRef();
+    if (!formRef.current) {
+        if (form) {
+            formRef.current = form;
+        } else {
+            var formStore = new FormStore();
+            formRef.current = formStore.getForm();
+        }
+    }
+    return [
+        formRef.current
+    ];
+};

package/dist/es/packages/formitem/formitem.d.ts

@@ -0,0 +1,82 @@
+import React, { ReactNode } from 'react';
+import { BaseFormField } from './types';
+import { Context } from '../form/context';
+import { BasicComponent } from "../../utils/typings";
+type TextAlign = 'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent';
+export interface FormItemProps extends Omit<BasicComponent, 'children'>, BaseFormField {
+    /**
+    * 必填表单项 label 的红色星标,仅用于控制样式
+    * @default false
+    */
+    required: boolean
+    /**
+    * 设置子元素默认值
+    * @default -
+    */
+    initialValue: any
+    /**
+    * 设置收集字段值变更的时机
+    * @default -
+    */
+    trigger: string
+    /**
+    * 子节点的值的属性，如 Checkbox 的是 'checked'
+    * @default -
+    */
+    valuePropName: string
+    /**
+    * 设置如何将 event 的值转换成字段值
+    * @default -
+    */
+    getValueFromEvent: (...args: any) => any
+    /**
+    * 点击事件并收集子组件 Ref
+    * @default -
+    */
+    onClick: (event: React.MouseEvent, componentRef: React.MutableRefObject<any>) => void
+    /**
+    * 错误提示文案对齐方式
+    * @default left
+    */
+    errorMessageAlign: TextAlign
+    /**
+    * 统一设置字段触发验证的时机
+    * @default onChange
+    */
+    validateTrigger: string | string[]
+    /**
+    * 更新逻辑
+    * @default false
+    */
+    shouldUpdate: boolean
+    /**
+    * 不使用样式，只使用字段管理
+    * @default false
+    */
+    noStyle: boolean
+    children: ReactNode | ((obj: any) => React.ReactNode);
+    /**
+    * 对齐方式
+    * @default flex-start
+    */
+    align?: 'flex-start' | 'center' | 'flex-end'
+}
+export declare class FormItem extends React.Component<Partial<FormItemProps>, {
+    resetCount: number;
+}> {
+    static defaultProps: FormItemProps;
+    static contextType: any;
+    context: React.ContextType<typeof Context>;
+    private cancelRegister;
+    private componentRef;
+    private eventOff;
+    constructor(props: FormItemProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    getControlled: (children: React.ReactElement) => any;
+    refresh: () => void;
+    onStoreChange: (type?: string) => void;
+    renderLayout: (childNode: React.ReactNode) => React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/es/packages/formitem/formitem.js

@@ -0,0 +1,205 @@
+import { _ as _call_super } from "@swc/helpers/_/_call_super";
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _create_class } from "@swc/helpers/_/_create_class";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _inherits } from "@swc/helpers/_/_inherits";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import React from "react";
+import { Context } from "../form/context";
+import Cell from "../cell";
+import { ComponentDefaults } from "../../utils/typings";
+import { isForwardRefComponent } from "../../utils/is-forward-ref-component";
+import { SECRET } from "../form/useform";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    required: false,
+    name: '',
+    label: '',
+    rules: [
+        {
+            required: false,
+            message: ''
+        }
+    ],
+    errorMessageAlign: 'left',
+    validateTrigger: 'onChange',
+    shouldUpdate: false,
+    noStyle: false
+});
+var _React_Component;
+export var FormItem = /*#__PURE__*/ function(_superClass) {
+    "use strict";
+    _inherits(FormItem, _superClass);
+    function FormItem(props) {
+        _class_call_check(this, FormItem);
+        var _this;
+        _this = _call_super(this, FormItem, [
+            props
+        ]), _define_property(_this, "cancelRegister", void 0), _define_property(_this, "componentRef", void 0), _define_property(_this, "eventOff", void 0), // children添加value属性和onChange事件
+        _define_property(_this, "getControlled", function(children) {
+            var _children_props;
+            var _this_context = _this.context, setFieldsValue = _this_context.setFieldsValue, getFieldValue = _this_context.getFieldValue;
+            var dispatch = _this.context.getInternal(SECRET).dispatch;
+            var _this_props = _this.props, _this_props_name = _this_props.name, name = _this_props_name === void 0 ? '' : _this_props_name;
+            if (children === null || children === void 0 ? void 0 : (_children_props = children.props) === null || _children_props === void 0 ? void 0 : _children_props.defaultValue) {
+                console.warn('通过 initialValue 设置初始值');
+            }
+            var fieldValue = getFieldValue(name);
+            var _obj;
+            var controlled = _object_spread_props(_object_spread({}, children.props), (_obj = {}, _define_property(_obj, _this.props.valuePropName || 'value', fieldValue !== undefined ? fieldValue : _this.props.initialValue), _define_property(_obj, _this.props.trigger || 'onChange', function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                // args [a, b]
+                var originOnChange = children.props[_this.props.trigger || 'onChange'];
+                if (originOnChange) {
+                    originOnChange.apply(void 0, _to_consumable_array(args));
+                }
+                var _args = _sliced_to_array(args, 1), next = _args[0];
+                if (_this.props.getValueFromEvent) {
+                    var _this_props;
+                    next = (_this_props = _this.props).getValueFromEvent.apply(_this_props, _to_consumable_array(args));
+                }
+                setFieldsValue(_define_property({}, name, next), false);
+            }), _obj));
+            var validateTrigger = _this.props.validateTrigger;
+            var validateTriggers = [
+                _this.props.trigger || 'onChange'
+            ];
+            if (validateTrigger) {
+                validateTriggers = typeof validateTrigger === 'string' ? [
+                    validateTrigger
+                ] : _to_consumable_array(validateTrigger);
+                validateTriggers.forEach(function(trigger) {
+                    var originTrigger = controlled[trigger];
+                    controlled[trigger] = function() {
+                        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                            args[_key] = arguments[_key];
+                        }
+                        if (originTrigger) {
+                            originTrigger.apply(void 0, _to_consumable_array(args));
+                        }
+                        if (_this.props.rules && _this.props.rules.length) {
+                            dispatch({
+                                name: _this.props.name
+                            });
+                        }
+                    };
+                });
+            }
+            if (isForwardRefComponent(children)) {
+                controlled.ref = function(componentInstance) {
+                    var originRef = children.ref;
+                    if (originRef) {
+                        if (typeof originRef === 'function') {
+                            originRef(componentInstance);
+                        }
+                        if ('current' in originRef) {
+                            originRef.current = componentInstance;
+                        }
+                    }
+                    _this.componentRef = componentInstance;
+                };
+            }
+            return controlled;
+        }), _define_property(_this, "refresh", function() {
+            _this.setState(function(param) {
+                var resetCount = param.resetCount;
+                return {
+                    resetCount: resetCount + 1
+                };
+            });
+        }), _define_property(_this, "onStoreChange", function(type) {
+            if (type === 'reset') {
+                _this.context.errors[_this.props.name] = [];
+                _this.refresh();
+            } else {
+                _this.forceUpdate();
+            }
+        }), _define_property(_this, "renderLayout", function(childNode) {
+            var _$_object_spread = _object_spread({}, defaultProps, _this.props), label = _$_object_spread.label, name = _$_object_spread.name, required = _$_object_spread.required, rules = _$_object_spread.rules, className = _$_object_spread.className, style = _$_object_spread.style, errorMessageAlign = _$_object_spread.errorMessageAlign, align = _$_object_spread.align;
+            var requiredInRules = rules === null || rules === void 0 ? void 0 : rules.some(function(rule) {
+                return rule.required;
+            });
+            var item = name ? _this.context.errors[name] : [];
+            var starPosition = _this.context.starPosition;
+            var renderStar = (required || requiredInRules) && /*#__PURE__*/ React.createElement("i", {
+                className: "required"
+            });
+            var renderLabel = /*#__PURE__*/ React.createElement(React.Fragment, null, starPosition === 'left' ? renderStar : null, label, starPosition === 'right' ? renderStar : null);
+            return /*#__PURE__*/ React.createElement(Cell, {
+                className: "nut-form-item ".concat(className),
+                style: style,
+                align: align,
+                onClick: function(e) {
+                    return _this.props.onClick && _this.props.onClick(e, _this.componentRef);
+                }
+            }, label ? /*#__PURE__*/ React.createElement("div", {
+                className: "nut-cell-title nut-form-item-label"
+            }, renderLabel) : null, /*#__PURE__*/ React.createElement("div", {
+                className: "nut-cell-value nut-form-item-body"
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: "nut-form-item-body-slots"
+            }, childNode), item && item.length > 0 && /*#__PURE__*/ React.createElement("div", {
+                className: "nut-form-item-body-tips",
+                style: {
+                    textAlign: errorMessageAlign
+                }
+            }, item[0].message)));
+        });
+        _this.componentRef = /*#__PURE__*/ React.createRef();
+        _this.state = {
+            resetCount: 1
+        };
+        return _this;
+    }
+    _create_class(FormItem, [
+        {
+            key: "componentDidMount",
+            value: function componentDidMount() {
+                // Form设置initialValues时的处理
+                var _this_context_getInternal = this.context.getInternal(SECRET), _this_context_getInternal_store = _this_context_getInternal.store, store = _this_context_getInternal_store === void 0 ? {} : _this_context_getInternal_store, setInitialValues = _this_context_getInternal.setInitialValues;
+                if (this.props.initialValue && this.props.name && !Object.keys(store).includes(this.props.name)) {
+                    setInitialValues(_object_spread_props(_object_spread({}, store), _define_property({}, this.props.name, this.props.initialValue)), true);
+                }
+                // 注册组件实例到FormStore
+                var _this_context_getInternal1 = this.context.getInternal(SECRET), registerField = _this_context_getInternal1.registerField, registerUpdate = _this_context_getInternal1.registerUpdate;
+                this.cancelRegister = registerField(this);
+                // 这里需要增加事件监听，因为此实现属于依赖触发
+                this.eventOff = registerUpdate(this, this.props.shouldUpdate);
+            }
+        },
+        {
+            key: "componentWillUnmount",
+            value: function componentWillUnmount() {
+                if (this.cancelRegister) {
+                    this.cancelRegister();
+                }
+                if (this.eventOff) {
+                    this.eventOff();
+                }
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                var children = this.props.children;
+                var child = Array.isArray(children) ? children[0] : children;
+                var returnChildNode;
+                if (!this.props.shouldUpdate) {
+                    returnChildNode = /*#__PURE__*/ React.cloneElement(child, this.getControlled(child));
+                } else {
+                    returnChildNode = child(this.context);
+                }
+                return /*#__PURE__*/ React.createElement(React.Fragment, {
+                    key: this.state.resetCount
+                }, this.props.noStyle ? returnChildNode : this.renderLayout(returnChildNode));
+            }
+        }
+    ]);
+    return FormItem;
+}(_React_Component = React.Component);
+_define_property(FormItem, "defaultProps", defaultProps);
+_define_property(FormItem, "contextType", Context);

package/dist/es/packages/formitem/index.d.ts

@@ -0,0 +1,3 @@
+import { FormItem } from './formitem';
+export type { FormItemRule } from './types';
+export default FormItem;

package/dist/es/packages/formitem/index.js

@@ -0,0 +1,2 @@
+import { FormItem } from "./formitem";
+export default FormItem;

package/dist/es/packages/formitem/style/css.js

@@ -0,0 +1 @@
+import './style.css'