shineout 1.12.3 → 1.12.4-beta.2

package/esm/Tabs/Tab.js

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

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

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

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

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

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

package/esm/Tabs/index.js

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

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

package/esm/Tabs/interface.js

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

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

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

package/esm/Tabs/styles/index.js

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