@riil-frontend/component-topology 6.0.0-alpha.8 → 6.0.1

package/es/core/editor/components/Toolbar/widgets/IconSelect/constant.js

@@ -0,0 +1,64 @@
+export var iconList = [{
+  id: '1',
+  name: '图片库1',
+  icons: [{
+    id: '001',
+    name: '图片一',
+    url: '/img/model/switch.svg',
+    icon: 'switch'
+  }, {
+    id: '002',
+    name: '图片二',
+    url: '/img/model/backupOnError.svg',
+    icon: 'res_terminal'
+  }, {
+    id: '003',
+    name: '图片三',
+    url: '/img/model/linuxServer.svg',
+    icon: 'res_linux'
+  }, {
+    id: '004',
+    name: '图片一',
+    url: '/img/model/switch.svg',
+    icon: 'switch'
+  }, {
+    id: '005',
+    name: '图片二',
+    url: '/img/model/backupOnError.svg',
+    icon: 'res_terminal'
+  }, {
+    id: '005',
+    name: '图片三',
+    url: '/img/model/linuxServer.svg',
+    icon: 'res_linux'
+  }, {
+    id: '006',
+    name: '图片一',
+    url: '/img/model/switch.svg',
+    icon: 'switch'
+  }, {
+    id: '007',
+    name: '图片二',
+    url: '/img/model/backupOnError.svg',
+    icon: 'res_terminal'
+  }, {
+    id: '008',
+    name: '图片三',
+    url: '/img/model/linuxServer.svg',
+    icon: 'res_linux'
+  }]
+}, {
+  id: '2',
+  name: '图片库2',
+  icons: [{
+    id: '004',
+    name: '图片四',
+    url: '/img/model/tree_child.svg',
+    icon: 'tree_child'
+  }, {
+    id: '005',
+    name: '图片五',
+    url: '/img/model/commonNetwork.svg',
+    icon: 'res_storage'
+  }]
+}];

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

@@ -0,0 +1,101 @@
+import React, { useState, useEffect, useImperativeHandle } from 'react';
+import styles from "./index.module.scss";
+import PopUpContent from "./popUpContent";
+
+var TopoIconSelect = function TopoIconSelect(props, ref) {
+  // 传入参数
+  var value = props.value,
+      iconList = props.iconList,
+      onChange = props.onChange;
+
+  var _useState = useState(value),
+      valueData = _useState[0],
+      setValue = _useState[1];
+
+  var _useState2 = useState(),
+      selectItem = _useState2[0],
+      setSelect = _useState2[1];
+
+  var _useState3 = useState(false),
+      visible = _useState3[0],
+      setVisible = _useState3[1];
+
+  useEffect(function () {
+    if (value) {
+      for (var i = 0; i < iconList.length; i++) {
+        var icons = iconList[i].icons;
+        var flag = false;
+
+        for (var m = 0; m < icons.length; m++) {
+          if (value === icons[m].id) {
+            flag = true;
+            setSelect(icons[m]);
+            break;
+          }
+        }
+
+        if (flag) {
+          break;
+        }
+      }
+    }
+  }, [value]);
+  useImperativeHandle(ref, function () {
+    return {
+      getSelectData: getSelectData
+    };
+  });
+
+  var handleChange = function handleChange(v) {
+    console.log('handleChange: ', v);
+
+    if (typeof onChange === 'function') {
+      onChange(v.id);
+    }
+
+    setSelect(v);
+    setValue(v.id);
+    setVisible(false);
+  };
+
+  var getSelectData = function getSelectData() {
+    return valueData;
+  };
+
+  var valueRender = function valueRender(v) {
+    return selectItem ? /*#__PURE__*/React.createElement("span", {
+      className: styles.selected
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.iconImgWrapper
+    }, /*#__PURE__*/React.createElement("img", {
+      className: styles.iconImg,
+      alt: "",
+      src: selectItem === null || selectItem === void 0 ? void 0 : selectItem.url
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.icontitle
+    }, selectItem === null || selectItem === void 0 ? void 0 : selectItem.name)) : null;
+  };
+
+  var onVisibleChange = function onVisibleChange(v) {
+    setVisible(v);
+  };
+
+  var popupContent = /*#__PURE__*/React.createElement(PopUpContent, {
+    iconList: iconList,
+    selectedId: selectItem === null || selectItem === void 0 ? void 0 : selectItem.id,
+    onChange: handleChange
+  });
+  var popupProps = {
+    triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow
+
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.TopoIconSelect
+  }, /*#__PURE__*/React.createElement(PopUpContent, {
+    iconList: iconList,
+    selectedId: selectItem === null || selectItem === void 0 ? void 0 : selectItem.id,
+    onChange: handleChange
+  }));
+};
+
+export default /*#__PURE__*/React.forwardRef(TopoIconSelect);

