@douyinfe/semi-ui 2.8.1 → 2.9.0-beta.1

package/lib/es/slider/index.js

@@ -266,7 +266,10 @@ export default class Slider extends BaseComponent {
           ["".concat(prefixCls, "-dot-active")]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ? /*#__PURE__*/React.createElement("span", {
+        return activeResult ?
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        React.createElement("span", {
           key: mark,
           onClick: e => this.foundation.handleWrapClick(e),
           className: markClass,
@@ -448,6 +451,7 @@ export default class Slider extends BaseComponent {
       onHandleMove: function (mousePos, isMin) {
         let stateChangeCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _noop;
         let clickTrack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+        let outPutValue = arguments.length > 4 ? arguments[4] : undefined;
 
         const sliderDOMIsInRenderTree = _this.foundation.checkAndUpdateIsInRenderTreeState();
 
@@ -456,32 +460,32 @@ export default class Slider extends BaseComponent {
         }
 
         const {
-          value,
-          onChange
+          value
         } = _this.props;
+        let finalOutPutValue = outPutValue;
 
-        const moveValue = _this.foundation.transPosToValue(mousePos, isMin);
+        if (finalOutPutValue === undefined) {
+          const moveValue = _this.foundation.transPosToValue(mousePos, isMin);
 
-        if (moveValue === false) {
-          return;
-        }
+          if (moveValue === false) {
+            return;
+          }
 
-        const outPutValue = _this.foundation.outPutValue(moveValue);
+          finalOutPutValue = _this.foundation.outPutValue(moveValue);
+        }
 
         const {
           currentValue
         } = _this.state;
 
-        if (!_isEqual(_this.foundation.outPutValue(currentValue), outPutValue)) {
-          onChange(outPutValue);
-
+        if (!_isEqual(_this.foundation.outPutValue(currentValue), finalOutPutValue)) {
           if (!clickTrack && _this.foundation.valueFormatIsCorrect(value)) {
             // still require afterChangeCallback when click on the track directly, need skip here
             return false;
           }
 
           _this.setState({
-            currentValue: outPutValue
+            currentValue: finalOutPutValue
           }, stateChangeCallback);
         }
       },

package/lib/es/table/Body/BaseRow.d.ts

@@ -52,7 +52,7 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         columns: PropTypes.Validator<any[]>;
         components: PropTypes.Validator<object>;
         disabled: PropTypes.Requireable<boolean>;
-        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
         expandableRow: PropTypes.Requireable<boolean>;
         expanded: PropTypes.Requireable<boolean>;
         expandedRow: PropTypes.Requireable<boolean>;

package/lib/es/table/Body/ExpandedRow.d.ts

@@ -36,7 +36,7 @@ export default class TableExpandedRow extends PureComponent<TableExpandedRowProp
         components: PropTypes.Requireable<object>;
         defaultExpandAllRows: PropTypes.Requireable<boolean>;
         defaultExpandedRowKeys: PropTypes.Requireable<any[]>;
-        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        expandIcon: PropTypes.Requireable<object | PropTypes.ReactNodeLike>;
         expandRowByClick: PropTypes.Requireable<boolean>;
         expanded: PropTypes.Requireable<boolean>;
         expandedRowKeys: PropTypes.Requireable<any[]>;

package/lib/es/table/Column.d.ts

@@ -27,7 +27,7 @@ export default class Column extends React.PureComponent<ColumnProps> {
         sortDirections: import("prop-types").Requireable<string[]>;
         sortOrder: import("prop-types").Requireable<string | boolean>;
         sorter: import("prop-types").Requireable<boolean | ((...args: any[]) => any)>;
-        title: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        title: import("prop-types").Requireable<import("prop-types").ReactNodeLike | ((...args: any[]) => any)>;
         useFullRender: import("prop-types").Requireable<boolean>;
         width: import("prop-types").Requireable<string | number>;
     };

package/lib/es/table/ColumnShape.d.ts

@@ -25,7 +25,7 @@ declare const _default: {
     sortDirections: PropTypes.Requireable<string[]>;
     sortOrder: PropTypes.Requireable<string | boolean>;
     sorter: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
-    title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
     useFullRender: PropTypes.Requireable<boolean>;
     width: PropTypes.Requireable<string | number>;
 };

package/lib/es/table/CustomExpandIcon.d.ts

@@ -21,7 +21,7 @@ declare namespace CustomExpandIcon {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
-        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
         prefixCls: PropTypes.Requireable<string>;
         motion: PropTypes.Requireable<boolean>;
     };

package/lib/es/table/Table.d.ts

@@ -80,15 +80,15 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
             sortDirections: PropTypes.Requireable<string[]>;
             sortOrder: PropTypes.Requireable<string | boolean>;
             sorter: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
-            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
             useFullRender: PropTypes.Requireable<boolean>;
             width: PropTypes.Requireable<string | number>;
         }>[]>;
         hideExpandedColumn: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
-        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
         expandCellFixed: PropTypes.Requireable<boolean | "left" | "right">;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
         onHeaderRow: PropTypes.Requireable<(...args: any[]) => any>;
         showHeader: PropTypes.Requireable<boolean>;
         indentSize: PropTypes.Requireable<number>;
@@ -106,7 +106,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         defaultExpandedRowKeys: PropTypes.Requireable<any[]>;
         pagination: PropTypes.Requireable<boolean | object>;
         renderPagination: PropTypes.Requireable<(...args: any[]) => any>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
         empty: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         dataSource: PropTypes.Requireable<any[]>;
         childrenRecordName: PropTypes.Requireable<string>;
@@ -294,7 +294,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         defaultCurrentPage?: number;
         onPageChange?: (currentPage: number) => void;
         onPageSizeChange?: (newPageSize: number) => void;
-        onChange: ((currentPage: number, pageSize: number) => void) | ((currentPage: number, currentPageSize: number) => void);
+        onChange: (currentPage: number, pageSize: number) => void;
         prevText?: React.ReactNode;
         nextText?: React.ReactNode;
         showSizeChanger?: boolean;

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

@@ -43,15 +43,15 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
             sortDirections: PropTypes.Requireable<string[]>;
             sortOrder: PropTypes.Requireable<string | boolean>;
             sorter: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
-            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
             useFullRender: PropTypes.Requireable<boolean>;
             width: PropTypes.Requireable<string | number>;
         }>[]>;
         hideExpandedColumn: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
-        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
         expandCellFixed: PropTypes.Requireable<boolean | "left" | "right">;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
         onHeaderRow: PropTypes.Requireable<(...args: any[]) => any>;
         showHeader: PropTypes.Requireable<boolean>;
         indentSize: PropTypes.Requireable<number>;
@@ -69,7 +69,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
         defaultExpandedRowKeys: PropTypes.Requireable<any[]>;
         pagination: PropTypes.Requireable<boolean | object>;
         renderPagination: PropTypes.Requireable<(...args: any[]) => any>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
         empty: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         dataSource: PropTypes.Requireable<any[]>;
         childrenRecordName: PropTypes.Requireable<string>;

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

@@ -82,7 +82,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
-        validateStatus: PropTypes.Requireable<"default" | "error" | "warning">;
+        validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'aria-label': PropTypes.Requireable<string>;

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

@@ -87,7 +87,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         clickTriggerToHide: PropTypes.Requireable<boolean>;
         visible: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<object>;
-        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        content: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
         prefixCls: PropTypes.Requireable<string>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.8.1",
+    "version": "2.9.0-beta.1",
     "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.8.1",
-        "@douyinfe/semi-animation-react": "2.8.1",
-        "@douyinfe/semi-foundation": "2.8.1",
-        "@douyinfe/semi-icons": "2.8.1",
-        "@douyinfe/semi-illustrations": "2.8.1",
-        "@douyinfe/semi-theme-default": "2.8.1",
+        "@douyinfe/semi-animation": "2.9.0-beta.1",
+        "@douyinfe/semi-animation-react": "2.9.0-beta.1",
+        "@douyinfe/semi-foundation": "2.9.0-beta.1",
+        "@douyinfe/semi-icons": "2.9.0-beta.1",
+        "@douyinfe/semi-illustrations": "2.9.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.9.0-beta.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "43bb8935513df752b32b2687b99bd5c5f49a0118",
+    "gitHead": "b246f204d2f33e5de4155b5d0377eace25b6456f",
     "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.8.1",
+        "@douyinfe/semi-scss-compile": "2.9.0-beta.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/slider/_story/slider.stories.js

@@ -254,14 +254,15 @@ SliderInScrollContainer.story = {
 
 class ControlledSlider extends Component {
   state = {
-    value: 50,
-    rangeValue: undefined,
+    value: 30,
+    rangeValue: [10, 30],
   };
   changeValue = () => {
     this.setState({ value: this.state.value + 10 });
+    const [start, end] = this.state.rangeValue;
+    this.setState({ rangeValue: [start - 10, end + 10]})
   };
   changeRangeValue = rangeValue => {
-    console.log('rangeValue' + rangeValue);
     this.setState({ rangeValue: rangeValue });
   };
   render() {
@@ -269,21 +270,42 @@ class ControlledSlider extends Component {
     return (
       <div>
         <Button onClick={() => this.changeValue()}>点击改变value</Button>
-        <div style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+        <div data-cy="horizontalNoChangeSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+          <Slider
+            value={30}
+            onChange={value => {
+              console.log('value改变了' + value);
+            }}
+          ></Slider>
+        </div>
+        <div data-cy="horizontalOnChangeSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
           <Slider
             value={value}
             onChange={value => {
               console.log('value改变了' + value);
+              this.setState({value: value});
             }}
           ></Slider>
         </div>
-        <div style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+        <div data-cy="horizontalNoChangeRangeSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
           <Slider
             value={rangeValue}
-            onChange={rangeValue => this.changeRangeValue(rangeValue)}
+            onChange={rangeValue => {
+              console.log('value改变了' + rangeValue);
+            }}
             range
           ></Slider>
         </div>
+        <div data-cy="horizontalNoChangeVerticalSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+          <Slider
+            value={40}
+            vertical
+            onChange={value => {
+              console.log('value改变了' + value);
+            }}
+            style={{height: '300px'}}
+          ></Slider>
+        </div>
       </div>
     );
   }

package/slider/index.tsx

@@ -195,29 +195,33 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
                 this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
             },
-            onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback = noop, clickTrack = false): boolean | void => {
+            onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback = noop, clickTrack = false, outPutValue): boolean | void => {
 
                 const sliderDOMIsInRenderTree = this.foundation.checkAndUpdateIsInRenderTreeState();
                 if (!sliderDOMIsInRenderTree) {
                     return;
                 }
 
-                const { value, onChange } = this.props;
-                const moveValue = this.foundation.transPosToValue(mousePos, isMin);
-                if (moveValue === false) {
-                    return;
+                const { value } = this.props;
+                
+
+                let finalOutPutValue = outPutValue;
+                if (finalOutPutValue === undefined) {
+                    const moveValue = this.foundation.transPosToValue(mousePos, isMin);
+                    if (moveValue === false) {
+                        return;
+                    }
+                    finalOutPutValue = this.foundation.outPutValue(moveValue);
                 }
 
-                const outPutValue = this.foundation.outPutValue(moveValue);
                 const { currentValue } = this.state;
-                if (!isEqual(this.foundation.outPutValue(currentValue), outPutValue)) {
-                    onChange(outPutValue);
+                if (!isEqual(this.foundation.outPutValue(currentValue), finalOutPutValue)) {
                     if (!clickTrack && this.foundation.valueFormatIsCorrect(value)) {
                         // still require afterChangeCallback when click on the track directly, need skip here
                         return false;
                     }
                     this.setState({
-                        currentValue: outPutValue,
+                        currentValue: finalOutPutValue,
                     }, stateChangeCallback);
                 }
             },
@@ -307,7 +311,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             'aria-labelledby': ariaLabelledby,
             'aria-disabled': disabled
         };
-        vertical && Object.assign(commonAria, {'aria-orientation': 'vertical'});
+        vertical && Object.assign(commonAria, { 'aria-orientation': 'vertical' });
 
         const handleContents = !range ? (
             <Tooltip
@@ -494,6 +498,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         });
                         const markPercent = (Number(mark) - min) / (max - min);
                         return activeResult ? (
+                            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                             <span
                                 key={mark}
                                 onClick={e => this.foundation.handleWrapClick(e)}