@coreui/react-pro 4.2.0-beta.0 → 4.2.0

package/src/components/daterangepicker/CDateRangePicker.tsx

@@ -1,366 +0,0 @@
-import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { isMobile } from 'react-device-detect'
-
-import { CCalendar, CCalendarProps } from '../calendar/CCalendar'
-import { CPicker, CPickerProps } from './../picker/CPicker'
-import { CTimePicker } from './../timepicker/CTimePicker'
-import { convertToLocalDate } from '../calendar/CCalendar.utils'
-import { CButton } from '../button/CButton'
-import { CFormInput } from '../form/CFormInput'
-import { CInputGroup } from '../form/CInputGroup'
-import { CInputGroupText } from '../form/CInputGroupText'
-
-export interface CDateRangePickerProps
-  extends Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>,
-    Omit<CCalendarProps, 'onCalendarCellHover' | 'onCalendarDateChange'> {
-  /**
-   * The number of calendars that render on desktop devices.
-   */
-  calendars?: number
-  /**
-   * Enables selection cleaner element.
-   */
-  cleaner?: boolean
-  /**
-   * Cleaner icon.
-   */
-  cleanerIcon?: ReactNode | boolean
-  /**
-   * Default input icon.
-   */
-  defaultIcon?: ReactNode | boolean
-  /**
-   * Default icon between date input fields.
-   */
-  infixIcon?: ReactNode | boolean
-  /**
-   * Toggle the readonly state for the component.
-   */
-  inputReadOnly?: boolean
-  /**
-   * Specifies short hints that are visible in start date and end date inputs.
-   */
-  placeholder?: string | string[]
-  /**
-   * @ignore
-   */
-  range?: boolean
-  /**
-   * Predefined date ranges the user can select from.
-   */
-  ranges?: object
-  /**
-   * Size the component small or large.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Provide an additional time selection by adding select boxes to choose times.
-   */
-  timepicker?: boolean
-}
-
-export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDateRangePickerProps>(
-  (
-    {
-      calendars = 2,
-      className,
-      cleaner = true,
-      cleanerIcon,
-      calendarDate,
-      disabled,
-      disabledDates,
-      endDate,
-      defaultIcon,
-      infixIcon,
-      inputReadOnly,
-      locale = typeof navigator === 'undefined' ? 'en-US' : navigator.language,
-      maxDate,
-      minDate,
-      onEndDateChange,
-      onHide,
-      onStartDateChange,
-      onShow,
-      placeholder = ['Start date', 'End date'],
-      range = true,
-      ranges,
-      size,
-      startDate,
-      timepicker,
-      toggler,
-      visible,
-      ...rest
-    },
-    ref,
-  ) => {
-    const inputStartRef = useRef<HTMLInputElement>(null)
-    const inputEndRef = useRef<HTMLInputElement>(null)
-    const [_visible, setVisible] = useState(visible)
-    const [_startDate, setStartDate] = useState<Date | null>(startDate ? new Date(startDate) : null)
-    const [_endDate, setEndDate] = useState<Date | null>(endDate ? new Date(endDate) : null)
-    const [inputHoverValue, setInputHoverValue] = useState<Date | null>(null)
-    const [inputToHoverValue, setInputToHoverValue] = useState<Date | null>(null)
-    const [selectEndDate, setSelectEndDate] = useState(false)
-    const [_calendarDate, setCalendarDate] = useState<Date>(
-      calendarDate ? new Date(calendarDate) : new Date(),
-    )
-
-    useEffect(() => {
-      startDate && setCalendarDate(new Date(startDate))
-    }, [startDate])
-
-    useEffect(() => {
-      endDate && setCalendarDate(new Date(endDate))
-    }, [endDate])
-
-    useEffect(() => {
-      _visible && onShow && onShow()
-      !_visible && onHide && onHide()
-    }, [_visible])
-
-    useEffect(() => {
-      if (inputStartRef.current) {
-        if (inputHoverValue) {
-          inputStartRef.current.value = convertToLocalDate(inputHoverValue, locale)
-          return
-        }
-        if (_startDate) {
-          inputStartRef.current.value = timepicker
-            ? _startDate.toLocaleString(locale)
-            : _startDate.toLocaleDateString(locale)
-          return
-        }
-        inputStartRef.current.value = ''
-      }
-    }, [inputHoverValue, _startDate])
-
-    useEffect(() => {
-      if (inputEndRef.current) {
-        if (inputToHoverValue) {
-          inputEndRef.current.value = convertToLocalDate(inputToHoverValue, locale)
-          return
-        }
-        if (_endDate) {
-          inputEndRef.current.value = timepicker
-            ? _endDate.toLocaleString(locale)
-            : _endDate.toLocaleDateString(locale)
-          return
-        }
-        inputEndRef.current.value = ''
-      }
-    }, [inputToHoverValue, _endDate])
-
-    const handleCalendarDateChange = (date: Date, difference?: number) => {
-      difference
-        ? setCalendarDate(new Date(date.getFullYear(), date.getMonth() - difference, 1))
-        : setCalendarDate(date)
-    }
-
-    const handleStartDateChange = (date: Date | null) => {
-      setStartDate(date)
-      range && setSelectEndDate(true)
-      onStartDateChange && onStartDateChange(date)
-      setInputHoverValue(null)
-    }
-
-    const handleEndDateChange = (date: Date | null) => {
-      setEndDate(date)
-      setSelectEndDate(false)
-      onEndDateChange && onEndDateChange(date)
-      setInputToHoverValue(null)
-
-      if (timepicker !== true) {
-        _startDate !== null && setVisible(false)
-      }
-    }
-
-    const handleCalendarCellHover = (date: Date | null) => {
-      selectEndDate ? setInputToHoverValue(date) : setInputHoverValue(date)
-    }
-
-    const handleClear = (event: React.MouseEvent<HTMLElement>) => {
-      event.stopPropagation()
-      setStartDate(null)
-      setEndDate(null)
-      setInputHoverValue(null)
-      setInputToHoverValue(null)
-    }
-
-    const _className = classNames('date-picker', className)
-
-    const InputGroup = () => (
-      <CInputGroup className="picker-input-group" size={size}>
-        <CFormInput
-          className={classNames({
-            hover: inputHoverValue,
-          })}
-          disabled={disabled}
-          placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
-          readOnly={inputReadOnly}
-          onClick={() => setSelectEndDate(false)}
-          ref={inputStartRef}
-        />
-        {range && infixIcon !== false && (
-          <CInputGroupText>
-            {infixIcon ? (
-              infixIcon
-            ) : (
-              <span className="picker-input-group-icon date-picker-arrow-icon" />
-            )}
-          </CInputGroupText>
-        )}
-        {range && (
-          <CFormInput
-            className={classNames({
-              hover: inputToHoverValue,
-            })}
-            disabled={disabled}
-            placeholder={placeholder[1]}
-            readOnly={inputReadOnly}
-            onClick={() => setSelectEndDate(true)}
-            ref={inputEndRef}
-          />
-        )}
-        {(defaultIcon !== false || cleaner) && (
-          <CInputGroupText>
-            {defaultIcon !== false && (
-              <span className="picker-input-group-indicator">
-                {defaultIcon ? (
-                  defaultIcon
-                ) : (
-                  <span className="picker-input-group-icon date-picker-input-icon" />
-                )}
-              </span>
-            )}
-            {cleaner && _startDate && (
-              <span
-                className="picker-input-group-cleaner"
-                role="button"
-                onClick={(event) => handleClear(event)}
-              >
-                {cleanerIcon ? (
-                  cleanerIcon
-                ) : (
-                  <span className="picker-input-group-icon date-picker-cleaner-icon" />
-                )}
-              </span>
-            )}
-          </CInputGroupText>
-        )}
-      </CInputGroup>
-    )
-
-    return (
-      <CPicker
-        className={_className}
-        disabled={disabled}
-        footer={timepicker}
-        toggler={toggler ? toggler : InputGroup()}
-        onCancelClick={() => {
-          handleStartDateChange(startDate ? new Date(startDate) : null)
-          handleEndDateChange(endDate ? new Date(endDate) : null)
-        }}
-        visible={_visible}
-        {...rest}
-        ref={ref}
-      >
-        <div className="date-picker-body">
-          {ranges && (
-            <div className="date-picker-ranges">
-              {Object.keys(ranges).map((key: string, index: number) => (
-                <CButton
-                  color="secondary"
-                  key={index}
-                  onClick={() => {
-                    setStartDate(ranges[key][0])
-                    setEndDate(ranges[key][1])
-                  }}
-                  variant="ghost"
-                >
-                  {key}
-                </CButton>
-              ))}
-            </div>
-          )}
-          <div className="date-picker-calendars">
-            {[...Array(isMobile ? 1 : calendars)].map((_, index) => (
-              <div className="date-picker-calendar" key={index}>
-                <CCalendar
-                  calendarDate={
-                    new Date(_calendarDate.getFullYear(), _calendarDate.getMonth() + index, 1)
-                  }
-                  disabledDates={disabledDates}
-                  endDate={_endDate}
-                  locale={locale}
-                  maxDate={maxDate}
-                  minDate={minDate}
-                  range={range}
-                  selectEndDate={selectEndDate}
-                  startDate={_startDate}
-                  onCalendarCellHover={(date) => handleCalendarCellHover(date)}
-                  onCalendarDateChange={(date) => handleCalendarDateChange(date, index)}
-                  onStartDateChange={(date) => handleStartDateChange(date)}
-                  onEndDateChange={(date) => handleEndDateChange(date)}
-                />
-                {!isMobile && timepicker && (index === 0 || calendars - index === 1) && (
-                  <CTimePicker
-                    container="inline"
-                    disabled={
-                      index === 0
-                        ? _startDate === null
-                          ? true
-                          : false
-                        : _endDate === null
-                        ? true
-                        : false
-                    }
-                    locale={locale}
-                    onChange={(_, __, date) =>
-                      index === 0 ? handleStartDateChange(date) : handleEndDateChange(date)
-                    }
-                    value={index === 0 ? _startDate : _endDate}
-                    variant="select"
-                  />
-                )}
-                {isMobile && timepicker && (
-                  <>
-                    <CTimePicker
-                      container="inline"
-                      disabled={_startDate === null ? true : false}
-                      locale={locale}
-                      onChange={(_, __, date) => handleStartDateChange(date)}
-                      value={_startDate}
-                      variant="select"
-                    />
-                    <CTimePicker
-                      container="inline"
-                      disabled={_endDate === null ? true : false}
-                      locale={locale}
-                      onChange={(_, __, date) => handleEndDateChange(date)}
-                      value={_endDate}
-                      variant="select"
-                    />
-                  </>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      </CPicker>
-    )
-  },
-)
-
-CDateRangePicker.displayName = 'CDateRangePicker'
-
-CDateRangePicker.propTypes = {
-  ...CCalendar.propTypes,
-  ...CPicker.propTypes,
-  calendars: PropTypes.number,
-  inputReadOnly: PropTypes.bool,
-  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.any)]),
-  range: PropTypes.bool,
-  ranges: PropTypes.object,
-  timepicker: PropTypes.bool,
-}

package/src/components/timepicker/CTimePicker.utils.ts

@@ -1,27 +0,0 @@
-export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
-  if (abbr === 'am' && hour === 12) {
-    return 0
-  }
-  if (abbr === 'am') {
-    return hour
-  }
-  if (abbr === 'pm' && hour === 12) {
-    return 12
-  }
-  return hour + 12
-}
-
-export const convert24hTo12h = (hour: number) => hour % 12 || 12
-
-export const getAmPm = (date: Date, locale: string) => {
-  if (date.toLocaleTimeString(locale).includes('AM')) {
-    return 'am'
-  }
-  if (date.toLocaleTimeString(locale).includes('PM')) {
-    return 'pm'
-  }
-  return date.getHours() >= 12 ? 'pm' : 'am'
-}
-
-export const isAmPm = (locale: string) =>
-  ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el))