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

package/lib/cjs/rating/index.js

@@ -0,0 +1,312 @@
+"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 = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context4 = _interopRequireDefault(require("../configProvider/context"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/rating/constants");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _function = require("@douyinfe/semi-foundation/lib/cjs/utils/function");
+
+var _item = _interopRequireDefault(require("./item"));
+
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/rating/foundation"));
+
+require("@douyinfe/semi-foundation/lib/cjs/rating/rating.css");
+
+class Rating extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+    this.rate = null;
+
+    this.onHover = (event, index) => {
+      this.foundation.handleHover(event, index);
+    };
+
+    this.onMouseLeave = () => {
+      this.foundation.handleMouseLeave();
+    };
+
+    this.onClick = (event, index) => {
+      this.foundation.handleClick(event, index);
+    };
+
+    this.onFocus = e => {
+      this.foundation.handleFocus(e);
+    };
+
+    this.onBlur = e => {
+      this.foundation.handleBlur(e);
+    };
+
+    this.onKeyDown = event => {
+      const {
+        value
+      } = this.state;
+      this.foundation.handleKeyDown(event, value);
+    };
+
+    this.focus = () => {
+      const {
+        disabled
+      } = this.props;
+
+      if (!disabled) {
+        this.rate.focus();
+      }
+    };
+
+    this.blur = () => {
+      const {
+        disabled
+      } = this.props;
+
+      if (!disabled) {
+        this.rate.blur();
+      }
+    };
+
+    this.saveRef = index => node => {
+      this.stars[index] = node;
+    };
+
+    this.saveRate = node => {
+      this.rate = node;
+    };
+
+    const value = props.value === undefined ? props.defaultValue : props.value;
+    this.stars = {};
+    this.state = {
+      value,
+      focused: false,
+      hoverValue: undefined,
+      clearedValue: null
+    };
+    this.foundation = new _foundation.default(this.adapter);
+  }
+
+  static getDerivedStateFromProps(nextProps, state) {
+    if ('value' in nextProps && nextProps.value !== undefined) {
+      return (0, _assign.default)((0, _assign.default)({}, state), {
+        value: nextProps.value
+      });
+    }
+
+    return state;
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      focus: () => {
+        const {
+          disabled
+        } = this.props;
+
+        if (!disabled) {
+          this.rate.focus();
+        }
+      },
+      getStarDOM: index => {
+        const instance = this.stars && this.stars[index]; // eslint-disable-next-line react/no-find-dom-node
+
+        return _reactDom.default.findDOMNode(instance);
+      },
+      notifyHoverChange: (hoverValue, clearedValue) => {
+        const {
+          onHoverChange
+        } = this.props;
+        this.setState({
+          hoverValue,
+          clearedValue
+        });
+        onHoverChange(hoverValue);
+      },
+      updateValue: value => {
+        const {
+          onChange
+        } = this.props;
+
+        if (!('value' in this.props)) {
+          this.setState({
+            value
+          });
+        }
+
+        onChange(value);
+      },
+      clearValue: clearedValue => {
+        this.setState({
+          clearedValue
+        });
+      },
+      notifyFocus: e => {
+        const {
+          onFocus
+        } = this.props;
+        this.setState({
+          focused: true
+        });
+        onFocus && onFocus(e);
+      },
+      notifyBlur: e => {
+        const {
+          onBlur
+        } = this.props;
+        this.setState({
+          focused: false
+        });
+        onBlur && onBlur(e);
+      },
+      notifyKeyDown: e => {
+        const {
+          onKeyDown
+        } = this.props;
+        this.setState({
+          focused: false
+        });
+        onKeyDown && onKeyDown(e);
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  render() {
+    var _context, _context2;
+
+    const {
+      count,
+      allowHalf,
+      style,
+      prefixCls,
+      disabled,
+      className,
+      character,
+      tabIndex,
+      size,
+      tooltips
+    } = this.props;
+    const {
+      value,
+      hoverValue,
+      focused
+    } = this.state;
+    const itemList = (0, _map.default)(_context = [...(0, _keys.default)(_context2 = Array(count)).call(_context2)]).call(_context, ind => {
+      const content = /*#__PURE__*/_react.default.createElement(_item.default, {
+        ref: this.saveRef(ind),
+        index: ind,
+        count: count,
+        prefixCls: "".concat(prefixCls, "-star"),
+        allowHalf: allowHalf,
+        value: hoverValue === undefined ? value : hoverValue,
+        onClick: this.onClick,
+        onHover: this.onHover,
+        key: ind,
+        disabled: disabled,
+        character: character,
+        focused: focused,
+        size: size
+      });
+
+      if (tooltips) {
+        var _context3;
+
+        const text = tooltips[ind] ? tooltips[ind] : '';
+        const showTips = hoverValue - 1 === ind;
+        return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+          visible: showTips,
+          trigger: "custom",
+          content: text,
+          key: (0, _concat.default)(_context3 = "".concat(ind, "-")).call(_context3, showTips)
+        }, content);
+      }
+
+      return content;
+    });
+    const listCls = (0, _classnames.default)(prefixCls, {
+      ["".concat(prefixCls, "-disabled")]: disabled
+    }, className);
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      className: listCls,
+      style: style,
+      onMouseLeave: disabled ? null : this.onMouseLeave,
+      tabIndex: disabled ? -1 : tabIndex,
+      onFocus: disabled ? null : this.onFocus,
+      onBlur: disabled ? null : this.onBlur,
+      onKeyDown: disabled ? null : this.onKeyDown,
+      ref: this.saveRate,
+      role: "radiogroup"
+    }, itemList);
+  }
+
+}
+
+exports.default = Rating;
+Rating.contextType = _context4.default;
+Rating.propTypes = {
+  disabled: _propTypes.default.bool,
+  value: _propTypes.default.number,
+  defaultValue: _propTypes.default.number,
+  count: _propTypes.default.number,
+  allowHalf: _propTypes.default.bool,
+  allowClear: _propTypes.default.bool,
+  style: _propTypes.default.object,
+  prefixCls: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onHoverChange: _propTypes.default.func,
+  className: _propTypes.default.string,
+  character: _propTypes.default.node,
+  tabIndex: _propTypes.default.number,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  autoFocus: _propTypes.default.bool,
+  size: _propTypes.default.oneOfType([_propTypes.default.oneOf(_constants.strings.SIZE_SET), _propTypes.default.number]),
+  tooltips: _propTypes.default.arrayOf(_propTypes.default.string)
+};
+Rating.defaultProps = {
+  defaultValue: 0,
+  count: 5,
+  allowHalf: false,
+  allowClear: true,
+  style: {},
+  prefixCls: _constants.cssClasses.PREFIX,
+  onChange: _function.noop,
+  onHoverChange: _function.noop,
+  tabIndex: 0,
+  size: 'default'
+};

