feat: 1.Input组件增加属性。2.配置增加图标类型。

JackySoft · Aug 29, 2024 · 655f2e6 · 655f2e6
1 parent 2e1edc7
commit 655f2e6
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 19 deletions.
diff --git a/packages/editor/src/components/SetterRender/SetterRender.tsx b/packages/editor/src/components/SetterRender/SetterRender.tsx
@@ -1,11 +1,13 @@
+import React, { memo } from 'react';
+import { Form, Input, InputNumber, Radio, Select, Switch, Slider, FormInstance } from 'antd';
+import * as icons from '@ant-design/icons';
 import { SchemaType } from '@/packages/types';
 import { CaretDownOutlined } from '@ant-design/icons/lib';
-import { Form, Input, InputNumber, Radio, Select, Switch, Slider, FormInstance } from 'antd';
-import { memo } from 'react';
 import MColorPicker from '../ColorPicker';
 import VariableBindInput from '../VariableBind/VariableBind';
-import styles from './index.module.less';
 import InputSelect from '../InputSelect/InputSelect';
+import styles from './index.module.less';
+
 // 如果没有设置label，则独占一行
 const formLayoutFull = {
   labelCol: { span: 0 },
@@ -62,6 +64,27 @@ const SetterRender = memo(({ attrs, form }: IAttrs) => {
           FormControl = <VariableBindInput {...item.props} />;
         } else if (item.type === 'function') {
           return item.render?.(form);
+        } else if (item.type === 'Icons') {
+          // 获取所有的antd图标，动态渲染到下拉框中
+          const iconsList: { [key: string]: any } = icons;
+          FormControl = (
+            <Select placeholder="请选择菜单图表" showSearch allowClear>
+              {Object.keys(icons)
+                .filter((item) => !['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor', 'IconProvider'].includes(item))
+                .map((key) => {
+                  return (
+                    <Select.Option value={key} key={key}>
+                      {React.createElement(iconsList[key], {
+                        style: {
+                          fontSize: '18px',
+                          verticalAlign: 'middle',
+                        },
+                      })}
+                    </Select.Option>
+                  );
+                })}
+            </Select>
+          );
         }
         return (
           <Form.Item key={key} name={item.name} label={item.label} tooltip={item.tooltip} {...(item.label ? null : formLayoutFull)}>

diff --git a/packages/editor/src/packages/FormItems/Input/Input.tsx b/packages/editor/src/packages/FormItems/Input/Input.tsx
@@ -1,5 +1,6 @@
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react';
 import { Form, Input, InputProps, FormItemProps } from 'antd';
-import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react';
+import * as icons from '@ant-design/icons';
 import { ComponentType } from '@/packages/types';
 import { isNull } from '@/packages/utils/util';
 import { FormContext } from '@/packages/utils/context';
@@ -8,15 +9,15 @@ import { FormContext } from '@/packages/utils/context';
 export interface IConfig {
   defaultValue: string;
   formItem: FormItemProps;
-  formWrap: InputProps;
+  formWrap: InputProps & { prefixIcons?: string; suffixIcons?: string };
 }
 /**
  *
  * @param config 组件配置属性值
  * @param props 系统属性值：componentid、componentname等
  * @returns 返回组件
  */
-const MInput = ({ id, type, config, onChange, onBlur }: ComponentType<IConfig>, ref: any) => {
+const MInput = ({ id, type, config, onChange, onBlur, onPressEnter }: ComponentType<IConfig>, ref: any) => {
   const form = useContext(FormContext);
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState(false);
@@ -35,16 +36,25 @@ const MInput = ({ id, type, config, onChange, onBlur }: ComponentType<IConfig>,
     setDisabled(config.props.formWrap.disabled || false);
   }, [config.props.formWrap.disabled]);
 
+  // 输入事件
   const handleChange = (val: string) => {
     onChange?.({
       [config.props.formItem.name]: val,
     });
   };
+
+  // 失去焦点事件
   const handleBlur = (val: string) => {
     onBlur?.({
       [config.props.formItem.name]: val,
     });
   };
+  // 回车事件
+  const handlePressEnter = (val: string) => {
+    onPressEnter?.({
+      [config.props.formItem.name]: val,
+    });
+  };
   useImperativeHandle(ref, () => {
     return {
       show() {
@@ -61,6 +71,7 @@ const MInput = ({ id, type, config, onChange, onBlur }: ComponentType<IConfig>,
       },
     };
   });
+  const iconsList: { [key: string]: any } = icons;
   return (
     visible && (
       <Form.Item {...config.props.formItem} data-id={id} data-type={type}>
@@ -69,8 +80,11 @@ const MInput = ({ id, type, config, onChange, onBlur }: ComponentType<IConfig>,
           disabled={disabled}
           variant={config.props.formWrap.variant || undefined}
           style={config.style}
+          prefix={config.props.formWrap.prefixIcons ? React.createElement(iconsList[config.props.formWrap.prefixIcons]) : null}
+          suffix={config.props.formWrap.suffixIcons ? React.createElement(iconsList[config.props.formWrap.suffixIcons]) : null}
           onChange={(event) => handleChange(event.target.value)}
           onBlur={(event) => handleBlur(event.target.value)}
+          onPressEnter={(event: any) => handlePressEnter(event.target.value)}
         />
       </Form.Item>
     )

diff --git a/packages/editor/src/packages/FormItems/Input/Schema.tsx b/packages/editor/src/packages/FormItems/Input/Schema.tsx
@@ -71,6 +71,16 @@ export default {
         placeholder: '默认提示',
       },
     },
+    {
+      type: 'Switch',
+      label: '允许清除',
+      name: ['formWrap', 'allowClear'],
+    },
+    {
+      type: 'Switch',
+      label: '显示字数',
+      name: ['formWrap', 'showCount'],
+    },
     {
       type: 'InputNumber',
       label: '最大长度',
@@ -81,18 +91,40 @@ export default {
     },
     {
       type: 'Switch',
-      label: '显示删除',
-      name: ['formWrap', 'allowClear'],
+      label: '是否禁用',
+      name: ['formWrap', 'disabled'],
     },
     {
-      type: 'Switch',
-      label: '显示字数',
-      name: ['formWrap', 'showCount'],
+      type: 'Input',
+      label: '前置标签',
+      name: ['formWrap', 'addonBefore'],
+      props: {
+        placeholder: 'eg: http://',
+      },
     },
     {
-      type: 'Switch',
-      label: '是否禁用',
-      name: ['formWrap', 'disabled'],
+      type: 'Input',
+      label: '后置标签',
+      name: ['formWrap', 'addonAfter'],
+      props: {
+        placeholder: 'eg: .com',
+      },
+    },
+    {
+      type: 'Icons',
+      label: '前缀',
+      name: ['formWrap', 'prefixIcons'],
+      props: {
+        placeholder: '请选择图标',
+      },
+    },
+    {
+      type: 'Icons',
+      label: '后缀',
+      name: ['formWrap', 'suffixIcons'],
+      props: {
+        placeholder: '请选择图标',
+      },
     },
     {
       type: 'Select',
@@ -176,11 +208,15 @@ export default {
   events: [
     {
       value: 'onChange',
-      name: 'onChange事件',
+      name: '输入事件',
     },
     {
       value: 'onBlur',
-      name: 'onBlur事件',
+      name: '失焦事件',
+    },
+    {
+      value: 'onPressEnter',
+      name: '回车事件',
     },
   ],
 };
diff --git a/packages/editor/src/packages/types/index.ts b/packages/editor/src/packages/types/index.ts
@@ -272,6 +272,7 @@ export enum FormType {
   function = 'function',
   Slider = 'Slider',
   Variable = 'Variable',
+  Icons = 'Icons',
 }
 
 /**

diff --git a/packages/materials/FormItems/Input/Input.tsx b/packages/materials/FormItems/Input/Input.tsx
@@ -1,5 +1,6 @@
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react';
 import { Form, Input, InputProps, FormItemProps } from 'antd';
-import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react';
+import * as icons from '@ant-design/icons';
 import { ComponentType } from '../../types';
 import { isNull } from '../../utils/util';
 import { FormContext } from '../../utils/context';
@@ -8,15 +9,15 @@ import { FormContext } from '../../utils/context';
 export interface IConfig {
   defaultValue: string;
   formItem: FormItemProps;
-  formWrap: InputProps;
+  formWrap: InputProps & { prefixIcons?: string; suffixIcons?: string };
 }
 /**
  *
  * @param config 组件配置属性值
  * @param props 系统属性值：componentid、componentname等
  * @returns 返回组件
  */
-const MInput = ({ config, onChange, onBlur }: ComponentType<IConfig>, ref: any) => {
+const MInput = ({ config, onChange, onBlur, onPressEnter }: ComponentType<IConfig>, ref: any) => {
   const form = useContext(FormContext);
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState(false);
@@ -35,19 +36,28 @@ const MInput = ({ config, onChange, onBlur }: ComponentType<IConfig>, ref: any)
     setDisabled(config.props.formWrap.disabled || false);
   }, [config.props.formWrap.disabled]);
 
+  // 输入事件
   const handleChange = (val: string) => {
     onChange &&
       onChange({
         [config.props.formItem.name]: val,
       });
   };
 
+  // 失去焦点事件
   const handleBlur = (val: string) => {
     onBlur?.({
       [config.props.formItem.name]: val,
     });
   };
 
+  // 回车事件
+  const handlePressEnter = (val: string) => {
+    onPressEnter?.({
+      [config.props.formItem.name]: val,
+    });
+  };
+
   useImperativeHandle(ref, () => {
     return {
       show() {
@@ -64,6 +74,7 @@ const MInput = ({ config, onChange, onBlur }: ComponentType<IConfig>, ref: any)
       },
     };
   });
+  const iconsList: { [key: string]: any } = icons;
   return (
     visible && (
       <Form.Item {...config.props.formItem}>
@@ -72,8 +83,11 @@ const MInput = ({ config, onChange, onBlur }: ComponentType<IConfig>, ref: any)
           disabled={disabled}
           variant={config.props.formWrap.variant || undefined}
           style={config.style}
+          prefix={config.props.formWrap.prefixIcons ? React.createElement(iconsList[config.props.formWrap.prefixIcons]) : null}
+          suffix={config.props.formWrap.suffixIcons ? React.createElement(iconsList[config.props.formWrap.suffixIcons]) : null}
           onChange={(event) => handleChange(event.target.value)}
           onBlur={(event) => handleBlur(event.target.value)}
+          onPressEnter={(event: any) => handlePressEnter(event.target.value)}
         />
       </Form.Item>
     )