lu-lowcode-package-form 0.8.3 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@testing-library/jest-dom": "^5.17.0",

package/src/App.jsx

@@ -21,7 +21,7 @@ const treeData = [
 
 function App() {
   const formRef = React.createRef();
-  const [cols, setCols] = React.useState(1);
+  const [cols, setCols] = React.useState(3);
 
   const getFormFields = () => {
     console.log("formRef?.current", formRef)
@@ -30,6 +30,9 @@ function App() {
   }
   const setFormFields = () => {
     formRef?.current?.formRef?.setFieldsValue({
+      select1:"1",
+      select2:"[\"1\",\"2\"]",
+      switch:"1",
       datetime: "2021-12-12",
       datetime2: "2021-12-12",
       datetime3: "2021-12-12",
@@ -39,7 +42,7 @@ function App() {
     })
   }
   const handleCols = () => {
-    setCols(cols + 1)
+    setCols(cols - 1)
   }
   return (
 
@@ -51,6 +54,8 @@ function App() {
       <div className='fw-[960px] frounded  fbg-slate-100 fflex fflex-col fitems-center fpb-10'>
         <FormContainerWrapper cols={cols} className="" ref={formRef} >
           <Field.Input label="分组名" __id="title" />
+          <Field.SingleSelect mode="single" label="测试单选" __id="select1" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.SingleSelect>
+          <Field.MultipleSelect mode="multiple" label="测多选" __id="select2" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.MultipleSelect>
           <Field.TreeSelect label="分组名" __id="title11"></Field.TreeSelect>
           <Field.Switch label="开关" __id="switch"></Field.Switch>
           <Field.CodeMachine label="角色编号" prompt="" __id="code" />

package/src/components/field/select/index.jsx

@@ -1,4 +1,4 @@
 export { default as TreeSelect } from './tree-select.jsx';
-export { Select, WithSingleSelect,WithMultipleSelect } from './select.jsx';
+export { Select, WithSingleSelect,WithMultipleSelect , MultipleSelect, SingleSelect} from './select.jsx';
 
 

package/src/components/field/select/select.jsx

@@ -36,6 +36,32 @@ const Select = ({ request, option_label = "label", option_value = "id", disabled
     )
 }
 
+const SingleSelect =  ({ ...props }) => {
+    return (
+        <Select {...props} mode="single" />
+    )
+}
+
+const MultipleSelect =  ({ onChange, value, ...props }) => {
+    const [nValue, setNValue] = React.useState([])
+
+    useEffect(()=>{
+        if (typeof value === "string") {
+            try {
+                value = JSON.parse(value)
+                onChange(value)
+            } catch (error) {
+                
+            }
+        }
+       
+        setNValue(value)
+    },[value])
+  
+    return (
+        <Select {...props} onChange={onChange} mode="multiple" value={nValue} />
+    )
+}
 /**
  * 关联单选组件
  * @param {*}  
@@ -95,4 +121,4 @@ const WithMultipleSelect = ({ onChange, value, ...props }) => {
     )
 }
 
-export { WithSingleSelect, WithMultipleSelect, Select };
+export { WithSingleSelect, WithMultipleSelect, MultipleSelect, SingleSelect, Select };

package/src/components/field/switch/index.jsx

@@ -1,15 +1,24 @@
 import React, { useEffect } from 'react';
 import { Switch as OriginalSwitch } from 'antd';
 import { BaseWrapper } from "../base.jsx"
-const Switch = ({defaultValue ,...props}) => {
-    defaultValue = defaultValue || false;
-    useEffect(() => {
-        props.onChange(defaultValue);
+const Switch = ({value, ...props}) => {
 
-    }, [defaultValue]);
+    const [nValue, setNValue] = React.useState(false)
+    useEffect(()=>{
+        let tem_value = false 
+        if( typeof value === "boolean" )
+            tem_value = value
+        else if (typeof value === "string")
+            tem_value =value == "1" || value == "true"
+        else if (typeof value == "number") 
+            tem_value = value == 1
+        setNValue(tem_value)
+        // 格式化form表单获取到的值
+        props?.onChange(tem_value)
+    },[value])
     return (
         <BaseWrapper {...props}>
-            <OriginalSwitch {...props} />
+            <OriginalSwitch {...props} value={nValue} />
         </BaseWrapper>
     );
 }

package/src/components/index.jsx

@@ -1,6 +1,6 @@
 import { Input, TextArea, Password, Search ,CodeMachine} from './field/input/index.jsx'
 import '../App.css';
-import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect } from './field/select/index.jsx'
+import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect, SingleSelect, MultipleSelect } from './field/select/index.jsx'
 import Custom from './field/custom/index.jsx'
 import { FormContainer, FormContainerWrapper,LayoutFormRow,LayoutFormGroupTitle } from './form-container/index.jsx'
 import { Checkbox ,CheckboxTree, CheckboxGroup } from './field/checkbox/index.jsx'
@@ -17,6 +17,8 @@ const Field = {
     Select,
     WithSingleSelect,
     WithMultipleSelect,
+    SingleSelect,
+    MultipleSelect,
     CodeMachine,
     Checkbox,
     CheckboxTree,
@@ -33,8 +35,8 @@ const Layout = {
     FormGroupTitle: LayoutFormGroupTitle
 }
 export { FormContainer, Field ,FormContainerWrapper,Layout }
-// import { default as OptionSetter} from './setter/optionsetter'
-// const Setter = {
-//     OptionSetter
-// }
-// export { Setter }
+import { default as OptionSetter} from './setter/optionsetter'
+const Setter = {
+    OptionSetter
+}
+export { Setter }