shineout 1.12.2 → 1.12.3

package/esm/Tabs/Tab.js

@@ -0,0 +1,113 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+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, { PureComponent } from 'react';
+import classnames from 'classnames';
+import { tabsClass } from './styles';
+import { getUidStr } from '../utils/uid';
+import { defer } from '../utils/uid';
+import getDataset from '../utils/dom/getDataset';
+import { getDirectionClass } from '../utils/classname';
+
+var Tab =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Tab, _PureComponent);
+
+  function Tab(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "uid", void 0);
+
+    _this.getActiveStyle = _this.getActiveStyle.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.uid = "tab_unique_" + getUidStr();
+    return _this;
+  }
+
+  var _proto = Tab.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+
+    defer(function () {
+      if (_this2.props.isActive) _this2.handleClick(true);
+    });
+  };
+
+  _proto.getActiveStyle = function getActiveStyle() {
+    var _this$props = this.props,
+        shape = _this$props.shape,
+        align = _this$props.align,
+        background = _this$props.background,
+        color = _this$props.color,
+        border = _this$props.border,
+        isActive = _this$props.isActive,
+        isVertical = _this$props.isVertical;
+    if (shape === 'line' || shape === 'dash') return {};
+    var style = {
+      background: background,
+      color: color
+    };
+    if (shape === 'bordered') return {
+      background: background
+    };
+    if (shape !== 'line' && !isVertical) style.borderColor = border + " " + border + " " + (isActive ? background : border) + " " + border;
+    if (shape !== 'line' && align === 'vertical-left') style.borderColor = border + " " + (isActive ? background : border) + "  " + border + " " + border;
+    if (shape !== 'line' && align === 'vertical-right') style.borderColor = border + " " + border + " " + border + " " + (isActive ? background : border);
+    return style;
+  };
+
+  _proto.handleClick = function handleClick(init) {
+    var _this$props2 = this.props,
+        onClick = _this$props2.onClick,
+        id = _this$props2.id,
+        isActive = _this$props2.isActive,
+        disabled = _this$props2.disabled,
+        last = _this$props2.last;
+    if (disabled) return;
+    if (init !== true) onClick(id, isActive);
+
+    if (!this.element) {
+      this.element = document.querySelector("." + this.uid);
+    }
+
+    if (this.element && this.element.getBoundingClientRect) {
+      this.props.moveToCenter(this.element.getBoundingClientRect(), last, id === 0);
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        isActive = _this$props3.isActive,
+        disabled = _this$props3.disabled,
+        children = _this$props3.children,
+        shape = _this$props3.shape,
+        otherProps = _objectWithoutPropertiesLoose(_this$props3, ["isActive", "disabled", "children", "shape"]);
+
+    var style = this.getActiveStyle();
+    var isBordered = shape === 'bordered';
+
+    var props = _objectSpread({
+      className: classnames(tabsClass('tab', isActive && (isBordered ? 'tab-bordered-active' : 'active'), disabled && 'disabled', isBordered && getDirectionClass('tab-bordered')), this.uid),
+      onClick: this.handleClick,
+      style: style
+    }, getDataset(otherProps));
+
+    if (children.type && children.type.isTabLink) {
+      return React.cloneElement(children, _objectSpread({}, props));
+    }
+
+    return React.createElement("div", props, children);
+  };
+
+  return Tab;
+}(PureComponent);
+
+export default Tab;

package/esm/Tabs/Tabs.d.ts

