@douyinfe/semi-foundation 2.28.0-beta.0 → 2.28.0

package/lib/es/form/interface.d.ts

@@ -0,0 +1,124 @@
+import { DefaultAdapter } from '../base/foundation';
+import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
+export declare type BasicTriggerType = 'blur' | 'change' | 'custom' | 'mount';
+export declare type FieldValidateTriggerType = BasicTriggerType | Array<BasicTriggerType>;
+export declare type CommonFieldError = boolean | string | Array<any> | undefined | unknown;
+export declare type BasicFieldError = Array<any>;
+export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any>, Values extends object = any> extends DefaultAdapter<P, S> {
+    cloneDeep: (val: any, ...rest: any[]) => any;
+    notifySubmit: (values: any) => void;
+    notifySubmitFail: (errors: Record<keyof Values, BasicFieldError>, values: Partial<Values>) => void;
+    forceUpdate: (callback?: () => void) => void;
+    notifyChange: (formState: FormState) => void;
+    notifyValueChange: (values: any, changedValues: any) => void;
+    notifyReset: () => void;
+    getInitValues: () => Partial<Values>;
+    getFormProps: (keys: undefined | string | Array<string>) => any;
+    getAllErrorDOM: () => NodeList;
+    getFieldDOM: (field: string) => Node;
+    initFormId: () => void;
+}
+export declare type AllErrors<T> = T extends Record<string, any> ? {
+    [K in keyof T]?: string;
+} : Record<string, any>;
+export interface FormState<T extends Record<string, any> = any> {
+    values?: T extends Record<string, any> ? T : Record<string, any>;
+    errors?: AllErrors<T>;
+    touched?: T extends Record<string, any> ? {
+        [K in keyof T]?: boolean;
+    } : Record<string, any>;
+}
+export interface setValuesConfig {
+    isOverride: boolean;
+}
+export interface BaseFormApi<T extends object = any> {
+    /** get value of field */
+    getValue: <K extends keyof T>(field?: K) => T[K];
+    /** set value of field */
+    setValue: <K extends keyof T>(field: K, newFieldValue: T[K]) => void;
+    /** get error of field */
+    getError: <K extends keyof T>(field: K) => any;
+    /** set error of field */
+    setError: <K extends keyof T>(field: K, fieldError: any) => void;
+    /** get touched of field */
+    getTouched: <K extends keyof T>(field: K) => boolean;
+    /** set touch of field */
+    setTouched: <K extends keyof T>(field: K, fieldTouch: boolean) => void;
+    /** judge field exist */
+    getFieldExist: <K extends keyof T>(field: K) => boolean;
+    /** get formState of form */
+    getFormState: () => FormState<T extends object ? T : object>;
+    /** submit form manual */
+    submitForm: () => void;
+    /** reset form manual */
+    reset: () => void;
+    /** trigger validate  manual */
+    validate: <K extends keyof T, Params extends Array<K>, V extends Params[number]>(fields?: Params) => Promise<{
+        [R in V]: T[R];
+    }>;
+    getInitValue: <K extends keyof T>(field: K) => any;
+    getInitValues: () => any;
+    getValues: () => T;
+    /** set value of multiple fields */
+    setValues: (fieldsValue: Partial<T>, config?: setValuesConfig) => void;
+    scrollToField: <K extends keyof T>(field: K, scrollConfig?: scrollIntoViewOptions) => void;
+}
+export interface CallOpts {
+    [x: string]: any;
+    notNotify?: boolean;
+    notUpdate?: boolean;
+    needClone?: boolean;
+}
+export interface ComponentProps {
+    [x: string]: any;
+}
+export interface FieldState {
+    value?: any;
+    touched?: any;
+    error?: any;
+    status?: 'error' | 'success';
+}
+export interface WithFieldOption {
+    valueKey?: string;
+    onKeyChangeFnName?: string;
+    valuePath?: string;
+    maintainCursor?: boolean;
+    shouldMemo?: boolean;
+    shouldInject?: boolean;
+}
+export interface InternalFieldApi {
+    setValue: (val: any, opts: CallOpts) => void;
+    setTouched: (isTouched: boolean, opts: CallOpts) => void;
+    setError: (errors: any, opts: CallOpts) => void;
+    reset: () => void;
+    validate: (val: any, opts: CallOpts) => Promise<unknown>;
+}
+export interface FieldStaff {
+    field: string;
+    fieldApi: InternalFieldApi;
+    keepState: boolean;
+    allowEmpty: boolean;
+}
+export interface ArrayFieldStaff {
+    field: string;
+    updateKey?: string;
+    initValue?: any;
+}
+export interface FormUpdaterContextType {
+    register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
+    unRegister: (field: string) => void;
+    updateStateValue: (field: string, value: any, opts?: CallOpts) => void;
+    updateStateError: (field: string, error: any, opts?: CallOpts) => void;
+    updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts) => void;
+    getValue: (field?: string | undefined, opts?: CallOpts) => any;
+    getError: (field?: string) => any;
+    getTouched: (field?: string) => boolean | Record<string, any> | undefined;
+    getInitValues: () => any;
+    getInitValue: (field?: string) => any;
+    getFormProps: (keys?: Array<string>) => ComponentProps;
+    getField: (field: string) => FieldStaff | undefined;
+    registerArrayField: (arrayFieldPath: string, val: any) => void;
+    unRegisterArrayField: (arrayField: string) => void;
+    getArrayField: (arrayField: string) => ArrayFieldStaff;
+    updateArrayField: (arrayField: string, updateValue: any) => void;
+}

