Update from Vibe Studio

This commit is contained in:
Vibe Studio
2026-01-16 02:20:32 +00:00
parent a4605e311a
commit 71de1506ca
28603 changed files with 2179459 additions and 0 deletions

View File

@@ -0,0 +1,30 @@
import type { SelectProps } from 'antd';
import React from 'react';
import type { ProFieldLightProps } from '../../../index';
export type LightSelectProps = {
label?: string;
placeholder?: any;
valueMaxLength?: number;
/** 刷新数据 */
fetchData: (keyWord?: string) => void;
/**
* 当搜索关键词发生变化时是否请求远程数据
*
* @default true
*/
fetchDataOnSearch?: boolean;
} & ProFieldLightProps;
declare const _default: React.ForwardRefExoticComponent<SelectProps<any, import("antd/es/select").DefaultOptionType> & {
label?: string | undefined;
placeholder?: any;
valueMaxLength?: number | undefined;
/** 刷新数据 */
fetchData: (keyWord?: string | undefined) => void;
/**
* 当搜索关键词发生变化时是否请求远程数据
*
* @default true
*/
fetchDataOnSearch?: boolean | undefined;
} & ProFieldLightProps & React.RefAttributes<any>>;
export default _default;

View File

@@ -0,0 +1,244 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _icons = require("@ant-design/icons");
var _proUtils = require("@ant-design/pro-utils");
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
var _react = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["label", "prefixCls", "onChange", "value", "mode", "children", "defaultValue", "size", "showSearch", "disabled", "style", "className", "bordered", "options", "onSearch", "allowClear", "labelInValue", "fieldNames", "lightLabel", "labelTrigger", "optionFilterProp", "optionLabelProp", "valueMaxLength", "fetchDataOnSearch", "fetchData"];
/**
* 如果有 label 就优先使用 label
*
* @param valueMap
* @param v
*/
var getValueOrLabel = function getValueOrLabel(valueMap, v) {
if ((0, _typeof2.default)(v) !== 'object') {
return valueMap[v] || v;
}
return valueMap[v === null || v === void 0 ? void 0 : v.value] || v.label;
};
var LightSelect = function LightSelect(props, ref) {
var label = props.label,
customizePrefixCls = props.prefixCls,
_onChange = props.onChange,
value = props.value,
mode = props.mode,
children = props.children,
defaultValue = props.defaultValue,
size = props.size,
showSearch = props.showSearch,
disabled = props.disabled,
style = props.style,
className = props.className,
bordered = props.bordered,
options = props.options,
onSearch = props.onSearch,
allowClear = props.allowClear,
labelInValue = props.labelInValue,
fieldNames = props.fieldNames,
lightLabel = props.lightLabel,
labelTrigger = props.labelTrigger,
optionFilterProp = props.optionFilterProp,
_props$optionLabelPro = props.optionLabelProp,
optionLabelProp = _props$optionLabelPro === void 0 ? '' : _props$optionLabelPro,
_props$valueMaxLength = props.valueMaxLength,
valueMaxLength = _props$valueMaxLength === void 0 ? 41 : _props$valueMaxLength,
_props$fetchDataOnSea = props.fetchDataOnSearch,
fetchDataOnSearch = _props$fetchDataOnSea === void 0 ? false : _props$fetchDataOnSea,
fetchData = props.fetchData,
restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
var _props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? label : _props$placeholder;
var _ref = fieldNames || {},
_ref$label = _ref.label,
labelPropsName = _ref$label === void 0 ? 'label' : _ref$label,
_ref$value = _ref.value,
valuePropsName = _ref$value === void 0 ? 'value' : _ref$value;
var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls;
var prefixCls = getPrefixCls('pro-field-select-light-select');
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = (0, _react.useState)(''),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
keyword = _useState4[0],
setKeyword = _useState4[1];
// css
var _useStyle = (0, _proUtils.useStyle)('LightSelect', function (token) {
return (0, _defineProperty2.default)({}, ".".concat(prefixCls), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-select"), {
position: 'absolute',
width: '153px',
height: '28px',
visibility: 'hidden',
'&-selector': {
height: 28
}
}), "&.".concat(prefixCls, "-searchable"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-select"), {
width: '200px',
'&-selector': {
height: 28
}
})));
}),
wrapSSR = _useStyle.wrapSSR,
hashId = _useStyle.hashId;
var valueMap = (0, _react.useMemo)(function () {
var values = {};
options === null || options === void 0 || options.forEach(function (item) {
var optionLabel = item[optionLabelProp] || item[labelPropsName];
var optionValue = item[valuePropsName];
values[optionValue] = optionLabel || optionValue;
});
return values;
}, [labelPropsName, options, valuePropsName, optionLabelProp]);
// 修复用户在使用ProFormSelect组件时在fieldProps中使用open属性不生效。
// ProComponents文档中写到“与select相同且fieldProps同antd组件中的props”描述方案不相符
var mergeOpen = (0, _react.useMemo)(function () {
if (Reflect.has(restProps, 'open')) {
return restProps === null || restProps === void 0 ? void 0 : restProps.open;
}
return open;
}, [open, restProps]);
var filterValue = Array.isArray(value) ? value.map(function (v) {
return getValueOrLabel(valueMap, v);
}) : getValueOrLabel(valueMap, value);
return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classnames.default)(prefixCls, hashId, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-searchable"), showSearch), "".concat(prefixCls, "-container-").concat(restProps.placement || 'bottomLeft'), className),
style: style,
onClick: function onClick(e) {
var _lightLabel$current;
if (disabled) return;
// 点击label切换下拉菜单
var isLabelClick = lightLabel === null || lightLabel === void 0 || (_lightLabel$current = lightLabel.current) === null || _lightLabel$current === void 0 || (_lightLabel$current = _lightLabel$current.labelRef) === null || _lightLabel$current === void 0 || (_lightLabel$current = _lightLabel$current.current) === null || _lightLabel$current === void 0 ? void 0 : _lightLabel$current.contains(e.target);
if (isLabelClick) {
setOpen(!open);
} else {
// 这里注释掉
/**
* 因为这里与代码
* if (mode !== 'multiple') {
* setOpen(false);
* }
* 冲突了,导致这段代码不生效
*/
// setOpen(true);
}
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Select
/**
* popupMatchSelectWidth写死false会关闭虚拟滚动数量量过大时影响组件性能
* 将此属性注释掉,变成灵活的动态配置
*/
// popupMatchSelectWidth={false}
, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
allowClear: allowClear,
value: value,
mode: mode,
labelInValue: labelInValue,
size: size,
disabled: disabled,
onChange: function onChange(v, option) {
_onChange === null || _onChange === void 0 || _onChange(v, option);
if (mode !== 'multiple') {
setOpen(false);
}
}
}, (0, _proUtils.compatibleBorder)(bordered)), {}, {
showSearch: showSearch,
onSearch: showSearch ? function (keyValue) {
if (fetchDataOnSearch && fetchData) {
fetchData(keyValue);
}
onSearch === null || onSearch === void 0 || onSearch(keyValue);
} : void 0,
style: style,
dropdownRender: function dropdownRender(menuNode) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: ref,
children: [showSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
margin: '4px 8px'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, {
value: keyword,
allowClear: !!allowClear,
onChange: function onChange(e) {
setKeyword(e.target.value);
if (fetchDataOnSearch && fetchData) {
fetchData(e.target.value);
}
onSearch === null || onSearch === void 0 || onSearch(e.target.value);
},
onKeyDown: function onKeyDown(e) {
// 避免按下删除键把选项也删除了
if (e.key === 'Backspace') {
e.stopPropagation();
return;
}
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault();
}
},
style: {
width: '100%'
},
prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {})
})
}), menuNode]
});
},
open: mergeOpen,
onDropdownVisibleChange: function onDropdownVisibleChange(isOpen) {
var _restProps$onDropdown;
if (!isOpen) {
// 测试环境下直接跑
setKeyword('');
}
if (!labelTrigger) {
setOpen(isOpen);
}
restProps === null || restProps === void 0 || (_restProps$onDropdown = restProps.onDropdownVisibleChange) === null || _restProps$onDropdown === void 0 || _restProps$onDropdown.call(restProps, isOpen);
},
prefixCls: customizePrefixCls,
options: onSearch || !keyword ? options : options === null || options === void 0 ? void 0 : options.filter(function (o) {
var _String, _o$valuePropsName;
if (optionFilterProp) {
return (0, _toArray.default)(o[optionFilterProp]).join('').toLowerCase().includes(keyword);
}
return ((_String = String(o[labelPropsName])) === null || _String === void 0 || (_String = _String.toLowerCase()) === null || _String === void 0 ? void 0 : _String.includes(keyword === null || keyword === void 0 ? void 0 : keyword.toLowerCase())) || ((_o$valuePropsName = o[valuePropsName]) === null || _o$valuePropsName === void 0 || (_o$valuePropsName = _o$valuePropsName.toString()) === null || _o$valuePropsName === void 0 || (_o$valuePropsName = _o$valuePropsName.toLowerCase()) === null || _o$valuePropsName === void 0 ? void 0 : _o$valuePropsName.includes(keyword === null || keyword === void 0 ? void 0 : keyword.toLowerCase()));
})
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_proUtils.FieldLabel, {
ellipsis: true,
label: label,
placeholder: placeholder,
disabled: disabled,
bordered: bordered,
allowClear: !!allowClear,
value: filterValue || (value === null || value === void 0 ? void 0 : value.label) || value,
onClear: function onClear() {
_onChange === null || _onChange === void 0 || _onChange(undefined, undefined);
},
ref: lightLabel,
valueMaxLength: valueMaxLength
})]
}));
};
var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(LightSelect);

