fix: unit test
parent
01096b556d
commit
8eb6afb9b0
|
@ -42,7 +42,7 @@ const responsiveObserve = {
|
||||||
if (!subscribers.size) this.unregister();
|
if (!subscribers.size) this.unregister();
|
||||||
},
|
},
|
||||||
unregister() {
|
unregister() {
|
||||||
Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
|
Object.keys(responsiveMap).forEach((screen: string) => {
|
||||||
const matchMediaQuery = responsiveMap[screen]!;
|
const matchMediaQuery = responsiveMap[screen]!;
|
||||||
const handler = this.matchHandlers[matchMediaQuery];
|
const handler = this.matchHandlers[matchMediaQuery];
|
||||||
handler?.mql.removeListener(handler?.listener);
|
handler?.mql.removeListener(handler?.listener);
|
||||||
|
@ -50,7 +50,7 @@ const responsiveObserve = {
|
||||||
subscribers.clear();
|
subscribers.clear();
|
||||||
},
|
},
|
||||||
register() {
|
register() {
|
||||||
Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
|
Object.keys(responsiveMap).forEach((screen: string) => {
|
||||||
const matchMediaQuery = responsiveMap[screen]!;
|
const matchMediaQuery = responsiveMap[screen]!;
|
||||||
const listener = ({ matches }: { matches: boolean }) => {
|
const listener = ({ matches }: { matches: boolean }) => {
|
||||||
this.dispatch({
|
this.dispatch({
|
||||||
|
|
|
@ -19,18 +19,11 @@ const AffixMounter = {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
|
||||||
<div ref="container" class="container">
|
<div ref="container" class="container">
|
||||||
<Affix
|
<Affix class="fixed" target={() => this.$refs.container} ref="affix">
|
||||||
class="fixed"
|
|
||||||
target={() => this.$refs.container}
|
|
||||||
ref="affix"
|
|
||||||
{...{ props: this.$props }}
|
|
||||||
>
|
|
||||||
<Button type="primary">Fixed at the top of container</Button>
|
<Button type="primary">Fixed at the top of container</Button>
|
||||||
</Affix>
|
</Affix>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -140,6 +140,6 @@ AutoComplete.install = function(app: App) {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AutoComplete as typeof AutoComplete & {
|
export default AutoComplete as typeof AutoComplete & {
|
||||||
readonly Option: typeof AutoComplete.Option;
|
readonly Option: typeof Option;
|
||||||
readonly OptGroup: typeof AutoComplete.OptGroup;
|
readonly OptGroup: typeof OptGroup;
|
||||||
};
|
};
|
||||||
|
|
|
@ -59,7 +59,7 @@ exports[`Button should not render as link button when href is undefined 1`] = `
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button should support link button 1`] = `
|
exports[`Button should support link button 1`] = `
|
||||||
<a target="_blank" href="http://ant.design" class="ant-btn">
|
<a target="_blank" class="ant-btn" href="http://ant.design">
|
||||||
<!----><span>link button</span>
|
<!----><span>link button</span>
|
||||||
</a>
|
</a>
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -96,7 +96,7 @@ const Card = defineComponent({
|
||||||
} = this.$props;
|
} = this.$props;
|
||||||
const { $slots } = this;
|
const { $slots } = this;
|
||||||
const children = getSlot(this);
|
const children = getSlot(this);
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
const { getPrefixCls } = this.configProvider;
|
||||||
const prefixCls = getPrefixCls('card', customizePrefixCls);
|
const prefixCls = getPrefixCls('card', customizePrefixCls);
|
||||||
|
|
||||||
const tabBarExtraContent = getComponent(this, 'tabBarExtraContent');
|
const tabBarExtraContent = getComponent(this, 'tabBarExtraContent');
|
||||||
|
|
|
@ -19,9 +19,9 @@ export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
name: PropTypes.string,
|
name: PropTypes.string,
|
||||||
prefixCls: PropTypes.string,
|
prefixCls: PropTypes.string,
|
||||||
defaultValue: { type: Array as PropType<Array<CheckboxValueType>>},
|
defaultValue: { type: Array as PropType<Array<CheckboxValueType>> },
|
||||||
value: { type: Array as PropType<Array<CheckboxValueType>>},
|
value: { type: Array as PropType<Array<CheckboxValueType>> },
|
||||||
options: {type: Array as PropType<Array<CheckboxOptionType | string>>},
|
options: { type: Array as PropType<Array<CheckboxOptionType | string>> },
|
||||||
disabled: PropTypes.looseBool,
|
disabled: PropTypes.looseBool,
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
},
|
},
|
||||||
|
@ -48,7 +48,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getOptions() {
|
getOptions() {
|
||||||
const { options, $slots } = this;
|
const { options = [], $slots } = this;
|
||||||
return options.map(option => {
|
return options.map(option => {
|
||||||
if (typeof option === 'string') {
|
if (typeof option === 'string') {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -8,11 +8,11 @@ describe('ConfigProvider', () => {
|
||||||
mountTest({
|
mountTest({
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<ConfigProvider>
|
<ConfigProvider>
|
||||||
<div />
|
<div />
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -89,16 +89,16 @@ const ACol = defineComponent<ColProps>({
|
||||||
let mergedStyle: CSSProperties = {};
|
let mergedStyle: CSSProperties = {};
|
||||||
if (gutter) {
|
if (gutter) {
|
||||||
mergedStyle = {
|
mergedStyle = {
|
||||||
...(gutter[0]! > 0
|
...(gutter[0] > 0
|
||||||
? {
|
? {
|
||||||
paddingLeft: gutter[0]! / 2,
|
paddingLeft: `${gutter[0] / 2}px`,
|
||||||
paddingRight: gutter[0]! / 2,
|
paddingRight: `${gutter[0] / 2}px`,
|
||||||
}
|
}
|
||||||
: {}),
|
: {}),
|
||||||
...(gutter[1]! > 0
|
...(gutter[1] > 0
|
||||||
? {
|
? {
|
||||||
paddingTop: gutter[1]! / 2,
|
paddingTop: `${gutter[1] / 2}px`,
|
||||||
paddingBottom: gutter[1]! / 2,
|
paddingBottom: `${gutter[1] / 2}px`,
|
||||||
}
|
}
|
||||||
: {}),
|
: {}),
|
||||||
...mergedStyle,
|
...mergedStyle,
|
||||||
|
@ -109,7 +109,7 @@ const ACol = defineComponent<ColProps>({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={mergedStyle} class={classes}>
|
<div class={classes} style={mergedStyle}>
|
||||||
{slots.default?.()}
|
{slots.default?.()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -104,16 +104,16 @@ const ARow = defineComponent<RowProps>({
|
||||||
[`${prefixCls}-${align}`]: align,
|
[`${prefixCls}-${align}`]: align,
|
||||||
});
|
});
|
||||||
const rowStyle = {
|
const rowStyle = {
|
||||||
...(gutter[0]! > 0
|
...(gutter[0] > 0
|
||||||
? {
|
? {
|
||||||
marginLeft: gutter[0]! / -2,
|
marginLeft: `${gutter[0] / -2}px`,
|
||||||
marginRight: gutter[0]! / -2,
|
marginRight: `${gutter[0] / -2}px`,
|
||||||
}
|
}
|
||||||
: {}),
|
: {}),
|
||||||
...(gutter[1]! > 0
|
...(gutter[1] > 0
|
||||||
? {
|
? {
|
||||||
marginTop: gutter[1]! / -2,
|
marginTop: `${gutter[1] / -2}px`,
|
||||||
marginBottom: gutter[1]! / 2,
|
marginBottom: `${gutter[1] / -2}px`,
|
||||||
}
|
}
|
||||||
: {}),
|
: {}),
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,12 +3,24 @@
|
||||||
exports[`Grid renders wrapped Col correctly 1`] = `
|
exports[`Grid renders wrapped Col correctly 1`] = `
|
||||||
<div class="ant-row" style="margin-left: -10px; margin-right: -10px;">
|
<div class="ant-row" style="margin-left: -10px; margin-right: -10px;">
|
||||||
<div>
|
<div>
|
||||||
<div class="ant-col ant-col-12" style="padding-left: 10px; padding-right: 10px;"></div>
|
<div class="ant-col ant-col-12" style="padding-left: 10px; padding-right: 10px;">
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-12" style="padding-left: 10px; padding-right: 10px;">
|
||||||
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-col ant-col-12" style="padding-left: 10px; padding-right: 10px;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Grid should render Col 1`] = `<div class="ant-col ant-col-2"></div>`;
|
exports[`Grid should render Col 1`] = `
|
||||||
|
<div class="ant-col ant-col-2">
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`Grid should render Row 1`] = `<div class="ant-row"></div>`;
|
exports[`Grid should render Row 1`] = `
|
||||||
|
<div class="ant-row">
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
|
@ -31,26 +31,29 @@ export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'>
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SelectPropsTypes<VT>
|
export interface SelectPropsTypes<VT>
|
||||||
extends Omit<InternalSelectProps<VT>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'class' | 'style'> {
|
extends Omit<
|
||||||
|
InternalSelectProps<VT>,
|
||||||
|
'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'class' | 'style'
|
||||||
|
> {
|
||||||
mode?: 'multiple' | 'tags';
|
mode?: 'multiple' | 'tags';
|
||||||
}
|
}
|
||||||
export type SelectTypes = SelectPropsTypes<SelectValue>
|
export type SelectTypes = SelectPropsTypes<SelectValue>;
|
||||||
export const SelectProps = {
|
export const SelectProps = {
|
||||||
...omit(props, ['inputIcon' ,'mode' ,'getInputElement' ,'backfill' ,'class' ,'style']),
|
...omit(props, ['inputIcon', 'mode', 'getInputElement', 'backfill', 'class', 'style']),
|
||||||
value: {
|
value: {
|
||||||
type: [Array, Object, String, Number] as PropType<SelectValue>
|
type: [Array, Object, String, Number] as PropType<SelectValue>,
|
||||||
},
|
},
|
||||||
defaultValue: {
|
defaultValue: {
|
||||||
type: [Array, Object, String, Number] as PropType<SelectValue>
|
type: [Array, Object, String, Number] as PropType<SelectValue>,
|
||||||
},
|
},
|
||||||
suffixIcon: PropTypes.VNodeChild,
|
suffixIcon: PropTypes.VNodeChild,
|
||||||
itemIcon: PropTypes.VNodeChild,
|
itemIcon: PropTypes.VNodeChild,
|
||||||
size: PropTypes.oneOf(tuple('small', 'middle', 'large', undefined, 'default')),
|
size: PropTypes.oneOf(tuple('small', 'middle', 'large', undefined, 'default')),
|
||||||
mode: PropTypes.oneOf(tuple('multiple', 'tags')),
|
mode: PropTypes.oneOf(tuple('multiple', 'tags', 'SECRET_COMBOBOX_MODE_DO_NOT_USE')),
|
||||||
bordered: PropTypes.looseBool.def(true),
|
bordered: PropTypes.looseBool.def(true),
|
||||||
transitionName: PropTypes.string.def('slide-up'),
|
transitionName: PropTypes.string.def('slide-up'),
|
||||||
choiceTransitionName: PropTypes.string.def(''),
|
choiceTransitionName: PropTypes.string.def(''),
|
||||||
}
|
};
|
||||||
|
|
||||||
const Select = defineComponent({
|
const Select = defineComponent({
|
||||||
name: 'ASelect',
|
name: 'ASelect',
|
||||||
|
@ -60,7 +63,7 @@ const Select = defineComponent({
|
||||||
props: SelectProps,
|
props: SelectProps,
|
||||||
SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
|
SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
|
||||||
emits: ['change', 'update:value'],
|
emits: ['change', 'update:value'],
|
||||||
setup(props: any, {attrs, emit}) {
|
setup(props: any, { attrs, emit }) {
|
||||||
const selectRef = ref(null);
|
const selectRef = ref(null);
|
||||||
|
|
||||||
const configProvider = inject('configProvider', defaultConfigProvider);
|
const configProvider = inject('configProvider', defaultConfigProvider);
|
||||||
|
@ -77,8 +80,8 @@ const Select = defineComponent({
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const mode = computed(()=>{
|
const mode = computed(() => {
|
||||||
const { mode } = props
|
const { mode } = props;
|
||||||
|
|
||||||
if ((mode as any) === 'combobox') {
|
if ((mode as any) === 'combobox') {
|
||||||
return undefined;
|
return undefined;
|
||||||
|
@ -91,7 +94,8 @@ const Select = defineComponent({
|
||||||
return mode;
|
return mode;
|
||||||
});
|
});
|
||||||
|
|
||||||
const mergedClassName = computed(()=> classNames(
|
const mergedClassName = computed(() =>
|
||||||
|
classNames(
|
||||||
{
|
{
|
||||||
[`${props.prefixCls}-lg`]: props.size === 'large',
|
[`${props.prefixCls}-lg`]: props.size === 'large',
|
||||||
[`${props.prefixCls}-sm`]: props.size === 'small',
|
[`${props.prefixCls}-sm`]: props.size === 'small',
|
||||||
|
@ -99,24 +103,32 @@ const Select = defineComponent({
|
||||||
[`${props.prefixCls}-borderless`]: !props.bordered,
|
[`${props.prefixCls}-borderless`]: !props.bordered,
|
||||||
},
|
},
|
||||||
attrs.class,
|
attrs.class,
|
||||||
));
|
),
|
||||||
const triggerChange=(...args: any[])=>{
|
);
|
||||||
console.log(args)
|
const triggerChange = (...args: any[]) => {
|
||||||
emit('update:value', ...args)
|
console.log(args);
|
||||||
emit('change', ...args)
|
emit('update:value', ...args);
|
||||||
}
|
emit('change', ...args);
|
||||||
|
};
|
||||||
return {
|
return {
|
||||||
mergedClassName,
|
mergedClassName,
|
||||||
mode,
|
mode,
|
||||||
focus,
|
focus,
|
||||||
blur,
|
blur,
|
||||||
configProvider,
|
configProvider,
|
||||||
triggerChange
|
triggerChange,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
const {configProvider, mode, mergedClassName,triggerChange, $slots: slots, $props} = this as any;
|
const {
|
||||||
const props: SelectTypes = $props
|
configProvider,
|
||||||
|
mode,
|
||||||
|
mergedClassName,
|
||||||
|
triggerChange,
|
||||||
|
$slots: slots,
|
||||||
|
$props,
|
||||||
|
} = this as any;
|
||||||
|
const props: SelectTypes = $props;
|
||||||
const {
|
const {
|
||||||
prefixCls: customizePrefixCls,
|
prefixCls: customizePrefixCls,
|
||||||
notFoundContent,
|
notFoundContent,
|
||||||
|
@ -126,10 +138,14 @@ const Select = defineComponent({
|
||||||
dropdownClassName,
|
dropdownClassName,
|
||||||
direction,
|
direction,
|
||||||
virtual,
|
virtual,
|
||||||
dropdownMatchSelectWidth
|
dropdownMatchSelectWidth,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const { getPrefixCls, renderEmpty, getPopupContainer: getContextPopupContainer } = configProvider
|
const {
|
||||||
|
getPrefixCls,
|
||||||
|
renderEmpty,
|
||||||
|
getPopupContainer: getContextPopupContainer,
|
||||||
|
} = configProvider;
|
||||||
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
||||||
|
|
||||||
const isMultiple = mode === 'multiple' || mode === 'tags';
|
const isMultiple = mode === 'multiple' || mode === 'tags';
|
||||||
|
@ -138,8 +154,8 @@ const Select = defineComponent({
|
||||||
let mergedNotFound: VNodeChild;
|
let mergedNotFound: VNodeChild;
|
||||||
if (notFoundContent !== undefined) {
|
if (notFoundContent !== undefined) {
|
||||||
mergedNotFound = notFoundContent;
|
mergedNotFound = notFoundContent;
|
||||||
} else if(slots.notFoundContent){
|
} else if (slots.notFoundContent) {
|
||||||
mergedNotFound = slots.notFoundContent()
|
mergedNotFound = slots.notFoundContent();
|
||||||
} else if (mode === 'combobox') {
|
} else if (mode === 'combobox') {
|
||||||
mergedNotFound = null;
|
mergedNotFound = null;
|
||||||
} else {
|
} else {
|
||||||
|
@ -147,11 +163,14 @@ const Select = defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
// ===================== Icons =====================
|
// ===================== Icons =====================
|
||||||
const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons({
|
const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons(
|
||||||
|
{
|
||||||
...this.$props,
|
...this.$props,
|
||||||
multiple: isMultiple,
|
multiple: isMultiple,
|
||||||
prefixCls,
|
prefixCls,
|
||||||
}, slots);
|
},
|
||||||
|
slots,
|
||||||
|
);
|
||||||
|
|
||||||
const selectProps = omit(props, [
|
const selectProps = omit(props, [
|
||||||
'prefixCls',
|
'prefixCls',
|
||||||
|
@ -187,9 +206,9 @@ const Select = defineComponent({
|
||||||
onChange={triggerChange}
|
onChange={triggerChange}
|
||||||
>
|
>
|
||||||
{slots?.default()}
|
{slots?.default()}
|
||||||
</RcSelect>
|
</RcSelect>;
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
/* istanbul ignore next */
|
/* istanbul ignore next */
|
||||||
Select.install = function(app: App) {
|
Select.install = function(app: App) {
|
||||||
app.component(Select.name, Select);
|
app.component(Select.name, Select);
|
||||||
|
|
|
@ -73,7 +73,6 @@ export const props = {
|
||||||
|
|
||||||
// Options
|
// Options
|
||||||
options: PropTypes.array,
|
options: PropTypes.array,
|
||||||
children: PropTypes.array.def([]),
|
|
||||||
mode: PropTypes.string,
|
mode: PropTypes.string,
|
||||||
|
|
||||||
// Value
|
// Value
|
||||||
|
@ -163,7 +162,7 @@ export const props = {
|
||||||
* Do not use in production environment.
|
* Do not use in production environment.
|
||||||
*/
|
*/
|
||||||
internalProps: PropTypes.object.def({}),
|
internalProps: PropTypes.object.def({}),
|
||||||
}
|
};
|
||||||
|
|
||||||
export interface SelectProps<OptionsType extends object[], ValueType> {
|
export interface SelectProps<OptionsType extends object[], ValueType> {
|
||||||
prefixCls?: string;
|
prefixCls?: string;
|
||||||
|
|
Loading…
Reference in New Issue