@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.1-alpha.0

package/lib/es/inputNumber/index.js

@@ -1,30 +1,20 @@
 import _noop from "lodash/noop";
 import _isString from "lodash/isString";
 import _isNaN from "lodash/isNaN";
-
 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 jsx-a11y/no-static-element-interactions */
-
 /* eslint-disable @typescript-eslint/no-unused-vars */
-
 /* eslint-disable no-unused-vars */
-
 /* eslint-disable max-depth */
-
 /* eslint-disable react/no-did-update-set-state */
-
 /* eslint-disable max-len */
-
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -37,124 +27,9 @@ import BaseComponent from '../_base/baseComponent';
 import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/lib/es/inputNumber/constants';
 import { IconChevronUp, IconChevronDown } from '@douyinfe/semi-icons';
 import '@douyinfe/semi-foundation/lib/es/inputNumber/inputNumber.css';
-
 class InputNumber extends BaseComponent {
-  constructor(props) {
-    super(props);
-
-    this.setInputRef = node => {
-      const {
-        forwardedRef
-      } = this.props;
-      this.inputNode = node;
-
-      if (forwardedRef && typeof forwardedRef === 'object') {
-        forwardedRef.current = node;
-      } else if (typeof forwardedRef === 'function') {
-        forwardedRef(node);
-      }
-    };
-
-    this.handleInputFocus = e => this.foundation.handleInputFocus(e);
-
-    this.handleInputChange = (value, event) => this.foundation.handleInputChange(value, event);
-
-    this.handleInputBlur = e => this.foundation.handleInputBlur(e);
-
-    this.handleInputKeyDown = e => this.foundation.handleInputKeyDown(e);
-
-    this.handleInputMouseEnter = e => this.foundation.handleInputMouseEnter(e);
-
-    this.handleInputMouseLeave = e => this.foundation.handleInputMouseLeave(e);
-
-    this.handleInputMouseMove = e => this.foundation.handleInputMouseMove(e);
-
-    this.handleUpClick = e => this.foundation.handleUpClick(e);
-
-    this.handleDownClick = e => this.foundation.handleDownClick(e);
-
-    this.handleMouseUp = e => this.foundation.handleMouseUp(e);
-
-    this.handleMouseLeave = e => this.foundation.handleMouseLeave(e);
-
-    this.renderButtons = () => {
-      const {
-        prefixCls,
-        disabled,
-        innerButtons,
-        max,
-        min
-      } = this.props;
-      const {
-        hovering,
-        focusing,
-        number
-      } = this.state;
-      const notAllowedUp = disabled ? disabled : number === max;
-      const notAllowedDown = disabled ? disabled : number === min;
-      const suffixChildrenCls = classnames(`${prefixCls}-number-suffix-btns`, {
-        [`${prefixCls}-number-suffix-btns-inner`]: innerButtons,
-        [`${prefixCls}-number-suffix-btns-inner-hover`]: innerButtons && hovering && !focusing
-      });
-      const upClassName = classnames(`${prefixCls}-number-button`, `${prefixCls}-number-button-up`, {
-        [`${prefixCls}-number-button-up-disabled`]: disabled,
-        [`${prefixCls}-number-button-up-not-allowed`]: notAllowedUp
-      });
-      const downClassName = classnames(`${prefixCls}-number-button`, `${prefixCls}-number-button-down`, {
-        [`${prefixCls}-number-button-down-disabled`]: disabled,
-        [`${prefixCls}-number-button-down-not-allowed`]: notAllowedDown
-      });
-      return /*#__PURE__*/React.createElement("div", {
-        className: suffixChildrenCls
-      }, /*#__PURE__*/React.createElement("span", {
-        className: upClassName,
-        onMouseDown: notAllowedUp ? _noop : this.handleUpClick,
-        onMouseUp: this.handleMouseUp,
-        onMouseLeave: this.handleMouseLeave
-      }, /*#__PURE__*/React.createElement(IconChevronUp, {
-        size: "extra-small"
-      })), /*#__PURE__*/React.createElement("span", {
-        className: downClassName,
-        onMouseDown: notAllowedDown ? _noop : this.handleDownClick,
-        onMouseUp: this.handleMouseUp,
-        onMouseLeave: this.handleMouseLeave
-      }, /*#__PURE__*/React.createElement(IconChevronDown, {
-        size: "extra-small"
-      })));
-    };
-
-    this.renderSuffix = () => {
-      const {
-        innerButtons,
-        suffix
-      } = this.props;
-      const {
-        hovering,
-        focusing
-      } = this.state;
-
-      if (innerButtons && (hovering || focusing)) {
-        const buttons = this.renderButtons();
-        return buttons;
-      }
-
-      return suffix;
-    };
-
-    this.state = {
-      value: '',
-      number: null,
-      focusing: Boolean(props.autofocus) || false,
-      hovering: false
-    };
-    this.inputNode = null;
-    this.foundation = new InputNumberFoundation(this.adapter);
-    this.clickUpOrDown = false;
-  }
-
   get adapter() {
     var _this = this;
-
     return Object.assign(Object.assign({}, super.adapter), {
       setValue: (value, cb) => this.setState({
         value
@@ -204,41 +79,37 @@ class InputNumber extends BaseComponent {
             this.cursorAfter = this.inputNode.value.substring(this.cursorEnd);
           }
         } catch (e) {
-          console.warn(e); // Fix error in Chrome:
+          console.warn(e);
+          // Fix error in Chrome:
           // Failed to read the 'selectionStart' property from 'HTMLInputElement'
           // http://stackoverflow.com/q/21177489/3040605
         }
       },
+
       restoreByAfter: str => {
         if (isNullOrUndefined(str)) {
           return false;
         }
-
         const fullStr = this.inputNode.value;
         const index = fullStr.lastIndexOf(str);
-
         if (index === -1) {
           return false;
         }
-
         if (index + str.length === fullStr.length) {
           this.adapter.fixCaret(index, index);
           return true;
         }
-
         return false;
       },
       restoreCursor: function () {
         let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.cursorAfter;
-
         if (isNullOrUndefined(str)) {
           return false;
-        } // For loop from full str to the str with last char to map. e.g. 123
+        }
+        // For loop from full str to the str with last char to map. e.g. 123
         // -> 123
         // -> 23
         // -> 3
-
-
         return Array.prototype.some.call(str, (_, start) => {
           const partStr = str.substring(start);
           return _this.adapter.restoreByAfter(partStr);
@@ -248,15 +119,14 @@ class InputNumber extends BaseComponent {
         if (start === undefined || end === undefined || !this.inputNode || !this.inputNode.value) {
           return;
         }
-
         try {
           const currentStart = this.inputNode.selectionStart;
           const currentEnd = this.inputNode.selectionEnd;
-
           if (start !== currentStart || end !== currentEnd) {
             this.inputNode.setSelectionRange(start, end);
           }
-        } catch (e) {// Fix error in Chrome:
+        } catch (e) {
+          // Fix error in Chrome:
           // Failed to read the 'selectionStart' property from 'HTMLInputElement'
           // http://stackoverflow.com/q/21177489/3040605
         }
@@ -269,7 +139,100 @@ class InputNumber extends BaseComponent {
       }
     });
   }
-
+  constructor(props) {
+    super(props);
+    this.setInputRef = node => {
+      const {
+        forwardedRef
+      } = this.props;
+      this.inputNode = node;
+      if (forwardedRef && typeof forwardedRef === 'object') {
+        forwardedRef.current = node;
+      } else if (typeof forwardedRef === 'function') {
+        forwardedRef(node);
+      }
+    };
+    this.handleInputFocus = e => this.foundation.handleInputFocus(e);
+    this.handleInputChange = (value, event) => this.foundation.handleInputChange(value, event);
+    this.handleInputBlur = e => this.foundation.handleInputBlur(e);
+    this.handleInputKeyDown = e => this.foundation.handleInputKeyDown(e);
+    this.handleInputMouseEnter = e => this.foundation.handleInputMouseEnter(e);
+    this.handleInputMouseLeave = e => this.foundation.handleInputMouseLeave(e);
+    this.handleInputMouseMove = e => this.foundation.handleInputMouseMove(e);
+    this.handleUpClick = e => this.foundation.handleUpClick(e);
+    this.handleDownClick = e => this.foundation.handleDownClick(e);
+    this.handleMouseUp = e => this.foundation.handleMouseUp(e);
+    this.handleMouseLeave = e => this.foundation.handleMouseLeave(e);
+    this.renderButtons = () => {
+      const {
+        prefixCls,
+        disabled,
+        innerButtons,
+        max,
+        min
+      } = this.props;
+      const {
+        hovering,
+        focusing,
+        number
+      } = this.state;
+      const notAllowedUp = disabled ? disabled : number === max;
+      const notAllowedDown = disabled ? disabled : number === min;
+      const suffixChildrenCls = classnames(`${prefixCls}-number-suffix-btns`, {
+        [`${prefixCls}-number-suffix-btns-inner`]: innerButtons,
+        [`${prefixCls}-number-suffix-btns-inner-hover`]: innerButtons && hovering && !focusing
+      });
+      const upClassName = classnames(`${prefixCls}-number-button`, `${prefixCls}-number-button-up`, {
+        [`${prefixCls}-number-button-up-disabled`]: disabled,
+        [`${prefixCls}-number-button-up-not-allowed`]: notAllowedUp
+      });
+      const downClassName = classnames(`${prefixCls}-number-button`, `${prefixCls}-number-button-down`, {
+        [`${prefixCls}-number-button-down-disabled`]: disabled,
+        [`${prefixCls}-number-button-down-not-allowed`]: notAllowedDown
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: suffixChildrenCls
+      }, /*#__PURE__*/React.createElement("span", {
+        className: upClassName,
+        onMouseDown: notAllowedUp ? _noop : this.handleUpClick,
+        onMouseUp: this.handleMouseUp,
+        onMouseLeave: this.handleMouseLeave
+      }, /*#__PURE__*/React.createElement(IconChevronUp, {
+        size: "extra-small"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: downClassName,
+        onMouseDown: notAllowedDown ? _noop : this.handleDownClick,
+        onMouseUp: this.handleMouseUp,
+        onMouseLeave: this.handleMouseLeave
+      }, /*#__PURE__*/React.createElement(IconChevronDown, {
+        size: "extra-small"
+      })));
+    };
+    this.renderSuffix = () => {
+      const {
+        innerButtons,
+        suffix
+      } = this.props;
+      const {
+        hovering,
+        focusing
+      } = this.state;
+      if (innerButtons && (hovering || focusing)) {
+        const buttons = this.renderButtons();
+        return buttons;
+      }
+      return suffix;
+    };
+    this.state = {
+      value: '',
+      number: null,
+      focusing: Boolean(props.autofocus) || false,
+      hovering: false
+    };
+    this.inputNode = null;
+    this.foundation = new InputNumberFoundation(this.adapter);
+    this.clickUpOrDown = false;
+  }
   componentDidUpdate(prevProps) {
     const {
       value,
@@ -283,7 +246,6 @@ class InputNumber extends BaseComponent {
      * To determine whether the front and back are equal
      * NaN need to check whether both are NaN
      */
-
     if (value !== prevProps.value && !isBothNaN(value, prevProps.value)) {
       if (isNullOrUndefined(value) || value === '') {
         newValue = '';
@@ -293,11 +255,9 @@ class InputNumber extends BaseComponent {
         });
       } else {
         let valueStr = value;
-
         if (typeof value === 'number') {
           valueStr = value.toString();
         }
-
         const parsedNum = this.foundation.doParse(valueStr, false, true, true);
         const toNum = typeof value === 'number' ? value : this.foundation.doParse(valueStr, false, false, false);
         /**
@@ -331,7 +291,6 @@ class InputNumber extends BaseComponent {
          * 2. Keyboard click on the up and down button (input value is changed according to the controlled value)
          * 3.keepFocus + mouse click on the up and down button (input value is changed according to the controlled value)
          */
-
         if (focusing) {
           if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
             const obj = {
@@ -341,12 +300,10 @@ class InputNumber extends BaseComponent {
              * If you are clicking the button, it will automatically format once
              * We need to set the status to false after trigger focus event
              */
-
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);
               newValue = obj.value;
             }
-
             this.foundation.updateStates(obj, () => this.adapter.restoreCursor());
           } else if (!_isNaN(toNum)) {
             // Update input content when controlled input is illegal and not NaN
@@ -376,16 +333,13 @@ class InputNumber extends BaseComponent {
           });
         }
       }
-
       if (newValue && _isString(newValue) && newValue !== String(this.props.value)) {
         this.foundation.notifyChange(newValue, null);
       }
     }
-
     if (!this.clickUpOrDown) {
       return;
     }
-
     if (this.props.keepFocus && this.state.focusing) {
       if (document.activeElement !== this.inputNode) {
         this.inputNode.focus({
@@ -394,36 +348,34 @@ class InputNumber extends BaseComponent {
       }
     }
   }
-
   render() {
     const _a = this.props,
-          {
-      disabled,
-      className,
-      prefixCls,
-      min,
-      max,
-      step,
-      shiftStep,
-      precision,
-      formatter,
-      parser,
-      forwardedRef,
-      onUpClick,
-      onDownClick,
-      pressInterval,
-      pressTimeout,
-      suffix,
-      size,
-      hideButtons,
-      innerButtons,
-      style,
-      onNumberChange,
-      keepFocus,
-      defaultValue
-    } = _a,
-          rest = __rest(_a, ["disabled", "className", "prefixCls", "min", "max", "step", "shiftStep", "precision", "formatter", "parser", "forwardedRef", "onUpClick", "onDownClick", "pressInterval", "pressTimeout", "suffix", "size", "hideButtons", "innerButtons", "style", "onNumberChange", "keepFocus", "defaultValue"]);
-
+      {
+        disabled,
+        className,
+        prefixCls,
+        min,
+        max,
+        step,
+        shiftStep,
+        precision,
+        formatter,
+        parser,
+        forwardedRef,
+        onUpClick,
+        onDownClick,
+        pressInterval,
+        pressTimeout,
+        suffix,
+        size,
+        hideButtons,
+        innerButtons,
+        style,
+        onNumberChange,
+        keepFocus,
+        defaultValue
+      } = _a,
+      rest = __rest(_a, ["disabled", "className", "prefixCls", "min", "max", "step", "shiftStep", "precision", "formatter", "parser", "forwardedRef", "onUpClick", "onDownClick", "pressInterval", "pressTimeout", "suffix", "size", "hideButtons", "innerButtons", "style", "onNumberChange", "keepFocus", "defaultValue"]);
     const {
       value,
       number
@@ -436,19 +388,15 @@ class InputNumber extends BaseComponent {
       'aria-disabled': disabled,
       step
     };
-
     if (number) {
       ariaProps['aria-valuenow'] = number;
     }
-
     if (max !== Infinity) {
       ariaProps['aria-valuemax'] = max;
     }
-
     if (min !== -Infinity) {
       ariaProps['aria-valuemin'] = min;
     }
-
     const input = /*#__PURE__*/React.createElement("div", {
       className: inputNumberCls,
       style: style,
@@ -470,9 +418,7 @@ class InputNumber extends BaseComponent {
     })), hideButtons || innerButtons ? null : buttons);
     return input;
   }
-
 }
-
 InputNumber.propTypes = {
   'aria-label': PropTypes.string,
   'aria-labelledby': PropTypes.string,

package/lib/es/layout/Sider.js

@@ -1,14 +1,11 @@
 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;
 };
-
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -24,7 +21,6 @@ const responsiveMap = {
   xl: '(min-width: 1200px)',
   xxl: '(min-width: 1600px)'
 };
-
 const generateId = (() => {
   let i = 0;
   return () => {
@@ -32,9 +28,7 @@ const generateId = (() => {
     return `${cssClasses.PREFIX}-sider-${i}`;
   };
 })();
-
 const bpt = strings.BREAKPOINT;
-
 class Sider extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -42,7 +36,6 @@ class Sider extends React.PureComponent {
     this.uniqueId = '';
     this.uniqueId = generateId();
   }
-
   componentDidMount() {
     const {
       breakpoint
@@ -57,40 +50,33 @@ class Sider extends React.PureComponent {
       }
     }));
     this.unRegisters = unRegisters;
-
     if (this.context.siderHook) {
       this.context.siderHook.addSider(this.uniqueId);
     }
   }
-
   componentWillUnmount() {
     this.unRegisters.forEach(unRegister => unRegister());
-
     if (this.context.siderHook) {
       this.context.siderHook.removeSider(this.uniqueId);
     }
   }
-
   responsiveHandler(screen, matches) {
     const {
       onBreakpoint
     } = this.props;
-
     if (onBreakpoint) {
       onBreakpoint(screen, matches);
     }
   }
-
   render() {
     const _a = this.props,
-          {
-      prefixCls,
-      className,
-      children,
-      style
-    } = _a,
-          others = __rest(_a, ["prefixCls", "className", "children", "style"]);
-
+      {
+        prefixCls,
+        className,
+        children,
+        style
+      } = _a,
+      others = __rest(_a, ["prefixCls", "className", "children", "style"]);
     const classString = cls(className, {
       [`${prefixCls}-sider`]: true
     });
@@ -102,9 +88,7 @@ class Sider extends React.PureComponent {
       className: `${prefixCls}-sider-children`
     }, children));
   }
-
 }
-
 Sider.propTypes = {
   prefixCls: PropTypes.string,
   style: PropTypes.object,

package/lib/es/layout/index.js

@@ -1,14 +1,11 @@
 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;
 };
-
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -22,7 +19,6 @@ const htmlTag = {
   Content: 'main',
   Layout: 'section'
 };
-
 function generator(type) {
   const tagName = htmlTag[type];
   const typeName = type.toLowerCase();
@@ -35,30 +31,25 @@ function generator(type) {
         tagName: tagName
       }, this.props));
     }
-
   };
 }
