@acusti/date-picker 0.0.4 → 0.0.5

package/dist/DatePicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export type Props = {
+    className?: string;
+    dateEnd?: Date | string | number;
+    dateStart?: Date | string | number;
+    initialMonth?: number;
+    isTwoUp?: boolean;
+    monthLimitFirst?: number;
+    monthLimitLast?: number;
+    useMonthAbbreviations?: boolean;
+};
+export default function DatePicker({ className, dateEnd, dateStart, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, useMonthAbbreviations, }: Props): JSX.Element;

package/dist/DatePicker.js

@@ -0,0 +1,53 @@
+import { Style } from '@acusti/styling';
+import clsx from 'clsx';
+import * as React from 'react';
+import { getMonthAbbreviationFromMonth, getMonthFromDate, getYearFromMonth, } from './utils.js';
+import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
+import MonthCalendar from './MonthCalendar.js';
+const { Fragment, useCallback, useState } = React;
+const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
+export default function DatePicker({ className, dateEnd, dateStart, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, useMonthAbbreviations, }) {
+    if (initialMonth == null) {
+        // Use dateStart if it’s set
+        const initialDate = dateStart == null ? new Date() : new Date(dateStart);
+        initialMonth = getMonthFromDate(initialDate);
+        if (isTwoUp && dateStart == null) {
+            initialMonth -= 1;
+        }
+    }
+    const [month, setMonth] = useState(initialMonth);
+    // In two-up view we see 1 more month, so monthLimitLast needs to be 1 less
+    if (isTwoUp && monthLimitLast != null) {
+        monthLimitLast -= 1;
+    }
+    const handleClickLeftArrow = useCallback(() => {
+        setMonth((existingMonth) => monthLimitFirst == null || existingMonth > monthLimitFirst
+            ? existingMonth - 1
+            : existingMonth);
+    }, [monthLimitFirst]);
+    const handleClickRightArrow = useCallback(() => {
+        setMonth((existingMonth) => monthLimitLast == null || existingMonth < monthLimitLast
+            ? existingMonth + 1
+            : existingMonth);
+    }, [monthLimitLast]);
+    return (React.createElement(Fragment, null,
+        React.createElement(Style, null, STYLES),
+        React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className, {
+                'two-up': isTwoUp,
+            }) },
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-range-arrow-wrap` },
+                React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
+                        disabled: monthLimitFirst != null && month <= monthLimitFirst,
+                    }), onClick: handleClickLeftArrow }),
+                React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
+                        disabled: monthLimitLast != null && month >= monthLimitLast,
+                    }), onClick: handleClickRightArrow })),
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-container` },
+                React.createElement(MonthCalendar, { dateEnd: dateEnd, dateStart: dateStart, month: month, title: useMonthAbbreviations
+                        ? getAbbreviatedMonthTitle(month)
+                        : undefined }),
+                isTwoUp ? (React.createElement(MonthCalendar, { dateEnd: dateEnd, dateStart: dateStart, month: month + 1, title: useMonthAbbreviations
+                        ? getAbbreviatedMonthTitle(month + 1)
+                        : undefined })) : null))));
+}
+//# sourceMappingURL=DatePicker.js.map

package/dist/DatePicker.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for DatePicker
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.20.1
+ * @flow
+ */
+
+export type Props = {|
+  className?: string,
+  dateEnd?: Date | string | number,
+  dateStart?: Date | string | number,
+  initialMonth?: number,
+  isTwoUp?: boolean,
+  monthLimitFirst?: number,
+  monthLimitLast?: number,
+  useMonthAbbreviations?: boolean,
+|};
+declare export default function DatePicker(x: Props): React$Node;

