@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/inputNumber/index.js

@@ -0,0 +1,528 @@
+"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.default = exports.InputNumber = void 0;
+
+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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _lastIndexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/last-index-of"));
+
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _input = _interopRequireDefault(require("../input"));
+
+var _object = require("@douyinfe/semi-foundation/lib/cjs/utils/object");
+
+var _isNullOrUndefined = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isNullOrUndefined"));
+
+var _isBothNaN = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isBothNaN"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/inputNumber/foundation"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/inputNumber/constants");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+require("@douyinfe/semi-foundation/lib/cjs/inputNumber/inputNumber.css");
+
+var _lodashEs = require("lodash-es");
+
+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 @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 */
+
+
+class InputNumber extends _baseComponent.default {
+  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 = (0, _classnames.default)("".concat(prefixCls, "-number-suffix-btns"), {
+        ["".concat(prefixCls, "-number-suffix-btns-inner")]: innerButtons,
+        ["".concat(prefixCls, "-number-suffix-btns-inner-hover")]: innerButtons && hovering && !focusing
+      });
+      const upClassName = (0, _classnames.default)("".concat(prefixCls, "-number-button"), "".concat(prefixCls, "-number-button-up"), {
+        ["".concat(prefixCls, "-number-button-up-disabled")]: disabled,
+        ["".concat(prefixCls, "-number-button-up-not-allowed")]: notAllowedUp
+      });
+      const downClassName = (0, _classnames.default)("".concat(prefixCls, "-number-button"), "".concat(prefixCls, "-number-button-down"), {
+        ["".concat(prefixCls, "-number-button-down-disabled")]: disabled,
+        ["".concat(prefixCls, "-number-button-down-not-allowed")]: notAllowedDown
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: suffixChildrenCls
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: upClassName,
+        onMouseDown: notAllowedUp ? _lodashEs.noop : this.handleUpClick,
+        onMouseUp: this.handleMouseUp,
+        onMouseLeave: this.handleMouseLeave
+      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronUp, {
+        size: "extra-small"
+      })), /*#__PURE__*/_react.default.createElement("span", {
+        className: downClassName,
+        onMouseDown: notAllowedDown ? _lodashEs.noop : this.handleDownClick,
+        onMouseUp: this.handleMouseUp,
+        onMouseLeave: this.handleMouseLeave
+      }, /*#__PURE__*/_react.default.createElement(_semiIcons.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 _foundation.default(this.adapter);
+    this.clickUpOrDown = false;
+  }
+
+  get adapter() {
+    var _this = this;
+
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      setValue: (value, cb) => this.setState({
+        value
+      }, cb),
+      setNumber: (number, cb) => this.setState({
+        number
+      }, cb),
+      setFocusing: (focusing, cb) => this.setState({
+        focusing
+      }, cb),
+      setHovering: hovering => this.setState({
+        hovering
+      }),
+      notifyChange: function () {
+        return _this.props.onChange(...arguments);
+      },
+      notifyNumberChange: function () {
+        return _this.props.onNumberChange(...arguments);
+      },
+      notifyBlur: e => this.props.onBlur(e),
+      notifyFocus: e => this.props.onFocus(e),
+      notifyUpClick: (value, e) => this.props.onUpClick(value, e),
+      notifyDownClick: (value, e) => this.props.onDownClick(value, e),
+      notifyKeyDown: e => this.props.onKeyDown(e),
+      registerGlobalEvent: (eventName, handler) => {
+        if (eventName && typeof handler === 'function') {
+          this.adapter.unregisterGlobalEvent(eventName);
+          this.adapter.setCache(eventName, handler);
+          document.addEventListener(eventName, handler);
+        }
+      },
+      unregisterGlobalEvent: eventName => {
+        if (eventName) {
+          const handler = this.adapter.getCache(eventName);
+          document.removeEventListener(eventName, handler);
+          this.adapter.setCache(eventName, null);
+        }
+      },
+      recordCursorPosition: () => {
+        // Record position
+        try {
+          if (this.inputNode) {
+            this.cursorStart = this.inputNode.selectionStart;
+            this.cursorEnd = this.inputNode.selectionEnd;
+            this.currentValue = this.inputNode.value;
+            this.cursorBefore = this.inputNode.value.substring(0, this.cursorStart);
+            this.cursorAfter = this.inputNode.value.substring(this.cursorEnd);
+          }
+        } catch (e) {
+          console.warn(e); // Fix error in Chrome:
+          // Failed to read the 'selectionStart' property from 'HTMLInputElement'
+          // http://stackoverflow.com/q/21177489/3040605
+        }
+      },
+      restoreByAfter: str => {
+        if ((0, _isNullOrUndefined.default)(str)) {
+          return false;
+        }
+
+        const fullStr = this.inputNode.value;
+        const index = (0, _lastIndexOf.default)(fullStr).call(fullStr, 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 ((0, _isNullOrUndefined.default)(str)) {
+          return false;
+        } // For loop from full str to the str with last char to map. e.g. 123
+        // -> 123
+        // -> 23
+        // -> 3
+
+
+        return (0, _some.default)(Array.prototype).call(str, (_, start) => {
+          const partStr = str.substring(start);
+          return _this.adapter.restoreByAfter(partStr);
+        });
+      },
+      fixCaret: (start, end) => {
+        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:
+          // Failed to read the 'selectionStart' property from 'HTMLInputElement'
+          // http://stackoverflow.com/q/21177489/3040605
+        }
+      },
+      setClickUpOrDown: value => {
+        this.clickUpOrDown = value;
+      }
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      value
+    } = this.props;
+    const {
+      focusing
+    } = this.state;
+    /**
+     * To determine whether the front and back are equal
+     * NaN need to check whether both are NaN
+     */
+
+    if (value !== prevProps.value && !(0, _isBothNaN.default)(value, prevProps.value)) {
+      if ((0, _isNullOrUndefined.default)(value) || value === '') {
+        this.setState({
+          value: '',
+          number: null
+        });
+      } 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);
+        /**
+         * focusing 状态为输入状态，输入状态的受控值要特殊处理
+         * 如：
+         *  - 输入合法值
+         *      123 => input value 也应该是 123，同时需要设置 number 为 123
+         *  - 输入非法值，只设置 input value，不设置非法的number
+         *      abc => input value 这时是 abc，但失焦后会进行格式化
+         *      100（超出范围） => input value 应该是 100，但不设置 number
+         *
+         * 保持输入态有三种方式
+         * 1. 输入框输入
+         *  - 输入可以解析为合法数字，input value根据输入值确定，失焦时更新input value
+         *  - 输入不可解析为合法数字，进行格式化后显示在input框
+         * 2. 键盘点击上下按钮（input value根据受控值进行更改）
+         * 3. keepFocus+鼠标点击上下按钮（input value根据受控值进行更改）
+         *
+         * The focusing state is the input state, and the controlled value of the input state needs special treatment
+         * For example:
+         *  - input legal value
+         *      123 = > input value should also be 123, and the number should be set to 123
+         *  - input illegal value, only set the input value, do not set the illegal number
+         *      abc = > input value This is abc at this time, but it will be formatted after being out of focus
+         *      100 (out of range) = > input value should be 100, but no number
+         *
+         * There are three ways to maintain the input state
+         * 1. input box input
+         *  - input can be resolved into legal numbers, input value is determined according to the input value, and input value is updated when out of focus
+         *  - input cannot be resolved into legal numbers, and it will be displayed in the input box after formatting
+         * 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 = {
+              number: parsedNum
+            }; // Updates input when a button is clicked
+
+            if (this.clickUpOrDown) {
+              obj.value = this.foundation.doFormat(valueStr, true);
+            }
+
+            this.setState(obj, () => this.adapter.restoreCursor());
+          } else if (!(0, _lodashEs.isNaN)(toNum)) {
+            // Update input content when controlled input is illegal and not NaN
+            this.setState({
+              value: this.foundation.doFormat(toNum, false)
+            });
+          } else {
+            // Update input content when controlled input NaN
+            this.setState({
+              value: this.foundation.doFormat(valueStr, false)
+            });
+          }
+        } else if (this.foundation.isValidNumber(parsedNum)) {
+          this.setState({
+            number: parsedNum,
+            value: this.foundation.doFormat(parsedNum)
+          });
+        } else {
+          // Invalid digital analog blurring effect instead of controlled failure
+          this.setState({
+            number: null,
+            value: ''
+          });
+        }
+      }
+    }
+
+    if (!this.clickUpOrDown) {
+      return;
+    }
+
+    if (this.props.keepFocus && this.state.focusing) {
+      if (document.activeElement !== this.inputNode) {
+        this.inputNode.focus();
+      }
+    }
+  }
+
+  render() {
+    var _context;
+
+    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
+    } = _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"]);
+
+    const {
+      value
+    } = this.state;
+    const inputNumberCls = (0, _classnames.default)(className, "".concat(prefixCls, "-number"), {
+      [(0, _concat.default)(_context = "".concat(prefixCls, "-number-size-")).call(_context, size)]: size
+    });
+    const buttons = this.renderButtons();
+
+    const input = /*#__PURE__*/_react.default.createElement("div", {
+      className: inputNumberCls,
+      style: style,
+      onMouseMove: e => this.handleInputMouseMove(e),
+      onMouseEnter: e => this.handleInputMouseEnter(e),
+      onMouseLeave: e => this.handleInputMouseLeave(e)
+    }, /*#__PURE__*/_react.default.createElement(_input.default, (0, _assign.default)({}, rest, {
+      size: size,
+      disabled: disabled,
+      ref: this.setInputRef,
+      value: value,
+      onFocus: this.handleInputFocus,
+      onChange: this.handleInputChange,
+      onBlur: this.handleInputBlur,
+      onKeyDown: this.handleInputKeyDown,
+      suffix: this.renderSuffix()
+    })), hideButtons || innerButtons ? null : buttons);
+
+    return input;
+  }
+
+}
+
+exports.InputNumber = InputNumber;
+InputNumber.propTypes = {
+  autofocus: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  disabled: _propTypes.default.bool,
+  formatter: _propTypes.default.func,
+  forwardedRef: _propTypes.default.any,
+  hideButtons: _propTypes.default.bool,
+  innerButtons: _propTypes.default.bool,
+  insetLabel: _propTypes.default.node,
+  keepFocus: _propTypes.default.bool,
+  max: _propTypes.default.number,
+  min: _propTypes.default.number,
+  parser: _propTypes.default.func,
+  precision: _propTypes.default.number,
+  prefixCls: _propTypes.default.string,
+  pressInterval: _propTypes.default.number,
+  pressTimeout: _propTypes.default.number,
+  shiftStep: _propTypes.default.number,
+  step: _propTypes.default.number,
+  style: _propTypes.default.object,
+  suffix: _propTypes.default.any,
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  onBlur: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  onDownClick: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  onNumberChange: _propTypes.default.func,
+  onUpClick: _propTypes.default.func
+};
+InputNumber.defaultProps = {
+  disabled: false,
+  forwardedRef: _lodashEs.noop,
+  innerButtons: false,
+  keepFocus: false,
+  max: Infinity,
+  min: -Infinity,
+  prefixCls: _constants.cssClasses.PREFIX,
+  pressInterval: _constants.numbers.DEFAULT_PRESS_TIMEOUT,
+  pressTimeout: _constants.numbers.DEFAULT_PRESS_TIMEOUT,
+  shiftStep: _constants.numbers.DEFAULT_SHIFT_STEP,
+  size: _constants.strings.DEFAULT_SIZE,
+  step: _constants.numbers.DEFAULT_STEP,
+  onBlur: _lodashEs.noop,
+  onChange: _lodashEs.noop,
+  onDownClick: _lodashEs.noop,
+  onFocus: _lodashEs.noop,
+  onKeyDown: _lodashEs.noop,
+  onNumberChange: _lodashEs.noop,
+  onUpClick: _lodashEs.noop
+};
+
+var _default = (0, _object.forwardStatics)( /*#__PURE__*/_react.default.forwardRef(function SemiInputNumber(props, ref) {
+  return /*#__PURE__*/_react.default.createElement(InputNumber, (0, _assign.default)({}, props, {
+    forwardedRef: ref
+  }));
+}), InputNumber);
+
+exports.default = _default;

package/lib/cjs/layout/Sider.d.ts

@@ -0,0 +1,38 @@
+import React, { CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+export interface ResponsiveMap {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+}
+export interface SiderProps {
+    prefixCls?: string;
+    style?: CSSProperties;
+    className?: string;
+    breakpoint?: Array<keyof ResponsiveMap>;
+    onBreakpoint?: (screen: keyof ResponsiveMap, match: boolean) => void;
+}
+declare class Sider extends React.PureComponent<SiderProps> {
+    static propTypes: {
+        prefixCls: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        breakpoint: PropTypes.Requireable<string[]>;
+        onBreakpoint: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        prefixCls: string;
+    };
+    static contextType: React.Context<import("./layout-context").ContextType>;
+    unRegisters: Array<() => void>;
+    uniqueId: string;
+    constructor(props: SiderProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    responsiveHandler(screen: keyof ResponsiveMap, matches: boolean): void;
+    render(): JSX.Element;
+}
+export default Sider;