@riil-frontend/component-topology 2.8.1 → 2.9.0

package/es/components/LayoutDirectionSelect/Item.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import TemplateButton from "../TemplateButton";
+import styles from "./Item.module.scss";
+export default function Item(props) {
+  return /*#__PURE__*/React.createElement(TemplateButton, _extends({}, props, {
+    iconClassName: styles.icon,
+    textClassName: styles.text
+  }));
+}
+;

package/es/components/LayoutDirectionSelect/Item.module.scss

@@ -0,0 +1,9 @@
+.icon {
+  width: 72px;
+}
+
+.text {
+  font-size: 12px;
+  margin-top: 15px;
+  padding-bottom: 18px;
+}

package/es/components/LayoutDirectionSelect/LayoutDirectionSelect.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import TagImageSelect from "../TagImageSelect";
+import styles from "./LayoutDirectionSelect.module.scss";
+import Item from "./Item";
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+export default function LayoutDirectionSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return _extends({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/React.createElement(TagImageSelect, {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: styles.layoutSelectItem
+    },
+    ItemComponent: Item
+  });
+}
+;

package/es/components/LayoutDirectionSelect/LayoutDirectionSelect.module.scss

@@ -0,0 +1,4 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px !important;
+}

package/es/components/LayoutDirectionSelect/index.js

@@ -0,0 +1,2 @@
+import LayoutDirectionSelect from "./LayoutDirectionSelect";
+export default LayoutDirectionSelect;

package/es/components/LayoutSelect/LayoutSelect.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import TagImageSelect from "../TagImageSelect";
+import styles from "./LayoutSelect.module.scss";
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+export default function LayoutSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return _extends({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/React.createElement(TagImageSelect, {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: styles.layoutSelectItem
+    }
+  });
+}
+;

package/es/components/LayoutSelect/LayoutSelect.module.scss

@@ -0,0 +1,4 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px;
+}

package/es/components/LayoutSelect/README.md

@@ -0,0 +1 @@
+自动布局选择

package/es/components/LayoutSelect/index.js

@@ -0,0 +1,2 @@
+import LayoutSelect from "./LayoutSelect";
+export default LayoutSelect;

package/es/components/{TemplateSelect → TagImageSelect}/index.js

@@ -1,34 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
-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";
 import TagSelect from "../TagSelect";
-var TagGroup = _Tag.Group,
-    SelectableTag = _Tag.Selectable;
 
