@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Form/FormItemContext.d.ts

@@ -1,7 +1,16 @@
-/// <reference types="react" />
+import { MutableRefObject } from 'react';
 import { TypeAttributes } from '../types/common';
+import { FormItemValidateState } from './typings';
 interface Props {
     size?: TypeAttributes.Size;
+    hasLabel?: boolean;
+    labelPosition?: 'left' | 'right' | 'top';
+    /** formitem 校验的状态 */
+    validateState?: FormItemValidateState;
+    /** formitem 校验的状态 */
+    computedWidth?: number;
+    setComputedWidth?: (width: number) => void;
+    oldWidthRef: MutableRefObject<number>;
 }
 export declare const FormItemContext: import("react").Context<Props>;
 export {};

package/dist/Form/FormItemContext.js

@@ -1,4 +1,12 @@
 import { createContext } from 'react';
 export var FormItemContext = /*#__PURE__*/createContext({
-  size: null
+  size: null,
+  hasLabel: false,
+  labelPosition: 'right',
+  validateState: null,
+  computedWidth: 0,
+  setComputedWidth: undefined,
+  oldWidthRef: {
+    current: 0
+  }
 });

package/dist/Form/FormLabelWrap.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface FormLabelWrapProps {
+    isAutoWidth?: boolean;
+    updateAll?: boolean;
+    children?: React.ReactNode;
+}
+declare const FormLabelWrap: React.FC<FormLabelWrapProps>;
+export default FormLabelWrap;

package/dist/Form/FormLabelWrap.js

@@ -0,0 +1,103 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { memo, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { useClassNames } from "../hooks";
+import { useResizeObserver } from "../hooks/useResizeObserver";
+import { FormItemContext } from "./FormItemContext";
+import FieldContext from "./InternalFormContext";
+var FormLabelWrap = /*#__PURE__*/memo(function (props) {
+  var _props$isAutoWidth = props.isAutoWidth,
+    isAutoWidth = _props$isAutoWidth === void 0 ? false : _props$isAutoWidth,
+    _props$updateAll = props.updateAll,
+    updateAll = _props$updateAll === void 0 ? false : _props$updateAll,
+    children = props.children;
+  var formContext = useContext(FieldContext);
+  var formItemContext = useContext(FormItemContext);
+  var computedWidth = formItemContext.computedWidth,
+    setComputedWidth = formItemContext.setComputedWidth,
+    oldWidthRef = formItemContext.oldWidthRef;
+  var _useClassNames = useClassNames('form'),
+    be = _useClassNames.be;
+  var elRef = useRef(null);
+  var getLabelWidth = useCallback(function () {
+    var _elRef$current;
+    if ((_elRef$current = elRef.current) !== null && _elRef$current !== void 0 && _elRef$current.firstElementChild) {
+      var width = window.getComputedStyle(elRef.current.firstElementChild).width;
+      return Math.ceil(Number.parseFloat(width));
+    } else {
+      return 0;
+    }
+  }, []);
+  var updateLabelWidth = useCallback(function () {
+    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'update';
+    if (children && isAutoWidth) {
+      if (action === 'update') {
+        var newWidth = getLabelWidth();
+        oldWidthRef.current = computedWidth;
+        setComputedWidth(newWidth);
+      } else if (action === 'remove') {
+        var _formContext$deregist;
+        formContext === null || formContext === void 0 || (_formContext$deregist = formContext.deregisterLabelWidth) === null || _formContext$deregist === void 0 || _formContext$deregist.call(formContext, computedWidth);
+      }
+    }
+  }, [children, isAutoWidth, getLabelWidth, oldWidthRef, computedWidth, setComputedWidth, formContext]);
+  useEffect(function () {
+    updateLabelWidth('update');
+    return function () {
+      updateLabelWidth('remove');
+    };
+  }, []);
+  useEffect(function () {
+    updateLabelWidth('update');
+  }, [children]);
+  useEffect(function () {
+    if (updateAll && formContext !== null && formContext !== void 0 && formContext.registerLabelWidth) {
+      formContext.registerLabelWidth(computedWidth, oldWidthRef.current);
+    }
+  }, [computedWidth]);
+  var firstChildRef = useRef(null);
+  useEffect(function () {
+    var _elRef$current2;
+    if ((_elRef$current2 = elRef.current) !== null && _elRef$current2 !== void 0 && _elRef$current2.firstElementChild) {
+      firstChildRef.current = elRef.current.firstElementChild;
+    }
+  }, [children]);
+  useResizeObserver(firstChildRef, function () {
+    updateLabelWidth('update');
+  });
+  var style = useMemo(function () {
+    if (!isAutoWidth) {
+      return {};
+    }
+    var autoLabelWidth = formContext === null || formContext === void 0 ? void 0 : formContext.autoLabelWidth;
+    var hasLabel = formItemContext === null || formItemContext === void 0 ? void 0 : formItemContext.hasLabel;
+    if (hasLabel && autoLabelWidth && autoLabelWidth !== 'auto') {
+      if (computedWidth === 0) {
+        return null;
+      }
+      var marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth);
+      var labelPosition = formItemContext.labelPosition || formContext.labelPosition;
+      var marginPosition = labelPosition === 'left' ? 'marginRight' : 'marginLeft';
+      if (marginWidth) {
+        return _defineProperty({}, marginPosition, "".concat(marginWidth, "px"));
+      }
+    }
+    return {};
+  }, [isAutoWidth, computedWidth, formContext, formItemContext]);
+  if (!children) {
+    return null;
+  }
+  if (isAutoWidth) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: elRef,
+      className: be('item', 'label-wrap'),
+      style: style
+    }, children);
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+});
+FormLabelWrap.displayName = 'ElLabelWrap';
+export default FormLabelWrap;

