shineout 1.12.2 → 1.12.3

package/esm/Tabs/Header.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { PureComponent } from '../component';
+import { HeaderProps, TabsChildProps } from './Props';
+interface HeaderState {
+    attribute: number;
+    overflow: boolean;
+    attributeString?: string;
+}
+declare class Header extends PureComponent<HeaderProps, HeaderState> {
+    bindInner: (e: HTMLDivElement) => void;
+    bindWrapper: (e: HTMLDivElement) => void;
+    bindScroll: (e: HTMLDivElement) => void;
+    handlePrevClick: any;
+    handleNextClick: any;
+    removeObserver: () => void;
+    innerElement: HTMLElement;
+    scrollElement: HTMLElement;
+    ignoreNextCollapse: boolean;
+    constructor(props: HeaderProps);
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    setPosition(isVertical?: boolean): void;
+    handleResize(_entry: HTMLElement, { x, y }: {
+        x: boolean;
+        y: boolean;
+    }): void;
+    bindElement(name: keyof this, el: any): void;
+    handleMove(lt: boolean): void;
+    moveToCenter(tabRect: DOMRect, last: boolean, first: boolean): void;
+    handleClick(id: string | number, isActive: boolean): void;
+    handleCollapse(e: React.MouseEvent<HTMLDivElement> | boolean): void;
+    renderTab({ tab, id, ...other }: TabsChildProps): JSX.Element;
+    renderButtons(): JSX.Element;
+    renderTabs(): JSX.Element[];
+    render(): JSX.Element;
+}
+export default Header;

package/esm/Tabs/Header.js

