@gridsuite/commons-ui 0.14.4 → 0.15.0

package/lib/components/ElementSearchDialog/element-search-dialog.js

@@ -37,22 +37,12 @@ var styles = function styles(theme) {
       alignItems: 'end',
       padding: '20px',
       paddingRight: '0px'
-    },
-    popper: {
-      maxWidth: 'fit-content'
     }
   };
 };
 
 var useStyles = (0, _styles.makeStyles)(styles);
 
-var PopperWithFitToContent = function PopperWithFitToContent(props) {
-  return /*#__PURE__*/_react["default"].createElement(_core.Popper, _extends({}, props, {
-    style: styles.popper,
-    placement: "bottom-start"
-  }));
-};
-
 var ElementSearchDialog = function ElementSearchDialog(props) {
   var classes = useStyles();
   var intl = (0, _reactIntl.useIntl)();
@@ -102,7 +92,6 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
   }), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_lab.Autocomplete, {
     id: "element-search",
     forcePopupIcon: false,
-    PopperComponent: PopperWithFitToContent,
     open: expanded,
     onOpen: function onOpen() {
       setElements([]);

package/lib/components/OverflowableText/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _overflowableText = _interopRequireDefault(require("./overflowable-text"));
+
+exports["default"] = _overflowableText["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+module.exports = exports.default;

package/lib/components/OverflowableText/overflowable-text.js

@@ -0,0 +1,86 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.OverflowableText = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _excluded = ["text", "className", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var overflowStyle = function overflowStyle(theme) {
+  return {
+    overflow: {
+      display: 'inline-block',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden'
+    },
+    tooltip: {
+      whiteSpace: 'nowrap',
+      width: 'fit-content',
+      maxWidth: 'fit-content'
+    }
+  };
+};
+
+var useStyles = (0, _styles.makeStyles)(overflowStyle);
+
+var OverflowableText = function OverflowableText(_ref) {
+  var text = _ref.text,
+      className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var element = (0, _react.useRef)();
+  var classes = useStyles();
+
+  var _useState = (0, _react.useState)(false),
+      overflowed = _useState[0],
+      setOverflowed = _useState[1];
+
+  var checkOverflow = (0, _react.useCallback)(function () {
+    if (!element.current) return;
+    setOverflowed(element.current.scrollWidth > element.current.clientWidth);
+  }, [setOverflowed, element]);
+  (0, _react.useEffect)(function () {
+    checkOverflow();
+  }, [checkOverflow]);
+  return /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
+    title: text || '',
+    disableHoverListener: !overflowed,
+    classes: {
+      tooltip: classes.tooltip
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", _extends({}, props, {
+    ref: element,
+    children: children || text,
+    className: (0, _clsx["default"])(className, classes.overflow)
+  })));
+};
+
+exports.OverflowableText = OverflowableText;
+OverflowableText.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _propTypes["default"].array,
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  className: _propTypes["default"].string
+} : {};
+var _default = OverflowableText;
+exports["default"] = _default;

package/lib/components/translations/equipment-search-en.js

@@ -17,7 +17,8 @@ var equipment_search_en = {
   'equipment_search/hvdcLinkTag': 'HVDC LINK',
   'equipment_search/hvdcStationTag': 'HVDC STATION',
   'equipment_search/voltageLevelTag': 'VOLTAGE LEVEL',
-  'equipment_search/substationTag': 'SUBSTATION'
+  'equipment_search/substationTag': 'SUBSTATION',
+  'equipment_search/busTag': 'BUS'
 };
 var _default = equipment_search_en;
 exports["default"] = _default;

package/lib/components/translations/equipment-search-fr.js

@@ -17,7 +17,8 @@ var equipment_search_fr = {
   'equipment_search/hvdcLinkTag': 'LIAISON HVDC',
   'equipment_search/hvdcStationTag': 'STATION HVDC',
   'equipment_search/voltageLevelTag': 'POSTE',
-  'equipment_search/substationTag': 'SITE'
+  'equipment_search/substationTag': 'SITE',
+  'equipment_search/busTag': 'NOEUD'
 };
 var _default = equipment_search_fr;
 exports["default"] = _default;

package/lib/index.js

