@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

package/raw/components/molecules/datePicker/index.tsx

@@ -0,0 +1,361 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { format } from 'date-fns'
+import DayPickerInput from 'react-day-picker/DayPickerInput'
+import { Modifier } from 'react-day-picker/types/Modifiers'
+
+import { StyledCaptionWrapper, StyledPickerContainer } from './index.styled'
+
+// type DisabledDays = {
+//   before?: Date
+//   after?: Date
+// }
+
+export type Props = {
+  alignRight?: boolean
+  locale?:
+    | 'vi-VN'
+    | 'id-ID'
+    | 'ms-MY'
+    | 'km-KH'
+    | 'en-PH'
+    | 'th-TH'
+    | 'my-MM'
+    | 'zh-TW'
+    | 'hi-IN'
+
+  placeholder?: string
+  displayDateFormat?: string
+  pickedDate?: Date | Array<Date>
+  customInput?: React.FunctionComponent<DatePickerCustomInputProps>
+  onChange?: (d: Date) => void
+  className?: string
+  isStatic?: boolean
+  disabledDays?: Modifier | Modifier[]
+  modifiers?: {
+    start?: Date
+    end?: Date
+  }
+  UnHideOnClickOutside?: boolean
+  initialMonth?: Date
+}
+
+export type DatePickerCustomInputProps = {
+  onClick: () => void
+}
+
+const MONTHS_TRANSLATION = {
+  'vi-VN': [
+    'Tháng 1',
+    'Tháng 2',
+    'Tháng 3',
+    'Tháng 4',
+    'Tháng 5',
+    'Tháng 6',
+    'Tháng 7',
+    'Tháng 8',
+    'Tháng 9',
+    'Tháng 10',
+    'Tháng 11',
+    'Tháng 12',
+  ],
+  'id-ID': [
+    'Januari',
+    'Februari',
+    'Maret',
+    'April',
+    'Mei',
+    'Juni',
+    'Juli',
+    'Agustus',
+    'September',
+    'Oktober',
+    'November',
+    'Desember',
+  ],
+  'ms-MY': [
+    'Januari',
+    'Februari',
+    'Maret',
+    'April',
+    'Mei',
+    'Juni',
+    'Juli',
+    'Agustus',
+    'September',
+    'Oktober',
+    'November',
+    'Desember',
+  ],
+  'km-KH': [
+    'មករា',
+    'ខែកុម្ភៈ',
+    'មីនា',
+    'ខែមេសា',
+    'ឧសភា',
+    'មិថុនា',
+    'ខែកក្កដា',
+    'សីហា',
+    'ខែកញ្ញា',
+    'តុលា',
+    'វិច្ឆិកា',
+    'ធ្នូ',
+  ],
+  'en-PH': [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  'th-TH': [
+    'มกราคม',
+    'กุมภาพันธ์',
+    'มีนาคม',
+    'เมษายน',
+    'อาจ',
+    'มิถุนายน',
+    'กรกฎาคม',
+    'สิงหาคม',
+    'กันยายน',
+    'ตุลาคม',
+    'พฤศจิกายน',
+    'ธันวาคม',
+  ],
+  'my-MM': [
+    'ဇန်နဝါရီလ',
+    'ဖေဖော်ဝါရီလ',
+    'မတ်လ',
+    'ပြီလ',
+    'မေလ',
+    'ဇွန',
+    'ဇူလိုင်လ',
+    'သြဂုတ်လ',
+    'စက်တင်ဘာ',
+    'အောက်တိုဘာ',
+    'နိုဝင်ဘာ',
+    'ဒီဇင်ဘာ',
+  ],
+  'zh-TW': [
+    '一月',
+    '二月',
+    '三月',
+    '四月',
+    '五月',
+    '六月',
+    '七月',
+    '八月',
+    '九月',
+    '十月',
+    '十一月',
+    '十二月',
+  ],
+  'hi-IN': [
+    'जनवरी',
+    'फ़रवरी',
+    'जुलूस',
+    'अप्रैल',
+    'मई',
+    'जून',
+    'जुलाई',
+    'अगस्त',
+    'सितंबर',
+    'अक्टूबर',
+    'नवंबर',
+    'दिसंबर',
+  ],
+}
+
+const DatePicker = ({
+  alignRight = true,
+  placeholder,
+  displayDateFormat,
+  onChange,
+  customInput: CustomInput,
+  pickedDate,
+  className,
+  isStatic,
+  disabledDays,
+  modifiers,
+  UnHideOnClickOutside,
+  initialMonth,
+  locale = 'en-PH',
+}: Props) => {
+  const isDatePickerShown = useRef(false)
+  const dateFormatter = format
+  const [month, setMonth] = useState(initialMonth || new Date())
+
+  const datePickerContainer = useRef<HTMLDivElement>(null)
+  const datePicker = useRef<DayPickerInput>(null)
+  const defaultDateFormatString = 'yyyy-MM-dd'
+  const monthLabels = MONTHS_TRANSLATION[locale]
+
+  const handleDaysSelect = (day: Date) => {
+    datePicker.current && !isStatic && datePicker.current.hideDayPicker()
+    onChange && onChange(day)
+  }
+
+  const handleDayChanged = (selectedDay: Date) => {
+    handleDaysSelect(selectedDay)
+  }
+
+  const formatPickerDate = (date: Date, format: string) => {
+    return dateFormatter(date, format)
+  }
+
+  const handleDateClick = (e: MouseEvent) => {
+    if (UnHideOnClickOutside) return
+    if (
+      !datePickerContainer.current ||
+      !datePickerContainer.current.contains(e.target as Node)
+    ) {
+      datePicker.current && datePicker.current.hideDayPicker()
+    }
+  }
+
+  // customise the drop downs for Month and year
+  const currentYear = new Date().getFullYear()
+  const fromMonth = new Date(currentYear - 150, 0)
+  const toMonth = new Date(currentYear + 1, 0)
+
+  const YearMonthForm = ({
+    date,
+    // localeUtils,
+    onChange,
+    monthLabels,
+  }: {
+    date: Date
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // localeUtils: any
+    onChange: (d: Date) => void
+    monthLabels: string[]
+  }) => {
+    // const months = localeUtils.getMonths()
+
+    const years = []
+    for (let i = toMonth.getFullYear(); i >= fromMonth.getFullYear(); i -= 1) {
+      years.push(i)
+    }
+
+    const handleChange = function handleChange(
+      e: React.ChangeEvent<HTMLSelectElement>,
+    ) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const { year, month } = e.target.form as any
+      onChange(new Date(year.value, month.value))
+    }
+
+    return (
+      <div className="DayPicker-Caption">
+        <StyledCaptionWrapper>
+          <select name="month" onChange={handleChange} value={date.getMonth()}>
+            {monthLabels.map((month: string, i: number) => (
+              <option key={month} value={i}>
+                {month}
+              </option>
+            ))}
+          </select>
+          <select
+            name="year"
+            onChange={handleChange}
+            value={date.getFullYear()}
+          >
+            {years.map((year) => (
+              <option key={year} value={year}>
+                {year}
+              </option>
+            ))}
+          </select>
+        </StyledCaptionWrapper>
+      </div>
+    )
+  }
+
+  const CaptionElement = ({
+    date,
+    localeUtils,
+  }: {
+    date: Date
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    localeUtils?: any
+  }) => {
+    const defaultMonthLabels = localeUtils.getMonths()
+
+    return (
+      <YearMonthForm
+        date={date}
+        // localeUtils={localeUtils}
+        monthLabels={monthLabels || defaultMonthLabels}
+        onChange={setMonth}
+      />
+    )
+  }
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleDateClick, false)
+    return () => {
+      document.removeEventListener('mousedown', handleDateClick, false)
+    }
+  }, [])
+
+  return (
+    <StyledPickerContainer
+      className={className}
+      data-align-right={alignRight}
+      ref={datePickerContainer}
+      data-is-static={isStatic || undefined}
+    >
+      <DayPickerInput
+        ref={datePicker}
+        inputProps={{
+          readOnly: true,
+        }}
+        keepFocus={false}
+        classNames={{
+          container: 'pickerContainer',
+          overlayWrapper: 'pickerOverlayWrapper',
+          overlay: 'pickerOverlay',
+        }}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        component={
+          CustomInput &&
+          React.forwardRef((props: DatePickerCustomInputProps, _ref: any) => (
+            <CustomInput {...props} />
+          ))
+        }
+        onDayPickerHide={() => {
+          isDatePickerShown.current = false
+        }}
+        onDayPickerShow={() => {
+          isDatePickerShown.current = true
+        }}
+        dayPickerProps={{
+          month: month,
+          className: 'picker',
+          selectedDays: pickedDate,
+          canChangeMonth: true,
+          enableOutsideDaysClick: isStatic ? false : true,
+          firstDayOfWeek: 1,
+          captionElement: CaptionElement,
+          disabledDays: disabledDays || undefined,
+          modifiers: modifiers,
+        }}
+        format={displayDateFormat || defaultDateFormatString}
+        formatDate={formatPickerDate}
+        hideOnDayClick={isStatic ? false : true}
+        placeholder={placeholder || ''}
+        onDayChange={handleDayChanged}
+        showOverlay={isStatic}
+      />
+    </StyledPickerContainer>
+  )
+}
+
+export { DatePicker }

