shineout 1.7.1 → 1.8.0-beta.2

package/es/Tabs/Header.js

@@ -1,177 +1,221 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import immer from 'immer'
-import { PureComponent } from '../component'
-import Button from '../Button'
-import icons from '../icons'
-import Tab from './Tab'
-import { tabsClass } from './styles'
-
-const REDUNDANT = 30
-class Header extends PureComponent {
-  constructor(props) {
-    super(props)
-
-    this.state = {
+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 React from 'react';
+import PropTypes from 'prop-types';
+import immer from 'immer';
+import { PureComponent } from '../component';
+import Button from '../Button';
+import icons from '../icons';
+import Tab from './Tab';
+import { tabsClass } from './styles';
+var REDUNDANT = 30;
+
+var Header =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Header, _PureComponent);
+
+  function Header(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
       attribute: 0,
-      overflow: false,
-    }
-
-    this.setPosition = this.setPosition.bind(this)
-    this.bindInner = this.bindElement.bind(this, 'innerElement')
-    this.bindWrapper = this.bindElement.bind(this, 'wrapperElement')
-    this.bindScroll = this.bindElement.bind(this, 'scrollElement')
-    this.renderTab = this.renderTab.bind(this)
-    this.handleClick = this.handleClick.bind(this)
-    this.handlePrevClick = this.handleMove.bind(this, true)
-    this.handleNextClick = this.handleMove.bind(this, false)
-    this.moveToCenter = this.moveToCenter.bind(this)
-    this.handleCollapse = this.handleCollapse.bind(this)
-  }
-
-  componentDidMount() {
-    super.componentDidMount()
-    const { isVertical } = this.props
-    this.setPosition(isVertical)
-  }
-
-  componentDidUpdate() {
-    const { isVertical } = this.props
-    this.setPosition(isVertical)
+      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)));
+    return _this;
   }
 
-  setPosition(isVertical) {
-    const attributeString = isVertical ? 'Height' : 'Width'
-    if (!this.innerElement) return
-    const innerAttribute = this.innerElement[`client${attributeString}`]
-    const scrollAttribute = this.scrollElement[`client${attributeString}`]
-    const { attribute: domAttribute } = this.state
-    this.setState({ overflow: scrollAttribute > domAttribute + innerAttribute, attributeString })
-  }
-
-  bindElement(name, el) {
-    this[name] = el
-  }
+  var _proto = Header.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    var isVertical = this.props.isVertical;
+    this.setPosition(isVertical);
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    var isVertical = this.props.isVertical;
+    this.setPosition(isVertical);
+  };
+
+  _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.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;
+    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();
 
-  handleMove(lt) {
-    const { attributeString, attribute: a } = this.state
-    const innerAttribute = this.innerElement[`client${attributeString}`]
-    const scrollAttribute = this.scrollElement[`client${attributeString}`]
-    let attribute = a + (lt ? -innerAttribute : innerAttribute)
-    if (attribute < 0) attribute = 0
-    if (attribute + innerAttribute > scrollAttribute) attribute = scrollAttribute - innerAttribute
-    this.setState({ attribute })
-  }
-
-  moveToCenter(tabRect, last, first) {
-    const { isVertical } = this.props
-    const positions = isVertical ? ['top', 'bottom'] : ['left', 'right']
-    const rect = this.innerElement.getBoundingClientRect()
     if (tabRect[positions[0]] < rect[positions[0]]) {
-      this.setState(
-        immer(draft => {
-          draft.attribute -= rect[positions[0]] - tabRect[positions[0]] + (first ? 0 : REDUNDANT)
-        })
-      )
+      this.setState(immer(function (draft) {
+        draft.attribute -= rect[positions[0]] - tabRect[positions[0]] + (first ? 0 : REDUNDANT);
+      }));
     } else if (tabRect[positions[1]] > rect[positions[1]]) {
-      this.setState(
-        immer(draft => {
-          draft.attribute +=
-            tabRect[positions[1]] - rect[positions[1]] - (draft.attribute === 0 ? -30 : 0) + (last ? 0 : REDUNDANT)
-        })
-      )
+      this.setState(immer(function (draft) {
+        draft.attribute += tabRect[positions[1]] - rect[positions[1]] - (draft.attribute === 0 ? -30 : 0) + (last ? 0 : REDUNDANT);
+      }));
     }
-  }
+  };
+
+  _proto.handleClick = function handleClick(id, isActive) {
+    var _this2 = this;
 
-  handleClick(id, isActive) {
     if (!isActive) {
-      if (this.props.onChange) this.props.onChange(id)
-      this.ignoreNextCollapse = true
-      setTimeout(() => this.handleCollapse(false), 200)
+      if (this.props.onChange) this.props.onChange(id);
+      this.ignoreNextCollapse = true;
+      setTimeout(function () {
+        return _this2.handleCollapse(false);
+      }, 200);
     }
-  }
+  };
 
