123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
- import _typeof from "@babel/runtime/helpers/esm/typeof";
- import clsx from 'classnames';
- import React, { cloneElement, useRef } from 'react';
- import { hasAddon, hasPrefixSuffix } from "./utils/commonUtils";
- var BaseInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
- var _props, _props2, _props3;
- var inputEl = props.inputElement,
- children = props.children,
- prefixCls = props.prefixCls,
- prefix = props.prefix,
- suffix = props.suffix,
- addonBefore = props.addonBefore,
- addonAfter = props.addonAfter,
- className = props.className,
- style = props.style,
- disabled = props.disabled,
- readOnly = props.readOnly,
- focused = props.focused,
- triggerFocus = props.triggerFocus,
- allowClear = props.allowClear,
- value = props.value,
- handleReset = props.handleReset,
- hidden = props.hidden,
- classes = props.classes,
- classNames = props.classNames,
- dataAttrs = props.dataAttrs,
- styles = props.styles,
- components = props.components,
- onClear = props.onClear;
- var inputElement = children !== null && children !== void 0 ? children : inputEl;
- var AffixWrapperComponent = (components === null || components === void 0 ? void 0 : components.affixWrapper) || 'span';
- var GroupWrapperComponent = (components === null || components === void 0 ? void 0 : components.groupWrapper) || 'span';
- var WrapperComponent = (components === null || components === void 0 ? void 0 : components.wrapper) || 'span';
- var GroupAddonComponent = (components === null || components === void 0 ? void 0 : components.groupAddon) || 'span';
- var containerRef = useRef(null);
- var onInputClick = function onInputClick(e) {
- var _containerRef$current;
- if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(e.target)) {
- triggerFocus === null || triggerFocus === void 0 || triggerFocus();
- }
- };
- var hasAffix = hasPrefixSuffix(props);
- var element = /*#__PURE__*/cloneElement(inputElement, {
- value: value,
- className: clsx((_props = inputElement.props) === null || _props === void 0 ? void 0 : _props.className, !hasAffix && (classNames === null || classNames === void 0 ? void 0 : classNames.variant)) || null
- });
- // ======================== Ref ======================== //
- var groupRef = useRef(null);
- React.useImperativeHandle(ref, function () {
- return {
- nativeElement: groupRef.current || containerRef.current
- };
- });
- // ================== Prefix & Suffix ================== //
- if (hasAffix) {
- // ================== Clear Icon ================== //
- var clearIcon = null;
- if (allowClear) {
- var needClear = !disabled && !readOnly && value;
- var clearIconCls = "".concat(prefixCls, "-clear-icon");
- var iconNode = _typeof(allowClear) === 'object' && allowClear !== null && allowClear !== void 0 && allowClear.clearIcon ? allowClear.clearIcon : '✖';
- clearIcon = /*#__PURE__*/React.createElement("button", {
- type: "button",
- tabIndex: -1,
- onClick: function onClick(event) {
- handleReset === null || handleReset === void 0 || handleReset(event);
- onClear === null || onClear === void 0 || onClear();
- }
- // Do not trigger onBlur when clear input
- // https://github.com/ant-design/ant-design/issues/31200
- ,
- onMouseDown: function onMouseDown(e) {
- return e.preventDefault();
- },
- className: clsx(clearIconCls, _defineProperty(_defineProperty({}, "".concat(clearIconCls, "-hidden"), !needClear), "".concat(clearIconCls, "-has-suffix"), !!suffix))
- }, iconNode);
- }
- var affixWrapperPrefixCls = "".concat(prefixCls, "-affix-wrapper");
- var affixWrapperCls = clsx(affixWrapperPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-disabled"), disabled), "".concat(affixWrapperPrefixCls, "-disabled"), disabled), "".concat(affixWrapperPrefixCls, "-focused"), focused), "".concat(affixWrapperPrefixCls, "-readonly"), readOnly), "".concat(affixWrapperPrefixCls, "-input-with-clear-btn"), suffix && allowClear && value), classes === null || classes === void 0 ? void 0 : classes.affixWrapper, classNames === null || classNames === void 0 ? void 0 : classNames.affixWrapper, classNames === null || classNames === void 0 ? void 0 : classNames.variant);
- var suffixNode = (suffix || allowClear) && /*#__PURE__*/React.createElement("span", {
- className: clsx("".concat(prefixCls, "-suffix"), classNames === null || classNames === void 0 ? void 0 : classNames.suffix),
- style: styles === null || styles === void 0 ? void 0 : styles.suffix
- }, clearIcon, suffix);
- element = /*#__PURE__*/React.createElement(AffixWrapperComponent, _extends({
- className: affixWrapperCls,
- style: styles === null || styles === void 0 ? void 0 : styles.affixWrapper,
- onClick: onInputClick
- }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.affixWrapper, {
- ref: containerRef
- }), prefix && /*#__PURE__*/React.createElement("span", {
- className: clsx("".concat(prefixCls, "-prefix"), classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
- style: styles === null || styles === void 0 ? void 0 : styles.prefix
- }, prefix), element, suffixNode);
- }
- // ================== Addon ================== //
- if (hasAddon(props)) {
- var wrapperCls = "".concat(prefixCls, "-group");
- var addonCls = "".concat(wrapperCls, "-addon");
- var groupWrapperCls = "".concat(wrapperCls, "-wrapper");
- var mergedWrapperClassName = clsx("".concat(prefixCls, "-wrapper"), wrapperCls, classes === null || classes === void 0 ? void 0 : classes.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper);
- var mergedGroupClassName = clsx(groupWrapperCls, _defineProperty({}, "".concat(groupWrapperCls, "-disabled"), disabled), classes === null || classes === void 0 ? void 0 : classes.group, classNames === null || classNames === void 0 ? void 0 : classNames.groupWrapper);
- // Need another wrapper for changing display:table to display:inline-block
- // and put style prop in wrapper
- element = /*#__PURE__*/React.createElement(GroupWrapperComponent, {
- className: mergedGroupClassName,
- ref: groupRef
- }, /*#__PURE__*/React.createElement(WrapperComponent, {
- className: mergedWrapperClassName
- }, addonBefore && /*#__PURE__*/React.createElement(GroupAddonComponent, {
- className: addonCls
- }, addonBefore), element, addonAfter && /*#__PURE__*/React.createElement(GroupAddonComponent, {
- className: addonCls
- }, addonAfter)));
- }
- // `className` and `style` are always on the root element
- return /*#__PURE__*/React.cloneElement(element, {
- className: clsx((_props2 = element.props) === null || _props2 === void 0 ? void 0 : _props2.className, className) || null,
- style: _objectSpread(_objectSpread({}, (_props3 = element.props) === null || _props3 === void 0 ? void 0 : _props3.style), style),
- hidden: hidden
- });
- });
- export default BaseInput;
|