mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 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() {
}
export type TransferDirection = 'left' | 'right';
export interface TransferItem {
key: string;
title: string;
@ -41,9 +43,17 @@ export interface TransferProps {
footer?: (props: TransferListProps) => React.ReactNode;
body?: (props: TransferListProps) => React.ReactNode;
rowKey?: (record: TransferItem) => string;
onSearchChange?: (direction: 'left' | 'right', e: Event) => void;
onSearchChange?: (direction: TransferDirection, e: React.ChangeEvent<HTMLInputElement>) => void;
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> {
@ -167,12 +177,14 @@ export default class Transfer extends React.Component<TransferProps, any> {
return this.splitedDataSource;
}
moveTo = (direction) => {
moveTo = (direction: TransferDirection) => {
const { targetKeys = [], dataSource = [], onChange } = this.props;
const { sourceSelectedKeys, targetSelectedKeys } = this.state;
const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
// 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
const newTargetKeys = direction === 'right'
? newMoveKeys.concat(targetKeys)
@ -193,7 +205,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
moveToLeft = () => this.moveTo('left');
moveToRight = () => this.moveTo('right');
handleSelectChange(direction: string, holder: string[]) {
handleSelectChange(direction: TransferDirection, holder: string[]) {
const { sourceSelectedKeys, targetSelectedKeys } = this.state;
const onSelectChange = this.props.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 currentKeys = filteredDataSource.map(item => item.key);
// 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];
currentKeys.forEach((key) => {
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)
)
handleRightSelectAll = (filteredDataSource, checkAll) => (
handleRightSelectAll = (filteredDataSource: TransferItem[], checkAll: boolean) => (
this.handleSelectAll('right', filteredDataSource, checkAll)
)
handleFilter = (direction, e) => {
handleFilter = (direction: TransferDirection, e: React.ChangeEvent<HTMLInputElement>) => {
this.setState({
// add filter
[`${direction}Filter`]: e.target.value,
@ -245,10 +257,10 @@ export default class Transfer extends React.Component<TransferProps, any> {
}
}
handleLeftFilter = (e) => this.handleFilter('left', e);
handleRightFilter = (e) => this.handleFilter('right', e);
handleLeftFilter = (e: React.ChangeEvent<HTMLInputElement>) => this.handleFilter('left', e);
handleRightFilter = (e: React.ChangeEvent<HTMLInputElement>) => this.handleFilter('right', e);
handleClear = (direction) => {
handleClear = (direction: string) => {
this.setState({
[`${direction}Filter`]: '',
});
@ -257,7 +269,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
handleLeftClear = () => this.handleClear('left');
handleRightClear = () => this.handleClear('right');
handleSelect = (direction, selectedItem, checked) => {
handleSelect = (direction: TransferDirection, selectedItem: TransferItem, checked: boolean) => {
const { sourceSelectedKeys, targetSelectedKeys } = this.state;
const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys];
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);
handleRightSelect = (selectedItem, checked) => this.handleSelect('right', selectedItem, checked);
handleLeftSelect = (selectedItem: TransferItem, checked: boolean) => {
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;
if (onScroll) {
onScroll(direction, e);
}
}
handleLeftScroll = (e) => this.handleScroll('left', e);
handleRightScroll = (e) => this.handleScroll('right', e);
handleLeftScroll = (e: React.SyntheticEvent<HTMLDivElement>) => this.handleScroll('left', e);
handleRightScroll = (e: React.SyntheticEvent<HTMLDivElement>) => this.handleScroll('right', e);
getTitles(transferLocale): string[] {
getTitles(transferLocale: TransferLocale): string[] {
const { props } = this;
if (props.titles) {
return props.titles;
@ -297,11 +314,11 @@ export default class Transfer extends React.Component<TransferProps, any> {
return transferLocale.titles;
}
getSelectedKeysName(direction) {
getSelectedKeysName(direction: TransferDirection) {
return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
}
renderTransfer = (locale) => {
renderTransfer = (locale: TransferLocale) => {
const {
prefixCls = 'ant-transfer',
className,

2
components/transfer/item.tsx
View File

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

16
components/transfer/list.tsx
View File

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