chore: resource list

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

@@ -1,7 +1,7 @@
 :local(.wrapper) {
   @wrapheight: 54px;
   @inputheight: 32px;
-  @borderRadius: 24px;
+  @borderRadius: 20px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -13,6 +13,12 @@
   border-radius: @borderRadius;
   padding-inline: 12px;
   padding-block: 20px 0;
+  .extra {
+    position: absolute;
+    right: 12px;
+    top: 8px;
+    z-index: 10;
+  }
 
   &.seal-input-wrapper-disabled {
     background-color: var(--ant-color-bg-container-disabled);

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

@@ -11,6 +11,7 @@ interface WrapperProps {
   description?: React.ReactNode;
   className?: string;
   disabled?: boolean;
+  extra?: React.ReactNode;
   onClick?: () => void;
 }
 
@@ -23,6 +24,7 @@ const Wrapper: React.FC<WrapperProps> = ({
   disabled,
   description,
   required,
+  extra,
   onClick
 }) => {
   return (
@@ -50,6 +52,7 @@ const Wrapper: React.FC<WrapperProps> = ({
           description={description}
         ></LabelInfo>
       </label>
+      {extra && <div className={wrapperStyle.extra}>{extra}</div>}
       {children}
     </div>
   );

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

@@ -7,10 +7,21 @@ import { SealFormItemProps } from './types';
 const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   props
 ) => {
-  const { label, placeholder, required, description, ...rest } = props;
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {

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

@@ -16,10 +16,21 @@ type OnSearch = (
 ) => void;
 
 const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, required, description, ...rest } = props;
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {

src/components/seal-form/password.tsx

@@ -5,10 +5,21 @@ import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
 const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, required, description, ...rest } = props;
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {

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

@@ -18,12 +18,19 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     onInput,
     style,
     required,
+    isInFormItems = true,
     description,
+    variant,
+    extra,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {
@@ -57,7 +64,11 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
 
   const handleOnBlur = useCallback(
     (e: any) => {
-      if (!inputRef.current?.input?.value) {
+      console.log(
+        'inputRef.current==========',
+        inputRef.current?.resizableTextArea?.textArea?.value
+      );
+      if (!inputRef.current?.resizableTextArea?.textArea?.value) {
         setIsFocus(false);
         onBlur?.(e);
       }
@@ -80,6 +91,8 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
       required={required}
       description={description}
       className="seal-textarea-wrapper"
+      variant={variant}
+      extra={extra}
       disabled={props.disabled}
       onClick={handleClickWrapper}
     >
@@ -98,10 +111,21 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
 };
 
 const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, required, description, ...rest } = props;
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (props.value) {

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

@@ -6,11 +6,22 @@ import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
 const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, children, required, description, ...rest } =
-    props;
+  const {
+    label,
+    placeholder,
+    children,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const { status } = Form.Item.useStatus();
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
 
   useEffect(() => {
     if (isNotEmptyValue(props.value)) {

src/components/seal-form/types.ts

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