ze-react-component-library/es/ZELogicformVisualizer/ZELogicformVisualizer.js

ZeroETP React Component Library

import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/menu/style";
import _Menu from "antd/es/menu";
import "antd/es/dropdown/style";
import _Dropdown from "antd/es/dropdown";
import "antd/es/tag/style";
import _Tag from "antd/es/tag";
import "antd/es/tooltip/style";
import _Tooltip from "antd/es/tooltip";
import "antd/es/badge/style";
import _Badge from "antd/es/badge";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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);
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

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

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

var __spreadArray = this && this.__spreadArray || function (to, from) {
  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
    to[j] = from[i];
  }

  return to;
};

import React, { Fragment } from "react";
import { isRelativeDateForm, isSimpleQuery, getSchemaByID, getNameProperty, getIDProperty } from "zeroetp-api-sdk";
import { useRequest } from "@umijs/hooks";
import { DownOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import Entity from "../components/Entity";
import { basicValueDisplay, unnormalizeQuery, logicformValueToColumnFilter, filterValueToLogicformQuery, filterValueOperators, operatorDisplay, getDatasourceFromLogicform, isNullQuery } from "../util";
import { requestLogicform } from "../request";
import PropertyFilter from "../components/PropertyFilter";
import SimilarWords from "./SimilarWords";
import useLocale from "../hooks/useLocale";
import "./index.less";
import { useAllSchemas } from "../hooks/useFrontConfig";

var setPropertySchemaID = function setPropertySchemaID(schema, property) {
  if (property && !property.schemaID) {
    property.schemaID = schema === null || schema === void 0 ? void 0 : schema._id;
  }

  return property;
};

var findChainProperty = function findChainProperty(_schema, _k) {
  var propChain = [];
  var finalProperty;
  var schema = _schema;

  _k.split("_").forEach(function (p, i) {
    var _a;

    var isLast = i > 0 && i === _k.split("_").length - 1;
    var property = schema === null || schema === void 0 ? void 0 : schema.properties.find(function (d) {
      return d.name === p;
    });
    setPropertySchemaID(schema, property); // 如果最后一个是名称属性则不展示

    if (property) {
      schema = property.schema;

      if (isLast) {
        if (!(property.is_name || ((_a = property.ui) === null || _a === void 0 ? void 0 : _a.name)) && property.type !== "ID") {
          propChain.push(p);
          finalProperty = property;
        }
      } else {
        propChain.push(p);
        finalProperty = property;
      }
    } else {
      propChain.push(p);
      finalProperty = property;
    }
  });

  return {
    propChain: propChain,
    finalProperty: finalProperty,
    schema: schema
  };
};

var getNewQuery = function getNewQuery(_a) {
  var logicform = _a.logicform,
      _queryKey = _a.queryKey,
      showKey = _a.showKey,
      v = _a.value,
      prop = _a.prop;
  var newLF = JSON.parse(JSON.stringify(logicform));
  newLF.query = unnormalizeQuery(newLF.query, true);
  filterValueToLogicformQuery({
    queryKey: _queryKey,
    v: v,
    newLF: newLF,
    property: prop
  });

  if (!v) {
    delete newLF.query[_queryKey];
  } else {
    var prefix = _queryKey.split(showKey)[0] || "";
    var val = newLF.query[_queryKey]; // 空值{$exists: false}的情况

    var valIsNullQuery = isNullQuery(JSON.stringify(val));
    var queryKey = prefix + showKey; // object类型，搜索的其实是名称

    if (prop.primal_type === "object" && queryKey.endsWith(prop.name) && prop.schema && !valIsNullQuery) {
      var nameProps = getNameProperty(prop.schema);
      queryKey = [queryKey, nameProps.name].filter(function (f) {
        return f;
      }).join("_");
    } // name类型


    if (prop.is_name && !queryKey.endsWith(prop.name) && !valIsNullQuery) {
      queryKey = [queryKey, prop.name].join("_");
    }

    if (queryKey !== _queryKey) {
      var val_1 = newLF.query[_queryKey];
      delete newLF.query[_queryKey];
      newLF.query[queryKey] = val_1;
    }
  }

  return newLF.query;
};

var CustomBadge = function CustomBadge(_a) {
  var _b, _c, _d, _e, _f;

  var $entityQuery = _a.$entityQuery,
      _g = _a.queryKey,
      queryKey = _g === void 0 ? "" : _g,
      logicform = _a.logicform,
      showKey = _a.showKey,
      text = _a.text,
      value = _a.value,
      mode = _a.mode,
      property = _a.property,
      onQueryChange = _a.onQueryChange,
      disableFilter = _a.disableFilter,
      props = __rest(_a, ["$entityQuery", "queryKey", "logicform", "showKey", "text", "value", "mode", "property", "onQueryChange", "disableFilter"]);

  var t = useLocale().t;
  var notEntity = (property === null || property === void 0 ? void 0 : property.primal_type) !== "object" || !$entityQuery;

  var _confirm = function confirm(v) {
    onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange(getNewQuery({
      logicform: logicform,
      queryKey: queryKey,
      showKey: showKey,
      value: v,
      prop: property
    }));
  }; // 获取entity


  var data = useRequest(function () {
    if (notEntity) {
      return Promise.resolve(null);
    }

    var lf = {
      schema: $entityQuery.schema,
      query: $entityQuery.query
    };

    if ($entityQuery.entity_id) {
      lf.query._id = $entityQuery.entity_id;
    }

    return requestLogicform(lf);
  }, {
    refreshDeps: [JSON.stringify($entityQuery), notEntity]
  }).data;
  var entityArr = data === null || data === void 0 ? void 0 : data.result;
  var idProp = data ? getIDProperty(data === null || data === void 0 ? void 0 : data.schema) : undefined;
  var nameProp = data ? getNameProperty(data === null || data === void 0 ? void 0 : data.schema) : undefined;
  var showProp = nameProp || idProp; // object类型会省略id

  var isObject = ((_c = (_b = data === null || data === void 0 ? void 0 : data.columnProperties) === null || _b === void 0 ? void 0 : _b.find(function (d) {
    return queryKey.endsWith(d.name);
  })) === null || _c === void 0 ? void 0 : _c.primal_type) === "object";
  var isId = idProp && queryKey.endsWith(idProp.name);
  var isName = (_e = (_d = data === null || data === void 0 ? void 0 : data.columnProperties) === null || _d === void 0 ? void 0 : _d.find(function (d) {
    return queryKey.endsWith(d.name);
  })) === null || _e === void 0 ? void 0 : _e.is_name;

  var renderEntity = function renderEntity(entity, showID) {
    if (entity && _typeof(entity) === "object" && showProp.type === "object" && showProp.schema) {
      var show = showID ? getIDProperty(showProp.schema) : getNameProperty(showProp.schema) || getIDProperty(showProp.schema);
      return entity[show.name];
    }

    return entity;
  };

  var finalText;

  if ((entityArr === null || entityArr === void 0 ? void 0 : entityArr.length) > 0 && (isObject || isName || isId)) {
    finalText = /*#__PURE__*/React.createElement("span", null, showKey + "\uFF1A ", entityArr === null || entityArr === void 0 ? void 0 : entityArr.map(function (entity, i) {
      return /*#__PURE__*/React.createElement(Entity, {
        key: String(i),
        property: {
          schema: data.schema,
          ref: data.schema._id,
          name: data.schema.name,
          type: "object",
          primal_type: "object"
        },
        entityIDProperty: idProp,
        entityNameProperty: nameProp,
        entity: entity
      }, renderEntity(entity === null || entity === void 0 ? void 0 : entity[showProp === null || showProp === void 0 ? void 0 : showProp.name]), mode === "verbose" ? "(" + renderEntity(entity === null || entity === void 0 ? void 0 : entity[idProp === null || idProp === void 0 ? void 0 : idProp.name], true) + ")" : "", i === entityArr.length - 1 ? "" : ",");
    }));
  } else {
    finalText = /*#__PURE__*/React.createElement("span", null, showKey + "\uFF1A", /*#__PURE__*/React.createElement("strong", null, _typeof(value) === "object" ? basicValueDisplay((value === null || value === void 0 ? void 0 : value.$eq) || (value === null || value === void 0 ? void 0 : value.$ne) || ((_f = value === null || value === void 0 ? void 0 : value.$in) === null || _f === void 0 ? void 0 : _f.map(function (m) {
      return basicValueDisplay(m);
    }).join(" , ")), t) : basicValueDisplay(value, t)));
  }

  var filter = logicformValueToColumnFilter(value, showProp, null);
  var selectedKeys = filter instanceof Array ? filter : [filter];

  if (notEntity) {
    var filter_1 = logicformValueToColumnFilter(value, property, null);
    var selectedKeys_1 = filter_1 instanceof Array ? filter_1 : [filter_1]; // @ts-ignore

    if (property && !property.schemaID) {
      // @ts-ignore
      property.schemaID = $entityQuery === null || $entityQuery === void 0 ? void 0 : $entityQuery.schema;
    }

    return /*#__PURE__*/React.createElement(_Badge, __assign({}, props, {
      text: property && !disableFilter ? /*#__PURE__*/React.createElement(PropertyFilter, {
        property: property,
        selectedKeys: selectedKeys_1,
        displayText: text,
        confirm: function confirm(v) {
          _confirm(v);
        }
      }) : text
    }));
  }

  return /*#__PURE__*/React.createElement(_Badge, __assign({}, props, {
    text: showProp && !disableFilter ? /*#__PURE__*/React.createElement(PropertyFilter, {
      property: showProp,
      key: showKey,
      selectedKeys: selectedKeys,
      displayText: finalText,
      confirm: function confirm(v) {
        _confirm(v);
      }
    }) : finalText
  }));
};
/**
 * 注意，ZELogicformVisualizer从2022年2月8日开始只接受norm后的logicform
 */


var ZELogicformVisualizer = function ZELogicformVisualizer(_a) {
  var initLogicform = _a.logicform,
      badgeColor = _a.badgeColor,
      _b = _a.display,
      display = _b === void 0 ? {} : _b,
      _c = _a.mode,
      mode = _c === void 0 ? "normal" : _c,
      _d = _a.filters,
      filters = _d === void 0 ? {} : _d,
      onQueryChange = _a.onQueryChange,
      onChange = _a.onChange,
      onChangeWord = _a.onChangeWord,
      _e = _a.showQueryFilter,
      showQueryFilter = _e === void 0 ? true : _e,
      _f = _a.className,
      className = _f === void 0 ? "" : _f,
      getProperty = _a.getProperty;
  var t = useLocale().t;
  var allSchemas = useAllSchemas();
  var datasource = getDatasourceFromLogicform(initLogicform, allSchemas);

  var __schema = datasource.find(function (f) {
    return f._id === (initLogicform === null || initLogicform === void 0 ? void 0 : initLogicform.schema);
  }); // 不能去掉，若该组件不在ZECard里使用，而是单独使用的话，datasource会为空


  var _schema = useRequest(function () {
    return !__schema && initLogicform.schema ? getSchemaByID(initLogicform.schema) : Promise.resolve({
      schema: __schema
    });
  }, {
    refreshDeps: [initLogicform.schema],
    formatResult: function formatResult(res) {
      return res === null || res === void 0 ? void 0 : res.schema;
    }
  }).data;

  if ((datasource === null || datasource === void 0 ? void 0 : datasource.length) === 0) {
    datasource = [_schema].filter(function (f) {
      return f;
    });
  }

  var badges = [];
  var filterColor = "green";

  if (mode === "compact") {
    display.groupby = false;
    display.preds = false;
    display.sort = false;
  } else if (mode === "normal") {
    display.sort = false;
    display.groupby = true;
  } // unnormalizeQuery


  var logicform = JSON.parse(JSON.stringify(initLogicform));
  logicform.query = unnormalizeQuery(logicform.query || {}); // entity详情不要显示pred

  if (logicform.entity_id) {
    display.preds = false;
  } // helper function


  var stringifyPredItem = function stringifyPredItem(predItem) {
    if (typeof predItem === "string") {
      return predItem;
    }

    if (_typeof(predItem) === "object" && predItem.operator) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, predItem.operator), predItem.pred && /*#__PURE__*/React.createElement(React.Fragment, null, "(", stringifyPredItem(predItem.pred), ")"));
    }

    if (_typeof(predItem) === "object" && predItem.name) {
      return predItem.name;
    }

    throw new Error("unexpected pred item: " + JSON.stringify(predItem));
  };

  if (!(display.schema === false) && logicform.schema) {
    badges.push({
      color: "red",
      text: /*#__PURE__*/React.createElement("span", null, t("visualizer.datasource"), "\uFF1A", datasource.map(function (m, i) {
        return /*#__PURE__*/React.createElement(Fragment, {
          key: m._id
        }, /*#__PURE__*/React.createElement(_Tooltip, {
          title: m._id
        }, /*#__PURE__*/React.createElement("strong", null, m.name)), i !== datasource.length - 1 && /*#__PURE__*/React.createElement("span", {
          style: {
            margin: "0 4px"
          }
        }, ","));
      }))
    });
  }

  if (!(display.groupby === false) && logicform.groupby) {
    var doWithGroupbyItem_1 = function doWithGroupbyItem_1(groupbyItem) {
      if (_typeof(groupbyItem) === "object") {
        if (groupbyItem.level) {
          return groupbyItem._id + "(" + groupbyItem.level + ")";
        }

        return groupbyItem._id;
      }

      return groupbyItem;
    };

    var groupbyItems_1 = [];

    if (Array.isArray(logicform.groupby)) {
      groupbyItems_1.push.apply(groupbyItems_1, logicform.groupby);
    } else {
      groupbyItems_1.push(logicform.groupby);
    }

    var renderGroupby = function renderGroupby() {
      return /*#__PURE__*/React.createElement(React.Fragment, null, groupbyItems_1.map(function (d, i) {
        var label = doWithGroupbyItem_1(d);
        var closable = !logicform.having;
        return /*#__PURE__*/React.createElement(_Tag, {
          closable: closable,
          key: label,
          style: {
            margin: 0,
            border: "none"
          },
          onClose: function onClose() {
            var g = groupbyItems_1.filter(function (f) {
              return doWithGroupbyItem_1(f) !== label;
            });
            onChange === null || onChange === void 0 ? void 0 : onChange({
              groupby: g.length > 0 ? g : undefined
            });
          }
        }, label);
      }));
    };

    badges.push({
      color: "purple",
      disableFilter: true,
      text: /*#__PURE__*/React.createElement("span", {
        style: {
          display: "inline-flex",
          alignItems: "center",
          gap: 8
        }
      }, t("按"), " ", renderGroupby(), " ", t("分组"))
    });
  }

  if (!(display.query === false) && logicform.query) {
    var query_1 = logicform.query;

    if (logicform.having) {
      query_1 = __assign(__assign({}, query_1), logicform.having);
    }

    var addQuery_1 = function addQuery_1(query, prefix) {
      if (prefix === void 0) {
        prefix = "";
      }

      Object.entries(query).filter(function (_a) {
        var k = _a[0]; // feat: 隐藏_authQueryKeys

        if (logicform._authQueryKeys) {
          if (logicform._authQueryKeys.indexOf(prefix.length > 0 ? prefix + "_" + k : k) >= 0) {
            return false;
          }
        }

        return true;
      }).forEach(function (_a) {
        var _b;

        var _k = _a[0],
            v = _a[1];

        if (!(_k in filters)) {
          var _c = findChainProperty(_schema, _k),
              propChain = _c.propChain,
              finalProperty_1 = _c.finalProperty;

          if (!finalProperty_1 && getProperty) {
            finalProperty_1 = getProperty(_k);
          }

          var k_1 = propChain.join("_"); // 如果在filters里面，那么由另外的代码来管

          if (prefix.length > 0) {
            k_1 = prefix + "_" + k_1;
          } // _名称结尾时，名称不展示


          if ((finalProperty_1 === null || finalProperty_1 === void 0 ? void 0 : finalProperty_1.is_name) && k_1.endsWith("_" + finalProperty_1.name)) {
            k_1 = k_1.replace("_" + finalProperty_1.name, "");
          } // 20230725,只显示chain的最后一个


          if (mode !== "verbose") {
            k_1 = k_1.split("_").pop();
          }

          if (v === null) {
            // 基本属性
            badges.push({
              color: filterColor,
              showKey: k_1,
              queryKey: _k,
              value: v,
              property: finalProperty_1,
              text: /*#__PURE__*/React.createElement("span", null, k_1, "\uFF1A", /*#__PURE__*/React.createElement("strong", null, "\u672A\u9009\u62E9"))
            });
          } else if (typeof v === "boolean" || _typeof(v) !== "object" || v.$lte && v.$gte || isRelativeDateForm(v)) {
            // 农历
            var calendarString = void 0;

            if (v.$calendar === "lunar") {
              calendarString = "农历";
            } // 基本属性


            badges.push({
              color: filterColor,
              showKey: k_1,
              queryKey: _k,
              value: v,
              property: finalProperty_1,
              text: /*#__PURE__*/React.createElement("span", null, k_1, "\uFF1A", /*#__PURE__*/React.createElement("strong", null, calendarString, basicValueDisplay(v, t)))
            }); // $month, $year，etc..

            if (_typeof(v) === "object") {
              var supportedTimeWindows = ["second", "minute", "hour", "day", "week", "month", "quarter", "year"];

              var twToChinese = function twToChinese(tw) {
                var map = {
                  year: t("年"),
                  quarter: t("季度"),
                  month: t("月"),
                  week: t("周"),
                  day: t("日"),
                  hour: t("点"),
                  minute: t("分"),
                  second: t("秒")
                };
                return map[tw];
              };

              for (var _i = 0, supportedTimeWindows_1 = supportedTimeWindows; _i < supportedTimeWindows_1.length; _i++) {
                var tw = supportedTimeWindows_1[_i];

                if ("$" + tw in v) {
                  var dateOperator = v["$" + tw];

                  if (_typeof(dateOperator) === "object") {
                    if (dateOperator.$in) {
                      badges.push({
                        color: filterColor,
                        queryKey: _k,
                        showKey: k_1,
                        disableFilter: true,
                        property: finalProperty_1,
                        value: dateOperator,
                        text: /*#__PURE__*/React.createElement("span", null, k_1, "\uFF1A", /*#__PURE__*/React.createElement("strong", null, "" + dateOperator.$in.join("，") + twToChinese(tw)))
                      });
                    } else if (dateOperator.$gte && dateOperator.$lte) {
                      badges.push({
                        color: filterColor,
                        queryKey: _k,
                        showKey: k_1,
                        property: finalProperty_1,
                        value: dateOperator,
                        text: /*#__PURE__*/React.createElement("span", null, k_1, "\uFF1A", /*#__PURE__*/React.createElement("strong", null, dateOperator.$gte + "~" + dateOperator.$lte + twToChinese(tw)))
                      });
                    } else if (dateOperator.$ne) {
                      badges.push({
                        color: filterColor,
                        queryKey: _k,
                        showKey: k_1,
                        disableFilter: true,
                        property: finalProperty_1,
                        value: dateOperator,
                        text: /*#__PURE__*/React.createElement("span", null, k_1, "\uFF1A", /*#__PURE__*/React.createElement("strong", null, t("除了"), " ", "" + dateOperator.$ne + twToChinese(tw)))
                      });
                    }
                  } else {
                    badges.push({
                      color: filterColor,
                      queryKey: _k,
                      showKey: k_1,
                      property: finalProperty_1,
                      value: dateOperator,
                      disableFilter: true,
                      text: /*#__PURE__*/React.createElement("span", null, k_1, "\uFF1A", /*#__PURE__*/React.createElement("strong", null, dateOperator + twToChinese(tw)))
                    });
                  }
                }
              }
            }
          } else if ("$entityQuery" in v) {
            badges.push({
              color: filterColor,
              property: finalProperty_1,
              showKey: k_1,
              queryKey: _k,
              value: v.value,
              $entityQuery: v.$entityQuery,
              text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_Tooltip, {
                title: /*#__PURE__*/React.createElement(React.Fragment, null, t("visualizer.datasource"), ":", " ", ((_b = allSchemas === null || allSchemas === void 0 ? void 0 : allSchemas[v.$entityQuery.schema]) === null || _b === void 0 ? void 0 : _b.name) || v.$entityQuery.schema)
              }, k_1), "\uFF1A ", /*#__PURE__*/React.createElement("strong", null, basicValueDisplay(v, t)))
            });
          } else if (filterValueOperators.some(function (s) {
            return s in v;
          })) {
            filterValueOperators.forEach(function (op) {
              if (op in v) {
                badges.push({
                  color: filterColor,
                  queryKey: _k,
                  showKey: k_1,
                  property: finalProperty_1,
                  value: v,
                  text: /*#__PURE__*/React.createElement("span", null, k_1, /*#__PURE__*/React.createElement("span", {
                    style: {
                      margin: "0 4px"
                    }
                  }, operatorDisplay(op)), /*#__PURE__*/React.createElement("strong", null, basicValueDisplay(v[op], t)))
                });
              }
            });
          } else if (v.operator === "$ent" && !v.level) {
            // TODO: 20201103：level的显示不应该在query里面。但是现在在query里面。
            badges.push({
              color: filterColor,
              property: finalProperty_1,
              value: v,
              queryKey: _k,
              showKey: k_1,
              text: /*#__PURE__*/React.createElement("span", null, k_1, "\uFF1A", /*#__PURE__*/React.createElement("strong", null, v.name))
            });
          } else if ("$or" in v) {
            // TODO: 应该把这个包起来
            v.$or.forEach(function (orItem) {
              var _a;

              addQuery_1((_a = {}, _a[k_1] = orItem, _a));
            });
          } else if ("$exists" in v) {
            badges.push({
              color: filterColor,
              property: finalProperty_1,
              value: v,
              queryKey: _k,
              showKey: k_1,
              text: /*#__PURE__*/React.createElement("span", null, k_1, " ", /*#__PURE__*/React.createElement("strong", null, v.$exists ? t("不为空") : t("为空")))
            });
          } else if (v.schema && v.query) {
            addQuery_1(v.query, k_1);
          }
        }
      });
    };

    addQuery_1(query_1);
    Object.entries(filters).forEach(function (_a) {
      var _b;

      var k = _a[0],
          v = _a[1];
      if (v.show === false) return;
      var finalProperty = findChainProperty(_schema, k).finalProperty;
      var parsedQuery = unnormalizeQuery(query_1, true);
      var value = parsedQuery[k];

      if (!value) {
        value = ["全部"];
      } else if (_typeof(value) === "object" && !(value instanceof Array)) {
        if ("$and" in value) {
          value = value["$and"];
        }
      }

      badges.push({
        color: filterColor,
        value: query_1[k],
        queryKey: k,
        showKey: k,
        property: finalProperty,
        disableFilter: true,
        text: /*#__PURE__*/React.createElement("span", null, k, "\uFF1A", /*#__PURE__*/React.createElement(_Dropdown, {
          trigger: ["click"],
          overlay: /*#__PURE__*/React.createElement(_Menu, {
            items: __spreadArray([v.support_all && {
              label: "全部",
              key: "全部"
            }], (_b = v.distincts) === null || _b === void 0 ? void 0 : _b.map(function (m) {
              return {
                label: m,
                key: m
              };
            })),
            selectedKeys: value,
            onClick: function onClick(info) {
              onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange(getNewQuery({
                logicform: initLogicform,
                queryKey: k,
                showKey: k,
                value: info.key === "全部" ? null : info.key,
                prop: finalProperty
              }));
            }
          })
        }, /*#__PURE__*/React.createElement(_Button, {
          type: "primary",
          shape: "round",
          size: "small"
        }, basicValueDisplay(query_1[k], t), /*#__PURE__*/React.createElement(DownOutlined, null))))
      });
    });
  } // Verbose show entityID


  if (mode === "verbose") {
    if (_schema && logicform.entity_id) {
      var IDProp = _schema.properties.find(function (p) {
        return p.type === "ID";
      });

      setPropertySchemaID(_schema, IDProp);

      if (IDProp) {
        badges.push({
          color: filterColor,
          value: logicform.entity_id,
          property: IDProp,
          queryKey: IDProp.name,
          showKey: IDProp.name,
          text: /*#__PURE__*/React.createElement("span", null, IDProp.name, "\uFF1A", /*#__PURE__*/React.createElement("strong", null, logicform.entity_id))
        });
      }
    }
  }

  if (!(display.preds === false) && logicform.preds) {
    var preds = logicform.preds.map(function (p, index) {
      return /*#__PURE__*/React.createElement("span", {
        key: index
      }, _typeof(p) === "object" && p.operator && stringifyPredItem(p), _typeof(p) === "object" && p.operator && p.query && /*#__PURE__*/React.createElement(_Tooltip, {
        placement: "top",
        color: "white",
        title: /*#__PURE__*/React.createElement(ZELogicformVisualizer, {
          logicform: {
            schema: p.schema && p.schema !== logicform.schema ? p.schema : null,
            query: p.query
          }
        })
      }, /*#__PURE__*/React.createElement(QuestionCircleOutlined, {
        style: {
          marginLeft: 3
        }
      })), (_typeof(p) !== "object" || !p.operator) && /*#__PURE__*/React.createElement(React.Fragment, null, _typeof(p) === "object" ? p.pred : p), index < logicform.preds.length - 1 && "，");
    });

    if (!isSimpleQuery(logicform)) {
      badges.push({
        color: "orange",
        text: /*#__PURE__*/React.createElement("span", null, t("公式"), "\uFF1A ", preds)
      });
    } else {// 20220328：字段显示不需要，太多了。
      // badges.push({
      //   color: "orange",
      //   text: (
      //     <span>
      //       字段： <strong>{preds}</strong>
      //     </span>
      //   ),
      // });
    }
  }

  if (!(display.sort === false) && logicform.sort) {
    Object.entries(logicform.sort).forEach(function (_a) {
      var k = _a[0],
          v = _a[1];
      badges.push({
        color: "gold",
        text: /*#__PURE__*/React.createElement("span", null, t("按"), " ", /*#__PURE__*/React.createElement("strong", null, k), " ", v === -1 ? t("倒序") : t("正序"))
      });
    });
  }

  if (!(display.sort === false) && logicform.limit && logicform.limit > 0) {
    badges.push({
      color: "pink",
      text: /*#__PURE__*/React.createElement("span", null, t("显示"), /*#__PURE__*/React.createElement("strong", null, logicform.limit), t("条记录"))
    });
  } // badge color


  if (badgeColor) {
    badges.forEach(function (b) {
      return b.color = badgeColor;
    });
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "ze-lf-visualizer " + className
  }, logicform._unknown && logicform._unknown.filter(function (u) {
    return u.length > 1 && !u.match(/^[a-z]+$/);
  }).map(function (u) {
    return /*#__PURE__*/React.createElement(SimilarWords, {
      key: u,
      word: u,
      onChangeWord: onChangeWord
    });
  }), badges.map(function (badge, index) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line react/no-array-index-key
      React.createElement(CustomBadge, __assign({
        key: "" + index
      }, badge, {
        disableFilter: showQueryFilter ? badge.disableFilter : true,
        style: {
          marginRight: 25
        },
        mode: mode,
        onQueryChange: onQueryChange,
        logicform: initLogicform,
        property: badge.property || (getProperty === null || getProperty === void 0 ? void 0 : getProperty(badge.queryKey))
      }))
    );
  }));
};

export default ZELogicformVisualizer;