shineout 1.7.0 → 1.7.1-beta.3

package/es/Cascader/Result.js

@@ -1,277 +1,335 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { inputClass } from '../Input/styles'
-import { selectClass } from '../Select/styles'
-import { cascaderClass } from './styles'
-import Input from './Input'
-import icons from '../icons'
-import More, { getResetMore } from '../Select/More'
-import { addResizeObserver } from '../utils/dom/element'
-import { isEmpty } from '../utils/is'
-import { CHANGE_TOPIC } from '../Datum/types'
-import Caret from '../icons/Caret'
-
-// eslint-disable-next-line react/prop-types
-function Item({ children, close, className, data, isPopover, singleRemove, click }) {
-  const onClose = close
-    ? e => {
-        close(data, isPopover, e)
-      }
-    : undefined
-  const onClick = click
-    ? () => {
-        click(data, isPopover)
-      }
-    : undefined
-  return (
-    <a tabIndex={-1} className={classnames(cascaderClass('item'), className)} onClick={onClick}>
-      {children}
-      {singleRemove && (
-        <span className={cascaderClass('single-remove')} onClick={onClose}>
-          {icons.Close}
-        </span>
-      )}
-    </a>
-  )
+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, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { inputClass } from '../Input/styles';
+import { selectClass } from '../Select/styles';
+import { cascaderClass } from './styles';
+import Input from './Input';
+import icons from '../icons';
+import More, { getResetMore } from '../Select/More';
+import { addResizeObserver } from '../utils/dom/element';
+import { isEmpty } from '../utils/is';
+import { CHANGE_TOPIC } from '../Datum/types';
+import Caret from '../icons/Caret'; // eslint-disable-next-line react/prop-types
+
+function Item(_ref) {
+  var children = _ref.children,
+      close = _ref.close,
+      className = _ref.className,
+      data = _ref.data,
+      isPopover = _ref.isPopover,
+      singleRemove = _ref.singleRemove,
+      click = _ref.click;
+  var onClose = close ? function (e) {
+    close(data, isPopover, e);
+  } : undefined;
+  var onClick = click ? function () {
+    click(data, isPopover);
+  } : undefined;
+  return React.createElement("a", {
+    tabIndex: -1,
+    className: classnames(cascaderClass('item'), className),
+    onClick: onClick
+  }, children, singleRemove && React.createElement("span", {
+    className: cascaderClass('single-remove'),
+    onClick: onClose
+  }, icons.Close));
 }
 
-class Result extends PureComponent {
-  constructor(props) {
-    super(props)
-    this.state = {
-      more: -1,
-    }
+var Result =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Result, _PureComponent);
+
+  function Result(props) {
+    var _this;
 
-    this.handleNodeClick = this.handleNodeClick.bind(this)
-    this.renderItem = this.renderItem.bind(this)
-    this.removeTargetNode = this.removeTargetNode.bind(this)
-    this.handleUpdate = this.handleUpdate.bind(this)
-    this.bindResult = this.bindResult.bind(this)
-    this.resetMore = this.resetMore.bind(this)
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      more: -1
+    };
+    _this.handleNodeClick = _this.handleNodeClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderItem = _this.renderItem.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.removeTargetNode = _this.removeTargetNode.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleUpdate = _this.handleUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindResult = _this.bindResult.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.resetMore = _this.resetMore.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
   }
 
-  componentDidMount() {
-    const { datum } = this.props
-    datum.subscribe(CHANGE_TOPIC, this.handleUpdate)
-    const { compressed } = this.props
+  var _proto = Result.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var datum = this.props.datum;
+    datum.subscribe(CHANGE_TOPIC, this.handleUpdate);
+    var compressed = this.props.compressed;
+
     if (compressed) {
-      this.cancelResizeObserver = addResizeObserver(this.resultEl, this.resetMore)
+      this.cancelResizeObserver = addResizeObserver(this.resultEl, this.resetMore);
     }
-  }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(preProps) {
+    var _this$props = this.props,
+        compressed = _this$props.compressed,
+        _this$props$value = _this$props.value,
+        value = _this$props$value === void 0 ? [] : _this$props$value,
+        onFilter = _this$props.onFilter;
 
-  componentDidUpdate(preProps) {
-    const { compressed, value = [], onFilter } = this.props
     if (compressed) {
       if ((preProps.value || []).join('') !== value.join('')) {
-        this.resetMore()
+        this.resetMore();
       } else if (value.length && this.shouldResetMore) {
-        this.shouldResetMore = false
-        this.state.more = getResetMore(
-          onFilter,
-          this.resultEl,
-          this.resultEl.querySelectorAll(`.${cascaderClass('item')}`)
-        )
-        this.forceUpdate()
+        this.shouldResetMore = false;
+        this.state.more = getResetMore(onFilter, this.resultEl, this.resultEl.querySelectorAll("." + cascaderClass('item')));
+        this.forceUpdate();
       }
     }
-  }
+  };
 
-  componentWillUnmount() {
-    const { datum } = this.props
-    datum.unsubscribe(CHANGE_TOPIC, this.handleUpdate)
-    if (this.cancelResizeObserver) this.cancelResizeObserver()
-  }
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    var datum = this.props.datum;
+    datum.unsubscribe(CHANGE_TOPIC, this.handleUpdate);
+    if (this.cancelResizeObserver) this.cancelResizeObserver();
+  };
 
