@riil-frontend/component-topology 6.0.0-alpha.3 → 6.0.0-alpha.30

package/es/core/editor/components/Toolbar/widgets/Layout/index.js

@@ -1,28 +1,141 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-import _Icon from "@alifd/next/es/icon";
-var _excluded = ["showLabel"];
-import React from 'react';
-import ArrowPopup from "../components/ArrowPopup";
+var _excluded = ["topo", "showLabel"];
+
+/* eslint-disable eqeqeq */
+import React, { useState, useMemo } from 'react';
+import LayoutSettings from "./components/LayoutSettings";
 import WidgetBox from "../WidgetBox";
+import DropdownButton from "../components/DropdownButton";
+import { isGroup, isLayer } from "../../../../../../utils/htElementUtils";
 
 function Layout(props) {
-  var topo = props.topo;
-  return /*#__PURE__*/React.createElement(ArrowPopup, {
-    label: /*#__PURE__*/React.createElement(_Icon, {
-      type: "Topology_icon_zoomout",
-      size: "small"
+  var topo = props.topo,
+      topoShowType = props.topoShowType;
+
+  var _useState = useState(),
+      layout = _useState[0],
+      setLayout = _useState[1]; // 选中的元素
+
+
+  var selectionElements = topo.selectionManager.useHtSelection();
+
+  var _topo$store$useModelS = topo.store.useModelState('selection'),
+      selection = _topo$store$useModelS.selection;
+
+  var setDisabled = function setDisabled(data) {
+    if (topoShowType == 'layers' && selection.length == 1) {
+      return data != 'rectangle';
+    } else {
+      return data == 'rectangle';
+    }
+  };
+
+  var globalLayout = function globalLayout(data) {
+    var firstElement = selectionElements[0];
+    var layouType = data.id === 'toward' ? "" + data.id + data.options.subId : data.id; // eslint-disable-next-line eqeqeq
+
+    if (topoShowType != 'layers' && selection.length == 0) {
+      topo.getHtTopo().layoutInTopo(layouType);
+    } // eslint-disable-next-line eqeqeq
+
+
+    if (topoShowType != 'layers' && selection.length == 1) {
+      topo.getHtTopo().layoutInContainer(layouType);
+    } // eslint-disable-next-line eqeqeq
+
+
+    if (isLayer(firstElement)) {
+      topo.getHtTopo().layoutLayer(firstElement);
+    }
+  };
+
+  var layoutOnChange = function layoutOnChange(v) {
+    var _selection$;
+
+    topo.historyManager.beginTransaction();
+    setLayout(v); // eslint-disable-next-line eqeqeq
+
+    if (topoShowType != 'layers' && ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.className) != 'ht.Node' || topoShowType == 'partition' && selection.length == 1 || topoShowType == 'layers' && selection.length == 1) {
+      globalLayout(v);
+    }
+
+    topo.historyManager.endTransaction();
+  };
+
+  return (
+    /*#__PURE__*/
+    // <LayoutSettings size="xs" selection = {selection} topoShowType={topoShowType} layout={layout} onChange={layoutOnChange} />
+    React.createElement(LayoutSettings, {
+      size: "xs",
+      layout: layout,
+      onChange: layoutOnChange,
+      disabled: setDisabled
     })
-  }, /*#__PURE__*/React.createElement("div", null, "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null)));
+  );
 }
 
 function LayoutWidget(props) {
-  var showLabel = props.showLabel,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var topo = props.topo,
+      showLabel = props.showLabel,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded); // eslint-disable-next-line no-undef
+
+
+  var store = topo.store; // 拓扑图是否加载
 
+  var topoState = store.useModelState('topoMod'); // 分层或分区时候选中的值，未选中length为0 配合下面的type属性一起使用，
+  // type为partition且selection.length>=0时可以点击布局， selection[0].className != 'ht.Node'
+  // type为auto且selection.length==0时可以点击布局 
+
+  var selectionElements = topo.selectionManager.useHtSelection();
+  var topoShowType = topoState.type; // 获取ID以及拓扑类型 // 拓扑类型：auto自由布局，layers分层，partition分区
+
+  var disabled = useMemo(function () {
+    return !isLayoutEnabled({
+      topoShowType: topoShowType,
+      selectionElements: selectionElements
+    });
+  }, [topoShowType, selectionElements]);
+  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/layout/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/layout/Normal.svg",
+    alt: ""
+  });
   return /*#__PURE__*/React.createElement(WidgetBox, {
-    label: "\u5E03\u5C40",
-    showLabel: showLabel
-  }, /*#__PURE__*/React.createElement(WidgetBox.ButtonBox, null, /*#__PURE__*/React.createElement(Layout, otherProps)));
+    label: "\u5E03\u5C40\u65B9\u5F0F",
+    tooltip: "\u5E03\u5C40\u65B9\u5F0F",
+    showLabel: showLabel,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(DropdownButton, {
+    disabled: disabled,
+    trigger: icon
+  }, !disabled && /*#__PURE__*/React.createElement(Layout, _extends({
+    topo: topo,
+    topoShowType: topoShowType
+  }, otherProps))));
+}
+
+function isLayoutEnabled(props) {
+  var topoShowType = props.topoShowType,
+      selectionElements = props.selectionElements; // 选中单个区域/集群后，该按钮亮起
+
+  if (isGroup(selectionElements[0])) {
+    return true;
+  } // 分层拓扑选中任意分层时，布局按钮亮起
+
+
+  if (topoShowType === 'layers' && selectionElements.length === 1 && isLayer(selectionElements[0])) {
+    return true;
+  } // 空白拓扑未选中任何资源时，布局按钮亮起
+
+
+  if (topoShowType !== 'layers' && !selectionElements.length) {
+    return true;
+  }
+
+  return false;
 }
 
 export default LayoutWidget;

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.js

