diff --git a/.gitignore b/.gitignore index 9108a84e4..665bb9350 100644 --- a/.gitignore +++ b/.gitignore @@ -36,9 +36,6 @@ build/Release node_modules/ jspm_packages/ -# Typescript v1 declaration files -typings/ - # Optional npm cache directory .npm diff --git a/antdv-demo b/antdv-demo index 83ab203d1..955716e4e 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 83ab203d1ab9861132f6efd1e74015507c0e45f6 +Subproject commit 955716e4e9533bc628c651d6ba6c8d1eb9b21a9d diff --git a/components/_util/callMoment.ts b/components/_util/callMoment.ts deleted file mode 100644 index 3bb9a981d..000000000 --- a/components/_util/callMoment.ts +++ /dev/null @@ -1,4 +0,0 @@ -// https://github.com/moment/moment/issues/3650 -export default function callMoment(moment, ...args) { - return (moment.default || moment)(...args); -} diff --git a/components/_util/createRef.js b/components/_util/createRef.js deleted file mode 100644 index 9e98baf1a..000000000 --- a/components/_util/createRef.js +++ /dev/null @@ -1,8 +0,0 @@ -function createRef() { - const func = function setRef(node) { - func.current = node; - }; - return func; -} - -export default createRef; diff --git a/components/_util/createRef.ts b/components/_util/createRef.ts new file mode 100644 index 000000000..a6cac6019 --- /dev/null +++ b/components/_util/createRef.ts @@ -0,0 +1,12 @@ +interface RefObject extends Function { + current?: T | null; +} + +function createRef(): RefObject { + const func: RefObject = (node: T | null) => { + func.current = node; + }; + return func; +} + +export default createRef; diff --git a/components/_util/css-animation/Event.js b/components/_util/css-animation/Event.ts similarity index 80% rename from components/_util/css-animation/Event.js rename to components/_util/css-animation/Event.ts index f156171e1..507d9d484 100644 --- a/components/_util/css-animation/Event.js +++ b/components/_util/css-animation/Event.ts @@ -1,4 +1,4 @@ -const START_EVENT_NAME_MAP = { +const START_EVENT_NAME_MAP: Record> = { transitionstart: { transition: 'transitionstart', WebkitTransition: 'webkitTransitionStart', @@ -16,7 +16,7 @@ const START_EVENT_NAME_MAP = { }, }; -const END_EVENT_NAME_MAP = { +const END_EVENT_NAME_MAP: Record> = { transitionend: { transition: 'transitionend', WebkitTransition: 'webkitTransitionEnd', @@ -34,8 +34,8 @@ const END_EVENT_NAME_MAP = { }, }; -const startEvents = []; -const endEvents = []; +const startEvents: any[] = []; +const endEvents: any[] = []; function detectEvents() { const testEl = document.createElement('div'); @@ -51,7 +51,7 @@ function detectEvents() { delete END_EVENT_NAME_MAP.transitionend.transition; } - function process(EVENT_NAME_MAP, events) { + function process(EVENT_NAME_MAP: Record>, events: any[]) { for (const baseEventName in EVENT_NAME_MAP) { if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) { const baseEvents = EVENT_NAME_MAP[baseEventName]; @@ -73,11 +73,11 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') { detectEvents(); } -function addEventListener(node, eventName, eventListener) { +function addEventListener(node: Element, eventName: string, eventListener: any) { node.addEventListener(eventName, eventListener, false); } -function removeEventListener(node, eventName, eventListener) { +function removeEventListener(node: Element, eventName: string, eventListener: any) { node.removeEventListener(eventName, eventListener, false); } @@ -85,7 +85,7 @@ const TransitionEvents = { // Start events startEvents, - addStartEventListener(node, eventListener) { + addStartEventListener(node: Element, eventListener: any) { if (startEvents.length === 0) { window.setTimeout(eventListener, 0); return; @@ -95,7 +95,7 @@ const TransitionEvents = { }); }, - removeStartEventListener(node, eventListener) { + removeStartEventListener(node: Element, eventListener: any) { if (startEvents.length === 0) { return; } @@ -107,7 +107,7 @@ const TransitionEvents = { // End events endEvents, - addEndEventListener(node, eventListener) { + addEndEventListener(node: Element, eventListener: any) { if (endEvents.length === 0) { window.setTimeout(eventListener, 0); return; @@ -117,7 +117,7 @@ const TransitionEvents = { }); }, - removeEndEventListener(node, eventListener) { + removeEndEventListener(node: Element, eventListener: any) { if (endEvents.length === 0) { return; } diff --git a/components/_util/css-animation/index.js b/components/_util/css-animation/index.ts similarity index 79% rename from components/_util/css-animation/index.js rename to components/_util/css-animation/index.ts index e7d2f45db..fb066136d 100644 --- a/components/_util/css-animation/index.js +++ b/components/_util/css-animation/index.ts @@ -14,7 +14,13 @@ const capitalPrefixes = [ ]; const prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', '']; -function getStyleProperty(node, name) { +interface CustomHTMLElement extends HTMLElement { + rcEndAnimTimeout?: any; + rcAnimTimeout?: any; + rcEndListener?: Function | null; +} + +function getStyleProperty(node: HTMLElement, name: string) { // old ff need null, https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle const style = window.getComputedStyle(node, null); let ret = ''; @@ -27,7 +33,7 @@ function getStyleProperty(node, name) { return ret; } -function fixBrowserByTimeout(node) { +function fixBrowserByTimeout(node: CustomHTMLElement) { if (isCssAnimationSupported) { const transitionDelay = parseFloat(getStyleProperty(node, 'transition-delay')) || 0; const transitionDuration = parseFloat(getStyleProperty(node, 'transition-duration')) || 0; @@ -44,20 +50,29 @@ function fixBrowserByTimeout(node) { } } -function clearBrowserBugTimeout(node) { +function clearBrowserBugTimeout(node: CustomHTMLElement) { if (node.rcEndAnimTimeout) { clearTimeout(node.rcEndAnimTimeout); node.rcEndAnimTimeout = null; } } - -const cssAnimation = (node, transitionName, endCallback) => { +interface TransitionName { + name?: string; + active?: string; +} +const cssAnimation = ( + node: CustomHTMLElement, + transitionName: string | TransitionName, + endCallback?: any, +) => { const nameIsObj = typeof transitionName === 'object'; - const className = nameIsObj ? transitionName.name : transitionName; - const activeClassName = nameIsObj ? transitionName.active : `${transitionName}-active`; + const className = nameIsObj ? (transitionName as TransitionName).name : transitionName; + const activeClassName = nameIsObj + ? (transitionName as TransitionName).active + : `${transitionName}-active`; let end = endCallback; let start; - let active; + let active: any; const nodeClasses = classes(node); if (endCallback && Object.prototype.toString.call(endCallback) === '[object Object]') { @@ -70,7 +85,7 @@ const cssAnimation = (node, transitionName, endCallback) => { node.rcEndListener(); } - node.rcEndListener = e => { + node.rcEndListener = (e: Event) => { if (e && e.target !== node) { return; } @@ -124,12 +139,12 @@ const cssAnimation = (node, transitionName, endCallback) => { }; }; -cssAnimation.style = (node, style, callback) => { +cssAnimation.style = (node: CustomHTMLElement, style: Record, callback?: Function) => { if (node.rcEndListener) { node.rcEndListener(); } - node.rcEndListener = e => { + node.rcEndListener = (e: Event) => { if (e && e.target !== node) { return; } @@ -156,7 +171,7 @@ cssAnimation.style = (node, style, callback) => { node.rcAnimTimeout = requestAnimationTimeout(() => { for (const s in style) { if (style.hasOwnProperty(s)) { - node.style[s] = style[s]; + node.style[s as any] = style[s]; } } node.rcAnimTimeout = null; @@ -164,7 +179,7 @@ cssAnimation.style = (node, style, callback) => { }, 0); }; -cssAnimation.setTransition = (node, p, value) => { +cssAnimation.setTransition = (node: HTMLElement, p?: any, value?: any) => { let property = p; let v = value; if (value === undefined) { @@ -173,7 +188,7 @@ cssAnimation.setTransition = (node, p, value) => { } property = property || ''; capitalPrefixes.forEach(prefix => { - node.style[`${prefix}Transition${property}`] = v; + node.style[`${prefix}Transition${property}` as any] = v; }); }; diff --git a/components/_util/openAnimation.ts b/components/_util/openAnimation.ts index 0cd76cdc4..25960fbdf 100644 --- a/components/_util/openAnimation.ts +++ b/components/_util/openAnimation.ts @@ -2,10 +2,10 @@ import cssAnimation from './css-animation'; import raf from 'raf'; import { nextTick } from 'vue'; -function animate(node, show, done) { - let height; - let requestAnimationFrameId; - let appearRequestAnimationFrameId; +function animate(node: HTMLElement, show: boolean, done: () => void) { + let height: number; + let requestAnimationFrameId: number; + let appearRequestAnimationFrameId: number; return cssAnimation(node, 'ant-motion-collapse-legacy', { start() { if (appearRequestAnimationFrameId) { @@ -54,12 +54,12 @@ function animate(node, show, done) { } const animation = { - onEnter(node, done) { + onEnter(node: HTMLElement, done: () => void) { nextTick(() => { animate(node, true, done); }); }, - onLeave(node, done) { + onLeave(node: HTMLElement, done: () => void) { return animate(node, false, done); }, }; diff --git a/package.json b/package.json index 4ab392e1b..f2e8bf701 100644 --- a/package.json +++ b/package.json @@ -197,6 +197,7 @@ }, "dependencies": { "@ant-design-vue/use": "^0.0.1-0", + "@ant-design/css-animation": "^1.7.3", "@ant-design/icons-vue": "^5.1.5", "@babel/runtime": "^7.10.5", "@simonwep/pickr": "~1.7.0", diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts new file mode 100644 index 000000000..1410386ff --- /dev/null +++ b/typings/custom-typings.d.ts @@ -0,0 +1,2 @@ +declare module '@ant-design/css-animation*'; +declare module 'component-classes';