package/lib/es/form/interface.js

@@ -0,0 +1 @@
+export {};

package/lib/es/form/utils.d.ts

@@ -0,0 +1,56 @@
+import AsyncValidator from 'async-validator';
+import { ComponentProps, WithFieldOption } from './interface';
+/**
+ *
+ * @param WrappedComponent React.ComponentType | any
+ */
+export declare function getDisplayName(WrappedComponent: any): string;
+export declare function generateValidatesFromRules(field: string, rules?: any[]): AsyncValidator;
+export declare function isRequired(rules?: any[] | Record<string, any>): boolean;
+export declare function isValid(errors: any): boolean;
+export declare function mergeOptions(opts: WithFieldOption, props: ComponentProps): {
+    options: {
+        valueKey: string;
+        onKeyChangeFnName: string;
+        valuePath: string;
+        maintainCursor: boolean;
+        shouldMemo: boolean;
+        shouldInject: boolean;
+    };
+    shouldInject: boolean;
+};
+export declare function mergeProps(props: any): {
+    field: any;
+    label: any;
+    labelPosition: any;
+    labelWidth: any;
+    labelAlign: any;
+    labelCol: any;
+    wrapperCol: any;
+    noLabel: any;
+    noErrorMessage: any;
+    isInInputGroup: any;
+    initValue: any;
+    validate: any;
+    validateStatus: any;
+    trigger: any;
+    allowEmptyString: any;
+    allowEmpty: any;
+    emptyValue: any;
+    rules: any;
+    required: boolean;
+    keepState: any;
+    transform: any;
+    name: any;
+    fieldClassName: any;
+    fieldStyle: any;
+    convert: any;
+    stopValidateWithError: any;
+    showValidateIcon: any;
+    helpText: any;
+    extraText: any;
+    extraTextPosition: any;
+    pure: any;
+    rest: any;
+    id: any;
+};

package/lib/es/form/utils.js

