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

package/lib/cjs/navigation/Item.d.ts

@@ -0,0 +1,70 @@
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/itemFoundation';
+export interface NavItemProps extends ItemProps, BaseProps {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    forwardRef?: (ele: HTMLLIElement) => void;
+    icon?: React.ReactNode;
+    itemKey?: React.ReactText;
+    level?: number;
+    link?: string;
+    linkOptions?: React.HTMLAttributes<HTMLLinkElement>;
+    text?: React.ReactNode;
+    tooltipHideDelay?: number;
+    tooltipShowDelay?: number;
+    onClick?(clickItems: SelectedData): void;
+    onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
+}
+export interface SelectedData extends SelectedItemProps<NavItemProps> {
+    text?: React.ReactNode;
+}
+export interface NavItemState {
+    tooltipShow: boolean;
+}
+export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
+    static contextType: React.Context<{
+        isCollapsed: boolean;
+        selectedKeys: any[];
+        openKeys: any[];
+    }>;
+    static propTypes: {
+        text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        itemKey: PropTypes.Requireable<string | number>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        toggleIcon: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        forwardRef: PropTypes.Requireable<(...args: any[]) => any>;
+        indent: PropTypes.Requireable<number | boolean>;
+        isCollapsed: PropTypes.Requireable<boolean>;
+        isSubNav: PropTypes.Requireable<boolean>;
+        link: PropTypes.Requireable<string>;
+        linkOptions: PropTypes.Requireable<object>;
+        disabled: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        isSubNav: boolean;
+        indent: boolean;
+        forwardRef: (...args: any[]) => void;
+        isCollapsed: boolean;
+        onClick: (...args: any[]) => void;
+        onMouseEnter: (...args: any[]) => void;
+        onMouseLeave: (...args: any[]) => void;
+        disabled: boolean;
+    };
+    constructor(props: NavItemProps);
+    _invokeContextFunc(funcName: string, ...args: any[]): any;
+    get adapter(): ItemAdapter<NavItemProps, NavItemState>;
+    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean): JSX.Element;
+    setItemRef: (ref: HTMLLIElement) => void;
+    wrapTooltip: (node: React.ReactNode) => JSX.Element;
+    handleClick: (e: React.MouseEvent) => any;
+    render(): {} | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+}

package/lib/cjs/navigation/Item.js

