mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

Improve Transfer type definitions.

Browse Source
This commit is contained in:
Wei Zhu 2017-11-20 17:41:32 +08:00
parent 6837aedf69
commit 54b1715d2a
4 changed files with 50 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/transfer/index.tsx
View File

@ -14,6 +14,8 @@ export { SearchProps } from './search';
function noop() { function noop() {
} }
export type TransferDirection = 'left' | 'right';
export interface TransferItem { export interface TransferItem {
key: string; key: string;
title: string; title: string;
@ -41,9 +43,17 @@ export interface TransferProps {
footer?: (props: TransferListProps) => React.ReactNode; footer?: (props: TransferListProps) => React.ReactNode;
body?: (props: TransferListProps) => React.ReactNode; body?: (props: TransferListProps) => React.ReactNode;
rowKey?: (record: TransferItem) => string; rowKey?: (record: TransferItem) => string;
onSearchChange?: (direction: 'left' | 'right', e: Event) => void; onSearchChange?: (direction: TransferDirection, e: React.ChangeEvent<HTMLInputElement>) => void;
lazy?: {} | boolean; lazy?: {} | boolean;
onScroll?: (direction: 'left' | 'right', e: Event) => void; onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLDivElement>) => void;
}
export interface TransferLocale {
titles: string[];
notFoundContent: string;
searchPlaceholder: string;
itemUnit: string;
itemsUnit: string;
} }
export default class Transfer extends React.Component<TransferProps, any> { export default class Transfer extends React.Component<TransferProps, any> {
@ -167,12 +177,14 @@ export default class Transfer extends React.Component<TransferProps, any> {
return this.splitedDataSource; return this.splitedDataSource;
} }
moveTo = (direction) => { moveTo = (direction: TransferDirection) => {
const { targetKeys = [], dataSource = [], onChange } = this.props; const { targetKeys = [], dataSource = [], onChange } = this.props;
const { sourceSelectedKeys, targetSelectedKeys } = this.state; const { sourceSelectedKeys, targetSelectedKeys } = this.state;
const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys; const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
// filter the disabled options // filter the disabled options
const newMoveKeys = moveKeys.filter(key => !dataSource.some(data => !!(key === data.key && data.disabled))); const newMoveKeys = moveKeys.filter((key: string) =>
!dataSource.some(data => !!(key === data.key && data.disabled)),
);
// move items to target box // move items to target box
const newTargetKeys = direction === 'right' const newTargetKeys = direction === 'right'
? newMoveKeys.concat(targetKeys) ? newMoveKeys.concat(targetKeys)
@ -193,7 +205,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
moveToLeft = () => this.moveTo('left'); moveToLeft = () => this.moveTo('left');
moveToRight = () => this.moveTo('right'); moveToRight = () => this.moveTo('right');
handleSelectChange(direction: string, holder: string[]) { handleSelectChange(direction: TransferDirection, holder: string[]) {
const { sourceSelectedKeys, targetSelectedKeys } = this.state; const { sourceSelectedKeys, targetSelectedKeys } = this.state;
const onSelectChange = this.props.onSelectChange; const onSelectChange = this.props.onSelectChange;
if (!onSelectChange) { if (!onSelectChange) {
@ -207,11 +219,11 @@ export default class Transfer extends React.Component<TransferProps, any> {
} }
} }
handleSelectAll = (direction, filteredDataSource, checkAll) => { handleSelectAll = (direction: TransferDirection, filteredDataSource: TransferItem[], checkAll: boolean) => {
const originalSelectedKeys = this.state[this.getSelectedKeysName(direction)] || []; const originalSelectedKeys = this.state[this.getSelectedKeysName(direction)] || [];
const currentKeys = filteredDataSource.map(item => item.key); const currentKeys = filteredDataSource.map(item => item.key);
// Only operate current keys from original selected keys // Only operate current keys from original selected keys
const newKeys1 = originalSelectedKeys.filter(key => currentKeys.indexOf(key) === -1); const newKeys1 = originalSelectedKeys.filter((key: string) => currentKeys.indexOf(key) === -1);
const newKeys2 = [...originalSelectedKeys]; const newKeys2 = [...originalSelectedKeys];
currentKeys.forEach((key) => { currentKeys.forEach((key) => {
if (newKeys2.indexOf(key) === -1) { if (newKeys2.indexOf(key) === -1) {
@ -228,14 +240,14 @@ export default class Transfer extends React.Component<TransferProps, any> {
} }
} }
handleLeftSelectAll = (filteredDataSource, checkAll) => ( handleLeftSelectAll = (filteredDataSource: TransferItem[], checkAll: boolean) => (
this.handleSelectAll('left', filteredDataSource, checkAll) this.handleSelectAll('left', filteredDataSource, checkAll)
) )
handleRightSelectAll = (filteredDataSource, checkAll) => ( handleRightSelectAll = (filteredDataSource: TransferItem[], checkAll: boolean) => (
this.handleSelectAll('right', filteredDataSource, checkAll) this.handleSelectAll('right', filteredDataSource, checkAll)
) )
handleFilter = (direction, e) => { handleFilter = (direction: TransferDirection, e: React.ChangeEvent<HTMLInputElement>) => {
this.setState({ this.setState({
// add filter // add filter
[`${direction}Filter`]: e.target.value, [`${direction}Filter`]: e.target.value,
@ -245,10 +257,10 @@ export default class Transfer extends React.Component<TransferProps, any> {
} }
} }
handleLeftFilter = (e) => this.handleFilter('left', e); handleLeftFilter = (e: React.ChangeEvent<HTMLInputElement>) => this.handleFilter('left', e);
handleRightFilter = (e) => this.handleFilter('right', e); handleRightFilter = (e: React.ChangeEvent<HTMLInputElement>) => this.handleFilter('right', e);
handleClear = (direction) => { handleClear = (direction: string) => {
this.setState({ this.setState({
[`${direction}Filter`]: '', [`${direction}Filter`]: '',
}); });
@ -257,7 +269,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
handleLeftClear = () => this.handleClear('left'); handleLeftClear = () => this.handleClear('left');
handleRightClear = () => this.handleClear('right'); handleRightClear = () => this.handleClear('right');
handleSelect = (direction, selectedItem, checked) => { handleSelect = (direction: TransferDirection, selectedItem: TransferItem, checked: boolean) => {
const { sourceSelectedKeys, targetSelectedKeys } = this.state; const { sourceSelectedKeys, targetSelectedKeys } = this.state;
const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys]; const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys];
const index = holder.indexOf(selectedItem.key); const index = holder.indexOf(selectedItem.key);
@ -276,20 +288,25 @@ export default class Transfer extends React.Component<TransferProps, any> {
} }
} }
handleLeftSelect = (selectedItem, checked) => this.handleSelect('left', selectedItem, checked); handleLeftSelect = (selectedItem: TransferItem, checked: boolean) => {
handleRightSelect = (selectedItem, checked) => this.handleSelect('right', selectedItem, checked); return this.handleSelect('left', selectedItem, checked);
}
handleScroll = (direction, e) => { handleRightSelect = (selectedItem: TransferItem, checked: boolean) => {
return this.handleSelect('right', selectedItem, checked);
}
handleScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLDivElement>) => {
const { onScroll } = this.props; const { onScroll } = this.props;
if (onScroll) { if (onScroll) {
onScroll(direction, e); onScroll(direction, e);
} }
} }
handleLeftScroll = (e) => this.handleScroll('left', e); handleLeftScroll = (e: React.SyntheticEvent<HTMLDivElement>) => this.handleScroll('left', e);
handleRightScroll = (e) => this.handleScroll('right', e); handleRightScroll = (e: React.SyntheticEvent<HTMLDivElement>) => this.handleScroll('right', e);
getTitles(transferLocale): string[] { getTitles(transferLocale: TransferLocale): string[] {
const { props } = this; const { props } = this;
if (props.titles) { if (props.titles) {
return props.titles; return props.titles;
@ -297,11 +314,11 @@ export default class Transfer extends React.Component<TransferProps, any> {
return transferLocale.titles; return transferLocale.titles;
} }
getSelectedKeysName(direction) { getSelectedKeysName(direction: TransferDirection) {
return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys'; return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
} }
renderTransfer = (locale) => { renderTransfer = (locale: TransferLocale) => {
const { const {
prefixCls = 'ant-transfer', prefixCls = 'ant-transfer',
className, className,

2
components/transfer/item.tsx
View File

@ -5,7 +5,7 @@ import Lazyload from 'react-lazy-load';
import Checkbox from '../checkbox'; import Checkbox from '../checkbox';
export default class Item extends React.Component<any, any> { export default class Item extends React.Component<any, any> {
shouldComponentUpdate(...args) { shouldComponentUpdate(...args: any[]) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args); return PureRenderMixin.shouldComponentUpdate.apply(this, args);
} }
render() { render() {

16
components/transfer/list.tsx
View File

@ -12,7 +12,7 @@ import triggerEvent from '../_util/triggerEvent';
function noop() { function noop() {
} }
function isRenderResultPlainObject(result) { function isRenderResultPlainObject(result: any) {
return result && !React.isValidElement(result) && return result && !React.isValidElement(result) &&
Object.prototype.toString.call(result) === '[object Object]'; Object.prototype.toString.call(result) === '[object Object]';
} }
@ -53,7 +53,7 @@ export default class TransferList extends React.Component<TransferListProps, any
timer: number; timer: number;
triggerScrollTimer: number; triggerScrollTimer: number;
constructor(props) { constructor(props: TransferListProps) {
super(props); super(props);
this.state = { this.state = {
mounted: false, mounted: false,
@ -73,11 +73,11 @@ export default class TransferList extends React.Component<TransferListProps, any
clearTimeout(this.triggerScrollTimer); clearTimeout(this.triggerScrollTimer);
} }
shouldComponentUpdate(...args) { shouldComponentUpdate(...args: any[]) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args); return PureRenderMixin.shouldComponentUpdate.apply(this, args);
} }
getCheckStatus(filteredDataSource) { getCheckStatus(filteredDataSource: TransferItem[]) {
const { checkedKeys } = this.props; const { checkedKeys } = this.props;
if (checkedKeys.length === 0) { if (checkedKeys.length === 0) {
return 'none'; return 'none';
@ -87,13 +87,13 @@ export default class TransferList extends React.Component<TransferListProps, any
return 'part'; return 'part';
} }
handleSelect = (selectedItem) => { handleSelect = (selectedItem: TransferItem) => {
const { checkedKeys } = this.props; const { checkedKeys } = this.props;
const result = checkedKeys.some((key) => key === selectedItem.key); const result = checkedKeys.some((key) => key === selectedItem.key);
this.props.handleSelect(selectedItem, !result); this.props.handleSelect(selectedItem, !result);
} }
handleFilter = (e) => { handleFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
this.props.handleFilter(e); this.props.handleFilter(e);
if (!e.target.value) { if (!e.target.value) {
return; return;
@ -112,7 +112,7 @@ export default class TransferList extends React.Component<TransferListProps, any
this.props.handleClear(); this.props.handleClear();
} }
matchFilter = (text, item) => { matchFilter = (text: string, item: TransferItem) => {
const { filter, filterOption } = this.props; const { filter, filterOption } = this.props;
if (filterOption) { if (filterOption) {
return filterOption(filter, item); return filterOption(filter, item);
@ -120,7 +120,7 @@ export default class TransferList extends React.Component<TransferListProps, any
return text.indexOf(filter) >= 0; return text.indexOf(filter) >= 0;
} }
renderItem = (item) => { renderItem = (item: TransferItem) => {
const { render = noop } = this.props; const { render = noop } = this.props;
const renderResult = render(item); const renderResult = render(item);
const isRenderResultPlain = isRenderResultPlainObject(renderResult); const isRenderResultPlain = isRenderResultPlainObject(renderResult);

4
components/transfer/search.tsx
View File

@ -15,14 +15,14 @@ export default class Search extends React.Component<SearchProps, any> {
placeholder: '', placeholder: '',
}; };
handleChange = (e) => { handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const onChange = this.props.onChange; const onChange = this.props.onChange;
if (onChange) { if (onChange) {
onChange(e); onChange(e);
} }
} }
handleClear = (e) => { handleClear = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault(); e.preventDefault();
const handleClear = this.props.handleClear; const handleClear = this.props.handleClear;