From 93b64061dba6773c61fba6036552fd798958b448 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 13 Oct 2020 22:26:56 +0800 Subject: [PATCH] refactor: some util by ts --- components/_util/{KeyCode.js => KeyCode.ts} | 173 +++++++++--------- components/_util/StateMixin.js | 10 - .../_util/{classNames.js => classNames.ts} | 8 +- components/_util/{easings.js => easings.ts} | 2 +- components/_util/{env.js => env.ts} | 4 - .../_util/{isNumeric.js => isNumeric.ts} | 3 +- components/_util/{isValid.js => isValid.ts} | 2 +- .../_util/{pickAttrs.js => pickAttrs.ts} | 10 +- components/_util/{raf.js => raf.ts} | 16 +- components/_util/{scrollTo.js => scrollTo.ts} | 20 +- components/_util/{setStyle.js => setStyle.ts} | 9 +- .../{styleChecker.js => styleChecker.ts} | 2 +- ...onFrame.js => throttleByAnimationFrame.ts} | 14 +- .../{triggerEvent.js => triggerEvent.ts} | 2 +- 14 files changed, 141 insertions(+), 134 deletions(-) rename components/_util/{KeyCode.js => KeyCode.ts} (66%) delete mode 100644 components/_util/StateMixin.js rename components/_util/{classNames.js => classNames.ts} (80%) rename components/_util/{easings.js => easings.ts} (64%) rename components/_util/{env.js => env.ts} (60%) rename components/_util/{isNumeric.js => isNumeric.ts} (64%) rename components/_util/{isValid.js => isValid.ts} (67%) rename components/_util/{pickAttrs.js => pickAttrs.ts} (92%) rename components/_util/{raf.js => raf.ts} (62%) rename components/_util/{scrollTo.js => scrollTo.ts} (66%) rename components/_util/{setStyle.js => setStyle.ts} (69%) rename components/_util/{styleChecker.js => styleChecker.ts} (85%) rename components/_util/{throttleByAnimationFrame.js => throttleByAnimationFrame.ts} (65%) rename components/_util/{triggerEvent.js => triggerEvent.ts} (73%) diff --git a/components/_util/KeyCode.js b/components/_util/KeyCode.ts similarity index 66% rename from components/_util/KeyCode.js rename to components/_util/KeyCode.ts index 547263b9d..2746f9e9a 100644 --- a/components/_util/KeyCode.js +++ b/components/_util/KeyCode.ts @@ -425,97 +425,98 @@ const KeyCode = { * WIN_IME */ WIN_IME: 229, -}; -/* - whether text and modified key is entered at the same time. - */ -KeyCode.isTextModifyingKeyEvent = function isTextModifyingKeyEvent(e) { - const keyCode = e.keyCode; - if ( - (e.altKey && !e.ctrlKey) || - e.metaKey || - // Function keys don't generate text - (keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12) - ) { - return false; - } - - // The following keys are quite harmless, even in combination with - // CTRL, ALT or SHIFT. - switch (keyCode) { - case KeyCode.ALT: - case KeyCode.CAPS_LOCK: - case KeyCode.CONTEXT_MENU: - case KeyCode.CTRL: - case KeyCode.DOWN: - case KeyCode.END: - case KeyCode.ESC: - case KeyCode.HOME: - case KeyCode.INSERT: - case KeyCode.LEFT: - case KeyCode.MAC_FF_META: - case KeyCode.META: - case KeyCode.NUMLOCK: - case KeyCode.NUM_CENTER: - case KeyCode.PAGE_DOWN: - case KeyCode.PAGE_UP: - case KeyCode.PAUSE: - case KeyCode.PRINT_SCREEN: - case KeyCode.RIGHT: - case KeyCode.SHIFT: - case KeyCode.UP: - case KeyCode.WIN_KEY: - case KeyCode.WIN_KEY_RIGHT: + // ======================== Function ======================== + /** + * whether text and modified key is entered at the same time. + */ + isTextModifyingKeyEvent: function isTextModifyingKeyEvent(e: KeyboardEvent) { + const { keyCode } = e; + if ( + (e.altKey && !e.ctrlKey) || + e.metaKey || + // Function keys don't generate text + (keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12) + ) { return false; - default: + } + + // The following keys are quite harmless, even in combination with + // CTRL, ALT or SHIFT. + switch (keyCode) { + case KeyCode.ALT: + case KeyCode.CAPS_LOCK: + case KeyCode.CONTEXT_MENU: + case KeyCode.CTRL: + case KeyCode.DOWN: + case KeyCode.END: + case KeyCode.ESC: + case KeyCode.HOME: + case KeyCode.INSERT: + case KeyCode.LEFT: + case KeyCode.MAC_FF_META: + case KeyCode.META: + case KeyCode.NUMLOCK: + case KeyCode.NUM_CENTER: + case KeyCode.PAGE_DOWN: + case KeyCode.PAGE_UP: + case KeyCode.PAUSE: + case KeyCode.PRINT_SCREEN: + case KeyCode.RIGHT: + case KeyCode.SHIFT: + case KeyCode.UP: + case KeyCode.WIN_KEY: + case KeyCode.WIN_KEY_RIGHT: + return false; + default: + return true; + } + }, + + /** + * whether character is entered. + */ + isCharacterKey: function isCharacterKey(keyCode: number) { + if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) { return true; - } -}; + } -/* - whether character is entered. - */ -KeyCode.isCharacterKey = function isCharacterKey(keyCode) { - if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) { - return true; - } - - if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) { - return true; - } - - if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) { - return true; - } - - // Safari sends zero key code for non-latin characters. - if (window.navigation.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) { - return true; - } - - switch (keyCode) { - case KeyCode.SPACE: - case KeyCode.QUESTION_MARK: - case KeyCode.NUM_PLUS: - case KeyCode.NUM_MINUS: - case KeyCode.NUM_PERIOD: - case KeyCode.NUM_DIVISION: - case KeyCode.SEMICOLON: - case KeyCode.DASH: - case KeyCode.EQUALS: - case KeyCode.COMMA: - case KeyCode.PERIOD: - case KeyCode.SLASH: - case KeyCode.APOSTROPHE: - case KeyCode.SINGLE_QUOTE: - case KeyCode.OPEN_SQUARE_BRACKET: - case KeyCode.BACKSLASH: - case KeyCode.CLOSE_SQUARE_BRACKET: + if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) { return true; - default: - return false; - } + } + + if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) { + return true; + } + + // Safari sends zero key code for non-latin characters. + if (window.navigator.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) { + return true; + } + + switch (keyCode) { + case KeyCode.SPACE: + case KeyCode.QUESTION_MARK: + case KeyCode.NUM_PLUS: + case KeyCode.NUM_MINUS: + case KeyCode.NUM_PERIOD: + case KeyCode.NUM_DIVISION: + case KeyCode.SEMICOLON: + case KeyCode.DASH: + case KeyCode.EQUALS: + case KeyCode.COMMA: + case KeyCode.PERIOD: + case KeyCode.SLASH: + case KeyCode.APOSTROPHE: + case KeyCode.SINGLE_QUOTE: + case KeyCode.OPEN_SQUARE_BRACKET: + case KeyCode.BACKSLASH: + case KeyCode.CLOSE_SQUARE_BRACKET: + return true; + default: + return false; + } + }, }; export default KeyCode; diff --git a/components/_util/StateMixin.js b/components/_util/StateMixin.js deleted file mode 100644 index d2ba6f938..000000000 --- a/components/_util/StateMixin.js +++ /dev/null @@ -1,10 +0,0 @@ -export default { - methods: { - setState(state, callback) { - Object.assign(this.$data, state); - this.$nextTick(() => { - callback && callback(); - }); - }, - }, -}; diff --git a/components/_util/classNames.js b/components/_util/classNames.ts similarity index 80% rename from components/_util/classNames.js rename to components/_util/classNames.ts index 55875ffb7..b5832326f 100644 --- a/components/_util/classNames.js +++ b/components/_util/classNames.ts @@ -1,8 +1,8 @@ import { isArray, isString, isObject } from './util'; -function classNames() { - let classes = []; - for (let i = 0; i < arguments.length; i++) { - const value = arguments[i]; +function classNames(...args: any[]) { + const classes = []; + for (let i = 0; i < args.length; i++) { + const value = args[i]; if (!value) continue; if (isString(value)) { classes.push(value); diff --git a/components/_util/easings.js b/components/_util/easings.ts similarity index 64% rename from components/_util/easings.js rename to components/_util/easings.ts index e11ab904d..a71ac8f22 100644 --- a/components/_util/easings.js +++ b/components/_util/easings.ts @@ -1,4 +1,4 @@ -export function easeInOutCubic(t, b, c, d) { +export function easeInOutCubic(t: number, b: number, c: number, d: number) { const cc = c - b; t /= d / 2; if (t < 1) { diff --git a/components/_util/env.js b/components/_util/env.ts similarity index 60% rename from components/_util/env.js rename to components/_util/env.ts index 5b500008a..5dc106191 100644 --- a/components/_util/env.js +++ b/components/_util/env.ts @@ -1,14 +1,10 @@ /* eslint-disable no-undef */ // Browser environment sniffing export const inBrowser = typeof window !== 'undefined'; -export const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform; -export const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase(); export const UA = inBrowser && window.navigator.userAgent.toLowerCase(); export const isIE = UA && /msie|trident/.test(UA); export const isIE9 = UA && UA.indexOf('msie 9.0') > 0; export const isEdge = UA && UA.indexOf('edge/') > 0; -export const isAndroid = (UA && UA.indexOf('android') > 0) || weexPlatform === 'android'; -export const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || weexPlatform === 'ios'; export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge; export const isPhantomJS = UA && /phantomjs/.test(UA); export const isFF = UA && UA.match(/firefox\/(\d+)/); diff --git a/components/_util/isNumeric.js b/components/_util/isNumeric.ts similarity index 64% rename from components/_util/isNumeric.js rename to components/_util/isNumeric.ts index cfe09479b..2545ed60f 100644 --- a/components/_util/isNumeric.js +++ b/components/_util/isNumeric.ts @@ -1,4 +1,5 @@ -const isNumeric = value => { +const isNumeric = (value: any): boolean => { return !isNaN(parseFloat(value)) && isFinite(value); }; + export default isNumeric; diff --git a/components/_util/isValid.js b/components/_util/isValid.ts similarity index 67% rename from components/_util/isValid.js rename to components/_util/isValid.ts index c4536912e..c89b176e7 100644 --- a/components/_util/isValid.js +++ b/components/_util/isValid.ts @@ -1,4 +1,4 @@ -const isValid = value => { +const isValid = (value: any): boolean => { return value !== undefined && value !== null && value !== ''; }; export default isValid; diff --git a/components/_util/pickAttrs.js b/components/_util/pickAttrs.ts similarity index 92% rename from components/_util/pickAttrs.js rename to components/_util/pickAttrs.ts index 2533eceab..072c7ac0f 100644 --- a/components/_util/pickAttrs.js +++ b/components/_util/pickAttrs.ts @@ -25,16 +25,22 @@ const propList = `${attributes} ${eventsName}`.split(/[\s\n]+/); const ariaPrefix = 'aria-'; const dataPrefix = 'data-'; -function match(key, prefix) { +function match(key: string, prefix: string) { return key.indexOf(prefix) === 0; } +export interface PickConfig { + aria?: boolean; + data?: boolean; + attr?: boolean; +} + /** * Picker props from exist props with filter * @param props Passed props * @param ariaOnly boolean | { aria?: boolean; data?: boolean; attr?: boolean; } filter config */ -export default function pickAttrs(props, ariaOnly = false) { +export default function pickAttrs(props: object, ariaOnly: boolean | PickConfig = false) { let mergedConfig; if (ariaOnly === false) { mergedConfig = { diff --git a/components/_util/raf.js b/components/_util/raf.ts similarity index 62% rename from components/_util/raf.js rename to components/_util/raf.ts index e4c4d28a5..6659e3d7d 100644 --- a/components/_util/raf.js +++ b/components/_util/raf.ts @@ -1,12 +1,16 @@ import raf from 'raf'; +interface RafMap { + [id: number]: number; +} + let id = 0; -const ids = {}; +const ids: RafMap = {}; // Support call raf with delay specified frame -export default function wrapperRaf(callback, delayFrames = 1) { - const myId = id++; - let restFrames = delayFrames; +export default function wrapperRaf(callback: () => void, delayFrames = 1): number { + const myId: number = id++; + let restFrames: number = delayFrames; function internalCallback() { restFrames -= 1; @@ -24,9 +28,11 @@ export default function wrapperRaf(callback, delayFrames = 1) { return myId; } -wrapperRaf.cancel = function(pid) { +wrapperRaf.cancel = function cancel(pid?: number) { if (pid === undefined) return; + raf.cancel(ids[pid]); delete ids[pid]; }; + wrapperRaf.ids = ids; // export this for test usage diff --git a/components/_util/scrollTo.js b/components/_util/scrollTo.ts similarity index 66% rename from components/_util/scrollTo.js rename to components/_util/scrollTo.ts index efdb25200..8f4115cba 100644 --- a/components/_util/scrollTo.js +++ b/components/_util/scrollTo.ts @@ -2,16 +2,16 @@ import raf from 'raf'; import getScroll from './getScroll'; import { easeInOutCubic } from './easings'; -// interface ScrollToOptions { -// /** Scroll container, default as window */ -// getContainer?: () => HTMLElement | Window; -// /** Scroll end callback */ -// callback?: () => any; -// /** Animation duration, default as 450 */ -// duration?: number; -// } +interface ScrollToOptions { + /** Scroll container, default as window */ + getContainer?: () => HTMLElement | Window; + /** Scroll end callback */ + callback?: () => any; + /** Animation duration, default as 450 */ + duration?: number; +} -export default function scrollTo(y, options = {}) { +export default function scrollTo(y: number, options: ScrollToOptions = {}) { const { getContainer = () => window, callback, duration = 450 } = options; const container = getContainer(); @@ -25,7 +25,7 @@ export default function scrollTo(y, options = {}) { if (container === window) { window.scrollTo(window.pageXOffset, nextScrollTop); } else { - container.scrollTop = nextScrollTop; + (container as HTMLElement).scrollTop = nextScrollTop; } if (time < duration) { raf(frameFunc); diff --git a/components/_util/setStyle.js b/components/_util/setStyle.ts similarity index 69% rename from components/_util/setStyle.js rename to components/_util/setStyle.ts index 3d44e3ac3..30a16af42 100644 --- a/components/_util/setStyle.js +++ b/components/_util/setStyle.ts @@ -1,12 +1,17 @@ +import { CSSProperties } from 'vue'; + /** * Easy to set element style, return previous style * IE browser compatible(IE browser doesn't merge overflow style, need to set it separately) * https://github.com/ant-design/ant-design/issues/19393 * */ -function setStyle(style, options = {}) { +export interface SetStyleOptions { + element?: HTMLElement; +} +function setStyle(style: CSSProperties, options: SetStyleOptions = {}): CSSProperties { const { element = document.body } = options; - const oldStyle = {}; + const oldStyle: CSSProperties = {}; const styleKeys = Object.keys(style); diff --git a/components/_util/styleChecker.js b/components/_util/styleChecker.ts similarity index 85% rename from components/_util/styleChecker.js rename to components/_util/styleChecker.ts index 967f0422f..6554faea8 100644 --- a/components/_util/styleChecker.js +++ b/components/_util/styleChecker.ts @@ -1,4 +1,4 @@ -const isStyleSupport = styleName => { +const isStyleSupport = (styleName: string | Array): boolean => { if (typeof window !== 'undefined' && window.document && window.document.documentElement) { const styleNameList = Array.isArray(styleName) ? styleName : [styleName]; const { documentElement } = window.document; diff --git a/components/_util/throttleByAnimationFrame.js b/components/_util/throttleByAnimationFrame.ts similarity index 65% rename from components/_util/throttleByAnimationFrame.js rename to components/_util/throttleByAnimationFrame.ts index 6bd328542..78e9ee036 100644 --- a/components/_util/throttleByAnimationFrame.js +++ b/components/_util/throttleByAnimationFrame.ts @@ -1,31 +1,33 @@ import raf from 'raf'; -export default function throttleByAnimationFrame(fn) { - let requestId; +export default function throttleByAnimationFrame(fn: (...args: any[]) => void) { + let requestId: number | null; - const later = args => () => { + const later = (args: any[]) => () => { requestId = null; fn(...args); }; - const throttled = (...args) => { + const throttled = (...args: any[]) => { if (requestId == null) { requestId = raf(later(args)); } }; - throttled.cancel = () => raf.cancel(requestId); + (throttled as any).cancel = () => raf.cancel(requestId!); return throttled; } export function throttleByAnimationFrameDecorator() { - return function(target, key, descriptor) { + // eslint-disable-next-line func-names + return function(target: any, key: string, descriptor: any) { const fn = descriptor.value; let definingProperty = false; return { configurable: true, get() { + // eslint-disable-next-line no-prototype-builtins if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) { return fn; } diff --git a/components/_util/triggerEvent.js b/components/_util/triggerEvent.ts similarity index 73% rename from components/_util/triggerEvent.js rename to components/_util/triggerEvent.ts index 40b37473d..3c8cfc541 100644 --- a/components/_util/triggerEvent.js +++ b/components/_util/triggerEvent.ts @@ -1,4 +1,4 @@ -export default function triggerEvent(el, type) { +export default function triggerEvent(el: Element, type: string) { if ('createEvent' in document) { // modern browsers, IE9+ const e = document.createEvent('HTMLEvents');