-  handleCollapse(e) {
-    const { onCollapse, collapsed } = this.props
-    if (!onCollapse) return
+  _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
+      onCollapse(e);
+      return;
     }
 
     if (this.ignoreNextCollapse) {
-      this.ignoreNextCollapse = false
-      return
+      this.ignoreNextCollapse = false;
+      return;
     }
 
-    onCollapse(!collapsed)
-  }
-
-  renderTab({ tab, id, ...other }) {
-    return (
-      <Tab {...other} key={id} id={id} moveToCenter={this.moveToCenter} onClick={this.handleClick}>
-        {tab}
-      </Tab>
-    )
-  }
-
-  renderButtons() {
-    const { onChange, tabs } = this.props
-    return (
-      <Button.Group className={tabsClass('header-button')}>
-        {tabs.map(tab => (
-          <Button
-            key={tab.id}
-            onClick={tab.isActive ? undefined : onChange.bind(this, tab.id)}
-            className={tabsClass(tab.isActive && 'button-active')}
-            disabled={tab.disabled}
-          >
-            {tab.tab}
-          </Button>
-        ))}
-      </Button.Group>
-    )
-  }
-
-  renderTabs() {
-    const { tabs } = this.props
-    return tabs.map(this.renderTab)
-  }
-
-  render() {
-    const { border, onCollapse, collapsed, isVertical, tabBarExtraContent, tabBarStyle, shape, hideSplit } = this.props
-    const { attribute, overflow } = this.state
-
-    const position = isVertical ? 'Top' : 'Left'
-    const showBorder = shape !== 'bordered' && shape !== 'dash' && !hideSplit
-
-    return (
-      <div onClick={this.handleCollapse} className={tabsClass('header')} style={tabBarStyle || {}}>
-        <div ref={this.bindWrapper} className={tabsClass('header-tabs')}>
-          {onCollapse && <span className={tabsClass('indicator', collapsed && 'collapsed')}>{icons.AngleRight}</span>}
-          {attribute > 0 && (
-            <div onClick={this.handlePrevClick} className={tabsClass('scroll-prev')}>
-              {icons.AngleLeft}
-            </div>
-          )}
-          <div ref={this.bindInner} className={tabsClass('inner')}>
-            <div ref={this.bindScroll} style={{ [`margin${position}`]: -attribute }} className={tabsClass('scroll')}>
-              {shape === 'button' ? this.renderButtons() : this.renderTabs()}
-            </div>
-          </div>
-          {overflow && (
-            <div onClick={this.handleNextClick} className={tabsClass('scroll-next')}>
-              {isVertical ? icons.AngleRight : icons.AngleRight}
-            </div>
-          )}
-        </div>
-        {tabBarExtraContent && <div className={tabsClass('extra')}>{tabBarExtraContent}</div>}
-        {showBorder && shape !== 'button' && <div style={{ borderColor: border }} className={tabsClass('hr')} />}
-      </div>
-    )
-  }
-}
+    onCollapse(!collapsed);
+  };
+
+  _proto.renderTab = function renderTab(_ref) {
+    var tab = _ref.tab,
+        id = _ref.id,
+        other = _objectWithoutPropertiesLoose(_ref, ["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 _ref2;
+
+    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 position = isVertical ? 'Top' : 'Left';
+    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: (_ref2 = {}, _ref2["margin" + position] = -attribute, _ref2),
+      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);
 
 Header.propTypes = {
   border: PropTypes.string,
@@ -183,7 +227,6 @@ Header.propTypes = {
   tabs: PropTypes.array,
   tabBarExtraContent: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   tabBarStyle: PropTypes.object,
-  hideSplit: PropTypes.bool,
-}
-
-export default Header
+  hideSplit: PropTypes.bool
+};
+export default Header;

package/es/Tabs/Link.js

@@ -1,40 +1,58 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { tabsClass } from './styles'
-import { isLink } from '../utils/is'
-
-class Link extends PureComponent {
-  render() {
-    const { children, href, className, ...other } = this.props
-    const mergeClass = classnames(className, tabsClass('link'))
-
-    const props = {
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+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,
-      ...other,
-    }
+      href: href
+    }, other);
 
     if (isLink(children)) {
       if (children.props.onClick) {
-        props.onClick = () => {
-          children.props.onClick()
-          other.onClick()
-        }
+        props.onClick = function () {
+          children.props.onClick();
+          other.onClick();
+        };
       }
-      return React.cloneElement(children, { ...props })
+
+      return React.cloneElement(children, _objectSpread({}, props));
     }
 
-    return <a {...props}>{children}</a>
-  }
-}
+    return React.createElement("a", props, children);
+  };
 