View File

@@ -0,0 +1,80 @@
import type { RequestOptionsType } from '@ant-design/pro-utils';
import type { SelectProps } from 'antd';
import type { LabeledValue } from 'antd/lib/select';
import React from 'react';
export type KeyLabel = Partial<LabeledValue> & RequestOptionsType;
/** 用户扩展数据后的值类型 */
export type DataValueType<T> = KeyLabel & T;
/** 可能单选,可能多选 */
export type DataValuesType<T> = DataValueType<T> | DataValueType<T>[];
export interface SearchSelectProps<T = Record<string, any>> extends Omit<SelectProps<KeyLabel | KeyLabel[]>, 'options'> {
/** 防抖动时间 默认10 单位ms */
debounceTime?: number;
/** 自定义搜索方法, 返回搜索结果的 Promise */
request?: (params: {
query: string;
}) => Promise<DataValueType<T>[]>;
/** 自定义选项渲染 */
optionItemRender?: (item: DataValueType<T>) => React.ReactNode;
/** 指定组件中的值 */
value?: KeyLabel | KeyLabel[];
/** 指定默认选中的条目 */
defaultValue?: KeyLabel | KeyLabel[];
options?: RequestOptionsType[];
/**
* 样式
*
* @ignore
*/
style?: React.CSSProperties;
/**
* ClassName 类名
*
* @ignore
*/
className?: string;
/**
* Placeholder 输入提示
*
* @default 请输入关键字搜索
*/
placeholder?: string;
/**
* 是否在输入框聚焦时触发搜索
*
* @default false
*/
searchOnFocus?: boolean;
/**
* 选择完一个之后是否清空搜索项重新搜索
*
* @default false
*/
resetAfterSelect?: boolean;
/**
* 自定义前缀
*
* @ignore
*/
prefixCls?: string;
/** 刷新数据 */
fetchData: (keyWord?: string) => void;
/** 清空数据 */
resetData: () => void;
/**
* 当搜索关键词发生变化时是否请求远程数据
*
* @default true
*/
fetchDataOnSearch?: boolean;
/** 默认搜索关键词 */
defaultSearchValue?: string;
/**
* 在选择时保留选项的原始标签文本
* 当设置为 true 时,选中后回填的内容将使用选项的原始 label而不是经过 optionItemRender 处理后的内容
* @default false
*/
preserveOriginalLabel?: boolean;
}
declare const _default: React.ForwardRefExoticComponent<SearchSelectProps<unknown[]> & React.RefAttributes<unknown>>;
export default _default;

