github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: slider to ts

pull/4606/head
tangjinzhou 2021-08-28 14:43:08 +08:00
parent 7dbc86ea5c
commit e1f979014d
14 changed files with 301 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/vc-slider/index.js
View File

@ -1,4 +1,4 @@
// base rc-slider 8.7.1
// base rc-slider 9.7.2
import Slider from './src/';
export default Slider;

151
components/vc-slider/src/Handle.jsx
View File

@ -1,151 +0,0 @@
import { defineComponent } from 'vue';
import classNames from '../../_util/classNames';
import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin';
import { getOptionProps } from '../../_util/props-util';
import addEventListener from '../../vc-util/Dom/addEventListener';
export default defineComponent({
name: 'Handle',
mixins: [BaseMixin],
inheritAttrs: false,
props: {
prefixCls: PropTypes.string,
vertical: PropTypes.looseBool,
offset: PropTypes.number,
disabled: PropTypes.looseBool,
min: PropTypes.number,
max: PropTypes.number,
value: PropTypes.number,
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
reverse: PropTypes.looseBool,
ariaLabel: String,
ariaLabelledBy: String,
ariaValueTextFormatter: Function,
// handleFocus: PropTypes.func.def(noop),
// handleBlur: PropTypes.func.def(noop),
},
data() {
return {
clickFocused: false,
};
},
mounted() {
// mouseup won't trigger if mouse moved out of handle
// so we listen on document here.
this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp);
},
beforeUnmount() {
if (this.onMouseUpListener) {
this.onMouseUpListener.remove();
}
},
methods: {
setHandleRef(node) {
this.handle = node;
},
setClickFocus(focused) {
this.setState({ clickFocused: focused });
},
handleMouseUp() {
if (document.activeElement === this.handle) {
this.setClickFocus(true);
}
},
handleBlur(e) {
this.setClickFocus(false);
this.__emit('blur', e);
},
handleKeyDown() {
this.setClickFocus(false);
},
clickFocus() {
this.setClickFocus(true);
this.focus();
},
focus() {
this.handle.focus();
},
blur() {
this.handle.blur();
},
// when click can not focus in vue, use mousedown trigger focus
handleMousedown(e) {
e.preventDefault();
this.focus();
this.__emit('mousedown', e);
},
},
render() {
const {
prefixCls,
vertical,
reverse,
offset,
disabled,
min,
max,
value,
tabindex,
ariaLabel,
ariaLabelledBy,
ariaValueTextFormatter,
} = getOptionProps(this);
const className = classNames(this.$attrs.class, {
[`${prefixCls}-handle-click-focused`]: this.clickFocused,
});
const positionStyle = vertical
? {
[reverse ? 'top' : 'bottom']: `${offset}%`,
[reverse ? 'bottom' : 'top']: 'auto',
transform: reverse ? null : `translateY(+50%)`,
}
: {
[reverse ? 'right' : 'left']: `${offset}%`,
[reverse ? 'left' : 'right']: 'auto',
transform: `translateX(${reverse ? '+' : '-'}50%)`,
};
const ariaProps = {
'aria-valuemin': min,
'aria-valuemax': max,
'aria-valuenow': value,
'aria-disabled': !!disabled,
};
const elStyle = {
...this.$attrs.style,
...positionStyle,
};
let mergedTabIndex = tabindex || 0;
if (disabled || tabindex === null) {
mergedTabIndex = null;
}
let ariaValueText;
if (ariaValueTextFormatter) {
ariaValueText = ariaValueTextFormatter(value);
}
const handleProps = {
...this.$attrs,
role: 'slider',
tabindex: mergedTabIndex,
...ariaProps,
class: className,
onBlur: this.handleBlur,
onKeydown: this.handleKeyDown,
onMousedown: this.handleMousedown,
ref: this.setHandleRef,
style: elStyle,
};
return (
<div
{...handleProps}
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
aria-valuetext={ariaValueText}
/>
);
},
});