-  handleUpdate() {
-    this.forceUpdate()
-  }
+  _proto.handleUpdate = function handleUpdate() {
+    this.forceUpdate();
+  };
 
-  bindResult(el) {
-    this.resultEl = el
-  }
+  _proto.bindResult = function bindResult(el) {
+    this.resultEl = el;
+  };
 
-  resetMore() {
-    if (!this.props.compressed) return
-    this.shouldResetMore = true
-    this.state.more = -1
-    this.forceUpdate()
-  }
+  _proto.resetMore = function resetMore() {
+    if (!this.props.compressed) return;
+    this.shouldResetMore = true;
+    this.state.more = -1;
+    this.forceUpdate();
+  };
+
+  _proto.handleNodeClick = function handleNodeClick(data, show) {
+    if (show === void 0) {
+      show = false;
+    }
+
+    var id = this.props.datum.getKey(data);
+
+    var _ref2 = this.props.datum.getPath(id) || {},
+        path = _ref2.path;
+
+    if (!path) return;
+    this.props.onPathChange(id, null, path);
 
-  handleNodeClick(data, show = false) {
-    const id = this.props.datum.getKey(data)
-    const { path } = this.props.datum.getPath(id) || {}
-    if (!path) return
-    this.props.onPathChange(id, null, path)
     if (show) {
-      this.props.showList()
+      this.props.showList();
     }
-  }
+  };
 
-  handleNode(nodes, render) {
-    const { singleRemove } = this.props
-
-    const removeContainerClassName = cascaderClass(singleRemove && 'remove-container')
-
-    return nodes
-      .map((n, i) =>
-        this.renderItem({
-          className: removeContainerClassName,
-          index: i,
-          data: n,
-          raw: nodes,
-          render,
-        })
-      )
-      .filter(n => !isEmpty(n))
-  }
+  _proto.handleNode = function handleNode(nodes, render) {
+    var _this2 = this;
+
+    var singleRemove = this.props.singleRemove;
+    var removeContainerClassName = cascaderClass(singleRemove && 'remove-container');
+    return nodes.map(function (n, i) {
+      return _this2.renderItem({
+        className: removeContainerClassName,
+        index: i,
+        data: n,
+        raw: nodes,
+        render: render
+      });
+    }).filter(function (n) {
+      return !isEmpty(n);
+    });
+  };
+
+  _proto.removeTargetNode = function removeTargetNode() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var node = args[0],
+        isPopover = args[1],
+        event = args[2];
 
-  removeTargetNode(...args) {
-    const [node, isPopover, event] = args
     if (isPopover) {
-      event.stopPropagation()
+      event.stopPropagation();
     }
-    const { handleRemove } = this.props
-    handleRemove(node)
-  }
 
-  renderClear() {
-    const { clearable, value, disabled, onClear } = this.props
-    const className = classnames(selectClass('indicator', 'close'), cascaderClass('close'))
+    var handleRemove = this.props.handleRemove;
+    handleRemove(node);
+  };
+
+  _proto.renderClear = function renderClear() {
+    var _this$props2 = this.props,
+        clearable = _this$props2.clearable,
+        value = _this$props2.value,
+        disabled = _this$props2.disabled,
+        onClear = _this$props2.onClear;
+    var className = classnames(selectClass('indicator', 'close'), cascaderClass('close'));
 
     if (clearable && value.length > 0 && !disabled) {
       /* eslint-disable */
-      return (
-        <a
-          tabIndex={-1}
-          className={className}
-          onClick={onClear}
-        />
-      )
+      return React.createElement("a", {
+        tabIndex: -1,
+        className: className,
+        onClick: onClear
+      });
       /* eslint-enable */
     }
 
-    return null
-  }
+    return null;
+  };
 
