@regenbio/regenbio-components-react 1.2.15 → 1.2.16

package/packages/field/src/components/Segmented/index.tsx

@@ -0,0 +1,93 @@
+import { Segmented, Spin } from 'antd';
+import omit from 'omit.js';
+import React, { useImperativeHandle, useRef } from 'react';
+import type { ProFieldFC } from '../../index';
+import type { FieldSelectProps } from '../Select';
+import { useFieldFetchData } from '../Select';
+
+import { objectToMap, proFieldParsingText } from '@ant-design/pro-utils';
+import 'antd/lib/segmented/style';
+import 'antd/lib/spin/style';
+
+/**
+ * Segmented https://ant.design/components/segmented-cn/
+ *
+ * @param
+ */
+const FieldSegmented: ProFieldFC<
+  {
+    text: string;
+    emptyText?: React.ReactNode;
+  } & FieldSelectProps
+> = (props, ref) => {
+  const {
+    mode,
+    render,
+    renderFormItem,
+    fieldProps,
+    emptyText = '-',
+    ...rest
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>();
+
+  const [loading, options, fetchData] = useFieldFetchData(props);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      ...(inputRef.current || {}),
+      fetchData: (keyWord: string) => fetchData(keyWord),
+    }),
+    [fetchData],
+  );
+
+  if (loading) {
+    return <Spin size="small" />;
+  }
+
+  if (mode === 'read') {
+    const optionsValueEnum = options?.length
+      ? options?.reduce((pre: any, cur) => {
+          return { ...pre, [(cur.value as any) ?? '']: cur.label };
+        }, {})
+      : undefined;
+
+    const dom = (
+      <>
+        {proFieldParsingText(
+          rest.text,
+          objectToMap(rest.valueEnum || optionsValueEnum),
+        )}
+      </>
+    );
+
+    if (render) {
+      return (
+        render(rest.text, { mode, ...fieldProps }, <>{dom}</>) ?? emptyText
+      );
+    }
+    return dom;
+  }
+  if (mode === 'edit' || mode === 'update') {
+    const dom = (
+      <Segmented
+        ref={inputRef}
+        {...(omit(fieldProps || {}, ['allowClear']) as any)}
+        options={options}
+      />
+    );
+
+    if (renderFormItem) {
+      return renderFormItem(
+        rest.text,
+        { mode, ...fieldProps, options, loading },
+        dom,
+      );
+    }
+    return dom;
+  }
+  return null;
+};
+
+export default React.forwardRef(FieldSegmented);

package/packages/field/src/components/Select/LightSelect/index.tsx

