intelicoreact 0.0.94 → 0.0.95

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 (38) hide show
  1. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +23 -4
  2. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +3 -3
  3. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +20 -9
  4. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +7 -5
  5. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +29 -24
  6. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +13 -7
  7. package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js +427 -0
  8. package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.scss +120 -0
  9. package/dist/{Molecular/Datepicker/Datepicker.stories.js → Atomic/FormElements/MobileCalendar/MobileCalendar.stories.js} +33 -21
  10. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +11 -8
  11. package/dist/Atomic/UI/Calendar/Calendar.js +13 -12
  12. package/dist/Functions/customEventListener.js +66 -0
  13. package/package.json +1 -1
  14. package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +34 -3
  15. package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +4 -4
  16. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +57 -22
  17. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +10 -8
  18. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +391 -392
  19. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +11 -3
  20. package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.js +315 -0
  21. package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.scss +120 -0
  22. package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.stories.js +30 -0
  23. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +132 -126
  24. package/src/Atomic/UI/Calendar/Calendar.js +21 -11
  25. package/src/Functions/customEventListener.js +58 -0
  26. package/src/Functions/useMouseUpOutside.js +14 -0
  27. package/dist/Functions/useToggle.js +0 -40
  28. package/dist/Functions/utils.js +0 -66
  29. package/dist/Molecular/Datepicker/Datepicker.js +0 -451
  30. package/dist/Molecular/Datepicker/Datepicker.scss +0 -8
  31. package/dist/Molecular/Datepicker/components/Calendar.js +0 -156
  32. package/dist/Molecular/FormElements/FormElement.js +0 -40
  33. package/dist/Molecular/FormElements/FormElement.scss +0 -8
  34. package/dist/Molecular/FormElements/FormElement.stories.js +0 -73
  35. package/dist/index.js +0 -15
  36. package/dist/scss/_fonts.scss +0 -109
  37. package/dist/scss/_vars.scss +0 -48
  38. package/dist/scss/main.scss +0 -40
@@ -2,145 +2,151 @@ import React, { useEffect, useMemo, useState } from 'react';
2
2
  import cn from 'classnames';
3
3
  import moment from 'moment-timezone';
4
4
 
5
- import Arrow from '../../UI/Arrow/Arrow'
5
+ import Arrow from '../../UI/Arrow/Arrow';
6
6
 
7
- import './RangeCalendar.scss'
7
+ import './RangeCalendar.scss';
8
8
 
