@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustom.tsx

@@ -0,0 +1,178 @@
+import DatePicker, { registerLocale } from 'react-datepicker'
+import React, { type FC, useState } from 'react'
+import { de } from 'date-fns/locale'
+
+import { type DatePickerCustomProps } from './DatePickerCustomProps.types'
+// import './DatePickerCustom.scss'
+// import './DatepickerPlugin.scss'
+
+registerLocale('de', de)
+
+const DatePickerCustom: FC<DatePickerCustomProps> = ({
+  class: className,
+  dateFormat = 'MM/dd/yyyy',
+  isStartDate = false,
+  isValidGroup = false,
+  label,
+  locale = 'en',
+  name,
+  onChange,
+  relatedDate,
+  tooltip,
+  type,
+  validate = false,
+  value
+}): React.JSX.Element => {
+  const [date, setDate] = useState(() => {
+    return typeof value === 'string' && value !== '' ? new Date(value) : null
+  })
+
+  const returnYears = (currentYear: number): React.JSX.Element[] => {
+    const years: React.JSX.Element[] = []
+    const minYear = new Date().getFullYear() - 100
+    const maxYear = new Date().getFullYear() + 500
+
+    for (let i = minYear; i <= maxYear; i++) {
+      years.push(
+        <option key={i} value={i} defaultValue={currentYear}>
+          {i}
+        </option>
+      )
+    }
+
+    return years
+  }
+
+  const handleChange = (date: Date | null): void => {
+    setDate(date)
+    if (onChange != null) {
+      const dateObject = {
+        target: {
+          name,
+          value: date
+        }
+      }
+      onChange(dateObject)
+    }
+  }
+
+  const addDays = (date, days): Date => {
+    const result = new Date(date)
+    result.setDate(result.getDate() + days)
+    return result
+  }
+
+  const classStyle = `${validate ? 'e-datepicker' : 'e-datepicker is-invalid'} ${className ?? ''} e-${type} ${
+    !isValidGroup ? '--group-invalid' : ''
+  }\``
+
+  let minDate
+  let maxDate
+  if (relatedDate != null) {
+    if (isStartDate) {
+      maxDate = relatedDate
+      maxDate = addDays(maxDate, -1)
+    } else {
+      minDate = relatedDate
+      minDate = addDays(minDate, 1)
+    }
+  }
+
+  const TooltipObject = tooltip !== undefined ? <p className='tooltip-form sans-serif --small'>{tooltip}</p> : ''
+
+  const actualYear = new Date().getFullYear()
+
+  const intlForMonths = new Intl.DateTimeFormat(locale, { month: 'long' })
+  const months = [...Array(12).keys()].map((monthIndex) => {
+    const monthName = intlForMonths.format(new Date(actualYear, monthIndex))
+    return {
+      monthName
+    }
+  })
+
+  return (
+    <div className={classStyle} data-qa={name}>
+      {TooltipObject}
+      <DatePicker
+        locale={locale}
+        dateFormat={dateFormat}
+        renderCustomHeader={({
+          date,
+          changeYear,
+          changeMonth,
+          decreaseMonth,
+          increaseMonth,
+          prevMonthButtonDisabled,
+          nextMonthButtonDisabled
+        }) => (
+          <div
+            style={{
+              margin: 10,
+              display: 'flex',
+              justifyContent: 'center'
+            }}
+          >
+            <button
+              className='DayPickerNavigation_leftButton'
+              onClick={decreaseMonth}
+              disabled={prevMonthButtonDisabled}
+            >
+              {'<'}
+            </button>
+            <select
+              className='CalendarYear'
+              value={date.getFullYear()}
+              onChange={({ target: { value } }) => {
+                changeYear(Number(value))
+              }}
+            >
+              {returnYears(date.getFullYear())}
+            </select>
+
+            <select
+              className='CalendarMonth'
+              value={date.getMonth()}
+              onChange={({ target: { value } }) => {
+                changeMonth(Number(value))
+              }}
+            >
+              {months.map(({ monthName }, value) => (
+                <option key={monthName} value={value} defaultValue={date.getMonth()}>
+                  {monthName}
+                </option>
+              ))}
+            </select>
+
+            <button
+              className='DayPickerNavigation_rightButton'
+              onClick={increaseMonth}
+              disabled={nextMonthButtonDisabled}
+            >
+              {'>'}
+            </button>
+          </div>
+        )}
+        selected={date}
+        minDate={minDate}
+        maxDate={maxDate}
+        onChange={(date: Date | null) => {
+          handleChange(date)
+        }}
+        popperPlacement='bottom'
+        popperModifiers={[
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['bottom']
+            }
+          }
+        ]}
+      />
+      <div className={'e-datepicker__inner'}>
+        <label className={'e-datepicker__label'}>{label}</label>
+      </div>
+    </div>
+  )
+}
+
+export default DatePickerCustom

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustomProps.types.ts

@@ -0,0 +1,17 @@
+export interface DatePickerCustomProps {
+  id?: string
+  name?: string
+  class?: string
+  value?: string
+  focused?: boolean
+  validate?: boolean
+  tooltip?: string
+  isValidGroup?: boolean
+  label?: string
+  locale: string
+  isStartDate?: boolean
+  relatedDate?: Date
+  type?: string
+  dateFormat?: string
+  onChange?: (dateObject: any) => void
+}