@contentful/field-editor-date 1.1.9 → 1.1.10-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DatepickerInput.d.ts +2 -14
- package/dist/field-editor-date.cjs.development.js +132 -276
- package/dist/field-editor-date.cjs.development.js.map +1 -1
- package/dist/field-editor-date.cjs.production.min.js +1 -1
- package/dist/field-editor-date.cjs.production.min.js.map +1 -1
- package/dist/field-editor-date.esm.js +136 -279
- package/dist/field-editor-date.esm.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/utils/date.d.ts +0 -2
- package/package.json +5 -8
- package/CHANGELOG.md +0 -208
- package/LICENSE +0 -21
- package/dist/icons/CalendarIcon.d.ts +0 -5
- package/dist/utils/createPikaday.d.ts +0 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),a=require("emotion"),r=e(require("@contentful/f36-tokens")),
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),a=require("emotion"),r=e(require("@contentful/f36-tokens")),l=require("@contentful/field-editor-shared"),i=require("@contentful/f36-datepicker"),u=e(require("moment")),o=require("@contentful/f36-components");function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}var m={root:a.css({maxWidth:"270px"})},c=function(e){var a,r=t.useMemo((function(){var e=new Date;e.setFullYear(e.getFullYear()-100);var t=new Date;return t.setFullYear(t.getFullYear()+100),[e,t]}),[]),l=r[0],o=r[1];return n.createElement(i.Datepicker,{className:m.root,selected:null==(a=e.value)?void 0:a.toDate(),onSelect:function(t){e.onChange(u(t))},inputProps:{isDisabled:e.disabled,placeholder:""},fromDate:l,toDate:o})},f=["hh:mm a","hh:mm A","h:mm a","h:mm A","hh:mm","k:mm","kk:mm","h a","h A","h","hh","HH"],d=function(){return u("12:00 AM","hh:mm A")},v=function(e,t){return t.format(e?"hh:mm A":"HH:mm")},h=function(e){var r=e.disabled,l=e.uses12hClock,i=e.time,s=void 0===i?"12:00":i,m=e.ampm,c=void 0===m?"AM":m,h=e.onChange,p=t.useState((function(){return v(l,d())})),b=p[0],g=p[1];t.useEffect((function(){g(v(l,u(s+" "+c,"hh:mm A")))}),[s,c,l]);var C=t.useCallback((function(e){g(e.currentTarget.value)}),[]),D=t.useCallback((function(e){e.preventDefault(),e.target.select()}),[]);return n.createElement(o.Flex,{className:a.css({width:"145px"})},n.createElement(o.TextInput,{"aria-label":"Select time",placeholder:l?"12:00 AM":"00:00","date-time-type":l?"12":"24",testId:"time-input",value:b,isDisabled:r,onFocus:D,onBlur:function(){var e=function(e){for(var t=null,n=0;n<f.length;n++){var a=u(e,f[n]);if(a.isValid()){t=a;break}}return t}(b),t=null!=e?e:d();g(v(l,t)),h({time:t.format("hh:mm"),ampm:t.format("A")})},onChange:C}))},p=["-12:00","-11:00","-10:00","-09:30","-09:00","-08:00","-07:00","-06:00","-05:00","-04:30","-04:00","-03:30","-03:00","-02:00","-01:00","+00:00","+01:00","+02:00","+03:00","+03:30","+04:00","+04:30","+05:00","+05:30","+05:45","+06:00","+06:30","+07:00","+08:00","+08:45","+09:00","+09:30","+10:00","+10:30","+11:00","+11:30","+12:00","+12:45","+13:00","+14:00"],b=function(e){var t=e.onChange,a=e.value;return n.createElement(o.Select,{"aria-label":"Select timezone",testId:"timezone-input",value:void 0===a?"+00:00":a,isDisabled:e.disabled,onChange:function(e){t(e.currentTarget.value)}},p.map((function(e){return n.createElement(o.Select.Option,{key:e,value:e},"UTC",e)})))},g=/(Z|[+-]\d{2}[:+]?\d{2})$/;function C(){return u().set({hours:0,minutes:0}).format("Z")}var D={root:a.css({display:"flex",alignItems:"center"}),separator:a.css({marginLeft:r.spacingM})};function E(e){var n,a,r,l=e.initialValue,i=e.usesTime,u=e.usesTimezone,m=e.uses12hClock,f=e.disabled,d=e.hasClear,v=e.onChange,p=t.useState((function(){return l})),g=p[0],E=p[1];return n=function(){v(g)},a=[g],r=t.useRef(!0),t.useEffect((function(){r.current?r.current=!1:n()}),a),t.createElement("div",{"data-test-id":"date-editor",className:D.root},t.createElement(c,{disabled:f,value:g.date,onChange:function(e){E((function(t){return s({},t,{date:e})}))}}),i&&t.createElement(t.Fragment,null,t.createElement("div",{className:D.separator}),t.createElement(h,{disabled:f,time:g.time,ampm:g.ampm,onChange:function(e){var t=e.time,n=e.ampm;E((function(e){return s({},e,{time:t,ampm:n})}))},uses12hClock:m})),u&&t.createElement(t.Fragment,null,t.createElement("div",{className:D.separator}),t.createElement(b,{disabled:f,value:g.utcOffset,onChange:function(e){E((function(t){return s({},t,{utcOffset:e})}))}})),d&&t.createElement(t.Fragment,null,t.createElement("div",{className:D.separator}),t.createElement(o.TextLink,{as:"button",isDisabled:f,testId:"date-clear",onClick:function(){E({date:void 0,time:void 0,ampm:"AM",utcOffset:C()})}},"Clear")))}function k(e){var n,a,r,i,o=e.parameters,s=null!=(n=null==o||null==(a=o.instance)?void 0:a.format)?n:"timeZ",m=null!=(r=null==o||null==(i=o.instance)?void 0:i.ampm)?r:"24",c="dateonly"!==s,f="timeZ"===s,d="12"===m;return t.createElement(l.FieldConnector,{field:e.field,isInitiallyDisabled:e.isInitiallyDisabled,throttle:0},(function(e){var n=e.value,a=e.disabled,r=e.setValue,l=e.externalReset,i=function(e){var t=e.uses12hClock,n=function(e){if(!e)return null;var t=u(e);return g.test(e)&&t.utcOffset(e),t}(e.value);return n?{date:n,time:n.format(t?"hh:mm":"HH:mm"),ampm:n.format("A"),utcOffset:n.format("Z")}:{ampm:"AM",utcOffset:C()}}({value:n,uses12hClock:d});return t.createElement(E,{initialValue:i,uses12hClock:d,usesTimezone:f,usesTime:c,disabled:a,hasClear:Boolean(n),onChange:function(e){var t=function(e){var t=e.usesTime,n=e.usesTimezone,a=function(e){if(!e.date)return{valid:null};var t=function(e){return u.utc((e.time||"00:00")+"!"+e.ampm,"HH:mm!A")}(e),n=u.parseZone(e.utcOffset,"Z").set(e.date.toObject()).set({hours:t.hours(),minutes:t.minutes()});return n.isValid()?{valid:n}:{invalid:!0,valid:null}}(e.data);return a.invalid?{invalid:!0}:{valid:null!=a&&a.valid?a.valid.format(n?"YYYY-MM-DDTHH:mmZ":t?"YYYY-MM-DDTHH:mm":"YYYY-MM-DD"):null,invalid:!1}}({data:e,usesTime:c,usesTimezone:f});t.invalid||(Boolean(n)||!n&&Boolean(t.valid))&&r(t.valid)},key:"date-container-"+l})}))}k.defaultProps={isInitiallyDisabled:!0},exports.DateEditor=k,exports.zoneOffsets=p;
|
|
2
2
|
//# sourceMappingURL=field-editor-date.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-date.cjs.production.min.js","sources":["../src/utils/date.ts","../src/utils/createPikaday.ts","../src/icons/CalendarIcon.tsx","../src/DatepickerInput.tsx","../src/TimepickerInput.tsx","../src/utils/zoneOffsets.ts","../src/TimezonePickerInput.tsx","../src/DateEditor.tsx"],"sourcesContent":["// eslint-disable-next-line -- TODO: describe this disable no-restricted-imports\nimport moment from 'moment';\nimport { TimeResult } from '../types';\n\nconst ZONE_RX = /(Z|[+-]\\d{2}[:+]?\\d{2})$/;\n\nfunction startOfToday(format: string) {\n return moment().set({ hours: 0, minutes: 0 }).format(format);\n}\n\nfunction fieldValueToMoment(datetimeString: string | null | undefined): moment.Moment | null {\n if (!datetimeString) {\n return null;\n }\n\n const datetime = moment(datetimeString);\n if (ZONE_RX.test(datetimeString)) {\n datetime.utcOffset(datetimeString);\n }\n return datetime;\n}\n\nfunction timeFromUserInput(input: TimeResult) {\n const timeInput = input.time || '00:00';\n return moment.utc(timeInput + '!' + input.ampm, 'HH:mm!A');\n}\n\n/**\n * Convert the user input object into either a 'moment' value or an\n * invalid symbol.\n *\n * Success is indicated by returning '{valid: value}' and failure is\n * indicated by returning '{invalid: true}'. If 'input.date' is\n * 'null' we return '{valid: null}'\n */\nfunction datetimeFromUserInput(input: TimeResult): {\n invalid?: boolean;\n valid: moment.Moment | null;\n} {\n if (!input.date) {\n return { valid: null };\n }\n\n const time = timeFromUserInput(input);\n\n const date = moment\n .parseZone(input.utcOffset, 'Z')\n .set(input.date.toObject())\n .set({ hours: time.hours(), minutes: time.minutes() });\n\n if (date.isValid()) {\n return { valid: date };\n } else {\n return { invalid: true, valid: null };\n }\n}\n\nexport function formatDateDisplay(date?: moment.Moment) {\n if (date) {\n return date.format('dddd, MMMM Do YYYY');\n } else {\n return '';\n }\n}\n\n/**\n * Parse user input into a string that is stored in the API.\n *\n * Returns a sum type with either the string as the `valid` property\n * or the `invalid` property set to `false`.\n */\nexport function buildFieldValue({\n data,\n usesTime,\n usesTimezone,\n}: {\n data: TimeResult;\n usesTime: boolean;\n usesTimezone: boolean;\n}) {\n const date = datetimeFromUserInput(data);\n if (date.invalid) {\n return {\n invalid: true,\n };\n }\n\n let format;\n if (usesTimezone) {\n format = 'YYYY-MM-DDTHH:mmZ';\n } else if (usesTime) {\n format = 'YYYY-MM-DDTHH:mm';\n } else {\n format = 'YYYY-MM-DD';\n }\n return { valid: date?.valid ? date.valid.format(format) : null, invalid: false };\n}\n\nexport function getDefaultAMPM() {\n return 'AM';\n}\n\nexport function getDefaultUtcOffset() {\n return startOfToday('Z');\n}\n\n/**\n * Create the user input object from the field value.\n */\nexport function userInputFromDatetime({\n value,\n uses12hClock,\n}: {\n value: string | undefined | null;\n uses12hClock: boolean;\n}): TimeResult {\n const datetime = fieldValueToMoment(value);\n\n if (datetime) {\n const timeFormat = uses12hClock ? 'hh:mm' : 'HH:mm';\n return {\n date: datetime,\n time: datetime.format(timeFormat),\n ampm: datetime.format('A'),\n utcOffset: datetime.format('Z'),\n };\n } else {\n return {\n ampm: getDefaultAMPM(),\n utcOffset: getDefaultUtcOffset(),\n };\n }\n}\n","import Pikaday from 'pikaday';\n\nconst I18N = {\n previousMonth: 'Previous Month',\n nextMonth: 'Next Month',\n months: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ],\n weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],\n weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n};\n\nconst DEFAULTS = {\n i18n: I18N,\n yearRange: 100,\n};\n\n// Gets same options as Pikaday and returns a Pikaday instance\nexport const createPikaday = (opts?: Pikaday.PikadayOptions) =>\n new Pikaday(Object.assign({}, DEFAULTS, opts));\n","import React from 'react';\n\nexport function CalendarIcon(props: {\n className?: string;\n onClick?: React.MouseEventHandler<SVGElement>;\n}) {\n return (\n <svg\n width=\"16\"\n height=\"17\"\n viewBox=\"-1 -1 18 19\"\n onClick={props.onClick}\n xmlns=\"http://www.w3.org/2000/svg\"\n className={props.className}>\n <g fill=\"none\" fillRule=\"evenodd\">\n <g fill=\"#536171\">\n <path d=\"M2.071 14.929v-2.411h2.411v2.41h-2.41zm2.947 0v-2.411h2.678v2.41H5.018zM2.07 11.982V9.304h2.411v2.678h-2.41zm2.947 0V9.304h2.678v2.678H5.018zM2.07 8.768v-2.41h2.411v2.41h-2.41zm6.161 6.16v-2.41h2.679v2.41H8.232zm-3.214-6.16v-2.41h2.678v2.41H5.018zm6.428 6.16v-2.41h2.411v2.41h-2.41zm-3.214-2.946V9.304h2.679v2.678H8.232zM5.286 4.75a.275.275 0 0 1-.268.268h-.536a.275.275 0 0 1-.268-.268V2.34c0-.143.126-.269.268-.269h.536c.142 0 .268.126.268.268V4.75zm6.16 7.232V9.304h2.411v2.678h-2.41zM8.232 8.768v-2.41h2.679v2.41H8.232zm3.214 0v-2.41h2.411v2.41h-2.41zm.268-4.018a.275.275 0 0 1-.268.268h-.535a.275.275 0 0 1-.268-.268V2.34c0-.143.125-.269.268-.269h.535c.143 0 .268.126.268.268V4.75zm3.215-.536c0-.586-.486-1.071-1.072-1.071h-1.071v-.804c0-.736-.603-1.339-1.34-1.339h-.535c-.737 0-1.34.603-1.34 1.34v.803H6.357v-.804C6.357 1.603 5.754 1 5.017 1h-.535c-.736 0-1.34.603-1.34 1.34v.803h-1.07C1.484 3.143 1 3.628 1 4.214V14.93C1 15.515 1.485 16 2.071 16h11.786c.586 0 1.072-.485 1.072-1.071V4.214z\" />\n </g>\n </g>\n </svg>\n );\n}\n","import React, { Component, FocusEventHandler, FocusEvent } from 'react';\nimport noop from 'lodash/noop';\n// eslint-disable-next-line -- TODO: describe this disable no-restricted-imports\nimport moment from 'moment';\nimport { css, cx } from 'emotion';\nimport { formatDateDisplay } from './utils/date';\nimport { createPikaday } from './utils/createPikaday';\nimport { CalendarIcon } from './icons/CalendarIcon';\n\nimport { TextInput } from '@contentful/f36-components';\n\nconst styles = {\n datePickerWrapper: css({\n position: 'relative',\n maxHeight: 70,\n }),\n datePicker: css({\n zIndex: 1002,\n display: 'block',\n '.is-hidden': {\n display: 'none',\n },\n }),\n input: css({\n width: '270px',\n cursor: 'pointer',\n paddingRight: '40px',\n '&:disabled': {\n cursor: 'not-allowed',\n },\n }),\n icon: css({\n cursor: 'pointer',\n zIndex: 50,\n position: 'absolute',\n top: '12px',\n right: '12px',\n }),\n};\n\nexport type DatePickerProps = {\n value?: moment.Moment;\n onChange: (val: moment.Moment | undefined) => void;\n onBlur: FocusEventHandler;\n disabled?: boolean;\n};\n\nexport class DatepickerInput extends Component<DatePickerProps> {\n static defaultProps: Partial<DatePickerProps> = {\n onChange: noop,\n onBlur: noop,\n };\n\n pikaday?: Pikaday;\n datePickerNode = React.createRef<HTMLInputElement>();\n\n componentDidMount() {\n const onChange = this.props.onChange;\n const defaultDate = this.props.value ? this.props.value.toDate() : undefined;\n this.pikaday = createPikaday({\n field: this.datePickerNode && this.datePickerNode.current,\n defaultDate,\n setDefaultDate: defaultDate !== undefined,\n position: 'bottom left',\n reposition: false,\n theme: cx(styles.datePicker, 'hide-carret'),\n toString: (date) => {\n return formatDateDisplay(moment(date));\n },\n // we need to keep this function like this\n // so `this` refers to pikaday instance\n onSelect: function onSelect() {\n onChange(this.getMoment() || undefined);\n },\n });\n }\n\n focusInput = () => {\n if (this.datePickerNode && this.datePickerNode.current) {\n this.datePickerNode.current.focus();\n }\n };\n\n componentWillUnmount() {\n if (this.pikaday) {\n this.pikaday.destroy();\n }\n }\n\n handleOpen = () => {\n if (this.pikaday) {\n this.pikaday.show();\n }\n };\n\n handleBlur = (e: FocusEvent) => {\n this.props.onBlur(e);\n if (this.pikaday && !this.pikaday.el.contains(e.relatedTarget as HTMLInputElement)) {\n this.pikaday.hide();\n }\n };\n\n render() {\n return (\n <div className={styles.datePickerWrapper}>\n <TextInput\n aria-label=\"Select date\"\n testId=\"date-input\"\n isReadOnly\n isDisabled={this.props.disabled}\n value={formatDateDisplay(this.props.value)}\n ref={this.datePickerNode}\n onFocus={this.handleOpen}\n onBlur={this.handleBlur}\n className={styles.input}\n />\n <CalendarIcon\n onClick={() => {\n this.focusInput();\n }}\n className={styles.icon}\n />\n </div>\n );\n }\n}\n","import React, { useState, useCallback, useEffect } from 'react';\n// eslint-disable-next-line -- TODO: describe this disable no-restricted-imports\nimport moment from 'moment';\nimport { css } from 'emotion';\n\nimport { TextInput, Flex } from '@contentful/f36-components';\n\nexport type TimepickerProps = {\n disabled: boolean;\n uses12hClock: boolean;\n onChange: (value: { time: string; ampm: string }) => void;\n time?: string;\n ampm?: string;\n};\n\nconst validInputFormats = [\n 'hh:mm a',\n 'hh:mm A',\n 'h:mm a',\n 'h:mm A',\n 'hh:mm',\n 'k:mm',\n 'kk:mm',\n 'h a',\n 'h A',\n 'h',\n 'hh',\n 'HH',\n];\n\nfunction parseRawInput(raw: string): moment.Moment | null {\n let time: moment.Moment | null = null;\n\n // eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/prefer-for-of\n for (let i = 0; i < validInputFormats.length; i++) {\n const date = moment(raw, validInputFormats[i]);\n if (date.isValid()) {\n time = date;\n break;\n }\n }\n\n return time;\n}\n\nconst getDefaultTime = () => {\n return moment(`12:00 AM`, 'hh:mm A');\n};\n\nconst formatToString = (uses12hClock: boolean, value: moment.Moment): string => {\n return uses12hClock ? value.format('hh:mm A') : value.format('HH:mm');\n};\n\nexport const TimepickerInput = ({\n disabled,\n uses12hClock,\n time = '12:00',\n ampm = 'AM',\n onChange,\n}: TimepickerProps) => {\n const [selectedTime, setSelectedTime] = useState<string>(() => {\n return formatToString(uses12hClock, getDefaultTime());\n });\n\n useEffect(() => {\n setSelectedTime(formatToString(uses12hClock, moment(`${time} ${ampm}`, 'hh:mm A')));\n }, [time, ampm, uses12hClock]);\n\n const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n setSelectedTime(e.currentTarget.value);\n }, []);\n\n const handleFocus = useCallback((e) => {\n e.preventDefault();\n e.target.select();\n }, []);\n\n const handleBlur = () => {\n const parsedTime = parseRawInput(selectedTime);\n const value = parsedTime ?? getDefaultTime();\n setSelectedTime(formatToString(uses12hClock, value));\n onChange({ time: value.format('hh:mm'), ampm: value.format('A') });\n };\n\n return (\n <Flex className={css({ width: '145px' })}>\n <TextInput\n aria-label=\"Select time\"\n placeholder={uses12hClock ? '12:00 AM' : '00:00'}\n date-time-type={uses12hClock ? '12' : '24'}\n testId=\"time-input\"\n value={selectedTime}\n isDisabled={disabled}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n />\n </Flex>\n );\n};\n","export const defaultZoneOffset = '+00:00';\n\nexport const zoneOffsets = [\n '-12:00',\n '-11:00',\n '-10:00',\n '-09:30',\n '-09:00',\n '-08:00',\n '-07:00',\n '-06:00',\n '-05:00',\n '-04:30',\n '-04:00',\n '-03:30',\n '-03:00',\n '-02:00',\n '-01:00',\n '+00:00',\n '+01:00',\n '+02:00',\n '+03:00',\n '+03:30',\n '+04:00',\n '+04:30',\n '+05:00',\n '+05:30',\n '+05:45',\n '+06:00',\n '+06:30',\n '+07:00',\n '+08:00',\n '+08:45',\n '+09:00',\n '+09:30',\n '+10:00',\n '+10:30',\n '+11:00',\n '+11:30',\n '+12:00',\n '+12:45',\n '+13:00',\n '+14:00',\n];\n","import React, { ChangeEvent } from 'react';\nimport { zoneOffsets, defaultZoneOffset } from './utils/zoneOffsets';\n\nimport { Select } from '@contentful/f36-components';\n\nexport type TimezonepickerProps = {\n disabled: boolean;\n onChange: (value: string) => void;\n value?: string;\n};\nexport const TimezonepickerInput = ({\n disabled,\n onChange,\n value = defaultZoneOffset,\n}: TimezonepickerProps) => {\n return (\n <Select\n aria-label=\"Select timezone\"\n testId=\"timezone-input\"\n value={value}\n isDisabled={disabled}\n onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n onChange(e.currentTarget.value);\n }}>\n {zoneOffsets.map((offset) => (\n <Select.Option key={offset} value={offset}>\n UTC{offset}\n </Select.Option>\n ))}\n </Select>\n );\n};\n","import * as React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { FieldAPI, FieldConnector, ParametersAPI } from '@contentful/field-editor-shared';\nimport { DatepickerInput } from './DatepickerInput';\nimport { TimepickerInput } from './TimepickerInput';\nimport { TimezonepickerInput } from './TimezonePickerInput';\nimport {\n userInputFromDatetime,\n buildFieldValue,\n getDefaultAMPM,\n getDefaultUtcOffset,\n} from './utils/date';\nimport { TimeFormat, DateTimeFormat, TimeResult } from './types';\n\nimport { TextLink } from '@contentful/f36-components';\n\nexport interface DateEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.parameters\n */\n parameters?: ParametersAPI & {\n instance?: {\n format?: DateTimeFormat;\n ampm?: TimeFormat;\n };\n };\n}\n\nconst styles = {\n root: css({\n display: 'flex',\n alignItems: 'center',\n }),\n separator: css({\n marginLeft: tokens.spacingM,\n }),\n};\n\nfunction useEffectWithoutFirstRender(callback: Function, deps: Array<any>) {\n const isFirstRun = React.useRef(true);\n React.useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n callback();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies\n }, deps);\n}\n\nfunction DateEditorContainer({\n initialValue,\n usesTime,\n usesTimezone,\n uses12hClock,\n disabled,\n hasClear,\n onChange,\n}: {\n initialValue: TimeResult;\n usesTime: boolean;\n usesTimezone: boolean;\n uses12hClock: boolean;\n disabled: boolean;\n hasClear: boolean;\n onChange: (value: TimeResult) => void;\n}) {\n const [value, setValue] = React.useState<TimeResult>(() => initialValue);\n\n useEffectWithoutFirstRender(() => {\n onChange(value);\n }, [value]);\n\n return (\n <div data-test-id=\"date-editor\" className={styles.root}>\n <DatepickerInput\n disabled={disabled}\n value={value.date}\n onChange={(date) => {\n setValue((value) => ({\n ...value,\n date,\n }));\n }}\n />\n {usesTime && (\n <>\n <div className={styles.separator} />\n <TimepickerInput\n disabled={disabled}\n time={value.time}\n ampm={value.ampm}\n onChange={({ time, ampm }) => {\n setValue((value) => ({\n ...value,\n time,\n ampm,\n }));\n }}\n uses12hClock={uses12hClock}\n />\n </>\n )}\n {usesTimezone && (\n <>\n <div className={styles.separator} />\n <TimezonepickerInput\n disabled={disabled}\n value={value.utcOffset}\n onChange={(utcOffset) => {\n setValue((value) => ({\n ...value,\n utcOffset,\n }));\n }}\n />\n </>\n )}\n {hasClear && (\n <>\n <div className={styles.separator} />\n <TextLink\n as=\"button\"\n isDisabled={disabled}\n testId=\"date-clear\"\n onClick={() => {\n setValue({\n date: undefined,\n time: undefined,\n ampm: getDefaultAMPM(),\n utcOffset: getDefaultUtcOffset(),\n });\n }}>\n Clear\n </TextLink>\n </>\n )}\n </div>\n );\n}\n\nexport function DateEditor(props: DateEditorProps) {\n const { field, parameters } = props;\n\n const formatParam = parameters?.instance?.format ?? 'timeZ';\n const ampmParam = parameters?.instance?.ampm ?? '24';\n\n const usesTime = formatParam !== 'dateonly';\n const usesTimezone = formatParam === 'timeZ';\n const uses12hClock = ampmParam === '12';\n\n return (\n <FieldConnector<string>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n throttle={0}>\n {({ value, disabled, setValue, externalReset }) => {\n const datetimeValue = userInputFromDatetime({\n value,\n uses12hClock,\n });\n return (\n <DateEditorContainer\n initialValue={datetimeValue}\n uses12hClock={uses12hClock}\n usesTimezone={usesTimezone}\n usesTime={usesTime}\n disabled={disabled}\n hasClear={Boolean(value)}\n onChange={(data) => {\n const fieldValue = buildFieldValue({ data, usesTime, usesTimezone });\n if (fieldValue.invalid) {\n return;\n }\n // if value is present - then override it with a new one\n // if value is not present - then set a new one if it's not nullable only\n if (Boolean(value) || (!value && Boolean(fieldValue.valid))) {\n setValue(fieldValue.valid);\n }\n }}\n key={`date-container-${externalReset}`}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nDateEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["ZONE_RX","formatDateDisplay","date","format","getDefaultUtcOffset","moment","set","hours","minutes","DEFAULTS","i18n","previousMonth","nextMonth","months","weekdaysShort","weekdays","yearRange","createPikaday","opts","Pikaday","Object","assign","CalendarIcon","props","React","width","height","viewBox","onClick","xmlns","className","fill","fillRule","d","styles","datePickerWrapper","css","position","maxHeight","datePicker","zIndex","display","input","cursor","paddingRight","icon","top","right","DatepickerInput","createRef","_this","datePickerNode","current","focus","pikaday","show","e","onBlur","el","contains","relatedTarget","hide","componentDidMount","onChange","this","defaultDate","value","toDate","undefined","field","setDefaultDate","reposition","theme","cx","toString","onSelect","getMoment","componentWillUnmount","destroy","render","TextInput","testId","isReadOnly","isDisabled","disabled","ref","onFocus","handleOpen","handleBlur","_this2","focusInput","Component","noop","validInputFormats","getDefaultTime","formatToString","uses12hClock","TimepickerInput","time","ampm","useState","selectedTime","setSelectedTime","useEffect","handleChange","useCallback","currentTarget","handleFocus","preventDefault","target","select","Flex","placeholder","parsedTime","raw","i","length","isValid","parseRawInput","zoneOffsets","TimezonepickerInput","Select","map","offset","Option","key","root","alignItems","separator","marginLeft","tokens","spacingM","DateEditorContainer","callback","deps","isFirstRun","initialValue","usesTime","usesTimezone","hasClear","setValue","utcOffset","TextLink","as","DateEditor","parameters","formatParam","instance","_parameters$instance","ampmParam","_parameters$instance2","FieldConnector","isInitiallyDisabled","throttle","externalReset","datetimeValue","datetime","datetimeString","test","fieldValueToMoment","userInputFromDatetime","Boolean","data","fieldValue","valid","utc","timeFromUserInput","parseZone","toObject","invalid","datetimeFromUserInput","buildFieldValue","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"field-editor-date.cjs.production.min.js","sources":["../src/DatepickerInput.tsx","../src/TimepickerInput.tsx","../src/utils/zoneOffsets.ts","../src/TimezonePickerInput.tsx","../src/utils/date.ts","../src/DateEditor.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Datepicker } from '@contentful/f36-datepicker';\nimport { css } from 'emotion';\n// eslint-disable-next-line -- TODO: describe this disable no-restricted-imports\nimport moment from 'moment';\n\nconst YEAR_RANGE = 100;\n\nconst styles = {\n root: css({\n maxWidth: '270px',\n }),\n};\n\nexport type DatePickerProps = {\n value?: moment.Moment;\n onChange: (val: moment.Moment | undefined) => void;\n disabled?: boolean;\n};\n\nexport const DatepickerInput = (props: DatePickerProps) => {\n const [fromDate, toDate] = useMemo(() => {\n const fromDate = new Date();\n fromDate.setFullYear(fromDate.getFullYear() - YEAR_RANGE);\n const toDate = new Date();\n toDate.setFullYear(toDate.getFullYear() + YEAR_RANGE);\n\n return [fromDate, toDate];\n }, []);\n\n return (\n <Datepicker\n className={styles.root}\n selected={props.value?.toDate()}\n onSelect={(day) => {\n props.onChange(moment(day));\n }}\n inputProps={{ isDisabled: props.disabled, placeholder: '' }}\n fromDate={fromDate}\n toDate={toDate}\n />\n );\n};\n","import React, { useState, useCallback, useEffect } from 'react';\n// eslint-disable-next-line -- TODO: describe this disable no-restricted-imports\nimport moment from 'moment';\nimport { css } from 'emotion';\n\nimport { TextInput, Flex } from '@contentful/f36-components';\n\nexport type TimepickerProps = {\n disabled: boolean;\n uses12hClock: boolean;\n onChange: (value: { time: string; ampm: string }) => void;\n time?: string;\n ampm?: string;\n};\n\nconst validInputFormats = [\n 'hh:mm a',\n 'hh:mm A',\n 'h:mm a',\n 'h:mm A',\n 'hh:mm',\n 'k:mm',\n 'kk:mm',\n 'h a',\n 'h A',\n 'h',\n 'hh',\n 'HH',\n];\n\nfunction parseRawInput(raw: string): moment.Moment | null {\n let time: moment.Moment | null = null;\n\n // eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/prefer-for-of\n for (let i = 0; i < validInputFormats.length; i++) {\n const date = moment(raw, validInputFormats[i]);\n if (date.isValid()) {\n time = date;\n break;\n }\n }\n\n return time;\n}\n\nconst getDefaultTime = () => {\n return moment(`12:00 AM`, 'hh:mm A');\n};\n\nconst formatToString = (uses12hClock: boolean, value: moment.Moment): string => {\n return uses12hClock ? value.format('hh:mm A') : value.format('HH:mm');\n};\n\nexport const TimepickerInput = ({\n disabled,\n uses12hClock,\n time = '12:00',\n ampm = 'AM',\n onChange,\n}: TimepickerProps) => {\n const [selectedTime, setSelectedTime] = useState<string>(() => {\n return formatToString(uses12hClock, getDefaultTime());\n });\n\n useEffect(() => {\n setSelectedTime(formatToString(uses12hClock, moment(`${time} ${ampm}`, 'hh:mm A')));\n }, [time, ampm, uses12hClock]);\n\n const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n setSelectedTime(e.currentTarget.value);\n }, []);\n\n const handleFocus = useCallback((e) => {\n e.preventDefault();\n e.target.select();\n }, []);\n\n const handleBlur = () => {\n const parsedTime = parseRawInput(selectedTime);\n const value = parsedTime ?? getDefaultTime();\n setSelectedTime(formatToString(uses12hClock, value));\n onChange({ time: value.format('hh:mm'), ampm: value.format('A') });\n };\n\n return (\n <Flex className={css({ width: '145px' })}>\n <TextInput\n aria-label=\"Select time\"\n placeholder={uses12hClock ? '12:00 AM' : '00:00'}\n date-time-type={uses12hClock ? '12' : '24'}\n testId=\"time-input\"\n value={selectedTime}\n isDisabled={disabled}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n />\n </Flex>\n );\n};\n","export const defaultZoneOffset = '+00:00';\n\nexport const zoneOffsets = [\n '-12:00',\n '-11:00',\n '-10:00',\n '-09:30',\n '-09:00',\n '-08:00',\n '-07:00',\n '-06:00',\n '-05:00',\n '-04:30',\n '-04:00',\n '-03:30',\n '-03:00',\n '-02:00',\n '-01:00',\n '+00:00',\n '+01:00',\n '+02:00',\n '+03:00',\n '+03:30',\n '+04:00',\n '+04:30',\n '+05:00',\n '+05:30',\n '+05:45',\n '+06:00',\n '+06:30',\n '+07:00',\n '+08:00',\n '+08:45',\n '+09:00',\n '+09:30',\n '+10:00',\n '+10:30',\n '+11:00',\n '+11:30',\n '+12:00',\n '+12:45',\n '+13:00',\n '+14:00',\n];\n","import React, { ChangeEvent } from 'react';\nimport { zoneOffsets, defaultZoneOffset } from './utils/zoneOffsets';\n\nimport { Select } from '@contentful/f36-components';\n\nexport type TimezonepickerProps = {\n disabled: boolean;\n onChange: (value: string) => void;\n value?: string;\n};\nexport const TimezonepickerInput = ({\n disabled,\n onChange,\n value = defaultZoneOffset,\n}: TimezonepickerProps) => {\n return (\n <Select\n aria-label=\"Select timezone\"\n testId=\"timezone-input\"\n value={value}\n isDisabled={disabled}\n onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n onChange(e.currentTarget.value);\n }}>\n {zoneOffsets.map((offset) => (\n <Select.Option key={offset} value={offset}>\n UTC{offset}\n </Select.Option>\n ))}\n </Select>\n );\n};\n","// eslint-disable-next-line -- TODO: describe this disable no-restricted-imports\nimport moment from 'moment';\nimport { TimeResult } from '../types';\n\nconst ZONE_RX = /(Z|[+-]\\d{2}[:+]?\\d{2})$/;\n\nfunction startOfToday(format: string) {\n return moment().set({ hours: 0, minutes: 0 }).format(format);\n}\n\nfunction fieldValueToMoment(datetimeString: string | null | undefined): moment.Moment | null {\n if (!datetimeString) {\n return null;\n }\n\n const datetime = moment(datetimeString);\n if (ZONE_RX.test(datetimeString)) {\n datetime.utcOffset(datetimeString);\n }\n return datetime;\n}\n\nfunction timeFromUserInput(input: TimeResult) {\n const timeInput = input.time || '00:00';\n return moment.utc(timeInput + '!' + input.ampm, 'HH:mm!A');\n}\n\n/**\n * Convert the user input object into either a 'moment' value or an\n * invalid symbol.\n *\n * Success is indicated by returning '{valid: value}' and failure is\n * indicated by returning '{invalid: true}'. If 'input.date' is\n * 'null' we return '{valid: null}'\n */\nfunction datetimeFromUserInput(input: TimeResult): {\n invalid?: boolean;\n valid: moment.Moment | null;\n} {\n if (!input.date) {\n return { valid: null };\n }\n\n const time = timeFromUserInput(input);\n\n const date = moment\n .parseZone(input.utcOffset, 'Z')\n .set(input.date.toObject())\n .set({ hours: time.hours(), minutes: time.minutes() });\n\n if (date.isValid()) {\n return { valid: date };\n } else {\n return { invalid: true, valid: null };\n }\n}\n\n/**\n * Parse user input into a string that is stored in the API.\n *\n * Returns a sum type with either the string as the `valid` property\n * or the `invalid` property set to `false`.\n */\nexport function buildFieldValue({\n data,\n usesTime,\n usesTimezone,\n}: {\n data: TimeResult;\n usesTime: boolean;\n usesTimezone: boolean;\n}) {\n const date = datetimeFromUserInput(data);\n if (date.invalid) {\n return {\n invalid: true,\n };\n }\n\n let format;\n if (usesTimezone) {\n format = 'YYYY-MM-DDTHH:mmZ';\n } else if (usesTime) {\n format = 'YYYY-MM-DDTHH:mm';\n } else {\n format = 'YYYY-MM-DD';\n }\n return { valid: date?.valid ? date.valid.format(format) : null, invalid: false };\n}\n\nexport function getDefaultAMPM() {\n return 'AM';\n}\n\nexport function getDefaultUtcOffset() {\n return startOfToday('Z');\n}\n\n/**\n * Create the user input object from the field value.\n */\nexport function userInputFromDatetime({\n value,\n uses12hClock,\n}: {\n value: string | undefined | null;\n uses12hClock: boolean;\n}): TimeResult {\n const datetime = fieldValueToMoment(value);\n\n if (datetime) {\n const timeFormat = uses12hClock ? 'hh:mm' : 'HH:mm';\n return {\n date: datetime,\n time: datetime.format(timeFormat),\n ampm: datetime.format('A'),\n utcOffset: datetime.format('Z'),\n };\n } else {\n return {\n ampm: getDefaultAMPM(),\n utcOffset: getDefaultUtcOffset(),\n };\n }\n}\n","import * as React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { FieldAPI, FieldConnector, ParametersAPI } from '@contentful/field-editor-shared';\nimport { DatepickerInput } from './DatepickerInput';\nimport { TimepickerInput } from './TimepickerInput';\nimport { TimezonepickerInput } from './TimezonePickerInput';\nimport {\n userInputFromDatetime,\n buildFieldValue,\n getDefaultAMPM,\n getDefaultUtcOffset,\n} from './utils/date';\nimport { TimeFormat, DateTimeFormat, TimeResult } from './types';\n\nimport { TextLink } from '@contentful/f36-components';\n\nexport interface DateEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.parameters\n */\n parameters?: ParametersAPI & {\n instance?: {\n format?: DateTimeFormat;\n ampm?: TimeFormat;\n };\n };\n}\n\nconst styles = {\n root: css({\n display: 'flex',\n alignItems: 'center',\n }),\n separator: css({\n marginLeft: tokens.spacingM,\n }),\n};\n\nfunction useEffectWithoutFirstRender(callback: Function, deps: Array<any>) {\n const isFirstRun = React.useRef(true);\n React.useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n callback();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies\n }, deps);\n}\n\nfunction DateEditorContainer({\n initialValue,\n usesTime,\n usesTimezone,\n uses12hClock,\n disabled,\n hasClear,\n onChange,\n}: {\n initialValue: TimeResult;\n usesTime: boolean;\n usesTimezone: boolean;\n uses12hClock: boolean;\n disabled: boolean;\n hasClear: boolean;\n onChange: (value: TimeResult) => void;\n}) {\n const [value, setValue] = React.useState<TimeResult>(() => initialValue);\n\n useEffectWithoutFirstRender(() => {\n onChange(value);\n }, [value]);\n\n return (\n <div data-test-id=\"date-editor\" className={styles.root}>\n <DatepickerInput\n disabled={disabled}\n value={value.date}\n onChange={(date) => {\n setValue((value) => ({\n ...value,\n date,\n }));\n }}\n />\n {usesTime && (\n <>\n <div className={styles.separator} />\n <TimepickerInput\n disabled={disabled}\n time={value.time}\n ampm={value.ampm}\n onChange={({ time, ampm }) => {\n setValue((value) => ({\n ...value,\n time,\n ampm,\n }));\n }}\n uses12hClock={uses12hClock}\n />\n </>\n )}\n {usesTimezone && (\n <>\n <div className={styles.separator} />\n <TimezonepickerInput\n disabled={disabled}\n value={value.utcOffset}\n onChange={(utcOffset) => {\n setValue((value) => ({\n ...value,\n utcOffset,\n }));\n }}\n />\n </>\n )}\n {hasClear && (\n <>\n <div className={styles.separator} />\n <TextLink\n as=\"button\"\n isDisabled={disabled}\n testId=\"date-clear\"\n onClick={() => {\n setValue({\n date: undefined,\n time: undefined,\n ampm: getDefaultAMPM(),\n utcOffset: getDefaultUtcOffset(),\n });\n }}>\n Clear\n </TextLink>\n </>\n )}\n </div>\n );\n}\n\nexport function DateEditor(props: DateEditorProps) {\n const { field, parameters } = props;\n\n const formatParam = parameters?.instance?.format ?? 'timeZ';\n const ampmParam = parameters?.instance?.ampm ?? '24';\n\n const usesTime = formatParam !== 'dateonly';\n const usesTimezone = formatParam === 'timeZ';\n const uses12hClock = ampmParam === '12';\n\n return (\n <FieldConnector<string>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n throttle={0}>\n {({ value, disabled, setValue, externalReset }) => {\n const datetimeValue = userInputFromDatetime({\n value,\n uses12hClock,\n });\n return (\n <DateEditorContainer\n initialValue={datetimeValue}\n uses12hClock={uses12hClock}\n usesTimezone={usesTimezone}\n usesTime={usesTime}\n disabled={disabled}\n hasClear={Boolean(value)}\n onChange={(data) => {\n const fieldValue = buildFieldValue({ data, usesTime, usesTimezone });\n if (fieldValue.invalid) {\n return;\n }\n // if value is present - then override it with a new one\n // if value is not present - then set a new one if it's not nullable only\n if (Boolean(value) || (!value && Boolean(fieldValue.valid))) {\n setValue(fieldValue.valid);\n }\n }}\n key={`date-container-${externalReset}`}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nDateEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["styles","root","css","maxWidth","DatepickerInput","props","useMemo","fromDate","Date","setFullYear","getFullYear","toDate","React","Datepicker","className","selected","value","_props$value","onSelect","day","onChange","moment","inputProps","isDisabled","disabled","placeholder","validInputFormats","getDefaultTime","formatToString","uses12hClock","format","TimepickerInput","time","ampm","useState","selectedTime","setSelectedTime","useEffect","handleChange","useCallback","e","currentTarget","handleFocus","preventDefault","target","select","Flex","width","TextInput","testId","onFocus","onBlur","parsedTime","raw","i","length","date","isValid","parseRawInput","zoneOffsets","TimezonepickerInput","Select","map","offset","Option","key","ZONE_RX","getDefaultUtcOffset","set","hours","minutes","display","alignItems","separator","marginLeft","tokens","spacingM","DateEditorContainer","callback","deps","isFirstRun","initialValue","usesTime","usesTimezone","hasClear","setValue","current","utcOffset","TextLink","as","onClick","undefined","DateEditor","parameters","formatParam","instance","_parameters$instance","ampmParam","_parameters$instance2","FieldConnector","field","isInitiallyDisabled","throttle","externalReset","datetimeValue","datetime","datetimeString","test","fieldValueToMoment","userInputFromDatetime","Boolean","data","fieldValue","input","valid","utc","timeFromUserInput","parseZone","toObject","invalid","datetimeFromUserInput","buildFieldValue","defaultProps"],"mappings":"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"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import React__default, {
|
|
2
|
-
import {
|
|
1
|
+
import React__default, { useMemo, useState, useEffect, useCallback, createElement, Fragment, useRef } from 'react';
|
|
2
|
+
import { css } from 'emotion';
|
|
3
3
|
import tokens from '@contentful/f36-tokens';
|
|
4
4
|
import { FieldConnector } from '@contentful/field-editor-shared';
|
|
5
|
-
import
|
|
5
|
+
import { Datepicker } from '@contentful/f36-datepicker';
|
|
6
6
|
import moment from 'moment';
|
|
7
|
-
import
|
|
8
|
-
import { TextInput, Flex, Select, TextLink } from '@contentful/f36-components';
|
|
7
|
+
import { Flex, TextInput, Select, TextLink } from '@contentful/f36-components';
|
|
9
8
|
|
|
10
9
|
function _extends() {
|
|
11
10
|
_extends = Object.assign || function (target) {
|
|
@@ -25,21 +24,141 @@ function _extends() {
|
|
|
25
24
|
return _extends.apply(this, arguments);
|
|
26
25
|
}
|
|
27
26
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
var YEAR_RANGE = 100;
|
|
28
|
+
var styles = {
|
|
29
|
+
root: /*#__PURE__*/css({
|
|
30
|
+
maxWidth: '270px'
|
|
31
|
+
})
|
|
32
|
+
};
|
|
33
|
+
var DatepickerInput = function DatepickerInput(props) {
|
|
34
|
+
var _props$value;
|
|
35
|
+
|
|
36
|
+
var _useMemo = useMemo(function () {
|
|
37
|
+
var fromDate = new Date();
|
|
38
|
+
fromDate.setFullYear(fromDate.getFullYear() - YEAR_RANGE);
|
|
39
|
+
var toDate = new Date();
|
|
40
|
+
toDate.setFullYear(toDate.getFullYear() + YEAR_RANGE);
|
|
41
|
+
return [fromDate, toDate];
|
|
42
|
+
}, []),
|
|
43
|
+
fromDate = _useMemo[0],
|
|
44
|
+
toDate = _useMemo[1];
|
|
45
|
+
|
|
46
|
+
return React__default.createElement(Datepicker, {
|
|
47
|
+
className: styles.root,
|
|
48
|
+
selected: (_props$value = props.value) == null ? void 0 : _props$value.toDate(),
|
|
49
|
+
onSelect: function onSelect(day) {
|
|
50
|
+
props.onChange(moment(day));
|
|
51
|
+
},
|
|
52
|
+
inputProps: {
|
|
53
|
+
isDisabled: props.disabled,
|
|
54
|
+
placeholder: ''
|
|
55
|
+
},
|
|
56
|
+
fromDate: fromDate,
|
|
57
|
+
toDate: toDate
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var validInputFormats = ['hh:mm a', 'hh:mm A', 'h:mm a', 'h:mm A', 'hh:mm', 'k:mm', 'kk:mm', 'h a', 'h A', 'h', 'hh', 'HH'];
|
|
62
|
+
|
|
63
|
+
function parseRawInput(raw) {
|
|
64
|
+
var time = null; // eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/prefer-for-of
|
|
65
|
+
|
|
66
|
+
for (var i = 0; i < validInputFormats.length; i++) {
|
|
67
|
+
var date = moment(raw, validInputFormats[i]);
|
|
31
68
|
|
|
32
|
-
|
|
69
|
+
if (date.isValid()) {
|
|
70
|
+
time = date;
|
|
71
|
+
break;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return time;
|
|
33
76
|
}
|
|
34
77
|
|
|
35
|
-
function
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
78
|
+
var getDefaultTime = function getDefaultTime() {
|
|
79
|
+
return moment("12:00 AM", 'hh:mm A');
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
var formatToString = function formatToString(uses12hClock, value) {
|
|
83
|
+
return uses12hClock ? value.format('hh:mm A') : value.format('HH:mm');
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
var TimepickerInput = function TimepickerInput(_ref) {
|
|
87
|
+
var disabled = _ref.disabled,
|
|
88
|
+
uses12hClock = _ref.uses12hClock,
|
|
89
|
+
_ref$time = _ref.time,
|
|
90
|
+
time = _ref$time === void 0 ? '12:00' : _ref$time,
|
|
91
|
+
_ref$ampm = _ref.ampm,
|
|
92
|
+
ampm = _ref$ampm === void 0 ? 'AM' : _ref$ampm,
|
|
93
|
+
onChange = _ref.onChange;
|
|
94
|
+
|
|
95
|
+
var _useState = useState(function () {
|
|
96
|
+
return formatToString(uses12hClock, getDefaultTime());
|
|
97
|
+
}),
|
|
98
|
+
selectedTime = _useState[0],
|
|
99
|
+
setSelectedTime = _useState[1];
|
|
100
|
+
|
|
101
|
+
useEffect(function () {
|
|
102
|
+
setSelectedTime(formatToString(uses12hClock, moment(time + " " + ampm, 'hh:mm A')));
|
|
103
|
+
}, [time, ampm, uses12hClock]);
|
|
104
|
+
var handleChange = useCallback(function (e) {
|
|
105
|
+
setSelectedTime(e.currentTarget.value);
|
|
106
|
+
}, []);
|
|
107
|
+
var handleFocus = useCallback(function (e) {
|
|
108
|
+
e.preventDefault();
|
|
109
|
+
e.target.select();
|
|
110
|
+
}, []);
|
|
111
|
+
|
|
112
|
+
var handleBlur = function handleBlur() {
|
|
113
|
+
var parsedTime = parseRawInput(selectedTime);
|
|
114
|
+
var value = parsedTime != null ? parsedTime : getDefaultTime();
|
|
115
|
+
setSelectedTime(formatToString(uses12hClock, value));
|
|
116
|
+
onChange({
|
|
117
|
+
time: value.format('hh:mm'),
|
|
118
|
+
ampm: value.format('A')
|
|
119
|
+
});
|
|
39
120
|
};
|
|
40
121
|
|
|
41
|
-
return
|
|
42
|
-
|
|
122
|
+
return React__default.createElement(Flex, {
|
|
123
|
+
className: css({
|
|
124
|
+
width: '145px'
|
|
125
|
+
})
|
|
126
|
+
}, React__default.createElement(TextInput, {
|
|
127
|
+
"aria-label": "Select time",
|
|
128
|
+
placeholder: uses12hClock ? '12:00 AM' : '00:00',
|
|
129
|
+
"date-time-type": uses12hClock ? '12' : '24',
|
|
130
|
+
testId: "time-input",
|
|
131
|
+
value: selectedTime,
|
|
132
|
+
isDisabled: disabled,
|
|
133
|
+
onFocus: handleFocus,
|
|
134
|
+
onBlur: handleBlur,
|
|
135
|
+
onChange: handleChange
|
|
136
|
+
}));
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
var defaultZoneOffset = '+00:00';
|
|
140
|
+
var zoneOffsets = ['-12:00', '-11:00', '-10:00', '-09:30', '-09:00', '-08:00', '-07:00', '-06:00', '-05:00', '-04:30', '-04:00', '-03:30', '-03:00', '-02:00', '-01:00', '+00:00', '+01:00', '+02:00', '+03:00', '+03:30', '+04:00', '+04:30', '+05:00', '+05:30', '+05:45', '+06:00', '+06:30', '+07:00', '+08:00', '+08:45', '+09:00', '+09:30', '+10:00', '+10:30', '+11:00', '+11:30', '+12:00', '+12:45', '+13:00', '+14:00'];
|
|
141
|
+
|
|
142
|
+
var TimezonepickerInput = function TimezonepickerInput(_ref) {
|
|
143
|
+
var disabled = _ref.disabled,
|
|
144
|
+
_onChange = _ref.onChange,
|
|
145
|
+
_ref$value = _ref.value,
|
|
146
|
+
value = _ref$value === void 0 ? defaultZoneOffset : _ref$value;
|
|
147
|
+
return React__default.createElement(Select, {
|
|
148
|
+
"aria-label": "Select timezone",
|
|
149
|
+
testId: "timezone-input",
|
|
150
|
+
value: value,
|
|
151
|
+
isDisabled: disabled,
|
|
152
|
+
onChange: function onChange(e) {
|
|
153
|
+
_onChange(e.currentTarget.value);
|
|
154
|
+
}
|
|
155
|
+
}, zoneOffsets.map(function (offset) {
|
|
156
|
+
return React__default.createElement(Select.Option, {
|
|
157
|
+
key: offset,
|
|
158
|
+
value: offset
|
|
159
|
+
}, "UTC", offset);
|
|
160
|
+
}));
|
|
161
|
+
};
|
|
43
162
|
|
|
44
163
|
// eslint-disable-next-line -- TODO: describe this disable no-restricted-imports
|
|
45
164
|
var ZONE_RX = /(Z|[+-]\d{2}[:+]?\d{2})$/;
|
|
@@ -103,14 +222,6 @@ function datetimeFromUserInput(input) {
|
|
|
103
222
|
};
|
|
104
223
|
}
|
|
105
224
|
}
|
|
106
|
-
|
|
107
|
-
function formatDateDisplay(date) {
|
|
108
|
-
if (date) {
|
|
109
|
-
return date.format('dddd, MMMM Do YYYY');
|
|
110
|
-
} else {
|
|
111
|
-
return '';
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
225
|
/**
|
|
115
226
|
* Parse user input into a string that is stored in the API.
|
|
116
227
|
*
|
|
@@ -118,6 +229,7 @@ function formatDateDisplay(date) {
|
|
|
118
229
|
* or the `invalid` property set to `false`.
|
|
119
230
|
*/
|
|
120
231
|
|
|
232
|
+
|
|
121
233
|
function buildFieldValue(_ref) {
|
|
122
234
|
var data = _ref.data,
|
|
123
235
|
usesTime = _ref.usesTime,
|
|
@@ -176,261 +288,6 @@ function userInputFromDatetime(_ref2) {
|
|
|
176
288
|
}
|
|
177
289
|
}
|
|
178
290
|
|
|
179
|
-
var I18N = {
|
|
180
|
-
previousMonth: 'Previous Month',
|
|
181
|
-
nextMonth: 'Next Month',
|
|
182
|
-
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
|
183
|
-
weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
|
|
184
|
-
weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
|
|
185
|
-
};
|
|
186
|
-
var DEFAULTS = {
|
|
187
|
-
i18n: I18N,
|
|
188
|
-
yearRange: 100
|
|
189
|
-
}; // Gets same options as Pikaday and returns a Pikaday instance
|
|
190
|
-
|
|
191
|
-
var createPikaday = function createPikaday(opts) {
|
|
192
|
-
return new Pikaday(Object.assign({}, DEFAULTS, opts));
|
|
193
|
-
};
|
|
194
|
-
|
|
195
|
-
function CalendarIcon(props) {
|
|
196
|
-
return React__default.createElement("svg", {
|
|
197
|
-
width: "16",
|
|
198
|
-
height: "17",
|
|
199
|
-
viewBox: "-1 -1 18 19",
|
|
200
|
-
onClick: props.onClick,
|
|
201
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
202
|
-
className: props.className
|
|
203
|
-
}, React__default.createElement("g", {
|
|
204
|
-
fill: "none",
|
|
205
|
-
fillRule: "evenodd"
|
|
206
|
-
}, React__default.createElement("g", {
|
|
207
|
-
fill: "#536171"
|
|
208
|
-
}, React__default.createElement("path", {
|
|
209
|
-
d: "M2.071 14.929v-2.411h2.411v2.41h-2.41zm2.947 0v-2.411h2.678v2.41H5.018zM2.07 11.982V9.304h2.411v2.678h-2.41zm2.947 0V9.304h2.678v2.678H5.018zM2.07 8.768v-2.41h2.411v2.41h-2.41zm6.161 6.16v-2.41h2.679v2.41H8.232zm-3.214-6.16v-2.41h2.678v2.41H5.018zm6.428 6.16v-2.41h2.411v2.41h-2.41zm-3.214-2.946V9.304h2.679v2.678H8.232zM5.286 4.75a.275.275 0 0 1-.268.268h-.536a.275.275 0 0 1-.268-.268V2.34c0-.143.126-.269.268-.269h.536c.142 0 .268.126.268.268V4.75zm6.16 7.232V9.304h2.411v2.678h-2.41zM8.232 8.768v-2.41h2.679v2.41H8.232zm3.214 0v-2.41h2.411v2.41h-2.41zm.268-4.018a.275.275 0 0 1-.268.268h-.535a.275.275 0 0 1-.268-.268V2.34c0-.143.125-.269.268-.269h.535c.143 0 .268.126.268.268V4.75zm3.215-.536c0-.586-.486-1.071-1.072-1.071h-1.071v-.804c0-.736-.603-1.339-1.34-1.339h-.535c-.737 0-1.34.603-1.34 1.34v.803H6.357v-.804C6.357 1.603 5.754 1 5.017 1h-.535c-.736 0-1.34.603-1.34 1.34v.803h-1.07C1.484 3.143 1 3.628 1 4.214V14.93C1 15.515 1.485 16 2.071 16h11.786c.586 0 1.072-.485 1.072-1.071V4.214z"
|
|
210
|
-
}))));
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
var styles = {
|
|
214
|
-
datePickerWrapper: /*#__PURE__*/css({
|
|
215
|
-
position: 'relative',
|
|
216
|
-
maxHeight: 70
|
|
217
|
-
}),
|
|
218
|
-
datePicker: /*#__PURE__*/css({
|
|
219
|
-
zIndex: 1002,
|
|
220
|
-
display: 'block',
|
|
221
|
-
'.is-hidden': {
|
|
222
|
-
display: 'none'
|
|
223
|
-
}
|
|
224
|
-
}),
|
|
225
|
-
input: /*#__PURE__*/css({
|
|
226
|
-
width: '270px',
|
|
227
|
-
cursor: 'pointer',
|
|
228
|
-
paddingRight: '40px',
|
|
229
|
-
'&:disabled': {
|
|
230
|
-
cursor: 'not-allowed'
|
|
231
|
-
}
|
|
232
|
-
}),
|
|
233
|
-
icon: /*#__PURE__*/css({
|
|
234
|
-
cursor: 'pointer',
|
|
235
|
-
zIndex: 50,
|
|
236
|
-
position: 'absolute',
|
|
237
|
-
top: '12px',
|
|
238
|
-
right: '12px'
|
|
239
|
-
})
|
|
240
|
-
};
|
|
241
|
-
var DatepickerInput = /*#__PURE__*/function (_Component) {
|
|
242
|
-
_inheritsLoose(DatepickerInput, _Component);
|
|
243
|
-
|
|
244
|
-
function DatepickerInput() {
|
|
245
|
-
var _this;
|
|
246
|
-
|
|
247
|
-
_this = _Component.apply(this, arguments) || this;
|
|
248
|
-
_this.datePickerNode = React__default.createRef();
|
|
249
|
-
|
|
250
|
-
_this.focusInput = function () {
|
|
251
|
-
if (_this.datePickerNode && _this.datePickerNode.current) {
|
|
252
|
-
_this.datePickerNode.current.focus();
|
|
253
|
-
}
|
|
254
|
-
};
|
|
255
|
-
|
|
256
|
-
_this.handleOpen = function () {
|
|
257
|
-
if (_this.pikaday) {
|
|
258
|
-
_this.pikaday.show();
|
|
259
|
-
}
|
|
260
|
-
};
|
|
261
|
-
|
|
262
|
-
_this.handleBlur = function (e) {
|
|
263
|
-
_this.props.onBlur(e);
|
|
264
|
-
|
|
265
|
-
if (_this.pikaday && !_this.pikaday.el.contains(e.relatedTarget)) {
|
|
266
|
-
_this.pikaday.hide();
|
|
267
|
-
}
|
|
268
|
-
};
|
|
269
|
-
|
|
270
|
-
return _this;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
var _proto = DatepickerInput.prototype;
|
|
274
|
-
|
|
275
|
-
_proto.componentDidMount = function componentDidMount() {
|
|
276
|
-
var onChange = this.props.onChange;
|
|
277
|
-
var defaultDate = this.props.value ? this.props.value.toDate() : undefined;
|
|
278
|
-
this.pikaday = createPikaday({
|
|
279
|
-
field: this.datePickerNode && this.datePickerNode.current,
|
|
280
|
-
defaultDate: defaultDate,
|
|
281
|
-
setDefaultDate: defaultDate !== undefined,
|
|
282
|
-
position: 'bottom left',
|
|
283
|
-
reposition: false,
|
|
284
|
-
theme: cx(styles.datePicker, 'hide-carret'),
|
|
285
|
-
toString: function toString(date) {
|
|
286
|
-
return formatDateDisplay(moment(date));
|
|
287
|
-
},
|
|
288
|
-
// we need to keep this function like this
|
|
289
|
-
// so `this` refers to pikaday instance
|
|
290
|
-
onSelect: function onSelect() {
|
|
291
|
-
onChange(this.getMoment() || undefined);
|
|
292
|
-
}
|
|
293
|
-
});
|
|
294
|
-
};
|
|
295
|
-
|
|
296
|
-
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
297
|
-
if (this.pikaday) {
|
|
298
|
-
this.pikaday.destroy();
|
|
299
|
-
}
|
|
300
|
-
};
|
|
301
|
-
|
|
302
|
-
_proto.render = function render() {
|
|
303
|
-
var _this2 = this;
|
|
304
|
-
|
|
305
|
-
return React__default.createElement("div", {
|
|
306
|
-
className: styles.datePickerWrapper
|
|
307
|
-
}, React__default.createElement(TextInput, {
|
|
308
|
-
"aria-label": "Select date",
|
|
309
|
-
testId: "date-input",
|
|
310
|
-
isReadOnly: true,
|
|
311
|
-
isDisabled: this.props.disabled,
|
|
312
|
-
value: formatDateDisplay(this.props.value),
|
|
313
|
-
ref: this.datePickerNode,
|
|
314
|
-
onFocus: this.handleOpen,
|
|
315
|
-
onBlur: this.handleBlur,
|
|
316
|
-
className: styles.input
|
|
317
|
-
}), React__default.createElement(CalendarIcon, {
|
|
318
|
-
onClick: function onClick() {
|
|
319
|
-
_this2.focusInput();
|
|
320
|
-
},
|
|
321
|
-
className: styles.icon
|
|
322
|
-
}));
|
|
323
|
-
};
|
|
324
|
-
|
|
325
|
-
return DatepickerInput;
|
|
326
|
-
}(Component);
|
|
327
|
-
DatepickerInput.defaultProps = {
|
|
328
|
-
onChange: noop,
|
|
329
|
-
onBlur: noop
|
|
330
|
-
};
|
|
331
|
-
|
|
332
|
-
var validInputFormats = ['hh:mm a', 'hh:mm A', 'h:mm a', 'h:mm A', 'hh:mm', 'k:mm', 'kk:mm', 'h a', 'h A', 'h', 'hh', 'HH'];
|
|
333
|
-
|
|
334
|
-
function parseRawInput(raw) {
|
|
335
|
-
var time = null; // eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/prefer-for-of
|
|
336
|
-
|
|
337
|
-
for (var i = 0; i < validInputFormats.length; i++) {
|
|
338
|
-
var date = moment(raw, validInputFormats[i]);
|
|
339
|
-
|
|
340
|
-
if (date.isValid()) {
|
|
341
|
-
time = date;
|
|
342
|
-
break;
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
return time;
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
var getDefaultTime = function getDefaultTime() {
|
|
350
|
-
return moment("12:00 AM", 'hh:mm A');
|
|
351
|
-
};
|
|
352
|
-
|
|
353
|
-
var formatToString = function formatToString(uses12hClock, value) {
|
|
354
|
-
return uses12hClock ? value.format('hh:mm A') : value.format('HH:mm');
|
|
355
|
-
};
|
|
356
|
-
|
|
357
|
-
var TimepickerInput = function TimepickerInput(_ref) {
|
|
358
|
-
var disabled = _ref.disabled,
|
|
359
|
-
uses12hClock = _ref.uses12hClock,
|
|
360
|
-
_ref$time = _ref.time,
|
|
361
|
-
time = _ref$time === void 0 ? '12:00' : _ref$time,
|
|
362
|
-
_ref$ampm = _ref.ampm,
|
|
363
|
-
ampm = _ref$ampm === void 0 ? 'AM' : _ref$ampm,
|
|
364
|
-
onChange = _ref.onChange;
|
|
365
|
-
|
|
366
|
-
var _useState = useState(function () {
|
|
367
|
-
return formatToString(uses12hClock, getDefaultTime());
|
|
368
|
-
}),
|
|
369
|
-
selectedTime = _useState[0],
|
|
370
|
-
setSelectedTime = _useState[1];
|
|
371
|
-
|
|
372
|
-
useEffect(function () {
|
|
373
|
-
setSelectedTime(formatToString(uses12hClock, moment(time + " " + ampm, 'hh:mm A')));
|
|
374
|
-
}, [time, ampm, uses12hClock]);
|
|
375
|
-
var handleChange = useCallback(function (e) {
|
|
376
|
-
setSelectedTime(e.currentTarget.value);
|
|
377
|
-
}, []);
|
|
378
|
-
var handleFocus = useCallback(function (e) {
|
|
379
|
-
e.preventDefault();
|
|
380
|
-
e.target.select();
|
|
381
|
-
}, []);
|
|
382
|
-
|
|
383
|
-
var handleBlur = function handleBlur() {
|
|
384
|
-
var parsedTime = parseRawInput(selectedTime);
|
|
385
|
-
var value = parsedTime != null ? parsedTime : getDefaultTime();
|
|
386
|
-
setSelectedTime(formatToString(uses12hClock, value));
|
|
387
|
-
onChange({
|
|
388
|
-
time: value.format('hh:mm'),
|
|
389
|
-
ampm: value.format('A')
|
|
390
|
-
});
|
|
391
|
-
};
|
|
392
|
-
|
|
393
|
-
return React__default.createElement(Flex, {
|
|
394
|
-
className: css({
|
|
395
|
-
width: '145px'
|
|
396
|
-
})
|
|
397
|
-
}, React__default.createElement(TextInput, {
|
|
398
|
-
"aria-label": "Select time",
|
|
399
|
-
placeholder: uses12hClock ? '12:00 AM' : '00:00',
|
|
400
|
-
"date-time-type": uses12hClock ? '12' : '24',
|
|
401
|
-
testId: "time-input",
|
|
402
|
-
value: selectedTime,
|
|
403
|
-
isDisabled: disabled,
|
|
404
|
-
onFocus: handleFocus,
|
|
405
|
-
onBlur: handleBlur,
|
|
406
|
-
onChange: handleChange
|
|
407
|
-
}));
|
|
408
|
-
};
|
|
409
|
-
|
|
410
|
-
var defaultZoneOffset = '+00:00';
|
|
411
|
-
var zoneOffsets = ['-12:00', '-11:00', '-10:00', '-09:30', '-09:00', '-08:00', '-07:00', '-06:00', '-05:00', '-04:30', '-04:00', '-03:30', '-03:00', '-02:00', '-01:00', '+00:00', '+01:00', '+02:00', '+03:00', '+03:30', '+04:00', '+04:30', '+05:00', '+05:30', '+05:45', '+06:00', '+06:30', '+07:00', '+08:00', '+08:45', '+09:00', '+09:30', '+10:00', '+10:30', '+11:00', '+11:30', '+12:00', '+12:45', '+13:00', '+14:00'];
|
|
412
|
-
|
|
413
|
-
var TimezonepickerInput = function TimezonepickerInput(_ref) {
|
|
414
|
-
var disabled = _ref.disabled,
|
|
415
|
-
_onChange = _ref.onChange,
|
|
416
|
-
_ref$value = _ref.value,
|
|
417
|
-
value = _ref$value === void 0 ? defaultZoneOffset : _ref$value;
|
|
418
|
-
return React__default.createElement(Select, {
|
|
419
|
-
"aria-label": "Select timezone",
|
|
420
|
-
testId: "timezone-input",
|
|
421
|
-
value: value,
|
|
422
|
-
isDisabled: disabled,
|
|
423
|
-
onChange: function onChange(e) {
|
|
424
|
-
_onChange(e.currentTarget.value);
|
|
425
|
-
}
|
|
426
|
-
}, zoneOffsets.map(function (offset) {
|
|
427
|
-
return React__default.createElement(Select.Option, {
|
|
428
|
-
key: offset,
|
|
429
|
-
value: offset
|
|
430
|
-
}, "UTC", offset);
|
|
431
|
-
}));
|
|
432
|
-
};
|
|
433
|
-
|
|
434
291
|
var styles$1 = {
|
|
435
292
|
root: /*#__PURE__*/css({
|
|
436
293
|
display: 'flex',
|
|
@@ -585,5 +442,5 @@ DateEditor.defaultProps = {
|
|
|
585
442
|
isInitiallyDisabled: true
|
|
586
443
|
};
|
|
587
444
|
|
|
588
|
-
export { DateEditor,
|
|
445
|
+
export { DateEditor, zoneOffsets };
|
|
589
446
|
//# sourceMappingURL=field-editor-date.esm.js.map
|