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

package/src/components/dropdown/CDropdownMenu.tsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types'
 import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
@@ -59,14 +59,16 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     }
   }, [visible])
 
-  const handleKeyup = (event: Event) => {
+  const handleKeyup = (event: KeyboardEvent) => {
     if (autoClose === false) {
       return
     }
-    if (!dropdownMenuRef.current?.contains(event.target as HTMLElement)) {
+
+    if (event.key === 'Escape') {
       setVisible(false)
     }
   }
+
   const handleMouseUp = (event: Event) => {
     if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target as HTMLElement)) {
       return

package/src/components/picker/CPicker.tsx

@@ -7,11 +7,57 @@ import { CDropdown, CDropdownProps } from '../dropdown/CDropdown'
 import { CDropdownMenu } from '../dropdown/CDropdownMenu'
 import { CDropdownToggle } from '../dropdown/CDropdownToggle'
 
+import { Colors } from '../Types'
+
 export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
   /**
-   * Cancel button text.
+   * 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'
+  /**
+   * Toggle visibility or set the content of confirm button.
+   *
+   * @default 'OK'
    */
-  cancelButtonText?: ReactNode
+  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 container type for the component.
    */
@@ -24,18 +70,14 @@ export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
    * Toggle visibility of footer element or set the content of footer.
    */
   footer?: boolean | ReactNode
-  /**
-   * Ok button text
-   */
-  okButtonText?: ReactNode
   /**
    * Callback fired when the cancel button has been clicked.
    */
-  onCancelClick?: () => void
+  onCancel?: () => void
   /**
-   * Callback fired when the ok button has been clicked.
+   * Callback fired when the confirm button has been clicked.
    */
-  onOkClick?: () => void
+  onConfirm?: () => void
   /**
    * The content of toggler.
    */
@@ -46,14 +88,20 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
   (
     {
       children,
-      cancelButtonText = 'Cancel',
+      cancelButton = 'Cancel',
+      cancelButtonColor = 'primary',
+      cancelButtonSize = 'sm',
+      cancelButtonVariant = 'ghost',
+      confirmButton = 'OK',
+      confirmButtonColor = 'primary',
+      confirmButtonSize = 'sm',
+      confirmButtonVariant,
       className,
       container = 'dropdown',
       disabled,
       footer,
-      okButtonText = 'OK',
-      onCancelClick,
-      onOkClick,
+      onCancel,
+      onConfirm,
       onHide,
       onShow,
       toggler: Toggler,
@@ -70,24 +118,29 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
 
     const Footer = () => (
       <>
-        <CButton
-          color="primary"
-          size="sm"
-          variant="ghost"
-          onClick={() => onCancelClick && onCancelClick()}
-        >
-          {cancelButtonText}
-        </CButton>
-        <CButton
-          color="primary"
-          size="sm"
-          onClick={() => {
-            onOkClick && onOkClick()
-            setVisible(false)
-          }}
-        >
-          {okButtonText}
-        </CButton>
+        {cancelButton && (
+          <CButton
+            color={cancelButtonColor}
+            size={cancelButtonSize}
+            variant={cancelButtonVariant}
+            onClick={() => onCancel && onCancel()}
+          >
+            {cancelButton}
+          </CButton>
+        )}
+        {confirmButton && (
+          <CButton
+            color={confirmButtonColor}
+            size={confirmButtonSize}
+            variant={confirmButtonVariant}
+            onClick={() => {
+              onConfirm && onConfirm()
+              setVisible(false)
+            }}
+          >
+            {confirmButton}
+          </CButton>
+        )}
       </>
     )
 
@@ -134,9 +187,21 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
 CPicker.displayName = 'CPicker'
 
 CPicker.propTypes = {
-  ...CDropdown.propTypes,
+  cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  cancelButtonColor: CButton.propTypes?.color,
+  cancelButtonSize: CButton.propTypes?.size,
+  cancelButtonVariant: CButton.propTypes?.variant,
+  confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  confirmButtonColor: CButton.propTypes?.color,
+  confirmButtonSize: CButton.propTypes?.size,
+  confirmButtonVariant: CButton.propTypes?.variant,
+  children: PropTypes.node,
+  className: PropTypes.string,
   container: PropTypes.oneOf(['dropdown', 'inline']),
   disabled: PropTypes.bool,
-  onCancelClick: PropTypes.func,
-  onOkClick: PropTypes.func,
+  footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  toggler: PropTypes.node,
+  ...CDropdown.propTypes,
 }

package/src/components/picker/__tests__/CPicker.spec.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CPicker } from '../CPicker'
+
+test('loads and displays CPicker component', async () => {
+  const { container } = render(<CPicker>Test</CPicker>)
+  expect(container).toMatchSnapshot()
+})

package/src/components/picker/__tests__/__snapshots__/CPicker.spec.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loads and displays CPicker component 1`] = `
+<div>
+  <div
+    class="dropdown picker"
+  >
+    <button
+      aria-expanded="false"
+      class="btn btn-primary dropdown-toggle"
+      tabindex="0"
+      type="button"
+    />
+    <div
+      aria-hidden="true"
+      class="dropdown-menu"
+      role="menu"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;

package/src/components/timepicker/CTimePicker.tsx

@@ -10,7 +10,18 @@ import { CInputGroupText } from '../form/CInputGroupText'
 
 import { CTimePickerRollCol } from './CTimePickerRollCol'
 import { CPicker, CPickerProps } from './../picker/CPicker'
-import { convert12hTo24h, convert24hTo12h, getAmPm, isAmPm } from './CTimePicker.utils'
+import {
+  convert12hTo24h,
+  convertTimeToDate,
+  getAmPm,
+  getListOfHours,
+  getMinutesOrSeconds,
+  getSelectedHour,
+  getSelectedMinutes,
+  getSelectedSeconds,
+  isAmPm,
+  isValidTime,
+} from '../../utils/time'
 
 export interface CTimePickerProps
   extends Omit<
@@ -22,29 +33,25 @@ export interface CTimePickerProps
    */
   className?: string
   /**
-   * Enables selection cleaner element.
+   * Toggle visibility or set the content of the cleaner button.
    */
-  cleaner?: boolean
+  cleaner?: ReactNode | boolean
   /**
-   * Cleaner icon.
+   * Toggle visibility or set the content of the input indicator.
    */
-  cleanerIcon?: ReactNode | boolean
-  /**
-   * Default input icon.
-   */
-  defaultIcon?: ReactNode | boolean
+  indicator?: ReactNode | boolean
   /**
    * Toggle the readonly state for the component.
    */
   inputReadOnly?: boolean
   /**
-   * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+   * Sets the default locale for components. If not set, it is inherited from the browser.
    */
   locale?: string
   /**
-   * Callback fired when the user hovers over the calendar cell.
+   * Callback fired when the time changed.
    */
-  onChange?: (timeString: string, localeTimeString: string, date: Date) => void
+  onTimeChange?: (timeString: string, localeTimeString: string, date: Date) => void
   /**
    * Specifies a short hint that is visible in the input.
    */
@@ -54,9 +61,9 @@ export interface CTimePickerProps
    */
   size?: 'sm' | 'lg'
   /**
-   * Default value of the component
+   * Initial selected time.
    */
-  value?: Date | string | null
+  time?: Date | string | null
   /**
    * Set the time picker variant to a roll or select.
    */
@@ -68,65 +75,39 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     {
       className,
       cleaner = true,
-      cleanerIcon,
       container = 'dropdown',
-      defaultIcon,
       disabled,
       footer = true,
+      indicator = true,
       inputReadOnly,
-      locale = typeof navigator === 'undefined' ? 'en-US' : navigator.language,
-      onChange,
+      locale = 'default',
+      onTimeChange,
+      onHide,
+      onShow,
       placeholder = 'Select time',
       size,
-      value,
+      time,
       variant = 'roll',
       ...rest
     },
     ref,
   ) => {
     const inputRef = useRef<HTMLInputElement>(null)
-    const [date, setDate] = useState<Date | null>(
-      value ? (value instanceof Date ? new Date(value) : new Date(`1970-01-01 ${value}`)) : null,
-    )
+    const [date, setDate] = useState<Date | null>(convertTimeToDate(time))
+    const [initialDate, setInitialDate] = useState<Date | null>(null)
     const [_ampm, setAmPm] = useState<'am' | 'pm'>(date ? getAmPm(new Date(date), locale) : 'am')
 
     useEffect(() => {
-      setDate(
-        value ? (value instanceof Date ? new Date(value) : new Date(`1970-01-01 ${value}`)) : null,
-      )
-    }, [value])
+      setDate(convertTimeToDate(time))
+    }, [time])
 
     useEffect(() => {
       if (inputRef.current) {
         inputRef.current.value = date ? date.toLocaleTimeString(locale) : ''
       }
-    }, [date])
-
-    const getHours = (locale: string) =>
-      Array.from(new Array(isAmPm(locale) ? 12 : 24), (_, i) => {
-        return {
-          value: isAmPm(locale) ? i + 1 : i,
-          label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
-        }
-      })
-
-    const getMinutesOrSeconds = (locale: string) =>
-      Array.from(new Array(60), (_, i) => {
-        return {
-          value: i,
-          label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
-        }
-      })
-
-    const selectedHour = date
-      ? isAmPm(locale)
-        ? convert24hTo12h(date.getHours())
-        : date.getHours()
-      : null
 
-    const selectedMinutes = date ? date.getMinutes() : null
-
-    const selectedSeconds = date ? date.getSeconds() : null
+      date && setAmPm(getAmPm(new Date(date), locale))
+    }, [date])
 
     const handleClear = (event: React.MouseEvent<HTMLElement>) => {
       event.stopPropagation()
@@ -138,11 +119,9 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
 
       if (set === 'toggle') {
         if (value === 'am') {
-          setAmPm('am')
           _date.setHours(_date.getHours() - 12)
         }
         if (value === 'pm') {
-          setAmPm('pm')
           _date.setHours(_date.getHours() + 12)
         }
       }
@@ -164,38 +143,41 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       }
 
       setDate(new Date(_date))