View File

@@ -0,0 +1,215 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _proUtils = require("@ant-design/pro-utils");
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["optionItemRender", "mode", "onSearch", "onFocus", "onChange", "autoClearSearchValue", "searchOnFocus", "resetAfterSelect", "fetchDataOnSearch", "optionFilterProp", "optionLabelProp", "className", "disabled", "options", "fetchData", "resetData", "prefixCls", "onClear", "searchValue", "showSearch", "fieldNames", "defaultSearchValue", "preserveOriginalLabel"],
_excluded2 = ["className", "optionType"]; // 支持 key, value, label兼容 UserSearch 中只填写了 key 的情况。
/** 用户扩展数据后的值类型 */
/** 可能单选,可能多选 */
var SearchSelect = function SearchSelect(props, ref) {
var optionItemRender = props.optionItemRender,
mode = props.mode,
onSearch = props.onSearch,
_onFocus = props.onFocus,
_onChange = props.onChange,
_props$autoClearSearc = props.autoClearSearchValue,
autoClearSearchValue = _props$autoClearSearc === void 0 ? true : _props$autoClearSearc,
_props$searchOnFocus = props.searchOnFocus,
searchOnFocus = _props$searchOnFocus === void 0 ? false : _props$searchOnFocus,
_props$resetAfterSele = props.resetAfterSelect,
resetAfterSelect = _props$resetAfterSele === void 0 ? false : _props$resetAfterSele,
_props$fetchDataOnSea = props.fetchDataOnSearch,
fetchDataOnSearch = _props$fetchDataOnSea === void 0 ? true : _props$fetchDataOnSea,
_props$optionFilterPr = props.optionFilterProp,
optionFilterProp = _props$optionFilterPr === void 0 ? 'label' : _props$optionFilterPr,
_props$optionLabelPro = props.optionLabelProp,
optionLabelProp = _props$optionLabelPro === void 0 ? 'label' : _props$optionLabelPro,
className = props.className,
disabled = props.disabled,
options = props.options,
fetchData = props.fetchData,
resetData = props.resetData,
customizePrefixCls = props.prefixCls,
_onClear = props.onClear,
propsSearchValue = props.searchValue,
showSearch = props.showSearch,
fieldNames = props.fieldNames,
defaultSearchValue = props.defaultSearchValue,
_props$preserveOrigin = props.preserveOriginalLabel,
preserveOriginalLabel = _props$preserveOrigin === void 0 ? false : _props$preserveOrigin,
restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
var _ref = fieldNames || {},
_ref$label = _ref.label,
labelPropsName = _ref$label === void 0 ? 'label' : _ref$label,
_ref$value = _ref.value,
valuePropsName = _ref$value === void 0 ? 'value' : _ref$value,
_ref$options = _ref.options,
optionsPropsName = _ref$options === void 0 ? 'options' : _ref$options;
var _useState = (0, _react.useState)(propsSearchValue !== null && propsSearchValue !== void 0 ? propsSearchValue : defaultSearchValue),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
searchValue = _useState2[0],
setSearchValue = _useState2[1];
var selectRef = (0, _react.useRef)();
(0, _react.useImperativeHandle)(ref, function () {
return selectRef.current;
});
(0, _react.useEffect)(function () {
if (restProps.autoFocus) {
var _selectRef$current;
selectRef === null || selectRef === void 0 || (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 || _selectRef$current.focus();
}
}, [restProps.autoFocus]);
(0, _react.useEffect)(function () {
setSearchValue(propsSearchValue);
}, [propsSearchValue]);
var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls;
var prefixCls = getPrefixCls('pro-filed-search-select', customizePrefixCls);
// 兼容 renderXXX API。
var classString = (0, _classnames.default)(prefixCls, className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-disabled"), disabled));
var getMergeValue = function getMergeValue(value, option) {
if (Array.isArray(value) && Array.isArray(option) && value.length > 0) {
// 多选情况且用户有选择
return value.map(function (item, index) {
var optionItem = option === null || option === void 0 ? void 0 : option[index];
var dataItem = optionItem === null || optionItem === void 0 ? void 0 : optionItem['data-item'];
return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, dataItem || {}), item), {}, {
label: preserveOriginalLabel && dataItem ? dataItem.label : item.label
});
});
}
return [];
};
var genOptions = function genOptions(mapOptions) {
return mapOptions.map(function (item, index) {
var _item$optionsPropsNam;
var _ref2 = item,
itemClassName = _ref2.className,
optionType = _ref2.optionType,
resetItem = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
var label = item[labelPropsName];
var value = item[valuePropsName];
var itemOptions = (_item$optionsPropsNam = item[optionsPropsName]) !== null && _item$optionsPropsNam !== void 0 ? _item$optionsPropsNam : [];
if (optionType === 'optGroup' || item.options) {
return (0, _objectSpread2.default)((0, _objectSpread2.default)({
label: label
}, resetItem), {}, {
data_title: label,
title: label,
key: value !== null && value !== void 0 ? value : "".concat(label === null || label === void 0 ? void 0 : label.toString(), "-").concat(index, "-").concat((0, _proUtils.nanoid)()),
// 防止因key相同导致虚拟滚动出问题
children: genOptions(itemOptions)
});
}
return (0, _objectSpread2.default)((0, _objectSpread2.default)({
title: label
}, resetItem), {}, {
data_title: label,
value: value !== null && value !== void 0 ? value : index,
key: value !== null && value !== void 0 ? value : "".concat(label === null || label === void 0 ? void 0 : label.toString(), "-").concat(index, "-").concat((0, _proUtils.nanoid)()),
'data-item': item,
className: "".concat(prefixCls, "-option ").concat(itemClassName || '').trim(),
label: (optionItemRender === null || optionItemRender === void 0 ? void 0 : optionItemRender(item)) || label
});
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Select, (0, _objectSpread2.default)((0, _objectSpread2.default)({
ref: selectRef,
className: classString,
allowClear: true,
autoClearSearchValue: autoClearSearchValue,
disabled: disabled,
mode: mode,
showSearch: showSearch,
searchValue: searchValue,
optionFilterProp: optionFilterProp,
optionLabelProp: optionLabelProp,
onClear: function onClear() {
_onClear === null || _onClear === void 0 || _onClear();
fetchData(undefined);
if (showSearch) {
setSearchValue(undefined);
}
}
}, restProps), {}, {
filterOption: restProps.filterOption == false ? false : function (inputValue, option) {
var _option$data_title, _option$optionFilterP;
if (restProps.filterOption && typeof restProps.filterOption === 'function') {
return restProps.filterOption(inputValue, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
label: option === null || option === void 0 ? void 0 : option.data_title
}));
}
return !!(option !== null && option !== void 0 && (_option$data_title = option.data_title) !== null && _option$data_title !== void 0 && _option$data_title.toString().toLowerCase().includes(inputValue.toLowerCase()) || option !== null && option !== void 0 && (_option$optionFilterP = option[optionFilterProp]) !== null && _option$optionFilterP !== void 0 && _option$optionFilterP.toString().toLowerCase().includes(inputValue.toLowerCase()));
} // 这里使用pro-components的过滤逻辑
,
onSearch: showSearch ? function (value) {
if (fetchDataOnSearch) {
fetchData(value);
}
onSearch === null || onSearch === void 0 || onSearch(value);
setSearchValue(value);
} : undefined,
onChange: function onChange(value, optionList) {
// 将搜索框置空 和 antd 行为保持一致
if (showSearch && autoClearSearchValue) {
fetchData(undefined);
onSearch === null || onSearch === void 0 || onSearch('');
setSearchValue(undefined);
}
for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
rest[_key - 2] = arguments[_key];
}
if (!props.labelInValue) {
_onChange === null || _onChange === void 0 || _onChange.apply(void 0, [value, optionList].concat(rest));
return;
}
if (mode !== 'multiple' && !Array.isArray(optionList)) {
// 单选情况且用户选择了选项
var dataItem = optionList && optionList['data-item'];
// 如果value值为空则是清空时产生的回调,直接传值就可以了
if (!value || !dataItem) {
var changedValue = value ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
// 这里有一种情况,如果用户使用了 request和labelInValue保存之后刷新页面正常回显但是再次添加会出现 label 丢失的情况。所以需要兼容
label: preserveOriginalLabel && dataItem ? (dataItem === null || dataItem === void 0 ? void 0 : dataItem.label) || value.label : value.label
}) : value;
_onChange === null || _onChange === void 0 || _onChange.apply(void 0, [changedValue, optionList].concat(rest));
} else {
_onChange === null || _onChange === void 0 || _onChange.apply(void 0, [(0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), dataItem), {}, {
label: preserveOriginalLabel && dataItem ? dataItem.label : value.label
}), optionList].concat(rest));
}
return;
}
// 合并值
var mergeValue = getMergeValue(value, optionList);
_onChange === null || _onChange === void 0 || _onChange.apply(void 0, [mergeValue, optionList].concat(rest));
// 将搜索结果置空,重新搜索
if (resetAfterSelect) resetData();
},
onFocus: function onFocus(e) {
if (searchOnFocus) {
fetchData(searchValue);
}
_onFocus === null || _onFocus === void 0 || _onFocus(e);
},
options: genOptions(options || [])
}));
};
var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(SearchSelect);

