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

package/src/components/time-picker/CTimePicker.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CFormInput, CFormSelect, CInputGroup, CInputGroupText } from '../form'
+import { CButton } from '../button'
 import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
 import { CPicker, CPickerProps } from './../picker/CPicker'
 
@@ -18,14 +18,12 @@ import {
   isValidTime,
 } from './utils'
 
+import { Colors } from '../../types'
 import type { LocalizedTimePartials } from './types'
 
 export interface CTimePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
-    Omit<
-      CPickerProps,
-      'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant' | 'onChange'
-    > {
+    Omit<CPickerProps, 'placeholder'> {
   /**
    * Set if the component should use the 12/24 hour format. If `true` forces the interface to a 12-hour format. If `false` forces the interface into a 24-hour format. If `auto` the current locale will determine the 12 or 24-hour interface by default locales.
    *
@@ -36,10 +34,49 @@ export interface CTimePickerProps
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * Toggle visibility or set the content of cancel button.
+   */
+  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
+   */
+  cancelButtonColor?: Colors
+  /**
+   * Size the cancel button small or large.
+   */
+  cancelButtonSize?: 'sm' | 'lg'
+  /**
+   * Set the cancel button variant to an outlined button or a ghost button.
+   */
+  cancelButtonVariant?: 'outline' | 'ghost'
+  /**
+   * A string of all className you want applied to the component.
+   */
   /**
    * Toggle visibility or set the content of the cleaner button.
    */
   cleaner?: ReactNode | boolean
+  /**
+   * Toggle visibility or set the content of confirm button.
+   */
+  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
+   */
+  confirmButtonColor?: Colors
+  /**
+   * Size the confirm button small or large.
+   */
+  confirmButtonSize?: 'sm' | 'lg'
+  /**
+   * Set the confirm button variant to an outlined button or a ghost button.
+   */
+  confirmButtonVariant?: 'outline' | 'ghost'
   /**
    * Toggle visibility or set the content of the input indicator.
    */
@@ -90,8 +127,16 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
   (
     {
       ampm = 'auto',
+      cancelButton = 'Cancel',
+      cancelButtonColor = 'primary',
+      cancelButtonSize = 'sm',
+      cancelButtonVariant = 'ghost',
       className,
       cleaner = true,
+      confirmButton = 'OK',
+      confirmButtonColor = 'primary',
+      confirmButtonSize = 'sm',
+      confirmButtonVariant,
       container = 'dropdown',
       disabled,
       feedback,
@@ -121,9 +166,12 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     },
     ref,
   ) => {
+    const formRef = useRef<HTMLFormElement>()
     const inputRef = useRef<HTMLInputElement>(null)
+
     const [date, setDate] = useState<Date | null>(convertTimeToDate(time))
     const [initialDate, setInitialDate] = useState<Date | null>(null)
+    const [isValid, setIsValid] = useState(valid || (invalid && false))
     const [_ampm, setAmPm] = useState<'am' | 'pm'>(date ? getAmPm(new Date(date), locale) : 'am')
     const [_visible, setVisible] = useState(visible)
 
@@ -138,6 +186,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       setDate(convertTimeToDate(time))
     }, [time])
 
+    useEffect(() => {
+      setIsValid(valid || (invalid && false))
+    }, [valid, invalid])
+
     useEffect(() => {
       setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm))
 
@@ -153,12 +205,40 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       date && setAmPm(getAmPm(new Date(date), locale))
     }, [date])
 
+    useEffect(() => {
+      if (inputRef.current && inputRef.current.form) {
+        formRef.current = inputRef.current.form
+      }
+    }, [inputRef])
+
+    useEffect(() => {
+      if (formRef.current) {
+        formRef.current.addEventListener('submit', (event) => {
+          setTimeout(() => handleFormValidation(event.target as HTMLFormElement))
+        })
+
+        handleFormValidation(formRef.current)
+      }
+    }, [formRef, date])
+
     const handleClear = (event: React.MouseEvent<HTMLElement>) => {
       event.stopPropagation()
       setDate(null)
       onTimeChange && onTimeChange(null)
     }
 
+    const handleFormValidation = (form: HTMLFormElement) => {
+      if (!form.classList.contains('was-validated')) {
+        return
+      }
+
+      if (date) {
+        return setIsValid(true)
+      }
+
+      setIsValid(false)
+    }
+
     const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
       const _date = date || new Date('1970-01-01')
 
@@ -192,10 +272,11 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     }
 
     const InputGroup = () => (
-      <CInputGroup className="picker-input-group" size={size}>
-        <CFormInput
+      <div className="time-picker-input-group">
+        <input
           autoComplete="off"
-          delay={true}
+          className="time-picker-input"
+          // delay={true}
           disabled={disabled}
           onChange={(event) =>
             isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value))
@@ -205,105 +286,88 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           required={required}
           ref={inputRef}
         />
