@lumx/react 3.5.2 → 3.5.4-alpha-remove-moment.0

package/index.d.ts

@@ -542,7 +542,7 @@ interface DatePickerProps extends GenericProps {
     /** Default month. */
     defaultMonth?: Date;
     /** Locale (language or region) to use. */
-    locale: string;
+    locale?: string;
     /** Date after which dates can't be selected. */
     maxDate?: Date;
     /** Date before which dates can't be selected. */
@@ -597,7 +597,7 @@ interface DatePickerFieldProps extends GenericProps {
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Locale (language or region) to use. */
-    locale: string;
+    locale?: string;
     /** Date after which dates can't be selected. */
     maxDate?: Date;
     /** Date before which dates can't be selected. */

package/index.js

@@ -5,9 +5,6 @@ import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
 import get from 'lodash/get';
 import isFunction from 'lodash/isFunction';
-import moment$1 from 'moment';
-import range from 'lodash/range';
-import { extendMoment } from 'moment-range';
 import last from 'lodash/last';
 import pull from 'lodash/pull';
 import { createPortal } from 'react-dom';
@@ -23,6 +20,7 @@ import isInteger from 'lodash/isInteger';
 import isObject from 'lodash/isObject';
 import take from 'lodash/take';
 import uniqueId from 'lodash/uniqueId';
+import range from 'lodash/range';
 import chunk from 'lodash/chunk';
 import isUndefined from 'lodash/isUndefined';
 import set from 'lodash/set';
@@ -279,9 +277,9 @@ function commonjsRequire () {
 
 var classnames = createCommonjsModule(function (module) {
 /*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
 */
 /* global define */
 
@@ -289,7 +287,7 @@ var classnames = createCommonjsModule(function (module) {
 
 	var hasOwn = {}.hasOwnProperty;
 
-	function classNames () {
+	function classNames() {
 		var classes = [];
 
 		for (var i = 0; i < arguments.length; i++) {
@@ -300,12 +298,19 @@ var classnames = createCommonjsModule(function (module) {
 
 			if (argType === 'string' || argType === 'number') {
 				classes.push(arg);
-			} else if (Array.isArray(arg) && arg.length) {
-				var inner = classNames.apply(null, arg);
-				if (inner) {
-					classes.push(inner);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
 				}
 			} else if (argType === 'object') {
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					classes.push(arg.toString());
+					continue;
+				}
+
 				for (var key in arg) {
 					if (hasOwn.call(arg, key) && arg[key]) {
 						classes.push(key);
@@ -2019,6 +2024,21 @@ CommentBlock.displayName = COMPONENT_NAME$c;
 CommentBlock.className = CLASSNAME$b;
 CommentBlock.defaultProps = DEFAULT_PROPS$b;
 
+/**
+ * Add a number of months from a date while resetting the day to prevent month length mismatches.
+ */
+function addMonthResetDay(date, monthOffset) {
+  const newDate = new Date(date.getTime());
+  newDate.setDate(1);
+  newDate.setMonth(date.getMonth() + monthOffset);
+  return newDate;
+}
+
+/**
+ * Check if given date is valid.
+ */
+const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime());
+
 /**
  * Component display name.
  */
@@ -2029,56 +2049,169 @@ const COMPONENT_NAME$d = 'DatePicker';
  */
 const CLASSNAME$c = getRootClassName(COMPONENT_NAME$d);
 
-const moment = extendMoment(moment$1);
-const DAYS_PER_WEEK = 7;
 /**
- * Get the list of days in a week based on locale.
- *
- * @param  locale The locale using to generate the order of days in a week.
- * @return The list of days in a week based on locale.
+ * Get current browser locale.
  */
-function getWeekDays(locale) {
-  return range(DAYS_PER_WEEK).map((_, i) => moment().locale(locale).weekday(i));
-}
+const getCurrentLocale = () => {
+  var _navigator$languages;
+  return ((_navigator$languages = navigator.languages) === null || _navigator$languages === void 0 ? void 0 : _navigator$languages[0]) || navigator.language;
+};
 
 /**
- * Get month calendar based on locale and start date.
- *
- * @param  locale        The locale using to generate the order of days in a week.
- * @param  selectedMonth The selected month.
- * @return The list of days in a week based on locale.
+ * Get the language part of a locale code.
+ * ex: `en-us` => `en`
  */
-function getMonthCalendar(locale, selectedMonth) {
-  const firstDayOfMonth = moment(selectedMonth).startOf('month');
-  const endDayOfMonth = moment(selectedMonth).endOf('month');
-  // The first day of the week depends on the locale used. In FR the first day is a monday but in EN the first day is sunday
-  const firstDay = firstDayOfMonth.locale(locale).startOf('week');
-  const monthRange = moment.range(firstDay.toDate(), endDayOfMonth.toDate());
-  return Array.from(monthRange.by('day'));
-}
+const getLocaleLang = locale => locale.split('-')[0];
+
+/** Get first day of week for locale from the browser API */
+const getFromBrowser = locale => {
+  try {
+    var _localeMetadata$getWe;
+    const localeMetadata = new Intl.Locale(locale);
+    const {
+      firstDay
+    } = ((_localeMetadata$getWe = localeMetadata.getWeekInfo) === null || _localeMetadata$getWe === void 0 ? void 0 : _localeMetadata$getWe.call(localeMetadata)) || localeMetadata.weekInfo;
+    // Sunday is represented as `0` in Date.getDay()
+    if (firstDay === 7) return 0;
+    return firstDay;
+  } catch (e) {
+    return undefined;
+  }
+};
+
+/** List first day for each locale (could be removed when all browser implement Locale weekInfo) */
+const FIRST_DAY_FOR_LOCALES = [{
+  // Locales with Sunday as the first day of the week
+  localeRX: /^(af|ar-(dz|eg|sa)|bn|cy|en-(ca|us|za)|fr-ca|gd|he|hi|ja|km|ko|pt-br|te|th|ug|zh-hk)$/i,
+  firstDay: 0
+}, {
+  // Locales with Monday as the first day of the week
+  localeRX: /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
+  firstDay: 1
+}, {
+  // Locales with Saturday as the first day of the week
+  localeRX: /^(ar|fa-ir)$/i,
+  firstDay: 6
+}];
+
+/** Find first day of week for locale from the constant */
+const getFromConstant = locale => {
+  // Search for locale (lang + region)
+  for (const {
+    localeRX,
+    firstDay
+  } of FIRST_DAY_FOR_LOCALES) {
+    if (localeRX.test(locale)) return firstDay;
+  }
+  // Fallback search for locale lang
+  const localeLang = getLocaleLang(locale);
+  if (localeLang !== locale) {
+    return getFromConstant(localeLang);
+  }
+  return undefined;
+};
 
 /**
- * Get month calendar based on locale and start date.
- * Each day is annotated to know if they are displayed and/or clickable.
- *
- * @param  locale        The locale using to generate the order of days in a week.
- * @param  minDate       The first selectable date.
- * @param  maxDate       The last selectable date.
- * @param  selectedMonth The selected month.
- * @return The list of days in a week based on locale.
+ * Get first day of the week for the given locale code (language + region).
  */
-function getAnnotatedMonthCalendar(locale, minDate, maxDate, selectedMonth) {
-  const month = moment(selectedMonth).locale(locale).month();
-  const clickableRange = moment.range(minDate, maxDate);
-  return getMonthCalendar(locale, selectedMonth).map(date => {
-    return {
-      date,
-      isClickable: clickableRange.contains(date),
-      isDisplayed: date.month() === month,
-      isToday: date.isSame(moment(), 'day')
+const getFirstDayOfWeek = locale => {
+  // Get from browser API
+  const firstDay = getFromBrowser(locale);
+  if (firstDay !== undefined) return firstDay;
+
+  // Get from constant
+  return getFromConstant(locale);
+};
+
+const DAYS_PER_WEEK = 7;
+
+/**
+ * List week days (based on locale) with the week day letter (ex: "M" for "Monday") and week day number
+ * (0-based index starting on Sunday).
+ */
+const getWeekDays = function () {
+  var _getFirstDayOfWeek;
+  let locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getCurrentLocale();
+  let referenceDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Date();
+  const iterDate = new Date(referenceDate.getTime());
+  const firstDay = (_getFirstDayOfWeek = getFirstDayOfWeek(locale)) !== null && _getFirstDayOfWeek !== void 0 ? _getFirstDayOfWeek : 1;
+
+  // Go to start of the week
+  const offset = firstDay - iterDate.getDay();
+  iterDate.setDate(iterDate.getDate() + offset);
+
+  // Iterate through the days of the week
+  const weekDays = [];
+  for (let i = 0; i < DAYS_PER_WEEK; i++) {
+    // Single letter week day (ex: "M" for "Monday", "L" for "Lundi", etc.)
+    const letter = iterDate.toLocaleDateString(locale, {
+      weekday: 'narrow'
+    });
+    // Day number (1-based index starting on Monday)
+    const number = iterDate.getDay();
+    weekDays.push({
+      letter,
+      number
+    });
+    iterDate.setDate(iterDate.getDate() + 1);
+  }
+  return weekDays;
+};
+
+/**
+ * Get month calendar.
+ * A list of weeks with days indexed by week day number
+ */
+const getMonthCalendar = function () {
+  let locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getCurrentLocale();
+  let referenceDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Date();
+  let rangeMinDate = arguments.length > 2 ? arguments[2] : undefined;
+  let rangeMaxDate = arguments.length > 3 ? arguments[3] : undefined;
+  const month = referenceDate.getMonth();
+  const iterDate = new Date(referenceDate.getTime());
+  iterDate.setDate(1);
+  const weekDays = getWeekDays(locale, referenceDate);
+  const lastDayOfWeek = last(weekDays);
+  const weeks = [];
+  let week = {};
+  while (iterDate.getMonth() === month) {
+    const weekDayNumber = iterDate.getDay();
+    const day = {
+      date: new Date(iterDate.getTime())
     };
-  });
-}
+
+    // If a range is specified, check if the day is out of range.
+    if (rangeMinDate && iterDate <= rangeMinDate || rangeMaxDate && iterDate >= rangeMaxDate) {
+      day.isOutOfRange = true;
+    }
+    week[weekDayNumber] = day;
+    if (weekDayNumber === lastDayOfWeek.number) {
+      weeks.push(week);
+      week = {};
+    }
+    iterDate.setDate(iterDate.getDate() + 1);
+  }
+  if (Object.keys(week).length) weeks.push(week);
+  return {
+    weeks,
+    weekDays
+  };
+};
+
+/**
+ * Check `date1` is on the same day as `date2`.
+ */
+const isSameDay = (date1, date2) => date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+
+const formatMonthYear = (date, locale) => date.toLocaleDateString(locale, {
+  year: 'numeric',
+  month: 'long'
+});
+
+/** Format date month day number */
+const formatDayNumber = (date, locale) => date.toLocaleDateString(locale, {
+  day: 'numeric'
+});
 
 /**
  * Defines the props of the component.
@@ -2098,7 +2231,7 @@ const COMPONENT_NAME$e = 'DatePickerControlled';
  */
 const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    locale,
+    locale = getCurrentLocale(),
     maxDate,
     minDate,
     nextButtonProps,
@@ -2110,12 +2243,12 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
     todayOrSelectedDateRef,
     value
   } = props;
-  const days = React.useMemo(() => {
-    return getAnnotatedMonthCalendar(locale, minDate, maxDate, moment$1(selectedMonth));
+  const {
+    weeks,
+    weekDays
+  } = React.useMemo(() => {
+    return getMonthCalendar(locale, selectedMonth, minDate, maxDate);
   }, [locale, minDate, maxDate, selectedMonth]);
-  const weekDays = React.useMemo(() => {
-    return getWeekDays(locale);
-  }, [locale]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: `${CLASSNAME$c}`
@@ -2133,37 +2266,46 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
     })),
     label: /*#__PURE__*/React.createElement("span", {
       className: `${CLASSNAME$c}__month`
-    }, moment$1(selectedMonth).locale(locale).format('MMMM YYYY'))
+    }, formatMonthYear(selectedMonth, locale))
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$c}__calendar`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$c}__week-days ${CLASSNAME$c}__days-wrapper`
-  }, weekDays.map(weekDay => /*#__PURE__*/React.createElement("div", {
-    key: weekDay.unix(),
-    className: `${CLASSNAME$c}__day-wrapper`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME$c}__week-day`
-  }, weekDay.format('dddd').slice(0, 1).toLocaleUpperCase())))), /*#__PURE__*/React.createElement("div", {
+  }, weekDays.map(_ref => {
+    let {
+      letter,
+      number
+    } = _ref;
+    return /*#__PURE__*/React.createElement("div", {
+      key: number,
+      className: `${CLASSNAME$c}__day-wrapper`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `${CLASSNAME$c}__week-day`
+    }, letter.toLocaleUpperCase()));
+  })), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$c}__month-days ${CLASSNAME$c}__days-wrapper`
-  }, days.map(annotatedDate => {
-    if (annotatedDate.isDisplayed) {
+  }, weeks.flatMap((week, weekIndex) => {
+    return weekDays.map((weekDay, dayIndex) => {
+      const {
+        date,
+        isOutOfRange
+      } = week[weekDay.number] || {};
+      const key = `${weekIndex}-${dayIndex}`;
+      const isToday = !isOutOfRange && date && isSameDay(date, new Date());
+      const isSelected = date && value && isSameDay(value, date);
       return /*#__PURE__*/React.createElement("div", {
-        key: annotatedDate.date.unix(),
+        key: key,
         className: `${CLASSNAME$c}__day-wrapper`
-      }, /*#__PURE__*/React.createElement("button", {
-        ref: value && annotatedDate.date.isSame(value, 'day') || !value && annotatedDate.isToday ? todayOrSelectedDateRef : null,
+      }, date && /*#__PURE__*/React.createElement("button", {
+        ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
         className: classnames(`${CLASSNAME$c}__month-day`, {
-          [`${CLASSNAME$c}__month-day--is-selected`]: value && annotatedDate.date.isSame(value, 'day'),
-          [`${CLASSNAME$c}__month-day--is-today`]: annotatedDate.isClickable && annotatedDate.isToday
+          [`${CLASSNAME$c}__month-day--is-selected`]: isSelected,
+          [`${CLASSNAME$c}__month-day--is-today`]: isToday
         }),
-        disabled: !annotatedDate.isClickable,
+        disabled: isOutOfRange,
         type: "button",
-        onClick: () => onChange(moment$1(annotatedDate.date).toDate())
-      }, /*#__PURE__*/React.createElement("span", null, annotatedDate.date.format('DD'))));
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      key: annotatedDate.date.unix(),
-      className: `${CLASSNAME$c}__day-wrapper`
+        onClick: () => onChange(date)
+      }, /*#__PURE__*/React.createElement("span", null, formatDayNumber(date, locale))));
     });
   }))));
 });
@@ -2186,17 +2328,12 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
       onChange
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$f);
-  let castedValue;
-  if (value) {
-    castedValue = moment$1(value);
-  } else if (defaultMonth) {
-    castedValue = moment$1(defaultMonth);
-  }
-  if (castedValue && !castedValue.isValid()) {
+  let referenceDate = value || defaultMonth || new Date();
+  if (!isDateValid(referenceDate)) {
     // eslint-disable-next-line no-console
-    console.warn(`[@lumx/react/DatePicker] Invalid date provided ${castedValue}`);
+    console.warn(`[@lumx/react/DatePicker] Invalid date provided ${referenceDate}`);
+    referenceDate = new Date();
   }
-  const selectedDay = castedValue && castedValue.isValid() ? castedValue : moment$1();
   const [monthOffset, setMonthOffset] = useState(0);
   const setPrevMonth = () => setMonthOffset(monthOffset - 1);
   const setNextMonth = () => setMonthOffset(monthOffset + 1);
@@ -2204,7 +2341,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
     onChange(newDate);
     setMonthOffset(0);
   };
-  const selectedMonth = moment$1(selectedDay).locale(locale).add(monthOffset, 'months').toDate();
+  const selectedMonth = addMonthResetDay(referenceDate, monthOffset);
   return /*#__PURE__*/React.createElement(DatePickerControlled, _extends({
     ref: ref
   }, forwardedProps, {
@@ -2362,6 +2499,15 @@ function useFocusTrap(focusZoneElement, focusElement) {
   }, [focusElement, focusZoneElement]);
 }
 
+/**
+ * Standard date format based on locale.
+ */
+const formatDate = (value, locale) => value.toLocaleDateString(locale, {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+});
+
 const _excluded$g = ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
 
 /**
@@ -2385,7 +2531,7 @@ const DatePickerField = /*#__PURE__*/forwardRef((props, ref) => {
       defaultMonth,
       disabled,
       isDisabled = disabled,
-      locale,
+      locale = getCurrentLocale(),
       maxDate,
       minDate,
       name,
@@ -2429,7 +2575,7 @@ const DatePickerField = /*#__PURE__*/forwardRef((props, ref) => {
     name: name,
     forceFocusStyle: isOpen,
     textFieldRef: anchorRef,
-    value: value ? moment$1(value).locale(locale).format('LL') : '',
+    value: value ? formatDate(value, locale) : '',
     onClick: toggleSimpleMenu,
     onChange: onTextFieldChange,
     onKeyPress: handleKeyboardNav,