linkmore-design/lib/input/ClearableLabeledInput.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons/CloseCircleFilled"));
var _classnames = _interopRequireDefault(require("classnames"));
var React = _interopRequireWildcard(require("react"));
var _context = require("../form/context");
var _reactNode = require("../_util/reactNode");
var _statusUtils = require("../_util/statusUtils");
var _type = require("../_util/type");
const ClearableInputType = (0, _type.tuple)('text', 'input');
function hasAddon(props) {
  return !!(props.addonBefore || props.addonAfter);
}

/** This basic props required for input and textarea. */

class ClearableLabeledInput extends React.Component {
  renderClearIcon(prefixCls) {
    const {
      value,
      disabled,
      readOnly,
      handleReset,
      suffix
    } = this.props;
    const needClear = !disabled && !readOnly && value;
    const className = `${prefixCls}-clear-icon`;
    return /*#__PURE__*/React.createElement(_CloseCircleFilled.default, {
      onClick: handleReset
      // Do not trigger onBlur when clear input
      // https://github.com/ant-design/ant-design/issues/31200
      ,
      onMouseDown: e => e.preventDefault(),
      className: (0, _classnames.default)({
        [`${className}-hidden`]: !needClear,
        [`${className}-has-suffix`]: !!suffix
      }, className),
      role: "button"
    });
  }
  renderTextAreaWithClearIcon(prefixCls, element, statusContext) {
    const {
      value,
      allowClear,
      className,
      style,
      direction,
      bordered,
      hidden,
      status: customStatus
    } = this.props;
    const {
      status: contextStatus,
      hasFeedback
    } = statusContext;
    if (!allowClear) {
      return (0, _reactNode.cloneElement)(element, {
        value
      });
    }
    const affixWrapperCls = (0, _classnames.default)(`${prefixCls}-affix-wrapper`, `${prefixCls}-affix-wrapper-textarea-with-clear-btn`, (0, _statusUtils.getStatusClassNames)(`${prefixCls}-affix-wrapper`, (0, _statusUtils.getMergedStatus)(contextStatus, customStatus), hasFeedback), {
      [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
      [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
      // className will go to addon wrapper
      [`${className}`]: !hasAddon(this.props) && className
    });
    return /*#__PURE__*/React.createElement("span", {
      className: affixWrapperCls,
      style: style,
      hidden: hidden
    }, (0, _reactNode.cloneElement)(element, {
      style: null,
      value
    }), this.renderClearIcon(prefixCls));
  }
  render() {
    return /*#__PURE__*/React.createElement(_context.FormItemInputContext.Consumer, null, statusContext => {
      const {
        prefixCls,
        inputType,
        element
      } = this.props;
      if (inputType === ClearableInputType[0]) {
        return this.renderTextAreaWithClearIcon(prefixCls, element, statusContext);
      }
    });
  }
}
var _default = ClearableLabeledInput;
exports.default = _default;