test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

fix: #24205 less class name prefix enhancement (#24459)

Browse Source 
* replace ant class prefix with variable in mixin

* replace ant class prefix with variable in wave
This commit is contained in:
Teng YANG 2020-05-26 10:32:35 +08:00 committed by GitHub
parent b34b956529
commit ccd2820ce7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/_util/wave.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import { findDOMNode } from 'react-dom';
import TransitionEvents from '@ant-design/css-animation/lib/Event';
import raf from './raf';
import { ConfigConsumer, ConfigConsumerProps, CSPConfig } from '../config-provider';
import { ConfigConsumer, ConfigConsumerProps, CSPConfig, ConfigContext } from '../config-provider';
let styleForPesudo: HTMLStyleElement | null;
@ -24,6 +24,8 @@ function isNotGrey(color: string) {
}
export default class Wave extends React.Component<{ insertExtraNode?: boolean }> {
static contextType = ConfigContext;
private instance?: {
cancel: () => void;
};
@ -40,6 +42,8 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
private csp?: CSPConfig;
context: ConfigConsumerProps;
componentDidMount() {
const node = findDOMNode(this) as HTMLElement;
if (!node || node.nodeType !== 1) {
@ -66,7 +70,8 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
const { insertExtraNode } = this.props;
this.extraNode = document.createElement('div');
const { extraNode } = this;
extraNode.className = 'ant-click-animating-node';
const { getPrefixCls } = this.context;
extraNode.className = `${getPrefixCls('')}-click-animating-node`;
const attributeName = this.getAttributeName();
node.setAttribute(attributeName, 'true');
// Not white or transparnt or grey
@ -86,7 +91,9 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
extraNode.style.borderColor = waveColor;
styleForPesudo.innerHTML = `
[ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node {
[${getPrefixCls('')}-click-animating-without-extra-node='true']::after, .${getPrefixCls(
'',
)}-click-animating-node {
--antd-wave-shadow-color: ${waveColor};
}`;
if (!document.body.contains(styleForPesudo)) {
@ -121,8 +128,11 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
};
getAttributeName() {
const { getPrefixCls } = this.context;
const { insertExtraNode } = this.props;
return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
return insertExtraNode
? `${getPrefixCls('')}-click-animating`
: `${getPrefixCls('')}-click-animating-without-extra-node`;
}
bindAnimationEvent = (node: HTMLElement) => {

4
components/input/style/mixin.less
View File

@ -259,11 +259,11 @@
}
// Fix https://github.com/ant-design/ant-design/issues/5754
&-lg .@{ant-prefix}-select-single .ant-select-selector {
&-lg .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
height: @input-height-lg;
}
&-sm .@{ant-prefix}-select-single .ant-select-selector {
&-sm .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
height: @input-height-sm;
}

13
components/style/core/motion/other.less
View File

@ -4,8 +4,11 @@
}
}
[ant-click-animating='true'],
[ant-click-animating-without-extra-node='true'] {
@click-animating-true: ~"[@{ant-prefix}-click-animating='true']";
@click-animating-with-extra-node-true: ~"[@{ant-prefix}-click-animating-without-extra-node='true']";
@{click-animating-true},
@{click-animating-with-extra-node-true} {
position: relative;
}
@ -14,8 +17,10 @@ html {
--scroll-bar: 0;
}
[ant-click-animating-without-extra-node='true']::after,
.ant-click-animating-node {
@click-animating-with-extra-node-true-after: ~'@{click-animating-with-extra-node-true}::after';
@{click-animating-with-extra-node-true-after},
.@{ant-prefix}-click-animating-node {
position: absolute;
top: 0;
right: 0;