package/es/core/editor/components/Toolbar/widgets/IconSelect/index.module.scss

@@ -0,0 +1,153 @@
+@import "@alifd/next/variables";
+
+.TopoIconSelect {
+
+
+  .iconSelect {}
+
+
+
+}
+
+.iconCollapse {
+  width: 240px;
+  max-height: 218px;
+  overflow-y: auto;
+  border: none;
+
+  :global {
+    .#{$css-prefix}collapse-panel-expanded {
+      .#{$css-prefix}collapse-panel-content {
+        padding: 0px 0px 5px 0px;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel {
+      border-top: none;
+      background-color: #FFF;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #4D6277;
+      line-height: 17px;
+    }
+
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-content {
+      padding: 0px 0px 5px 0px;
+    }
+  }
+}
+
+.iconSelect {
+  width: 100%;
+
+  .selected {
+    height: 26px;
+    display: block;
+
+    .iconImgWrapper {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+      // vertical-align: middle;
+    }
+
+    .iconImg {
+      display: inline-block;
+      width: auto;
+      height: auto;
+      max-width: 18px;
+      max-height: 18px;
+      vertical-align: middle;
+    }
+
+    .icontitle {
+      text-align: left;
+      vertical-align: top;
+      display: inline-block;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #4D6277;
+      //margin-top: 2px;
+      line-height: 26px;
+      margin-left: 7px;
+    }
+
+    :global {
+      .#{$css-prefix}tag {
+        background: none;
+      }
+    }
+  }
+}
+
+
+
+.collPanel {
+  padding: 5px;
+}
+
+
+
+
+.iconli {
+  width: 52px;
+  height: 68px;
+  text-align: center;
+  //border: 2px solid #FFF;
+  overflow: hidden;
+  cursor: pointer;
+
+  .iconImgWrapper {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    margin: 5px 8px 5px 8px;
+  }
+
+  .iconImg {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    max-width: 32px;
+    max-height: 32px;
+    vertical-align: middle;
+  }
+
+  .icontitle {
+    width: 48px;
+    max-width: 50px;
+    text-align: center;
+    font-size: 12px;
+    -webkit-text-size-adjust: none;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4D6277;
+    line-height: 11px;
+  }
+
+
+  // float: left;
+}
+
+.selectedTag {
+  border-radius: 4px;
+  // border: 2px solid #4C89FF;
+  background-color: #F2F7FD;
+}

package/es/core/editor/components/Toolbar/widgets/IconSelect/popUpContent.js

@@ -0,0 +1,49 @@
+import _Box from "@alifd/next/es/box";
+import _Collapse from "@alifd/next/es/collapse";
+import React from 'react';
+import styles from "./index.module.scss";
+var Panel = _Collapse.Panel;
+
+function PopUpContent(props) {
+  var iconList = props.iconList,
+      onChange = props.onChange,
+      selectedId = props.selectedId;
+
+  var itemOnClick = function itemOnClick(e) {
+    onChange(e);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Collapse, {
+    className: styles.iconCollapse
+  }, iconList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Panel, {
+      title: item.name,
+      key: index,
+      className: styles.collPanel
+    }, /*#__PURE__*/React.createElement(_Box, {
+      spacing: 4,
+      direction: "row",
+      wrap: true
+    }, item.icons.map(function (icon, idx) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: idx,
+        className: styles.iconli + " " + (selectedId === icon.id ? styles.selectedTag : ''),
+        onClick: function onClick() {
+          itemOnClick(icon);
+        },
+        title: icon.name
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.iconImgWrapper
+      }, /*#__PURE__*/React.createElement("img", {
+        className: styles.iconImg,
+        alt: "",
+        src: icon.url,
+        size: "xxl"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: styles.icontitle
+      }, icon.name));
+    })));
+  })));
+}
+
+export default PopUpContent;

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

