mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
chore(🆙): upgrade devDeps (#29418)
* chore(🆙): upgrade devDeps
* prettier code
* fix dnd demo
* fix react-dnd demo
* fix npm start and demo tsx compile
* fix snapshot
This commit is contained in:
afc163
GitHub
parent
1c8a88b2d7
commit
76434a15df
29
.eslintrc.js
29
.eslintrc.js
@ -5,7 +5,7 @@ module.exports = {
|
||||
'plugin:jest/recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:import/typescript',
|
||||
'prettier/react',
|
||||
'plugin:markdown/recommended',
|
||||
],
|
||||
env: {
|
||||
browser: true,
|
||||
@ -20,7 +20,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['markdown', 'react', 'babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn'],
|
||||
plugins: ['react', 'babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn', 'markdown'],
|
||||
// https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
|
||||
overrides: [
|
||||
{
|
||||
@ -32,7 +32,28 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['*.md'],
|
||||
// In v2, explicitly apply eslint-plugin-markdown's `markdown`
|
||||
// processor on any Markdown files you want to lint.
|
||||
files: ['components/*/demo/*.md'],
|
||||
processor: 'markdown/markdown',
|
||||
},
|
||||
{
|
||||
// In v2, configuration for fenced code blocks is separate from the
|
||||
// containing Markdown file. Each code block has a virtual filename
|
||||
// appended to the Markdown file's path.
|
||||
files: [
|
||||
'components/*/demo/*.md/*.ts',
|
||||
'components/*/demo/*.md/*.tsx',
|
||||
'components/*/demo/*.md/*.js',
|
||||
'components/*/demo/*.md/*.jsx',
|
||||
],
|
||||
// Configuration for fenced code blocks goes with the override for
|
||||
// the code block's virtual filename, for example:
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
impliedStrict: true,
|
||||
},
|
||||
},
|
||||
globals: {
|
||||
React: true,
|
||||
ReactDOM: true,
|
||||
@ -44,10 +65,12 @@ module.exports = {
|
||||
'no-plusplus': 0,
|
||||
'eol-last': 0,
|
||||
'no-script-url': 0,
|
||||
'default-case': 0,
|
||||
'prefer-rest-params': 0,
|
||||
'react/no-access-state-in-setstate': 0,
|
||||
'react/destructuring-assignment': 0,
|
||||
'react/no-multi-comp': 0,
|
||||
'react/no-array-index-key': 0,
|
||||
'jsx-a11y/href-no-hash': 0,
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
'jsx-a11y/control-has-associated-label': 0,
|
||||
|
||||
@ -18,9 +18,7 @@ import { Anchor } from 'antd';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const getCurrentAnchor = () => {
|
||||
return '#components-anchor-demo-static';
|
||||
};
|
||||
const getCurrentAnchor = () => '#components-anchor-demo-static';
|
||||
|
||||
ReactDOM.render(
|
||||
<Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
|
||||
|
||||
@ -17,11 +17,9 @@ Basic Usage, set data source of autocomplete with `options` property.
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const mockVal = (str: string, repeat: number = 1) => {
|
||||
return {
|
||||
value: str.repeat(repeat),
|
||||
};
|
||||
};
|
||||
const mockVal = (str: string, repeat: number = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
});
|
||||
const Complete: React.FC = () => {
|
||||
const [value, setValue] = useState('');
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
|
||||
@ -17,40 +17,36 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
|
||||
import { Input, AutoComplete } from 'antd';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
|
||||
const renderTitle = (title: string) => {
|
||||
return (
|
||||
<span>
|
||||
{title}
|
||||
<a
|
||||
style={{ float: 'right' }}
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
const renderTitle = (title: string) => (
|
||||
<span>
|
||||
{title}
|
||||
<a
|
||||
style={{ float: 'right' }}
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
|
||||
const renderItem = (title: string, count: number) => {
|
||||
return {
|
||||
value: title,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
<span>
|
||||
<UserOutlined /> {count}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
};
|
||||
const renderItem = (title: string, count: number) => ({
|
||||
value: title,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
<span>
|
||||
<UserOutlined /> {count}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
||||
const options = [
|
||||
{
|
||||
|
||||
@ -22,8 +22,8 @@ function getRandomInt(max: number, min: number = 0) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
|
||||
}
|
||||
|
||||
const searchResult = (query: string) => {
|
||||
return new Array(getRandomInt(5))
|
||||
const searchResult = (query: string) =>
|
||||
new Array(getRandomInt(5))
|
||||
.join('.')
|
||||
.split('.')
|
||||
.map((_, idx) => {
|
||||
@ -52,7 +52,6 @@ const searchResult = (query: string) => {
|
||||
),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const Complete: React.FC = () => {
|
||||
const [options, setOptions] = useState<SelectProps<object>['options']>([]);
|
||||
|
||||
@ -17,44 +17,40 @@ Avatar group display.
|
||||
import { Avatar, Divider, Tooltip } from 'antd';
|
||||
import { UserOutlined, AntDesignOutlined } from '@ant-design/icons';
|
||||
|
||||
class Demo extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Avatar.Group>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
|
||||
>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
const Demo = () => (
|
||||
<>
|
||||
<Avatar.Group>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
|
||||
>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
</>
|
||||
);
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
|
||||
@ -235,7 +235,7 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
|
||||
);
|
||||
};
|
||||
|
||||
/** @private internal usage. do not use in your production */
|
||||
/** @private internal Usage. do not use in your production */
|
||||
ConfigProvider.ConfigContext = ConfigContext;
|
||||
ConfigProvider.SizeContext = SizeContext;
|
||||
ConfigProvider.config = setGlobalConfig;
|
||||
|
||||
@ -28,11 +28,7 @@ const App: React.FC = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
return (
|
||||
<ConfigProvider
|
||||
getPopupContainer={() => {
|
||||
return domRef.current!;
|
||||
}}
|
||||
>
|
||||
<ConfigProvider getPopupContainer={() => domRef.current!}>
|
||||
<div ref={domRef} className="site-drawer-render-in-current-wrapper">
|
||||
<Button type="primary" onClick={showDrawer}>
|
||||
Open
|
||||
|
||||
@ -11,9 +11,9 @@ const EMPTY_LIST: React.ReactNode[] = [];
|
||||
|
||||
export interface ErrorListProps {
|
||||
errors?: React.ReactNode[];
|
||||
/** @private Internal usage. Do not use in your production */
|
||||
/** @private Internal Usage. Do not use in your production */
|
||||
help?: React.ReactNode;
|
||||
/** @private Internal usage. Do not use in your production */
|
||||
/** @private Internal Usage. Do not use in your production */
|
||||
onDomErrorVisibleChange?: (visible: boolean) => void;
|
||||
}
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ interface FormItemInputMiscProps {
|
||||
hasFeedback?: boolean;
|
||||
validateStatus?: ValidateStatus;
|
||||
onDomErrorVisibleChange: (visible: boolean) => void;
|
||||
/** @private Internal usage, do not use in any of your production. */
|
||||
/** @private Internal Usage, do not use in any of your production. */
|
||||
_internalItemRender?: {
|
||||
mark: string;
|
||||
render: (
|
||||
|
||||
@ -43,7 +43,6 @@ const Demo = () => {
|
||||
return;
|
||||
case 'other':
|
||||
form.setFieldsValue({ note: 'Hi there!' });
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
@ -82,13 +81,13 @@ const Demo = () => {
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
return getFieldValue('gender') === 'other' ? (
|
||||
{({ getFieldValue }) =>
|
||||
getFieldValue('gender') === 'other' ? (
|
||||
<Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
) : null;
|
||||
}}
|
||||
) : null
|
||||
}
|
||||
</Form.Item>
|
||||
<Form.Item {...tailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
|
||||
@ -40,7 +40,6 @@ class Demo extends React.Component {
|
||||
return;
|
||||
case 'other':
|
||||
this.formRef.current!.setFieldsValue({ note: 'Hi there!' });
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
@ -80,8 +79,8 @@ class Demo extends React.Component {
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
return getFieldValue('gender') === 'other' ? (
|
||||
{({ getFieldValue }) =>
|
||||
getFieldValue('gender') === 'other' ? (
|
||||
<Form.Item
|
||||
name="customizeGender"
|
||||
label="Customize Gender"
|
||||
@ -89,8 +88,8 @@ class Demo extends React.Component {
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
) : null;
|
||||
}}
|
||||
) : null
|
||||
}
|
||||
</Form.Item>
|
||||
<Form.Item {...tailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
|
||||
@ -92,7 +92,7 @@ const Demo = () => {
|
||||
if (value.number > 0) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('Price must be greater than zero!');
|
||||
return Promise.reject(new Error('Price must be greater than zero!'));
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -31,10 +31,10 @@ const Demo = () => {
|
||||
}}
|
||||
>
|
||||
<Form.Item noStyle dependencies={['debug1']}>
|
||||
{() => {
|
||||
return acc++;
|
||||
{
|
||||
() => acc++
|
||||
// return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;
|
||||
}}
|
||||
}
|
||||
</Form.Item>
|
||||
<Form.Item label="debug1" name="debug1">
|
||||
<Input />
|
||||
|
||||
@ -34,26 +34,24 @@ interface CustomizedFormProps {
|
||||
fields: FieldData[];
|
||||
}
|
||||
|
||||
const CustomizedForm: React.FC<CustomizedFormProps> = ({ onChange, fields }) => {
|
||||
return (
|
||||
<Form
|
||||
name="global_state"
|
||||
layout="inline"
|
||||
fields={fields}
|
||||
onFieldsChange={(_, allFields) => {
|
||||
onChange(allFields);
|
||||
}}
|
||||
const CustomizedForm: React.FC<CustomizedFormProps> = ({ onChange, fields }) => (
|
||||
<Form
|
||||
name="global_state"
|
||||
layout="inline"
|
||||
fields={fields}
|
||||
onFieldsChange={(_, allFields) => {
|
||||
onChange(allFields);
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="Username"
|
||||
rules={[{ required: true, message: 'Username is required!' }]}
|
||||
>
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="Username"
|
||||
rules={[{ required: true, message: 'Username is required!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
const Demo = () => {
|
||||
const [fields, setFields] = useState<FieldData[]>([{ name: ['username'], value: 'Ant Design' }]);
|
||||
|
||||
@ -49,7 +49,7 @@ const HorizontalLoginForm = () => {
|
||||
placeholder="Password"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item shouldUpdate={true}>
|
||||
<Form.Item shouldUpdate>
|
||||
{() => (
|
||||
<Button
|
||||
type="primary"
|
||||
|
||||
@ -21,6 +21,7 @@ const layout = {
|
||||
wrapperCol: { span: 16 },
|
||||
};
|
||||
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
const validateMessages = {
|
||||
required: '${label} is required!',
|
||||
types: {
|
||||
@ -31,6 +32,7 @@ const validateMessages = {
|
||||
range: '${label} must be between ${min} and ${max}',
|
||||
},
|
||||
};
|
||||
/* eslint-enable no-template-curly-in-string */
|
||||
|
||||
const Demo = () => {
|
||||
const onFinish = (values: any) => {
|
||||
|
||||
@ -178,7 +178,7 @@ const RegistrationForm = () => {
|
||||
if (!value || getFieldValue('password') === value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('The two passwords that you entered do not match!');
|
||||
return Promise.reject(new Error('The two passwords that you entered do not match!'));
|
||||
},
|
||||
}),
|
||||
]}
|
||||
@ -252,7 +252,7 @@ const RegistrationForm = () => {
|
||||
rules={[
|
||||
{
|
||||
validator: (_, value) =>
|
||||
value ? Promise.resolve() : Promise.reject('Should accept agreement'),
|
||||
value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
|
||||
},
|
||||
]}
|
||||
{...tailFormItemLayout}
|
||||
|
||||
@ -24,8 +24,8 @@ const FormLayoutDemo = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [requiredMark, setRequiredMarkType] = useState<RequiredMark>('optional');
|
||||
|
||||
const onRequiredTypeChange = ({ requiredMark }: { requiredMark: RequiredMark }) => {
|
||||
setRequiredMarkType(requiredMark);
|
||||
const onRequiredTypeChange = ({ requiredMarkValue }: { requiredMarkValue: RequiredMark }) => {
|
||||
setRequiredMarkType(requiredMarkValue);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -39,7 +39,7 @@ const FormLayoutDemo = () => {
|
||||
<Form.Item label="Required Mark" name="requiredMark">
|
||||
<Radio.Group>
|
||||
<Radio.Button value="optional">Optional</Radio.Button>
|
||||
<Radio.Button value={true}>Required</Radio.Button>
|
||||
<Radio.Button value>Required</Radio.Button>
|
||||
<Radio.Button value={false}>Hidden</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
@ -56,8 +56,8 @@ const Demo = () => {
|
||||
{...formItemLayout}
|
||||
onFinish={onFinish}
|
||||
initialValues={{
|
||||
['input-number']: 3,
|
||||
['checkbox-group']: ['A', 'B'],
|
||||
'input-number': 3,
|
||||
'checkbox-group': ['A', 'B'],
|
||||
rate: 3.5,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -45,7 +45,7 @@ interface ClearableInputProps extends BasicProps {
|
||||
}
|
||||
|
||||
class ClearableLabeledInput extends React.Component<ClearableInputProps> {
|
||||
/** @private Do not use out of this class. We do not promise this is always keep. */
|
||||
/** @private Do Not use out of this class. We do not promise this is always keep. */
|
||||
private containerRef = React.createRef<HTMLSpanElement>();
|
||||
|
||||
onInputMouseUp: React.MouseEventHandler = e => {
|
||||
|
||||
@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
|
||||
| locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} | |
|
||||
| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false | |
|
||||
| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - | |
|
||||
| rowKey | 当 `renderItem` 自定义渲染列表项有效时，自定义每一行的 `key` 的获取方式 | ((item: T) => string) | `list-item-${index}` | |
|
||||
| rowKey | 当 `renderItem` 自定义渲染列表项有效时，自定义每一行的 `key` 的获取方式 | ((item: T) => string) | `list-item-${index}` | |
|
||||
| size | list 的尺寸 | `default` \| `large` \| `small` | `default` | |
|
||||
| split | 是否展示分割线 | boolean | true | |
|
||||
|
||||
|
||||
@ -252,7 +252,7 @@ export interface MessageApi extends MessageInstance {
|
||||
useMessage(): [MessageInstance, React.ReactElement];
|
||||
}
|
||||
|
||||
/** @private test only function. Not work on production */
|
||||
/** @private test Only function. Not work on production */
|
||||
export const getInstance = () => (process.env.NODE_ENV === 'test' ? messageInstance : null);
|
||||
|
||||
export default api as MessageApi;
|
||||
|
||||
@ -282,7 +282,7 @@ export interface NotificationApi extends NotificationInstance {
|
||||
useNotification: () => [NotificationInstance, React.ReactElement];
|
||||
}
|
||||
|
||||
/** @private test only function. Not work on production */
|
||||
/** @private test Only function. Not work on production */
|
||||
export const getInstance = async (cacheKey: string) =>
|
||||
process.env.NODE_ENV === 'test' ? notificationInstance[cacheKey] : null;
|
||||
|
||||
|
||||
@ -155,9 +155,9 @@
|
||||
|
||||
&-fade-enter,
|
||||
&-fade-appear {
|
||||
opacity: 0;
|
||||
.notification-fade-effect();
|
||||
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
|
||||
@ -236,10 +236,9 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
};
|
||||
|
||||
/**
|
||||
* Controlled state in `columns` is not a good idea that makes too many code (1000+ line?) to
|
||||
* read state out and then put it back to title render. Move these code into `hooks` but still
|
||||
* too complex. We should provides Table props like `sorter` & `filter` to handle control in next
|
||||
* big version.
|
||||
* Controlled state in `columns` is not a good idea that makes too many code (1000+ line?) to read
|
||||
* state out and then put it back to title render. Move these code into `hooks` but still too
|
||||
* complex. We should provides Table props like `sorter` & `filter` to handle control in next big version.
|
||||
*/
|
||||
|
||||
// ============================ Sorter =============================
|
||||
|
||||
@ -333,8 +333,8 @@ describe('Table.pagination', () => {
|
||||
});
|
||||
|
||||
/**
|
||||
* `pagination` is not designed to accept `true` value, but in practice, many people assign
|
||||
* `true` to `pagination`, since they misunderstand that `pagination` can accept a boolean value.
|
||||
* `pagination` is not designed to accept `true` value, but in practice, many people assign `true`
|
||||
* to `pagination`, since they misunderstand that `pagination` can accept a boolean value.
|
||||
*/
|
||||
it('Accepts pagination as true', () => {
|
||||
const wrapper = mount(createTable({ pagination: true }));
|
||||
|
||||
@ -16,38 +16,42 @@ By using custom components, we can integrate table with react-dnd to implement d
|
||||
```jsx
|
||||
import React, { useState, useCallback, useRef } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import { DndProvider, useDrag, useDrop, createDndContext } from 'react-dnd';
|
||||
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||
import update from 'immutability-helper';
|
||||
|
||||
const RNDContext = createDndContext(HTML5Backend);
|
||||
|
||||
const type = 'DragableBodyRow';
|
||||
|
||||
const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
|
||||
const ref = React.useRef();
|
||||
const [{ isOver, dropClassName }, drop] = useDrop({
|
||||
accept: type,
|
||||
collect: monitor => {
|
||||
const { index: dragIndex } = monitor.getItem() || {};
|
||||
if (dragIndex === index) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
isOver: monitor.isOver(),
|
||||
dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
|
||||
};
|
||||
},
|
||||
drop: item => {
|
||||
moveRow(item.index, index);
|
||||
},
|
||||
});
|
||||
const [, drag] = useDrag({
|
||||
item: { type, index },
|
||||
collect: monitor => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
const [{ isOver, dropClassName }, drop] = useDrop(
|
||||
() => ({
|
||||
accept: type,
|
||||
collect: monitor => {
|
||||
const { index: dragIndex } = monitor.getItem() || {};
|
||||
if (dragIndex === index) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
isOver: monitor.isOver(),
|
||||
dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
|
||||
};
|
||||
},
|
||||
drop: item => {
|
||||
moveRow(item.index, index);
|
||||
},
|
||||
}),
|
||||
});
|
||||
[index],
|
||||
);
|
||||
const [, drag] = useDrag(
|
||||
() => ({
|
||||
item: { type, index },
|
||||
collect: monitor => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
}),
|
||||
[],
|
||||
);
|
||||
drop(drag(ref));
|
||||
return (
|
||||
<tr
|
||||
@ -120,10 +124,8 @@ const DragSortingTable: React.FC = () => {
|
||||
[data],
|
||||
);
|
||||
|
||||
const manager = useRef(RNDContext);
|
||||
|
||||
return (
|
||||
<DndProvider manager={manager.current.dragDropManager}>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
|
||||
@ -67,22 +67,22 @@ const Demo = () => {
|
||||
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
|
||||
|
||||
const onExpand = (expandedKeys: React.Key[]) => {
|
||||
console.log('onExpand', expandedKeys);
|
||||
const onExpand = (expandedKeysValue: React.Key[]) => {
|
||||
console.log('onExpand', expandedKeysValue);
|
||||
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||
// or, you can remove all expanded children keys.
|
||||
setExpandedKeys(expandedKeys);
|
||||
setExpandedKeys(expandedKeysValue);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
|
||||
const onCheck = (checkedKeys: React.Key[]) => {
|
||||
console.log('onCheck', checkedKeys);
|
||||
setCheckedKeys(checkedKeys);
|
||||
const onCheck = (checkedKeysValue: React.Key[]) => {
|
||||
console.log('onCheck', checkedKeysValue);
|
||||
setCheckedKeys(checkedKeysValue);
|
||||
};
|
||||
|
||||
const onSelect = (selectedKeys: React.Key[], info: any) => {
|
||||
const onSelect = (selectedKeysValue: React.Key[], info: any) => {
|
||||
console.log('onSelect', info);
|
||||
setSelectedKeys(selectedKeys);
|
||||
setSelectedKeys(selectedKeysValue);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -38,7 +38,8 @@ function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]):
|
||||
...node,
|
||||
children,
|
||||
};
|
||||
} else if (node.children) {
|
||||
}
|
||||
if (node.children) {
|
||||
return {
|
||||
...node,
|
||||
children: updateTreeData(node.children, key, children),
|
||||
|
||||
@ -98,11 +98,7 @@ const Demo: React.FC<{}> = () => {
|
||||
};
|
||||
|
||||
const onSetShowLine = (checked: boolean) => {
|
||||
if (checked) {
|
||||
showLeafIcon ? setShowLine(checked) : setShowLine({ showLeafIcon });
|
||||
} else {
|
||||
setShowLine(checked);
|
||||
}
|
||||
setShowLine(checked ? { showLeafIcon } : false);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -719,7 +719,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Click to Upload
|
||||
Click to Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
@ -16,40 +16,44 @@ By using `itemRender`, we can integrate upload with react-dnd to implement drag
|
||||
```jsx
|
||||
import React, { useState, useCallback, useRef } from 'react';
|
||||
import { Upload, Button, Tooltip } from 'antd';
|
||||
import { DndProvider, useDrag, useDrop, createDndContext } from 'react-dnd';
|
||||
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||
import update from 'immutability-helper';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
|
||||
const RNDContext = createDndContext(HTML5Backend);
|
||||
|
||||
const type = 'DragableUploadList';
|
||||
|
||||
const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
|
||||
const ref = React.useRef();
|
||||
const index = fileList.indexOf(file);
|
||||
const [{ isOver, dropClassName }, drop] = useDrop({
|
||||
accept: type,
|
||||
collect: monitor => {
|
||||
const { index: dragIndex } = monitor.getItem() || {};
|
||||
if (dragIndex === index) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
isOver: monitor.isOver(),
|
||||
dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
|
||||
};
|
||||
},
|
||||
drop: item => {
|
||||
moveRow(item.index, index);
|
||||
},
|
||||
});
|
||||
const [, drag] = useDrag({
|
||||
item: { type, index },
|
||||
collect: monitor => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
const [{ isOver, dropClassName }, drop] = useDrop(
|
||||
() => ({
|
||||
accept: type,
|
||||
collect: monitor => {
|
||||
const { index: dragIndex } = monitor.getItem() || {};
|
||||
if (dragIndex === index) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
isOver: monitor.isOver(),
|
||||
dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
|
||||
};
|
||||
},
|
||||
drop: item => {
|
||||
moveRow(item.index, index);
|
||||
},
|
||||
}),
|
||||
});
|
||||
[index],
|
||||
);
|
||||
const [, drag] = useDrag(
|
||||
() => ({
|
||||
item: { type, index },
|
||||
collect: monitor => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
}),
|
||||
[],
|
||||
);
|
||||
drop(drag(ref));
|
||||
const errorNode = (
|
||||
<Tooltip title="Upload Error" getPopupContainer={() => document.body}>
|
||||
@ -115,14 +119,12 @@ const DragSortingUpload: React.FC = () => {
|
||||
[fileList],
|
||||
);
|
||||
|
||||
const manager = useRef(RNDContext);
|
||||
|
||||
const onChange = ({ fileList: newFileList }) => {
|
||||
setFileList(newFileList);
|
||||
};
|
||||
|
||||
return (
|
||||
<DndProvider manager={manager.current.dragDropManager}>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<Upload
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
fileList={fileList}
|
||||
@ -136,9 +138,7 @@ const DragSortingUpload: React.FC = () => {
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<Button>
|
||||
<UploadOutlined /> Click to Upload
|
||||
</Button>
|
||||
<Button icon={<UploadOutlined />}>Click to Upload</Button>
|
||||
</Upload>
|
||||
</DndProvider>
|
||||
);
|
||||
|
||||
15
package.json
15
package.json
@ -69,7 +69,7 @@
|
||||
"dist:esbuild": "ESBUILD=true npm run dist",
|
||||
"lint": "npm run tsc && npm run lint:script && npm run lint:demo && npm run lint:style && npm run lint:deps && npm run lint:md",
|
||||
"lint-fix": "npm run lint-fix:script && npm run lint-fix:demo && npm run lint-fix:style",
|
||||
"lint-fix:demo": "eslint-tinker ./components/*/demo/*.md",
|
||||
"lint-fix:demo": "npm run lint:demo -- --fix",
|
||||
"lint-fix:script": "npm run lint:script -- --fix",
|
||||
"lint-fix:style": "npm run lint:style -- --fix",
|
||||
"lint:demo": "eslint components/*/demo/*.md",
|
||||
@ -188,7 +188,7 @@
|
||||
"bundlesize": "^0.18.0",
|
||||
"chalk": "^4.0.0",
|
||||
"cheerio": "^1.0.0-rc.3",
|
||||
"concurrently": "^5.0.2",
|
||||
"concurrently": "^6.0.0",
|
||||
"cross-env": "^7.0.0",
|
||||
"css-minimizer-webpack-plugin": "^1.1.1",
|
||||
"css-split-webpack-plugin": "^0.2.6",
|
||||
@ -200,16 +200,15 @@
|
||||
"esbuild-loader": "^2.7.0",
|
||||
"eslint": "^7.9.0",
|
||||
"eslint-config-airbnb": "^18.0.0",
|
||||
"eslint-config-prettier": "^7.0.0",
|
||||
"eslint-config-prettier": "^8.0.0",
|
||||
"eslint-plugin-babel": "^5.3.0",
|
||||
"eslint-plugin-import": "^2.21.1",
|
||||
"eslint-plugin-jest": "^24.0.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.2.1",
|
||||
"eslint-plugin-markdown": "^1.0.0",
|
||||
"eslint-plugin-markdown": "^2.0.0",
|
||||
"eslint-plugin-react": "^7.20.6",
|
||||
"eslint-plugin-react-hooks": "^4.1.2",
|
||||
"eslint-plugin-unicorn": "^27.0.0",
|
||||
"eslint-tinker": "^0.5.0",
|
||||
"eslint-plugin-unicorn": "^28.0.2",
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
"fs-extra": "^9.0.0",
|
||||
"full-icu": "^1.3.0",
|
||||
@ -247,8 +246,8 @@
|
||||
"react": "^17.0.1",
|
||||
"react-color": "^2.17.3",
|
||||
"react-copy-to-clipboard": "^5.0.1",
|
||||
"react-dnd": "^11.1.1",
|
||||
"react-dnd-html5-backend": "^11.1.1",
|
||||
"react-dnd": "^13.0.0",
|
||||
"react-dnd-html5-backend": "^12.1.0",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-draggable": "^4.4.3",
|
||||
"react-github-button": "^0.1.11",
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint no-console: 0 */
|
||||
const chalk = require('chalk');
|
||||
const fs = require('fs');
|
||||
const { join } = require('path');
|
||||
|
||||
@ -76,7 +76,11 @@ module.exports = {
|
||||
|
||||
// Resolve use react hook fail when yarn link or npm link
|
||||
// https://github.com/webpack/webpack/issues/8607#issuecomment-453068938
|
||||
config.resolve.alias = { ...config.resolve.alias, react: require.resolve('react') };
|
||||
config.resolve.alias = {
|
||||
...config.resolve.alias,
|
||||
'react/jsx-runtime': require.resolve('react/jsx-runtime'),
|
||||
react: require.resolve('react'),
|
||||
};
|
||||
} else if (process.env.ESBUILD) {
|
||||
// use esbuild
|
||||
config.plugins.push(new ESBuildPlugin());
|
||||
|
||||
Loading…
Reference in New Issue
Block a user