@@ -0,0 +1,286 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { FieldLabel, compatibleBorder, useStyle } from '@ant-design/pro-utils';
+import type { SelectProps } from 'antd';
+import { ConfigProvider, Input, Select } from 'antd';
+
+import classNames from 'classnames';
+import toArray from 'rc-util/lib/Children/toArray';
+import React, { useContext, useMemo, useState } 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;
+
+/**
+ * 如果有 label 就优先使用 label
+ *
+ * @param valueMap
+ * @param v
+ */
+const getValueOrLabel = (
+  valueMap: Record<string, string>,
+  v:
+    | {
+        label: string;
+        value: string;
+      }
+    | string,
+) => {
+  if (typeof v !== 'object') {
+    return valueMap[v] || v;
+  }
+  return valueMap[v?.value] || v.label;
+};
+
+const LightSelect: React.ForwardRefRenderFunction<
+  any,
+  SelectProps<any> & LightSelectProps
+> = (props, ref) => {
+  const {
+    label,
+    prefixCls: customizePrefixCls,
+    onChange,
+    value,
+    mode,
+    children,
+    defaultValue,
+    size,
+    showSearch,
+    disabled,
+    style,
+    className,
+    bordered,
+    options,
+    onSearch,
+    allowClear,
+    labelInValue,
+    fieldNames,
+    lightLabel,
+    labelTrigger,
+    optionFilterProp,
+    optionLabelProp = '',
+    valueMaxLength = 41,
+    fetchDataOnSearch = false,
+    fetchData,
+    ...restProps
+  } = props;
+  const { placeholder = label } = props;
+  const { label: labelPropsName = 'label', value: valuePropsName = 'value' } =
+    fieldNames || {};
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-field-select-light-select');
+  const [open, setOpen] = useState<boolean>(false);
+  const [keyword, setKeyword] = useState<string>('');
+
+  // css
+  const { wrapSSR, hashId } = useStyle('LightSelect', (token) => {
+    return {
+      [`.${prefixCls}`]: {
+        [`${token.antCls}-select`]: {
+          position: 'absolute',
+          width: '153px',
+          height: '28px',
+          visibility: 'hidden',
+          '&-selector': {
+            height: 28,
+          },
+        },
+
+        [`&.${prefixCls}-searchable`]: {
+          [`${token.antCls}-select`]: {
+            width: '200px',
+            '&-selector': {
+              height: 28,
+            },
+          },
+        },
+      },
+    };
+  });
+
+  const valueMap: Record<string, string> = useMemo(() => {
+    const values = {} as Record<string, any>;
+    options?.forEach((item) => {
+      const optionLabel = item[optionLabelProp] || item[labelPropsName];
+      const optionValue = item[valuePropsName];
+      values[optionValue!] = optionLabel || optionValue;
+    });
+    return values;
+  }, [labelPropsName, options, valuePropsName, optionLabelProp]);
+
+  // 修复用户在使用ProFormSelect组件时，在fieldProps中使用open属性，不生效。
+  // ProComponents文档中写到“与select相同，且fieldProps同antd组件中的props”描述方案不相符
+  const mergeOpen = useMemo(() => {
+    if (Reflect.has(restProps, 'open')) {
+      return restProps?.open;
+    }
+    return open;
+  }, [open, restProps]);
+
+  const filterValue = Array.isArray(value)
+    ? value.map((v) => getValueOrLabel(valueMap, v))
+    : getValueOrLabel(valueMap, value);
+
+  return wrapSSR(
+    <div
+      className={classNames(
+        prefixCls,
+        hashId,
+        {
+          [`${prefixCls}-searchable`]: showSearch,
+        },
+        `${prefixCls}-container-${restProps.placement || 'bottomLeft'}`,
+        className,
+      )}
+      style={style}
+      onClick={(e) => {
+        if (disabled) return;
+        // 点击label切换下拉菜单
+        const isLabelClick = lightLabel?.current?.labelRef?.current?.contains(
+          e.target as HTMLElement,
+        );
+        if (isLabelClick) {
+          setOpen(!open);
+        } else {
+          // 这里注释掉
+          /**
+           * 因为这里与代码
+           *  if (mode !== 'multiple') {
+           *   setOpen(false);
+           *  }
+           * 冲突了，导致这段代码不生效
+           */
+          // setOpen(true);
+        }
+      }}
+    >
+      <Select
+        /**
+         * popupMatchSelectWidth写死false会关闭虚拟滚动，数量量过大时，影响组件性能
+         * 将此属性注释掉，变成灵活的动态配置
+         */
+        // popupMatchSelectWidth={false}
+        {...restProps}
+        allowClear={allowClear}
+        value={value}
+        mode={mode}
+        labelInValue={labelInValue}
+        size={size}
+        disabled={disabled}
+        onChange={(v, option) => {
+          onChange?.(v, option);
+          if (mode !== 'multiple') {
+            setOpen(false);
+          }
+        }}
+        {...compatibleBorder(bordered)}
+        showSearch={showSearch}
+        onSearch={
+          showSearch
+            ? (keyValue) => {
+                if (fetchDataOnSearch && fetchData) {
+                  fetchData(keyValue);
+                }
+                onSearch?.(keyValue);
+              }
+            : void 0
+        }
+        style={style}
+        dropdownRender={(menuNode) => {
+          return (
+            <div ref={ref}>
+              {showSearch && (
+                <div style={{ margin: '4px 8px' }}>
+                  <Input
+                    value={keyword}
+                    allowClear={!!allowClear}
+                    onChange={(e) => {
+                      setKeyword(e.target.value);
+                      if (fetchDataOnSearch && fetchData) {
+                        fetchData(e.target.value);
+                      }
+                      onSearch?.(e.target.value);
+                    }}
+                    onKeyDown={(e) => {
+                      // 避免按下删除键把选项也删除了
+                      if (e.key === 'Backspace') {
+                        e.stopPropagation();
+                        return;
+                      }
+                      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                        e.preventDefault();
+                      }
+                    }}
+                    style={{ width: '100%' }}
+                    prefix={<SearchOutlined />}
+                  />
+                </div>
+              )}
+              {menuNode}
+            </div>
+          );
+        }}
+        open={mergeOpen}
+        onDropdownVisibleChange={(isOpen) => {
+          if (!isOpen) {
+            //  测试环境下直接跑
+            setKeyword('');
+          }
+          if (!labelTrigger) {
+            setOpen(isOpen);
+          }
+          restProps?.onDropdownVisibleChange?.(isOpen);
+        }}
+        prefixCls={customizePrefixCls}
+        options={
+          onSearch || !keyword
+            ? options
+            : options?.filter((o) => {
+                if (optionFilterProp) {
+                  return toArray(o[optionFilterProp])
+                    .join('')
+                    .toLowerCase()
+                    .includes(keyword);
+                }
+                return (
+                  String(o[labelPropsName])
+                    ?.toLowerCase()
+                    ?.includes(keyword?.toLowerCase()) ||
+                  o[valuePropsName]
+                    ?.toString()
+                    ?.toLowerCase()
+                    ?.includes(keyword?.toLowerCase())
+                );
+              })
+        }
+      />
+      <FieldLabel
+        ellipsis
+        label={label}
+        placeholder={placeholder}
+        disabled={disabled}
+        bordered={bordered}
+        allowClear={!!allowClear}
+        value={filterValue || value?.label || value}
+        onClear={() => {
+          onChange?.(undefined, undefined as any);
+        }}
+        ref={lightLabel}
+        valueMaxLength={valueMaxLength}
+      />
+    </div>,
+  );
+};
+
+export default React.forwardRef(LightSelect);

