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

package/src/components/smart-table/CSmartTableCleaner.tsx

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types'
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 
+import { cilFilterX } from '@coreui/icons-pro'
+
 import CIcon from '@coreui/icons-react'
 
 interface CSmartTableCleanerProps extends HTMLAttributes<HTMLButtonElement> {
@@ -9,22 +11,7 @@ interface CSmartTableCleanerProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 export const CSmartTableCleaner = forwardRef<HTMLButtonElement, CSmartTableCleanerProps>(
-  (
-    {
-      content = (
-        <CIcon
-          width={18}
-          icon={[
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16" class="ci-primary"></polygon><polygon fill="var(--ci-primary-color, currentColor)" points="166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225" class="ci-primary"></polygon>',
-          ]}
-        />
-      ),
-      isFiltered,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ content = <CIcon width={18} icon={cilFilterX} />, isFiltered, ...rest }, ref) => {
     return (
       <button
         type="button"

package/src/components/smart-table/CSmartTableInterface.tsx

@@ -59,8 +59,6 @@ export interface SorterValue {
 export interface TableFilter {
   lazy?: boolean
   external?: boolean
-  label?: string
-  placeholder?: string
 }
 
 export interface NoItemsView {
@@ -75,14 +73,9 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * @default 1
    */
   activePage?: number
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
   /**
    * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
    * Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleaner` slot.
-   *
    */
   cleaner?: boolean
   /**
@@ -276,8 +269,6 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * When set, displays table filter above table, allowing filtering by specific column.
    *
    * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
-   * - placeholder (String) - Sets custom table filter placeholder.
-   * - label (String) - Sets custom table filter label.
    * - external (Boolean) - Disables automatic filtering inside component.
    * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
    */

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))

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'
@@ -115,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'
@@ -140,6 +144,7 @@ export {
   CButton,
   CButtonGroup,
   CButtonToolbar,
+  CCalendar,
   CCallout,
   CCard,
   CCardBody,
@@ -156,6 +161,8 @@ export {
   CCarouselItem,
   CCloseButton,
   CCollapse,
+  CDatePicker,
+  CDateRangePicker,
   CDropdown,
   CDropdownDivider,
   CDropdownHeader,
@@ -240,6 +247,7 @@ export {
   CTableRow,
   CTabContent,
   CTabPane,
+  CTimePicker,
   CToast,
   CToastBody,
   CToastClose,