@douyinfe/semi-ui 2.10.0-beta.0 → 2.10.0

package/lib/es/carousel/CarouselArrow.js

@@ -1,4 +1,3 @@
-import _throttle from "lodash/throttle";
 import _get from "lodash/get";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -37,8 +36,7 @@ class CarouselArrow extends React.PureComponent {
       type,
       theme,
       prev,
-      next,
-      timing
+      next
     } = this.props;
     const classNames = cls({
       [cssClasses.CAROUSEL_ARROW]: true,
@@ -58,12 +56,12 @@ class CarouselArrow extends React.PureComponent {
     }, /*#__PURE__*/React.createElement("div", _Object$assign({
       // role='button'
       className: leftClassNames,
-      onClick: _throttle(prev, timing)
+      onClick: prev
     }, _get(this.props, 'arrowProps.leftArrow.props')), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
       // role='button'
       // tabIndex={0} 
       className: rightClassNames,
-      onClick: _throttle(next, timing)
+      onClick: next
     }, _get(this.props, 'arrowProps.rightArrow.props')), this.renderRightIcon()));
   }
 

package/lib/es/carousel/index.js

@@ -67,7 +67,7 @@ class Carousel extends BaseComponent {
     };
 
     this.onIndicatorChange = activeIndex => {
-      return this.foundation.throttleChange(activeIndex);
+      return this.foundation.onIndicatorChange(activeIndex);
     };
 
     this.getChildren = () => {
@@ -166,7 +166,6 @@ class Carousel extends BaseComponent {
         theme,
         arrowProps
       } = this.props;
-      const timing = this.foundation.getSwitchingTime();
 
       if (showArrow && children.length > 1) {
         return /*#__PURE__*/React.createElement(CarouselArrow, {
@@ -174,7 +173,6 @@ class Carousel extends BaseComponent {
           theme: theme,
           prev: this.prev,
           next: this.next,
-          timing: timing,
           arrowProps: arrowProps
         });
       }

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

@@ -3,7 +3,7 @@ import { strings } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
 export interface CarouselMethod {
     next?: () => void;
     prev?: () => void;
-    goTo?: () => void;
+    goTo?: (tagetIndex: number) => void;
     play?: () => void;
     stop?: () => void;
 }
@@ -50,7 +50,6 @@ export interface CarouselArrowProps {
     prev?: () => void;
     next?: () => void;
     arrowProps?: ArrowProps;
-    timing: number;
 }
 export interface ArrowButton {
     props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/lib/es/datePicker/monthsGrid.js

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { format as formatFn, isSameDay } from 'date-fns';
 import MonthsGridFoundation from '@douyinfe/semi-foundation/lib/es/datePicker/monthsGridFoundation';
 import { strings, numbers, cssClasses } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
-import { compatiableParse } from '@douyinfe/semi-foundation/lib/es/datePicker/_utils/parser';
+import { compatibleParse } from '@douyinfe/semi-foundation/lib/es/datePicker/_utils/parser';
 import BaseComponent from '../_base/baseComponent';
 import Navigation from './navigation';
 import Month from './month';
@@ -474,7 +474,7 @@ export default class MonthsGrid extends BaseComponent {
     const dateFormat = this.foundation.getValidDateFormat();
     let startDate, endDate;
 
-    if (type === 'dateTimeRange' && rangeStart && rangeEnd && isSameDay(startDate = compatiableParse(rangeStart, dateFormat, undefined, dateFnsLocale), endDate = compatiableParse(rangeEnd, dateFormat, undefined, dateFnsLocale))) {
+    if (type === 'dateTimeRange' && rangeStart && rangeEnd && isSameDay(startDate = compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale), endDate = compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale))) {
       if (panelType === strings.PANEL_TYPE_RIGHT) {
         rangeStart && (restProps.startDate = startDate);
       } else {
@@ -560,10 +560,10 @@ export default class MonthsGrid extends BaseComponent {
 
     if (panelType === strings.PANEL_TYPE_LEFT) {
       panelDetail = monthLeft;
-      dateText = rangeStart ? formatFn(compatiableParse(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+      dateText = rangeStart ? formatFn(compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
     } else {
       panelDetail = monthRight;
-      dateText = rangeEnd ? formatFn(compatiableParse(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+      dateText = rangeEnd ? formatFn(compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
     }
 
     const {
@@ -573,7 +573,7 @@ export default class MonthsGrid extends BaseComponent {
     const monthText = showDate ? formatFn(showDate, FORMAT_SWITCH_DATE) : '';
     const timeText = showDate ? formatFn(showDate, formatTimePicker) : '';
 
-    const showSwithIcon = _includesInstanceProperty(_context3 = ['default']).call(_context3, density);
+    const showSwitchIcon = _includesInstanceProperty(_context3 = ['default']).call(_context3, density);
 
     const switchCls = classnames("".concat(prefixCls, "-switch"));
     const dateCls = classnames({
@@ -594,7 +594,7 @@ export default class MonthsGrid extends BaseComponent {
       "aria-label": "Switch to date panel",
       className: dateCls,
       onClick: e => this.foundation.showDatePanel(panelType)
-    }, showSwithIcon && /*#__PURE__*/React.createElement(IconCalendar, {
+    }, showSwitchIcon && /*#__PURE__*/React.createElement(IconCalendar, {
       "aria-hidden": true
     }), /*#__PURE__*/React.createElement("span", {
       className: textCls
@@ -603,7 +603,7 @@ export default class MonthsGrid extends BaseComponent {
       "aria-label": "Switch to time panel",
       className: timeCls,
       onClick: e => this.foundation.showTimePicker(panelType, true)
-    }, showSwithIcon && /*#__PURE__*/React.createElement(IconClock, {
+    }, showSwitchIcon && /*#__PURE__*/React.createElement(IconClock, {
       "aria-hidden": true
     }), /*#__PURE__*/React.createElement("span", {
       className: textCls

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

@@ -147,6 +147,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
     static Section: typeof Section;
     formApi: FormApi;
     constructor(props: BaseFormProps);
+    componentDidMount(): void;
     componentWillUnmount(): void;
     get adapter(): BaseFormAdapter<BaseFormProps, BaseFormState>;
     get content(): React.ReactNode;

package/lib/es/form/baseForm.js

@@ -47,7 +47,7 @@ class Form extends BaseComponent {
 
     super(props);
     this.state = {
-      formId: getUuidv4()
+      formId: ''
     };
     warning(Boolean(props.component && props.render), '[Semi Form] You should not use <Form component> and <Form render> in ths same time; <Form render> will be ignored');
     warning(props.component && props.children && !isEmptyChildren(props.children), '[Semi Form] You should not use <Form component> and <Form>{children}</Form> in ths same time; <Form>{children}</Form> will be ignored');
@@ -62,6 +62,10 @@ class Form extends BaseComponent {
     }
   }
 
+  componentDidMount() {
+    this.foundation.init();
+  }
+
   componentWillUnmount() {
     this.foundation.destroy();
     this.foundation = null;
@@ -89,6 +93,11 @@ class Form extends BaseComponent {
       notifyReset: () => {
         this.props.onReset();
       },
+      initFormId: () => {
+        this.setState({
+          formId: getUuidv4()
+        });
+      },
       getInitValues: () => this.props.initValues,
       getFormProps: keys => {
         if (typeof keys === 'undefined') {

package/lib/es/form/hoc/withField.js

@@ -380,9 +380,16 @@ function withField(Component, opts) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         return () => {};
       } // log('register: ' + field);
+      // field value may change after field component mounted, we use ref value here to get changed value
 
 
-      updater.register(field, fieldState, {
+      const refValue = getVal();
+      updater.register(field, {
+        value: refValue,
+        error,
+        touched,
+        status
+      }, {
         field,
         fieldApi,
         keepState,

package/lib/es/inputNumber/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../input';
-import InputNumberFoundation, { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
+import InputNumberFoundation, { BaseInputNumberState, InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { strings } from '@douyinfe/semi-foundation/lib/es/inputNumber/constants';
 import '@douyinfe/semi-foundation/lib/es/inputNumber/inputNumber.css';
@@ -40,11 +40,7 @@ export interface InputNumberProps extends InputProps {
     onNumberChange?: (value: number, e?: React.ChangeEvent) => void;
     onUpClick?: (value: string, e: React.MouseEvent<HTMLButtonElement>) => void;
 }
-export interface InputNumberState {
-    value?: number | string;
-    number?: number | null;
-    focusing?: boolean;
-    hovering?: boolean;
+export interface InputNumberState extends BaseInputNumberState {
 }
 declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     static propTypes: {

package/lib/es/inputNumber/index.js

@@ -1,4 +1,5 @@
 import _noop from "lodash/noop";
+import _isString from "lodash/isString";
 import _isNaN from "lodash/isNaN";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -271,6 +272,9 @@ class InputNumber extends BaseComponent {
       },
       setClickUpOrDown: value => {
         this.clickUpOrDown = value;
+      },
+      updateStates: (states, callback) => {
+        this.setState(states, callback);
       }
     });
   }
@@ -282,6 +286,7 @@ class InputNumber extends BaseComponent {
     const {
       focusing
     } = this.state;
+    let newValue;
     /**
      * To determine whether the front and back are equal
      * NaN need to check whether both are NaN
@@ -289,8 +294,9 @@ class InputNumber extends BaseComponent {
 
     if (value !== prevProps.value && !isBothNaN(value, prevProps.value)) {
       if (isNullOrUndefined(value) || value === '') {
-        this.setState({
-          value: '',
+        newValue = '';
+        this.foundation.updateStates({
+          value: newValue,
           number: null
         });
       } else {
@@ -346,33 +352,42 @@ class InputNumber extends BaseComponent {
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);
+              newValue = obj.value;
             }
 
-            this.setState(obj, () => this.adapter.restoreCursor());
+            this.foundation.updateStates(obj, () => this.adapter.restoreCursor());
           } else if (!_isNaN(toNum)) {
             // Update input content when controlled input is illegal and not NaN
-            this.setState({
-              value: this.foundation.doFormat(toNum, false)
+            newValue = this.foundation.doFormat(toNum, false);
+            this.foundation.updateStates({
+              value: newValue
             });
           } else {
             // Update input content when controlled input NaN
-            this.setState({
-              value: this.foundation.doFormat(valueStr, false)
+            newValue = this.foundation.doFormat(valueStr, false);
+            this.foundation.updateStates({
+              value: newValue
             });
           }
         } else if (this.foundation.isValidNumber(parsedNum)) {
-          this.setState({
+          newValue = this.foundation.doFormat(parsedNum);
+          this.foundation.updateStates({
             number: parsedNum,
-            value: this.foundation.doFormat(parsedNum)
+            value: newValue
           });
         } else {
           // Invalid digital analog blurring effect instead of controlled failure
-          this.setState({
+          newValue = '';
+          this.foundation.updateStates({
             number: null,
-            value: ''
+            value: newValue
           });
         }
       }
+
+      if (_isString(newValue) && newValue !== String(this.props.value)) {
+        this.foundation.notifyChange(newValue, null);
+      }
     }
 
     if (!this.clickUpOrDown) {

package/lib/es/transfer/index.js

@@ -19,7 +19,7 @@ import cls from 'classnames';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import PropTypes from 'prop-types';
 import TransferFoundation from '@douyinfe/semi-foundation/lib/es/transfer/foundation';
-import { _generateDataByType, _generateSelectedItems } from '@douyinfe/semi-foundation/lib/es/transfer/transferUtlls';
+import { _generateDataByType, _generateSelectedItems } from '@douyinfe/semi-foundation/lib/es/transfer/transferUtils';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/transfer/constants';
 import '@douyinfe/semi-foundation/lib/es/transfer/transfer.css';
 import BaseComponent from '../_base/baseComponent';

package/lib/es/treeSelect/index.js

@@ -40,7 +40,7 @@ import TagInput from '../tagInput';
 import { isSemiIcon } from '../_utils';
 import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
 const prefixcls = cssClasses.PREFIX;
-const prefixTree = cssClasses.PREFIXTREE;
+const prefixTree = cssClasses.PREFIX_TREE;
 const key = 0;
 
 class TreeSelect extends BaseComponent {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.10.0-beta.0",
+    "version": "2.10.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.10.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.10.0-beta.0",
-        "@douyinfe/semi-foundation": "2.10.0-beta.0",
-        "@douyinfe/semi-icons": "2.10.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.10.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.10.0-beta.0",
+        "@douyinfe/semi-animation": "2.10.0",
+        "@douyinfe/semi-animation-react": "2.10.0",
+        "@douyinfe/semi-foundation": "2.10.0",
+        "@douyinfe/semi-icons": "2.10.0",
+        "@douyinfe/semi-illustrations": "2.10.0",
+        "@douyinfe/semi-theme-default": "2.10.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "10c5eff42fe3144451fd73d9d542a710d165d456",
+    "gitHead": "0cbe3b9873aa550afa2eda0997eaa7015983fe0d",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.10.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.10.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/transfer/index.tsx

@@ -4,7 +4,7 @@ import { SortableContainer, SortableElement, SortableHandle } from 'react-sortab
 import PropTypes from 'prop-types';
 import { isEqual, noop, omit, isEmpty, isArray } from 'lodash';
 import TransferFoundation, { TransferAdapter, BasicDataItem, OnSortEndProps } from '@douyinfe/semi-foundation/transfer/foundation';
-import { _generateDataByType, _generateSelectedItems } from '@douyinfe/semi-foundation/transfer/transferUtlls';
+import { _generateDataByType, _generateSelectedItems } from '@douyinfe/semi-foundation/transfer/transferUtils';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/transfer/constants';
 import '@douyinfe/semi-foundation/transfer/transfer.scss';
 import BaseComponent from '../_base/baseComponent';

package/treeSelect/index.tsx

@@ -163,7 +163,7 @@ export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, Override
 }
 
 const prefixcls = cssClasses.PREFIX;
-const prefixTree = cssClasses.PREFIXTREE;
+const prefixTree = cssClasses.PREFIX_TREE;
 
 const key = 0;