acud/es/input/Label.js

acg react 组件库

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useRef, useCallback, useEffect } from 'react';
import OutlinedClose from "acud-icon/es/icons/OutlinedClose";
import MultiToneClear from "acud-icon/es/icons/MultiToneClear";
import Input from './Input';
import Tooltip from '../tooltip';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider';
var Label = function Label(_ref) {
  var label = _ref.label,
    allowClear = _ref.allowClear,
    onPressEnter = _ref.onPressEnter,
    customizePrefixCls = _ref.prefixCls,
    _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
    disabled = _ref.disabled,
    onLabelChange = _ref.onLabelChange;
  var _useState = useState(label || []),
    _useState2 = _slicedToArray(_useState, 2),
    labelList = _useState2[0],
    setLabelList = _useState2[1];
  var _useState3 = useState(''),
    _useState4 = _slicedToArray(_useState3, 2),
    inputValue = _useState4[0],
    setInputValue = _useState4[1];
  var inputEl = useRef(null);
  var acudInputEl = useRef(null);
  var _useState5 = useState('#D4D6D9'),
    _useState6 = _slicedToArray(_useState5, 2),
    clearIconColor = _useState6[0],
    setClearIconColor = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    compositionStart = _useState8[0],
    setCompositionStart = _useState8[1];
  useEffect(function () {
    setLabelList(label || []);
  }, [label]);
  var handleClearLabel = function handleClearLabel(index) {
    if (disabled) {
      return;
    }
    labelList.splice(index, 1);
    setLabelList(_toConsumableArray(labelList));
    if (onLabelChange) {
      onLabelChange(_toConsumableArray(labelList));
    }
  };
  var handleClearAll = function handleClearAll() {
    setLabelList([]);
    if (onLabelChange) {
      onLabelChange([]);
    }
    if (inputEl.current) {
      inputEl.current.focus();
    }
  };
  var handleOnchange = function handleOnchange(e) {
    if (disabled) {
      return;
    }
    setInputValue(e.target.value);
  };
  var handleOnKeyDown = function handleOnKeyDown(e) {
    var _a;
    var value = (_a = inputEl.current) === null || _a === void 0 ? void 0 : _a.value;
    if (e.key === 'Enter' && inputValue) {
      if (!compositionStart) {
        if (onPressEnter) {
          onPressEnter(e);
        }
        value && setLabelList([].concat(_toConsumableArray(labelList), [value]));
        setInputValue('');
        if (onLabelChange) {
          onLabelChange([].concat(_toConsumableArray(labelList), [value]));
        }
      } else {
        if (onPressEnter) {
          onPressEnter(e);
        }
      }
    }
    if (e.key === 'Backspace' && !value) {
      var labels = _toConsumableArray(labelList);
      labels.pop();
      setLabelList(labels);
      if (onLabelChange) {
        onLabelChange(_toConsumableArray(labels));
      }
    }
  };
  var handleClick = function handleClick() {
    if (disabled) {
      return;
    }
    if (inputEl.current) {
      inputEl.current.focus();
    }
  };
  var handleMouseDown = function handleMouseDown(e) {
    e.preventDefault();
  };
  var handleInputBlur = function handleInputBlur() {
    acudInputEl.current.blur();
    if (inputValue) {
      setLabelList([].concat(_toConsumableArray(labelList), [inputValue]));
      setInputValue('');
      if (onLabelChange) {
        onLabelChange([].concat(_toConsumableArray(labelList), [inputValue]));
      }
    }
  };
  var handleMouseUp = function handleMouseUp(e) {
    e.preventDefault();
  };
  var clickClear = function clickClear() {
    handleClearAll();
  };
  var hoverClear = function hoverClear() {
    setClearIconColor('#84868C');
  };
  var clearMouseLeave = function clearMouseLeave() {
    setClearIconColor('#D4D6D9');
  };
  var handleMouseDownClear = useCallback(function (e) {
    e.preventDefault();
  }, []);
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('input-label', customizePrefixCls);
  var inputBoxClassNames = classNames("".concat(prefixCls, "-input-box"), _defineProperty({}, "".concat(prefixCls, "-input-box-placeholder"), !labelList.length && placeholder));
  var renderLabel = function renderLabel() {
    return /*#__PURE__*/React.createElement("ul", {
      className: "".concat(prefixCls, "-wrapper"),
      onClick: handleClick
    }, labelList.map(function (item, index) {
      return /*#__PURE__*/React.createElement("li", {
        key: index,
        className: "".concat(prefixCls, "-item"),
        "aria-disabled": disabled
      }, /*#__PURE__*/React.createElement(Tooltip, {
        placement: "top",
        title: item
      }, /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-text")
      }, item)), /*#__PURE__*/React.createElement(OutlinedClose, {
        className: "".concat(prefixCls, "-clear-icon"),
        disabled: disabled,
        onClick: function onClick() {
          return handleClearLabel(index);
        },
        onMouseDown: handleMouseDown,
        onMouseUp: handleMouseUp
      }));
    }), /*#__PURE__*/React.createElement("div", {
      className: inputBoxClassNames
    }, /*#__PURE__*/React.createElement("input", {
      className: "label-input",
      ref: inputEl,
      disabled: disabled,
      value: inputValue,
      onChange: handleOnchange,
      onKeyDown: handleOnKeyDown,
      onBlur: handleInputBlur,
      onCompositionStart: function onCompositionStart() {
        return setCompositionStart(true);
      },
      onCompositionEnd: function onCompositionEnd() {
        return setCompositionStart(false);
      },
      placeholder: labelList.length ? '' : placeholder
    })), allowClear && !disabled && !!labelList.length && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-clear-wrapper"),
      onClick: clickClear,
      onMouseEnter: hoverClear,
      onMouseLeave: clearMouseLeave,
      onMouseDown: handleMouseDownClear
    }, /*#__PURE__*/React.createElement(MultiToneClear, {
      width: 16,
      color: clearIconColor
    })));
  };
  return /*#__PURE__*/React.createElement(Input, {
    label: renderLabel(),
    disabled: disabled,
    ref: acudInputEl,
    handleClearAll: handleClearAll,
    allowClear: !!labelList.length
  });
};
export default Label;