shineout 1.12.2 → 1.12.3

package/esm/Select/Input.js

@@ -0,0 +1,286 @@
+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, { Component, isValidElement, cloneElement } from 'react';
+import { selectClass } from './styles';
+import { focusElement, getCursorOffset, preventPasteFile } from '../utils/dom/element';
+import { isString } from '../utils/is';
+
+var handleFocus = function handleFocus(e) {
+  e.stopPropagation();
+};
+
+var DefaultValue = {
+  text: '',
+  updatAble: false
+};
+
+var FilterInput =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(FilterInput, _Component);
+
+  function FilterInput(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastCursorOffset", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "composition", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "editElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastSelect", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastMaxValue", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blurTimer", void 0);
+
+    _this.state = {
+      editable: false
+    };
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleInput = _this.handleInput.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.geHandleMax = _this.geHandleMax.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handlePaste = _this.handlePaste.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.focusInput = _this.focusInput.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleCompositionStart = _this.handleCompositionStart.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleCompositionEnd = _this.handleCompositionEnd.bind(_assertThisInitialized(_assertThisInitialized(_this))); // for mutiple select
+
+    _this.props.setInputReset(_this.reset.bind(_assertThisInitialized(_assertThisInitialized(_this)))); // set focus func to Select
+
+
+    props.bindFocusInputFunc(_this.focusInput);
+    return _this;
+  }
+
+  var _proto = FilterInput.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.props.focus) {
+      this.props.onInputFocus();
+      this.focus();
+    }
+  };
+
+  _proto.shouldComponentUpdate = function shouldComponentUpdate() {
+    return this.props.updatAble;
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (this.props.focus === prevProps.focus || !this.props.focus) return;
+    this.props.onInputFocus();
+    this.focus();
+  };
+
+  _proto.getProcessedValue = function getProcessedValue(text) {
+    var trim = this.props.trim;
+    if (!trim && this.lastCursorOffset === 0 && /^\u00A0$/.test(text)) return '';
+    return trim ? text.trim() : text.replace(/\u00A0/g, ' ');
+  };
+
+  _proto.handlePaste = function handlePaste(e) {
+    var _this2 = this;
+
+    var convertBr = this.props.convertBr;
+    preventPasteFile(e, function (text) {
+      if (window.getSelection) {
+        var selection = window.getSelection();
+        _this2.lastSelect = {
+          anchorOffset: selection.anchorOffset,
+          focusOffset: selection.focusOffset,
+          text: text
+        };
+      }
+    }, {
+      convertBr: convertBr
+    });
+  };
+
+  _proto.geHandleMax = function geHandleMax(e) {
+    var maxLength = this.props.maxLength;
+
+    if (!maxLength || this.composition) {
+      return true;
+    }
+
+    var change = true;
+    var text = e.target.innerText;
+
+    if (text.length >= maxLength) {
+      var lastPos; // 输入的位置 需要考虑选中文本的情况
+
+      if (window.getSelection) {
+        lastPos = Math.min(window.getSelection().anchorOffset - (text.length > maxLength ? 1 : 0), maxLength);
+      }
+
+      if (!this.lastMaxValue) {
+        this.lastMaxValue = text.slice(0, maxLength); // 粘贴文本的情况
+      } else if (this.lastSelect && typeof this.lastSelect !== 'boolean') {
+        var _this$lastSelect = this.lastSelect,
+            anchorOffset = _this$lastSelect.anchorOffset,
+            focusOffset = _this$lastSelect.focusOffset,
+            str = _this$lastSelect.text;
+        var start = anchorOffset < focusOffset ? anchorOffset : focusOffset;
+        var end = anchorOffset > focusOffset ? anchorOffset : focusOffset;
+
+        if (end - start > 0) {
+          this.lastMaxValue = this.lastMaxValue.slice(0, start) + str.slice(0, end - start) + this.lastMaxValue.slice(end);
+          lastPos = focusOffset;
+        } else {
+          change = false;
+        }
+      } else {
+        change = false;
+      } // clear select info
+
+
+      this.lastSelect = false;
+      e.target.innerText = this.lastMaxValue; // 修改e.target.innerText后光标会变到最前面，这儿改变光标位置到上次光标的位置
+
+      if (lastPos) {
+        var selection = window.getSelection();
+        var range = selection.getRangeAt(0);
+        var textNode = range.startContainer;
+
+        if (textNode.nodeName !== '#text') {
+          ;
+          var _textNode$childNodes = textNode.childNodes;
+          textNode = _textNode$childNodes[0];
+        }
+
+        range.setStart(textNode, lastPos);
+        range.collapse(true);
+      }
+    } else {
+      this.lastMaxValue = '';
+    } // eslint-disable-next-line consistent-return
+
+
+    return change;
+  };
+
+  _proto.reset = function reset() {
+    if (this.editElement) this.editElement.innerText = '';
+    if (this.blurTimer) clearTimeout(this.blurTimer);
+  };
+
+  _proto.focusInput = function focusInput(flag) {
+    var _this3 = this;
+
+    if (flag === void 0) {
+      flag = false;
+    }
+
+    if (!flag) {
+      this.setState({
+        editable: false
+      });
+      return;
+    }
+
+    this.setState({
+      editable: true
+    }, function () {
+      return _this3.focus();
+    });
+  };
+
+  _proto.focus = function focus() {
+    var _this4 = this;
+
+    var focusSelected = this.props.focusSelected;
+    var action = focusSelected ? focusElement.select : focusElement.end;
+    requestAnimationFrame(function () {
+      action(_this4.editElement);
+    });
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.editElement = el;
+  };
+
+  _proto.handleInput = function handleInput(e) {
+    var onFilter = this.props.onFilter;
+    var change = this.geHandleMax(e);
+
+    if (!change) {
+      return;
+    }
+
+    var text = e.target.innerText.replace('\feff ', '');
+    this.lastCursorOffset = getCursorOffset(text.length);
+    var t = this.getProcessedValue(text);
+    if (onFilter) onFilter(t);
+  };
+
+  _proto.handleBlur = function handleBlur(e) {
+    var txt = this.props.text;
+    var text = this.getProcessedValue(e.target.innerText.replace('\feff ', ''));
+    this.focusInput(false);
+    if (text === txt) return;
+    this.props.onInputBlur(text);
+  };
+
+  _proto.handleCompositionStart = function handleCompositionStart() {
+    this.composition = true;
+  };
+
+  _proto.handleCompositionEnd = function handleCompositionEnd(e) {
+    this.composition = false;
+    this.handleInput(e);
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        text = _this$props.text,
+        focus = _this$props.focus,
+        multiple = _this$props.multiple;
+    var value = typeof text === 'string' ? text.replace(/<\/?[^>]*>/g, '') : text;
+    var props = {
+      className: selectClass('input', !focus && 'ellipsis', !multiple && 'full'),
+      ref: this.bindElement,
+      key: 'input',
+      onInput: this.handleInput,
+      contentEditable: focus || this.state.editable,
+      onFocus: handleFocus,
+      onBlur: this.handleBlur,
+      title: !focus && isString(value) ? value : undefined,
+      onCompositionStart: this.handleCompositionStart,
+      onCompositionEnd: this.handleCompositionEnd
+    };
+
+    if (isValidElement(value)) {
+      if (value.type.toString() === 'Symbol(react.fragment)') {
+        return cloneElement(React.createElement("span", null, value), _objectSpread({}, props, {
+          suppressContentEditableWarning: true
+        }));
+      }
+
+      return cloneElement(value, _objectSpread({}, props, {
+        // @ts-ignore
+        // cloneElement 中的默认类型 React.HTMLAttributes 缺失 suppressContentEditableWarning
+        suppressContentEditableWarning: true
+      }));
+    } // @ts-ignore
+
+
+    return React.createElement("span", _extends({
+      dangerouslySetInnerHTML: {
+        __html: value
+      }
+    }, props, {
+      onPaste: this.handlePaste
+    }));
+  };
+
+  return FilterInput;
+}(Component);
+
+_defineProperty(FilterInput, "defaultProps", DefaultValue);
+
+export default FilterInput;