View File

@@ -0,0 +1,55 @@
import { ProFieldRequestData, ProFieldValueEnumType, RequestOptionsType } from '@ant-design/pro-utils';
import type { SelectProps } from 'antd';
import type { ReactNode } from 'react';
import React from 'react';
import type { ProFieldLightProps } from '../../index';
import 'antd/lib/select/style';
type SelectOptionType = Partial<RequestOptionsType>[];
export type FieldSelectProps<FieldProps = any> = {
text: string;
/** 值的枚举如果存在枚举Search 中会生成 select */
valueEnum?: ProFieldValueEnumType;
/** 防抖动时间 默认10 单位ms */
debounceTime?: number;
/** 从服务器读取选项 */
request?: ProFieldRequestData;
/** 重新触发的时机 */
params?: any;
/** 组件的全局设置 */
fieldProps?: FieldProps;
bordered?: boolean;
id?: string;
children?: ReactNode;
/** 默认搜素条件 */
defaultKeyWords?: string;
} & ProFieldLightProps;
/**
* 把 value 的枚举转化为数组
*
* @param valueEnum
*/
export declare const proFieldParsingValueEnumToArray: (valueEnumParams: ProFieldValueEnumType) => SelectOptionType;
export declare const useFieldFetchData: (props: FieldSelectProps & {
proFieldKey?: React.Key;
defaultKeyWords?: string;
cacheForSwr?: boolean;
}) => [boolean, SelectOptionType, (keyWord?: string) => void, () => void];
declare const _default: React.ForwardRefExoticComponent<import("@ant-design/pro-provider").BaseProFieldFC & import("@ant-design/pro-provider").ProRenderFieldPropsType & {
text: string;
/** 值的枚举如果存在枚举Search 中会生成 select */
valueEnum?: ProFieldValueEnumType | undefined;
/** 防抖动时间 默认10 单位ms */
debounceTime?: number | undefined;
/** 从服务器读取选项 */
request?: ProFieldRequestData | undefined;
/** 重新触发的时机 */
params?: any;
/** 组件的全局设置 */
fieldProps?: any;
bordered?: boolean | undefined;
id?: string | undefined;
children?: ReactNode;
/** 默认搜素条件 */
defaultKeyWords?: string | undefined;
} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "style" | "className" | "fieldNames"> & React.RefAttributes<any>>;
export default _default;

