@fe-free/core 3.0.2 → 3.0.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 3.0.3
+
+### Patch Changes
+
+- feat: switch
+  - @fe-free/tool@3.0.3
+
 ## 3.0.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "3.0.2"
+    "@fe-free/tool": "3.0.3"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/form/form.stories.tsx

@@ -11,6 +11,7 @@ import {
   ProFormRecord,
   ProFormRecordArray,
   ProFormSwitchNumber,
+  ProFormSwitchOptions,
   ProFormUpload,
   ProFormUploadDragger,
 } from '@fe-free/core';
@@ -127,6 +128,45 @@ export const ProFormSwitchNumberComponent: Story = {
   ),
 };
 
+export const ProFormSwitchOptionsComponent: Story = {
+  render: () => (
+    <ProFormBase>
+      <ProFormSwitchOptions
+        name="switchOptions"
+        fieldProps={{
+          options: [
+            { value: 'NO', label: '否' },
+            { value: 'YES', label: '是' },
+          ],
+        }}
+      />
+      <ProFormSwitchOptions
+        name="switchOptionsLabel"
+        fieldProps={{
+          enableLabel: true,
+          options: [
+            { value: 'NO', label: '否' },
+            { value: 'YES', label: '是' },
+          ],
+        }}
+      />
+      <ProFormSwitchOptions
+        name="switchOptions2"
+        fieldProps={{
+          options: ['OFF', 'ON'],
+        }}
+      />
+      <ProFormSwitchOptions
+        name="switchOptions2Label"
+        fieldProps={{
+          enableLabel: true,
+          options: ['OFF', 'ON'],
+        }}
+      />
+    </ProFormBase>
+  ),
+};
+
 export const ProFormListTextComponent: Story = {
   render: () => (
     <ProFormBase>

package/src/form/index.tsx

@@ -7,9 +7,12 @@ export { ProFormJSON } from './pro_form_json';
 export { ProFormRecord, ProFormRecordArray } from './pro_form_record';
 export {
   ProFormSwitchNumber,
+  ProFormSwitchOptions,
   SwitchNumber,
+  SwitchOptions,
   type SwitchNumberProps,
-} from './pro_form_switch_number';
+  type SwitchOptionsProps,
+} from './pro_form_switch';
 export {
   ProFormImageUpload,
   ProFormImageUploadDragger,

package/src/form/pro_form_switch.tsx

@@ -0,0 +1,117 @@
+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, { useCallback, useEffect, useMemo } 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>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <SwitchNumber {...(fieldProps as SwitchNumberProps)} />
+    </ProForm.Item>
+  );
+}
+
+interface SwitchOptionsProps extends Omit<SwitchProps, 'value' | 'onChange'> {
+  value: string;
+  onChange?: (
+    value: string,
+    event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+  options?:
+    | string[]
+    | {
+        value: string;
+        label: string;
+      }[];
+  enableLabel?: boolean;
+}
+const emptyArray = [];
+function SwitchOptions({
+  value,
+  onChange,
+  options = emptyArray,
+  enableLabel,
+  ...rest
+}: SwitchOptionsProps) {
+  useEffect(() => {
+    if (options.length !== 2) {
+      console.error('SwitchOptions 必须有 2 个选项');
+    }
+  }, [options]);
+
+  const newOptions = useMemo(() => {
+    return options.map((item) => {
+      if (typeof item === 'string') {
+        return {
+          value: item,
+          label: item,
+        };
+      }
+      return {
+        value: item.value,
+        label: item.label,
+      };
+    });
+  }, [options]);
+
+  const newValue = useMemo(() => {
+    // 1 true 其他 false
+    return newOptions.findIndex((item) => item.value === value) === 1 ? true : false;
+  }, [newOptions, value]);
+
+  const handleChange = useCallback(
+    (
+      checked: boolean,
+      event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,
+    ) => {
+      onChange?.(checked ? newOptions[1].value : newOptions[0].value, event);
+    },
+    [newOptions, onChange],
+  );
+
+  return (
+    <Switch
+      checkedChildren={enableLabel ? newOptions[1].label : undefined}
+      unCheckedChildren={enableLabel ? newOptions[0].label : undefined}
+      {...rest}
+      value={newValue}
+      onChange={handleChange}
+    />
+  );
+}
+
+function ProFormSwitchOptions(props: ProFormItemProps<SwitchOptionsProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <SwitchOptions {...(fieldProps as SwitchOptionsProps)} />
+    </ProForm.Item>
+  );
+}
+
+export { ProFormSwitchNumber, ProFormSwitchOptions, SwitchNumber, SwitchOptions };
+export type { SwitchNumberProps, SwitchOptionsProps };

