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

package/src/components/dropdown/CDropdownMenu.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { ElementType, FC, HTMLAttributes, useContext } from 'react'
+import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
@@ -35,7 +35,57 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   component: Component = 'ul',
   ...rest
 }) => {
-  const { alignment, dark, direction, placement, popper, visible } = useContext(CDropdownContext)
+  const {
+    alignment,
+    autoClose,
+    dark,
+    direction,
+    dropdownToggleRef,
+    placement,
+    popper,
+    visible,
+    setVisible,
+  } = useContext(CDropdownContext)
+
+  const dropdownMenuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    visible && window.addEventListener('mouseup', handleMouseUp)
+    visible && window.addEventListener('keyup', handleKeyup)
+
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+    }
+  }, [visible])
+
+  const handleKeyup = (event: Event) => {
+    if (autoClose === false) {
+      return
+    }
+    if (!dropdownMenuRef.current?.contains(event.target as HTMLElement)) {
+      setVisible(false)
+    }
+  }
+  const handleMouseUp = (event: Event) => {
+    if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+      return
+    }
+    if (autoClose === true) {
+      setVisible(false)
+      return
+    }
+    if (autoClose === 'inside' && dropdownMenuRef.current?.contains(event.target as HTMLElement)) {
+      setVisible(false)
+      return
+    }
+    if (
+      autoClose === 'outside' &&
+      !dropdownMenuRef.current?.contains(event.target as HTMLElement)
+    ) {
+      setVisible(false)
+    }
+  }
 
   let _placement: Placements = placement
 
@@ -101,7 +151,9 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   }
 
   return popper && visible ? (
-    <Popper placement={_placement}>{({ ref, style }) => dropdownMenuComponent(style, ref)}</Popper>
+    <Popper innerRef={dropdownMenuRef} placement={_placement}>
+      {({ ref, style }) => dropdownMenuComponent(style, ref)}
+    </Popper>
   ) : (
     dropdownMenuComponent()
   )

package/src/components/dropdown/CDropdownToggle.tsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
+import { useForkedRef } from '../../utils/hooks'
+
 import { Triggers, triggerPropType } from '../Types'
 
 import { CButton, CButtonProps } from '../button/CButton'
@@ -13,6 +15,10 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    * Enables pseudo element caret on toggler.
    */
   caret?: boolean
+  /**
+   * Create a custom toggler which accepts any content.
+   */
+  custom?: boolean
   /**
    * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
    */
@@ -28,12 +34,13 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
 export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   children,
   caret = true,
+  custom,
   className,
   split,
   trigger = 'click',
   ...rest
 }) => {
-  const { popper, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, popper, variant, visible, setVisible } = useContext(CDropdownContext)
   const _className = classNames(
     {
       'dropdown-toggle': caret,
@@ -59,31 +66,47 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const togglerProps = {
     className: _className,
     'aria-expanded': visible,
+    ...(!rest.disabled && { ...triggers }),
     ...triggers,
   }
 
   // We use any because Toggler can be `a` as well as `button`.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Toggler = (ref?: React.Ref<any>) => {
-    return variant === 'nav-item' ? (
-      <a href="#" {...togglerProps} ref={ref}>
+    return custom && React.isValidElement(children) ? (
+      <>
+        {React.cloneElement(children, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: useForkedRef(ref, dropdownToggleRef),
+        })}
+      </>
+    ) : variant === 'nav-item' ? (
+      <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
         {children}
       </a>
     ) : (
-      <CButton type="button" {...togglerProps} tabIndex={0} {...rest} ref={ref}>
+      <CButton
+        type="button"
+        {...togglerProps}
+        tabIndex={0}
+        {...rest}
+        ref={useForkedRef(ref, dropdownToggleRef)}
+      >
         {children}
         {split && <span className="visually-hidden">Toggle Dropdown</span>}
       </CButton>
     )
   }
 
-  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler()
+  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler(dropdownToggleRef)
 }
 
 CDropdownToggle.propTypes = {
   caret: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  custom: PropTypes.bool,
   split: PropTypes.bool,
   trigger: triggerPropType,
 }

package/src/components/picker/CPicker.tsx

@@ -0,0 +1,142 @@
+import React, { forwardRef, ReactNode, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CButton } from '../button/CButton'
+import { CDropdown, CDropdownProps } from '../dropdown/CDropdown'
+import { CDropdownMenu } from '../dropdown/CDropdownMenu'
+import { CDropdownToggle } from '../dropdown/CDropdownToggle'
+
+export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
+  /**
+   * Cancel button text.
+   */
+  cancelButtonText?: ReactNode
+  /**
+   * Set container type for the component.
+   */
+  container?: 'dropdown' | 'inline'
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean
+  /**
+   * 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
+  /**
+   * Callback fired when the ok button has been clicked.
+   */
+  onOkClick?: () => void
+  /**
+   * The content of toggler.
+   */
+  toggler?: ReactNode
+}
+
+export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
+  (
+    {
+      children,
+      cancelButtonText = 'Cancel',
+      className,
+      container = 'dropdown',
+      disabled,
+      footer,
+      okButtonText = 'OK',
+      onCancelClick,
+      onOkClick,
+      onHide,
+      onShow,
+      toggler: Toggler,
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_visible, setVisible] = useState(visible)
+
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
+
+    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>
+      </>
+    )
+
+    const _className = classNames('picker', className)
+
+    switch (container) {
+      case 'inline':
+        return <div className={_className}>{children}</div>
+      default:
+        return (
+          <CDropdown
+            autoClose="outside"
+            className={_className}
+            onHide={() => {
+              setVisible(false)
+              onHide && onHide()
+            }}
+            onShow={() => {
+              setVisible(true)
+              onShow && onShow()
+            }}
+            variant="dropdown"
+            visible={_visible}
+            {...rest}
+            ref={ref}
+          >
+            <CDropdownToggle custom disabled={_visible || disabled}>
+              {Toggler}
+            </CDropdownToggle>
+            <CDropdownMenu component="div">
+              {children}
+              {footer && (
+                <div className="picker-footer">
+                  {typeof footer === 'boolean' ? Footer() : footer}
+                </div>
+              )}
+            </CDropdownMenu>
+          </CDropdown>
+        )
+    }
+  },
+)
+
+CPicker.displayName = 'CPicker'
+
+CPicker.propTypes = {
+  ...CDropdown.propTypes,
+  container: PropTypes.oneOf(['dropdown', 'inline']),
+  disabled: PropTypes.bool,
+  onCancelClick: PropTypes.func,
+  onOkClick: PropTypes.func,
+}