@@ -0,0 +1,265 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import immer from 'immer';
+import { addResizeObserver } from '../utils/dom/element';
+import { PureComponent } from '../component';
+import Button from '../Button';
+import icons from '../icons';
+import Tab from './Tab';
+import { tabsClass } from './styles';
+import { isRTL } from '../config';
+var REDUNDANT = 30;
+
+var Header =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Header, _PureComponent);
+
+  function Header(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "bindInner", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "bindWrapper", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "bindScroll", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlePrevClick", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleNextClick", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "removeObserver", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "innerElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "ignoreNextCollapse", void 0);
+
+    _this.state = {
+      attribute: 0,
+      overflow: false
+    };
+    _this.setPosition = _this.setPosition.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindInner = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'innerElement');
+    _this.bindWrapper = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'wrapperElement');
+    _this.bindScroll = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'scrollElement');
+    _this.renderTab = _this.renderTab.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handlePrevClick = _this.handleMove.bind(_assertThisInitialized(_assertThisInitialized(_this)), true);
+    _this.handleNextClick = _this.handleMove.bind(_assertThisInitialized(_assertThisInitialized(_this)), false);
+    _this.moveToCenter = _this.moveToCenter.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleCollapse = _this.handleCollapse.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Header.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    var isVertical = this.props.isVertical;
+    this.setPosition(isVertical);
+    this.removeObserver = addResizeObserver(this.innerElement, this.handleResize, {
+      direction: true,
+      timer: 100
+    });
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    var isVertical = this.props.isVertical;
+    this.setPosition(isVertical);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    if (this.removeObserver) {
+      this.removeObserver();
+    }
+  };
+
+  _proto.setPosition = function setPosition(isVertical) {
+    var attributeString = isVertical ? 'Height' : 'Width';
+    if (!this.innerElement) return;
+    var innerAttribute = this.innerElement["client" + attributeString];
+    var scrollAttribute = this.scrollElement["client" + attributeString];
+    var domAttribute = this.state.attribute;
+    this.setState({
+      overflow: scrollAttribute > domAttribute + innerAttribute,
+      attributeString: attributeString
+    });
+  };
+
+  _proto.handleResize = function handleResize(_entry, _ref) {
+    var x = _ref.x,
+        y = _ref.y;
+    var isVertical = this.props.isVertical;
+    var isResize = isVertical ? y : x;
+    if (isResize) this.setPosition(isVertical);
+  };
+
+  _proto.bindElement = function bindElement(name, el) {
+    this[name] = el;
+  };
+
+  _proto.handleMove = function handleMove(lt) {
+    var _this$state = this.state,
+        attributeString = _this$state.attributeString,
+        a = _this$state.attribute;
+    var innerAttribute = this.innerElement["client" + attributeString];
+    var scrollAttribute = this.scrollElement["client" + attributeString];
+    var attribute = a + (lt ? -innerAttribute : innerAttribute);
+    if (attribute < 0) attribute = 0;
+    if (attribute + innerAttribute > scrollAttribute) attribute = scrollAttribute - innerAttribute;
+    if (scrollAttribute <= innerAttribute) attribute = 0;
+    this.setState({
+      attribute: attribute
+    });
+  };
+
+  _proto.moveToCenter = function moveToCenter(tabRect, last, first) {
+    var isVertical = this.props.isVertical;
+    var positions = isVertical ? ['top', 'bottom'] : ['left', 'right'];
+    var rect = this.innerElement.getBoundingClientRect();
+    var d = isRTL() && !isVertical ? -1 : 1;
+
+    if (tabRect[positions[0]] < rect[positions[0]]) {
+      this.setState(immer(function (draft) {
+        draft.attribute -= (rect[positions[0]] - tabRect[positions[0]] + (first ? 0 : REDUNDANT)) * d;
+      }));
+    } else if (tabRect[positions[1]] > rect[positions[1]]) {
+      this.setState(immer(function (draft) {
+        draft.attribute += (tabRect[positions[1]] - rect[positions[1]] - (draft.attribute === 0 ? -30 : 0) + (last ? 0 : REDUNDANT)) * d;
+      }));
+    }
+  };
+
+  _proto.handleClick = function handleClick(id, isActive) {
+    var _this2 = this;
+
+    if (!isActive) {
+      if (this.props.onChange) this.props.onChange(id);
+      this.ignoreNextCollapse = true;
+      setTimeout(function () {
+        return _this2.handleCollapse(false);
+      }, 200);
+    }
+  };
+
+  _proto.handleCollapse = function handleCollapse(e) {
+    var _this$props = this.props,
+        onCollapse = _this$props.onCollapse,
+        collapsed = _this$props.collapsed;
+    if (!onCollapse) return;
+
+    if (typeof e === 'boolean') {
+      onCollapse(e);
+      return;
+    }
+
+    if (this.ignoreNextCollapse) {
+      this.ignoreNextCollapse = false;
+      return;
+    }
+
+    onCollapse(!collapsed);
+  };
+
+  _proto.renderTab = function renderTab(_ref2) {
+    var tab = _ref2.tab,
+        id = _ref2.id,
+        other = _objectWithoutPropertiesLoose(_ref2, ["tab", "id"]);
+
+    return React.createElement(Tab, _extends({}, other, {
+      key: id,
+      id: id,
+      moveToCenter: this.moveToCenter,
+      onClick: this.handleClick
+    }), tab);
+  };
+
+  _proto.renderButtons = function renderButtons() {
+    var _this3 = this;
+
+    var _this$props2 = this.props,
+        onChange = _this$props2.onChange,
+        tabs = _this$props2.tabs;
+    return React.createElement(Button.Group, {
+      className: tabsClass('header-button')
+    }, tabs.map(function (tab) {
+      return React.createElement(Button, {
+        key: tab.id,
+        onClick: tab.isActive ? undefined : onChange.bind(_this3, tab.id),
+        className: tabsClass(tab.isActive && 'button-active'),
+        disabled: tab.disabled
+      }, tab.tab);
+    }));
+  };
+
+  _proto.renderTabs = function renderTabs() {
+    var tabs = this.props.tabs;
+    return tabs.map(this.renderTab);
+  };
+
+  _proto.render = function render() {
+    var _ref3;
+
+    var _this$props3 = this.props,
+        border = _this$props3.border,
+        onCollapse = _this$props3.onCollapse,
+        collapsed = _this$props3.collapsed,
+        isVertical = _this$props3.isVertical,
+        tabBarExtraContent = _this$props3.tabBarExtraContent,
+        tabBarStyle = _this$props3.tabBarStyle,
+        shape = _this$props3.shape,
+        hideSplit = _this$props3.hideSplit;
+    var _this$state2 = this.state,
+        attribute = _this$state2.attribute,
+        overflow = _this$state2.overflow;
+    var hor = isRTL() ? 'Right' : 'Left';
+    var position = isVertical ? 'Top' : hor;
+    var showBorder = shape !== 'bordered' && shape !== 'dash' && !hideSplit;
+    return React.createElement("div", {
+      onClick: this.handleCollapse,
+      className: tabsClass('header'),
+      style: tabBarStyle || {}
+    }, React.createElement("div", {
+      ref: this.bindWrapper,
+      className: tabsClass('header-tabs')
+    }, onCollapse && React.createElement("span", {
+      className: tabsClass('indicator', collapsed && 'collapsed')
+    }, icons.AngleRight), attribute > 0 && React.createElement("div", {
+      onClick: this.handlePrevClick,
+      className: tabsClass('scroll-prev')
+    }, icons.AngleLeft), React.createElement("div", {
+      ref: this.bindInner,
+      className: tabsClass('inner')
+    }, React.createElement("div", {
+      ref: this.bindScroll,
+      style: (_ref3 = {}, _ref3["margin" + position] = -attribute, _ref3),
+      className: tabsClass('scroll')
+    }, shape === 'button' ? this.renderButtons() : this.renderTabs())), overflow && React.createElement("div", {
+      onClick: this.handleNextClick,
+      className: tabsClass('scroll-next')
+    }, isVertical ? icons.AngleRight : icons.AngleRight)), tabBarExtraContent && React.createElement("div", {
+      className: tabsClass('extra')
+    }, tabBarExtraContent), showBorder && shape !== 'button' && React.createElement("div", {
+      style: {
+        borderColor: border
+      },
+      className: tabsClass('hr')
+    }));
+  };
+
+  return Header;
+}(PureComponent);
+
+export default Header;

