index.js 2.62 KB
Newer Older
秦文海's avatar
秦文海 committed
1 2 3 4 5 6 7
import {
  CloseOutlined,
  PlusCircleOutlined,
  ZoomOutOutlined,
  MinusCircleOutlined,
  MinusOutlined,
} from '@ant-design/icons';
8 9 10
import { useState, useContext } from 'react';
import classNames from 'classnames';
import { ConfigProvider } from 'antd';
秦文海's avatar
秦文海 committed
11 12 13 14
import './index.less';
const Header = (props) => {
  const [showIcon, setShowIcon] = useState(true);
  const [windowStatus, setWindowStatus] = useState(true);
15 16
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('panda-gis-tipHeader');
秦文海's avatar
秦文海 committed
17 18 19 20 21 22
  const { headerSetting, events, changeStyle, changeScale } = props;
  const { scaleChange, windowChange, smallChange, tipClose } = events;
  const getWinChange = (icon) => {
    let name;
    setShowIcon(!icon);
    showIcon ? (name = 'large') : (name = 'middle');
秦文海's avatar
秦文海 committed
23 24
    let windowStyle = changeStyle({ name });
    windowChange({ name, ...windowStyle });
秦文海's avatar
秦文海 committed
25 26 27
  };
  const getWindowStatus = (flag) => {
    setWindowStatus(flag);
秦文海's avatar
秦文海 committed
28 29
    let scaleStyle = changeScale(flag);
    smallChange({ flag, ...scaleStyle });
秦文海's avatar
秦文海 committed
30 31 32 33 34 35 36 37 38 39 40 41 42
  };
  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 (
43
    <div className={classNames(`${prefixCls}-Tiphead`)}>
秦文海's avatar
秦文海 committed
44 45
      <div
        onClick={getWindowStatus.bind(this, true)}
46
        className={classNames(`${prefixCls}-TipheadTitle`)}
秦文海's avatar
秦文海 committed
47 48 49 50 51 52 53
        style={iconStyle().header}
      >
        <span>{headerSetting.layerName}</span>
        <span>-</span>
        <span>{headerSetting.oid}</span>
      </div>

54
      <div className={classNames(`${prefixCls}-iconList`)} style={iconStyle().other}>
秦文海's avatar
秦文海 committed
55
        <div style={iconStyle().icon}>
56
          <span className={classNames(`${prefixCls}-icons`)} title="缩放" onClick={scaleChange}>
秦文海's avatar
秦文海 committed
57
            <ZoomOutOutlined />
58
            <span className={classNames(`${prefixCls}-words`)}>缩放至</span>
秦文海's avatar
秦文海 committed
59
          </span>
60 61 62 63
          <span
            className={classNames(`${prefixCls}-icons`)}
            onClick={getWinChange.bind(this, showIcon)}
          >
秦文海's avatar
秦文海 committed
64 65
            {showIcon ? <PlusCircleOutlined /> : <MinusCircleOutlined />}
          </span>
66 67 68 69
          <span
            className={classNames(`${prefixCls}-icons`)}
            onClick={getWindowStatus.bind(this, false)}
          >
秦文海's avatar
秦文海 committed
70 71 72
            <MinusOutlined />
          </span>
        </div>
73
        <span className={classNames(`${prefixCls}-icons`)} onClick={tipClose}>
秦文海's avatar
秦文海 committed
74 75 76 77 78 79 80
          <CloseOutlined />
        </span>
      </div>
    </div>
  );
};
export { Header };