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

package/lib/cjs/table/utils.js

@@ -0,0 +1,144 @@
+"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.amendTableWidth = amendTableWidth;
+
+_Object$defineProperty(exports, "cloneDeep", {
+  enumerable: true,
+  get: function () {
+    return _utils.cloneDeep;
+  }
+});
+
+exports.logger = void 0;
+exports.measureScrollbar = measureScrollbar;
+exports.mergeComponents = mergeComponents;
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _merge2 = _interopRequireDefault(require("lodash/merge"));
+
+var _Logger = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/Logger"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
+
+var _utils = require("../_utils");
+
+let scrollbarVerticalSize, scrollbarHorizontalSize; // Measure scrollbar width for padding body during modal show/hide
+
+const scrollbarMeasure = {
+  position: 'absolute',
+  top: '-9999px',
+  width: '50px',
+  height: '50px'
+};
+/**
+ * @param {'vertical'|'horizontal'} [direction]
+ * @returns {number}
+ */
+
+function measureScrollbar() {
+  var _context;
+
+  let direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'vertical';
+
+  if (typeof document === 'undefined' || typeof window === 'undefined') {
+    return 0;
+  }
+
+  const isVertical = direction === 'vertical';
+
+  if (isVertical && scrollbarVerticalSize) {
+    return scrollbarVerticalSize;
+  } else if (!isVertical && scrollbarHorizontalSize) {
+    return scrollbarHorizontalSize;
+  }
+
+  const scrollDiv = document.createElement('div');
+  (0, _forEach.default)(_context = (0, _keys.default)(scrollbarMeasure)).call(_context, scrollProp => {
+    scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
+  }); // Append related overflow style
+
+  if (isVertical) {
+    scrollDiv.style.overflowY = 'scroll';
+  } else {
+    scrollDiv.style.overflowX = 'scroll';
+  }
+
+  document.body.appendChild(scrollDiv);
+  let size = 0;
+
+  if (isVertical) {
+    // clientWidth is the inner width (excluding borders and scrollbars)
+    // offsetWidth is the outer width (including padding and borders)
+    size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    scrollbarVerticalSize = size;
+  } else {
+    size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
+    scrollbarHorizontalSize = size;
+  }
+
+  document.body.removeChild(scrollDiv); // console.log(size);
+
+  return size;
+}
+
+function amendTableWidth(tableWidth) {
+  return typeof tableWidth === 'number' ? tableWidth - _constants.numbers.DEFAULT_CELL_PADDING_LEFT - _constants.numbers.DEFAULT_CELL_PADDING_RIGHT - _constants.numbers.DEFAULT_CELL_BORDER_WIDTH_LEFT - _constants.numbers.DEFAULT_CELL_BORDER_WIDTH_RIGHT - measureScrollbar('vertical') : undefined;
+}
+/**
+ * The user can pass a component to define the rendering method of each level of the table
+ * This function merges the components passed in by the user with the default components
+ * @param {Object} components
+ * @param {Boolean|Object} virtualized
+ * @returns
+ */
+
+
+function mergeComponents(components, virtualized) {
+  return (0, _merge2.default)({}, {
+    table: 'table',
+    header: {
+      outer: 'table',
+      wrapper: 'thead',
+      row: 'tr',
+      cell: 'th'
+    },
+    body: virtualized ? {
+      outer: 'div',
+      wrapper: 'div',
+      row: 'div',
+      cell: 'div',
+      colgroup: {
+        wrapper: 'div',
+        col: 'div'
+      }
+    } : {
+      outer: 'table',
+      wrapper: 'tbody',
+      row: 'tr',
+      cell: 'td',
+      colgroup: {
+        wrapper: 'colgroup',
+        col: 'col'
+      }
+    },
+    footer: {
+      wrapper: 'tfoot',
+      row: 'tr',
+      cell: 'td'
+    }
+  }, components);
+}
+
+const logger = new _Logger.default('[@douyinfe/semi-ui Table]');
+exports.logger = logger;

package/lib/cjs/tabs/TabBar.d.ts

