Skip to content

Commit 4bdb241

Browse files
tangjinzhoutangjinzhou
committed
fix: some component not support css scoped
1 parent 63e8747 commit 4bdb241

File tree

13 files changed

+102
-32
lines changed

13 files changed

+102
-32
lines changed

‎antdv-demo

‎components/_util/util.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,13 @@ function resolvePropValue(options, props, key, value) {
4848
return value;
4949
}
5050

51+
export function getDataAndAriaProps(props) {
52+
return Object.keys(props).reduce((memo, key) => {
53+
if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
54+
memo[key] = props[key];
55+
}
56+
return memo;
57+
}, {});
58+
}
59+
5160
export { isOn, cacheStringFunction, camelize, hyphenate, capitalize, resolvePropValue };

‎components/anchor/Anchor.jsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,6 @@ export default {
272272
$slots,
273273
getContainer,
274274
} = this;
275-
276275
const getPrefixCls = this.configProvider.getPrefixCls;
277276
const prefixCls = getPrefixCls('anchor', customizePrefixCls);
278277
this._sPrefixCls = prefixCls;
@@ -281,7 +280,7 @@ export default {
281280
visible: activeLink,
282281
});
283282

284-
const wrapperClass = classNames(this.$attrs.class, this.wrapperClass, `${prefixCls}-wrapper`);
283+
const wrapperClass = classNames(this.wrapperClass, `${prefixCls}-wrapper`);
285284

