style: form item style

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

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

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

@@ -1,8 +1,9 @@
 import { Form, Input } from 'antd';
 import type { SearchProps } from 'antd/es/input/Search';
-import { useEffect, useRef, useState } from 'react';
-import Wrapper from './components/wrapper';
+import React, { useEffect, useRef, useState } from 'react';
 import { SealFormItemProps } from './types';
+import Wrapper from './wrapper';
+import InputWrapper from './wrapper/input';
 
 type OnSearch = (
   value: string,
@@ -66,25 +67,27 @@ const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
   };
 
   return (
-    <Wrapper
-      status={status}
-      label={label}
-      isFocus={isFocus}
-      required={required}
-      description={description}
-      disabled={props.disabled}
-      onClick={handleClickWrapper}
-    >
-      <Input.Search
-        {...rest}
-        ref={inputRef}
-        autoComplete="off"
-        onFocus={handleOnFocus}
-        onBlur={handleOnBlur}
-        onSearch={handleSearch}
-        onChange={handleChange}
-      ></Input.Search>
-    </Wrapper>
+    <InputWrapper>
+      <Wrapper
+        status={status}
+        label={label}
+        isFocus={isFocus}
+        required={required}
+        description={description}
+        disabled={props.disabled}
+        onClick={handleClickWrapper}
+      >
+        <Input.Search
+          {...rest}
+          ref={inputRef}
+          autoComplete="off"
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          onSearch={handleSearch}
+          onChange={handleChange}
+        ></Input.Search>
+      </Wrapper>
+    </InputWrapper>
   );
 };
 

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

@@ -54,9 +54,7 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
         className="slider-label"
         style={{ width: labelWidth || INPUT_WIDTH.mini }}
       >
-        <span className="text">
-          <LabelInfo label={label} description={description}></LabelInfo>
-        </span>
+        <LabelInfo label={label} description={description}></LabelInfo>
 
         {inputnumber ? (
           <InputNumber

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

@@ -109,7 +109,7 @@ const InputWrapper = styled.div`
   .ant-input-search-button {
     position: absolute;
     top: -20px;
-    right: 0;
+    right: 1px;
     border-radius: 0 ${BORDERRADIUS}px ${BORDERRADIUS}px 0 !important;
     overflow: hidden;
     border: none;

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

@@ -2,6 +2,10 @@ import styled from 'styled-components';
 import { INPUTHEIGHT, INPUT_INNER_PADDING } from '../config';
 
 const SliderWrapper = styled.div`
+  .__wrapper__ {
+    height: 100%;
+    justify-content: center;
+  }
   padding-block: 0;
   padding-inline: 2px;
   input.ant-input-number-input {
@@ -24,7 +28,7 @@ const SliderWrapper = styled.div`
     .label-val {
       position: absolute !important;
       top: -14px;
-      right: -14px;
+      right: -10px;
       width: 80px;
       border-radius: var(--border-radius-base);
       text-align: center;