@@ -31,6 +31,10 @@ var _ReportViewerDialog2 = _interopRequireDefault(require("./components/ReportVi
 
 exports.ReportViewerDialog = _ReportViewerDialog2["default"];
 
+var _OverflowableText2 = _interopRequireDefault(require("./components/OverflowableText"));
+
+exports.OverflowableText = _OverflowableText2["default"];
+
 var _EquipmentType = require("./utils/EquipmentType");
 
 exports.EQUIPMENT_TYPE = _EquipmentType.EQUIPMENT_TYPE;

package/lib/utils/ElementType.js

@@ -10,12 +10,8 @@ var _LibraryBooksOutlined = _interopRequireDefault(require("@material-ui/icons/L
 
 var _Description = _interopRequireDefault(require("@material-ui/icons/Description"));
 
-var _PanTool = _interopRequireDefault(require("@material-ui/icons/PanTool"));
-
 var _FilterList = _interopRequireDefault(require("@material-ui/icons/FilterList"));
 
-var _Filter = _interopRequireDefault(require("@material-ui/icons/Filter"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 /**
@@ -28,9 +24,7 @@ var elementType = {
   DIRECTORY: 'DIRECTORY',
   STUDY: 'STUDY',
   FILTER: 'FILTER',
-  SCRIPT: 'SCRIPT',
-  SCRIPT_CONTINGENCY_LIST: 'SCRIPT_CONTINGENCY_LIST',
-  FILTERS_CONTINGENCY_LIST: 'FILTERS_CONTINGENCY_LIST'
+  CONTINGENCY_LIST: 'CONTINGENCY_LIST'
 };
 exports.elementType = elementType;
 
@@ -41,26 +35,16 @@ function getFileIcon(type, theme) {
         className: theme
       });
 
-    case elementType.SCRIPT_CONTINGENCY_LIST:
+    case elementType.CONTINGENCY_LIST:
       return /*#__PURE__*/_react["default"].createElement(_Description["default"], {
         className: theme
       });
 
-    case elementType.FILTERS_CONTINGENCY_LIST:
-      return /*#__PURE__*/_react["default"].createElement(_PanTool["default"], {
-        className: theme
-      });
-
     case elementType.FILTER:
       return /*#__PURE__*/_react["default"].createElement(_FilterList["default"], {
         className: theme
       });
 
-    case elementType.SCRIPT:
-      return /*#__PURE__*/_react["default"].createElement(_Filter["default"], {
-        className: theme
-      });
-
     case elementType.DIRECTORY:
       // to easily use in TreeView we do not give icons for directories
       return;

package/lib/utils/EquipmentType.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.renderEquipmentForSearchBar = exports.getEquipmentsInfosForSearchBar = exports.EQUIPMENT_TYPE = exports.equipmentStyles = exports.TYPE_TAG_MAX_SIZE = void 0;
+exports.renderEquipmentForSearchBar = exports.getEquipmentsInfosForSearchBar = exports.EQUIPMENT_TYPE = exports.equipmentStyles = exports.VL_TAG_MAX_SIZE = exports.TYPE_TAG_MAX_SIZE = void 0;
 
 var _match = _interopRequireDefault(require("autosuggest-highlight/match"));
 
@@ -13,6 +13,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _TopBar = require("../components/TopBar/TopBar");
 
+var _OverflowableText = _interopRequireDefault(require("../components/OverflowableText"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 /**
@@ -23,6 +25,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  */
 var TYPE_TAG_MAX_SIZE = '90px';
 exports.TYPE_TAG_MAX_SIZE = TYPE_TAG_MAX_SIZE;
+var VL_TAG_MAX_SIZE = '100px';
+exports.VL_TAG_MAX_SIZE = VL_TAG_MAX_SIZE;
 
 var equipmentStyles = function equipmentStyles(theme) {
   return {
@@ -48,11 +52,17 @@ var equipmentStyles = function equipmentStyles(theme) {
       background: 'lightblue'
     },
     equipmentVlTag: {
+      width: VL_TAG_MAX_SIZE,
+      minWidth: VL_TAG_MAX_SIZE,
+      maxWidth: VL_TAG_MAX_SIZE,
       background: 'lightgray',
       fontStyle: 'italic'
+    },
+    result: {
+      width: '100%'
     }
   };
-}; // Must be equivalent as the back enum (Powsybl)
+}; // Must be equivalent as the back enum
 
 
 exports.equipmentStyles = equipmentStyles;
@@ -127,19 +137,24 @@ var EQUIPMENT_TYPE = {
     sortOrder: 13,
     tagLabel: 'equipment_search/busbarSectionTag'
   },
+  CONFIGURED_BUS: {
+    name: 'CONFIGURED_BUS',
+    sortOrder: 14,
+    tagLabel: 'equipment_search/busTag'
+  },
   BREAKER: {
     name: 'BREAKER',
-    sortOrder: 14,
+    sortOrder: 15,
     tagLabel: 'equipment_search/switchTag'
   },
   DISCONNECTOR: {
     name: 'DISCONNECTOR',
-    sortOrder: 15,
+    sortOrder: 16,
     tagLabel: 'equipment_search/switchTag'
   },
   LOAD_BREAK_SWITCH: {
     name: 'LOAD_BREAK_SWITCH',
-    sortOrder: 16,
+    sortOrder: 17,
     tagLabel: 'equipment_search/switchTag'
   }
 };
@@ -152,12 +167,13 @@ var getEquipmentsInfosForSearchBar = function getEquipmentsInfosForSearchBar(equ
       label: label,
       id: e.id,
       type: e.type
-    }] : e.voltageLevelsIds.map(function (vli) {
+    }] : e.voltageLevels.map(function (vli) {
       return {
         label: label,
         id: e.id,
         type: e.type,
-        voltageLevelId: vli
+        voltageLevelLabel: equipmentLabelling ? vli.name : vli.id,
+        voltageLevelId: vli.id
       };
     });
   }).sort(sortEquipments);
@@ -172,7 +188,10 @@ var sortEquipments = function sortEquipments(a, b) {
 var renderEquipmentForSearchBar = function renderEquipmentForSearchBar(classes, intl) {
   return function (element, _ref) {
     var inputValue = _ref.inputValue;
-    var matches = (0, _match["default"])(element.label, inputValue);
+    var matches = (0, _match["default"])(element.label, inputValue, {
+      insideWords: true,
+      findAllOccurrences: true
+    });
     var parts = (0, _parse["default"])(element.label, matches);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: classes.equipmentOption
@@ -180,18 +199,22 @@ var renderEquipmentForSearchBar = function renderEquipmentForSearchBar(classes,
       className: (0, _clsx["default"])(classes.equipmentTag, classes.equipmentTypeTag)
     }, intl.formatMessage({
       id: EQUIPMENT_TYPE[element.type].tagLabel
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      className: classes.equipmentOption
-    }, /*#__PURE__*/_react["default"].createElement("span", null, parts.map(function (part, index) {
+    })), /*#__PURE__*/_react["default"].createElement(_OverflowableText["default"], {
+      text: parts.map(function (e) {
+        return e.text;
+      }).join(),
+      className: classes.result
+    }, parts.map(function (part, index) {
       return /*#__PURE__*/_react["default"].createElement("span", {
         key: index,
         style: {
           fontWeight: part.highlight ? 'bold' : 'inherit'
         }
       }, part.text);
-    })), element.type !== EQUIPMENT_TYPE.SUBSTATION.name && element.type !== EQUIPMENT_TYPE.VOLTAGE_LEVEL.name && /*#__PURE__*/_react["default"].createElement("span", {
+    })), element.type !== EQUIPMENT_TYPE.SUBSTATION.name && element.type !== EQUIPMENT_TYPE.VOLTAGE_LEVEL.name && /*#__PURE__*/_react["default"].createElement(_OverflowableText["default"], {
+      text: element.voltageLevelLabel,
       className: (0, _clsx["default"])(classes.equipmentTag, classes.equipmentVlTag)
-    }, element.voltageLevelId)));
+    }));
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.14.4",
+    "version": "0.15.0",
     "description": "common react components for gridsuite applications",
     "main": "lib/index.js",
     "files": [
@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@svgr/webpack": "^5.4.0",
-        "autosuggest-highlight": "^3.1.1",
+        "autosuggest-highlight": "^3.2.0",
         "clsx": "^1.0.4",
         "jwt-decode": "^3.0.0",
         "memoize-one": "^5.1.1",