@elliemae/ds-time-picker 3.0.0-next.13 → 3.0.0-next.17

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.
Files changed (9) hide show
  1. package/dist/cjs/PickerPanel.js +36 -36
  2. package/dist/cjs/PickerPanel.js.map +2 -2
  3. package/dist/cjs/TimePickerMenu.js +100 -100
  4. package/dist/cjs/TimePickerMenu.js.map +2 -2
  5. package/dist/esm/PickerPanel.js +36 -36
  6. package/dist/esm/PickerPanel.js.map +2 -2
  7. package/dist/esm/TimePickerMenu.js +100 -100
  8. package/dist/esm/TimePickerMenu.js.map +2 -2
  9. package/package.json +7 -7
package/dist/cjs/PickerPanel.js CHANGED
@@ -91,6 +91,42 @@ class PickerPanel extends import_react.Component {
91
91
  this.scrollHandler.updatePosition(listYPosition);
92
92
  return listYPosition;
93
93
  });
94
+ this.handleKeyDown = (e) => {
95
+ const { activeIndex } = this.state;
96
+ const { options } = this.props;
97
+ const [firstColumn, ...restColumns] = document.getElementsByClassName("em-ds-time-picker-panel");
98
+ const [lastColumn] = restColumns.slice(-1);
99
+ const [prev] = document.getElementsByClassName("DayPickerNavigation_button");
100
+ const focusedElement = document.activeElement;
101
+ switch (e.key) {
102
+ case "Home":
103
+ this.moveTo(0);
104
+ break;
105
+ case "End":
106
+ this.moveTo(options.length - 1);
107
+ break;
108
+ case "ArrowUp":
109
+ this.moveTo(activeIndex - 1);
110
+ break;
111
+ case "ArrowDown":
112
+ this.moveTo(activeIndex + 1);
113
+ break;
114
+ case "Tab": {
115
+ e.preventDefault();
116
+ if (prev && focusedElement === lastColumn) {
117
+ prev.focus();
118
+ } else if (focusedElement === lastColumn) {
119
+ firstColumn.focus();
120
+ } else {
121
+ const position = (0, import_lodash.findIndex)(restColumns, focusedElement);
122
+ restColumns[position + 1].focus();
123
+ }
124
+ break;
125
+ }
126
+ default:
127
+ break;
128
+ }
129
+ };
94
130
  this.renderHeader = () => {
95
131
  const { header } = this.props;
96
132
  return /* @__PURE__ */ import_react.default.createElement(PickerHeader, null, header);
@@ -164,42 +200,6 @@ class PickerPanel extends import_react.Component {
164
200
  onChange(optionValue, index);
165
201
  });
166
202
  }
