@riil-frontend/component-topology 2.7.4 → 2.9.0

package/lib/components/TagImageSelect/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TemplateButton = _interopRequireDefault(require("../TemplateButton"));
+
+var _TagSelect = _interopRequireDefault(require("../TagSelect"));
+
+var TagImageSelect = function TagImageSelect(props) {
+  var _data$filter$;
+
+  var _props$data = props.data,
+      data = _props$data === void 0 ? [] : _props$data,
+      size = props.size,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps,
+      itemProps = props.itemProps,
+      ItemComponent = props.ItemComponent;
+  var value = (_data$filter$ = data.filter(function (item) {
+    return item.selected;
+  })[0]) === null || _data$filter$ === void 0 ? void 0 : _data$filter$.id;
+  var Item = ItemComponent || _TemplateButton["default"];
+  return /*#__PURE__*/_react["default"].createElement(_TagSelect["default"], {
+    defaultValue: value,
+    dataSource: data.map(function (item) {
+      return {
+        key: item.id,
+        content: /*#__PURE__*/_react["default"].createElement(Item, (0, _extends2["default"])({
+          key: item.id
+        }, item, {
+          size: size
+        }, itemProps), item.name)
+      };
+    }),
+    boxProps: boxProps,
+    tagProps: tagProps
+  });
+};
+
+var _default = TagImageSelect;
+exports["default"] = _default;

package/lib/components/TagSelect/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _tag = _interopRequireDefault(require("@alifd/next/lib/tag"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+require("./index.scss");
+
+var SelectableTag = _tag["default"].Selectable;
+
+var TagSelect = function TagSelect(props) {
+  var _onChange = props.onChange,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      dataSource = props.dataSource,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps;
+
+  var _useState = (0, _react.useState)(value || defaultValue),
+      current = _useState[0],
+      setCurrent = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    if (value) {
+      setCurrent(value);
+    }
+  }, [value]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tag-select-wrap"
+  }, /*#__PURE__*/_react["default"].createElement(_box["default"], (0, _extends2["default"])({
+    spacing: 12,
+    wrap: true,
+    direction: "row"
+  }, boxProps), dataSource.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tag-select-item",
+      key: "wrap-" + item.key
+    }, /*#__PURE__*/_react["default"].createElement(SelectableTag, (0, _extends2["default"])({
+      key: item.key,
+      checked: current === item.key,
+      onChange: function onChange(checked) {
+        _onChange && _onChange(item.key);
+
+        if (!('value' in props)) {
+          setCurrent(item.key);
+        }
+      }
+    }, tagProps), item.content));
+  })));
+};
+
+TagSelect.propTypes = {
+  onChange: _propTypes["default"].func,
+  value: _propTypes["default"].string,
+  defaultValue: _propTypes["default"].string,
+  dataSource: _propTypes["default"].array,
+  boxProps: _propTypes["default"].any
+};
+TagSelect.defaultProps = {
+  boxProps: {}
+};
+var _default = TagSelect;
+exports["default"] = _default;

package/lib/components/TagSelect/index.scss

