shineout 1.12.2 → 1.12.3

package/esm/Form/Item.js

@@ -0,0 +1,210 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import immer from 'immer';
+import createReactContext from '../context';
+import { Component } from '../component';
+import { errorSubscribe, RESET_TOPIC } from '../Datum/types';
+import { getGrid } from '../Grid/utils';
+import { objectValues } from '../utils/objects';
+import { formClass } from './styles';
+
+var _createReactContext = createReactContext({}),
+    Provider = _createReactContext.Provider,
+    Consumer = _createReactContext.Consumer;
+
+var Label =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Label, _PureComponent);
+
+  function Label() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = Label.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        width = _this$props.width,
+        children = _this$props.children;
+    if (children === undefined) return null;
+    return React.createElement("div", {
+      style: {
+        width: width
+      },
+      className: formClass('label')
+    }, children);
+  };
+
+  return Label;
+}(PureComponent); // eslint-disable-next-line
+
+
+var Item =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Item, _Component);
+
+  function Item(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "events", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateTimer", void 0);
+
+    _this.state = {
+      inputs: {},
+      errors: {}
+    };
+    _this.events = {
+      bindInputToItem: _this.bind.bind(_assertThisInitialized(_assertThisInitialized(_this))),
+      unbindInputFromItem: _this.unbind.bind(_assertThisInitialized(_assertThisInitialized(_this))),
+      onItemError: _this.handleError.bind(_assertThisInitialized(_assertThisInitialized(_this)))
+    };
+    _this.handleUpdate = _this.handleUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    if (props.formDatum) props.formDatum.subscribe(RESET_TOPIC, _this.handleUpdate);
+    return _this;
+  }
+
+  var _proto2 = Item.prototype;
+
+  _proto2.getErrors = function getErrors() {
+    var formDatum = this.props.formDatum;
+    var errors = [];
+
+    if (formDatum) {
+      Object.keys(this.state.inputs).forEach(function (name) {
+        var err = formDatum.getError(name);
+        if (err) errors.push(err);
+      });
+    }
+
+    objectValues(this.state.errors).forEach(function (err) {
+      if (err) errors.push(err);
+    });
+    return errors;
+  };
+
+  _proto2.handleUpdate = function handleUpdate() {
+    var _this2 = this;
+
+    if (this.updateTimer) clearTimeout(this.updateTimer);
+    this.updateTimer = setTimeout(function () {
+      _this2.forceUpdate();
+    });
+  };
+
+  _proto2.bind = function bind(name) {
+    var _this3 = this;
+
+    var names = Array.isArray(name) ? name : [name];
+    var formDatum = this.props.formDatum;
+
+    if (formDatum) {
+      names.forEach(function (n) {
+        formDatum.subscribe(errorSubscribe(n), _this3.handleUpdate);
+      });
+    }
+
+    this.setState(immer(function (state) {
+      names.forEach(function (n) {
+        state.inputs[n] = true;
+      });
+    }));
+  };
+
+  _proto2.unbind = function unbind(name) {
+    var names = Array.isArray(name) ? name : [name];
+    var formDatum = this.props.formDatum;
+
+    if (formDatum) {
+      names.forEach(function (n) {
+        formDatum.unsubscribe(errorSubscribe(n));
+      });
+    }
+
+    this.setState(immer(function (state) {
+      names.forEach(function (n) {
+        delete state.inputs[n];
+      });
+    }));
+  };
+
+  _proto2.handleError = function handleError(name, error) {
+    this.setState(immer(function (state) {
+      state.errors[name] = error;
+    }));
+  };
+
+  _proto2.renderHelp = function renderHelp(errors) {
+    var realErrors = errors.filter(function (e) {
+      return e.message;
+    });
+
+    if (realErrors.length > 0) {
+      return React.createElement("div", {
+        className: formClass('error')
+      }, realErrors.map(function (e, i) {
+        return React.createElement("div", {
+          key: i
+        }, e.message);
+      }));
+    }
+
+    var tip = this.props.tip;
+    if (!tip) return null;
+    return React.createElement("div", {
+      className: formClass('tip')
+    }, tip);
+  };
+
+  _proto2.render = function render() {
+    var _this$props2 = this.props,
+        children = _this$props2.children,
+        grid = _this$props2.grid,
+        label = _this$props2.label,
+        labelAlign = _this$props2.labelAlign,
+        labelVerticalAlign = _this$props2.labelVerticalAlign,
+        labelWidth = _this$props2.labelWidth,
+        required = _this$props2.required,
+        style = _this$props2.style,
+        keepErrorHeight = _this$props2.keepErrorHeight;
+    var errors = this.getErrors();
+    var className = classnames(getGrid(grid), formClass('item', required && 'required', errors.length > 0 && 'invalid', labelVerticalAlign && "label-vertical-align-" + labelVerticalAlign, keepErrorHeight && "item-keep-height", ['top', 'right', 'left'].indexOf(labelAlign || '') >= 0 && "label-align-" + labelAlign), this.props.className);
+    return React.createElement(Provider, {
+      value: this.events
+    }, React.createElement("div", {
+      className: className,
+      style: style
+    }, React.createElement(Label, {
+      width: labelWidth
+    }, label), React.createElement("div", {
+      className: formClass('control')
+    }, children, this.renderHelp(errors))));
+  };
+
+  return Item;
+}(Component);
+
+_defineProperty(Item, "defaultProps", {
+  className: '',
+  style: {},
+  formItemErrors: [],
+  keepErrorHeight: false
+});
+
+export default Item; // eslint-disable-next-line
+
+export var itemConsumer = function itemConsumer(Origin) {
+  return function (props) {
+    return React.createElement(Consumer, null, function (events) {
+      return React.createElement(Origin, _extends({}, props, events));
+    });
+  };
+};

