@transferwise/components 46.27.0 → 46.29.0

package/src/dateLookup/dateTrigger/{DateTrigger.js → DateTrigger.tsx}

@@ -1,17 +1,26 @@
 import { formatDate } from '@transferwise/formatting';
-import { isKey } from '@transferwise/neptune-validation';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
-import { Size, Position } from '../../common';
+import { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';
 import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
 
-const DateTrigger = ({
+interface DateTriggerProps {
+  selectedDate: Date | null;
+  size: SizeSmall | SizeMedium | SizeLarge;
+  placeholder: string;
+  label: string;
+  monthFormat: 'short' | 'long';
+  disabled: boolean;
+  onClick: () => void;
+  onClear?: () => void;
+}
+
+const DateTrigger: React.FC<DateTriggerProps> = ({
   selectedDate,
-  size,
+  size = Size.MEDIUM,
   placeholder,
   label,
   monthFormat,
@@ -21,14 +30,6 @@ const DateTrigger = ({
 }) => {
   const { locale, formatMessage } = useIntl();
 
-  const handleKeyDown = (event) => {
-    if (isKey({ keyType: 'Space', event: event }) || isKey({ keyType: 'Enter', event: event })) {
-      event.stopPropagation();
-      event.preventDefault();
-      onClear();
-    }
-  };
-
   return (
     <>
       <button
@@ -64,12 +65,11 @@ const DateTrigger = ({
               className={`clear-btn clear-btn--${size}`}
               aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}
               size={Size.SMALL}
-              onClick={(event) => {
+              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
                 event.stopPropagation();
                 event.preventDefault();
                 onClear();
               }}
-              onKeyPress={handleKeyDown}
             />
           </span>
         </>
@@ -78,21 +78,4 @@ const DateTrigger = ({
   );
 };
 
-DateTrigger.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  placeholder: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  monthFormat: PropTypes.oneOf(['short', 'long']).isRequired,
-  disabled: PropTypes.bool.isRequired,
-  onClick: PropTypes.func,
-  onClear: PropTypes.func,
-};
-
-DateTrigger.defaultProps = {
-  selectedDate: null,
-  size: Size.MEDIUM,
-  onClear: undefined,
-};
-
 export default DateTrigger;

package/src/dateLookup/dayCalendar/{DayCalendar.js → DayCalendar.tsx}

@@ -1,7 +1,6 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { MonthFormat } from '../../common';
 import messages from '../DateLookup.messages';
@@ -9,7 +8,19 @@ import DateHeader from '../dateHeader';
 
 import DayCalendarTable from './table';
 
-class DayCalendar extends PureComponent {
+interface DayCalendarProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewMonth: number;
+  viewYear: number;
+  monthFormat: `${MonthFormat}`;
+  onSelect: (date: Date) => void;
+  onLabelClick: () => void;
+  onViewDateUpdate: (date: { month: number; year: number }) => void;
+}
+
+class DayCalendar extends PureComponent<DayCalendarProps> {
   selectPreviousMonth = () => {
     const { viewMonth, viewYear } = this.props;
     this.props.onViewDateUpdate({
@@ -56,22 +67,4 @@ class DayCalendar extends PureComponent {
   }
 }
 
-DayCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewMonth: PropTypes.number.isRequired,
-  viewYear: PropTypes.number.isRequired,
-  monthFormat: PropTypes.oneOf([MonthFormat.LONG, MonthFormat.SHORT]).isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onLabelClick: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired,
-};
-
-DayCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(DayCalendar);

package/src/dateLookup/dayCalendar/table/{DayCalendarTable.js → DayCalendarTable.tsx}

@@ -1,16 +1,24 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { getDayNames, isWithinRange } from '../../../common/dateUtils';
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import { getStartOfDay } from '../../getStartOfDay';
 import TableLink from '../../tableLink';
 
-const SHORT_DAY_FORMAT = { day: 'numeric' };
+const SHORT_DAY_FORMAT: Intl.DateTimeFormatOptions = { day: 'numeric' };
 
-class DayCalendarTable extends PureComponent {
+interface DayCalendarTableProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewMonth: number;
+  viewYear: number;
+  onSelect: (date: Date) => void;
+}
+
+class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
   getTableStructure = () => {
     const { viewMonth, viewYear } = this.props;
     let firstDayOfMonth = new Date(viewYear, viewMonth, 1).getDay();
@@ -20,13 +28,13 @@ class DayCalendarTable extends PureComponent {
     }
     const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
 
-    let week = [];
-    const weeks = [];
+    let week: number[] = [];
+    const weeks: number[][] = [];
     let i;
 
     // Pad first week
     for (i = 1; i < firstDayOfMonth; i += 1) {
-      week.push(false);
+      week.push(-1);
     }
     // Fill in days
     for (i = 1; i <= daysInMonth; i += 1) {
@@ -39,7 +47,7 @@ class DayCalendarTable extends PureComponent {
     if (week.length > 0) {
       // Pad last week
       for (i = week.length; i < 7; i += 1) {
-        week.push(false);
+        week.push(-1);
       }
       weeks.push(week);
     }
@@ -50,29 +58,29 @@ class DayCalendarTable extends PureComponent {
   daysShort = getDayNames(this.props.intl.locale, 'narrow');
   daysLong = getDayNames(this.props.intl.locale, 'long');
 
-  selectDay = (day) => {
+  selectDay = (day: number) => {
     const { viewMonth, viewYear, onSelect } = this.props;
     onSelect(new Date(viewYear, viewMonth, day));
   };
 
-  isDisabled = (day) => {
+  isDisabled = (day: number) => {
     const { min, max, viewMonth, viewYear } = this.props;
     const date = new Date(viewYear, viewMonth, day);
 
     return !isWithinRange(date, min, max);
   };
 
-  isActive = (day) => {
+  isActive = (day: number) => {
     const { selectedDate, viewMonth, viewYear } = this.props;
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
 
-  isToday = (day) => {
+  isToday = (day: number) => {
     const { viewMonth, viewYear } = this.props;
     return Number(getStartOfDay(new Date())) === Number(new Date(viewYear, viewMonth, day));
   };
 
-  getAutofocusDay = (weeks) => {
+  getAutofocusDay = (weeks: number[][]) => {
     const days = weeks.flatMap((week) => week);
     return getFocusableTime({
       isActive: this.isActive,
@@ -83,13 +91,9 @@ class DayCalendarTable extends PureComponent {
   };
 
   render() {
-    const {
-      viewMonth,
-      viewYear,
-      intl: { locale },
-    } = this.props;
+    const { viewMonth, viewYear, intl } = this.props;
     const weeks = this.getTableStructure();
-    let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
+    const autoFocusDay = this.getAutofocusDay(weeks);
     return (
       <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
         <thead>
@@ -119,17 +123,17 @@ class DayCalendarTable extends PureComponent {
             <tr key={weekIndex}>
               {week.map((day, dayIndex) => (
                 <td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>
-                  {day && (
+                  {day !== -1 && (
                     <TableLink
                       item={day}
                       type="day"
                       title={formatDate(
                         new Date(viewYear, viewMonth, day),
-                        locale,
+                        intl.locale,
                         SHORT_DAY_FORMAT,
                       )}
                       autofocus={day === autoFocusDay}
-                      longTitle={formatDate(new Date(viewYear, viewMonth, day), locale)}
+                      longTitle={formatDate(new Date(viewYear, viewMonth, day), intl.locale)}
                       active={this.isActive(day)}
                       disabled={this.isDisabled(day)}
                       today={this.isToday(day)}
@@ -147,19 +151,4 @@ class DayCalendarTable extends PureComponent {
   }
 }
 
-DayCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewMonth: PropTypes.number.isRequired,
-  viewYear: PropTypes.number.isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-DayCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(DayCalendarTable);

package/src/dateLookup/getStartOfDay/{getStartOfDay.js → getStartOfDay.tsx}

@@ -2,7 +2,7 @@
 // getStartOfDay(new Date('1995-01-01')) in Los Angeles returns 31 Dec 1994, but in
 // in Singapore it is 1 Jan 1995.
 // You might want to use/implement `getUTCStartOfDay` if you want it to be 1995 in any timezone
-export function getStartOfDay(date) {
+export function getStartOfDay(date: Date | null) {
   if (!date) {
     return null;
   }

package/src/dateLookup/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DateLookup';
+export type { DateLookupProps } from './DateLookup';

package/src/dateLookup/monthCalendar/{MonthCalendar.js → MonthCalendar.tsx}

@@ -1,15 +1,25 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import MonthCalendarTable from './table';
 
-class MonthCalendar extends PureComponent {
-  onMonthSelect = (month) => {
+interface MonthCalendarProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: () => void;
+  onLabelClick: () => void;
+  onViewDateUpdate: (date: { year?: number; month?: number }) => void;
+}
+
+class MonthCalendar extends PureComponent<MonthCalendarProps> {
+  onMonthSelect = (month: number) => {
     this.props.onViewDateUpdate({ month });
     this.props.onSelect();
   };
@@ -42,7 +52,11 @@ class MonthCalendar extends PureComponent {
           onNextClick={this.selectNextYear}
         />
         <MonthCalendarTable
-          {...{ selectedDate, min, max, viewYear, placeholder }}
+          selectedDate={selectedDate}
+          min={min}
+          max={max}
+          viewYear={viewYear}
+          placeholder={placeholder}
           onSelect={this.onMonthSelect}
         />
       </>
@@ -50,21 +64,4 @@ class MonthCalendar extends PureComponent {
   }
 }
 
-MonthCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onLabelClick: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired,
-};
-
-MonthCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(MonthCalendar);

package/src/dateLookup/monthCalendar/table/{MonthCalendarTable.js → MonthCalendarTable.tsx}

@@ -1,17 +1,33 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
+interface MonthCalendarTableProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: (date: number) => void;
+}
+
 const ROWS = 3;
 const COLS = 4;
-const MONTH_ONLY_FORMAT = { month: 'short' };
+const MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };
 
-const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
+const MonthCalendarTable = ({
+  selectedDate,
+  min,
+  max,
+  viewYear,
+  placeholder,
+  onSelect,
+}: MonthCalendarTableProps) => {
   const { locale } = useIntl();
-  const getLink = (month) => {
+
+  const getLink = (month: number) => {
     return (
       <TableLink
         item={month}
@@ -26,17 +42,19 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
     );
   };
 
-  const isActive = (month) => {
-    return (
-      selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear()
+  const isActive = (month: number) => {
+    return !!(
+      selectedDate &&
+      month === selectedDate.getMonth() &&
+      viewYear === selectedDate.getFullYear()
     );
   };
 
-  const isThisMonth = (month) => {
+  const isThisMonth = (month: number) => {
     return viewYear === new Date().getFullYear() && month === new Date().getMonth();
   };
 
-  const isDisabled = (month) => {
+  const isDisabled = (month: number) => {
     const date = new Date(viewYear, month);
     return !!(
       (min && date < new Date(min.getFullYear(), min.getMonth())) ||
@@ -45,7 +63,7 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
   };
 
   const autofocusMonth = (() => {
-    const months = [...new Array(ROWS * COLS)].map((_, index) => index);
+    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);
     return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });
   })();
 
@@ -53,37 +71,20 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
     <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
       <thead className="sr-only">
         <tr>
-          <th colSpan="3">{placeholder}</th>
+          <th colSpan={COLS}>{placeholder}</th>
         </tr>
       </thead>
       <tbody>
-        {/* eslint-disable react/no-array-index-key */}
-        {[...new Array(ROWS)].map((row, rowIndex) => (
+        {Array.from({ length: ROWS }, (_, rowIndex) => (
           <tr key={rowIndex}>
-            {[...new Array(COLS)].map((col, colIndex) => (
+            {Array.from({ length: COLS }, (_, colIndex) => (
               <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>
             ))}
           </tr>
         ))}
-        {/* eslint-enable react/no-array-index-key */}
       </tbody>
     </table>
   );
 };
 
-MonthCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-MonthCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default MonthCalendarTable;

package/src/dateLookup/yearCalendar/{YearCalendar.js → YearCalendar.tsx}

@@ -1,14 +1,23 @@
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import YearCalendarTable from './table';
 
-class YearCalendar extends PureComponent {
-  onYearSelect = (year) => {
+interface YearCalendarProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: () => void;
+  onViewDateUpdate: (date: { year: number }) => void;
+}
+
+class YearCalendar extends PureComponent<YearCalendarProps> {
+  onYearSelect = (year: number) => {
     this.props.onViewDateUpdate({ year });
     this.props.onSelect();
   };
@@ -38,7 +47,11 @@ class YearCalendar extends PureComponent {
           onNextClick={this.selectNextYears}
         />
         <YearCalendarTable
-          {...{ selectedDate, min, max, viewYear, placeholder }}
+          selectedDate={selectedDate}
+          min={min}
+          max={max}
+          viewYear={viewYear}
+          placeholder={placeholder}
           onSelect={this.onYearSelect}
         />
       </>
@@ -46,20 +59,4 @@ class YearCalendar extends PureComponent {
   }
 }
 
-YearCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired,
-};
-
-YearCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(YearCalendar);

package/src/dateLookup/yearCalendar/table/{YearCalendarTable.js → YearCalendarTable.tsx}

@@ -1,18 +1,33 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
+interface YearCalendarTableProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: (year: number) => void;
+}
+
 const ROWS = 5;
 const COLS = 4;
-const YEAR_ONLY_FORMAT = { year: 'numeric' };
+const YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };
 
-const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
+const YearCalendarTable = ({
+  selectedDate,
+  min,
+  max,
+  viewYear,
+  placeholder,
+  onSelect,
+}: YearCalendarTableProps) => {
   const { locale } = useIntl();
   const startYear = viewYear - (viewYear % 20);
-  const getLink = (year) => {
+  const getLink = (year: number) => {
     return (
       <TableLink
         item={year}
@@ -27,20 +42,20 @@ const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSe
     );
   };
 
-  const isActive = (year) => {
+  const isActive = (year: number) => {
     return !!(selectedDate && year === selectedDate.getFullYear());
   };
 
-  const isThisYear = (year) => {
+  const isThisYear = (year: number) => {
     return year === new Date().getFullYear();
   };
 
-  const isDisabled = (year) => {
+  const isDisabled = (year: number) => {
     return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));
   };
 
   const autofocusYear = (() => {
-    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
+    const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);
     return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });
   })();
 
@@ -48,37 +63,20 @@ const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSe
     <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
       <thead className="sr-only">
         <tr>
-          <th colSpan="4">{placeholder}</th>
+          <th colSpan={COLS}>{placeholder}</th>
         </tr>
       </thead>
       <tbody>
-        {/* eslint-disable react/no-array-index-key */}
-        {[...new Array(ROWS)].map((row, rowIndex) => (
+        {Array.from({ length: ROWS }, (_, rowIndex) => (
           <tr key={rowIndex}>
-            {[...new Array(COLS)].map((col, colIndex) => (
+            {Array.from({ length: COLS }, (_, colIndex) => (
               <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>
             ))}
           </tr>
         ))}
-        {/* eslint-enable react/no-array-index-key */}
       </tbody>
     </table>
   );
 };
 
-YearCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-YearCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default YearCalendarTable;

package/src/decision/Decision.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable testing-library/no-render-in-setup */
 import '@testing-library/jest-dom';
 
 import Avatar from '../avatar';

package/src/dimmer/Dimmer.tsx

@@ -99,12 +99,16 @@ const Dimmer = ({
   const onEnter = () => {
     setHasNotExited(true);
 
-    dimmerReference.current && dimmerManager.add(dimmerReference.current);
+    if (dimmerReference.current) {
+      dimmerManager.add(dimmerReference.current);
+    }
   };
   const onExited = () => {
     setHasNotExited(false);
 
-    dimmerReference.current && dimmerManager.remove(dimmerReference.current);
+    if (dimmerReference.current) {
+      dimmerManager.remove(dimmerReference.current);
+    }
   };
 
   useEffect(() => {

package/src/i18n/th.json

@@ -4,10 +4,10 @@
   "neptune.ClearButton.ariaLabel": "ล้าง",
   "neptune.CloseButton.ariaLabel": "ปิด",
   "neptune.DateInput.day.label": "วัน",
-  "neptune.DateInput.day.placeholder": "DD",
+  "neptune.DateInput.day.placeholder": "วัน",
   "neptune.DateInput.month.label": "เดือน",
   "neptune.DateInput.year.label": "ปี",
-  "neptune.DateInput.year.placeholder": "YYYY",
+  "neptune.DateInput.year.placeholder": "ปี",
   "neptune.DateLookup.day": "วัน",
   "neptune.DateLookup.goTo20YearView": "ไปที่มุมมอง 20 ปี",
   "neptune.DateLookup.month": "เดือน",