@@ -0,0 +1,23 @@
+/* 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 {
+				}
+			}
+		}
+	}
+}

package/lib/components/TemplateButton/index.js

@@ -11,17 +11,15 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _react = _interopRequireDefault(require("react"));
 
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Icon = _interopRequireDefault(require("./Icon"));
 
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 
-var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "size"];
+var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "iconClassName", "textClassName"];
 
 var TemplateButton = function TemplateButton(props) {
-  var _classnames;
-
   var className = props.className,
       children = props.children,
       icon = props.icon,
@@ -29,7 +27,8 @@ var TemplateButton = function TemplateButton(props) {
       selected = props.selected,
       _props$onSelect = props.onSelect,
       onSelect = _props$onSelect === void 0 ? function () {} : _props$onSelect,
-      size = props.size,
+      iconClassName = props.iconClassName,
+      textClassName = props.textClassName,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
 
   var handleClick = function handleClick() {
@@ -37,15 +36,15 @@ var TemplateButton = function TemplateButton(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames2["default"])(_indexModule["default"].card, className, (_classnames = {}, _classnames[_indexModule["default"].selected] = selected, _classnames[_indexModule["default"].sizeSmall] = size === 'small', _classnames[_indexModule["default"].sizeLarge] = size === 'large', _classnames)),
+    className: (0, _classnames["default"])(_indexModule["default"].card, className),
     onClick: handleClick
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].iconWrapper
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({
-    className: _indexModule["default"].icon,
+    className: (0, _classnames["default"])(_indexModule["default"].icon, iconClassName),
     type: icon
-  }, rest)), /*#__PURE__*/_react["default"].createElement("div", {
-    tabIndex: "0",
-    role: "button",
-    className: _indexModule["default"].text
+  }, rest))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(_indexModule["default"].text, textClassName)
   }, children));
 };
 

package/lib/components/TemplateButton/index.module.scss

@@ -1,41 +1,28 @@
 @import "@alifd/next/variables";
 
 .card {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid #c4c6cf;
-  width: 120px;
-  height: 136px;
-  background-color: #fff;
-  text-align: center;
+  width: 100%;
+  height: 100%;
   cursor: pointer;
-  vertical-align: middle;
-  margin-right: 12px;
-
-  &:hover, &:focus, &.selected {
-    border-color: $color-brand1-5;
-  }
-
-  &.sizeNormal {
-    width: 120px;
-    height: 136px;
-  }
+}
 
-  &.sizeSmall {
-    width: 50px;
-    height: 50px;
-  }
+.iconWrapper {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
 }
 
 .icon {
-  width: 50%;
+  width: 120px;
 }
 
 .text {
-  font-size: $font-size-body-1;
-  margin-top: 10px;
+  font-size: 18px;
+  margin-top: 16px;
+  padding-bottom: 24px;
   color: $color-text1-3;
   outline: none;
 }

package/lib/core/editor/components/settings/common/LayoutSettings.js

@@ -11,7 +11,7 @@ var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _TemplateGroup = _interopRequireDefault(require("../../../../../components/TemplateGroup"));
+var _TagImageSelect = _interopRequireDefault(require("../../../../../components/TagImageSelect"));
 
 var _LayoutSettingsModule = _interopRequireDefault(require("./LayoutSettings.module.scss"));
 
@@ -66,7 +66,7 @@ var LayoutSettings = function LayoutSettings(props) {
       onSelect: onLayoutSelect
     };
   });
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TemplateGroup["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TagImageSelect["default"], {
     data: layoutGroup,
     size: size
   }), layoutId === 'toward' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {

package/lib/style.js

@@ -25,7 +25,7 @@ require('@alifd/next/lib/radio/style');
 require('@alifd/next/lib/collapse/style');
 require('@alifd/next/lib/list/style');
 require('@alifd/next/lib/tree-select/style');
-
+require('@alifd/next/lib/tag/style');
 
 
 require('./index.scss');

package/lib/topoCenter/store/topoTreeMod.js

@@ -21,27 +21,7 @@ var _tree = require("../../utils/tree");
 
 var clone = function clone(data) {
   return JSON.parse(JSON.stringify(data));
-}; // 展开选中项
-
-
-function findSelectedParentIds(data, selectedId) {
-  // 选中 id 为 -1,则没有默认选中项
-  if (selectedId == '-1') return [];
-  var node = {};
-  (0, _tree.loopTree)(data, selectedId, function (item, index, arr, pid) {
-    node = {
-      item: item,
-      pid: pid
-    };
-  });
-  if (!node.item) return [];
-
-  if (node.pid != -1 && node.item.id) {
-    return node.item.type === 0 ? ["" + node.item.id].concat(findSelectedParentIds(data, node.pid)) : [].concat(findSelectedParentIds(data, node.pid));
-  } else {
-    return ["" + node.item.id];
-  }
-}
+};
 /**
  * TODO 导航树相关增删改移到拓扑中心
  */