-var TemplateSelect = function TemplateSelect(props) {
+var TagImageSelect = function TagImageSelect(props) {
   var _data$filter$;
 
-  // return (
-  //   <TemplateGroup {...props}/>
-  // )
   var _props$data = props.data,
       data = _props$data === void 0 ? [] : _props$data,
       size = props.size,
       boxProps = props.boxProps,
       tagProps = props.tagProps,
-      itemProps = props.itemProps;
+      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;
   return /*#__PURE__*/React.createElement(TagSelect, {
     defaultValue: value,
     dataSource: data.map(function (item) {
       return {
         key: item.id,
-        content: /*#__PURE__*/React.createElement(TemplateButton, _extends({
+        content: /*#__PURE__*/React.createElement(Item, _extends({
           key: item.id
         }, item, {
           size: size
@@ -38,17 +32,6 @@ var TemplateSelect = function TemplateSelect(props) {
     boxProps: boxProps,
     tagProps: tagProps
   });
-  return /*#__PURE__*/React.createElement(TagGroup, null, data.map(function (item) {
-    return /*#__PURE__*/React.createElement(SelectableTag, {
-      key: item.name,
-      checked: item.selected,
-      onChange: function onChange() {}
-    }, /*#__PURE__*/React.createElement(TemplateButton, _extends({
-      key: item.id
-    }, item, {
-      size: size
-    }), item.name));
-  }));
 };
 
-export default TemplateSelect;
+export default TagImageSelect;

package/es/components/TagSelect/index.js

@@ -9,8 +9,8 @@ var SelectableTag = _Tag.Selectable;
 var TagSelect = function TagSelect(props) {
   var _onChange = props.onChange,
       value = props.value,
-      dataSource = props.dataSource,
       defaultValue = props.defaultValue,
+      dataSource = props.dataSource,
       boxProps = props.boxProps,
       tagProps = props.tagProps;
 
@@ -26,7 +26,7 @@ var TagSelect = function TagSelect(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "tag-select-wrap"
   }, /*#__PURE__*/React.createElement(_Box, _extends({
-    spacing: 8,
+    spacing: 12,
     wrap: true,
     direction: "row"
   }, boxProps), dataSource.map(function (item) {

package/es/components/TagSelect/index.scss

@@ -19,9 +19,5 @@
 				}
 			}
 		}
-		.tag-select-label {
-			margin-top: 4px;
-			max-width: fit-content;
-		}
 	}
 }

package/es/components/TemplateButton/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "size"];
+var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "iconClassName", "textClassName"];
 import React from 'react';
 import classnames from 'classnames';
 import Icon from "./Icon";
@@ -14,7 +14,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 = _objectWithoutPropertiesLoose(props, _excluded);
 
   var handleClick = function handleClick() {
@@ -27,21 +28,10 @@ var TemplateButton = function TemplateButton(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.iconWrapper
   }, /*#__PURE__*/React.createElement(Icon, _extends({
-    className: styles.icon,
+    className: classnames(styles.icon, iconClassName),
     type: icon
   }, rest))), /*#__PURE__*/React.createElement("div", {
-    className: styles.text
-  }, children));
-  return /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.card, className),
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement(Icon, _extends({
-    className: styles.icon,
-    type: icon
-  }, rest)), /*#__PURE__*/React.createElement("div", {
-    tabIndex: "0",
-    role: "button",
-    className: styles.text
+    className: classnames(styles.text, textClassName)
   }, children));
 };
 

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

@@ -1,6 +1,6 @@
 import _Radio from "@alifd/next/lib/radio";
 import React, { useState } from 'react';
-import TemplateGroup from "../../../../../components/TemplateGroup";
+import TemplateGroup from "../../../../../components/TagImageSelect";
 import styles from "./LayoutSettings.module.scss";
 var LAYOUTS = {
   circular: '星型布局',

package/es/style.js

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

package/lib/components/LayoutDirectionSelect/Item.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = Item;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TemplateButton = _interopRequireDefault(require("../TemplateButton"));
+
+var _ItemModule = _interopRequireDefault(require("./Item.module.scss"));
+
+function Item(props) {
+  return /*#__PURE__*/_react["default"].createElement(_TemplateButton["default"], (0, _extends2["default"])({}, props, {
+    iconClassName: _ItemModule["default"].icon,
+    textClassName: _ItemModule["default"].text
+  }));
+}
+
+;

package/lib/components/LayoutDirectionSelect/Item.module.scss

@@ -0,0 +1,9 @@
+.icon {
+  width: 72px;
+}
+
+.text {
+  font-size: 12px;
+  margin-top: 15px;
+  padding-bottom: 18px;
+}

package/lib/components/LayoutDirectionSelect/LayoutDirectionSelect.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = LayoutDirectionSelect;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TagImageSelect = _interopRequireDefault(require("../TagImageSelect"));
+
+var _LayoutDirectionSelectModule = _interopRequireDefault(require("./LayoutDirectionSelect.module.scss"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+
+function LayoutDirectionSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return (0, _extends2["default"])({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/_react["default"].createElement(_TagImageSelect["default"], {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: _LayoutDirectionSelectModule["default"].layoutSelectItem
+    },
+    ItemComponent: _Item["default"]
+  });
+}
+
+;

package/lib/components/LayoutDirectionSelect/LayoutDirectionSelect.module.scss

@@ -0,0 +1,4 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px !important;
+}

package/lib/components/LayoutDirectionSelect/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _LayoutDirectionSelect = _interopRequireDefault(require("./LayoutDirectionSelect"));
+
+var _default = _LayoutDirectionSelect["default"];
+exports["default"] = _default;

package/lib/components/LayoutSelect/LayoutSelect.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = LayoutSelect;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TagImageSelect = _interopRequireDefault(require("../TagImageSelect"));
+
+var _LayoutSelectModule = _interopRequireDefault(require("./LayoutSelect.module.scss"));
+
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+
+function LayoutSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return (0, _extends2["default"])({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/_react["default"].createElement(_TagImageSelect["default"], {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: _LayoutSelectModule["default"].layoutSelectItem
+    }
+  });
+}
+
+;

package/lib/components/LayoutSelect/LayoutSelect.module.scss

@@ -0,0 +1,4 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px;
+}

package/lib/components/LayoutSelect/README.md

@@ -0,0 +1 @@
+自动布局选择

package/lib/components/LayoutSelect/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _LayoutSelect = _interopRequireDefault(require("./LayoutSelect"));
+
+var _default = _LayoutSelect["default"];
+exports["default"] = _default;

package/lib/components/{TemplateSelect → TagImageSelect}/index.js

@@ -7,42 +7,32 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-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 _TagSelect = _interopRequireDefault(require("../TagSelect"));
 
-var TagGroup = _tag["default"].Group,
-    SelectableTag = _tag["default"].Selectable;
-
-var TemplateSelect = function TemplateSelect(props) {
+var TagImageSelect = function TagImageSelect(props) {
   var _data$filter$;
 
-  // return (
-  //   <TemplateGroup {...props}/>
-  // )
   var _props$data = props.data,
       data = _props$data === void 0 ? [] : _props$data,
       size = props.size,
       boxProps = props.boxProps,
       tagProps = props.tagProps,
-      itemProps = props.itemProps;
+      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(_TemplateButton["default"], (0, _extends2["default"])({
+        content: /*#__PURE__*/_react["default"].createElement(Item, (0, _extends2["default"])({
           key: item.id
         }, item, {
           size: size
@@ -52,18 +42,7 @@ var TemplateSelect = function TemplateSelect(props) {
     boxProps: boxProps,
     tagProps: tagProps
   });
-  return /*#__PURE__*/_react["default"].createElement(TagGroup, null, data.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(SelectableTag, {
-      key: item.name,
-      checked: item.selected,
-      onChange: function onChange() {}
-    }, /*#__PURE__*/_react["default"].createElement(_TemplateButton["default"], (0, _extends2["default"])({
-      key: item.id
-    }, item, {
-      size: size
-    }), item.name));
-  }));
 };
 
-var _default = TemplateSelect;
+var _default = TagImageSelect;
 exports["default"] = _default;

package/lib/components/TagSelect/index.js

@@ -24,8 +24,8 @@ var SelectableTag = _tag["default"].Selectable;
 var TagSelect = function TagSelect(props) {
   var _onChange = props.onChange,
       value = props.value,
-      dataSource = props.dataSource,
       defaultValue = props.defaultValue,
+      dataSource = props.dataSource,
       boxProps = props.boxProps,
       tagProps = props.tagProps;
 
@@ -41,7 +41,7 @@ var TagSelect = function TagSelect(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "tag-select-wrap"
   }, /*#__PURE__*/_react["default"].createElement(_box["default"], (0, _extends2["default"])({
-    spacing: 8,
+    spacing: 12,
     wrap: true,
     direction: "row"
   }, boxProps), dataSource.map(function (item) {

package/lib/components/TagSelect/index.scss

@@ -19,9 +19,5 @@
 				}
 			}
 		}
-		.tag-select-label {
-			margin-top: 4px;
-			max-width: fit-content;
-		}
 	}
 }

package/lib/components/TemplateButton/index.js

@@ -17,7 +17,7 @@ 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 className = props.className,
@@ -27,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() {
@@ -40,21 +41,10 @@ var TemplateButton = function TemplateButton(props) {
   }, /*#__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", {
-    className: _indexModule["default"].text
-  }, children));
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(_indexModule["default"].card, className),
-    onClick: handleClick
-  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({
-    className: _indexModule["default"].icon,
-    type: icon
-  }, rest)), /*#__PURE__*/_react["default"].createElement("div", {
-    tabIndex: "0",
-    role: "button",
-    className: _indexModule["default"].text
+    className: (0, _classnames["default"])(_indexModule["default"].text, textClassName)
   }, children));
 };
 

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", {