@@ -0,0 +1,45 @@
+import { ReactElement } from 'react';
+import { PureComponent } from '../component';
+import { TabsProps, TabsBaseValue } from './Props';
+import Panel from './Panel';
+import Link from './Link';
+interface TabsState {
+    active: string | number;
+    collapsed?: boolean;
+}
+declare class Tabs<T extends TabsBaseValue = TabsBaseValue> extends PureComponent<TabsProps<T>, TabsState> {
+    static defaultProps: {
+        defaultCollapsed: boolean;
+        lazy: boolean;
+        hideSplit: boolean;
+    };
+    container: HTMLDivElement | null;
+    sticky: boolean;
+    static Panel: typeof Panel;
+    static Link: typeof Link;
+    static displayName: string;
+    constructor(props: TabsProps<T>);
+    componentDidUpdate(prevProps: TabsProps<T>, prevState: TabsState): void;
+    componentWillUnmount(): void;
+    getAlign(): {
+        align: string;
+        isVertical: boolean;
+    } | {
+        align: "left" | "bottom" | "right" | "vertical-left" | "vertical-right" | undefined;
+        isVertical: boolean | undefined;
+    };
+    getActive(): string | number | T | undefined;
+    setStickyStatus(flag: boolean): void;
+    bindContainer(node: HTMLDivElement): void;
+    handleChange(active: T): void;
+    handleCollapse(collapsed: boolean): void;
+    renderHeader({ align, isVertical }: any): JSX.Element;
+    renderContent(child: ReactElement & {
+        type: {
+            isTabPanel: boolean;
+            isTabLink: boolean;
+        };
+    }, i: number): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default Tabs;

package/esm/Tabs/Tabs.js

@@ -0,0 +1,270 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Children } from 'react';
+import classnames from 'classnames';
+import { PureComponent } from '../component';
+import Header from './Header';
+import getDataset from '../utils/dom/getDataset';
+import Wrapper from './Wrapper';
+import Sticky from '../Sticky';
+import { tabsClass } from './styles';
+import { isEmpty, isObject } from '../utils/is';
+import { isRTL } from '../config';
+import Panel from './Panel';
+import Link from './Link';
+var DefaultValue = {
+  defaultCollapsed: false,
+  lazy: true,
+  hideSplit: false
+};
+
+var Tabs =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Tabs, _PureComponent);
+
+  function Tabs(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "container", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "sticky", void 0);
+
+    _this.state = {
+      active: props.defaultActive || 0,
+      collapsed: props.defaultCollapsed
+    };
+    _this.getAlign = _this.getAlign.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleCollapse = _this.handleCollapse.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderContent = _this.renderContent.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindContainer = _this.bindContainer.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setStickyStatus = _this.setStickyStatus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Tabs.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    var _this$props = this.props,
+        sticky = _this$props.sticky,
+        switchToTop = _this$props.switchToTop,
+        active = _this$props.active;
+
+    if ((prevProps.active !== active || prevState.active !== this.state.active) && this.container && !isEmpty(sticky) && switchToTop && this.sticky) {
+      // jump to active panel
+      this.container.scrollIntoView(true);
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.container = null;
+  };
+
+  _proto.getAlign = function getAlign() {
+    var _this$props2 = this.props,
+        shape = _this$props2.shape,
+        collapsible = _this$props2.collapsible,
+        align = _this$props2.align;
+    var isVertical = align && align.indexOf('vertical') > -1;
+
+    if (shape === 'button' && isVertical) {
+      console.warn("align vertical-* can't supported when shape is button");
+      return {
+        align: 'left',
+        isVertical: false
+      };
+    }
+
+    if (collapsible && isVertical) {
+      console.warn("align vertical-* can't supported when collapsible is true");
+      return {
+        align: 'left',
+        isVertical: false
+      };
+    }
+
+    return {
+      align: align,
+      isVertical: isVertical
+    };
+  };
+
+  _proto.getActive = function getActive() {
+    if ('active' in this.props) return this.props.active;
+    return this.state.active;
+  };
+
+  _proto.setStickyStatus = function setStickyStatus(flag) {
+    var _this$props3 = this.props,
+        sticky = _this$props3.sticky,
+        switchToTop = _this$props3.switchToTop;
+    if (!sticky || !switchToTop) return;
+    this.sticky = flag;
+  };
+
+  _proto.bindContainer = function bindContainer(node) {
+    this.container = node;
+  };
+
+  _proto.handleChange = function handleChange(active) {
+    var onChange = this.props.onChange;
+    if (onChange) onChange(active);
+    this.setState({
+      active: active
+    });
+  };
+
+  _proto.handleCollapse = function handleCollapse(collapsed) {
+    this.setState({
+      collapsed: collapsed
+    });
+  };
+
+  _proto.renderHeader = function renderHeader(_ref) {
+    var _this2 = this;
+
+    var align = _ref.align,
+        isVertical = _ref.isVertical;
+    var _this$props4 = this.props,
+        children = _this$props4.children,
+        color = _this$props4.color,
+        shape = _this$props4.shape,
+        tabBarStyle = _this$props4.tabBarStyle,
+        inactiveBackground = _this$props4.inactiveBackground,
+        collapsible = _this$props4.collapsible,
+        tabBarExtraContent = _this$props4.tabBarExtraContent,
+        sticky = _this$props4.sticky,
+        hideSplit = _this$props4.hideSplit;
+    var active = this.getActive();
+    var tabs = [];
+    var border = this.props.border;
+    Children.toArray(children).forEach(function (child, i, arr) {
+      if (!child || !child.type) return;
+      var tab = null;
+
+      if (child.type.isTabPanel) {
+        // eslint-disable-next-line
+        tab = child.props.tab;
+      } else if (child.type.isTabLink) {
+        tab = child;
+      } else return;
+
+      var _child$props = child.props,
+          _child$props$id = _child$props.id,
+          id = _child$props$id === void 0 ? i : _child$props$id,
+          background = _child$props.background;
+      var childBorder = child.props.border; // eslint-disable-next-line
+
+      if (active === id) {
+        if (childBorder) border = childBorder;else childBorder = border;
+      }
+
+      tabs.push(_objectSpread({
+        id: id,
+        isActive: active === id,
+        tab: tab,
+        isVertical: isVertical,
+        align: align,
+        background: background || (active === id ? _this2.props.background : inactiveBackground),
+        border: childBorder,
+        color: child.props.color || (active === id ? color : undefined),
+        disabled: child.props.disabled,
+        shape: shape,
+        last: arr.length - 1 === i
+      }, getDataset(child.props)));
+    });
+    var header = React.createElement(Header, {
+      isVertical: isVertical,
+      border: border,
+      collapsed: this.state.collapsed,
+      onCollapse: collapsible ? this.handleCollapse : undefined,
+      shape: shape,
+      onChange: this.handleChange,
+      tabs: tabs,
+      tabBarExtraContent: tabBarExtraContent,
+      tabBarStyle: tabBarStyle,
+      hideSplit: hideSplit
+    });
+
+    if (!isEmpty(sticky) && !isVertical) {
+      var stickyClassName = tabsClass('sticky');
+      var stickyProps = {
+        top: 0,
+        className: stickyClassName
+      };
+
+      if (typeof sticky === 'number') {
+        stickyProps.top = sticky;
+      }
+
+      if (isObject(sticky)) {
+        stickyProps = _objectSpread({}, sticky, {
+          className: classnames(stickyClassName, sticky.className)
+        });
+      }
+
+      return React.createElement(Sticky, _extends({
+        onChange: this.setStickyStatus
+      }, stickyProps), header);
+    }
+
+    return header;
+  };
+
+  _proto.renderContent = function renderContent(child, i) {
+    if (!(child && child.type && child.type.isTabPanel)) return null;
+    var _this$props5 = this.props,
+        collapsible = _this$props5.collapsible,
+        lazy = _this$props5.lazy;
+
+    var _child$props2 = child.props,
+        _child$props2$id = _child$props2.id,
+        id = _child$props2$id === void 0 ? i : _child$props2$id,
+        other = _objectWithoutPropertiesLoose(_child$props2, ["id"]);
+
+    return React.createElement(Wrapper, _extends({}, other, {
+      lazy: lazy,
+      collapsed: this.state.collapsed,
+      collapsible: collapsible,
+      id: id,
+      key: id,
+      active: this.getActive()
+    }));
+  };
+
+  _proto.render = function render() {
+    var _this$props6 = this.props,
+        children = _this$props6.children,
+        shape = _this$props6.shape,
+        style = _this$props6.style,
+        autoFill = _this$props6.autoFill;
+    var position = this.getAlign();
+    var align = position.align,
+        isVertical = position.isVertical;
+    var className = classnames(tabsClass('_', align && "align-" + align, isVertical && 'vertical', shape, autoFill && 'auto-fill', isRTL() && 'rtl'), this.props.className);
+    return React.createElement("div", {
+      className: className,
+      style: style,
+      ref: this.bindContainer
+    }, align !== 'vertical-right' && align !== 'bottom' && this.renderHeader(position), Children.toArray(children).map(this.renderContent), (align === 'vertical-right' || align === 'bottom') && this.renderHeader(position));
+  };
+
+  return Tabs;
+}(PureComponent);
+
+_defineProperty(Tabs, "defaultProps", DefaultValue);
+
+_defineProperty(Tabs, "Panel", Panel);
+
+_defineProperty(Tabs, "Link", Link);
+
+_defineProperty(Tabs, "displayName", void 0);
+
+export default Tabs;

