feat: common components

src/components/popover/index.less

@@ -0,0 +1,27 @@
+:local(.seal_custom_popover) {
+  position: relative;
+  padding-top: var(--ant-popover-inner-padding);
+  border-radius: var(--ant-border-radius-lg);
+  background-color: var(--color-white-1);
+  box-shadow: var(--ant-box-shadow-secondary);
+  overflow: hidden;
+  padding-top: 80px;
+  :global(.ant-popover-inner) {
+    box-shadow: none;
+    padding-top: 0;
+  }
+  :global(.ant-popover-content) {
+    position: static;
+  }
+  :global(.ant-popover-title) {
+    position: absolute;
+    top: 0;
+    padding-block: var(--ant-popover-inner-padding)
+      var(--ant-popover-title-margin-bottom);
+    margin-bottom: 0;
+    background: #fff;
+    padding-left: var(--ant-popover-inner-padding);
+    left: 0;
+    width: 100%;
+  }
+}

src/components/popover/index.tsx

@@ -0,0 +1,23 @@
+import { Popover } from 'antd';
+import type { PopoverProps } from 'antd/lib/popover';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const SealPopover: React.FC<PopoverProps> = (props) => {
+  const { className, children, style, ...restProps } = props;
+
+  return (
+    <div className="popover-wrapper">
+      <Popover
+        {...restProps}
+        style={{ ...style }}
+        data-maxHeight="300px"
+        overlayClassName={classNames(className, styles.seal_custom_popover)}
+      >
+        {children}
+      </Popover>
+    </div>
+  );
+};
+
+export default SealPopover;

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

@@ -0,0 +1,49 @@
+:local(.wrapper) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 54px;
+  border-width: var(--ant-line-width);
+  border-style: var(--ant-line-type);
+  border-color: var(--ant-color-border);
+  border-radius: 28px;
+  padding-inline: 12px;
+  padding-block: 20px 0;
+  &:hover {
+    border-color: var(--ant-input-hover-border-color);
+    transition: all 0.2s ease;
+  }
+  &:focus-within {
+    border-color: var(--ant-input-active-border-color);
+    box-shadow: var(--ant-input-active-shadow);
+    outline: 0;
+    background-color: var(--ant-input-active-bg);
+  }
+  .label {
+    position: absolute;
+    left: 24px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: var(--font-size-base);
+    line-height: 1;
+    pointer-events: all;
+    z-index: 5;
+    &.isfoucs-has-value {
+      top: 8px;
+      transition: all 0.2s var(--seal-transition-func);
+    }
+    &.blur-no-value {
+      top: 21px;
+      transition: all 0.2s var(--seal-transition-func);
+    }
+  }
+  :global(.ant-input) {
+    display: flex;
+    align-items: center;
+    border: none;
+    box-shadow: none;
+    padding-block: 5px;
+    padding-inline: 12px;
+    height: 32px;
+  }
+}

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

@@ -1,14 +1,34 @@
+import classNames from 'classnames';
+import wrapperStyle from './wrapper.less';
 interface WrapperProps {
   children: React.ReactNode;
   label: string;
+  isFocus: boolean;
+  onClick?: () => void;
 }
 
-const Wrapper: React.FC<WrapperProps>= ({ children }) => {
+const Wrapper: React.FC<WrapperProps> = ({
+  children,
+  label,
+  isFocus,
+  onClick
+}) => {
   return (
-    <div>
+    <div className={wrapperStyle.wrapper} onClick={onClick}>
+      <label
+        onClick={onClick}
+        className={classNames(
+          wrapperStyle['label'],
+          isFocus
+            ? wrapperStyle['isfoucs-has-value']
+            : wrapperStyle['blur-no-value']
+        )}
+      >
+        {label}
+      </label>
       {children}
     </div>
   );
-}
+};
 
-export default Wrapper;
+export default Wrapper;

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

@@ -1,24 +1,72 @@
-import { Input } from 'antd';
 import type { InputProps } from 'antd';
+import { Input } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 import Wrapper from './components/wrapper';
-import  { SealFormItemProps } from './types';
+import { SealFormItemProps } from './types';
 
 const TextArea: React.FC<InputProps & SealFormItemProps> = (props) => {
+  console.log('textarea=========', 121);
   return (
     <Wrapper label="input">
-      <Input.TextArea placeholder='send your message' autoSize={{minRows: 1,maxRows: 6}} size="large" variant='borderless'></Input.TextArea>
+      <Input.TextArea
+        placeholder="send your message"
+        autoSize={{ minRows: 1, maxRows: 6 }}
+        size="large"
+        variant="borderless"
+      ></Input.TextArea>
     </Wrapper>
   );
-}
+};
 
 const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
-  const {label, ...rest} = props;
+  const { label, placeholder, ...rest } = props;
+  const [isFocus, setIsFocus] = useState(false);
+  const inputRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (props.value) {
+      setIsFocus(true);
+    }
+  }, [props.value]);
+
+  const handleClickWrapper = () => {
+    if (!props.disabled && !isFocus) {
+      inputRef.current?.focus?.();
+      setIsFocus(true);
+    }
+  };
+
+  const handleChange = (e: any) => {
+    props.onChange?.(e);
+  };
+
+  const handleOnFocus = (e: any) => {
+    setIsFocus(true);
+    props.onFocus?.(e);
+  };
+
+  const handleOnBlur = (e: any) => {
+    if (!inputRef.current?.input?.value) {
+      setIsFocus(false);
+      props.onBlur?.(e);
+    }
+  };
+
   return (
-    <Wrapper label="input">
-      <Input {...rest} placeholder='send your message'></Input>
+    <Wrapper
+      label={label || (placeholder as string)}
+      isFocus={isFocus}
+      onClick={handleClickWrapper}
+    >
+      <Input
+        {...rest}
+        ref={inputRef}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        onChange={(e) => handleChange(e)}
+      ></Input>
     </Wrapper>
   );
-}
+};
 
-
-export default {TextArea,Input: SealInput};
+export default { TextArea, Input: SealInput };