funda-ui 4.7.252 → 4.7.255
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/NumberInput/index.js +20 -22
- package/Tooltip/index.d.ts +1 -0
- package/Tooltip/index.js +3 -2
- package/Utils/time.d.ts +5 -1
- package/Utils/time.js +18 -8
- package/lib/cjs/NumberInput/index.js +20 -22
- package/lib/cjs/Tooltip/index.d.ts +1 -0
- package/lib/cjs/Tooltip/index.js +3 -2
- package/lib/cjs/Utils/time.d.ts +5 -1
- package/lib/cjs/Utils/time.js +18 -8
- package/lib/esm/NumberInput/index.tsx +88 -59
- package/lib/esm/Tooltip/index.tsx +6 -1
- package/lib/esm/Utils/libs/time.ts +25 -13
- package/package.json +1 -1
package/NumberInput/index.js
CHANGED
|
@@ -892,7 +892,8 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
892
892
|
arrowBtnContainerClassName = props.arrowBtnContainerClassName,
|
|
893
893
|
increaseIcon = props.increaseIcon,
|
|
894
894
|
decreaseIcon = props.decreaseIcon,
|
|
895
|
-
|
|
895
|
+
_props$hideArrowButto = props.hideArrowButton,
|
|
896
|
+
hideArrowButton = _props$hideArrowButto === void 0 ? false : _props$hideArrowButto,
|
|
896
897
|
requiredLabel = props.requiredLabel,
|
|
897
898
|
disabled = props.disabled,
|
|
898
899
|
required = props.required,
|
|
@@ -923,7 +924,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
923
924
|
attributes = _objectWithoutProperties(props, _excluded);
|
|
924
925
|
var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
|
|
925
926
|
var idRes = id || uniqueID;
|
|
926
|
-
var HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
|
|
927
927
|
var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
928
928
|
var valRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
929
929
|
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value || ''),
|
|
@@ -1093,13 +1093,13 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1093
1093
|
}, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
1094
1094
|
className: "position-relative"
|
|
1095
1095
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
1096
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupWrapperClassName, 'input-group position-relative z-1'), {
|
|
1096
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupWrapperClassName, 'input-group position-relative z-1 d-flex align-items-stretch'), {
|
|
1097
1097
|
'has-left-content': propExist(iconLeft),
|
|
1098
1098
|
'has-right-content': propExist(iconRight) || propExist(units)
|
|
1099
1099
|
})
|
|
1100
|
-
}, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(
|
|
1101
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
|
|
1102
|
-
}, iconLeft)
|
|
1100
|
+
}, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1101
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
|
|
1102
|
+
}, iconLeft) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
|
|
1103
1103
|
ref: function ref(node) {
|
|
1104
1104
|
valRef.current = node;
|
|
1105
1105
|
if (typeof externalRef === 'function') {
|
|
@@ -1112,9 +1112,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1112
1112
|
type: "text",
|
|
1113
1113
|
inputMode: decimalPlaces > 0 ? 'decimal' : 'numeric' // numeric | decimal
|
|
1114
1114
|
,
|
|
1115
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlClassName, 'form-control'),
|
|
1116
|
-
'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
|
|
1117
|
-
}),
|
|
1115
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlClassName, 'form-control')),
|
|
1118
1116
|
id: idRes,
|
|
1119
1117
|
name: name,
|
|
1120
1118
|
min: min || null,
|
|
@@ -1131,20 +1129,16 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1131
1129
|
required: required || null,
|
|
1132
1130
|
readOnly: readOnly || null,
|
|
1133
1131
|
style: style
|
|
1134
|
-
}, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(
|
|
1135
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
|
|
1136
|
-
}, units)
|
|
1137
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
|
|
1138
|
-
}, iconRight)
|
|
1139
|
-
className:
|
|
1140
|
-
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1141
|
-
className: "text-danger"
|
|
1142
|
-
}, "*"))) : ''), HIDE_ARROW ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1143
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(arrowBtnContainerClassName, 'btn-group-vertical position-absolute top-0 end-0 h-100 z-3 border-start'),
|
|
1132
|
+
}, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1133
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
|
|
1134
|
+
}, units) : null, propExist(iconRight) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1135
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
|
|
1136
|
+
}, iconRight) : null, hideArrowButton ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1137
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(arrowBtnContainerClassName, 'btn-group-vertical d-flex flex-column justify-content-center align-items-center border border-start-0 rounded-end'),
|
|
1144
1138
|
role: "group"
|
|
1145
1139
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
|
|
1146
1140
|
type: "button",
|
|
1147
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill'),
|
|
1141
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')),
|
|
1148
1142
|
tabIndex: -1,
|
|
1149
1143
|
onClick: handleIncrement,
|
|
1150
1144
|
disabled: disabled || null
|
|
@@ -1164,7 +1158,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1164
1158
|
height: "24"
|
|
1165
1159
|
})))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
|
|
1166
1160
|
type: "button",
|
|
1167
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill'),
|
|
1161
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')),
|
|
1168
1162
|
tabIndex: -1,
|
|
1169
1163
|
onClick: handleDecrement,
|
|
1170
1164
|
disabled: disabled || null
|
|
@@ -1182,7 +1176,11 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1182
1176
|
fill: "none",
|
|
1183
1177
|
width: "24",
|
|
1184
1178
|
height: "24"
|
|
1185
|
-
})))))))))
|
|
1179
|
+
}))))))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, requiredLabel || requiredLabel === '' ? requiredLabel : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1180
|
+
className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3 z-1"
|
|
1181
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1182
|
+
className: "text-danger"
|
|
1183
|
+
}, "*"))) : '')));
|
|
1186
1184
|
});
|
|
1187
1185
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (NumberInput);
|
|
1188
1186
|
})();
|
package/Tooltip/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare type TooltipProps = {
|
|
3
|
+
triggerClassName?: string;
|
|
3
4
|
wrapperClassName?: string;
|
|
4
5
|
/** The direction of the tip. Defaults to `top`. Possible values are: `top`, `top-right`, `top-left`, `bottom`, `bottom-right`, `bottom-left` */
|
|
5
6
|
direction?: string;
|
package/Tooltip/index.js
CHANGED
|
@@ -1473,7 +1473,8 @@ var useContainerDimensions = function useContainerDimensions(myRef) {
|
|
|
1473
1473
|
return dimensions;
|
|
1474
1474
|
};
|
|
1475
1475
|
var Tooltip = function Tooltip(props) {
|
|
1476
|
-
var
|
|
1476
|
+
var triggerClassName = props.triggerClassName,
|
|
1477
|
+
wrapperClassName = props.wrapperClassName,
|
|
1477
1478
|
direction = props.direction,
|
|
1478
1479
|
offset = props.offset,
|
|
1479
1480
|
exceededSidePosOffset = props.exceededSidePosOffset,
|
|
@@ -1648,7 +1649,7 @@ var Tooltip = function Tooltip(props) {
|
|
|
1648
1649
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
1649
1650
|
ref: rootRef,
|
|
1650
1651
|
"data-overlay-id": "tooltip__wrapper-".concat(idRes),
|
|
1651
|
-
className:
|
|
1652
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__.combinedCls)('tooltip__trigger', (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__.clsWrite)(triggerClassName, 'd-inline-block')),
|
|
1652
1653
|
"data-microtip-position": direction || 'top',
|
|
1653
1654
|
"data-microtip-size": size || 'auto',
|
|
1654
1655
|
onMouseEnter: handleMouseEnter,
|
package/Utils/time.d.ts
CHANGED
|
@@ -4,15 +4,19 @@
|
|
|
4
4
|
* @param {string} endTime - end time in format "HH:mm"
|
|
5
5
|
* @param {number} timeInterval - time interval in minutes
|
|
6
6
|
* @param {boolean} formatRange - if true returns ranges like "10:00 - 11:00", if false returns single times like "10:00"
|
|
7
|
+
* @param {boolean} forceShowSeconds - Whether to force the display of seconds.
|
|
8
|
+
* By default, seconds are displayed only when the timeInterval is less than 1
|
|
7
9
|
* @returns {string[]} Array of time slots
|
|
8
10
|
* @example
|
|
9
11
|
|
|
10
12
|
console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
|
|
11
13
|
console.log(getTimeslots("10:00", "14:00", 60)); // ['10:00', '11:00', '12:00', '13:00']
|
|
14
|
+
console.log(getTimeslots("10:00", "14:00", 60, false, true)); // ['10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00']
|
|
15
|
+
console.log(getTimeslots("10:00", "10:07", 1.188118811881188)); // ['10:00', '10:01', '10:02', '10:03', '10:04', '10:05']
|
|
12
16
|
console.log(getTimeslots("08:00:00", "08:02:00", 0.4)); // ['08:00:00', '08:00:24', '08:00:48', '08:01:12', '08:01:36', '08:02:00']
|
|
13
17
|
|
|
14
18
|
*/
|
|
15
|
-
declare function getTimeslots(startTime: string, endTime: string, timeInterval: number, formatRange?: boolean): string[];
|
|
19
|
+
declare function getTimeslots(startTime: string, endTime: string, timeInterval: number, formatRange?: boolean, forceShowSeconds?: boolean): string[];
|
|
16
20
|
/**
|
|
17
21
|
* Get minutes between two dates
|
|
18
22
|
* @param {Date} startDate - start date
|
package/Utils/time.js
CHANGED
|
@@ -57,17 +57,22 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
57
57
|
* @param {string} endTime - end time in format "HH:mm"
|
|
58
58
|
* @param {number} timeInterval - time interval in minutes
|
|
59
59
|
* @param {boolean} formatRange - if true returns ranges like "10:00 - 11:00", if false returns single times like "10:00"
|
|
60
|
+
* @param {boolean} forceShowSeconds - Whether to force the display of seconds.
|
|
61
|
+
* By default, seconds are displayed only when the timeInterval is less than 1
|
|
60
62
|
* @returns {string[]} Array of time slots
|
|
61
63
|
* @example
|
|
62
64
|
|
|
63
65
|
console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
|
|
64
66
|
console.log(getTimeslots("10:00", "14:00", 60)); // ['10:00', '11:00', '12:00', '13:00']
|
|
67
|
+
console.log(getTimeslots("10:00", "14:00", 60, false, true)); // ['10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00']
|
|
68
|
+
console.log(getTimeslots("10:00", "10:07", 1.188118811881188)); // ['10:00', '10:01', '10:02', '10:03', '10:04', '10:05']
|
|
65
69
|
console.log(getTimeslots("08:00:00", "08:02:00", 0.4)); // ['08:00:00', '08:00:24', '08:00:48', '08:01:12', '08:01:36', '08:02:00']
|
|
66
70
|
|
|
67
71
|
*/
|
|
68
72
|
|
|
69
73
|
function getTimeslots(startTime, endTime, timeInterval) {
|
|
70
74
|
var formatRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
75
|
+
var forceShowSeconds = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
71
76
|
// Parse time string to seconds
|
|
72
77
|
var parseTime = function parseTime(s) {
|
|
73
78
|
var c = s.split(":").map(Number);
|
|
@@ -81,24 +86,32 @@ function getTimeslots(startTime, endTime, timeInterval) {
|
|
|
81
86
|
return str.length < max ? pad("0" + str, max) : str;
|
|
82
87
|
};
|
|
83
88
|
|
|
84
|
-
// Convert seconds to HH:mm:ss
|
|
85
|
-
var convertTime = function convertTime(secs) {
|
|
89
|
+
// Convert seconds to HH:mm or HH:mm:ss
|
|
90
|
+
var convertTime = function convertTime(secs, showSeconds) {
|
|
86
91
|
var hour = Math.floor(secs / 3600);
|
|
87
92
|
var min = Math.floor(secs % 3600 / 60);
|
|
88
93
|
var sec = secs % 60;
|
|
89
|
-
|
|
94
|
+
if (showSeconds) {
|
|
95
|
+
return pad(hour, 2) + ":" + pad(min, 2) + ":" + pad(sec, 2);
|
|
96
|
+
} else {
|
|
97
|
+
return pad(hour, 2) + ":" + pad(min, 2);
|
|
98
|
+
}
|
|
90
99
|
};
|
|
91
100
|
|
|
101
|
+
// Seconds are displayed only when timeInterval < 1
|
|
102
|
+
var showSeconds = forceShowSeconds || timeInterval < 1;
|
|
103
|
+
var intervalInSeconds = showSeconds ? Math.round(timeInterval * 60) : timeInterval * 60;
|
|
104
|
+
|
|
92
105
|
// Calculate time slots
|
|
93
106
|
var calculateTimeSlot = function calculateTimeSlot(_startTime, _endTime, _timeInterval) {
|
|
94
107
|
var timeSlots = [];
|
|
95
108
|
var currentTime = _startTime;
|
|
96
109
|
while (currentTime <= _endTime) {
|
|
97
110
|
if (formatRange) {
|
|
98
|
-
var t = convertTime(currentTime) + ' - ' + convertTime(Math.min(currentTime + _timeInterval, _endTime));
|
|
111
|
+
var t = convertTime(currentTime, showSeconds) + ' - ' + convertTime(Math.min(currentTime + _timeInterval, _endTime), showSeconds);
|
|
99
112
|
timeSlots.push(t);
|
|
100
113
|
} else {
|
|
101
|
-
timeSlots.push(convertTime(currentTime));
|
|
114
|
+
timeSlots.push(convertTime(currentTime, showSeconds));
|
|
102
115
|
}
|
|
103
116
|
currentTime += _timeInterval;
|
|
104
117
|
}
|
|
@@ -106,9 +119,6 @@ function getTimeslots(startTime, endTime, timeInterval) {
|
|
|
106
119
|
};
|
|
107
120
|
var inputStartTime = parseTime(startTime);
|
|
108
121
|
var inputEndTime = parseTime(endTime);
|
|
109
|
-
// If timeInterval is not an integer, treat as minutes with decimals, convert to seconds
|
|
110
|
-
var isDecimal = !Number.isInteger(timeInterval);
|
|
111
|
-
var intervalInSeconds = isDecimal ? Math.round(timeInterval * 60) : timeInterval * 60;
|
|
112
122
|
return calculateTimeSlot(inputStartTime, inputEndTime, intervalInSeconds);
|
|
113
123
|
}
|
|
114
124
|
|
|
@@ -892,7 +892,8 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
892
892
|
arrowBtnContainerClassName = props.arrowBtnContainerClassName,
|
|
893
893
|
increaseIcon = props.increaseIcon,
|
|
894
894
|
decreaseIcon = props.decreaseIcon,
|
|
895
|
-
|
|
895
|
+
_props$hideArrowButto = props.hideArrowButton,
|
|
896
|
+
hideArrowButton = _props$hideArrowButto === void 0 ? false : _props$hideArrowButto,
|
|
896
897
|
requiredLabel = props.requiredLabel,
|
|
897
898
|
disabled = props.disabled,
|
|
898
899
|
required = props.required,
|
|
@@ -923,7 +924,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
923
924
|
attributes = _objectWithoutProperties(props, _excluded);
|
|
924
925
|
var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
|
|
925
926
|
var idRes = id || uniqueID;
|
|
926
|
-
var HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
|
|
927
927
|
var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
928
928
|
var valRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
929
929
|
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value || ''),
|
|
@@ -1093,13 +1093,13 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1093
1093
|
}, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
1094
1094
|
className: "position-relative"
|
|
1095
1095
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
1096
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupWrapperClassName, 'input-group position-relative z-1'), {
|
|
1096
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupWrapperClassName, 'input-group position-relative z-1 d-flex align-items-stretch'), {
|
|
1097
1097
|
'has-left-content': propExist(iconLeft),
|
|
1098
1098
|
'has-right-content': propExist(iconRight) || propExist(units)
|
|
1099
1099
|
})
|
|
1100
|
-
}, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(
|
|
1101
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
|
|
1102
|
-
}, iconLeft)
|
|
1100
|
+
}, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1101
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
|
|
1102
|
+
}, iconLeft) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
|
|
1103
1103
|
ref: function ref(node) {
|
|
1104
1104
|
valRef.current = node;
|
|
1105
1105
|
if (typeof externalRef === 'function') {
|
|
@@ -1112,9 +1112,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1112
1112
|
type: "text",
|
|
1113
1113
|
inputMode: decimalPlaces > 0 ? 'decimal' : 'numeric' // numeric | decimal
|
|
1114
1114
|
,
|
|
1115
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlClassName, 'form-control'),
|
|
1116
|
-
'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
|
|
1117
|
-
}),
|
|
1115
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlClassName, 'form-control')),
|
|
1118
1116
|
id: idRes,
|
|
1119
1117
|
name: name,
|
|
1120
1118
|
min: min || null,
|
|
@@ -1131,20 +1129,16 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1131
1129
|
required: required || null,
|
|
1132
1130
|
readOnly: readOnly || null,
|
|
1133
1131
|
style: style
|
|
1134
|
-
}, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(
|
|
1135
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
|
|
1136
|
-
}, units)
|
|
1137
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
|
|
1138
|
-
}, iconRight)
|
|
1139
|
-
className:
|
|
1140
|
-
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1141
|
-
className: "text-danger"
|
|
1142
|
-
}, "*"))) : ''), HIDE_ARROW ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1143
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(arrowBtnContainerClassName, 'btn-group-vertical position-absolute top-0 end-0 h-100 z-3 border-start'),
|
|
1132
|
+
}, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1133
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
|
|
1134
|
+
}, units) : null, propExist(iconRight) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1135
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
|
|
1136
|
+
}, iconRight) : null, hideArrowButton ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1137
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(arrowBtnContainerClassName, 'btn-group-vertical d-flex flex-column justify-content-center align-items-center border border-start-0 rounded-end'),
|
|
1144
1138
|
role: "group"
|
|
1145
1139
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
|
|
1146
1140
|
type: "button",
|
|
1147
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill'),
|
|
1141
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')),
|
|
1148
1142
|
tabIndex: -1,
|
|
1149
1143
|
onClick: handleIncrement,
|
|
1150
1144
|
disabled: disabled || null
|
|
@@ -1164,7 +1158,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1164
1158
|
height: "24"
|
|
1165
1159
|
})))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
|
|
1166
1160
|
type: "button",
|
|
1167
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill'),
|
|
1161
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')),
|
|
1168
1162
|
tabIndex: -1,
|
|
1169
1163
|
onClick: handleDecrement,
|
|
1170
1164
|
disabled: disabled || null
|
|
@@ -1182,7 +1176,11 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1182
1176
|
fill: "none",
|
|
1183
1177
|
width: "24",
|
|
1184
1178
|
height: "24"
|
|
1185
|
-
})))))))))
|
|
1179
|
+
}))))))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, requiredLabel || requiredLabel === '' ? requiredLabel : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1180
|
+
className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3 z-1"
|
|
1181
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
|
1182
|
+
className: "text-danger"
|
|
1183
|
+
}, "*"))) : '')));
|
|
1186
1184
|
});
|
|
1187
1185
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (NumberInput);
|
|
1188
1186
|
})();
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare type TooltipProps = {
|
|
3
|
+
triggerClassName?: string;
|
|
3
4
|
wrapperClassName?: string;
|
|
4
5
|
/** The direction of the tip. Defaults to `top`. Possible values are: `top`, `top-right`, `top-left`, `bottom`, `bottom-right`, `bottom-left` */
|
|
5
6
|
direction?: string;
|
package/lib/cjs/Tooltip/index.js
CHANGED
|
@@ -1473,7 +1473,8 @@ var useContainerDimensions = function useContainerDimensions(myRef) {
|
|
|
1473
1473
|
return dimensions;
|
|
1474
1474
|
};
|
|
1475
1475
|
var Tooltip = function Tooltip(props) {
|
|
1476
|
-
var
|
|
1476
|
+
var triggerClassName = props.triggerClassName,
|
|
1477
|
+
wrapperClassName = props.wrapperClassName,
|
|
1477
1478
|
direction = props.direction,
|
|
1478
1479
|
offset = props.offset,
|
|
1479
1480
|
exceededSidePosOffset = props.exceededSidePosOffset,
|
|
@@ -1648,7 +1649,7 @@ var Tooltip = function Tooltip(props) {
|
|
|
1648
1649
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
1649
1650
|
ref: rootRef,
|
|
1650
1651
|
"data-overlay-id": "tooltip__wrapper-".concat(idRes),
|
|
1651
|
-
className:
|
|
1652
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__.combinedCls)('tooltip__trigger', (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__.clsWrite)(triggerClassName, 'd-inline-block')),
|
|
1652
1653
|
"data-microtip-position": direction || 'top',
|
|
1653
1654
|
"data-microtip-size": size || 'auto',
|
|
1654
1655
|
onMouseEnter: handleMouseEnter,
|
package/lib/cjs/Utils/time.d.ts
CHANGED
|
@@ -4,15 +4,19 @@
|
|
|
4
4
|
* @param {string} endTime - end time in format "HH:mm"
|
|
5
5
|
* @param {number} timeInterval - time interval in minutes
|
|
6
6
|
* @param {boolean} formatRange - if true returns ranges like "10:00 - 11:00", if false returns single times like "10:00"
|
|
7
|
+
* @param {boolean} forceShowSeconds - Whether to force the display of seconds.
|
|
8
|
+
* By default, seconds are displayed only when the timeInterval is less than 1
|
|
7
9
|
* @returns {string[]} Array of time slots
|
|
8
10
|
* @example
|
|
9
11
|
|
|
10
12
|
console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
|
|
11
13
|
console.log(getTimeslots("10:00", "14:00", 60)); // ['10:00', '11:00', '12:00', '13:00']
|
|
14
|
+
console.log(getTimeslots("10:00", "14:00", 60, false, true)); // ['10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00']
|
|
15
|
+
console.log(getTimeslots("10:00", "10:07", 1.188118811881188)); // ['10:00', '10:01', '10:02', '10:03', '10:04', '10:05']
|
|
12
16
|
console.log(getTimeslots("08:00:00", "08:02:00", 0.4)); // ['08:00:00', '08:00:24', '08:00:48', '08:01:12', '08:01:36', '08:02:00']
|
|
13
17
|
|
|
14
18
|
*/
|
|
15
|
-
declare function getTimeslots(startTime: string, endTime: string, timeInterval: number, formatRange?: boolean): string[];
|
|
19
|
+
declare function getTimeslots(startTime: string, endTime: string, timeInterval: number, formatRange?: boolean, forceShowSeconds?: boolean): string[];
|
|
16
20
|
/**
|
|
17
21
|
* Get minutes between two dates
|
|
18
22
|
* @param {Date} startDate - start date
|
package/lib/cjs/Utils/time.js
CHANGED
|
@@ -57,17 +57,22 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
57
57
|
* @param {string} endTime - end time in format "HH:mm"
|
|
58
58
|
* @param {number} timeInterval - time interval in minutes
|
|
59
59
|
* @param {boolean} formatRange - if true returns ranges like "10:00 - 11:00", if false returns single times like "10:00"
|
|
60
|
+
* @param {boolean} forceShowSeconds - Whether to force the display of seconds.
|
|
61
|
+
* By default, seconds are displayed only when the timeInterval is less than 1
|
|
60
62
|
* @returns {string[]} Array of time slots
|
|
61
63
|
* @example
|
|
62
64
|
|
|
63
65
|
console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
|
|
64
66
|
console.log(getTimeslots("10:00", "14:00", 60)); // ['10:00', '11:00', '12:00', '13:00']
|
|
67
|
+
console.log(getTimeslots("10:00", "14:00", 60, false, true)); // ['10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00']
|
|
68
|
+
console.log(getTimeslots("10:00", "10:07", 1.188118811881188)); // ['10:00', '10:01', '10:02', '10:03', '10:04', '10:05']
|
|
65
69
|
console.log(getTimeslots("08:00:00", "08:02:00", 0.4)); // ['08:00:00', '08:00:24', '08:00:48', '08:01:12', '08:01:36', '08:02:00']
|
|
66
70
|
|
|
67
71
|
*/
|
|
68
72
|
|
|
69
73
|
function getTimeslots(startTime, endTime, timeInterval) {
|
|
70
74
|
var formatRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
75
|
+
var forceShowSeconds = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
71
76
|
// Parse time string to seconds
|
|
72
77
|
var parseTime = function parseTime(s) {
|
|
73
78
|
var c = s.split(":").map(Number);
|
|
@@ -81,24 +86,32 @@ function getTimeslots(startTime, endTime, timeInterval) {
|
|
|
81
86
|
return str.length < max ? pad("0" + str, max) : str;
|
|
82
87
|
};
|
|
83
88
|
|
|
84
|
-
// Convert seconds to HH:mm:ss
|
|
85
|
-
var convertTime = function convertTime(secs) {
|
|
89
|
+
// Convert seconds to HH:mm or HH:mm:ss
|
|
90
|
+
var convertTime = function convertTime(secs, showSeconds) {
|
|
86
91
|
var hour = Math.floor(secs / 3600);
|
|
87
92
|
var min = Math.floor(secs % 3600 / 60);
|
|
88
93
|
var sec = secs % 60;
|
|
89
|
-
|
|
94
|
+
if (showSeconds) {
|
|
95
|
+
return pad(hour, 2) + ":" + pad(min, 2) + ":" + pad(sec, 2);
|
|
96
|
+
} else {
|
|
97
|
+
return pad(hour, 2) + ":" + pad(min, 2);
|
|
98
|
+
}
|
|
90
99
|
};
|
|
91
100
|
|
|
101
|
+
// Seconds are displayed only when timeInterval < 1
|
|
102
|
+
var showSeconds = forceShowSeconds || timeInterval < 1;
|
|
103
|
+
var intervalInSeconds = showSeconds ? Math.round(timeInterval * 60) : timeInterval * 60;
|
|
104
|
+
|
|
92
105
|
// Calculate time slots
|
|
93
106
|
var calculateTimeSlot = function calculateTimeSlot(_startTime, _endTime, _timeInterval) {
|
|
94
107
|
var timeSlots = [];
|
|
95
108
|
var currentTime = _startTime;
|
|
96
109
|
while (currentTime <= _endTime) {
|
|
97
110
|
if (formatRange) {
|
|
98
|
-
var t = convertTime(currentTime) + ' - ' + convertTime(Math.min(currentTime + _timeInterval, _endTime));
|
|
111
|
+
var t = convertTime(currentTime, showSeconds) + ' - ' + convertTime(Math.min(currentTime + _timeInterval, _endTime), showSeconds);
|
|
99
112
|
timeSlots.push(t);
|
|
100
113
|
} else {
|
|
101
|
-
timeSlots.push(convertTime(currentTime));
|
|
114
|
+
timeSlots.push(convertTime(currentTime, showSeconds));
|
|
102
115
|
}
|
|
103
116
|
currentTime += _timeInterval;
|
|
104
117
|
}
|
|
@@ -106,9 +119,6 @@ function getTimeslots(startTime, endTime, timeInterval) {
|
|
|
106
119
|
};
|
|
107
120
|
var inputStartTime = parseTime(startTime);
|
|
108
121
|
var inputEndTime = parseTime(endTime);
|
|
109
|
-
// If timeInterval is not an integer, treat as minutes with decimals, convert to seconds
|
|
110
|
-
var isDecimal = !Number.isInteger(timeInterval);
|
|
111
|
-
var intervalInSeconds = isDecimal ? Math.round(timeInterval * 60) : timeInterval * 60;
|
|
112
122
|
return calculateTimeSlot(inputStartTime, inputEndTime, intervalInSeconds);
|
|
113
123
|
}
|
|
114
124
|
|
|
@@ -63,7 +63,7 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
|
|
|
63
63
|
arrowBtnContainerClassName,
|
|
64
64
|
increaseIcon,
|
|
65
65
|
decreaseIcon,
|
|
66
|
-
hideArrowButton,
|
|
66
|
+
hideArrowButton = false,
|
|
67
67
|
requiredLabel,
|
|
68
68
|
disabled,
|
|
69
69
|
required,
|
|
@@ -93,7 +93,6 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
|
|
|
93
93
|
|
|
94
94
|
const uniqueID = useComId();
|
|
95
95
|
const idRes = id || uniqueID;
|
|
96
|
-
const HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
|
|
97
96
|
const rootRef = useRef<any>(null);
|
|
98
97
|
const valRef = useRef<any>(null);
|
|
99
98
|
const [changedVal, setChangedVal] = useState<string>(value || '');
|
|
@@ -288,16 +287,22 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
|
|
|
288
287
|
|
|
289
288
|
<div className="position-relative">
|
|
290
289
|
|
|
291
|
-
{/* INPUT GROUP*/}
|
|
292
|
-
<div
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
290
|
+
{/* FLEX INPUT GROUP: Use flexbox to align input, units, iconRight, and arrow buttons */}
|
|
291
|
+
<div
|
|
292
|
+
className={combinedCls(
|
|
293
|
+
clsWrite(controlGroupWrapperClassName, 'input-group position-relative z-1 d-flex align-items-stretch'),
|
|
294
|
+
{
|
|
295
|
+
'has-left-content': propExist(iconLeft),
|
|
296
|
+
'has-right-content': propExist(iconRight) || propExist(units)
|
|
297
|
+
}
|
|
298
|
+
)}
|
|
299
|
+
>
|
|
300
|
+
{/* Left icon, if present */}
|
|
301
|
+
{propExist(iconLeft) ? (
|
|
302
|
+
<span className={clsWrite(controlGroupTextClassName, 'input-group-text d-flex align-items-center')}>{iconLeft}</span>
|
|
303
|
+
) : null}
|
|
304
|
+
|
|
305
|
+
{/* Main input field */}
|
|
301
306
|
<input
|
|
302
307
|
ref={(node) => {
|
|
303
308
|
valRef.current = node;
|
|
@@ -307,15 +312,11 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
|
|
|
307
312
|
externalRef.current = node;
|
|
308
313
|
}
|
|
309
314
|
}}
|
|
310
|
-
|
|
311
315
|
tabIndex={tabIndex || 0}
|
|
312
316
|
type="text"
|
|
313
|
-
inputMode={decimalPlaces > 0 ? 'decimal' : 'numeric'
|
|
317
|
+
inputMode={decimalPlaces > 0 ? 'decimal' : 'numeric'} // numeric | decimal
|
|
314
318
|
className={combinedCls(
|
|
315
|
-
clsWrite(controlClassName, 'form-control')
|
|
316
|
-
{
|
|
317
|
-
'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
|
|
318
|
-
}
|
|
319
|
+
clsWrite(controlClassName, 'form-control')
|
|
319
320
|
)}
|
|
320
321
|
id={idRes}
|
|
321
322
|
name={name}
|
|
@@ -335,50 +336,78 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
|
|
|
335
336
|
style={style}
|
|
336
337
|
{...attributes}
|
|
337
338
|
/>
|
|
338
|
-
{propExist(units) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{units}</span></> : null}
|
|
339
|
-
{propExist(iconRight) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconRight}</span></> : null}
|
|
340
339
|
|
|
341
|
-
{
|
|
340
|
+
{/* Units, if present */}
|
|
341
|
+
{propExist(units) ? (
|
|
342
|
+
<span className={clsWrite(controlGroupTextClassName, 'input-group-text d-flex align-items-center')}>{units}</span>
|
|
343
|
+
) : null}
|
|
344
|
+
|
|
345
|
+
{/* Right icon, if present */}
|
|
346
|
+
{propExist(iconRight) ? (
|
|
347
|
+
<span className={clsWrite(controlGroupTextClassName, 'input-group-text d-flex align-items-center')}>{iconRight}</span>
|
|
348
|
+
) : null}
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
{/* ARROW GROUP*/}
|
|
352
|
+
{hideArrowButton ? null : <>
|
|
353
|
+
<span
|
|
354
|
+
className={clsWrite(
|
|
355
|
+
arrowBtnContainerClassName,
|
|
356
|
+
'btn-group-vertical d-flex flex-column justify-content-center align-items-center border border-start-0 rounded-end',
|
|
357
|
+
)}
|
|
358
|
+
role="group"
|
|
359
|
+
>
|
|
360
|
+
<button
|
|
361
|
+
type="button"
|
|
362
|
+
className={combinedCls(
|
|
363
|
+
clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')
|
|
364
|
+
)}
|
|
365
|
+
tabIndex={-1}
|
|
366
|
+
onClick={handleIncrement}
|
|
367
|
+
disabled={disabled || null}
|
|
368
|
+
>
|
|
369
|
+
<span>{increaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
|
|
370
|
+
<path d="M18.5,15.5l-6-7l-6,7H18.5z" />
|
|
371
|
+
<rect fill="none" width="24" height="24" />
|
|
372
|
+
<rect fill="none" width="24" height="24" />
|
|
373
|
+
</svg>}</span>
|
|
374
|
+
</button>
|
|
375
|
+
|
|
376
|
+
<button
|
|
377
|
+
type="button"
|
|
378
|
+
className={combinedCls(
|
|
379
|
+
clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')
|
|
380
|
+
)}
|
|
381
|
+
tabIndex={-1}
|
|
382
|
+
onClick={handleDecrement}
|
|
383
|
+
disabled={disabled || null}
|
|
384
|
+
>
|
|
385
|
+
<span>{decreaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
|
|
386
|
+
<path d="M6.5,8.5l6,7l6-7H6.5z"/>
|
|
387
|
+
<rect fill="none" width="24" height="24" />
|
|
388
|
+
<rect fill="none" width="24" height="24" />
|
|
389
|
+
</svg>}</span>
|
|
390
|
+
</button>
|
|
391
|
+
</span>
|
|
392
|
+
</>}
|
|
393
|
+
{/* /ARROW GROUP*/}
|
|
342
394
|
|
|
343
395
|
</div>
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
<span>{increaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
|
|
360
|
-
<path d="M18.5,15.5l-6-7l-6,7H18.5z" />
|
|
361
|
-
<rect fill="none" width="24" height="24" />
|
|
362
|
-
<rect fill="none" width="24" height="24" />
|
|
363
|
-
</svg>}</span>
|
|
364
|
-
</button>
|
|
365
|
-
|
|
366
|
-
<button
|
|
367
|
-
type="button"
|
|
368
|
-
className={clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')}
|
|
369
|
-
tabIndex={-1}
|
|
370
|
-
onClick={handleDecrement}
|
|
371
|
-
disabled={disabled || null}
|
|
372
|
-
>
|
|
373
|
-
<span>{decreaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
|
|
374
|
-
<path d="M6.5,8.5l6,7l6-7H6.5z"/>
|
|
375
|
-
<rect fill="none" width="24" height="24" />
|
|
376
|
-
<rect fill="none" width="24" height="24" />
|
|
377
|
-
</svg>}</span>
|
|
378
|
-
</button>
|
|
379
|
-
</span>
|
|
380
|
-
</>}
|
|
381
|
-
{/* /ARROW GROUP*/}
|
|
396
|
+
{/* /FLEX INPUT GROUP*/}
|
|
397
|
+
|
|
398
|
+
|
|
399
|
+
{/* Required label, if present */}
|
|
400
|
+
{required ? (
|
|
401
|
+
<>
|
|
402
|
+
{requiredLabel || requiredLabel === '' ? requiredLabel : (
|
|
403
|
+
<span className="position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3 z-1">
|
|
404
|
+
<span className="text-danger">*</span>
|
|
405
|
+
</span>
|
|
406
|
+
)}
|
|
407
|
+
</>
|
|
408
|
+
) : ''}
|
|
409
|
+
|
|
410
|
+
|
|
382
411
|
</div>
|
|
383
412
|
|
|
384
413
|
|
|
@@ -14,6 +14,7 @@ import { getElCSS } from 'funda-utils/dist/cjs/inputsCalculation';
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
export type TooltipProps = {
|
|
17
|
+
triggerClassName?: string;
|
|
17
18
|
wrapperClassName?: string;
|
|
18
19
|
/** The direction of the tip. Defaults to `top`. Possible values are: `top`, `top-right`, `top-left`, `bottom`, `bottom-right`, `bottom-left` */
|
|
19
20
|
direction?: string;
|
|
@@ -64,6 +65,7 @@ const useContainerDimensions = (myRef: any) => {
|
|
|
64
65
|
|
|
65
66
|
const Tooltip = (props: TooltipProps) => {
|
|
66
67
|
const {
|
|
68
|
+
triggerClassName,
|
|
67
69
|
wrapperClassName,
|
|
68
70
|
direction,
|
|
69
71
|
offset,
|
|
@@ -267,7 +269,10 @@ const Tooltip = (props: TooltipProps) => {
|
|
|
267
269
|
<div
|
|
268
270
|
ref={rootRef}
|
|
269
271
|
data-overlay-id={`tooltip__wrapper-${idRes}`}
|
|
270
|
-
className=
|
|
272
|
+
className={combinedCls(
|
|
273
|
+
'tooltip__trigger',
|
|
274
|
+
clsWrite(triggerClassName, 'd-inline-block')
|
|
275
|
+
)}
|
|
271
276
|
data-microtip-position={direction || 'top'}
|
|
272
277
|
data-microtip-size={size || 'auto'}
|
|
273
278
|
onMouseEnter={handleMouseEnter}
|
|
@@ -1,14 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Get timeslots from starting and ending time
|
|
3
5
|
* @param {string} startTime - start time in format "HH:mm"
|
|
4
6
|
* @param {string} endTime - end time in format "HH:mm"
|
|
5
7
|
* @param {number} timeInterval - time interval in minutes
|
|
6
8
|
* @param {boolean} formatRange - if true returns ranges like "10:00 - 11:00", if false returns single times like "10:00"
|
|
9
|
+
* @param {boolean} forceShowSeconds - Whether to force the display of seconds.
|
|
10
|
+
* By default, seconds are displayed only when the timeInterval is less than 1
|
|
7
11
|
* @returns {string[]} Array of time slots
|
|
8
12
|
* @example
|
|
9
13
|
|
|
10
14
|
console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
|
|
11
15
|
console.log(getTimeslots("10:00", "14:00", 60)); // ['10:00', '11:00', '12:00', '13:00']
|
|
16
|
+
console.log(getTimeslots("10:00", "14:00", 60, false, true)); // ['10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00']
|
|
17
|
+
console.log(getTimeslots("10:00", "10:07", 1.188118811881188)); // ['10:00', '10:01', '10:02', '10:03', '10:04', '10:05']
|
|
12
18
|
console.log(getTimeslots("08:00:00", "08:02:00", 0.4)); // ['08:00:00', '08:00:24', '08:00:48', '08:01:12', '08:01:36', '08:02:00']
|
|
13
19
|
|
|
14
20
|
*/
|
|
@@ -17,7 +23,8 @@ function getTimeslots(
|
|
|
17
23
|
startTime: string,
|
|
18
24
|
endTime: string,
|
|
19
25
|
timeInterval: number,
|
|
20
|
-
formatRange: boolean = false
|
|
26
|
+
formatRange: boolean = false,
|
|
27
|
+
forceShowSeconds = false
|
|
21
28
|
): string[] {
|
|
22
29
|
// Parse time string to seconds
|
|
23
30
|
const parseTime = (s: string): number => {
|
|
@@ -32,24 +39,33 @@ function getTimeslots(
|
|
|
32
39
|
return str.length < max ? pad("0" + str, max) : str;
|
|
33
40
|
}
|
|
34
41
|
|
|
35
|
-
// Convert seconds to HH:mm:ss
|
|
36
|
-
const convertTime = (secs: number): string => {
|
|
42
|
+
// Convert seconds to HH:mm or HH:mm:ss
|
|
43
|
+
const convertTime = (secs: number, showSeconds: boolean): string => {
|
|
37
44
|
const hour = Math.floor(secs / 3600);
|
|
38
45
|
const min = Math.floor((secs % 3600) / 60);
|
|
39
46
|
const sec = secs % 60;
|
|
40
|
-
|
|
47
|
+
if (showSeconds) {
|
|
48
|
+
return pad(hour, 2) + ":" + pad(min, 2) + ":" + pad(sec, 2);
|
|
49
|
+
} else {
|
|
50
|
+
return pad(hour, 2) + ":" + pad(min, 2);
|
|
51
|
+
}
|
|
41
52
|
}
|
|
42
53
|
|
|
54
|
+
|
|
55
|
+
// Seconds are displayed only when timeInterval < 1
|
|
56
|
+
const showSeconds = forceShowSeconds || timeInterval < 1;
|
|
57
|
+
const intervalInSeconds = showSeconds ? Math.round(timeInterval * 60) : timeInterval * 60;
|
|
58
|
+
|
|
43
59
|
// Calculate time slots
|
|
44
60
|
const calculateTimeSlot = (_startTime: number, _endTime: number, _timeInterval: number): string[] => {
|
|
45
61
|
const timeSlots: string[] = [];
|
|
46
62
|
let currentTime = _startTime;
|
|
47
63
|
while (currentTime <= _endTime) {
|
|
48
64
|
if (formatRange) {
|
|
49
|
-
const t = convertTime(currentTime) + ' - ' + convertTime(Math.min(currentTime + _timeInterval, _endTime));
|
|
65
|
+
const t = convertTime(currentTime, showSeconds) + ' - ' + convertTime(Math.min(currentTime + _timeInterval, _endTime), showSeconds);
|
|
50
66
|
timeSlots.push(t);
|
|
51
67
|
} else {
|
|
52
|
-
timeSlots.push(convertTime(currentTime));
|
|
68
|
+
timeSlots.push(convertTime(currentTime, showSeconds));
|
|
53
69
|
}
|
|
54
70
|
currentTime += _timeInterval;
|
|
55
71
|
}
|
|
@@ -58,13 +74,12 @@ function getTimeslots(
|
|
|
58
74
|
|
|
59
75
|
const inputStartTime = parseTime(startTime);
|
|
60
76
|
const inputEndTime = parseTime(endTime);
|
|
61
|
-
|
|
62
|
-
const isDecimal = !Number.isInteger(timeInterval);
|
|
63
|
-
const intervalInSeconds = isDecimal ? Math.round(timeInterval * 60) : timeInterval * 60;
|
|
77
|
+
|
|
64
78
|
return calculateTimeSlot(inputStartTime, inputEndTime, intervalInSeconds);
|
|
65
79
|
}
|
|
66
80
|
|
|
67
81
|
|
|
82
|
+
|
|
68
83
|
/**
|
|
69
84
|
* Get minutes between two dates
|
|
70
85
|
* @param {Date} startDate - start date
|
|
@@ -93,7 +108,7 @@ function getMinutesBetweenTime(startTime: string, endTime: string) {
|
|
|
93
108
|
|
|
94
109
|
if (diff < 0) { sMin -= 12 * 60; diff = eMin - sMin }
|
|
95
110
|
const h = Math.floor(diff / 60),
|
|
96
|
-
|
|
111
|
+
m = diff % 60;
|
|
97
112
|
return "" + pad(h) + ":" + pad(m);
|
|
98
113
|
}
|
|
99
114
|
|
|
@@ -122,6 +137,3 @@ export {
|
|
|
122
137
|
convertTimeToMin
|
|
123
138
|
};
|
|
124
139
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"author": "UIUX Lab",
|
|
3
3
|
"email": "uiuxlab@gmail.com",
|
|
4
4
|
"name": "funda-ui",
|
|
5
|
-
"version": "4.7.
|
|
5
|
+
"version": "4.7.255",
|
|
6
6
|
"description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|