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

package/src/components/timepicker/CTimePicker.tsx

@@ -0,0 +1,313 @@
+/* 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,
+  convertTimeToDate,
+  getAmPm,
+  getListOfHours,
+  getListOfMinutes,
+  getListOfSeconds,
+  getSelectedHour,
+  getSelectedMinutes,
+  getSelectedSeconds,
+  isAmPm,
+  isValidTime,
+} from '../../utils/time'
+
+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
+  /**
+   * Toggle visibility or set the content of the cleaner button.
+   */
+  cleaner?: ReactNode | boolean
+  /**
+   * Toggle visibility or set the content of the input indicator.
+   */
+  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 browser.
+   */
+  locale?: string
+  /**
+   * Callback fired when the time changed.
+   */
+  onTimeChange?: (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'
+  /**
+   * Initial selected time.
+   */
+  time?: 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,
+      container = 'dropdown',
+      disabled,
+      footer = true,
+      indicator = true,
+      inputReadOnly,
+      locale = 'default',
+      onTimeChange,
+      onHide,
+      onShow,
+      placeholder = 'Select time',
+      size,
+      time,
+      variant = 'roll',
+      ...rest
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(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(convertTimeToDate(time))
+    }, [time])
+
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.value = date ? date.toLocaleTimeString(locale) : ''
+      }
+
+      date && setAmPm(getAmPm(new Date(date), locale))
+    }, [date])
+
+    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') {
+          _date.setHours(_date.getHours() - 12)
+        }
+        if (value === '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))
+      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}
+        />
+        {(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>
+    )
+
+    const TimePickerSelect = () => {
+      return (
+        <>
+          <span className="time-picker-inline-icon" />
+          <CFormSelect
+            disabled={disabled}
+            options={getListOfHours(locale).map((option) => {
+              return {
+                value: option.value.toString(),
+                label: option.label,
+              }
+            })}
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+              handleTimeChange('hours', event.target.value)
+            }
+            value={getSelectedHour(date, locale)}
+          />
+          <>:</>
+          <CFormSelect
+            disabled={disabled}
+            // @ts-expect-error the getListOfMinutes function returns corect type
+            options={getListOfMinutes(locale, true)}
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+              handleTimeChange('minutes', event.target.value)
+            }
+            value={getSelectedMinutes(date)}
+          />
+          <>:</>
+          <CFormSelect
+            disabled={disabled}
+            // @ts-expect-error the getListOfSeconds function returns corect type
+            options={getListOfSeconds(locale, true)}
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+              handleTimeChange('seconds', event.target.value)
+            }
+            value={getSelectedSeconds(date)}
+          />
+          {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={getListOfHours(locale)}
+          onClick={(index: number) => handleTimeChange('hours', index.toString())}
+          selected={getSelectedHour(date, locale)}
+        />
+        <CTimePickerRollCol
+          elements={getListOfMinutes(locale)}
+          onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+          selected={getSelectedMinutes(date)}
+        />
+        <CTimePickerRollCol
+          elements={getListOfSeconds(locale)}
+          onClick={(index: number) => handleTimeChange('seconds', index.toString())}
+          selected={getSelectedSeconds(date)}
+        />
+        {isAmPm(locale) && (
+          <CTimePickerRollCol
+            elements={[
+              { value: 'am', label: 'AM' },
+              { value: 'pm', label: 'PM' },
+            ]}
+            onClick={(value: string) => handleTimeChange('toggle', value)}
+            selected={_ampm}
+          />
+        )}
+      </>
+    )
+
+    const _className = classNames('time-picker', className)
+
+    return (
+      <CPicker
+        className={_className}
+        container={container}
+        disabled={disabled}
+        footer={footer}
+        onCancel={() => initialDate && setDate(new Date(initialDate))}
+        onHide={() => onHide && onHide()}
+        onShow={() => {
+          date && setInitialDate(new Date(date))
+          onShow && onShow()
+        }}
+        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,
+  onTimeChange: PropTypes.func,
+  time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  variant: PropTypes.oneOf(['roll', 'select']),
+}
+
+CTimePicker.displayName = 'CTimePicker'