@@ -0,0 +1,296 @@
+"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 _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _times2 = _interopRequireDefault(require("lodash/times"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _isNullOrUndefined = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isNullOrUndefined"));
+
+var _utils = require("../_utils");
+
+var _itemFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/navigation/itemFoundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/navigation/constants");
+
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+
+var _navContext = _interopRequireDefault(require("./nav-context"));
+
+var _dropdown = _interopRequireDefault(require("../dropdown"));
+
+/* eslint-disable max-len */
+
+/* eslint-disable no-nested-ternary */
+const clsPrefix = "".concat(_constants.cssClasses.PREFIX, "-item");
+
+class NavItem extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.setItemRef = ref => {
+      // console.log('Item - setItemRef()', ref);
+      this.props.forwardRef && this.props.forwardRef(ref);
+    };
+
+    this.wrapTooltip = node => {
+      const {
+        text,
+        tooltipHideDelay,
+        tooltipShowDelay
+      } = this.props;
+      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: text,
+        position: "right",
+        trigger: 'hover',
+        mouseEnterDelay: tooltipShowDelay,
+        mouseLeaveDelay: tooltipHideDelay
+      }, node);
+    };
+
+    this.handleClick = e => this.foundation.handleClick(e);
+
+    this.state = {
+      tooltipShow: false
+    };
+    this.foundation = new _itemFoundation.default(this.adapter);
+  }
+
+  _invokeContextFunc(funcName) {
+    if (funcName && this.context && typeof this.context[funcName] === 'function') {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      return this.context[funcName](...args);
+    }
+
+    return null;
+  }
+
+  get adapter() {
+    var _this = this;
+
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      cloneDeep: _utils.cloneDeep,
+      updateTooltipShow: tooltipShow => this.setState({
+        tooltipShow
+      }),
+      updateSelected: _selected => this._invokeContextFunc('updateSelectedKeys', [this.props.itemKey]),
+      updateGlobalSelectedKeys: keys => this._invokeContextFunc('updateSelectedKeys', [...keys]),
+      getSelectedKeys: () => this.context && this.context.selectedKeys,
+      getSelectedKeysIsControlled: () => this.context && this.context.selectedKeysIsControlled,
+      notifyGlobalOnSelect: function () {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+
+        return _this._invokeContextFunc('onSelect', ...args);
+      },
+      notifyGlobalOnClick: function () {
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+
+        return _this._invokeContextFunc('onClick', ...args);
+      },
+      notifyClick: function () {
+        return _this.props.onClick(...arguments);
+      },
+      notifyMouseEnter: function () {
+        return _this.props.onMouseEnter(...arguments);
+      },
+      notifyMouseLeave: function () {
+        return _this.props.onMouseLeave(...arguments);
+      },
+      getIsCollapsed: () => this.props.isCollapsed || Boolean(this.context && this.context.isCollapsed) || false,
+      getSelected: () => {
+        var _context;
+
+        return Boolean(this.context && this.context.selectedKeys && (0, _includes.default)(_context = this.context.selectedKeys).call(_context, this.props.itemKey));
+      }
+    });
+  }
+
+  renderIcon(icon, pos) {
+    var _context2;
+
+    let isToggleIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+    if (this.props.isSubNav) {
+      return null;
+    }
+
+    if (!icon && this.context.mode === _constants.strings.MODE_HORIZONTAL) {
+      return null;
+    }
+
+    let iconSize = 'large';
+
+    if (pos === _constants.strings.ICON_POS_RIGHT) {
+      iconSize = 'default';
+    }
+
+    const className = (0, _classnames.default)("".concat(clsPrefix, "-icon"), {
+      [(0, _concat.default)(_context2 = "".concat(clsPrefix, "-icon-toggle-")).call(_context2, this.context.toggleIconPosition)]: isToggleIcon,
+      ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
+    });
+    return /*#__PURE__*/_react.default.createElement("i", {
+      className: className
+    }, (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
+      size: icon.props.size || iconSize
+    }) : icon);
+  }
+
+  render() {
+    const {
+      text,
+      children,
+      icon,
+      toggleIcon,
+      className,
+      isSubNav,
+      style,
+      indent,
+      onMouseEnter,
+      onMouseLeave,
+      link,
+      linkOptions,
+      disabled,
+      level = 0
+    } = this.props;
+    const {
+      mode,
+      isInSubNav,
+      prefixCls,
+      limitIndent
+    } = this.context;
+    const isCollapsed = this.adapter.getIsCollapsed();
+    const selected = this.adapter.getSelected();
+    let itemChildren = null;
+
+    if (!(0, _isNullOrUndefined.default)(children)) {
+      itemChildren = children;
+    } else {
+      let placeholderIcons = null;
+
+      if (mode === _constants.strings.MODE_VERTICAL && !limitIndent) {
+        const iconAmount = icon && !indent ? level : level - 1;
+        placeholderIcons = (0, _times2.default)(iconAmount, () => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false));
+      }
+
+      itemChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true), icon || indent || isInSubNav ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT) : null, !(0, _isNullOrUndefined.default)(text) ? /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(_constants.cssClasses.PREFIX, "-item-text")
+      }, text) : '', this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true));
+    }
+
+    if (typeof link === 'string') {
+      itemChildren = /*#__PURE__*/_react.default.createElement("a", (0, _assign.default)({
+        className: "".concat(prefixCls, "-item-link"),
+        href: link
+      }, linkOptions), itemChildren);
+    }
+
+    let itemDom = '';
+
+    if (isInSubNav && (isCollapsed || mode === _constants.strings.MODE_HORIZONTAL)) {
+      const popoverItemCls = (0, _classnames.default)({
+        [clsPrefix]: true,
+        ["".concat(clsPrefix, "-sub")]: isSubNav,
+        ["".concat(clsPrefix, "-selected")]: selected,
+        ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
+        ["".concat(clsPrefix, "-disabled")]: disabled
+      });
+      itemDom = /*#__PURE__*/_react.default.createElement(_dropdown.default.Item, {
+        selected: selected,
+        active: selected,
+        forwardRef: this.setItemRef,
+        className: popoverItemCls,
+        onClick: this.handleClick,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        disabled: disabled
+      }, itemChildren);
+    } else {
+      // Items are divided into normal and sub-wrap
+      const popoverItemCls = (0, _classnames.default)("".concat(className || "".concat(clsPrefix, "-normal")), {
+        [clsPrefix]: true,
+        ["".concat(clsPrefix, "-sub")]: isSubNav,
+        ["".concat(clsPrefix, "-selected")]: selected && !isSubNav,
+        ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
+        ["".concat(clsPrefix, "-disabled")]: disabled
+      });
+      itemDom = /*#__PURE__*/_react.default.createElement("li", {
+        style: style,
+        ref: this.setItemRef,
+        className: popoverItemCls,
+        onClick: this.handleClick,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+      }, itemChildren);
+    } // Display Tooltip when disabled and SubNav
+
+
+    if (isCollapsed && !isInSubNav && !isSubNav || isCollapsed && isSubNav && disabled) {
+      itemDom = this.wrapTooltip(itemDom);
+    }
+
+    return itemDom;
+  }
+
+}
+
+exports.default = NavItem;
+NavItem.contextType = _navContext.default;
+NavItem.propTypes = {
+  text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  itemKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onClick: _propTypes.default.func,
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func,
+  children: _propTypes.default.node,
+  icon: _propTypes.default.oneOfType([_propTypes.default.node]),
+  className: _propTypes.default.string,
+  toggleIcon: _propTypes.default.string,
+  style: _propTypes.default.object,
+  forwardRef: _propTypes.default.func,
+  indent: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]),
+  isCollapsed: _propTypes.default.bool,
+  isSubNav: _propTypes.default.bool,
+  link: _propTypes.default.string,
+  linkOptions: _propTypes.default.object,
+  disabled: _propTypes.default.bool
+};
+NavItem.defaultProps = {
+  isSubNav: false,
+  indent: false,
+  forwardRef: _noop2.default,
+  isCollapsed: false,
+  onClick: _noop2.default,
+  onMouseEnter: _noop2.default,
+  onMouseLeave: _noop2.default,
+  disabled: false
+};

