import { CloseOutlined, PlusCircleOutlined, ZoomOutOutlined, MinusCircleOutlined, MinusOutlined, } from '@ant-design/icons'; import { useState, useContext } from 'react'; import classNames from 'classnames'; import { ConfigProvider } from 'antd'; import './index.less'; const Header = (props) => { const [showIcon, setShowIcon] = useState(true); const [windowStatus, setWindowStatus] = useState(true); const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const prefixCls = getPrefixCls('panda-gis-tipHeader'); const { headerSetting, events, changeStyle, changeScale } = props; const { scaleChange, windowChange, smallChange, tipClose } = events; const getWinChange = (icon) => { let name; setShowIcon(!icon); showIcon ? (name = 'large') : (name = 'middle'); let windowStyle = changeStyle({ name }); windowChange({ name, ...windowStyle }); }; const getWindowStatus = (flag) => { setWindowStatus(flag); let scaleStyle = changeScale(flag); smallChange({ flag, ...scaleStyle }); }; const iconStyle = () => { if (windowStatus) { return { icon: { display: 'inline-block' }, other: { width: '70%' }, header: { width: '30%' }, }; } else { return { icon: { display: 'none' }, other: { width: '0%' }, header: { width: '100%' } }; } }; return ( <div className={classNames(`${prefixCls}-Tiphead`)}> <div onClick={getWindowStatus.bind(this, true)} className={classNames(`${prefixCls}-TipheadTitle`)} style={iconStyle().header} > <span>{headerSetting.layerName}</span> <span>-</span> <span>{headerSetting.oid}</span> </div> <div className={classNames(`${prefixCls}-iconList`)} style={iconStyle().other}> <div style={iconStyle().icon}> <span className={classNames(`${prefixCls}-icons`)} title="缩放" onClick={scaleChange}> <ZoomOutOutlined /> <span className={classNames(`${prefixCls}-words`)}>缩放至</span> </span> <span className={classNames(`${prefixCls}-icons`)} onClick={getWinChange.bind(this, showIcon)} > {showIcon ? <PlusCircleOutlined /> : <MinusCircleOutlined />} </span> <span className={classNames(`${prefixCls}-icons`)} onClick={getWindowStatus.bind(this, false)} > <MinusOutlined /> </span> </div> <span className={classNames(`${prefixCls}-icons`)} onClick={tipClose}> <CloseOutlined /> </span> </div> </div> ); }; export { Header };