@@ -1,24 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _Input from "@alifd/next/es/input";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
 import React, { useState, useEffect } from 'react';
 import WidgetBox from "./WidgetBox";
 import DropdownButton from "./components/DropdownButton";
-
-function NodeAlignPopup(props) {
-  var topo = props.topo,
-      disabled = props.disabled;
-  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Normal.svg",
-    alt: ""
-  });
-  return /*#__PURE__*/React.createElement(DropdownButton, {
-    trigger: icon
-  }, "\u5BF9\u9F50\u65B9\u5F0F");
-}
+import AlignSetting from "../../settings/common/AlignSetting";
+import { isEdge, isLayer } from "../../../../../utils/htElementUtils";
+import styles from "./NodeAlignWidget.module.scss";
 
 function NodeAlignWidget(props) {
   var topo = props.topo,
@@ -27,21 +15,126 @@ function NodeAlignWidget(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
+
+  var _useState2 = useState(),
+      leftInputVal = _useState2[0],
+      setLeftInputVal = _useState2[1];
+
+  var _useState3 = useState(),
+      rightInputVal = _useState3[0],
+      setRightInputVal = _useState3[1];
+
+  var _useState4 = useState(true),
+      leftDisable = _useState4[0],
+      setLeftDisable = _useState4[1];
+
+  var _useState5 = useState(true),
+      rightDisable = _useState5[0],
+      setRightDisable = _useState5[1]; // 拓扑图是否加载
+
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
   var selection = topo.selectionManager.useSelection();
+
+  var setSpace = function setSpace(type, num) {
+    topo.historyManager.beginTransaction();
+    var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (ele) {
+      return !isLayer(ele) && !isEdge(ele);
+    });
+    topo.view.topoClient.htTopoClient.setElementsSpace(nodes, type, num);
+    topo.historyManager.endTransaction();
+  };
+
+  var leftInputChange = function leftInputChange(v) {
+    if (v * 1 < 0) {
+      setLeftInputVal(0);
+    } else if (v * 1 > 10000) {
+      setLeftInputVal(10000);
+    } else {
+      setLeftInputVal(v);
+    }
+
+    setSpace('v', leftInputVal);
+  };
+
+  var rightInputChange = function rightInputChange(v) {
+    if (v * 1 < 0) {
+      setRightInputVal(0);
+    } else if (v * 1 > 10000) {
+      setRightInputVal(10000);
+    } else {
+      setRightInputVal(v);
+    }
+
+    setSpace('h', rightInputVal);
+  };
+
   useEffect(function () {
-    setDisabled(false);
-  }, [selection]);
+    if (graphLoaded) {
+      var selectionEle = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+      var nodes = selectionEle.filter(function (ele) {
+        return !isLayer(ele) && !isEdge(ele);
+      });
+      setDisabled(nodes.length <= 1);
+      getClickType('none');
+    }
+  }, [graphLoaded, selection]);
+
+  var getClickType = function getClickType(type) {
+    setLeftDisable(true);
+    setRightDisable(true);
+
+    if (type === 'top' || type === 'middle' || type === 'bottom') {
+      setLeftDisable(false);
+    }
+
+    if (type === 'left' || type === 'center' || type === 'right') {
+      setRightDisable(false);
+    }
+  };
+
+  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Normal.svg",
+    alt: ""
+  });
   return /*#__PURE__*/React.createElement(WidgetBox, {
     showLabel: showLabel,
+    disabled: disabled,
     label: "\u5BF9\u9F50\u65B9\u5F0F",
     tooltip: "\u5BF9\u9F50\u65B9\u5F0F"
-  }, /*#__PURE__*/React.createElement(NodeAlignPopup, _extends({
+  }, /*#__PURE__*/React.createElement(DropdownButton, {
     disabled: disabled,
-    selection: selection
-  }, otherProps)));
+    trigger: icon
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlignSetting, {
+    topo: topo,
+    getClickType: getClickType
+  }), /*#__PURE__*/React.createElement(_Input, {
+    disabled: leftDisable,
+    size: "small",
+    placeholder: "\u591A\u4E2A\u503C",
+    className: styles.leftInput,
+    value: leftInputVal,
+    htmlType: "number",
+    maxLength: 5,
+    onChange: leftInputChange
+  }), /*#__PURE__*/React.createElement(_Input, {
+    disabled: rightDisable,
+    size: "small",
+    placeholder: "\u591A\u4E2A\u503C",
+    className: styles.rightInput,
+    value: rightInputVal,
+    htmlType: "number",
+    maxLength: 5,
+    onChange: rightInputChange
+  }))));
 }
 
 export default NodeAlignWidget;

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss

@@ -0,0 +1,12 @@
+.leftInput{
+  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
+  background-position: right center;
+  width: 100px;
+  margin-right: 10px;
+  margin-left: 5px;
+}
+.rightInput{
+  width: 100px;
+  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
+  background-position: right center;
+}

package/es/core/editor/components/Toolbar/widgets/NodeImageButton/BoxBackgroundSetting.js

@@ -1,8 +1,18 @@
-import React from 'react';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from "react";
+import TopoIconSelect from "../IconSelect";
+import { useNodeIcons } from "../../../../../common/icons/useIcons";
 
-function BoxBackgroundSetting(props) {
-  // const {  } = props
-  return /*#__PURE__*/React.createElement("div", null, "xxx");
+function NodeImageList(props, ref) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  useEffect(function () {}, []);
+  var icons = useNodeIcons(topo);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TopoIconSelect, {
+    value: value,
+    iconList: icons,
+    onChange: onChange
+  }));
 }
 
-export default BoxBackgroundSetting;
+export default NodeImageList;

package/es/core/editor/components/Toolbar/widgets/NodeImageButton/NodeImageButton.js

@@ -1,13 +1,14 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
+import { isGroup, isNode } from "../../../../../../utils/htElementUtils";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
 /**
  * 替换图片设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 
 function NodeImageButton(props) {
@@ -17,13 +18,43 @@ function NodeImageButton(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
 
+  var _useState2 = useState(),
+      imgVal = _useState2[0],
+      setImgVal = _useState2[1]; // 选中的元素
 
-  var selection = topo.selectionManager.useSelection();
+
+  var selection = topo.selectionManager.useHtSelection();
   useEffect(function () {
-    setDisabled(false);
+    var nodes = selection.filter(function (ele) {
+      return isGroup(ele) || isNode(ele);
+    });
+
+    if (nodes.length > 0) {
+      setDisabled(false);
+      setImgVal(nodes[0].getImage());
+    } else {
+      setDisabled(true);
+    }
   }, [selection]);
+
+  var onChange = function onChange(prop) {
+    console.log("onChange-prop", prop, selection); //const { name, value } = prop;
+    // const gv = topo.view.topoClient.getGraphView();
+    //const element = topo.getSelectionModel().getFirstData();
+
+    var elements = topo.getSelectionModel();
+    console.log("onChange-elements", elements);
+    elements.each(function (element) {
+      element.setImage(prop);
+    }); // selection.map((element) => {
+    //   element.setImage(prop);
+    // });
+    // if (name === "image") {
+    // }
+  };
+
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u66FF\u6362\u56FE\u7247/Disable.svg",
     alt: ""
@@ -34,12 +65,15 @@ function NodeImageButton(props) {
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u66FF\u6362\u56FE\u7247",
     tooltip: "\u66FF\u6362\u56FE\u7247",
+    disabled: disabled,
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     disabled: disabled,
     trigger: icon
   }, /*#__PURE__*/React.createElement(BoxBackgroundSetting, {
-    topo: topo
+    topo: topo,
+    onChange: onChange,
+    value: imgVal
   })));
 }
 