@@ -0,0 +1,99 @@
+import _Form from "@alifd/next/es/form";
+import _Radio from "@alifd/next/es/radio";
+import React, { useState, useEffect } from 'react';
+import TemplateGroup from "./LayoutTagImageSelect";
+import styles from "./LayoutSettings.module.scss";
+var LAYOUTS = {
+  circular: '星型布局',
+  hierarchical: '均衡布局',
+  toward: '树形布局',
+  rectangle: '分层排布'
+};
+var TREE_LAYOUT_OPTIONS = [{
+  value: 'east',
+  label: '横向'
+}, {
+  value: 'south',
+  label: '纵向'
+}];
+
+var LayoutSettings = function LayoutSettings(props) {
+  var _props$layout = props.layout,
+      layout = _props$layout === void 0 ? {} : _props$layout,
+      onChange = props.onChange,
+      regionId = props.regionId,
+      size = props.size,
+      disabled = props.disabled;
+  var layoutId = layout.id,
+      layoutOptions = layout.options; // const [value, setValue] = useState();
+
+  var handleChange = function handleChange(data) {
+    onChange && onChange(data);
+  };
+
+  var onLayoutSelect = function onLayoutSelect(id) {
+    // console.log("onLayoutSelect", id, layout, value);
+    var options;
+
+    if (id === 'toward') {
+      options = {
+        subId: TREE_LAYOUT_OPTIONS[0].value
+      };
+    } // setValue(id);
+
+
+    handleChange({
+      id: id,
+      options: options
+    });
+  };
+
+  var layoutGroup = Object.keys(LAYOUTS).map(function (id) {
+    return {
+      id: id,
+      name: LAYOUTS[id],
+      icon: "layout_" + id,
+      selected: layoutId === id
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['layout-setting-template-group']
+  }, /*#__PURE__*/React.createElement(TemplateGroup, {
+    dataSource: layoutGroup,
+    value: layoutId,
+    size: size,
+    disabled: disabled,
+    onChange: onLayoutSelect,
+    boxProps: {
+      spacing: 12,
+      className: styles.tagBox
+    },
+    tagProps: {
+      className: styles.tag,
+      style: {
+        background: '#FFF'
+      },
+      type: 'primary'
+    },
+    itemProps: {
+      className: styles.card,
+      iconClassName: styles.icon,
+      textClassName: styles.text
+    }
+  }), layoutId === 'toward' ? /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5E03\u5C40\u65B9\u5411"
+  }, /*#__PURE__*/React.createElement(_Radio.Group, {
+    dataSource: TREE_LAYOUT_OPTIONS,
+    defaultValue: layoutOptions.subId || TREE_LAYOUT_OPTIONS[0].value,
+    onChange: function onChange(subId) {
+      return handleChange({
+        id: layoutId,
+        options: {
+          subId: subId
+        }
+      });
+    }
+  })) : null);
+};
+
+export default LayoutSettings;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutSettings.module.scss