package/esm/Tabs/Wrapper.d.ts

@@ -0,0 +1,6 @@
+import { PureComponent } from 'react';
+import { WrapperProps } from './Props';
+declare class Wrapper extends PureComponent<WrapperProps> {
+    render(): JSX.Element;
+}
+export default Wrapper;

package/esm/Tabs/Wrapper.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import Panel from './Panel';
+import { Provider } from '../Sticky/context';
+
+var Wrapper =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Wrapper, _PureComponent);
+
+  function Wrapper() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = Wrapper.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        active = _this$props.active,
+        id = _this$props.id,
+        other = _objectWithoutPropertiesLoose(_this$props, ["active", "id"]);
+
+    return React.createElement(Provider, {
+      value: {
+        needResetPostion: id === active
+      }
+    }, React.createElement(Panel, _extends({}, other, {
+      isActive: id === active
+    })));
+  };
+
+  return Wrapper;
+}(PureComponent);
+
+export default Wrapper;

package/esm/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+import Tabs from './Tabs';
+export default Tabs;

package/esm/Tabs/index.js

@@ -0,0 +1,7 @@
+import Tabs from './Tabs';
+import Panel from './Panel';
+import Link from './Link';
+Tabs.Panel = Panel;
+Tabs.Link = Link;
+Tabs.displayName = 'ShineoutTabs';
+export default Tabs;

package/esm/Tabs/interface.d.ts

@@ -0,0 +1 @@
+export { TabsProps as Props, PanelProps, TabsLinkProps as LinkProps } from './Props';

package/esm/Tabs/interface.js

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

package/esm/Tabs/styles/index.d.ts

@@ -0,0 +1 @@
+export const tabsClass: (...args: any) => string;

package/esm/Tabs/styles/index.js

@@ -0,0 +1,4 @@
+import '../../styles/normalize.less';
+import tabsLess from './tabs.less';
+import genaration from '../../utils/classname';
+export var tabsClass = genaration(tabsLess, 'tabs');