@fe-free/core 1.2.4 → 1.3.1

package/src/crud/crud_delete.tsx

@@ -1,5 +1,5 @@
-import { useCallback } from 'react';
 import { Modal } from 'antd';
+import { useCallback } from 'react';
 
 interface Params {
   name: string;
@@ -7,18 +7,24 @@ interface Params {
   operateText?: string;
   onDelete: () => Promise<any>;
 }
+
 function useDelete(params: Params) {
   const { name, desc, onDelete } = params;
 
-  const doDelete = useCallback(() => {
-    Modal.confirm({
-      title: `确认删除 “${name}” 吗？`,
-      content: desc || '删除后不可恢复，请谨慎操作',
-      okText: '确定',
-      cancelText: '取消',
-      onOk: () => {
-        onDelete();
-      },
+  const doDelete = useCallback(async () => {
+    await new Promise((resolve) => {
+      Modal.confirm({
+        title: `确认删除 “${name}” 吗？`,
+        content: desc || '删除后不可恢复，请谨慎操作',
+        okText: '确定',
+        cancelText: '取消',
+        onOk: () => {
+          resolve(onDelete());
+        },
+        onCancel: () => {
+          resolve(undefined);
+        },
+      });
     });
   }, [name, desc, onDelete]);
 
@@ -29,23 +35,13 @@ function useDelete(params: Params) {
 
 function OperateDelete(props: Params) {
   const { name, desc, onDelete, operateText } = props;
-  const handleClick = useCallback(() => {
-    Modal.confirm({
-      title: `确认删除 “${name}” 吗？`,
-      content: desc || '删除后不可恢复，请谨慎操作',
-      okText: '确定',
-      cancelText: '取消',
-      onOk: () => {
-        onDelete();
-      },
-    });
-  }, [name, desc, onDelete]);
+  const { doDelete } = useDelete({ name, desc, onDelete, operateText });
 
   return (
-    <a style={{ color: 'red' }} onClick={handleClick}>
+    <a style={{ color: 'red' }} onClick={doDelete}>
       {operateText || '删除'}
     </a>
   );
 }
 
-export { useDelete, OperateDelete };
+export { OperateDelete, useDelete };

package/src/crud/crud_detail.tsx

@@ -1,9 +1,9 @@
-import { message, Spin } from 'antd';
 import { DrawerForm, ProForm } from '@ant-design/pro-components';
+import { message, Spin } from 'antd';
+import classNames from 'classnames';
+import { isString } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
 import type { CRUDProps } from './crud';
-import { isString } from 'lodash-es';
-import classNames from 'classnames';
 
 /**
  * create 创建
@@ -100,13 +100,13 @@ function CRUDDetail(props: CRUDDetailProps) {
           return true;
         }
       } catch (e) {
-        // 由于 onFinish 吃掉了 error，所以这里自行抛出
+        // 由于 onFinish 吃掉了 error，所以这里自行抛出到全局
         setTimeout(() => {
           throw e;
         }, 10);
       }
     },
-    [action, requestCreateByValues, requestUpdateById, onSuccess, createProps, id, updateProps]
+    [action, requestCreateByValues, requestUpdateById, onSuccess, createProps, id, updateProps],
   );
 
   const handleOpenChange = useCallback(
@@ -132,7 +132,7 @@ function CRUDDetail(props: CRUDDetailProps) {
 
       return;
     },
-    [form, id, requestGetByRecord, record]
+    [form, id, requestGetByRecord, record],
   );
 
   const children = useMemo(() => {

package/src/crud/demo/data.tsx

@@ -43,7 +43,7 @@ function makeData(count) {
 
     return {
       id: `${id}`,
-      name: `这是名字这是名字这是名字 ${id}`,
+      name: `这是名字这是名字这是名字这是名字这是名字 ${id}`,
       city,
       area,
       level: randomLevel(),
@@ -131,14 +131,14 @@ function fakeRequestSchool() {
 }
 
 export {
+  fakeCreate,
   fakeData,
-  levels,
-  fakeRequest,
   fakeDeleteByRecord,
   fakeGetByRecord,
-  fakeCreate,
-  fakeUpdateById,
-  fakeRequestCity,
+  fakeRequest,
   fakeRequestArea,
+  fakeRequestCity,
   fakeRequestSchool,
+  fakeUpdateById,
+  levels,
 };

package/src/crud/index.tsx

@@ -1,5 +1,5 @@
 export { CRUD } from './crud';
-export type { CRUDProps, CRUDMethods } from './crud';
+export { OperateDelete, useDelete } from './crud_delete';
 export { CRUDDetail } from './crud_detail';
 export type { CRUDDetailProps } from './crud_detail';
-export { useDelete, OperateDelete } from './crud_delete';
+export type { CRUDMethods, CRUDProps } from './types';

package/src/crud/types.tsx

@@ -0,0 +1,98 @@
+import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
+import type { ReactNode } from 'react';
+import type { TableProps } from '../table';
+
+/**
+ * create 创建
+ * read 查看
+ * read_detail 详情页查看
+ * update 编辑
+ * delete 删除
+ */
+type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
+
+interface CRUDProps<
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+> {
+  actions: CrudAction[];
+
+  /** 新建按钮，默认新建 */
+  createButton?: ReactNode;
+
+  /** 表格相关 */
+  tableProps: TableProps<DataSource>;
+  operateColumnProps?: {
+    width?: number;
+    /** 扩展操作区域，再其他操作之前 */
+    moreOperator?: (record: DataSource) => ReactNode;
+    /** 扩展操作区域，在其他操作之后 */
+    moreOperatorAfter?: (record: DataSource) => ReactNode;
+  };
+  readProps?: {
+    /** 文本 */
+    operateText?: string;
+    /** 打开方式, action 为 read_detail 有效 */
+    target?: '_blank';
+  };
+
+  /** 删除接口 */
+  requestDeleteByRecord?: (record: DataSource) => Promise<any>;
+  /** 删除相关 */
+  deleteProps?: {
+    /** 显示名称索引 */
+    nameIndex: keyof DataSource;
+    /** 删除确认描述 */
+    desc?: string;
+    /** 文本 */
+    operateText?: string;
+  };
+
+  /** 弹窗表单 */
+  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
+  /** detailForm 的 formRef */
+  detailFormInstance?: ProFormInstance;
+
+  /** 新增接口 */
+  requestCreateByValues?: (values: Partial<DataSource>) => Promise<any>;
+  createProps?: {
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  /** 更新接口 */
+  requestUpdateByValues?: (values: Partial<DataSource>) => Promise<any>;
+  /** @deprecated 请使用 requestUpdateByValues 替代 */
+  requestUpdateById?: (values: Partial<DataSource>) => Promise<any>;
+  updateProps?: {
+    /** 文本 */
+    operateText?: string;
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  /** 获取详情接口 */
+  requestGetByRecord?: (record: DataSource) => Promise<any>;
+
+  /** 跳转到详情的索引 ，默认 id */
+  detailIdIndex?: string;
+
+  /** 批量操作 */
+  batchActions?: {
+    /** 按钮文本 */
+    btnText: string;
+    /** 红色，且有确认框 */
+    danger?: boolean;
+    /** 批量操作接口 */
+    onClick: (
+      event: React.MouseEvent<HTMLElement>,
+      options: { selectedRowKeys: Key[]; selectedRows: DataSource[] },
+    ) => Promise<any>;
+  }[];
+}
+
+interface CRUDMethods {
+  getActionRef: () => React.MutableRefObject<ActionType | undefined>;
+}
+
+export type { CRUDMethods, CRUDProps };

package/src/crud/use_row_selection.tsx

@@ -0,0 +1,84 @@
+import { Modal } from 'antd';
+import { useCallback, useMemo } from 'react';
+import { LoadingButton } from '../button';
+import type { CRUDProps } from './types';
+
+function useRowSelection<
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+>({ batchActions }: { batchActions?: CRUDProps<DataSource, Key>['batchActions'] }) {
+  const rowSelection = useMemo(() => ({}), []);
+
+  const tableAlertRender = useCallback(({ selectedRowKeys, onCleanSelected }) => {
+    return (
+      <div>
+        <span>
+          已选 {selectedRowKeys.length} 项
+          <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
+            取消选择
+          </a>
+        </span>
+      </div>
+    );
+  }, []);
+
+  const tableAlertOptionRender = useCallback(
+    ({ selectedRowKeys, selectedRows }) => {
+      return (
+        <div className="flex gap-2 items-center">
+          {batchActions?.map((action) => (
+            <LoadingButton
+              key={action.btnText}
+              type="link"
+              danger={action.danger}
+              onClick={async (event) => {
+                if (action.danger) {
+                  await new Promise((resolve) => {
+                    Modal.confirm({
+                      title: `确定要执行 ${action.btnText} 吗？`,
+                      onOk: () => {
+                        resolve(
+                          action.onClick(event, {
+                            selectedRowKeys,
+                            selectedRows,
+                          }),
+                        );
+                      },
+                      onCancel: () => {
+                        resolve(undefined);
+                      },
+                    });
+                  });
+                } else {
+                  await action.onClick(event, {
+                    selectedRowKeys,
+                    selectedRows,
+                  });
+                }
+              }}
+            >
+              {action.btnText}
+            </LoadingButton>
+          ))}
+        </div>
+      );
+    },
+    [batchActions],
+  );
+
+  if (!batchActions || batchActions.length === 0) {
+    return {
+      rowSelection: undefined,
+      tableAlertRender: undefined,
+      tableAlertOptionRender: undefined,
+    };
+  }
+
+  return {
+    rowSelection,
+    tableAlertRender,
+    tableAlertOptionRender,
+  };
+}
+
+export { useRowSelection };

package/src/editor_javascript/{index.md → editor_javascript.stories.tsx}

@@ -1,23 +1,22 @@
----
-group: 'core'
-toc: content
----
-
-# EditorJavascript
-
-## 代码演示
+import { EditorJavascript } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 
-### 常规
+const meta: Meta<typeof EditorJavascript> = {
+  title: '@fe-free/core/EditorJavascript',
+  component: EditorJavascript,
+  tags: ['autodocs'],
+};
 
-```tsx
-import { useState } from 'react';
-import { EditorJavascript } from '@fe-free/core';
+export default meta;
+type Story = StoryObj<typeof EditorJavascript>;
 
-function Demo() {
+// 常规示例
+const BasicDemo = () => {
   const [value, setValue] = useState(
     `const name = 'world';
 console.log('hello', name);
-`
+`,
   );
 
   return (
@@ -25,22 +24,18 @@ console.log('hello', name);
       <EditorJavascript value={value} onChange={setValue} />
     </div>
   );
-}
+};
 
-export default Demo;
-```
+export const Basic: Story = {
+  render: () => <BasicDemo />,
+};
 
-### readonly
-
-```tsx
-import { useState } from 'react';
-import { EditorJavascript } from '@fe-free/core';
-
-function Demo() {
+// readonly 示例
+const ReadonlyDemo = () => {
   const [value, setValue] = useState(
     `const name = 'world';
 console.log('hello', name);
-`
+`,
   );
 
   return (
@@ -48,17 +43,8 @@ console.log('hello', name);
       <EditorJavascript value={value} onChange={setValue} readonly />
     </div>
   );
-}
-
-export default Demo;
-```
-
-## API
+};
 
-```tsx | pure
-interface EditorJavascriptProps {
-  value: string;
-  onChange: (value: string, event?: any) => void;
-  readonly?: boolean;
-}
-```
+export const Readonly: Story = {
+  render: () => <ReadonlyDemo />,
+};

package/src/editor_javascript/index.tsx

@@ -1,8 +1,8 @@
 import AceEditor from 'react-ace';
 
+import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-monokai';
-import 'ace-builds/src-noconflict/ext-language_tools';
 
 const fullStyle = { width: '100%', height: '100%' };
 
@@ -34,3 +34,4 @@ function EditorJavascript({ value, onChange, readonly }: EditorJavascriptProps)
 }
 
 export { EditorJavascript };
+export type { EditorJavascriptProps };

package/src/editor_json/{index.md → editor_json.stories.tsx}

@@ -1,27 +1,26 @@
----
-group: 'core'
-toc: content
----
-
-# EditorJSON
-
-## 代码演示
+import { EditorJSON } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 
-### 常规
+const meta: Meta<typeof EditorJSON> = {
+  title: '@fe-free/core/EditorJSON',
+  component: EditorJSON,
+  tags: ['autodocs'],
+};
 
-```tsx
-import { useState } from 'react';
-import { EditorJSON } from '@fe-free/core';
+export default meta;
+type Story = StoryObj<typeof EditorJSON>;
 
-function Demo() {
+// 基础示例
+const BasicDemo = () => {
   const [value, setValue] = useState(
     JSON.stringify(
       {
         name: 'world',
       },
       null,
-      2
-    )
+      2,
+    ),
   );
 
   return (
@@ -29,26 +28,22 @@ function Demo() {
       <EditorJSON value={value} onChange={setValue} />
     </div>
   );
-}
+};
 
-export default Demo;
-```
+export const Basic: Story = {
+  render: () => <BasicDemo />,
+};
 
-### 只读
-
-```tsx
-import { useState } from 'react';
-import { EditorJSON } from '@fe-free/core';
-
-function Demo() {
+// 只读模式
+const ReadonlyDemo = () => {
   const [value, setValue] = useState(
     JSON.stringify(
       {
         name: 'world',
       },
       null,
-      2
-    )
+      2,
+    ),
   );
 
   return (
@@ -56,26 +51,22 @@ function Demo() {
       <EditorJSON value={value} onChange={setValue} readonly />
     </div>
   );
-}
-
-export default Demo;
-```
+};
 
-### mode
+export const Readonly: Story = {
+  render: () => <ReadonlyDemo />,
+};
 
-```tsx
-import { useState } from 'react';
-import { EditorJSON } from '@fe-free/core';
-
-function Demo() {
+// 树形模式
+const TreeModeDemo = () => {
   const [value, setValue] = useState(
     JSON.stringify(
       {
         name: 'world',
       },
       null,
-      2
-    )
+      2,
+    ),
   );
 
   return (
@@ -83,26 +74,22 @@ function Demo() {
       <EditorJSON value={value} onChange={setValue} mode="tree" readonly />
     </div>
   );
-}
-
-export default Demo;
-```
-
-### readonly mainMenuBar mode
+};
 
-```tsx
-import { useState } from 'react';
-import { EditorJSON } from '@fe-free/core';
+export const TreeMode: Story = {
+  render: () => <TreeModeDemo />,
+};
 
-function Demo() {
+// 无菜单栏的只读树形模式
+const NoMenuBarDemo = () => {
   const [value, setValue] = useState(
     JSON.stringify(
       {
         name: 'world',
       },
       null,
-      2
-    )
+      2,
+    ),
   );
 
   return (
@@ -110,20 +97,8 @@ function Demo() {
       <EditorJSON value={value} onChange={setValue} readonly mode="tree" mainMenuBar={false} />
     </div>
   );
-}
-
-export default Demo;
-```
-
-## API
-
-```tsx | pure
-import type { JSONEditor } from 'vanilla-jsoneditor';
+};
 
-interface EditorJSONProps {
-  value: string;
-  onChange: (value: string, event?: any) => void;
-  readonly?: boolean;
-  mode?: JSONEditor['mode'];
-}
-```
+export const NoMenuBar: Story = {
+  render: () => <NoMenuBarDemo />,
+};

package/src/editor_json/index.tsx

@@ -46,3 +46,4 @@ function EditorJSON({ value, onChange, readonly, mode, mainMenuBar }: EditorJSON
 }
 
 export { EditorJSON };
+export type { EditorJSONProps };

package/src/editor_logs/editor_logs.stories.tsx

@@ -0,0 +1,47 @@
+import { EditorLogs } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof EditorLogs> = {
+  title: '@fe-free/core/EditorLogs',
+  component: EditorLogs,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '一个用于显示日志内容的 React 组件。它使用 CodeMirror 编辑器来呈现日志，提供了语法高亮和主题支持。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EditorLogs>;
+
+export const Basic: Story = {
+  args: {
+    logs: [
+      {
+        timestamp: '2023-01-01 12:00:00',
+        level: 'info',
+        message: 'This is an info log message.',
+      },
+      {
+        timestamp: '2023-01-01 12:00:00',
+        level: 'warn',
+        message: 'This is a warning log message.',
+      },
+      {
+        timestamp: '2023-01-01 12:00:00',
+        level: 'error',
+        message: 'This is an error log message.',
+      },
+      {
+        timestamp: '2023-01-01 12:00:00',
+        level: 'system',
+        message:
+          'This is a debug log message. This is a debug log message This is a debug log message This is a debug log message This is a debug log message',
+      },
+    ],
+  },
+};

package/src/editor_logs/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import CodeMirror from '@uiw/react-codemirror';
 import { StreamLanguage } from '@codemirror/language';
-import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+import CodeMirror from '@uiw/react-codemirror';
+import React from 'react';
 
 interface EditorLogsProps {
   logs: {
@@ -67,3 +67,4 @@ const EditorLogs: React.FC<EditorLogsProps> = ({ logs }) => {
 };
 
 export { EditorLogs };
+export type { EditorLogsProps };