feat: common components

2024-05-17 09:23:13 +08:00
parent dcaa5a7baa
commit fa522fb89e
13 changed files with 647 additions and 168 deletions
@@ -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%;
+  }
+}
@@ -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;