@learningpool/ui 1.6.0-beta.6 → 1.6.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components/navigation/MobileNavigation/MobileNavigation.js +17 -22
  2. package/components/navigation/MobileNavigation/MobileNavigationAvatar.js +1 -3
  3. package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js +1 -1
  4. package/package.json +1 -1
package/components/navigation/MobileNavigation/MobileNavigation.js CHANGED
@@ -34,23 +34,24 @@ import { useCurrentWidth } from '../../../utils/hooks';
34
34
  import { slice } from 'lodash';
35
35
  import { motion } from 'framer-motion';
36
36
  import { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants';
37
+ import { handleAvatarInitials } from '../../../utils/helpers';
37
38
  var MobileNavigation = function (props) {
38
- var _a, _b;
39
+ var _a, _b, _c;
39
40
  var items = props.items, secondaryItems = props.secondaryItems, hideAvatarInitials = props.hideAvatarInitials, hasSearch = props.hasSearch, hasAvatar = props.hasAvatar, showNotchIndicator = props.showNotchIndicator, rest = __rest(props, ["items", "secondaryItems", "hideAvatarInitials", "hasSearch", "hasAvatar", "showNotchIndicator"]);
40
41
  var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
41
42
  var propIsSearchOpen = typeof (props === null || props === void 0 ? void 0 : props.isSearchOpen) === 'boolean' ? props.isSearchOpen : undefined;
42
43
  var propIsAvatarOpen = typeof (props === null || props === void 0 ? void 0 : props.isAvatarOpen) === 'boolean' ? props.isAvatarOpen : undefined;
43
44
  var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
44
- var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
45
- var _d = React.useState(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false), isSearchOpen = _d[0], setIsSearchOpen = _d[1];
46
- var _e = React.useState(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false), isAvatarOpen = _e[0], setIsAvatarOpen = _e[1];
45
+ var _d = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _d[0], setIsDrawerOpen = _d[1];
46
+ var _e = React.useState(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false), isSearchOpen = _e[0], setIsSearchOpen = _e[1];
47
+ var _f = React.useState(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false), isAvatarOpen = _f[0], setIsAvatarOpen = _f[1];
47
48
  var maxMobilePrimaryItems = 3;
48
49
  var priorityItems = slice(items, 0, maxMobilePrimaryItems);
49
- var _f = React.useState(0), value = _f[0], setValue = _f[1];
50
- var _g = React.useState(0), mobileNotchPosition = _g[0], setMobileNotchPosition = _g[1];
50
+ var _g = React.useState(0), value = _g[0], setValue = _g[1];
51
+ var _h = React.useState(0), mobileNotchPosition = _h[0], setMobileNotchPosition = _h[1];
51
52
  var windowWidth = useCurrentWidth();
52
53
  var currentDirection = window.localStorage.getItem('@learningpool/ui/store/mobile-navigation-direction');
53
- var _h = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _h[0], setMobileNavDirection = _h[1];
54
+ var _j = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _j[0], setMobileNavDirection = _j[1];
54
55
  useEffect(function () {
55
56
  window.localStorage.setItem('@learningpool/ui/store/mobile-navigation-direction', mobileNavDirection);
56
57
  positionMobileNotch();
@@ -68,19 +69,7 @@ var MobileNavigation = function (props) {
68
69
  }
69
70
  hideNotch();
70
71
  }, [isDrawerOpen, isSearchOpen, isAvatarOpen]);
71
- var handleAvatarInitials = function (avatarName) {
72
- var _a, _b;
73
- var firstInitial = avatarName.split('')[0] || '';
74
- var secondInitial = '';
75
- if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
76
- firstInitial = avatarName.split(' ')[0][0];
77
- if (((_b = avatarName.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
78
- secondInitial = avatarName === null || avatarName === void 0 ? void 0 : avatarName.split(' ')[1][0];
79
- }
80
- }
81
- return "".concat(firstInitial).concat(secondInitial);
82
- };
83
- var _j = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _j[0], setAvatarInitials = _j[1];
72
+ var _k = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _k[0], setAvatarInitials = _k[1];
84
73
  var toggleDrawer = function (open, action) { return function (event) {
85
74
  event === null || event === void 0 ? void 0 : event.stopPropagation();
86
75
  if (event.type === 'keydown') {
@@ -114,12 +103,18 @@ var MobileNavigation = function (props) {
114
103
  Height: 50,
115
104
  Width: 50
116
105
  };
106
+ var BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item');
117
107
  var positionMobileNotch = function () {
118
108
  var _a;
119
- var selectedDOMRect = (_a = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item')[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
109
+ var selectedDOMRect = (_a = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
120
110
  setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition);
121
111
  };
122
- React.useEffect(function () { return positionMobileNotch(); }, [value, windowWidth]);
112
+ useEffect(function () { return positionMobileNotch(); }, [
113
+ value,
114
+ windowWidth,
115
+ // Fix notch position if scrollbar is hidden/shown
116
+ (_c = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()
117
+ ]);
123
118
  var variantsPaper = {
124
119
  open: {
125
120
  opacity: 1
package/components/navigation/MobileNavigation/MobileNavigationAvatar.js CHANGED
@@ -41,10 +41,8 @@ var SwipeableTemporaryAvatar = function (props) {
41
41
  handleOpenState(open);
42
42
  };
43
43
  };
44
- useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
45
- avatarName
46
- ]);
47
44
  var _c = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _c[0], setAvatarInitials = _c[1];
45
+ useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
48
46
  var handleOnClickSwitchDirection = function () {
49
47
  setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl');
50
48
  avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection();
package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js CHANGED
@@ -81,7 +81,7 @@ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 =
81
81
  : props.theme.palette.background.paper; });
82
82
  export var StyledDrawer = styled(Drawer, {
83
83
  shouldForwardProp: function (prop) { return prop !== 'open'; }
84
- })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n white-space: nowrap;\n width: ", ";\n transition: width\n ", "ms\n ", ";\n\n @media (min-width: ", ") {\n width: ", ";\n }\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width\n ", "ms\n ", ";\n visibility: visible;\n width: ", ";\n [theme.breakpoints.up('sm')] {\n width: ", ";\n }\n }\n"], ["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n white-space: nowrap;\n width: ", ";\n transition: width\n ", "ms\n ", ";\n\n @media (min-width: ", ") {\n width: ", ";\n }\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width\n ", "ms\n ", ";\n visibility: visible;\n width: ", ";\n [theme.breakpoints.up('sm')] {\n width: ", ";\n }\n }\n"])), function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
84
+ })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n white-space: nowrap;\n width: ", ";\n transition: width\n ", "ms\n ", ";\n\n @media (min-width: ", ") {\n width: ", ";\n }\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width\n ", "ms\n ", ";\n visibility: visible !important;\n width: ", ";\n [theme.breakpoints.up('sm')] {\n width: ", ";\n }\n }\n"], ["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n white-space: nowrap;\n width: ", ";\n transition: width\n ", "ms\n ", ";\n\n @media (min-width: ", ") {\n width: ", ";\n }\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width\n ", "ms\n ", ";\n visibility: visible !important;\n width: ", ";\n [theme.breakpoints.up('sm')] {\n width: ", ";\n }\n }\n"])), function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
85
85
  return props.theme.palette.mode === 'dark'
86
86
  ? props.theme.palette.primary.contrastText
87
87
  : props.theme.palette.getContrastText(props.theme.palette.background.paper);
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.6.0-beta.6",
12
+ "version": "1.6.0-beta.8",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",