@riil-frontend/component-topology 2.3.21 → 2.4.0

package/es/core/editor/components/settings/common/text/fontStyleUtil.js

@@ -0,0 +1,53 @@
+var fontStyleUtil = {
+  // 字体样式格式: bold italic 12px 黑体 或 12px 黑体
+  toMap: function toMap(font) {
+    if (font === void 0) {
+      font = '';
+    }
+
+    var arr = font.trim().split(' ');
+    var bold = font.indexOf('bold') > -1;
+    var italic = font.indexOf('italic') > -1;
+    var fontFamily, fontSize;
+
+    if (arr.length) {
+      fontFamily = arr[arr.length - 1];
+    }
+
+    if (arr.length >= 2) {
+      fontSize = parseInt(arr[arr.length - 2].replace('px', ''), 10);
+    }
+
+    return {
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      bold: bold,
+      italic: italic
+    };
+  },
+  // 字体样式格式: bold italic 12px 黑体 或 12px 黑体
+  build: function build(style) {
+    var font = '';
+
+    if (style.font.bold) {
+      font += 'bold ';
+    }
+
+    if (style.font.italic) {
+      font += 'italic ';
+    }
+
+    return "" + font + style.font.fontSize + "px " + style.font.fontFamily;
+  },
+  getFontStyleMap: function getFontStyleMap(obj, prefix) {
+    var map = {};
+    Object.keys(obj).forEach(function (key) {
+      if (key.startsWith(prefix)) {
+        map[key.replace(prefix, '')] = obj[key];
+      }
+    });
+    console.error(obj, prefix, map);
+    return map;
+  }
+};
+export default fontStyleUtil;

package/es/core/editor/components/settings/common/text/img/bold.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/bold</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/bold" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
+        <g id="Icon-zitijiacu" transform="translate(4.000000, 3.000000)" fill="#4D6277" fill-rule="nonzero">
+            <path d="M7.01125,5.739125 C6.75175,5.339375 6.368875,5.0735 5.863,4.941875 L5.863,4.916375 C6.131125,4.788875 6.3565,4.646375 6.539125,4.488875 C6.722125,4.34 6.862375,4.1825 6.96025,4.01675 C7.1515,3.668 7.243,3.302375 7.234375,2.9195 C7.234375,2.171 7.002625,1.569125 6.539125,1.113875 C6.07975,0.663125 5.39275,0.433625 4.4785,0.425 L0.52225,0.425 L0.52225,9.7265 L4.79125,9.7265 C5.522875,9.7265 6.133,9.482 6.622375,8.992625 C7.115875,8.524625 7.36675,7.889 7.375,7.085375 C7.375,6.6005 7.253875,6.151625 7.01125,5.739125 Z M2.035,1.681625 L4.319125,1.681625 C4.833625,1.69025 5.212375,1.8155 5.454625,2.058125 C5.701375,2.317625 5.82475,2.6345 5.82475,3.00875 C5.82475,3.383 5.701375,3.6935 5.454625,3.94025 C5.212375,4.208 4.833625,4.34225 4.319125,4.34225 L2.035,4.34225 L2.035,1.681625 Z M5.601625,7.965875 C5.359375,8.24225 4.9765,8.38475 4.453375,8.393375 L2.035,8.393375 L2.035,5.59925 L4.453,5.59925 C4.976125,5.6075 5.359,5.745875 5.60125,6.014 C5.8435,6.28625 5.965,6.613625 5.965,6.9965 C5.965,7.370375 5.843875,7.693625 5.601625,7.965875 L5.601625,7.965875 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>

package/es/core/editor/components/settings/common/text/img/italics.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/italics</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/italics" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="2" y="2" width="12" height="12"></rect>
+        <polygon id="路径" fill="#4D6277" fill-rule="nonzero" points="8.77666667 4.29166666 7.19333333 12.2083333 8.77666667 12.2083333 8.77666667 13 4.02666667 13 4.02666667 12.2083333 5.60999999 12.2083333 7.19333333 4.29166666 5.60999999 4.29166666 5.60999999 3.5 10.36 3.5 10.36 4.29166666"></polygon>
+    </g>
+</svg>