package/esm/Select/More.d.ts

@@ -0,0 +1,15 @@
+import { Component } from 'react';
+import { MoreProps } from './Props';
+export declare function getResetMore(onFilter: ((...args: any) => void) | undefined, container: HTMLElement, doms: NodeListOf<HTMLElement>): number;
+interface MoreState {
+    status: boolean;
+}
+declare class More extends Component<MoreProps, MoreState> {
+    static defaultProps: {
+        trigger: string;
+    };
+    constructor(props: MoreProps);
+    changeStatus(status: boolean): void;
+    render(): JSX.Element;
+}
+export default More;

package/esm/Select/More.js

@@ -0,0 +1,151 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { parsePxToNumber } from '../utils/dom/element';
+import Popover from '../Popover'; // if num = -1 display all else display num
+
+export function getResetMore(onFilter, container, doms) {
+  if (!container || !doms || !doms.length) return -1;
+  var items = Array.from(doms);
+  var style = getComputedStyle(container);
+  var clientWidth = container.clientWidth;
+  var paddingLeft = parsePxToNumber(style.paddingLeft);
+  var paddingRight = parsePxToNumber(style.paddingRight);
+  var minFilterWidth = onFilter ? 16 : 0;
+  var contentWidth = clientWidth - paddingLeft - paddingRight - minFilterWidth - 1;
+  var hideEl = items.pop();
+  var hideElStyle = getComputedStyle(hideEl);
+  var hideMargin = parsePxToNumber(hideElStyle.marginLeft) + parsePxToNumber(hideElStyle.marginRight);
+  var num = 0;
+  var sumWidth = 0;
+  var itemWidthArr = items.map(function (item) {
+    var itemStyle = getComputedStyle(item);
+    var itemLen = item.offsetWidth + parsePxToNumber(itemStyle.marginLeft) + parsePxToNumber(itemStyle.marginRight);
+    sumWidth += itemLen;
+    return itemLen;
+  });
+
+  if (sumWidth <= contentWidth) {
+    num = -1;
+  } else {
+    var len = 0;
+
+    for (var i = 0; i < itemWidthArr.length; i++) {
+      var itemLen = itemWidthArr[i]; // number length
+
+      var resetNum = items.length - 1 - i;
+      var moreWidth = void 0;
+
+      if (resetNum <= 0) {
+        moreWidth = 0;
+      } else {
+        var reset = "+" + resetNum;
+        hideEl.childNodes[0].innerText = reset; // (+num) width
+
+        moreWidth = hideEl.offsetWidth + hideMargin;
+      }
+
+      len += itemLen;
+
+      if (len > contentWidth - moreWidth) {
+        break;
+      }
+
+      num += 1;
+
+      if (i === items.length - 1) {
+        // not show more
+        num = -1;
+      }
+    }
+  } // at least show one
+
+
+  if (num === 0 && itemWidthArr[0]) {
+    num = 1;
+  }
+
+  return num;
+}
+var DefaultValue = {
+  trigger: 'hover'
+};
+
+var More =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(More, _Component);
+
+  function More(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    _this.state = {
+      status: false
+    };
+    _this.changeStatus = _this.changeStatus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = More.prototype;
+
+  _proto.changeStatus = function changeStatus(status) {
+    this.setState({
+      status: status
+    });
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        data = _this$props.data,
+        className = _this$props.className,
+        popoverClassName = _this$props.popoverClassName,
+        contentClassName = _this$props.contentClassName,
+        dataId = _this$props.dataId,
+        trigger = _this$props.trigger,
+        compressed = _this$props.compressed,
+        cls = _this$props.cls,
+        showNum = _this$props.showNum;
+    var status = this.state.status;
+    if (showNum < 0 || showNum >= data.length) return React.createElement(React.Fragment, null, data, React.createElement("a", {
+      key: "hidden",
+      className: className,
+      style: {
+        position: 'absolute',
+        zIndex: -100,
+        userSelect: 'none',
+        msUserSelect: 'none',
+        contain: 'layout'
+      }
+    }, React.createElement("span", null, "+")));
+    var before = new Array(showNum).fill(undefined).map(function (_item, index) {
+      return data[index];
+    });
+    var after = new Array(data.length - showNum).fill(undefined).map(function (_item, index) {
+      return data[showNum + index];
+    });
+    var itemsLength = after.length;
+    return React.createElement(React.Fragment, null, before, React.createElement("a", {
+      tabIndex: -1,
+      key: "more",
+      className: classnames(className, cls && status && cls('item-more'))
+    }, React.createElement("span", null, "+" + itemsLength), React.createElement(Popover, {
+      showArrow: false,
+      trigger: trigger,
+      visible: status,
+      onVisibleChange: this.changeStatus,
+      className: popoverClassName
+    }, React.createElement("div", {
+      className: contentClassName,
+      "data-id": dataId
+    }, compressed === 'no-repeat' ? null : before, after))));
+  };
+
+  return More;
+}(Component);
+
+_defineProperty(More, "defaultProps", DefaultValue);
+
+export default More;

