index.js

import React, { useState, useContext, forwardRef } from 'react';
import classNames from 'classnames';
import { ConfigProvider } from 'antd';
import { Header } from './header';
import { LeftList } from './leftList';
import _ from 'lodash';
import './index.less';

const TipTool = forwardRef((props, ref) => {
  const { style } = props;
  const { leftSetting, headerSetting, events } = props.dataList;
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('panda-gis-tip');
  const data = [
    {
      name: 'middle',
      width: style.minWidth ?? '600px',
      height: style.minHeight ?? '300px',
      active: true,
    },
    {
      name: 'large',
      width: style.maxWidth ?? '800px',
      height: style.maxHeight ?? '400px',
      active: false,
    },
  ];

  const scale = {
    name: 'small',
    width: '200px',
    height: '45px',
    active: true,
  };
  const [styleState, setStyleState] = useState(data);
  const [styleScale, setScaleState] = useState(scale);
  const changeStyle = ({ name }) => {
    let data = styleState.slice();
    data.map((item) => {
      if (name == item.name) {
        item.active = true;
      } else {
        item.active = false;
      }
    });
    setStyleState(data);
    return getWidthAndHeight(data);
  };

  const changeScale = (flag) => {
    let obj = { ...styleScale };
    obj.active = flag;
    setScaleState(obj);
    if (flag) {
      return getWidthAndHeight(styleState);
    } else {
      return { height: obj.height, width: obj.width };
    }
  };

  const computedStyle = () => {
    if (!styleScale.active) {
      return { width: styleScale.width, height: styleScale.height };
    } else {
      return getWidthAndHeight(styleState);
    }
  };

  const getWidthAndHeight = (data) => {
    return data
      .filter((item) => item.active)
      .map(({ width, height }) => {
        return { width, height };
      })[0];
  };

  const displayComput = () => {
    if (styleScale.active) {
      return { display: 'inline-block' };
    } else {
      return { display: 'none' };
    }
  };
  return (
    <div className={classNames(`${prefixCls}-Tipwripconter`)} ref={ref} style={computedStyle()}>
      <Header
        headerSetting={headerSetting}
        events={events}
        changeStyle={changeStyle}
        changeScale={changeScale}
      />
      <div className={classNames(`${prefixCls}-TipAll`)} style={displayComput()}>
        <div className={classNames(`${prefixCls}-Tipconter`)}>
          <div className={classNames(`${prefixCls}-Tipleft`)}>
            <LeftList leftSetting={leftSetting} />
          </div>
        </div>
        <div className={classNames(`${prefixCls}-tipfooter`)}></div>
      </div>
    </div>
  );
});
//分类可见与不可见属性的数组
export const getVisibleAttribues = function (attribuesArr, fields) {
  var attrs = [];
  fields.forEach(function (item, i, arr) {
    attribuesArr.forEach(function (attr, index) {
      if (i == 0) {
        attrs[index] = {
          show: {},
          hide: {},
          fields: [],
        };
      }
      // 属性值
      var attrValue = attr[item.name];
      if (_.isUndefined(attrValue) || _.isNull(attrValue)) {
        attrValue = '';
      }

      // 界面展示值-处理后的
      var handleValue = attrValue;
      if (handleValue == '') {
        handleValue = '--';
      }
      if (item.visible) {
        attrs[index]['show'][item.alias] = [attrValue, handleValue, item.name, item];
        attrs[index]['fields'].push(item.alias);
      } else {
        attrs[index]['hide'][item.alias] = attrValue;
      }
    });
  });
  attrsFieldHandle(attrs);
  return attrs;
};
//字段类型读取
function attrsFieldHandle(attrs) {
  attrs.forEach((item) => {
    var showFieldObj = item['show'];
    for (var k in showFieldObj) {
      var testField = showFieldObj[k][0];
      if (typeof testField == 'number') {
        if (Number.isInteger(testField)) showFieldObj[k][1] = testField;
        else showFieldObj[k][1] = Number(testField.toFixed(3));
      }
    }
  });
}

export default TipTool;