@sis-cc/dotstatsuite-visions 12.28.0 → 12.30.0

package/es/CollapsibleTree/CollapsibleTree.js

@@ -14,9 +14,11 @@ import IconButton from '@mui/material/IconButton';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import CircularProgress from '@mui/material/CircularProgress';
+import InfoIcon from '@mui/icons-material/Info';
 import Grid from '@mui/material/Grid';
 import Collapse, { VARIANT_BOLD } from './Collapse';
 import cx from 'classnames';
+import NoData from '../NoData/NoData';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -126,6 +128,10 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
         )
       )
     ),
+    R.isEmpty(data) && React.createElement(NoData, {
+      message: R.prop('noData', labels) || 'no data',
+      icon: React.createElement(InfoIcon, { color: 'primary', fontSize: 'large' })
+    }),
     R.map(function (_ref3) {
       var id = _ref3.id,
           label = _ref3.label,
@@ -210,7 +216,8 @@ CollapsibleTree.propTypes = process.env.NODE_ENV !== "production" ? {
   labels: PropTypes.shape({
     collapseAll: PropTypes.string,
     expandAll: PropTypes.string,
-    noValue: PropTypes.string
+    noValue: PropTypes.string,
+    noData: PropTypes.string
   }),
   testId: PropTypes.string,
   valueHandler: PropTypes.func,

package/es/VirtualizedTree/withSpotlight.js

@@ -6,6 +6,7 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 import * as R from 'ramda';
 import React, { useEffect, useMemo, useState } from 'react';
 import { getDescendants, getHierarchicalId } from './utils';
+import { prepareTerm, searchTerm } from '../utils';
 
 export var spotlightFilter = function spotlightFilter(term) {
   var labelRenderer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : R.prop('label');
@@ -29,23 +30,22 @@ export var spotlightFilter = function spotlightFilter(term) {
       }
       return acc;
     };
-    var matchRegExp = function matchRegExp(str) {
-      return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    };
 
     // Highlight matching terms in the label
     var highlightLabel = function highlightLabel(label) {
-      var regex = new RegExp('(' + matchRegExp(term) + ')', 'gi');
-      return label.replace(regex, function (match) {
-        return '<span style=background-color:yellow;border-bottom:2px solid #8CC841>' + match + '</span>';
-      });
+      var i = prepareTerm(label).indexOf(prepareTerm(term));
+      var l = R.length(term);
+
+      var pre = label.slice(0, i);
+      var match = label.slice(i, i + l);
+      var post = label.slice(i + l);
+
+      return pre + '<span style=background-color:yellow;border-bottom:2px solid #8CC841>' + match + '</span>' + post;
     };
 
     var recurse = function recurse(item) {
       var label = labelRenderer(item);
-      var isValidItem = function isValidItem(item) {
-        return R.includes(R.toLower(term), R.toLower(item));
-      };
+      var isValidItem = searchTerm(term);
 
       var result = [];
 

package/es/utils.js

@@ -3,6 +3,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 import React from 'react';
 import * as R from 'ramda';
 import dateFns from 'date-fns';
+import * as diacritics from 'diacritics';
 
 var spotlightHandler = function spotlightHandler(_ref) {
   var term = _ref.term,
@@ -67,4 +68,11 @@ export var getIsRtl = function getIsRtl(theme) {
 export var newDate = function newDate(stringDate) {
   var date = new Date(stringDate);
   return dateFns.addMinutes(date, date.getTimezoneOffset());
+};
+
+export var prepareTerm = R.pipe(diacritics.remove, R.toLower);
+export var searchTerm = function searchTerm(term) {
+  return function (label) {
+    return R.includes(prepareTerm(term), prepareTerm(label));
+  };
 };

package/lib/CollapsibleTree/CollapsibleTree.js

@@ -52,6 +52,10 @@ var _CircularProgress = require('@mui/material/CircularProgress');
 
 var _CircularProgress2 = _interopRequireDefault(_CircularProgress);
 
+var _Info = require('@mui/icons-material/Info');
+
+var _Info2 = _interopRequireDefault(_Info);
+
 var _Grid = require('@mui/material/Grid');
 
 var _Grid2 = _interopRequireDefault(_Grid);
@@ -64,6 +68,10 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
+var _NoData = require('../NoData/NoData');
+
+var _NoData2 = _interopRequireDefault(_NoData);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -178,6 +186,10 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
         )
       )
     ),
+    R.isEmpty(data) && _react2.default.createElement(_NoData2.default, {
+      message: R.prop('noData', labels) || 'no data',
+      icon: _react2.default.createElement(_Info2.default, { color: 'primary', fontSize: 'large' })
+    }),
     R.map(function (_ref3) {
       var id = _ref3.id,
           label = _ref3.label,
@@ -262,7 +274,8 @@ CollapsibleTree.propTypes = process.env.NODE_ENV !== "production" ? {
   labels: _propTypes2.default.shape({
     collapseAll: _propTypes2.default.string,
     expandAll: _propTypes2.default.string,
-    noValue: _propTypes2.default.string
+    noValue: _propTypes2.default.string,
+    noData: _propTypes2.default.string
   }),
   testId: _propTypes2.default.string,
   valueHandler: _propTypes2.default.func,

package/lib/VirtualizedTree/withSpotlight.js

@@ -16,6 +16,8 @@ var _react2 = _interopRequireDefault(_react);
 
 var _utils = require('./utils');
 
+var _utils2 = require('../utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -44,23 +46,22 @@ var spotlightFilter = exports.spotlightFilter = function spotlightFilter(term) {
       }
       return acc;
     };
-    var matchRegExp = function matchRegExp(str) {
-      return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    };
 
     // Highlight matching terms in the label
     var highlightLabel = function highlightLabel(label) {
-      var regex = new RegExp('(' + matchRegExp(term) + ')', 'gi');
-      return label.replace(regex, function (match) {
-        return '<span style=background-color:yellow;border-bottom:2px solid #8CC841>' + match + '</span>';
-      });
+      var i = (0, _utils2.prepareTerm)(label).indexOf((0, _utils2.prepareTerm)(term));
+      var l = R.length(term);
+
+      var pre = label.slice(0, i);
+      var match = label.slice(i, i + l);
+      var post = label.slice(i + l);
+
+      return pre + '<span style=background-color:yellow;border-bottom:2px solid #8CC841>' + match + '</span>' + post;
     };
 
     var recurse = function recurse(item) {
       var label = labelRenderer(item);
-      var isValidItem = function isValidItem(item) {
-        return R.includes(R.toLower(term), R.toLower(item));
-      };
+      var isValidItem = (0, _utils2.searchTerm)(term);
 
       var result = [];
 

package/lib/utils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.newDate = exports.getIsRtl = exports.getDark = exports.getLight = exports.withBlank = exports.spotlightScopeListEngine = exports.reduceChildren = undefined;
+exports.searchTerm = exports.prepareTerm = exports.newDate = exports.getIsRtl = exports.getDark = exports.getLight = exports.withBlank = exports.spotlightScopeListEngine = exports.reduceChildren = undefined;
 
 var _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; };
 
@@ -17,6 +17,10 @@ var _dateFns = require('date-fns');
 
 var _dateFns2 = _interopRequireDefault(_dateFns);
 
+var _diacritics = require('diacritics');
+
+var diacritics = _interopRequireWildcard(_diacritics);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -84,4 +88,11 @@ var getIsRtl = exports.getIsRtl = function getIsRtl(theme) {
 var newDate = exports.newDate = function newDate(stringDate) {
   var date = new Date(stringDate);
   return _dateFns2.default.addMinutes(date, date.getTimezoneOffset());
+};
+
+var prepareTerm = exports.prepareTerm = R.pipe(diacritics.remove, R.toLower);
+var searchTerm = exports.searchTerm = function searchTerm(term) {
+  return function (label) {
+    return R.includes(prepareTerm(term), prepareTerm(label));
+  };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "12.28.0",
+  "version": "12.30.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -33,6 +33,7 @@
     "@hello-pangea/dnd": "^16.6.0",
     "@react-hook/size": "^2.1.1",
     "classnames": "^2.2.6",
+    "diacritics": "^1.3.0",
     "isemail": "^3.2.0",
     "prop-types": "^15.7.2",
     "ramda": "^0.27.0",