package/es/core/editor/components/settings/common/text/img/underline.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/underline</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/underline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
+        <g id="Icon-zitixiahuaxian" transform="translate(3.000000, 3.000000)" fill="#4D6277" fill-rule="nonzero">
+            <path d="M5,8.507375 C7.01929112,8.507375 8.65625,6.87041612 8.65625,4.851125 L8.65625,0.05 L7.34375,0.05 L7.34375,4.851125 C7.34375,6.14554238 6.29441738,7.194875 5,7.194875 C3.70558262,7.194875 2.65625,6.14554238 2.65625,4.851125 L2.65625,0.05 L1.34375,0.05 L1.34375,4.851125 C1.34375,6.87041612 2.98070888,8.507375 5,8.507375 Z M9.125,9.380375 L0.875,9.380375 C0.667893219,9.380375 0.5,9.54826822 0.5,9.755375 C0.5,9.96248178 0.667893219,10.130375 0.875,10.130375 L9.125,10.130375 C9.33210678,10.130375 9.5,9.96248178 9.5,9.755375 C9.5,9.54826822 9.33210678,9.380375 9.125,9.380375 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>

package/es/core/editor/components/settings/group/GroupNodeList/ResourceList.js

@@ -1,10 +1,30 @@
 import _List from "@alifd/next/lib/list";
-import _Avatar from "@alifd/next/lib/avatar";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import styles from "./ResourceList.module.scss";
 
 function ResourceList(props) {
   var data = props.data;
+
+  var renderIcon = function renderIcon(src) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 28,
+        height: 28,
+        background: "url(" + src + ") no-repeat center center"
+      }
+    });
+  };
+
+  var renderIcon2 = function renderIcon2(src) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.iconWarp
+    }, /*#__PURE__*/React.createElement("img", {
+      src: src,
+      className: styles.iconImg,
+      alt: ""
+    }));
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.list
   }, /*#__PURE__*/React.createElement(_List, {
@@ -14,11 +34,7 @@ function ResourceList(props) {
       return /*#__PURE__*/React.createElement(_List.Item, {
         key: i,
         extra: item.money,
-        media: /*#__PURE__*/React.createElement(_Avatar, {
-          src: item.img,
-          shape: "square",
-          size: "small"
-        })
+        media: renderIcon2(item.img)
       }, item.title);
     }
   }));

package/es/core/editor/components/settings/group/GroupNodeList/ResourceList.module.scss

@@ -13,3 +13,19 @@
     }
   }
 }
+
+.iconWarp {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+
+  .iconImg {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    max-width: 28px;
+    max-height: 100%;
+    vertical-align: middle;
+  }
+}

package/es/core/editor/components/settings/group/GroupNodeList/icon.d.ts

@@ -66,4 +66,14 @@ export function getIconMap(topo: any): {
     'editor.icon.balanc.small': string;
     'editor.icon.calendar.small': string;
 };
+/**
+ *
+ * @param topo
+ * @param type {'node' | 'container'}
+ * @return {{label: string, icons: *[]}[]}
+ */
+export function getIconGroups(topo: any, type: 'node' | 'container'): {
+    label: string;
+    icons: any[];
+}[];
 export function getIconById(id: any, topo: any): any;

package/es/core/editor/components/settings/group/GroupNodeList/icon.js

@@ -1,5 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import defaultIcons from "./icons/defaultIcons";
+import defaultIcons, { DEFAULT_NODE_ICONS } from "../../../../../common/icons/defaultIcons";
+
+function getUserCustomIcons(topo) {
+  var uploadIcons = topo.store.getModelState('iconManage').icons;
+  return [];
+}
+
 export function getIconMap(topo) {
   var bizIconMap = {};
   var uploadIcons = topo.store.getModelState('iconManage').icons.node;
@@ -8,6 +14,19 @@ export function getIconMap(topo) {
   });
   return _extends({}, defaultIcons, bizIconMap);
 }
