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