@coreui/react-pro 4.11.3 → 4.12.0-alpha.0

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -7,22 +7,46 @@ import { isMobile } from 'react-device-detect'
 
 import { CButton } from '../button'
 import { CCalendar, CCalendarProps } from '../calendar/CCalendar'
-import { CFormInput, CInputGroup, CInputGroupText } from '../form'
 import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
 import { CPicker, CPickerProps } from '../picker/CPicker'
 import { CTimePicker } from '../time-picker/CTimePicker'
 
+import { Colors } from '../../types'
 import { getLocalDateFromString } from './utils'
 
-import { Colors } from '../../types'
 export interface CDateRangePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
-    Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>,
+    Omit<CPickerProps, 'placeholder'>,
     Omit<CCalendarProps, 'onCalendarCellHover' | 'onCalendarDateChange'> {
   /**
    * The number of calendars that render on desktop devices.
    */
   calendars?: number
+  /**
+   * Toggle visibility or set the content of cancel button.
+   *
+   * @default 'Cancel'
+   */
+  cancelButton?: boolean | ReactNode
+  /**
+   * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   * @default 'primary'
+   */
+  cancelButtonColor?: Colors
+  /**
+   * Size the cancel button small or large.
+   *
+   * @default 'sm'
+   */
+  cancelButtonSize?: 'sm' | 'lg'
+  /**
+   * Set the cancel button variant to an outlined button or a ghost button.
+   *
+   * @default 'ghost'
+   */
+  cancelButtonVariant?: 'outline' | 'ghost'
   /**
    * A string of all className you want applied to the component.
    */
@@ -37,6 +61,29 @@ export interface CDateRangePickerProps
    * Toggle visibility or set the content of the cleaner button.
    */
   cleaner?: boolean
+  /**
+   * Toggle visibility or set the content of confirm button.
+   *
+   * @default 'OK'
+   */
+  confirmButton?: boolean | ReactNode
+  /**
+   * Sets the color context of the confirm button to one of CoreUI’s themed colors.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   * @default 'primary'
+   */
+  confirmButtonColor?: Colors
+  /**
+   * Size the confirm button small or large.
+   *
+   * @default 'sm'
+   */
+  confirmButtonSize?: 'sm' | 'lg'
+  /**
+   * Set the confirm button variant to an outlined button or a ghost button.
+   */
+  confirmButtonVariant?: 'outline' | 'ghost'
   /**
    * Set date format.
    * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
@@ -86,7 +133,7 @@ export interface CDateRangePickerProps
   rangesButtonsVariant?: 'outline' | 'ghost'
   /**
    * When present, it specifies that date must be filled out before submitting the form.
-   * 
+   *
    * @since 4.10.0
    */
   required?: boolean
@@ -131,10 +178,18 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
   (
     {
       calendars = 2,
+      calendarDate,
+      cancelButton = 'Cancel',
+      cancelButtonColor = 'primary',
+      cancelButtonSize = 'sm',
+      cancelButtonVariant = 'ghost',
       className,
       cleaner = true,
-      calendarDate,
       closeOnSelect = true,
+      confirmButton = 'OK',
+      confirmButtonColor = 'primary',
+      confirmButtonSize = 'sm',
+      confirmButtonVariant,
       indicator = true,
       dayFormat,
       disabled,
@@ -186,28 +241,34 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     },
     ref,
   ) => {
-    const [_visible, setVisible] = useState(visible)
-
-    const inputStartRef = useRef<HTMLInputElement>(null)
     const inputEndRef = useRef<HTMLInputElement>(null)
-    const [inputStartHoverValue, setInputStartHoverValue] = useState<Date | null>(null)
-    const [inputEndHoverValue, setInputEndHoverValue] = useState<Date | null>(null)
+    const inputStartRef = useRef<HTMLInputElement>(null)
+    const formRef = useRef<HTMLFormElement>()
 
     const [_calendarDate, setCalendarDate] = useState<Date>(
       calendarDate ? new Date(calendarDate) : new Date(),
     )
-    const [_startDate, setStartDate] = useState<Date | null>(startDate ? new Date(startDate) : null)
     const [_endDate, setEndDate] = useState<Date | null>(endDate ? new Date(endDate) : null)
+    const [_maxDate, setMaxDate] = useState<Date | null>(maxDate ? new Date(maxDate) : null)
+    const [_minDate, setMinDate] = useState<Date | null>(minDate ? new Date(minDate) : null)
+    const [_startDate, setStartDate] = useState<Date | null>(startDate ? new Date(startDate) : null)
+    const [_visible, setVisible] = useState(visible)
+
     const [initialStartDate, setInitialStartDate] = useState<Date | null>(
       startDate ? new Date(startDate) : null,
     )
     const [initialEndDate, setInitialEndDate] = useState<Date | null>(
       endDate ? new Date(endDate) : null,
     )
-    const [_maxDate, setMaxDate] = useState<Date | null>(maxDate ? new Date(maxDate) : null)
-    const [_minDate, setMinDate] = useState<Date | null>(minDate ? new Date(minDate) : null)
+    const [inputStartHoverValue, setInputStartHoverValue] = useState<Date | null>(null)
+    const [inputEndHoverValue, setInputEndHoverValue] = useState<Date | null>(null)
+    const [isValid, setIsValid] = useState(valid || (invalid && false))
     const [selectEndDate, setSelectEndDate] = useState(false)
 
+    useEffect(() => {
+      setIsValid(valid || (invalid && false))
+    }, [valid, invalid])
+
     useEffect(() => {
       if (startDate) {
         setStartDate(new Date(startDate))
@@ -248,6 +309,22 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       setInputValue(inputEndRef.current, _endDate)
     }, [inputEndHoverValue, _endDate])
 
+    useEffect(() => {
+      if (inputStartRef.current && inputStartRef.current.form) {
+        formRef.current = inputStartRef.current.form
+      }
+    }, [inputStartRef])
+
+    useEffect(() => {
+      if (formRef.current) {
+        formRef.current.addEventListener('submit', (event) => {
+          setTimeout(() => handleFormValidation(event.target as HTMLFormElement))
+        })
+
+        handleFormValidation(formRef.current)
+      }
+    }, [formRef, _startDate, _endDate])
+
     const formatDate = (date: Date) => {
       return format
         ? dateFormat(date, format)
@@ -279,18 +356,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
         : setCalendarDate(date)
     }
 
-    const handleStartDateChange = (date: Date | null) => {
-      setStartDate(date)
-      setInputStartHoverValue(null)
-      onStartDateChange && onStartDateChange(date, date ? formatDate(date) : undefined)
-
-      if (timepicker || footer) {
-        return
-      }
-
-      if (closeOnSelect && !range) {
-        setVisible(false)
-      }
+    const handleClear = (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation()
+      setStartDate(null)
+      setEndDate(null)
     }
 
     const handleEndDateChange = (date: Date | null) => {
@@ -307,20 +376,40 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       }
     }
 
-    const handleClear = (event: React.MouseEvent<HTMLElement>) => {
-      event.stopPropagation()
-      setStartDate(null)
-      setEndDate(null)
+    const handleFormValidation = (form: HTMLFormElement) => {
+      if (!form.classList.contains('was-validated')) {
+        return
+      }
+
+      if ((range && _startDate && _endDate) || (!range && _startDate)) {
+        return setIsValid(true)
+      }
+
+      setIsValid(false)
+    }
+
+    const handleStartDateChange = (date: Date | null) => {
+      setStartDate(date)
+      setInputStartHoverValue(null)
+      onStartDateChange && onStartDateChange(date, date ? formatDate(date) : undefined)
+
+      if (timepicker || footer) {
+        return
+      }
+
+      if (closeOnSelect && !range) {
+        setVisible(false)
+      }
     }
 
     const InputGroup = () => (
-      <CInputGroup className="picker-input-group" size={size}>
-        <CFormInput
+      <div className="date-picker-input-group">
+        <input
           autoComplete="off"
-          className={classNames({
+          className={classNames('date-picker-input', {
             hover: inputStartHoverValue,
           })}
-          delay={true}
+          // delay={true}
           disabled={disabled}
           {...(id && { name: range ? `${id}-start-date` : `${id}-date` })}
           placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
@@ -336,22 +425,14 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           onClick={() => setSelectEndDate(false)}
           ref={inputStartRef}
         />
-        {range && separator !== false && (
-          <CInputGroupText>
-            {typeof separator === 'boolean' ? (
-              <span className="picker-input-group-icon date-picker-arrow-icon" />
-            ) : (
-              separator
-            )}
-          </CInputGroupText>
-        )}
+        {range && separator !== false && <div className="date-picker-separator" />}
         {range && (
-          <CFormInput
+          <input
             autoComplete="off"
-            className={classNames({
+            className={classNames('date-picker-input', {
               hover: inputEndHoverValue,
             })}
-            delay={true}
+            // delay={true}
             disabled={disabled}
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
@@ -368,33 +449,19 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             ref={inputEndRef}
           />
         )}
-        {(indicator || cleaner) && (
-          <CInputGroupText>
-            {indicator && (
-              <span className="picker-input-group-indicator">
-                {typeof indicator === 'boolean' ? (
-                  <span className="picker-input-group-icon date-picker-input-icon" />
-                ) : (
-                  indicator
-                )}
-              </span>
-            )}
-            {cleaner && _startDate && (
-              <span
-                className="picker-input-group-cleaner"
-                role="button"
-                onClick={(event) => handleClear(event)}
-              >
-                {typeof cleaner === 'boolean' ? (
-                  <span className="picker-input-group-icon date-picker-cleaner-icon" />
-                ) : (
-                  cleaner
-                )}
-              </span>
-            )}
-          </CInputGroupText>
-        )}
-      </CInputGroup>
+        {indicator &&
+          (typeof indicator === 'boolean' ? <div className="date-picker-indicator" /> : indicator)}
+        {cleaner &&
+          (_startDate || _endDate) &&
+          (typeof cleaner === 'boolean' ? (
+            <div className="date-picker-cleaner" onClick={(event) => handleClear(event)} />
+          ) : (
+            React.isValidElement(cleaner) &&
+            React.cloneElement(cleaner as React.ReactElement<any>, {
+              onClick: (event: React.MouseEvent<HTMLElement>) => handleClear(event),
+            })
+          ))}
+      </div>
     )
 
     return (
@@ -404,48 +471,74 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
         feedbackInvalid={feedbackInvalid}
         feedbackValid={feedbackValid}
         id={id}
-        invalid={invalid}
+        invalid={isValid === false ? true : false}
         label={label}
         text={text}
         tooltipFeedback={tooltipFeedback}
-        valid={valid}
+        valid={isValid}
       >
         <CPicker
           className={classNames(
             'date-picker',
             {
-              'is-invalid': invalid,
-              'is-valid': valid,
+              [`date-picker-${size}`]: size,
+              disabled: disabled,
+              'is-invalid': isValid === false ? true : false,
+              'is-valid': isValid,
             },
             className,
           )}
           disabled={disabled}
+          dropdownClassNames="date-picker-dropdown"
           footer={footer || timepicker}
           footerContent={
-            todayButton && (
-              <CButton
-                className="me-auto"
-                color={todayButtonColor}
-                size={todayButtonSize}
-                variant={todayButtonVariant}
-                onClick={() => {
-                  const date = new Date()
-                  handleStartDateChange(date)
-                  handleEndDateChange(date)
-                  setCalendarDate(date)
-                }}
-              >
-                {todayButton}
-              </CButton>
-            )
+            <div className="date-picker-footer">
+              {todayButton && (
+                <CButton
+                  className="me-auto"
+                  color={todayButtonColor}
+                  size={todayButtonSize}
+                  variant={todayButtonVariant}
+                  onClick={() => {
+                    const date = new Date()
+                    handleStartDateChange(date)
+                    handleEndDateChange(date)
+                    setCalendarDate(date)
+                  }}
+                >
+                  {todayButton}
+                </CButton>
+              )}
+              {cancelButton && (
+                <CButton
+                  color={cancelButtonColor}
+                  size={cancelButtonSize}
+                  variant={cancelButtonVariant}
+                  onClick={() => {
+                    handleStartDateChange(initialStartDate)
+                    handleEndDateChange(initialEndDate)
+                    setVisible(false)
+                  }}
+                >
+                  {cancelButton}
+                </CButton>
+              )}
+              {confirmButton && (
+                <CButton
+                  color={confirmButtonColor}
+                  size={confirmButtonSize}
+                  variant={confirmButtonVariant}
+                  onClick={() => {
+                    setVisible(false)
+                  }}
+                >
+                  {confirmButton}
+                </CButton>
+              )}
+            </div>
           }
           id={id}
           toggler={toggler ?? InputGroup()}
-          onCancel={() => {
-            handleStartDateChange(initialStartDate)
-            handleEndDateChange(initialEndDate)
-            setVisible(false)
-          }}
           onHide={() => {
             setVisible(false)
             onHide && onHide()
@@ -565,10 +658,18 @@ CDateRangePicker.propTypes = {
   ...CCalendar.propTypes,
   ...CFormControlWrapper.propTypes,
   ...CPicker.propTypes,
+  cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  cancelButtonColor: CButton.propTypes?.color,
+  cancelButtonSize: CButton.propTypes?.size,
+  cancelButtonVariant: CButton.propTypes?.variant,
   calendars: PropTypes.number,
   className: PropTypes.string,
   cleaner: PropTypes.bool,
   closeOnSelect: PropTypes.bool,
+  confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  confirmButtonColor: CButton.propTypes?.color,
+  confirmButtonSize: CButton.propTypes?.size,
+  confirmButtonVariant: CButton.propTypes?.variant,
   id: PropTypes.string,
   indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   inputReadOnly: PropTypes.bool,