@riil-frontend/component-topology 2.5.1 → 2.5.5

package/es/components/Drawer/index.js

@@ -11,8 +11,8 @@ var headerStyle = {
   zIndex: 1000
 };
 var bodyStyle = {
-  margin: '50px auto' // padding: '10px',
-
+  margin: '50px auto',
+  padding: '16px 24px'
 };
 
 var Drawer = function Drawer(props) {

package/es/components/FormTable/index.js

@@ -2,7 +2,7 @@ import _Table from "@alifd/next/lib/table";
 import _Button from "@alifd/next/lib/button";
 import _extends from "@babel/runtime/helpers/extends";
 import _Search from "@alifd/next/lib/search";
-import React from 'react';
+import React, { useState } from 'react';
 import { SchemaForm, SchemaMarkupField as Field } from '@formily/next';
 import Pagination from '@riil-frontend/component-pager';
 import MoreButtonsMenu from '@riil-frontend/component-more-buttons-menu';
@@ -11,6 +11,8 @@ import TableLayout from '@riil-frontend/component-table-layout';
 import NoDataPage from '@riil-frontend/component-topology-utils/es/components/NoDataPage';
 
 var FormTable = function FormTable(props) {
+  var _tableProps$filterPar;
+
   var className = props.className,
       children = props.children,
       formProps = props.formProps,
@@ -23,6 +25,12 @@ var FormTable = function FormTable(props) {
       showChecked = _props$showChecked === void 0 ? false : _props$showChecked,
       _props$showPageSizeSe = props.showPageSizeSelector,
       showPageSizeSelector = _props$showPageSizeSe === void 0 ? false : _props$showPageSizeSe;
+
+  var _useState = useState(false),
+      isSearching = _useState[0],
+      setIsSearching = _useState[1];
+
+  var isFilter = isSearching || ((_tableProps$filterPar = tableProps.filterParams.typeCode) === null || _tableProps$filterPar === void 0 ? void 0 : _tableProps$filterPar.selectedKeys.length);
   return /*#__PURE__*/React.createElement("div", {
     className: "riil-table-common " + className,
     style: {
@@ -43,8 +51,12 @@ var FormTable = function FormTable(props) {
     "x-component-props": {
       shape: 'simple',
       placeholder: '请输入关键字',
-      onSearch: function onSearch() {
-        return formProps.actions.submit();
+      onSearch: function onSearch(val) {
+        setIsSearching(!!val);
+        formProps.actions.submit();
+      },
+      style: {
+        width: 200
       }
     }
   }))), menu && /*#__PURE__*/React.createElement("div", {
@@ -75,7 +87,7 @@ var FormTable = function FormTable(props) {
     table: /*#__PURE__*/React.createElement(_Table, _extends({}, tableProps, {
       fixedHeader: true,
       hasBorder: false,
-      emptyContent: "\u6682\u65E0\u6570\u636E"
+      emptyContent: !isFilter ? '暂无数据' : '暂无搜索结果'
     }), columns.map(function (column) {
       return /*#__PURE__*/React.createElement(_Table.Column, _extends({}, column, {
         key: column.dataIndex

package/es/components/MultiResourceDrawer/ResourceSelect.d.ts

@@ -0,0 +1,2 @@
+declare var _default: any;
+export default _default;

package/es/components/MultiResourceDrawer/ResourceSelect.js

@@ -0,0 +1,37 @@
+import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
+import Static from "./Static";
+
+function ResourceSelect(props, ref) {
+  var store = props.store,
+      initialData = props.initialData,
+      totalSelection = props.totalSelection;
+  var dynamicRes = initialData.dynamic,
+      staticRes = initialData["static"];
+  var staticRef = useRef();
+  useImperativeHandle(ref, function () {
+    return {
+      getData: function getData() {
+        var staticResData = staticRef.current.getSelectedData();
+        return {
+          dynamic: {
+            selected: false,
+            condition: null,
+            data: null
+          },
+          "static": {
+            selected: true,
+            data: staticResData
+          }
+        };
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Static, {
+    ref: staticRef,
+    store: store,
+    selectedKeys: staticRes.data,
+    totalSelection: totalSelection
+  }));
+}
+
+export default /*#__PURE__*/React.forwardRef(ResourceSelect);

package/es/components/MultiResourceDrawer/Static.js

@@ -5,28 +5,19 @@ import styles from "./index.module.scss";
 
 var Static = function Static(props, ref) {
   var store = props.store,
-      checked = props.checked,
       selectedKeys = props.selectedKeys,
-      totalSelection = props.totalSelection,
-      onChange = props.onChange;
+      totalSelection = props.totalSelection;
   var initialData = {
     selected: selectedKeys,
     total: totalSelection
   };
-  return /*#__PURE__*/React.createElement(ResourceCard, {
-    title: "\u56FA\u5B9A\u8D44\u6E90",
-    checked: checked,
-    onCheckChange: onChange,
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/React.createElement(ResourceList, {
+  return /*#__PURE__*/React.createElement(ResourceList, {
     ref: ref,
     store: store,
     className: styles.table,
     initialData: initialData,
     selectionMode: "multiple"
-  }));
+  });
 };
 
 export default /*#__PURE__*/React.forwardRef(Static);

package/es/components/MultiResourceDrawer/index.js

@@ -1,7 +1,8 @@
 import React, { useRef } from 'react';
 import rlog from '@riil-frontend/component-topology-utils/es/utils/rlog';
 import Drawer from "../Drawer";
-import Content from "./Content"; // import styles from './index.module.scss';
+import Content from "./Content";
+import ResourceSelect from "./ResourceSelect"; // import styles from './index.module.scss';
 
 var MultiResourceDrawer = function MultiResourceDrawer(props) {
   var store = props.store,
@@ -43,7 +44,7 @@ var MultiResourceDrawer = function MultiResourceDrawer(props) {
       width: '80%'
     },
     buttons: ['确定', '取消']
-  }, initialData && /*#__PURE__*/React.createElement(Content, {
+  }, initialData && /*#__PURE__*/React.createElement(ResourceSelect, {
     ref: contentRef,
     store: store,
     initialData: initialData,

package/es/components/ResourceSelect/ResourceSelectDrawer.module.scss

@@ -6,6 +6,8 @@
   :global {
     .next-drawer-body {
       flex: 1;
+      padding-top: 16px;
+      padding-bottom: 4px !important;
     }
   }
 }

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 = ["children", "icon", "id", "selected", "onSelect", "size"];
+var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "size"];
 import React from 'react';
 import classnames from 'classnames';
 import Icon from "./Icon";
@@ -9,7 +9,8 @@ import styles from "./index.module.scss";
 var TemplateButton = function TemplateButton(props) {
   var _classnames;
 
-  var children = props.children,
+  var className = props.className,
+      children = props.children,
       icon = props.icon,
       id = props.id,
       selected = props.selected,
@@ -23,7 +24,7 @@ var TemplateButton = function TemplateButton(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.card, (_classnames = {}, _classnames[styles.selected] = selected, _classnames[styles.sizeSmall] = size === 'small', _classnames)),
+    className: classnames(styles.card, className, (_classnames = {}, _classnames[styles.selected] = selected, _classnames[styles.sizeSmall] = size === 'small', _classnames[styles.sizeLarge] = size === 'large', _classnames)),
     onClick: handleClick
   }, /*#__PURE__*/React.createElement(Icon, _extends({
     className: styles.icon,

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

@@ -6,18 +6,23 @@
   justify-content: center;
   align-items: center;
   border: 1px solid #c4c6cf;
-  width: 100px;
-  height: 100px;
-  margin: 10px;
+  width: 120px;
+  height: 136px;
   background-color: #fff;
   text-align: center;
   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;

package/es/components/TemplateGroup/index.js

@@ -1,3 +1,4 @@
+import _Box from "@alifd/next/lib/box";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import TemplateButton from "../TemplateButton";
@@ -7,17 +8,20 @@ var TemplateGroup = function TemplateGroup(props) {
   var name = props.name,
       _props$data = props.data,
       data = _props$data === void 0 ? [] : _props$data,
-      size = props.size;
+      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("div", {
-    className: styles.buttons
+  }, 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
-    }), item.name);
+    }, itemProps), item.name);
   })));
 };
 

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

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

package/es/components/TemplateSelect/index.d.ts

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

package/es/components/TemplateSelect/index.js

@@ -0,0 +1,32 @@
+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/es/components/TemplateSelect/index.module.scss

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

package/es/core/components/titlebar/TitleBar.module.scss

@@ -1,16 +1,20 @@
 .titlebar {
   display: flex;
-  padding: 16px;
 
   .left {
+    display: flex;
     flex: 1;
-
+    align-items: center;
   }
 
   .right {
 
   }
 
+  &.titlebarViewMode {
+    padding: 16px 16px 16px 0;
+  }
+
   &.titlebarEditMode {
     padding: 10px 16px;
   }

package/es/core/editor/components/settings/Settings.module.scss

@@ -20,11 +20,13 @@
       width: 7px;
       height: 7px;
     }
+
     ::-webkit-scrollbar-thumb {
       background-color: rgba(0, 0, 0, 0.2);
       border-radius: 7px;
       transition: all 0.25s ease-in-out;
     }
+
     ::-webkit-scrollbar-thumb:hover {
       background-color: rgba(0, 0, 0, 0.3);
     }
@@ -33,14 +35,23 @@
     .next-collapse-panel:not(:first-child) {
       border-top: none;
     }
+
     .next-collapse-panel-title {
       background: none;
       font-size: 12px;
       padding-bottom: 0;
       padding-left: 32px;
+
+      & > .next-collapse-panel-icon {
+        left: 12px;
+        margin-top: 0;
+        margin-left: 0;
+      }
     }
+
     .next-collapse-panel-content {
       padding-left: 32px;
+      padding-top: 8px;
     }
   }
 

package/es/core/editor/components/settings/common/tab/TabView.d.ts

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

package/es/core/editor/components/settings/common/tab/TabView.js

@@ -0,0 +1,8 @@
+import _Tab from "@alifd/next/lib/tab";
+import React, { useState, useEffect } from 'react';
+import styles from "./TabView.module.scss";
+export default function TabView(props) {
+  return /*#__PURE__*/React.createElement(_Tab, {
+    className: styles.tabs
+  }, props.children);
+}

package/es/core/editor/components/settings/common/tab/TabView.module.scss

@@ -0,0 +1,13 @@
+.tabs {
+  margin-top: 8px;
+
+  :global {
+    .next-tabs-bar {
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+    .next-tabs-content {
+      padding-top: 8px;
+    }
+  }
+}

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

@@ -11,6 +11,8 @@ import textStyles from "../../../../common/text.module.scss";
 import TopoTreeSelect from "./TopoTreeSelect";
 import NodeIconSelect from "./NodeIconSelect";
 import NodeRelateResourceButton from "./NodeRelateResourceButton";
+import styles from "./NodePropertyView.module.scss";
+import TabView from "../common/tab/TabView";
 var Option = _Select.Option;
 var CollapsePanel = _Collapse.Panel;
 
@@ -151,7 +153,9 @@ export default function NodePropertyView(props) {
 
 
   var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
-  return /*#__PURE__*/React.createElement("div", null, showRelateResource ? /*#__PURE__*/React.createElement(_Tab, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.NodePropertyView
+  }, showRelateResource ? /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
     title: "\u6570\u636E",
     key: "1"
   }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {

package/es/core/editor/components/settings/node/NodePropertyView.module.scss

@@ -0,0 +1,3 @@
+.NodePropertyView {
+
+}

package/es/core/editor/components/settings/text/TextPropertyView.js

@@ -52,7 +52,11 @@ export default function TextPropertyView(props) {
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Form, {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: 4
+    }
+  }, /*#__PURE__*/React.createElement(_Form, {
     field: field,
     labelAlign: "top"
   }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {

package/es/core/editor/components/settings/view/ViewPropertyView.js

@@ -77,7 +77,11 @@ export default function ViewPropertyView(props) {
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Form, {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: 4
+    }
+  }, /*#__PURE__*/React.createElement(_Form, {
     field: field,
     labelAlign: "top"
   }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
@@ -101,5 +105,5 @@ export default function ViewPropertyView(props) {
     title: "\u56FE\u7247"
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u56FE\u7247\u5C3A\u5BF8"
-  }, /*#__PURE__*/React.createElement(BatchSetNodeSize, null)))))));
+  }))))));
 }

package/es/core/viewer/components/titlebar/TopoViewerTitleBar.js

@@ -1,19 +1,18 @@
-import _MenuButton from "@alifd/next/lib/menu-button";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import classnames from 'classnames';
 import ViewerTools from "./ViewerTools";
-import TitleWidget from "../../../components/titlebar/widgets/TitleWidget";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
-var Item = _MenuButton.Item;
+import SearchWidget from "./widgets/SearchWidget";
 export default function TopoViewerTitleBar(props) {
   var topo = props.topo,
       showEditButton = props.showEditButton,
       onEnterEdit = props.onEnterEdit,
       children = props.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.titlebar
+    className: classnames(styles.titlebar, styles.titlebarViewMode)
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.left
-  }, children || /*#__PURE__*/React.createElement(TitleWidget, {
+  }, children || /*#__PURE__*/React.createElement(SearchWidget, {
     topo: topo
   })), /*#__PURE__*/React.createElement("div", {
     className: styles.right

package/es/core/viewer/components/titlebar/ViewerTools.js

@@ -4,16 +4,13 @@ import _Button from "@alifd/next/lib/button";
 import _Icon from "@alifd/next/lib/icon";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import SearchWidget from "./widgets/SearchWidget";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
 import EditButton from "./widgets/EditButton";
 export default function ViewerTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,
       showEditButton = _props$showEditButton === void 0 ? true : _props$showEditButton;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SearchWidget, {
-    topo: topo
-  }), showEditButton && /*#__PURE__*/React.createElement(EditButton, _extends({
+  return /*#__PURE__*/React.createElement("div", null, showEditButton && /*#__PURE__*/React.createElement(EditButton, _extends({
     topo: topo
   }, props)), /*#__PURE__*/React.createElement(_Dropdown, {
     trigger: /*#__PURE__*/React.createElement(_Button, {

package/es/style.js

@@ -18,7 +18,6 @@ import '@alifd/next/lib/select/style';
 import '@alifd/next/lib/balloon/style';
 import '@alifd/next/lib/grid/style';
 import '@alifd/next/lib/box/style';
-import '@alifd/next/lib/menu-button/style';
 import '@alifd/next/lib/dropdown/style';
 import '@alifd/next/lib/menu/style';
 import '@alifd/next/lib/tab/style';

package/lib/components/Drawer/index.js

@@ -23,8 +23,8 @@ var headerStyle = {
   zIndex: 1000
 };
 var bodyStyle = {
-  margin: '50px auto' // padding: '10px',
-
+  margin: '50px auto',
+  padding: '16px 24px'
 };
 
 var Drawer = function Drawer(props) {

package/lib/components/FormTable/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -13,7 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _search = _interopRequireDefault(require("@alifd/next/lib/search"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _next = require("@formily/next");
 
@@ -28,6 +30,8 @@ var _componentTableLayout = _interopRequireDefault(require("@riil-frontend/compo
 var _NoDataPage = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/components/NoDataPage"));
 
 var FormTable = function FormTable(props) {
+  var _tableProps$filterPar;
+
   var className = props.className,
       children = props.children,
       formProps = props.formProps,
@@ -40,6 +44,12 @@ var FormTable = function FormTable(props) {
       showChecked = _props$showChecked === void 0 ? false : _props$showChecked,
       _props$showPageSizeSe = props.showPageSizeSelector,
       showPageSizeSelector = _props$showPageSizeSe === void 0 ? false : _props$showPageSizeSe;
+
+  var _useState = (0, _react.useState)(false),
+      isSearching = _useState[0],
+      setIsSearching = _useState[1];
+
+  var isFilter = isSearching || ((_tableProps$filterPar = tableProps.filterParams.typeCode) === null || _tableProps$filterPar === void 0 ? void 0 : _tableProps$filterPar.selectedKeys.length);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "riil-table-common " + className,
     style: {
@@ -60,8 +70,12 @@ var FormTable = function FormTable(props) {
     "x-component-props": {
       shape: 'simple',
       placeholder: '请输入关键字',
-      onSearch: function onSearch() {
-        return formProps.actions.submit();
+      onSearch: function onSearch(val) {
+        setIsSearching(!!val);
+        formProps.actions.submit();
+      },
+      style: {
+        width: 200
       }
     }
   }))), menu && /*#__PURE__*/_react["default"].createElement("div", {
@@ -92,7 +106,7 @@ var FormTable = function FormTable(props) {
     table: /*#__PURE__*/_react["default"].createElement(_table["default"], (0, _extends2["default"])({}, tableProps, {
       fixedHeader: true,
       hasBorder: false,
-      emptyContent: "\u6682\u65E0\u6570\u636E"
+      emptyContent: !isFilter ? '暂无数据' : '暂无搜索结果'
     }), columns.map(function (column) {
       return /*#__PURE__*/_react["default"].createElement(_table["default"].Column, (0, _extends2["default"])({}, column, {
         key: column.dataIndex

package/lib/components/MultiResourceDrawer/ResourceSelect.d.ts

@@ -0,0 +1,2 @@
+declare var _default: any;
+export default _default;

package/lib/components/MultiResourceDrawer/ResourceSelect.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Static = _interopRequireDefault(require("./Static"));
+
+function ResourceSelect(props, ref) {
+  var store = props.store,
+      initialData = props.initialData,
+      totalSelection = props.totalSelection;
+  var dynamicRes = initialData.dynamic,
+      staticRes = initialData["static"];
+  var staticRef = (0, _react.useRef)();
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getData: function getData() {
+        var staticResData = staticRef.current.getSelectedData();
+        return {
+          dynamic: {
+            selected: false,
+            condition: null,
+            data: null
+          },
+          "static": {
+            selected: true,
+            data: staticResData
+          }
+        };
+      }
+    };
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Static["default"], {
+    ref: staticRef,
+    store: store,
+    selectedKeys: staticRes.data,
+    totalSelection: totalSelection
+  }));
+}
+
+var _default = /*#__PURE__*/_react["default"].forwardRef(ResourceSelect);
+
+exports["default"] = _default;