package/src/components/timepicker/CTimePicker.tsx

@@ -0,0 +1,341 @@
+/* eslint-disable react/prop-types */
+import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CFormInput } from '../form/CFormInput'
+import { CFormSelect } from '../form/CFormSelect'
+import { CInputGroup } from '../form/CInputGroup'
+import { CInputGroupText } from '../form/CInputGroupText'
+
+import { CTimePickerRollCol } from './CTimePickerRollCol'
+import { CPicker, CPickerProps } from './../picker/CPicker'
+import { convert12hTo24h, convert24hTo12h, getAmPm, isAmPm } from './CTimePicker.utils'
+
+export interface CTimePickerProps
+  extends Omit<
+    CPickerProps,
+    'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant' | 'onChange'
+  > {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+  /**
+   * Enables selection cleaner element.
+   */
+  cleaner?: boolean
+  /**
+   * Cleaner icon.
+   */
+  cleanerIcon?: ReactNode | boolean
+  /**
+   * Default input icon.
+   */
+  defaultIcon?: 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.
+   */
+  locale?: string
+  /**
+   * Callback fired when the user hovers over the calendar cell.
+   */
+  onChange?: (timeString: string, localeTimeString: string, date: Date) => void
+  /**
+   * Specifies a short hint that is visible in the input.
+   */
+  placeholder?: string
+  /**
+   * Size the component small or large.
+   */
+  size?: 'sm' | 'lg'
+  /**
+   * Default value of the component
+   */
+  value?: Date | string | null
+  /**
+   * Set the time picker variant to a roll or select.
+   */
+  variant?: 'roll' | 'select'
+}
+
+export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePickerProps>(
+  (
+    {
+      className,
+      cleaner = true,
+      cleanerIcon,
+      container = 'dropdown',
+      defaultIcon,
+      disabled,
+      footer = true,
+      inputReadOnly,
+      locale = typeof navigator === 'undefined' ? 'en-US' : navigator.language,
+      onChange,
+      placeholder = 'Select time',
+      size,
+      value,
+      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 [_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])
+
+    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
+
+    const handleClear = (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation()
+      setDate(null)
+    }
+
+    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
+      const _date = date || new Date('1970-01-01')
+
+      if (set === 'toggle') {
+        if (value === 'am') {
+          setAmPm('am')
+          _date.setHours(_date.getHours() - 12)
+        }
+        if (value === 'pm') {
+          setAmPm('pm')
+          _date.setHours(_date.getHours() + 12)
+        }
+      }
+
+      if (set === 'hours') {
+        if (isAmPm(locale)) {
+          _date.setHours(convert12hTo24h(_ampm, parseInt(value)))
+        } else {
+          _date.setHours(parseInt(value))
+        }
+      }
+
+      if (set === 'minutes') {
+        _date.setMinutes(parseInt(value))
+      }
+
+      if (set === 'seconds') {
+        _date.setSeconds(parseInt(value))
+      }
+
+      setDate(new Date(_date))
+      onChange && onChange(_date.toTimeString(), _date.toLocaleTimeString(), _date)
+    }
+
+    const InputGroup = () => (
+      <CInputGroup className="picker-input-group" size={size}>
+        <CFormInput
+          disabled={disabled}
+          placeholder={placeholder}
+          readOnly={inputReadOnly}
+          ref={inputRef}
+        />
+        {(defaultIcon !== false || cleaner) && (
+          <CInputGroupText>
+            {defaultIcon !== false && (
+              <span className="picker-input-group-indicator">
+                {defaultIcon ? (
+                  defaultIcon
+                ) : (
+                  <span className="picker-input-group-icon time-picker-input-icon" />
+                )}
+              </span>
+            )}
+            {cleaner && date && (
+              <span
+                className="picker-input-group-cleaner"
+                role="button"
+                onClick={(event) => handleClear(event)}
+              >
+                {cleanerIcon ? (
+                  cleanerIcon
+                ) : (
+                  <span className="picker-input-group-icon time-picker-cleaner-icon" />
+                )}
+              </span>
+            )}
+          </CInputGroupText>
+        )}
+      </CInputGroup>
+    )
+
+    const TimePickerSelect = () => {
+      return (
+        <>
+          <span className="time-picker-inline-icon" />
+          <CFormSelect
+            disabled={disabled}
+            options={getHours(locale).map((option) => {
+              return {
+                value: option.value.toString(),
+                label: option.label,
+              }
+            })}
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+              handleTimeChange('hours', event.target.value)
+            }
+            value={selectedHour ? selectedHour : '0'}
+          />
+          <span className="px-1">:</span>
+          <CFormSelect
+            disabled={disabled}
+            options={Array.from(new Array(60), (_, i) => {
+              return {
+                value: i.toString(),
+                label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
+              }
+            })}
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+              handleTimeChange('minutes', event.target.value)
+            }
+            value={selectedMinutes ? selectedMinutes : '0'}
+          />
+          <span className="px-1">:</span>
+          <CFormSelect
+            disabled={disabled}
+            options={Array.from(new Array(60), (_, i) => {
+              return {
+                value: i.toString(),
+                label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
+              }
+            })}
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+              handleTimeChange('seconds', event.target.value)
+            }
+            value={selectedSeconds ? selectedSeconds : '0'}
+          />
+          {isAmPm(locale) && (
+            <CFormSelect
+              disabled={disabled}
+              options={[
+                { value: 'am', label: 'AM' },
+                { value: 'pm', label: 'PM' },
+              ]}
+              onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+                handleTimeChange('toggle', event.target.value)
+              }
+              value={_ampm}
+            />
+          )}
+        </>
+      )
+    }
+
+    const TimePickerRoll = () => (
+      <>
+        <CTimePickerRollCol
+          elements={getHours(locale)}
+          onClick={(index: number) => handleTimeChange('hours', index.toString())}
+          selected={selectedHour}
+        />
+        <CTimePickerRollCol
+          elements={getMinutesOrSeconds(locale)}
+          selected={selectedMinutes}
+          onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+        />
+        <CTimePickerRollCol
+          elements={getMinutesOrSeconds(locale)}
+          selected={selectedSeconds}
+          onClick={(index: number) => handleTimeChange('seconds', index.toString())}
+        />
+        {isAmPm(locale) && (
+          <CTimePickerRollCol
+            elements={[
+              { value: 'am', label: 'AM' },
+              { value: 'pm', label: 'PM' },
+            ]}
+            selected={_ampm}
+            onClick={(value: string) => handleTimeChange('toggle', value)}
+          />
+        )}
+      </>
+    )
+
+    const _className = classNames('time-picker', className)
+
+    return (
+      <CPicker
+        className={_className}
+        container={container}
+        disabled={disabled}
+        footer={footer}
+        onCancelClick={() => {
+          setDate(
+            value
+              ? value instanceof Date
+                ? new Date(value)
+                : new Date(`1970-01-01 ${value}`)
+              : new Date(),
+          )
+        }}
+        toggler={InputGroup()}
+        {...rest}
+        ref={ref}
+      >
+        <div
+          className={classNames('time-picker-body', {
+            ['time-picker-roll']: variant === 'roll',
+          })}
+        >
+          {variant === 'select' ? <TimePickerSelect /> : TimePickerRoll()}
+        </div>
+      </CPicker>
+    )
+  },
+)
+
+CTimePicker.propTypes = {
+  ...CPicker.propTypes,
+  className: PropTypes.string,
+  locale: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  variant: PropTypes.oneOf(['roll', 'select']),
+}
+
+CTimePicker.displayName = 'CTimePicker'

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

@@ -0,0 +1,27 @@
+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))