@@ -0,0 +1,43 @@
+import React, { MouseEvent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TabBarProps, PlainTab } from './interface';
+export interface TabBarState {
+    endInd: number;
+    rePosKey: number;
+    startInd: number;
+}
+export interface OverflowItem extends PlainTab {
+    key: string;
+    active: boolean;
+}
+declare class TabBar extends React.Component<TabBarProps, TabBarState> {
+    static propTypes: {
+        activeKey: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        collapsible: PropTypes.Requireable<boolean>;
+        list: PropTypes.Requireable<any[]>;
+        onTabClick: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        tabBarExtraContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tabPosition: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+        closable: PropTypes.Requireable<boolean>;
+        deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    uuid: string;
+    constructor(props: TabBarProps);
+    renderIcon(icon: ReactNode): ReactNode;
+    renderExtra(): ReactNode;
+    handleItemClick: (itemKey: string, e: MouseEvent<Element>) => void;
+    renderTabItem: (panel: PlainTab) => ReactNode;
+    renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
+    handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
+    renderCollapse: (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end') => ReactNode;
+    renderOverflow: (items: any[]) => Array<ReactNode>;
+    renderCollapsedTab: () => ReactNode;
+    render(): ReactNode;
+    private _isActive;
+    private _getItemKey;
+}
+export default TabBar;

package/lib/cjs/tabs/TabBar.js

@@ -0,0 +1,317 @@
+"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 _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 _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+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 _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/tabs/constants");
+
+var _getDataAttr = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getDataAttr"));
+
+var _overflowList = _interopRequireDefault(require("../overflowList"));
+
+var _dropdown = _interopRequireDefault(require("../dropdown"));
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
+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;
+};
+
+class TabBar extends _react.default.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleItemClick = (itemKey, e) => {
+      this.props.onTabClick(itemKey, e);
+
+      if (this.props.collapsible) {
+        var _context, _context2;
+
+        const key = this._getItemKey(itemKey); // eslint-disable-next-line max-len
+
+
+        const tabItem = document.querySelector((0, _concat.default)(_context = (0, _concat.default)(_context2 = "[data-uuid=\"".concat(this.uuid, "\"] .")).call(_context2, _constants.cssClasses.TABS_TAB, "[data-scrollkey=\"")).call(_context, key, "\"]"));
+        tabItem.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      }
+    };
+
+    this.renderTabItem = panel => {
+      const {
+        size,
+        type,
+        deleteTabItem
+      } = this.props;
+      const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
+      const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+        className: "".concat(_constants.cssClasses.TABS_TAB, "-icon-close"),
+        onClick: e => deleteTabItem(panel.itemKey, e)
+      }) : null;
+      let events = {};
+      const key = panel.itemKey;
+
+      if (!panel.disabled) {
+        events = {
+          onClick: e => this.handleItemClick(key, e)
+        };
+      }
+
+      const className = (0, _classnames.default)(_constants.cssClasses.TABS_TAB, {
+        [_constants.cssClasses.TABS_TAB_ACTIVE]: this._isActive(key),
+        [_constants.cssClasses.TABS_TAB_DISABLED]: panel.disabled,
+        ["".concat(_constants.cssClasses.TABS_TAB, "-small")]: size === 'small',
+        ["".concat(_constants.cssClasses.TABS_TAB, "-medium")]: size === 'medium'
+      });
+      return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+        role: "tab",
+        "aria-disabled": panel.disabled ? 'true' : 'false',
+        "aria-selected": this._isActive(key) ? 'true' : 'false'
+      }, events, {
+        className: className,
+        key: this._getItemKey(key)
+      }), panelIcon, panel.tab, closableIcon);
+    };
+
+    this.renderTabComponents = list => (0, _map.default)(list).call(list, panel => this.renderTabItem(panel));
+
+    this.handleArrowClick = (items, pos) => {
+      var _context3, _context4;
+
+      const inline = pos === 'start' ? 'end' : 'start';
+      const lastItem = pos === 'start' ? items.pop() : items.shift();
+
+      if (!lastItem) {
+        return;
+      }
+
+      const key = this._getItemKey(lastItem.itemKey); // eslint-disable-next-line max-len
+
+
+      const tabItem = document.querySelector((0, _concat.default)(_context3 = (0, _concat.default)(_context4 = "[data-uuid=\"".concat(this.uuid, "\"] .")).call(_context4, _constants.cssClasses.TABS_TAB, "[data-scrollkey=\"")).call(_context3, key, "\"]"));
+      tabItem.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline
+      });
+    };
+
+    this.renderCollapse = (items, icon, pos) => {
+      var _context5, _context6;
+
+      if ((0, _isEmpty2.default)(items)) {
+        return null;
+      }
+
+      const {
+        dropdownClassName,
+        dropdownStyle
+      } = this.props;
+      const {
+        rePosKey
+      } = this.state;
+      const disabled = !items.length;
+
+      const menu = /*#__PURE__*/_react.default.createElement(_dropdown.default.Menu, null, (0, _map.default)(items).call(items, panel => {
+        const {
+          icon: i,
+          tab,
+          itemKey
+        } = panel;
+        const panelIcon = i ? this.renderIcon(panel.icon) : null;
+        return /*#__PURE__*/_react.default.createElement(_dropdown.default.Item, {
+          key: itemKey,
+          onClick: e => this.handleItemClick(itemKey, e),
+          active: this._isActive(itemKey)
+        }, panelIcon, tab);
+      }));
+
+      const arrowCls = (0, _classnames.default)({
+        [(0, _concat.default)(_context5 = "".concat(_constants.cssClasses.TABS_BAR, "-arrow-")).call(_context5, pos)]: pos,
+        ["".concat(_constants.cssClasses.TABS_BAR, "-arrow")]: true
+      });
+      const dropdownCls = (0, _classnames.default)(dropdownClassName, {
+        ["".concat(_constants.cssClasses.TABS_BAR, "-dropdown")]: true
+      });
+      return /*#__PURE__*/_react.default.createElement(_dropdown.default, {
+        className: dropdownCls,
+        clickToHide: true,
+        clickTriggerToHide: true,
+        key: (0, _concat.default)(_context6 = "".concat(rePosKey, "-")).call(_context6, pos),
+        position: pos === 'start' ? 'bottomLeft' : 'bottomRight',
+        render: disabled ? null : menu,
+        showTick: true,
+        style: dropdownStyle,
+        trigger: 'hover'
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: arrowCls,
+        onClick: e => this.handleArrowClick(items, pos)
+      }, /*#__PURE__*/_react.default.createElement(_button.default, {
+        disabled: disabled,
+        icon: icon,
+        // size="small"
+        theme: "borderless"
+      })));
+    };
+
+    this.renderOverflow = items => (0, _map.default)(items).call(items, (item, ind) => {
+      const icon = ind === 0 ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, null) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, null);
+      const pos = ind === 0 ? 'start' : 'end';
+      return this.renderCollapse(item, icon, pos);
+    });
+
+    this.renderCollapsedTab = () => {
+      const {
+        list
+      } = this.props;
+      const renderedList = (0, _map.default)(list).call(list, item => {
+        const {
+          itemKey
+        } = item;
+        return (0, _assign.default)({
+          key: this._getItemKey(itemKey),
+          active: this._isActive(itemKey)
+        }, item);
+      });
+      return /*#__PURE__*/_react.default.createElement(_overflowList.default, {
+        items: renderedList,
+        overflowRenderer: this.renderOverflow,
+        renderMode: "scroll",
+        className: "".concat(_constants.cssClasses.TABS_BAR, "-overflow-list"),
+        visibleItemRenderer: this.renderTabItem
+      });
+    };
+
+    this._isActive = key => key === this.props.activeKey;
+
+    this._getItemKey = key => "".concat(key, "-bar");
+
+    this.state = {
+      endInd: props.list.length,
+      rePosKey: 0,
+      startInd: 0
+    };
+    this.uuid = (0, _uuid.getUuidv4)();
+  }
+
+  renderIcon(icon) {
+    return /*#__PURE__*/_react.default.createElement("span", null, icon);
+  }
+
+  renderExtra() {
+    var _context7, _context8, _context9;
+
+    const {
+      tabBarExtraContent,
+      type,
+      size
+    } = this.props;
+    const tabBarExtraContentDefaultStyle = {
+      float: 'right'
+    };
+    const tabBarExtraContentStyle = tabBarExtraContent && tabBarExtraContent.props ? tabBarExtraContent.props.style : {};
+    const extraCls = (0, _classnames.default)(_constants.cssClasses.TABS_BAR_EXTRA, {
+      [(0, _concat.default)(_context7 = "".concat(_constants.cssClasses.TABS_BAR, "-")).call(_context7, type, "-extra")]: type,
+      [(0, _concat.default)(_context8 = (0, _concat.default)(_context9 = "".concat(_constants.cssClasses.TABS_BAR, "-")).call(_context9, type, "-extra-")).call(_context8, size)]: size
+    });
+
+    if (tabBarExtraContent) {
+      const tabBarStyle = (0, _assign.default)((0, _assign.default)({}, tabBarExtraContentDefaultStyle), tabBarExtraContentStyle);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: extraCls,
+        style: tabBarStyle
+      }, tabBarExtraContent);
+    }
+
+    return null;
+  }
+
+  render() {
+    var _context10;
+
+    const _a = this.props,
+          {
+      type,
+      style,
+      className,
+      list,
+      tabPosition,
+      collapsible
+    } = _a,
+          restProps = __rest(_a, ["type", "style", "className", "list", "tabPosition", "collapsible"]);
+
+    const classNames = (0, _classnames.default)(className, {
+      [_constants.cssClasses.TABS_BAR]: true,
+      [_constants.cssClasses.TABS_BAR_LINE]: type === 'line',
+      [_constants.cssClasses.TABS_BAR_CARD]: type === 'card',
+      [_constants.cssClasses.TABS_BAR_BUTTON]: type === 'button',
+      [(0, _concat.default)(_context10 = "".concat(_constants.cssClasses.TABS_BAR, "-")).call(_context10, tabPosition)]: tabPosition,
+      ["".concat(_constants.cssClasses.TABS_BAR, "-collapse")]: collapsible
+    });
+    const extra = this.renderExtra();
+    const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      role: "tab-list",
+      className: classNames,
+      style: style
+    }, (0, _getDataAttr.default)(restProps), {
+      "data-uuid": this.uuid
+    }), contents, extra);
+  }
+
+}
+
+TabBar.propTypes = {
+  activeKey: _propTypes.default.string,
+  className: _propTypes.default.string,
+  collapsible: _propTypes.default.bool,
+  list: _propTypes.default.array,
+  onTabClick: _propTypes.default.func,
+  size: _propTypes.default.oneOf(_constants.strings.SIZE),
+  style: _propTypes.default.object,
+  tabBarExtraContent: _propTypes.default.node,
+  tabPosition: _propTypes.default.oneOf(_constants.strings.POSITION_MAP),
+  type: _propTypes.default.oneOf(_constants.strings.TYPE_MAP),
+  closable: _propTypes.default.bool,
+  deleteTabItem: _propTypes.default.func
+};
+var _default = TabBar;
+exports.default = _default;

package/lib/cjs/tabs/TabPane.d.ts

@@ -0,0 +1,28 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { PlainTab, TabPaneProps } from './interface';
+declare class TabPane extends PureComponent<TabPaneProps> {
+    static isTabPane: boolean;
+    static contextType: React.Context<import("./interface").TabContextValue>;
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        itemKey: PropTypes.Requireable<string>;
+        tab: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        closable: PropTypes.Requireable<boolean>;
+    };
+    lastActiveKey: string;
+    ref: React.RefObject<HTMLDivElement>;
+    isAnimating: boolean;
+    _active: boolean;
+    componentDidMount(): void;
+    getDirection: (activeKey: string, itemKey: string, panes: Array<PlainTab>) => boolean;
+    hideScroll: () => void;
+    autoScroll: () => void;
+    shouldRender: () => boolean;
+    render(): ReactNode;
+}
+export default TabPane;