@kdcloudjs/kdesign 1.0.2

package/es/form/Form.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React, { useContext, useEffect } from 'react';
+import classnames from 'classnames';
+import { ConfigContext } from '../config-provider';
+import { getCompProps } from '../_utils';
+import useForm, { INTERNAL_HOOK_KEY } from './hooks/useForm';
+import FormContext from './FormContext';
+import FieldContext from './FieldContext';
+
+var Form = function Form(props, ref) {
+  var _context, _classnames;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps;
+
+  var formProps = getCompProps('Form', userDefaultProps, props);
+
+  var children = formProps.children,
+      defaultValues = formProps.defaultValues,
+      className = formProps.className,
+      form = formProps.form,
+      labelAlign = formProps.labelAlign,
+      labelWidth = formProps.labelWidth,
+      layout = formProps.layout,
+      name = formProps.name,
+      customizePrefixCls = formProps.prefixCls,
+      wrapperWidth = formProps.wrapperWidth,
+      onFinish = formProps.onFinish,
+      onFinishFailed = formProps.onFinishFailed,
+      onValuesChange = formProps.onValuesChange,
+      restProps = __rest(formProps, ["children", "defaultValues", "className", "form", "labelAlign", "labelWidth", "layout", "name", "prefixCls", "wrapperWidth", "onFinish", "onFinishFailed", "onValuesChange"]);
+
+  var formPrefixCls = getPrefixCls(prefixCls, 'form', customizePrefixCls);
+  var formClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, _concatInstanceProperty(_context = "".concat(formPrefixCls, "-")).call(_context, layout), true), _classnames), className);
+  var formContext = useContext(FormContext);
+
+  var _useForm = useForm(form),
+      _useForm2 = _slicedToArray(_useForm, 1),
+      formInstance = _useForm2[0]; // 注册
+
+
+  useEffect(function () {
+    formContext.registerForm(name, formInstance);
+    return function () {
+      formContext.unregisterForm(name);
+    };
+  }, [name, formInstance, formContext]); // 暴露 formInstance
+
+  React.useImperativeHandle(ref, function () {
+    return formInstance;
+  }); // 设置默认值及回调函数
+
+  var _formInstance$getInte = formInstance.getInternalHooks(INTERNAL_HOOK_KEY),
+      setDefaultValues = _formInstance$getInte.setDefaultValues,
+      setCallbacks = _formInstance$getInte.setCallbacks;
+
+  setDefaultValues(defaultValues);
+  setCallbacks({
+    onFinish: onFinish,
+    onFinishFailed: onFinishFailed,
+    onValuesChange: onValuesChange
+  });
+  var formContextValue = React.useMemo(function () {
+    return _extends(_extends({}, formInstance), {
+      labelAlign: labelAlign,
+      labelWidth: labelWidth,
+      wrapperWidth: wrapperWidth,
+      vertical: layout === 'vertical'
+    });
+  }, [formInstance, labelAlign, labelWidth, wrapperWidth, layout]);
+
+  var handleSubmit = function handleSubmit(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    formInstance.submit();
+  };
+
+  var handleReset = function handleReset(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    formInstance.resetFields();
+  };
+
+  return /*#__PURE__*/React.createElement("form", _extends({
+    className: formClassName
+  }, restProps, {
+    onSubmit: handleSubmit,
+    onReset: handleReset
+  }), /*#__PURE__*/React.createElement(FieldContext.Provider, {
+    value: formContextValue
+  }, children));
+};
+
+export default Form;

package/es/form/FormContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface Forms {
+    [name: string]: any;
+}
+export interface FormContextProps {
+    registerForm: (name: string, form: any) => void;
+    unregisterForm: (name: string) => void;
+}
+declare const FormContext: React.Context<FormContextProps>;
+declare const FormProvider: React.FC<any>;
+export { FormProvider };
+export default FormContext;