-
 class Basic extends React.PureComponent {
   render() {
     const _a = this.props,
-          {
-      prefixCls,
-      type,
-      className,
-      children,
-      tagName
-    } = _a,
-          others = __rest(_a, ["prefixCls", "type", "className", "children", "tagName"]);
-
+      {
+        prefixCls,
+        type,
+        className,
+        children,
+        tagName
+      } = _a,
+      others = __rest(_a, ["prefixCls", "type", "className", "children", "tagName"]);
     const classString = cls(className, `${prefixCls}-${type}`);
     return /*#__PURE__*/React.createElement(tagName, Object.assign({
       className: classString
     }, others), children);
   }
-
 }
-
 Basic.propTypes = {
   prefixCls: PropTypes.string,
   style: PropTypes.object,
@@ -70,7 +61,6 @@ Basic.defaultProps = {
 const Header = generator('Header')(Basic);
 const Footer = generator('Footer')(Basic);
 const Content = generator('Content')(Basic);
-
 class Layout extends React.Component {
   constructor(props) {
     super(props);
@@ -78,7 +68,6 @@ class Layout extends React.Component {
       siders: []
     };
   }
-
   getSiderHook() {
     return {
       addSider: id => {
@@ -93,18 +82,16 @@ class Layout extends React.Component {
       }
     };
   }
-
   render() {
     const _a = this.props,
-          {
-      prefixCls,
-      className,
-      children,
-      hasSider,
-      tagName
-    } = _a,
-          others = __rest(_a, ["prefixCls", "className", "children", "hasSider", "tagName"]);
-
+      {
+        prefixCls,
+        className,
+        children,
+        hasSider,
+        tagName
+      } = _a,
+      others = __rest(_a, ["prefixCls", "className", "children", "hasSider", "tagName"]);
     const {
       siders
     } = this.state;
@@ -122,9 +109,7 @@ class Layout extends React.Component {
       className: classString
     }, others), children));
   }
-
 }
-
 Layout.propTypes = {
   prefixCls: PropTypes.string,
   style: PropTypes.object,