test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 10:59:42 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Remark 支持配置 label

Browse Source
This commit is contained in:
2betop 2020-10-22 12:16:09 +08:00
parent 098e48760a
commit dc829f8ed7
3 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scss/components/_remark.scss
View File

@ -1,6 +1,10 @@
.#{$ns}Remark {
display: inline-block;
margin-left: $Remark-marginLeft;
> span {
color: $Remark-iconColor;
font-size: $fontSizeSm;
}
cursor: pointer;
text-align: center;
@ -19,6 +23,10 @@
font-size: $fontSizeBase;
}
> span + .#{$ns}Remark-icon {
margin-left: $gap-xs;
}
&:hover > &-icon {
color: $Remark-onHover-iconColor;
background-color: $Remark-onHover-bg;

4
src/components/TooltipWrapper.tsx
View File

@ -224,7 +224,9 @@ export class TooltipWrapper extends React.Component<
(tooltip as TooltipObject).dom!
) : (
<Html
html={typeof tooltip === 'string' ? tooltip : tooltip.content}
html={
typeof tooltip === 'string' ? tooltip : tooltip.content || ''
}
/>
)}
</Tooltip>

48
src/renderers/Remark.tsx
View File

@ -17,6 +17,8 @@ export interface RemarkSchema extends BaseSchema {
*/
type: 'remark';
label?: string;
icon?: SchemaIcon;
/**
@ -51,7 +53,7 @@ export function filterContents(
tooltip:
| string
| undefined
| {title?: string; content?: string; body?: string},
| {title?: string; render?: any; content?: string; body?: string},
data: any
) {
if (typeof tooltip === 'string') {
@ -59,6 +61,7 @@ export function filterContents(
} else if (tooltip) {
return tooltip.title
? {
render: tooltip.render,
title: filter(tooltip.title, data),
content:
tooltip.content || tooltip.body
@ -88,6 +91,7 @@ class Remark extends React.Component<RemarkProps> {
const {
className,
icon,
label,
tooltip,
placement,
rootClose,
@ -100,33 +104,35 @@ class Remark extends React.Component<RemarkProps> {
env
} = this.props;
const finalIcon = (tooltip && tooltip.icon) || icon;
const finalIcon = tooltip?.icon ?? icon;
const finalLabel = tooltip?.label ?? label;
return (
<div
className={cx(
`Remark`,
(tooltip && tooltip.className) || className || `Remark--warning`
)}
<TooltipWrapper
classPrefix={ns}
classnames={cx}
tooltip={filterContents(tooltip || content, data)}
tooltipClassName={tooltip && tooltip.tooltipClassName}
placement={(tooltip && tooltip.placement) || placement}
rootClose={(tooltip && tooltip.rootClose) || rootClose}
trigger={(tooltip && tooltip.trigger) || trigger}
container={container || env.getModalContainer}
delay={tooltip && tooltip.delay}
>
<TooltipWrapper
classPrefix={ns}
classnames={cx}
tooltip={filterContents(tooltip || content, data)}
tooltipClassName={tooltip && tooltip.tooltipClassName}
placement={(tooltip && tooltip.placement) || placement}
rootClose={(tooltip && tooltip.rootClose) || rootClose}
trigger={(tooltip && tooltip.trigger) || trigger}
container={container || env.getModalContainer}
delay={tooltip && tooltip.delay}
<div
className={cx(
`Remark`,
(tooltip && tooltip.className) || className || `Remark--warning`
)}
>
{finalLabel ? <span>{finalLabel}</span> : null}
{finalIcon ? (
<i className={cx('Remark-icon', finalIcon)} />
) : (
<Icon icon="question" className="icon" />
) : finalIcon === false && finalLabel ? null : (
<Icon icon="question" className={cx('Remark-icon icon')} />
)}
</TooltipWrapper>
</div>
</div>
</TooltipWrapper>
);
}
}