shineout 1.7.1 → 1.8.0-beta.2

package/es/Tabs/Wrapper.js

@@ -1,23 +1,43 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Panel from './Panel'
-import { Provider } from '../Sticky/context'
+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 PropTypes from 'prop-types';
+import Panel from './Panel';
+import { Provider } from '../Sticky/context';
 
-class Wrapper extends PureComponent {
-  render() {
-    const { active, id, ...other } = this.props
-    return (
-      <Provider value={{ needResetPostion: id === active }}>
-        <Panel {...other} isActive={id === active} />
-      </Provider>
-    )
+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);
 
 Wrapper.propTypes = {
   active: PropTypes.any,
   children: PropTypes.any,
-  id: PropTypes.any,
-}
-
-export default Wrapper
+  id: PropTypes.any
+};
+export default Wrapper;

package/es/Tabs/index.js

@@ -1,10 +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
+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/es/Tabs/styles/index.js

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

package/es/Tag/Input.js

@@ -1,63 +1,80 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { PureComponent } from '../component'
-import inputBorder from '../hoc/inputBorder'
-import { tagClass } from './styles'
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PureComponent } from '../component';
+import inputBorder from '../hoc/inputBorder';
+import { tagClass } from './styles';
 
-class TagInput extends PureComponent {
-  constructor(props) {
-    super(props)
-    this.bindRef = this.bindRef.bind(this)
-    this.handleChange = this.handleChange.bind(this)
-    this.handleBlur = this.handleBlur.bind(this)
-    this.handleKeyUp = this.handleKeyUp.bind(this)
-  }
+var TagInput =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(TagInput, _PureComponent);
 
-  componentDidMount() {
-    super.componentDidMount()
-    if (this.element) this.element.focus()
-  }
+  function TagInput(props) {
+    var _this;
 
-  bindRef(el) {
-    this.element = el
+    _this = _PureComponent.call(this, props) || this;
+    _this.bindRef = _this.bindRef.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
   }
 
-  handleChange(e) {
-    const { value } = e.target
-    const { onChange } = this.props
-    if (onChange) onChange(value)
-  }
+  var _proto = TagInput.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    if (this.element) this.element.focus();
+  };
+
+  _proto.bindRef = function bindRef(el) {
+    this.element = el;
+  };
+
+  _proto.handleChange = function handleChange(e) {
+    var value = e.target.value;
+    var onChange = this.props.onChange;
+    if (onChange) onChange(value);
+  };
+
+  _proto.handleKeyUp = function handleKeyUp(e) {
+    var _this$props = this.props,
+        onBlur = _this$props.onBlur,
+        onKeyUp = _this$props.onKeyUp,
+        onEnterPress = _this$props.onEnterPress;
 
-  handleKeyUp(e) {
-    const { onBlur, onKeyUp, onEnterPress } = this.props
     if (e.keyCode === 13) {
-      if (onEnterPress) onEnterPress(e.target.value, e)
-      else if (onBlur) onBlur(e.target.value, e)
+      if (onEnterPress) onEnterPress(e.target.value, e);else if (onBlur) onBlur(e.target.value, e);
     }
-    if (onKeyUp) onKeyUp(e)
-  }
 
-  handleBlur(e) {
-    const { onBlur } = this.props
-    if (onBlur) onBlur(e.target.value, e)
-  }
+    if (onKeyUp) onKeyUp(e);
+  };
 
-  render() {
-    const { value, onFocus } = this.props
+  _proto.handleBlur = function handleBlur(e) {
+    var onBlur = this.props.onBlur;
+    if (onBlur) onBlur(e.target.value, e);
+  };
 
-    return (
-      <input
-        ref={this.bindRef}
-        type="text"
-        value={value}
-        onFocus={onFocus}
-        onChange={this.handleChange}
-        onKeyUp={this.handleKeyUp}
-        onBlur={this.handleBlur}
-      />
-    )
-  }
-}
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        value = _this$props2.value,
+        onFocus = _this$props2.onFocus;
+    return React.createElement("input", {
+      ref: this.bindRef,
+      type: "text",
+      value: value,
+      onFocus: onFocus,
+      onChange: this.handleChange,
+      onKeyUp: this.handleKeyUp,
+      onBlur: this.handleBlur
+    });
+  };
+
+  return TagInput;
+}(PureComponent);
 
 TagInput.propTypes = {
   value: PropTypes.string,
@@ -65,9 +82,8 @@ TagInput.propTypes = {
   onChange: PropTypes.func,
   onKeyUp: PropTypes.func,
   onEnterPress: PropTypes.func,
-  onFocus: PropTypes.func,
-}
-
+  onFocus: PropTypes.func
+};
 export default inputBorder({
-  className: tagClass('input'),
-})(TagInput)
+  className: tagClass('input')
+})(TagInput);