package/es/form/FormContext.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import React from 'react';
+var FormContext = /*#__PURE__*/React.createContext({
+  // eslint-disable-next-line
+  registerForm: function registerForm() {},
+  // eslint-disable-next-line
+  unregisterForm: function unregisterForm() {}
+});
+
+var FormProvider = function FormProvider(_ref) {
+  var children = _ref.children;
+  var formContext = React.useContext(FormContext);
+  var formsRef = React.useRef({});
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: _extends(_extends({}, formContext), {
+      registerForm: function registerForm(name, form) {
+        if (name) {
+          formsRef.current = _extends(_extends({}, formsRef.current), _defineProperty({}, name, form));
+        }
+
+        formContext.registerForm(name, form);
+      },
+      unregisterForm: function unregisterForm(name) {
+        var newForms = _extends({}, formsRef.current);
+
+        delete newForms[name];
+        formsRef.current = newForms;
+        formContext.unregisterForm(name);
+      }
+    })
+  }, children);
+};
+
+export { FormProvider };
+export default FormContext;

package/es/form/hooks/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+declare function useForceUpdate(): () => void;
+export default useForceUpdate;

package/es/form/hooks/useForceUpdate.js

@@ -0,0 +1,15 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import React from 'react';
+
+function useForceUpdate() {
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      updateState = _React$useState2[1];
+
+  var forceUpdate = React.useCallback(function () {
+    updateState({});
+  }, []);
+  return forceUpdate;
+}
+
+export default useForceUpdate;

package/es/form/hooks/useForm.d.ts

@@ -0,0 +1,3 @@
+export declare const INTERNAL_HOOK_KEY = "__KD_INTERNAL_FORM_HOOK__";
+declare function useForm(form?: any): [any];
+export default useForm;

package/es/form/hooks/useForm.js

