1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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 };