package/src/components/timepicker/CTimePickerRollCol.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { useForkedRef } from '../../utils/hooks'
+
+export interface Element {
+  value: number | string
+  label: number | string
+}
+
+export interface CTimePickerRollColProps {
+  elements: Element[]
+  onClick?: (value: number | string) => void
+  selected?: number | string | null
+}
+
+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: init.current ? 'auto' : 'smooth',
+        })
+      }
+
+      init.current = false
+    }, [selected])
+
+    return (
+      <div className="time-picker-roll-col" ref={forkedRef}>
+        {elements.map((element, index) => {
+          return (
+            <div
+              className={classNames('time-picker-roll-cell', {
+                selected: element.value === selected,
+              })}
+              key={index}
+              onClick={() => onClick && onClick(element.value)}
+              role="button"
+            >
+              {element.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  },
+)
+
+CTimePickerRollCol.propTypes = {
+  elements: PropTypes.array.isRequired,
+  onClick: PropTypes.func,
+  selected: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+}
+
+CTimePickerRollCol.displayName = 'CTimePickerRollCol'

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/timepicker/index.ts

@@ -0,0 +1,3 @@
+import { CTimePicker } from './CTimePicker'
+
+export { CTimePicker }

package/src/components/toast/CToast.tsx

@@ -12,6 +12,8 @@ import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * Apply a CSS fade transition to the toast.
@@ -82,6 +84,8 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
     },
     ref,
   ) => {
+    const toastRef = useRef()
+    const forkedRef = useForkedRef(ref, toastRef)
     const [_visible, setVisible] = useState(false)
     const timeout = useRef<number>()
 
@@ -133,6 +137,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
     return (
       <Transition
         in={_visible}
+        nodeRef={toastRef}
         onEnter={() => onShow && onShow(index ? index : null)}
         onExited={() => onClose && onClose(index ? index : null)}
         timeout={250}
@@ -151,7 +156,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
                 onMouseLeave={() => _autohide}
                 {...rest}
                 key={key}
-                ref={ref}
+                ref={forkedRef}
               >
                 {children}
               </div>

package/src/components/toast/index.ts

@@ -0,0 +1,7 @@
+import { CToast } from './CToast'
+import { CToastBody } from './CToastBody'
+import { CToastClose } from './CToastClose'
+import { CToastHeader } from './CToastHeader'
+import { CToaster } from './CToaster'
+
+export { CToast, CToastBody, CToastClose, CToastHeader, CToaster }

package/src/components/tooltip/CTooltip.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react'
+import React, { FC, ReactNode, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -9,7 +9,7 @@ import { Transition } from 'react-transition-group'
 import { Triggers, triggerPropType } from '../Types'
 
 export interface CTooltipProps {
-  children: ReactElement
+  children: any
   /**
    * Content node for your component.
    */
@@ -48,6 +48,7 @@ export const CTooltip: FC<CTooltipProps> = ({
   visible,
   ...rest
 }) => {
+  const tooltipRef = useRef()
   const [_visible, setVisible] = useState(visible)
 
   const getTransitionClass = (state: string) => {
@@ -62,64 +63,71 @@ export const CTooltip: FC<CTooltipProps> = ({
 
   return (
     <Manager>
-      <Reference>
-        {({ ref }) =>
-          React.cloneElement(children, {
-            ref: ref,
-            ...((trigger === 'click' || trigger.includes('click')) && {
-              onClick: () => setVisible(!_visible),
-            }),
-            ...((trigger === 'focus' || trigger.includes('focus')) && {
-              onFocus: () => setVisible(true),
-              onBlur: () => setVisible(false),
-            }),
-            ...((trigger === 'hover' || trigger.includes('hover')) && {
-              onMouseEnter: () => setVisible(true),
-              onMouseLeave: () => setVisible(false),
-            }),
-          })
-        }
-      </Reference>
-      {typeof window !== 'undefined' &&
-        createPortal(
-          <Transition
-            in={_visible}
-            mountOnEnter
-            onEnter={onShow}
-            onExit={onHide}
-            timeout={{
-              enter: 0,
-              exit: 200,
-            }}
-            unmountOnExit
-          >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return (
-                <Popper placement={placement}>
-                  {({ arrowProps, style, ref }) => (
-                    <div
-                      className={classNames(
-                        `tooltip bs-tooltip-${
-                          placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                        }`,
-                        transitionClass,
-                      )}
-                      ref={ref}
-                      role="tooltip"
-                      style={style}
-                      {...rest}
-                    >
-                      <div className="tooltip-arrow" {...arrowProps}></div>
-                      <div className="tooltip-inner">{content}</div>
-                    </div>
-                  )}
-                </Popper>
-              )
-            }}
-          </Transition>,
-          document.body,
-        )}
+      <>
+        <Reference>
+          {({ ref }) =>
+            React.cloneElement(children, {
+              ref: ref,
+              ...((trigger === 'click' || trigger.includes('click')) && {
+                onClick: () => setVisible(!_visible),
+              }),
+              ...((trigger === 'focus' || trigger.includes('focus')) && {
+                onFocus: () => setVisible(true),
+                onBlur: () => setVisible(false),
+              }),
+              ...((trigger === 'hover' || trigger.includes('hover')) && {
+                onMouseEnter: () => setVisible(true),
+                onMouseLeave: () => setVisible(false),
+              }),
+            })
+          }
+        </Reference>
+        {typeof window !== 'undefined' &&
+          createPortal(
+            <Transition
+              in={_visible}
+              mountOnEnter
+              nodeRef={tooltipRef}
+              onEnter={onShow}
+              onExit={onHide}
+              timeout={{
+                enter: 0,
+                exit: 200,
+              }}
+              unmountOnExit
+            >
+              {(state) => {
+                const transitionClass = getTransitionClass(state)
+                return (
+                  <Popper placement={placement}>
+                    {({ arrowProps, style, ref }) => (
+                      <div
+                        className={classNames(
+                          `tooltip bs-tooltip-${
+                            placement === 'left'
+                              ? 'start'
+                              : placement === 'right'
+                              ? 'end'
+                              : placement
+                          }`,
+                          transitionClass,
+                        )}
+                        ref={ref}
+                        role="tooltip"
+                        style={style}
+                        {...rest}
+                      >
+                        <div className="tooltip-arrow" {...arrowProps}></div>
+                        <div className="tooltip-inner">{content}</div>
+                      </div>
+                    )}
+                  </Popper>
+                )
+              }}
+            </Transition>,
+            document.body,
+          )}
+      </>
     </Manager>
   )
 }

package/src/components/tooltip/index.ts

@@ -0,0 +1,3 @@
+import { CTooltip } from './CTooltip'
+
+export { CTooltip }