-      onChange && onChange(_date.toTimeString(), _date.toLocaleTimeString(), _date)
+      onTimeChange && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date)
     }
 
     const InputGroup = () => (
       <CInputGroup className="picker-input-group" size={size}>
         <CFormInput
           disabled={disabled}
+          onChange={(event) =>
+            isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value))
+          }
           placeholder={placeholder}
           readOnly={inputReadOnly}
           ref={inputRef}
         />
-        {(defaultIcon !== false || cleaner) && (
+        {(indicator || cleaner) && (
           <CInputGroupText>
-            {defaultIcon !== false && (
+            {indicator && (
               <span className="picker-input-group-indicator">
-                {defaultIcon ? (
-                  defaultIcon
-                ) : (
+                {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)}
+                role="button"
               >
-                {cleanerIcon ? (
-                  cleanerIcon
-                ) : (
+                {typeof cleaner === 'boolean' ? (
                   <span className="picker-input-group-icon time-picker-cleaner-icon" />
+                ) : (
+                  cleaner
                 )}
               </span>
             )}
@@ -210,7 +192,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           <span className="time-picker-inline-icon" />
           <CFormSelect
             disabled={disabled}
-            options={getHours(locale).map((option) => {
+            options={getListOfHours(locale).map((option) => {
               return {
                 value: option.value.toString(),
                 label: option.label,
@@ -219,12 +201,12 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('hours', event.target.value)
             }
-            value={selectedHour ? selectedHour : '0'}
+            value={getSelectedHour(date, locale)}
           />
-          <span className="px-1">:</span>
+          <>:</>
           <CFormSelect
             disabled={disabled}
-            options={Array.from(new Array(60), (_, i) => {
+            options={Array.from({ length: 60 }, (_, i) => {
               return {
                 value: i.toString(),
                 label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
@@ -233,12 +215,12 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('minutes', event.target.value)
             }
-            value={selectedMinutes ? selectedMinutes : '0'}
+            value={getSelectedMinutes(date)}
           />
-          <span className="px-1">:</span>
+          <>:</>
           <CFormSelect
             disabled={disabled}
-            options={Array.from(new Array(60), (_, i) => {
+            options={Array.from({ length: 60 }, (_, i) => {
               return {
                 value: i.toString(),
                 label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
@@ -247,7 +229,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('seconds', event.target.value)
             }
-            value={selectedSeconds ? selectedSeconds : '0'}
+            value={getSelectedSeconds(date)}
           />
           {isAmPm(locale) && (
             <CFormSelect
@@ -269,19 +251,19 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const TimePickerRoll = () => (
       <>
         <CTimePickerRollCol
-          elements={getHours(locale)}
+          elements={getListOfHours(locale)}
           onClick={(index: number) => handleTimeChange('hours', index.toString())}
-          selected={selectedHour}
+          selected={getSelectedHour(date, locale)}
         />
         <CTimePickerRollCol
           elements={getMinutesOrSeconds(locale)}
-          selected={selectedMinutes}
           onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+          selected={getSelectedMinutes(date)}
         />
         <CTimePickerRollCol
           elements={getMinutesOrSeconds(locale)}
-          selected={selectedSeconds}
           onClick={(index: number) => handleTimeChange('seconds', index.toString())}
+          selected={getSelectedSeconds(date)}
         />
         {isAmPm(locale) && (
           <CTimePickerRollCol
@@ -289,8 +271,8 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               { value: 'am', label: 'AM' },
               { value: 'pm', label: 'PM' },
             ]}
-            selected={_ampm}
             onClick={(value: string) => handleTimeChange('toggle', value)}
+            selected={_ampm}
           />
         )}
       </>
@@ -304,14 +286,11 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         container={container}
         disabled={disabled}
         footer={footer}
-        onCancelClick={() => {
-          setDate(
-            value
-              ? value instanceof Date
-                ? new Date(value)
-                : new Date(`1970-01-01 ${value}`)
-              : new Date(),
-          )
+        onCancel={() => initialDate && setDate(new Date(initialDate))}
+        onHide={() => onHide && onHide()}
+        onShow={() => {
+          date && setInitialDate(new Date(date))
+          onShow && onShow()
         }}
         toggler={InputGroup()}
         {...rest}
@@ -333,8 +312,8 @@ CTimePicker.propTypes = {
   ...CPicker.propTypes,
   className: PropTypes.string,
   locale: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  onTimeChange: PropTypes.func,
+  time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   variant: PropTypes.oneOf(['roll', 'select']),
 }
 

package/src/components/timepicker/CTimePickerRollCol.tsx

@@ -17,14 +17,20 @@ export interface CTimePickerRollColProps {
 
 export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColProps>(
   ({ elements, onClick, selected }, ref) => {
+    const init = useRef(true)
     const colRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, colRef)
 
     useEffect(() => {
       const nodeEl = colRef.current?.querySelector('.selected')
       if (nodeEl && nodeEl instanceof HTMLElement) {
-        colRef.current?.scrollTo({ top: nodeEl.offsetTop, behavior: 'smooth' })
+        colRef.current?.scrollTo({
+          top: nodeEl.offsetTop,
+          behavior: init.current ? 'auto' : 'smooth',
+        })
       }
+
+      init.current = false
     }, [selected])
 
     return (

package/src/components/timepicker/__tests__/CTimePicker.spec.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTimePicker } from '../CTimePicker'
+
+test('loads and displays CTimePicker component', async () => {
+  const { container } = render(<CTimePicker />)
+  expect(container).toMatchSnapshot()
+})

package/src/{components/calendar/CCalendar.utils.ts → utils/calendar.ts}

@@ -115,7 +115,12 @@ export const getMonthDetails = (year: number, month: number, firstDayOfWeek: num
   return weeks
 }
 
-export const isDisabled = (date: Date, min?: Date, max?: Date, dates?: Date[] | Date[][]) => {
+export const isDateDisabled = (
+  date: Date,
+  min?: Date | null,
+  max?: Date | null,
+  dates?: Date[] | Date[][],
+) => {
   let disabled
   if (dates) {
     dates.forEach((_date: Date | Date[]) => {
@@ -181,3 +186,8 @@ export const isToday = (date: Date) => {
     date.getFullYear() == today.getFullYear()
   )
 }
+
+export const isValidDate = (date: string) => {
+  const d = new Date(date)
+  return d instanceof Date && d.getTime()
+}

package/src/utils/time.ts

@@ -0,0 +1,58 @@
+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 convertTimeToDate = (time: Date | string | null | undefined) =>
+  time ? (time instanceof Date ? new Date(time) : new Date(`1970-01-01 ${time}`)) : null
+
+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 getListOfHours = (locale: string) =>
+  Array.from({ length: isAmPm(locale) ? 12 : 24 }, (_, i) => {
+    return {
+      value: isAmPm(locale) ? i + 1 : i,
+      label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
+    }
+  })
+
+export const getMinutesOrSeconds = (locale: string) =>
+  Array.from({ length: 60 }, (_, i) => {
+    return {
+      value: i,
+      label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
+    }
+  })
+
+export const getSelectedHour = (date: Date | null, locale: string) =>
+  date ? (isAmPm(locale) ? convert24hTo12h(date.getHours()) : date.getHours()) : ''
+
+export const getSelectedMinutes = (date: Date | null) => (date ? date.getMinutes() : '')
+
+export const getSelectedSeconds = (date: Date | null) => (date ? date.getSeconds() : '')
+
+export const isAmPm = (locale: string) =>
+  ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el))
+
+export const isValidTime = (time: string) => {
+  const d = new Date(`1970-01-01 ${time}`)
+  return d instanceof Date && d.getTime()
+}