package/es/Tag/Tag.js

@@ -1,188 +1,230 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { PureComponent } from '../component'
-import Input from './Input'
-import { getProps, defaultProps } from '../utils/proptypes'
-import Spin from '../Spin'
-import icons from '../icons'
-import { wrapSpan } from '../utils/dom/element'
-import { isPromise, isFunc, isString, isEmpty } from '../utils/is'
-import { isDark } from '../utils/color'
-import { tagClass } from './styles'
-import { isRTL } from '../config'
-import getDataset from '../utils/dom/getDataset'
-
-const hideInput = 0
-const showInput = 1
-
-class Tag extends PureComponent {
-  constructor(props) {
-    super(props)
-
-    this.state = {
+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 React from 'react';
+import PropTypes from 'prop-types';
+import { PureComponent } from '../component';
+import Input from './Input';
+import { getProps, defaultProps } from '../utils/proptypes';
+import Spin from '../Spin';
+import icons from '../icons';
+import { wrapSpan } from '../utils/dom/element';
+import { isPromise, isFunc, isString, isEmpty } from '../utils/is';
+import { isDark } from '../utils/color';
+import { tagClass } from './styles';
+import { isRTL } from '../config';
+import getDataset from '../utils/dom/getDataset';
+var hideInput = 0;
+var showInput = 1;
+
+var Tag =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Tag, _PureComponent);
+
+  function Tag(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
       dismiss: 0,
-      inputVisible: hideInput, // tag input status
-      value: null,
-    }
-
-    this.dismiss = this.dismiss.bind(this)
-    this.handleClick = this.handleClick.bind(this)
-    this.handleClose = this.handleClose.bind(this)
-    this.renderClose = this.renderClose.bind(this)
-    this.closeTag = this.closeTag.bind(this)
-    this.toggleInputVisible = this.toggleInputVisible.bind(this)
-    this.inputBlur = this.inputBlur.bind(this)
-    this.inputChange = this.inputChange.bind(this)
+      inputVisible: hideInput,
+      // tag input status
+      value: null
+    };
+    _this.dismiss = _this.dismiss.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClose = _this.handleClose.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderClose = _this.renderClose.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.closeTag = _this.closeTag.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.toggleInputVisible = _this.toggleInputVisible.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.inputBlur = _this.inputBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.inputChange = _this.inputChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
   }
 
-  componentDidMount() {
-    const { children, onCompleted } = this.props
+  var _proto = Tag.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        onCompleted = _this$props.onCompleted;
+
     if (onCompleted && isString(children) && !isEmpty(children)) {
-      this.setState({ value: children })
+      this.setState({
+        value: children
+      });
     }
-  }
+  };
 
