react-cm-ui
Version:
React UI for Healthy Church
309 lines (265 loc) • 14.3 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _lodash = require("lodash");
var _classnames = _interopRequireDefault(require("classnames"));
var _typography = _interopRequireDefault(require("../../dataDisplay/typography"));
var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));
var _tooltip = _interopRequireDefault(require("../../dataDisplay/tooltip"));
var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));
var _constants = require("../../global/constants");
var _breadcrumbsUtils = require("./breadcrumbsUtils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var propTypes = {
/**
* Separation string between breadcrumbs
*/
dividerString: _propTypes["default"].string,
/**
* Instance of react-router core,
* breadcrumbs will be generated automatically using the routes object structure,
* location and push function.
*/
router: _propTypes["default"].shape({}),
/**
* Manually defines the crumbs
*/
staticCrumbs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
onBreadcrumbClick: _propTypes["default"].func,
originalPath: _propTypes["default"].string,
title: _propTypes["default"].string,
to: _propTypes["default"].string
})),
/**
* You can pass an object to apply custom titles
* when using a router instance to build the breadcrumbs automatically.
*/
routesNameMapper: _propTypes["default"].arrayOf(_propTypes["default"].shape({
route: _propTypes["default"].string,
title: _propTypes["default"].string
})),
/**
* When true, it'll show only the current location breadcrumb and the previous path breadcrumb.
* When false, it'll show the whole navigation breadcrumbs structure for the current location.
*/
showOnlyPreviousRoute: _propTypes["default"].bool,
/**
* Max breadcrumb title length
*/
titlesMaxLength: _propTypes["default"].number
};
var defaultProps = {
dividerString: '/',
router: undefined,
routesNameMapper: [],
showOnlyPreviousRoute: false,
staticCrumbs: [],
titlesMaxLength: 20
};
var useStyles = (0, _makeStyles["default"])(function (theme) {
var borderRadiusMain = (0, _lodash.get)(theme, 'shape.borderRadius');
var colorGrey500 = (0, _lodash.get)(theme, 'palette.grey[500]');
var colorHighlight = (0, _lodash.get)(theme, 'palette.cyan[500]');
var fontWeightBold = (0, _lodash.get)(theme, 'typography.fontWeightBold');
var fontWeightMedium = (0, _lodash.get)(theme, 'typography.fontWeightMedium');
var textColorPrimary = (0, _lodash.get)(theme, 'palette.text.primary');
var textColorSecondary = (0, _lodash.get)(theme, 'palette.text.secondary');
var transitionDurationShortest = (0, _lodash.get)(theme, 'transitions.duration.shortest');
return {
root: {
overflow: 'hidden',
width: '100%'
},
tooltip: {
backgroundColor: colorGrey500,
borderRadius: borderRadiusMain,
fontSize: 12
},
breadcrumbsList: {
overflow: 'hidden',
padding: 0,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
margin: '0 0 -1px 0'
},
breadcrumb: {
color: textColorSecondary,
cursor: 'pointer',
display: 'inline',
padding: function padding(_ref) {
var showOnlyPreviousRoute = _ref.showOnlyPreviousRoute;
return showOnlyPreviousRoute ? '0 5px 0 0' : '0 5px 0 0';
},
transition: "color ".concat(transitionDurationShortest, "ms"),
'& .navigation_breadcrumbs--breadcrumb_title > p': {
fontWeight: fontWeightMedium,
fontSize: 12,
color: textColorSecondary
},
'& .icon-use-path': {
transition: "fill ".concat(transitionDurationShortest, "ms !important")
},
'&:hover': {
'& .icon-use-path': {
fill: colorHighlight
},
'& .navigation_breadcrumbs--breadcrumb_title > p': {
color: colorHighlight
}
}
},
breadcrumbLast: {
'& .navigation_breadcrumbs--breadcrumb_title > p': {
fontWeight: fontWeightBold,
fontSize: 16,
color: textColorPrimary
},
'&:hover': {
'& .navigation_breadcrumbs--breadcrumb_title > p': {
color: textColorPrimary
}
}
},
breadCrumbSeparator: {
display: 'inline',
padding: '0 5px 0 0',
'& .icon': {
marginRight: 5
}
},
breadCrumbSeparatorTypography: {
display: 'inline'
},
breadcrumbTitle: {
display: 'inline',
transition: "color ".concat(transitionDurationShortest, "ms")
},
breadcrumbTitleTypography: {
display: 'inline'
}
};
});
var ICON_TYPE_FIRST_BREADCRUMB = 'chevron-left';
/**
* Indicates the current location inside the application and the previous routes to navigate back.
* The breadcrumbs will be automatically generated using the passed react-router core instance
* (Each route must have a 'title' prop set).
*/
function Breadcrumbs(props) {
var dividerString = props.dividerString,
router = props.router,
routesNameMapper = props.routesNameMapper,
showOnlyPreviousRoute = props.showOnlyPreviousRoute,
staticCrumbs = props.staticCrumbs,
titlesMaxLength = props.titlesMaxLength;
var classes = useStyles(props);
var _useState = (0, _react.useState)([]),
_useState2 = _slicedToArray(_useState, 2),
existentRoutes = _useState2[0],
setExistentRoutes = _useState2[1];
var _useState3 = (0, _react.useState)([]),
_useState4 = _slicedToArray(_useState3, 2),
pathBreadcrumbs = _useState4[0],
setPathBreadcrumbs = _useState4[1];
var pathName = (0, _lodash.get)(router, 'location.pathname');
var pathParams = (0, _lodash.get)(router, 'params');
var prevPathName = (0, _react.useRef)();
var prevRoutesNameMapper = (0, _react.useRef)();
var routerPushFunction = (0, _lodash.get)(router, 'push');
(0, _react.useEffect)(function () {
if (staticCrumbs.length === 0 && router) {
var routerRoutes = (0, _lodash.get)(router, 'routes', []);
var currentExistentRoutes = (0, _breadcrumbsUtils.routesToArray)(routerRoutes);
setExistentRoutes(currentExistentRoutes);
var currentBreadCrumbs = (0, _breadcrumbsUtils.getPathNameBreadcrumbs)(pathName, pathParams, routerPushFunction, currentExistentRoutes, routesNameMapper);
setPathBreadcrumbs(currentBreadCrumbs);
} // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // didMount
// eslint-disable-next-line react-hooks/exhaustive-deps
(0, _react.useEffect)(function () {
var shouldUpdatePathBreadcrumbs = staticCrumbs.length === 0 && router && prevPathName.current && prevPathName.current !== pathName;
if (shouldUpdatePathBreadcrumbs) {
var currentBreadCrumbs = (0, _breadcrumbsUtils.getPathNameBreadcrumbs)(pathName, pathParams, routerPushFunction, existentRoutes, routesNameMapper);
setPathBreadcrumbs(currentBreadCrumbs);
}
prevPathName.current = pathName;
prevRoutesNameMapper.current = routesNameMapper;
}); // didUpdate
var breadcrumbsListClasses = (0, _classnames["default"])("".concat(_constants.BEM_NAVIGATION_BREADCRUMBS, "--list"), classes.breadcrumbsList);
var breadcrumbSeparatorTypographyClasses = (0, _classnames["default"])(classes.breadCrumbSeparatorTypography, "".concat(_constants.BEM_NAVIGATION_BREADCRUMBS, "--breadcrumb_separator_typography"), 'breadcrumbSeparator');
var breadcrumbTitleClasses = (0, _classnames["default"])(classes.breadcrumbTitle, "".concat(_constants.BEM_NAVIGATION_BREADCRUMBS, "--breadcrumb_title"));
var breadcrumbTitleTypographyClasses = (0, _classnames["default"])(classes.breadcrumbTitleTypography, "".concat(_constants.BEM_NAVIGATION_BREADCRUMBS, "--breadcrumb_title_typography"));
var finalBreadcrumbs = staticCrumbs;
var shouldUseDynamicBreadcrumbs = staticCrumbs.length === 0 && !(0, _lodash.isNil)(router);
if (shouldUseDynamicBreadcrumbs) {
finalBreadcrumbs = pathBreadcrumbs;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: classes.root
}, /*#__PURE__*/_react["default"].createElement("ul", {
className: breadcrumbsListClasses
}, finalBreadcrumbs.filter(function (breadcrumb, index, originalArray) {
var shouldRenderBreadcrumb = !showOnlyPreviousRoute || showOnlyPreviousRoute && (index === originalArray.length - 1 || // last route
index === originalArray.length - 2 // previous route from the current one
);
return shouldRenderBreadcrumb;
}).map(function (breadcrumb, index, arr) {
var _Classnames;
var onBreadcrumbClick = breadcrumb.onBreadcrumbClick,
to = breadcrumb.to,
title = breadcrumb.title;
var shouldTitleBeTruncated = title.length > titlesMaxLength;
var parsedTitle = shouldTitleBeTruncated ? "".concat(title.substring(0, titlesMaxLength), "...") : title;
var isFirst = index === 0;
var isLast = index === arr.length - 1;
var breadcrumbClasses = (0, _classnames["default"])(classes.breadcrumb, "".concat(_constants.BEM_NAVIGATION_BREADCRUMBS, "--breadcrumb"), (_Classnames = {}, _defineProperty(_Classnames, classes.breadcrumbLast, isLast), _defineProperty(_Classnames, "".concat(_constants.BEM_NAVIGATION_BREADCRUMBS, "--breadcrumb_is_last"), isLast), _Classnames));
var breadcrumbSeparatorClasses = (0, _classnames["default"])(classes.breadCrumbSeparator, "".concat(_constants.BEM_NAVIGATION_BREADCRUMBS, "--breadcrumb_separator"), _defineProperty({}, "".concat(_constants.BEM_NAVIGATION_BREADCRUMBS, "--breadcrumb-divider_first"), isFirst));
var breadcrumbTo = /*#__PURE__*/_react["default"].createElement(_typography["default"], {
variant: "body1",
className: breadcrumbTitleTypographyClasses
}, parsedTitle);
if (shouldTitleBeTruncated) {
breadcrumbTo = /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
title: title,
classes: {
tooltip: classes.tooltip
}
}, breadcrumbTo);
}
return /*#__PURE__*/_react["default"].createElement("li", {
className: breadcrumbClasses,
key: "".concat(_constants.BEM_NAVIGATION_BREADCRUMBS, "--breadcrumb_key_").concat(to),
onClick: onBreadcrumbClick,
role: "presentation"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: breadcrumbSeparatorClasses
}, isFirst ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: ICON_TYPE_FIRST_BREADCRUMB,
size: "xsmall",
color: "static"
}) : /*#__PURE__*/_react["default"].createElement(_typography["default"], {
variant: "h4",
className: breadcrumbSeparatorTypographyClasses
}, dividerString)), /*#__PURE__*/_react["default"].createElement("div", {
className: breadcrumbTitleClasses
}, breadcrumbTo));
})));
}
Breadcrumbs.defaultProps = defaultProps;
Breadcrumbs.propTypes = propTypes;
var _default = Breadcrumbs;
exports["default"] = _default;