ze-react-component-library/es/ZECard/RepresentationChanger.js

ZeroETP React Component Library

import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/tooltip/style";
import _Tooltip from "antd/es/tooltip";
import "antd/es/dropdown/style";
import _Dropdown from "antd/es/dropdown";

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

import React, { useState, useEffect, useCallback } from "react";
import { GlobalOutlined, LineChartOutlined, PieChartOutlined } from "@ant-design/icons";
import graphics from "./representations";
import useLocale from "../hooks/useLocale";
var graphicOptions = [{
  label: "全部",
  value: "all",
  tip: ""
}, {
  label: /*#__PURE__*/React.createElement(LineChartOutlined, null),
  value: "basic",
  tip: "基础图形"
}, {
  label: /*#__PURE__*/React.createElement(GlobalOutlined, null),
  value: "advanced",
  tip: "高级图形"
}];

var RepresentationChanger = function RepresentationChanger(_a) {
  var representationType = _a.representationType,
      onChange = _a.onChange,
      _b = _a.scrollElement,
      scrollElement = _b === void 0 ? window : _b,
      result = _a.result;

  var _c = useState(false),
      visible = _c[0],
      setVisible = _c[1];

  var _d = useState(representationType),
      value = _d[0],
      setValue = _d[1];

  var _e = useState("all"),
      type = _e[0],
      setType = _e[1];

  var t = useLocale().t;
  useEffect(function () {
    setValue(representationType);
  }, [representationType]);
  var onScroll = useCallback(function () {
    setVisible(false);
  }, []);
  useEffect(function () {
    scrollElement.addEventListener("scroll", onScroll);
    return function () {
      scrollElement.removeEventListener("scroll", onScroll);
    };
  }, []);
  return /*#__PURE__*/React.createElement(_Dropdown, {
    overlay: /*#__PURE__*/React.createElement("div", {
      className: "ze-graphics-drop-down"
    }, /*#__PURE__*/React.createElement("div", {
      className: "ze-graphics-drop-down-left"
    }, graphicOptions.map(function (d) {
      return /*#__PURE__*/React.createElement(_Tooltip, __assign({
        placement: "right",
        key: d.value
      }, d.tip ? {
        title: t(d.tip)
      } : {
        open: false,
        title: ""
      }), /*#__PURE__*/React.createElement("div", {
        onMouseEnter: function onMouseEnter() {
          setType(d.value);
        },
        className: "ze-graphics-drop-down-left-item " + (d.value === type ? "ze-graphics-drop-down-left-item-active" : "")
      }, typeof d.label === "string" ? t(d.label) : d.label));
    })), /*#__PURE__*/React.createElement("div", {
      className: "ze-graphics-drop-down-right"
    }, graphics.filter(function (d) {
      return type === "all" ? true : d.type === type;
    }).map(function (d) {
      var disabled = !d.valid(result);
      return /*#__PURE__*/React.createElement("div", {
        key: d.key,
        className: "ze-graphics-drop-down-right-item-wrapper " + (disabled ? "ze-graphics-drop-down-right-item-disabled" : "") + " " + (d.key === value ? "ze-graphics-drop-down-right-item-active" : "")
      }, /*#__PURE__*/React.createElement(_Tooltip, __assign({
        placement: "bottom"
      }, d.tip && visible ? {
        title: t(d.tip)
      } : {
        open: false,
        title: ""
      }), /*#__PURE__*/React.createElement("div", {
        onClick: function onClick() {
          if (!disabled) {
            setValue(d.key);
            onChange === null || onChange === void 0 ? void 0 : onChange(d.key);
            setVisible(false);
          }
        },
        className: "ze-graphics-drop-down-right-item"
      }, /*#__PURE__*/React.createElement("img", {
        src: d.icon,
        alt: d.key,
        className: "ze-graphics-drop-down-right-item-img"
      }))), /*#__PURE__*/React.createElement("span", {
        className: "ze-graphics-drop-down-right-item-title"
      }, t(d.title)));
    }))),
    trigger: ["click"],
    open: visible,
    onOpenChange: function onOpenChange(v) {
      setVisible(v);

      if (!v) {
        setType("all");
      }
    },
    placement: "bottom"
  }, /*#__PURE__*/React.createElement(_Button, {
    icon: /*#__PURE__*/React.createElement(PieChartOutlined, null)
  }));
};

export default RepresentationChanger;