@regenbio/regenbio-components-react 1.2.16 → 1.2.17

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

@@ -1,93 +0,0 @@
-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

@@ -1,286 +0,0 @@
-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

@@ -1,334 +0,0 @@
-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);