Skip to content

Commit 881b218

Browse files
Becca Baileydethstrobejridgewell
authored
✨ Add Bento Date Picker Component (ampproject#37385)
* Generate initial amp-date-picker 1.0 * Add initial test * Set value from single input in state * Add date parsing and formatting * Add hidden input field for single date * Add hidden start and end date elements * Refactor to fix component length * Add additional range test * Add imports and copy/pasted CSS * Add DayPicker controller imports * Add date-fns and react-day-picker * Test overlay mode error cases * Add DayPicker component (this currently breaks the tests) * Temporarily stub react to fix external module test * Re-add react-dates and add change date tests * Fix createLTR error by importing react-dates/initialize * Add selected dates and initial month * Swap out react-dates for react-day-picker * Fix test babel config * Refactor single input to avoid saving input field in state * Refactor start and end dates * Update calendar state logic * Add basic aria label to date butons * Add basic blocked dates functionality * Add blocked date range rules * Add RRULE blocked date parsing * Add highlighted dates * Refactor date picker into single and range components * Extract test helpers to separate file * Replace children logic * Refactor conditional logic for top-level date picker * Fix rrule tests to include start date * Add min date * Add default min value and test stub * Add max date * Add month formatting and base date picker abstraction * Fix storybook build and test week day formatting * Add initial state hook and refactor single input state * Add basic opening logic * Move state machine to single date picker * Add basic click and focus behavior * Update build-system/compile/bundles.config.extensions.json Add npm flag Co-authored-by: William Johnson <[email protected]> * Change conditional date picker syntax * Remove onErrorRef * Add range input state machine * Extract date picker state hook * Refactor state hook arguments * Remove unused imports * Add imperative clear function * Add single date picker API and types * Update type definitions * Add API methods for date range picker * Add locale * Add locale to base date picker * Fix storybook * Add first disabled date based on maximumNights prop * Add minimum nights prop * Refactor to use DOM input for existing input field * Add event handler for input change * Replace date range children logic with DOM functions * Add provider for accessing selected dates * Add overlay closing logic * Add range event listeners * Refactor state machine to remove unnecessary values * Add controlled month for setting date from input * Add initial typescript configuration * Convert base component to typescript * Convert single date picker to typescript * Convert constants and helper files * Refactor to use shared input functions * Replace locale string prop with object * Update API args * Add generic attribute parser to parse-props.js * Add parsers and base element props * Add openAfterClear attribute (not implemented) * Update extensions config * Move components and helpers into /component directory * Add initial amp test setup * Add packages and config to render AMP storybook * Add numberOfMonths prop * Add initial date picker bento test fixture * Update src/preact exports to export preact types * Add initial e2e test (not working right now) * Impement openAfterClear prop * Remove unnecessary babel package * Remove duplicate extension config * Move component.type * Fix .tsx extension Co-authored-by: Justin Ridgewell <[email protected]> * Undo preact type exports * Fix date picker e2e test (still no calendar) * Add React import resolvers for all external imports * Revert "Add React import resolvers for all external imports" This reverts commit 0e826f0. * Add basic CSS styles to mimic original date picker * Add aliases to unminified babel config * Use local preact file as react alias * Add optional today prop for simulating today's date * Use today as default for initialVisibleMonth * Add shadow dom support to range date picker * Refactor date pickers and context * Add preact types * Move date parsers and formatters into context * Updates function descriptions * WIP Add e2e tests * Tempoariliy fix forwardRef is not defined error * Fix static date range logic * Add non-working overlay range picker test * Fix date picker in overlay mode * Fix single date picker click event * Fix typo * Fix select date range and storybook * Update comments and date picker component return type * Move helpers to reduce base date picker props * Add TODO * Re-add 0.1 component to bundles.config.extensions.json * Move CSS variables * Use optional chaining for invocation.args * Add parseNumber function with radix * Fix type definitions * Get rid of default props object and type complexity * Update base date picker props * Remove pointless input hidden check * Move default props to provider In an attempt to share defaults and make it less confusing which props are coming from the provider and which props are getting passed into the component, this moves all default props to the provider and creates more type safety for the date picker components that get data from this provider. A potential downside of this change is that it makes it more difficult to use the SingleDatePicker component and RangeDatePicker in isolation if that is something we want to do later. * Extract iterateDateRange to helpers * Rename change handlers * Inline initializeStateMachine function * Add JSS stylesheet to for calendar * Hide calendar using display:none instead of unmounting * Add basic overlay styles (no fixed height) * Downgrade chrome driver * Remove extraAliases from config and rename preact alias to react * Remove AMP test files * Fix z-index file * Fix test helper (to trigger CI) Co-authored-by: William Johnson <[email protected]> Co-authored-by: Justin Ridgewell <[email protected]>
1 parent 9acbd30 commit 881b218

37 files changed

+4275
-46
lines changed

‎build-system/compile/bundles.config.extensions.json

+10
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,16 @@
351351
"hasCss": true
352352
}
353353
},
354+
{
355+
"name": "amp-date-picker",
356+
"version": "1.0",
357+
"latestVersion": "0.1",
358+
"options": {
359+
"npm": true,
360+
"hasCss": true,
361+
"bento": true
362+
}
363+
},
354364
{
355365
"name": "amp-delight-player",
356366
"version": "0.1",

‎build-system/tasks/e2e/package-lock.json

+12-12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/Z_INDEX.md

+2
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
| `.amp-carousel-button` | 10 | [extensions/amp-carousel/0.1/amp-carousel.css](/extensions/amp-carousel/0.1/amp-carousel.css) |
7474
| `.amp-carousel-button` | 10 | [extensions/amp-carousel/0.2/amp-carousel.css](/extensions/amp-carousel/0.2/amp-carousel.css) |
7575
| `amp-date-picker[mode="overlay"] .i-amphtml-date-picker-container` | 10 | [extensions/amp-date-picker/0.1/amp-date-picker.css](/extensions/amp-date-picker/0.1/amp-date-picker.css) |
76+
| `overlay['& .rdp']` | 10 | [extensions/amp-date-picker/1.0/component.jss.js](/extensions/amp-date-picker/1.0/component.jss.js) |
7677
| `.i-amphtml-story-spinner` | 10 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css) |
7778
| `.i-amphtml-byside-content-loading-container .i-amphtml-byside-content-loading-animation:before` | 9 | [extensions/amp-byside-content/0.1/amp-byside-content.css](/extensions/amp-byside-content/0.1/amp-byside-content.css) |
7879
| `100%` | 9 | [extensions/amp-byside-content/0.1/amp-byside-content.css](/extensions/amp-byside-content/0.1/amp-byside-content.css) |
@@ -110,6 +111,7 @@
110111
| `.i-amphtml-base-carousel-arrow-prev-slot` | 1 | [extensions/amp-base-carousel/0.1/amp-base-carousel.css](/extensions/amp-base-carousel/0.1/amp-base-carousel.css) |
111112
| `.i-amphtml-base-carousel-arrows` | 1 | [extensions/amp-base-carousel/0.1/amp-base-carousel.css](/extensions/amp-base-carousel/0.1/amp-base-carousel.css) |
112113
| `.i-amphtml-carousel-arrows` | 1 | [extensions/amp-carousel/0.2/amp-carousel.css](/extensions/amp-carousel/0.2/amp-carousel.css) |
114+
| `dayPicker['& .rdp-caption_label']` | 1 | [extensions/amp-date-picker/1.0/component.jss.js](/extensions/amp-date-picker/1.0/component.jss.js) |
113115
| `.i-amphtml-fit-text-measurer` | 1 | [extensions/amp-fit-text/0.1/amp-fit-text.css](/extensions/amp-fit-text/0.1/amp-fit-text.css) |
114116
| `.i-amphtml-image-lightbox-viewer` | 1 | [extensions/amp-image-lightbox/0.1/amp-image-lightbox.css](/extensions/amp-image-lightbox/0.1/amp-image-lightbox.css) |
115117
| `.i-amphtml-image-lightbox-viewer-image` | 1 | [extensions/amp-image-lightbox/0.1/amp-image-lightbox.css](/extensions/amp-image-lightbox/0.1/amp-image-lightbox.css) |