@@ -0,0 +1,70 @@
+@import "@alifd/next/variables";
+@import '@alifd/next/reset.scss';
+
+.label {
+  margin: 0 10px;
+}
+
+.tagBox {
+  color: #4D6277;
+
+
+  :global {
+    .checked {
+      // border: 2px solid $color-brand1-5 !important;
+      color: #4D6277 !important;
+      border-color: #fff !important;
+      background:#F2F7FD !important;
+    }
+  }
+}
+
+.tag {
+  // border: 2px solid $color-gitfill1-1 !important;
+  border-color: #fff !important;
+  color: #4D6277;
+
+  &:hover {
+    background-color: $color-brand1-1 !important;
+    border-color: #fff !important;
+    // border: 2px solid #FFFFFF;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1) !important;
+    border-color: #fff !important;
+    // border: 2px solid $color-brand1-5 !important;
+    color: $color-fill1-1;
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 64px;
+  height: 76px;
+  border: none;
+  padding-top: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $color-brand1-1;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1);
+  }
+}
+
+.icon {
+  width: 30px;
+}
+
+.text {
+  height: 12px;
+  line-height: 12px;
+  font-size: 12px;
+  margin-top: 8px;
+  color: $color-text1-3;
+  outline: none;
+}

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

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataSource", "onChange", "size", "boxProps", "tagProps", "itemProps", "ItemComponent", "disabled", "value"];
+import React from 'react';
+import TemplateButton from "../LayoutTemplateButton";
+import TagSelect from "../LayoutTagSelect";
+import styles from "./index.module.scss";
+
+var TagImageSelect = function TagImageSelect(props) {
+  var dataSource = props.dataSource,
+      onChange = props.onChange,
+      size = props.size,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps,
+      itemProps = props.itemProps,
+      ItemComponent = props.ItemComponent,
+      disabled = props.disabled,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var Item = ItemComponent || TemplateButton;
+  return /*#__PURE__*/React.createElement(TagSelect, _extends({}, otherProps, {
+    onChange: onChange,
+    className: styles.tagSelect,
+    value: value,
+    disabled: disabled,
+    dataSource: dataSource.map(function (item) {
+      return {
+        key: item.id,
+        content: /*#__PURE__*/React.createElement(Item, _extends({
+          key: item.id
+        }, item, {
+          size: size
+        }, itemProps), item.name)
+      };
+    }),
+    boxProps: boxProps,
+    tagProps: tagProps
+  }));
+};
+
+export default TagImageSelect;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagImageSelect/index.module.scss

@@ -0,0 +1,7 @@
+.name {
+  margin: 20px 0 0 10px;
+}
+
+.tagSelect {
+  border: none;
+}

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

@@ -0,0 +1,75 @@
+import _Box from "@alifd/next/es/box";
+import _extends from "@babel/runtime/helpers/extends";
+import _Tag from "@alifd/next/es/tag";
+
+/* eslint-disable eqeqeq */
+import React, { useState, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import "./index.scss";
+import classNames from 'classnames';
+var SelectableTag = _Tag.Selectable;
+
+var TagSelect = function TagSelect(props) {
+  var _onChange = props.onChange,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      dataSource = props.dataSource,
+      size = props.size,
+      disabled = props.disabled,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps;
+
+  var _useState = useState(value || defaultValue),
+      current = _useState[0],
+      setCurrent = _useState[1];
+
+  useEffect(function () {
+    // if (value) {
+    // }
+    setCurrent(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tag-select-wrap"
+  }, /*#__PURE__*/React.createElement(_Box, _extends({
+    spacing: 12,
+    wrap: true,
+    direction: "row"
+  }, boxProps), dataSource.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tag-select-item",
+      key: "wrap-" + item.key
+    }, /*#__PURE__*/React.createElement(SelectableTag, _extends({
+      key: item.key,
+      checked: current === item.key // eslint-disable-next-line eqeqeq
+      ,
+      disabled: disabled(item.key),
+      onChange: function onChange(checked) {
+        _onChange && _onChange(item.key);
+
+        if (!('value' in props)) {
+          setCurrent(item.key);
+        }
+      }
+    }, tagProps), /*#__PURE__*/React.createElement("span", {
+      className: classNames({
+        'tag-select-texts': disabled(item.key)
+      })
+    }, item.content)));
+  })));
+};
+
+TagSelect.propTypes = {
+  // eslint-disable-next-line react/require-default-props
+  onChange: PropTypes.func,
+  // eslint-disable-next-line react/require-default-props
+  value: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props
+  defaultValue: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props
+  dataSource: PropTypes.array,
+  boxProps: PropTypes.any
+};
+TagSelect.defaultProps = {
+  boxProps: {}
+};
+export default TagSelect;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagSelect/index.scss

@@ -0,0 +1,32 @@
+/* write style here */
+@import '@alifd/next/variables.scss';
+
+.tag-select-wrap {
+  .tag-select-item {
+    text-align: -webkit-center;
+
+    .#{$css-prefix}tag {
+      height: auto;
+      line-height: 0;
+
+      &::before {
+        z-index: 1;
+      }
+
+      &::after {
+        z-index: 1;
+      }
+
+      .#{$css-prefix}tag-body {
+        width: 100%;
+        padding: 0;
+
+        .tag-select-img {}
+      }
+      .tag-select-texts{
+        color: #C9CED2;
+        opacity: 0.6;
+      }
+    }
+  }
+}