-  renderItem({ index, render, data, raw, className, ...options }) {
-    const { singleRemove } = this.props
-    const itemClassName = classnames(className, cascaderClass(singleRemove && 'remove-container'))
-    const res = data && render(data, raw)
-    if (!res) return null
-    return (
-      <Item
-        key={index}
-        {...options}
-        data={data}
-        className={itemClassName}
-        singleRemove={singleRemove}
-        close={this.removeTargetNode}
-        isPopover
-        click={this.handleNodeClick}
-      >
-        {res}
-      </Item>
-    )
-  }
+  _proto.renderItem = function renderItem(_ref3) {
+    var index = _ref3.index,
+        render = _ref3.render,
+        data = _ref3.data,
+        raw = _ref3.raw,
+        className = _ref3.className,
+        options = _objectWithoutPropertiesLoose(_ref3, ["index", "render", "data", "raw", "className"]);
 
-  renderMore(list) {
-    const { selectId, size, compressed } = this.props
-    const { more } = this.state
-    return [
-      <More
-        key="more"
-        data={list}
-        className={cascaderClass('item', 'item-compressed')}
-        popoverClassName={cascaderClass('popover')}
-        contentClassName={cascaderClass('result', size)}
-        dataId={selectId}
-        showNum={more}
-        compressed={compressed}
-      />,
-    ]
-  }
+    var singleRemove = this.props.singleRemove;
+    var itemClassName = classnames(className, cascaderClass(singleRemove && 'remove-container'));
+    var res = data && render(data, raw);
+    if (!res) return null;
+    return React.createElement(Item, _extends({
+      key: index
+    }, options, {
+      data: data,
+      className: itemClassName,
+      singleRemove: singleRemove,
+      close: this.removeTargetNode,
+      isPopover: true,
+      click: this.handleNodeClick
+    }), res);
+  };
 