package/es/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.js

@@ -1,13 +1,18 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from 'react';
-import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
+import React, { useEffect, useState } from "react"; // import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
+
+import BatchSetNodeSize from "../../../settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize";
+import NodeSizeInput from "../../../settings/common/NodeSizeInput/NodeSizeInput";
+import useSettingRuntimeState from "../../../settings/useSettingRuntimeState";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
+import styles from "./NodeSizeButton.module.scss";
+import { isGroup, isNode } from "../../../../../../utils/htElementUtils";
 /**
  * 图片尺寸设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 
 function NodeSizeButton(props) {
@@ -17,25 +22,101 @@ function NodeSizeButton(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
+
+  var _useState2 = useState(),
+      size = _useState2[0],
+      setSize = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionManager.useHtSelection();
+  var settingRuntimeState = useSettingRuntimeState();
   useEffect(function () {
-    setDisabled(false);
+    var nodes = selection.filter(function (ele) {
+      return isGroup(ele) || isNode(ele);
+    });
+
+    if (nodes.length > 0) {
+      setDisabled(false);
+
+      if (selection.length === 1) {
+        setSize({
+          width: selection[0].width,
+          height: selection[0].height
+        });
+      }
+    } else {
+      setDisabled(true);
+      setSize({
+        width: null,
+        height: null
+      });
+    }
   }, [selection]);
+
+  var _onChange = function onChange(prop) {
+    var name = prop.name,
+        value = prop.value;
+    var gv = topo.view.topoClient.getGraphView();
+    var element = topo.getSelectionModel().getFirstData();
+
+    if (name === "width") {
+      element.setWidth(value);
+    } else if (name === "height") {
+      element.setHeight(value);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u56FE\u7247\u5C3A\u5BF8",
+    disabled: disabled,
     tooltip: "\u56FE\u7247\u5C3A\u5BF8",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: 136
+    className: styles.toolbarNodeSizeSetting
+  }, selection.length > 1 ? /*#__PURE__*/React.createElement(BatchSetNodeSize, {
+    topo: topo // size="small"
+    ,
+    value: size,
+    disabled: disabled,
+    showLabel: false,
+    numberPickerProps: {
+      hasTrigger: false,
+      placeholder: '-'
+    } // onChange={(size) => {
+    //   topo.historyManager.beginTransaction();
+    //   onChange({ name: "width", value: size.width });
+    //   onChange({ name: "height", value: size.height });
+    //   topo.historyManager.endTransaction();
+    // }}
+
+  }) : /*#__PURE__*/React.createElement(NodeSizeInput, {
+    topo: topo // size="small"
+    ,
+    value: size,
+    disabled: disabled,
+    showLabel: false,
+    hasTrigger: false,
+    numberPickerProps: {
+      hasTrigger: false,
+      placeholder: '-'
+    },
+    settingRuntimeState: settingRuntimeState,
+    onChange: function onChange(size) {
+      topo.historyManager.beginTransaction();
+
+      _onChange({
+        name: "width",
+        value: size.width
+      });
+
+      _onChange({
+        name: "height",
+        value: size.height
+      });
+
+      topo.historyManager.endTransaction();
     }
-  }, /*#__PURE__*/React.createElement(BatchSetNodeSize, {
-    topo: topo,
-    size: "small",
-    showLabel: false
   })));
 }
 

