carbon-custom-elements/es/components/date-picker/shadow-dom-events-plugin.d.ts.map

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

{"version":3,"sources":["components/date-picker/shadow-dom-events-plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAEtD,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,8CAA+C,SAAQ,iBAAiB;IACvF;;OAEG;IACH,4CAA4C,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9D;;AAgDD;;;;;GAKG;AACH,wBAiEE","file":"shadow-dom-events-plugin.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';\nimport { Plugin } from 'flatpickr/dist/types/options';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport Handle from '../../globals/internal/handle';\nimport { find } from '../../globals/internal/collection-helpers';\n\n/**\n * `FlatpickrInstance` with additional properties used for `carbonFlatpickrShadowDOMEventsPlugin`.\n */\nexport interface ExtendedFlatpickrInstanceShadowDOMEventsPlugin extends FlatpickrInstance {\n  /**\n   * The handle for `keydown` event handler in calendar dropdown.\n   */\n  _hBXCEDatePickerShadowDOMEventsPluginKeydown?: Handle | null;\n}\n\n/**\n * The amount of days to adjust, keyed by the key code.\n */\nconst moveDateForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -7,\n  Up: -7,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 7,\n  Down: 7,\n};\n\n/**\n * The amount of months to adjust, keyed by the key code. Used with Ctrl modifier key.\n */\nconst moveMonthForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -12,\n  Up: -12,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 12,\n  Down: 12,\n};\n\n/**\n * The number of milliseconds per day.\n */\nconst MILLISECONDS_IN_DAY = 86400000;\n\n/**\n * Adjusts the date with the given amount of days.\n * @param localDate The original date.\n * @param options The options.\n * @param [options.date=0] The amount of days to adjust.\n */\nconst adjustDate = (localDate: Date, { date: moveDate = 0 }: { date?: number }) => {\n  const utcDate = new Date(\n    Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate()) + moveDate * MILLISECONDS_IN_DAY\n  );\n  return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());\n};\n\n/**\n * @param config Plugin configuration.\n * @returns\n *   A Flatpickr plugin to handle events.\n *   Some event handlers in Flatpickr won't work is the calendar dropdown is put in shadow DOM, due to event retargetting.\n */\nexport default (): Plugin => (fp: ExtendedFlatpickrInstanceShadowDOMEventsPlugin) => {\n  const getDateElem = localDate =>\n    find(fp.daysContainer!.firstElementChild!.children, ({ dateObj }: any) => localDate.getTime() === dateObj.getTime());\n\n  /**\n   * Handles `keydown` event.\n   */\n  const handleKeydown = (event: KeyboardEvent) => {\n    const { ctrlKey, key, target } = event;\n    if (key === 'Enter') {\n      target!.dispatchEvent(Object.assign(new CustomEvent('mousedown', { bubbles: true }), { which: 1 }));\n    } else if (!ctrlKey && key in moveDateForKeys) {\n      const { dateObj } = target as any;\n      const movedDate = adjustDate(dateObj, { date: moveDateForKeys[key] });\n      const movedDateElem = getDateElem(movedDate);\n      if (movedDateElem) {\n        movedDateElem.focus();\n      } else {\n        const innerDaysContainer = fp.daysContainer!.firstElementChild!;\n        if (movedDate.getTime() < (innerDaysContainer.firstElementChild as any).dateObj.getTime()) {\n          fp.changeMonth(-1);\n          // `fp.daysContainer` is updated by `fp.changeMonth()`\n          (fp.daysContainer!.firstElementChild!.lastElementChild as HTMLElement).focus();\n        } else if (movedDate.getTime() > (innerDaysContainer.lastElementChild as any).dateObj.getTime()) {\n          fp.changeMonth(1);\n          // `fp.daysContainer` is updated by `fp.changeMonth()`\n          (fp.daysContainer!.firstElementChild!.firstElementChild as HTMLElement).focus();\n        }\n      }\n      event.preventDefault();\n    } else if (ctrlKey && key in moveMonthForKeys) {\n      fp.changeMonth(moveMonthForKeys[key]);\n      (fp.daysContainer!.firstElementChild!.firstElementChild as HTMLElement).focus();\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * Releases event listeners used in this Flatpickr plugin.\n   */\n  const release = () => {\n    if (fp._hBXCEDatePickerShadowDOMEventsPluginKeydown) {\n      fp._hBXCEDatePickerShadowDOMEventsPluginKeydown = fp._hBXCEDatePickerShadowDOMEventsPluginKeydown.release();\n    }\n  };\n\n  /**\n   * Sets up event listeners used for this Flatpickr plugin.\n   */\n  const init = () => {\n    release();\n    fp._hBXCEDatePickerShadowDOMEventsPluginKeydown = on(fp.calendarContainer, 'keydown', handleKeydown);\n  };\n\n  /**\n   * Registers this Flatpickr plugin.\n   */\n  const register = () => {\n    fp.loadedPlugins.push('carbonFlatpickrShadowDOMEventsPlugin');\n  };\n\n  return {\n    onReady: [register, init],\n    onDestroy: [release],\n  };\n};\n"]}