package/dist/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,gBAAgB,GACnB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAa/C,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAElD,MAAM,wBAAwB,GAAG,CAAC,KAAa,EAAE,EAAE,CAC/C,GAAG,6BAA6B,CAAC,KAAK,CAAC,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,SAAS,EACT,OAAO,EACP,SAAS,EACT,OAAO,EACP,YAAY,EACZ,eAAe,EACf,cAAc,EACd,qBAAqB,GACjB;IACJ,IAAI,YAAY,IAAI,IAAI,EAAE;QACtB,4BAA4B;QAC5B,MAAM,WAAW,GAAG,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;QACzE,YAAY,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAC7C,IAAI,OAAO,IAAI,SAAS,IAAI,IAAI,EAAE;YAC9B,YAAY,IAAI,CAAC,CAAC;SACrB;KACJ;IACD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjD,2EAA2E;IAC3E,IAAI,OAAO,IAAI,cAAc,IAAI,IAAI,EAAE;QACnC,cAAc,IAAI,CAAC,CAAC;KACvB;IAED,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CACvB,eAAe,IAAI,IAAI,IAAI,aAAa,GAAG,eAAe;YACtD,CAAC,CAAC,aAAa,GAAG,CAAC;YACnB,CAAC,CAAC,aAAa,CACtB,CAAC;IACN,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CACvB,cAAc,IAAI,IAAI,IAAI,aAAa,GAAG,cAAc;YACpD,CAAC,CAAC,aAAa,GAAG,CAAC;YACnB,CAAC,CAAC,aAAa,CACtB,CAAC;IACN,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACH,oBAAC,QAAQ;QACL,oBAAC,KAAK,QAAE,MAAM,CAAS;QACvB,6BACI,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,EAAE;gBACxC,QAAQ,EAAE,OAAO;aACpB,CAAC;YAEF,6BAAK,SAAS,EAAE,GAAG,eAAe,mBAAmB;gBACjD,6BACI,SAAS,EAAE,IAAI,CAAC,GAAG,eAAe,yBAAyB,EAAE;wBACzD,QAAQ,EAAE,eAAe,IAAI,IAAI,IAAI,KAAK,IAAI,eAAe;qBAChE,CAAC,EACF,OAAO,EAAE,oBAAoB,GAC/B;gBACF,6BACI,SAAS,EAAE,IAAI,CAAC,GAAG,eAAe,0BAA0B,EAAE;wBAC1D,QAAQ,EAAE,cAAc,IAAI,IAAI,IAAI,KAAK,IAAI,cAAc;qBAC9D,CAAC,EACF,OAAO,EAAE,qBAAqB,GAChC,CACA;YACN,6BAAK,SAAS,EAAE,GAAG,eAAe,kBAAkB;gBAChD,oBAAC,aAAa,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EACD,qBAAqB;wBACjB,CAAC,CAAC,wBAAwB,CAAC,KAAK,CAAC;wBACjC,CAAC,CAAC,SAAS,GAErB;gBACD,OAAO,CAAC,CAAC,CAAC,CACP,oBAAC,aAAa,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,GAAG,CAAC,EAChB,KAAK,EACD,qBAAqB;wBACjB,CAAC,CAAC,wBAAwB,CAAC,KAAK,GAAG,CAAC,CAAC;wBACrC,CAAC,CAAC,SAAS,GAErB,CACL,CAAC,CAAC,CAAC,IAAI,CACN,CACJ,CACC,CACd,CAAC;AACN,CAAC"}

package/dist/MonthCalendar.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 export type Props = {
     className?: string;
-    dateRangeStart?: Date | string | number;
-    dateRangeEnd?: Date | string | number;
+    dateStart?: Date | string | number;
+    dateEnd?: Date | string | number;
     month: number;
     onChange?: (event: React.SyntheticEvent<HTMLElement>) => void;
     title?: string;
 };
-export default function MonthCalendar({ className, dateRangeEnd, dateRangeStart, month, onChange, title, }: Props): JSX.Element;
+export default function MonthCalendar({ className, dateEnd, dateStart, month, onChange, title, }: Props): JSX.Element;

package/dist/MonthCalendar.js

@@ -5,7 +5,7 @@ import { getMonthFromDate, getMonthNameFromMonth, getYearFromMonth } from './uti
 import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
 const { Fragment, useCallback } = React;
 const DAYS = Array(7).fill(null);