View File

@@ -0,0 +1,450 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useFieldFetchData = exports.proFieldParsingValueEnumToArray = exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _proProvider = require("@ant-design/pro-provider");
var _proUtils = require("@ant-design/pro-utils");
var _antd = require("antd");
var _react = _interopRequireWildcard(require("react"));
var _swr = _interopRequireDefault(require("swr"));
var _LightSelect = _interopRequireDefault(require("./LightSelect"));
var _SearchSelect = _interopRequireDefault(require("./SearchSelect"));
require("antd/lib/select/style");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["value", "text"],
_excluded2 = ["mode", "valueEnum", "render", "renderFormItem", "request", "fieldProps", "plain", "children", "light", "proFieldKey", "params", "label", "bordered", "id", "lightLabel", "labelTrigger"]; // 兼容代码-----------
//------------
var Highlight = function Highlight(_ref) {
var label = _ref.label,
words = _ref.words;
var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls;
var lightCls = getPrefixCls('pro-select-item-option-content-light');
var optionCls = getPrefixCls('pro-select-item-option-content');
// css
var _useStyle = (0, _proUtils.useStyle)('Highlight', function (token) {
return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(lightCls), {
color: token.colorPrimary
}), ".".concat(optionCls), {
flex: 'auto',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
});
}),
wrapSSR = _useStyle.wrapSSR;
var matchKeywordsRE = new RegExp(words.map(function (word) {
return word.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
}).join('|'), 'gi');
var matchText = label;
var elements = [];
while (matchText.length) {
var match = matchKeywordsRE.exec(matchText);
if (!match) {
elements.push(matchText);
break;
}
var start = match.index;
var matchLength = match[0].length + start;
elements.push(matchText.slice(0, start), /*#__PURE__*/_react.default.createElement('span', {
className: lightCls
}, matchText.slice(start, matchLength)));
matchText = matchText.slice(matchLength);
}
return wrapSSR( /*#__PURE__*/_react.default.createElement.apply(_react.default, ['div', {
title: label,
className: optionCls
}].concat(elements)));
};
/**
* 递归筛选 item
*
* @param item
* @param keyWords
* @returns
*/
function filerByItem(item, keyWords) {
var _item$label, _item$value;
if (!keyWords) return true;
if (item !== null && item !== void 0 && (_item$label = item.label) !== null && _item$label !== void 0 && _item$label.toString().toLowerCase().includes(keyWords.toLowerCase()) || item !== null && item !== void 0 && (_item$value = item.value) !== null && _item$value !== void 0 && _item$value.toString().toLowerCase().includes(keyWords.toLowerCase())) {
return true;
}
if (item.children || item.options) {
var findItem = [].concat((0, _toConsumableArray2.default)(item.children || []), [item.options || []]).find(function (mapItem) {
return filerByItem(mapItem, keyWords);
});
if (findItem) return true;
}
return false;
}
/**
* 把 value 的枚举转化为数组
*
* @param valueEnum
*/
var proFieldParsingValueEnumToArray = exports.proFieldParsingValueEnumToArray = function proFieldParsingValueEnumToArray(valueEnumParams) {
var enumArray = [];
var valueEnum = (0, _proUtils.objectToMap)(valueEnumParams);
valueEnum.forEach(function (_, key) {
var value = valueEnum.get(key) || valueEnum.get("".concat(key));
if (!value) {
return;
}
if ((0, _typeof2.default)(value) === 'object' && value !== null && value !== void 0 && value.text) {
enumArray.push({
text: value === null || value === void 0 ? void 0 : value.text,
value: key,
label: value === null || value === void 0 ? void 0 : value.text,
disabled: value.disabled
});
return;
}
enumArray.push({
text: value,
value: key
});
});
return enumArray;
};
var useFieldFetchData = exports.useFieldFetchData = function useFieldFetchData(props) {
var _ref5, _props$debounceTime, _props$fieldProps3, _props$fieldProps6;
var cacheForSwr = props.cacheForSwr,
fieldProps = props.fieldProps;
var _useState = (0, _react.useState)(props.defaultKeyWords),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
keyWords = _useState2[0],
setKeyWords = _useState2[1];
/** Key 是用来缓存请求的,如果不在是有问题 */
var _useState3 = (0, _react.useState)(function () {
if (props.proFieldKey) {
return props.proFieldKey.toString();
}
if (props.request) {
return (0, _proUtils.nanoid)();
}
return 'no-fetch';
}),
_useState4 = (0, _slicedToArray2.default)(_useState3, 1),
cacheKey = _useState4[0];
var proFieldKeyRef = (0, _react.useRef)(cacheKey);
var getOptionsFormValueEnum = (0, _proUtils.useRefFunction)(function (coverValueEnum) {
return proFieldParsingValueEnumToArray((0, _proUtils.objectToMap)(coverValueEnum)).map(function (_ref3) {
var value = _ref3.value,
text = _ref3.text,
rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
return (0, _objectSpread2.default)({
label: text,
value: value,
key: value
}, rest);
});
});
var defaultOptions = (0, _proUtils.useDeepCompareMemo)(function () {
if (!fieldProps) return undefined;
var data = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.options) || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.treeData);
if (!data) return undefined;
var _ref4 = fieldProps.fieldNames || {},
children = _ref4.children,
label = _ref4.label,
value = _ref4.value;
var traverseFieldKey = function traverseFieldKey(_options, type) {
if (!(_options !== null && _options !== void 0 && _options.length)) return;
var length = _options.length;
var i = 0;
while (i < length) {
var cur = _options[i++];
var customFieldName = type === 'children' ? children : type === 'label' ? label : value;
if (customFieldName && cur[customFieldName] !== undefined) {
cur[type] = cur[customFieldName];
if (type === 'children') {
traverseFieldKey(cur[customFieldName], 'children');
traverseFieldKey(cur[customFieldName], 'label');
traverseFieldKey(cur[customFieldName], 'value');
}
}
}
};
if (children) traverseFieldKey(data, 'children');
if (label) traverseFieldKey(data, 'label');
if (value) traverseFieldKey(data, 'value');
return data;
}, [fieldProps]);
var _useMountMergeState = (0, _proUtils.useMountMergeState)(function () {
if (props.valueEnum) {
return getOptionsFormValueEnum(props.valueEnum);
}
return [];
}, {
value: defaultOptions
}),
_useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
options = _useMountMergeState2[0],
setOptions = _useMountMergeState2[1];
(0, _proUtils.useDeepCompareEffect)(function () {
var _props$fieldProps, _props$fieldProps2;
// 优先使用 fieldProps?.options
if (!props.valueEnum || (_props$fieldProps = props.fieldProps) !== null && _props$fieldProps !== void 0 && _props$fieldProps.options || (_props$fieldProps2 = props.fieldProps) !== null && _props$fieldProps2 !== void 0 && _props$fieldProps2.treeData) return;
setOptions(getOptionsFormValueEnum(props.valueEnum));
}, [props.valueEnum]);
var swrKey = (0, _proUtils.useDebounceValue)([proFieldKeyRef.current, props.params, keyWords], (_ref5 = (_props$debounceTime = props.debounceTime) !== null && _props$debounceTime !== void 0 ? _props$debounceTime : props === null || props === void 0 || (_props$fieldProps3 = props.fieldProps) === null || _props$fieldProps3 === void 0 ? void 0 : _props$fieldProps3.debounceTime) !== null && _ref5 !== void 0 ? _ref5 : 0, [props.params, keyWords]);
var _useSWR = (0, _swr.default)(function () {
if (!props.request) {
return null;
}
return swrKey;
}, function (_ref6) {
var _ref7 = (0, _slicedToArray2.default)(_ref6, 3),
params = _ref7[1],
kw = _ref7[2];
return props.request((0, _objectSpread2.default)((0, _objectSpread2.default)({}, params), {}, {
keyWords: kw
}), props);
}, {
revalidateIfStale: !cacheForSwr,
// 打开 cacheForSwr 的时候才应该支持两个功能
revalidateOnReconnect: cacheForSwr,
shouldRetryOnError: false,
// @todo 这个功能感觉应该搞个API出来
revalidateOnFocus: false
}),
data = _useSWR.data,
setLocaleData = _useSWR.mutate,
isValidating = _useSWR.isValidating;
var resOptions = (0, _react.useMemo)(function () {
var _props$fieldProps4, _props$fieldProps5;
var opt = options === null || options === void 0 ? void 0 : options.map(function (item) {
if (typeof item === 'string') {
return {
label: item,
value: item
};
}
if (item.children || item.options) {
var childrenOptions = [].concat((0, _toConsumableArray2.default)(item.children || []), (0, _toConsumableArray2.default)(item.options || [])).filter(function (mapItem) {
return filerByItem(mapItem, keyWords);
});
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
children: childrenOptions,
options: childrenOptions
});
}
return item;
});
// filterOption 为 true 时 filter数据, filterOption 默认为true
if (((_props$fieldProps4 = props.fieldProps) === null || _props$fieldProps4 === void 0 ? void 0 : _props$fieldProps4.filterOption) === true || ((_props$fieldProps5 = props.fieldProps) === null || _props$fieldProps5 === void 0 ? void 0 : _props$fieldProps5.filterOption) === undefined) {
return opt === null || opt === void 0 ? void 0 : opt.filter(function (item) {
if (!item) return false;
if (!keyWords) return true;
return filerByItem(item, keyWords);
});
}
return opt;
}, [options, keyWords, (_props$fieldProps6 = props.fieldProps) === null || _props$fieldProps6 === void 0 ? void 0 : _props$fieldProps6.filterOption]);
var applyFieldNamesMapping = function applyFieldNamesMapping(item) {
if (!(fieldProps !== null && fieldProps !== void 0 && fieldProps.fieldNames)) return item;
var _fieldProps$fieldName = fieldProps.fieldNames,
_fieldProps$fieldName2 = _fieldProps$fieldName.label,
labelKey = _fieldProps$fieldName2 === void 0 ? 'label' : _fieldProps$fieldName2,
_fieldProps$fieldName3 = _fieldProps$fieldName.value,
valueKey = _fieldProps$fieldName3 === void 0 ? 'value' : _fieldProps$fieldName3;
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
label: item[labelKey],
value: item[valueKey]
});
};
var finalData = props.request ? data === null || data === void 0 ? void 0 : data.map(function (item) {
return applyFieldNamesMapping(item);
}) : undefined;
return [isValidating, finalData || resOptions, function (fetchKeyWords) {
setKeyWords(fetchKeyWords);
}, function () {
setKeyWords(undefined);
setLocaleData([], false);
}];
};
/**
* 可以根据 valueEnum 来进行类型的设置
*
* @param
*/
var FieldSelect = function FieldSelect(props, ref) {
var _ConfigProvider$useCo;
var mode = props.mode,
valueEnum = props.valueEnum,
render = props.render,
renderFormItem = props.renderFormItem,
request = props.request,
fieldProps = props.fieldProps,
plain = props.plain,
children = props.children,
light = props.light,
proFieldKey = props.proFieldKey,
params = props.params,
label = props.label,
bordered = props.bordered,
id = props.id,
lightLabel = props.lightLabel,
labelTrigger = props.labelTrigger,
rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
var inputRef = (0, _react.useRef)();
var intl = (0, _proProvider.useIntl)();
var keyWordsRef = (0, _react.useRef)('');
(0, _react.useEffect)(function () {
keyWordsRef.current = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.searchValue;
}, [fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.searchValue]);
var _useFieldFetchData = useFieldFetchData(props),
_useFieldFetchData2 = (0, _slicedToArray2.default)(_useFieldFetchData, 4),
loading = _useFieldFetchData2[0],
options = _useFieldFetchData2[1],
_fetchData = _useFieldFetchData2[2],
resetData = _useFieldFetchData2[3];
var _ref8 = (_antd.ConfigProvider === null || _antd.ConfigProvider === void 0 || (_ConfigProvider$useCo = _antd.ConfigProvider.useConfig) === null || _ConfigProvider$useCo === void 0 ? void 0 : _ConfigProvider$useCo.call(_antd.ConfigProvider)) || {
componentSize: 'middle'
},
componentSize = _ref8.componentSize;
(0, _react.useImperativeHandle)(ref, function () {
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, inputRef.current || {}), {}, {
fetchData: function fetchData(keyWord) {
return _fetchData(keyWord);
}
});
}, [_fetchData]);
var optionsValueEnum = (0, _react.useMemo)(function () {
if (mode !== 'read') return;
/**
* Support select fieldNames
* Similar to cascader fieldNames support
*/
var _ref9 = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fieldNames) || {},
_ref9$value = _ref9.value,
valuePropsName = _ref9$value === void 0 ? 'value' : _ref9$value,
_ref9$label = _ref9.label,
labelPropsName = _ref9$label === void 0 ? 'label' : _ref9$label,
_ref9$options = _ref9.options,
optionsPropsName = _ref9$options === void 0 ? 'options' : _ref9$options;
var traverseOptions = function traverseOptions(_options) {
var localMap = new Map();
if (!(_options !== null && _options !== void 0 && _options.length)) {
return localMap;
}
var length = _options.length;
for (var i = 0; i < length; i++) {
var cur = _options[i];
// Use fieldNames mapping to get correct value and label
var curValue = cur[valuePropsName];
var curLabel = cur[labelPropsName];
if (curValue !== undefined && curLabel !== undefined) {
localMap.set(curValue, curLabel);
}
// Handle nested options with fieldNames mapping
var childOptions = cur[optionsPropsName] || cur.options;
if (childOptions !== null && childOptions !== void 0 && childOptions.length) {
var childMap = traverseOptions(childOptions);
childMap.forEach(function (v, k) {
return localMap.set(k, v);
});
}
}
return localMap;
};
return traverseOptions(options);
}, [mode, options, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fieldNames]);
if (mode === 'read') {
var dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: (0, _proUtils.proFieldParsingText)(rest.text, (0, _proUtils.objectToMap)(valueEnum || optionsValueEnum))
});
if (render) {
var _render;
return (_render = render(dom, (0, _objectSpread2.default)((0, _objectSpread2.default)({
mode: mode
}, fieldProps), {}, {
options: options
}), dom)) !== null && _render !== void 0 ? _render : null;
}
return dom;
}
if (mode === 'edit' || mode === 'update') {
var renderDom = function renderDom() {
if (light) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LightSelect.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _proUtils.compatibleBorder)(bordered)), {}, {
id: id,
loading: loading,
ref: inputRef,
allowClear: true,
size: componentSize,
options: options,
label: label,
placeholder: intl.getMessage('tableForm.selectPlaceholder', '请选择'),
lightLabel: lightLabel,
labelTrigger: labelTrigger,
fetchData: _fetchData
}, fieldProps));
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchSelect.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
className: rest.className,
style: (0, _objectSpread2.default)({
minWidth: 100
}, rest.style)
}, (0, _proUtils.compatibleBorder)(bordered)), {}, {
id: id,
loading: loading,
ref: inputRef,
allowClear: true,
defaultSearchValue: props.defaultKeyWords,
notFoundContent: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {
size: "small"
}) : fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.notFoundContent,
fetchData: function fetchData(keyWord) {
keyWordsRef.current = keyWord !== null && keyWord !== void 0 ? keyWord : '';
_fetchData(keyWord);
},
resetData: resetData,
preserveOriginalLabel: true,
optionItemRender: function optionItemRender(item) {
if (typeof item.label === 'string' && keyWordsRef.current) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Highlight, {
label: item.label,
words: [keyWordsRef.current]
});
}
return item.label;
},
placeholder: intl.getMessage('tableForm.selectPlaceholder', '请选择'),
label: label
}, fieldProps), {}, {
options: options
}), "SearchSelect");
};
var _dom = renderDom();
if (renderFormItem) {
var _renderFormItem;
return (_renderFormItem = renderFormItem(rest.text, (0, _objectSpread2.default)((0, _objectSpread2.default)({
mode: mode
}, fieldProps), {}, {
options: options,
loading: loading
}), _dom)) !== null && _renderFormItem !== void 0 ? _renderFormItem : null;
}
return _dom;
}
return null;
};
var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(FieldSelect);