acud/lib/input/Label.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _OutlinedClose = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedClose"));
var _MultiToneClear = _interopRequireDefault(require("acud-icon/lib/icons/MultiToneClear"));
var _Input = _interopRequireDefault(require("./Input"));
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _classnames = _interopRequireDefault(require("classnames"));
var _configProvider = require("../config-provider");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 = (0, _react.useState)(label || []),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    labelList = _useState2[0],
    setLabelList = _useState2[1];
  var _useState3 = (0, _react.useState)(''),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    inputValue = _useState4[0],
    setInputValue = _useState4[1];
  var inputEl = (0, _react.useRef)(null);
  var acudInputEl = (0, _react.useRef)(null);
  var _useState5 = (0, _react.useState)('#D4D6D9'),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    clearIconColor = _useState6[0],
    setClearIconColor = _useState6[1];
  var _useState7 = (0, _react.useState)(false),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    compositionStart = _useState8[0],
    setCompositionStart = _useState8[1];
  (0, _react.useEffect)(function () {
    setLabelList(label || []);
  }, [label]);
  var handleClearLabel = function handleClearLabel(index) {
    if (disabled) {
      return;
    }
    labelList.splice(index, 1);
    setLabelList((0, _toConsumableArray2["default"])(labelList));
    if (onLabelChange) {
      onLabelChange((0, _toConsumableArray2["default"])(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((0, _toConsumableArray2["default"])(labelList), [value]));
        setInputValue('');
        if (onLabelChange) {
          onLabelChange([].concat((0, _toConsumableArray2["default"])(labelList), [value]));
        }
      } else {
        if (onPressEnter) {
          onPressEnter(e);
        }
      }
    }
    if (e.key === 'Backspace' && !value) {
      var labels = (0, _toConsumableArray2["default"])(labelList);
      labels.pop();
      setLabelList(labels);
      if (onLabelChange) {
        onLabelChange((0, _toConsumableArray2["default"])(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((0, _toConsumableArray2["default"])(labelList), [inputValue]));
      setInputValue('');
      if (onLabelChange) {
        onLabelChange([].concat((0, _toConsumableArray2["default"])(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 = (0, _react.useCallback)(function (e) {
    e.preventDefault();
  }, []);
  var _React$useContext = _react["default"].useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('input-label', customizePrefixCls);
  var inputBoxClassNames = (0, _classnames["default"])("".concat(prefixCls, "-input-box"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-input-box-placeholder"), !labelList.length && placeholder));
  var renderLabel = function renderLabel() {
    return /*#__PURE__*/_react["default"].createElement("ul", {
      className: "".concat(prefixCls, "-wrapper"),
      onClick: handleClick
    }, labelList.map(function (item, index) {
      return /*#__PURE__*/_react["default"].createElement("li", {
        key: index,
        className: "".concat(prefixCls, "-item"),
        "aria-disabled": disabled
      }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
        placement: "top",
        title: item
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-text")
      }, item)), /*#__PURE__*/_react["default"].createElement(_OutlinedClose["default"], {
        className: "".concat(prefixCls, "-clear-icon"),
        disabled: disabled,
        onClick: function onClick() {
          return handleClearLabel(index);
        },
        onMouseDown: handleMouseDown,
        onMouseUp: handleMouseUp
      }));
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: inputBoxClassNames
    }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
      className: "".concat(prefixCls, "-clear-wrapper"),
      onClick: clickClear,
      onMouseEnter: hoverClear,
      onMouseLeave: clearMouseLeave,
      onMouseDown: handleMouseDownClear
    }, /*#__PURE__*/_react["default"].createElement(_MultiToneClear["default"], {
      width: 16,
      color: clearIconColor
    })));
  };
  return /*#__PURE__*/_react["default"].createElement(_Input["default"], {
    label: renderLabel(),
    disabled: disabled,
    ref: acudInputEl,
    handleClearAll: handleClearAll,
    allowClear: !!labelList.length
  });
};
var _default = exports["default"] = Label;