@creekjs/web-components 1.0.1 → 1.0.3

package/src/creek-search/CreekSearchInput.tsx

@@ -1,75 +0,0 @@
-import { SearchOutlined } from '@ant-design/icons';
-import { AutoComplete, Input, Popover } from 'antd';
-import { createStyles } from 'antd-style';
-import classNames from 'classnames';
-
-import { useSearchContext } from './CreekSearchContext';
-import { CreekSearchValueSelector } from './CreekSearchValueSelector';
-
-const useStyles = createStyles(({ token, prefixCls }) => {
-
-  return {
-    searchWrapper: {
-      width: 350,
-      position: 'relative',
-    },
-    autoCompleteContainer: {
-      width: '100%',
-    },
-    searchInput: {
-      [`& .${prefixCls}-input`]: { fontSize: token.fontSize },
-      [`& .${prefixCls}-input-prefix`]: { color: token.colorTextTertiary },
-    },
-    popoverContent: {
-      [`& .${prefixCls}-popover-inner`]: { padding: 0 },
-    },
-  };
-});
-
-// 搜索输入框组件
-const SearchInput = () => {
-  const { styles } = useStyles();
-  const { searchValue, filterOptions, inputRef, setSearchValue, handleSearch, handleSelectColumn } = useSearchContext();
-
-  // AutoComplete 选项
-  const autoCompleteOptions = filterOptions?.map((option) => ({
-    value: option.dataIndex,
-    label: option.title,
-  }));
-
-  return (
-    <AutoComplete ref={inputRef} className={styles.autoCompleteContainer} options={autoCompleteOptions} onSearch={setSearchValue} onSelect={handleSelectColumn} value={searchValue} allowClear>
-      <Input placeholder="添加筛选条件" prefix={<SearchOutlined />} onPressEnter={(e) => handleSearch((e.target as HTMLInputElement).value)} className={styles.searchInput} />
-    </AutoComplete>
-  );
-};
-
-export type CreekSearchInputProps = {
-  className?: string;
-};
-// 主搜索输入组件
-export const CreekSearchInput = (props: CreekSearchInputProps) => {
-  const { className } = props;
-  const { styles } = useStyles();
-  const { showValueSelector, cancelValueSelector } = useSearchContext();
-
-  return (
-    <div className={classNames(styles.searchWrapper, className)}>
-      <Popover
-        content={<CreekSearchValueSelector />}
-        trigger="click"
-        arrow={false}
-        open={showValueSelector}
-        onOpenChange={(visible) => {
-          if (!visible) {
-            cancelValueSelector();
-          }
-        }}
-        overlayClassName={styles.popoverContent}
-        placement="bottomLeft"
-      >
-        <SearchInput />
-      </Popover>
-    </div>
-  );
-};

package/src/creek-search/CreekSearchValueSelector.tsx