package/src/index.ts

@@ -37,8 +37,11 @@ export {
   ProFormRecord,
   ProFormRecordArray,
   ProFormSwitchNumber,
+  ProFormSwitchOptions,
   ProFormUpload,
   ProFormUploadDragger,
+  SwitchNumber,
+  SwitchOptions,
   proFormSelectSearchProps,
 } from './form';
 export { RequestError, initErrorHandle } from './global/error';

package/src/tailwindcss.stories.tsx

@@ -10,56 +10,56 @@ export const Default = () => {
       <h1>tailwindcss</h1>
       <h2>textColor</h2>
       <div>
-        <div className="text-01">text-01</div>
-        <div className="text-02">text-02</div>
-        <div className="text-03">text-03</div>
-        <div className="text-04">text-04</div>
+        <div className="p-1 text-01">text-01 主要</div>
+        <div className="p-1 text-02">text-02 次要</div>
+        <div className="p-1 text-03">text-03 描述</div>
+        <div className="p-1 text-04">text-04 placeholder</div>
       </div>
       <h2>borderColor</h2>
-      <div className="space-y-2">
-        <div className="border border-solid border-01">border-01</div>
-        <div className="border border-solid border-02">border-02</div>
-        <div className="border border-solid border-03">border-03</div>
+      <div className="space-y-2 p-1">
+        <div className="border border-solid border-01 p-1">border-01 主要</div>
+        <div className="border border-solid border-02 p-1">border-02 表单</div>
+        <div className="border border-solid border-03 p-1">border-03</div>
       </div>
       <h2>backgroundColor</h2>
       <div>
-        <div className="bg-01">bg-01</div>
-        <div className="bg-02">bg-02</div>
-        <div className="bg-03">bg-03</div>
-        <div className="bg-04">bg-04</div>
+        <div className="bg-01 p-1">bg-01 主要（对应设计稿 bg005）</div>
+        <div className="bg-02 p-1">bg-02 hover(对应设计稿 bg01)</div>
+        <div className="bg-03 p-1">bg-03 (对应设计稿 bg02)</div>
+        <div className="bg-04 p-1">bg-04 disabled(对应设计稿 bg03)</div>
       </div>
       <h2>colors</h2>
       <div>
-        <div className="bg-primary">bg-primary</div>
+        <div className="bg-primary p-1">bg-primary 主题色</div>
       </div>
       <h2>colors - themeColor</h2>
       <div>
-        <div className="bg-theme09">theme09</div>
-        <div className="bg-theme08">theme08</div>
-        <div className="bg-theme05">theme05</div>
-        <div className="bg-theme03">theme03</div>
-        <div className="bg-theme02">theme02</div>
+        <div className="bg-theme09 p-1">theme09 加深 hover</div>
+        <div className="bg-theme08 p-1">theme08 主要</div>
+        <div className="bg-theme05 p-1">theme05 次要</div>
+        <div className="bg-theme03 p-1">theme03 背景</div>
+        <div className="bg-theme02 p-1">theme02 </div>
       </div>
       <h2>colors - redColor</h2>
       <div>
-        <div className="bg-red09">red09</div>
-        <div className="bg-red08">red08</div>
-        <div className="bg-red05">red05</div>
-        <div className="bg-red03">red03</div>
+        <div className="bg-red09 p-1">red09 加深 hover</div>
+        <div className="bg-red08 p-1">red08 主要</div>
+        <div className="bg-red05 p-1">red05 次要</div>
+        <div className="bg-red03 p-1">red03 背景</div>
       </div>
       <h2>colors - greenColor</h2>
       <div>
-        <div className="bg-green09">green09</div>
-        <div className="bg-green08">green08</div>
-        <div className="bg-green05">green05</div>
-        <div className="bg-green03">green03</div>
+        <div className="bg-green09 p-1">green09 加深 hover</div>
+        <div className="bg-green08 p-1">green08 主要</div>
+        <div className="bg-green05 p-1">green05 次要</div>
+        <div className="bg-green03 p-1">green03 背景</div>
       </div>
       <h2>colors - yellowColor</h2>
       <div>
-        <div className="bg-yellow09">yellow09</div>
-        <div className="bg-yellow08">yellow08</div>
-        <div className="bg-yellow05">yellow05</div>
-        <div className="bg-yellow03">yellow03</div>
+        <div className="bg-yellow09 p-1">yellow09 加深 hover</div>
+        <div className="bg-yellow08 p-1">yellow08 主要</div>
+        <div className="bg-yellow05 p-1">yellow05 次要</div>
+        <div className="bg-yellow03 p-1">yellow03 背景</div>
       </div>
     </div>
   );

