8000 refactor: improve typings · coreui/coreui-react@f451d62 · GitHub
[go: up one dir, main page]
Skip to content

Commit f451d62

Browse files
mrholekmrholek
committed
refactor: improve typings
1 parent 57b0f90 commit f451d62

File tree

8 files changed

+50
-44
lines changed
  • packages/coreui-react/src
    • components
      • carousel
        • < 8000 div id=":R2qbartddab:" class="PRIVATE_TreeView-item-content prc-TreeView-TreeViewItemContent-f0r0b">CCarouselItem.tsx
  • dropdown
  • sidebar
  • tabs
  • toast
  • hooks

    • 8 files changed

    +50
    -44
    lines changed

    ‎packages/coreui-react/src/components/carousel/CCarouselItem.tsx

    Lines changed: 3 additions & 3 deletions
    Original file line numberDiff line numberDiff line change
    @@ -29,7 +29,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
    2929
    const carouselItemRef = useRef<HTMLDivElement>(null)
    3030
    const forkedRef = useForkedRef(ref, carouselItemRef)
    3131

    32-
    const prevActive = useRef<boolean>()
    32+
    const prevActive = useRef<boolean>(undefined)
    3333
    const [directionClassName, setDirectionClassName] = useState<string>()
    3434
    const [orderClassName, setOrderClassName] = useState<string>()
    3535
    const [activeClassName, setActiveClassName] = useState(active && 'active')
    @@ -101,15 +101,15 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
    101101
    activeClassName,
    102102
    directionClassName,
    103103
    orderClassName,
    104-
    className,
    104+
    className
    105105
    )}
    106106
    ref={forkedRef}
    107107
    {...rest}
    108108
    >
    109109
    {children}
    110110
    </div>
    111111
    )
    112-
    },
    112+
    }
    113113
    )
    114114

    115115
    CCarouselItem.propTypes = {

    ‎packages/coreui-react/src/components/dropdown/CDropdown.tsx

    Lines changed: 2 additions & 2 deletions
    Original file line numberDiff line numberDiff line change
    @@ -171,8 +171,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    171171

    172172
    interface ContextProps extends CDropdownProps {
    173173
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    174-
    dropdownToggleRef: RefObject<any | undefined>
    175-
    dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | undefined>
    174+
    dropdownToggleRef: RefObject<any | null>
    175+
    dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
    176176
    setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
    177177
    portal: boolean
    178178
    }

    ‎packages/coreui-react/src/components/sidebar/CSidebarNav.tsx

    Lines changed: 24 additions & 19 deletions
    Original file line numberDiff line numberDiff line change
    @@ -10,6 +10,9 @@ import React, {
    1010
    import PropTypes from 'prop-types'
    1111
    import classNames from 'classnames'
    1212

    13+
    import type { CNavGroupProps } from '../nav/CNavGroup'
    14+
    import type { CNavLinkProps } from '../nav/CNavLink'
    15+
    import type { CNavItemProps } from '../nav/CNavItem'
    1316
    import { PolymorphicRefForwardingComponent } from '../../helpers'
    1417

    1518
    export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
    @@ -32,35 +35,37 @@ interface ContextProps {
    3235

    3336
    export const CNavContext = createContext({} as ContextProps)
    3437

    38+
    const isNavElement = (
    39+
    child: ReactNode
    40+
    ): child is ReactElement<CNavGroupProps | CNavLinkProps | CNavItemProps> => {
    41+
    if (!React.isValidElement(child)) return false
    42+
    const type = child.type as { displayName?: string }
    43+
    return (
    44+
    type.displayName === 'CNavGroup' ||
    45+
    type.displayName === 'CNavLink' ||
    46+
    type.displayName === 'CNavItem'
    47+
    )
    48+
    }
    49+
    3550
    const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
    36-
    return React.Children.map(children, (child: ReactNode, index: number) => {
    37-
    if (
    38-
    !React.isValidElement(child) ||
    39-
    // @ts-expect-error the `children` exist in each component. TODO: resolve
    40-
    (child.type.displayName !== 'CNavGroup' &&
    41-
    // @ts-expect-error the `children` exist in each component. TODO: resolve
    42-
    child.type.displayName !== 'CNavLink' &&
    43-
    // @ts-expect-error the `children` exist in each component. TODO: resolve
    44-
    child.type.displayName !== 'CNavItem')
    45-
    ) {
    51+
    return React.Children.map(children, (child, index) => {
    52+
    if (!isNavElement(child)) {
    4653
    return child
    4754
    }
    4855

    4956
    const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
    5057

    51-
    if (child.props && child.props.children) {
    52-
    return React.cloneElement(child as ReactElement<any>, {
    58+
    if (child.props.children) {
    59+
    const type = child.type as { displayName?: string }
    60+
    const shouldUpdateId = type.displayName !== 'CNavItem'
    61+
    62+
    return React.cloneElement(child, {
    5363
    idx: _id,
    54-
    children: recursiveClone(
    55-
    child.props.children,
    56-
    _id,
    57-
    // @ts-expect-error the `displayName` exist in each component. TODO: resolve
    58-
    child.type.displayName === 'CNavItem' ? false : true,
    59-
    ),
    64+
    children: recursiveClone(child.props.children, _id, shouldUpdateId),
    6065
    })
    6166
    }
    6267

    63-
    return React.cloneElement(child as ReactElement<any>, {
    68+
    return React.cloneElement(child, {
    6469
    idx: _id,
    6570
    })
    6671
    })

    ‎packages/coreui-react/src/components/tabs/CTabPane.tsx

    Lines changed: 1 addition & 1 deletion
    Original file line numberDiff line numberDiff line change
    @@ -32,7 +32,7 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
    3232

    3333
    export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
    3434
    ({ children, className, onHide, onShow, transition = true, visible, ...rest }, ref) => {
    35-
    const tabPaneRef = useRef()
    35+
    const tabPaneRef = useRef(null)
    3636
    const forkedRef = useForkedRef(ref, tabPaneRef)
    3737

    3838
    return (

    ‎packages/coreui-react/src/components/tabs/CTabPanel.tsx

    Lines changed: 1 addition & 1 deletion
    Original file line numberDiff line numberDiff line change
    @@ -38,7 +38,7 @@ export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
    3838
    ({ children, className, itemKey, onHide, onShow, transition = true, visible, ...rest }, ref) => {
    3939
    const { _activeItemKey, id } = useContext(TabsContext)
    4040

    41-
    const tabPaneRef = useRef()
    41+
    const tabPaneRef = useRef(null)
    4242
    const forkedRef = useForkedRef(ref, tabPaneRef)
    4343

    4444
    const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey)

    ‎packages/coreui-react/src/components/toast/CToast.tsx

    Lines changed: 6 additions & 9 deletions
    Original file line numberDiff line numberDiff line change
    @@ -82,12 +82,12 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
    8282
    onShow,
    8383
    ...rest
    8484
    },
    85-
    ref,
    85+
    ref
    8686
    ) => {
    87-
    const toastRef = useRef()
    87+
    const toastRef = useRef(null)
    8888
    const forkedRef = useForkedRef(ref, toastRef)
    8989
    const [_visible, setVisible] = useState(false)
    90-
    const timeout = useRef<number>()
    90+
    const timeout = useRef<number>(undefined)
    9191

    9292
    useEffect(() => {
    9393
    setVisible(visible)
    @@ -135,7 +135,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
    135135
    'show showing': state === 'entering' || state === 'exiting',
    136136
    show: state === 'entered',
    137137
    },
    138-
    className,
    138+
    className
    139139
    )}
    140140
    aria-live="assertive"
    141141
    aria-atomic="true"
    @@ -152,7 +152,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
    152152
    )}
    153153
    </Transition>
    154154
    )
    155-
    },
    155+
    }
    156156
    )
    157157

    158158
    CToast.propTypes = {
    @@ -163,10 +163,7 @@ CToast.propTypes = {
    163163
    color: colorPropType,
    164164
    delay: PropTypes.number,
    165165
    index: PropTypes.number,
    166-
    innerKey: PropTypes.oneOfType([
    167-
    PropTypes.number,
    168-
    PropTypes.string
    169-
    ]),
    166+
    innerKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    170167
    onClose: PropTypes.func,
    171168
    onShow: PropTypes.func,
    172169
    visible: PropTypes.bool,

    ‎packages/coreui-react/src/components/toast/CToaster.tsx

    Lines changed: 11 additions & 7 deletions
    Original file line numberDiff line numberDiff line change
    @@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
    33
    import classNames from 'classnames'
    44
    import { CConditionalPortal } from '../conditional-portal'
    55

    6+
    import type { CToastProps } from './CToast'
    7+
    68
    export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
    79
    /**
    810
    * A string of all className you want applied to the base component.
    @@ -27,20 +29,22 @@ export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
    2729
    /**
    2830
    * Adds new `CToast` to `CToaster`.
    2931
    */
    30-
    push?: ReactElement
    32+
    push?: ReactElement<CToastProps>
    3133
    }
    3234

    3335
    export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
    3436
    ({ children, className, placement, push, ...rest }, ref) => {
    35-
    const [toasts, setToasts] = useState<ReactElement[]>([])
    37+
    const [toasts, setToasts] = useState<ReactElement<CToastProps>[]>([])
    3638
    const index = useRef<number>(0)
    3739

    3840
    useEffect(() => {
    3941
    index.current++
    40-
    push && addToast(push)
    42+
    if (push) {
    43+
    addToast(push)
    44+
    }
    4145
    }, [push])
    4246

    43-
    const addToast = (push: ReactElement) => {
    47+
    const addToast = (push: ReactElement<CToastProps>) => {
    4448
    setToasts((state) => [
    4549
    ...state,
    4650
    React.cloneElement(push, {
    @@ -67,18 +71,18 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
    6771
    'start-50 translate-middle-x': placement && placement.includes('center'),
    6872
    'end-0': placement && placement.includes('end'),
    6973
    },
    70-
    className,
    74+
    className
    7175
    )}
    7276
    {...rest}
    7377
    ref={ref}
    7478
    >
    7579
    {children}
    76-
    {toasts.map((toast) => React.cloneElement(toast, { visible: true }))}
    80+
    {toasts.map((toast, index) => React.cloneElement(toast, { visible: true, key: index }))}
    7781
    </div>
    7882
    ) : null}
    7983
    </CConditionalPortal>
    8084
    )
    81-
    },
    85+
    }
    8286
    )
    8387

    8488
    CToaster.propTypes = {

    ‎packages/coreui-react/src/hooks/usePopper.ts

    Lines changed: 2 additions & 2 deletions
    Original file line numberDiff line numberDiff line change
    @@ -10,8 +10,8 @@ interface UsePopperOutput {
    1010
    }
    1111

    1212
    export const usePopper = (): UsePopperOutput => {
    13-
    const _popper = useRef<Instance>()
    14-
    const el = useRef<HTMLElement>()
    13+
    const _popper = useRef<Instance>(undefined)
    14+
    const el = useRef<HTMLElement>(null)
    1515

    1616
    const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
    1717
    _popper.current = createPopper(reference, popper, options)

    0 commit comments

    Comments
     (0)
    0