@@ -0,0 +1,215 @@
+import _cloneDeep from "lodash/cloneDeep";
+
+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;
+};
+/* eslint-disable prefer-destructuring */
+
+/* eslint-disable prefer-const */
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+
+import AsyncValidator from 'async-validator';
+
+/**
+ *
+ * @param WrappedComponent React.ComponentType | any
+ */
+export function getDisplayName(WrappedComponent) {
+  const originName = WrappedComponent.displayName || WrappedComponent.name;
+  return originName ? `SemiField${originName}` : 'SemiField';
+}
+export function generateValidatesFromRules(field) {
+  let rules = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const descriptor = {};
+  descriptor[field] = rules;
+  const validator = new AsyncValidator(descriptor);
+  return validator;
+}
+export function isRequired() {
+  let rules = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let required = false;
+
+  if (typeof rules === 'object' && 'required' in rules) {
+    required = rules.required;
+  } else if (Array.isArray(rules) && rules.length) {
+    rules.forEach(rule => {
+      rule.required ? required = true : null;
+    });
+  }
+
+  return required;
+}
+export function isValid(errors) {
+  let valid = true;
+
+  if (typeof errors === 'string' && errors.length) {
+    valid = false;
+  } else if (Array.isArray(errors) && errors.length) {
+    valid = errors.every(error => isValid(error));
+  } else if (typeof errors === 'boolean') {
+    valid = errors;
+  } else if (errors && typeof errors.$$typeof === 'symbol' && errors.$$typeof.toString() === 'Symbol(react.element)') {
+    // when error message is reactNode
+    // only work with React Adapter
+    valid = false;
+  }
+
+  return valid;
+} // Compatible with String and Array
+
+function transformTrigger(trigger) {
+  let result = [];
+
+  if (Array.isArray(trigger)) {
+    result = trigger;
+  }
+
+  if (typeof trigger === 'string') {
+    result[0] = trigger;
+  }
+
+  return result;
+}
+
+export function mergeOptions(opts, props) {
+  // Opts: different types of component identification value, value change callback function may be inconsistent, used to adapt 1, input, select 2, radio, checkbox 3, switch
+  // valueKey: input, select class component control value props are value, and checkbox, switch is checked
+  // eg：checkbox、radio   { valueKey: 'checked', onKeyChangeFnName: 'onChange', valuePath: 'target.value' }
+  const defaultOpts = {
+    valueKey: 'value',
+    onKeyChangeFnName: 'onChange',
+    valuePath: '',
+    maintainCursor: false,
+    shouldInject: true,
+    shouldMemo: true
+  };
+  const options = Object.assign(Object.assign({}, defaultOpts), opts); // If the field attribute is declared, then the injection is carried out (mainly used to deal with the case where Checkbox and Radio are used separately from the Group); other cases are subject to options
+
+  const shouldInject = 'field' in props ? true : options.shouldInject;
+  return {
+    options,
+    shouldInject
+  };
+}
+export function mergeProps(props) {
+  const defaultProps = {
+    trigger: 'change',
+    // validateStatus: 'default',
+    allowEmptyString: false,
+    allowEmpty: false,
+    emptyValue: '',
+    noLabel: false,
+    noErrorMessage: false,
+    isInInputGroup: false,
+    stopValidateWithError: false
+  };
+
+  let _a = Object.assign(Object.assign({}, defaultProps), props),
+      {
+    field,
+    label,
+    labelPosition,
+    labelWidth,
+    labelAlign,
+    labelCol,
+    wrapperCol,
+    initValue,
+    validate,
+
+    /**
+     * error、warning、default、success
+     */
+    validateStatus,
+
+    /**
+     * change、blur、custom、mount
+     */
+    trigger,
+    allowEmptyString,
+    allowEmpty,
+    emptyValue,
+    rules,
+    onChange,
+    keepState,
+    // Conversion before validation
+    transform,
+    name,
+    fieldClassName,
+    fieldStyle,
+    noLabel,
+    noErrorMessage,
+    isInInputGroup,
+    stopValidateWithError,
+    convert,
+    showValidateIcon,
+    helpText,
+    extraText,
+    extraTextPosition,
+    pure,
+    id
+  } = _a,
+      rest = __rest(_a, ["field", "label", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "initValue", "validate", "validateStatus", "trigger", "allowEmptyString", "allowEmpty", "emptyValue", "rules", "onChange", "keepState", "transform", "name", "fieldClassName", "fieldStyle", "noLabel", "noErrorMessage", "isInInputGroup", "stopValidateWithError", "convert", "showValidateIcon", "helpText", "extraText", "extraTextPosition", "pure", "id"]); // Form中的任何类型组件，初始值都统一通过initValue字段来传入，同时将可能会导致组件行为错误的props抽取出来，防止透传到组件中
+  // For any type of field component in Form, the initial value is uniformly passed in through the initValue field.
+  // At the same time, the props that may cause component behavior errors are extracted to prevent transparent transmission to the component.
+
+
+  delete rest.defaultChecked;
+  delete rest.defaultValue;
+  delete rest.checked;
+
+  if (typeof initValue !== 'undefined') {
+    initValue = _cloneDeep(initValue);
+  }
+
+  const required = isRequired(rules);
+  trigger = transformTrigger(trigger);
+  emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
+  return {
+    field,
+    label,
+    labelPosition,
+    labelWidth,
+    labelAlign,
+    labelCol,
+    wrapperCol,
+    noLabel,
+    noErrorMessage,
+    isInInputGroup,
+    initValue,
+    validate,
+    validateStatus,
+    trigger,
+    allowEmptyString,
+    allowEmpty,
+    emptyValue,
+    rules,
+    required,
+    keepState,
+    transform,
+    name,
+    fieldClassName,
+    fieldStyle,
+    convert,
+    stopValidateWithError,
+    showValidateIcon,
+    helpText,
+    extraText,
+    extraTextPosition,
+    pure,
+    rest,
+    id
+  };
+}
+
+function bothEmptyArray(val, otherVal) {
+  return Array.isArray(val) && Array.isArray(otherVal) && !val.length && !otherVal.length;
+}