package/lib/cjs/navigation/OpenIconTransition.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export interface OpenIconTransitionProps {
+    children?: React.ReactNode;
+    isOpen?: boolean;
+}
+declare function OpenIconTransition(props?: OpenIconTransitionProps): JSX.Element;
+declare namespace OpenIconTransition {
+    var propTypes: {
+        isOpen: PropTypes.Validator<boolean>;
+        children: PropTypes.Validator<any>;
+    };
+}
+export default OpenIconTransition;

package/lib/cjs/navigation/OpenIconTransition.js

@@ -0,0 +1,90 @@
+"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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _semiAnimationReact = require("@douyinfe/semi-animation-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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; }
+
+const formatStyle = function formatStyle(_ref) {
+  let {
+    rotate = 0
+  } = _ref;
+  return {
+    transform: "rotate(".concat(Math.ceil(rotate), "deg)")
+  };
+};
+
+function OpenIconTransition() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    children,
+    isOpen
+  } = props;
+  const [immediate, setImmediate] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    setImmediate(false);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_semiAnimationReact.Transition, {
+    immediate: immediate,
+    state: isOpen ? 'enter' : 'leave',
+    from: {
+      rotate: 0
+    },
+    enter: {
+      rotate: {
+        val: 180,
+        duration: 200,
+        easing: 'cubic-bezier(.62, .05, .36, .95)'
+      }
+    },
+    leave: {
+      rotate: {
+        val: 0,
+        duration: 200,
+        easing: 'cubic-bezier(.62, .05, .36, .95)'
+      }
+    }
+  }, transitionStyle => {
+    const formatedStyle = formatStyle(transitionStyle);
+
+    if (typeof children === 'function') {
+      return children(formatedStyle);
+    }
+
+    if ( /*#__PURE__*/_react.default.isValidElement(children)) {
+      return /*#__PURE__*/_react.default.cloneElement(children, {
+        style: (0, _assign.default)((0, _assign.default)({}, children.props && children.props.style), formatedStyle)
+      });
+    }
+
+    return children;
+  });
+}
+
+OpenIconTransition.propTypes = {
+  isOpen: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.any.isRequired
+};
+var _default = OpenIconTransition;
+exports.default = _default;

