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

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

@@ -1,70 +0,0 @@
-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

@@ -1,296 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-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

@@ -1,90 +0,0 @@
-"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

@@ -1,103 +0,0 @@
-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;
-}