diff --git a/.eslintrc b/.eslintrc index 22ae62507..9378182b3 100644 --- a/.eslintrc +++ b/.eslintrc @@ -21,8 +21,12 @@ } }, { - "files": ["*.ts"], - "extends": ["@vue/typescript/recommended"], + "files": ["*.ts", "*.tsx"], + "extends": [ + "@vue/typescript/recommended", + "@vue/prettier", + "@vue/prettier/@typescript-eslint" + ], "rules": { "@typescript-eslint/no-explicit-any": 0, "@typescript-eslint/ban-types": 0, diff --git a/components/_util/PortalWrapper.ts b/components/_util/PortalWrapper.tsx similarity index 100% rename from components/_util/PortalWrapper.ts rename to components/_util/PortalWrapper.tsx diff --git a/components/_util/getScrollBarSize.ts b/components/_util/getScrollBarSize.ts index a98df563d..5b028bc12 100644 --- a/components/_util/getScrollBarSize.ts +++ b/components/_util/getScrollBarSize.ts @@ -1,6 +1,6 @@ -let cached; +let cached: number | undefined; -export default function getScrollBarSize(fresh) { +export default function getScrollBarSize(fresh?: boolean) { if (fresh || cached === undefined) { const inner = document.createElement('div'); inner.style.width = '100%'; @@ -10,8 +10,8 @@ export default function getScrollBarSize(fresh) { const outerStyle = outer.style; outerStyle.position = 'absolute'; - outerStyle.top = 0; - outerStyle.left = 0; + outerStyle.top = '0'; + outerStyle.left = '0'; outerStyle.pointerEvents = 'none'; outerStyle.visibility = 'hidden'; outerStyle.width = '200px'; diff --git a/components/_util/props-util.ts b/components/_util/props-util.ts index 41b76a842..05ec55b6d 100644 --- a/components/_util/props-util.ts +++ b/components/_util/props-util.ts @@ -99,7 +99,7 @@ const getSlot = (self, name = 'default', options = {}) => { return []; } } else { - let res = self.$slots[name] && self.$slots[name](options); + const res = self.$slots[name] && self.$slots[name](options); return flattenChildren(res); } }; @@ -160,9 +160,9 @@ const getComponentFromSetup = ( const getComponent = ( instance: ComponentPublicInstance, - prop: string = 'default', + prop = 'default', options = instance, - execute: boolean = true, + execute = true, ) => { let com = undefined; if (instance.$) { @@ -274,7 +274,7 @@ const getAttrs = ele => { }; const getKey = ele => { - let key = ele.key; + const key = ele.key; return key; }; @@ -308,7 +308,7 @@ export function getListeners(context) { } export function getClass(ele) { const props = (isVNode(ele) ? ele.props : ele.$attrs) || {}; - let tempCls = props.class || {}; + const tempCls = props.class || {}; let cls = {}; if (typeof tempCls === 'string') { tempCls.split(' ').forEach(c => { @@ -377,7 +377,7 @@ const initDefaultProps = ( defaultProps: { [K in Extract]?: any }, ): T => { Object.keys(defaultProps).forEach((k: Extract) => { - let prop = propTypes[k] as PropOptions; + const prop = propTypes[k] as PropOptions; if (prop) { prop.default = defaultProps[k]; } else { diff --git a/components/_util/raf.ts b/components/_util/raf.ts index 6aaa27eac..6a7f79215 100644 --- a/components/_util/raf.ts +++ b/components/_util/raf.ts @@ -4,11 +4,11 @@ interface RafMap { [id: number]: number; } -let id: number = 0; +let id = 0; const ids: RafMap = {}; // Support call raf with delay specified frame -export default function wrapperRaf(callback: () => void, delayFrames: number = 1): number { +export default function wrapperRaf(callback: () => void, delayFrames = 1): number { const myId = id++; let restFrames = delayFrames; diff --git a/components/_util/responsiveObserve.ts b/components/_util/responsiveObserve.ts index b4b744664..25d4afcf7 100644 --- a/components/_util/responsiveObserve.ts +++ b/components/_util/responsiveObserve.ts @@ -43,7 +43,7 @@ const responsiveObserve = { }, unregister() { Object.keys(responsiveMap).forEach((screen: Breakpoint) => { - const matchMediaQuery = responsiveMap[screen]!; + const matchMediaQuery = responsiveMap[screen]; const handler = this.matchHandlers[matchMediaQuery]; handler?.mql.removeListener(handler?.listener); }); @@ -51,7 +51,7 @@ const responsiveObserve = { }, register() { Object.keys(responsiveMap).forEach((screen: Breakpoint) => { - const matchMediaQuery = responsiveMap[screen]!; + const matchMediaQuery = responsiveMap[screen]; const listener = ({ matches }: { matches: boolean }) => { this.dispatch({ ...screens, diff --git a/components/_util/switchScrollingEffect.ts b/components/_util/switchScrollingEffect.ts index 5346c80a7..5ec6447b0 100644 --- a/components/_util/switchScrollingEffect.ts +++ b/components/_util/switchScrollingEffect.ts @@ -1,6 +1,6 @@ import getScrollBarSize from './getScrollBarSize'; -export default close => { +export default (close?: boolean) => { const bodyIsOverflowing = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth; diff --git a/components/grid/Col.tsx b/components/grid/Col.tsx index 1a9582168..0debb551d 100644 --- a/components/grid/Col.tsx +++ b/components/grid/Col.tsx @@ -99,7 +99,7 @@ export default defineComponent({ className, sizeClassObj, ); - let mergedStyle: CSSProperties = {}; + let mergedStyle: CSSProperties = { ...(style as CSSProperties) }; if (gutter) { mergedStyle = { ...(gutter[0]! > 0 diff --git a/components/modal/confirm.ts b/components/modal/confirm.tsx similarity index 100% rename from components/modal/confirm.ts rename to components/modal/confirm.tsx diff --git a/components/vc-virtual-list/examples/animate.tsx b/components/vc-virtual-list/examples/animate.tsx deleted file mode 100644 index 94688ee22..000000000 --- a/components/vc-virtual-list/examples/animate.tsx +++ /dev/null @@ -1,214 +0,0 @@ -/* eslint-disable arrow-body-style */ - -import * as React from 'react'; -// @ts-ignore -import CSSMotion from 'rc-animate/lib/CSSMotion'; -import classNames from 'classnames'; -import List, { ListRef } from '../src/List'; -import './animate.less'; - -let uuid = 0; -function genItem() { - const item = { - id: `key_${uuid}`, - uuid, - }; - uuid += 1; - return item; -} - -const originData: Item[] = []; -for (let i = 0; i < 1000; i += 1) { - originData.push(genItem()); -} - -interface Item { - id: string; - uuid: number; -} - -interface MyItemProps extends Item { - visible: boolean; - motionAppear: boolean; - onClose: (id: string) => void; - onLeave: (id: string) => void; - onAppear: (...args: any[]) => void; - onInsertBefore: (id: string) => void; - onInsertAfter: (id: string) => void; -} - -const getCurrentHeight = (node: HTMLElement) => ({ height: node.offsetHeight }); -const getMaxHeight = (node: HTMLElement) => { - return { height: node.scrollHeight }; -}; -const getCollapsedHeight = () => ({ height: 0, opacity: 0 }); - -const MyItem: React.ForwardRefRenderFunction = ( - { - id, - uuid: itemUuid, - visible, - onClose, - onLeave, - onAppear, - onInsertBefore, - onInsertAfter, - motionAppear, - }, - ref, -) => { - const motionRef = React.useRef(false); - React.useEffect(() => { - return () => { - if (motionRef.current) { - onAppear(); - } - }; - }, []); - - return ( - { - motionRef.current = true; - return getMaxHeight(node); - }} - onAppearEnd={onAppear} - onLeaveStart={getCurrentHeight} - onLeaveActive={getCollapsedHeight} - onLeaveEnd={() => { - onLeave(id); - }} - > - {({ className, style }, passedMotionRef) => { - return ( -
-
- - - - {id} -
-
- ); - }} - - ); -}; - -const ForwardMyItem = React.forwardRef(MyItem); - -const Demo = () => { - const [data, setData] = React.useState(originData); - const [closeMap, setCloseMap] = React.useState<{ [id: number]: boolean }>({}); - const [animating, setAnimating] = React.useState(false); - const [insertIndex, setInsertIndex] = React.useState(); - - const listRef = React.useRef(); - - const onClose = (id: string) => { - setCloseMap({ - ...closeMap, - [id]: true, - }); - }; - - const onLeave = (id: string) => { - const newData = data.filter(item => item.id !== id); - setData(newData); - }; - - const onAppear = (...args: any[]) => { - console.log('Appear:', args); - setAnimating(false); - }; - - function lockForAnimation() { - setAnimating(true); - } - - const onInsertBefore = (id: string) => { - const index = data.findIndex(item => item.id === id); - const newData = [...data.slice(0, index), genItem(), ...data.slice(index)]; - setInsertIndex(index); - setData(newData); - lockForAnimation(); - }; - const onInsertAfter = (id: string) => { - const index = data.findIndex(item => item.id === id) + 1; - const newData = [...data.slice(0, index), genItem(), ...data.slice(index)]; - setInsertIndex(index); - setData(newData); - lockForAnimation(); - }; - - return ( - -
-

Animate

-

Current: {data.length} records

- - - data={data} - data-id="list" - height={200} - itemHeight={20} - itemKey="id" - // disabled={animating} - ref={listRef} - style={{ - border: '1px solid red', - boxSizing: 'border-box', - }} - // onSkipRender={onAppear} - // onItemRemove={onAppear} - > - {(item, index) => ( - - )} - -
- - ); -}; - -export default Demo; diff --git a/components/vc-virtual-list/examples/height.tsx b/components/vc-virtual-list/examples/height.tsx deleted file mode 100644 index 301572840..000000000 --- a/components/vc-virtual-list/examples/height.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import * as React from 'react'; -import List from '../src/List'; - -interface Item { - id: number; - height: number; -} - -const MyItem: React.FC = ({ id, height }, ref) => { - return ( - - {id} - - ); -}; - -const ForwardMyItem = React.forwardRef(MyItem); - -const data: Item[] = []; -for (let i = 0; i < 100; i += 1) { - data.push({ - id: i, - height: 30 + (i % 2 ? 70 : 0), - }); -} - -const Demo = () => { - return ( - -
-

Dynamic Height

- - - {item => } - -
- - ); -}; - -export default Demo; diff --git a/components/vc-virtual-list/examples/no-virtual.tsx b/components/vc-virtual-list/examples/no-virtual.tsx deleted file mode 100644 index 1af58ff79..000000000 --- a/components/vc-virtual-list/examples/no-virtual.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react'; -import List from '../src/List'; - -interface Item { - id: number; - height: number; -} - -const MyItem: React.FC = ({ id, height }, ref) => { - return ( - - {id} - - ); -}; - -const ForwardMyItem = React.forwardRef(MyItem); - -const data: Item[] = []; -for (let i = 0; i < 100; i += 1) { - data.push({ - id: i, - height: 30 + (i % 2 ? 20 : 0), - }); -} - -const Demo = () => { - return ( - -
-

Less Count

- - {item => } - - -

Less Item Height

- - {item => } - - -

Without Height

- - {item => } - -
- - ); -}; - -export default Demo; diff --git a/components/vc-virtual-list/examples/switch.tsx b/components/vc-virtual-list/examples/switch.tsx deleted file mode 100644 index 010cd911d..000000000 --- a/components/vc-virtual-list/examples/switch.tsx +++ /dev/null @@ -1,106 +0,0 @@ -/* eslint-disable jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */ -import * as React from 'react'; -import List from '../src/List'; - -interface Item { - id: number; -} - -const MyItem: React.FC = ({ id }, ref) => ( - - {id} - -); - -const ForwardMyItem = React.forwardRef(MyItem); - -function getData(count: number) { - const data: Item[] = []; - for (let i = 0; i < count; i += 1) { - data.push({ - id: i, - }); - } - return data; -} - -const Demo = () => { - const [height, setHeight] = React.useState(100); - const [data, setData] = React.useState(getData(20)); - - return ( - -
-

Switch

- { - setData(getData(Number(e.target.value))); - }} - > - Data - - - - - - - { - setHeight(Number(e.target.value)); - }} - > - | Height - - - - - - - {(item, _, props) => } - -
- - ); -}; - -export default Demo; diff --git a/package.json b/package.json index ba22c682a..4ab392e1b 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "prettier": "prettier -c --write '**/*'", "pretty-quick": "pretty-quick", "dist": "node antd-tools/cli/run.js dist", - "lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./components", + "lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.ts,.tsx ./components", "lint:types": "eslint -c ./.eslintrc --fix --ext .ts ./types", "lint:site": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./antdv-demo", "lint:docs": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.md ./antdv-demo/docs/**/demo/**", @@ -89,6 +89,7 @@ "@vue/babel-plugin-jsx": "^1.0.0-rc.2", "@vue/cli-plugin-eslint": "^4.0.0", "@vue/compiler-sfc": "^3.0.0", + "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^5.1.0", "@vue/server-test-utils": "1.0.0-beta.16", "@vue/test-utils": "^2.0.0-beta.2", @@ -118,6 +119,7 @@ "eslint-config-prettier": "^6.10.1", "eslint-plugin-html": "^6.0.0", "eslint-plugin-markdown": "^2.0.0-alpha.0", + "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-vue": "^6.2.2", "fetch-jsonp": "^1.1.3", "fs-extra": "^8.0.0",