@elliemae/ds-time-picker 2.3.1 → 3.0.0-alpha.3
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/DSTimePicker.js +106 -0
- package/dist/cjs/DSTimePicker.js.map +7 -0
- package/dist/cjs/DSTimePickerMenu.js +60 -0
- package/dist/cjs/DSTimePickerMenu.js.map +7 -0
- package/dist/cjs/PickerPanel.js +313 -0
- package/dist/cjs/PickerPanel.js.map +7 -0
- package/dist/cjs/TimePickerDropdown.js +74 -0
- package/dist/cjs/TimePickerDropdown.js.map +7 -0
- package/dist/cjs/TimePickerImpl.js +210 -0
- package/dist/cjs/TimePickerImpl.js.map +7 -0
- package/dist/cjs/TimePickerMenu.js +258 -0
- package/dist/cjs/TimePickerMenu.js.map +7 -0
- package/dist/cjs/index.js +40 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/moveElementOnScroll.js +93 -0
- package/dist/cjs/moveElementOnScroll.js.map +7 -0
- package/dist/cjs/utils.js +71 -0
- package/dist/cjs/utils.js.map +7 -0
- package/dist/esm/DSTimePicker.js +77 -0
- package/dist/esm/DSTimePicker.js.map +7 -0
- package/dist/esm/DSTimePickerMenu.js +33 -0
- package/dist/esm/DSTimePickerMenu.js.map +7 -0
- package/dist/esm/PickerPanel.js +286 -0
- package/dist/esm/PickerPanel.js.map +7 -0
- package/dist/esm/TimePickerDropdown.js +45 -0
- package/dist/esm/TimePickerDropdown.js.map +7 -0
- package/dist/esm/TimePickerImpl.js +183 -0
- package/dist/esm/TimePickerImpl.js.map +7 -0
- package/dist/esm/TimePickerMenu.js +231 -0
- package/dist/esm/TimePickerMenu.js.map +7 -0
- package/dist/esm/index.js +11 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/moveElementOnScroll.js +64 -0
- package/dist/esm/moveElementOnScroll.js.map +7 -0
- package/dist/esm/utils.js +42 -0
- package/dist/esm/utils.js.map +7 -0
- package/package.json +46 -37
- package/cjs/DSTimePicker.js +0 -121
- package/cjs/DSTimePickerMenu.js +0 -35
- package/cjs/PickerPanel.js +0 -402
- package/cjs/TimePickerDropdown.js +0 -53
- package/cjs/TimePickerImpl.js +0 -175
- package/cjs/TimePickerMenu.js +0 -312
- package/cjs/index.js +0 -17
- package/cjs/moveElementOnScroll.js +0 -75
- package/cjs/utils.js +0 -38
- package/esm/DSTimePicker.js +0 -111
- package/esm/DSTimePickerMenu.js +0 -24
- package/esm/PickerPanel.js +0 -392
- package/esm/TimePickerDropdown.js +0 -45
- package/esm/TimePickerImpl.js +0 -165
- package/esm/TimePickerMenu.js +0 -301
- package/esm/index.js +0 -4
- package/esm/moveElementOnScroll.js +0 -70
- package/esm/utils.js +0 -31
- package/types/DSTimePicker.d.ts +0 -162
- package/types/DSTimePickerMenu.d.ts +0 -4
- package/types/PickerPanel.d.ts +0 -24
- package/types/TimePickerDropdown.d.ts +0 -25
- package/types/TimePickerImpl.d.ts +0 -35
- package/types/TimePickerMenu.d.ts +0 -19
- package/types/index.d.ts +0 -5
- package/types/moveElementOnScroll.d.ts +0 -13
- package/types/utils.d.ts +0 -8
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/moveElementOnScroll.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export function MoveElementOnScroll(\n element,\n {\n container,\n min = 0,\n max = element.offsetHeight,\n speed = 1,\n smooth = 2,\n onUpdate = () => null,\n onEndScroll = () => null,\n },\n) {\n let moving = false;\n let pos = min;\n let lastPos = pos;\n\n // todo: move this to utils if we finally need it\n const requestFrame = (function() {\n return (\n window.requestAnimationFrame ||\n window.webkitRequestAnimationFrame ||\n window.mozRequestAnimationFrame ||\n window.oRequestAnimationFrame ||\n window.msRequestAnimationFrame ||\n function(func) {\n window.setTimeout(func, 1000 / 50);\n }\n );\n })();\n\n function update() {\n moving = true;\n const delta = (pos - lastPos) / smooth;\n lastPos += delta;\n\n if (Math.abs(delta) > 0.7) {\n requestFrame(() => {\n onUpdate(lastPos, delta);\n update();\n });\n } else {\n onEndScroll(pos);\n moving = false;\n }\n }\n\n function scrolling(e) {\n e.preventDefault(); // disable default scrolling\n let delta = e.delta || e.wheelDelta;\n if (delta === undefined) {\n // for firefox\n delta = -e.detail;\n delta *= 10 * speed;\n }\n\n pos += -delta * speed;\n pos = Math.max(min, Math.min(pos, max)); // limit scrolling\n if (!moving) {\n update();\n }\n }\n\n container.addEventListener('mousewheel', scrolling, false);\n container.addEventListener('DOMMouseScroll', scrolling, false);\n\n return {\n unsubscribe: () => {\n container.removeEventListener('mousewheel', scrolling);\n container.removeEventListener('DOMMouseScroll', scrolling);\n },\n updatePosition: newPos => {\n pos = -newPos;\n lastPos = -pos;\n },\n };\n}\n\nexport default MoveElementOnScroll;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,6BACL,SACA;AAAA,EACE;AAAA,EACA,MAAM;AAAA,EACN,MAAM,QAAQ;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,GAEtB;AACA,MAAI,SAAS;AACb,MAAI,MAAM;AACV,MAAI,UAAU;AAGd,QAAM,eAAgB,WAAW;AAC/B,WACE,OAAO,yBACP,OAAO,+BACP,OAAO,4BACP,OAAO,0BACP,OAAO,2BACP,SAAS,MAAM;AACb,aAAO,WAAW,MAAM,MAAO;AAAA;AAAA;AAKrC,oBAAkB;AAChB,aAAS;AACT,UAAM,QAAS,OAAM,WAAW;AAChC,eAAW;AAEX,QAAI,KAAK,IAAI,SAAS,KAAK;AACzB,mBAAa,MAAM;AACjB,iBAAS,SAAS;AAClB;AAAA;AAAA,WAEG;AACL,kBAAY;AACZ,eAAS;AAAA;AAAA;AAIb,qBAAmB,GAAG;AACpB,MAAE;AACF,QAAI,QAAQ,EAAE,SAAS,EAAE;AACzB,QAAI,UAAU,QAAW;AAEvB,cAAQ,CAAC,EAAE;AACX,eAAS,KAAK;AAAA;AAGhB,WAAO,CAAC,QAAQ;AAChB,UAAM,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK;AAClC,QAAI,CAAC,QAAQ;AACX;AAAA;AAAA;AAIJ,YAAU,iBAAiB,cAAc,WAAW;AACpD,YAAU,iBAAiB,kBAAkB,WAAW;AAExD,SAAO;AAAA,IACL,aAAa,MAAM;AACjB,gBAAU,oBAAoB,cAAc;AAC5C,gBAAU,oBAAoB,kBAAkB;AAAA;AAAA,IAElD,gBAAgB,YAAU;AACxB,YAAM,CAAC;AACP,gBAAU,CAAC;AAAA;AAAA;AAAA;AAKjB,IAAO,8BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var utils_exports = {};
|
|
29
|
+
__export(utils_exports, {
|
|
30
|
+
convertTimeString: () => convertTimeString,
|
|
31
|
+
getOptionIndex: () => getOptionIndex,
|
|
32
|
+
isAM: () => isAM,
|
|
33
|
+
validateIndex: () => validateIndex
|
|
34
|
+
});
|
|
35
|
+
var React = __toESM(require("react"));
|
|
36
|
+
const validateIndex = (index, options) => {
|
|
37
|
+
if (index < 0)
|
|
38
|
+
return 0;
|
|
39
|
+
if (index >= options.length)
|
|
40
|
+
return options.length - 1;
|
|
41
|
+
return index;
|
|
42
|
+
};
|
|
43
|
+
const getOptionIndex = (options, selectedOption, valueProperty = "value") => {
|
|
44
|
+
const index = options.findIndex((option) => option[valueProperty] === selectedOption);
|
|
45
|
+
return validateIndex(index, options);
|
|
46
|
+
};
|
|
47
|
+
const isAM = (time) => time && time.hour() < 12;
|
|
48
|
+
const convertTimeString = (string) => {
|
|
49
|
+
if (!string)
|
|
50
|
+
return null;
|
|
51
|
+
let meridiem = "AM";
|
|
52
|
+
if (string.toUpperCase().includes("PM"))
|
|
53
|
+
meridiem = "PM";
|
|
54
|
+
const arr = string.split(":");
|
|
55
|
+
let hour = parseInt(arr[0], 10);
|
|
56
|
+
if (meridiem === "PM" && hour !== 12)
|
|
57
|
+
hour += 12;
|
|
58
|
+
if (meridiem === "AM" && hour === 12)
|
|
59
|
+
hour = 0;
|
|
60
|
+
if (meridiem === "PM" && hour === 12)
|
|
61
|
+
hour = 12;
|
|
62
|
+
const min = parseInt(arr[1], 10);
|
|
63
|
+
const sec = parseInt(arr[2], 10);
|
|
64
|
+
return {
|
|
65
|
+
hour,
|
|
66
|
+
min,
|
|
67
|
+
sec
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
module.exports = __toCommonJS(utils_exports);
|
|
71
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export const validateIndex = (index, options) => {\n if (index < 0) return 0;\n if (index >= options.length) return options.length - 1;\n return index;\n};\n\nexport const getOptionIndex = (\n options,\n selectedOption,\n valueProperty = 'value',\n) => {\n const index = options.findIndex(\n (option) => option[valueProperty] === selectedOption,\n );\n return validateIndex(index, options);\n};\n\nexport const isAM = (time) => time && time.hour() < 12;\n\nexport const convertTimeString = (string) => {\n if (!string) return null;\n let meridiem = 'AM';\n if (string.toUpperCase().includes('PM')) meridiem = 'PM';\n\n const arr = string.split(':');\n let hour = parseInt(arr[0], 10);\n if (meridiem === 'PM' && hour !== 12) hour += 12; // formats to 24\n if (meridiem === 'AM' && hour === 12) hour = 0;\n if (meridiem === 'PM' && hour === 12) hour = 12;\n\n const min = parseInt(arr[1], 10);\n const sec = parseInt(arr[2], 10);\n\n return {\n hour,\n min,\n sec,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,gBAAgB,CAAC,OAAO,YAAY;AAC/C,MAAI,QAAQ;AAAG,WAAO;AACtB,MAAI,SAAS,QAAQ;AAAQ,WAAO,QAAQ,SAAS;AACrD,SAAO;AAAA;AAGF,MAAM,iBAAiB,CAC5B,SACA,gBACA,gBAAgB,YACb;AACH,QAAM,QAAQ,QAAQ,UACpB,CAAC,WAAW,OAAO,mBAAmB;AAExC,SAAO,cAAc,OAAO;AAAA;AAGvB,MAAM,OAAO,CAAC,SAAS,QAAQ,KAAK,SAAS;AAE7C,MAAM,oBAAoB,CAAC,WAAW;AAC3C,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,WAAW;AACf,MAAI,OAAO,cAAc,SAAS;AAAO,eAAW;AAEpD,QAAM,MAAM,OAAO,MAAM;AACzB,MAAI,OAAO,SAAS,IAAI,IAAI;AAC5B,MAAI,aAAa,QAAQ,SAAS;AAAI,YAAQ;AAC9C,MAAI,aAAa,QAAQ,SAAS;AAAI,WAAO;AAC7C,MAAI,aAAa,QAAQ,SAAS;AAAI,WAAO;AAE7C,QAAM,MAAM,SAAS,IAAI,IAAI;AAC7B,QAAM,MAAM,SAAS,IAAI,IAAI;AAE7B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { PropTypes, describe } from "react-desc";
|
|
4
|
+
import Moment from "moment";
|
|
5
|
+
import { TimePickerImpl } from "./TimePickerImpl";
|
|
6
|
+
const DSTimePicker = ({
|
|
7
|
+
containerProps = {},
|
|
8
|
+
innerRef,
|
|
9
|
+
className = "",
|
|
10
|
+
disabled = false,
|
|
11
|
+
value = "",
|
|
12
|
+
format,
|
|
13
|
+
style = {},
|
|
14
|
+
onChange = () => null,
|
|
15
|
+
onOpen = () => null,
|
|
16
|
+
isOpen = void 0,
|
|
17
|
+
clearable = false,
|
|
18
|
+
hasHeader = true,
|
|
19
|
+
hasHeaderDisplay = false,
|
|
20
|
+
"aria-label": ariaLabel,
|
|
21
|
+
zIndex = "auto",
|
|
22
|
+
placement = "bottom",
|
|
23
|
+
disabledTimes,
|
|
24
|
+
minutesInterval = 1
|
|
25
|
+
}) => /* @__PURE__ */ React2.createElement(TimePickerImpl, {
|
|
26
|
+
ref: innerRef,
|
|
27
|
+
"aria-label": ariaLabel,
|
|
28
|
+
className,
|
|
29
|
+
clearable,
|
|
30
|
+
containerProps,
|
|
31
|
+
disabled,
|
|
32
|
+
format,
|
|
33
|
+
hasHeader,
|
|
34
|
+
hasHeaderDisplay,
|
|
35
|
+
isOpen,
|
|
36
|
+
onChange,
|
|
37
|
+
onOpen,
|
|
38
|
+
placement,
|
|
39
|
+
style,
|
|
40
|
+
value,
|
|
41
|
+
zIndex,
|
|
42
|
+
minutesInterval,
|
|
43
|
+
disabledTimes
|
|
44
|
+
});
|
|
45
|
+
DSTimePicker.defaultProps = {
|
|
46
|
+
format: "hh:mm:ss A"
|
|
47
|
+
};
|
|
48
|
+
const props = {
|
|
49
|
+
"aria-label": PropTypes.string.description("a11y label"),
|
|
50
|
+
containerProps: PropTypes.object.description("inject props to time picker wrapper"),
|
|
51
|
+
disabled: PropTypes.bool.description("Whether the time picker is disabled or not"),
|
|
52
|
+
value: PropTypes.instanceOf(Moment).description("Time picker value"),
|
|
53
|
+
format: PropTypes.string.description("Time format (hh:mm:ss, H:m:s)"),
|
|
54
|
+
hasHeader: PropTypes.bool.description("toggle header style"),
|
|
55
|
+
hasHeaderDisplay: PropTypes.bool.description("toggle header display"),
|
|
56
|
+
onChange: PropTypes.func.description("Handler when time picker value changes"),
|
|
57
|
+
onOpen: PropTypes.func.description("Handler when the time picker menu opens"),
|
|
58
|
+
isOpen: PropTypes.bool.description("Whether the time picker menu is opened or not"),
|
|
59
|
+
innerRef: PropTypes.func.description("ref for time picker input"),
|
|
60
|
+
clearable: PropTypes.bool.description("Enable to clear the time picker value"),
|
|
61
|
+
className: PropTypes.string.description("class for time picker"),
|
|
62
|
+
style: PropTypes.object.description("style object"),
|
|
63
|
+
zIndex: PropTypes.number.description("z index for menu"),
|
|
64
|
+
placement: PropTypes.string.description("DSPopper placement"),
|
|
65
|
+
disabledTimes: PropTypes.object.description("disabled time"),
|
|
66
|
+
minutesInterval: PropTypes.number.description("steps for the picker")
|
|
67
|
+
};
|
|
68
|
+
DSTimePicker.propTypes = props;
|
|
69
|
+
const DSTimePickerWithSchema = describe(DSTimePicker);
|
|
70
|
+
DSTimePickerWithSchema.propTypes = props;
|
|
71
|
+
var DSTimePicker_default = DSTimePicker;
|
|
72
|
+
export {
|
|
73
|
+
DSTimePicker,
|
|
74
|
+
DSTimePickerWithSchema,
|
|
75
|
+
DSTimePicker_default as default
|
|
76
|
+
};
|
|
77
|
+
//# sourceMappingURL=DSTimePicker.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTimePicker.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport Moment from 'moment';\nimport { TimePickerImpl } from './TimePickerImpl';\n\nconst DSTimePicker = ({\n containerProps = {},\n innerRef,\n className = '',\n disabled = false,\n value = '',\n format,\n style = {},\n onChange = () => null,\n onOpen = () => null,\n isOpen = undefined,\n clearable = false,\n hasHeader = true,\n hasHeaderDisplay = false,\n 'aria-label': ariaLabel,\n zIndex = 'auto',\n placement = 'bottom',\n disabledTimes,\n minutesInterval = 1,\n}) => (\n <TimePickerImpl\n ref={innerRef}\n aria-label={ariaLabel}\n className={className}\n clearable={clearable}\n containerProps={containerProps}\n disabled={disabled}\n format={format}\n hasHeader={hasHeader}\n hasHeaderDisplay={hasHeaderDisplay}\n isOpen={isOpen}\n onChange={onChange}\n onOpen={onOpen}\n placement={placement}\n style={style}\n value={value}\n zIndex={zIndex}\n minutesInterval={minutesInterval}\n disabledTimes={disabledTimes}\n />\n);\n\nDSTimePicker.defaultProps = {\n format: 'hh:mm:ss A',\n};\n\nconst props = {\n /** a11y label */\n 'aria-label': PropTypes.string.description('a11y label'),\n /** inject props to time picker wrapper */\n containerProps: PropTypes.object.description(\n 'inject props to time picker wrapper',\n ),\n /** Whether the time picker is disabled or not */\n disabled: PropTypes.bool.description(\n 'Whether the time picker is disabled or not',\n ),\n /** Time picker value */\n value: PropTypes.instanceOf(Moment).description('Time picker value'),\n /** Time format (hh:mm:ss, H:m:s) */\n format: PropTypes.string.description('Time format (hh:mm:ss, H:m:s)'),\n /** toggle header style */\n hasHeader: PropTypes.bool.description('toggle header style'),\n /** toggle header display */\n hasHeaderDisplay: PropTypes.bool.description('toggle header display'),\n /** Handler when time picker value changes */\n onChange: PropTypes.func.description(\n 'Handler when time picker value changes',\n ),\n /** Handler when the time picker menu opens */\n onOpen: PropTypes.func.description('Handler when the time picker menu opens'),\n /** Whether the time picker menu is opened or not */\n isOpen: PropTypes.bool.description(\n 'Whether the time picker menu is opened or not',\n ),\n /** ref for time picker input */\n innerRef: PropTypes.func.description('ref for time picker input'),\n /** Enable to clear the time picker value */\n clearable: PropTypes.bool.description(\n 'Enable to clear the time picker value',\n ),\n /** class for time picker */\n className: PropTypes.string.description('class for time picker'),\n /** style object */\n style: PropTypes.object.description('style object'),\n /** z index for menu */\n zIndex: PropTypes.number.description('z index for menu'),\n /** DSPopper placement */\n placement: PropTypes.string.description('DSPopper placement'),\n /** disabled time */\n disabledTimes: PropTypes.object.description('disabled time'),\n /** steps for the picker */\n minutesInterval: PropTypes.number.description('steps for the picker'),\n};\n\nDSTimePicker.propTypes = props;\nconst DSTimePickerWithSchema = describe(DSTimePicker);\nDSTimePickerWithSchema.propTypes = props;\n\nexport { DSTimePicker, DSTimePickerWithSchema };\nexport default DSTimePicker;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,SAAS,MAAM;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,kBAAkB;AAAA,MAElB,qCAAC,gBAAD;AAAA,EACE,KAAK;AAAA,EACL,cAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAIJ,aAAa,eAAe;AAAA,EAC1B,QAAQ;AAAA;AAGV,MAAM,QAAQ;AAAA,EAEZ,cAAc,UAAU,OAAO,YAAY;AAAA,EAE3C,gBAAgB,UAAU,OAAO,YAC/B;AAAA,EAGF,UAAU,UAAU,KAAK,YACvB;AAAA,EAGF,OAAO,UAAU,WAAW,QAAQ,YAAY;AAAA,EAEhD,QAAQ,UAAU,OAAO,YAAY;AAAA,EAErC,WAAW,UAAU,KAAK,YAAY;AAAA,EAEtC,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,UAAU,UAAU,KAAK,YACvB;AAAA,EAGF,QAAQ,UAAU,KAAK,YAAY;AAAA,EAEnC,QAAQ,UAAU,KAAK,YACrB;AAAA,EAGF,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,WAAW,UAAU,KAAK,YACxB;AAAA,EAGF,WAAW,UAAU,OAAO,YAAY;AAAA,EAExC,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,QAAQ,UAAU,OAAO,YAAY;AAAA,EAErC,WAAW,UAAU,OAAO,YAAY;AAAA,EAExC,eAAe,UAAU,OAAO,YAAY;AAAA,EAE5C,iBAAiB,UAAU,OAAO,YAAY;AAAA;AAGhD,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS;AACxC,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
import * as React from "react";
|
|
18
|
+
import React2 from "react";
|
|
19
|
+
import styled from "styled-components";
|
|
20
|
+
import { TimePickerMenu } from "./TimePickerMenu";
|
|
21
|
+
const DSTimePickerMenuWrapper = styled.div`
|
|
22
|
+
display: flex;
|
|
23
|
+
height: 18.6rem;
|
|
24
|
+
`;
|
|
25
|
+
function DSTimePickerMenu(props) {
|
|
26
|
+
return /* @__PURE__ */ React2.createElement(DSTimePickerMenuWrapper, null, /* @__PURE__ */ React2.createElement(TimePickerMenu, __spreadValues({}, props)));
|
|
27
|
+
}
|
|
28
|
+
var DSTimePickerMenu_default = DSTimePickerMenu;
|
|
29
|
+
export {
|
|
30
|
+
DSTimePickerMenu,
|
|
31
|
+
DSTimePickerMenu_default as default
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=DSTimePickerMenu.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTimePickerMenu.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\nimport { TimePickerMenu } from './TimePickerMenu';\n\nconst DSTimePickerMenuWrapper = styled.div`\n display: flex;\n height: 18.6rem;\n`;\nfunction DSTimePickerMenu(props) {\n return (\n <DSTimePickerMenuWrapper>\n <TimePickerMenu {...props} />\n </DSTimePickerMenuWrapper>\n );\n}\nexport { DSTimePickerMenu };\nexport default DSTimePickerMenu;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAIvC,0BAA0B,OAAO;AAC/B,SACE,qCAAC,yBAAD,MACE,qCAAC,gBAAD,mBAAoB;AAAA;AAK1B,IAAO,2BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import * as React from "react";
|
|
21
|
+
import React2, { Component } from "react";
|
|
22
|
+
import { findIndex } from "lodash";
|
|
23
|
+
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
24
|
+
import memoizeOne from "memoize-one";
|
|
25
|
+
import { ChevronSmallUp, ChevronSmallDown } from "@elliemae/ds-icons";
|
|
26
|
+
import { DSButton } from "@elliemae/ds-button";
|
|
27
|
+
import { MoveElementOnScroll } from "./moveElementOnScroll";
|
|
28
|
+
import { validateIndex } from "./utils";
|
|
29
|
+
const blockName = "time-picker-panel";
|
|
30
|
+
const Container = aggregatedClasses("div")(blockName, null, ({ scrolling }) => ({ scrolling }));
|
|
31
|
+
const Wrapper = aggregatedClasses("div")(blockName, "wrapper");
|
|
32
|
+
const PickerItemListContainer = aggregatedClasses("div")(blockName, "item-list-container");
|
|
33
|
+
const PickerItemList = aggregatedClasses("div")(blockName, "item-list");
|
|
34
|
+
const PickerHeader = aggregatedClasses("div")(blockName, "header");
|
|
35
|
+
const PickerItemContainer = aggregatedClasses("div")(blockName, "item", ({ selected, disabled }) => ({
|
|
36
|
+
selected,
|
|
37
|
+
disabled
|
|
38
|
+
}));
|
|
39
|
+
const PickerSelectedOptionSelected = aggregatedClasses("div")(blockName, "selected-container");
|
|
40
|
+
const SelectedCircle = aggregatedClasses("div")(blockName, "selected-circle");
|
|
41
|
+
const ArrowButtonContainer = aggregatedClasses("div")(blockName, "arrow-container");
|
|
42
|
+
const getOptionIndex = (options, selectedOption, valueProperty = "value") => {
|
|
43
|
+
const index = options.findIndex((option) => option[valueProperty] === selectedOption);
|
|
44
|
+
return validateIndex(index, options);
|
|
45
|
+
};
|
|
46
|
+
const arrowProps = {
|
|
47
|
+
buttonType: "text",
|
|
48
|
+
fluidHeight: true,
|
|
49
|
+
fluidWidth: true,
|
|
50
|
+
size: "s"
|
|
51
|
+
};
|
|
52
|
+
class PickerPanel extends Component {
|
|
53
|
+
constructor(props) {
|
|
54
|
+
super(props);
|
|
55
|
+
this.computeContainerTranslation = memoizeOne((index) => {
|
|
56
|
+
const { options, valueProperty } = this.props;
|
|
57
|
+
const { selectedOption, scrolling } = this.state;
|
|
58
|
+
const selectedOptionIndex = index || getOptionIndex(options, selectedOption, valueProperty);
|
|
59
|
+
const listYPosition = this.minYListPosition - selectedOptionIndex * this.optionHeight;
|
|
60
|
+
if (this.scrollHandler && !scrolling)
|
|
61
|
+
this.scrollHandler.updatePosition(listYPosition);
|
|
62
|
+
return listYPosition;
|
|
63
|
+
});
|
|
64
|
+
this.renderHeader = () => {
|
|
65
|
+
const { header } = this.props;
|
|
66
|
+
return /* @__PURE__ */ React2.createElement(PickerHeader, null, header);
|
|
67
|
+
};
|
|
68
|
+
this.pickerListContainerRef = React2.createRef();
|
|
69
|
+
this.pickerListRef = React2.createRef();
|
|
70
|
+
this.pickerItemRef = React2.createRef();
|
|
71
|
+
this.selectedOptionRef = React2.createRef();
|
|
72
|
+
this.state = {
|
|
73
|
+
selectedOption: props.selected,
|
|
74
|
+
activeIndex: 0,
|
|
75
|
+
prevProps: {}
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
componentDidMount() {
|
|
79
|
+
this.computeSizes();
|
|
80
|
+
const pickerListContainerEl = this.pickerListContainerRef.current;
|
|
81
|
+
const pickerListEl = this.pickerListRef.current;
|
|
82
|
+
this.scrollHandler = new MoveElementOnScroll(pickerListEl, {
|
|
83
|
+
container: pickerListContainerEl,
|
|
84
|
+
min: -this.minYListPosition,
|
|
85
|
+
max: this.maxYListPosition,
|
|
86
|
+
onUpdate: (pos, delta) => {
|
|
87
|
+
const { options } = this.props;
|
|
88
|
+
const index = options.length - -Math.floor((pos - this.maxYListPosition) / this.optionHeight) + (delta > 0 ? 1 : -1);
|
|
89
|
+
this.moveTo(index, true);
|
|
90
|
+
},
|
|
91
|
+
onEndScroll: () => {
|
|
92
|
+
this.setState({ scrolling: false });
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
this.computeContainerTranslation();
|
|
96
|
+
}
|
|
97
|
+
componentWillUnmount() {
|
|
98
|
+
this.scrollHandler.unsubscribe();
|
|
99
|
+
}
|
|
100
|
+
static getDerivedStateFromProps(nextProps, { prevProps }) {
|
|
101
|
+
const { selected, valueProperty, options } = nextProps;
|
|
102
|
+
if (selected !== prevProps.selected) {
|
|
103
|
+
return {
|
|
104
|
+
selectedOption: selected,
|
|
105
|
+
activeIndex: getOptionIndex(options, selected, valueProperty),
|
|
106
|
+
prevProps: nextProps
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
return null;
|
|
110
|
+
}
|
|
111
|
+
getOptionValue(option) {
|
|
112
|
+
const { valueProperty } = this.props;
|
|
113
|
+
return option[valueProperty];
|
|
114
|
+
}
|
|
115
|
+
getOptionLabel(option) {
|
|
116
|
+
const { labelProperty } = this.props;
|
|
117
|
+
return option[labelProperty];
|
|
118
|
+
}
|
|
119
|
+
computeSizes() {
|
|
120
|
+
const { options, numberItemsOnScreen } = this.props;
|
|
121
|
+
const { offsetHeight: optionHeight } = this.pickerItemRef.current;
|
|
122
|
+
this.optionHeight = optionHeight;
|
|
123
|
+
this.listHeight = this.optionHeight * numberItemsOnScreen;
|
|
124
|
+
this.minYListPosition = this.listHeight / 2 - this.optionHeight / 2;
|
|
125
|
+
this.maxYListPosition = this.optionHeight * (options.length - Math.ceil(numberItemsOnScreen / 2));
|
|
126
|
+
}
|
|
127
|
+
handleOptionSelect(optionValue, index, scrolling) {
|
|
128
|
+
const { onChange } = this.props;
|
|
129
|
+
this.setState((state) => __spreadProps(__spreadValues({}, state), {
|
|
130
|
+
scrolling,
|
|
131
|
+
selectedOption: optionValue,
|
|
132
|
+
activeIndex: index
|
|
133
|
+
}), () => {
|
|
134
|
+
onChange(optionValue, index);
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
handleKeyDown(e) {
|
|
138
|
+
const { activeIndex } = this.state;
|
|
139
|
+
const { options } = this.props;
|
|
140
|
+
const [firstColumn, ...restColumns] = document.getElementsByClassName("em-ds-time-picker-panel");
|
|
141
|
+
const [lastColumn] = restColumns.slice(-1);
|
|
142
|
+
const [prev] = document.getElementsByClassName("DayPickerNavigation_button");
|
|
143
|
+
const focusedElement = document.activeElement;
|
|
144
|
+
switch (e.key) {
|
|
145
|
+
case "Home":
|
|
146
|
+
this.moveTo(0);
|
|
147
|
+
break;
|
|
148
|
+
case "End":
|
|
149
|
+
this.moveTo(options.length - 1);
|
|
150
|
+
break;
|
|
151
|
+
case "ArrowUp":
|
|
152
|
+
this.moveTo(activeIndex - 1);
|
|
153
|
+
break;
|
|
154
|
+
case "ArrowDown":
|
|
155
|
+
this.moveTo(activeIndex + 1);
|
|
156
|
+
break;
|
|
157
|
+
case "Tab": {
|
|
158
|
+
e.preventDefault();
|
|
159
|
+
if (prev && focusedElement === lastColumn) {
|
|
160
|
+
prev.focus();
|
|
161
|
+
} else if (focusedElement === lastColumn) {
|
|
162
|
+
firstColumn.focus();
|
|
163
|
+
} else {
|
|
164
|
+
const position = findIndex(restColumns, focusedElement);
|
|
165
|
+
restColumns[position + 1].focus();
|
|
166
|
+
}
|
|
167
|
+
break;
|
|
168
|
+
}
|
|
169
|
+
default:
|
|
170
|
+
break;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
moveTo(index, scrolling) {
|
|
174
|
+
const { options } = this.props;
|
|
175
|
+
const { selectedOption } = this.state;
|
|
176
|
+
const validIndex = validateIndex(index, options);
|
|
177
|
+
const option = options[validIndex];
|
|
178
|
+
const optionValue = this.getOptionValue(option);
|
|
179
|
+
if (selectedOption !== optionValue && option.disabled !== true) {
|
|
180
|
+
this.handleOptionSelect(optionValue, validIndex, scrolling);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
handleStepMoveUp() {
|
|
184
|
+
const { activeIndex } = this.state;
|
|
185
|
+
const { arrowStep, options } = this.props;
|
|
186
|
+
const supposedPos = activeIndex - arrowStep;
|
|
187
|
+
const nextPos = supposedPos >= 0 ? supposedPos : activeIndex - 1;
|
|
188
|
+
const nextValidOption = options.find((op) => !op.disabled);
|
|
189
|
+
this.moveTo(nextPos, true, nextValidOption);
|
|
190
|
+
}
|
|
191
|
+
handleStepMoveDown() {
|
|
192
|
+
const { activeIndex } = this.state;
|
|
193
|
+
const { arrowStep, options } = this.props;
|
|
194
|
+
const supposedPos = activeIndex + arrowStep;
|
|
195
|
+
const nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;
|
|
196
|
+
this.moveTo(nextPos);
|
|
197
|
+
}
|
|
198
|
+
render() {
|
|
199
|
+
const { options, hasHeader, type, time, meridiem, disabledTimes } = this.props;
|
|
200
|
+
const { selectedOption, activeIndex, scrolling } = this.state;
|
|
201
|
+
const listYPosition = this.computeContainerTranslation(activeIndex);
|
|
202
|
+
return /* @__PURE__ */ React2.createElement(Wrapper, null, hasHeader && this.renderHeader(), /* @__PURE__ */ React2.createElement(Container, {
|
|
203
|
+
classProps: { scrolling },
|
|
204
|
+
onKeyDown: this.handleKeyDown,
|
|
205
|
+
tabIndex: 0
|
|
206
|
+
}, /* @__PURE__ */ React2.createElement(PickerSelectedOptionSelected, {
|
|
207
|
+
innerRef: this.selectedOptionRef
|
|
208
|
+
}, /* @__PURE__ */ React2.createElement(SelectedCircle, null)), /* @__PURE__ */ React2.createElement(ArrowButtonContainer, null, /* @__PURE__ */ React2.createElement(DSButton, __spreadProps(__spreadValues({}, arrowProps), {
|
|
209
|
+
"aria-label": "Chevron Up",
|
|
210
|
+
"data-testid": `${type}-chevron-up`,
|
|
211
|
+
disabled: activeIndex <= 0,
|
|
212
|
+
icon: /* @__PURE__ */ React2.createElement(ChevronSmallUp, null),
|
|
213
|
+
onClick: this.handleStepMoveUp,
|
|
214
|
+
tabIndex: -1
|
|
215
|
+
}))), /* @__PURE__ */ React2.createElement(PickerItemListContainer, {
|
|
216
|
+
innerRef: this.pickerListContainerRef,
|
|
217
|
+
style: {
|
|
218
|
+
height: this.listHeight
|
|
219
|
+
}
|
|
220
|
+
}, /* @__PURE__ */ React2.createElement(PickerItemList, {
|
|
221
|
+
"data-testid": `${type}-list`,
|
|
222
|
+
innerRef: this.pickerListRef,
|
|
223
|
+
style: {
|
|
224
|
+
transform: `translateY(${listYPosition}px)`
|
|
225
|
+
}
|
|
226
|
+
}, options.map((option, index) => {
|
|
227
|
+
const value = this.getOptionValue(option);
|
|
228
|
+
const label = this.getOptionLabel(option);
|
|
229
|
+
let valueFormatted;
|
|
230
|
+
if (meridiem === "AM")
|
|
231
|
+
valueFormatted = value;
|
|
232
|
+
else if (meridiem === "PM" && value === 12)
|
|
233
|
+
valueFormatted = value;
|
|
234
|
+
else if (meridiem === "PM")
|
|
235
|
+
valueFormatted = value + 12;
|
|
236
|
+
let disabled = false;
|
|
237
|
+
if (disabledTimes) {
|
|
238
|
+
const { from, to } = disabledTimes;
|
|
239
|
+
if (type === "hour" && valueFormatted >= from?.hour && valueFormatted < to?.hour || type === "minutes" && value >= from?.min && value < to?.min) {
|
|
240
|
+
disabled = true;
|
|
241
|
+
}
|
|
242
|
+
if (type === "minutes" && (time?.hour() > to?.hour || time?.hour() < from?.hour)) {
|
|
243
|
+
disabled = false;
|
|
244
|
+
}
|
|
245
|
+
if (label === "am" && from?.hour == 0 && to?.hour >= 12) {
|
|
246
|
+
disabled = true;
|
|
247
|
+
}
|
|
248
|
+
if (label === "pm" && to?.hour == 24) {
|
|
249
|
+
disabled = true;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
option.disabled = disabled;
|
|
253
|
+
return /* @__PURE__ */ React2.createElement(PickerItemContainer, {
|
|
254
|
+
key: value,
|
|
255
|
+
classProps: {
|
|
256
|
+
selected: selectedOption ? value === selectedOption : index === 0,
|
|
257
|
+
disabled
|
|
258
|
+
},
|
|
259
|
+
innerRef: this.pickerItemRef,
|
|
260
|
+
onClick: () => {
|
|
261
|
+
if (!disabled)
|
|
262
|
+
this.handleOptionSelect(value, index);
|
|
263
|
+
}
|
|
264
|
+
}, label);
|
|
265
|
+
}))), /* @__PURE__ */ React2.createElement(ArrowButtonContainer, null, /* @__PURE__ */ React2.createElement(DSButton, __spreadProps(__spreadValues({}, arrowProps), {
|
|
266
|
+
"aria-label": "Chevron Down",
|
|
267
|
+
"data-testid": `${type}-chevron-down`,
|
|
268
|
+
disabled: activeIndex >= options.length - 1,
|
|
269
|
+
icon: /* @__PURE__ */ React2.createElement(ChevronSmallDown, null),
|
|
270
|
+
onClick: this.handleStepMoveDown,
|
|
271
|
+
tabIndex: -1
|
|
272
|
+
})))));
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
PickerPanel.defaultProps = {
|
|
276
|
+
valueProperty: "value",
|
|
277
|
+
labelProperty: "label",
|
|
278
|
+
numberItemsOnScreen: 5,
|
|
279
|
+
options: [],
|
|
280
|
+
arrowStep: 1
|
|
281
|
+
};
|
|
282
|
+
export {
|
|
283
|
+
PickerPanel,
|
|
284
|
+
PickerPanel as default
|
|
285
|
+
};
|
|
286
|
+
//# sourceMappingURL=PickerPanel.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PickerPanel.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eqeqeq */\n/* eslint-disable react/prop-types */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { findIndex } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport memoizeOne from 'memoize-one';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { MoveElementOnScroll } from './moveElementOnScroll';\nimport { validateIndex } from './utils';\n\nconst blockName = 'time-picker-panel';\n\nconst Container = aggregatedClasses('div')(blockName, null, ({ scrolling }) => ({ scrolling }));\nconst Wrapper = aggregatedClasses('div')(blockName, 'wrapper');\nconst PickerItemListContainer = aggregatedClasses('div')(blockName, 'item-list-container');\nconst PickerItemList = aggregatedClasses('div')(blockName, 'item-list');\nconst PickerHeader = aggregatedClasses('div')(blockName, 'header');\nconst PickerItemContainer = aggregatedClasses('div')(blockName, 'item', ({ selected, disabled }) => ({\n selected,\n disabled,\n}));\nconst PickerSelectedOptionSelected = aggregatedClasses('div')(blockName, 'selected-container');\nconst SelectedCircle = aggregatedClasses('div')(blockName, 'selected-circle');\nconst ArrowButtonContainer = aggregatedClasses('div')(blockName, 'arrow-container');\n\nconst getOptionIndex = (options, selectedOption, valueProperty = 'value') => {\n const index = options.findIndex((option) => option[valueProperty] === selectedOption);\n return validateIndex(index, options);\n};\n\nconst arrowProps = {\n buttonType: 'text',\n fluidHeight: true,\n fluidWidth: true,\n size: 's',\n};\n\nexport default class PickerPanel extends Component {\n computeContainerTranslation = memoizeOne((index) => {\n const { options, valueProperty } = this.props;\n const { selectedOption, scrolling } = this.state;\n\n const selectedOptionIndex = index || getOptionIndex(options, selectedOption, valueProperty);\n const listYPosition = this.minYListPosition - selectedOptionIndex * this.optionHeight;\n\n if (this.scrollHandler && !scrolling) this.scrollHandler.updatePosition(listYPosition);\n\n return listYPosition;\n });\n\n constructor(props) {\n super(props);\n this.pickerListContainerRef = React.createRef();\n this.pickerListRef = React.createRef();\n this.pickerItemRef = React.createRef();\n this.selectedOptionRef = React.createRef();\n\n this.state = {\n selectedOption: props.selected,\n activeIndex: 0,\n // eslint-disable-next-line react/no-unused-state\n prevProps: {},\n };\n }\n\n componentDidMount() {\n this.computeSizes();\n const pickerListContainerEl = this.pickerListContainerRef.current;\n const pickerListEl = this.pickerListRef.current;\n\n this.scrollHandler = new MoveElementOnScroll(pickerListEl, {\n container: pickerListContainerEl,\n min: -this.minYListPosition,\n max: this.maxYListPosition,\n onUpdate: (pos, delta) => {\n const { options } = this.props;\n const index =\n options.length - -Math.floor((pos - this.maxYListPosition) / this.optionHeight) + (delta > 0 ? 1 : -1);\n this.moveTo(index, true);\n },\n onEndScroll: () => {\n this.setState({ scrolling: false });\n },\n });\n this.computeContainerTranslation();\n }\n\n componentWillUnmount() {\n this.scrollHandler.unsubscribe();\n }\n\n static getDerivedStateFromProps(nextProps, { prevProps }) {\n const { selected, valueProperty, options } = nextProps;\n if (selected !== prevProps.selected) {\n return {\n selectedOption: selected,\n activeIndex: getOptionIndex(options, selected, valueProperty),\n prevProps: nextProps,\n };\n }\n return null;\n }\n\n getOptionValue(option) {\n const { valueProperty } = this.props;\n return option[valueProperty];\n }\n\n getOptionLabel(option) {\n const { labelProperty } = this.props;\n return option[labelProperty];\n }\n\n computeSizes() {\n const { options, numberItemsOnScreen } = this.props;\n const { offsetHeight: optionHeight } = this.pickerItemRef.current;\n\n this.optionHeight = optionHeight;\n this.listHeight = this.optionHeight * numberItemsOnScreen;\n\n this.minYListPosition = this.listHeight / 2 - this.optionHeight / 2;\n this.maxYListPosition = this.optionHeight * (options.length - Math.ceil(numberItemsOnScreen / 2));\n }\n\n handleOptionSelect(optionValue, index, scrolling) {\n const { onChange } = this.props;\n this.setState(\n (state) => ({\n ...state,\n scrolling,\n selectedOption: optionValue,\n activeIndex: index,\n }),\n () => {\n onChange(optionValue, index);\n },\n );\n }\n\n // TODO: this needs a refactor from de FocusGroup\n // eslint-disable-next-line max-statements\n handleKeyDown(e) {\n const { activeIndex } = this.state;\n const { options } = this.props;\n const [firstColumn, ...restColumns] = document.getElementsByClassName('em-ds-time-picker-panel');\n const [lastColumn] = restColumns.slice(-1);\n const [prev] = document.getElementsByClassName('DayPickerNavigation_button');\n const focusedElement = document.activeElement;\n\n switch (e.key) {\n case 'Home':\n this.moveTo(0);\n break;\n case 'End':\n this.moveTo(options.length - 1);\n break;\n case 'ArrowUp':\n this.moveTo(activeIndex - 1);\n break;\n case 'ArrowDown':\n this.moveTo(activeIndex + 1);\n break;\n case 'Tab': {\n e.preventDefault();\n // If it is DateTimePicker, move focus to prev arrow element\n if (prev && focusedElement === lastColumn) {\n prev.focus();\n } else if (focusedElement === lastColumn) {\n firstColumn.focus();\n } else {\n const position = findIndex(restColumns, focusedElement);\n restColumns[position + 1].focus();\n }\n break;\n }\n default:\n break;\n }\n }\n\n moveTo(index, scrolling) {\n const { options } = this.props;\n const { selectedOption } = this.state;\n const validIndex = validateIndex(index, options);\n const option = options[validIndex];\n const optionValue = this.getOptionValue(option);\n if (selectedOption !== optionValue && option.disabled !== true) {\n this.handleOptionSelect(optionValue, validIndex, scrolling);\n }\n // TO-DO: if date disabled, add nextValidOption selection\n }\n\n handleStepMoveUp() {\n const { activeIndex } = this.state;\n const { arrowStep, options } = this.props;\n const supposedPos = activeIndex - arrowStep;\n const nextPos = supposedPos >= 0 ? supposedPos : activeIndex - 1;\n\n const nextValidOption = options.find((op) => !op.disabled);\n this.moveTo(nextPos, true, nextValidOption);\n }\n\n handleStepMoveDown() {\n const { activeIndex } = this.state;\n const { arrowStep, options } = this.props;\n const supposedPos = activeIndex + arrowStep;\n const nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;\n this.moveTo(nextPos);\n }\n\n renderHeader = () => {\n const { header } = this.props;\n\n return <PickerHeader>{header}</PickerHeader>;\n };\n\n render() {\n const { options, hasHeader, type, time, meridiem, disabledTimes } = this.props;\n const { selectedOption, activeIndex, scrolling } = this.state;\n\n const listYPosition = this.computeContainerTranslation(activeIndex);\n\n return (\n <Wrapper>\n {hasHeader && this.renderHeader()}\n <Container classProps={{ scrolling }} onKeyDown={this.handleKeyDown} tabIndex={0}>\n <PickerSelectedOptionSelected innerRef={this.selectedOptionRef}>\n <SelectedCircle />\n </PickerSelectedOptionSelected>\n <ArrowButtonContainer>\n <DSButton\n {...arrowProps}\n aria-label=\"Chevron Up\"\n data-testid={`${type}-chevron-up`}\n disabled={activeIndex <= 0}\n icon={<ChevronSmallUp />}\n onClick={this.handleStepMoveUp}\n tabIndex={-1}\n />\n </ArrowButtonContainer>\n <PickerItemListContainer\n innerRef={this.pickerListContainerRef}\n style={{\n height: this.listHeight,\n }}\n >\n <PickerItemList\n data-testid={`${type}-list`}\n innerRef={this.pickerListRef}\n style={{\n transform: `translateY(${listYPosition}px)`,\n }}\n >\n {options.map((option, index) => {\n const value = this.getOptionValue(option);\n const label = this.getOptionLabel(option);\n let valueFormatted;\n if (meridiem === 'AM') valueFormatted = value;\n else if (meridiem === 'PM' && value === 12) valueFormatted = value;\n else if (meridiem === 'PM') valueFormatted = value + 12;\n\n let disabled = false;\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (\n (type === 'hour' && valueFormatted >= from?.hour && valueFormatted < to?.hour) ||\n (type === 'minutes' && value >= from?.min && value < to?.min)\n ) {\n disabled = true;\n }\n if (type === 'minutes' && (time?.hour() > to?.hour || time?.hour() < from?.hour)) {\n disabled = false;\n }\n if (label === 'am' && from?.hour == 0 && to?.hour >= 12) {\n disabled = true;\n }\n if (label === 'pm' && to?.hour == 24) {\n disabled = true;\n }\n }\n\n option.disabled = disabled;\n\n return (\n <PickerItemContainer\n key={value}\n classProps={{\n selected: selectedOption ? value === selectedOption : index === 0,\n disabled,\n }}\n innerRef={this.pickerItemRef}\n onClick={() => {\n if (!disabled) this.handleOptionSelect(value, index);\n }}\n >\n {label}\n </PickerItemContainer>\n );\n })}\n </PickerItemList>\n </PickerItemListContainer>\n <ArrowButtonContainer>\n <DSButton\n {...arrowProps}\n aria-label=\"Chevron Down\"\n data-testid={`${type}-chevron-down`}\n disabled={activeIndex >= options.length - 1}\n icon={<ChevronSmallDown />}\n onClick={this.handleStepMoveDown}\n tabIndex={-1}\n />\n </ArrowButtonContainer>\n </Container>\n </Wrapper>\n );\n }\n}\n\nPickerPanel.defaultProps = {\n valueProperty: 'value',\n labelProperty: 'label',\n numberItemsOnScreen: 5, // this number should be impair\n options: [],\n arrowStep: 1,\n};\n\nexport { PickerPanel };"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import { RecentDocuments } from "@elliemae/ds-icons";
|
|
5
|
+
import { DSButton } from "@elliemae/ds-button";
|
|
6
|
+
import { DSPopper } from "@elliemae/ds-popper";
|
|
7
|
+
const TimePickerDropdown = ({ disabled = false, onClick, onOpen, isOpen, menu, zIndex, blockName, placement }) => /* @__PURE__ */ React2.createElement(DSPopper, {
|
|
8
|
+
blockName,
|
|
9
|
+
placement,
|
|
10
|
+
contentComponent: menu,
|
|
11
|
+
isOpen,
|
|
12
|
+
onOpen,
|
|
13
|
+
modifiers: {
|
|
14
|
+
preventOverflow: {
|
|
15
|
+
enabled: true,
|
|
16
|
+
padding: 0,
|
|
17
|
+
boundariesElement: "window"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
showArrow: false,
|
|
21
|
+
triggerComponent: /* @__PURE__ */ React2.createElement(DSButton, {
|
|
22
|
+
buttonType: "secondary",
|
|
23
|
+
disabled,
|
|
24
|
+
icon: /* @__PURE__ */ React2.createElement(RecentDocuments, null),
|
|
25
|
+
iconSize: "s",
|
|
26
|
+
onClick
|
|
27
|
+
}),
|
|
28
|
+
zIndex
|
|
29
|
+
});
|
|
30
|
+
TimePickerDropdown.propTypes = {
|
|
31
|
+
onClick: PropTypes.func,
|
|
32
|
+
onOpen: PropTypes.func,
|
|
33
|
+
disabled: PropTypes.bool,
|
|
34
|
+
isOpen: PropTypes.bool,
|
|
35
|
+
menu: PropTypes.element,
|
|
36
|
+
blockName: PropTypes.string,
|
|
37
|
+
placement: PropTypes.string,
|
|
38
|
+
zIndex: PropTypes.number
|
|
39
|
+
};
|
|
40
|
+
var TimePickerDropdown_default = TimePickerDropdown;
|
|
41
|
+
export {
|
|
42
|
+
TimePickerDropdown,
|
|
43
|
+
TimePickerDropdown_default as default
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=TimePickerDropdown.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TimePickerDropdown.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopper } from '@elliemae/ds-popper';\n\nconst TimePickerDropdown = ({ disabled = false, onClick, onOpen, isOpen, menu, zIndex, blockName, placement }) => (\n <DSPopper\n blockName={blockName}\n placement={placement}\n contentComponent={menu}\n isOpen={isOpen}\n onOpen={onOpen}\n modifiers={{\n preventOverflow: {\n enabled: true,\n padding: 0,\n boundariesElement: 'window',\n },\n }}\n showArrow={false}\n triggerComponent={\n <DSButton buttonType=\"secondary\" disabled={disabled} icon={<RecentDocuments />} iconSize=\"s\" onClick={onClick} />\n }\n zIndex={zIndex}\n />\n);\n\nTimePickerDropdown.propTypes = {\n onClick: PropTypes.func,\n onOpen: PropTypes.func,\n disabled: PropTypes.bool,\n isOpen: PropTypes.bool,\n menu: PropTypes.element,\n blockName: PropTypes.string,\n placement: PropTypes.string,\n zIndex: PropTypes.number,\n};\n\nexport { TimePickerDropdown };\nexport default TimePickerDropdown;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,qBAAqB,CAAC,EAAE,WAAW,OAAO,SAAS,QAAQ,QAAQ,MAAM,QAAQ,WAAW,gBAChG,qCAAC,UAAD;AAAA,EACE;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,IACT,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,MACT,mBAAmB;AAAA;AAAA;AAAA,EAGvB,WAAW;AAAA,EACX,kBACE,qCAAC,UAAD;AAAA,IAAU,YAAW;AAAA,IAAY;AAAA,IAAoB,MAAM,qCAAC,iBAAD;AAAA,IAAqB,UAAS;AAAA,IAAI;AAAA;AAAA,EAE/F;AAAA;AAIJ,mBAAmB,YAAY;AAAA,EAC7B,SAAS,UAAU;AAAA,EACnB,QAAQ,UAAU;AAAA,EAClB,UAAU,UAAU;AAAA,EACpB,QAAQ,UAAU;AAAA,EAClB,MAAM,UAAU;AAAA,EAChB,WAAW,UAAU;AAAA,EACrB,WAAW,UAAU;AAAA,EACrB,QAAQ,UAAU;AAAA;AAIpB,IAAO,6BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|