package/src/theme.ts

@@ -1,44 +1,44 @@
 const themeVariables = {
   color: {
-    primary: '#0374e9',
+    primary: '#0374e9', // 主题色
 
     // 目前是主题蓝
-    theme09: '#0368d2',
-    theme08: '#0374e9',
-    theme05: '#a2cbf7',
-    theme03: '#e6f1fd',
+    theme09: '#0368d2', // 加深 hover
+    theme08: '#0374e9', // 主要
+    theme05: '#a2cbf7', // 次要
+    theme03: '#e6f1fd', // 背景
     theme02: '#f0f7fe',
 
-    red09: '#e64547',
-    red08: '#ff4d4f',
-    red05: '#ffb8b9',
-    red03: '#ffeded',
+    red09: '#e64547', // 加深 hover
+    red08: '#ff4d4f', // 主要
+    red05: '#ffb8b9', // 次要
+    red03: '#ffeded', // 背景
 
-    green09: '#01a468',
-    green08: '#01b673',
-    green05: '#9be5c8',
-    green03: '#ddf9ec',
+    green09: '#01a468', // 加深 hover
+    green08: '#01b673', // 主要
+    green05: '#9be5c8', // 次要
+    green03: '#ddf9ec', // 背景
 
-    yellow09: '#bf7a05',
-    yellow08: '#faad14',
-    yellow05: '#eecf9b',
-    yellow03: '#f6e7cd',
+    yellow09: '#bf7a05', // 加深 hover
+    yellow08: '#faad14', // 主要
+    yellow05: '#eecf9b', // 次要
+    yellow03: '#f6e7cd', // 背景
   },
   textColor: {
-    '01': '#15191e',
-    '02': '#444444',
-    '03': '#777777',
-    '04': '#94999f',
+    '01': '#15191e', // 主要
+    '02': '#444444', // 次要
+    '03': '#777777', // 描述
+    '04': '#94999f', // placeholder
   },
   borderColor: {
-    '01': '#e2e7f0',
-    '02': '#d5dde9',
+    '01': '#e2e7f0', // 主要
+    '02': '#d5dde9', // 表单
     '03': '#c0c7d2',
   },
   backgroundColor: {
-    '01': '#f1f3f5',
-    '02': '#ececec',
-    '03': '#d9d9d9',
+    '01': '#f1f3f5', // 主要
+    '02': '#ececec', // 加深 hover
+    '03': '#d9d9d9', // disabled
     '04': '#c0c0c0',
   },
 } as const;

package/src/value_type_map/index.tsx

@@ -2,6 +2,7 @@ import type { ProRenderFieldPropsType } from '@ant-design/pro-components';
 import { dateRender } from './date';
 import { jsonRender } from './json';
 import { jsonModalRender } from './json_modal';
