From ab45482ce376aeb5c49a8bc0726c196314e95192 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ckonghai=E2=80=9D?= <574980606@qq.com> Date: Thu, 11 Aug 2022 17:04:57 +0800 Subject: [PATCH 1/4] refactor: remove javascript , use typescript rewrite --- src/Children/{mapSelf.js => mapSelf.ts} | 4 +- src/Children/toArray.ts | 2 +- ...ddEventListener.js => addEventListener.ts} | 11 ++- src/Dom/{class.js => class.ts} | 8 +- src/Dom/{css.js => css.ts} | 78 ++++++++++++------- src/Dom/dynamicCSS.ts | 17 ++-- src/Dom/findDOMNode.ts | 4 +- src/Dom/focus.ts | 18 ++++- src/Dom/isVisible.ts | 14 ++-- src/Dom/scrollLocker.ts | 13 ++-- src/Dom/styleChecker.ts | 2 +- src/Dom/{support.js => support.ts} | 10 ++- src/composeProps.ts | 2 +- ...edFunction.js => createChainedFunction.ts} | 2 +- src/debug/{diff.js => diff.ts} | 32 +++----- src/{deprecated.js => deprecated.ts} | 8 +- src/{guid.js => guid.ts} | 0 src/isMobile.ts | 7 +- ...lingEffect.js => switchScrollingEffect.ts} | 4 +- src/{warn.js => warn.ts} | 2 +- 20 files changed, 136 insertions(+), 102 deletions(-) rename src/Children/{mapSelf.js => mapSelf.ts} (52%) rename src/Dom/{addEventListener.js => addEventListener.ts} (62%) rename src/Dom/{class.js => class.ts} (66%) rename src/Dom/{css.js => css.ts} (52%) rename src/Dom/{support.js => support.ts} (82%) rename src/{createChainedFunction.js => createChainedFunction.ts} (86%) rename src/debug/{diff.js => diff.ts} (53%) rename src/{deprecated.js => deprecated.ts} (56%) rename src/{guid.js => guid.ts} (100%) rename src/{switchScrollingEffect.js => switchScrollingEffect.ts} (93%) rename src/{warn.js => warn.ts} (83%) diff --git a/src/Children/mapSelf.js b/src/Children/mapSelf.ts similarity index 52% rename from src/Children/mapSelf.js rename to src/Children/mapSelf.ts index 1c998e6c..f76da807 100644 --- a/src/Children/mapSelf.js +++ b/src/Children/mapSelf.ts @@ -1,10 +1,10 @@ import React from 'react'; -function mirror(o) { +function mirror(o: T): T { return o; } -export default function mapSelf(children) { +export default function mapSelf(children: C | ReadonlyArray) { // return ReactFragment return React.Children.map(children, mirror); } diff --git a/src/Children/toArray.ts b/src/Children/toArray.ts index 91ba5a41..37331cd6 100644 --- a/src/Children/toArray.ts +++ b/src/Children/toArray.ts @@ -11,7 +11,7 @@ export default function toArray( ): React.ReactElement[] { let ret: React.ReactElement[] = []; - React.Children.forEach(children, (child: any) => { + React.Children.forEach(children, (child: any | any[]) => { if ((child === undefined || child === null) && !option.keepEmpty) { return; } diff --git a/src/Dom/addEventListener.js b/src/Dom/addEventListener.ts similarity index 62% rename from src/Dom/addEventListener.js rename to src/Dom/addEventListener.ts index eacf3d07..97338c5e 100644 --- a/src/Dom/addEventListener.js +++ b/src/Dom/addEventListener.ts @@ -1,9 +1,14 @@ import ReactDOM from 'react-dom'; -export default function addEventListenerWrap(target, eventType, cb, option) { +export default function addEventListenerWrap( + target: HTMLElement | Element | Window | Document, + eventType: keyof DocumentEventMap, + cb: (a: any) => any, + option: boolean | AddEventListenerOptions, +) { /* eslint camelcase: 2 */ const callback = ReactDOM.unstable_batchedUpdates - ? function run(e) { + ? function run(e: any) { ReactDOM.unstable_batchedUpdates(cb, e); } : cb; @@ -11,7 +16,7 @@ export default function addEventListenerWrap(target, eventType, cb, option) { target.addEventListener(eventType, callback, option); } return { - remove: () => { + remove() { if (target.removeEventListener) { target.removeEventListener(eventType, callback, option); } diff --git a/src/Dom/class.js b/src/Dom/class.ts similarity index 66% rename from src/Dom/class.js rename to src/Dom/class.ts index b72c70b3..12d43d3c 100644 --- a/src/Dom/class.js +++ b/src/Dom/class.ts @@ -1,12 +1,12 @@ -export function hasClass(node, className) { +export function hasClass(node: Element, className: string): boolean { if (node.classList) { return node.classList.contains(className); } const originClass = node.className; - return ` ${originClass} `.indexOf(` ${className} `) > -1; + return ` ${originClass} `.includes(` ${className} `); } -export function addClass(node, className) { +export function addClass(node: Element, className: string): void { if (node.classList) { node.classList.add(className); } else { @@ -16,7 +16,7 @@ export function addClass(node, className) { } } -export function removeClass(node, className) { +export function removeClass(node: Element, className: string): void { if (node.classList) { node.classList.remove(className); } else { diff --git a/src/Dom/css.js b/src/Dom/css.ts similarity index 52% rename from src/Dom/css.js rename to src/Dom/css.ts index 1948dc8e..7ed7829a 100644 --- a/src/Dom/css.js +++ b/src/Dom/css.ts @@ -5,18 +5,20 @@ const removePixel = { left: true, top: true, }; + const floatMap = { cssFloat: 1, styleFloat: 1, float: 1, }; -function getComputedStyle(node) { - return node.nodeType === 1 ? - node.ownerDocument.defaultView.getComputedStyle(node, null) : {}; +function getComputedStyle(node: HTMLElement) { + return node.nodeType === 1 + ? node.ownerDocument.defaultView.getComputedStyle(node, null) + : {}; } -function getStyleValue(node, type, value) { +function getStyleValue(node: HTMLElement, type: string, value: string) { type = type.toLowerCase(); if (value === 'auto') { if (type === 'height') { @@ -29,21 +31,31 @@ function getStyleValue(node, type, value) { if (!(type in removePixel)) { removePixel[type] = PIXEL_PATTERN.test(type); } - return removePixel[type] ? (parseFloat(value) || 0) : value; + return removePixel[type] ? parseFloat(value) || 0 : value; } -export function get(node, name) { +export function get(node: HTMLElement, name: string) { const length = arguments.length; const style = getComputedStyle(node); - name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name; + name = floatMap[name] + ? 'cssFloat' in node.style + ? 'cssFloat' + : 'styleFloat' + : name; - return (length === 1) ? style : getStyleValue(node, name, style[name] || node.style[name]); + return length === 1 + ? style + : getStyleValue(node, name, style[name] || node.style[name]); } -export function set(node, name, value) { +export function set(node: HTMLElement, name: string, value: string) { const length = arguments.length; - name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name; + name = floatMap[name] + ? 'cssFloat' in node.style + ? 'cssFloat' + : 'styleFloat' + : name; if (length === 3) { if (typeof value === 'number' && PIXEL_PATTERN.test(name)) { value = `${value}px`; @@ -51,7 +63,7 @@ export function set(node, name, value) { node.style[name] = value; // Number return value; } - for (const x in name) { + for (const x in name as any) { if (name.hasOwnProperty(x)) { set(node, x, name[x]); } @@ -59,14 +71,14 @@ export function set(node, name, value) { return getComputedStyle(node); } -export function getOuterWidth(el) { +export function getOuterWidth(el: HTMLElement): number { if (el === document.body) { return document.documentElement.clientWidth; } return el.offsetWidth; } -export function getOuterHeight(el) { +export function getOuterHeight(el: HTMLElement): number { if (el === document.body) { return window.innerHeight || document.documentElement.clientHeight; } @@ -74,40 +86,50 @@ export function getOuterHeight(el) { } export function getDocSize() { - const width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth); - const height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); + const width = Math.max( + document.documentElement.scrollWidth, + document.body.scrollWidth, + ); + const height = Math.max( + document.documentElement.scrollHeight, + document.body.scrollHeight, + ); - return { - width, - height, - }; + return { width, height }; } export function getClientSize() { const width = document.documentElement.clientWidth; const height = window.innerHeight || document.documentElement.clientHeight; - return { - width, - height, - }; + return { width, height }; } export function getScroll() { return { - scrollLeft: Math.max(document.documentElement.scrollLeft, document.body.scrollLeft), - scrollTop: Math.max(document.documentElement.scrollTop, document.body.scrollTop), + scrollLeft: Math.max( + document.documentElement.scrollLeft, + document.body.scrollLeft, + ), + scrollTop: Math.max( + document.documentElement.scrollTop, + document.body.scrollTop, + ), }; } -export function getOffset(node) { +export function getOffset(node: HTMLElement | Element) { const box = node.getBoundingClientRect(); const docElem = document.documentElement; // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft return { - left: box.left + (window.pageXOffset || docElem.scrollLeft) - + left: + box.left + + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0), - top: box.top + (window.pageYOffset || docElem.scrollTop) - + top: + box.top + + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || document.body.clientTop || 0), }; } diff --git a/src/Dom/dynamicCSS.ts b/src/Dom/dynamicCSS.ts index 04f247c6..186733e4 100644 --- a/src/Dom/dynamicCSS.ts +++ b/src/Dom/dynamicCSS.ts @@ -1,13 +1,6 @@ import canUseDom from './canUseDom'; -const MARK_KEY = `rc-util-key` as any; - -function getMark({ mark }: Options = {}) { - if (mark) { - return mark.startsWith('data-') ? mark : `data-${mark}`; - } - return MARK_KEY; -} +const MARK_KEY = `rc-util-key`; interface Options { attachTo?: Element; @@ -16,6 +9,13 @@ interface Options { mark?: string; } +function getMark({ mark }: Options = {}) { + if (mark) { + return mark.startsWith('data-') ? mark : `data-${mark}`; + } + return MARK_KEY; +} + function getContainer(option: Options) { if (option.attachTo) { return option.attachTo; @@ -65,7 +65,6 @@ function findExistNode(key: string, option: Options = {}) { export function removeCSS(key: string, option: Options = {}) { const existNode = findExistNode(key, option); - existNode?.parentNode?.removeChild(existNode); } diff --git a/src/Dom/findDOMNode.ts b/src/Dom/findDOMNode.ts index 3ed69336..0da17bb0 100644 --- a/src/Dom/findDOMNode.ts +++ b/src/Dom/findDOMNode.ts @@ -7,7 +7,7 @@ export default function findDOMNode( node: React.ReactInstance | HTMLElement, ): T { if (node instanceof HTMLElement) { - return (node as unknown) as T; + return node as unknown as T; } - return (ReactDOM.findDOMNode(node) as unknown) as T; + return ReactDOM.findDOMNode(node) as unknown as T; } diff --git a/src/Dom/focus.ts b/src/Dom/focus.ts index 1d39e3d8..a6654841 100644 --- a/src/Dom/focus.ts +++ b/src/Dom/focus.ts @@ -1,5 +1,15 @@ import isVisible from './isVisible'; +type DisabledElement = + | HTMLLinkElement + | HTMLInputElement + | HTMLFieldSetElement + | HTMLButtonElement + | HTMLOptGroupElement + | HTMLOptionElement + | HTMLSelectElement + | HTMLTextAreaElement; + function focusable(node: HTMLElement, includePositive = false): boolean { if (isVisible(node)) { const nodeName = node.nodeName.toLowerCase(); @@ -24,7 +34,7 @@ function focusable(node: HTMLElement, includePositive = false): boolean { } // Block focusable if disabled - if (isFocusableElement && (node as any).disabled) { + if (isFocusableElement && (node as DisabledElement).disabled) { tabIndex = null; } @@ -37,13 +47,13 @@ function focusable(node: HTMLElement, includePositive = false): boolean { } export function getFocusNodeList(node: HTMLElement, includePositive = false) { - const res = [...node.querySelectorAll('*')].filter(child => { - return focusable(child as HTMLElement, includePositive); + const res = [...node.querySelectorAll('*')].filter(child => { + return focusable(child, includePositive); }); if (focusable(node, includePositive)) { res.unshift(node); } - return res as HTMLElement[]; + return res; } let lastFocusElement = null; diff --git a/src/Dom/isVisible.ts b/src/Dom/isVisible.ts index 9dfc2b75..825f79fa 100644 --- a/src/Dom/isVisible.ts +++ b/src/Dom/isVisible.ts @@ -3,20 +3,20 @@ export default (element: HTMLElement | SVGGraphicsElement): boolean => { return false; } - if ((element as HTMLElement).offsetParent) { + if (element instanceof HTMLElement && element.offsetParent) { return true; } - if ((element as SVGGraphicsElement).getBBox) { - const box = (element as SVGGraphicsElement).getBBox(); - if (box.width || box.height) { + if (element instanceof SVGGraphicsElement && element.getBBox) { + const { width, height } = element.getBBox(); + if (width || height) { return true; } } - if ((element as HTMLElement).getBoundingClientRect) { - const box = (element as HTMLElement).getBoundingClientRect(); - if (box.width || box.height) { + if (element instanceof HTMLElement && element.getBoundingClientRect) { + const { width, height } = element.getBoundingClientRect(); + if (width || height) { return true; } } diff --git a/src/Dom/scrollLocker.ts b/src/Dom/scrollLocker.ts index 41f4498c..dbd21493 100644 --- a/src/Dom/scrollLocker.ts +++ b/src/Dom/scrollLocker.ts @@ -5,6 +5,8 @@ export interface scrollLockOptions { container: HTMLElement; } +let uuid = 0; + interface Ilocks { target: typeof uuid; options: scrollLockOptions; @@ -17,8 +19,6 @@ const scrollingEffectClassNameReg = new RegExp( 'g', ); -let uuid = 0; - // https://github.com/ant-design/ant-design/issues/19340 // https://github.com/ant-design/ant-design/issues/19332 const cacheStyle = new Map(); @@ -92,14 +92,15 @@ export default class ScrollLocker { container, setStyle( { - width: scrollBarSize !== 0 ? `calc(100% - ${scrollBarSize}px)` : undefined, + width: + scrollBarSize !== 0 + ? `calc(100% - ${scrollBarSize}px)` + : undefined, overflow: 'hidden', overflowX: 'hidden', overflowY: 'hidden', }, - { - element: container, - }, + { element: container }, ), ); } diff --git a/src/Dom/styleChecker.ts b/src/Dom/styleChecker.ts index e5a620fb..388286c6 100644 --- a/src/Dom/styleChecker.ts +++ b/src/Dom/styleChecker.ts @@ -10,7 +10,7 @@ const isStyleNameSupport = (styleName: string | string[]): boolean => { return false; }; -const isStyleValueSupport = (styleName: string, value: any) => { +const isStyleValueSupport = (styleName: string, value: any): boolean => { if (!isStyleNameSupport(styleName)) { return false; } diff --git a/src/Dom/support.js b/src/Dom/support.ts similarity index 82% rename from src/Dom/support.js rename to src/Dom/support.ts index 8f5d192d..f300c3b3 100644 --- a/src/Dom/support.js +++ b/src/Dom/support.ts @@ -1,22 +1,24 @@ import canUseDOM from './canUseDom'; + const animationEndEventNames = { WebkitAnimation: 'webkitAnimationEnd', OAnimation: 'oAnimationEnd', animation: 'animationend', }; + const transitionEventNames = { WebkitTransition: 'webkitTransitionEnd', OTransition: 'oTransitionEnd', transition: 'transitionend', }; -function supportEnd(names) { +function supportEnd( + names: typeof animationEndEventNames | typeof transitionEventNames, +) { const el = document.createElement('div'); for (const name in names) { if (names.hasOwnProperty(name) && el.style[name] !== undefined) { - return { - end: names[name], - }; + return { end: names[name] }; } } return false; diff --git a/src/composeProps.ts b/src/composeProps.ts index 82707808..01828bbb 100644 --- a/src/composeProps.ts +++ b/src/composeProps.ts @@ -11,7 +11,7 @@ function composeProps>( Object.keys(patchProps).forEach(key => { const func = patchProps[key]; if (typeof func === 'function') { - composedProps[key] = (...args) => { + composedProps[key] = (...args: any[]) => { func(...args); return originProps[key]?.(...args); }; diff --git a/src/createChainedFunction.js b/src/createChainedFunction.ts similarity index 86% rename from src/createChainedFunction.js rename to src/createChainedFunction.ts index 3d1fd45a..d9dc96ff 100644 --- a/src/createChainedFunction.js +++ b/src/createChainedFunction.ts @@ -6,7 +6,7 @@ * * @returns {function|null} */ -export default function createChainedFunction() { +export default function createChainedFunction(): Function | null { const args = [].slice.call(arguments, 0); if (args.length === 1) { return args[0]; diff --git a/src/debug/diff.js b/src/debug/diff.ts similarity index 53% rename from src/debug/diff.js rename to src/debug/diff.ts index c31679a3..0de9c81e 100644 --- a/src/debug/diff.js +++ b/src/debug/diff.ts @@ -2,24 +2,24 @@ function createArray() { const arr = []; - arr.__proto__ = new Array; - arr.__proto__.format = function toString() { - return this.map(obj => ({ - ...obj, - path: obj.path.join(' > '), - })); + (arr as any).__proto__ = new Array(); + (arr as any).__proto__.format = function toString() { + return this.map(obj => ({ ...obj, path: obj.path.join(' > ') })); }; - arr.__proto__.toString = function toString() { + (arr as any).__proto__.toString = function toString() { return JSON.stringify(this.format(), null, 2); }; return arr; } -export default function diff(obj1, obj2, depth = 10, path = [], diffList = createArray()) { +export default function diff< + O1 = Record, + O2 = Record, +>(obj1: O1, obj2: O2, depth = 10, path = [], diffList = createArray()): any[] { if (depth <= 0) return diffList; - const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]); - keys.forEach((key) => { + const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]); + keys.forEach(key => { const value1 = obj1[key]; const value2 = obj2[key]; @@ -31,11 +31,7 @@ export default function diff(obj1, obj2, depth = 10, path = [], diffList = creat // Diff type if (type1 !== type2) { - diffList.push({ - path: path.concat(key), - value1, - value2, - }); + diffList.push({ path: path.concat(key), value1, value2 }); return; } @@ -51,11 +47,7 @@ export default function diff(obj1, obj2, depth = 10, path = [], diffList = creat } // Rest - diffList.push({ - path: path.concat(key), - value1, - value2, - }); + diffList.push({ path: path.concat(key), value1, value2 }); }); return diffList; diff --git a/src/deprecated.js b/src/deprecated.ts similarity index 56% rename from src/deprecated.js rename to src/deprecated.ts index 8f91b5df..9c9a6703 100644 --- a/src/deprecated.js +++ b/src/deprecated.ts @@ -1,8 +1,12 @@ -export default function deprecated(props, instead, component) { +export default function deprecated( + props: string, + instead: string, + component: string, +) { if (typeof window !== 'undefined' && window.console && window.console.error) { window.console.error( `Warning: ${props} is deprecated at [ ${component} ], ` + - `use [ ${instead} ] instead of it.` + `use [ ${instead} ] instead of it.`, ); } } diff --git a/src/guid.js b/src/guid.ts similarity index 100% rename from src/guid.js rename to src/guid.ts diff --git a/src/isMobile.ts b/src/isMobile.ts index c4a1d4b7..4e661e22 100644 --- a/src/isMobile.ts +++ b/src/isMobile.ts @@ -5,15 +5,12 @@ export default () => { const agent = navigator.userAgent || navigator.vendor || (window as any).opera; - if ( + return ( /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test( agent, ) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test( agent?.substr(0, 4), ) - ) { - return true; - } - return false; + ); }; diff --git a/src/switchScrollingEffect.js b/src/switchScrollingEffect.ts similarity index 93% rename from src/switchScrollingEffect.js rename to src/switchScrollingEffect.ts index 1263ee7f..6dc2cc66 100644 --- a/src/switchScrollingEffect.js +++ b/src/switchScrollingEffect.ts @@ -11,7 +11,7 @@ function isBodyOverflowing() { let cacheStyle = {}; -export default close => { +const switchScrollingEffect = (close?: boolean) => { if (!isBodyOverflowing() && !close) { return; } @@ -46,3 +46,5 @@ export default close => { } } }; + +export default switchScrollingEffect; diff --git a/src/warn.js b/src/warn.ts similarity index 83% rename from src/warn.js rename to src/warn.ts index 75fc7b0f..74194ff5 100644 --- a/src/warn.js +++ b/src/warn.ts @@ -1,5 +1,5 @@ /** @deprecated Use `warning` instead. This will be removed in next major version */ -export default function warn(msg) { +export default function warn(msg: string) { if (process.env.NODE_ENV !== 'production') { if (typeof console !== 'undefined' && console.warn) { console.warn(msg); From 03672a5060d69057c949e91d0e484fc6e1a57ccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ckonghai=E2=80=9D?= <574980606@qq.com> Date: Mon, 22 Aug 2022 11:15:51 +0800 Subject: [PATCH 2/4] fix: revert js => ts --- src/Children/{mapSelf.ts => mapSelf.js} | 4 +-- ...ddEventListener.ts => addEventListener.js} | 11 ++---- src/Dom/{class.ts => class.js} | 8 ++--- src/Dom/{css.ts => css.js} | 31 +++++++--------- src/Dom/{support.ts => support.js} | 11 +++--- ...edFunction.ts => createChainedFunction.js} | 2 +- src/debug/{diff.ts => diff.js} | 36 +++++++++++++------ src/{deprecated.ts => deprecated.js} | 6 +--- src/{guid.ts => guid.js} | 0 ...lingEffect.ts => switchScrollingEffect.js} | 4 +-- src/{warn.ts => warn.js} | 2 +- 11 files changed, 54 insertions(+), 61 deletions(-) rename src/Children/{mapSelf.ts => mapSelf.js} (52%) rename src/Dom/{addEventListener.ts => addEventListener.js} (62%) rename src/Dom/{class.ts => class.js} (66%) rename src/Dom/{css.ts => css.js} (82%) rename src/Dom/{support.ts => support.js} (63%) rename src/{createChainedFunction.ts => createChainedFunction.js} (86%) rename src/debug/{diff.ts => diff.js} (55%) rename src/{deprecated.ts => deprecated.js} (70%) rename src/{guid.ts => guid.js} (100%) rename src/{switchScrollingEffect.ts => switchScrollingEffect.js} (93%) rename src/{warn.ts => warn.js} (83%) diff --git a/src/Children/mapSelf.ts b/src/Children/mapSelf.js similarity index 52% rename from src/Children/mapSelf.ts rename to src/Children/mapSelf.js index f76da807..1c998e6c 100644 --- a/src/Children/mapSelf.ts +++ b/src/Children/mapSelf.js @@ -1,10 +1,10 @@ import React from 'react'; -function mirror(o: T): T { +function mirror(o) { return o; } -export default function mapSelf(children: C | ReadonlyArray) { +export default function mapSelf(children) { // return ReactFragment return React.Children.map(children, mirror); } diff --git a/src/Dom/addEventListener.ts b/src/Dom/addEventListener.js similarity index 62% rename from src/Dom/addEventListener.ts rename to src/Dom/addEventListener.js index 97338c5e..eacf3d07 100644 --- a/src/Dom/addEventListener.ts +++ b/src/Dom/addEventListener.js @@ -1,14 +1,9 @@ import ReactDOM from 'react-dom'; -export default function addEventListenerWrap( - target: HTMLElement | Element | Window | Document, - eventType: keyof DocumentEventMap, - cb: (a: any) => any, - option: boolean | AddEventListenerOptions, -) { +export default function addEventListenerWrap(target, eventType, cb, option) { /* eslint camelcase: 2 */ const callback = ReactDOM.unstable_batchedUpdates - ? function run(e: any) { + ? function run(e) { ReactDOM.unstable_batchedUpdates(cb, e); } : cb; @@ -16,7 +11,7 @@ export default function addEventListenerWrap( target.addEventListener(eventType, callback, option); } return { - remove() { + remove: () => { if (target.removeEventListener) { target.removeEventListener(eventType, callback, option); } diff --git a/src/Dom/class.ts b/src/Dom/class.js similarity index 66% rename from src/Dom/class.ts rename to src/Dom/class.js index 12d43d3c..b72c70b3 100644 --- a/src/Dom/class.ts +++ b/src/Dom/class.js @@ -1,12 +1,12 @@ -export function hasClass(node: Element, className: string): boolean { +export function hasClass(node, className) { if (node.classList) { return node.classList.contains(className); } const originClass = node.className; - return ` ${originClass} `.includes(` ${className} `); + return ` ${originClass} `.indexOf(` ${className} `) > -1; } -export function addClass(node: Element, className: string): void { +export function addClass(node, className) { if (node.classList) { node.classList.add(className); } else { @@ -16,7 +16,7 @@ export function addClass(node: Element, className: string): void { } } -export function removeClass(node: Element, className: string): void { +export function removeClass(node, className) { if (node.classList) { node.classList.remove(className); } else { diff --git a/src/Dom/css.ts b/src/Dom/css.js similarity index 82% rename from src/Dom/css.ts rename to src/Dom/css.js index 7ed7829a..311c54dd 100644 --- a/src/Dom/css.ts +++ b/src/Dom/css.js @@ -1,24 +1,17 @@ /* eslint-disable no-nested-ternary */ const PIXEL_PATTERN = /margin|padding|width|height|max|min|offset/; -const removePixel = { - left: true, - top: true, -}; - -const floatMap = { - cssFloat: 1, - styleFloat: 1, - float: 1, -}; - -function getComputedStyle(node: HTMLElement) { +const removePixel = { left: true, top: true }; + +const floatMap = { cssFloat: 1, styleFloat: 1, float: 1 }; + +function getComputedStyle(node) { return node.nodeType === 1 ? node.ownerDocument.defaultView.getComputedStyle(node, null) : {}; } -function getStyleValue(node: HTMLElement, type: string, value: string) { +function getStyleValue(node, type, value) { type = type.toLowerCase(); if (value === 'auto') { if (type === 'height') { @@ -34,7 +27,7 @@ function getStyleValue(node: HTMLElement, type: string, value: string) { return removePixel[type] ? parseFloat(value) || 0 : value; } -export function get(node: HTMLElement, name: string) { +export function get(node, name) { const length = arguments.length; const style = getComputedStyle(node); @@ -49,7 +42,7 @@ export function get(node: HTMLElement, name: string) { : getStyleValue(node, name, style[name] || node.style[name]); } -export function set(node: HTMLElement, name: string, value: string) { +export function set(node, name, value) { const length = arguments.length; name = floatMap[name] ? 'cssFloat' in node.style @@ -63,7 +56,7 @@ export function set(node: HTMLElement, name: string, value: string) { node.style[name] = value; // Number return value; } - for (const x in name as any) { + for (const x in name) { if (name.hasOwnProperty(x)) { set(node, x, name[x]); } @@ -71,14 +64,14 @@ export function set(node: HTMLElement, name: string, value: string) { return getComputedStyle(node); } -export function getOuterWidth(el: HTMLElement): number { +export function getOuterWidth(el) { if (el === document.body) { return document.documentElement.clientWidth; } return el.offsetWidth; } -export function getOuterHeight(el: HTMLElement): number { +export function getOuterHeight(el) { if (el === document.body) { return window.innerHeight || document.documentElement.clientHeight; } @@ -117,7 +110,7 @@ export function getScroll() { }; } -export function getOffset(node: HTMLElement | Element) { +export function getOffset(node) { const box = node.getBoundingClientRect(); const docElem = document.documentElement; diff --git a/src/Dom/support.ts b/src/Dom/support.js similarity index 63% rename from src/Dom/support.ts rename to src/Dom/support.js index f300c3b3..b9a54cd2 100644 --- a/src/Dom/support.ts +++ b/src/Dom/support.js @@ -12,17 +12,14 @@ const transitionEventNames = { transition: 'transitionend', }; -function supportEnd( - names: typeof animationEndEventNames | typeof transitionEventNames, -) { +function supportEnd(names) { const el = document.createElement('div'); for (const name in names) { if (names.hasOwnProperty(name) && el.style[name] !== undefined) { - return { end: names[name] }; + return { + end: names[name], + }; } } return false; } - -export const animation = canUseDOM() && supportEnd(animationEndEventNames); -export const transition = canUseDOM() && supportEnd(transitionEventNames); diff --git a/src/createChainedFunction.ts b/src/createChainedFunction.js similarity index 86% rename from src/createChainedFunction.ts rename to src/createChainedFunction.js index d9dc96ff..3d1fd45a 100644 --- a/src/createChainedFunction.ts +++ b/src/createChainedFunction.js @@ -6,7 +6,7 @@ * * @returns {function|null} */ -export default function createChainedFunction(): Function | null { +export default function createChainedFunction() { const args = [].slice.call(arguments, 0); if (args.length === 1) { return args[0]; diff --git a/src/debug/diff.ts b/src/debug/diff.js similarity index 55% rename from src/debug/diff.ts rename to src/debug/diff.js index 0de9c81e..f2c66172 100644 --- a/src/debug/diff.ts +++ b/src/debug/diff.js @@ -2,23 +2,29 @@ function createArray() { const arr = []; - (arr as any).__proto__ = new Array(); - (arr as any).__proto__.format = function toString() { - return this.map(obj => ({ ...obj, path: obj.path.join(' > ') })); + arr.__proto__ = new Array(); + arr.__proto__.format = function toString() { + return this.map(obj => ({ + ...obj, + path: obj.path.join(' > '), + })); }; - (arr as any).__proto__.toString = function toString() { + arr.__proto__.toString = function toString() { return JSON.stringify(this.format(), null, 2); }; return arr; } -export default function diff< - O1 = Record, - O2 = Record, ->(obj1: O1, obj2: O2, depth = 10, path = [], diffList = createArray()): any[] { +export default function diff( + obj1, + obj2, + depth = 10, + path = [], + diffList = createArray(), +) { if (depth <= 0) return diffList; - const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]); + const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]); keys.forEach(key => { const value1 = obj1[key]; const value2 = obj2[key]; @@ -31,7 +37,11 @@ export default function diff< // Diff type if (type1 !== type2) { - diffList.push({ path: path.concat(key), value1, value2 }); + diffList.push({ + path: path.concat(key), + value1, + value2, + }); return; } @@ -47,7 +57,11 @@ export default function diff< } // Rest - diffList.push({ path: path.concat(key), value1, value2 }); + diffList.push({ + path: path.concat(key), + value1, + value2, + }); }); return diffList; diff --git a/src/deprecated.ts b/src/deprecated.js similarity index 70% rename from src/deprecated.ts rename to src/deprecated.js index 9c9a6703..b05755f8 100644 --- a/src/deprecated.ts +++ b/src/deprecated.js @@ -1,8 +1,4 @@ -export default function deprecated( - props: string, - instead: string, - component: string, -) { +export default function deprecated(props, instead, component) { if (typeof window !== 'undefined' && window.console && window.console.error) { window.console.error( `Warning: ${props} is deprecated at [ ${component} ], ` + diff --git a/src/guid.ts b/src/guid.js similarity index 100% rename from src/guid.ts rename to src/guid.js diff --git a/src/switchScrollingEffect.ts b/src/switchScrollingEffect.js similarity index 93% rename from src/switchScrollingEffect.ts rename to src/switchScrollingEffect.js index 6dc2cc66..1263ee7f 100644 --- a/src/switchScrollingEffect.ts +++ b/src/switchScrollingEffect.js @@ -11,7 +11,7 @@ function isBodyOverflowing() { let cacheStyle = {}; -const switchScrollingEffect = (close?: boolean) => { +export default close => { if (!isBodyOverflowing() && !close) { return; } @@ -46,5 +46,3 @@ const switchScrollingEffect = (close?: boolean) => { } } }; - -export default switchScrollingEffect; diff --git a/src/warn.ts b/src/warn.js similarity index 83% rename from src/warn.ts rename to src/warn.js index 74194ff5..75fc7b0f 100644 --- a/src/warn.ts +++ b/src/warn.js @@ -1,5 +1,5 @@ /** @deprecated Use `warning` instead. This will be removed in next major version */ -export default function warn(msg: string) { +export default function warn(msg) { if (process.env.NODE_ENV !== 'production') { if (typeof console !== 'undefined' && console.warn) { console.warn(msg); From a756c4326dd2595f3baace5c69b051c246adf2b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ckonghai=E2=80=9D?= <574980606@qq.com> Date: Mon, 22 Aug 2022 11:20:36 +0800 Subject: [PATCH 3/4] fix: revert js => ts --- src/Dom/support.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Dom/support.js b/src/Dom/support.js index b9a54cd2..125c7762 100644 --- a/src/Dom/support.js +++ b/src/Dom/support.js @@ -23,3 +23,6 @@ function supportEnd(names) { } return false; } + +export const animation = canUseDOM() && supportEnd(animationEndEventNames); +export const transition = canUseDOM() && supportEnd(transitionEventNames); From 256311dab4ae61fa1adea311cbbc4bc5ad82e450 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 25 Aug 2022 00:41:36 +0800 Subject: [PATCH 4/4] fix: format --- src/Dom/css.js | 73 ++++++++++++++++------------------------- src/Dom/findDOMNode.ts | 4 +-- src/Dom/styleChecker.ts | 2 +- src/Dom/support.js | 2 -- src/debug/diff.js | 12 ++----- 5 files changed, 35 insertions(+), 58 deletions(-) diff --git a/src/Dom/css.js b/src/Dom/css.js index 311c54dd..1948dc8e 100644 --- a/src/Dom/css.js +++ b/src/Dom/css.js @@ -1,14 +1,19 @@ /* eslint-disable no-nested-ternary */ const PIXEL_PATTERN = /margin|padding|width|height|max|min|offset/; -const removePixel = { left: true, top: true }; - -const floatMap = { cssFloat: 1, styleFloat: 1, float: 1 }; +const removePixel = { + left: true, + top: true, +}; +const floatMap = { + cssFloat: 1, + styleFloat: 1, + float: 1, +}; function getComputedStyle(node) { - return node.nodeType === 1 - ? node.ownerDocument.defaultView.getComputedStyle(node, null) - : {}; + return node.nodeType === 1 ? + node.ownerDocument.defaultView.getComputedStyle(node, null) : {}; } function getStyleValue(node, type, value) { @@ -24,31 +29,21 @@ function getStyleValue(node, type, value) { if (!(type in removePixel)) { removePixel[type] = PIXEL_PATTERN.test(type); } - return removePixel[type] ? parseFloat(value) || 0 : value; + return removePixel[type] ? (parseFloat(value) || 0) : value; } export function get(node, name) { const length = arguments.length; const style = getComputedStyle(node); - name = floatMap[name] - ? 'cssFloat' in node.style - ? 'cssFloat' - : 'styleFloat' - : name; + name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name; - return length === 1 - ? style - : getStyleValue(node, name, style[name] || node.style[name]); + return (length === 1) ? style : getStyleValue(node, name, style[name] || node.style[name]); } export function set(node, name, value) { const length = arguments.length; - name = floatMap[name] - ? 'cssFloat' in node.style - ? 'cssFloat' - : 'styleFloat' - : name; + name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name; if (length === 3) { if (typeof value === 'number' && PIXEL_PATTERN.test(name)) { value = `${value}px`; @@ -79,34 +74,28 @@ export function getOuterHeight(el) { } export function getDocSize() { - const width = Math.max( - document.documentElement.scrollWidth, - document.body.scrollWidth, - ); - const height = Math.max( - document.documentElement.scrollHeight, - document.body.scrollHeight, - ); + const width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth); + const height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); - return { width, height }; + return { + width, + height, + }; } export function getClientSize() { const width = document.documentElement.clientWidth; const height = window.innerHeight || document.documentElement.clientHeight; - return { width, height }; + return { + width, + height, + }; } export function getScroll() { return { - scrollLeft: Math.max( - document.documentElement.scrollLeft, - document.body.scrollLeft, - ), - scrollTop: Math.max( - document.documentElement.scrollTop, - document.body.scrollTop, - ), + scrollLeft: Math.max(document.documentElement.scrollLeft, document.body.scrollLeft), + scrollTop: Math.max(document.documentElement.scrollTop, document.body.scrollTop), }; } @@ -116,13 +105,9 @@ export function getOffset(node) { // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft return { - left: - box.left + - (window.pageXOffset || docElem.scrollLeft) - + left: box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0), - top: - box.top + - (window.pageYOffset || docElem.scrollTop) - + top: box.top + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || document.body.clientTop || 0), }; } diff --git a/src/Dom/findDOMNode.ts b/src/Dom/findDOMNode.ts index 0da17bb0..3ed69336 100644 --- a/src/Dom/findDOMNode.ts +++ b/src/Dom/findDOMNode.ts @@ -7,7 +7,7 @@ export default function findDOMNode( node: React.ReactInstance | HTMLElement, ): T { if (node instanceof HTMLElement) { - return node as unknown as T; + return (node as unknown) as T; } - return ReactDOM.findDOMNode(node) as unknown as T; + return (ReactDOM.findDOMNode(node) as unknown) as T; } diff --git a/src/Dom/styleChecker.ts b/src/Dom/styleChecker.ts index 388286c6..e5a620fb 100644 --- a/src/Dom/styleChecker.ts +++ b/src/Dom/styleChecker.ts @@ -10,7 +10,7 @@ const isStyleNameSupport = (styleName: string | string[]): boolean => { return false; }; -const isStyleValueSupport = (styleName: string, value: any): boolean => { +const isStyleValueSupport = (styleName: string, value: any) => { if (!isStyleNameSupport(styleName)) { return false; } diff --git a/src/Dom/support.js b/src/Dom/support.js index 125c7762..8f5d192d 100644 --- a/src/Dom/support.js +++ b/src/Dom/support.js @@ -1,11 +1,9 @@ import canUseDOM from './canUseDom'; - const animationEndEventNames = { WebkitAnimation: 'webkitAnimationEnd', OAnimation: 'oAnimationEnd', animation: 'animationend', }; - const transitionEventNames = { WebkitTransition: 'webkitTransitionEnd', OTransition: 'oTransitionEnd', diff --git a/src/debug/diff.js b/src/debug/diff.js index f2c66172..c31679a3 100644 --- a/src/debug/diff.js +++ b/src/debug/diff.js @@ -2,7 +2,7 @@ function createArray() { const arr = []; - arr.__proto__ = new Array(); + arr.__proto__ = new Array; arr.__proto__.format = function toString() { return this.map(obj => ({ ...obj, @@ -15,17 +15,11 @@ function createArray() { return arr; } -export default function diff( - obj1, - obj2, - depth = 10, - path = [], - diffList = createArray(), -) { +export default function diff(obj1, obj2, depth = 10, path = [], diffList = createArray()) { if (depth <= 0) return diffList; const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]); - keys.forEach(key => { + keys.forEach((key) => { const value1 = obj1[key]; const value2 = obj2[key];