ant-design/components/transfer/operation.tsx
叶枫 502dac12aa
docs: format code ()
* docs: fix code

* feat: lint

* feat: prettier

* feat: test

* feat: review

* feat: format html

* feat: format html
2024-04-08 14:04:08 +08:00

67 lines
1.6 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';
import type { DirectionType } from '../config-provider';
export interface TransferOperationProps {
className?: string;
leftArrowText?: string;
rightArrowText?: string;
moveToLeft?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
moveToRight?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
leftActive?: boolean;
rightActive?: boolean;
style?: React.CSSProperties;
disabled?: boolean;
direction?: DirectionType;
oneWay?: boolean;
}
const Operation: React.FC<TransferOperationProps> = (props) => {
const {
disabled,
moveToLeft,
moveToRight,
leftArrowText = '',
rightArrowText = '',
leftActive,
rightActive,
className,
style,
direction,
oneWay,
} = props;
return (
<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>
);
};
if (process.env.NODE_ENV !== 'production') {
Operation.displayName = 'Operation';
}
export default Operation;