+import { switchNumberRender, switchOptionsRender } from './switch';
 
 enum CustomValueTypeEnum {
   /** 渲染时间 + 搜索日期范围 */
@@ -12,6 +13,9 @@ enum CustomValueTypeEnum {
   CustomJSON = 'CustomJSON',
   /** JSON Modal */
   CustomJSONModal = 'CustomJSONModal',
+  /** 渲染开关 */
+  CustomSwitchNumber = 'CustomSwitchNumber',
+  CustomSwitchOptions = 'CustomSwitchOptions',
 }
 
 const customValueTypeMap: Record<string, ProRenderFieldPropsType> = {
@@ -31,6 +35,14 @@ const customValueTypeMap: Record<string, ProRenderFieldPropsType> = {
     render: jsonModalRender.render,
     renderFormItem: jsonModalRender.renderFormItem,
   },
+  [CustomValueTypeEnum.CustomSwitchNumber]: {
+    render: switchNumberRender.render,
+    renderFormItem: switchNumberRender.renderFormItem,
+  },
+  [CustomValueTypeEnum.CustomSwitchOptions]: {
+    render: switchOptionsRender.render,
+    renderFormItem: switchOptionsRender.renderFormItem,
+  },
 };
 
 export { CustomValueTypeEnum, customValueTypeMap };

package/src/value_type_map/switch.tsx

@@ -0,0 +1,31 @@
+import {
+  ProFormSwitchNumber,
+  ProFormSwitchOptions,
+  SwitchNumber,
+  SwitchOptions,
+} from '../form/pro_form_switch';
+
+const switchNumberRender = {
+  render: (text) => {
+    if (text === undefined || text === null) return <div>-</div>;
+
+    return <SwitchNumber value={text} />;
+  },
+  renderFormItem: (_, props) => {
+    return <ProFormSwitchNumber {...props} />;
+  },
+};
+
+const switchOptionsRender = {
+  render: (text, props) => {
+    console.log('text', text, props.fieldProps);
+    if (text === undefined || text === null) return <div>-</div>;
+
+    return <SwitchOptions value={text} {...props.fieldProps} />;
+  },
+  renderFormItem: (_, props) => {
+    return <ProFormSwitchOptions {...props} />;
+  },
+};
+
+export { switchNumberRender, switchOptionsRender };

package/src/value_type_map/value_type_map.stories.tsx

@@ -25,6 +25,8 @@ async function fakeRequest() {
     dateNumber: +dayjs('2024-10-01'),
     seconds: Math.abs(+dayjs('2024-10-01') / 1000),
     jsonText: JSON.stringify({ name: 'hello world hello world hello world' }),
+    switchNumber: Math.random() > 0.5 ? 1 : 0,
+    switchOptions: Math.random() > 0.5 ? 'ON' : 'OFF',
   }));
 
   return Promise.resolve({
@@ -82,6 +84,20 @@ const Table = () => {
       ellipsis: true,
       valueType: CustomValueTypeEnum.CustomJSONModal,
     },
+    {
+      title: '开关 number',
+      dataIndex: 'switchNumber',
+      valueType: CustomValueTypeEnum.CustomSwitchNumber,
+    },
+    {
+      title: '开关 options',
+      dataIndex: 'switchOptions',
+      valueType: CustomValueTypeEnum.CustomSwitchOptions,
+      fieldProps: {
+        enableLabel: true,
+        options: ['OFF', 'ON'],
+      },
+    },
   ];
 
   return (

package/src/form/pro_form_switch_number.tsx

@@ -1,38 +0,0 @@
-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>) {
-  const { fieldProps, ...rest } = props;
-
-  return (
-    <ProForm.Item {...rest}>
-      <SwitchNumber {...(fieldProps as SwitchNumberProps)} />
-    </ProForm.Item>
-  );
-}
-
-export { ProFormSwitchNumber, SwitchNumber };
-export type { SwitchNumberProps };