‎extensions/amp-date-picker/1.0/amp-date-picker.css

Whitespace-only changes.

‎extensions/amp-date-picker/1.0/amp-date-picker.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {isExperimentOn} from '#experiments';
2+
3+
import {AmpPreactBaseElement, setSuperClass} from '#preact/amp-base-element';
4+
5+
import {userAssert} from '#utils/log';
6+
7+
import {BaseElement} from './base-element';
8+
9+
import {CSS} from '../../../build/amp-date-picker-1.0.css';
10+
11+
/** @const {string} */
12+
const TAG = 'amp-date-picker';
13+
14+
/** @extends {PreactBaseElement<BentoDatePickerDef.BentoDatePickerApi} */
15+
class AmpDatePicker extends setSuperClass(BaseElement, AmpPreactBaseElement) {
16+
/** @override */
17+
init() {
18+
this.registerApiAction('clear', (api) => api./*OK*/ clear());
19+
this.registerApiAction('today', (api, invocation) =>
20+
api./*OK*/ today(invocation.args?.['offset'])
21+
);
22+
this.registerApiAction('startToday', (api, invocation) =>
23+
api./*OK*/ startToday(invocation.args?.['offset'])
24+
);
25+
this.registerApiAction('endToday', (api, invocation) =>
26+
api./*OK*/ endToday(invocation.args?.['offset'])
27+
);
28+
this.registerApiAction('setDate', (api, invocation) =>
29+
api./*OK*/ setDate(invocation.args?.['date'])
30+
);
31+
this.registerApiAction('setDates', (api, invocation) =>
32+
api./*OK*/ setDates(invocation.args?.['start'], invocation.args?.['end'])
33+
);
34+
35+
return super.init();
36+
}
37+
38+
/** @override */
39+
isLayoutSupported() {
40+
userAssert(
41+
isExperimentOn(this.win, 'bento') ||
42+
isExperimentOn(this.win, 'bento-date-picker'),
43+
'expected global "bento" or specific "bento-date-picker" experiment to be enabled'
44+
);
45+
return true;
46+
}
47+
}
48+
49+
AMP.extension(TAG, '1.0', (AMP) => {
50+
AMP.registerElement(TAG, AmpDatePicker, CSS);
51+
});