265
components/vc-slider/src/Handle.tsx Normal file
View File

@ -0,0 +1,265 @@
import { computed, CSSProperties, defineComponent, ref } from 'vue';
import classNames from '../../_util/classNames';
import PropTypes from '../../_util/vue-types';
import addEventListener from '../../vc-util/Dom/addEventListener';
import { onMounted } from 'vue';
import { onBeforeUnmount } from 'vue';
export default defineComponent({
name: 'Handle',
inheritAttrs: false,
props: {
prefixCls: PropTypes.string,
vertical: PropTypes.looseBool,
offset: PropTypes.number,
disabled: PropTypes.looseBool,
min: PropTypes.number,
max: PropTypes.number,
value: PropTypes.number,
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
reverse: PropTypes.looseBool,
ariaLabel: String,
ariaLabelledBy: String,
ariaValueTextFormatter: Function,
},
setup(props, { attrs, emit, expose }) {
const clickFocused = ref(false);
const handle = ref();
const handleMouseUp = () => {
if (document.activeElement === handle.value) {
clickFocused.value = true;
}
};
const handleBlur = () => {
clickFocused.value = false;
emit('blur');
};
const handleKeyDown = () => {
clickFocused.value = false;
};
const focus = () => {
handle.value?.focus();
};
const blur = () => {
handle.value?.blur();
};
const clickFocus = () => {
clickFocused.value = true;
focus();
};
// when click can not focus in vue, use mousedown trigger focus
const handleMousedown = (e: MouseEvent) => {
e.preventDefault();
focus();
emit('mousedown', e);
};
expose({
focus,
blur,
clickFocus,
});
let onMouseUpListener = null;
onMounted(() => {
onMouseUpListener = addEventListener(document, 'mouseup', handleMouseUp);
});
onBeforeUnmount(() => {
onMouseUpListener?.remove();
});
const positionStyle = computed(() => {
const { vertical, offset, reverse } = props;
return vertical
? {
[reverse ? 'top' : 'bottom']: `${offset}%`,
[reverse ? 'bottom' : 'top']: 'auto',
transform: reverse ? null : `translateY(+50%)`,
}
: {
[reverse ? 'right' : 'left']: `${offset}%`,
[reverse ? 'left' : 'right']: 'auto',
transform: `translateX(${reverse ? '+' : '-'}50%)`,
};
});
return () => {
const {
prefixCls,
disabled,
min,
max,
value,
tabindex,
ariaLabel,
ariaLabelledBy,
ariaValueTextFormatter,
} = props;
const className = classNames(attrs.class, {
[`${prefixCls}-handle-click-focused`]: clickFocused.value,
});
const ariaProps = {
'aria-valuemin': min,
'aria-valuemax': max,
'aria-valuenow': value,
'aria-disabled': !!disabled,
};
const elStyle = {
...(attrs.style as CSSProperties),
...positionStyle.value,
};
let mergedTabIndex = tabindex || 0;
if (disabled || tabindex === null) {
mergedTabIndex = null;
}
let ariaValueText;
if (ariaValueTextFormatter) {
ariaValueText = ariaValueTextFormatter(value);
}
const handleProps = {
...attrs,
role: 'slider',
tabindex: mergedTabIndex,
...ariaProps,
class: className,
onBlur: handleBlur,
onKeydown: handleKeyDown,
onMousedown: handleMousedown,
ref: handle,
style: elStyle,
};
return (
<div
{...handleProps}
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
aria-valuetext={ariaValueText}
/>
);
};
},
// data() {
// return {
// clickFocused: false,
// };
// },
// mounted() {
// // mouseup won't trigger if mouse moved out of handle
// // so we listen on document here.
// this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp);
// },
// beforeUnmount() {
// if (this.onMouseUpListener) {
// this.onMouseUpListener.remove();
// }
// },
// methods: {
// setHandleRef(node) {
// this.handle = node;
// },
// setClickFocus(focused) {
// this.setState({ clickFocused: focused });
// },
// handleMouseUp() {
// if (document.activeElement === this.handle) {
// this.setClickFocus(true);
// }
// },
// handleBlur(e) {
// this.setClickFocus(false);
// this.__emit('blur', e);
// },
// handleKeyDown() {
// this.setClickFocus(false);
// },
// clickFocus() {
// this.setClickFocus(true);
// this.focus();
// },
// focus() {
// this.handle.focus();
// },
// blur() {
// this.handle.blur();
// },
// // when click can not focus in vue, use mousedown trigger focus
// handleMousedown(e) {
// e.preventDefault();
// this.focus();
// this.__emit('mousedown', e);
// },
// },
// render() {
// const {
// prefixCls,
// vertical,
// reverse,
// offset,
// disabled,
// min,
// max,
// value,
// tabindex,
// ariaLabel,
// ariaLabelledBy,
// ariaValueTextFormatter,
// } = getOptionProps(this);
// const className = classNames(this.$attrs.class, {
// [`${prefixCls}-handle-click-focused`]: this.clickFocused,
// });
// const positionStyle = vertical
// ? {
// [reverse ? 'top' : 'bottom']: `${offset}%`,
// [reverse ? 'bottom' : 'top']: 'auto',
// transform: reverse ? null : `translateY(+50%)`,
// }
// : {
// [reverse ? 'right' : 'left']: `${offset}%`,
// [reverse ? 'left' : 'right']: 'auto',
// transform: `translateX(${reverse ? '+' : '-'}50%)`,
// };
// const ariaProps = {
// 'aria-valuemin': min,
// 'aria-valuemax': max,
// 'aria-valuenow': value,
// 'aria-disabled': !!disabled,
// };
// const elStyle = {
// ...this.$attrs.style,
// ...positionStyle,
// };
// let mergedTabIndex = tabindex || 0;
// if (disabled || tabindex === null) {
// mergedTabIndex = null;
// }
// let ariaValueText;
// if (ariaValueTextFormatter) {
// ariaValueText = ariaValueTextFormatter(value);
// }
// const handleProps = {
// ...this.$attrs,
// role: 'slider',
// tabindex: mergedTabIndex,
// ...ariaProps,
// class: className,
// onBlur: this.handleBlur,
// onKeydown: this.handleKeyDown,
// onMousedown: this.handleMousedown,
// ref: this.setHandleRef,
// style: elStyle,
// };
// return (
// <div
// {...handleProps}
// aria-label={ariaLabel}
// aria-labelledby={ariaLabelledBy}
// aria-valuetext={ariaValueText}
// />
// );
// },
});

