39 lines
995 B
TypeScript
39 lines
995 B
TypeScript
import * as React from 'react';
|
|
import classnames from 'classnames';
|
|
import { Icon, Button } from '@zhst/meta';
|
|
import './index.less';
|
|
|
|
const componentName = `zhst-image__nav`;
|
|
|
|
const Navigation: React.FC<{
|
|
show?: boolean;
|
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
prev?: boolean;
|
|
next?: boolean;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
color?: string;
|
|
hoverColor?: string;
|
|
}> = (props) => {
|
|
const { show, prev, next, disabled, onClick, className, color } = props;
|
|
|
|
return (
|
|
<div
|
|
className={classnames(
|
|
`${componentName}`,
|
|
prev && `${componentName}-prev`,
|
|
next && `${componentName}-next`,
|
|
disabled && `${componentName}--disable`,
|
|
!show && `${componentName}--hide`,
|
|
className
|
|
)}
|
|
>
|
|
<Button type="text" disabled={disabled} onClick={onClick}>
|
|
<Icon size={28} color={color} icon={prev ? 'icon-qiehuanzuo' : 'icon-qiehuanyou'} />
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|