@fe-free/core 1.4.5 → 1.4.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 1.4.6
+
+### Patch Changes
+
+- feat: add ProFormSwitchNumber
+  - @fe-free/tool@1.4.6
+
 ## 1.4.5
 
 ### Patch Changes

package/package.json

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

package/src/editor_javascript/index.tsx

@@ -11,6 +11,7 @@ interface EditorJavascriptProps {
   onChange?: (value: string, event?: any) => void;
   readonly?: boolean;
 }
+
 function EditorJavascript({ value, onChange, readonly }: EditorJavascriptProps) {
   return (
     <AceEditor

package/src/editor_json/index.tsx

@@ -36,7 +36,7 @@ function EditorJSON({ value, onChange, readonly, mode, mainMenuBar }: EditorJSON
         },
         onChange: (newContent) => {
           // @ts-ignore
-          refOnChange.current(newContent.text);
+          refOnChange.current?.(newContent.text);
         },
       },
     });

package/src/form/form.stories.tsx

@@ -1,6 +1,7 @@
 import { ProForm } from '@ant-design/pro-components';
-import { ProFormJSON, ProFormJavascript } from '@fe-free/core';
+import { ProFormJSON, ProFormJavascript, ProFormSwitchNumber } from '@fe-free/core';
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 
 const meta: Meta = {
   title: '@fe-free/core/Form',
@@ -10,56 +11,72 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// ProFormJSON 基础示例
-export const ProFormJSONBasic: Story = {
-  render: () => (
-    <ProForm>
-      <ProFormJSON name="json" initialValue={JSON.stringify({ name: 'world' }, null, 2)} />
+function ProFormBase({
+  children,
+  initialValues,
+}: {
+  children: React.ReactNode;
+  initialValues?: any;
+}) {
+  const [values, setValues] = useState<any>(undefined);
+
+  return (
+    <ProForm
+      initialValues={initialValues}
+      onValuesChange={(values) => {
+        console.log('values', values);
+        setValues(values);
+      }}
+      onFinish={(values) => {
+        console.log('values', values);
+      }}
+    >
+      <pre>values: {JSON.stringify(values, null, 2)}</pre>
+      {children}
     </ProForm>
-  ),
-};
+  );
+}
 
-// ProFormJSON 只读示例
-export const ProFormJSONReadonly: Story = {
+// ProFormJSON 基础示例
+export const ProFormJSONComponent: Story = {
   render: () => (
-    <ProForm>
+    <ProFormBase initialValues={{ json: JSON.stringify({ name: 'world' }, null, 2) }}>
+      <ProFormJSON name="json" />
+      <div>readonly</div>
       <ProFormJSON
         name="json"
         readonly
         initialValue={JSON.stringify({ name: 'world' }, null, 2)}
         fieldProps={{
           mainMenuBar: false,
+          readonly: true,
         }}
       />
-    </ProForm>
+    </ProFormBase>
   ),
 };
 
 // ProFormJavascript 基础示例
-export const ProFormJavascriptBasic: Story = {
+export const ProFormJavascriptComponent: Story = {
   render: () => (
-    <ProForm>
-      <ProFormJavascript
-        name="javascript"
-        initialValue={`const name = 'world';
+    <ProFormBase
+      initialValues={{
+        javascript: `const name = 'world';
 console.log('hello', name);
-`}
-      />
-    </ProForm>
+`,
+      }}
+    >
+      <ProFormJavascript name="javascript" />
+      <div>readonly</div>
+      <ProFormJavascript name="javascript" readonly />
+    </ProFormBase>
   ),
 };
 
-// ProFormJavascript 只读示例
-export const ProFormJavascriptReadonly: Story = {
+export const ProFormSwitchNumberComponent: Story = {
   render: () => (
-    <ProForm>
-      <ProFormJavascript
-        name="javascript"
-        readonly
-        initialValue={`const name = 'world';
-console.log('hello', name);
-`}
-      />
-    </ProForm>
+    <ProFormBase>
+      <ProFormSwitchNumber name="switchNumber" />
+    </ProFormBase>
   ),
 };

package/src/form/form_switch_number.tsx

@@ -0,0 +1,40 @@
+import type { ProFormItemProps } from '@ant-design/pro-components';
+import { ProForm } from '@ant-design/pro-components';
+import type { SwitchProps } from 'antd';
+import { Switch } from 'antd';
+import React from 'react';
+
+interface SwitchNumberProps extends Omit<SwitchProps, 'value' | 'onChange'> {
+  value: number;
+  onChange: (
+    value: number,
+    event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+}
+
+function SwitchNumber(props: SwitchNumberProps) {
+  return (
+    <Switch
+      {...props}
+      value={props.value ? true : false}
+      onChange={(checked, event) => {
+        return props.onChange(checked ? 1 : 0, event);
+      }}
+    />
+  );
+}
+
+function ProFormSwitchNumber(props: ProFormItemProps<SwitchNumberProps>) {
+  // 没搞明白 cacheFormSwr, proFieldKey, onBlur，先这样处理
+  /* eslint-disable-next-line */
+  const { fieldProps, readonly, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <SwitchNumber {...(fieldProps as SwitchNumberProps)} />
+    </ProForm.Item>
+  );
+}
+
+export { ProFormSwitchNumber, SwitchNumber };
+export type { SwitchNumberProps };

package/src/form/index.tsx

@@ -1,43 +1,8 @@
-import type { ProFormItemProps } from '@ant-design/pro-components';
-import { ProForm } from '@ant-design/pro-components';
-import { EditorJSON } from '../editor_json';
-import { EditorJavascript } from '../editor_javascript';
+export { ProFormSwitchNumber, SwitchNumber, type SwitchNumberProps } from './form_switch_number';
+export { ProFormJavascript } from './pro_form_javascript';
+export { ProFormJSON } from './pro_form_json';
 import { pinyinMatch } from '@fe-free/tool';
 
-function JSONItem(props) {
-  return (
-    <div style={{ height: '300px' }}>
-      <EditorJSON {...props} />
-    </div>
-  );
-}
-
-function ProFormJSON(props: ProFormItemProps) {
-  const { readonly, fieldProps, ...rest } = props;
-  return (
-    <ProForm.Item {...rest}>
-      <JSONItem readonly={readonly} {...fieldProps} />
-    </ProForm.Item>
-  );
-}
-
-function JavascriptItem(props) {
-  return (
-    <div style={{ height: '300px' }}>
-      <EditorJavascript {...props} />
-    </div>
-  );
-}
-
-function ProFormJavascript(props: ProFormItemProps) {
-  const { readonly, fieldProps, ...rest } = props;
-  return (
-    <ProForm.Item {...rest}>
-      <JavascriptItem readonly={readonly} {...fieldProps} />
-    </ProForm.Item>
-  );
-}
-
 /** ProFromSelect 搜索相关 props。 支持 1 搜索 2 拼音过滤 */
 const proFormSelectSearchProps = {
   fieldProps: {
@@ -48,4 +13,4 @@ const proFormSelectSearchProps = {
   },
 };
 
-export { ProFormJSON, ProFormJavascript, proFormSelectSearchProps };
+export { proFormSelectSearchProps };

package/src/form/pro_form_javascript.tsx

@@ -0,0 +1,26 @@
+import type { ProFormItemProps } from '@ant-design/pro-components';
+import { ProForm } from '@ant-design/pro-components';
+import type { EditorJavascriptProps } from '../editor_javascript';
+import { EditorJavascript } from '../editor_javascript';
+
+function JavascriptItem(props: EditorJavascriptProps) {
+  return (
+    <div style={{ height: '300px' }}>
+      <EditorJavascript {...props} />
+    </div>
+  );
+}
+
+function ProFormJavascript(props: ProFormItemProps<EditorJavascriptProps>) {
+  // 没搞明白 cacheFormSwr, proFieldKey, onBlur，先这样处理
+  /* eslint-disable-next-line */
+  const { fieldProps, readonly, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <JavascriptItem readonly={readonly} {...(fieldProps as EditorJavascriptProps)} />
+    </ProForm.Item>
+  );
+}
+
+export { ProFormJavascript };

package/src/form/pro_form_json.tsx

@@ -0,0 +1,26 @@
+import type { ProFormItemProps } from '@ant-design/pro-components';
+import { ProForm } from '@ant-design/pro-components';
+import type { EditorJSONProps } from '../editor_json';
+import { EditorJSON } from '../editor_json';
+
+function JSONItem(props: EditorJSONProps) {
+  return (
+    <div style={{ height: '300px' }}>
+      <EditorJSON {...props} />
+    </div>
+  );
+}
+
+function ProFormJSON(props: ProFormItemProps<EditorJSONProps>) {
+  // 没搞明白 cacheFormSwr, proFieldKey, onBlur，先这样处理
+  /* eslint-disable-next-line */
+  const { fieldProps, readonly, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <JSONItem readonly={props.readonly} {...(fieldProps as EditorJSONProps)} />
+    </ProForm.Item>
+  );
+}
+
+export { ProFormJSON };

package/src/index.ts

@@ -17,7 +17,12 @@ export type { EditorLogsProps } from './editor_logs';
 export { EditorMarkdown } from './editor_markdown';
 export type { EditorMarkdownProps } from './editor_markdown';
 
-export { ProFormJSON, ProFormJavascript, proFormSelectSearchProps } from './form';
+export {
+  ProFormJSON,
+  ProFormJavascript,
+  ProFormSwitchNumber,
+  proFormSelectSearchProps,
+} from './form';
 
 export { Table } from './table';
 export type { TableProps } from './table';