From 1acd88f6657e53350ec8da401d63398c75dd98f9 Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Mon, 29 Jun 2020 21:44:23 +0800
Subject: [PATCH] revise tag

---
 components/apolloTable/component/Cell.tsx     |   1 -
 .../component/base/detail/tag/index.less      |   2 +-
 .../component/base/detail/tag/index.tsx       | 145 +++++++++++++-----
 3 files changed, 104 insertions(+), 44 deletions(-)

diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx
index 59710a6..c485a7e 100644
--- a/components/apolloTable/component/Cell.tsx
+++ b/components/apolloTable/component/Cell.tsx
@@ -56,7 +56,6 @@ const Cell = (props: CellProps) => {
     const changeCellData = (changedValue: any, option?: any) => {};
     const emitChangeCellData = (changedValue: any, optionValue: any) => {
         let temp: CellDataProps[] = [];
-        debugger
         cellData.map((item: CellDataProps) => {
             temp.push({ text: item.text, value: item.value });
         });
diff --git a/components/apolloTable/component/base/detail/tag/index.less b/components/apolloTable/component/base/detail/tag/index.less
index 870e143..4c6ec16 100644
--- a/components/apolloTable/component/base/detail/tag/index.less
+++ b/components/apolloTable/component/base/detail/tag/index.less
@@ -7,7 +7,7 @@
     align-items: center;
     .outContainer {
         display: flex;
-        width: 100%;
+        width: calc(100% - 30px);
         overflow: hidden;
         .innerContainer {
             display: flex;
diff --git a/components/apolloTable/component/base/detail/tag/index.tsx b/components/apolloTable/component/base/detail/tag/index.tsx
index 9d85f58..c33dc9b 100644
--- a/components/apolloTable/component/base/detail/tag/index.tsx
+++ b/components/apolloTable/component/base/detail/tag/index.tsx
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { Popover } from 'antd';
 import classNames from 'classnames';
 import s from './index.less';
+import IconFont from '@/submodule/components/IconFont';
 
 export const Tags = (props: any) => {
     const { value, origin, componentAttr } = props;
@@ -32,9 +33,29 @@ export const Tags = (props: any) => {
     }
     return (
         <div className={s.container}>
+            <div className={s.outContainer} ref={outer} style={outStyle}>
+                <div className={s.innerContainer} ref={inner} style={innerStyle}>
+                    {value.map((item, index) => {
+                        let color = '';
+                        if (options && Array.isArray(options) && options.length > 0) {
+                            const obj = options.find((ls) => ls.id === item.value) || {};
+                            color = obj.color || 'e9eef9';
+                        }
+                        return (
+                            <span
+                                key={index}
+                                className={mode === 'multiple' ? classNames(s.item, s.multi) : s.item}
+                                style={{ ...itemStyle, background: `#${color}` }}
+                            >
+                                <div className={s.itemBgTxt}>{item.text}</div>
+                            </span>
+                        );
+                    })}
+                </div>
+            </div>
             {dotVisible && mode === 'multiple' && (
                 <Popover
-                    // trigger="click"
+                    trigger="click"
                     onClick={(e) => {
                         e.stopPropagation();
                     }}
@@ -62,51 +83,91 @@ export const Tags = (props: any) => {
                         </div>
                     }
                 >
-                    <div className={s.outContainer} ref={outer} style={outStyle}>
-                        <div className={s.innerContainer} ref={inner} style={innerStyle}>
-                            {value.map((item, index) => {
-                                let color = '';
-                                if (options && Array.isArray(options) && options.length > 0) {
-                                    const obj = options.find((ls) => ls.id === item.value) || {};
-                                    color = obj.color || 'e9eef9';
-                                }
-                                return (
-                                    <span
-                                        key={index}
-                                        className={classNames(s.item, mode === 'multiple' && s.multi)}
-                                        style={{ ...itemStyle, background: `#${color}` }}
-                                    >
-                                        <div className={s.itemBgTxt}>{item.text}</div>
-                                    </span>
-                                );
-                            })}
-                        </div>
+                    <div className={s.moreBtn}>
+                        <IconFont type="iconzhankai1" />
                     </div>
                 </Popover>
             )}
-            {!dotVisible && (
-                <div className={s.outContainer} ref={outer} style={outStyle}>
-                    <div className={s.innerContainer} ref={inner} style={innerStyle}>
-                        {value.map((item, index) => {
-                            let color = '';
-                            if (options && Array.isArray(options) && options.length > 0) {
-                                const obj = options.find((ls) => ls.id === item.value) || {};
-                                color = obj.color || 'e9eef9';
-                            }
-                            return (
-                                <span
-                                    key={index}
-                                    className={classNames(s.item, mode === 'multiple' && s.multi)}
-                                    style={{ ...itemStyle, background: `#${color}` }}
-                                >
-                                    <div className={s.itemBgTxt}>{item.text}</div>
-                                </span>
-                            );
-                        })}
-                    </div>
-                </div>
-            )}
         </div>
+
+        // <div className={s.container}>
+        //     {dotVisible && mode === 'multiple' && (
+        //         <Popover
+        //             // trigger="click"
+        //             onClick={(e) => {
+        //                 debugger
+        //                 e.stopPropagation();
+        //             }}
+        //             placement="left"
+        //             overlayClassName={s.popContainer}
+        //             content={
+        //                 <div
+        //                     className={s.popContent}
+        //                     onClick={(e) => {
+        //                         debugger
+        //                         e.stopPropagation();
+        //                     }}
+        //                 >
+        //                     {value.map((item, index) => {
+        //                         let color = '';
+        //                         if (options && Array.isArray(options) && options.length > 0) {
+        //                             const obj = options.find((ls) => ls.id === item.value) || {};
+        //                             color = obj.color || 'e9eef9';
+        //                         }
+        //                         return (
+        //                             <span className={s.popItem} key={index} style={{ background: `#${color}` }}>
+        //                                 <div className={s.popItemBgTxt}>{item.text}</div>
+        //                             </span>
+        //                         );
+        //                     })}
+        //                 </div>
+        //             }
+        //         >
+        //             <div className={s.outContainer} ref={outer} style={outStyle}>
+        //                 <div className={s.innerContainer} ref={inner} style={innerStyle}>
+        //                     {value.map((item, index) => {
+        //                         let color = '';
+        //                         if (options && Array.isArray(options) && options.length > 0) {
+        //                             const obj = options.find((ls) => ls.id === item.value) || {};
+        //                             color = obj.color || 'e9eef9';
+        //                         }
+        //                         return (
+        //                             <span
+        //                                 key={index}
+        //                                 className={classNames(s.item, mode === 'multiple' && s.multi)}
+        //                                 style={{ ...itemStyle, background: `#${color}` }}
+        //                             >
+        //                                 <div className={s.itemBgTxt}>{item.text}</div>
+        //                             </span>
+        //                         );
+        //                     })}
+        //                 </div>
+        //             </div>
+        //         </Popover>
+        //     )}
+        //     {!dotVisible && (
+        //         <div className={s.outContainer} ref={outer} style={outStyle}>
+        //             <div className={s.innerContainer} ref={inner} style={innerStyle}>
+        //                 {value.map((item, index) => {
+        //                     let color = '';
+        //                     if (options && Array.isArray(options) && options.length > 0) {
+        //                         const obj = options.find((ls) => ls.id === item.value) || {};
+        //                         color = obj.color || 'e9eef9';
+        //                     }
+        //                     return (
+        //                         <span
+        //                             key={index}
+        //                             className={classNames(s.item, mode === 'multiple' && s.multi)}
+        //                             style={{ ...itemStyle, background: `#${color}` }}
+        //                         >
+        //                             <div className={s.itemBgTxt}>{item.text}</div>
+        //                         </span>
+        //                     );
+        //                 })}
+        //             </div>
+        //         </div>
+        //     )}
+        // </div>
     );
 };
 export default Tags;
-- 
2.21.0