@@ -0,0 +1,367 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import React from 'react';
+import Schema from 'async-validator';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import set from 'lodash/set'; // import useForceUpdate from './useForceUpdate'
+
+import devwarning from '../../_utils/devwarning';
+export var INTERNAL_HOOK_KEY = '__KD_INTERNAL_FORM_HOOK__';
+
+var FormStore = /*#__PURE__*/_createClass(function FormStore() {
+  var _this = this;
+
+  _classCallCheck(this, FormStore);
+
+  this.isMounted = false; // private forceRootUpdate:() => void
+
+  this.defaultValues = {};
+  this.store = {};
+  this.fields = {};
+  this.rules = {};
+  this.errorMessages = {};
+  this.callbacks = {}; // constructor (forceRootUpdate: () => void) {
+  //   this.forceRootUpdate = forceRootUpdate
+  // }
+
+  this.getForm = function () {
+    return {
+      getFieldValue: _this.getFieldValue,
+      getFieldsValue: _this.getFieldsValue,
+      getDefaultValue: _this.getDefaultValue,
+      getFieldError: _this.getFieldError,
+      getFieldsError: _this.getFieldsError,
+      resetFields: _this.resetFields,
+      setFieldValue: _this.setFieldValue,
+      setFieldsValue: _this.setFieldsValue,
+      validateFields: _this.validateFields,
+      submit: _this.submit,
+      getInternalHooks: _this.getInternalHooks
+    };
+  };
+
+  this.getInternalHooks = function (key) {
+    if (key !== INTERNAL_HOOK_KEY) {
+      devwarning(false, 'Form', '`getInternalHooks` is internal usage.');
+      return null;
+    }
+
+    _this.isMounted = true;
+    return {
+      dispatch: _this.dispatch,
+      setDefaultValues: _this.setDefaultValues,
+      setCallbacks: _this.setCallbacks,
+      registerField: _this.registerField
+    };
+  };
+
+  this.warningUnhooked = function () {
+    !_this.isMounted && devwarning(false, 'Form', 'Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?');
+  };
+  /**
+   * Dispath. 用于 Field 触发数据变更
+   * @param action
+   */
+
+
+  this.dispatch = function (action) {
+    _this.warningUnhooked();
+
+    var namePath = action.namePath;
+
+    switch (action.type) {
+      case 'updateValue':
+        _this.updateValue(namePath, action.value);
+
+        break;
+
+      case 'validateField':
+        _this.validateFields([namePath]);
+
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  this.setDefaultValues = function (values) {
+    _this.warningUnhooked();
+
+    if (!values) return;
+    var copyDefaultValues = cloneDeep(_this.defaultValues);
+    var copyValues = cloneDeep(values);
+    _this.defaultValues = _extends(_extends({}, copyDefaultValues), copyValues);
+    _this.store = merge(_this.store, values);
+  };
+
+  this.getDefaultValue = function (name) {
+    _this.warningUnhooked();
+
+    return get(_this.defaultValues, name);
+  };
+
+  this.getFieldValue = function (name) {
+    _this.warningUnhooked();
+
+    return get(_this.store, name);
+  };
+
+  this.setFieldValue = function (name, value) {
+    _this.warningUnhooked();
+
+    _this.setFieldsValue(_defineProperty({}, name, value));
+  };
+
+  this.getFieldsValue = function (namePathList) {
+    _this.warningUnhooked();
+
+    if (!namePathList) {
+      return cloneDeep(_this.store);
+    }
+
+    var fieldsValue = {};
+    namePathList.forEach(function (name) {
+      fieldsValue[name] = get(_this.store, name);
+    });
+    return fieldsValue;
+  };
+
+  this.setFieldsValue = function (store) {
+    _this.warningUnhooked();
+
+    if (!store) return;
+    var prevStore = cloneDeep(_this.store);
+    _this.store = merge(_this.store, store);
+
+    _this.notifyObservers(prevStore, null, 'externalUpdateValue');
+  };
+
+  this.getFieldError = function (name) {
+    _this.warningUnhooked();
+
+    return get(_this.errorMessages, name);
+  };
+
+  this.getFieldsError = function (namePathList) {
+    _this.warningUnhooked();
+
+    if (!namePathList) {
+      return cloneDeep(_this.errorMessages);
+    }
+
+    var result = {};
+    namePathList.forEach(function (name) {
+      result[name] = _this.errorMessages[name];
+    });
+    return result;
+  };
+
+  this.getRules = function (namePathList) {
+    _this.warningUnhooked();
+
+    if (!namePathList) {
+      return _this.rules;
+    }
+
+    var rules = {};
+    namePathList.forEach(function (name) {
+      if (_this.rules[name]) {
+        rules[name] = cloneDeep(_this.rules[name]);
+      }
+    });
+    return _Object$keys(rules).length === 0 ? null : rules;
+  };
+
+  this.setRules = function (name, rules) {
+    _this.warningUnhooked();
+
+    set(_this.rules, name, rules);
+  };
+
+  this.setCallbacks = function (callbacks) {
+    _this.warningUnhooked();
+
+    _this.callbacks = cloneDeep(callbacks);
+  };
+
+  this.resetFields = function () {
+    _this.warningUnhooked();
+
+    var prevStore = cloneDeep(_this.store); // 重置时，无默认值的 field value 不能设置为 undefined
+    // 部分控件 undefined 的话不会生效
+
+    var newStore = {};
+
+    for (var key in _this.store) {
+      newStore[key] = _this.defaultValues[key] ? _this.defaultValues[key] : '';
+    }
+
+    _this.store = newStore;
+
+    _this.notifyObservers(prevStore, null, 'reset');
+  };
+
+  this.updateValue = function (name, value) {
+    _this.warningUnhooked();
+
+    var prevStore = cloneDeep(_this.store);
+    set(_this.store, name, value);
+    var trigger = get(_this.fields, [name, 'meta', 'trigger']); // 默认是 onChange 触发校验
+
+    if (trigger === undefined || trigger === 'onChange' || _includesInstanceProperty(trigger).call(trigger, 'onChange')) {
+      _this.validateFields([name]);
+    } else {
+      _this.notifyObservers(prevStore, [name], 'updateValue');
+    }
+
+    var onValuesChange = _this.callbacks.onValuesChange;
+
+    if (onValuesChange) {
+      onValuesChange(_defineProperty({}, name, value), cloneDeep(_this.store));
+    }
+  };
+  /**
+   * 注册 Field
+   * Field 如果带有验证规则的话，则注册时进行校验
+   * @param name Field 名称
+   * @param field Field 实例
+   */
+
+
+  this.registerField = function (name, field) {
+    _this.warningUnhooked();
+
+    _this.fields[name] = field;
+    var meta = field.meta;
+
+    if (meta.rules !== undefined) {
+      _this.setRules(name, meta.rules); // TODO: 初始化的时候是否需要校验？？
+      // this.validateFields([name]).catch(({ errorInfos }) => {
+      //   this.validateFieldFaild(errorInfos, 'internal')
+      // })
+
+    }
+  };
+
+  this.validateFields = function (namePathList) {
+    _this.warningUnhooked();
+
+    var rules = _this.getRules(namePathList); // 没有设置校验规则的情况下，不做校验
+
+
+    if (!rules) return _Promise.resolve({
+      values: cloneDeep(_this.store)
+    });
+    var validator = new Schema(rules);
+    var validatePromise = new _Promise(function (resolve, reject) {
+      validator.validate(_this.store).then(function () {
+        resolve({
+          values: cloneDeep(_this.store)
+        });
+      }).catch(function (_ref) {
+        var errors = _ref.errors,
+            fields = _ref.fields;
+        // eslint-disable-next-line
+        console.log(errors); // eslint-disable-next-line  prefer-promise-reject-errors
+
+        reject({
+          errors: errors,
+          errorInfos: {
+            values: cloneDeep(_this.store),
+            fields: fields
+          }
+        });
+      });
+    });
+    /**
+     * 内部校验用
+     */
+
+    validatePromise.then(function () {
+      namePathList === null || namePathList === void 0 ? void 0 : namePathList.forEach(function (name) {
+        _this.errorMessages[name] && delete _this.errorMessages[name];
+      });
+
+      _this.notifyObservers(_this.store, namePathList || [], 'validateFinish');
+    }).catch(function (_ref2) {
+      var errorInfos = _ref2.errorInfos;
+      var _errorInfos$fields = errorInfos.fields,
+          fields = _errorInfos$fields === void 0 ? {} : _errorInfos$fields;
+
+      _Object$keys(fields).forEach(function (name) {
+        // 取第一个错误的信息
+        _this.errorMessages[name] = fields[name][0].message;
+      });
+
+      _this.notifyObservers(_this.store, namePathList || [], 'validateFinish');
+    }); // 返回 promise 给外部调用者
+
+    return validatePromise;
+  };
+
+  this.submit = function () {
+    _this.warningUnhooked();
+
+    _this.validateFields().then(function (values) {
+      var onFinish = _this.callbacks.onFinish;
+
+      if (onFinish) {
+        try {
+          onFinish(values);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    }).catch(function (_ref3) {
+      var errorInfos = _ref3.errorInfos;
+      var onFinishFailed = _this.callbacks.onFinishFailed;
+
+      if (onFinishFailed) {
+        onFinishFailed(errorInfos);
+      }
+    });
+  };
+
+  this.notifyObservers = function (prevStore, namePathList, source) {
+    _this.warningUnhooked();
+
+    _Object$values(_this.fields).forEach(function (_ref4) {
+      var onStoreChange = _ref4.onStoreChange;
+      var stores = {
+        prev: prevStore,
+        curr: _this.store
+      };
+      onStoreChange(stores, namePathList, source);
+    });
+  };
+});
+
+function useForm(form) {
+  var formRef = React.useRef(); // const forceUpdate = useForceUpdate()
+
+  if (!formRef.current) {
+    if (form) {
+      formRef.current = form;
+    } else {
+      // Create a new FormStore if not provided
+      // const forceReRender = () => {
+      //   forceUpdate()
+      // }
+      var formStore = new FormStore();
+      formRef.current = formStore.getForm();
+    }
+  }
+
+  return [formRef.current];
+}
+
+export default useForm;

package/es/form/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { FormInstance } from './interface';
+import Item from './Field';
+import useForm from './hooks/useForm';
+import { FormProps } from './Form';
+import { FormProvider } from './FormContext';
+declare const InternalForm: <Values = any>(props: FormProps<Values> & {
+    children?: React.ReactNode;
+} & {
+    ref?: ((instance: FormInstance<Values> | null) => void) | React.RefObject<FormInstance<Values>> | null | undefined;
+}) => React.ReactElement;
+declare type InternalForm = typeof InternalForm;
+interface RefForm extends InternalForm {
+    FormProvider: typeof FormProvider;
+    Item: typeof Item;
+    useForm: typeof useForm;
+    displayName: string;
+}
+declare const RefForm: RefForm;
+export { FormInstance, Item, FormProvider, FormProps };
+export default RefForm;

package/es/form/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Item from './Field';
+import useForm from './hooks/useForm';
+import FieldForm from './Form';
+import { FormProvider } from './FormContext';
+var InternalForm = /*#__PURE__*/React.forwardRef(FieldForm);
+var RefForm = InternalForm;
+RefForm.FormProvider = FormProvider;
+RefForm.Item = Item;
+RefForm.useForm = useForm;
+RefForm.displayName = 'Form';
+export { Item, FormProvider };
+export default RefForm;

package/es/form/interface.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+export declare type NamePath = string | number;
+export declare type FormLayout = 'horizontal' | 'vertical' | 'inline';
+export declare type LabelAlign = 'left' | 'right';
+export declare type StoreValue = any;
+export interface Store {
+    [name: string]: StoreValue;
+}
+export interface FieldError {
+    [name: string]: string;
+}
+export interface Fields {
+    [name: string]: FieldInstance;
+}
+export interface FormInstance<Values = any> {
+    getFieldError: (name: NamePath) => string | undefined;
+    getFieldsError: (namePathList?: NamePath[]) => FieldError;
+    getFieldValue: (name: NamePath) => any;
+    getDefaultValue: (name: NamePath) => any;
+    getFieldsValue: (namePathList?: NamePath[]) => any;
+    resetFields: (fields?: NamePath[]) => void;
+    setFieldsValue: (value: Values) => void;
+    setFieldValue: (name: NamePath, value: Values) => void;
+    validateFields: (namePathList?: NamePath[]) => Promise<Values>;
+    submit: () => void;
+    getInternalHooks: (secret: string) => InternalHooks | null;
+}
+export interface InternalFormInstance extends FormInstance {
+    labelWidth?: string | number;
+    labelAlign?: LabelAlign;
+    wrapperWidth?: string | number;
+    vertical?: boolean;
+    getInternalHooks: (key: string) => InternalHooks | null;
+}
+export declare type Stores = {
+    prev: Store;
+    curr: Store;
+};
+export interface FieldInstance {
+    onStoreChange: (stores: Stores, namePathList: NamePath[] | null, source: NotifySource) => void;
+    meta: {
+        name?: NamePath;
+        rules?: Rule[];
+        defaultValue?: any;
+        trigger?: string | string[];
+    };
+}
+export interface Callbacks<Values = any> {
+    onValuesChange?: (changedValues: any, values: Values) => void;
+    onFinish?: (value: Values) => void;
+    onFinishFailed?: (errorInfo: ValidateErrorEntity<Values>) => void;
+}
+export interface UpdateAction {
+    type: 'updateValue';
+    namePath: NamePath;
+    value: StoreValue;
+}
+export interface ValidateAction {
+    type: 'validateField';
+    namePath: NamePath;
+}
+export declare type ReducerAction = UpdateAction | ValidateAction;
+export interface InternalHooks {
+    dispatch: (action: ReducerAction) => void;
+    setDefaultValues: (values: Store) => void;
+    setCallbacks: (callbacks: Callbacks) => void;
+    registerField: (name: NamePath, field: FieldInstance) => void;
+}
+export declare type NotifySource = 'externalUpdateValue' | 'updateValue' | 'reset' | 'validateField' | 'validateFinish';
+export interface ValidateErrorEntity<Values = any> {
+    values: Values;
+    errorFields: {
+        name: NamePath;
+        errors: string[];
+    }[];
+}
+declare type Validator = (rule: RuleObject, value: StoreValue, callback: (error?: string) => void) => Promise<void | any> | void;
+export declare type RuleType = 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';
+export interface ValidatorRule {
+    message?: string | React.ReactElement;
+    validator: Validator;
+}
+interface BaseRule {
+    enum?: StoreValue[];
+    len?: number;
+    max?: number;
+    message?: string | React.ReactElement;
+    min?: number;
+    pattern?: RegExp;
+    required?: boolean;
+    transform?: (value: StoreValue) => StoreValue;
+    type?: RuleType;
+    whitespace?: boolean;
+    /** Customize rule level `validateTrigger`. Must be subset of Field `validateTrigger` */
+    validateTrigger?: string | string[];
+}
+declare type AggregationRule = BaseRule & Partial<ValidatorRule>;
+interface ArrayRule extends Omit<AggregationRule, 'type'> {
+    type: 'array';
+    defaultField?: RuleObject;
+}
+export declare type RuleRender = (form: FormInstance) => RuleObject;
+export declare type RuleObject = AggregationRule | ArrayRule;
+export declare type Rule = RuleObject | RuleRender;
+export {};