-  closeTag(dismiss = 2) {
-    this.setState({ dismiss })
-  }
+  _proto.closeTag = function closeTag(dismiss) {
+    if (dismiss === void 0) {
+      dismiss = 2;
+    }
+
+    this.setState({
+      dismiss: dismiss
+    });
+  };
+
+  _proto.dismiss = function dismiss(e) {
+    var _this2 = this;
+
+    var onClose = this.props.onClose;
+    var callback;
 
-  dismiss(e) {
-    const { onClose } = this.props
-    let callback
     if (onClose === true) {
-      this.closeTag()
-      return
+      this.closeTag();
+      return;
     }
+
     if (typeof onClose === 'function') {
-      callback = onClose(e)
+      callback = onClose(e);
     }
+
     if (isPromise(callback)) {
-      this.setState({ dismiss: 1 })
-      callback
-        .then(() => {
-          this.closeTag()
-        })
-        .catch(() => {
-          this.closeTag(0)
-        })
-      return
+      this.setState({
+        dismiss: 1
+      });
+      callback.then(function () {
+        _this2.closeTag();
+      }).catch(function () {
+        _this2.closeTag(0);
+      });
+      return;
     }
+
     if (e.defaultPrevented) {
-      return
+      return;
     }
-    this.closeTag()
-  }
 
-  inputBlur(value) {
-    const { onCompleted } = this.props
-    if (isFunc(onCompleted)) onCompleted(value)
-    this.setState({ inputVisible: hideInput })
-  }
-
-  inputChange(value) {
-    this.setState({ value })
-  }
-
-  toggleInputVisible() {
-    const { inputVisible, value } = this.state
-    const { onCompleted } = this.props
-    // if onCompleted is not null
-    if (onCompleted && !isEmpty(value))
-      this.setState({ inputVisible: inputVisible === hideInput ? showInput : hideInput })
-  }
-
-  handleClick(e) {
-    const { onClick, disabled } = this.props
-    if (disabled) return
-
-    // toggle input visible
-    this.toggleInputVisible()
+    this.closeTag();
+  };
+
+  _proto.inputBlur = function inputBlur(value) {
+    var onCompleted = this.props.onCompleted;
+    if (isFunc(onCompleted)) onCompleted(value);
+    this.setState({
+      inputVisible: hideInput
+    });
+  };
+
+  _proto.inputChange = function inputChange(value) {
+    this.setState({
+      value: value
+    });
+  };
+
+  _proto.toggleInputVisible = function toggleInputVisible() {
+    var _this$state = this.state,
+        inputVisible = _this$state.inputVisible,
+        value = _this$state.value;
+    var onCompleted = this.props.onCompleted; // if onCompleted is not null
+
+    if (onCompleted && !isEmpty(value)) this.setState({
+      inputVisible: inputVisible === hideInput ? showInput : hideInput
+    });
+  };
+
+  _proto.handleClick = function handleClick(e) {
+    var _this$props2 = this.props,
+        onClick = _this$props2.onClick,
+        disabled = _this$props2.disabled;
+    if (disabled) return; // toggle input visible
+
+    this.toggleInputVisible();
 
     if (typeof onClick === 'function') {
-      onClick(e)
+      onClick(e);
     }
-  }
+  };
 
