lu-lowcode-package-form 0.9.43 → 0.9.45

package/package.json

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

package/src/components/field/base.jsx

@@ -30,7 +30,7 @@ export const BaseWrapper = function BaseWrapper({
     const ignoreReadonly = ["UploadImage","UploadFile","Table"]
     if (ignoreReadonly.includes(children?.type?.displayName) && readonly) readonly = false
     const formWarpper = (
-        <div className={`frelative`}>
+        <div className={`frelative fw-full`}>
             {label && <>
                 {!higLabel && <div className={`fh-8 ftext-gray-500 ftext-sm fflex fitems-center ${higLabel ? " ftext-xl fmy-2 ftext-black" : ""}`}>{label}{isRequired && <span className="ftext-red-500 ffont-bold">*</span>}</div>}
                 {higLabel && <div className="fh-11  fflex fitems-center ftext-lg ffont-medium "><span className="fborder-l-4 fborder-slate-300  fpl-2 ">{label}</span>{isRequired && <span className="ftext-red-500 ffont-bold">*</span>}</div>}

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

@@ -6,7 +6,7 @@ import { BaseWrapper } from "../base"
 import { debounce } from 'lodash';
 
 
-const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, subRequest, sub_option_label = "label", mode="single", sub_option_value = "id", ...props }) => {
+const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, subRequest, sub_option_label = "label", mode = "single", sub_option_value = "id", rightIcon, rightIconClick, ...props }) => {
     const [nOptions, setNOptions] = React.useState([])
     const [fetching, setFetching] = useState(false);
     useEffect(() => {
@@ -51,18 +51,18 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
             if (Array.isArray(list)) {
                 for (let index = 0; index < list.length; index++) {
                     const item = list[index];
-                    if ( typeof subRequest == "function") {
+                    if (typeof subRequest == "function") {
                         let subList = []
-                        const {data } = await subRequest(item)
-                        if(data?.list && Array.isArray(data.list)) {
-                            subList = data.list.map(subItem => ({label:`${item[option_label]}-${subItem[sub_option_label]}`, value: `${item[option_value]}-${subItem[sub_option_value]}`}))
+                        const { data } = await subRequest(item)
+                        if (data?.list && Array.isArray(data.list)) {
+                            subList = data.list.map(subItem => ({ label: `${item[option_label]}-${subItem[sub_option_label]}`, value: `${item[option_value]}-${subItem[sub_option_value]}` }))
                         }
-                        list[index] = { ...item, label : item[option_label], title: item[option_label], options:subList }
+                        list[index] = { ...item, label: item[option_label], title: item[option_label], options: subList }
                     }
                     list[index] = { ...item, label: item[option_label], value: item[option_value] }
-                    
+
                 }
-              
+
                 setNOptions(list)
             }
 
@@ -80,14 +80,32 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
         if (Array.isArray(value)) {
             onChange(value.map(item => nOptions.find(option => option.value === item)))
         }
-       else {
-        onChange( nOptions.find(item => item.value === value))
-       }
+        else {
+            onChange(nOptions.find(item => item.value === value))
+        }
     }
 
 
     return addWrapper ? (
         <BaseWrapper {...props}>
+                <OriginalSelect
+
+                    notFoundContent={fetching ? <Spin size="small" /> : null}
+                    value={value}
+                    {...props}
+                    disabled={false}
+                    filterOption={false}
+                    showSearch={request && option_search ? true : false}
+                    onSearch={request && option_search ? handleSearch : null}
+                    onChange={handleChange}
+                    style={{ width: '100%', flex: 1 }}
+                    options={nOptions}
+                    mode={mode} >
+
+                </OriginalSelect>
+                {rightIcon}
+        </BaseWrapper>
+    ) : (<>
             <OriginalSelect
                 notFoundContent={fetching ? <Spin size="small" /> : null}
                 value={value}
@@ -99,25 +117,12 @@ const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange,
                 onChange={handleChange}
                 style={{ width: '100%' }}
                 options={nOptions}
-                mode={mode} >
-              
+                mode={mode}  >
+
             </OriginalSelect>
-        </BaseWrapper>
-    ) : <OriginalSelect
-        notFoundContent={fetching ? <Spin size="small" /> : null} 
-        value={value}
-        {...props}
-        disabled={false}
-        filterOption={false}
-        showSearch={request && option_search ? true : false}
-        onSearch={request && option_search ? handleSearch : null}
-        onChange={handleChange}
-        style={{ width: '100%' }}
-        options={nOptions}
-        mode={mode}  >
-      
-    </OriginalSelect>
+            {rightIcon}</>
+    )
 
 }
 
-export {SearchSelect}
+export { SearchSelect }

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

@@ -1,9 +1,10 @@
-import { Select as OriginalSelect, Tree, Input } from "antd";
+import { Select as OriginalSelect, Tree, Input, Button } from "antd";
 
 import { BaseWrapper } from "../base"
 import {SearchSelect} from "./search-select"
 import React, { useEffect, useState } from 'react';
 import TreeSelect from './tree-select'
+import { EditOutlined } from '@ant-design/icons';
 
 const Select = ({ request,  option_label = "label", option_value = "id",disabledValue, callError, options, addWrapper = true, ...props }) => {
     // const [firstLoad, setFirstLoad] = React.useState(false)
@@ -71,8 +72,7 @@ const MultipleSelect = ({ onChange, value, ...props }) => {
  * @returns 
  */
 const WithSingleSelect = ({ onChange, value, ...props }) => {
-    const [nValue, setNValue] = React.useState("")
-
+   
     React.useEffect(() => {
         if (value && typeof value === "string") {
             try {
@@ -82,16 +82,12 @@ const WithSingleSelect = ({ onChange, value, ...props }) => {
 
             }
         }
-        if (value) setNValue(value)
-    }, [value])
 
+    }, [value])
 
-    const onWithSelectChange = (_value, _option) => {
-        onChange && typeof onChange == "function" && onChange(_option)
-        setNValue(_option.label)
-    }
     return (
-        <SearchSelect {...props} onChange={onWithSelectChange} value={nValue} mode="single" />
+            <SearchSelect {...props} onChange={onChange} value={value} mode="single" className=" fflex-1"  />
+        
     )
 }
 
@@ -101,9 +97,7 @@ const WithSingleSelect = ({ onChange, value, ...props }) => {
  * @returns 
  */
 const WithMultipleSelect = ({ onChange, value, ...props }) => {
-    const [nValue, setNValue] = React.useState([])
-
-
+  
     React.useEffect(() => {
         if (value && typeof value === "string") {
             try {
@@ -114,16 +108,10 @@ const WithMultipleSelect = ({ onChange, value, ...props }) => {
             }
         }
 
-        if (Array.isArray(value)) setNValue(value)
     }, [value])
 
-    const onWithSelectChange = (_value, _option) => {
-        onChange && typeof onChange == "function" && onChange(_option)
-        const selectLabels = _option.map(item => item.label);
-        setNValue(_option)
-    }
     return (
-        <SearchSelect {...props} onChange={onWithSelectChange} value={nValue} mode="multiple" />
+        <SearchSelect {...props} onChange={onChange} value={value} mode="multiple"   />
     )
 }