@fe-free/core 1.0.1

package/src/table/index.tsx

@@ -0,0 +1,74 @@
+import { ProTable } from '@ant-design/pro-components';
+import type { ProTableProps, ParamsType } from '@ant-design/pro-components';
+import { useMemo } from 'react';
+
+interface TableProps<DataSource = any, Params = any, ValueType = 'text'>
+  extends ProTableProps<DataSource, Params, ValueType> {
+  /** 区别 ProTable columns，默认 search: false */
+  columns?: ProTableProps<DataSource, Params, ValueType>['columns'];
+}
+
+function Table<
+  DataSource extends Record<string, any> = any,
+  Params extends ParamsType = ParamsType
+>(props: TableProps<DataSource, Params>) {
+  const { columns, rowKey = 'id', search, ...rest } = props;
+
+  const newColumns = useMemo(() => {
+    if (columns) {
+      // 默认隐藏搜索，如果需要显示搜索，需要在 columns 中设置 search: true
+      return columns.map((column) => {
+        return {
+          search: false,
+          ...column,
+        };
+      });
+    }
+    return columns;
+  }, [columns]);
+
+  const newPagination = useMemo(() => {
+    return {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      ...rest.pagination,
+    };
+  }, [rest.pagination]);
+
+  const hasSearch = !!newColumns?.find((column) => column.search);
+
+  return (
+    <ProTable<DataSource, Params>
+      cardBordered
+      rowKey={rowKey}
+      pagination={newPagination}
+      options={false}
+      // @ts-ignore 不会处理这里的 ts，或者成本大
+      columns={newColumns}
+      scroll={getTableScroll(newColumns)}
+      search={
+        hasSearch && {
+          layout: 'vertical',
+          defaultCollapsed: false,
+          ...search,
+        }
+      }
+      {...rest}
+    />
+  );
+}
+
+function getTableScroll(columns: ProTableProps<any, any>['columns'], defaultWidth = 120) {
+  const scroll = { x: 0, y: undefined };
+
+  columns?.forEach((column) => {
+    if (!column.hideInTable) {
+      scroll.x += Number(column.width) || defaultWidth;
+    }
+  });
+
+  return scroll;
+}
+
+export { Table };
+export type { TableProps };

package/src/value_type_map/date.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ProFormDateRangePicker } from '@ant-design/pro-components';
+import dayjs from 'dayjs';
+import { isString } from 'lodash-es';
+
+function getDayjs(text: string | number) {
+  if (isString(text) && /^\d+$/.test(text as string)) {
+    return dayjs(parseInt(text as string));
+  }
+  // 其他都可以 dayjs
+  return dayjs(text);
+}
+
+const renderMap = {
+  dateTime: (text) => {
+    if (!text) return <div>-</div>;
+
+    return <div>{getDayjs(text).format('YYYY-MM-DD HH:mm:ss')}</div>;
+  },
+  date: (text) => {
+    if (!text) return <div>-</div>;
+
+    return <div>{getDayjs(text).format('YYYY-MM-DD')}</div>;
+  },
+};
+
+const renderFormItemMap = {
+  dateRange: (_, props) => {
+    return (
+      <ProFormDateRangePicker
+        {...props}
+        fieldProps={{
+          ...props.fieldProps,
+          onChange: (value) => {
+            const newValue = value
+              ? [dayjs(value[0]).startOf('day'), dayjs(value[1]).endOf('day')]
+              : value;
+
+            props.fieldProps.onChange?.(newValue);
+          },
+        }}
+      />
+    );
+  },
+};
+
+const dateRender = { renderMap, renderFormItemMap };
+
+export { dateRender };

package/src/value_type_map/index.md