-export default function MonthCalendar({ className, dateRangeEnd, dateRangeStart, month, onChange, title, }) {
+export default function MonthCalendar({ className, dateEnd, dateStart, month, onChange, title, }) {
     const year = getYearFromMonth(month);
     title = title || `${getMonthNameFromMonth(month)} ${year}`;
     const monthWithinYear = month % 12;
@@ -18,8 +18,8 @@ export default function MonthCalendar({ className, dateRangeEnd, dateRangeStart,
     const spacesAfterLastDay = 7 - (lastDate.getDay() % 7); // prettier-ignore
     const daySpaces = totalDays + firstDay + spacesAfterLastDay;
     const [dateRangeStartDay, dateRangeEndDay] = [
-        dateRangeStart,
-        dateRangeEnd,
+        dateStart,
+        dateEnd,
     ].reduce((acc, date, index) => {
         if (date != null && !(date instanceof Date)) {
             date = new Date(date);
@@ -76,14 +76,17 @@ export default function MonthCalendar({ className, dateRangeEnd, dateRangeStart,
                 const isEmpty = dayNumber < 1 || dayNumber > totalDays;
                 const isAfterDateRangeStart = dateRangeStartDay != null &&
                     dayNumber > dateRangeStartDay;
-                const isBeforeDateRangeEnd = dateRangeEndDay == null ||
+                const isBeforeDateRangeEnd = dateRangeEndDay != null &&
                     dayNumber < dateRangeEndDay;
                 return (React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-month-day-item`, {
                         'is-empty': isEmpty,
-                        'is-selected': isAfterDateRangeStart &&
+                        'is-selected': !isEmpty &&
+                            isAfterDateRangeStart &&
                             isBeforeDateRangeEnd,
-                        'end-date': dayNumber === dateRangeEndDay,
-                        'start-date': dayNumber === dateRangeStartDay,
+                        'end-date': !isEmpty &&
+                            dayNumber === dateRangeEndDay,
+                        'start-date': !isEmpty &&
+                            dayNumber === dateRangeStartDay,
                     }), key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay }, isEmpty ? null : (React.createElement("span", { className: "month-day-item-text" }, dayNumber))));
             }))))))));
 }

package/dist/MonthCalendar.js.flow

@@ -8,8 +8,8 @@
 import * as React from "react";
 export type Props = {|
   className?: string,
-  dateRangeStart?: Date | string | number,
-  dateRangeEnd?: Date | string | number,
+  dateStart?: Date | string | number,
+  dateEnd?: Date | string | number,
   month: number,
   onChange?: (event: SyntheticEvent<HTMLElement>) => void,
   title?: string,

package/dist/MonthCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAarE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;AAExC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,SAAS,EACT,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,KAAK,GACD;IACJ,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACrC,KAAK,GAAG,KAAK,IAAI,GAAG,qBAAqB,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;IAC3D,MAAM,eAAe,GAAG,KAAK,GAAG,EAAE,CAAC;IACnC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;IAC5B,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IAC1E,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC;IACpC,MAAM,kBAAkB,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB;IAC1E,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAE5D,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAkB;QACxD,SAAS;QACT,OAAO;KACV,CAAC,MAAM,CACJ,CAAC,GAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QAChC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,CAAC,IAAI,YAAY,IAAI,CAAC,EAAE;YACzC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;QACD,IAAI,IAAI,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAAE,OAAO,GAAG,CAAC;QAE7D,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,SAAS,GAAG,KAAK;YAAE,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;aAClC,IAAI,SAAS,GAAG,KAAK;YAAE,GAAG,CAAC,KAAK,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC;;YAClD,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QACjC,IAAI,KAAK,KAAK,CAAC,EAAE;YACb,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YAChC,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;YAC1B,gEAAgE;YAChE,IAAI,QAAQ,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,QAAQ,GAAG,MAAM,EAAE;gBACzD,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC;gBACxB,GAAG,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;aACzB;SACJ;QAED,OAAO,GAAG,CAAC;IACf,CAAC,EACD,CAAC,IAAI,EAAE,IAAI,CAAC,CACf,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAC9B,CAAC,KAAwC,EAAE,EAAE;QACzC,IAAI,QAAQ;YAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,OAAO,CACH,oBAAC,QAAQ;QACL,oBAAC,KAAK,QAAE,MAAM,CAAS;QACvB,6BAAK,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;YAC5C,6BAAK,SAAS,EAAE,GAAG,eAAe,cAAc;gBAC5C,4BAAI,SAAS,EAAE,GAAG,eAAe,mBAAmB,IAAG,KAAK,CAAM,CAChE;YACN,6BAAK,SAAS,EAAE,GAAG,eAAe,aAAa;gBAC3C,6BAAK,SAAS,EAAC,eAAe;oBAC1B,8BAAM,SAAS,EAAC,oBAAoB,SAAU,CAC5C;gBACN,6BAAK,SAAS,EAAC,eAAe;oBAC1B,8BAAM,SAAS,EAAC,oBAAoB,SAAU,CAC5C;gBACN,6BAAK,SAAS,EAAC,eAAe;oBAC1B,8BAAM,SAAS,EAAC,oBAAoB,SAAU,CAC5C;gBACN,6BAAK,SAAS,EAAC,eAAe;oBAC1B,8BAAM,SAAS,EAAC,oBAAoB,SAAU,CAC5C;gBACN,6BAAK,SAAS,EAAC,eAAe;oBAC1B,8BAAM,SAAS,EAAC,oBAAoB,SAAU,CAC5C;gBACN,6BAAK,SAAS,EAAC,eAAe;oBAC1B,8BAAM,SAAS,EAAC,oBAAoB,SAAU,CAC5C;gBACN,6BAAK,SAAS,EAAC,eAAe;oBAC1B,8BAAM,SAAS,EAAC,oBAAoB,SAAU,CAC5C,CACJ;YACN,6BAAK,SAAS,EAAE,GAAG,eAAe,aAAa,IAC1C,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;iBAC5B,IAAI,CAAC,IAAI,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,CACnB,6BACI,SAAS,EAAE,GAAG,eAAe,YAAY,EACzC,GAAG,EAAE,YAAY,SAAS,EAAE,IAE3B,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;gBACtB,QAAQ,IAAI,SAAS,GAAG,CAAC,CAAC;gBAC1B,MAAM,SAAS,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,kBAAkB;gBAC/D,MAAM,OAAO,GACT,SAAS,GAAG,CAAC,IAAI,SAAS,GAAG,SAAS,CAAC;gBAC3C,MAAM,qBAAqB,GACvB,iBAAiB,IAAI,IAAI;oBACzB,SAAS,GAAG,iBAAiB,CAAC;gBAClC,MAAM,oBAAoB,GACtB,eAAe,IAAI,IAAI;oBACvB,SAAS,GAAG,eAAe,CAAC;gBAEhC,OAAO,CACH,6BACI,SAAS,EAAE,IAAI,CACX,GAAG,eAAe,iBAAiB,EACnC;wBACI,UAAU,EAAE,OAAO;wBACnB,aAAa,EACT,CAAC,OAAO;4BACR,qBAAqB;4BACrB,oBAAoB;wBACxB,UAAU,EACN,CAAC,OAAO;4BACR,SAAS,KAAK,eAAe;wBACjC,YAAY,EACR,CAAC,OAAO;4BACR,SAAS,KAAK,iBAAiB;qBACtC,CACJ,EACD,GAAG,EAAE,gBAAgB,SAAS,EAAE,EAChC,OAAO,EAAE,cAAc,IAEtB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACd,8BAAM,SAAS,EAAC,qBAAqB,IAChC,SAAS,CACP,CACV,CACC,CACT,CAAC;YACN,CAAC,CAAC,CACA,CACT,CAAC,CACJ,CACJ,CACC,CACd,CAAC;AACN,CAAC"}

package/dist/styles/date-picker.d.ts

@@ -0,0 +1,2 @@
+export declare const ROOT_CLASS_NAME = "uktdatepicker";
+export declare const STYLES: string;

package/dist/styles/date-picker.js

@@ -0,0 +1,62 @@
+export const ROOT_CLASS_NAME = 'uktdatepicker';
+export const STYLES = `
+.${ROOT_CLASS_NAME} {
+    display: flex;
+    box-sizing: border-box;
+    padding: 40px 60px 60px;
+    flex: 1 1 auto;
+    position: relative;
+    max-width: 450px;
+}
+
+.${ROOT_CLASS_NAME}.two-up {
+    max-width: 820px;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow-wrap {
+    position: absolute;
+    top: 30px;
+    left: 0px;
+    display: flex;
+    justify-content: space-between;
+    height: 0px;
+    width: 100%;
+    padding: 0px 60px;
+    box-sizing: border-box;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.disabled {
+    color: #ccc;
+    cursor: default;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow:active {
+    transform: translateY(1px);
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.left-arrow:after,
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "‹";
+    font-size: 24px;
+    line-height: 35px;
+    font-weight: bold;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "›";
+}
+
+.${ROOT_CLASS_NAME}-month-container {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: space-between;
+}
+`;
+//# sourceMappingURL=date-picker.js.map

package/dist/styles/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe;;;;;;;;;GASf,eAAe;;;;GAIf,eAAe;;;;;;;;;;;;GAYf,eAAe;;;;;;;GAOf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;GACf,eAAe;;;;;;;GAOf,eAAe;;;;GAIf,eAAe;;;;;CAKjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/date-picker",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "React component that renders a date picker with the option to choose a range",
     "keywords": [
         "react",

package/src/DatePicker.tsx

@@ -0,0 +1,119 @@
+import { Style } from '@acusti/styling';
+import clsx from 'clsx';
+import * as React from 'react';
+
+import {
+    getMonthAbbreviationFromMonth,
+    getMonthFromDate,
+    getYearFromMonth,
+} from './utils.js';
+import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
+
+import MonthCalendar from './MonthCalendar.js';
+
+export type Props = {
+    className?: string;
+    dateEnd?: Date | string | number;
+    dateStart?: Date | string | number;
+    initialMonth?: number;
+    isTwoUp?: boolean;
+    monthLimitFirst?: number;
+    monthLimitLast?: number;
+    useMonthAbbreviations?: boolean;
+};
+
+const { Fragment, useCallback, useState } = React;
+
+const getAbbreviatedMonthTitle = (month: number) =>
+    `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
+
+export default function DatePicker({
+    className,
+    dateEnd,
+    dateStart,
+    isTwoUp,
+    initialMonth,
+    monthLimitFirst,
+    monthLimitLast,
+    useMonthAbbreviations,
+}: Props) {
+    if (initialMonth == null) {
+        // Use dateStart if it’s set
+        const initialDate = dateStart == null ? new Date() : new Date(dateStart);
+        initialMonth = getMonthFromDate(initialDate);
+        if (isTwoUp && dateStart == null) {
+            initialMonth -= 1;
+        }
+    }
+    const [month, setMonth] = useState(initialMonth);
+    // In two-up view we see 1 more month, so monthLimitLast needs to be 1 less
+    if (isTwoUp && monthLimitLast != null) {
+        monthLimitLast -= 1;
+    }
+
+    const handleClickLeftArrow = useCallback(() => {
+        setMonth((existingMonth) =>
+            monthLimitFirst == null || existingMonth > monthLimitFirst
+                ? existingMonth - 1
+                : existingMonth,
+        );
+    }, [monthLimitFirst]);
+
+    const handleClickRightArrow = useCallback(() => {
+        setMonth((existingMonth) =>
+            monthLimitLast == null || existingMonth < monthLimitLast
+                ? existingMonth + 1
+                : existingMonth,
+        );
+    }, [monthLimitLast]);
+
+    return (
+        <Fragment>
+            <Style>{STYLES}</Style>
+            <div
+                className={clsx(ROOT_CLASS_NAME, className, {
+                    'two-up': isTwoUp,
+                })}
+            >
+                <div className={`${ROOT_CLASS_NAME}-range-arrow-wrap`}>
+                    <div
+                        className={clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
+                            disabled: monthLimitFirst != null && month <= monthLimitFirst,
+                        })}
+                        onClick={handleClickLeftArrow}
+                    />
+                    <div
+                        className={clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
+                            disabled: monthLimitLast != null && month >= monthLimitLast,
+                        })}
+                        onClick={handleClickRightArrow}
+                    />
+                </div>
+                <div className={`${ROOT_CLASS_NAME}-month-container`}>
+                    <MonthCalendar
+                        dateEnd={dateEnd}
+                        dateStart={dateStart}
+                        month={month}
+                        title={
+                            useMonthAbbreviations
+                                ? getAbbreviatedMonthTitle(month)
+                                : undefined
+                        }
+                    />
+                    {isTwoUp ? (
+                        <MonthCalendar
+                            dateEnd={dateEnd}
+                            dateStart={dateStart}
+                            month={month + 1}
+                            title={
+                                useMonthAbbreviations
+                                    ? getAbbreviatedMonthTitle(month + 1)
+                                    : undefined
+                            }
+                        />
+                    ) : null}
+                </div>
+            </div>
+        </Fragment>
+    );
+}

package/src/MonthCalendar.tsx

@@ -7,8 +7,8 @@ import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
 
 export type Props = {
     className?: string;
-    dateRangeStart?: Date | string | number;
-    dateRangeEnd?: Date | string | number;
+    dateStart?: Date | string | number;
+    dateEnd?: Date | string | number;
     month: number; // a unique numerical value representing the number of months since jan 1970
     onChange?: (event: React.SyntheticEvent<HTMLElement>) => void;
     title?: string;
@@ -22,8 +22,8 @@ const DAYS = Array(7).fill(null);
 
 export default function MonthCalendar({
     className,
-    dateRangeEnd,
-    dateRangeStart,
+    dateEnd,
+    dateStart,
     month,
     onChange,
     title,
@@ -41,8 +41,8 @@ export default function MonthCalendar({
     const daySpaces = totalDays + firstDay + spacesAfterLastDay;
 
     const [dateRangeStartDay, dateRangeEndDay]: DateRangeDays = [
-        dateRangeStart,
-        dateRangeEnd,
+        dateStart,
+        dateEnd,
     ].reduce(
         (acc: DateRangeDays, date, index) => {
             if (date != null && !(date instanceof Date)) {
@@ -123,7 +123,7 @@ export default function MonthCalendar({
                                         dateRangeStartDay != null &&
                                         dayNumber > dateRangeStartDay;
                                     const isBeforeDateRangeEnd =
-                                        dateRangeEndDay == null ||
+                                        dateRangeEndDay != null &&
                                         dayNumber < dateRangeEndDay;
 
                                     return (
@@ -133,11 +133,14 @@ export default function MonthCalendar({
                                                 {
                                                     'is-empty': isEmpty,
                                                     'is-selected':
+                                                        !isEmpty &&
                                                         isAfterDateRangeStart &&
                                                         isBeforeDateRangeEnd,
                                                     'end-date':
+                                                        !isEmpty &&
                                                         dayNumber === dateRangeEndDay,
                                                     'start-date':
+                                                        !isEmpty &&
                                                         dayNumber === dateRangeStartDay,
                                                 },
                                             )}

package/src/styles/date-picker.ts

@@ -0,0 +1,62 @@
+export const ROOT_CLASS_NAME = 'uktdatepicker';
+
+export const STYLES = `
+.${ROOT_CLASS_NAME} {
+    display: flex;
+    box-sizing: border-box;
+    padding: 40px 60px 60px;
+    flex: 1 1 auto;
+    position: relative;
+    max-width: 450px;
+}
+
+.${ROOT_CLASS_NAME}.two-up {
+    max-width: 820px;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow-wrap {
+    position: absolute;
+    top: 30px;
+    left: 0px;
+    display: flex;
+    justify-content: space-between;
+    height: 0px;
+    width: 100%;
+    padding: 0px 60px;
+    box-sizing: border-box;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.disabled {
+    color: #ccc;
+    cursor: default;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow:active {
+    transform: translateY(1px);
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.left-arrow:after,
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "‹";
+    font-size: 24px;
+    line-height: 35px;
+    font-weight: bold;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "›";
+}
+
+.${ROOT_CLASS_NAME}-month-container {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: space-between;
+}
+`;