package/dist/Form/{FieldContext.d.ts → InternalFormContext.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { InternalFormInstance } from './typings';
 export declare const HOOK_MARK = "RC_FORM_INTERNAL_HOOKS";
-declare const FormContext: import("react").Context<InternalFormInstance>;
-export default FormContext;
+declare const InternalFormContext: import("react").Context<InternalFormInstance>;
+export default InternalFormContext;

package/dist/Form/{FieldContext.js → InternalFormContext.js}

@@ -4,7 +4,7 @@ export var HOOK_MARK = 'RC_FORM_INTERNAL_HOOKS';
 var warningFunc = function warningFunc() {
   warning(false, 'Can not find FormContext. Please make sure you wrap Field under Form.');
 };
-var FormContext = /*#__PURE__*/createContext({
+var InternalFormContext = /*#__PURE__*/createContext({
   getFieldValue: warningFunc,
   getFieldsValue: warningFunc,
   getFieldError: warningFunc,
@@ -25,6 +25,9 @@ var FormContext = /*#__PURE__*/createContext({
   labelWidth: 120,
   size: null,
   rules: {},
+  autoLabelWidth: '',
+  registerLabelWidth: warningFunc,
+  deregisterLabelWidth: warningFunc,
   getInternalHooks: function getInternalHooks() {
     warningFunc();
     return {
@@ -43,4 +46,4 @@ var FormContext = /*#__PURE__*/createContext({
     };
   }
 });
-export default FormContext;
+export default InternalFormContext;

package/dist/Form/List.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import type { Meta, NamePath, StoreValue, ValidatorRule } from './typings';
 export interface ListField {
     name: number;
@@ -17,5 +17,5 @@ export interface ListProps {
     initialValue?: any[];
     children?: (fields: ListField[], operations: ListOperations, meta: Meta) => React.ReactElement;
 }
-declare const List: FC<ListProps>;
-export default List;
+declare const _default: React.NamedExoticComponent<ListProps>;
+export default _default;

package/dist/Form/List.js

@@ -10,10 +10,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import React, { useContext, useMemo, useRef } from 'react';
+import React, { memo, useContext, useMemo, useRef } from 'react';
 import { warning } from "../Util";
-import FieldContext from "./FieldContext";
 import FormItem from "./FormItem";
+import FieldContext from "./InternalFormContext";
 import ListContext from "./ListContext";
 import { getNamePath, move as _move } from "./utils/valueUtil";
 var List = function List(_ref) {
@@ -53,7 +53,7 @@ var List = function List(_ref) {
 
   // User should not pass `children` as other type.
   if (typeof children !== 'function') {
-    warning(false, 'Form.List only accepts function as children.');
+    warning(false, 'ElFormList only accepts function as children.');
     return null;
   }
   var shouldUpdate = function shouldUpdate(prevValue, nextValue, _ref2) {
@@ -156,4 +156,4 @@ var List = function List(_ref) {
     }), operations, meta);
   })));
 };
-export default List;
+export default /*#__PURE__*/memo(List);

package/dist/Form/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Form } from './Form';
+export { default as FormItem } from './FormItem';
 export { FormItemContext } from './FormItemContext';
-export type { FormInstance, FormProps, FormRules, InternalFormInstance, InternalNamePath, NamePath, Rule, RuleType, ValidateErrorEntity, ValidateMessages, ValidateOptions, } from './typings';
+export { default as List } from './List';
 export { default as useForm } from './useForm';
-export type { InternalFieldProps as FormItemProps } from './FormItem';
+export { default as useWatch } from './useWatch';
+export type { InternalFormInstance as FormContextProps, FormInstance, FormItemProps, FormProps, FormRules, InternalNamePath, NamePath, Rule, RuleType, ValidateErrorEntity, ValidateMessages, ValidateOptions, } from './typings';

package/dist/Form/index.js

@@ -1,3 +1,6 @@
 export { default as Form } from "./Form";
+export { default as FormItem } from "./FormItem";
 export { FormItemContext } from "./FormItemContext";
-export { default as useForm } from "./useForm";
+export { default as List } from "./List";
+export { default as useForm } from "./useForm";
+export { default as useWatch } from "./useWatch";

package/dist/Form/typings.d.ts

@@ -1,12 +1,19 @@
 import React, { ComponentClass, FC, RefObject } from 'react';
 import type { Options as ScrollOptions } from 'scroll-into-view-if-needed';
 import { BaseProps, ComponentChildren, NativeProps, TypeAttributes } from '../types/common';
-import { InternalFieldProps } from './FormItem';
 type BaseFormProps = Omit<React.AllHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'form' | 'size' | 'children'>;
 type RenderProps = (values: Store, form: FormInstance) => React.ReactElement;
 export type FormRules = Record<string, Rule[] | Record<string, Rule[]>>;
+export type ShouldUpdate<Values = any> = boolean | ((prevValues: Values, nextValues: Values, info: {
+    source?: string;
+}) => boolean);
+export declare const formItemValidateStates: readonly ["", "error", "validating", "success"];
+export type FormItemValidateState = (typeof formItemValidateStates)[number];
+export interface ChildProps {
+    [name: string]: any;
+}
 export interface FormProps<Values = Store> extends BaseFormProps {
-    /** 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建 */
+    /** 经 useForm() 创建的 form 控制实例，不提供时会自动创建 */
     form?: FormInstance<Values>;
     children?: RenderProps | ComponentChildren;
     component?: false | string | FC<any> | ComponentClass<any, any>;
@@ -22,7 +29,7 @@ export interface FormProps<Values = Store> extends BaseFormProps {
     onFinishFailed?: Callbacks<Values>['onFinishFailed'];
     validateTrigger?: string | string[] | false;
     preserve?: boolean;
-    /** 配置 Form.Item 的 colon 的默认值。表示是否显示 label 后面的冒号 */
+    /** 配置 FormItem 的 colon 的默认值。表示是否显示 label 后面的冒号 */
     colon?: boolean;
     /** 表单默认值，只有初始化以及重置时生效 */
     initialValues?: Values;
@@ -46,11 +53,13 @@ export interface FormProps<Values = Store> extends BaseFormProps {
     showMessage?: boolean;
     /** 当校验失败时，滚动到第一个错误表单项 */
     scrollToError?: boolean;
+    /** 是否显示校验状态图标 */
+    statusIcon?: boolean;
     onChange?: (model: any) => void;
     formStyle?: React.CSSProperties;
     className?: string;
 }
-export interface FormItemProps<T> extends BaseProps, NativeProps {
+export interface FormItemProps<Values = any> extends Omit<BaseProps, 'children'>, NativeProps {
     /**
      * 配合 label 属性使用，表示是否显示 label 后面的冒号
      */
@@ -67,14 +76,11 @@ export interface FormItemProps<T> extends BaseProps, NativeProps {
     required?: boolean;
     /** 为 true 时不带样式，作为纯字段控件使用 */
     noStyle?: boolean;
-    /** 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' */
-    validateStatus?: 'success' | 'warning' | 'error' | 'validating';
     /** 配置提示信息 */
     help?: string | React.ReactElement;
     /** 是否标签宽度为0，等用于`labelWidth={0}`，如果同时设置了labelWidth，则此配置无效 */
     pure?: boolean;
     /** 是否居中 */
-    center?: boolean;
     /** 是否显示校验错误信息 */
     showMessage?: boolean;
     /** 文本自定义内联样式 */
@@ -83,6 +89,43 @@ export interface FormItemProps<T> extends BaseProps, NativeProps {
     errorStyle?: React.CSSProperties;
     /** 校验警告自定义内联样式 */
     warningStyle?: React.CSSProperties;
+    /** 和原生标签相同能力 */
+    children?: ComponentChildren | ((control: ChildProps, meta: Meta, form: FormInstance<Values>) => React.ReactElement);
+    /**
+     * Set up `dependencies` field.
+     * When dependencies field update and current field is touched,
+     * will trigger validate rules and render.
+     */
+    dependencies?: NamePath[];
+    getValueFromEvent?: (...args: EventArgs) => StoreValue;
+    /** 字段名，支持数组 */
+    name?: InternalNamePath;
+    normalize?: (value: StoreValue, prevValue: StoreValue, allValues: Store) => StoreValue;
+    /** 校验规则，设置字段的校验逻辑。点击此处查看示例 */
+    rules?: Rule[];
+    shouldUpdate?: ShouldUpdate<Values>;
+    trigger?: string;
+    validateTrigger?: string | string[] | false;
+    /** 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 parallel 时会并行校验 */
+    validateFirst?: boolean | 'parallel';
+    valuePropName?: string;
+    getValueProps?: (value: StoreValue) => Record<string, unknown>;
+    messageVariables?: Record<string, string>;
+    initialValue?: any;
+    onReset?: () => void;
+    onMetaChange?: (meta: Meta & {
+        destroy?: boolean;
+    }) => void;
+    /** 当字段被删除时保留字段值 */
+    preserve?: boolean;
+    /** formitem 校验的状态 */
+    validateState?: FormItemValidateState;
+}
+export interface InternalFormItemProps<Values = any> extends FormItemProps<Values> {
+    /** @private Passed by ElFormList props. Do not use since it will break by path check. */
+    isListField?: boolean;
+    /** @private Passed by ElFormList props. Do not use since it will break by path check. */
+    isList?: boolean;
 }
 export interface FieldEntity {
     onStoreChange: (store: Store, namePathList: InternalNamePath[] | null, info: ValuedNotifyInfo) => void;
@@ -104,7 +147,8 @@ export interface FieldEntity {
         rules?: Rule[];
         dependencies?: NamePath[];
         initialValue?: any;
-    } & InternalFieldProps;
+        scrollToError?: boolean;
+    } & InternalFormItemProps;
 }
 interface UpdateAction {
     type: 'updateValue';
@@ -305,7 +349,7 @@ export type InternalFormInstance = Omit<FormInstance, 'validateFields'> & {
     getInternalHooks: (secret: string) => InternalHooks | null;
     /** @private Internal usage. Do not use it in your production */
     _init?: boolean;
-    /** 配置 Form.Item 的 colon 的默认值。表示是否显示 label 后面的冒号 */
+    /** 配置 FormItem 的 colon 的默认值。表示是否显示 label 后面的冒号 */
     colon?: boolean;
     /** 是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性 */
     disabled?: boolean;
@@ -325,6 +369,14 @@ export type InternalFormInstance = Omit<FormInstance, 'validateFields'> & {
     showMessage?: boolean;
     /** 当校验失败时，滚动到第一个错误表单项 */
     scrollToError?: boolean;
+    /** 自动标签宽度 */
+    autoLabelWidth?: string;
+    /** 是否显示校验状态图标 */
+    statusIcon?: boolean;
+    /** 注册标签宽度 */
+    registerLabelWidth?: (width: number, oldWidth: number) => void;
+    /** 注销标签宽度 */
+    deregisterLabelWidth?: (width: number) => void;
 };
 export type EventArgs = any[];
 type ValidateMessage = string | (() => string);

package/dist/Form/typings.js

@@ -1 +1,15 @@
-export {};
+// <HTMLFormElement>
+
+export var formItemValidateStates = ['', 'error', 'validating', 'success'];
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+/**
+ * Used by `setFields` config
+ */
+
+// >>>>>> Info
+
+/** Only return partial when type is not any */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/Form/useForm.js

@@ -23,7 +23,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { useRef, useState } from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { warning } from "../Util";
-import { HOOK_MARK } from "./FieldContext";
+import { HOOK_MARK } from "./InternalFormContext";
 import NameMap from "./utils/NameMap";
 import { allPromiseFinish } from "./utils/asyncUtil";
 import cloneDeep from "./utils/cloneDeep";
@@ -826,8 +826,8 @@ export var FormStore = /*#__PURE__*/_createClass(function FormStore(forceRootUpd
       return Promise.reject([]);
     }).catch(function (results) {
       var _this$getFieldsMap$ge2;
-      var fieldContext = (_this$getFieldsMap$ge2 = _this.getFieldsMap().get(results[0].name)) === null || _this$getFieldsMap$ge2 === void 0 || (_this$getFieldsMap$ge2 = _this$getFieldsMap$ge2.props) === null || _this$getFieldsMap$ge2 === void 0 ? void 0 : _this$getFieldsMap$ge2.fieldContext;
-      if (fieldContext !== null && fieldContext !== void 0 && fieldContext.scrollToError) {
+      var scrollToError = (_this$getFieldsMap$ge2 = _this.getFieldsMap().get(results[0].name)) === null || _this$getFieldsMap$ge2 === void 0 || (_this$getFieldsMap$ge2 = _this$getFieldsMap$ge2.props) === null || _this$getFieldsMap$ge2 === void 0 ? void 0 : _this$getFieldsMap$ge2.scrollToError;
+      if (scrollToError) {
         _this.scrollToField(results[0].name);
       }
       var errorList = results.filter(function (result) {

package/dist/Form/useWatch.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import warning from 'rc-util/lib/warning';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import FieldContext, { HOOK_MARK } from "./FieldContext";
+import FieldContext, { HOOK_MARK } from "./InternalFormContext";
 import { getNamePath, getValue } from "./utils/valueUtil";
 export function stringify(value) {
   try {

package/dist/Input/Input.d.ts

@@ -1,16 +1,4 @@
-import React, { RefObject } from 'react';
-import InputRange from './InputRange';
-import TextArea from './TextArea';
+import React from 'react';
 import { InputProps, InputRef } from './typings';
-declare const ForwardInput: (props: InputProps & {
-    ref?: RefObject<InputRef> | React.ForwardedRef<InputRef>;
-}) => React.ReactElement;
-type InternalInputType = typeof ForwardInput;
-interface InputInterface extends InternalInputType {
-    displayName?: string;
-    defaultProps?: Partial<InputProps>;
-    TextArea: typeof TextArea;
-    Range: typeof InputRange;
-}
-declare const Input: InputInterface;
+declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>>;
 export default Input;