package/esm/Form/Props.d.ts

@@ -0,0 +1,436 @@
+import React, { ReactNode } from 'react';
+import { FormError } from '../utils/errors';
+import FormDatum from '../Datum/Form';
+import { ForceAdd, ObjectType, StandardProps, RegularAttributes, PartialKeys } from '../@types/common';
+import { FormItemRule } from '../Rule/Props';
+import { ButtonProps } from '../Button/Props';
+import { CardConsumerType } from '../Card/Props';
+import { GetDatumFormProps } from '../Datum/Props';
+export interface RuleObject {
+    [name: string]: FormItemRule<any> | RuleObject;
+}
+export interface FormRef<Value> {
+    getValue: () => Value;
+    validate: () => Promise<any>;
+    validateFields: (fields: string | string[]) => Promise<any>;
+    validateFieldsWithError: (fields: string | string[]) => Promise<any>;
+    clearValidate: () => void;
+    submit: (withValidate?: boolean) => void;
+    reset: () => void;
+}
+/** ----------------fieldSet-----------------------* */
+export interface FieldSetChildrenFunc<Value = any> {
+    (params: {
+        list: any;
+        value: Value;
+        onChange: (value: Value) => void;
+        onRemove: () => void;
+        index: number;
+        onInsert: (value: Value) => void;
+        onAppend: (value: Value) => void;
+        error: Error[];
+        datum: FormDatum<ObjectType>;
+    }): React.ReactNode;
+}
+export interface FieldSetProviderValueType {
+    path?: string;
+    val?: () => Promise<FormError | true>;
+}
+export interface FieldSetProps<Value = any> {
+    defaultValue?: Value[];
+    empty?: (onInsert: (value: Value) => void) => React.ReactNode;
+    formDatum: FormDatum<ObjectType>;
+    name: string;
+    onError?: (error?: Error) => void;
+    /**
+     * Validation rules
+     *
+     * 校验规则
+     *
+     * default: none
+     */
+    rules?: FormItemRule<any>;
+    /**
+     * When children type is not function, handle a set data type of object
+     *
+     * When children type is function, handle a group of data type of array. options property:
+     *
+     * list: all data of name.
+     *
+     * value: a single piece of data for the value obtained by name.
+     *
+     * onChange: a callback when the value is changing.
+     *
+     * onRemove: a callback when a child component is removed.
+     *
+     * index: the current index.
+     *
+     * onInsert: Insert a piece of data before the current item.
+     *
+     * onAppend: Insert a piece of data after the current item.
+     *
+     * children 不为 function，用来处理 object 类型数据，children 内的 name 会拼接 FieldSet name，如 FieldSet name 为 'a', children 元素name 为 b，children 实际处理的数据为 a.b;
+     *
+     * children 为 function 时，用来处理数组数据。options 属性为
+     *
+     * list: name 下的全部数据。
+     *
+     * value: 根据name获取的值的单条数据。
+     *
+     * onChange: 子组件数据改变回调。
+     *
+     * onRemove: 子组件删除回调。
+     *
+     * index: 当前项索引。
+     *
+     * onInsert: 在当前项之前插入一条数据。
+     *
+     * onAppend: 在当前项之后附加一条数据。
+     *
+     * default: required
+     */
+    children?: FieldSetChildrenFunc<Value> | React.ReactNode;
+}
+export declare type GetFieldSetConsumerProps<U> = Omit<U, 'innerFormNamePath' | 'fieldSetValidate'>;
+/** ----------------formContext-----------------------* */
+export interface FormContextValue {
+    formDatum: FormDatum<ObjectType>;
+    formMode?: string;
+    disabled?: any;
+    labelAlign?: 'top' | 'left' | 'right';
+    labelVerticalAlign?: 'top' | 'middle' | 'bottom';
+    size?: RegularAttributes.Size;
+    labelWidth?: string | number;
+    combineRules: <U>(name: string, rule: FormItemRule<U>) => FormItemRule<U>;
+    keepErrorHeight?: boolean;
+}
+export interface FormProviderProps<V extends ObjectType> {
+    datum: FormDatum<V>;
+    disabled?: boolean;
+    /**
+     * The default is empty, follow the theme style.
+     *
+     * 默认为空，跟随主题样式。
+     *
+     * default:
+     */
+    labelAlign?: 'top' | 'left' | 'right';
+    /**
+     * the default value is top.
+     *
+     * 默认顶部对齐
+     *
+     * default: 'top'
+     */
+    labelVerticalAlign?: 'top' | 'middle' | 'bottom';
+    size?: RegularAttributes.Size;
+    /**
+     * The width of label. It is invalid when labelAlign is 'top'.
+     *
+     * 标签宽度，labelAlign 为 'top' 时无效。
+     *
+     * default: 140px
+     */
+    labelWidth?: number | string;
+    /**
+     * mode, with useMode
+     *
+     * 模式，和 useMode 配合使用
+     *
+     * default:
+     */
+    mode?: string;
+    pending?: boolean;
+    rules?: RuleObject;
+    /**
+     * Single-line error prompt will not stretch the page height
+     *
+     * 单行错误提示不撑开页面高度
+     *
+     * default: false
+     */
+    keepErrorHeight?: boolean;
+}
+export declare type FormContextKey = keyof FormContextValue;
+export declare type GetFormConsumerProps<U, Keys extends FormContextKey> = Omit<PartialKeys<U, Keys>, 'formDatum' | 'combineRules'>;
+export declare type GetFormProviderProps<U, Value> = ForceAdd<U, FormProviderProps<Value>>;
+/** ----------------formItemContext-----------------------* */
+export interface FormItemContextValue {
+    onItemError?: (id: string, error?: Error) => void;
+    bindInputToItem?: (name: string) => void;
+    unbindInputFromItem?: (name: string) => void;
+}
+export declare type GetFormItemConsumerProps<U> = Omit<U, keyof FormItemContextValue>;
+/** ----------------inputable-----------------------* */
+export interface BaseInputProps {
+    value?: any;
+    onChange?: any;
+}
+export interface InputableProps<Value> {
+    beforeChange?: (value: Value | undefined, datum: FormDatum<ObjectType>) => Value | undefined | void;
+    onChange?: (value: Value | undefined, ...rest: any) => void;
+    onError?: (e?: Error) => void;
+    popover?: string;
+    value?: Value;
+    error?: Error;
+    disabled?: boolean;
+    filterSameChange?: boolean;
+    combineRules?: (name: string, rules?: FormItemRule<Value>) => FormItemRule<Value>;
+    required?: boolean;
+    bind?: string[];
+    onItemError?: (id: string, error?: Error) => void;
+    bindInputToItem?: (name: string) => void;
+    unbindInputFromItem?: (name: string) => void;
+    scuSkip?: string[];
+    defaultValue?: Value;
+    reserveAble?: boolean;
+    rules?: FormItemRule<Value>;
+    /**
+     * 内部属性
+     */
+    formDatum?: FormDatum<ObjectType>;
+    fieldSetValidate?: (validator: boolean) => void;
+    name?: string | string[];
+    forceChangeOnValueSet?: boolean;
+}
+export declare type InputableFormConsumerKey = 'formDatum' | 'disabled' | 'combineRules' | 'size';
+declare type InputablePropsFiltered<Value> = Omit<InputableProps<Value>, 'required'>;
+declare type HandleValueProps<Props extends BaseInputProps> = Omit<Props, 'value' | 'onChange' | 'validateHook'> & Partial<Pick<Props, 'value' | 'onChange'>>;
+declare type AddInputProps<Props extends BaseInputProps, Value> = ForceAdd<HandleValueProps<Props>, InputablePropsFiltered<Value>>;
+declare type InputWidthFieldSet<Props, Value> = GetFieldSetConsumerProps<AddInputProps<Props, Value>>;
+declare type InputWidthItem<Props, Value> = GetFormItemConsumerProps<InputWidthFieldSet<Props, Value>>;
+declare type InputWidthForm<Props, Value> = GetFormConsumerProps<InputWidthItem<Props, Value>, InputableFormConsumerKey>;
+export declare type GetInputableProps<Props extends BaseInputProps, Value> = InputWidthForm<Props, Value>;
+/** ----------------formMode-----------------------* */
+export interface FormModeProps {
+    formMode?: string;
+    reverse?: boolean;
+    children?: React.ReactNode;
+}
+/** ----------------form-----------------------* */
+export declare type formStatus = 'disabled' | 'pending' | '';
+export interface SimpleFormProps<Value = ObjectType> extends StandardProps {
+    /**
+     * Form value
+     *
+     * Form值
+     *
+     * default:
+     */
+    value?: Value;
+    datum: FormDatum<ObjectType>;
+    /**
+     * When disabled is true, all the elements in the form are disabled.
+     *
+     * 是否禁用，为 true 时，表单内所有元素 disabled 都为 true
+     *
+     * default: false
+     */
+    disabled?: boolean;
+    /**
+     * When inline is true, the form is horizontal layout
+     *
+     * 是否水平布局
+     *
+     * default: false
+     */
+    inline?: boolean;
+    layout?: string;
+    pending?: boolean;
+    /**
+     * callback when the error happens
+     *
+     * 异常回调处理
+     *
+     * default:
+     */
+    onError?: (e: Error) => void;
+    /**
+     * Validation rules
+     *
+     * 校验规则
+     *
+     * default: none
+     */
+    onReset?: () => void;
+    /**
+     * the function for Form Submission.  When the internal validation fails, it will not be triggered.
+     *
+     * 表单提交函数。表单内部校验失败时不会触发。
+     *
+     * default:
+     */
+    onSubmit?: (data: Value, detail?: any, event?: Event) => void;
+    /**
+     * Validation rules
+     *
+     * 校验规则
+     *
+     * default: none
+     */
+    rules?: RuleObject;
+    /**
+     * When the verification fails, whether to scroll to the first verification failure component, when the value is a number, it means the offset relative to the top
+     *
+     * 校验失败时是否滚动到第一个校验失败组件，该值为数字时，表示相对于顶部的偏移量
+     *
+     * default: false
+     */
+    scrollToError?: boolean | number;
+    setFormStatus: (status: formStatus) => void;
+    /**
+     * ms, the interval between two submissions(Prevent repeat submission)
+     *
+     * ms, 两次提交间隔时长（防止重复提交）
+     *
+     * default: 1000
+     */
+    throttle?: number;
+    /**
+     * bind form ref, Can call some form methods
+     *
+     * 绑定 form 的引用, 可以调用某些 form 的方法
+     *
+     * default: -
+     */
+    formRef?: ((form: FormRef<Value>) => void) | {
+        current?: FormRef<Value>;
+    };
+    error?: ObjectType<string | Error>;
+}
+/** ----------------formItem-----------------------* */
+export interface ItemProps extends StandardProps {
+    grid?: number | {
+        width: number;
+        offset: number;
+        response: 'sm' | 'md' | 'lg' | 'xl';
+    };
+    /**
+     * Single-line error prompt will not stretch the page height
+     *
+     * 单行错误提示不撑开页面高度
+     *
+     * default: false
+     */
+    keepErrorHeight?: boolean;
+    /**
+     * When it is undefined, the tag does not be rendered or occupy space. If there is no content, but it needs to be occupied, you can use an empty string ''.
+     *
+     * 未定义时，标签不会render，也不会占位。如果无内容需要占位，使用空字符串 ''。
+     *
+     * default: undefined
+     */
+    label?: React.ReactNode;
+    /**
+     * The default is empty, follow the theme style.
+     *
+     * 默认为空，跟随主题样式。
+     *
+     * default:
+     */
+    labelAlign?: 'top' | 'left' | 'right';
+    /**
+     * The width of label. It is invalid when labelAlign is 'top'.
+     *
+     * 标签宽度，labelAlign 为 'top' 时无效。
+     *
+     * default: 140px
+     */
+    labelWidth?: string | number;
+    /**
+     * Required tags for pure display. Do not trigger validation
+     *
+     * 必填标记，纯展示用，不会触发校验
+     *
+     * default: false
+     */
+    required?: boolean;
+    /**
+     * Prompting information
+     *
+     * 提示文案
+     *
+     * default:
+     */
+    tip?: React.ReactNode;
+    formDatum?: FormDatum<any>;
+    labelVerticalAlign?: 'top' | 'middle' | 'bottom';
+}
+/** ----------------formButton-----------------------* */
+export interface FormButtonProps extends Omit<ButtonProps, 'htmlType' | 'onRef'> {
+    onClick?: () => void;
+    type?: RegularAttributes.Type;
+}
+/** ----------------Field-----------------------* */
+export interface FieldChildrenFunc<Value = any> {
+    (params: {
+        value: Value;
+        error?: Error;
+        onChange: (value: Value) => void;
+        disabled?: boolean;
+    }): React.ReactNode;
+}
+export interface FieldProps<Value> {
+    cache?: boolean;
+    onChange: (value: Value) => void;
+    value: Value;
+    error?: Error;
+    disabled?: boolean;
+    /**
+     * React components that support value and onChange or function. The function object attribute is as follows: value: The value obtained from the parent Form or Form.Block by name. error: the error information of data validation. type is Error. onChange: The callback when the value is changing.
+     *
+     * 支持 value 和 onChange 的 React 组件，或者函数，函数object属性如下。value: 根据 name 从上级 Form 或 Form.Block 获取的值。error：数据校验错误信息，类型为 Error。onChange: 值改变回调函数
+     *
+     * default: required
+     */
+    children?: React.ReactElement | FieldChildrenFunc<Value>;
+}
+/** ----------------FieldError-----------------------* */
+export interface FieldErrorProps {
+    error?: Error | Error[];
+}
+/** ----------------Flow-----------------------* */
+export interface FlowProps {
+    children?: (datum: FormDatum<ObjectType>) => ReactNode;
+    formDatum: FormDatum<ObjectType>;
+    names?: string[];
+}
+/** ----------------index-----------------------* */
+export declare type FormCardConsumerKey = 'setFormStatus';
+export declare type FormDatumKey = 'removeUndefined' | 'error';
+export declare type FormPropsWithCardConsumer<Value> = CardConsumerType<SimpleFormProps<Value>, FormCardConsumerKey>;
+export declare type FormPropsWithProvider<Value> = GetFormProviderProps<FormPropsWithCardConsumer<Value>, Value>;
+export declare type FormProps<Value> = GetDatumFormProps<FormPropsWithProvider<Value>, Value, FormDatumKey>;
+export declare class Form<Value> extends React.Component<FormProps<Value>, any> {
+    static Item: typeof FormItem;
+    static Field: typeof FormField;
+    static Flow: typeof FormFlow;
+    static FieldSet: typeof FormFieldSet;
+    static Submit: React.ComponentType<FormButtonProps>;
+    static Reset: React.ComponentType<FormButtonProps>;
+    static Button: React.ComponentType<FormButtonProps>;
+    static formConsumer: any;
+    static useMode: (...args: string[]) => React.ComponentType<FormModeProps>[];
+    render: () => JSX.Element;
+}
+export declare type FormCompType = typeof Form;
+export declare type FormItemWithFormConsumerKeys = 'formDatum' | 'labelWidth' | 'labelAlign' | 'labelVerticalAlign' | 'keepErrorHeight';
+export declare type FormItemProps = GetFormConsumerProps<ItemProps, FormItemWithFormConsumerKeys>;
+export declare class FormItem extends React.Component<FormItemProps, any> {
+    render: () => JSX.Element;
+}
+export declare type FormFieldProps<Value> = GetInputableProps<FieldProps<Value>, Value>;
+export declare class FormField<Value> extends React.Component<FormFieldProps<Value>, any> {
+    render: () => JSX.Element;
+}
+export declare type FormFlowWithFormConsumerKeys = 'formDatum';
+export declare type FormFlowProps = GetFormConsumerProps<FlowProps, FormFlowWithFormConsumerKeys>;
+export declare class FormFlow extends React.Component<FormFlowProps, any> {
+    render: () => JSX.Element;
+}
+export declare type FormFieldSetWithFormConsumerKeys = 'formDatum';
+export declare type FormFieldSetProps<Value> = GetFormConsumerProps<FieldSetProps<Value>, FormFlowWithFormConsumerKeys>;
+export declare class FormFieldSet<Value> extends React.Component<FormFieldSetProps<Value>, any> {
+    render: () => JSX.Element;
+}
+export {};

package/esm/Form/Props.js

@@ -0,0 +1 @@
+import React from 'react';

package/esm/Form/formButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (htmlType: 'submit' | 'button' | 'reset') => (p2: unknown) => JSX.Element;
+export default _default;