package/lib/cjs/rating/item.d.ts

@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { strings } from '@douyinfe/semi-foundation/lib/cjs/rating/constants';
+import '@douyinfe/semi-foundation/lib/cjs/rating/rating.css';
+declare type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+export interface RatingItemProps {
+    value: number;
+    index: number;
+    prefixCls: string;
+    allowHalf: boolean;
+    onHover: (e: React.MouseEvent, index: number) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent, index: number) => void;
+    character: React.ReactNode;
+    focused: boolean;
+    disabled: boolean;
+    count: number;
+    size: number | ArrayElement<typeof strings.SIZE_SET>;
+}
+export default class Item extends PureComponent<RatingItemProps> {
+    static propTypes: {
+        value: PropTypes.Requireable<number>;
+        index: PropTypes.Requireable<number>;
+        prefixCls: PropTypes.Requireable<string>;
+        allowHalf: PropTypes.Requireable<boolean>;
+        onHover: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        character: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        focused: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        count: PropTypes.Requireable<number>;
+        size: PropTypes.Requireable<number | "default" | "small">;
+    };
+    onHover: React.MouseEventHandler;
+    onClick: React.MouseEventHandler;
+    onKeyDown: React.KeyboardEventHandler;
+    render(): JSX.Element;
+}
+export {};