9
- const RangeCalendar = props => {
10
- const {
11
- className,
12
- date,
13
- setDate,
14
- startDate,
15
- endDate,
16
- allowPrev = true,
17
- allowNext = true,
18
- onClick = () => {},
19
- onHover = () => {},
20
- startPrevDate,
21
- endPrevDate,
22
- limitRange,
23
- isShortWeekNames
24
- } = props;
9
+ const RangeCalendar = (props) => {
10
+ const {
11
+ className,
12
+ date,
13
+ setDate,
14
+ startDate,
15
+ endDate,
16
+ allowPrev = true,
17
+ allowNext = true,
18
+ onClick = () => {},
19
+ onHover = () => {},
20
+ startPrevDate,
21
+ endPrevDate,
22
+ limitRange,
23
+ isShortWeekNames,
24
+ minDate,
25
+ maxDate,
26
+ momentMinDate,
27
+ momentMaxDate,
28
+ isDontLimitFuture,
29
+ } = props;
25
30
 
26
- const [days, setDays] = useState({});
31
+ const [days, setDays] = useState({});
27
32
 
28
- const title = useMemo(() => `${moment(date).format('MMM')} ${moment(date).format('YYYY')}`, [date]);
33
+ const title = useMemo(() => `${moment(date).format('MMM')} ${moment(date).format('YYYY')}`, [date]);
29
34
 
30
- useEffect(() => {
31
- const result = {};
32
- const day = moment(date).startOf('month');
33
- const daysInMonth = day.daysInMonth();
34
- for (let d = 0; d < daysInMonth; d += 1) {
35
- let week = day.week();
36
- if (day.month() === 11 && week === 1) week = 53;
37
- if (day.month() === 0 && week === 53) week = 0;
38
- if (!Object.prototype.hasOwnProperty.call(result, week)) {
39
- result[week] = {};
40
- }
41
- result[week][day.weekday()] = { date: day.toDate() };
42
- day.add(1, 'd');
43
- }
44
- setDays(result);
45
- }, [date]);
35
+ useEffect(() => {
36
+ const result = {};
37
+ const day = moment(date).startOf('month');
38
+ const daysInMonth = day.daysInMonth();
39
+ for (let d = 0; d < daysInMonth; d += 1) {
40
+ let week = day.week();
41
+ if (day.month() === 11 && week === 1) week = 53;
42
+ if (day.month() === 0 && week === 53) week = 0;
43
+ if (!Object.prototype.hasOwnProperty.call(result, week)) {
44
+ result[week] = {};
45
+ }
46
+ result[week][day.weekday()] = { date: day.toDate() };
47
+ day.add(1, 'd');
48
+ }
49
+ setDays(result);
50
+ }, [date]);
46
51
 
47
- const renderDay = (week, dayOfWeek) => {
48
- const day = days[week][dayOfWeek];
49
- const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
50
- const isPastDay = limitRange
51
- ? day && moment(day.date).isBefore(moment().subtract(limitRange, 'days'), 'day')
52
- : null;
53
- const isRangeStart = day && moment(day.date).isSame(startDate, 'day');
54
- const isRangeEnd = day && moment(day.date).isSame(moment(endDate).subtract(1, 'hour'), 'day');
55
- const isRangeInside =
56
- day &&
57
- startDate &&
58
- endDate &&
59
- moment(day.date).isAfter(startDate, 'day') &&
60
- moment(day.date).isBefore(moment(endDate).subtract(1, 'hour'), 'day');
61
- const isPrevRangeEnd =
62
- day &&
63
- (moment(day.date).isSame(startPrevDate, 'day') ||
64
- moment(day.date).isSame(moment(endPrevDate).subtract(1, 'day'), 'day'));
65
- const isPrevRangeInside =
66
- day &&
67
- startPrevDate &&
68
- endPrevDate &&
69
- moment(day.date).isAfter(startPrevDate, 'day') &&
70
- moment(day.date).isBefore(moment(endPrevDate).subtract(1, 'day'), 'day');
71
- const classNames = cn(
72
- 'range-calendar__day',
73
- { 'range-calendar__day--clickable': day },
74
- { 'range-calendar__day--disabled': isFutureDay },
75
- { 'range-calendar__day--disabled': isPastDay },
76
- { 'range-calendar__day--range-start': isRangeStart },
77
- { 'range-calendar__day--range-end': isRangeEnd },
78
- { 'range-calendar__day--range-inside': isRangeInside },
79
- { 'range-calendar__day--prev-range-end': isPrevRangeEnd },
80
- { 'range-calendar__day--prev-range-inside': isPrevRangeInside }
81
- );
82
-
83
- return (
84
- <div
85
- key={`${week}_${dayOfWeek}`}
86
- className={classNames}
87
- onClick={day && !isFutureDay ? e => onClick(day.date, e) : null}
88
- onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
89
- onMouseLeave={() => onHover(null)}
90
- >
91
- <span className="calendar__day-num">{day && day.date.getDate()}</span>
92
- </div>
93
- );
94
- };
52
+ const renderDay = (week, dayOfWeek) => {
53
+ const day = days[week][dayOfWeek];
54
+ const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
55
+ const isPastDay = limitRange ? day && moment(day.date).isBefore(moment().subtract(limitRange, 'days'), 'day') : null;
56
+ const isRangeStart = day && moment(day.date).isSame(startDate, 'day');
57
+ const isRangeEnd = day && moment(day.date).isSame(moment(endDate).subtract(1, 'hour'), 'day');
58
+ const isRangeInside =
59
+ day &&
60
+ startDate &&
61
+ endDate &&
62
+ moment(day.date).isAfter(startDate, 'day') &&
63
+ moment(day.date).isBefore(moment(endDate).subtract(1, 'hour'), 'day');
64
+ const isPrevRangeEnd =
65
+ day && (moment(day.date).isSame(startPrevDate, 'day') || moment(day.date).isSame(moment(endPrevDate).subtract(1, 'day'), 'day'));
66
+ const isPrevRangeInside =
67
+ day &&
68
+ startPrevDate &&
69
+ endPrevDate &&
70
+ moment(day.date).isAfter(startPrevDate, 'day') &&
71
+ moment(day.date).isBefore(moment(endPrevDate).subtract(1, 'day'), 'day');
72
+ const classNames = cn(
73
+ 'range-calendar__day',
74
+ { 'range-calendar__day--clickable': day },
75
+ {
76
+ 'range-calendar__day--disabled':
77
+ isPastDay ||
78
+ (minDate && moment(day?.date).isBefore(minDate, 'day')) ||
79
+ (!isDontLimitFuture && (maxDate ? moment(day?.date).isAfter(momentMaxDate) : isFutureDay)),
80
+ },
81
+ { 'range-calendar__day--range-start': isRangeStart },
82
+ { 'range-calendar__day--range-end': isRangeEnd },
83
+ { 'range-calendar__day--range-inside': isRangeInside },
84
+ { 'range-calendar__day--prev-range-end': isPrevRangeEnd },
85
+ { 'range-calendar__day--prev-range-inside': isPrevRangeInside }
86
+ );
95
87
 
96
- const handlePrev = () => {
97
- setDate(moment(date).subtract(1, 'month').toDate());
98
- };
88
+ return (
89
+ <div
90
+ key={`${week}_${dayOfWeek}`}
91
+ className={classNames}
92
+ onClick={day ? (e) => onClick(day.date, e) : null}
93
+ onMouseOver={day ? () => onHover(day.date) : null}
94
+ onMouseLeave={() => onHover(null)}
95
+ >
96
+ <span className="calendar__day-num">{day && day.date.getDate()}</span>
97
+ </div>
98
+ );
99
+ };
99
100
 
100
- const handleNext = () => {
101
- setDate(moment(date).add(1, 'month').toDate());
102
- };
101
+ const handlePrev = () => {
102
+ setDate(moment(date).subtract(1, 'month').toDate());
103
+ };
103
104
 
104
- const getFormatedWeekName = input => isShortWeekNames ? input.charAt(0) : input;
105
+ const handleNext = () => {
106
+ setDate(moment(date).add(1, 'month').toDate());
107
+ };
105
108
 
106
- return (
107
- <div className={cn('range-calendar', className)}>
108
- <div className="range-calendar-header">
109
- <Arrow type="left" disabled={!allowPrev} onClick={handlePrev} className="range-calendar-header__prev" />
110
- {/* <div className="range-calendar-header__prev">
111
- {allowPrev && (
112
- <div onClick={handlePrev}>
113
- <Arrow type="left" disabled={!allowPrev} />
114
- </div>
115
- )}
116
- </div> */}
117
- <div className="range-calendar-header__title">{title}</div>
118
- <Arrow type="right" disabled={!allowNext} onClick={handleNext} className="range-calendar-header__next" />
109
+ const getFormatedWeekName = (input) => (isShortWeekNames ? input.charAt(0) : input);
119
110
 
120
- {/* <div className="range-calendar-header__next">
121
- {allowNext && (
122
- <div onClick={handleNext}>
123
- <Arrow type="right" disabled={!allowNext} />
124
- </div>
125
- )}
126
- </div> */}
111
+ return (
112
+ <div className={cn('range-calendar', className)}>
113
+ <div className="range-calendar-header">
114
+ <Arrow
115
+ type="left"
116
+ disabled={!allowPrev || (minDate && moment(date).startOf('month').isSameOrBefore(momentMinDate, 'months'))}
117
+ onClick={handlePrev}
118
+ className="range-calendar-header__prev"
119
+ />
120
+ <div className="range-calendar-header__title">{title}</div>
121
+ <Arrow
122
+ type="right"
123
+ disabled={
124
+ !allowNext ||
125
+ (
126
+ !isDontLimitFuture &&
127
+ moment(date).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day'), 'months')
128
+ )
129
+ }
130
+ onClick={handleNext}
131
+ className="range-calendar-header__next"
132
+ />
133
+ </div>
134
+ <div className="range-calendar__week range-calendar__week-title">
135
+ {[...Array(7).keys()].map((dayOfWeek) => {
136
+ return (
137
+ <div key={`day-of-week_${dayOfWeek}`} className="range-calendar__day range-calendar__day--title">
138
+ {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
127
139
  </div>
128
- <div className="range-calendar__week range-calendar__week-title">
129
- {[...Array(7).keys()].map(dayOfWeek => {
130
- return (
131
- <div key={`day-of-week_${dayOfWeek}`} className="range-calendar__day range-calendar__day--title">
132
- {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
133
- </div>
134
- );
135
- })}
136
- </div>
137
- {Object.keys(days).map((week, index) => (
138
- <div key={`week_${index}`} className="range-calendar__week">
139
- {[...Array(7).keys()].map(dayOfWeek => renderDay(week, dayOfWeek))}
140
- </div>
141
- ))}
140
+ );
141
+ })}
142
+ </div>
143
+ {Object.keys(days).map((week, index) => (
144
+ <div key={`week_${index}`} className="range-calendar__week">
145
+ {[...Array(7).keys()].map((dayOfWeek) => renderDay(week, dayOfWeek))}
142
146
  </div>
143
- );
147
+ ))}
148
+ </div>
149
+ );
144
150
  };
145
151
 
146
152
  export default RangeCalendar;
@@ -6,9 +6,18 @@ import { ChevronLeft, ChevronRight } from 'react-feather';
6
6
  import './Calendar.scss';
7
7
 
8
8
  export default function (props) {
9
- const { date, setDate, setIsOpened, allowPrev = true, allowNext = true, params, className, isDontLimitFuture, isListTop } = props;
9
+ const {
10
+ date,
11
+ setDate,
12
+ setIsOpened,
13
+ allowPrev = true,
14
+ allowNext = true,
15
+ params,
16
+ className,
17
+ isListTop,
18
+ } = props;
10
19
  // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
11
- const { minDate, maxDate } = params;
20
+ const { format, minDate, maxDate, momentMinDate, momentMaxDate, isDontLimitFuture } = params;
12
21
  const [days, setDays] = useState({});
13
22
  const [showDate, setShowDate] = useState(date);
14
23
  const [isChangeYear, setIsChangeYear] = useState(false);
@@ -18,14 +27,15 @@ export default function (props) {
18
27
  const selectedDay = moment(showDate);
19
28
  const isError = 'Invalid date';
20
29
 
21
- // const title = useMemo(
22
- // () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
23
- // [date, showDate]
24
- // );
25
-
26
30
  const showMonth = useMemo(() => moment(showDate).format('MMM'), [date, showDate]);
27
31
  const showYear = useMemo(() => moment(showDate).format('YYYY'), [date, showDate]);
28
32
 
33
+ const isShovPrevArrow = allowPrev && !(minDate && moment(showDate).startOf('month').isSameOrBefore(momentMinDate, 'months'));
34
+ const isShovNextArrow = allowNext && (
35
+ isDontLimitFuture ||
36
+ !moment(showDate).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day'), 'months')
37
+ );
38
+
29
39
  useEffect(() => {
30
40
  const result = {};
31
41
  const day = selectedDay.startOf('month');
@@ -46,8 +56,8 @@ export default function (props) {
46
56
  const renderDay = (week, dayOfWeek) => {
47
57
  const day = days[week][dayOfWeek];
48
58
  if (!day) return <div className="calendar__day" />;
49
- const isFutureDay = day && maxDate ? moment(day.date).isAfter(moment(maxDate || ''), 'day') : moment(day.date).isAfter(moment(), 'day');
50
- const isBeforeDay = day && moment(day.date).isBefore(moment(minDate || ''), 'day');
59
+ const isFutureDay = day && !isDontLimitFuture && maxDate ? moment(day.date).isAfter(momentMaxDate || moment().add(1, 'days'), 'day') : moment(day.date).isAfter(moment(), 'day');
60
+ const isBeforeDay = day && moment(day.date).isBefore((momentMinDate || ''), 'day');
51
61
 
52
62
  const classNames = cn(
53
63
  'calendar__day',
@@ -120,7 +130,7 @@ export default function (props) {
120
130
  >
121
131
  <div className="calendar-header">
122
132
  <div className="calendar-header__prev">
123
- {allowPrev && (
133
+ {isShovPrevArrow && (
124
134
  <div onClick={handlePrev}>
125
135
  <ChevronLeft />
126
136
  </div>
@@ -152,7 +162,7 @@ export default function (props) {
152
162
  </span>
153
163
  </div>
154
164
  <div className="calendar-header__next">
155
- {allowNext && (
165
+ {isShovNextArrow && (
156
166
  <div onClick={handleNext}>
157
167
  <ChevronRight />
158
168
  </div>
@@ -0,0 +1,58 @@
1
+ (function() {
2
+ Element.prototype._addEventListener = Element.prototype.addEventListener;
3
+ Element.prototype.addEventListener = function(a,b,c) {
4
+ if(c==undefined)
5
+ c=false;
6
+ this._addEventListener(a,b,c);
7
+ if(!this.eventListenerList)
8
+ this.eventListenerList = {};
9
+ if(!this.eventListenerList[a])
10
+ this.eventListenerList[a] = [];
11
+ //this.removeEventListener(a,b,c); // TODO - handle duplicates..
12
+ this.eventListenerList[a].push({listener:b,useCapture:c});
13
+ };
14
+
15
+ Element.prototype.getEventListeners = function(a){
16
+ if(!this.eventListenerList)
17
+ this.eventListenerList = {};
18
+ if(a==undefined)
19
+ return this.eventListenerList;
20
+ return this.eventListenerList[a];
21
+ };
22
+ Element.prototype.clearEventListeners = function(a){
23
+ if(!this.eventListenerList)
24
+ this.eventListenerList = {};
25
+ if(a==undefined){
26
+ for(var x in (this.getEventListeners())) this.clearEventListeners(x);
27
+ return;
28
+ }
29
+ var el = this.getEventListeners(a);
30
+ if(el==undefined)
31
+ return;
32
+ for(var i = el.length - 1; i >= 0; --i) {
33
+ var ev = el[i];
34
+ this.removeEventListener(a, ev.listener, ev.useCapture);
35
+ }
36
+ };
37
+
38
+ Element.prototype._removeEventListener = Element.prototype.removeEventListener;
39
+ Element.prototype.removeEventListener = function(a,b,c) {
40
+ if(c==undefined)
41
+ c=false;
42
+ this._removeEventListener(a,b,c);
43
+ if(!this.eventListenerList)
44
+ this.eventListenerList = {};
45
+ if(!this.eventListenerList[a])
46
+ this.eventListenerList[a] = [];
47
+
48
+ // Find the event in the list
49
+ for(var i=0;i<this.eventListenerList[a].length;i++){
50
+ if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
51
+ this.eventListenerList[a].splice(i, 1);
52
+ break;
53
+ }
54
+ }
55
+ if(this.eventListenerList[a].length==0)
56
+ delete this.eventListenerList[a];
57
+ };
58
+ })();
@@ -0,0 +1,14 @@
1
+ import React, { useEffect } from 'react'
2
+
3
+ export default function useMouseUpOutside(ref, setOut, open) {
4
+ function handleMouseUpOutside(event) {
5
+ if (ref.current && !ref.current.contains(event.target)) {
6
+ setOut(open);
7
+ }
8
+ }
9
+ useEffect(() => {
10
+ document.addEventListener('mouseup', handleMouseUpOutside);
11
+ return () => {
12
+ document.removeEventListener('mouseup', handleMouseUpOutside);
13
+ };
14
+ }, [ref]);
@@ -1,40 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
-
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
-
12
- var _react = require("react");
13
-
14
- var useToggle = function useToggle(initialState) {
15
- var _useState = (0, _react.useState)(!!initialState),
16
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
17
- isToggled = _useState2[0],
18
- setToggle = _useState2[1];
19
-
20
- var toggle = (0, _react.useCallback)(function () {
21
- return setToggle(function (isOn) {
22
- return !isOn;
23
- });
24
- }, []);
25
- var toggleOn = (0, _react.useCallback)(function () {
26
- return setToggle(true);
27
- }, []);
28
- var toggleOff = (0, _react.useCallback)(function () {
29
- return setToggle(false);
30
- }, []);
31
- return {
32
- isToggled: isToggled,
33
- toggle: toggle,
34
- toggleOn: toggleOn,
35
- toggleOff: toggleOff
36
- };
37
- };
38
-
39
- var _default = useToggle;
40
- exports.default = _default;
@@ -1,66 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
7
-
8
- var _react = require("react");
9
-
10
- /* eslint-disable guard-for-in, no-unused-vars */
11
- var handleObjectChange = function handleObjectChange(updateObject, updateFunction) {
12
- return function (data) {
13
- var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
14
- var isNumber = arguments.length > 2 ? arguments[2] : undefined;
15
- var value;
16
-
17
- if (data !== null && data !== void 0 && data.target) {
18
- value = data.target.type === 'checkbox' ? data.target.checked : data.target.value;
19
- } else value = data;
20
-
21
- value = isNumber ? +value : value;
22
- var props = prop.split('.');
23
- var currentObject = props.reduce(function (res, chapter, index) {
24
- if (props.length !== index + 1) res = res[chapter];
25
- return res;
26
- }, updateObject);
27
- currentObject[props.pop()] = value;
28
- updateFunction();
29
- };
30
- };
31
-
32
- exports.handleObjectChange = handleObjectChange;
33
-
34
- var useOutsideToggle = function useOutsideToggle(ref, setOut, open) {
35
- function handleClickOutside(event) {
36
- if (ref.current && !ref.current.contains(event.target)) {
37
- setOut(open);
38
- }
39
- }
40
-
41
- (0, _react.useEffect)(function () {
42
- document.addEventListener('mouseup', handleClickOutside);
43
- return function () {
44
- // Unbind the event listener on clean up
45
- document.removeEventListener('mouseup', handleClickOutside);
46
- };
47
- }, [ref]);
48
- };
49
-
50
- exports.useOutsideToggle = useOutsideToggle;
51
-
52
- var logout = function logout() {
53
- window.localStorage.removeItem('accessToken');
54
- window.localStorage.removeItem('tokenExpires');
55
- window.location.reload();
56
- };
57
-
58
- exports.logout = logout;
59
-
60
- var getStyles = function getStyles(el, prop) {
61
- if (!el) return null;
62
- if (!prop) return window.getComputedStyle(el);
63
- return window.getComputedStyle(el).getPropertyValue(prop);
64
- };
65
-
66
- exports.getStyles = getStyles;