@onesy/ui-react 1.0.186 → 1.0.188
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/CalendarMonth/CalendarMonth.d.ts +2 -0
- package/CalendarMonth/CalendarMonth.js +8 -2
- package/Interaction/Interaction.js +10 -10
- package/esm/CalendarMonth/CalendarMonth.js +8 -2
- package/esm/Interaction/Interaction.js +10 -10
- package/esm/index.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
|
@@ -40,6 +40,7 @@ export declare type ICalendarMonth = Omit<ILine, 'onChange'> & {
|
|
|
40
40
|
dayNamesFull?: boolean;
|
|
41
41
|
valid?: (value: OnesyDate, version: 'day' | 'month' | 'year') => boolean;
|
|
42
42
|
renderDay?: (value: OnesyDate, props: any, day: any, outside: boolean) => React.ReactNode;
|
|
43
|
+
renderDayValue?: (value: number, date: OnesyDate, day: any) => any;
|
|
43
44
|
renderDayName?: (order: number) => any;
|
|
44
45
|
DayNameProps?: IPropsAny;
|
|
45
46
|
PaginationItemProps?: IPropsAny;
|
|
@@ -52,6 +53,7 @@ export interface IDay {
|
|
|
52
53
|
dayWeek: number;
|
|
53
54
|
weekend: boolean;
|
|
54
55
|
today: boolean;
|
|
56
|
+
future: boolean;
|
|
55
57
|
is: {
|
|
56
58
|
start: boolean;
|
|
57
59
|
between: boolean;
|
|
@@ -19,7 +19,7 @@ var _Transitions = _interopRequireDefault(require("../Transitions"));
|
|
|
19
19
|
var _Transition = _interopRequireDefault(require("../Transition"));
|
|
20
20
|
var _utils2 = require("../utils");
|
|
21
21
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
-
const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "colorSelected", "selected", "onTimeClick", "range", "offset", "outside", "weekStartDay", "now", "min", "max", "validate", "labels", "dayNamesFull", "noTransition", "valid", "renderDay", "renderDayName", "disabled", "DayNameProps", "PaginationItemProps", "TransitionProps", "TransitionsProps", "className"];
|
|
22
|
+
const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "colorSelected", "selected", "onTimeClick", "range", "offset", "outside", "weekStartDay", "now", "min", "max", "validate", "labels", "dayNamesFull", "noTransition", "valid", "renderDay", "renderDayValue", "renderDayName", "disabled", "DayNameProps", "PaginationItemProps", "TransitionProps", "TransitionsProps", "className"];
|
|
23
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
24
24
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
25
25
|
const useStyle = (0, _styleReact.style)(theme => ({
|
|
@@ -191,6 +191,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
|
|
|
191
191
|
}
|
|
192
192
|
},
|
|
193
193
|
dayValue: {
|
|
194
|
+
position: 'relative',
|
|
194
195
|
zIndex: 1,
|
|
195
196
|
'&:hover': {
|
|
196
197
|
boxShadow: 'inset 0px 0px 0px 1px currentColor !important'
|
|
@@ -240,6 +241,7 @@ const CalendarMonth = props__ => {
|
|
|
240
241
|
noTransition = true,
|
|
241
242
|
valid: valid_,
|
|
242
243
|
renderDay,
|
|
244
|
+
renderDayValue,
|
|
243
245
|
renderDayName,
|
|
244
246
|
disabled,
|
|
245
247
|
DayNameProps,
|
|
@@ -464,6 +466,7 @@ const CalendarMonth = props__ => {
|
|
|
464
466
|
};
|
|
465
467
|
const days = _react.default.useMemo(() => {
|
|
466
468
|
const items = [];
|
|
469
|
+
const nowDate = new _date.OnesyDate();
|
|
467
470
|
|
|
468
471
|
// Add all month days
|
|
469
472
|
for (let i_0 = 0; i_0 < month.daysInMonth; i_0++) {
|
|
@@ -476,6 +479,7 @@ const CalendarMonth = props__ => {
|
|
|
476
479
|
dayWeek: day_0.dayWeek,
|
|
477
480
|
weekend: [0, 6].includes(day_0.dayWeek),
|
|
478
481
|
today: day_0.year === monthNow.year && day_0.dayYear === monthNow.dayYear,
|
|
482
|
+
future: day_0.milliseconds > nowDate.milliseconds,
|
|
479
483
|
is: _objectSpread({}, details),
|
|
480
484
|
onesyDate: day_0
|
|
481
485
|
});
|
|
@@ -496,6 +500,7 @@ const CalendarMonth = props__ => {
|
|
|
496
500
|
dayWeek: day_1.dayWeek,
|
|
497
501
|
weekend: [0, 6].includes(day_1.dayWeek),
|
|
498
502
|
today: day_1.year === monthNow.year && day_1.dayYear === monthNow.dayYear,
|
|
503
|
+
future: day_1.milliseconds > nowDate.milliseconds,
|
|
499
504
|
is: _objectSpread({}, details_0),
|
|
500
505
|
start: true,
|
|
501
506
|
onesyDate: day_1
|
|
@@ -517,6 +522,7 @@ const CalendarMonth = props__ => {
|
|
|
517
522
|
dayWeek: day_2.dayWeek,
|
|
518
523
|
weekend: [0, 6].includes(day_2.dayWeek),
|
|
519
524
|
today: day_2.year === monthNow.year && day_2.dayYear === monthNow.dayYear,
|
|
525
|
+
future: day_2.milliseconds > nowDate.milliseconds,
|
|
520
526
|
is: _objectSpread({}, details_1),
|
|
521
527
|
end: true,
|
|
522
528
|
onesyDate: day_2
|
|
@@ -616,7 +622,7 @@ const CalendarMonth = props__ => {
|
|
|
616
622
|
backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 40 : 50 : propsDay.disabled ? 60 : 70})`
|
|
617
623
|
}), PaginationItemProps === null || PaginationItemProps === void 0 ? void 0 : PaginationItemProps.style)
|
|
618
624
|
}, propsDay), {}, {
|
|
619
|
-
children: day_3.value
|
|
625
|
+
children: (0, _utils.is)('function', renderDayValue) ? renderDayValue(day_3.value, day_3.onesyDate, day_3) : day_3.value
|
|
620
626
|
}))
|
|
621
627
|
}, index_);
|
|
622
628
|
})
|
|
@@ -71,15 +71,15 @@ const useStyle = (0, _styleReact.style)(theme => ({
|
|
|
71
71
|
}),
|
|
72
72
|
borderRadius: theme.methods.shape.radius.value(4e4, 'px'),
|
|
73
73
|
'&.entering': {
|
|
74
|
-
opacity: theme.palette.visual_contrast.
|
|
74
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
75
75
|
transform: 'scale(1)'
|
|
76
76
|
},
|
|
77
77
|
'&.entered': {
|
|
78
|
-
opacity: theme.palette.visual_contrast.
|
|
78
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
79
79
|
transform: 'scale(1)'
|
|
80
80
|
},
|
|
81
81
|
'&.exit': {
|
|
82
|
-
opacity: theme.palette.visual_contrast.
|
|
82
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
83
83
|
transform: 'scale(1)'
|
|
84
84
|
},
|
|
85
85
|
'&.exiting': {
|
|
@@ -93,16 +93,16 @@ const useStyle = (0, _styleReact.style)(theme => ({
|
|
|
93
93
|
}),
|
|
94
94
|
pulse: {
|
|
95
95
|
'&.entering': {
|
|
96
|
-
opacity: theme.palette.visual_contrast.
|
|
96
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
97
97
|
transform: 'scale(0.77)'
|
|
98
98
|
},
|
|
99
99
|
'&.entered': {
|
|
100
|
-
opacity: theme.palette.visual_contrast.
|
|
100
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
101
101
|
transform: 'scale(0.77)',
|
|
102
102
|
animation: `$pulse 2400ms ${theme.transitions.timing_function.emphasized} 240ms infinite`
|
|
103
103
|
},
|
|
104
104
|
'&.exit': {
|
|
105
|
-
opacity: theme.palette.visual_contrast.
|
|
105
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
106
106
|
transform: 'scale(0.7)'
|
|
107
107
|
},
|
|
108
108
|
'&.exiting': {
|
|
@@ -122,13 +122,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
|
|
|
122
122
|
timing_function: 'standard'
|
|
123
123
|
}),
|
|
124
124
|
'&.entering': {
|
|
125
|
-
opacity: theme.palette.visual_contrast.
|
|
125
|
+
opacity: theme.palette.visual_contrast.low.opacity.press
|
|
126
126
|
},
|
|
127
127
|
'&.entered': {
|
|
128
|
-
opacity: theme.palette.visual_contrast.
|
|
128
|
+
opacity: theme.palette.visual_contrast.low.opacity.press
|
|
129
129
|
},
|
|
130
130
|
'&.exit': {
|
|
131
|
-
opacity: theme.palette.visual_contrast.
|
|
131
|
+
opacity: theme.palette.visual_contrast.low.opacity.press
|
|
132
132
|
},
|
|
133
133
|
'&.exiting': {
|
|
134
134
|
opacity: '0'
|
|
@@ -424,7 +424,7 @@ const Interaction = props_ => {
|
|
|
424
424
|
children: status => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
425
425
|
className: (0, _styleReact.classNames)([(0, _.staticClassName)('Interaction', theme) && ['onesy-Interaction-border'], classes.border]),
|
|
426
426
|
style: {
|
|
427
|
-
opacity: (status === null || status === void 0 ? void 0 : status.indexOf('enter')) > -1 ? theme.palette.visual_contrast.
|
|
427
|
+
opacity: (status === null || status === void 0 ? void 0 : status.indexOf('enter')) > -1 ? theme.palette.visual_contrast.low.opacity.press : 0,
|
|
428
428
|
transition: (status === null || status === void 0 ? void 0 : status.indexOf('exit')) > -1 ? theme.methods.transitions.make('opacity', {
|
|
429
429
|
duration: 'complex',
|
|
430
430
|
timing_function: 'standard'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "colorSelected", "selected", "onTimeClick", "range", "offset", "outside", "weekStartDay", "now", "min", "max", "validate", "labels", "dayNamesFull", "noTransition", "valid", "renderDay", "renderDayName", "disabled", "DayNameProps", "PaginationItemProps", "TransitionProps", "TransitionsProps", "className"];
|
|
3
|
+
const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "colorSelected", "selected", "onTimeClick", "range", "offset", "outside", "weekStartDay", "now", "min", "max", "validate", "labels", "dayNamesFull", "noTransition", "valid", "renderDay", "renderDayValue", "renderDayName", "disabled", "DayNameProps", "PaginationItemProps", "TransitionProps", "TransitionsProps", "className"];
|
|
4
4
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
6
|
import React from 'react';
|
|
@@ -184,6 +184,7 @@ const useStyle = style(theme => ({
|
|
|
184
184
|
}
|
|
185
185
|
},
|
|
186
186
|
dayValue: {
|
|
187
|
+
position: 'relative',
|
|
187
188
|
zIndex: 1,
|
|
188
189
|
'&:hover': {
|
|
189
190
|
boxShadow: 'inset 0px 0px 0px 1px currentColor !important'
|
|
@@ -232,6 +233,7 @@ const CalendarMonth = props__ => {
|
|
|
232
233
|
noTransition = true,
|
|
233
234
|
valid: valid_,
|
|
234
235
|
renderDay,
|
|
236
|
+
renderDayValue,
|
|
235
237
|
renderDayName,
|
|
236
238
|
disabled,
|
|
237
239
|
DayNameProps,
|
|
@@ -454,6 +456,7 @@ const CalendarMonth = props__ => {
|
|
|
454
456
|
};
|
|
455
457
|
const days = React.useMemo(() => {
|
|
456
458
|
const items = [];
|
|
459
|
+
const nowDate = new OnesyDate();
|
|
457
460
|
|
|
458
461
|
// Add all month days
|
|
459
462
|
for (let i_0 = 0; i_0 < month.daysInMonth; i_0++) {
|
|
@@ -466,6 +469,7 @@ const CalendarMonth = props__ => {
|
|
|
466
469
|
dayWeek: day_0.dayWeek,
|
|
467
470
|
weekend: [0, 6].includes(day_0.dayWeek),
|
|
468
471
|
today: day_0.year === monthNow.year && day_0.dayYear === monthNow.dayYear,
|
|
472
|
+
future: day_0.milliseconds > nowDate.milliseconds,
|
|
469
473
|
is: _objectSpread({}, details),
|
|
470
474
|
onesyDate: day_0
|
|
471
475
|
});
|
|
@@ -486,6 +490,7 @@ const CalendarMonth = props__ => {
|
|
|
486
490
|
dayWeek: day_1.dayWeek,
|
|
487
491
|
weekend: [0, 6].includes(day_1.dayWeek),
|
|
488
492
|
today: day_1.year === monthNow.year && day_1.dayYear === monthNow.dayYear,
|
|
493
|
+
future: day_1.milliseconds > nowDate.milliseconds,
|
|
489
494
|
is: _objectSpread({}, details_0),
|
|
490
495
|
start: true,
|
|
491
496
|
onesyDate: day_1
|
|
@@ -507,6 +512,7 @@ const CalendarMonth = props__ => {
|
|
|
507
512
|
dayWeek: day_2.dayWeek,
|
|
508
513
|
weekend: [0, 6].includes(day_2.dayWeek),
|
|
509
514
|
today: day_2.year === monthNow.year && day_2.dayYear === monthNow.dayYear,
|
|
515
|
+
future: day_2.milliseconds > nowDate.milliseconds,
|
|
510
516
|
is: _objectSpread({}, details_1),
|
|
511
517
|
end: true,
|
|
512
518
|
onesyDate: day_2
|
|
@@ -605,7 +611,7 @@ const CalendarMonth = props__ => {
|
|
|
605
611
|
backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 40 : 50 : propsDay.disabled ? 60 : 70})`
|
|
606
612
|
}), PaginationItemProps?.style)
|
|
607
613
|
}, propsDay), {}, {
|
|
608
|
-
children: day_3.value
|
|
614
|
+
children: is('function', renderDayValue) ? renderDayValue(day_3.value, day_3.onesyDate, day_3) : day_3.value
|
|
609
615
|
}))
|
|
610
616
|
}, index_);
|
|
611
617
|
})
|
|
@@ -64,15 +64,15 @@ const useStyle = styleMethod(theme => ({
|
|
|
64
64
|
}),
|
|
65
65
|
borderRadius: theme.methods.shape.radius.value(4e4, 'px'),
|
|
66
66
|
'&.entering': {
|
|
67
|
-
opacity: theme.palette.visual_contrast.
|
|
67
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
68
68
|
transform: 'scale(1)'
|
|
69
69
|
},
|
|
70
70
|
'&.entered': {
|
|
71
|
-
opacity: theme.palette.visual_contrast.
|
|
71
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
72
72
|
transform: 'scale(1)'
|
|
73
73
|
},
|
|
74
74
|
'&.exit': {
|
|
75
|
-
opacity: theme.palette.visual_contrast.
|
|
75
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
76
76
|
transform: 'scale(1)'
|
|
77
77
|
},
|
|
78
78
|
'&.exiting': {
|
|
@@ -86,16 +86,16 @@ const useStyle = styleMethod(theme => ({
|
|
|
86
86
|
}),
|
|
87
87
|
pulse: {
|
|
88
88
|
'&.entering': {
|
|
89
|
-
opacity: theme.palette.visual_contrast.
|
|
89
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
90
90
|
transform: 'scale(0.77)'
|
|
91
91
|
},
|
|
92
92
|
'&.entered': {
|
|
93
|
-
opacity: theme.palette.visual_contrast.
|
|
93
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
94
94
|
transform: 'scale(0.77)',
|
|
95
95
|
animation: `$pulse 2400ms ${theme.transitions.timing_function.emphasized} 240ms infinite`
|
|
96
96
|
},
|
|
97
97
|
'&.exit': {
|
|
98
|
-
opacity: theme.palette.visual_contrast.
|
|
98
|
+
opacity: theme.palette.visual_contrast.low.opacity.press,
|
|
99
99
|
transform: 'scale(0.7)'
|
|
100
100
|
},
|
|
101
101
|
'&.exiting': {
|
|
@@ -115,13 +115,13 @@ const useStyle = styleMethod(theme => ({
|
|
|
115
115
|
timing_function: 'standard'
|
|
116
116
|
}),
|
|
117
117
|
'&.entering': {
|
|
118
|
-
opacity: theme.palette.visual_contrast.
|
|
118
|
+
opacity: theme.palette.visual_contrast.low.opacity.press
|
|
119
119
|
},
|
|
120
120
|
'&.entered': {
|
|
121
|
-
opacity: theme.palette.visual_contrast.
|
|
121
|
+
opacity: theme.palette.visual_contrast.low.opacity.press
|
|
122
122
|
},
|
|
123
123
|
'&.exit': {
|
|
124
|
-
opacity: theme.palette.visual_contrast.
|
|
124
|
+
opacity: theme.palette.visual_contrast.low.opacity.press
|
|
125
125
|
},
|
|
126
126
|
'&.exiting': {
|
|
127
127
|
opacity: '0'
|
|
@@ -413,7 +413,7 @@ const Interaction = props_ => {
|
|
|
413
413
|
children: status => /*#__PURE__*/_jsx("span", {
|
|
414
414
|
className: classNames([staticClassName('Interaction', theme) && ['onesy-Interaction-border'], classes.border]),
|
|
415
415
|
style: {
|
|
416
|
-
opacity: status?.indexOf('enter') > -1 ? theme.palette.visual_contrast.
|
|
416
|
+
opacity: status?.indexOf('enter') > -1 ? theme.palette.visual_contrast.low.opacity.press : 0,
|
|
417
417
|
transition: status?.indexOf('exit') > -1 ? theme.methods.transitions.make('opacity', {
|
|
418
418
|
duration: 'complex',
|
|
419
419
|
timing_function: 'standard'
|
package/esm/index.js
CHANGED
package/index.js
CHANGED