@fe-free/core 1.4.12 → 1.4.13

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.4.12",
+  "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.12"
+    "@fe-free/tool": "1.4.13"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/crud/crud.tsx

@@ -205,13 +205,13 @@ function CRUDComponent<
     tableProps.columns,
     operateColumnProps,
     actions,
+    deleteProps,
     handleReload,
     readProps?.operateText,
     readProps?.target,
     detailProps,
     detailIdIndex,
-    updateProps?.operateText,
-    deleteProps,
+    updateProps,
     getHandleDelete,
   ]);
 

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,