package/lib/cjs/navigation/SubNav.d.ts

@@ -0,0 +1,103 @@
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import React from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/lib/cjs/navigation/navigation.css';
+import { SubNavAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/subNavFoundation';
+export interface ToggleIcon {
+    open?: string;
+    closed?: string;
+}
+export interface SubNavProps extends BaseProps {
+    disabled?: boolean;
+    dropdownStyle?: React.CSSProperties;
+    icon?: React.ReactNode;
+    indent?: boolean | number;
+    isCollapsed?: boolean;
+    isOpen?: boolean;
+    itemKey?: string | number;
+    level?: number;
+    maxHeight?: number;
+    onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
+    text?: React.ReactNode;
+    toggleIcon?: ToggleIcon;
+}
+export interface SubNavState {
+    isHovered: boolean;
+}
+export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
+    static contextType: React.Context<{
+        isCollapsed: boolean;
+        selectedKeys: any[];
+        openKeys: any[];
+    }>;
+    static propTypes: {
+        /**
+         * Unique identification
+         */
+        itemKey: PropTypes.Requireable<string | number>;
+        /**
+         * Copywriting
+         */
+        text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Whether child navigation is expanded
+         */
+        isOpen: PropTypes.Requireable<boolean>;
+        /**
+         * Whether it is in the state of being stowed to the sidebar
+         */
+        isCollapsed: PropTypes.Requireable<boolean>;
+        /**
+         * Whether to keep the left Icon placeholder
+         */
+        indent: PropTypes.Requireable<number | boolean>;
+        /**
+         * Nested child elements
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The icon name of the right control switch (on and off status)
+         */
+        toggleIcon: PropTypes.Requireable<any>;
+        style: PropTypes.Requireable<object>;
+        /**
+         * Icon name on the left
+         */
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Maximum height (for animation)
+         */
+        maxHeight: PropTypes.Requireable<number>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        level: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {
+        level: number;
+        indent: boolean;
+        isCollapsed: boolean;
+        isOpen: boolean;
+        maxHeight: number;
+        toggleIcon: {
+            open: JSX.Element;
+            closed: JSX.Element;
+        };
+        disabled: boolean;
+    };
+    titleRef: React.RefObject<HTMLDivElement>;
+    itemRef: React.RefObject<HTMLLIElement>;
+    constructor(props: SubNavProps);
+    setItemRef: (ref: HTMLLIElement | React.RefObject<HTMLLIElement>) => void;
+    setTitleRef: (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => void;
+    _invokeContextFunc(funcName: string, ...args: any[]): any;
+    get adapter(): SubNavAdapter<SubNavProps, SubNavState>;
+    handleClick: (e: React.MouseEvent) => void;
+    handleDropdownVisible: (visible: boolean) => any;
+    renderIcon(icon: React.ReactNode, pos: string, withTransition?: boolean, isToggleIcon?: boolean, key?: number | string): JSX.Element;
+    renderTitleDiv(): JSX.Element;
+    renderSubUl(): JSX.Element;
+    wrapDropdown(elem?: React.ReactNode): React.ReactNode;
+    render(): JSX.Element;
+}