ant-design/components/transfer/operation.tsx
二货机器人 b0e528d14c
feat: Transfer support oneWay (#24041)
* use flex

* show clear btn

* support one way

* add dropdown

* add pagination

* support pagination

* use flex

* operation stretch

* pagination works

* update selection logic

* no need to show checkbox on pagination

* fix tree demo

* support invert selection

* remove current pages

* update style

* update snapshot

* clean up

* update test case

* update test case

* update snapshot

* fix lint

* add deps

* update doc

* update hover style

* update hover checked style

* adjust demo & active region

* fix lint

* update snapshot
2020-05-13 19:15:40 +08:00

58 lines
1.4 KiB
TypeScript

import * as React from 'react';
import LeftOutlined from '@ant-design/icons/LeftOutlined';
import RightOutlined from '@ant-design/icons/RightOutlined';
import Button from '../button';
export interface TransferOperationProps {
className?: string;
leftArrowText?: string;
rightArrowText?: string;
moveToLeft?: React.MouseEventHandler<HTMLButtonElement>;
moveToRight?: React.MouseEventHandler<HTMLButtonElement>;
leftActive?: boolean;
rightActive?: boolean;
style?: React.CSSProperties;
disabled?: boolean;
direction?: 'ltr' | 'rtl';
oneWay?: boolean;
}
const Operation = ({
disabled,
moveToLeft,
moveToRight,
leftArrowText = '',
rightArrowText = '',
leftActive,
rightActive,
className,
style,
direction,
oneWay,
}: TransferOperationProps) => (
<div className={className} style={style}>
<Button
type="primary"
size="small"
disabled={disabled || !rightActive}
onClick={moveToRight}
icon={direction !== 'rtl' ? <RightOutlined /> : <LeftOutlined />}
>
{rightArrowText}
</Button>
{!oneWay && (
<Button
type="primary"
size="small"
disabled={disabled || !leftActive}
onClick={moveToLeft}
icon={direction !== 'rtl' ? <LeftOutlined /> : <RightOutlined />}
>
{leftArrowText}
</Button>
)}
</div>
);
export default Operation;