package/lib/cjs/rating/item.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/rating/constants");
+
+require("@douyinfe/semi-foundation/lib/cjs/rating/rating.css");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+class Item extends _react.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    this.onHover = e => {
+      const {
+        onHover,
+        index
+      } = this.props;
+      onHover(e, index);
+    };
+
+    this.onClick = e => {
+      const {
+        onClick,
+        index
+      } = this.props;
+      onClick(e, index);
+    };
+
+    this.onKeyDown = e => {
+      const {
+        onClick,
+        index
+      } = this.props;
+
+      if (e.keyCode === 13) {
+        onClick(e, index);
+      }
+    };
+  }
+
+  render() {
+    var _context;
+
+    const {
+      index,
+      prefixCls,
+      character,
+      count,
+      value,
+      disabled,
+      allowHalf,
+      focused,
+      size
+    } = this.props;
+    const starValue = index + 1;
+    const diff = starValue - value;
+    const isFocused = value === 0 && index === 0 && focused; // const isHalf = allowHalf && value + 0.5 === starValue;
+
+    const isHalf = allowHalf && diff < 1 && diff > 0;
+    const firstWidth = isHalf ? 1 - diff : 0.5;
+    const isFull = starValue <= value;
+    const isCustomSize = typeof size === 'number';
+    const starCls = (0, _classnames.default)(prefixCls, {
+      ["".concat(prefixCls, "-focused")]: isFocused,
+      ["".concat(prefixCls, "-half")]: isHalf,
+      ["".concat(prefixCls, "-full")]: isFull,
+      [(0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, size)]: !isCustomSize
+    });
+    const sizeStyle = isCustomSize ? {
+      width: size,
+      height: size,
+      fontSize: size
+    } : {};
+    const iconSize = size === 'small' ? 'default' : 'extra-large';
+    const content = character ? character : /*#__PURE__*/_react.default.createElement(_semiIcons.IconStar, {
+      size: iconSize
+    });
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: starCls,
+      style: (0, _assign.default)({}, sizeStyle)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onClick: disabled ? null : this.onClick,
+      onKeyDown: disabled ? null : this.onKeyDown,
+      onMouseMove: disabled ? null : this.onHover,
+      role: "radio",
+      "aria-checked": value > index ? 'true' : 'false',
+      "aria-posinset": index + 1,
+      "aria-setsize": count,
+      tabIndex: 0
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-first"),
+      style: {
+        width: "".concat(firstWidth * 100, "%")
+      }
+    }, content), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-second")
+    }, content)));
+  }
+
+}
+
+exports.default = Item;
+Item.propTypes = {
+  value: _propTypes.default.number,
+  index: _propTypes.default.number,
+  prefixCls: _propTypes.default.string,
+  allowHalf: _propTypes.default.bool,
+  onHover: _propTypes.default.func,
+  onClick: _propTypes.default.func,
+  character: _propTypes.default.node,
+  focused: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  count: _propTypes.default.number,
+  size: _propTypes.default.oneOfType([_propTypes.default.oneOf(_constants.strings.SIZE_SET), _propTypes.default.number])
+};

