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.
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +23 -4
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +3 -3
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +20 -9
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +7 -5
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +29 -24
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +13 -7
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js +427 -0
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.scss +120 -0
- package/dist/{Molecular/Datepicker/Datepicker.stories.js → Atomic/FormElements/MobileCalendar/MobileCalendar.stories.js} +33 -21
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +11 -8
- package/dist/Atomic/UI/Calendar/Calendar.js +13 -12
- package/dist/Functions/customEventListener.js +66 -0
- package/package.json +1 -1
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +34 -3
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +4 -4
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +57 -22
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +10 -8
- package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +391 -392
- package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +11 -3
- package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.js +315 -0
- package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.scss +120 -0
- package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.stories.js +30 -0
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +132 -126
- package/src/Atomic/UI/Calendar/Calendar.js +21 -11
- package/src/Functions/customEventListener.js +58 -0
- package/src/Functions/useMouseUpOutside.js +14 -0
- package/dist/Functions/useToggle.js +0 -40
- package/dist/Functions/utils.js +0 -66
- package/dist/Molecular/Datepicker/Datepicker.js +0 -451
- package/dist/Molecular/Datepicker/Datepicker.scss +0 -8
- package/dist/Molecular/Datepicker/components/Calendar.js +0 -156
- package/dist/Molecular/FormElements/FormElement.js +0 -40
- package/dist/Molecular/FormElements/FormElement.scss +0 -8
- package/dist/Molecular/FormElements/FormElement.stories.js +0 -73
- package/dist/index.js +0 -15
- package/dist/scss/_fonts.scss +0 -109
- package/dist/scss/_vars.scss +0 -48
- 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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
-
|
|
31
|
+
const [days, setDays] = useState({});
|
|
27
32
|
|
|
28
|
-
|
|
33
|
+
const title = useMemo(() => `${moment(date).format('MMM')} ${moment(date).format('YYYY')}`, [date]);
|
|
29
34
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
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
|
-
|
|
97
|
-
|
|
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
|
-
|
|
101
|
-
|
|
102
|
-
|
|
101
|
+
const handlePrev = () => {
|
|
102
|
+
setDate(moment(date).subtract(1, 'month').toDate());
|
|
103
|
+
};
|
|
103
104
|
|
|
104
|
-
|
|
105
|
+
const handleNext = () => {
|
|
106
|
+
setDate(moment(date).add(1, 'month').toDate());
|
|
107
|
+
};
|
|
105
108
|
|
|
106
|
-
|
|
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
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
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
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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 {
|
|
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(
|
|
50
|
-
const isBeforeDay = day && moment(day.date).isBefore(
|
|
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
|
-
{
|
|
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
|
-
{
|
|
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;
|
package/dist/Functions/utils.js
DELETED
|
@@ -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;
|