0
components/vc-slider/src/Range.jsx → components/vc-slider/src/Range.tsx
View File

0
components/vc-slider/src/Slider.jsx → components/vc-slider/src/Slider.tsx
View File

2
components/vc-slider/src/common/Marks.jsx → components/vc-slider/src/common/Marks.tsx
View File

@ -2,7 +2,7 @@ import supportsPassive from '../../../_util/supportsPassive';
import classNames from '../../../_util/classNames';
import { isValidElement } from '../../../_util/props-util';
const Marks = (_, { attrs, slots }) => {
const Marks = (_: any, { attrs, slots }: any) => {
const {
class: className,
vertical,

13
components/vc-slider/src/common/Steps.jsx → components/vc-slider/src/common/Steps.tsx
View File

@ -1,7 +1,16 @@
import { CSSProperties } from 'vue';
import classNames from '../../../_util/classNames';
import { VueNode } from '../../../_util/type';
import warning from '../../../_util/warning';
const calcPoints = (vertical, marks, dots, step, min, max) => {
const calcPoints = (
_vertical: boolean,
marks: Record<number, VueNode | { style?: CSSProperties; label?: string }>,
dots: boolean,
step: number,
min: number,
max: number,
) => {
warning(
dots ? step > 0 : true,
'Slider',
@ -20,7 +29,7 @@ const calcPoints = (vertical, marks, dots, step, min, max) => {
return points;
};
const Steps = (_, { attrs }) => {
const Steps = (_: any, { attrs }) => {
const {
prefixCls,
vertical,

0
components/vc-slider/src/common/Track.jsx → components/vc-slider/src/common/Track.tsx
View File

0
components/vc-slider/src/common/createSlider.jsx → components/vc-slider/src/common/createSlider.tsx
View File

87
components/vc-slider/src/createSliderWithTooltip.jsx
View File

@ -1,87 +0,0 @@
import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin';
import Tooltip from '../../vc-tooltip';
import { getOptionProps } from '../../_util/props-util';
import Handle from './Handle';
export default function createSliderWithTooltip(Component) {
return {
name: 'SliderTooltip',
inheritAttrs: false,
mixins: [BaseMixin, Component],
props: {
...Component.props,
tipFormatter: PropTypes.func.def(value => {
return value;
}),
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
tipProps: PropTypes.object.def(() => ({})),
getTooltipContainer: PropTypes.func.def(node => node.parentNode),
},
data() {
return {
visibles: {},
};
},
methods: {
handleTooltipVisibleChange(index, visible) {
this.setState(prevState => {
return {
visibles: {
...prevState.visibles,
[index]: visible,
},
};
});
},
handleWithTooltip({ value, dragging, index, disabled, ...restProps }) {
const { tipFormatter, tipProps, handleStyle, getTooltipContainer } = this.$props;
const {
prefixCls = 'rc-slider-tooltip',
overlay = tipFormatter(value),
placement = 'top',
visible = false,
...restTooltipProps
} = tipProps;
let handleStyleWithIndex;
if (Array.isArray(handleStyle)) {
handleStyleWithIndex = handleStyle[index] || handleStyle[0];
} else {
handleStyleWithIndex = handleStyle;
}
const tooltipProps = {
...restTooltipProps,
getTooltipContainer,
prefixCls,
overlay,
placement,
visible: (!disabled && (this.visibles[index] || dragging)) || visible,
key: index,
};
const handleProps = {
value,
...restProps,
onMouseenter: () => this.handleTooltipVisibleChange(index, true),
onMouseleave: () => this.handleTooltipVisibleChange(index, false),
style: handleStyleWithIndex,
};
return (
<Tooltip {...tooltipProps}>
<Handle {...handleProps} />
</Tooltip>
);
},
},
render() {
const componentProps = {
...getOptionProps(this),
handle: this.handleWithTooltip,
};
return <Component {...componentProps} />;
},
};
}

10
components/vc-slider/src/index.js
View File

@ -1,10 +0,0 @@
import Slider from './Slider';
import Range from './Range';
import Handle from './Handle';
import createSliderWithTooltip from './createSliderWithTooltip';
Slider.Range = Range;
Slider.Handle = Handle;
Slider.createSliderWithTooltip = createSliderWithTooltip;
export default Slider;
export { Range, Handle, createSliderWithTooltip };

8
components/vc-slider/src/index.ts Normal file
View File

@ -0,0 +1,8 @@
import Slider from './Slider';
import Range from './Range';
import Handle from './Handle';
Slider.Range = Range;
Slider.Handle = Handle;
export default Slider;
export { Range, Handle };

28
components/vc-slider/src/utils.js → components/vc-slider/src/utils.ts
View File

@ -1,7 +1,7 @@
import keyCode from '../../_util/KeyCode';
import { findDOMNode } from '../../_util/props-util';
export function isEventFromHandle(e, handles) {
export function isEventFromHandle(e: { target: HTMLElement }, handles) {
try {
return Object.keys(handles).some(
key => e.target === findDOMNode(handles[key]) || e.target === handles[key],
@ -11,15 +11,15 @@ export function isEventFromHandle(e, handles) {
}
}
export function isValueOutOfRange(value, { min, max }) {
export function isValueOutOfRange(value: number, { min, max }: { min?: number; max?: number }) {
return value < min || value > max;
}
export function isNotTouchEvent(e) {
export function isNotTouchEvent(e: TouchEvent) {
return e.touches.length > 1 || (e.type.toLowerCase() === 'touchend' && e.touches.length > 0);
}
export function getClosestPoint(val, { marks, step, min, max }) {
export function getClosestPoint(val: number, { marks, step, min, max }) {
const points = Object.keys(marks).map(parseFloat);
if (step !== null) {
const baseNum = 10 ** getPrecision(step);
@ -32,7 +32,7 @@ export function getClosestPoint(val, { marks, step, min, max }) {
return points[diffs.indexOf(Math.min(...diffs))];
}
export function getPrecision(step) {
export function getPrecision(step: number) {
const stepString = step.toString();
let precision = 0;
if (stepString.indexOf('.') >= 0) {
@ -41,7 +41,7 @@ export function getPrecision(step) {
return precision;
}
export function getMousePosition(vertical, e) {
export function getMousePosition(vertical: boolean, e: MouseEvent) {
let zoom = 1;
if (window.visualViewport) {
zoom = +(window.visualViewport.width / document.body.getBoundingClientRect().width).toFixed(2);
@ -49,7 +49,7 @@ export function getMousePosition(vertical, e) {
return (vertical ? e.clientY : e.pageX) / zoom;
}
export function getTouchPosition(vertical, e) {
export function getTouchPosition(vertical: boolean, e: TouchEvent) {
let zoom = 1;
if (window.visualViewport) {
zoom = +(window.visualViewport.width / document.body.getBoundingClientRect().width).toFixed(2);
@ -57,14 +57,14 @@ export function getTouchPosition(vertical, e) {
return (vertical ? e.touches[0].clientY : e.touches[0].pageX) / zoom;
}
export function getHandleCenterPosition(vertical, handle) {
export function getHandleCenterPosition(vertical: boolean, handle: HTMLElement) {
const coords = handle.getBoundingClientRect();
return vertical
? coords.top + coords.height * 0.5
: window.pageXOffset + coords.left + coords.width * 0.5;
}
export function ensureValueInRange(val, { max, min }) {
export function ensureValueInRange(val: number, { max, min }: { max?: number; min?: number }) {
if (val <= min) {
return min;
}
@ -74,13 +74,13 @@ export function ensureValueInRange(val, { max, min }) {
return val;
}
export function ensureValuePrecision(val, props) {
export function ensureValuePrecision(val: number, props: any) {
const { step } = props;
const closestPoint = isFinite(getClosestPoint(val, props)) ? getClosestPoint(val, props) : 0; // eslint-disable-line
return step === null ? closestPoint : parseFloat(closestPoint.toFixed(getPrecision(step)));
}
export function pauseEvent(e) {
export function pauseEvent(e: Event) {
e.stopPropagation();
e.preventDefault();
}
@ -103,7 +103,7 @@ export function calculateNextValue(func, value, props) {
return value;
}
export function getKeyboardValueMutator(e, vertical, reverse) {
export function getKeyboardValueMutator(e: KeyboardEvent, vertical: boolean, reverse: boolean) {
const increase = 'increase';
const decrease = 'decrease';
let method = increase;
@ -122,9 +122,9 @@ export function getKeyboardValueMutator(e, vertical, reverse) {
break;
case keyCode.END:
return (value, props) => props.max;
return (_value, props) => props.max;
case keyCode.HOME:
return (value, props) => props.min;
return (_value, props) => props.min;
case keyCode.PAGE_UP:
return (value, props) => value + props.step * 2;
case keyCode.PAGE_DOWN:

2
v2-doc

@ -1 +1 @@
Subproject commit 157cce105e1f0a369658dfb29cc802ebc09d0d93
Subproject commit 36b2776cbf91e0db3b14d40d14879417490c56eb