167
- handleKeyDown(e) {
168
- const { activeIndex } = this.state;
169
- const { options } = this.props;
170
- const [firstColumn, ...restColumns] = document.getElementsByClassName("em-ds-time-picker-panel");
171
- const [lastColumn] = restColumns.slice(-1);
172
- const [prev] = document.getElementsByClassName("DayPickerNavigation_button");
173
- const focusedElement = document.activeElement;
174
- switch (e.key) {
175
- case "Home":
176
- this.moveTo(0);
177
- break;
178
- case "End":
179
- this.moveTo(options.length - 1);
180
- break;
181
- case "ArrowUp":
182
- this.moveTo(activeIndex - 1);
183
- break;
184
- case "ArrowDown":
185
- this.moveTo(activeIndex + 1);
186
- break;
187
- case "Tab": {
188
- e.preventDefault();
189
- if (prev && focusedElement === lastColumn) {
190
- prev.focus();
191
- } else if (focusedElement === lastColumn) {
192
- firstColumn.focus();
193
- } else {
194
- const position = (0, import_lodash.findIndex)(restColumns, focusedElement);
195
- restColumns[position + 1].focus();
196
- }
197
- break;
198
- }
199
- default:
200
- break;
201
- }
202
- }
203
203
  moveTo(index, scrolling) {
204
204
  const { options } = this.props;
205
205
  const { selectedOption } = this.state;
package/dist/cjs/PickerPanel.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/PickerPanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* 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 };", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* 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 };", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/cjs/TimePickerMenu.js CHANGED
@@ -66,6 +66,106 @@ const generateOption = (format) => (option) => ({
66
66
  class TimePickerMenu extends import_react.Component {
67
67
  constructor(props) {
68
68
  super(props);
69
+ this.handleMinuteChange = (value) => {
70
+ const { time } = this.state;
71
+ this.updateTime(time.minute(value));
72
+ };
73
+ this.handleHoursChange = (value) => {
74
+ const { time } = this.state;
75
+ const { use12Hours } = this.props;
76
+ let nextHour = value;
77
+ if (use12Hours) {
78
+ if (!(0, import_utils.isAM)(time)) {
79
+ nextHour = value % 12 + 12;
80
+ }
81
+ }
82
+ this.updateTime(time.hour(nextHour));
83
+ };
84
+ this.handleSecondsChange = (value) => {
85
+ const { time } = this.state;
86
+ this.updateTime(time.second(value));
87
+ };
88
+ this.handleAMPMChange = (value) => {
89
+ const { time } = this.state;
90
+ const hour = time.hour();
91
+ const nextHour = value.toLowerCase() === "am" ? hour % 12 : hour % 12 + 12;
92
+ this.updateTime(time.hour(nextHour));
93
+ };
94
+ this.updateTime = (time) => {
95
+ const { onTimeChange } = this.props;
96
+ onTimeChange(time);
97
+ this.setState({ time });
98
+ };
99
+ this.renderHoursPanel = () => {
100
+ const { time } = this.state;
101
+ const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;
102
+ if (!showHours)
103
+ return null;
104
+ const hour = time.hour();
105
+ let selectedHour = use12Hours ? hour % 12 || 12 : hour;
106
+ if (disabledTimes) {
107
+ const { from, to } = disabledTimes;
108
+ if (hour > from.hour && hour < to.hour) {
109
+ if (to.hour < 24) {
110
+ const toFormatted = to.hour % 12 || 12;
111
+ if (selectedHour !== toFormatted)
112
+ this.handleHoursChange(toFormatted);
113
+ selectedHour = toFormatted;
114
+ } else if (from) {
115
+ selectedHour = (from.hour - 1) % 12 || 12;
116
+ }
117
+ }
118
+ }
119
+ const meridiem = hour >= 12 ? "PM" : "AM";
120
+ const withLeadingZeros = format.indexOf("hh") > -1;
121
+ const rangeHours = use12Hours ? (0, import_ds_utilities.range)(1, 13) : (0, import_ds_utilities.range)(24);
122
+ const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && (0, import_ds_utilities.addLeadingZeros)(2)));
123
+ return /* @__PURE__ */ import_react.default.createElement(import_PickerPanel.PickerPanel, {
124
+ type: "hour",
125
+ time,
126
+ meridiem,
127
+ hasHeader,
128
+ header: "H",
129
+ onChange: this.handleHoursChange,
130
+ options: hoursOptions,
131
+ selected: selectedHour,
132
+ disabledTimes
133
+ });
134
+ };
135
+ this.renderMinutesPanel = () => {
136
+ const { time } = this.state;
137
+ const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;
138
+ if (!showMinutes)
139
+ return null;
140
+ const withLeadingZeros = format.indexOf("mm") > -1;
141
+ const rangeMinutes = (0, import_ds_utilities.range)(0, 60, minutesInterval).map(generateOption(withLeadingZeros && (0, import_ds_utilities.addLeadingZeros)(2)));
142
+ let selectedMinute = time.minute();
143
+ const selectedHour = time.hour();
144
+ if (disabledTimes) {
145
+ const { from, to } = disabledTimes;
146
+ if (selectedHour <= to.hour && selectedHour > from.hour) {
147
+ if (to) {
148
+ if (selectedMinute < to.min)
149
+ this.handleMinuteChange(to.min);
150
+ } else if (from) {
151
+ if (selectedMinute > from.min)
152
+ this.handleMinuteChange(from.min - 1);
153
+ }
154
+ } else {
155
+ selectedMinute = time.minute();
156
+ }
157
+ }
158
+ return /* @__PURE__ */ import_react.default.createElement(import_PickerPanel.PickerPanel, {
159
+ type: "minutes",
160
+ time,
161
+ hasHeader,
162
+ header: "M",
163
+ onChange: this.handleMinuteChange,
164
+ options: rangeMinutes,
165
+ selected: selectedMinute,
166
+ disabledTimes
167
+ });
168
+ };
69
169
  this.renderHeader = () => {
70
170
  const { time } = this.state;
71
171
  return /* @__PURE__ */ import_react.default.createElement(TimePickerHeader, null, time.format("hh:mma"));
@@ -84,106 +184,6 @@ class TimePickerMenu extends import_react.Component {
84
184
  const { time } = this.state;
85
185
  this.setState({ time });
86
186
  }
87
- handleMinuteChange(value) {
88
- const { time } = this.state;
89
- this.updateTime(time.minute(value));
90
- }
91
- handleHoursChange(value) {
92
- const { time } = this.state;
93
- const { use12Hours } = this.props;
94
- let nextHour = value;
95
- if (use12Hours) {
96
- if (!(0, import_utils.isAM)(time)) {
97
- nextHour = value % 12 + 12;
98
- }
99
- }
100
- this.updateTime(time.hour(nextHour));
101
- }
102
- handleSecondsChange(value) {
103
- const { time } = this.state;
104
- this.updateTime(time.second(value));
105
- }
106
- handleAMPMChange(value) {
107
- const { time } = this.state;
108
- const hour = time.hour();
109
- const nextHour = value.toLowerCase() === "am" ? hour % 12 : hour % 12 + 12;
110
- this.updateTime(time.hour(nextHour));
111
- }
112
- updateTime(time) {
113
- const { onTimeChange } = this.props;
114
- onTimeChange(time);
115
- this.setState({ time });
116
- }
117
- renderHoursPanel() {
118
- const { time } = this.state;
119
- const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;
120
- if (!showHours)
121
- return null;
122
- const hour = time.hour();
123
- let selectedHour = use12Hours ? hour % 12 || 12 : hour;
124
- if (disabledTimes) {
125
- const { from, to } = disabledTimes;
126
- if (hour > from.hour && hour < to.hour) {
127
- if (to.hour < 24) {
128
- const toFormatted = to.hour % 12 || 12;
129
- if (selectedHour !== toFormatted)
130
- this.handleHoursChange(toFormatted);
131
- selectedHour = toFormatted;
132
- } else if (from) {
133
- selectedHour = (from.hour - 1) % 12 || 12;
134
- }
135
- }
136
- }
137
- const meridiem = hour >= 12 ? "PM" : "AM";
138
- const withLeadingZeros = format.indexOf("hh") > -1;
139
- const rangeHours = use12Hours ? (0, import_ds_utilities.range)(1, 13) : (0, import_ds_utilities.range)(24);
140
- const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && (0, import_ds_utilities.addLeadingZeros)(2)));
141
- return /* @__PURE__ */ import_react.default.createElement(import_PickerPanel.PickerPanel, {
142
- type: "hour",
143
- time,
144
- meridiem,
145
- hasHeader,
146
- header: "H",
147
- onChange: this.handleHoursChange,
148
- options: hoursOptions,
149
- selected: selectedHour,
150
- disabledTimes
151
- });
152
- }
153
- renderMinutesPanel() {
154
- const { time } = this.state;
155
- const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;
156
- if (!showMinutes)
157
- return null;
158
- const withLeadingZeros = format.indexOf("mm") > -1;
159
- const rangeMinutes = (0, import_ds_utilities.range)(0, 60, minutesInterval).map(generateOption(withLeadingZeros && (0, import_ds_utilities.addLeadingZeros)(2)));
160
- let selectedMinute = time.minute();
161
- const selectedHour = time.hour();
162
- if (disabledTimes) {
163
- const { from, to } = disabledTimes;
164
- if (selectedHour <= to.hour && selectedHour > from.hour) {
165
- if (to) {
166
- if (selectedMinute < to.min)
167
- this.handleMinuteChange(to.min);
168
- } else if (from) {
169
- if (selectedMinute > from.min)
170
- this.handleMinuteChange(from.min - 1);
171
- }
172
- } else {
173
- selectedMinute = time.minute();
174
- }
175
- }
176
- return /* @__PURE__ */ import_react.default.createElement(import_PickerPanel.PickerPanel, {
177
- type: "minutes",
178
- time,
179
- hasHeader,
180
- header: "M",
181
- onChange: this.handleMinuteChange,
182
- options: rangeMinutes,
183
- selected: selectedMinute,
184
- disabledTimes
185
- });
186
- }
187
187
  renderSecondsPanel() {
188
188
  const { time } = this.state;
189
189
  const { showSeconds, format, hasHeader } = this.props;
package/dist/cjs/TimePickerMenu.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/TimePickerMenu.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport moment from 'moment';\nimport { range, addLeadingZeros } from '@elliemae/ds-utilities';\nimport { isAM } from './utils';\nimport { PickerPanel } from './PickerPanel';\n\nconst blockName = 'time-picker-menu';\n\nconst TimePickerContainer = aggregatedClasses('div')(blockName);\nconst TimePickerHeader = aggregatedClasses('div')(blockName, 'header');\nconst TimePickerPanelContainer = aggregatedClasses('div')(blockName, 'panel-container');\n\nconst generateOption = (format) => (option) => ({\n value: option,\n label: typeof format === 'function' ? format(option) : option,\n});\n\nclass TimePickerMenu extends Component {\n constructor(props) {\n super(props);\n this.state = {\n time: moment(props.time || '', props.format) || moment(),\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n if (props.time) {\n return { ...state, time: moment(props.time) };\n }\n return { ...state, time: undefined };\n }\n\n componentDidMount() {\n const { time } = this.state;\n this.setState({ time });\n }\n\n handleMinuteChange(value) {\n const { time } = this.state;\n this.updateTime(time.minute(value));\n }\n\n handleHoursChange(value) {\n const { time } = this.state;\n const { use12Hours } = this.props;\n let nextHour = value;\n if (use12Hours) {\n if (!isAM(time)) {\n nextHour = (value % 12) + 12;\n }\n }\n this.updateTime(time.hour(nextHour));\n }\n\n handleSecondsChange(value) {\n const { time } = this.state;\n this.updateTime(time.second(value));\n }\n\n handleAMPMChange(value) {\n const { time } = this.state;\n const hour = time.hour();\n const nextHour = value.toLowerCase() === 'am' ? hour % 12 : (hour % 12) + 12;\n this.updateTime(time.hour(nextHour));\n }\n\n updateTime(time) {\n const { onTimeChange } = this.props;\n onTimeChange(time);\n this.setState({ time });\n }\n\n renderHoursPanel() {\n const { time } = this.state;\n const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;\n if (!showHours) return null;\n\n const hour = time.hour(); // in 24 format\n let selectedHour = use12Hours ? hour % 12 || 12 : hour;\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (hour > from.hour && hour < to.hour) {\n if (to.hour < 24) {\n const toFormatted = to.hour % 12 || 12;\n if (selectedHour !== toFormatted) this.handleHoursChange(toFormatted);\n selectedHour = toFormatted;\n } else if (from) {\n selectedHour = (from.hour - 1) % 12 || 12;\n }\n }\n }\n\n const meridiem = hour >= 12 ? 'PM' : 'AM';\n const withLeadingZeros = format.indexOf('hh') > -1;\n const rangeHours = use12Hours ? range(1, 13) : range(24);\n const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n return (\n <PickerPanel\n type=\"hour\"\n time={time}\n meridiem={meridiem}\n hasHeader={hasHeader}\n header=\"H\"\n onChange={this.handleHoursChange}\n options={hoursOptions}\n selected={selectedHour}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderMinutesPanel() {\n const { time } = this.state;\n const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;\n if (!showMinutes) return null;\n const withLeadingZeros = format.indexOf('mm') > -1;\n const rangeMinutes = range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n\n let selectedMinute = time.minute();\n const selectedHour = time.hour();\n\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (selectedHour <= to.hour && selectedHour > from.hour) {\n if (to) {\n if (selectedMinute < to.min) this.handleMinuteChange(to.min);\n } else if (from) {\n if (selectedMinute > from.min) this.handleMinuteChange(from.min - 1);\n }\n } else {\n selectedMinute = time.minute();\n }\n }\n\n return (\n <PickerPanel\n type=\"minutes\"\n time={time}\n hasHeader={hasHeader}\n header=\"M\"\n onChange={this.handleMinuteChange}\n options={rangeMinutes}\n selected={selectedMinute}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderSecondsPanel() {\n const { time } = this.state;\n const { showSeconds, format, hasHeader } = this.props;\n if (!showSeconds) return null;\n const withLeadingZeros = format.indexOf('ss') > -1;\n const rangeSeconds = range(60).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n return (\n <PickerPanel\n type=\"seconds\"\n hasHeader={hasHeader}\n header=\"S\"\n onChange={this.handleSecondsChange}\n options={rangeSeconds}\n selected={time.second()}\n />\n );\n }\n\n renderAMPMPanel() {\n const { time } = this.state;\n const { use12Hours, hasHeader, disabledTimes } = this.props;\n if (!use12Hours) return null;\n\n let meridiemSelected = !isAM(time) ? 'pm' : 'am';\n if (disabledTimes && disabledTimes.to && meridiemSelected === 'am') {\n meridiemSelected = disabledTimes.to.hour >= 12 ? 'pm' : 'am';\n if (meridiemSelected === 'am' && time.hour() > 12) {\n this.handleAMPMChange('am');\n }\n\n if (meridiemSelected === 'pm' && time.hour() <= 12) {\n this.handleAMPMChange('pm');\n }\n }\n\n return (\n <PickerPanel\n type=\"meridiem\"\n hasHeader={hasHeader}\n header=\"\"\n onChange={this.handleAMPMChange}\n options={[\n { value: 'am', label: 'am' },\n { value: 'pm', label: 'pm' },\n ]}\n selected={meridiemSelected}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderHeader = () => {\n const { time } = this.state;\n return <TimePickerHeader>{time.format('hh:mma')}</TimePickerHeader>;\n };\n\n render() {\n const { hasHeaderDisplay } = this.props;\n\n return (\n <TimePickerContainer>\n {hasHeaderDisplay && this.renderHeader()}\n <TimePickerPanelContainer>\n {this.renderHoursPanel()}\n {this.renderMinutesPanel()}\n {this.renderSecondsPanel()}\n {this.renderAMPMPanel()}\n </TimePickerPanelContainer>\n </TimePickerContainer>\n );\n }\n}\n\nTimePickerMenu.defaultProps = {\n time: moment(),\n hasHeader: false,\n use12Hours: true,\n showSeconds: true,\n showMinutes: true,\n showHours: true,\n disabledTimes: undefined,\n onTimeChange: () => null,\n};\n\nTimePickerMenu.propTypes = {\n /** Time value */\n time: PropTypes.instanceOf(moment),\n /** If the menu has header or not */\n hasHeader: PropTypes.bool,\n /** Whether to use the 12 hours format */\n use12Hours: PropTypes.bool,\n /** Whether show 'seconds' or not */\n showSeconds: PropTypes.bool,\n /** Whether show 'minutes' or not */\n showMinutes: PropTypes.bool,\n /** Whether show 'hours' or not */\n showHours: PropTypes.bool,\n /** Handler when time changes */\n onTimeChange: PropTypes.func,\n disabledTimes: PropTypes.object,\n};\n\nexport { TimePickerMenu };\nexport default TimePickerMenu;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport moment from 'moment';\nimport { range, addLeadingZeros } from '@elliemae/ds-utilities';\nimport { isAM } from './utils';\nimport { PickerPanel } from './PickerPanel';\n\nconst blockName = 'time-picker-menu';\n\nconst TimePickerContainer = aggregatedClasses('div')(blockName);\nconst TimePickerHeader = aggregatedClasses('div')(blockName, 'header');\nconst TimePickerPanelContainer = aggregatedClasses('div')(blockName, 'panel-container');\n\nconst generateOption = (format) => (option) => ({\n value: option,\n label: typeof format === 'function' ? format(option) : option,\n});\n\nclass TimePickerMenu extends Component {\n constructor(props) {\n super(props);\n this.state = {\n time: moment(props.time || '', props.format) || moment(),\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n if (props.time) {\n return { ...state, time: moment(props.time) };\n }\n return { ...state, time: undefined };\n }\n\n componentDidMount() {\n const { time } = this.state;\n this.setState({ time });\n }\n\n handleMinuteChange = (value) => {\n const { time } = this.state;\n this.updateTime(time.minute(value));\n }\n\n handleHoursChange = (value) => {\n const { time } = this.state;\n const { use12Hours } = this.props;\n let nextHour = value;\n if (use12Hours) {\n if (!isAM(time)) {\n nextHour = (value % 12) + 12;\n }\n }\n this.updateTime(time.hour(nextHour));\n }\n\n handleSecondsChange = (value) => {\n const { time } = this.state;\n this.updateTime(time.second(value));\n }\n\n handleAMPMChange = (value) => {\n const { time } = this.state;\n const hour = time.hour();\n const nextHour = value.toLowerCase() === 'am' ? hour % 12 : (hour % 12) + 12;\n this.updateTime(time.hour(nextHour));\n }\n\n updateTime = (time) => {\n const { onTimeChange } = this.props;\n onTimeChange(time);\n this.setState({ time });\n }\n\n renderHoursPanel = () => {\n const { time } = this.state;\n const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;\n if (!showHours) return null;\n\n const hour = time.hour(); // in 24 format\n let selectedHour = use12Hours ? hour % 12 || 12 : hour;\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (hour > from.hour && hour < to.hour) {\n if (to.hour < 24) {\n const toFormatted = to.hour % 12 || 12;\n if (selectedHour !== toFormatted) this.handleHoursChange(toFormatted);\n selectedHour = toFormatted;\n } else if (from) {\n selectedHour = (from.hour - 1) % 12 || 12;\n }\n }\n }\n\n const meridiem = hour >= 12 ? 'PM' : 'AM';\n const withLeadingZeros = format.indexOf('hh') > -1;\n const rangeHours = use12Hours ? range(1, 13) : range(24);\n const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n return (\n <PickerPanel\n type=\"hour\"\n time={time}\n meridiem={meridiem}\n hasHeader={hasHeader}\n header=\"H\"\n onChange={this.handleHoursChange}\n options={hoursOptions}\n selected={selectedHour}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderMinutesPanel = () => {\n const { time } = this.state;\n const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;\n if (!showMinutes) return null;\n const withLeadingZeros = format.indexOf('mm') > -1;\n const rangeMinutes = range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n\n let selectedMinute = time.minute();\n const selectedHour = time.hour();\n\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (selectedHour <= to.hour && selectedHour > from.hour) {\n if (to) {\n if (selectedMinute < to.min) this.handleMinuteChange(to.min);\n } else if (from) {\n if (selectedMinute > from.min) this.handleMinuteChange(from.min - 1);\n }\n } else {\n selectedMinute = time.minute();\n }\n }\n\n return (\n <PickerPanel\n type=\"minutes\"\n time={time}\n hasHeader={hasHeader}\n header=\"M\"\n onChange={this.handleMinuteChange}\n options={rangeMinutes}\n selected={selectedMinute}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderSecondsPanel() {\n const { time } = this.state;\n const { showSeconds, format, hasHeader } = this.props;\n if (!showSeconds) return null;\n const withLeadingZeros = format.indexOf('ss') > -1;\n const rangeSeconds = range(60).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n return (\n <PickerPanel\n type=\"seconds\"\n hasHeader={hasHeader}\n header=\"S\"\n onChange={this.handleSecondsChange}\n options={rangeSeconds}\n selected={time.second()}\n />\n );\n }\n\n renderAMPMPanel() {\n const { time } = this.state;\n const { use12Hours, hasHeader, disabledTimes } = this.props;\n if (!use12Hours) return null;\n\n let meridiemSelected = !isAM(time) ? 'pm' : 'am';\n if (disabledTimes && disabledTimes.to && meridiemSelected === 'am') {\n meridiemSelected = disabledTimes.to.hour >= 12 ? 'pm' : 'am';\n if (meridiemSelected === 'am' && time.hour() > 12) {\n this.handleAMPMChange('am');\n }\n\n if (meridiemSelected === 'pm' && time.hour() <= 12) {\n this.handleAMPMChange('pm');\n }\n }\n\n return (\n <PickerPanel\n type=\"meridiem\"\n hasHeader={hasHeader}\n header=\"\"\n onChange={this.handleAMPMChange}\n options={[\n { value: 'am', label: 'am' },\n { value: 'pm', label: 'pm' },\n ]}\n selected={meridiemSelected}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderHeader = () => {\n const { time } = this.state;\n return <TimePickerHeader>{time.format('hh:mma')}</TimePickerHeader>;\n };\n\n render() {\n const { hasHeaderDisplay } = this.props;\n\n return (\n <TimePickerContainer>\n {hasHeaderDisplay && this.renderHeader()}\n <TimePickerPanelContainer>\n {this.renderHoursPanel()}\n {this.renderMinutesPanel()}\n {this.renderSecondsPanel()}\n {this.renderAMPMPanel()}\n </TimePickerPanelContainer>\n </TimePickerContainer>\n );\n }\n}\n\nTimePickerMenu.defaultProps = {\n time: moment(),\n hasHeader: false,\n use12Hours: true,\n showSeconds: true,\n showMinutes: true,\n showHours: true,\n disabledTimes: undefined,\n onTimeChange: () => null,\n};\n\nTimePickerMenu.propTypes = {\n /** Time value */\n time: PropTypes.instanceOf(moment),\n /** If the menu has header or not */\n hasHeader: PropTypes.bool,\n /** Whether to use the 12 hours format */\n use12Hours: PropTypes.bool,\n /** Whether show 'seconds' or not */\n showSeconds: PropTypes.bool,\n /** Whether show 'minutes' or not */\n showMinutes: PropTypes.bool,\n /** Whether show 'hours' or not */\n showHours: PropTypes.bool,\n /** Handler when time changes */\n onTimeChange: PropTypes.func,\n disabledTimes: PropTypes.object,\n};\n\nexport { TimePickerMenu };\nexport default TimePickerMenu;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/PickerPanel.js CHANGED
@@ -61,6 +61,42 @@ class PickerPanel extends Component {
61
61
  this.scrollHandler.updatePosition(listYPosition);
62
62
  return listYPosition;
63
63
  });
64
+ this.handleKeyDown = (e) => {
65
+ const { activeIndex } = this.state;
66
+ const { options } = this.props;
67
+ const [firstColumn, ...restColumns] = document.getElementsByClassName("em-ds-time-picker-panel");
68
+ const [lastColumn] = restColumns.slice(-1);
69
+ const [prev] = document.getElementsByClassName("DayPickerNavigation_button");
70
+ const focusedElement = document.activeElement;
71
+ switch (e.key) {
72
+ case "Home":
73
+ this.moveTo(0);
74
+ break;
75
+ case "End":
76
+ this.moveTo(options.length - 1);
77
+ break;
78
+ case "ArrowUp":
79
+ this.moveTo(activeIndex - 1);
80
+ break;
81
+ case "ArrowDown":
82
+ this.moveTo(activeIndex + 1);
83
+ break;
84
+ case "Tab": {
85
+ e.preventDefault();
86
+ if (prev && focusedElement === lastColumn) {
87
+ prev.focus();
88
+ } else if (focusedElement === lastColumn) {
89
+ firstColumn.focus();
90
+ } else {
91
+ const position = findIndex(restColumns, focusedElement);
92
+ restColumns[position + 1].focus();
93
+ }
94
+ break;
95
+ }
96
+ default:
97
+ break;
98
+ }
99
+ };
64
100
  this.renderHeader = () => {
65
101
  const { header } = this.props;
66
102
  return /* @__PURE__ */ React2.createElement(PickerHeader, null, header);
@@ -134,42 +170,6 @@ class PickerPanel extends Component {
134
170
  onChange(optionValue, index);
135
171
  });
136
172
  }
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
173
  moveTo(index, scrolling) {
174
174
  const { options } = this.props;
175
175
  const { selectedOption } = this.state;
package/dist/esm/PickerPanel.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
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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",
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
6
  "names": []
7
7
  }
package/dist/esm/TimePickerMenu.js CHANGED
@@ -36,6 +36,106 @@ const generateOption = (format) => (option) => ({
36
36
  class TimePickerMenu extends Component {
37
37
  constructor(props) {
38
38
  super(props);
39
+ this.handleMinuteChange = (value) => {
40
+ const { time } = this.state;
41
+ this.updateTime(time.minute(value));
42
+ };
43
+ this.handleHoursChange = (value) => {
44
+ const { time } = this.state;
45
+ const { use12Hours } = this.props;
46
+ let nextHour = value;
47
+ if (use12Hours) {
48
+ if (!isAM(time)) {
49
+ nextHour = value % 12 + 12;
50
+ }
51
+ }
52
+ this.updateTime(time.hour(nextHour));
53
+ };
54
+ this.handleSecondsChange = (value) => {
55
+ const { time } = this.state;
56
+ this.updateTime(time.second(value));
57
+ };
58
+ this.handleAMPMChange = (value) => {
59
+ const { time } = this.state;
60
+ const hour = time.hour();
61
+ const nextHour = value.toLowerCase() === "am" ? hour % 12 : hour % 12 + 12;
62
+ this.updateTime(time.hour(nextHour));
63
+ };
64
+ this.updateTime = (time) => {
65
+ const { onTimeChange } = this.props;
66
+ onTimeChange(time);
67
+ this.setState({ time });
68
+ };
69
+ this.renderHoursPanel = () => {
70
+ const { time } = this.state;
71
+ const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;
72
+ if (!showHours)
73
+ return null;
74
+ const hour = time.hour();
75
+ let selectedHour = use12Hours ? hour % 12 || 12 : hour;
76
+ if (disabledTimes) {
77
+ const { from, to } = disabledTimes;
78
+ if (hour > from.hour && hour < to.hour) {
79
+ if (to.hour < 24) {
80
+ const toFormatted = to.hour % 12 || 12;
81
+ if (selectedHour !== toFormatted)
82
+ this.handleHoursChange(toFormatted);
83
+ selectedHour = toFormatted;
84
+ } else if (from) {
85
+ selectedHour = (from.hour - 1) % 12 || 12;
86
+ }
87
+ }
88
+ }
89
+ const meridiem = hour >= 12 ? "PM" : "AM";
90
+ const withLeadingZeros = format.indexOf("hh") > -1;
91
+ const rangeHours = use12Hours ? range(1, 13) : range(24);
92
+ const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && addLeadingZeros(2)));
93
+ return /* @__PURE__ */ React2.createElement(PickerPanel, {
94
+ type: "hour",
95
+ time,
96
+ meridiem,
97
+ hasHeader,
98
+ header: "H",
99
+ onChange: this.handleHoursChange,
100
+ options: hoursOptions,
101
+ selected: selectedHour,
102
+ disabledTimes
103
+ });
104
+ };
105
+ this.renderMinutesPanel = () => {
106
+ const { time } = this.state;
107
+ const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;
108
+ if (!showMinutes)
109
+ return null;
110
+ const withLeadingZeros = format.indexOf("mm") > -1;
111
+ const rangeMinutes = range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && addLeadingZeros(2)));
112
+ let selectedMinute = time.minute();
113
+ const selectedHour = time.hour();
114
+ if (disabledTimes) {
115
+ const { from, to } = disabledTimes;
116
+ if (selectedHour <= to.hour && selectedHour > from.hour) {
117
+ if (to) {
118
+ if (selectedMinute < to.min)
119
+ this.handleMinuteChange(to.min);
120
+ } else if (from) {
121
+ if (selectedMinute > from.min)
122
+ this.handleMinuteChange(from.min - 1);
123
+ }
124
+ } else {
125
+ selectedMinute = time.minute();
126
+ }
127
+ }
128
+ return /* @__PURE__ */ React2.createElement(PickerPanel, {
129
+ type: "minutes",
130
+ time,
131
+ hasHeader,
132
+ header: "M",
133
+ onChange: this.handleMinuteChange,
134
+ options: rangeMinutes,
135
+ selected: selectedMinute,
136
+ disabledTimes
137
+ });
138
+ };
39
139
  this.renderHeader = () => {
40
140
  const { time } = this.state;
41
141
  return /* @__PURE__ */ React2.createElement(TimePickerHeader, null, time.format("hh:mma"));
@@ -54,106 +154,6 @@ class TimePickerMenu extends Component {
54
154
  const { time } = this.state;
55
155
  this.setState({ time });
56
156
  }
57
- handleMinuteChange(value) {
58
- const { time } = this.state;
59
- this.updateTime(time.minute(value));
60
- }
61
- handleHoursChange(value) {
62
- const { time } = this.state;
63
- const { use12Hours } = this.props;
64
- let nextHour = value;
65
- if (use12Hours) {
66
- if (!isAM(time)) {
67
- nextHour = value % 12 + 12;
68
- }
69
- }
70
- this.updateTime(time.hour(nextHour));
71
- }
72
- handleSecondsChange(value) {
73
- const { time } = this.state;
74
- this.updateTime(time.second(value));
75
- }
76
- handleAMPMChange(value) {
77
- const { time } = this.state;
78
- const hour = time.hour();
79
- const nextHour = value.toLowerCase() === "am" ? hour % 12 : hour % 12 + 12;
80
- this.updateTime(time.hour(nextHour));
81
- }
82
- updateTime(time) {
83
- const { onTimeChange } = this.props;
84
- onTimeChange(time);
85
- this.setState({ time });
86
- }
87
- renderHoursPanel() {
88
- const { time } = this.state;
89
- const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;
90
- if (!showHours)
91
- return null;
92
- const hour = time.hour();
93
- let selectedHour = use12Hours ? hour % 12 || 12 : hour;
94
- if (disabledTimes) {
95
- const { from, to } = disabledTimes;
96
- if (hour > from.hour && hour < to.hour) {
97
- if (to.hour < 24) {
98
- const toFormatted = to.hour % 12 || 12;
99
- if (selectedHour !== toFormatted)
100
- this.handleHoursChange(toFormatted);
101
- selectedHour = toFormatted;
102
- } else if (from) {
103
- selectedHour = (from.hour - 1) % 12 || 12;
104
- }
105
- }
106
- }
107
- const meridiem = hour >= 12 ? "PM" : "AM";
108
- const withLeadingZeros = format.indexOf("hh") > -1;
109
- const rangeHours = use12Hours ? range(1, 13) : range(24);
110
- const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && addLeadingZeros(2)));
111
- return /* @__PURE__ */ React2.createElement(PickerPanel, {
112
- type: "hour",
113
- time,
114
- meridiem,
115
- hasHeader,
116
- header: "H",
117
- onChange: this.handleHoursChange,
118
- options: hoursOptions,
119
- selected: selectedHour,
120
- disabledTimes
121
- });
122
- }
123
- renderMinutesPanel() {
124
- const { time } = this.state;
125
- const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;
126
- if (!showMinutes)
127
- return null;
128
- const withLeadingZeros = format.indexOf("mm") > -1;
129
- const rangeMinutes = range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && addLeadingZeros(2)));
130
- let selectedMinute = time.minute();
131
- const selectedHour = time.hour();
132
- if (disabledTimes) {
133
- const { from, to } = disabledTimes;
134
- if (selectedHour <= to.hour && selectedHour > from.hour) {
135
- if (to) {
136
- if (selectedMinute < to.min)
137
- this.handleMinuteChange(to.min);
138
- } else if (from) {
139
- if (selectedMinute > from.min)
140
- this.handleMinuteChange(from.min - 1);
141
- }
142
- } else {
143
- selectedMinute = time.minute();
144
- }
145
- }
146
- return /* @__PURE__ */ React2.createElement(PickerPanel, {
147
- type: "minutes",
148
- time,
149
- hasHeader,
150
- header: "M",
151
- onChange: this.handleMinuteChange,
152
- options: rangeMinutes,
153
- selected: selectedMinute,
154
- disabledTimes
155
- });
156
- }
157
157
  renderSecondsPanel() {
158
158
  const { time } = this.state;
159
159
  const { showSeconds, format, hasHeader } = this.props;
package/dist/esm/TimePickerMenu.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TimePickerMenu.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport moment from 'moment';\nimport { range, addLeadingZeros } from '@elliemae/ds-utilities';\nimport { isAM } from './utils';\nimport { PickerPanel } from './PickerPanel';\n\nconst blockName = 'time-picker-menu';\n\nconst TimePickerContainer = aggregatedClasses('div')(blockName);\nconst TimePickerHeader = aggregatedClasses('div')(blockName, 'header');\nconst TimePickerPanelContainer = aggregatedClasses('div')(blockName, 'panel-container');\n\nconst generateOption = (format) => (option) => ({\n value: option,\n label: typeof format === 'function' ? format(option) : option,\n});\n\nclass TimePickerMenu extends Component {\n constructor(props) {\n super(props);\n this.state = {\n time: moment(props.time || '', props.format) || moment(),\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n if (props.time) {\n return { ...state, time: moment(props.time) };\n }\n return { ...state, time: undefined };\n }\n\n componentDidMount() {\n const { time } = this.state;\n this.setState({ time });\n }\n\n handleMinuteChange(value) {\n const { time } = this.state;\n this.updateTime(time.minute(value));\n }\n\n handleHoursChange(value) {\n const { time } = this.state;\n const { use12Hours } = this.props;\n let nextHour = value;\n if (use12Hours) {\n if (!isAM(time)) {\n nextHour = (value % 12) + 12;\n }\n }\n this.updateTime(time.hour(nextHour));\n }\n\n handleSecondsChange(value) {\n const { time } = this.state;\n this.updateTime(time.second(value));\n }\n\n handleAMPMChange(value) {\n const { time } = this.state;\n const hour = time.hour();\n const nextHour = value.toLowerCase() === 'am' ? hour % 12 : (hour % 12) + 12;\n this.updateTime(time.hour(nextHour));\n }\n\n updateTime(time) {\n const { onTimeChange } = this.props;\n onTimeChange(time);\n this.setState({ time });\n }\n\n renderHoursPanel() {\n const { time } = this.state;\n const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;\n if (!showHours) return null;\n\n const hour = time.hour(); // in 24 format\n let selectedHour = use12Hours ? hour % 12 || 12 : hour;\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (hour > from.hour && hour < to.hour) {\n if (to.hour < 24) {\n const toFormatted = to.hour % 12 || 12;\n if (selectedHour !== toFormatted) this.handleHoursChange(toFormatted);\n selectedHour = toFormatted;\n } else if (from) {\n selectedHour = (from.hour - 1) % 12 || 12;\n }\n }\n }\n\n const meridiem = hour >= 12 ? 'PM' : 'AM';\n const withLeadingZeros = format.indexOf('hh') > -1;\n const rangeHours = use12Hours ? range(1, 13) : range(24);\n const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n return (\n <PickerPanel\n type=\"hour\"\n time={time}\n meridiem={meridiem}\n hasHeader={hasHeader}\n header=\"H\"\n onChange={this.handleHoursChange}\n options={hoursOptions}\n selected={selectedHour}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderMinutesPanel() {\n const { time } = this.state;\n const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;\n if (!showMinutes) return null;\n const withLeadingZeros = format.indexOf('mm') > -1;\n const rangeMinutes = range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n\n let selectedMinute = time.minute();\n const selectedHour = time.hour();\n\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (selectedHour <= to.hour && selectedHour > from.hour) {\n if (to) {\n if (selectedMinute < to.min) this.handleMinuteChange(to.min);\n } else if (from) {\n if (selectedMinute > from.min) this.handleMinuteChange(from.min - 1);\n }\n } else {\n selectedMinute = time.minute();\n }\n }\n\n return (\n <PickerPanel\n type=\"minutes\"\n time={time}\n hasHeader={hasHeader}\n header=\"M\"\n onChange={this.handleMinuteChange}\n options={rangeMinutes}\n selected={selectedMinute}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderSecondsPanel() {\n const { time } = this.state;\n const { showSeconds, format, hasHeader } = this.props;\n if (!showSeconds) return null;\n const withLeadingZeros = format.indexOf('ss') > -1;\n const rangeSeconds = range(60).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n return (\n <PickerPanel\n type=\"seconds\"\n hasHeader={hasHeader}\n header=\"S\"\n onChange={this.handleSecondsChange}\n options={rangeSeconds}\n selected={time.second()}\n />\n );\n }\n\n renderAMPMPanel() {\n const { time } = this.state;\n const { use12Hours, hasHeader, disabledTimes } = this.props;\n if (!use12Hours) return null;\n\n let meridiemSelected = !isAM(time) ? 'pm' : 'am';\n if (disabledTimes && disabledTimes.to && meridiemSelected === 'am') {\n meridiemSelected = disabledTimes.to.hour >= 12 ? 'pm' : 'am';\n if (meridiemSelected === 'am' && time.hour() > 12) {\n this.handleAMPMChange('am');\n }\n\n if (meridiemSelected === 'pm' && time.hour() <= 12) {\n this.handleAMPMChange('pm');\n }\n }\n\n return (\n <PickerPanel\n type=\"meridiem\"\n hasHeader={hasHeader}\n header=\"\"\n onChange={this.handleAMPMChange}\n options={[\n { value: 'am', label: 'am' },\n { value: 'pm', label: 'pm' },\n ]}\n selected={meridiemSelected}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderHeader = () => {\n const { time } = this.state;\n return <TimePickerHeader>{time.format('hh:mma')}</TimePickerHeader>;\n };\n\n render() {\n const { hasHeaderDisplay } = this.props;\n\n return (\n <TimePickerContainer>\n {hasHeaderDisplay && this.renderHeader()}\n <TimePickerPanelContainer>\n {this.renderHoursPanel()}\n {this.renderMinutesPanel()}\n {this.renderSecondsPanel()}\n {this.renderAMPMPanel()}\n </TimePickerPanelContainer>\n </TimePickerContainer>\n );\n }\n}\n\nTimePickerMenu.defaultProps = {\n time: moment(),\n hasHeader: false,\n use12Hours: true,\n showSeconds: true,\n showMinutes: true,\n showHours: true,\n disabledTimes: undefined,\n onTimeChange: () => null,\n};\n\nTimePickerMenu.propTypes = {\n /** Time value */\n time: PropTypes.instanceOf(moment),\n /** If the menu has header or not */\n hasHeader: PropTypes.bool,\n /** Whether to use the 12 hours format */\n use12Hours: PropTypes.bool,\n /** Whether show 'seconds' or not */\n showSeconds: PropTypes.bool,\n /** Whether show 'minutes' or not */\n showMinutes: PropTypes.bool,\n /** Whether show 'hours' or not */\n showHours: PropTypes.bool,\n /** Handler when time changes */\n onTimeChange: PropTypes.func,\n disabledTimes: PropTypes.object,\n};\n\nexport { TimePickerMenu };\nexport default TimePickerMenu;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport moment from 'moment';\nimport { range, addLeadingZeros } from '@elliemae/ds-utilities';\nimport { isAM } from './utils';\nimport { PickerPanel } from './PickerPanel';\n\nconst blockName = 'time-picker-menu';\n\nconst TimePickerContainer = aggregatedClasses('div')(blockName);\nconst TimePickerHeader = aggregatedClasses('div')(blockName, 'header');\nconst TimePickerPanelContainer = aggregatedClasses('div')(blockName, 'panel-container');\n\nconst generateOption = (format) => (option) => ({\n value: option,\n label: typeof format === 'function' ? format(option) : option,\n});\n\nclass TimePickerMenu extends Component {\n constructor(props) {\n super(props);\n this.state = {\n time: moment(props.time || '', props.format) || moment(),\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n if (props.time) {\n return { ...state, time: moment(props.time) };\n }\n return { ...state, time: undefined };\n }\n\n componentDidMount() {\n const { time } = this.state;\n this.setState({ time });\n }\n\n handleMinuteChange = (value) => {\n const { time } = this.state;\n this.updateTime(time.minute(value));\n }\n\n handleHoursChange = (value) => {\n const { time } = this.state;\n const { use12Hours } = this.props;\n let nextHour = value;\n if (use12Hours) {\n if (!isAM(time)) {\n nextHour = (value % 12) + 12;\n }\n }\n this.updateTime(time.hour(nextHour));\n }\n\n handleSecondsChange = (value) => {\n const { time } = this.state;\n this.updateTime(time.second(value));\n }\n\n handleAMPMChange = (value) => {\n const { time } = this.state;\n const hour = time.hour();\n const nextHour = value.toLowerCase() === 'am' ? hour % 12 : (hour % 12) + 12;\n this.updateTime(time.hour(nextHour));\n }\n\n updateTime = (time) => {\n const { onTimeChange } = this.props;\n onTimeChange(time);\n this.setState({ time });\n }\n\n renderHoursPanel = () => {\n const { time } = this.state;\n const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;\n if (!showHours) return null;\n\n const hour = time.hour(); // in 24 format\n let selectedHour = use12Hours ? hour % 12 || 12 : hour;\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (hour > from.hour && hour < to.hour) {\n if (to.hour < 24) {\n const toFormatted = to.hour % 12 || 12;\n if (selectedHour !== toFormatted) this.handleHoursChange(toFormatted);\n selectedHour = toFormatted;\n } else if (from) {\n selectedHour = (from.hour - 1) % 12 || 12;\n }\n }\n }\n\n const meridiem = hour >= 12 ? 'PM' : 'AM';\n const withLeadingZeros = format.indexOf('hh') > -1;\n const rangeHours = use12Hours ? range(1, 13) : range(24);\n const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n return (\n <PickerPanel\n type=\"hour\"\n time={time}\n meridiem={meridiem}\n hasHeader={hasHeader}\n header=\"H\"\n onChange={this.handleHoursChange}\n options={hoursOptions}\n selected={selectedHour}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderMinutesPanel = () => {\n const { time } = this.state;\n const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;\n if (!showMinutes) return null;\n const withLeadingZeros = format.indexOf('mm') > -1;\n const rangeMinutes = range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n\n let selectedMinute = time.minute();\n const selectedHour = time.hour();\n\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (selectedHour <= to.hour && selectedHour > from.hour) {\n if (to) {\n if (selectedMinute < to.min) this.handleMinuteChange(to.min);\n } else if (from) {\n if (selectedMinute > from.min) this.handleMinuteChange(from.min - 1);\n }\n } else {\n selectedMinute = time.minute();\n }\n }\n\n return (\n <PickerPanel\n type=\"minutes\"\n time={time}\n hasHeader={hasHeader}\n header=\"M\"\n onChange={this.handleMinuteChange}\n options={rangeMinutes}\n selected={selectedMinute}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderSecondsPanel() {\n const { time } = this.state;\n const { showSeconds, format, hasHeader } = this.props;\n if (!showSeconds) return null;\n const withLeadingZeros = format.indexOf('ss') > -1;\n const rangeSeconds = range(60).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n return (\n <PickerPanel\n type=\"seconds\"\n hasHeader={hasHeader}\n header=\"S\"\n onChange={this.handleSecondsChange}\n options={rangeSeconds}\n selected={time.second()}\n />\n );\n }\n\n renderAMPMPanel() {\n const { time } = this.state;\n const { use12Hours, hasHeader, disabledTimes } = this.props;\n if (!use12Hours) return null;\n\n let meridiemSelected = !isAM(time) ? 'pm' : 'am';\n if (disabledTimes && disabledTimes.to && meridiemSelected === 'am') {\n meridiemSelected = disabledTimes.to.hour >= 12 ? 'pm' : 'am';\n if (meridiemSelected === 'am' && time.hour() > 12) {\n this.handleAMPMChange('am');\n }\n\n if (meridiemSelected === 'pm' && time.hour() <= 12) {\n this.handleAMPMChange('pm');\n }\n }\n\n return (\n <PickerPanel\n type=\"meridiem\"\n hasHeader={hasHeader}\n header=\"\"\n onChange={this.handleAMPMChange}\n options={[\n { value: 'am', label: 'am' },\n { value: 'pm', label: 'pm' },\n ]}\n selected={meridiemSelected}\n disabledTimes={disabledTimes}\n />\n );\n }\n\n renderHeader = () => {\n const { time } = this.state;\n return <TimePickerHeader>{time.format('hh:mma')}</TimePickerHeader>;\n };\n\n render() {\n const { hasHeaderDisplay } = this.props;\n\n return (\n <TimePickerContainer>\n {hasHeaderDisplay && this.renderHeader()}\n <TimePickerPanelContainer>\n {this.renderHoursPanel()}\n {this.renderMinutesPanel()}\n {this.renderSecondsPanel()}\n {this.renderAMPMPanel()}\n </TimePickerPanelContainer>\n </TimePickerContainer>\n );\n }\n}\n\nTimePickerMenu.defaultProps = {\n time: moment(),\n hasHeader: false,\n use12Hours: true,\n showSeconds: true,\n showMinutes: true,\n showHours: true,\n disabledTimes: undefined,\n onTimeChange: () => null,\n};\n\nTimePickerMenu.propTypes = {\n /** Time value */\n time: PropTypes.instanceOf(moment),\n /** If the menu has header or not */\n hasHeader: PropTypes.bool,\n /** Whether to use the 12 hours format */\n use12Hours: PropTypes.bool,\n /** Whether show 'seconds' or not */\n showSeconds: PropTypes.bool,\n /** Whether show 'minutes' or not */\n showMinutes: PropTypes.bool,\n /** Whether show 'hours' or not */\n showHours: PropTypes.bool,\n /** Handler when time changes */\n onTimeChange: PropTypes.func,\n disabledTimes: PropTypes.object,\n};\n\nexport { TimePickerMenu };\nexport default TimePickerMenu;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-time-picker",
3
- "version": "3.0.0-next.13",
3
+ "version": "3.0.0-next.17",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Time Picker",
6
6
  "files": [
@@ -67,12 +67,12 @@
67
67
  "indent": 4
68
68
  },
69
69
  "dependencies": {
70
- "@elliemae/ds-button": "3.0.0-next.13",
71
- "@elliemae/ds-classnames": "3.0.0-next.13",
72
- "@elliemae/ds-form": "3.0.0-next.13",
73
- "@elliemae/ds-icons": "3.0.0-next.13",
74
- "@elliemae/ds-popper": "3.0.0-next.13",
75
- "@elliemae/ds-utilities": "3.0.0-next.13",
70
+ "@elliemae/ds-button": "3.0.0-next.17",
71
+ "@elliemae/ds-classnames": "3.0.0-next.17",
72
+ "@elliemae/ds-form": "3.0.0-next.17",
73
+ "@elliemae/ds-icons": "3.0.0-next.17",
74
+ "@elliemae/ds-popper": "3.0.0-next.17",
75
+ "@elliemae/ds-utilities": "3.0.0-next.17",
76
76
  "memoize-one": "~5.1.1",
77
77
  "moment": "~2.29.1",
78
78
  "prop-types": "~15.8.1",