‎extensions/amp-date-picker/1.0/base-element.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import {parseBooleanAttribute} from '#core/dom';
2+
3+
import {PreactBaseElement} from '#preact/base-element';
4+
5+
import {BentoDatePicker} from './component';
6+
import {CSS as COMPONENT_CSS} from './component.jss';
7+
import {parseDate, parseDateList, parseLocale, parseNumber} from './parsers';
8+
9+
export class BaseElement extends PreactBaseElement {}
10+
11+
/** @override */
12+
BaseElement['Component'] = BentoDatePicker;
13+
14+
/** @override */
15+
BaseElement['props'] = {
16+
'allowBlockedEndDate': {
17+
attr: 'allow-blocked-end-date',
18+
parseAttr: parseBooleanAttribute,
19+
},
20+
'allowBlockedRanges': {
21+
attr: 'allow-blocked-ranges',
22+
parseAttr: parseBooleanAttribute,
23+
},
24+
'blocked': {attr: 'blocked', parseAttr: parseDateList},
25+
'children': {passthrough: true},
26+
// Not implemented
27+
'daySize': {attr: 'day-size', parseAttr: parseNumber},
28+
'endInputSelector': {attr: 'end-input-selector'},
29+
// Not implemented
30+
'firstDayOfWeek': {attr: 'first-day-of-week', parseAttr: parseNumber},
31+
'format': {attr: 'format'},
32+
// Not implemented
33+
'fullscreen': {attr: 'fullscreen', parseAttr: parseBooleanAttribute},
34+
// Not implemented
35+
'hideKeyboardShortcutsPanel': {
36+
attr: 'hide-keyboard-shortcuts-panel',
37+
parseAttr: parseBooleanAttribute,
38+
},
39+
'highlighted': {attr: 'highlighted', parseAttr: parseDateList},
40+
'initialVisibleMonth': {attr: 'initial-visible-month', parseAttr: parseDate},
41+
'inputSelector': {attr: 'input-selector'},
42+
'locale': {attr: 'locale', parseAttr: parseLocale},
43+
'max': {attr: 'max', parseAttr: parseDate},
44+
'maximumNights': {attr: 'maximum-nights', parseAttr: parseNumber},
45+
'min': {attr: 'min', parseAttr: parseDate},
46+
'minimumNights': {attr: 'minimum-nights', parseAttr: parseNumber},
47+
'mode': {attr: 'mode'},
48+
'monthFormat': {attr: 'month-format'},
49+
'numberOfMonths': {attr: 'number-of-months', parseAttr: parseNumber},
50+
'openAfterClear': {
51+
attr: 'open-after-clear',
52+
parseAttr: parseBooleanAttribute,
53+
},
54+
'openAfterSelect': {
55+
attr: 'open-after-select',
56+
parseAttr: parseBooleanAttribute,
57+
},
58+
'startInputSelector': {attr: 'start-input-selector'},
59+
'today': {attr: 'today', parseAttr: parseDate},
60+
'type': {attr: 'type'},
61+
'weekDayFormat': {attr: 'week-day-format'},
62+
};
63+
64+
/** @override */
65+
BaseElement['layoutSizeDefined'] = true;
66+
67+
/** @override */
68+
BaseElement['usesShadowDom'] = true;
69+
70+
/** @override */
71+
BaseElement['shadowCss'] = COMPONENT_CSS;

‎extensions/amp-date-picker/1.0/component.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './component/component';

0 commit comments

Comments
 (0)