286285
const anchorClass = classNames(prefixCls, {
287286
fixed: !affix && !showInkInFixed,
@@ -290,9 +289,7 @@ export default {
290289
const wrapperStyle = {
291290
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
292291
...this.wrapperStyle,
293-
...this.$attrs.style,
294292
};
295-
296293
const anchorContent = (
297294
<div class={wrapperClass} style={wrapperStyle}>
298295
<div class={anchorClass}>
@@ -307,7 +304,7 @@ export default {
307304
return !affix ? (
308305
anchorContent
309306
) : (
310-
<Affix offsetTop={offsetTop} target={getContainer}>
307+
<Affix {...this.$attrs} offsetTop={offsetTop} target={getContainer}>
311308
{anchorContent}
312309
</Affix>
313310
);

‎components/anchor/AnchorLink.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default {
2323
registerLink: noop,
2424
unregisterLink: noop,
2525
scrollTo: noop,
26+
$data: {},
2627
}),
2728
antAnchorContext: inject('antAnchorContext', {}),
2829
configProvider: inject('configProvider', ConfigConsumerProps),
@@ -62,7 +63,7 @@ export default {
6263
const prefixCls = getPrefixCls('anchor', customizePrefixCls);
6364

6465
const title = getComponent(this, 'title');
65-
const active = this.antAnchor.activeLink === href;
66+
const active = this.antAnchor.$data.activeLink === href;
6667
const wrapperClassName = classNames(`${prefixCls}-link`, {
6768
[`${prefixCls}-link-active`]: active,
6869
});

‎components/carousel/index.jsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ const Carousel = {
153153
if (props.effect === 'fade') {
154154
props.fade = true;
155155
}
156-
156+
const { class: cls, style, ...restAttrs } = this.$attrs;
157157
const getPrefixCls = this.configProvider.getPrefixCls;
158158
let className = getPrefixCls('carousel', props.prefixCls);
159159
const dotsClass = 'slick-dots';
@@ -162,17 +162,19 @@ const Carousel = {
162162
props.dotsClass = classNames(`${dotsClass}`, `${dotsClass}-${dotPosition || 'bottom'}`, {
163163
[`${props.dotsClass}`]: !!props.dotsClass,
164164
});
165-
if (props.vertical) {
166-
className = `${className} ${className}-vertical`;
167-
}
165+
className = classNames({
166+
[cls]: !!cls,
167+
[className]: !!className,
168+
[`${className}-vertical`]: props.vertical,
169+
});
168170
const SlickCarouselProps = {
169171
...props,
170-
...this.$attrs,
172+
...restAttrs,
171173
nextArrow: getComponent(this, 'nextArrow'),
172174
prevArrow: getComponent(this, 'prevArrow'),
173175
};
174176
return (
175-
<div class={className}>
177+
<div class={className} style={style}>
176178
<SlickCarousel ref={this.saveSlick} {...SlickCarouselProps} vSlots={$slots}></SlickCarousel>
177179
</div>
178180
);

‎components/date-picker/RangePicker.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_uti
1313
import BaseMixin from '../_util/BaseMixin';
1414
import { formatDate } from './utils';
1515
import InputIcon from './InputIcon';
16+
import { getDataAndAriaProps } from '../_util/util';
1617

1718
function getShowDateFromValue(value, mode) {
1819
const [start, end] = value;
@@ -413,6 +414,7 @@ export default {
413414
onBlur={onBlur}
414415
onMouseenter={this.onMouseEnter}
415416
onMouseleave={this.onMouseLeave}
417+
{...getDataAndAriaProps(props)}
416418
>
417419
<VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
418420
</span>

‎components/date-picker/WeekPicker.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import BaseMixin from '../_util/BaseMixin';
1010
import { WeekPickerProps } from './interface';
1111
import interopDefault from '../_util/interopDefault';
1212
import InputIcon from './InputIcon';
13+
import { getDataAndAriaProps } from '../_util/util';
1314

1415
function formatValue(value, format) {
1516
return (value && value.format(format)) || '';
@@ -207,7 +208,12 @@ export default {
207208
style: popupStyle,
208209
};
209210
return (
210-
<span class={classNames(className, pickerClass)} style={style} id={id}>
211+
<span
212+
class={classNames(className, pickerClass)}
213+
style={style}
214+
id={id}
215+
{...getDataAndAriaProps(props)}
216+
>
211217
<VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
212218
</span>
213219
);

‎components/date-picker/createPicker.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
} from '../_util/props-util';
1919
import { cloneElement } from '../_util/vnode';
2020
import { formatDate } from './utils';
21+
import { getDataAndAriaProps } from '../_util/util';
2122

2223
// export const PickerProps = {
2324
// value?: moment.Moment;
@@ -244,6 +245,7 @@ export default function createPicker(TheCalendar, props) {
244245
// tabindex={props.disabled ? -1 : 0}
245246
// onFocus={focus}
246247
// onBlur={blur}
248+
{...getDataAndAriaProps(this.$attrs)}
247249
onMouseenter={this.onMouseEnter}
248250
onMouseleave={this.onMouseLeave}
249251
>

‎components/drawer/index.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ const Drawer = {
213213
const handler = getComponent(this, 'handle') || false;
214214
const getPrefixCls = this.configProvider.getPrefixCls;
215215
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
216-
216+
const { class: className } = this.$attrs;
217217
const vcDrawerProps = {
218218
...this.$attrs,
219219
...omit(rest, [
@@ -241,6 +241,7 @@ const Drawer = {
241241
showMask: mask,
242242
placement,
243243
class: classnames({
244+
[className]: !!className,
244245
[wrapClassName]: !!wrapClassName,
245246
[haveMask]: !!haveMask,
246247
}),

‎components/vc-collapse/src/Collapse.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
import { cloneElement } from '../../_util/vnode';
1010
import openAnimationFactory from './openAnimationFactory';
1111
import { collapseProps } from './commonProps';
12+
import { getDataAndAriaProps } from '../../_util/util';
1213

1314
function _toArray(activeKey) {
1415
let currentActiveKey = activeKey;
@@ -131,7 +132,12 @@ export default {
131132
[className]: className,
132133
};
133134
return (
134-
<div class={collapseClassName} style={style} role={accordion ? 'tablist' : null}>
135+
<div
136+
class={collapseClassName}
137+
{...getDataAndAriaProps(this.$attrs)}
138+
style={style}
139+
role={accordion ? 'tablist' : null}
140+
>
135141
{this.getItems()}
136142
</div>
137143
);

0 commit comments

Comments
 (0)