style: common component style

src/components/seal-form/components/label-info.less

@@ -0,0 +1,12 @@
+.label-text {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .note-info {
+    margin-left: 4px;
+  }
+  .star {
+    position: relative;
+    top: 2px;
+  }
+}

src/components/seal-form/components/label-info.tsx

@@ -0,0 +1,35 @@
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import React from 'react';
+import './label-info.less';
+
+interface NoteInfoProps {
+  required?: boolean;
+  label: string;
+  description?: React.ReactNode;
+}
+const NoteInfo: React.FC<NoteInfoProps> = (props) => {
+  console.log('props+++++++++', props);
+  const { required, description, label } = props || {};
+  return (
+    <span className="label-text">
+      <span>{label}</span>
+      <span className="note-info">
+        {required && (
+          <span style={{ color: 'red' }} className="star">
+            *
+          </span>
+        )}
+        {description && (
+          <span style={{ marginLeft: 5, color: 'gray' }} className="desc">
+            <Tooltip title={description}>
+              <InfoCircleOutlined />
+            </Tooltip>
+          </span>
+        )}
+      </span>
+    </span>
+  );
+};
+
+export default NoteInfo;

src/components/seal-form/components/wrapper.less

@@ -60,7 +60,7 @@
     pointer-events: all;
     z-index: 5;
     &.isfoucs-has-value {
-      top: 8px;
+      top: 10px;
       transition: all 0.2s var(--seal-transition-func);
     }
     &.blur-no-value {
@@ -68,6 +68,7 @@
       transition: all 0.2s var(--seal-transition-func);
     }
   }
+
   // ==================== select ==================
   :global(.ant-select) {
     display: flex;
@@ -84,6 +85,12 @@
   }
   :global(.ant-select-selection-item) {
     height: @inputheight !important;
+    padding-block: 5px !important;
+    line-height: 22px !important;
+    padding-inline-end: 0 !important;
+  }
+  :global(.ant-select-arrow) {
+    top: 10px;
   }
   :global(
       .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
@@ -91,6 +98,9 @@
     ) {
     background-color: transparent;
   }
+  :global(.ant-select-selection-search-input) {
+    height: @inputheight !important;
+  }
   // ==================== input ====================
   :global(.ant-input),
   :global(.ant-input-password) {

src/components/seal-form/components/wrapper.tsx

@@ -1,10 +1,14 @@
 import classNames from 'classnames';
+import React from 'react';
+import LabelInfo from './label-info';
 import wrapperStyle from './wrapper.less';
 interface WrapperProps {
   children: React.ReactNode;
   label: string;
   isFocus: boolean;
   status?: string;
+  required?: boolean;
+  description?: React.ReactNode;
   className?: string;
   disabled?: boolean;
   onClick?: () => void;
@@ -17,6 +21,8 @@ const Wrapper: React.FC<WrapperProps> = ({
   status,
   className,
   disabled,
+  description,
+  required,
   onClick
 }) => {
   return (
@@ -38,7 +44,11 @@ const Wrapper: React.FC<WrapperProps> = ({
             : wrapperStyle['blur-no-value']
         )}
       >
-        {label}
+        <LabelInfo
+          label={label}
+          required={required}
+          description={description}
+        ></LabelInfo>
       </label>
       {children}
     </div>

src/components/seal-form/field-wrapper.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import LabelInfo from './components/label-info';
+import wrapperStyle from './components/wrapper.less';
+interface WrapperProps {
+  children: React.ReactNode;
+  label: string;
+  status?: string;
+  className?: string;
+  disabled?: boolean;
+  required?: boolean;
+  description?: string;
+  onClick?: () => void;
+}
+
+const Wrapper: React.FC<WrapperProps> = ({
+  children,
+  label,
+  status,
+  className,
+  disabled,
+  required,
+  description
+}) => {
+  return (
+    <div
+      className={classNames(
+        wrapperStyle.wrapper,
+        wrapperStyle[`validate-status-${status}`],
+        disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
+        className ? wrapperStyle[className] : ''
+      )}
+    >
+      <label
+        className={classNames(
+          wrapperStyle['label'],
+          wrapperStyle['isfoucs-has-value']
+        )}
+      >
+        <LabelInfo
+          label={label}
+          required={required}
+          description={description}
+        ></LabelInfo>
+      </label>
+      <div
+        style={{
+          padding: '0 calc(var(--ant-padding-sm) - 5px)',
+          width: '100%'
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Wrapper;

src/components/seal-form/input-number.tsx

@@ -7,7 +7,7 @@ import { SealFormItemProps } from './types';
 const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   props
 ) => {
-  const { label, placeholder, ...rest } = props;
+  const { label, placeholder, required, description, ...rest } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
   const { status } = Form.Item.useStatus();
@@ -50,6 +50,8 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
       status={status}
       label={label || (placeholder as string)}
       isFocus={isFocus}
+      required={required}
+      description={description}
       disabled={props.disabled}
       onClick={handleClickWrapper}
     >

src/components/seal-form/input-search.tsx

@@ -16,7 +16,7 @@ type OnSearch = (
 ) => void;
 
 const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, ...rest } = props;
+  const { label, placeholder, required, description, ...rest } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
   const { status } = Form.Item.useStatus();
@@ -59,6 +59,8 @@ const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
       status={status}
       label={label || (placeholder as string)}
       isFocus={isFocus}
+      required={required}
+      description={description}
       disabled={props.disabled}
       onClick={handleClickWrapper}
     >

src/components/seal-form/password.tsx

@@ -5,7 +5,7 @@ import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
 const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, ...rest } = props;
+  const { label, placeholder, required, description, ...rest } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
   const { status } = Form.Item.useStatus();
@@ -44,6 +44,8 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
       status={status}
       label={label || (placeholder as string)}
       isFocus={isFocus}
+      required={required}
+      description={description}
       disabled={props.disabled}
       onClick={handleClickWrapper}
     >

src/components/seal-form/seal-input.tsx

@@ -17,6 +17,8 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     onBlur,
     onInput,
     style,
+    required,
+    description,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -73,6 +75,8 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
       status={status}
       label={label || (placeholder as string)}
       isFocus={isFocus}
+      required={required}
+      description={description}
       className="seal-textarea-wrapper"
       disabled={props.disabled}
       onClick={handleClickWrapper}
@@ -92,7 +96,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
 };
 
 const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, ...rest } = props;
+  const { label, placeholder, required, description, ...rest } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
   const { status } = Form.Item.useStatus();
@@ -135,6 +139,8 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
       status={status}
       label={label || (placeholder as string)}
       isFocus={isFocus}
+      required={required}
+      description={description}
       disabled={props.disabled}
       onClick={handleClickWrapper}
     >

src/components/seal-form/seal-select.tsx

@@ -6,7 +6,8 @@ import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
 const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, children, ...rest } = props;
+  const { label, placeholder, children, required, description, ...rest } =
+    props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
   const { status } = Form.Item.useStatus();
@@ -39,7 +40,9 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
   };
 
   const handleOnBlur = (e: any) => {
-    setIsFocus(false);
+    if (!props.value) {
+      setIsFocus(false);
+    }
     props.onBlur?.(e);
   };
 
@@ -48,6 +51,8 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
       status={status}
       label={label || (placeholder as string)}
       isFocus={isFocus}
+      required={required}
+      description={description}
       disabled={props.disabled}
       onClick={handleClickWrapper}
     >

src/components/seal-form/types.ts

@@ -1,3 +1,7 @@
+import React from 'react';
+
 export interface SealFormItemProps {
   label?: string;
-}
+  required?: boolean;
+  description?: React.ReactNode;
+}