@@ -94,7 +74,7 @@ function _default(topoApp) {
                       treeData: (0, _tree.treeNodeCount)(treeData),
                       defId: defId,
                       selectedNode: [selectedTopoId],
-                      expandedKeys: findSelectedParentIds(treeData, selectedTopoId)
+                      expandedKeys: (0, _tree.findParentIdsById)(treeData, selectedTopoId)
                     }); // console.log('resTreeData', resTreeData, rootState.topoMod.topoId);
 
 
@@ -383,7 +363,7 @@ function _default(topoApp) {
           }
 
           var expandedKeys = [].concat(treeState.expandedKeys || []);
-          var parentIds = findSelectedParentIds(treeState.treeData, id);
+          var parentIds = (0, _tree.findParentIdsById)(treeState.treeData, id);
           expandedKeys.push.apply(expandedKeys, parentIds);
           this.update({
             selectedNode: ["" + id],

package/lib/utils/tree.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 exports.__esModule = true;
 exports.findNodeById = findNodeById;
+exports.findParentIdsById = findParentIdsById;
 exports.formatTree = formatTree;
 exports.treeNodeCount = exports.loopTreeFun = exports.loopTreeByKey = exports.loopTree = exports.iconImg = void 0;
 
@@ -103,6 +104,21 @@ function findNodeById(tree, id) {
   });
   return node;
 }
+/**
+ * 按id查找祖先节点id列表
+ */
+
+
+function findParentIdsById(tree, id) {
+  var node = findNodeById(tree, id);
+  var parentId = "" + node.parentId;
+
+  if (parentId === '-1') {
+    return [];
+  }
+
+  return [parentId].concat(findParentIdsById(tree, parentId));
+}
 /**
  * 递归循环遍历树匹配KEY
  * @param {array} json

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "2.7.4",
+  "version": "2.9.0",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -42,7 +42,7 @@
     "@ahooksjs/use-tree-plugin": "^0.2.1",
     "@alifd/biz-anchor": "^1.1.7",
     "@ice/store": "^1.4.2",
-    "@riil-frontend/component-topo-icon-select": "^1.0.2",
+    "@riil-frontend/component-topo-icon-select": "^1.0.3",
     "@riil-frontend/component-topology-common": "^1.0.0",
     "@riil-frontend/component-topology-utils": "^2.0.18",
     "classnames": "^2.2.3",
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@alifd/next": "^1.21.16",
-    "@alifd/theme-19926": "^0.19.4",
+    "@alifd/theme-19926": "^0.20.0",
     "@formily/next": "1.3.13",
     "@formily/next-components": "1.3.13",
     "@iceworks/spec": "^1.0.0",
@@ -67,7 +67,7 @@
     "@riil-frontend/component-row-delete-ballon": "^1.0.2",
     "@riil-frontend/component-table-filter-tags": "latest",
     "@riil-frontend/component-table-layout": "^2.0.2",
-    "@riil-frontend/component-topology-graph": "^2.2.3",
+    "@riil-frontend/component-topology-graph": "^2.2.5",
     "@riil-frontend/css": "^2.0.2",
     "@riil-frontend/hooks": "latest",
     "@riil-frontend/next-collapse": "^1.0.1-a.0",
@@ -102,6 +102,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.7.4/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.9.0/build/index.html",
   "gitHead": "62eadeca07c85ed047f2e933676f62015eff98cc"
 }

package/es/components/TemplateGroup/index.js

@@ -1,28 +0,0 @@
-import _Box from "@alifd/next/lib/box";
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import TemplateButton from "../TemplateButton";
-import styles from "./index.module.scss";
-
-var TemplateGroup = function TemplateGroup(props) {
-  var name = props.name,
-      _props$data = props.data,
-      data = _props$data === void 0 ? [] : _props$data,
-      size = props.size,
-      _props$itemProps = props.itemProps,
-      itemProps = _props$itemProps === void 0 ? {} : _props$itemProps;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, name && /*#__PURE__*/React.createElement("div", {
-    className: styles.name
-  }, name), /*#__PURE__*/React.createElement(_Box, {
-    direction: "row",
-    spacing: 32
-  }, data.map(function (item) {
-    return /*#__PURE__*/React.createElement(TemplateButton, _extends({
-      key: item.id
-    }, item, {
-      size: size
-    }, itemProps), item.name);
-  })));
-};
-
-export default TemplateGroup;