-Link.isTabLink = true
+  return Link;
+}(PureComponent);
 
+Link.isTabLink = true;
 Link.propTypes = {
   className: PropTypes.string,
   href: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-}
-
-export default Link
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+};
+export default Link;

package/es/Tabs/Panel.js

@@ -1,39 +1,56 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import List from '../AnimationList'
-import { tabsClass } from './styles'
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import List from '../AnimationList';
+import { tabsClass } from './styles';
+var CollapseList = List(['collapse'], 'fast');
 
-const CollapseList = List(['collapse'], 'fast')
+var Panel =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Panel, _PureComponent);
 
-class Panel extends PureComponent {
-  constructor(props) {
-    super(props)
-    this.isPristine = true
-  }
-
-  render() {
-    const { children, background, color, isActive, collapsible, collapsed, lazy } = this.props
-    if (!isActive && this.isPristine && lazy) return null
-    this.isPristine = false
-
-    const style = Object.assign({ background: background || '#fff', color }, this.props.style)
-    const className = classnames(tabsClass('panel', isActive && 'show'), this.props.className)
+  function Panel(props) {
+    var _this;
 
-    const result = (
-      <div style={style} className={className}>
-        {children}
-      </div>
-    )
+    _this = _PureComponent.call(this, props) || this;
+    _this.isPristine = true;
+    return _this;
+  }
 
-    if (!collapsible) return result
+  var _proto = Panel.prototype;
 
-    return <CollapseList show={!collapsed}>{result}</CollapseList>
-  }
-}
+  _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);
+  };
 
-Panel.isTabPanel = true
+  return Panel;
+}(PureComponent);
 
+Panel.isTabPanel = true;
 Panel.propTypes = {
   background: PropTypes.string,
   className: PropTypes.string,
@@ -43,7 +60,6 @@ Panel.propTypes = {
   children: PropTypes.any,
   isActive: PropTypes.bool,
   style: PropTypes.object,
-  lazy: PropTypes.bool,
-}
-
-export default Panel
+  lazy: PropTypes.bool
+};
+export default Panel;