🆕 新增复选框组件,添加对应ts类型

readme.md

@@ -135,6 +135,7 @@ yarn run start
 
 ## 赞助
 开源不易, 有了您的赞助, 我们会做的更好~
+<img src="http://io.nainor.com/uploads/WechatIMG2_1742b586c3d.jpeg" width="180px" />
 
 ## 技术反馈和交流
 微信：beautifulFront

src/components/BasicShop/BasicComponents/Form/BaseForm.tsx

@@ -1,9 +1,10 @@
-import { Input, Cell, DateSelect, Radio, Select } from 'zarm';
+import { Input, Cell, DateSelect, Radio, Select, Checkbox } from 'zarm';
 import styles from './baseForm.less';
-import React from 'react';
+import React, { ReactText } from 'react';
 import {
   baseFormDateTpl,
   baseFormMyRadioTpl,
+  baseFormMyCheckboxTpl,
   baseFormMySelectTpl,
   baseFormNumberTpl,
   baseFormTextAreaTpl,
@@ -67,6 +68,27 @@ const BaseForm: TBaseForm = {
       </div>
     );
   },
+  MyCheckbox: (
+    props: baseFormMyCheckboxTpl & { onChange: (v: Array<ReactText> | undefined) => void },
+  ) => {
+    const { label, options, onChange } = props;
+    return (
+      <div className={styles.radioWrap}>
+        <div className={styles.radioTitle}>{label}</div>
+        <Cell>
+          <Checkbox.Group onChange={onChange}>
+            {options.map((item, i) => {
+              return (
+                <Checkbox value={item.value} key={i} className={styles.radioItem}>
+                  {item.label}
+                </Checkbox>
+              );
+            })}
+          </Checkbox.Group>
+        </Cell>
+      </div>
+    );
+  },
   Date: (props: baseFormDateTpl & { onChange: (v: Date) => void }) => {
     const { label, placeholder, onChange } = props;
     return (

src/components/BasicShop/BasicComponents/Form/index.tsx

@@ -9,10 +9,6 @@ const FormComponent = (props: IFormConfig) => {
   const formData: Record<string, any> = {};
   const handleChange = useCallback(
     (item, v) => {
-      if (item.options) {
-        formData[item.label] = v[0].label;
-        return;
-      }
       formData[item.label] = v;
     },
     [formData],

src/components/BasicShop/BasicComponents/Form/schema.ts

@@ -8,12 +8,11 @@ import {
   TNumberDefaultType,
   TTextDefaultType,
 } from '@/components/PanelComponents/FormEditor/types';
-import { baseConfig, baseDefault, ICommonBaseType } from '../../common';
 
 export type TFormEditData = Array<
   ITextConfigType | INumberConfigType | IColorConfigType | ITextConfigType | IFormItemsConfigType
 >;
-export interface IFormConfig extends ICommonBaseType {
+export interface IFormConfig {
   title: TTextDefaultType;
   fontSize: TNumberDefaultType;
   titColor: TColorDefaultType;
@@ -31,7 +30,6 @@ export interface IFormSchema {
 
 const Form: IFormSchema = {
   editData: [
-    ...baseConfig,
     {
       key: 'title',
       name: '标题',
@@ -105,7 +103,6 @@ const Form: IFormSchema = {
         ],
       },
     ],
-    ...baseDefault,
   },
 };
 export default Form;

src/components/PanelComponents/FormEditor/types.ts

@@ -167,6 +167,13 @@ export type baseFormMyRadioTpl = {
   options: baseFormOptionsType[];
 };
 
+export type baseFormMyCheckboxTpl = {
+  id: string;
+  type: 'MyCheckbox';
+  label: string;
+  options: baseFormOptionsType[];
+};
+
 export type baseFormMySelectTpl = {
   id: string;
   type: 'MySelect';
@@ -186,6 +193,7 @@ export type baseFormUnion =
   | baseFormNumberTpl
   | baseFormTextAreaTpl
   | baseFormMyRadioTpl
+  | baseFormMyCheckboxTpl
   | baseFormMySelectTpl
   | baseFormDateTpl;
 export type baseFormUnionType =
@@ -193,6 +201,7 @@ export type baseFormUnionType =
   | baseFormNumberTpl['type']
   | baseFormTextAreaTpl['type']
   | baseFormMyRadioTpl['type']
+  | baseFormMyCheckboxTpl['type']
   | baseFormMySelectTpl['type']
   | baseFormDateTpl['type'];