package/esm/Select/Option.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { OptionProps } from './Props';
+declare class Option<Data> extends React.Component<OptionProps<Data>> {
+    locked?: boolean;
+    handleEnter: () => void;
+    constructor(props: OptionProps<Data>);
+    shouldComponentUpdate(nextProps: OptionProps<Data>, nextState: any): boolean;
+    handleClick(): void;
+    handleHover(): void;
+    render(): JSX.Element;
+}
+export default Option;

package/esm/Select/Option.js

@@ -0,0 +1,90 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import classnames from 'classnames';
+import { selectClass } from './styles';
+import { isObject } from '../utils/is';
+import shallowEqual from '../utils/shallowEqual';
+import icons from '../icons';
+import { getDirectionClass } from '../utils/classname';
+
+var Option =
+/*#__PURE__*/
+function (_React$Component) {
+  _inheritsLoose(Option, _React$Component);
+
+  function Option(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "locked", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleEnter", void 0);
+
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleEnter = _this.handleHover.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Option.prototype;
+
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
+    if (this.props.filterText) return true;
+    if (!shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state)) return true;
+    return false;
+  };
+
+  _proto.handleClick = function handleClick() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        data = _this$props.data,
+        onClick = _this$props.onClick,
+        isActive = _this$props.isActive,
+        disabled = _this$props.disabled,
+        groupKey = _this$props.groupKey;
+    if (this.locked || disabled || data && data[groupKey]) return;
+    this.locked = true;
+    onClick(!isActive, data);
+    setTimeout(function () {
+      _this2.locked = false;
+    }, 200);
+  };
+
+  _proto.handleHover = function handleHover() {
+    this.props.onHover(this.props.index);
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        isActive = _this$props2.isActive,
+        index = _this$props2.index,
+        renderItem = _this$props2.renderItem,
+        isHover = _this$props2.isHover,
+        disabled = _this$props2.disabled,
+        groupKey = _this$props2.groupKey;
+    var isGroupTitle = data && data[groupKey];
+    var className = classnames(selectClass(getDirectionClass('option'), isActive && 'active', isHover && 'hover', disabled && getDirectionClass('disabled'), isGroupTitle && 'group'), "option-" + index);
+    var result = isGroupTitle ? data[groupKey] : renderItem(data, index);
+    var title = typeof result === 'string' ? result : '';
+
+    if (isObject(data) && result === data) {
+      console.warn('renderItem is essential when data element is Object');
+    }
+
+    return React.createElement("a", {
+      tabIndex: -1,
+      onClick: this.handleClick,
+      onMouseEnter: this.handleEnter,
+      className: className,
+      title: title
+    }, result, isActive && icons.Check);
+  };
+
+  return Option;
+}(React.Component);
+
+export default Option;

package/esm/Select/OptionList.d.ts

@@ -0,0 +1,21 @@
+import { Component } from 'react';
+import { OptionListProps } from './Props';
+interface OptionListState {
+    currentIndex: number;
+    hoverIndex: number;
+    scrollTop: number;
+}
+declare class OptionList<Item, Value> extends Component<OptionListProps<Item, Value>, OptionListState> {
+    optionInner: HTMLDivElement;
+    lastScrollTop: number;
+    constructor(props: OptionListProps<Item, Value>);
+    componentDidUpdate(prevProps: OptionListProps<Item, Value>): void;
+    getText(key: 'noData'): any;
+    hoverMove(step: number): void;
+    handleScroll(_x: number, y: number, _max: number, _bar: HTMLElement, _v: number, h: number, _pixelX?: number, pixelY?: number): void;
+    handleHover(index: number, force: boolean): void;
+    handleMouseMove(): void;
+    renderList(): JSX.Element;
+    render(): JSX.Element;
+}
+export default OptionList;