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

package/src/components/timepicker/CTimePickerRollCol.tsx

@@ -0,0 +1,57 @@
+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 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' })
+      }
+    }, [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/index.ts

@@ -15,6 +15,7 @@ import { CBreadcrumbItem } from './components/breadcrumb/CBreadcrumbItem'
 import { CButton } from './components/button/CButton'
 import { CButtonGroup } from './components/button-group/CButtonGroup'
 import { CButtonToolbar } from './components/button-group/CButtonToolbar'
+import { CCalendar } from './components/calendar/CCalendar'
 import { CCallout } from './components/callout/CCallout'
 import { CCard } from './components/card/CCard'
 import { CCardBody } from './components/card/CCardBody'
@@ -32,6 +33,8 @@ import { CCarouselCaption } from './components/carousel/CCarouselCaption'
 import { CCarouselItem } from './components/carousel/CCarouselItem'
 import { CCollapse } from './components/collapse/CCollapse'
 import { CCloseButton } from './components/close-button/CCloseButton'
+import { CDatePicker } from './components/datepicker/CDatePicker'
+import { CDateRangePicker } from './components/daterangepicker/CDateRangePicker'
 import { CDropdown } from './components/dropdown/CDropdown'
 import { CDropdownDivider } from './components/dropdown/CDropdownDivider'
 import { CDropdownHeader } from './components/dropdown/CDropdownHeader'
@@ -39,7 +42,6 @@ import { CDropdownItem } from './components/dropdown/CDropdownItem'
 import { CDropdownItemPlain } from './components/dropdown/CDropdownItemPlain'
 import { CDropdownMenu } from './components/dropdown/CDropdownMenu'
 import { CDropdownToggle } from './components/dropdown/CDropdownToggle'
-import { CDropdownToggleCustom } from './components/dropdown/CDropdownToggleCustom'
 import { CCol } from './components/grid/CCol'
 import { CContainer } from './components/grid/CContainer'
 import { CRow } from './components/grid/CRow'
@@ -116,6 +118,7 @@ import { CTableHeaderCell } from './components/table/CTableHeaderCell'
 import { CTableRow } from './components/table/CTableRow'
 import { CTabContent } from './components/tabs/CTabContent'
 import { CTabPane } from './components/tabs/CTabPane'
+import { CTimePicker } from './components/timepicker/CTimePicker'
 import { CToast } from './components/toast/CToast'
 import { CToastBody } from './components/toast/CToastBody'
 import { CToastClose } from './components/toast/CToastClose'
@@ -141,6 +144,7 @@ export {
   CButton,
   CButtonGroup,
   CButtonToolbar,
+  CCalendar,
   CCallout,
   CCard,
   CCardBody,
@@ -157,6 +161,8 @@ export {
   CCarouselItem,
   CCloseButton,
   CCollapse,
+  CDatePicker,
+  CDateRangePicker,
   CDropdown,
   CDropdownDivider,
   CDropdownHeader,
@@ -164,7 +170,6 @@ export {
   CDropdownItemPlain,
   CDropdownMenu,
   CDropdownToggle,
-  CDropdownToggleCustom,
   CCol,
   CContainer,
   CRow,
@@ -242,6 +247,7 @@ export {
   CTableRow,
   CTabContent,
   CTabPane,
+  CTimePicker,
   CToast,
   CToastBody,
   CToastClose,

package/src/components/dropdown/CDropdownToggleCustom.tsx

@@ -1,81 +0,0 @@
-import React, { FC, HTMLAttributes, useContext } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Reference } from 'react-popper'
-
-import { Triggers, triggerPropType } from '../Types'
-
-import { CDropdownContext } from './CDropdown'
-
-export interface CDropdownToggleCustomProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
-   *
-   * @type 'hover' | 'focus' | 'click'
-   */
-  trigger?: Triggers | Triggers[]
-}
-
-export const CDropdownToggleCustom: FC<CDropdownToggleCustomProps> = ({
-  children,
-  className,
-  disabled,
-  trigger = 'click',
-  ...rest
-}) => {
-  const { popper, visible, setVisible } = useContext(CDropdownContext)
-  const _className = classNames(className)
-
-  const triggers = {
-    ...((trigger === 'click' || trigger.includes('click')) &&
-      !disabled && {
-        onClick: (event: React.MouseEvent<HTMLElement>) => {
-          event.preventDefault()
-          setVisible(!visible)
-        },
-      }),
-    ...((trigger === 'click-init' || trigger.includes('click-init')) &&
-      !disabled && {
-        onClick: (event: React.MouseEvent<HTMLElement>) => {
-          event.preventDefault()
-          setVisible(true)
-        },
-      }),
-    ...((trigger === 'focus' || trigger.includes('focus')) &&
-      !disabled && {
-        onFocus: () => setVisible(true),
-        onBlur: () => setVisible(false),
-      }),
-  }
-
-  const togglerProps = {
-    className: _className,
-    'aria-expanded': visible,
-    ...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 (
-      <div {...togglerProps} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  }
-
-  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler()
-}
-
-CDropdownToggleCustom.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  trigger: triggerPropType,
-}
-
-CDropdownToggleCustom.displayName = 'CDropdownToggleCustom'