package/esm/Tabs/Link.d.ts

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import { TabsLinkProps } from './Props';
+declare class Link extends PureComponent<TabsLinkProps> {
+    static isTabLink: boolean;
+    render(): JSX.Element;
+}
+export default Link;

package/esm/Tabs/Link.js

@@ -0,0 +1,58 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import { tabsClass } from './styles';
+import { isLink } from '../utils/is';
+
+var Link =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Link, _PureComponent);
+
+  function Link() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = Link.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        href = _this$props.href,
+        className = _this$props.className,
+        other = _objectWithoutPropertiesLoose(_this$props, ["children", "href", "className"]);
+
+    var mergeClass = classnames(className, tabsClass('link'));
+
+    var props = _objectSpread({
+      className: mergeClass,
+      href: href
+    }, other);
+
+    if (isLink(children)) {
+      if (children.props.onClick) {
+        props.onClick = function () {
+          children.props.onClick();
+
+          if (other.onClick) {
+            other.onClick();
+          }
+        };
+      }
+
+      return React.cloneElement(children, _objectSpread({}, props));
+    }
+
+    return React.createElement("a", props, children);
+  };
+
+  return Link;
+}(PureComponent);
+
+_defineProperty(Link, "isTabLink", void 0);
+
+Link.isTabLink = true;
+export default Link;

package/esm/Tabs/Panel.d.ts

@@ -0,0 +1,9 @@
+import { PureComponent } from 'react';
+import { PanelProps } from './Props';
+declare class Panel extends PureComponent<PanelProps> {
+    isPristine: boolean;
+    static isTabPanel: boolean;
+    constructor(props: PanelProps);
+    render(): JSX.Element | null;
+}
+export default Panel;

package/esm/Tabs/Panel.js