package/lib/cjs/resizeObserver/index.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import ResizeObserver from 'resize-observer-polyfill';
+/** A parallel type to `ResizeObserverEntry` (from resize-observer-polyfill). */
+export interface ResizeEntry {
+    contentRect: DOMRectReadOnly;
+    target: Element;
+}
+export interface ReactResizeObserverProps extends BaseProps {
+    onResize?: (entries: ResizeEntry[]) => void;
+    observeParent?: boolean;
+}
+export default class ReactResizeObserver extends BaseComponent<ReactResizeObserverProps> {
+    static propTypes: {
+        onResize: PropTypes.Requireable<(...args: any[]) => any>;
+        observeParent: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        onResize: () => void;
+        observeParent: boolean;
+    };
+    observer: ResizeObserver;
+    childNode: any;
+    element: Element;
+    _parentNode: HTMLElement;
+    constructor(props: ReactResizeObserverProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ReactResizeObserverProps): void;
+    componentWillUnmount(): void;
+    getElement: () => Element | Text;
+    observeElement(force?: boolean): void;
+    mergeRef: (ref: any, node: HTMLDivElement) => void;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+}

package/lib/cjs/resizeObserver/index.js

@@ -0,0 +1,117 @@
+"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 = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
+class ReactResizeObserver extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.getElement = () => {
+      try {
+        // 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).
+        return (0, _reactDom.findDOMNode)(this.childNode || this);
+      } catch (error) {
+        // swallow error if findDOMNode is run on unmounted component.
+        return null;
+      }
+    };
+
+    this.mergeRef = (ref, node) => {
+      this.childNode = node;
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (typeof ref === 'object' && ref && 'current' in ref) {
+        ref.current = node;
+      }
+    };
+
+    this.observer = new _resizeObserverPolyfill.default(props.onResize);
+  }
+
+  componentDidMount() {
+    this.observeElement();
+  }
+
+  componentDidUpdate(prevProps) {
+    this.observeElement(this.props.observeParent !== prevProps.observeParent);
+  }
+
+  componentWillUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+  }
+
+  observeElement() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    const element = this.getElement();
+
+    if (!(element && element instanceof Element)) {
+      // stop everything if not defined
+      this.observer.disconnect();
+      return;
+    }
+
+    if (element === this.element && !force) {
+      // abort if given same element -- nothing to update (unless forced)
+      return;
+    } else {
+      // clear observer list if new element
+      this.observer.disconnect(); // remember element reference for next time
+
+      this.element = element;
+    } // observer callback is invoked immediately when observing new elements
+
+
+    this.observer.observe(element);
+
+    if (this.props.observeParent && element.parentNode && element.parentNode.ownerDocument && element.parentNode.ownerDocument.defaultView && element.parentNode instanceof element.parentNode.ownerDocument.defaultView.HTMLElement) {
+      this._parentNode = element.parentNode;
+      this.observer.observe(this._parentNode);
+    }
+  }
+
+  render() {
+    const child = _react.default.Children.only(this.props.children);
+
+    const {
+      ref
+    } = child;
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      ref: node => this.mergeRef(ref, node)
+    });
+  }
+
+}
+
+exports.default = ReactResizeObserver;
+ReactResizeObserver.propTypes = {
+  onResize: _propTypes.default.func,
+  observeParent: _propTypes.default.bool
+};
+ReactResizeObserver.defaultProps = {
+  onResize: () => {},
+  observeParent: false
+};

package/lib/cjs/scrollList/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import propTypes from 'prop-types';
+import ScrollItem from './scrollItem';
+import '@douyinfe/semi-foundation/lib/cjs/scrollList/scrollList.css';
+export { ScrollItemProps } from './scrollItem';
+export interface ScrollListProps extends BaseProps {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    bodyHeight?: number | string;
+    prefixCls?: string;
+}
+declare class ScrollList extends BaseComponent<ScrollListProps, {}> {
+    static Item: typeof ScrollItem;
+    static propTypes: {
+        className: propTypes.Requireable<string>;
+        header: propTypes.Requireable<propTypes.ReactNodeLike>;
+        footer: propTypes.Requireable<propTypes.ReactNodeLike>;
+        children: propTypes.Requireable<propTypes.ReactNodeLike>;
+        bodyHeight: propTypes.Requireable<string | number>;
+    };
+    constructor(props: ScrollListProps);
+    render(): JSX.Element;
+}
+export default ScrollList;