@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-alpha.2

package/lib/es/popover/index.js

@@ -21,17 +21,11 @@ import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/lib/es/p
 import Tooltip from '../tooltip/index';
 import Arrow from './Arrow';
 import '@douyinfe/semi-foundation/lib/es/popover/popover.css';
+import { noop } from 'lodash-es';
 const positionSet = strings.POSITION_SET;
 const triggerSet = strings.TRIGGER_SET;
 
 class Popover extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      popConfirmVisible: false
-    };
-  }
-
   renderPopCard() {
     const {
       content,
@@ -107,6 +101,7 @@ Popover.propTypes = {
   trigger: PropTypes.oneOf(triggerSet).isRequired,
   contentClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   onVisibleChange: PropTypes.func,
+  onClickOutSide: PropTypes.func,
   style: PropTypes.object,
   spacing: PropTypes.number,
   zIndex: PropTypes.number,
@@ -130,6 +125,7 @@ Popover.defaultProps = {
   cancelText: 'No',
   okText: 'Yes',
   position: 'bottom',
-  prefixCls: cssClasses.PREFIX
+  prefixCls: cssClasses.PREFIX,
+  onClickOutSide: noop
 };
 export default Popover;

package/lib/es/radio/context.d.ts

@@ -7,7 +7,7 @@ export declare type RadioMode = ArrayElement<typeof strings.MODE>;
 export interface RadioContextValue {
     mode?: RadioMode;
     radioGroup?: {
-        value?: any;
+        value?: string | number;
         isButtonRadio?: any;
         disabled?: boolean;
         prefixCls?: string;

package/lib/es/radio/radio.d.ts

@@ -13,7 +13,7 @@ export declare type RadioProps = {
     autoFocus?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    value?: any;
+    value?: string | number;
     disabled?: boolean;
     prefixCls?: string;
     displayMode?: RadioDisplayMode;
@@ -59,13 +59,13 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
     constructor(props: RadioProps);
     get adapter(): RadioAdapter;
     isInGroup(): {
-        value?: any;
+        value?: string | number;
         isButtonRadio?: any;
         disabled?: boolean;
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "middle" | "large";
+        buttonSize?: "small" | "large" | "middle";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/es/radio/radio.js

@@ -1,4 +1,3 @@
-import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
@@ -6,6 +5,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import React from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
+import { noop } from 'lodash-es';
 import RadioFoundation from '@douyinfe/semi-foundation/lib/es/radio/radioFoundation';
 import { strings, radioClasses as css } from '@douyinfe/semi-foundation/lib/es/radio/constants';
 import '@douyinfe/semi-foundation/lib/es/radio/radio.css';
@@ -194,8 +194,8 @@ Radio.defaultProps = {
   defaultChecked: false,
   value: undefined,
   style: undefined,
-  onMouseEnter: _noop,
-  onMouseLeave: _noop,
+  onMouseEnter: noop,
+  onMouseLeave: noop,
   mode: '',
   type: 'default'
 };

package/lib/es/radio/radioGroup.d.ts

@@ -8,8 +8,8 @@ import { ArrayElement } from '../_base/base';
 import { RadioType } from './radio';
 import { RadioGroupButtonSize, RadioMode } from './context';
 export interface OptionItem {
-    label?: string;
-    value?: string;
+    label?: React.ReactNode;
+    value?: string | number;
     disabled?: boolean;
     extra?: React.ReactNode;
     style?: React.CSSProperties;
@@ -17,11 +17,11 @@ export interface OptionItem {
 }
 export declare type Options = string[] | Array<OptionItem>;
 export declare type RadioGroupProps = {
-    defaultValue?: any;
+    defaultValue?: string | number;
     disabled?: boolean;
     name?: string;
     options?: Options;
-    value?: any;
+    value?: string | number;
     onChange?: (event: RadioChangeEvent) => void;
     className?: string;
     style?: React.CSSProperties;
@@ -40,7 +40,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
+        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/radio/radioGroup.js

@@ -1,10 +1,10 @@
-import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { noop } from 'lodash-es';
 import { radioGroupClasses as css, strings } from '@douyinfe/semi-foundation/lib/es/radio/constants';
 import RadioGroupFoundation from '@douyinfe/semi-foundation/lib/es/radio/radioGroupFoundation';
 import BaseComponent from '../_base/baseComponent';
@@ -156,7 +156,7 @@ RadioGroup.propTypes = {
 };
 RadioGroup.defaultProps = {
   disabled: false,
-  onChange: _noop,
+  onChange: noop,
   direction: strings.DEFAULT_DIRECTION,
   mode: '',
   type: strings.TYPE_DEFAULT,

package/lib/es/radio/radioInner.js

@@ -1,4 +1,3 @@
-import _noop from "lodash/noop";
 import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import React from 'react';
@@ -9,6 +8,7 @@ import { radioClasses as css } from '@douyinfe/semi-foundation/lib/es/radio/cons
 import Context from './context';
 import classnames from 'classnames';
 import { IconRadio } from '@douyinfe/semi-icons';
+import { noop } from 'lodash-es';
 
 class RadioInner extends BaseComponent {
   constructor(props) {
@@ -111,7 +111,7 @@ RadioInner.propTypes = {
   mode: PropTypes.oneOf(['advanced', ''])
 };
 RadioInner.defaultProps = {
-  onChange: _noop,
+  onChange: noop,
   isButtonRadio: false
 };
 export default RadioInner;

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

@@ -23,7 +23,7 @@ export interface RatingProps {
     onFocus?: (e: React.FocusEvent) => void;
     onBlur?: (e: React.FocusEvent) => void;
     onKeyDown?: (e: React.KeyboardEvent) => void;
-    onClick?: (e: React.MouseEvent, index: number) => void;
+    onClick?: (e: React.MouseEvent | React.KeyboardEvent, index: number) => void;
     autoFocus?: boolean;
     size?: 'small' | 'default' | number;
     tooltips?: string[];

package/lib/es/resizeObserver/index.js

@@ -12,6 +12,7 @@ export default class ReactResizeObserver extends BaseComponent {
         // using findDOMNode for two reasons:
         // 1. cloning to insert a ref is unwieldy and not performant.
         // 2. ensure that we resolve to an actual DOM node (instead of any JSX ref instance).
+        // eslint-disable-next-line
         return findDOMNode(this.childNode || this);
       } catch (error) {
         // swallow error if findDOMNode is run on unmounted component.
@@ -47,8 +48,7 @@ export default class ReactResizeObserver extends BaseComponent {
     }
   }
 
-  observeElement() {
-    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  observeElement(force = false) {
     const element = this.getElement();
 
     if (!(element && element instanceof Element)) {

package/lib/es/scrollList/scrollItem.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="lodash" />
 import React from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Item, ScrollItemAdapter } from '@douyinfe/semi-foundation/lib/es/scrollList/itemFoundation';
 import { Motion } from '../_base/base';
-export interface ScrollItemProps {
+declare type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
+export interface ScrollItemProps<T extends Item> {
     mode?: string;
     cycled?: boolean;
-    list?: Item[];
+    list?: T[];
     selectedIndex?: number;
-    onSelect?: (data: Item) => void;
+    onSelect?: (data: T) => void;
     transform?: (value: any, text: string) => string;
     className?: string;
     motion?: Motion;
@@ -20,7 +20,7 @@ export interface ScrollItemState {
     prependCount: number;
     appendCount: number;
 }
-export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollItemState> {
+export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItemProps<T>, ScrollItemState> {
     static propTypes: {
         mode: PropTypes.Requireable<string>;
         cycled: PropTypes.Requireable<boolean>;
@@ -36,7 +36,7 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
     static defaultProps: {
         selectedIndex: number;
         motion: boolean;
-        list: Item[];
+        list: readonly [];
         onSelect: (...args: any[]) => void;
         cycled: boolean;
         mode: string;
@@ -48,12 +48,12 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
     selector: unknown;
     scrollAnimation: any;
     scrolling: boolean;
-    throttledAdjustList: import("lodash").DebouncedFunc<(e: any, nearestNode: any) => void>;
-    debouncedSelect: import("lodash").DebouncedFunc<(e: any, nearestNode: any) => void>;
+    throttledAdjustList: DebounceSelectFn;
+    debouncedSelect: DebounceSelectFn;
     constructor(props?: {});
-    get adapter(): ScrollItemAdapter<ScrollItemProps, ScrollItemState>;
+    get adapter(): ScrollItemAdapter<ScrollItemProps<T>, ScrollItemState, T>;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: ScrollItemProps): void;
+    componentDidUpdate(prevProps: ScrollItemProps<T>): void;
     _cacheNode: (name: string, node: Element) => Element;
     _cacheSelectedNode: (selectedNode: Element) => Element;
     _cacheWillSelectNode: (node: Element) => Element;
@@ -74,7 +74,7 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
     indexIsSame: (index1: number, index2: number) => boolean;
     isDisabledIndex: (index: number) => boolean;
     isDisabledNode: (node: Element) => boolean;
-    isDisabledData: (data: Item) => boolean;
+    isDisabledData: (data: T) => boolean;
     isWheelMode: () => boolean;
     addClassToNode: (selectedNode: Element, selectedCls?: string) => void;
     getIndexByNode: (node: Element) => number;
@@ -102,3 +102,4 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
     renderInfiniteList: () => JSX.Element;
     render(): JSX.Element;
 }
+export {};

package/lib/es/scrollList/scrollItem.js

@@ -1,10 +1,3 @@
-import _times from "lodash/times";
-import _findIndex from "lodash/findIndex";
-import _map from "lodash/map";
-import _find from "lodash/find";
-import _throttle from "lodash/throttle";
-import _debounce from "lodash/debounce";
-import _noop from "lodash/noop";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -13,6 +6,7 @@ import React from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { noop, debounce, throttle, find, map, findIndex, times } from 'lodash-es';
 import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/scrollList/constants';
 import ItemFoundation from '@douyinfe/semi-foundation/lib/es/scrollList/itemFoundation';
 import animatedScrollTo from '@douyinfe/semi-foundation/lib/es/scrollList/scrollTo';
@@ -21,20 +15,8 @@ const msPerFrame = 1000 / 60;
 const blankReg = /^\s*$/;
 const wheelMode = 'wheel';
 export default class ScrollItem extends BaseComponent {
-  constructor() {
-    var _this;
-
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(props = {}) {
     super(props);
-    _this = this;
-    this.throttledAdjustList = _throttle((e, nearestNode) => {
-      this.foundation.adjustInfiniteList(this.list, this.wrapper, nearestNode);
-    }, msPerFrame);
-    this.debouncedSelect = _debounce((e, nearestNode) => {
-      this._cacheSelectedNode(nearestNode);
-
-      this.foundation.selectNode(nearestNode, this.list);
-    }, msPerFrame * 5);
 
     this._cacheNode = (name, node) => name && node && Object.prototype.hasOwnProperty.call(this, name) && (this[name] = node);
 
@@ -55,9 +37,7 @@ export default class ScrollItem extends BaseComponent {
 
       if (isElement(node) && isElement(list)) {
         const chilren = list.children;
-
-        const index = _findIndex(chilren, node);
-
+        const index = findIndex(chilren, node);
         return index === 0;
       }
 
@@ -73,9 +53,7 @@ export default class ScrollItem extends BaseComponent {
         const {
           children
         } = list;
-
-        const index = _findIndex(children, node);
-
+        const index = findIndex(children, node);
         return index === children.length - 1;
       }
 
@@ -112,8 +90,7 @@ export default class ScrollItem extends BaseComponent {
       const listWrapper = this.list;
 
       if (isElement(node) && isElement(listWrapper)) {
-        const index = _findIndex(listWrapper.children, child => child === node);
-
+        const index = findIndex(listWrapper.children, child => child === node);
         return this.isDisabledIndex(index);
       }
 
@@ -124,20 +101,18 @@ export default class ScrollItem extends BaseComponent {
 
     this.isWheelMode = () => this.props.mode === wheelMode;
 
-    this.addClassToNode = function (selectedNode) {
-      let selectedCls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : cssClasses.SELECTED;
+    this.addClassToNode = (selectedNode, selectedCls = cssClasses.SELECTED) => {
       const {
         list
-      } = _this;
-      selectedNode = selectedNode || _this.selectedNode;
+      } = this;
+      selectedNode = selectedNode || this.selectedNode;
 
       if (isElement(selectedNode) && isElement(list)) {
         const {
           children
         } = list;
         const reg = new RegExp("\\s*".concat(selectedCls, "\\s*"), 'g');
-
-        _map(children, node => {
+        map(children, node => {
           node.className = node.className && node.className.replace(reg, ' ');
 
           if (blankReg.test(node.className)) {
@@ -153,15 +128,14 @@ export default class ScrollItem extends BaseComponent {
       }
     };
 
-    this.getIndexByNode = node => _findIndex(this.list.children, node);
+    this.getIndexByNode = node => findIndex(this.list.children, node);
 
     this.getNodeByIndex = index => {
       if (index > -1) {
-        return _find(this.list.children, (node, idx) => idx === index);
+        return find(this.list.children, (node, idx) => idx === index);
       }
 
-      const defaultSelectedNode = _find(this.list.children, child => !this.isDisabledNode(child));
-
+      const defaultSelectedNode = find(this.list.children, child => !this.isDisabledNode(child));
       return defaultSelectedNode;
     };
 
@@ -184,37 +158,31 @@ export default class ScrollItem extends BaseComponent {
       this.scrollToPos(targetTop, duration);
     };
 
-    this.scrollToPos = function (targetTop) {
-      let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : numbers.DEFAULT_SCROLL_DURATION;
+    this.scrollToPos = (targetTop, duration = numbers.DEFAULT_SCROLL_DURATION) => {
       const {
         wrapper
-      } = _this; // this.isWheelMode() && this.addClassToNode();
-
-      if (duration && _this.props.motion) {
-        if (_this.scrollAnimation) {
-          _this.scrollAnimation.destroy();
+      } = this; // this.isWheelMode() && this.addClassToNode();
 
-          _this.scrolling = false;
+      if (duration && this.props.motion) {
+        if (this.scrollAnimation) {
+          this.scrollAnimation.destroy();
+          this.scrolling = false;
         }
 
         if (wrapper.scrollTop === targetTop) {
-          if (_this.isWheelMode()) {
-            const nodeInfo = _this.foundation.getNearestNodeInfo(_this.list, _this.selector);
-
-            _this.addClassToNode(nodeInfo.nearestNode);
+          if (this.isWheelMode()) {
+            const nodeInfo = this.foundation.getNearestNodeInfo(this.list, this.selector);
+            this.addClassToNode(nodeInfo.nearestNode);
           }
         } else {
-          _this.scrollAnimation = animatedScrollTo(wrapper, targetTop, duration);
-
-          _this.scrollAnimation.on('rest', () => {
-            if (_this.isWheelMode()) {
-              const nodeInfo = _this.foundation.getNearestNodeInfo(_this.list, _this.selector);
-
-              _this.addClassToNode(nodeInfo.nearestNode);
+          this.scrollAnimation = animatedScrollTo(wrapper, targetTop, duration);
+          this.scrollAnimation.on('rest', () => {
+            if (this.isWheelMode()) {
+              const nodeInfo = this.foundation.getNearestNodeInfo(this.list, this.selector);
+              this.addClassToNode(nodeInfo.nearestNode);
             }
           });
-
-          _this.scrollAnimation.start();
+          this.scrollAnimation.start();
         }
       } else {
         wrapper.scrollTop = targetTop;
@@ -269,14 +237,13 @@ export default class ScrollItem extends BaseComponent {
 
     this.getItmHeight = itm => itm && itm.offsetHeight || numbers.DEFAULT_ITEM_HEIGHT;
 
-    this.renderItemList = function () {
-      let prefixKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    this.renderItemList = (prefixKey = '') => {
       const {
         selectedIndex,
         mode,
         transform: commonTrans,
         list
-      } = _this.props;
+      } = this.props;
       return _mapInstanceProperty(list).call(list, (item, index) => {
         const {
           transform: itemTrans
@@ -302,8 +269,8 @@ export default class ScrollItem extends BaseComponent {
 
         const events = {};
 
-        if (!_this.isWheelMode() && !item.disabled) {
-          events.onClick = () => _this.foundation.selectIndex(index, _this.list);
+        if (!this.isWheelMode() && !item.disabled) {
+          events.onClick = () => this.foundation.selectIndex(index, this.list);
         }
 
         return (
@@ -353,13 +320,13 @@ export default class ScrollItem extends BaseComponent {
         appendCount
       } = this.state;
 
-      const prependList = _reduceInstanceProperty(_context = _times(prependCount)).call(_context, (arr, num) => {
+      const prependList = _reduceInstanceProperty(_context = times(prependCount)).call(_context, (arr, num) => {
         const items = this.renderItemList("pre_".concat(num, "_"));
         arr.unshift(...items);
         return arr;
       }, []);
 
-      const appendList = _reduceInstanceProperty(_context2 = _times(appendCount)).call(_context2, (arr, num) => {
+      const appendList = _reduceInstanceProperty(_context2 = times(appendCount)).call(_context2, (arr, num) => {
         const items = this.renderItemList("app_".concat(num, "_"));
         arr.push(...items);
         return arr;
@@ -407,11 +374,17 @@ export default class ScrollItem extends BaseComponent {
     this.scrollAnimation = null; // cache if select action comes from outside
 
     this.foundation = new ItemFoundation(this.adapter);
+    this.throttledAdjustList = throttle((e, nearestNode) => {
+      this.foundation.adjustInfiniteList(this.list, this.wrapper, nearestNode);
+    }, msPerFrame);
+    this.debouncedSelect = debounce((e, nearestNode) => {
+      this._cacheSelectedNode(nearestNode);
+
+      this.foundation.selectNode(nearestNode, this.list);
+    }, msPerFrame * 5);
   }
 
   get adapter() {
-    var _this2 = this;
-
     return _Object$assign(_Object$assign({}, super.adapter), {
       setState: (states, callback) => this.setState(_Object$assign({}, states), callback),
       setPrependCount: prependCount => this.setState({
@@ -422,9 +395,7 @@ export default class ScrollItem extends BaseComponent {
       }),
       isDisabledIndex: this.isDisabledIndex,
       setSelectedNode: selectedNode => this._cacheWillSelectNode(selectedNode),
-      notifySelectItem: function () {
-        return _this2.props.onSelect(...arguments);
-      },
+      notifySelectItem: (...args) => this.props.onSelect(...args),
       scrollToCenter: this.scrollToCenter
     });
   }
@@ -527,7 +498,7 @@ ScrollItem.defaultProps = {
   motion: true,
   // transform: identity,
   list: [],
-  onSelect: _noop,
+  onSelect: noop,
   cycled: false,
   mode: wheelMode
 };

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

@@ -5,7 +5,6 @@ import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import Option, { OptionProps } from './option';
 import OptionGroup from './optionGroup';
 import '@douyinfe/semi-foundation/lib/es/select/select.css';
-import '@douyinfe/semi-foundation/lib/es/select/option.css';
 import { Position, TooltipProps } from '../tooltip';
 export { OptionProps } from './option';
 export { OptionGroupProps } from './optionGroup';