-        {(indicator || cleaner) && (
-          <CInputGroupText>
-            {indicator && (
-              <span className="picker-input-group-indicator">
-                {typeof indicator === 'boolean' ? (
-                  <span className="picker-input-group-icon time-picker-input-icon" />
-                ) : (
-                  indicator
-                )}
-              </span>
-            )}
-            {cleaner && date && (
-              <span
-                className="picker-input-group-cleaner"
-                role="button"
-                onClick={(event) => handleClear(event)}
-              >
-                {typeof cleaner === 'boolean' ? (
-                  <span className="picker-input-group-icon time-picker-cleaner-icon" />
-                ) : (
-                  cleaner
-                )}
-              </span>
-            )}
-          </CInputGroupText>
-        )}
-      </CInputGroup>
+        {indicator &&
+          (typeof indicator === 'boolean' ? <div className="time-picker-indicator" /> : indicator)}
+        {cleaner &&
+          date &&
+          (typeof cleaner === 'boolean' ? (
+            <div className="time-picker-cleaner" onClick={(event) => handleClear(event)} />
+          ) : (
+            React.isValidElement(cleaner) &&
+            React.cloneElement(cleaner as React.ReactElement<any>, {
+              onClick: (event: React.MouseEvent<HTMLElement>) => handleClear(event),
+            })
+          ))}
+      </div>
     )
 
     const TimePickerSelect = () => {
       return (
         <>
           <span className="time-picker-inline-icon" />
-          <CFormSelect
+          <select
+            className="time-picker-inline-select"
             disabled={disabled}
-            options={
-              localizedTimePartials &&
-              localizedTimePartials.listOfHours?.map((option) => {
-                return {
-                  value: option.value.toString(),
-                  label: option.label,
-                }
-              })
-            }
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('hours', event.target.value)
             }
             value={getSelectedHour(date, locale)}
-          />
+          >
+            {localizedTimePartials &&
+              localizedTimePartials.listOfHours.map((option, index) => (
+                <option value={option.value.toString()} key={index}>
+                  {option.label}
+                </option>
+              ))}
+          </select>
           <>:</>
-          <CFormSelect
+          <select
+            className="time-picker-inline-select"
             disabled={disabled}
-            options={
-              localizedTimePartials &&
-              localizedTimePartials.listOfMinutes.map((option) => {
-                return {
-                  value: option.value.toString(),
-                  label: option.label,
-                }
-              })
-            }
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('minutes', event.target.value)
             }
             value={getSelectedMinutes(date)}
-          />
+          >
+            {localizedTimePartials &&
+              localizedTimePartials.listOfMinutes.map((option, index) => (
+                <option value={option.value.toString()} key={index}>
+                  {option.label}
+                </option>
+              ))}
+          </select>
           {seconds && (
             <>
               <>:</>
-              <CFormSelect
+              <select
+                className="time-picker-inline-select"
                 disabled={disabled}
-                options={
-                  localizedTimePartials &&
-                  localizedTimePartials.listOfSeconds.map((option) => {
-                    return {
-                      value: option.value.toString(),
-                      label: option.label,
-                    }
-                  })
-                }
                 onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
                   handleTimeChange('seconds', event.target.value)
                 }
                 value={getSelectedSeconds(date)}
-              />
+              >
+                {localizedTimePartials &&
+                  localizedTimePartials.listOfSeconds.map((option, index) => (
+                    <option value={option.value.toString()} key={index}>
+                      {option.label}
+                    </option>
+                  ))}
+              </select>
             </>
           )}
           {localizedTimePartials && localizedTimePartials.hour12 && (
-            <CFormSelect
+            <select
+              className="time-picker-inline-select"
               disabled={disabled}
-              options={[
-                { value: 'am', label: 'AM' },
-                { value: 'pm', label: 'PM' },
-              ]}
               onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
                 handleTimeChange('toggle', event.target.value)
               }
               value={_ampm}
-            />
+            >
+              <option value="am">AM</option>
+              <option value="pm">PM</option>
+            </select>
           )}
         </>
       )
@@ -348,29 +412,57 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         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(
             'time-picker',
             {
-              'is-invalid': invalid,
-              'is-valid': valid,
+              [`time-picker-${size}`]: size,
+              disabled: disabled,
+              'is-invalid': isValid === false ? true : false,
+              'is-valid': isValid,
             },
             className,
           )}
           container={container}
           disabled={disabled}
+          dropdownClassNames="time-picker-dropdown"
           footer={footer}
+          footerContent={
+            <div className="time-picker-footer">
+              {cancelButton && (
+                <CButton
+                  color={cancelButtonColor}
+                  size={cancelButtonSize}
+                  variant={cancelButtonVariant}
+                  onClick={() => {
+                    initialDate && setDate(new Date(initialDate))
+                    setVisible(false)
+                  }}
+                >
+                  {cancelButton}
+                </CButton>
+              )}
+              {confirmButton && (
+                <CButton
+                  color={confirmButtonColor}
+                  size={confirmButtonSize}
+                  variant={confirmButtonVariant}
+                  onClick={() => {
+                    setVisible(false)
+                  }}
+                >
+                  {confirmButton}
+                </CButton>
+              )}
+            </div>
+          }
           id={id}
-          onCancel={() => {
-            initialDate && setDate(new Date(initialDate))
-            setVisible(false)
-          }}
           onHide={() => {
             setVisible(false)
             onHide && onHide()
@@ -402,7 +494,15 @@ CTimePicker.propTypes = {
   ...CFormControlWrapper.propTypes,
   ...CPicker.propTypes,
   ampm: PropTypes.oneOfType([PropTypes.oneOf<'auto'>(['auto']), PropTypes.bool]),
+  cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  cancelButtonColor: CButton.propTypes?.color,
+  cancelButtonSize: CButton.propTypes?.size,
+  cancelButtonVariant: CButton.propTypes?.variant,
   className: PropTypes.string,
+  confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  confirmButtonColor: CButton.propTypes?.color,
+  confirmButtonSize: CButton.propTypes?.size,
+  confirmButtonVariant: CButton.propTypes?.variant,
   locale: PropTypes.string,
   onTimeChange: PropTypes.func,
   required: PropTypes.bool,