@@ -1,324 +0,0 @@
-import { ParamsType } from '@ant-design/pro-components';
-import { Button, Checkbox, DatePicker, Input, InputNumber, Radio, Select, Space, Switch, TimePicker } from 'antd';
-import { createStyles } from 'antd-style';
-import _ from 'lodash';
-import { useEffect, useMemo } from 'react';
-
-import { useSearchContext } from './CreekSearchContext';
-
-const { RangePicker } = DatePicker;
-const { RangePicker: TimeRangePicker } = TimePicker;
-
-// 组件渲染器接口
-interface ComponentRendererProps {
-  column: any;
-  value: any;
-  onChange: (value: any) => void;
-  className?: string;
-}
-
-// 各类型组件渲染器
-const ComponentRenderer = ({ column, value, onChange, className }: ComponentRendererProps) => {
-  const { getValueTypeConfig, getColumnOptions, hasOptions } = useSearchContext();
-
-  const { valueType, fieldProps = {} } = column;
-
-  const config = getValueTypeConfig(valueType);
-  const baseStyle = { width: '100%' };
-  const mergedProps = { ...fieldProps, style: { ...baseStyle, ...fieldProps.style } };
-
-  // 如果有选项配置，优先使用选项组件
-  if (hasOptions(column)) {
-    const options = getColumnOptions(column);
-
-    switch (config.componentType) {
-      case 'radio':
-        const radioOptions = options.map((option) => ({
-          ...option,
-        }));
-
-        return <Radio.Group {...mergedProps} className={className} value={value} onChange={(e) => onChange(e.target.value)} options={radioOptions} />;
-
-      case 'checkbox':
-        const currentValue = value || [];
-        const allValues = options.map((opt) => opt.value);
-        const checkAll = allValues.length === currentValue.length && allValues.length > 0;
-        const indeterminate = currentValue.length > 0 && currentValue.length < allValues.length;
-
-        const handleCheckboxChange = (checkedValues: any[]) => {
-          onChange(checkedValues);
-        };
-
-        const onCheckAllChange = (e: any) => {
-          onChange(e.target.checked ? allValues : []);
-        };
-
-        return (
-          <div className={className}>
-            <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll} style={{ marginBottom: 4 }}>
-              全部
-            </Checkbox>
-            <Checkbox.Group {...mergedProps} value={currentValue} onChange={handleCheckboxChange} options={options} />
-          </div>
-        );
-
-      case 'select':
-      default:
-        return <Select {...mergedProps} placeholder="请选择" value={value} onChange={onChange} options={options} showSearch allowClear />;
-    }
-  }
-
-  // 根据组件类型渲染对应组件
-  switch (config.componentType) {
-    case 'input':
-      return <Input {...mergedProps} placeholder={fieldProps.placeholder || '请输入值'} value={value} onChange={(e) => onChange(e.target.value)} />;
-
-    case 'number':
-      return <InputNumber {...mergedProps} placeholder={fieldProps.placeholder || '请输入数字'} value={value} onChange={onChange} />;
-
-    case 'select':
-      // 处理switch类型的特殊情况
-      if (valueType === 'switch') {
-        return <Select {...mergedProps} placeholder="请选择" value={value} onChange={onChange} allowClear />;
-      }
-      return <Select {...mergedProps} placeholder="请选择" value={value} onChange={onChange} allowClear />;
-
-    case 'switch':
-      return <Switch {...mergedProps} checked={value} onChange={onChange} />;
-
-    case 'date':
-      const dateProps = {
-        ...mergedProps,
-        placeholder: fieldProps.placeholder || '请选择日期',
-        value: value,
-        onChange: onChange,
-      };
-
-      // 根据具体的日期类型渲染不同的组件
-      switch (valueType) {
-        case 'dateTime':
-          return <DatePicker {...dateProps} showTime />;
-        case 'dateMonth':
-          return <DatePicker {...dateProps} picker="month" />;
-        case 'dateWeek':
-          return <DatePicker {...dateProps} picker="week" />;
-        case 'dateQuarter':
-          return <DatePicker {...dateProps} picker="quarter" />;
-        case 'dateYear':
-          return <DatePicker {...dateProps} picker="year" />;
-        case 'date':
-        default:
-          return <DatePicker {...dateProps} />;
-      }
-
-    case 'dateRange':
-      const rangeProps = {
-        ...mergedProps,
-        placeholder: fieldProps.placeholder || ['开始日期', '结束日期'],
-        value: value,
-        onChange: onChange,
-      };
-
-      // 根据具体的日期范围类型渲染不同的组件
-      switch (valueType) {
-        case 'dateTimeRange':
-          return <RangePicker {...rangeProps} showTime />;
-        case 'dateMonthRange':
-          return <RangePicker {...rangeProps} picker="month" />;
-        case 'dateWeekRange':
-          return <RangePicker {...rangeProps} picker="week" />;
-        case 'dateQuarterRange':
-          return <RangePicker {...rangeProps} picker="quarter" />;
-        case 'dateYearRange':
-          return <RangePicker {...rangeProps} picker="year" />;
-        case 'dateRange':
-        default:
-          return <RangePicker {...rangeProps} />;
-      }
-
-    case 'time':
-      return <TimePicker {...mergedProps} placeholder={fieldProps.placeholder || '请选择时间'} value={value} onChange={onChange} />;
-
-    case 'timeRange':
-      return <TimeRangePicker {...mergedProps} placeholder={fieldProps.placeholder || ['开始时间', '结束时间']} value={value} onChange={onChange} />;
-
-    case 'radio':
-      const iswitch = valueType === 'switch';
-      const radioOptions = [
-        { label: '开', value: true },
-        { label: '关', value: false },
-      ];
-      const _radioOptions = iswitch ? radioOptions : mergedProps.options;
-
-      // 如果valueType是switch，使用RadioButton样式
-      return <Radio.Group {...mergedProps} options={_radioOptions} className={className} value={value} onChange={(e) => onChange(e.target.value)} />;
-
-    case 'checkbox':
-      return <Checkbox.Group {...mergedProps} className={className} value={value} onChange={onChange} />;
-
-    default:
-      return <Input {...mergedProps} placeholder="请输入值" value={value} onChange={(e) => onChange(e.target.value)} />;
-  }
-};
-
-// 样式定义
-const useStyles = createStyles(({ token, prefixCls }) => {
-  const selectedBgColor = '#F5F7F9';
-
-  // 公共选项样式
-  const optionBase = {
-    width: '100%',
-    padding: 8,
-    borderRadius: 2,
-    marginBottom: 4,
-    marginInlineEnd: 0,
-    '&:hover': { backgroundColor: selectedBgColor },
-  };
-
-  return {
-    valueSelectorContent: {
-      padding: 8,
-      borderBottom: `1px solid ${token.colorBorderSecondary}`,
-
-      // 复用公共样式
-      [`& .${prefixCls}-checkbox-wrapper, & .${prefixCls}-radio-wrapper`]: optionBase,
-
-      // checked 状态
-      [`& .${prefixCls}-checkbox-wrapper-checked, & .${prefixCls}-radio-wrapper-checked`]: {
-        backgroundColor: selectedBgColor,
-      },
-    },
-
-    valueSelectorActions: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      gap: token.marginXS,
-      padding: 8,
-    },
-    verticalStyle: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-
-    // 不同宽度样式
-    smallSelector: { width: 80 },
-    narrowSelector: { width: 150 },
-    mediumSelector: { width: 280 },
-    wideSelector: { width: 350 },
-  };
-});
-
-export type CreekSearchValueSelectorProps<T extends ParamsType, U extends ParamsType> = {
-  onConfirm?: () => void;
-};
-
-// 根据不同类型获取初始值
-const getInitialValue = (componentType: string) => {
-  switch (componentType) {
-    case 'checkbox':
-      return [];
-    case 'switch':
-      return false;
-    case 'number':
-      return undefined; // InputNumber 使用 undefined 而不是 null
-    default:
-      return null;
-  }
-};
-
-// 值选择器组件
-export const CreekSearchValueSelector = <T extends ParamsType, U extends ParamsType>(props: CreekSearchValueSelectorProps<T, U>) => {
-  const { styles } = useStyles();
-  const searchContext = useSearchContext();
-
-  const { selectedColumn, tempValue, setTempValue, confirmAddFilter, getValueTypeConfig, filters } = searchContext;
-  const { onConfirm } = props;
-
-  const config = getValueTypeConfig(selectedColumn?.valueType);
-
-  // 获取当前过滤器的值
-  const currentFilterValue = useMemo(() => {
-    const currentFilter = filters.find((item) => item.dataIndex === selectedColumn?.dataIndex);
-    return currentFilter?.value;
-  }, [filters, selectedColumn]);
-
-  // 计算实际显示的值
-  const actualValue = useMemo(() => {
-    // 如果 tempValue 已设置（不是 null 和 undefined），优先使用 tempValue
-    if (tempValue !== null && tempValue !== undefined) {
-      return tempValue;
-    }
-    // 否则使用当前过滤器的值，如果也没有则使用初始值
-    return currentFilterValue ?? getInitialValue(config.componentType);
-  }, [tempValue, currentFilterValue, selectedColumn?.valueType, config.componentType]);
-
-  // 当选择的列发生变化时，重置 tempValue 为当前过滤器的值
-  useEffect(() => {
-    if (selectedColumn) {
-      const currentFilter = filters.find((item) => item.dataIndex === selectedColumn.dataIndex);
-      if (currentFilter?.value !== undefined) {
-        setTempValue(currentFilter.value);
-      } else {
-        // 如果没有现有的过滤器值，设置为初始值
-        setTempValue(getInitialValue(config.componentType));
-      }
-    }
-  }, [selectedColumn?.dataIndex]); // 只在 selectedColumn.dataIndex 变化时触发
-
-  // 根据组件类型获取合适的宽度
-  const getPopoverWidth = () => {
-    switch (config.componentType) {
-      case 'select':
-      case 'radio':
-      case 'checkbox':
-      case 'switch':
-        return styles.narrowSelector;
-      case 'number':
-        return styles.mediumSelector;
-      case 'date':
-      case 'dateRange':
-      case 'time':
-      case 'timeRange':
-      default:
-        return styles.wideSelector;
-    }
-  };
-
-  // 重置值的处理
-  const handleReset = () => {
-    const initialValue = getInitialValue(config.componentType);
-    setTempValue(initialValue);
-  };
-
-  // 处理值的变化
-  const handleValueChange = (value: any) => {
-    setTempValue(value);
-  };
-
-  return selectedColumn ? (
-    <div className={getPopoverWidth()}>
-      <div className={styles.valueSelectorContent}>
-        <ComponentRenderer column={selectedColumn} value={actualValue} onChange={handleValueChange} className={['radio', 'checkbox'].includes(config.componentType) ? styles.verticalStyle : ''} />
-      </div>
-      <div className={styles.valueSelectorActions}>
-        <Space size="small">
-          <Button size="small" onClick={handleReset}>
-            重置
-          </Button>
-          <Button
-            type="primary"
-            size="small"
-            onClick={() => {
-              confirmAddFilter();
-              if (_.isFunction(onConfirm)) {
-                onConfirm();
-              }
-            }}
-          >
-            确定
-          </Button>
-        </Space>
-      </div>
-    </div>
-  ) : null;
-};