package/es/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.module.scss

@@ -0,0 +1,28 @@
+@import '~@alifd/next/variables.scss';
+
+.toolbarNodeSizeSetting {
+  width: 144px;
+
+  // 图片尺寸输入框
+  :global {
+    .#{$css-prefix}input-inner {
+      padding-right: 8px;
+    }
+
+    .#{$css-prefix}input.#{$css-prefix}medium {
+      height: 24px;
+    }
+
+    .#{$css-prefix}input {
+      border: none;
+
+      &:hover:not(.#{$css-prefix}disabled) {
+        background: #F2F7FD;
+      }
+    }
+
+    .#{$css-prefix}input.#{$css-prefix}medium input {
+      height: 24px;
+    }
+  }
+}

package/es/core/editor/components/Toolbar/widgets/WidgetBox.js

@@ -1,9 +1,10 @@
+import _Balloon from "@alifd/next/es/balloon";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-import _Balloon from "@alifd/next/es/balloon";
-var _excluded = ["active", "disabled", "children"];
-import classNames from 'classnames';
+var _excluded = ["label", "showLabel", "tooltip", "disabled", "children"];
 import React from 'react';
+import classnames from 'classnames';
+import ButtonBox from "./components/ButtonBox";
 import styles from "./WidgetBox.module.scss";
 
 function WidgetBox(props) {
@@ -11,15 +12,16 @@ function WidgetBox(props) {
       showLabel = props.showLabel,
       tooltip = props.tooltip,
       disabled = props.disabled,
-      children = props.children;
-  var button = /*#__PURE__*/React.createElement("button", {
+      children = props.children,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var button = /*#__PURE__*/React.createElement("div", _extends({
     disabled: disabled,
-    type: "button",
     className: styles.container
-  }, /*#__PURE__*/React.createElement("div", {
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
     className: styles.content
   }, children), showLabel !== false && /*#__PURE__*/React.createElement("div", {
-    className: styles.label
+    className: classnames(styles.label, disabled ? styles.disabledLabel : styles.normalLabel)
   }, label));
 
   if (!tooltip) {
@@ -28,22 +30,13 @@ function WidgetBox(props) {
 
   return /*#__PURE__*/React.createElement(_Balloon.Tooltip, {
     trigger: button,
-    align: "b"
+    align: "b" // 解决遮挡下拉浮层问题
+    ,
+    popupStyle: {
+      zIndex: 1000
+    }
   }, tooltip);
 }
 
-function ButtonBox(props) {
-  var _classNames;
-
-  var active = props.active,
-      disabled = props.disabled,
-      children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(styles.ButtonBox, (_classNames = {}, _classNames[styles.ButtonBoxActive] = active, _classNames[styles.ButtonBoxDisabled] = disabled, _classNames))
-  }, otherProps), children);
-}
-
 WidgetBox.ButtonBox = ButtonBox;
 export default WidgetBox;