@@ -0,0 +1,60 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import List from '../AnimationList';
+import { tabsClass } from './styles';
+var CollapseList = List(['collapse'], 'fast');
+
+var Panel =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Panel, _PureComponent);
+
+  function Panel(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isPristine", void 0);
+
+    _this.isPristine = true;
+    return _this;
+  }
+
+  var _proto = Panel.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        background = _this$props.background,
+        color = _this$props.color,
+        isActive = _this$props.isActive,
+        collapsible = _this$props.collapsible,
+        collapsed = _this$props.collapsed,
+        lazy = _this$props.lazy;
+    if (!isActive && this.isPristine && lazy) return null;
+    this.isPristine = false;
+    var style = Object.assign({
+      background: background || '#fff',
+      color: color
+    }, this.props.style);
+    var className = classnames(tabsClass('panel', isActive && 'show'), this.props.className);
+    var result = React.createElement("div", {
+      style: style,
+      className: className
+    }, children);
+    if (!collapsible) return result;
+    return React.createElement(CollapseList, {
+      show: !collapsed
+    }, result);
+  };
+
+  return Panel;
+}(PureComponent);
+
+_defineProperty(Panel, "isTabPanel", void 0);
+
+Panel.isTabPanel = true;
+export default Panel;

package/esm/Tabs/Props.d.ts

