feat: cloud options

src/components/label-selector/inner.tsx

@@ -1,8 +1,6 @@
-import { PlusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button } from 'antd';
 import _ from 'lodash';
-import React, { useRef } from 'react';
+import React from 'react';
 import LabelItem from './label-item';
 import Wrapper from './wrapper';
 interface LabelSelectorProps {
@@ -31,8 +29,6 @@ const Inner: React.FC<LabelSelectorProps> = ({
   description
 }) => {
   const intl = useIntl();
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const boxRef = useRef<HTMLDivElement>(null);
 
   const updateLabels = (list: { key: string; value: string }[]) => {
     const newLabels = _.reduce(
@@ -75,7 +71,12 @@ const Inner: React.FC<LabelSelectorProps> = ({
   };
 
   return (
-    <Wrapper label={label} description={description}>
+    <Wrapper
+      label={label}
+      description={description}
+      onAdd={handleAddLabel}
+      btnText={btnText}
+    >
       <>
         {labelList?.map((item: any, index: number) => {
           return (
@@ -91,26 +92,9 @@ const Inner: React.FC<LabelSelectorProps> = ({
             />
           );
         })}
-        <div className="flex justify-center">
-          <Button
-            ref={buttonRef}
-            type="text"
-            block
-            style={{
-              marginTop: 16,
-              backgroundColor: 'var(--ant-color-fill-secondary)'
-            }}
-            onClick={handleAddLabel}
-          >
-            <PlusOutlined className="font-size-14" />{' '}
-            {intl.formatMessage({
-              id: btnText || 'common.button.addSelector'
-            })}
-          </Button>
-        </div>
       </>
     </Wrapper>
   );
 };
 
-export default React.memo(Inner);
+export default Inner;

src/components/label-selector/styles/wrapper.less

@@ -1,20 +0,0 @@
-.wrapper {
-  position: relative;
-  padding: 14px;
-  padding-top: 34px;
-  border: 1px solid var(--ant-color-border);
-  border-radius: var(--border-radius-base);
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-
-  :global {
-    .label {
-      position: absolute;
-      left: 16px;
-      line-height: 1;
-      top: 12px;
-      color: var(--ant-color-text-tertiary);
-    }
-  }
-}

src/components/label-selector/wrapper.tsx

@@ -1,15 +1,54 @@
 import LabelInfo from '@/components/seal-form/components/label-info';
+import { PlusOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
 import React from 'react';
-import styles from './styles/wrapper.less';
+import styled from 'styled-components';
 
-const Wrapper: React.FC<{
+interface WrapperProps {
   label?: React.ReactNode;
   description?: React.ReactNode;
   labelExtra?: React.ReactNode;
   children: React.ReactNode;
-}> = ({ children, label, description, labelExtra, ...rest }) => {
+  btnText?: string;
+  onAdd?: () => void;
+  button?: React.ReactNode;
+}
+
+const Container = styled.div`
+  position: relative;
+  padding: 14px;
+  padding-top: 34px;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--border-radius-base);
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  .label {
+    position: absolute;
+    left: 16px;
+    line-height: 1;
+    top: 12px;
+    color: var(--ant-color-text-tertiary);
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  margin-top: 16px;
+`;
+
+const Wrapper: React.FC<WrapperProps> = ({
+  children,
+  label,
+  description,
+  labelExtra,
+  onAdd,
+  btnText,
+  button
+}) => {
+  const intl = useIntl();
   return (
-    <div className={styles['wrapper']}>
+    <Container>
       {label && (
         <span className="label">
           <LabelInfo
@@ -19,10 +58,19 @@ const Wrapper: React.FC<{
           ></LabelInfo>
         </span>
       )}
-      {React.isValidElement(children)
-        ? React.cloneElement(children, { ...rest })
-        : children}
-    </div>
+      {children}
+      <ButtonWrapper>
+        {button || (
+          <Button variant="filled" color="default" block onClick={onAdd}>
+            <PlusOutlined className="font-size-14" />
+            {btnText ||
+              intl.formatMessage({
+                id: 'common.button.addSelector'
+              })}
+          </Button>
+        )}
+      </ButtonWrapper>
+    </Container>
   );
 };