package/src/creek-search/index.tsx

@@ -1,5 +0,0 @@
-export * from './CreekSearch';
-export * from './CreekSearchContext';
-export * from './CreekSearchFilterDisplay';
-export * from './CreekSearchInput';
-export * from './CreekSearchValueSelector';

package/src/creek-search/type.ts

@@ -1,9 +0,0 @@
-export type CreekSearchAddFilterOption = {
-  value: any;
-  displayText?: string;
-};
-
-export type CreekSearchFilter = CreekSearchAddFilterOption & {
-  dataIndex: string;
-  title: string;
-};

package/src/creek-table/hooks/useAutoAddFilterToColumns.tsx

@@ -1,90 +0,0 @@
-import { ParamsType, ProColumnType } from '@ant-design/pro-components';
-import { useMemoizedFn, useSafeState } from 'ahooks';
-import { useMemo } from 'react';
-
-import { CreekSearchValueSelector, useSearchContext } from '../../creek-search';
-import { CreekTableProps } from '../type';
-
-interface UseAutoAddFilterToColumnsProps<T extends ParamsType, U extends ParamsType, ValueType = 'text'> {
-  columns: CreekTableProps<T, U, ValueType>['columns'];
-  autoAddFilterForColumn?: boolean;
-}
-
-interface UseAutoAddFilterToColumnsReturn<T extends ParamsType, U extends ParamsType, ValueType> {
-  columnsWithFilter: CreekTableProps<T, U, ValueType>['columns'];
-  getColumnKey: (column: ProColumnType<T, U>) => string;
-}
-
-export const useAutoAddFilterToColumns = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>({
-  columns,
-  autoAddFilterForColumn,
-}: UseAutoAddFilterToColumnsProps<T, U, ValueType>): UseAutoAddFilterToColumnsReturn<T, U, ValueType> => {
-  const { hasOptions, setSelectedColumn, filters } = useSearchContext();
-
-  // 管理每列的下拉框状态
-  const [filterOpenMap, setFilterOpenMap] = useSafeState<Record<string, boolean>>({});
-
-  // 获取列的唯一标识
-  const getColumnKey = useMemoizedFn((column: ProColumnType<T, U>) => {
-    return column.dataIndex as string;
-  });
-
-  // 控制特定列的下拉框开关
-  const setColumnFilterOpen = useMemoizedFn((columnKey: string, open: boolean) => {
-    setFilterOpenMap((prev) => ({
-      ...prev,
-      [columnKey]: open,
-    }));
-  });
-
-  // 关闭特定列的下拉框
-  const closeColumnFilter = useMemoizedFn((columnKey: string) => {
-    setFilterOpenMap((prev) => ({
-      ...prev,
-      [columnKey]: false,
-    }));
-  });
-
-  // 自动为列添加筛选功能
-  const autoAddFilterToColumns = useMemoizedFn((columns: CreekTableProps<T, U, ValueType>['columns'] = []) => {
-    return columns.map((column) => {
-      if (hasOptions(column)) {
-        const newColumn = { ...column };
-        const columnKey = getColumnKey(newColumn as ProColumnType<T, U>);
-
-        return {
-          ...newColumn,
-          filters: newColumn?.filters || true,
-          onFilter: newColumn?.onFilter || false,
-          filtered: filters.map((item) => item.dataIndex).includes(columnKey),
-          filterDropdown: (
-            <CreekSearchValueSelector
-              onConfirm={() => {
-                // 点击确认时关闭当前列的下拉框
-                closeColumnFilter(columnKey);
-              }}
-            />
-          ),
-          filterDropdownProps: {
-            open: filterOpenMap[columnKey] || false,
-            onOpenChange: (open: boolean) => {
-              if (open) {
-                const selectedColumn = columns.find((item) => item.dataIndex === columnKey);
-                setSelectedColumn(selectedColumn);
-              }
-              setColumnFilterOpen(columnKey, open);
-            },
-          },
-        };
-      }
-      return column;
-    });
-  });
-
-  const columnsWithFilter = useMemo(() => (autoAddFilterForColumn ? autoAddFilterToColumns(columns) : columns), [columns, filters, autoAddFilterToColumns, filterOpenMap]);
-
-  return {
-    columnsWithFilter,
-    getColumnKey,
-  };
-};