111 lines
5.1 KiB
JavaScript
111 lines
5.1 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
var React = _interopRequireWildcard(require("react"));
|
|
var _clsx = require("clsx");
|
|
var _Input = _interopRequireDefault(require("../Input"));
|
|
var _context = require("../context");
|
|
var _useBaseProps = _interopRequireDefault(require("../../hooks/useBaseProps"));
|
|
var _Placeholder = _interopRequireDefault(require("./Placeholder"));
|
|
var _SelectContext = _interopRequireDefault(require("../../SelectContext"));
|
|
var _commonUtil = require("../../utils/commonUtil");
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
const SingleContent = /*#__PURE__*/React.forwardRef(({
|
|
inputProps
|
|
}, ref) => {
|
|
const {
|
|
prefixCls,
|
|
searchValue,
|
|
activeValue,
|
|
displayValues,
|
|
maxLength,
|
|
mode,
|
|
components
|
|
} = (0, _context.useSelectInputContext)();
|
|
const {
|
|
triggerOpen,
|
|
title: rootTitle,
|
|
showSearch,
|
|
classNames,
|
|
styles
|
|
} = (0, _useBaseProps.default)();
|
|
const selectContext = React.useContext(_SelectContext.default);
|
|
const [inputChanged, setInputChanged] = React.useState(false);
|
|
const combobox = mode === 'combobox';
|
|
const displayValue = displayValues[0];
|
|
|
|
// Implement the same logic as the old SingleSelector
|
|
const mergedSearchValue = React.useMemo(() => {
|
|
if (combobox && activeValue && !inputChanged && triggerOpen) {
|
|
return activeValue;
|
|
}
|
|
return showSearch ? searchValue : '';
|
|
}, [combobox, activeValue, inputChanged, triggerOpen, searchValue, showSearch]);
|
|
const [optionClassName, optionStyle, optionTitle, hasOptionStyle] = React.useMemo(() => {
|
|
let className;
|
|
let style;
|
|
let titleValue;
|
|
if (displayValue && selectContext?.flattenOptions) {
|
|
const option = selectContext.flattenOptions.find(opt => opt.value === displayValue.value);
|
|
if (option?.data) {
|
|
className = option.data.className;
|
|
style = option.data.style;
|
|
titleValue = (0, _commonUtil.getTitle)(option.data);
|
|
}
|
|
}
|
|
if (displayValue && !titleValue) {
|
|
titleValue = (0, _commonUtil.getTitle)(displayValue);
|
|
}
|
|
if (rootTitle !== undefined) {
|
|
titleValue = rootTitle;
|
|
}
|
|
const nextHasStyle = !!className || !!style;
|
|
return [className, style, titleValue, nextHasStyle];
|
|
}, [displayValue, selectContext?.flattenOptions, rootTitle]);
|
|
React.useEffect(() => {
|
|
if (combobox) {
|
|
setInputChanged(false);
|
|
}
|
|
}, [combobox, activeValue]);
|
|
|
|
// ========================== Render ==========================
|
|
const showHasValueCls = displayValue && displayValue.label !== null && displayValue.label !== undefined && String(displayValue.label).trim() !== '';
|
|
|
|
// Render value
|
|
// Only render value when not using custom input in combobox mode
|
|
const shouldRenderValue = !(combobox && components?.input);
|
|
const renderValue = shouldRenderValue ? displayValue ? hasOptionStyle ? /*#__PURE__*/React.createElement("div", {
|
|
className: (0, _clsx.clsx)(`${prefixCls}-content-value`, optionClassName),
|
|
style: {
|
|
...(mergedSearchValue ? {
|
|
visibility: 'hidden'
|
|
} : {}),
|
|
...optionStyle
|
|
},
|
|
title: optionTitle
|
|
}, displayValue.label) : displayValue.label : /*#__PURE__*/React.createElement(_Placeholder.default, {
|
|
show: !mergedSearchValue
|
|
}) : null;
|
|
// Render
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: (0, _clsx.clsx)(`${prefixCls}-content`, showHasValueCls && `${prefixCls}-content-has-value`, mergedSearchValue && `${prefixCls}-content-has-search-value`, hasOptionStyle && `${prefixCls}-content-has-option-style`, classNames?.content),
|
|
style: styles?.content,
|
|
title: hasOptionStyle ? undefined : optionTitle
|
|
}, renderValue, /*#__PURE__*/React.createElement(_Input.default, _extends({
|
|
ref: ref
|
|
}, inputProps, {
|
|
value: mergedSearchValue,
|
|
maxLength: mode === 'combobox' ? maxLength : undefined,
|
|
onChange: e => {
|
|
setInputChanged(true);
|
|
inputProps.onChange?.(e);
|
|
}
|
|
})));
|
|
});
|
|
var _default = exports.default = SingleContent; |