Skip to content

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

修改tags样式

parent 6db133d0
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 98 deletions
components/apolloTable/component/base/detail/tag/index.less
View file @ db1fcf46
......@@ -5,49 +5,53 @@
width: 100%;
height: 100%;
align-items: center;
.item {
background: #e9eef9;
border-radius: 12px;
.itemBgTxt {
height: 24px;
padding: 5px 10px;
line-height: 1;
font-size: 14px;
color: @textGeneralColor;
}
}
.outContainer {
display: flex;
width: calc(100% - 30px);
width: 100%;
overflow: hidden;
.innerContainer {
display: flex;
.item {
margin-right: 10px;
background: #e9eef9;
border-radius: 12px;
&.multi {
border-radius: @borderRadius;
}
.itemBgTxt {
height: 24px;
padding: 5px 10px;
line-height: 1;
font-size: 14px;
color: @textGeneralColor;
}
&:last-child {
margin-right: 0;
.content {
display: flex;
.item {
margin-right: 10px;
background: #e9eef9;
border-radius: 12px;
&.multi {
border-radius: @borderRadius;
}
.itemBgTxt {
height: 24px;
padding: 5px 10px;
line-height: 1;
font-size: 14px;
color: @textGeneralColor;
}
&:last-child {
margin-right: 0;
}
}
}
}
}
.moreBtn {
width: 30px;
font-size: 12px;
cursor: pointer;
text-align: center;
.extend {
width: 14px;
border-radius: 50%;
}
}
}
.popContainer{
.popContainer {
width: 200px;
:global(.ant-popover-inner-content){
:global(.ant-popover-inner-content) {
padding: 0;
}
.popContent{
.popContent {
padding: @paddingGen;
}
}
......
components/apolloTable/component/base/detail/tag/index.tsx
View file @ db1fcf46
......@@ -7,6 +7,36 @@ export const Tags = (props: any) => {
const { value, origin, componentAttr } = props;
if (!Array.isArray(value) || value.length === 0) return null;
const { options, mode } = componentAttr || {};
const outStyle: any = {};
const innerStyle: any = {};
const itemStyle: any = {};
if (origin === 'detailForm') {
outStyle.width = 'auto';
innerStyle.flexWrap = 'wrap';
itemStyle.marginBottom = '5px';
}
const getColor = (item: any) => {
let color = '';
if (options && Array.isArray(options) && options.length > 0) {
const obj = options.find((ls) => {
return String(ls.id) === String(item.value);
}) || {};
color = obj.color || 'e9eef9';
}
return color;
};
if (mode !== 'multiple') {
// 单选
return (
<div className={s.container}>
<span className={s.item} style={{ ...itemStyle, background: `#${getColor(value[0])}` }}>
<div className={s.itemBgTxt}>{value[0].text}</div>
</span>
</div>
);
}
const [dotVisible, setDotVisible] = useState(false);
const outer = useRef(null);
const inner = useRef(null);
......@@ -24,87 +54,61 @@ export const Tags = (props: any) => {
setDotVisible(visible);
}, [value]);
const outStyle: any = {};
const innerStyle: any = {};
const itemStyle: any = {};
if (origin === 'detailForm') {
outStyle.width = 'auto';
innerStyle.flexWrap = 'wrap';
itemStyle.marginBottom = '5px';
}
return (
<div className={s.container}>
{dotVisible && mode === 'multiple' && (
<Popover
placement="left"
overlayClassName={s.popContainer}
content={
<div className={s.popContent}>
{value.map((item, index) => {
let color = '';
if (options && Array.isArray(options) && options.length > 0) {
const obj = options.find((ls) => {
return String(ls.id) === String(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}>
<div className={s.outContainer} ref={outer} style={outStyle}>
<div className={s.innerContainer} ref={inner} style={innerStyle}>
{dotVisible ? (
<Popover
placement="left"
overlayClassName={s.popContainer}
content={
<div className={s.popContent}>
{value.map((item, index) => {
return (
<span
className={s.popItem}
key={index}
style={{ background: `#${getColor(item)}` }}
>
<div className={s.popItemBgTxt}>{item.text}</div>
</span>
);
})}
</div>
}
>
<div className={s.content} style={innerStyle}>
{value.map((item, index) => {
return (
<span
key={index}
className={classNames(s.item, s.multi)}
style={{ ...itemStyle, background: `#${getColor(item)}` }}
>
<div className={s.itemBgTxt}>{item.text}</div>
</span>
);
})}
</div>
</Popover>
) : (
<div className={s.content} style={innerStyle}>
{value.map((item, index) => {
let color = '';
if (options && Array.isArray(options) && options.length > 0) {
const obj = options.find((ls) => {
return String(ls.id) === String(item.value);
}) || {};
color = obj.color || 'e9eef9';
}
return (
<span
key={index}
className={classNames(s.item, mode === 'multiple' && s.multi)}
style={{ ...itemStyle, background: `#${color}` }}
className={classNames(s.item, s.multi)}
style={{ ...itemStyle, background: `#${getColor(item)}` }}
>
<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) => {
return String(ls.id) === String(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>
);
};
......
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