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

chore: update ts

pull/2930/head^2
tanjinzhou 2020-09-30 17:35:51 +08:00
parent d459c8dabe
commit dbaf8bc7ef
14 changed files with 25 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc
View File

@ -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,

0
components/_util/PortalWrapper.ts → components/_util/PortalWrapper.tsx
View File

8
components/_util/getScrollBarSize.ts
View File

@ -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';

12
components/_util/props-util.ts
View File

@ -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 = <T>(
defaultProps: { [K in Extract<keyof T, string>]?: any },
): T => {
Object.keys(defaultProps).forEach((k: Extract<keyof T, string>) => {
let prop = propTypes[k] as PropOptions<any>;
const prop = propTypes[k] as PropOptions<any>;
if (prop) {
prop.default = defaultProps[k];
} else {

4
components/_util/raf.ts
View File

@ -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;

4
components/_util/responsiveObserve.ts
View File

@ -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,

2
components/_util/switchScrollingEffect.ts
View File

@ -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;

2
components/grid/Col.tsx
View File

@ -99,7 +99,7 @@ export default defineComponent<ColProps>({
className,
sizeClassObj,
);
let mergedStyle: CSSProperties = {};
let mergedStyle: CSSProperties = { ...(style as CSSProperties) };
if (gutter) {
mergedStyle = {
...(gutter[0]! > 0

0
components/modal/confirm.ts → components/modal/confirm.tsx
View File

214
components/vc-virtual-list/examples/animate.tsx
View File

@ -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<any, MyItemProps> = (
{
id,
uuid: itemUuid,
visible,
onClose,
onLeave,
onAppear,
onInsertBefore,
onInsertAfter,
motionAppear,
},
ref,
) => {
const motionRef = React.useRef(false);
React.useEffect(() => {
return () => {
if (motionRef.current) {
onAppear();
}
};
}, []);
return (
<CSSMotion
visible={visible}
ref={ref}
motionName="motion"
motionAppear={motionAppear}
onAppearStart={getCollapsedHeight}
onAppearActive={node => {
motionRef.current = true;
return getMaxHeight(node);
}}
onAppearEnd={onAppear}
onLeaveStart={getCurrentHeight}
onLeaveActive={getCollapsedHeight}
onLeaveEnd={() => {
onLeave(id);
}}
>
{({ className, style }, passedMotionRef) => {
return (
<div
ref={passedMotionRef}
className={classNames('item', className)}
style={style}
data-id={id}
>
<div style={{ height: itemUuid % 2 ? 100 : undefined }}>
<button
type="button"
onClick={() => {
onClose(id);
}}
>
Close
</button>
<button
type="button"
onClick={() => {
onInsertBefore(id);
}}
>
Insert Before
</button>
<button
type="button"
onClick={() => {
onInsertAfter(id);
}}
>
Insert After
</button>
{id}
</div>
</div>
);
}}
</CSSMotion>
);
};
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<number>();
const listRef = React.useRef<ListRef>();
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 (
<React.StrictMode>
<div>
<h2>Animate</h2>
<p>Current: {data.length} records</p>
<List<Item>
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) => (
<ForwardMyItem
{...item}
motionAppear={animating && insertIndex === index}
visible={!closeMap[item.id]}
onClose={onClose}
onLeave={onLeave}
onAppear={onAppear}
onInsertBefore={onInsertBefore}
onInsertAfter={onInsertAfter}
/>
)}
</List>
</div>
</React.StrictMode>
);
};
export default Demo;

60
components/vc-virtual-list/examples/height.tsx
View File

@ -1,60 +0,0 @@
import * as React from 'react';
import List from '../src/List';
interface Item {
id: number;
height: number;
}
const MyItem: React.FC<Item> = ({ id, height }, ref) => {
return (
<span
ref={ref}
style={{
border: '1px solid gray',
padding: '0 16px',
height,
lineHeight: '30px',
boxSizing: 'border-box',
display: 'inline-block',
}}
>
{id}
</span>
);
};
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 (
<React.StrictMode>
<div>
<h2>Dynamic Height</h2>
<List
data={data}
height={500}
itemHeight={30}
itemKey="id"
style={{
border: '1px solid red',
boxSizing: 'border-box',
}}
>
{item => <ForwardMyItem {...item} />}
</List>
</div>
</React.StrictMode>
);
};
export default Demo;

86
components/vc-virtual-list/examples/no-virtual.tsx
View File

@ -1,86 +0,0 @@
import * as React from 'react';
import List from '../src/List';
interface Item {
id: number;
height: number;
}
const MyItem: React.FC<Item> = ({ id, height }, ref) => {
return (
<span
ref={ref}
style={{
border: '1px solid gray',
padding: '0 16px',
height,
lineHeight: '30px',
boxSizing: 'border-box',
display: 'inline-block',
}}
>
{id}
</span>
);
};
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 (
<React.StrictMode>
<div>
<h2>Less Count</h2>
<List
data={data.slice(0, 1)}
itemHeight={30}
height={100}
itemKey="id"
style={{
border: '1px solid red',
boxSizing: 'border-box',
}}
>
{item => <ForwardMyItem {...item} />}
</List>
<h2>Less Item Height</h2>
<List
data={data.slice(0, 10)}
itemHeight={1}
height={100}
itemKey="id"
style={{
border: '1px solid red',
boxSizing: 'border-box',
}}
>
{item => <ForwardMyItem {...item} />}
</List>
<h2>Without Height</h2>
<List
data={data}
itemHeight={30}
itemKey="id"
style={{
border: '1px solid red',
boxSizing: 'border-box',
}}
>
{item => <ForwardMyItem {...item} />}
</List>
</div>
</React.StrictMode>
);
};
export default Demo;

106
components/vc-virtual-list/examples/switch.tsx
View File

@ -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<Item> = ({ id }, ref) => (
<span
ref={ref}
style={{
border: '1px solid gray',
padding: '0 16px',
height: 30,
lineHeight: '30px',
boxSizing: 'border-box',
display: 'inline-block',
}}
>
{id}
</span>
);
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 (
<React.StrictMode>
<div style={{ height: '150vh' }}>
<h2>Switch</h2>
<span
onChange={(e: any) => {
setData(getData(Number(e.target.value)));
}}
>
Data
<label>
<input type="radio" name="switch" value={0} />0
</label>
<label>
<input type="radio" name="switch" value={2} />2
</label>
<label>
<input type="radio" name="switch" value={100} />
100
</label>
<label>
<input type="radio" name="switch" value={200} />
200
</label>
<label>
<input type="radio" name="switch" value={1000} />
1000
</label>
</span>
<span
onChange={(e: any) => {
setHeight(Number(e.target.value));
}}
>
| Height
<label>
<input type="radio" name="switch" value={0} />0
</label>
<label>
<input type="radio" name="switch" value={100} />
100
</label>
<label>
<input type="radio" name="switch" value={200} />
200
</label>
</span>
<List
data={data}
height={height}
itemHeight={30}
itemKey="id"
style={{
border: '1px solid red',
boxSizing: 'border-box',
}}
>
{(item, _, props) => <ForwardMyItem {...item} {...props} />}
</List>
</div>
</React.StrictMode>
);
};
export default Demo;

4
package.json
View File

@ -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",