ant-design-vue/components/transfer/operation.jsx
2020-03-28 15:52:26 +08:00

57 lines
1.4 KiB
Vue

import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
import PropTypes from '../_util/vue-types';
import { getOptionProps } from '../_util/props-util';
import Button from '../button';
function noop() {}
export const TransferOperationProps = {
className: PropTypes.string,
leftArrowText: PropTypes.string,
rightArrowText: PropTypes.string,
moveToLeft: PropTypes.any,
moveToRight: PropTypes.any,
leftActive: PropTypes.bool,
rightActive: PropTypes.bool,
disabled: PropTypes.bool,
};
export default {
name: 'Operation',
props: { ...TransferOperationProps },
render() {
const {
disabled,
moveToLeft = noop,
moveToRight = noop,
leftArrowText = '',
rightArrowText = '',
leftActive,
rightActive,
} = getOptionProps(this);
return (
<div>
<Button
type="primary"
size="small"
disabled={disabled || !rightActive}
onClick={moveToRight}
>
<RightOutlined slot="icon" />
{rightArrowText}
</Button>
<Button
type="primary"
size="small"
disabled={disabled || !leftActive}
onClick={moveToLeft}
>
<LeftOutlined slot="icon" />
{leftArrowText}
</Button>
</div>
);
},
};