mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
fix: 修复按钮disabledTip失效问题 (#4086)
* fix: 修复按钮disabledTip失效问题 * 补一下注释 e.persist()
This commit is contained in:
RickCole
GitHub
parent
20669d6b76
commit
dda0c65fec
@ -14,6 +14,51 @@ import '../../src/themes/default';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
test('Renderers:Action all levels', () => {
|
||||
const levels = [
|
||||
'link',
|
||||
'primary',
|
||||
'secondary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'danger',
|
||||
'light',
|
||||
'dark',
|
||||
'default'
|
||||
];
|
||||
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
body: [
|
||||
levels.map(item => ({
|
||||
type: 'button',
|
||||
level: item,
|
||||
label: `按钮 ${item}`
|
||||
})),
|
||||
|
||||
{
|
||||
type: 'divider'
|
||||
},
|
||||
|
||||
levels.map(item => ({
|
||||
type: 'button',
|
||||
level: item,
|
||||
disabled: true,
|
||||
label: `按钮${item}`
|
||||
}))
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderers:Action MenuItem changes class when actived & disabled', () => {
|
||||
const component = renderer.create(
|
||||
<Action isMenuItem className="a" label="123" />
|
||||
|
||||
@ -83,6 +83,190 @@ exports[`Renderers:Action MenuItem display icon 2`] = `
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`Renderers:Action all levels 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Page"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-content"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-main"
|
||||
>
|
||||
<div
|
||||
class="cxd-Page-body"
|
||||
>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--link"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 link
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 primary
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--secondary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 secondary
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--info"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 info
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--success"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 success
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--warning"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 warning
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--danger"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 danger
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--light"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 light
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--dark"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 dark
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="cxd-Button cxd-Button--default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮 default
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="cxd-Divider cxd-Divider--dashed"
|
||||
/>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--link is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮link
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--primary is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮primary
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--secondary is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮secondary
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--info is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮info
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--success is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮success
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--warning is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮warning
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--danger is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮danger
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--light is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮light
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--dark is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮dark
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Button cxd-Button--default is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
按钮default
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderers:Action custom activeClass 1`] = `
|
||||
<button
|
||||
className="cxd-Button cxd-Button--default a"
|
||||
|
||||
@ -241,6 +241,7 @@
|
||||
--Button--light-onHover-color: var(--Button--light-color);
|
||||
--Button--link-color: var(--primary);
|
||||
--Button--link-onDisabled-color: #{$gray600};
|
||||
--Button--link-onDisabled-backgroundColor: transparent;
|
||||
--Button--link-onHover-color: var(--primary-onHover);
|
||||
--Button--link-onActive-color: var(--primary-onActive);
|
||||
--Button--md-fontSize: var(--Button-fontSize);
|
||||
|
||||
@ -48,7 +48,6 @@
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
color: var(--text--muted-color);
|
||||
pointer-events: auto;
|
||||
border: var(--Button-borderWidth) solid var(--Button-onDisabled-borderColor);
|
||||
background: var(--Button-onDisabled-bg);
|
||||
|
||||
@ -62,9 +61,44 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.cxd-Button--link.is-disabled {
|
||||
background: transparent;
|
||||
&--link {
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
font-weight: var(--fontWeightNormal);
|
||||
color: var(--Button--link-color);
|
||||
text-decoration: var(--link-decoration);
|
||||
border: none;
|
||||
height: auto;
|
||||
|
||||
@include hover-focus {
|
||||
color: var(--Button--link-onHover-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include hover-active {
|
||||
color: var(--Button--link-onActive-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
color: var(--text--muted-color);
|
||||
border: none;
|
||||
background: var(--Button--link-onDisabled-backgroundColor);
|
||||
|
||||
@include hover-active {
|
||||
color: var(--text--muted-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
+ .#{$ns}Button--block {
|
||||
margin-top: var(--gap-base);
|
||||
}
|
||||
}
|
||||
|
||||
> .pull-left,
|
||||
@ -317,42 +351,6 @@ fieldset:disabled a.#{$ns}Button {
|
||||
@include button-loading-icon();
|
||||
}
|
||||
|
||||
.#{$ns}Button--link {
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
font-weight: var(--fontWeightNormal);
|
||||
color: var(--Button--link-color);
|
||||
text-decoration: var(--link-decoration);
|
||||
border: none;
|
||||
height: auto;
|
||||
|
||||
@include hover-focus {
|
||||
color: var(--Button--link-onHover-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include hover-active {
|
||||
color: var(--Button--link-onActive-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
color: var(--text--muted-color);
|
||||
pointer-events: none;
|
||||
background: var(--Button-onDisabled-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Button--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
+ .#{$ns}Button--block {
|
||||
margin-top: var(--gap-base);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='submit'],
|
||||
input[type='reset'],
|
||||
input[type='button'] {
|
||||
|
||||
@ -614,7 +614,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
|
||||
const {onAction, disabled, countDown, env} = this.props;
|
||||
|
||||
// https://reactjs.org/docs/legacy-event-pooling.html
|
||||
e.persist();
|
||||
// e.persist(); // react 17之后去掉 event pooling 了，这个应该没用了
|
||||
let onClick = this.props.onClick;
|
||||
|
||||
if (typeof onClick === 'string') {
|
||||
|
||||
@ -13,7 +13,7 @@ export default function handleAction(
|
||||
data?: any
|
||||
) {
|
||||
// https://reactjs.org/docs/legacy-event-pooling.html
|
||||
e.persist();
|
||||
// e.persist(); // react 17之后去掉 event pooling 了，这个应该没用了
|
||||
|
||||
const onAction = props.onAction;
|
||||
let onClick: any = action.onClick;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user