package/packages/field/src/components/Select/SearchSelect/index.tsx

@@ -0,0 +1,334 @@
+import type { RequestOptionsType } from '@ant-design/pro-utils';
+import { nanoid } from '@ant-design/pro-utils';
+import type { SelectProps } from 'antd';
+import { ConfigProvider, Select } from 'antd';
+
+import type { DefaultOptionType, LabeledValue } from 'antd/lib/select';
+import classNames from 'classnames';
+import React, {
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+
+// 支持 key, value, label，兼容 UserSearch 中只填写了 key 的情况。
+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;
+}
+
+const SearchSelect = <T,>(props: SearchSelectProps<T[]>, ref: any) => {
+  const {
+    optionItemRender,
+    mode,
+    onSearch,
+    onFocus,
+    onChange,
+    autoClearSearchValue = true,
+    searchOnFocus = false,
+    resetAfterSelect = false,
+    fetchDataOnSearch = true,
+    optionFilterProp = 'label',
+    optionLabelProp = 'label',
+    className,
+    disabled,
+    options,
+    fetchData,
+    resetData,
+    prefixCls: customizePrefixCls,
+    onClear,
+    searchValue: propsSearchValue,
+    showSearch,
+    fieldNames,
+    defaultSearchValue,
+    preserveOriginalLabel = false,
+    ...restProps
+  } = props;
+
+  const {
+    label: labelPropsName = 'label',
+    value: valuePropsName = 'value',
+    options: optionsPropsName = 'options',
+  } = fieldNames || {};
+
+  const [searchValue, setSearchValue] = useState(
+    propsSearchValue ?? defaultSearchValue,
+  );
+
+  const selectRef = useRef<any>();
+
+  useImperativeHandle(ref, () => selectRef.current);
+
+  useEffect(() => {
+    if (restProps.autoFocus) {
+      selectRef?.current?.focus();
+    }
+  }, [restProps.autoFocus]);
+
+  useEffect(() => {
+    setSearchValue(propsSearchValue);
+  }, [propsSearchValue]);
+
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+
+  const prefixCls = getPrefixCls('pro-filed-search-select', customizePrefixCls);
+
+  // 兼容 renderXXX API。
+
+  const classString = classNames(prefixCls, className, {
+    [`${prefixCls}-disabled`]: disabled,
+  });
+
+  const getMergeValue: SelectProps<any>['onChange'] = (value, option) => {
+    if (Array.isArray(value) && Array.isArray(option) && value.length > 0) {
+      // 多选情况且用户有选择
+      return value.map((item, index) => {
+        const optionItem = (option as DefaultOptionType[])?.[
+          index
+        ] as DefaultOptionType;
+        const dataItem = optionItem?.['data-item'] || {};
+        return {
+          ...dataItem,
+          ...item,
+          label: preserveOriginalLabel ? dataItem.label : item.label,
+        };
+      });
+    }
+    return [];
+  };
+
+  const genOptions = (
+    mapOptions: RequestOptionsType[],
+  ): DefaultOptionType[] => {
+    return mapOptions.map((item, index) => {
+      const {
+        className: itemClassName,
+        optionType,
+        ...resetItem
+      } = item as RequestOptionsType;
+
+      const label = item[labelPropsName];
+      const value = item[valuePropsName];
+      const itemOptions = item[optionsPropsName] ?? [];
+
+      if (optionType === 'optGroup' || item.options) {
+        return {
+          label: label,
+          ...resetItem,
+          data_title: label,
+          title: label,
+          key: value ?? `${label?.toString()}-${index}-${nanoid()}`, // 防止因key相同导致虚拟滚动出问题
+          children: genOptions(itemOptions),
+        } as DefaultOptionType;
+      }
+
+      return {
+        title: label,
+        ...resetItem,
+        data_title: label,
+        value: value ?? index,
+        key: value ?? `${label?.toString()}-${index}-${nanoid()}`,
+        'data-item': item,
+        className: `${prefixCls}-option ${itemClassName || ''}`.trim(),
+        label: optionItemRender?.(item as any) || label,
+      } as DefaultOptionType;
+    });
+  };
+  return (
+    <Select<any>
+      ref={selectRef}
+      className={classString}
+      allowClear
+      autoClearSearchValue={autoClearSearchValue}
+      disabled={disabled}
+      mode={mode}
+      showSearch={showSearch}
+      searchValue={searchValue}
+      optionFilterProp={optionFilterProp}
+      optionLabelProp={optionLabelProp}
+      onClear={() => {
+        onClear?.();
+        fetchData(undefined);
+        if (showSearch) {
+          setSearchValue(undefined);
+        }
+      }}
+      {...restProps}
+      filterOption={
+        restProps.filterOption == false
+          ? false
+          : (inputValue, option) => {
+              if (
+                restProps.filterOption &&
+                typeof restProps.filterOption === 'function'
+              ) {
+                return restProps.filterOption(inputValue, {
+                  ...option,
+                  label: option?.data_title,
+                });
+              }
+              return !!(
+                option?.data_title
+                  ?.toString()
+                  .toLowerCase()
+                  .includes(inputValue.toLowerCase()) ||
+                option?.label
+                  ?.toString()
+                  .toLowerCase()
+                  .includes(inputValue.toLowerCase()) ||
+                option?.value
+                  ?.toString()
+                  .toLowerCase()
+                  .includes(inputValue.toLowerCase())
+              );
+            }
+      } // 这里使用pro-components的过滤逻辑
+      onSearch={
+        showSearch
+          ? (value) => {
+              if (fetchDataOnSearch) {
+                fetchData(value);
+              }
+              onSearch?.(value);
+              setSearchValue(value);
+            }
+          : undefined
+      }
+      onChange={(value, optionList, ...rest) => {
+        // 将搜索框置空 和 antd 行为保持一致
+        if (showSearch && autoClearSearchValue) {
+          fetchData(undefined);
+          onSearch?.('');
+          setSearchValue(undefined);
+        }
+
+        if (!props.labelInValue) {
+          onChange?.(value, optionList, ...rest);
+          return;
+        }
+
+        if (mode !== 'multiple' && !Array.isArray(optionList)) {
+          // 单选情况且用户选择了选项
+          const dataItem = optionList && optionList['data-item'];
+          // 如果value值为空则是清空时产生的回调,直接传值就可以了
+          if (!value || !dataItem) {
+            const changedValue = value
+              ? {
+                  ...value,
+                  label: preserveOriginalLabel ? dataItem?.label : value.label,
+                }
+              : value;
+            onChange?.(changedValue, optionList, ...rest);
+          } else {
+            onChange?.(
+              {
+                ...value,
+                ...dataItem,
+                label: preserveOriginalLabel ? dataItem.label : value.label,
+              },
+              optionList,
+              ...rest,
+            );
+          }
+          return;
+        }
+        // 合并值
+        const mergeValue = getMergeValue(value, optionList) as any;
+        onChange?.(mergeValue, optionList, ...rest);
+
+        // 将搜索结果置空，重新搜索
+        if (resetAfterSelect) resetData();
+      }}
+      onFocus={(e) => {
+        if (searchOnFocus) {
+          fetchData(searchValue);
+        }
+        onFocus?.(e);
+      }}
+      options={genOptions(options || [])}
+    />
+  );
+};
+
+export default React.forwardRef(SearchSelect);