@@ -0,0 +1,117 @@
+---
+group: 'core'
+toc: content
+---
+
+# valueTypeMap
+
+自定义 valueType
+
+## customValueTypeMap
+
+```tsx | pure
+import { customValueTypeMap } from '@fe-free/core';
+import { ProConfigProvider } from '@ant-design/pro-components';
+
+const Demo = () => (
+  <ProConfigProvider valueTypeMap={customValueTypeMap}>
+    <div>some</div>
+  </ProConfigProvider>
+);
+
+export default Demo;
+```
+
+## CustomValueTypeEnum
+
+```tsx | pure
+enum CustomValueTypeEnum {
+  /** 渲染时间 + 搜索日期范围 */
+  CustomDateTimeAndDateRange = 'CustomDateTimeAndDateRange',
+  /** 渲染日期 + 搜索日期范围 */
+  CustomDateAndDateRange = 'CustomDateAndDateRange',
+  /** JSON */
+  CustomJSON = 'CustomJSON',
+}
+```
+
+```tsx
+import { CRUD, customValueTypeMap, CustomValueTypeEnum } from '@fe-free/core';
+import { ProConfigProvider } from '@ant-design/pro-components';
+import { range } from 'lodash-es';
+import dayjs from 'dayjs';
+
+async function fakeRequest() {
+  const data = range(5).map((item) => ({
+    id: `${item}`,
+    timeStr: `2024-10-01 10:00:00`,
+    timeNumber: +dayjs('2024-10-01 10:00:00'),
+    dateStr: `2024-10-01`,
+    dateNumber: +dayjs('2024-10-01'),
+    jsonText: JSON.stringify({ name: 'hello world hello world hello world' }),
+  }));
+
+  return Promise.resolve({
+    data,
+    success: true,
+    total: 100,
+  }) as Promise<any>;
+}
+
+const Table = () => {
+  const columns: any[] = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+    },
+    {
+      title: '时间 str',
+      dataIndex: 'timeStr',
+      valueType: CustomValueTypeEnum.CustomDateTimeAndDateRange,
+      search: true,
+    },
+    {
+      title: '时间 number',
+      dataIndex: 'timeNumber',
+      valueType: CustomValueTypeEnum.CustomDateTimeAndDateRange,
+      search: true,
+    },
+    {
+      title: '日期 str',
+      dataIndex: 'dateStr',
+      valueType: CustomValueTypeEnum.CustomDateAndDateRange,
+      search: true,
+    },
+    {
+      title: '日期 number',
+      dataIndex: 'dateNumber',
+      valueType: CustomValueTypeEnum.CustomDateAndDateRange,
+      search: true,
+    },
+    {
+      title: 'json',
+      dataIndex: 'jsonText',
+      ellipsis: true,
+      valueType: CustomValueTypeEnum.CustomJSON,
+    },
+  ];
+
+  return (
+    <CRUD
+      actions={[]}
+      tableProps={{
+        columns,
+        request: fakeRequest,
+      }}
+    />
+  );
+};
+
+const Demo = () => (
+  <ProConfigProvider valueTypeMap={customValueTypeMap}>
+    <Table />
+  </ProConfigProvider>
+);
+
+export default Demo;
+```

package/src/value_type_map/index.tsx

@@ -0,0 +1,29 @@
+import type { ProRenderFieldPropsType } from '@ant-design/pro-components';
+import { dateRender } from './date';
+import { jsonRender } from './json';
+
+enum CustomValueTypeEnum {
+  /** 渲染时间 + 搜索日期范围 */
+  CustomDateTimeAndDateRange = 'CustomDateTimeAndDateRange',
+  /** 渲染日期 + 搜索日期范围 */
+  CustomDateAndDateRange = 'CustomDateAndDateRange',
+  /** JSON */
+  CustomJSON = 'CustomJSON',
+}
+
+const customValueTypeMap: Record<string, ProRenderFieldPropsType> = {
+  [CustomValueTypeEnum.CustomDateTimeAndDateRange]: {
+    render: dateRender.renderMap.dateTime,
+    renderFormItem: dateRender.renderFormItemMap.dateRange,
+  },
+  [CustomValueTypeEnum.CustomDateAndDateRange]: {
+    render: dateRender.renderMap.date,
+    renderFormItem: dateRender.renderFormItemMap.dateRange,
+  },
+  [CustomValueTypeEnum.CustomJSON]: {
+    render: jsonRender.render,
+    renderFormItem: jsonRender.renderFormItem,
+  },
+};
+
+export { customValueTypeMap, CustomValueTypeEnum };

package/src/value_type_map/json.tsx

@@ -0,0 +1,44 @@
+import { Typography } from 'antd';
+
+function render(text) {
+  let jsonText = text;
+
+  if (!text) {
+    return <div>-</div>;
+  }
+
+  try {
+    jsonText = JSON.stringify(JSON.parse(text), null, 2);
+  } catch (e) {
+    console.error(e, text);
+  }
+
+  return (
+    <Typography.Text
+      className="block max-w-full overflow-hidden"
+      ellipsis={{
+        tooltip: {
+          title: (
+            <pre
+              style={{
+                whiteSpace: 'pre-wrap',
+                wordWrap: 'break-word',
+              }}
+            >
+              {jsonText}
+            </pre>
+          ),
+        },
+      }}
+    >
+      {text}
+    </Typography.Text>
+  );
+}
+
+const jsonRender = {
+  render,
+  renderFormItem: () => <></>,
+};
+
+export { jsonRender };