style: adjust providers style

src/components/label-selector/wrapper.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 interface WrapperProps {
+  required?: boolean;
   label?: React.ReactNode;
   description?: React.ReactNode;
   labelExtra?: React.ReactNode;
@@ -45,6 +46,7 @@ const ButtonWrapper = styled.div`
 `;
 
 const Wrapper: React.FC<WrapperProps> = ({
+  required,
   children,
   label,
   description,
@@ -61,6 +63,7 @@ const Wrapper: React.FC<WrapperProps> = ({
       {label && (
         <span className="label">
           <LabelInfo
+            required={required}
             label={label}
             description={description}
             labelExtra={labelExtra}

src/components/list-input/index.tsx

@@ -1,9 +1,10 @@
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import Wrapper from '../label-selector/wrapper';
 import ListItem from './list-item';
 
 interface ListInputProps {
+  required?: boolean;
   dataList: string[];
   label?: React.ReactNode;
   description?: React.ReactNode;
@@ -12,6 +13,10 @@ interface ListInputProps {
   placeholder?: string;
   labelExtra?: React.ReactNode;
   trim?: boolean;
+  styles?: {
+    wrapper?: React.CSSProperties;
+    item?: React.CSSProperties;
+  };
   onChange: (data: string[]) => void;
   onBlur?: (e: any, index: number) => void;
   onDelete?: (index: number) => void;
@@ -36,6 +41,8 @@ const ListInput: React.FC<ListInputProps> = (props) => {
     options,
     labelExtra,
     trim = true,
+    styles,
+    required,
     renderItem
   } = props;
   const [list, setList] = React.useState<{ value: string; uid: number }[]>([]);
@@ -86,9 +93,17 @@ const ListInput: React.FC<ListInputProps> = (props) => {
     }
   }, [dataList]);
 
+  useEffect(() => {
+    if (required && list.length === 0) {
+      handleOnAdd();
+    }
+  }, [required]);
+
   return (
     <Wrapper
+      styles={styles}
       label={label}
+      required={required}
       description={description}
       labelExtra={labelExtra}
       onAdd={handleOnAdd}
@@ -98,6 +113,7 @@ const ListInput: React.FC<ListInputProps> = (props) => {
         {_.map(list, (item: any, index: number) => {
           return (
             <ListItem
+              required={required && list.length === 1}
               placeholder={props.placeholder}
               options={options}
               data={item}

src/components/list-input/list-item.tsx

@@ -21,6 +21,7 @@ interface LabelItemProps {
   options?: Global.HintOptions[];
   trim?: boolean;
   data?: any;
+  required?: boolean;
 }
 
 const ListItem: React.FC<LabelItemProps> = (props) => {
@@ -33,6 +34,7 @@ const ListItem: React.FC<LabelItemProps> = (props) => {
     options,
     trim = true,
     data,
+    required,
     renderItem
   } = props;
 
@@ -58,14 +60,16 @@ const ListItem: React.FC<LabelItemProps> = (props) => {
           placeholder={props.placeholder}
         />
       )}
-      <Button
-        size="small"
-        className="btn"
-        type="default"
-        shape="circle"
-        icon={<MinusOutlined />}
-        onClick={onRemove}
-      />
+      {!required && (
+        <Button
+          size="small"
+          className="btn"
+          type="default"
+          shape="circle"
+          icon={<MinusOutlined />}
+          onClick={onRemove}
+        />
+      )}
     </div>
   );
 };

src/components/seal-form/wrapper/select.ts

@@ -85,7 +85,7 @@ const SelectWrapper = styled.div`
         }
 
         .ant-select .ant-select-input {
-          top: 5px;
+          top: -5px !important;
         }
         .ant-select-placeholder {
           position: absolute;