mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
feat: 优化 Spinner 控制 loading 状态的逻辑 (#5458)
This commit is contained in:
meerkat
GitHub
parent
b0ce7e0115
commit
e9ca377604
@ -174,3 +174,9 @@
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Spinner-mark {
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -105,7 +105,8 @@ export class Spinner extends React.Component<SpinnerProps> {
|
||||
};
|
||||
|
||||
state = {
|
||||
spinning: false
|
||||
spinning: false,
|
||||
showMark: true
|
||||
};
|
||||
|
||||
parent: HTMLElement | null = null;
|
||||
@ -113,15 +114,13 @@ export class Spinner extends React.Component<SpinnerProps> {
|
||||
spinnerRef = (dom: HTMLElement) => {
|
||||
if (dom) {
|
||||
this.parent = dom.parentNode as HTMLElement;
|
||||
this.setState({
|
||||
showMark: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
componentDidUpdate(prev: SpinnerProps) {
|
||||
if (!prev.show && this.props.show) {
|
||||
// 先根据 props.show 触发一次 loading，否则元素没有渲染，无法找到 parent
|
||||
this.setState({spinning: true});
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.parent) {
|
||||
if (this.props.show) {
|
||||
store.push(this.parent);
|
||||
@ -131,18 +130,6 @@ export class Spinner extends React.Component<SpinnerProps> {
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
// 对于 通过 条件语句控制 Spinner 是否展示的情况，需要在这里处理 ： show && <Spinner show overlay />
|
||||
if (this.props.show) {
|
||||
// 先根据 props.show 触发一次 loading，否则元素没有渲染，无法找到 parent
|
||||
this.setState({spinning: true});
|
||||
|
||||
if (this.parent) {
|
||||
store.push(this.parent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
// 卸载 reaction
|
||||
this.loadingChecker();
|
||||
@ -150,6 +137,9 @@ export class Spinner extends React.Component<SpinnerProps> {
|
||||
store.remove(this.parent!);
|
||||
}
|
||||
|
||||
/**
|
||||
* 监控着 spinnerContainers 的变化
|
||||
*/
|
||||
loadingChecker = reaction(
|
||||
() => store.spinnerContainers.size,
|
||||
() => {
|
||||
@ -175,67 +165,71 @@ export class Spinner extends React.Component<SpinnerProps> {
|
||||
const timeout = {enter: delay, exit: 0};
|
||||
|
||||
return (
|
||||
<Transition
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
in={this.state.spinning}
|
||||
timeout={timeout}
|
||||
>
|
||||
{(status: string) => {
|
||||
return (
|
||||
<>
|
||||
{/* 遮罩层 */}
|
||||
{overlay ? (
|
||||
<div className={cx(`Spinner-overlay`, fadeStyles[status])} />
|
||||
) : null}
|
||||
<>
|
||||
{this.state.showMark && (
|
||||
<span className={cx('Spinner-mark')} ref={this.spinnerRef as any} />
|
||||
)}
|
||||
<Transition
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
in={this.state.spinning}
|
||||
timeout={timeout}
|
||||
>
|
||||
{(status: string) => {
|
||||
return (
|
||||
<>
|
||||
{/* 遮罩层 */}
|
||||
{overlay ? (
|
||||
<div className={cx(`Spinner-overlay`, fadeStyles[status])} />
|
||||
) : null}
|
||||
|
||||
{/* spinner图标和文案 */}
|
||||
<div
|
||||
ref={this.spinnerRef as any}
|
||||
data-testid="spinner"
|
||||
className={cx(
|
||||
`Spinner`,
|
||||
tip && {
|
||||
[`Spinner-tip--${tipPlacement}`]: [
|
||||
'top',
|
||||
'right',
|
||||
'bottom',
|
||||
'left'
|
||||
].includes(tipPlacement)
|
||||
},
|
||||
{[`Spinner--overlay`]: overlay},
|
||||
fadeStyles[status],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* spinner图标和文案 */}
|
||||
<div
|
||||
data-testid="spinner"
|
||||
className={cx(
|
||||
`Spinner-icon`,
|
||||
{
|
||||
[`Spinner-icon--${size}`]: ['lg', 'sm'].includes(size),
|
||||
[`Spinner-icon--default`]: !icon,
|
||||
[`Spinner-icon--simple`]: !isCustomIcon && icon,
|
||||
[`Spinner-icon--custom`]: isCustomIcon
|
||||
`Spinner`,
|
||||
tip && {
|
||||
[`Spinner-tip--${tipPlacement}`]: [
|
||||
'top',
|
||||
'right',
|
||||
'bottom',
|
||||
'left'
|
||||
].includes(tipPlacement)
|
||||
},
|
||||
spinnerClassName
|
||||
{[`Spinner--overlay`]: overlay},
|
||||
fadeStyles[status],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{icon ? (
|
||||
isCustomIcon ? (
|
||||
icon
|
||||
) : hasIcon(icon as string) ? (
|
||||
<Icon icon={icon} className="icon" />
|
||||
) : (
|
||||
generateIcon(cx, icon as string, 'icon')
|
||||
)
|
||||
) : null}
|
||||
<div
|
||||
className={cx(
|
||||
`Spinner-icon`,
|
||||
{
|
||||
[`Spinner-icon--${size}`]: ['lg', 'sm'].includes(size),
|
||||
[`Spinner-icon--default`]: !icon,
|
||||
[`Spinner-icon--simple`]: !isCustomIcon && icon,
|
||||
[`Spinner-icon--custom`]: isCustomIcon
|
||||
},
|
||||
spinnerClassName
|
||||
)}
|
||||
>
|
||||
{icon ? (
|
||||
isCustomIcon ? (
|
||||
icon
|
||||
) : hasIcon(icon as string) ? (
|
||||
<Icon icon={icon} className="icon" />
|
||||
) : (
|
||||
generateIcon(cx, icon as string, 'icon')
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
{tip ? <span className={cx(`Spinner-tip`)}>{tip}</span> : ''}
|
||||
</div>
|
||||
{tip ? <span className={cx(`Spinner-tip`)}>{tip}</span> : ''}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -324,319 +324,351 @@ exports[`Renderer:breadcrumb separator 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Renderer:breadcrumb tooltip labelMaxLength 1`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
className="cxd-Breadcrumb"
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
href="https://baidu.gitee.com/"
|
||||
>
|
||||
<i
|
||||
className="cxd-Icon fa fa-home cxd-Breadcrumb-icon"
|
||||
/>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
上级页面上级页面上级页面上级页面...
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item cxd-Breadcrumb-item-last"
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
<div
|
||||
className="cxd-Breadcrumb"
|
||||
>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
href="https://baidu.gitee.com/"
|
||||
>
|
||||
<i
|
||||
className="cxd-Icon fa fa-home cxd-Breadcrumb-icon"
|
||||
/>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
上级页面上级页面上级页面上级页面...
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item cxd-Breadcrumb-item-last"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
>
|
||||
当前页面
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
当前页面
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:breadcrumb tooltip labelMaxLength 2`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
className="cxd-Breadcrumb"
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
href="https://baidu.gitee.com/"
|
||||
>
|
||||
<i
|
||||
className="cxd-Icon fa fa-home cxd-Breadcrumb-icon"
|
||||
/>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
上级页面上级页面上级页面上级页面...
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item cxd-Breadcrumb-item-last"
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
<div
|
||||
className="cxd-Breadcrumb"
|
||||
>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
href="https://baidu.gitee.com/"
|
||||
>
|
||||
<i
|
||||
className="cxd-Icon fa fa-home cxd-Breadcrumb-icon"
|
||||
/>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
上级页面上级页面上级页面上级页面...
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item cxd-Breadcrumb-item-last"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
>
|
||||
当前页面
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
当前页面
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:breadcrumb tooltip labelMaxLength 3`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
className="cxd-Breadcrumb"
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
href="https://baidu.gitee.com/"
|
||||
>
|
||||
<i
|
||||
className="cxd-Icon fa fa-home cxd-Breadcrumb-icon"
|
||||
/>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
上级页面上级页面上级页面上级页面...
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item cxd-Breadcrumb-item-last"
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
<div
|
||||
className="cxd-Breadcrumb"
|
||||
>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
href="https://baidu.gitee.com/"
|
||||
>
|
||||
<i
|
||||
className="cxd-Icon fa fa-home cxd-Breadcrumb-icon"
|
||||
/>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
上级页面上级页面上级页面上级页面...
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item cxd-Breadcrumb-item-last"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
>
|
||||
当前页面
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
当前页面
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:breadcrumb tooltip labelMaxLength 4`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
className="cxd-Breadcrumb"
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
href="https://baidu.gitee.com/"
|
||||
>
|
||||
<i
|
||||
className="cxd-Icon fa fa-home cxd-Breadcrumb-icon"
|
||||
/>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
上级页面上级页面上级页面上级页面...
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item cxd-Breadcrumb-item-last"
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
<div
|
||||
className="cxd-Breadcrumb"
|
||||
>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
href="https://baidu.gitee.com/"
|
||||
>
|
||||
<i
|
||||
className="cxd-Icon fa fa-home cxd-Breadcrumb-icon"
|
||||
/>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item"
|
||||
>
|
||||
<a
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
上级页面上级页面上级页面上级页面...
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-separator text-black"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-Breadcrumb-item cxd-Breadcrumb-item-last"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
className="cxd-Breadcrumb-item-default"
|
||||
>
|
||||
当前页面
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
当前页面
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:breadcrumb var 1`] = `
|
||||
|
||||
@ -1,55 +1,72 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:Page 1`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-headerRow"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-header"
|
||||
className="cxd-Page-headerRow"
|
||||
>
|
||||
<h2
|
||||
className="cxd-Page-title"
|
||||
<div
|
||||
className="cxd-Page-header"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
<h2
|
||||
className="cxd-Page-title"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "This is Title",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
className="cxd-Remark cxd-Remark--warning"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-Remark-icon icon"
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<icon-mock
|
||||
className=" icon-question-mark"
|
||||
icon="question-mark"
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "This is Title",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</h2>
|
||||
<small
|
||||
className="cxd-Page-subTitle"
|
||||
<div
|
||||
className="cxd-Remark cxd-Remark--warning"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="cxd-Remark-icon icon"
|
||||
>
|
||||
<icon-mock
|
||||
className=" icon-question-mark"
|
||||
icon="question-mark"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</h2>
|
||||
<small
|
||||
className="cxd-Page-subTitle"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "This is SubTitle",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</small>
|
||||
</div>
|
||||
<div
|
||||
className="cxd-Page-toolbar"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
@ -57,47 +74,38 @@ exports[`Renderer:Page 1`] = `
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "This is SubTitle",
|
||||
"__html": "This is toolbar",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="cxd-Page-toolbar"
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "This is toolbar",
|
||||
"__html": "This is body",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "This is body",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:Page classNames 1`] = `
|
||||
@ -979,87 +987,81 @@ exports[`Renderer:Page initApi error show Message 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Renderer:Page initApi reFetch when condition changes 1`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
className="cxd-Spinner-overlay in"
|
||||
/>
|
||||
<div
|
||||
className="cxd-Spinner cxd-Spinner--overlay in"
|
||||
data-testid="spinner"
|
||||
>
|
||||
<div
|
||||
className="cxd-Spinner-icon cxd-Spinner-icon--lg cxd-Spinner-icon--default"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 1",
|
||||
}
|
||||
}
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 1",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:Page initApi reFetch when condition changes 2`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
className="cxd-Spinner-overlay in"
|
||||
/>
|
||||
<div
|
||||
className="cxd-Spinner cxd-Spinner--overlay in"
|
||||
data-testid="spinner"
|
||||
>
|
||||
<div
|
||||
className="cxd-Spinner-icon cxd-Spinner-icon--lg cxd-Spinner-icon--default"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 2",
|
||||
}
|
||||
}
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 2",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:Page initApi reload by Dialog action 1`] = `
|
||||
@ -1972,136 +1974,157 @@ exports[`Renderer:Page initApi silentPolling 2`] = `
|
||||
`;
|
||||
|
||||
exports[`Renderer:Page initData 1`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 1",
|
||||
}
|
||||
}
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 1",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:Page initFetchOn trigger initApi fetch when condition becomes ture 1`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
className="cxd-Spinner-overlay in"
|
||||
/>
|
||||
<div
|
||||
className="cxd-Spinner cxd-Spinner--overlay in"
|
||||
data-testid="spinner"
|
||||
>
|
||||
<div
|
||||
className="cxd-Spinner-icon cxd-Spinner-icon--lg cxd-Spinner-icon--default"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 6",
|
||||
}
|
||||
}
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 6",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:Page location query 1`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 5",
|
||||
}
|
||||
}
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 5",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Renderer:Page location query 2`] = `
|
||||
<div
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
[
|
||||
<div
|
||||
className="cxd-Page-content"
|
||||
className="cxd-Page"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-main"
|
||||
className="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
className="cxd-Page-main"
|
||||
>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
<div
|
||||
className="cxd-Page-body"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 6",
|
||||
}
|
||||
}
|
||||
className="cxd-Spinner-mark"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className="cxd-TplField"
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
{
|
||||
"__html": "The variable value is 6",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
className="cxd-Spinner-mark"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -66,7 +66,7 @@ export default class Container<T> extends React.Component<
|
||||
{children
|
||||
? typeof children === 'function'
|
||||
? ((children as any)(this.props) as JSX.Element)
|
||||
: (children as unknown)
|
||||
: (children as any)
|
||||
: body
|
||||
? (render('body', body as any, {disabled}) as JSX.Element)
|
||||
: null}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user