zarm-web/es/tag-input/InputWithTags.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import cn from 'classnames';
import debounce from '../utils/debounce';
import Tag from '../tag';
import Icon from '../icon';
const sizeValue = {
  xs: 24,
  sm: 28,
  lg: 36,
  xl: 40
};
const Style = {
  tagStyle: {
    maxWidth: 100
  },
  iconStyle: {
    fontSize: 'initial'
  }
};

class InputWithTags extends React.Component {
  constructor(props) {
    super(props);
    this.inputDiv = void 0;
    this.tagListBox = void 0;
    this.isComposition = void 0;
    this.debouncedOnInputChange = void 0;
    this.state = {
      isFocus: false,
      compositionData: null
    };

    this.onInput = value => {
      if (this.props.disabled || this.isComposition) {
        return;
      }

      if (typeof this.props.onSearchChange === 'function') {
        this.props.onSearchChange(value);
      }
    };

    this.onFocus = () => {
      this.setState({
        isFocus: true
      });
    };

    this.onBlur = () => {
      this.setState({
        isFocus: false
      });
    };

    this.tagListBoxref = e => {
      this.tagListBox = e;
    };

    this.onTagBoxClick = () => {
      const {
        active,
        search,
        remoteSearch,
        value
      } = this.props;

      if (active && (search || remoteSearch) && Array.isArray(value)) {
        this.inputDiv.focus();
      }
    };

    this.onCompositionStart = () => {
      this.isComposition = true;
    };

    this.onCompositionUpdate = e => {
      this.setState({
        compositionData: e.data
      });
    };

    this.onCompositionEnd = value => {
      this.isComposition = false;
      this.setState({
        compositionData: null
      });
      this.onInput(value);
    };

    this.debouncedOnInputChange = debounce(this.onInput, 300, false);
  }

  componentWillReceiveProps(nextProps) {
    const {
      active
    } = this.props;

    if (nextProps.active !== active) {
      // work without disabled and search prop;
      if (!nextProps.disabled && (nextProps.search || nextProps.remoteSearch)) {
        if (nextProps.active) {
          this.inputDiv.focus();
        } else {
          this.inputDiv.innerText = '';
        }
      }
    }
  }

  render() {
    const _this$props = this.props,
          {
      search,
      remoteSearch,
      value,
      searchValue,
      placeholder,
      active,
      onDeleteTag,
      onSearchChange,
      size,
      radius,
      disabled
    } = _this$props,
          others = _objectWithoutProperties(_this$props, ["search", "remoteSearch", "value", "searchValue", "placeholder", "active", "onDeleteTag", "onSearchChange", "size", "radius", "disabled"]);

    const {
      compositionData,
      isFocus
    } = this.state;
    let showPlaceHolder = false;

    if ((search || remoteSearch) && !isFocus && value === null || typeof value === 'string' && value.length === 0 || // eslint-disable-next-line no-mixed-operators
    !value // eslint-disable-next-line no-mixed-operators
    && !compositionData) {
      showPlaceHolder = true;
    }

    const searchValueStyle = {
      display: isFocus && searchValue ? 'none' : 'inline-block'
    };
    const tagSizeHeight = (size ? sizeValue[size] : 32) - 10;
    let tagList; // if value is array, make a Tag list;

    if (Array.isArray(value)) {
      tagList = value.map((elem, index) => {
        return React.createElement("div", {
          className: "za-tag-list-box",
          key: elem.key,
          ref: this.tagListBoxref
        }, React.createElement(Tag, {
          style: _objectSpread({}, Style.tagStyle, {
            height: tagSizeHeight,
            lineHeight: `${tagSizeHeight}px`
          }),
          key: elem.key,
          closable: true,
          onClick: () => {},
          onClose: e => {
            e.stopPropagation();

            if (typeof onDeleteTag === 'function') {
              setTimeout(() => {
                onDeleteTag(e, elem.key, elem.value, index);
              });
            }
          }
        }, elem.value));
      });
    } else {
      tagList = React.createElement("div", {
        style: searchValueStyle,
        className: "value-text"
      }, compositionData || value);
    }

    const boxCls = cn({
      'za-tag-input-box': true,
      'is-radius': radius,
      'za-tag-input-box--active': active,
      'is-disabled': disabled,
      [`size-${size}`]: !!size
    });
    return React.createElement("div", _extends({
      className: boxCls,
      onClick: this.onTagBoxClick
    }, others), tagList, (search || remoteSearch) && React.createElement("div", {
      className: "za-tag-input__div",
      contentEditable: !disabled && (search || remoteSearch),
      onInput: e => {
        this.debouncedOnInputChange(e.target.textContent);
      },
      onFocus: this.onFocus,
      onBlur: this.onBlur,
      onCompositionStart: this.onCompositionStart,
      onCompositionUpdate: this.onCompositionUpdate,
      onCompositionEnd: e => {
        this.onCompositionEnd(e.target.textContent);
      },
      ref: e => {
        this.inputDiv = e;
      }
    }), showPlaceHolder && React.createElement("span", {
      style: searchValueStyle,
      className: "za-tag-input__div-placeholder"
    }, placeholder), React.createElement(Icon, {
      style: Style.iconStyle,
      className: "arrow-bottom",
      type: "arrow-bottom"
    }));
  }

}

export default InputWithTags;