@@ -0,0 +1,242 @@
+import * as React from 'react';
+import { AnchorHTMLAttributes } from 'react';
+import { StandardProps } from '../@types/common';
+import { StickyProps } from '../Sticky/Props';
+declare type ReactNode = React.ReactNode;
+export interface Props extends StandardProps {
+    /**
+     * Current active tab id or index
+     *
+     * 当前选中标签页（受控）
+     *
+     * default: 0
+     */
+    active?: string | number;
+    /**
+     * set the label align
+     *
+     * 设置标签对齐方式
+     *
+     * default: 无
+     */
+    align?: 'left' | 'right' | 'vertical-left' | 'vertical-right';
+    /**
+     * Active background color
+     *
+     * 选中标签背景色
+     *
+     * default: -
+     */
+    background?: string;
+    /**
+     * Border color
+     *
+     * 边框颜色
+     *
+     * default: -
+     */
+    border?: string;
+    /**
+     * Whether can be collapsed
+     *
+     * 是否可折叠
+     *
+     * default: false
+     */
+    collapsible?: boolean;
+    /**
+     * Default active tab id or index
+     *
+     * 默认选中标签页（非受控）
+     *
+     * default: 0
+     */
+    defaultActive?: string | number;
+    /**
+     * Inactive background color
+     *
+     * 未选中标签背景色
+     *
+     * default: -
+     */
+    inactiveBackground?: string;
+    /**
+     * extra element in tab bar
+     *
+     * tab bar 上额外的元素
+     *
+     * default: -
+     */
+    tabBarExtraContent?: string | ReactNode;
+    /**
+     * style in tab bar
+     *
+     * tab bar 的样式对象
+     *
+     * default: -
+     */
+    tabBarStyle?: React.CSSProperties;
+    /**
+     * Change callback
+     *
+     * 标签选中时触发回调事件
+     *
+     * default: -
+     */
+    onChange?: (key: any) => void;
+    /**
+     * Options: ['card', 'line', 'button', 'bordered', 'dash']. If shape is not null, the style properties such as background, border will lose effect
+     *
+     * shape 不为空时，background 等颜色参数将会无效
+     *
+     * default: -
+     */
+    shape?: 'card' | 'line' | 'button' | 'bordered' | 'dash';
+    /**
+     * lazy load
+     *
+     * 是否开启懒加载
+     *
+     * default: true
+     */
+    lazy?: boolean;
+    /**
+     * sticky header
+     *
+     * 头部浮动
+     *
+     * default: none
+     */
+    sticky?: boolean | number | StickyProps;
+    /**
+     * switch tabs will scroll to Tabs
+     *
+     * 切换tab将自动滚动到Tabs
+     *
+     * default: none
+     */
+    switchToTop?: boolean;
+    /**
+     * Whether to hide the dividing line
+     *
+     * 是否隐藏分割线
+     *
+     * default: false
+     */
+    hideSplit?: boolean;
+    /**
+     * content
+     *
+     * 内容
+     *
+     * default: -
+     */
+    children: ReactNode;
+    /**
+     * the color of tab's text
+     *
+     * 标签页文字颜色，仅当 shape 为 'card' 时生效
+     *
+     * default: -
+     */
+    color?: string;
+}
+export interface TabsLinkProps extends AnchorHTMLAttributes<any> {
+    /**
+     * Link content
+     *
+     * 链接内容
+     *
+     * default: required
+     */
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+interface BaseTabProps {
+    id?: string | number;
+    isActive?: boolean;
+    moveToCenter?: (tabRect: DOMRect, last: boolean, first: boolean) => void;
+    onClick?: (id: string | number, isActive: boolean) => void;
+    last?: boolean;
+}
+export interface TabProps extends Required<BaseTabProps> {
+    background?: string;
+    border?: string;
+    children?: any;
+    color?: string;
+    disabled?: boolean;
+    isVertical?: boolean;
+    shape?: string;
+    onChange?: (key: string | number) => void;
+    align?: 'left' | 'right' | 'vertical-left' | 'vertical-right';
+}
+export declare type TabsBaseValue = string | number;
+export interface TabsProps<Key extends TabsBaseValue = TabsBaseValue> {
+    active?: Key;
+    align?: 'left' | 'right' | 'vertical-left' | 'vertical-right' | 'bottom';
+    background?: string;
+    border?: string;
+    children?: any;
+    className?: string;
+    collapsible?: boolean;
+    color?: string;
+    defaultActive?: Key;
+    defaultCollapsed?: boolean;
+    inactiveBackground?: string;
+    shape?: 'card' | 'line' | 'button' | 'bordered' | 'dash';
+    style?: React.CSSProperties;
+    tabBarExtraContent?: string | ReactNode;
+    tabBarStyle?: React.CSSProperties;
+    lazy?: boolean;
+    autoFill?: boolean;
+    sticky?: boolean | number | StickyProps;
+    switchToTop?: boolean;
+    hideSplit?: boolean;
+    onChange?: (key: Key) => void;
+}
+export interface TabsChildProps {
+    id: string | number;
+    isActive: boolean;
+    tab: any;
+    isVertical?: boolean;
+    align?: 'left' | 'right' | 'vertical-left' | 'vertical-right';
+    background: string;
+    border?: string;
+    color: string;
+    disabled: boolean;
+    shape?: 'card' | 'line' | 'button' | 'bordered' | 'dash';
+    last: boolean;
+}
+export interface HeaderProps {
+    border?: string;
+    collapsed?: boolean;
+    isVertical?: boolean;
+    onChange: (key: string | number) => void;
+    onCollapse?: (collapsed: boolean) => void;
+    shape?: string;
+    tabs: TabsChildProps[];
+    tabBarExtraContent?: string | ReactNode;
+    tabBarStyle?: React.CSSProperties;
+    hideSplit?: boolean;
+}
+export interface PanelProps {
+    id?: string | number;
+    background?: string;
+    className?: string;
+    collapsed?: boolean;
+    collapsible?: boolean;
+    color?: string;
+    children?: ReactNode;
+    isActive?: boolean;
+    style?: React.CSSProperties;
+    lazy?: boolean;
+    tab?: string | ReactNode;
+    border?: string;
+    disabled?: boolean;
+}
+export interface WrapperProps {
+    active: string | number;
+    children?: ReactNode;
+    id?: string | number;
+}
+export {};

package/esm/Tabs/Props.js

@@ -0,0 +1 @@
+export {};

package/esm/Tabs/Tab.d.ts

@@ -0,0 +1,12 @@
+import React, { PureComponent } from 'react';
+import { TabProps } from './Props';
+declare class Tab extends PureComponent<TabProps> {
+    element: HTMLElement;
+    uid: string;
+    constructor(props: TabProps);
+    componentDidMount(): void;
+    getActiveStyle(): React.CSSProperties;
+    handleClick(init: any): void;
+    render(): JSX.Element;
+}
+export default Tab;