+/**
+ *
+ * @param topo
+ * @param type {'node' | 'container'}
+ * @return {{label: string, icons: *[]}[]}
+ */
+
+export function getIconGroups(topo, type) {
+  return [{
+    label: '默认',
+    icons: [].concat(DEFAULT_NODE_ICONS, topo.options.icons || [])
+  }];
+}
 export function getIconById(id, topo) {
   var iconMap = getIconMap(topo);
   var icon = iconMap[id];

package/es/core/editor/components/settings/node/NodeIconSelect.d.ts

@@ -0,0 +1 @@
+export default function NodeIconSelect(props: any): JSX.Element;

package/es/core/editor/components/settings/node/NodeIconSelect.js

@@ -0,0 +1,42 @@
+import _Avatar from "@alifd/next/lib/avatar";
+import _Select from "@alifd/next/lib/select";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { getIconGroups, getIconMap } from "../group/GroupNodeList/icon";
+var Option = _Select.Option;
+export default function NodeIconSelect(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  var iconGroups = getIconGroups(topo, 'node');
+  var newId = value;
+  var a = iconGroups[0].icons.filter(function (item) {
+    return newId.indexOf(item.oldId) !== -1;
+  });
+
+  if (a.length) {
+    newId = a[0].id;
+  }
+
+  return /*#__PURE__*/React.createElement(_Select, {
+    value: newId,
+    onChange: onChange,
+    style: {
+      width: '100%'
+    }
+  }, iconGroups.map(function (group) {
+    return /*#__PURE__*/React.createElement(_Select.OptionGroup, {
+      label: group.label,
+      key: group.label
+    }, group.icons.map(function (icon) {
+      return /*#__PURE__*/React.createElement(Option, {
+        key: icon.id,
+        value: icon.id
+      }, /*#__PURE__*/React.createElement(_Avatar, {
+        src: icon.url,
+        shape: "square",
+        size: "small"
+      }), "\xA0", icon.name);
+    }));
+  }));
+}
+;

package/es/core/editor/components/settings/node/NodePropertyView.d.ts

@@ -1 +1 @@
-export default function TextPropertyView(props: any): JSX.Element;
+export default function NodePropertyView(props: any): JSX.Element;

package/es/core/editor/components/settings/node/NodePropertyView.js

@@ -1,6 +1,5 @@
 import _Input from "@alifd/next/lib/input";
 import _Tab from "@alifd/next/lib/tab";
-import _Button from "@alifd/next/lib/button";
 import _Field from "@alifd/next/lib/field";
 import _extends from "@babel/runtime/helpers/extends";
 import _Radio from "@alifd/next/lib/radio";
@@ -12,94 +11,47 @@ import React, { useState, useEffect } from 'react';
 import ColorPicker from "../../LinkDynamicStyleSettingDrawer/rule/ColorPicker";
 import ResourceSelectButton from "../group/GroupNodeList/ResourceSelectButton";
 import { getIconMap } from "../group/GroupNodeList/icon";
-import NodeSizeInput from "../common/NodeSizeInput";
+import NodeSizeInput from "../common/NodeSizeInput/NodeSizeInput";
+import textStyles from "../../../../common/text.module.scss";
+import TopoTreeSelect from "./TopoTreeSelect";
+import NodeIconSelect from "./NodeIconSelect";
+import NodeRelateResourceButton from "./NodeRelateResourceButton";
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
     Col = _Grid.Col;
 var Option = _Select.Option;
 var CollapsePanel = _Collapse.Panel;
-var RadioGroup = _Radio.Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
+var RadioGroup = _Radio.Group;
 
-var fontStyleUtil = {
-  toMap: function toMap(font, prefix) {
-    var arr = font.trim().split(' ');
-    var bold = font.indexOf('bold') > -1;
-    var italic = font.indexOf('bold') > -1;
-    var map = {
-      fontFamily: arr[1],
-      fontSize: parseInt(arr[0].replace('px', ''), 10),
-      bold: bold,
-      italic: italic,
-      underline: false
-    };
-    return Object.keys(map).reduce(function (result, key) {
-      result["" + prefix + key] = map[key];
-      return result;
-    }, {});
-  },
-  getFontStyleMap: function getFontStyleMap(obj, prefix) {
-    var map = {};
-    Object.keys(obj).forEach(function (key) {
-      if (key.startsWith(prefix)) {
-        map[key.replace(prefix, '')] = obj[key];
-      }
-    });
-    console.error(obj, prefix, map);
-    return map;
-  },
-  build: function build(style) {
-    return style.fontSize + "px " + style.fontFamily;
+function parseValues(values) {
+  return _extends({}, values);
+}
+
+function getBindType(values) {
+  if (values.tag) {
+    return 'resource';
   }
-}; // 线型--node.s('dash',false) ---false代表是实线，默认为true代表虚线
-// 线型为实线时设置颜色--node.s('borderColor','rgba(0,0,0,0.00)') //默认颜色rgba(0,0,0,0.00)
-// 线型为虚线时设置颜色--node.s('dashColor','rgb(173,173,173)') //默认颜色rgb(173,173,173)
-// 线宽--node.s('borderWidth',1)//默认宽度是1
-//
-//
-// 为了实现切换时更好的效果，在设置线型为虚线时可以这样设置：
-// node.s('dash',true);
-// node.s('borderColor','rgba(0,0,0,0.00)');//将borderColor改为默认
-// node.s('dashColor','当前设置的颜色')
-// 虚线颜色用的是dashColor
-//
-// 设置线型为实线时
-// node.s('dash',false);
-// node.s('borderColor','当前设置的颜色');
-// node.s('dashColor','rgb(173,173,173)');dash可设置为默认
-// 实线用的是borderColor
 
-function parseValues(values) {
-  return _extends({}, values, fontStyleUtil.toMap(values['styleMap.label.font'], 'styleMap.label.fontStyle.'), {
-    // 层间线
-    'styleMap.borderType': values['styleMap.dash'] === false ? 'solid' : 'dash',
-    'styleMap.dashColor': values['styleMap.dashColor'] || 'rgb(173,173,173)',
-    'styleMap.borderWidth': values['styleMap.borderWidth'] || 1
-  });
+  if (values.attr.bindType) {
+    return values.attr.bindType;
+  }
+
+  return 'none';
 }
 
-export default function TextPropertyView(props) {
+export default function NodePropertyView(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
       _onChange = props.onChange,
       editorProps = props.editorProps;
+  var bindType = getBindType(values);
 
   var field = _Field.useField({
     autoUnmount: false,
     values: parseValues(values),
     onChange: function onChange(name, value) {
-      var newValues = field.getValues(); // 文字font样式
-
-      if (name.startsWith('styleMap.label.fontStyle.')) {
-        name = 'styleMap.label.font';
-        value = fontStyleUtil.build(fontStyleUtil.getFontStyleMap(newValues, 'styleMap.label.fontStyle.'));
-      } // 层间线
-
-
-      if (name === 'styleMap.borderType') {
-        name = 'styleMap.dash';
-        value = value === 'dash';
-      }
+      var newValues = field.getValues();
 
       if (values[name] !== value) {
         _onChange(name, value, newValues);
@@ -107,6 +59,10 @@ export default function TextPropertyView(props) {
     }
   });
 
+  var setBindType = function setBindType(value) {
+    _onChange('attrObject.bindType', value);
+  };
+
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
@@ -121,12 +77,46 @@ export default function TextPropertyView(props) {
   }, /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u76F8\u5173\u8D44\u6E90",
     title: "\u76F8\u5173\u8D44\u6E90"
-  }, "\u5173\u8054\u8D44\u6E90", /*#__PURE__*/React.createElement("br", null), values.name, /*#__PURE__*/React.createElement(_Button, {
-    text: true,
-    onClick: function onClick() {
-      topoEditApi.bindNodeResource({});
+  }, /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top"
+  }, !values.tag && /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5173\u8054\u7C7B\u578B"
+  }, /*#__PURE__*/React.createElement(_Select, {
+    name: "bindType",
+    value: bindType,
+    style: {
+      width: '100%',
+      marginRight: 8
+    },
+    onChange: setBindType
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: "none"
+  }, "\u672A\u5173\u8054"), /*#__PURE__*/React.createElement(Option, {
+    value: "resource"
+  }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(Option, {
+    value: "topo"
+  }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5173\u8054\u8D44\u6E90"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex'
     }
-  })))), /*#__PURE__*/React.createElement(_Tab.Item, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: textStyles.textEllipsis,
+    style: {
+      flex: 1,
+      paddingRight: 16,
+      color: '#4D6277'
+    },
+    title: values.tag ? values.name : null
+  }, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
+    node: values,
+    topo: topo,
+    topoEditApi: topoEditApi
+  }))), bindType === 'topo' && /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5173\u8054\u62D3\u6251"
+  }, /*#__PURE__*/React.createElement(TopoTreeSelect, null)))))), /*#__PURE__*/React.createElement(_Tab.Item, {
     title: "\u8BBE\u7F6E",
     key: "2"
   }, /*#__PURE__*/React.createElement(_Form, {
@@ -141,23 +131,15 @@ export default function TextPropertyView(props) {
     key: "\u663E\u793A\u8BBE\u7F6E",
     title: "\u663E\u793A\u8BBE\u7F6E"
   }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u540D\u79F0"
+    label: "\u56FE\u7247\u540D\u79F0"
   }, /*#__PURE__*/React.createElement(_Input, {
     name: "attrObject.name"
   })), /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u663E\u793A\u56FE\u7247"
-  }, /*#__PURE__*/React.createElement(_Select, {
+  }, /*#__PURE__*/React.createElement(NodeIconSelect, {
     name: "image",
-    style: {
-      width: '100%',
-      marginRight: 8
-    }
-  }, Object.keys(getIconMap(topo)).map(function (id) {
-    return /*#__PURE__*/React.createElement(Option, {
-      key: id,
-      value: id
-    }, id);
-  }))), /*#__PURE__*/React.createElement(_Form.Item, {
+    topo: topo
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u56FE\u7247\u5C3A\u5BF8"
   }, /*#__PURE__*/React.createElement(NodeSizeInput, {
     value: {

package/es/core/editor/components/settings/node/NodeRelateResourceButton.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @return {React.ReactNode | null}
+ */
+export default function NodeRelateResourceButton(props: any): any | null;

package/es/core/editor/components/settings/node/NodeRelateResourceButton.js

@@ -0,0 +1,22 @@
+import _Button from "@alifd/next/lib/button";
+import React from 'react';
+
+/**
+ * @return {React.ReactNode | null}
+ */
+export default function NodeRelateResourceButton(props) {
+  var _node$attr$data, _topo$options$editor;
+
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      node = props.node;
+  var hide = ((_node$attr$data = node.attr.data) === null || _node$attr$data === void 0 ? void 0 : _node$attr$data.relateResource) === false || ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) === false;
+  return !hide ? /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    text: true,
+    onClick: function onClick() {
+      topoEditApi.bindNodeResource({});
+    }
+  }, "\u9009\u62E9\u8D44\u6E90") : null;
+}
+;

package/es/core/editor/components/settings/node/TopoTreeSelect.d.ts

@@ -0,0 +1 @@
+export default function TopoTreeSelect(props: any): JSX.Element;

package/es/core/editor/components/settings/node/TopoTreeSelect.js

@@ -0,0 +1,40 @@
+import _TreeSelect from "@alifd/next/lib/tree-select";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+var TreeNode = _TreeSelect.Node;
+export default function TopoTreeSelect(props) {
+  var onChange = props.onChange;
+  return /*#__PURE__*/React.createElement(_TreeSelect, {
+    treeDefaultExpandAll: true,
+    onChange: onChange,
+    style: {
+      width: '100%',
+      marginRight: 8
+    }
+  }, /*#__PURE__*/React.createElement(TreeNode, {
+    key: "1",
+    value: "1",
+    label: "Component"
+  }, /*#__PURE__*/React.createElement(TreeNode, {
+    key: "2",
+    value: "2",
+    label: "Form"
+  }, /*#__PURE__*/React.createElement(TreeNode, {
+    key: "4",
+    value: "4",
+    label: "Input"
+  }), /*#__PURE__*/React.createElement(TreeNode, {
+    key: "5",
+    value: "5",
+    label: "Select",
+    disabled: true
+  })), /*#__PURE__*/React.createElement(TreeNode, {
+    key: "3",
+    value: "3",
+    label: "Display"
+  }, /*#__PURE__*/React.createElement(TreeNode, {
+    key: "6",
+    value: "6",
+    label: "Table"
+  }))));
+}
+;