Skip to content

S
submodule
Commit 1acd88f6 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

revise tag

parent d75f9bf8
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 44 deletions
components/apolloTable/component/Cell.tsx
View file @ 1acd88f6
......@@ -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 });
});
......
components/apolloTable/component/base/detail/tag/index.less
View file @ 1acd88f6
......@@ -7,7 +7,7 @@
align-items: center;
.outContainer {
display: flex;
width: 100%;
width: calc(100% - 30px);
overflow: hidden;
.innerContainer {
display: flex;
......
components/apolloTable/component/base/detail/tag/index.tsx
View file @ 1acd88f6
......@@ -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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment