@douyinfe/semi-foundation 2.1.0 → 2.1.4

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

@@ -0,0 +1,121 @@
+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 interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    cloneDeep: (val: any, ...rest: any[]) => any;
+    notifySubmit: (values: any) => void;
+    notifySubmitFail: (errors: Record<string, any>, values: any) => void;
+    forceUpdate: () => void;
+    notifyChange: (formState: FormState) => void;
+    notifyValueChange: (values: any, changedValues: any) => void;
+    notifyReset: () => void;
+    getInitValues: () => Record<string, any>;
+    getFormProps: (keys: undefined | string | Array<string>) => any;
+    getAllErrorDOM: () => NodeList;
+    getFieldDOM: (field: string) => Node;
+}
+export interface FormState<T extends Record<string, any> = any> {
+    values?: T extends Record<string, any> ? T : Record<string, any>;
+    errors?: T extends Record<string, any> ? {
+        [K in keyof T]?: string;
+    } : Record<string, any>;
+    touched?: T extends Record<string, any> ? {
+        [K in keyof T]?: boolean;
+    } : Record<string, any>;
+}
+export interface setValuesConfig {
+    isOverride: boolean;
+}
+export interface BaseFormApi<T extends Record<string, unknown> = 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 Record<string, unknown> ? T : Record<string, unknown>>;
+    /** 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/cjs/form/interface.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/form/rtl.scss

@@ -0,0 +1,89 @@
+$form: #{$prefix}-form;
+$field: #{$prefix}-form-field;
+$group: #{$prefix}-form-field-group;
+$col: #{$form}-col;
+
+$checkboxGroup: #{$prefix}-checkboxGroup;
+$radioGroup: #{$prefix}-radioGroup;
+$switch: #{$prefix}-switch;
+$rating: #{$prefix}-rating;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$form} {
+        direction: rtl;
+
+        &-horizontal {
+            .#{$field} {
+                margin-left: 0;
+                margin-right: 0;
+                padding-right: 0;
+                padding-left: $spacing-form_field_horizontal-paddingRight;
+    
+                &:last-child {
+                    margin-left: $spacing-form_field_horizontal-paddingRight;
+                }
+            }
+    
+            .#{$group} {
+                padding-right: 0;
+                padding-left: $spacing-form_field_group_horizontal-paddingRight;
+            }
+        }
+    
+        &-field-label {
+            padding-right: 0;
+            padding-left: $spacing-form_label-paddingRight;
+    
+            &-with-extra {
+                .#{$field}-label-extra {
+                    margin-left: 0;
+                    margin-right: $spacing-form_label_extra-marginLeft;
+                }
+            }
+    
+            &-required {
+                .#{$field}-label-text {
+
+                    &::after {
+                        content: "*";
+                        margin-left: 0;
+                        margin-right: $spacing-form_label_required-marginLeft;
+                    }
+                }
+            }
+    
+            &-left {
+                text-align: right;
+            }
+    
+            &-right {
+                text-align: left;
+            }
+        }
+    }
+    
+    .#{$field} {
+        direction: rtl;
+
+        &[x-label-pos="left"] {
+            .#{$field}-label {
+                margin-right: 0;
+                margin-left: $spacing-form_label_posLeft-marginRight;
+            }
+        }
+    }
+    
+    .#{$field} {
+
+        &-validate-status-icon {
+            margin-right: 0;
+            margin-left: $spacing-form_statusIcon-marginRight;
+        }
+    }
+    
+    // section
+    .#{$form}-section {
+        direction: rtl;
+    }
+}

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

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import AsyncValidator from 'async-validator';
+import { ComponentProps, WithFieldOption } from './interface';
+export declare function getDisplayName(WrappedComponent: React.ComponentType | 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;
+};

package/lib/cjs/form/utils.js

@@ -0,0 +1,242 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.generateValidatesFromRules = generateValidatesFromRules;
+exports.getDisplayName = getDisplayName;
+exports.isRequired = isRequired;
+exports.isValid = isValid;
+exports.mergeOptions = mergeOptions;
+exports.mergeProps = mergeProps;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _asyncValidator = _interopRequireDefault(require("async-validator"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, 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 */
+
+
+function getDisplayName(WrappedComponent) {
+  const originName = WrappedComponent.displayName || WrappedComponent.name;
+  return originName ? "SemiField".concat(originName) : 'SemiField';
+}
+
+function generateValidatesFromRules(field) {
+  let rules = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const descriptor = {};
+  descriptor[field] = rules;
+  const validator = new _asyncValidator.default(descriptor);
+  return validator;
+}
+
+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 ((0, _isArray.default)(rules) && rules.length) {
+    (0, _forEach.default)(rules).call(rules, rule => {
+      rule.required ? required = true : null;
+    });
+  }
+
+  return required;
+}
+
+function isValid(errors) {
+  let valid = true;
+
+  if (typeof errors === 'string' && errors.length) {
+    valid = false;
+  } else if ((0, _isArray.default)(errors) && errors.length) {
+    valid = (0, _every.default)(errors).call(errors, 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
+    valid = false;
+  }
+
+  return valid;
+} // Compatible with String and Array
+
+
+function transformTrigger(trigger) {
+  let result = [];
+
+  if ((0, _isArray.default)(trigger)) {
+    result = trigger;
+  }
+
+  if (typeof trigger === 'string') {
+    result[0] = trigger;
+  }
+
+  return result;
+}
+
+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 = (0, _assign.default)((0, _assign.default)({}, 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
+  };
+}
+
+function mergeProps(props) {
+  const defaultProps = {
+    trigger: 'change',
+    // validateStatus: 'default',
+    allowEmptyString: false,
+    allowEmpty: false,
+    emptyValue: '',
+    noLabel: false,
+    noErrorMessage: false,
+    isInInputGroup: false,
+    stopValidateWithError: false
+  };
+
+  let _a = (0, _assign.default)((0, _assign.default)({}, 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
+  } = _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"]); // 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 = (0, _cloneDeep2.default)(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
+  };
+}
+
+function bothEmptyArray(val, otherVal) {
+  return (0, _isArray.default)(val) && (0, _isArray.default)(otherVal) && !val.length && !otherVal.length;
+}

package/lib/cjs/form/variables.scss

@@ -0,0 +1,44 @@
+$spacing-form_label-paddingTop: ($height-control-default - 20) / 2; // 水平布局表单标题顶部内边距
+$spacing-form_label_small-paddingTop: ($height-control-default - 24) / 2; // 水平布局 小尺寸表单标题顶部内边距
+
+$spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单标题右侧内边距
+$spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距 
+
+$spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单顶部内边距
+$spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单底部内边距
+
+$spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距 
+$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距 
+$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距 
+$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距 
+$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距 
+
+$spacing-form_label-paddingRight: $spacing-base; // 表单标题右侧内边距 
+$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距 
+$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距 
+$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距 
+$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距 
+$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距 
+$spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 垂直布局表单标题顶部内边距
+$spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 垂直布局表单标题底部内边距
+$spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 居中
+$spacing-form_label_extra_posMid-marginBottom: $spacing-extra-tight; // 表单额外信息辅助文字底部外边距 - 居中
+$spacing-form_label_extra_posBottom-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 底部
+$spacing-form_statusIcon-marginRight: $spacing-extra-tight;  // 表单校验图标右侧外边距
+
+$spacing-form_message-marginTop: $spacing-extra-tight; // 表单校验信息顶部外边距
+
+$font-form_label-fontWeight: $font-weight-bold; // 表单标题字重
+$font-form_requiredMark-fontWeight: $font-weight-bold; // 表单必填标识字重
+
+$color-form_label-text-default: var(--semi-color-text-0); // 表单标题文字颜色
+$color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单额外信息辅助文字颜色
+
+$color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标题文字颜色
+$color-form_requiredMark-text-default: var(--semi-color-danger); // 必填标记颜色
+$color-form_requiredMark_disabled-text-default: var(--semi-color-danger);  // 禁用表单项必填标记颜色
+$color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告表单项图标颜色
+$color-form_message_error-text-default: var(--semi-color-danger); // 错误表单项图标颜色
+$color-form_section-text-default: var(--semi-color-text-0); // 表单分组标题文字颜色
+$color-form_section-border-default: var(--semi-color-border); // 表单分组描边颜色
+$width-form_section-border: $border-thickness-control; // 表单分组描边宽度

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

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

package/lib/cjs/grid/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX)
+};
+exports.cssClasses = cssClasses;