dce-reactkit 4.2.4-beta-timestamp.2 → 4.2.6
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/cjs/index.js +255 -74
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/ProgressBar.d.ts +22 -0
- package/dist/cjs/types/index.d.ts +2 -1
- package/dist/cjs/types/types/ProgressBarSize.d.ts +10 -0
- package/dist/esm/index.js +255 -75
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/ProgressBar.d.ts +22 -0
- package/dist/esm/types/index.d.ts +2 -1
- package/dist/esm/types/types/ProgressBarSize.d.ts +10 -0
- package/dist/index.d.ts +77 -47
- package/package.json +1 -1
- package/src/components/ProgressBar.tsx +347 -0
- package/src/helpers/getTimestampFromTimeInfoInET.ts +10 -58
- package/src/index.ts +2 -0
- package/src/types/ProgressBarSize.ts +11 -0
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Customizable Progress Bar component using Bootstrap styles
|
|
3
|
+
* @author Allison Zhang
|
|
4
|
+
*/
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import Variant from '../types/Variant';
|
|
7
|
+
import ProgressBarSize from '../types/ProgressBarSize';
|
|
8
|
+
type Props = (({
|
|
9
|
+
percentProgress: number;
|
|
10
|
+
numDecimalPlaces?: number;
|
|
11
|
+
} | {
|
|
12
|
+
numComplete: number;
|
|
13
|
+
total: number;
|
|
14
|
+
}) & {
|
|
15
|
+
striped?: boolean;
|
|
16
|
+
variant?: Variant;
|
|
17
|
+
bgVariant?: Variant;
|
|
18
|
+
showOutline?: boolean;
|
|
19
|
+
size?: ProgressBarSize;
|
|
20
|
+
});
|
|
21
|
+
declare const ProgressBar: React.FC<Props>;
|
|
22
|
+
export default ProgressBar;
|
|
@@ -23,6 +23,7 @@ import ToggleSwitch from './components/ToggleSwitch';
|
|
|
23
23
|
import AutoscrollToBottomContainer from './components/AutoscrollToBottomContainer';
|
|
24
24
|
import MultiSwitch from './components/MultiSwitch';
|
|
25
25
|
import Dropdown from './components/Dropdown';
|
|
26
|
+
import ProgressBar from './components/ProgressBar';
|
|
26
27
|
import ErrorWithCode from './errors/ErrorWithCode';
|
|
27
28
|
import MINUTE_IN_MS from './constants/MINUTE_IN_MS';
|
|
28
29
|
import HOUR_IN_MS from './constants/HOUR_IN_MS';
|
|
@@ -107,4 +108,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
|
|
|
107
108
|
import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
|
|
108
109
|
import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
|
|
109
110
|
import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
|
|
110
|
-
export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, SimpleTimeChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_ROUTE_PATH, LOG_REVIEW_STATUS_ROUTE, LOG_REVIEW_GET_LOGS_ROUTE, SELECT_ADMIN_CHECK_ROUTE, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, getWordCount, cloneDeep, getTimestampFromTimeInfoInET, isSelectAdmin, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, ParamType, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, LogTypeSpecificInfo, LogMainInfo, LogSourceSpecificInfo, LogLevel, IntelliTableColumn, DropdownItemType, LogReviewerFilterState, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, };
|
|
111
|
+
export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, SimpleTimeChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, ProgressBar, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_ROUTE_PATH, LOG_REVIEW_STATUS_ROUTE, LOG_REVIEW_GET_LOGS_ROUTE, SELECT_ADMIN_CHECK_ROUTE, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, getWordCount, cloneDeep, getTimestampFromTimeInfoInET, isSelectAdmin, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, ParamType, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, LogTypeSpecificInfo, LogMainInfo, LogSourceSpecificInfo, LogLevel, IntelliTableColumn, DropdownItemType, LogReviewerFilterState, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, };
|
package/dist/esm/index.js
CHANGED
|
@@ -882,7 +882,7 @@ var ReactDOM = /*@__PURE__*/getDefaultExportFromCjs(reactDom.exports);
|
|
|
882
882
|
/*------------------------------------------------------------------------*/
|
|
883
883
|
/* -------------------------------- Style ------------------------------- */
|
|
884
884
|
/*------------------------------------------------------------------------*/
|
|
885
|
-
const style$
|
|
885
|
+
const style$b = `
|
|
886
886
|
/* Container fades in */
|
|
887
887
|
.LoadingSpinner-container {
|
|
888
888
|
animation-name: LoadingSpinner-container-fade-in;
|
|
@@ -960,7 +960,7 @@ const LoadingSpinner = () => {
|
|
|
960
960
|
/*------------------------------------------------------------------------*/
|
|
961
961
|
// Add all four blips to a container
|
|
962
962
|
return (React__default.createElement("div", { className: "text-center LoadingSpinner LoadingSpinner-container" },
|
|
963
|
-
React__default.createElement("style", null, style$
|
|
963
|
+
React__default.createElement("style", null, style$b),
|
|
964
964
|
React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-1 me-1" }),
|
|
965
965
|
React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-2 me-1" }),
|
|
966
966
|
React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-3 me-1" }),
|
|
@@ -1224,7 +1224,7 @@ const getNextUniqueId = () => {
|
|
|
1224
1224
|
/*------------------------------------------------------------------------*/
|
|
1225
1225
|
/* -------------------------------- Style ------------------------------- */
|
|
1226
1226
|
/*------------------------------------------------------------------------*/
|
|
1227
|
-
const style$
|
|
1227
|
+
const style$a = `
|
|
1228
1228
|
.Modal-backdrop {
|
|
1229
1229
|
position: fixed;
|
|
1230
1230
|
top: 0;
|
|
@@ -1423,7 +1423,7 @@ const Modal = (props) => {
|
|
|
1423
1423
|
left: 0,
|
|
1424
1424
|
right: 0,
|
|
1425
1425
|
} },
|
|
1426
|
-
React__default.createElement("style", null, style$
|
|
1426
|
+
React__default.createElement("style", null, style$a),
|
|
1427
1427
|
React__default.createElement("div", { className: `Modal-backdrop ${backdropAnimationClass}`, style: {
|
|
1428
1428
|
zIndex: baseZIndex + 1,
|
|
1429
1429
|
}, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -2074,7 +2074,7 @@ const showSessionExpiredMessage = () => __awaiter(void 0, void 0, void 0, functi
|
|
|
2074
2074
|
/*------------------------------------------------------------------------*/
|
|
2075
2075
|
/* -------------------------------- Style ------------------------------- */
|
|
2076
2076
|
/*------------------------------------------------------------------------*/
|
|
2077
|
-
const style$
|
|
2077
|
+
const style$9 = `
|
|
2078
2078
|
.AppWrapper-leave-to-url-notice {
|
|
2079
2079
|
opacity: 0;
|
|
2080
2080
|
|
|
@@ -2288,7 +2288,7 @@ const AppWrapper = (props) => {
|
|
|
2288
2288
|
/* --------------- Main UI -------------- */
|
|
2289
2289
|
/*----------------------------------------*/
|
|
2290
2290
|
return (React__default.createElement(React__default.Fragment, null,
|
|
2291
|
-
React__default.createElement("style", null, style$
|
|
2291
|
+
React__default.createElement("style", null, style$9),
|
|
2292
2292
|
React__default.createElement("style", null, tooltipStyle),
|
|
2293
2293
|
modal,
|
|
2294
2294
|
customModalPortals,
|
|
@@ -2302,7 +2302,7 @@ const AppWrapper = (props) => {
|
|
|
2302
2302
|
/*------------------------------------------------------------------------*/
|
|
2303
2303
|
/* -------------------------------- Style ------------------------------- */
|
|
2304
2304
|
/*------------------------------------------------------------------------*/
|
|
2305
|
-
const style$
|
|
2305
|
+
const style$8 = `
|
|
2306
2306
|
/* Tab Box */
|
|
2307
2307
|
.TabBox-box {
|
|
2308
2308
|
/* Light Border */
|
|
@@ -2392,7 +2392,7 @@ const TabBox = (props) => {
|
|
|
2392
2392
|
/* ------------------------------- Render ------------------------------- */
|
|
2393
2393
|
/*------------------------------------------------------------------------*/
|
|
2394
2394
|
return (React__default.createElement("div", { className: `TabBox-container ${noBottomMargin ? '' : 'mb-2'}` },
|
|
2395
|
-
React__default.createElement("style", null, style$
|
|
2395
|
+
React__default.createElement("style", null, style$8),
|
|
2396
2396
|
React__default.createElement("div", { className: "TabBox-title-container" },
|
|
2397
2397
|
React__default.createElement("div", { className: "TabBox-title", style: { minWidth: minTitleWidth } }, title),
|
|
2398
2398
|
topRightChildren && (React__default.createElement("div", { className: "TabBox-title-right-container" },
|
|
@@ -3025,7 +3025,7 @@ const SimpleTimeChooser = (props) => {
|
|
|
3025
3025
|
/*------------------------------------------------------------------------*/
|
|
3026
3026
|
/* -------------------------------- Style ------------------------------- */
|
|
3027
3027
|
/*------------------------------------------------------------------------*/
|
|
3028
|
-
const style$
|
|
3028
|
+
const style$7 = `
|
|
3029
3029
|
.Drawer-container {
|
|
3030
3030
|
margin-left: 1rem;
|
|
3031
3031
|
margin-right: 1rem;
|
|
@@ -3061,7 +3061,7 @@ const Drawer = (props) => {
|
|
|
3061
3061
|
? '#E2E3E5'
|
|
3062
3062
|
: (customBackgroundColor !== null && customBackgroundColor !== void 0 ? customBackgroundColor : undefined)),
|
|
3063
3063
|
} },
|
|
3064
|
-
React__default.createElement("style", null, style$
|
|
3064
|
+
React__default.createElement("style", null, style$7),
|
|
3065
3065
|
children));
|
|
3066
3066
|
};
|
|
3067
3067
|
|
|
@@ -3072,7 +3072,7 @@ const Drawer = (props) => {
|
|
|
3072
3072
|
/*------------------------------------------------------------------------*/
|
|
3073
3073
|
/* -------------------------------- Style ------------------------------- */
|
|
3074
3074
|
/*------------------------------------------------------------------------*/
|
|
3075
|
-
const style$
|
|
3075
|
+
const style$6 = `
|
|
3076
3076
|
.PopSuccessMark-outer-container {
|
|
3077
3077
|
position: relative;
|
|
3078
3078
|
display: inline-block;
|
|
@@ -3177,7 +3177,7 @@ const PopSuccessMark = (props) => {
|
|
|
3177
3177
|
width: `${sizeRem}rem`,
|
|
3178
3178
|
height: `${sizeRem}rem`,
|
|
3179
3179
|
}, "aria-label": "checkmark indicating success" },
|
|
3180
|
-
React__default.createElement("style", null, style$
|
|
3180
|
+
React__default.createElement("style", null, style$6),
|
|
3181
3181
|
React__default.createElement("div", { className: `PopSuccessMark-check-stroke-1 bg-${checkVariant}`, style: {
|
|
3182
3182
|
borderRadius: `${sizeRem / 5}rem`,
|
|
3183
3183
|
} }),
|
|
@@ -3193,7 +3193,7 @@ const PopSuccessMark = (props) => {
|
|
|
3193
3193
|
/*------------------------------------------------------------------------*/
|
|
3194
3194
|
/* -------------------------------- Style ------------------------------- */
|
|
3195
3195
|
/*------------------------------------------------------------------------*/
|
|
3196
|
-
const style$
|
|
3196
|
+
const style$5 = `
|
|
3197
3197
|
.PopFailureMark-outer-container {
|
|
3198
3198
|
position: relative;
|
|
3199
3199
|
display: inline-block;
|
|
@@ -3297,7 +3297,7 @@ const PopFailureMark = (props) => {
|
|
|
3297
3297
|
width: `${sizeRem}rem`,
|
|
3298
3298
|
height: `${sizeRem}rem`,
|
|
3299
3299
|
}, "aria-label": "mark indicating failure" },
|
|
3300
|
-
React__default.createElement("style", null, style$
|
|
3300
|
+
React__default.createElement("style", null, style$5),
|
|
3301
3301
|
React__default.createElement("div", { className: `PopFailureMark-x-stroke-1 bg-${xVariant}`, style: {
|
|
3302
3302
|
borderRadius: `${sizeRem / 5}rem`,
|
|
3303
3303
|
} }),
|
|
@@ -3313,7 +3313,7 @@ const PopFailureMark = (props) => {
|
|
|
3313
3313
|
/*------------------------------------------------------------------------*/
|
|
3314
3314
|
/* -------------------------------- Style ------------------------------- */
|
|
3315
3315
|
/*------------------------------------------------------------------------*/
|
|
3316
|
-
const style$
|
|
3316
|
+
const style$4 = `
|
|
3317
3317
|
.PopPendingMark-outer-container {
|
|
3318
3318
|
position: relative;
|
|
3319
3319
|
display: inline-block;
|
|
@@ -3386,7 +3386,7 @@ const PopPendingMark = (props) => {
|
|
|
3386
3386
|
width: `${sizeRem}rem`,
|
|
3387
3387
|
height: `${sizeRem}rem`,
|
|
3388
3388
|
}, "aria-label": "mark indicating that the item is pending" },
|
|
3389
|
-
React__default.createElement("style", null, style$
|
|
3389
|
+
React__default.createElement("style", null, style$4),
|
|
3390
3390
|
React__default.createElement("div", null,
|
|
3391
3391
|
React__default.createElement(FontAwesomeIcon, { icon: faHourglass, className: `PopPendingMark-hourglass text-${hourglassVariant}`, style: {
|
|
3392
3392
|
fontSize: `${sizeRem * 0.6}rem`,
|
|
@@ -4474,7 +4474,7 @@ var FilterDrawer;
|
|
|
4474
4474
|
/*------------------------------------------------------------------------*/
|
|
4475
4475
|
/* -------------------------------- Style ------------------------------- */
|
|
4476
4476
|
/*------------------------------------------------------------------------*/
|
|
4477
|
-
const style$
|
|
4477
|
+
const style$3 = `
|
|
4478
4478
|
.LogReviewer-outer-container {
|
|
4479
4479
|
/* Full Screen */
|
|
4480
4480
|
display: inline-block;
|
|
@@ -5637,7 +5637,7 @@ const LogReviewer = (props) => {
|
|
|
5637
5637
|
!loading && logs.length > 0 && paginationControls));
|
|
5638
5638
|
/* ---------- Wrap in Modal --------- */
|
|
5639
5639
|
return (React__default.createElement("div", { className: "LogReviewer-outer-container" },
|
|
5640
|
-
React__default.createElement("style", null, style$
|
|
5640
|
+
React__default.createElement("style", null, style$3),
|
|
5641
5641
|
React__default.createElement("div", { className: "LogReviewer-inner-container" },
|
|
5642
5642
|
React__default.createElement("div", { className: "LogReviewer-header" },
|
|
5643
5643
|
React__default.createElement("div", { className: "LogReviewer-header-title" },
|
|
@@ -13906,7 +13906,7 @@ const CreatableMultiselect = (props) => {
|
|
|
13906
13906
|
/*------------------------------------------------------------------------*/
|
|
13907
13907
|
/* -------------------------------- Style ------------------------------- */
|
|
13908
13908
|
/*------------------------------------------------------------------------*/
|
|
13909
|
-
const style$
|
|
13909
|
+
const style$2 = `
|
|
13910
13910
|
.AddOrEditDBEntry-input-label {
|
|
13911
13911
|
min-width: 7rem;
|
|
13912
13912
|
}
|
|
@@ -14284,7 +14284,7 @@ const AddOrEditDBEntry = (props) => {
|
|
|
14284
14284
|
/* --------------- Main UI -------------- */
|
|
14285
14285
|
/*----------------------------------------*/
|
|
14286
14286
|
return (React__default.createElement("div", { className: "alert alert-light text-black" },
|
|
14287
|
-
React__default.createElement("style", null, style$
|
|
14287
|
+
React__default.createElement("style", null, style$2),
|
|
14288
14288
|
body));
|
|
14289
14289
|
};
|
|
14290
14290
|
|
|
@@ -14660,7 +14660,7 @@ const idify = (str) => {
|
|
|
14660
14660
|
/*------------------------------------------------------------------------*/
|
|
14661
14661
|
/* -------------------------------- Style ------------------------------- */
|
|
14662
14662
|
/*------------------------------------------------------------------------*/
|
|
14663
|
-
const style = `
|
|
14663
|
+
const style$1 = `
|
|
14664
14664
|
.AutoscrollToBottomContainer-outer-container {
|
|
14665
14665
|
/* Take up all space */
|
|
14666
14666
|
height: 100%;
|
|
@@ -14896,7 +14896,7 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
14896
14896
|
}
|
|
14897
14897
|
// Main UI
|
|
14898
14898
|
return (React__default.createElement("div", { className: "AutoscrollToBottomContainer-outer-container" },
|
|
14899
|
-
React__default.createElement("style", null, style),
|
|
14899
|
+
React__default.createElement("style", null, style$1),
|
|
14900
14900
|
jumpToBottomButton,
|
|
14901
14901
|
React__default.createElement("div", { className: "AutoscrollToBottomContainer-scrollable-container", onScroll: handleScroll, ref: container },
|
|
14902
14902
|
messageBeforeItems,
|
|
@@ -15299,6 +15299,229 @@ const Dropdown = (props) => {
|
|
|
15299
15299
|
}))));
|
|
15300
15300
|
};
|
|
15301
15301
|
|
|
15302
|
+
/**
|
|
15303
|
+
* Progress bar sizes
|
|
15304
|
+
* @author Allison Zhang
|
|
15305
|
+
*/
|
|
15306
|
+
var ProgressBarSize;
|
|
15307
|
+
(function (ProgressBarSize) {
|
|
15308
|
+
ProgressBarSize["Small"] = "Small";
|
|
15309
|
+
ProgressBarSize["Medium"] = "Medium";
|
|
15310
|
+
ProgressBarSize["Large"] = "Large";
|
|
15311
|
+
})(ProgressBarSize || (ProgressBarSize = {}));
|
|
15312
|
+
var ProgressBarSize$1 = ProgressBarSize;
|
|
15313
|
+
|
|
15314
|
+
/**
|
|
15315
|
+
* Customizable Progress Bar component using Bootstrap styles
|
|
15316
|
+
* @author Allison Zhang
|
|
15317
|
+
*/
|
|
15318
|
+
/*------------------------------------------------------------------------*/
|
|
15319
|
+
/* ------------------------------ Constants ----------------------------- */
|
|
15320
|
+
/*------------------------------------------------------------------------*/
|
|
15321
|
+
// Multiplier for calculating width of number of items
|
|
15322
|
+
const ITEM_WIDTH_MULTIPLIER = 1.3;
|
|
15323
|
+
// Constant for percent width
|
|
15324
|
+
const PERCENT_WIDTH = 3;
|
|
15325
|
+
// Constant for item width
|
|
15326
|
+
const ITEM_WIDTH = 2;
|
|
15327
|
+
/*------------------------------------------------------------------------*/
|
|
15328
|
+
/* -------------------------------- Style ------------------------------- */
|
|
15329
|
+
/*------------------------------------------------------------------------*/
|
|
15330
|
+
// Base styles
|
|
15331
|
+
let style = `
|
|
15332
|
+
.ProgressBar-number-of,
|
|
15333
|
+
.ProgressBar-percent {
|
|
15334
|
+
flex: 0 0 auto;
|
|
15335
|
+
white-space: nowrap;
|
|
15336
|
+
padding-right: 0.5em;
|
|
15337
|
+
padding-left: 0.25em;
|
|
15338
|
+
text-align: right;
|
|
15339
|
+
transition: width .25s ease;
|
|
15340
|
+
}
|
|
15341
|
+
|
|
15342
|
+
.ProgressBar-background {
|
|
15343
|
+
overflow: hidden;
|
|
15344
|
+
}
|
|
15345
|
+
|
|
15346
|
+
.ProgressBar-bar {
|
|
15347
|
+
transition: width 1s ease;
|
|
15348
|
+
overflow: hidden;
|
|
15349
|
+
}
|
|
15350
|
+
`;
|
|
15351
|
+
/*------------------------------------------------------------------------*/
|
|
15352
|
+
/* ------------------------------ Component ----------------------------- */
|
|
15353
|
+
/*------------------------------------------------------------------------*/
|
|
15354
|
+
const ProgressBar = (props) => {
|
|
15355
|
+
/*------------------------------------------------------------------------*/
|
|
15356
|
+
/* -------------------------------- Setup ------------------------------- */
|
|
15357
|
+
/*------------------------------------------------------------------------*/
|
|
15358
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
15359
|
+
/* -------------- Props ------------- */
|
|
15360
|
+
// Destructure props
|
|
15361
|
+
const { striped, variant = Variant$1.Warning, bgVariant = Variant$1.Secondary, showOutline, size = ProgressBarSize$1.Medium, } = props;
|
|
15362
|
+
/* -------------- Status ------------- */
|
|
15363
|
+
// Determine progress status
|
|
15364
|
+
let status;
|
|
15365
|
+
// Check whether to use percent or items
|
|
15366
|
+
if ('percentProgress' in props) {
|
|
15367
|
+
// Percent
|
|
15368
|
+
const { percentProgress, numDecimalPlaces, } = props;
|
|
15369
|
+
status = {
|
|
15370
|
+
usePercent: true,
|
|
15371
|
+
percentProgress,
|
|
15372
|
+
numDecimalPlaces,
|
|
15373
|
+
};
|
|
15374
|
+
}
|
|
15375
|
+
else {
|
|
15376
|
+
// Items
|
|
15377
|
+
const { numComplete, total, } = props;
|
|
15378
|
+
status = {
|
|
15379
|
+
usePercent: false,
|
|
15380
|
+
numComplete,
|
|
15381
|
+
total,
|
|
15382
|
+
};
|
|
15383
|
+
}
|
|
15384
|
+
/*------------------------------------------------------------------------*/
|
|
15385
|
+
/* ------------------------------- Render ------------------------------- */
|
|
15386
|
+
/*------------------------------------------------------------------------*/
|
|
15387
|
+
/*----------------------------------------*/
|
|
15388
|
+
/* ---------------- Sizes --------------- */
|
|
15389
|
+
/*----------------------------------------*/
|
|
15390
|
+
// Size styles
|
|
15391
|
+
switch (size) {
|
|
15392
|
+
case ProgressBarSize$1.Small:
|
|
15393
|
+
// Small size
|
|
15394
|
+
style += `
|
|
15395
|
+
.ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
|
|
15396
|
+
font-size: 1em;
|
|
15397
|
+
}
|
|
15398
|
+
.ProgressBar-container .ProgressBar-background {
|
|
15399
|
+
height: 1.5em;
|
|
15400
|
+
border-radius: 0.5em;
|
|
15401
|
+
}
|
|
15402
|
+
.ProgressBar-container .ProgressBar-bar {
|
|
15403
|
+
height: 1.5em;
|
|
15404
|
+
border-radius: 0.5em;
|
|
15405
|
+
}
|
|
15406
|
+
.ProgressBar-percent {
|
|
15407
|
+
min-width: ${((status.usePercent ? (_a = status.numDecimalPlaces) !== null && _a !== void 0 ? _a : 0 : 0) * 1) + PERCENT_WIDTH}em;
|
|
15408
|
+
max-width: ${((status.usePercent ? (_b = status.numDecimalPlaces) !== null && _b !== void 0 ? _b : 0 : 0) * 1) + PERCENT_WIDTH}em;
|
|
15409
|
+
}
|
|
15410
|
+
.ProgressBar-number-of {
|
|
15411
|
+
min-width: ${((!status.usePercent ? ((_c = status.total) === null || _c === void 0 ? void 0 : _c.toString().length) || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
|
|
15412
|
+
max-width: ${((!status.usePercent ? ((_d = status.total) === null || _d === void 0 ? void 0 : _d.toString().length) || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
|
|
15413
|
+
}
|
|
15414
|
+
`;
|
|
15415
|
+
break;
|
|
15416
|
+
case ProgressBarSize$1.Medium:
|
|
15417
|
+
// Medium size
|
|
15418
|
+
style += `
|
|
15419
|
+
.ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
|
|
15420
|
+
font-size: 1.5em;
|
|
15421
|
+
}
|
|
15422
|
+
.ProgressBar-container .ProgressBar-background {
|
|
15423
|
+
height: 2em;
|
|
15424
|
+
border-radius: 0.7em;
|
|
15425
|
+
}
|
|
15426
|
+
.ProgressBar-container .ProgressBar-bar {
|
|
15427
|
+
height: 2em;
|
|
15428
|
+
border-radius: 0.7em;
|
|
15429
|
+
}
|
|
15430
|
+
.ProgressBar-percent {
|
|
15431
|
+
min-width: ${((status.usePercent ? (_e = status.numDecimalPlaces) !== null && _e !== void 0 ? _e : 0 : 0) * 1) + PERCENT_WIDTH}em;
|
|
15432
|
+
max-width: ${((status.usePercent ? (_f = status.numDecimalPlaces) !== null && _f !== void 0 ? _f : 0 : 0) * 1) + PERCENT_WIDTH}em;
|
|
15433
|
+
}
|
|
15434
|
+
.ProgressBar-number-of {
|
|
15435
|
+
min-width: ${((!status.usePercent ? ((_g = status.total) === null || _g === void 0 ? void 0 : _g.toString().length) || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
|
|
15436
|
+
max-width: ${((!status.usePercent ? ((_h = status.total) === null || _h === void 0 ? void 0 : _h.toString().length) || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
|
|
15437
|
+
}
|
|
15438
|
+
`;
|
|
15439
|
+
break;
|
|
15440
|
+
case ProgressBarSize$1.Large:
|
|
15441
|
+
// Large size
|
|
15442
|
+
style += `
|
|
15443
|
+
.ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
|
|
15444
|
+
font-size: 2em;
|
|
15445
|
+
}
|
|
15446
|
+
.ProgressBar-container .ProgressBar-background {
|
|
15447
|
+
height: 3em;
|
|
15448
|
+
border-radius: 1em;
|
|
15449
|
+
}
|
|
15450
|
+
.ProgressBar-container .ProgressBar-bar {
|
|
15451
|
+
height: 3em;
|
|
15452
|
+
border-radius: 1em;
|
|
15453
|
+
}
|
|
15454
|
+
.ProgressBar-percent {
|
|
15455
|
+
min-width: ${((status.usePercent ? (_j = status.numDecimalPlaces) !== null && _j !== void 0 ? _j : 0 : 0) * 1) + PERCENT_WIDTH}em;
|
|
15456
|
+
max-width: ${((status.usePercent ? (_k = status.numDecimalPlaces) !== null && _k !== void 0 ? _k : 0 : 0) * 1) + PERCENT_WIDTH}em;
|
|
15457
|
+
}
|
|
15458
|
+
.ProgressBar-number-of {
|
|
15459
|
+
min-width: ${((!status.usePercent ? ((_l = status.total) === null || _l === void 0 ? void 0 : _l.toString().length) || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
|
|
15460
|
+
max-width: ${((!status.usePercent ? ((_m = status.total) === null || _m === void 0 ? void 0 : _m.toString().length) || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
|
|
15461
|
+
}
|
|
15462
|
+
`;
|
|
15463
|
+
break;
|
|
15464
|
+
}
|
|
15465
|
+
// Get the width of the outline based on size
|
|
15466
|
+
const outlineWidth = (() => {
|
|
15467
|
+
switch (size) {
|
|
15468
|
+
case ProgressBarSize$1.Small: return '0.05em';
|
|
15469
|
+
case ProgressBarSize$1.Medium: return '0.08em';
|
|
15470
|
+
case ProgressBarSize$1.Large: return '0.1em';
|
|
15471
|
+
default: return '0.05em';
|
|
15472
|
+
}
|
|
15473
|
+
})();
|
|
15474
|
+
/*----------------------------------------*/
|
|
15475
|
+
/* --------------- Stripes -------------- */
|
|
15476
|
+
/*----------------------------------------*/
|
|
15477
|
+
// Stripes style
|
|
15478
|
+
const stripesStyle = `
|
|
15479
|
+
.ProgressBar-stripes {
|
|
15480
|
+
background-image: linear-gradient(315deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%, #000000 100%);
|
|
15481
|
+
background-size: 6em 6em;
|
|
15482
|
+
animation: ProgressBar-stripe-animation 2.5s linear infinite;
|
|
15483
|
+
opacity: 0.09;
|
|
15484
|
+
}
|
|
15485
|
+
@keyframes ProgressBar-stripe-animation {
|
|
15486
|
+
0% {
|
|
15487
|
+
background-position: -6em 0;
|
|
15488
|
+
}
|
|
15489
|
+
100% {
|
|
15490
|
+
background-position: 0 0;
|
|
15491
|
+
}
|
|
15492
|
+
}
|
|
15493
|
+
`;
|
|
15494
|
+
// Stripes for striped effect
|
|
15495
|
+
const stripes = (React__default.createElement("div", null,
|
|
15496
|
+
React__default.createElement("style", null, stripesStyle),
|
|
15497
|
+
React__default.createElement("div", { className: "ProgressBar-stripes position-absolute ", style: {
|
|
15498
|
+
width: '200%',
|
|
15499
|
+
height: '100%',
|
|
15500
|
+
} }, "\u00A0")));
|
|
15501
|
+
/*----------------------------------------*/
|
|
15502
|
+
/* --------------- Main UI -------------- */
|
|
15503
|
+
/*----------------------------------------*/
|
|
15504
|
+
// Render the progress bar
|
|
15505
|
+
return (React__default.createElement("div", { className: "ProgressBar-container d-flex align-items-center" },
|
|
15506
|
+
React__default.createElement("style", null, style),
|
|
15507
|
+
!status.usePercent && status.numComplete && (React__default.createElement("span", { className: "ProgressBar-number-of pe-2 align-self-center" },
|
|
15508
|
+
status.numComplete,
|
|
15509
|
+
"\u00A0of\u00A0",
|
|
15510
|
+
status.total)),
|
|
15511
|
+
status.usePercent && status.percentProgress && (React__default.createElement("span", { className: "ProgressBar-percent pe-2 align-self-center" },
|
|
15512
|
+
status.percentProgress.toFixed((_o = status === null || status === void 0 ? void 0 : status.numDecimalPlaces) !== null && _o !== void 0 ? _o : 0),
|
|
15513
|
+
"%")),
|
|
15514
|
+
React__default.createElement("div", { className: `ProgressBar-background bg-${bgVariant} w-100`, style: {
|
|
15515
|
+
boxShadow: `0 0 0 ${outlineWidth} ${showOutline ? '#000' : '#DEE2E6'}`,
|
|
15516
|
+
}, "aria-valuenow": status.usePercent ? status.percentProgress : status.numComplete, "aria-valuemin": 0, "aria-valuemax": status.usePercent ? 100 : status.total },
|
|
15517
|
+
React__default.createElement("div", { className: `ProgressBar-bar bg-${variant} text-start position-relative`, style: {
|
|
15518
|
+
width: `${(status.usePercent ? status.percentProgress : (status.numComplete / status.total) * 100)}%`,
|
|
15519
|
+
overflow: 'hidden',
|
|
15520
|
+
} },
|
|
15521
|
+
striped && stripes,
|
|
15522
|
+
"\u00A0"))));
|
|
15523
|
+
};
|
|
15524
|
+
|
|
15302
15525
|
/**
|
|
15303
15526
|
* One minute in ms
|
|
15304
15527
|
* @author Gabe Abrams
|
|
@@ -16371,62 +16594,21 @@ const getWordCount = (text) => {
|
|
|
16371
16594
|
* @returns Timestamp in milliseconds since epoch
|
|
16372
16595
|
*/
|
|
16373
16596
|
const getTimestampFromTimeInfoInET = (opts) => {
|
|
16374
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
16375
16597
|
// Destructure opts
|
|
16376
16598
|
const { year, month, day, hour, minute, } = opts;
|
|
16599
|
+
// Determine if the date is in DST in Eastern Time
|
|
16600
|
+
const tempDate = new Date(year, month - 1, day);
|
|
16601
|
+
const janOffset = new Date(year, 0, 1).getTimezoneOffset();
|
|
16602
|
+
const isDST = tempDate.getTimezoneOffset() < janOffset;
|
|
16603
|
+
const etOffset = isDST ? '-04:00' : '-05:00';
|
|
16377
16604
|
// Format with leading zeroes
|
|
16378
16605
|
const mm = padZerosLeft(month, 2);
|
|
16379
16606
|
const dd = padZerosLeft(day, 2);
|
|
16380
16607
|
const hh = padZerosLeft(hour, 2);
|
|
16381
16608
|
const min = padZerosLeft(minute, 2);
|
|
16382
|
-
//
|
|
16383
|
-
const
|
|
16384
|
-
const
|
|
16385
|
-
timeZone: 'America/New_York',
|
|
16386
|
-
year: 'numeric',
|
|
16387
|
-
month: '2-digit',
|
|
16388
|
-
day: '2-digit',
|
|
16389
|
-
hour: '2-digit',
|
|
16390
|
-
minute: '2-digit',
|
|
16391
|
-
second: '2-digit',
|
|
16392
|
-
hour12: false,
|
|
16393
|
-
timeZoneName: 'shortOffset',
|
|
16394
|
-
};
|
|
16395
|
-
const parts = new Intl.DateTimeFormat('en-US', options).formatToParts(dateForET);
|
|
16396
|
-
const etYear = (_a = parts.find((p) => {
|
|
16397
|
-
return p.type === 'year';
|
|
16398
|
-
})) === null || _a === void 0 ? void 0 : _a.value;
|
|
16399
|
-
const etMonth = (_b = parts.find((p) => {
|
|
16400
|
-
return p.type === 'month';
|
|
16401
|
-
})) === null || _b === void 0 ? void 0 : _b.value;
|
|
16402
|
-
const etDay = (_c = parts.find((p) => {
|
|
16403
|
-
return p.type === 'day';
|
|
16404
|
-
})) === null || _c === void 0 ? void 0 : _c.value;
|
|
16405
|
-
const etHour = (_d = parts.find((p) => {
|
|
16406
|
-
return p.type === 'hour';
|
|
16407
|
-
})) === null || _d === void 0 ? void 0 : _d.value;
|
|
16408
|
-
const etMinute = (_e = parts.find((p) => {
|
|
16409
|
-
return p.type === 'minute';
|
|
16410
|
-
})) === null || _e === void 0 ? void 0 : _e.value;
|
|
16411
|
-
const etSecond = (_f = parts.find((p) => {
|
|
16412
|
-
return p.type === 'second';
|
|
16413
|
-
})) === null || _f === void 0 ? void 0 : _f.value;
|
|
16414
|
-
const tzName = (_g = parts.find((p) => {
|
|
16415
|
-
return p.type === 'timeZoneName';
|
|
16416
|
-
})) === null || _g === void 0 ? void 0 : _g.value;
|
|
16417
|
-
// Validate we got everything we need
|
|
16418
|
-
if (!etYear || !etMonth || !etDay || !etHour || !etMinute || !etSecond || !tzName) {
|
|
16419
|
-
throw new ErrorWithCode('Failed to parse date parts from Intl.DateTimeFormat', ReactKitErrorCode$1.ETTimestampInvalid);
|
|
16420
|
-
}
|
|
16421
|
-
// Extract numeric offset from "GMT-4" or "UTC-5"
|
|
16422
|
-
const offsetNum = Number(tzName.replace(/^(GMT|UTC)/, ''));
|
|
16423
|
-
const sign = offsetNum >= 0 ? '+' : '-';
|
|
16424
|
-
const offset = `${sign}${padZerosLeft(Math.abs(offsetNum), 2)}:00`;
|
|
16425
|
-
// Build ISO string with offset
|
|
16426
|
-
const etDateString = `${etYear}-${etMonth}-${etDay}T${etHour}:${etMinute}:${etSecond}${offset}`;
|
|
16427
|
-
// Parse into ET timestamp
|
|
16428
|
-
const etDate = new Date(etDateString);
|
|
16429
|
-
const timestamp = etDate.getTime();
|
|
16609
|
+
// Build ET ISO string and convert to UTC timestamp
|
|
16610
|
+
const etISOString = `${year}-${mm}-${dd}T${hh}:${min}:00${etOffset}`;
|
|
16611
|
+
const timestamp = (new Date(etISOString)).getTime();
|
|
16430
16612
|
// Verify that the timestamp is correct
|
|
16431
16613
|
const timeInfoInET = getTimeInfoInET(timestamp);
|
|
16432
16614
|
if (timeInfoInET.year !== year
|
|
@@ -16434,9 +16616,7 @@ const getTimestampFromTimeInfoInET = (opts) => {
|
|
|
16434
16616
|
|| timeInfoInET.day !== day
|
|
16435
16617
|
|| timeInfoInET.hour !== hour
|
|
16436
16618
|
|| timeInfoInET.minute !== minute) {
|
|
16437
|
-
throw new ErrorWithCode(`Timestamp mismatch: expected ${year}-${mm}-${dd} ${hh}:${min},
|
|
16438
|
-
+ `got ${timeInfoInET.year}-${padZerosLeft(timeInfoInET.month, 2)}-${padZerosLeft(timeInfoInET.day, 2)} `
|
|
16439
|
-
+ `${padZerosLeft(timeInfoInET.hour, 2)}:${padZerosLeft(timeInfoInET.minute, 2)}`, ReactKitErrorCode$1.ETTimestampInvalid);
|
|
16619
|
+
throw new ErrorWithCode(`Timestamp mismatch: expected ${year}-${mm}-${dd} ${hh}:${min}, got ${timeInfoInET.year}-${padZerosLeft(timeInfoInET.month, 2)}-${padZerosLeft(timeInfoInET.day, 2)} ${padZerosLeft(timeInfoInET.hour, 2)}:${padZerosLeft(timeInfoInET.minute, 2)}`, ReactKitErrorCode$1.ETTimestampInvalid);
|
|
16440
16620
|
}
|
|
16441
16621
|
// Valid! Return the timestamp
|
|
16442
16622
|
return timestamp;
|
|
@@ -16494,5 +16674,5 @@ var DayOfWeek;
|
|
|
16494
16674
|
})(DayOfWeek || (DayOfWeek = {}));
|
|
16495
16675
|
var DayOfWeek$1 = DayOfWeek;
|
|
16496
16676
|
|
|
16497
|
-
export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntryFieldType$1 as DBEntryFieldType, DBEntryManagerPanel, DayOfWeek$1 as DayOfWeek, Drawer, Dropdown, DropdownItemType$1 as DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, ItemPicker, LOG_REVIEW_GET_LOGS_ROUTE, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_REVIEW_STATUS_ROUTE, LOG_ROUTE_PATH, LoadingSpinner, LogAction$1 as LogAction, LogBuiltInMetadata, LogLevel$1 as LogLevel, LogReviewer, LogSource$1 as LogSource, LogType$1 as LogType, MINUTE_IN_MS, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, MultiSwitch, ParamType$1 as ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode$1 as ReactKitErrorCode, SELECT_ADMIN_CHECK_ROUTE, SimpleDateChooser, SimpleTimeChooser, TabBox, ToggleSwitch, Tooltip, Variant$1 as Variant, abbreviate, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, cloneDeep, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, getTimestampFromTimeInfoInET, getWordCount, idify, initClient, isMobileOrTablet, isSelectAdmin, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
|
|
16677
|
+
export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntryFieldType$1 as DBEntryFieldType, DBEntryManagerPanel, DayOfWeek$1 as DayOfWeek, Drawer, Dropdown, DropdownItemType$1 as DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, ItemPicker, LOG_REVIEW_GET_LOGS_ROUTE, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_REVIEW_STATUS_ROUTE, LOG_ROUTE_PATH, LoadingSpinner, LogAction$1 as LogAction, LogBuiltInMetadata, LogLevel$1 as LogLevel, LogReviewer, LogSource$1 as LogSource, LogType$1 as LogType, MINUTE_IN_MS, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, MultiSwitch, ParamType$1 as ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, ProgressBar, RadioButton, ReactKitErrorCode$1 as ReactKitErrorCode, SELECT_ADMIN_CHECK_ROUTE, SimpleDateChooser, SimpleTimeChooser, TabBox, ToggleSwitch, Tooltip, Variant$1 as Variant, abbreviate, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, cloneDeep, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, getTimestampFromTimeInfoInET, getWordCount, idify, initClient, isMobileOrTablet, isSelectAdmin, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
|
|
16498
16678
|
//# sourceMappingURL=index.js.map
|