@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

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

@@ -1,13 +1,13 @@
 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>;
+import { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
+export type BasicTriggerType = 'blur' | 'change' | 'custom' | 'mount';
+export type FieldValidateTriggerType = BasicTriggerType | Array<BasicTriggerType>;
+export type CommonFieldError = boolean | string | Array<any> | undefined | unknown;
+export 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;
+    notifySubmit: (values: any, e?: any) => void;
+    notifySubmitFail: (errors: Record<keyof Values, BasicFieldError>, values: Partial<Values>, e?: any) => void;
     forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
@@ -18,7 +18,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     getFieldDOM: (field: string) => Node;
     initFormId: () => void;
 }
-export declare type AllErrors<T> = T extends Record<string, any> ? {
+export 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> {
@@ -51,7 +51,7 @@ export interface BaseFormApi<T extends object = any> {
     /** submit form manual */
     submitForm: () => void;
     /** reset form manual */
-    reset: () => void;
+    reset: (fields?: Array<string>) => 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];
@@ -61,7 +61,7 @@ export interface BaseFormApi<T extends object = 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;
+    scrollToField: <K extends keyof T>(field: K, scrollConfig?: ScrollIntoViewOptions) => void;
 }
 export interface CallOpts {
     [x: string]: any;

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

@@ -1,5 +1,5 @@
 import AsyncValidator from 'async-validator';
-import { ComponentProps, WithFieldOption } from './interface';
+import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, WithFieldOption } from './interface';
 /**
  *
  * @param WrappedComponent React.ComponentType | any
@@ -8,6 +8,15 @@ 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;
+/**
+ * trigger transform rule
+    1. If the user has set fieldProps, follow the user's fieldProps
+    2. If the user does not set fieldProps, follow formProps
+    3. If there is no formProps, follow the change
+    4. If it is an array, follow the array, if it is not an array (pure string), convert it to a string array
+ */
+export declare function transformTrigger(fieldTrigger: FieldValidateTriggerType, formTrigger: FieldValidateTriggerType): Array<BasicTriggerType>;
+export declare function transformDefaultBooleanAPI(fieldProp: boolean, formProp: boolean, defaultVal?: boolean): boolean;
 export declare function mergeOptions(opts: WithFieldOption, props: ComponentProps): {
     options: {
         valueKey: string;

package/lib/es/form/utils.js

@@ -1,31 +1,22 @@
-import _cloneDeep from "lodash/cloneDeep";
-
+import _isUndefined from "lodash/isUndefined";
 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';
-
+import { strings } from './constants';
+import copy from 'fast-copy';
 /**
  *
  * @param WrappedComponent React.ComponentType | any
  */
 export function getDisplayName(WrappedComponent) {
   const originName = WrappedComponent.displayName || WrappedComponent.name;
-  return originName ? "SemiField".concat(originName) : 'SemiField';
+  return originName ? `SemiField${originName}` : 'SemiField';
 }
 export function generateValidatesFromRules(field) {
   let rules = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -37,7 +28,6 @@ export function generateValidatesFromRules(field) {
 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) {
@@ -45,12 +35,10 @@ export function isRequired() {
       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) {
@@ -62,24 +50,43 @@ export function isValid(errors) {
     // only work with React Adapter
     valid = false;
   }
-
   return valid;
-} // Compatible with String and Array
-
-function transformTrigger(trigger) {
+}
+/**
+ * trigger transform rule
+    1. If the user has set fieldProps, follow the user's fieldProps
+    2. If the user does not set fieldProps, follow formProps
+    3. If there is no formProps, follow the change
+    4. If it is an array, follow the array, if it is not an array (pure string), convert it to a string array
+ */
+export function transformTrigger(fieldTrigger, formTrigger) {
   let result = [];
-
-  if (Array.isArray(trigger)) {
-    result = trigger;
+  let finalResult = [];
+  if (!_isUndefined(fieldTrigger)) {
+    result = fieldTrigger;
+  } else if (!_isUndefined(formTrigger)) {
+    result = formTrigger;
+  } else {
+    result = strings.DEFAULT_TRIGGER;
+  }
+  if (Array.isArray(result)) {
+    finalResult = result;
+  }
+  if (typeof result === 'string') {
+    finalResult[0] = result;
   }
-
-  if (typeof trigger === 'string') {
-    result[0] = trigger;
+  return finalResult;
+}
+export function transformDefaultBooleanAPI(fieldProp, formProp) {
+  let defaultVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (!_isUndefined(fieldProp)) {
+    return fieldProp;
+  } else if (!_isUndefined(formProp)) {
+    return formProp;
+  } else {
+    return defaultVal;
   }
-
-  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
@@ -92,8 +99,8 @@ export function mergeOptions(opts, props) {
     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 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,
@@ -102,76 +109,67 @@ export function mergeOptions(opts, props) {
 }
 export function mergeProps(props) {
   const defaultProps = {
-    trigger: 'change',
     // validateStatus: 'default',
     allowEmptyString: false,
     allowEmpty: false,
     emptyValue: '',
     noLabel: false,
     noErrorMessage: false,
-    isInInputGroup: false,
-    stopValidateWithError: false
+    isInInputGroup: 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抽取出来，防止透传到组件中
+    {
+      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);
+    initValue = copy(initValue);
   }
-
   const required = isRequired(rules);
-  trigger = transformTrigger(trigger);
   emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
   return {
     field,
@@ -209,7 +207,6 @@ export function mergeProps(props) {
     id
   };
 }
-
 function bothEmptyArray(val, otherVal) {
   return Array.isArray(val) && Array.isArray(otherVal) && !val.length && !otherVal.length;
 }

package/lib/es/form/variables.scss

@@ -10,6 +10,7 @@ $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直
 $spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距（水平布局）
 $spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
 $spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
+$spacing-form_label-marginTop: 0px; // 表单项标签顶部外边距
 $spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
 $spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单项标签必填标志左侧边距
 $spacing-form_label_posLeft-marginRight: 0; // 表单项左侧标签右侧外边距
@@ -47,4 +48,6 @@ $width-form_section-border: $border-thickness-control; // 表单分组标题底
 $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_section_text-paddingTop: 0px; // 表单分组标题顶部内边距
+$spacing-form_section_text-marginTop: 0px; // 表单分组标题顶部外边距
 

package/lib/es/grid/constants.js

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

package/lib/es/grid/grid.css

@@ -26,7 +26,7 @@
   display: flex;
 }
 
-.semi-col-0 {
+.semi-col-0, .semi-col-xs-0, .semi-col-sm-0, .semi-col-md-0, .semi-col-lg-0, .semi-col-xl-0, .semi-col-xxl-0 {
   display: none;
 }
 

package/lib/es/grid/grid.scss

@@ -19,7 +19,7 @@ $module: #{$prefix};
     }
 }
 
-.#{$module}-col-0 {
+.#{$module}-col-0, .#{$module}-col-xs-0, .#{$module}-col-sm-0, .#{$module}-col-md-0, .#{$module}-col-lg-0, .#{$module}-col-xl-0, .#{$module}-col-xxl-0 {
     display: none;
 }
 

package/lib/es/highlight/constants.js

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

package/lib/es/icons/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-icon")
+  PREFIX: `${BASE_CLASS_PREFIX}-icon`
 };
 const strings = {
   SIZE: ['extra-small', 'small', 'default', 'large', 'extra-large', 'custom'],

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

@@ -1,4 +1,7 @@
 declare const cssClasses: {
     readonly PREFIX: "semi-image";
 };
-export { cssClasses };
+declare const numbers: {
+    DEFAULT_Z_INDEX: number;
+};
+export { cssClasses, numbers };

package/lib/es/image/constants.js

@@ -1,5 +1,8 @@
 import { BASE_CLASS_PREFIX } from "../base/constants";
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-image")
+  PREFIX: `${BASE_CLASS_PREFIX}-image`
 };
-export { cssClasses };
+const numbers = {
+  DEFAULT_Z_INDEX: 1070
+};
+export { cssClasses, numbers };

package/lib/es/image/image.css

@@ -8,7 +8,7 @@
   overflow: hidden;
 }
 .semi-image-img {
-  vertical-align: middle;
+  vertical-align: top;
   border-radius: inherit;
   user-select: none;
 }
@@ -109,9 +109,11 @@
 .semi-image-preview-footer {
   display: flex;
   align-items: center;
+}
+.semi-image-preview-footer-content {
   padding: 0 16px;
   background: rgba(0, 0, 0, 0.75);
-  border-radius: 6px;
+  border-radius: var(--semi-border-radius-medium);
   height: 48px;
 }
 .semi-image-preview-footer-wrapper {

package/lib/es/image/image.scss

@@ -11,7 +11,7 @@ $module: #{$prefix}-image;
     overflow: hidden;
 
     &-img {
-        vertical-align: middle;
+        vertical-align: top;
         border-radius: inherit;
         user-select: none;
 
@@ -123,10 +123,14 @@ $module: #{$prefix}-image;
     &-footer {
         display: flex;
         align-items: center;
-        padding: $spacing-image_preview_footer-paddingY $spacing-image_preview_footer-paddingX;
-        background: $color-image_preview_footer-bg;
-        border-radius: $radius-image_preview_footer;
-        height: $height-image_preview_footer;
+
+        &-content {
+            padding: $spacing-image_preview_footer-paddingY $spacing-image_preview_footer-paddingX;
+            background: $color-image_preview_footer-bg;
+            border-radius: $radius-image_preview_footer;
+            height: $height-image_preview_footer;
+        }
+        
 
         &-wrapper {
             position: absolute;

package/lib/es/image/imageFoundation.js

@@ -3,24 +3,21 @@ 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
-
+      } = this.getProps();
+      // if preview = false, then it cannot preview
       if (!preview) {
         return;
-      } // if image in group, then use group's Preview components
-
-
+      }
+      // 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 {
@@ -28,7 +25,6 @@ export default class ImageFoundation extends BaseFoundation {
         this.handlePreviewVisibleChange(true);
       }
     };
-
     this.handleLoaded = e => {
       const {
         onLoad
@@ -38,7 +34,6 @@ export default class ImageFoundation extends BaseFoundation {
         loadStatus: "success"
       });
     };
-
     this.handleError = e => {
       const {
         onError
@@ -48,18 +43,15 @@ export default class ImageFoundation extends BaseFoundation {
         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
@@ -72,5 +64,4 @@ export default class ImageFoundation extends BaseFoundation {
       }
     };
   }
-
 }

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

@@ -1,6 +1,5 @@
 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;

package/lib/es/image/previewFooterFoundation.js

@@ -2,7 +2,6 @@ import BaseFoundation from "../base/foundation";
 export default class PreviewFooterFoundation extends BaseFoundation {
   constructor() {
     super(...arguments);
-
     this.changeSliderValue = type => {
       const {
         zoom,
@@ -11,32 +10,25 @@ export default class PreviewFooterFoundation extends BaseFoundation {
         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,
@@ -45,7 +37,6 @@ export default class PreviewFooterFoundation extends BaseFoundation {
       const type = ratio === "adaptation" ? "realSize" : "adaptation";
       onAdjustRatio(type);
     };
-
     this.handleRotate = direction => {
       const {
         onRotate
@@ -53,5 +44,4 @@ export default class PreviewFooterFoundation extends BaseFoundation {
       onRotate && onRotate(direction);
     };
   }
-
 }

package/lib/es/image/previewFoundation.js

@@ -2,36 +2,29 @@ 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);
     };
   }
-
 }