mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 21:50:07 +08:00
Merge branch 'next' of github.com:vueComponent/ant-design-vue into next
This commit is contained in:
commit
dd249789ec
24
components/_util/props-util/initDefaultProps.ts
Normal file
24
components/_util/props-util/initDefaultProps.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { VueTypeValidableDef, VueTypeDef } from 'vue-types';
|
||||
|
||||
const initDefaultProps = <T>(
|
||||
propTypes: T,
|
||||
defaultProps: {
|
||||
[K in keyof T]?: T[K] extends VueTypeValidableDef<infer U>
|
||||
? U
|
||||
: T[K] extends VueTypeDef<infer U>
|
||||
? U
|
||||
: any;
|
||||
},
|
||||
): T => {
|
||||
Object.keys(defaultProps).forEach(k => {
|
||||
const prop = propTypes[k] as VueTypeValidableDef;
|
||||
if (prop) {
|
||||
prop.default = defaultProps[k];
|
||||
} else {
|
||||
throw new Error(`not have ${k} prop`);
|
||||
}
|
||||
});
|
||||
return propTypes;
|
||||
};
|
||||
|
||||
export default initDefaultProps;
|
@ -1,7 +1,8 @@
|
||||
import { App } from 'vue';
|
||||
import { Row } from '../grid';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Row.install = function(app) {
|
||||
Row.install = function(app: App) {
|
||||
app.component(Row.name, Row);
|
||||
return app;
|
||||
};
|
@ -1,4 +1,4 @@
|
||||
import { inject } from 'vue';
|
||||
import { App, defineComponent, inject, VNodeTypes } from 'vue';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { getOptionProps } from '../_util/props-util';
|
||||
@ -9,6 +9,21 @@ import Tooltip from '../tooltip';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
import abstractTooltipProps from '../tooltip/abstractTooltipProps';
|
||||
|
||||
export type SliderValue = number | [number, number];
|
||||
|
||||
interface HandleGeneratorInfo {
|
||||
value: number;
|
||||
dragging: boolean;
|
||||
index: number;
|
||||
rest: any[];
|
||||
}
|
||||
|
||||
export type HandleGeneratorFn = (config: {
|
||||
tooltipPrefixCls?: string;
|
||||
prefixCls?: string;
|
||||
info: HandleGeneratorInfo;
|
||||
}) => VNodeTypes;
|
||||
|
||||
const tooltipProps = abstractTooltipProps();
|
||||
export const SliderProps = () => ({
|
||||
prefixCls: PropTypes.string,
|
||||
@ -30,22 +45,19 @@ export const SliderProps = () => ({
|
||||
tooltipPlacement: tooltipProps.placement,
|
||||
getTooltipPopupContainer: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
'onUpdate:value': PropTypes.func,
|
||||
onAfterChange: PropTypes.func,
|
||||
});
|
||||
|
||||
const defaultTipFormatter = value => value.toString();
|
||||
const defaultTipFormatter = (value: number) => value.toString();
|
||||
|
||||
const Slider = {
|
||||
const Slider = defineComponent({
|
||||
name: 'ASlider',
|
||||
inheritAttrs: false,
|
||||
// model: {
|
||||
// prop: 'value',
|
||||
// event: 'change',
|
||||
// },
|
||||
emits: ['update:value', 'change'],
|
||||
mixins: [BaseMixin],
|
||||
setup() {
|
||||
return {
|
||||
vcSlider: null,
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
};
|
||||
},
|
||||
@ -58,7 +70,7 @@ const Slider = {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleTooltipVisible(index, visible) {
|
||||
toggleTooltipVisible(index: number, visible: boolean) {
|
||||
this.setState(({ visibles }) => ({
|
||||
visibles: {
|
||||
...visibles,
|
||||
@ -66,7 +78,11 @@ const Slider = {
|
||||
},
|
||||
}));
|
||||
},
|
||||
handleWithTooltip(tooltipPrefixCls, prefixCls, { value, dragging, index, ...restProps }) {
|
||||
handleWithTooltip(
|
||||
tooltipPrefixCls: string,
|
||||
prefixCls: string,
|
||||
{ value, dragging, index, ...restProps }: HandleGeneratorInfo,
|
||||
): VNodeTypes {
|
||||
const {
|
||||
tipFormatter = defaultTipFormatter,
|
||||
tooltipVisible,
|
||||
@ -98,7 +114,7 @@ const Slider = {
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
saveSlider(node) {
|
||||
saveSlider(node: any) {
|
||||
this.vcSlider = node;
|
||||
},
|
||||
focus() {
|
||||
@ -107,7 +123,7 @@ const Slider = {
|
||||
blur() {
|
||||
this.vcSlider.blur();
|
||||
},
|
||||
handleChange(val) {
|
||||
handleChange(val: SliderValue) {
|
||||
this.$emit('update:value', val);
|
||||
this.$emit('change', val);
|
||||
},
|
||||
@ -118,8 +134,8 @@ const Slider = {
|
||||
prefixCls: customizePrefixCls,
|
||||
tooltipPrefixCls: customizeTooltipPrefixCls,
|
||||
...restProps
|
||||
} = { ...getOptionProps(this), ...this.$attrs };
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
} = { ...getOptionProps(this), ...this.$attrs } as any;
|
||||
const { getPrefixCls } = this.configProvider;
|
||||
const prefixCls = getPrefixCls('slider', customizePrefixCls);
|
||||
const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
|
||||
if (range) {
|
||||
@ -127,7 +143,8 @@ const Slider = {
|
||||
...restProps,
|
||||
prefixCls,
|
||||
tooltipPrefixCls,
|
||||
handle: info => this.handleWithTooltip(tooltipPrefixCls, prefixCls, info),
|
||||
handle: (info: HandleGeneratorInfo) =>
|
||||
this.handleWithTooltip(tooltipPrefixCls, prefixCls, info),
|
||||
ref: this.saveSlider,
|
||||
onChange: this.handleChange,
|
||||
};
|
||||
@ -137,16 +154,17 @@ const Slider = {
|
||||
...restProps,
|
||||
prefixCls,
|
||||
tooltipPrefixCls,
|
||||
handle: info => this.handleWithTooltip(tooltipPrefixCls, prefixCls, info),
|
||||
handle: (info: HandleGeneratorInfo) =>
|
||||
this.handleWithTooltip(tooltipPrefixCls, prefixCls, info),
|
||||
ref: this.saveSlider,
|
||||
onChange: this.handleChange,
|
||||
};
|
||||
return <VcSlider {...vcSliderProps} />;
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
/* istanbul ignore next */
|
||||
Slider.install = function(app) {
|
||||
Slider.install = function(app: App) {
|
||||
app.component(Slider.name, Slider);
|
||||
return app;
|
||||
};
|
@ -1,11 +1,13 @@
|
||||
import { inject, cloneVNode, isVNode } from 'vue';
|
||||
import { inject, cloneVNode, isVNode, defineComponent, VNode } from 'vue';
|
||||
import debounce from 'lodash-es/debounce';
|
||||
import { tuple } from '../_util/type';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
|
||||
import { getComponent, getSlot } from '../_util/props-util';
|
||||
import initDefaultProps from '../_util/props-util/initDefaultProps';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
|
||||
export const SpinSize = PropTypes.oneOf(['small', 'default', 'large']);
|
||||
export const SpinSize = PropTypes.oneOf(tuple('small', 'default', 'large'));
|
||||
|
||||
export const SpinProps = () => ({
|
||||
prefixCls: PropTypes.string,
|
||||
@ -18,23 +20,18 @@ export const SpinProps = () => ({
|
||||
});
|
||||
|
||||
// Render indicator
|
||||
let defaultIndicator;
|
||||
let defaultIndicator: () => VNode = null;
|
||||
|
||||
function shouldDelay(spinning, delay) {
|
||||
function shouldDelay(spinning?: boolean, delay?: number): boolean {
|
||||
return !!spinning && !!delay && !isNaN(Number(delay));
|
||||
}
|
||||
|
||||
export function setDefaultIndicator(Content) {
|
||||
export function setDefaultIndicator(Content: any) {
|
||||
const Indicator = Content.indicator;
|
||||
defaultIndicator =
|
||||
typeof Indicator === 'function'
|
||||
? Indicator
|
||||
: () => {
|
||||
return <Indicator />;
|
||||
};
|
||||
defaultIndicator = typeof Indicator === 'function' ? Indicator : () => <Indicator />;
|
||||
}
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'ASpin',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
@ -45,14 +42,17 @@ export default {
|
||||
}),
|
||||
setup() {
|
||||
return {
|
||||
originalUpdateSpinning: null,
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.originalUpdateSpinning = this.updateSpinning;
|
||||
this.debouncifyUpdateSpinning(this.$props);
|
||||
},
|
||||
data() {
|
||||
const { spinning, delay } = this;
|
||||
const shouldBeDelayed = shouldDelay(spinning, delay);
|
||||
this.originalUpdateSpinning = this.updateSpinning;
|
||||
this.debouncifyUpdateSpinning(this.$props);
|
||||
return {
|
||||
sSpinning: spinning && !shouldBeDelayed,
|
||||
};
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
this.cancelExistingSpin();
|
||||
},
|
||||
methods: {
|
||||
debouncifyUpdateSpinning(props) {
|
||||
debouncifyUpdateSpinning(props?: any) {
|
||||
const { delay } = props || this.$props;
|
||||
if (delay) {
|
||||
this.cancelExistingSpin();
|
||||
@ -85,11 +85,11 @@ export default {
|
||||
},
|
||||
cancelExistingSpin() {
|
||||
const { updateSpinning } = this;
|
||||
if (updateSpinning && updateSpinning.cancel) {
|
||||
updateSpinning.cancel();
|
||||
if (updateSpinning && (updateSpinning as any).cancel) {
|
||||
(updateSpinning as any).cancel();
|
||||
}
|
||||
},
|
||||
renderIndicator(prefixCls) {
|
||||
renderIndicator(prefixCls: string) {
|
||||
const dotClassName = `${prefixCls}-dot`;
|
||||
let indicator = getComponent(this, 'indicator');
|
||||
// should not be render default indicator when indicator value is null
|
||||
@ -120,7 +120,7 @@ export default {
|
||||
render() {
|
||||
const { size, prefixCls: customizePrefixCls, tip, wrapperClassName } = this.$props;
|
||||
const { class: cls, style, ...divProps } = this.$attrs;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const { getPrefixCls } = this.configProvider;
|
||||
const prefixCls = getPrefixCls('spin', customizePrefixCls);
|
||||
|
||||
const { sSpinning } = this;
|
||||
@ -130,7 +130,7 @@ export default {
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-spinning`]: sSpinning,
|
||||
[`${prefixCls}-show-text`]: !!tip,
|
||||
[cls]: !!cls,
|
||||
[cls as string]: !!cls,
|
||||
};
|
||||
|
||||
const spinElement = (
|
||||
@ -157,4 +157,4 @@ export default {
|
||||
}
|
||||
return spinElement;
|
||||
},
|
||||
};
|
||||
});
|
@ -1,3 +1,4 @@
|
||||
import { App } from 'vue';
|
||||
import Spin, { setDefaultIndicator } from './Spin';
|
||||
|
||||
export { SpinProps } from './Spin';
|
||||
@ -5,7 +6,7 @@ export { SpinProps } from './Spin';
|
||||
Spin.setDefaultIndicator = setDefaultIndicator;
|
||||
|
||||
/* istanbul ignore next */
|
||||
Spin.install = function(app) {
|
||||
Spin.install = function(app: App) {
|
||||
app.component(Spin.name, Spin);
|
||||
return app;
|
||||
};
|
Loading…
Reference in New Issue
Block a user