@hipay/hipay-material-ui 3.9.0 → 3.9.1

package/HiCell/CellHiddenContent.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.useStyles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icons = require("@material-ui/icons");
+
+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; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      display: 'flex',
+      justifyContent: 'flex-start',
+      width: '100%',
+      height: '100%'
+    },
+    label: {
+      marginLeft: 5
+    },
+    wrapper: {
+      display: 'inline-flex',
+      marginTop: 'auto',
+      marginBottom: 'auto'
+    },
+    icon: {
+      fontSize: 16,
+      color: theme.palette.primary.main,
+      '&$iconDisable': {
+        color: theme.palette.neutral.main
+      }
+    },
+    iconDisable: {}
+  };
+});
+exports.useStyles = useStyles;
+
+var CellHiddenContent = function CellHiddenContent(props) {
+  var _props$value = props.value,
+      value = _props$value === void 0 ? null : _props$value;
+  var classes = useStyles(props);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      display = _useState2[0],
+      setDisplay = _useState2[1];
+
+  var content = (0, _react.useMemo)(function () {
+    if (true === display) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.wrapper
+      }, /*#__PURE__*/_react.default.createElement(_icons.VisibilityOffRounded, {
+        className: classes.icon
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: classes.label
+      }, value));
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.wrapper
+    }, /*#__PURE__*/_react.default.createElement(_icons.VisibilityRounded, {
+      className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconDisable, null == value))
+    }));
+  }, [value, display]);
+
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (null != value) {
+      setDisplay(!display);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root,
+    title: value,
+    onClick: handleClick
+  }, content);
+};
+
+var _default = CellHiddenContent;
+exports.default = _default;

package/HiTable/HiCellBuilder.js

@@ -45,6 +45,8 @@ var _CellPinToAction = _interopRequireDefault(require("../HiCell/CellPinToAction
 
 var cst = _interopRequireWildcard(require("./constants"));
 
+var _CellHiddenContent = _interopRequireDefault(require("../HiCell/CellHiddenContent"));
+
 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; }
@@ -221,6 +223,11 @@ var HiCellBuilder = /*#__PURE__*/function (_React$PureComponent) {
                     onClick: datacell.onClick
                   });
 
+                case cst.TYPE_HIDDEN_CONTENT:
+                  return /*#__PURE__*/_react.default.createElement(_CellHiddenContent.default, {
+                    value: datacell.value
+                  });
+
                 case cst.TYPE_ACCOUNT_NUMBER:
                 case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
                 default:

package/HiTable/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_MONTH = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_HIDDEN_CONTENT = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_MONTH = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -72,11 +72,13 @@ exports.TYPE_TEXT = TYPE_TEXT;
 var TYPE_THIRD_PARTY_SECURITY = 'third_party_security';
 exports.TYPE_THIRD_PARTY_SECURITY = TYPE_THIRD_PARTY_SECURITY;
 var TYPE_PIN_TO_ACTION = 'pin_to_action';
+exports.TYPE_PIN_TO_ACTION = TYPE_PIN_TO_ACTION;
+var TYPE_HIDDEN_CONTENT = 'hidden_content';
 /**
  * Cell size [L] / [M] / [S]
  */
 
-exports.TYPE_PIN_TO_ACTION = TYPE_PIN_TO_ACTION;
+exports.TYPE_HIDDEN_CONTENT = TYPE_HIDDEN_CONTENT;
 var VIEWS = {
   LARGE: 'l',
   MEDIUM: 'm',

package/es/HiCell/CellHiddenContent.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.useStyles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icons = require("@material-ui/icons");
+
+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; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      display: 'flex',
+      justifyContent: 'flex-start',
+      width: '100%',
+      height: '100%'
+    },
+    label: {
+      marginLeft: 5
+    },
+    wrapper: {
+      display: 'inline-flex',
+      marginTop: 'auto',
+      marginBottom: 'auto'
+    },
+    icon: {
+      fontSize: 16,
+      color: theme.palette.primary.main,
+      '&$iconDisable': {
+        color: theme.palette.neutral.main
+      }
+    },
+    iconDisable: {}
+  };
+});
+exports.useStyles = useStyles;
+
+var CellHiddenContent = function CellHiddenContent(props) {
+  var _props$value = props.value,
+      value = _props$value === void 0 ? null : _props$value;
+  var classes = useStyles(props);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      display = _useState2[0],
+      setDisplay = _useState2[1];
+
+  var content = (0, _react.useMemo)(function () {
+    if (true === display) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.wrapper
+      }, /*#__PURE__*/_react.default.createElement(_icons.VisibilityOffRounded, {
+        className: classes.icon
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: classes.label
+      }, value));
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.wrapper
+    }, /*#__PURE__*/_react.default.createElement(_icons.VisibilityRounded, {
+      className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconDisable, null == value))
+    }));
+  }, [value, display]);
+
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (null != value) {
+      setDisplay(!display);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root,
+    title: value,
+    onClick: handleClick
+  }, content);
+};
+
+var _default = CellHiddenContent;
+exports.default = _default;

package/es/HiTable/HiCellBuilder.js

@@ -45,6 +45,8 @@ var _CellPinToAction = _interopRequireDefault(require("../HiCell/CellPinToAction
 
 var cst = _interopRequireWildcard(require("./constants"));
 
+var _CellHiddenContent = _interopRequireDefault(require("../HiCell/CellHiddenContent"));
+
 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; }
@@ -221,6 +223,11 @@ var HiCellBuilder = /*#__PURE__*/function (_React$PureComponent) {
                     onClick: datacell.onClick
                   });
 
+                case cst.TYPE_HIDDEN_CONTENT:
+                  return /*#__PURE__*/_react.default.createElement(_CellHiddenContent.default, {
+                    value: datacell.value
+                  });
+
                 case cst.TYPE_ACCOUNT_NUMBER:
                 case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
                 default:

package/es/HiTable/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_MONTH = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_HIDDEN_CONTENT = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_MONTH = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -72,11 +72,13 @@ exports.TYPE_TEXT = TYPE_TEXT;
 var TYPE_THIRD_PARTY_SECURITY = 'third_party_security';
 exports.TYPE_THIRD_PARTY_SECURITY = TYPE_THIRD_PARTY_SECURITY;
 var TYPE_PIN_TO_ACTION = 'pin_to_action';
+exports.TYPE_PIN_TO_ACTION = TYPE_PIN_TO_ACTION;
+var TYPE_HIDDEN_CONTENT = 'hidden_content';
 /**
  * Cell size [L] / [M] / [S]
  */
 
-exports.TYPE_PIN_TO_ACTION = TYPE_PIN_TO_ACTION;
+exports.TYPE_HIDDEN_CONTENT = TYPE_HIDDEN_CONTENT;
 var VIEWS = {
   LARGE: 'l',
   MEDIUM: 'm',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
   "private": false,
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",