-  renderInput() {
-    const { onFilter, focus, trim, focusSelected, bindInput, filterText } = this.props
-    return (
-      <Input
-        filterText={filterText}
-        ref={bindInput}
-        trim={trim}
-        key={`input.${focus ? 1 : 0}`}
-        focus
-        onFilter={onFilter}
-        focusSelected={focusSelected}
-      />
-    )
-  }
+  _proto.renderMore = function renderMore(list) {
+    var _this$props3 = this.props,
+        selectId = _this$props3.selectId,
+        size = _this$props3.size,
+        compressed = _this$props3.compressed;
+    var more = this.state.more;
+    return [React.createElement(More, {
+      key: "more",
+      data: list,
+      className: cascaderClass('item', 'item-compressed'),
+      popoverClassName: cascaderClass('popover'),
+      contentClassName: cascaderClass('result', size),
+      dataId: selectId,
+      showNum: more,
+      compressed: compressed
+    })];
+  };
+
+  _proto.renderInput = function renderInput() {
+    var _this$props4 = this.props,
+        onFilter = _this$props4.onFilter,
+        focus = _this$props4.focus,
+        trim = _this$props4.trim,
+        focusSelected = _this$props4.focusSelected,
+        bindInput = _this$props4.bindInput,
+        filterText = _this$props4.filterText;
+    return React.createElement(Input, {
+      filterText: filterText,
+      ref: bindInput,
+      trim: trim,
+      key: "input." + (focus ? 1 : 0),
+      focus: true,
+      onFilter: onFilter,
+      focusSelected: focusSelected
+    });
+  };
+
+  _proto.renderPlaceholder = function renderPlaceholder() {
+    var _this$props5 = this.props,
+        focus = _this$props5.focus,
+        onFilter = _this$props5.onFilter;
 
-  renderPlaceholder() {
-    const { focus, onFilter } = this.props
     if (focus && onFilter) {
-      return this.renderInput()
+      return this.renderInput();
     }
-    return (
-      <span key="placeholder" className={classnames(inputClass('placeholder'), selectClass('ellipsis'))}>
-        {this.props.placeholder}
-        &nbsp;
-      </span>
-    )
-  }
 
-  renderIndicator() {
-    const { multiple, showArrow, compressed } = this.props
-    if (!showArrow || (multiple && !compressed)) return null
-    const showCaret = !multiple
-    // eslint-disable-next-line
-    return (
-      <a key="indicator" tabIndex={-1} className={selectClass('indicator', multiple ? 'multi' : 'caret')}>
-        {showCaret && <Caret />}
-      </a>
-    )
-  }
+    return React.createElement("span", {
+      key: "placeholder",
+      className: classnames(inputClass('placeholder'), selectClass('ellipsis'))
+    }, this.props.placeholder, "\xA0");
+  };
+
+  _proto.renderIndicator = function renderIndicator() {
+    var _this$props6 = this.props,
+        multiple = _this$props6.multiple,
+        showArrow = _this$props6.showArrow,
+        compressed = _this$props6.compressed;
+    if (!showArrow || multiple && !compressed) return null;
+    var showCaret = !multiple; // eslint-disable-next-line
+
+    return React.createElement("a", {
+      key: "indicator",
+      tabIndex: -1,
+      className: selectClass('indicator', multiple ? 'multi' : 'caret')
+    }, showCaret && React.createElement(Caret, null));
+  };
+
+  _proto.renderResult = function renderResult() {
+    var _this$props7 = this.props,
+        datum = _this$props7.datum,
+        value = _this$props7.value,
+        renderItem = _this$props7.renderItem,
+        renderResult = _this$props7.renderResult,
+        compressed = _this$props7.compressed,
+        focus = _this$props7.focus,
+        onFilter = _this$props7.onFilter;
+    var nodes = value.map(function (v) {
+      return datum.getDataById(v);
+    });
+    var render = renderResult || renderItem;
 
-  renderResult() {
-    const { datum, value, renderItem, renderResult, compressed, focus, onFilter } = this.props
-    const nodes = value.map(v => datum.getDataById(v))
-    let render = renderResult || renderItem
     if (typeof render === 'string') {
-      const copyRender = render
-      render = n => n[copyRender]
+      var copyRender = render;
+
+      render = function render(n) {
+        return n[copyRender];
+      };
     }
 
-    let items = this.handleNode(nodes, render)
+    var items = this.handleNode(nodes, render);
 
     if (compressed) {
-      items = this.renderMore(items)
+      items = this.renderMore(items);
     }
 
     if (items.length === 0) {
-      items.push(this.renderPlaceholder())
+      items.push(this.renderPlaceholder());
     } else if (focus && onFilter) {
-      items.push(this.renderInput())
+      items.push(this.renderInput());
     }
 
-    return items
-  }
+    return items;
+  };
 
-  render() {
-    const { style, value, compressed, multiple } = this.props
-    const result = value.length === 0 ? this.renderPlaceholder() : this.renderResult()
-    return (
-      <div
-        ref={this.bindResult}
-        className={cascaderClass('result', multiple && compressed && 'compressed')}
-        style={style}
-      >
-        {result}
-        {this.renderIndicator()}
-        {this.renderClear()}
-      </div>
-    )
-  }
-}
+  _proto.render = function render() {
+    var _this$props8 = this.props,
+        style = _this$props8.style,
+        value = _this$props8.value,
+        compressed = _this$props8.compressed,
+        multiple = _this$props8.multiple;
+    var result = value.length === 0 ? this.renderPlaceholder() : this.renderResult();
+    return React.createElement("div", {
+      ref: this.bindResult,
+      className: cascaderClass('result', multiple && compressed && 'compressed'),
+      style: style
+    }, result, this.renderIndicator(), this.renderClear());
+  };
+
+  return Result;
+}(PureComponent);
 
 Result.propTypes = {
   clearable: PropTypes.bool,
@@ -297,11 +355,9 @@ Result.propTypes = {
   selectId: PropTypes.string,
   showList: PropTypes.func,
   size: PropTypes.string,
-  showArrow: PropTypes.bool,
-}
-
+  showArrow: PropTypes.bool
+};
 Result.defaultProps = {
-  value: [],
-}
-
-export default Result
+  value: []
+};
+export default Result;