@fe-free/core 1.4.11 → 1.4.13

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 1.4.13
+
+### Patch Changes
+
+- feat: ProFormEditor
+  - @fe-free/tool@1.4.13
+
+## 1.4.12
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@1.4.12
+
 ## 1.4.11
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -35,7 +35,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "1.4.11"
+    "@fe-free/tool": "1.4.13"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/crud/crud.stories.tsx

@@ -186,6 +186,12 @@ export const MoreCustom: Story = {
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
           nameIndex: 'name',
+          operateIsDisabled: (record) => {
+            if (record.id % 3) {
+              return false;
+            }
+            return true;
+          },
         }}
         detailForm={() => (
           <>
@@ -201,6 +207,14 @@ export const MoreCustom: Story = {
         requestGetByRecord={fakeGetByRecord}
         requestCreateByValues={fakeCreate}
         requestUpdateById={fakeUpdateById}
+        updateProps={{
+          operateIsDisabled: (record) => {
+            if (record.id % 3) {
+              return false;
+            }
+            return true;
+          },
+        }}
       />
     );
   },

package/src/crud/crud.tsx

@@ -109,42 +109,76 @@ function CRUDComponent<
       fixed: 'right',
       width: operateColumnProps?.width || 120,
       render: function (_, record) {
-        return (
-          <Space>
-            {operateColumnProps?.moreOperator && operateColumnProps.moreOperator(record)}
-            {actions.includes('read') && (
-              <CRUDDetail
-                id={record[idField]}
-                record={record}
-                onSuccess={handleReload}
-                trigger={<a>{readProps?.operateText || '查看'}</a>}
-                action="read"
-                {...detailProps}
-              />
-            )}
-            {actions.includes('read_detail') && (
-              <Link to={`./detail/${record[detailIdIndex || 'id']}`} target={readProps?.target}>
-                {readProps?.operateText || '查看'}
-              </Link>
-            )}
-            {actions.includes('update') && (
+        const btns: React.ReactNode[] = [];
+
+        if (actions.includes('read')) {
+          btns.push(
+            <CRUDDetail
+              key="read"
+              id={record[idField]}
+              record={record}
+              onSuccess={handleReload}
+              trigger={<a>{readProps?.operateText || '查看'}</a>}
+              action="read"
+              {...detailProps}
+            />,
+          );
+        }
+
+        if (actions.includes('read_detail')) {
+          btns.push(
+            <Link
+              key="read_detail"
+              to={`./detail/${record[detailIdIndex || 'id']}`}
+              target={readProps?.target}
+            >
+              {readProps?.operateText || '查看'}
+            </Link>,
+          );
+        }
+
+        if (actions.includes('update')) {
+          const disabled = updateProps?.operateIsDisabled?.(record) || false;
+
+          if (disabled) {
+            btns.push(
+              <a key="update" disabled>
+                {updateProps?.operateText || '编辑'}
+              </a>,
+            );
+          } else {
+            btns.push(
               <CRUDDetail
+                key="update"
                 id={record[idField]}
                 record={record}
                 onSuccess={handleReload}
                 trigger={<a>{updateProps?.operateText || '编辑'}</a>}
                 action="update"
                 {...detailProps}
-              />
-            )}
-            {actions.includes('delete') && deleteProps && (
-              <OperateDelete
-                name={record[deleteProps.nameIndex]}
-                desc={deleteProps.desc}
-                operateText={deleteProps.operateText}
-                onDelete={getHandleDelete(record)}
-              />
-            )}
+              />,
+            );
+          }
+        }
+
+        if (actions.includes('delete') && deleteProps) {
+          const disabled = deleteProps?.operateIsDisabled?.(record) || false;
+          btns.push(
+            <OperateDelete
+              key="delete"
+              name={record[deleteProps.nameIndex]}
+              desc={deleteProps.desc}
+              operateText={deleteProps.operateText}
+              disabled={disabled}
+              onDelete={getHandleDelete(record)}
+            />,
+          );
+        }
+
+        return (
+          <Space>
+            {operateColumnProps?.moreOperator && operateColumnProps.moreOperator(record)}
+            {btns}
             {operateColumnProps?.moreOperatorAfter && operateColumnProps.moreOperatorAfter(record)}
           </Space>
         );
@@ -171,13 +205,13 @@ function CRUDComponent<
     tableProps.columns,
     operateColumnProps,
     actions,
+    deleteProps,
     handleReload,
     readProps?.operateText,
     readProps?.target,
     detailProps,
     detailIdIndex,
-    updateProps?.operateText,
-    deleteProps,
+    updateProps,
     getHandleDelete,
   ]);
 

package/src/crud/crud_delete.tsx

@@ -6,6 +6,7 @@ interface Params {
   desc?: string;
   operateText?: string;
   onDelete: () => Promise<any>;
+  disabled?: boolean;
 }
 
 function useDelete(params: Params) {
@@ -34,9 +35,13 @@ function useDelete(params: Params) {
 }
 
 function OperateDelete(props: Params) {
-  const { name, desc, onDelete, operateText } = props;
+  const { name, desc, onDelete, operateText, disabled } = props;
   const { doDelete } = useDelete({ name, desc, onDelete, operateText });
 
+  if (disabled) {
+    return <a disabled>{operateText || '删除'}</a>;
+  }
+
   return (
     <a style={{ color: 'red' }} onClick={doDelete}>
       {operateText || '删除'}

package/src/crud/types.tsx

@@ -77,8 +77,10 @@ interface CRUDProps<DataSource = any, Key = string> {
   /** @deprecated 请使用 requestUpdateByValues 替代 */
   requestUpdateById?: (values: Partial<DataSource>) => Promise<false | void>;
   updateProps?: {
-    /** 文本 */
+    /** 文本“编辑” */
     operateText?: string;
+    /** ”编辑”是否禁用 */
+    operateIsDisabled?: (record: DataSource) => boolean;
     /** 保存按钮文本 */
     submitText?: string;
     /** 重置按钮文本 */
@@ -93,12 +95,15 @@ interface CRUDProps<DataSource = any, Key = string> {
   requestDeleteByRecord?: (record: DataSource) => Promise<void>;
   /** 删除相关 */
   deleteProps?: {
+    /** 文本“删除” */
+    operateText?: string;
+    /** “删除”是否禁用 */
+    operateIsDisabled?: (record: DataSource) => boolean;
     /** 显示名称索引 */
     nameIndex: keyof DataSource;
     /** 删除确认描述 */
     desc?: string;
-    /** 文本 */
-    operateText?: string;
+
     /** 成功文案 */
     successText?: string | (() => string);
   };

package/src/editor/index.tsx

@@ -15,6 +15,9 @@ interface EditorProps {
   readOnly?: boolean;
   editable?: boolean;
 
+  height?: string;
+  width?: string;
+
   // 不对外
   theme?: ReactCodeMirrorProps['theme'];
   extensions?: ReactCodeMirrorProps['extensions'];
@@ -29,6 +32,8 @@ function Editor(props: EditorProps) {
     editable,
     autoFocus,
     placeholder,
+    height,
+    width,
     theme,
     extensions: originExtensions,
   } = props;
@@ -70,8 +75,8 @@ function Editor(props: EditorProps) {
   return (
     <CodeMirror
       className="w-full h-full"
-      height="100%"
-      width="100%"
+      height={height || '100%'}
+      width={width || '100%'}
       value={value}
       onChange={handleChange}
       extensions={extensions}

package/src/form/form.stories.tsx

@@ -1,5 +1,5 @@
 import { ProForm } from '@ant-design/pro-components';
-import { ProFormJSON, ProFormJavascript, ProFormSwitchNumber } from '@fe-free/core';
+import { ProFormEditor, ProFormJSON, ProFormJavascript, ProFormSwitchNumber } from '@fe-free/core';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
@@ -37,6 +37,20 @@ function ProFormBase({
   );
 }
 
+export const ProFormEditorComponent: Story = {
+  render: () => (
+    <ProFormBase
+      initialValues={{
+        code: `const name = 'world';
+console.log('hello', name);
+`,
+      }}
+    >
+      <ProFormEditor name="code" fieldProps={{ language: 'javascript', height: '50vh' }} />
+    </ProFormBase>
+  ),
+};
+
 // ProFormJSON 基础示例
 export const ProFormJSONComponent: Story = {
   render: () => (

package/src/form/index.tsx

@@ -1,3 +1,4 @@
+export { ProFormEditor } from './pro_form_editor';
 export { ProFormJavascript } from './pro_form_javascript';
 export { ProFormJSON } from './pro_form_json';
 export {
@@ -5,6 +6,7 @@ export {
   SwitchNumber,
   type SwitchNumberProps,
 } from './pro_form_switch_number';
+
 import { pinyinMatch } from '@fe-free/tool';
 
 /** ProFromSelect 搜索相关 props。 支持 1 搜索 2 拼音过滤 */

package/src/form/pro_form_editor.tsx

@@ -0,0 +1,21 @@
+import type { ProFormItemProps } from '@ant-design/pro-components';
+import { ProForm } from '@ant-design/pro-components';
+import type { EditorProps } from '../editor';
+import { Editor } from '../editor';
+
+function EditorItem(props: EditorProps) {
+  return <Editor height="300px" {...props} />;
+}
+
+function ProFormEditor(props: ProFormItemProps<EditorProps>) {
+  /* eslint-disable-next-line */
+  const { fieldProps, readonly, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <EditorItem readOnly={readonly} {...(fieldProps as EditorProps)} />
+    </ProForm.Item>
+  );
+}
+
+export { ProFormEditor };

package/src/index.ts

@@ -18,6 +18,7 @@ export { EditorMarkdown } from './editor_markdown';
 export type { EditorMarkdownProps } from './editor_markdown';
 
 export {
+  ProFormEditor,
   ProFormJSON,
   ProFormJavascript,
   ProFormSwitchNumber,