package/lib/es/grid/constants.d.ts

@@ -0,0 +1,4 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+export { cssClasses };

package/lib/es/grid/constants.js

@@ -0,0 +1,5 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}`
+};
+export { cssClasses };

package/lib/es/highlight/constants.d.ts

@@ -0,0 +1,4 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-highlight";
+};
+export { cssClasses };

package/lib/es/highlight/constants.js

@@ -0,0 +1,5 @@
+import { BASE_CLASS_PREFIX } from "../base/constants";
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-highlight`
+};
+export { cssClasses };

package/lib/es/icons/constants.d.ts

@@ -0,0 +1,9 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    SIZE: string[];
+    ICON_PREFIX: string;
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/es/icons/constants.js

@@ -0,0 +1,11 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-icon`
+};
+const strings = {
+  SIZE: ['extra-small', 'small', 'default', 'large', 'extra-large', 'custom'],
+  // use in svg xhref. No need to respond to the change of prefixCls, always constant
+  ICON_PREFIX: 'semi-icon-'
+};
+const numbers = {};
+export { cssClasses, strings, numbers };

package/lib/es/image/constants.d.ts

@@ -0,0 +1,4 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-image";
+};
+export { cssClasses };

package/lib/es/image/constants.js

@@ -0,0 +1,5 @@
+import { BASE_CLASS_PREFIX } from "../base/constants";
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-image`
+};
+export { cssClasses };

package/lib/es/image/imageFoundation.d.ts

@@ -0,0 +1,11 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export interface ImageAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getIsInGroup: () => boolean;
+}
+export default class ImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ImageAdapter<P, S>, P, S> {
+    constructor(adapter: ImageAdapter<P, S>);
+    handleClick: (e: any) => void;
+    handleLoaded: (e: any) => void;
+    handleError: (e: any) => void;
+    handlePreviewVisibleChange: (newVisible: boolean) => void;
+}

package/lib/es/image/imageFoundation.js

