@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

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

@@ -1,361 +0,0 @@
-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/src/components/molecules/dateRangePicker/calendar/index.styled.ts

@@ -1,122 +0,0 @@
-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};
-  }
-`