package/raw/components/molecules/dateRangePicker/calendar/index.styled.ts

@@ -0,0 +1,122 @@
+import { MediaQueries, ThemeProps } from 'src/core'
+import styled from 'styled-components'
+
+export const StyledCalendarWrapper = styled.div`
+  flex: 1;
+`
+
+export const StyledCalendarCellsWrapper = styled.div`
+  padding: 0 10px;
+`
+
+export const StyledCalendarHead = styled.div`
+  display: flex;
+  height: 80px;
+  align-items: center;
+  .calendar-month {
+    font-size: 16px;
+    flex: 1;
+    text-align: center;
+    strong {
+      margin-left: 5px;
+    }
+  }
+  ${MediaQueries.mbDown} {
+    height: 70px;
+  }
+`
+
+export const StyledCalendarGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+`
+
+export const StyledCalendarDaysOfWeek = styled(StyledCalendarGrid)``
+
+export const StyledCalendarCell = styled.div`
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const StyledCalendarDayLabel = styled.div`
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: 1px solid ${(props: ThemeProps) => props.theme.colors.gray800};
+  font-weight: 300;
+`
+
+export const StyledCalendarMonthSeparator = styled.div`
+  width: 18px;
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 16px 0 0 0;
+    width: 1px;
+    left: 50%;
+    right: 50%;
+    background: ${(props: ThemeProps) => props.theme.colors.neutral100};
+  }
+`
+
+export const StyledCalendarDaysWrapper = styled.div`
+  margin: 0 auto;
+`
+
+export const StyledCalendarMonthWrapper = styled.div`
+  position: relative;
+`
+
+export const StyledCalendarDateGrid = styled(StyledCalendarGrid)``
+
+export const StyledCalendarDayNumberWrapper = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 8px;
+  height: 32px;
+  &[data-is-disabled='true'] {
+    opacity: 0.3;
+  }
+`
+
+export const StyledCalendarDayNumber = styled.div`
+  position: relative;
+  font-weight: 600;
+  ${MediaQueries.mbDown} {
+    width: 32px;
+    height: 32px;
+  }
+  ${MediaQueries.mbUp} {
+    width: 36px;
+    height: 36px;
+  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  [data-is-disabled='true'] & {
+    cursor: not-allowed;
+  }
+  line-height: 1;
+  color: 1px solid ${(props: ThemeProps) => props.theme.colors.gray800};
+  [data-is-selected='true'] &,
+  [data-is-today='true'] & {
+    border-radius: 32px;
+  }
+  [data-is-selected='true'] & {
+    background-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+    color: white;
+  }
+  [data-is-today='true'] & {
+    background-color: transparent;
+    border-radius: 32px;
+    border: 1px solid ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  }
+`