-  handleClose(e) {
-    const { disabled } = this.props
-    if (this.state.dismiss > 0 || disabled) return
-    this.dismiss(e)
-  }
+  _proto.handleClose = function handleClose(e) {
+    var disabled = this.props.disabled;
+    if (this.state.dismiss > 0 || disabled) return;
+    this.dismiss(e);
+  };
+
+  _proto.renderClose = function renderClose(dismiss) {
+    var onClose = this.props.onClose;
+    if (!onClose) return null;
+    var closeClass = tagClass('close-icon');
+    var loadingClass = tagClass('close-loading');
 
-  renderClose(dismiss) {
-    const { onClose } = this.props
-    if (!onClose) return null
-    const closeClass = tagClass('close-icon')
-    const loadingClass = tagClass('close-loading')
     if (dismiss === 0) {
-      return (
-        <div className={closeClass} onClick={this.handleClose}>
-          {icons.Close}
-        </div>
-      )
+      return React.createElement("div", {
+        className: closeClass,
+        onClick: this.handleClose
+      }, icons.Close);
     }
-    return (
-      <div className={loadingClass}>
-        <Spin name="ring" size={10} />
-      </div>
-    )
-  }
-
-  render() {
-    const { dismiss, inputVisible, value } = this.state
-    if (dismiss === 2) return null
-
-    const { children, className, type, backgroundColor, onClose, disabled, onCompleted } = this.props
 
-    const rtl = isRTL()
+    return React.createElement("div", {
+      className: loadingClass
+    }, React.createElement(Spin, {
+      name: "ring",
+      size: 10
+    }));
+  };
+
+  _proto.render = function render() {
+    var _this$state2 = this.state,
+        dismiss = _this$state2.dismiss,
+        inputVisible = _this$state2.inputVisible,
+        value = _this$state2.value;
+    if (dismiss === 2) return null;
+    var _this$props3 = this.props,
+        children = _this$props3.children,
+        className = _this$props3.className,
+        type = _this$props3.type,
+        backgroundColor = _this$props3.backgroundColor,
+        onClose = _this$props3.onClose,
+        disabled = _this$props3.disabled,
+        onCompleted = _this$props3.onCompleted;
+    var rtl = isRTL(); // if editable and input visible
+
+    if (onCompleted && inputVisible === showInput) return React.createElement(Input, {
+      value: value,
+      onBlur: this.inputBlur,
+      onChange: this.inputChange
+    });
+    var childrenParsed = wrapSpan(children);
+    var style = this.props.style;
+    var tagClassName = tagClass('_', disabled && 'disabled', type, rtl && 'rtl');
+    var inlineClassName = tagClass('inline');
+    var click = !onClose ? {
+      onClick: this.handleClick
+    } : {};
+    var tagStyle = style || {};
+    if (className) tagClassName += " " + className;
 
-    // if editable and input visible
-    if (onCompleted && inputVisible === showInput)
-      return <Input value={value} onBlur={this.inputBlur} onChange={this.inputChange} />
-
-    const childrenParsed = wrapSpan(children)
-    const { style } = this.props
-
-    let tagClassName = tagClass('_', disabled && 'disabled', type, rtl && 'rtl')
-    const inlineClassName = tagClass('inline')
-    const click = !onClose ? { onClick: this.handleClick } : {}
-    let tagStyle = style || {}
-
-    if (className) tagClassName += ` ${className}`
     if (backgroundColor) {
-      tagStyle = {
+      tagStyle = _objectSpread({
         color: isDark(backgroundColor) ? '#fff' : '#000',
-        backgroundColor,
-        borderColor: 'transparent',
-        ...style,
-      }
+        backgroundColor: backgroundColor,
+        borderColor: 'transparent'
+      }, style);
     }
-    return (
-      <div className={tagClassName} style={tagStyle} {...click} {...getDataset(this.props)}>
-        {onClose ? (
-          <div onClick={this.handleClick} className={inlineClassName}>
-            {childrenParsed}
-          </div>
-        ) : (
-          childrenParsed
-        )}
-        {this.renderClose(dismiss)}
-      </div>
-    )
-  }
-}
 
-Tag.propTypes = {
-  ...getProps(PropTypes, 'type'),
+    return React.createElement("div", _extends({
+      className: tagClassName,
+      style: tagStyle
+    }, click, getDataset(this.props)), onClose ? React.createElement("div", {
+      onClick: this.handleClick,
+      className: inlineClassName
+    }, childrenParsed) : childrenParsed, this.renderClose(dismiss));
+  };
+
+  return Tag;
+}(PureComponent);
+
+Tag.propTypes = _objectSpread({}, getProps(PropTypes, 'type'), {
   children: PropTypes.any,
   onClose: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   backgroundColor: PropTypes.string,
-  onCompleted: PropTypes.func,
-}
-
-Tag.defaultProps = {
-  ...defaultProps,
-  type: 'default',
-}
-
-export default Tag
+  onCompleted: PropTypes.func
+});
+Tag.defaultProps = _objectSpread({}, defaultProps, {
+  type: 'default'
+});
+export default Tag;

package/es/Tag/index.js

@@ -1,8 +1,5 @@
-import Tag from './Tag'
-import Input from './Input'
-
-Tag.Input = Input
-
-Tag.displayName = 'ShinoutTag'
-
-export default Tag
+import Tag from './Tag';
+import Input from './Input';
+Tag.Input = Input;
+Tag.displayName = 'ShinoutTag';
+export default Tag;

package/es/Tag/styles/index.js

@@ -1,4 +1,3 @@
-import tagLess from './tag.less'
-import genaration from '../../utils/classname'
-
-export const tagClass = genaration(tagLess, 'tag')
+import tagLess from './tag.less';
+import genaration from '../../utils/classname';
+export var tagClass = genaration(tagLess, 'tag');