@@ -0,0 +1,76 @@
+import _isObject from "lodash/isObject";
+import BaseFoundation from "../base/foundation";
+export default class ImageFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+
+    this.handleClick = e => {
+      const {
+        imageID,
+        preview
+      } = this.getProps(); // if preview = false, then it cannot preview
+
+      if (!preview) {
+        return;
+      } // if image in group, then use group's Preview components
+
+
+      if (this._adapter.getIsInGroup()) {
+        const {
+          setCurrentIndex,
+          handleVisibleChange
+        } = this._adapter.getContexts();
+
+        setCurrentIndex(imageID);
+        handleVisibleChange(true);
+      } else {
+        // image isn't in group, then use it's own Preview components
+        this.handlePreviewVisibleChange(true);
+      }
+    };
+
+    this.handleLoaded = e => {
+      const {
+        onLoad
+      } = this.getProps();
+      onLoad && onLoad(e);
+      this.setState({
+        loadStatus: "success"
+      });
+    };
+
+    this.handleError = e => {
+      const {
+        onError
+      } = this.getProps();
+      onError && onError(e);
+      this.setState({
+        loadStatus: "error"
+      });
+    };
+
+    this.handlePreviewVisibleChange = newVisible => {
+      const {
+        preview
+      } = this.getProps();
+
+      if (_isObject(preview)) {
+        const {
+          onVisibleChange
+        } = preview;
+        onVisibleChange && onVisibleChange(newVisible);
+
+        if (!("visible" in preview)) {
+          this.setState({
+            previewVisible: newVisible
+          });
+        }
+      } else {
+        this.setState({
+          previewVisible: newVisible
+        });
+      }
+    };
+  }
+
+}

package/lib/es/image/previewFooterFoundation.d.ts

@@ -0,0 +1,10 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setStartMouseOffset: (time: number) => void;
+}
+export default class PreviewFooterFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewFooterAdapter<P, S>, P, S> {
+    changeSliderValue: (type: string) => void;
+    handleValueChange: (value: number) => void;
+    handleRatioClick: () => void;
+    handleRotate: (direction: string) => void;
+}

package/lib/es/image/previewFooterFoundation.js

@@ -0,0 +1,57 @@
+import BaseFoundation from "../base/foundation";
+export default class PreviewFooterFoundation extends BaseFoundation {
+  constructor() {
+    super(...arguments);
+
+    this.changeSliderValue = type => {
+      const {
+        zoom,
+        step,
+        min,
+        max
+      } = this.getProps();
+      let newValue = type === "plus" ? zoom + step : zoom - step;
+
+      if (newValue > max) {
+        newValue = max;
+      } else if (newValue < min) {
+        newValue = min;
+      }
+
+      this.handleValueChange(newValue);
+    };
+
+    this.handleValueChange = value => {
+      const {
+        onZoomIn,
+        onZoomOut,
+        zoom
+      } = this.getProps();
+
+      if (value > zoom) {
+        onZoomIn(Number((value / 100).toFixed(2)));
+      } else {
+        onZoomOut(Number((value / 100).toFixed(2)));
+      }
+
+      this._adapter.setStartMouseOffset(value);
+    };
+
+    this.handleRatioClick = () => {
+      const {
+        ratio,
+        onAdjustRatio
+      } = this.getProps();
+      const type = ratio === "adaptation" ? "realSize" : "adaptation";
+      onAdjustRatio(type);
+    };
+
+    this.handleRotate = direction => {
+      const {
+        onRotate
+      } = this.getProps();
+      onRotate && onRotate(direction);
+    };
+  }
+
+}

package/lib/es/image/previewFoundation.d.ts

@@ -0,0 +1,5 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export default class PreviewFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<Partial<DefaultAdapter>> {
+    handleVisibleChange: (newVisible: boolean) => void;
+    handleCurrentIndexChange: (index: number) => void;
+}

package/lib/es/image/previewFoundation.js

@@ -0,0 +1,37 @@
+import BaseFoundation from "../base/foundation";
+export default class PreviewFoundation extends BaseFoundation {
+  constructor() {
+    super(...arguments);
+
+    this.handleVisibleChange = newVisible => {
+      const {
+        visible,
+        onVisibleChange
+      } = this.getProps();
+
+      if (!(visible in this.getProps())) {
+        this.setState({
+          visible: newVisible
+        });
+      }
+
+      onVisibleChange && onVisibleChange(newVisible);
+    };
+
+    this.handleCurrentIndexChange = index => {
+      const {
+        currentIndex,
+        onChange
+      } = this.getProps();
+
+      if (!(currentIndex in this.getProps())) {
+        this.setState({
+          currentIndex: index
+        });
+      }
+
+      onChange && onChange(index);
+    };
+  }
+
+}