package/es/components/TemplateSelect/index.js

@@ -1,32 +0,0 @@
-import _Tag from "@alifd/next/lib/tag";
-import React from 'react';
-import TemplateButton from "../TemplateButton";
-import styles from "./index.module.scss";
-import TemplateGroup from "../TemplateGroup";
-var TagGroup = _Tag.Group,
-    SelectableTag = _Tag.Selectable;
-
-var TemplateSelect = function TemplateSelect(props) {
-  return /*#__PURE__*/React.createElement(TemplateGroup, props); // const { data = [], size } = props;
-  // return (
-  //   <TagGroup>
-  //     {data.map((item) => (
-  //       <SelectableTag
-  //         key={item.name}
-  //         checked={item.selected}
-  //         onChange={() => {}}
-  //       >
-  //         <TemplateButton
-  //           key={item.id}
-  //           {...item}
-  //           size={size}
-  //         >
-  //           {item.name}
-  //         </TemplateButton>
-  //       </SelectableTag>
-  //     ))}
-  //   </TagGroup>
-  // )
-};
-
-export default TemplateSelect;

package/lib/components/TemplateGroup/index.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _TemplateButton = _interopRequireDefault(require("../TemplateButton"));
-
-var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-
-var TemplateGroup = function TemplateGroup(props) {
-  var name = props.name,
-      _props$data = props.data,
-      data = _props$data === void 0 ? [] : _props$data,
-      size = props.size,
-      _props$itemProps = props.itemProps,
-      itemProps = _props$itemProps === void 0 ? {} : _props$itemProps;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, name && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].name
-  }, name), /*#__PURE__*/_react["default"].createElement(_box["default"], {
-    direction: "row",
-    spacing: 32
-  }, data.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(_TemplateButton["default"], (0, _extends2["default"])({
-      key: item.id
-    }, item, {
-      size: size
-    }, itemProps), item.name);
-  })));
-};
-
-var _default = TemplateGroup;
-exports["default"] = _default;

package/lib/components/TemplateGroup/index.module.scss

@@ -1,3 +0,0 @@
-.name {
-  margin: 20px 0 0 10px;
-}

package/lib/components/TemplateSelect/index.js

@@ -1,45 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _tag = _interopRequireDefault(require("@alifd/next/lib/tag"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _TemplateButton = _interopRequireDefault(require("../TemplateButton"));
-
-var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-
-var _TemplateGroup = _interopRequireDefault(require("../TemplateGroup"));
-
-var TagGroup = _tag["default"].Group,
-    SelectableTag = _tag["default"].Selectable;
-
-var TemplateSelect = function TemplateSelect(props) {
-  return /*#__PURE__*/_react["default"].createElement(_TemplateGroup["default"], props); // const { data = [], size } = props;
-  // return (
-  //   <TagGroup>
-  //     {data.map((item) => (
-  //       <SelectableTag
-  //         key={item.name}
-  //         checked={item.selected}
-  //         onChange={() => {}}
-  //       >
-  //         <TemplateButton
-  //           key={item.id}
-  //           {...item}
-  //           size={size}
-  //         >
-  //           {item.name}
-  //         </TemplateButton>
-  //       </SelectableTag>
-  //     ))}
-  //   </TagGroup>
-  // )
-};
-
-var _default = TemplateSelect;
-exports["default"] = _default;

package/lib/components/TemplateSelect/index.module.scss

@@ -1,3 +0,0 @@
-.name {
-  margin: 20px 0 0 10px;
-}