Skip to content

Commit e2357b3

Browse files
mrholekmrholek
committed
refactor: update transitions
1 parent 1bec292 commit e2357b3

File tree

11 files changed

+64
-72
lines changed

11 files changed

+64
-72
lines changed

‎docs/4.0/components/offcanvas.mdx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const LiveDemoExample = () => {
6262
return (
6363
<>
6464
<CButton onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
65-
<COffcanvas placement="start" visible={visible} onClose={() => setVisible(false)}>
65+
<COffcanvas placement="start" visible={visible} onHide={() => setVisible(false)}>
6666
<COffcanvasHeader>
6767
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
6868
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
@@ -85,7 +85,7 @@ const [visible, setVisible] = useState(false)
8585
return (
8686
<>
8787
<CButton onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
88-
<COffcanvas placement="start" visible={visible} onClose={() => setVisible(false)}>
88+
<COffcanvas placement="start" visible={visible} onHide={() => setVisible(false)}>
8989
<COffcanvasHeader>
9090
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
9191
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
@@ -115,7 +115,7 @@ export const PlacementTopExample = () => {
115115
return (
116116
<>
117117
<CButton onClick={() => setVisible(true)}>Toggle top offcanvas</CButton>
118-
<COffcanvas placement="top" visible={visible} onClose={() => setVisible(false)}>
118+
<COffcanvas placement="top" visible={visible} onHide={() => setVisible(false)}>
119119
<COffcanvasHeader>
120120
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
121121
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
@@ -138,7 +138,7 @@ const [visible, setVisible] = useState(false)
138138
return (
139139
<>
140140
<CButton onClick={() => setVisible(true)}>Toggle top offcanvas</CButton>
141-
<COffcanvas placement="top" visible={visible} onClose={() => setVisible(false)}>
141+
<COffcanvas placement="top" visible={visible} onHide={() => setVisible(false)}>
142142
<COffcanvasHeader>
143143
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
144144
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
@@ -157,7 +157,7 @@ export const PlacementRightExample = () => {
157157
return (
158158
<>
159159
<CButton onClick={() => setVisible(true)}>Toggle right offcanvas</CButton>
160-
<COffcanvas placement="end" visible={visible} onClose={() => setVisible(false)}>
160+
<COffcanvas placement="end" visible={visible} onHide={() => setVisible(false)}>
161161
<COffcanvasHeader>
162162
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
163163
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
@@ -180,7 +180,7 @@ const [visible, setVisible] = useState(false)
180180
return (
181181
<>
182182
<CButton onClick={() => setVisible(true)}>Toggle right offcanvas</CButton>
183-
<COffcanvas placement="right" visible={visible} onClose={() => setVisible(false)}>
183+
<COffcanvas placement="right" visible={visible} onHide={() => setVisible(false)}>
184184
<COffcanvasHeader>
185185
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
186186
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
@@ -199,7 +199,7 @@ export const PlacementBottomExample = () => {
199199
return (
200200
<>
201201
<CButton onClick={() => setVisible(true)}>Toggle bottom offcanvas</CButton>
202-
<COffcanvas placement="bottom" visible={visible} onClose={() => setVisible(false)}>
202+
<COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>
203203
<COffcanvasHeader>
204204
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
205205
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
@@ -222,7 +222,7 @@ const [visible, setVisible] = useState(false)
222222
return (
223223
<>
224224
<CButton onClick={() => setVisible(true)}>Toggle bottom offcanvas</CButton>
225-
<COffcanvas placement="bottom" visible={visible} onClose={() => setVisible(false)}>
225+
<COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>
226226
<COffcanvasHeader>
227227
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
228228
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
@@ -245,7 +245,7 @@ export const BackdropExample = () => {
245245
<CButton color="primary" onClick={() => setVisibleScrolling(true)}>Enable body scrolling</CButton>
246246
<CButton color="primary" onClick={() => setVisibleWithBackdrop(true)}>Enable backdrop (default)</CButton>
247247
<CButton color="primary" onClick={() => setVisibleWithBothOptions(true)}>Enable both scrolling &amp; backdrop</CButton>
248-
<COffcanvas backdrop={false} placement="start" scroll visible={visibleScrolling} onClose={() => setVisibleScrolling(false)}>
248+
<COffcanvas backdrop={false} placement="start" scroll visible={visibleScrolling} onHide={() => setVisibleScrolling(false)}>
249249
<COffcanvasHeader>
250250
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
251251
<CCloseButton className="text-reset" onClick={() => setVisibleScrolling(false)}/>
@@ -254,7 +254,7 @@ export const BackdropExample = () => {
254254
<p>Try scrolling the rest of the page to see this option in action.</p>
255255
</COffcanvasBody>
256256
</COffcanvas>
257-
<COffcanvas placement="start" visible={visibleWithBackdrop} onClose={() => setVisibleWithBackdrop(false)}>
257+
<COffcanvas placement="start" visible={visibleWithBackdrop} onHide={() => setVisibleWithBackdrop(false)}>
258258
<COffcanvasHeader>
259259
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
260260
<CCloseButton className="text-reset" onClick={() => setVisibleWithBackdrop(false)}/>
@@ -263,7 +263,7 @@ export const BackdropExample = () => {
263263
<p>.....</p>
264264
</COffcanvasBody>
265265
</COffcanvas>
266-
<COffcanvas placement="start" scroll visible={visibleWithBothOptions} onClose={() => setVisibleWithBothOptions(false)}>
266+
<COffcanvas placement="start" scroll visible={visibleWithBothOptions} onHide={() => setVisibleWithBothOptions(false)}>
267267
<COffcanvasHeader>
268268
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
269269
<CCloseButton className="text-reset" onClick={() => setVisibleWithBothOptions(false)}/>
@@ -293,7 +293,7 @@ return (
293293
<CButton color="primary" onClick={() => setVisibleScrolling(true)}>Enable body scrolling</CButton>
294294
<CButton color="primary" onClick={() => setVisibleWithBackdrop(true)}>Enable backdrop (default)</CButton>
295295
<CButton color="primary" onClick={() => setVisibleWithBothOptions(true)}>Enable both scrolling &amp; backdrop</CButton>
296-
<COffcanvas backdrop={false} placement="start" scroll visible={visibleScrolling} onClose={() => setVisibleScrolling(false)}>
296+
<COffcanvas backdrop={false} placement="start" scroll visible={visibleScrolling} onHide={() => setVisibleScrolling(false)}>
297297
<COffcanvasHeader>
298298
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
299299
<CCloseButton className="text-reset" onClick={() => setVisibleScrolling(false)}/>
@@ -302,7 +302,7 @@ return (
302302
<p>Try scrolling the rest of the page to see this option in action.</p>
303303
</COffcanvasBody>
304304
</COffcanvas>
305-
<COffcanvas placement="start" visible={visibleWithBackdrop} onClose={() => setVisibleWithBackdrop(false)}>
305+
<COffcanvas placement="start" visible={visibleWithBackdrop} onHide={() => setVisibleWithBackdrop(false)}>
306306
<COffcanvasHeader>
307307
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
308308
<CCloseButton className="text-reset" onClick={() => setVisibleWithBackdrop(false)}/>
@@ -311,7 +311,7 @@ return (
311311
<p>.....</p>
312312
</COffcanvasBody>
313313
</COffcanvas>
314-
<COffcanvas placement="start" scroll visible={visibleWithBothOptions} onClose={() => setVisibleWithBothOptions(false)}>
314+
<COffcanvas placement="start" scroll visible={visibleWithBothOptions} onHide={() => setVisibleWithBothOptions(false)}>
315315
<COffcanvasHeader>
316316
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
317317
<CCloseButton className="text-reset" onClick={() => setVisibleWithBothOptions(false)}/>

‎src/components/alert/CAlert.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { forwardRef, HTMLAttributes, useEffect, useState } from 'react'
22
import PropTypes from 'prop-types'
33
import classNames from 'classnames'
4-
import { CSSTransition } from 'react-transition-group'
4+
import { Transition } from 'react-transition-group'
55

66
import { Colors, colorPropType } from '../Types'
77
import { CCloseButton } from '../close-button/CCloseButton'
@@ -70,7 +70,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
7070
}
7171

7272
return (
73-
<CSSTransition in={_visible} timeout={150} onExit={onClose} mountOnEnter unmountOnExit>
73+
<Transition in={_visible} mountOnEnter onExit={onClose} timeout={150} unmountOnExit>
7474
{(state) => {
7575
const transitionClass = getTransitionClass(state)
7676
return (
@@ -85,7 +85,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
8585
</div>
8686
)
8787
}}
88-
</CSSTransition>
88+
</Transition>
8989
)
9090
},
9191
)

‎src/components/backdrop/CBackdrop.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { forwardRef, HTMLAttributes } from 'react'
2-
import { CSSTransition } from 'react-transition-group'
2+
import { Transition } from 'react-transition-group'
33
import PropTypes from 'prop-types'
44
import classNames from 'classnames'
55

@@ -23,12 +23,12 @@ export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
2323
}
2424

2525
return (
26-
<CSSTransition in={visible} timeout={150} mountOnEnter unmountOnExit>
26+
<Transition in={visible} mountOnEnter timeout={150} unmountOnExit>
2727
{(state) => {
2828
const transitionClass = getTransitionClass(state)
2929
return <div className={classNames(_className, transitionClass)} {...rest} ref={ref} />
3030
}}
31-
</CSSTransition>
31+
</Transition>
3232
)
3333
},
3434
)

‎src/components/collapse/CCollapse.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { forwardRef, HTMLAttributes, useRef, useState } from 'react'
22
import PropTypes from 'prop-types'
33
import classNames from 'classnames'
4-
import { CSSTransition } from 'react-transition-group'
4+
import { Transition } from 'react-transition-group'
55

66
import { useForkedRef } from '../../utils/hooks'
77

@@ -65,14 +65,14 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
6565
const _className = classNames(className)
6666

6767
return (
68-
<CSSTransition
68+
<Transition
6969
in={visible}
70-
timeout={350}
7170
onEntering={onEntering}
7271
onEntered={onEntered}
7372
onExit={onExit}
7473
onExiting={onExiting}
7574
onExited={onExited}
75+
timeout={350}
7676
>
7777
{(state) => {
7878
const transitionClass = getTransitionClass(state)
@@ -88,7 +88,7 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
8888
</div>
8989
)
9090
}}
91-
</CSSTransition>
91+
</Transition>
9292
)
9393
},
9494
)

‎src/components/modal/CModal.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import React, {
1111
import { createPortal } from 'react-dom'
1212
import PropTypes from 'prop-types'
1313
import classNames from 'classnames'
14-
import { CSSTransition } from 'react-transition-group'
14+
import { Transition } from 'react-transition-group'
1515

1616
import { useForkedRef } from '../../utils/hooks'
1717

@@ -202,21 +202,21 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
202202
return (
203203
<>
204204
<div onClick={handleDismiss} onKeyDown={handleKeyDown}>
205-
<CSSTransition
205+
<Transition
206206
in={_visible}
207-
timeout={!transition ? 0 : duration}
207+
mountOnEnter
208208
onEnter={onShow}
209209
onExit={onClose}
210-
mountOnEnter
211210
unmountOnExit
211+
timeout={!transition ? 0 : duration}
212212
>
213213
{(state) => {
214214
const transitionClass = getTransitionClass(state)
215215
return typeof window !== 'undefined' && portal
216216
? createPortal(modal(forkedRef, transitionClass), document.body)
217217
: modal(forkedRef, transitionClass)
218218
}}
219-
</CSSTransition>
219+
</Transition>
220220
</div>
221221
{typeof window !== 'undefined' && portal
222222
? backdrop && createPortal(<CBackdrop visible={_visible} />, document.body)

‎src/components/nav/CNavGroup.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@ import { CNavContext } from '../sidebar/CSidebarNav'
1515
export interface CNavGroupProps {
1616
children?: ReactNode
1717
/**
18-
* A string of all className you want applied to the component.
18+
* A string of all className you want applied to the component. [docs]
1919
*/
2020
className?: string
2121
/**
22-
* Make nav group more compact by cutting all `padding` in half.
22+
* Make nav group more compact by cutting all `padding` in half. [docs]
2323
*/
2424
compact?: boolean
2525
/**
26-
* Set group toggler label.
26+
* Set group toggler label. [docs]
2727
*/
2828
toggler?: string | ReactNode
2929
/**
30-
* Show nav group items.
30+
* Show nav group items. [docs]
3131
*/
3232
visible?: boolean
3333
/**
@@ -106,12 +106,12 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
106106
)}
107107
<Transition
108108
in={_visible}
109-
timeout={300}
110109
onEntering={onEntering}
111110
onEntered={onEntered}
112111
onExit={onExit}
113112
onExiting={onExiting}
114113
onExited={onExited}
114+
timeout={300}
115115
>
116116
{(state) => (
117117
<ul

‎src/components/offcanvas/COffcanvas.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,10 +137,10 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
137137
<>
138138
<Transition
139139
in={_visible}
140-
timeout={300}
141140
onEnter={onShow}
142141
onEntered={() => offcanvasRef.current?.focus()}
143142
onExit={onHide}
143+
timeout={300}
144144
>
145145
{(state) => {
146146
return typeof window !== 'undefined' && portal
@@ -150,8 +150,8 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
150150
</Transition>
151151
{typeof window !== 'undefined' && portal
152152
? backdrop &&
153-
createPortal(<CBackdrop visible={visible} onClick={handleDismiss} />, document.body)
154-
: backdrop && <CBackdrop visible={visible} onClick={handleDismiss} />}
153+
createPortal(<CBackdrop visible={_visible} onClick={handleDismiss} />, document.body)
154+
: backdrop && <CBackdrop visible={_visible} onClick={handleDismiss} />}
155155
</>
156156
)
157157
},

‎src/components/popover/CPopover.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { FC, ReactElement, ReactNode, useState } from 'react'
22
import { createPortal } from 'react-dom'
33
import PropTypes from 'prop-types'
44
import { Manager, Popper, Reference } from 'react-popper'
5-
import { CSSTransition } from 'react-transition-group'
5+
import { Transition } from 'react-transition-group'
66

77
import { CPopoverContent } from './CPopoverContent'
88
import { Triggers, triggerPropType } from '../Types'
@@ -89,15 +89,15 @@ export const CPopover: FC<CPopoverProps> = ({
8989
</Reference>
9090
{typeof window !== 'undefined' &&
9191
createPortal(
92-
<CSSTransition
92+
<Transition
9393
in={_visible}
94+
onEnter={onShow}
95+
onExit={onHide}
96+
mountOnEnter
9497
timeout={{
9598
enter: 0,
9699
exit: 200,
97100
}}
98-
onEnter={onShow}
99-
onExit={onHide}
100-
mountOnEnter
101101
unmountOnExit
102102
>
103103
{(state) => {
@@ -127,7 +127,7 @@ export const CPopover: FC<CPopoverProps> = ({
127127
</Popper>
128128
)
129129
}}
130-
</CSSTransition>,
130+
</Transition>,
131131
document.body,
132132
)}
133133
</Manager>

‎src/components/tabs/CTabPane.tsx

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,32 +24,24 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
2424

2525
export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
2626
({ children, className, onHide, onShow, visible, ...rest }, ref) => {
27-
const style = {
28-
transition: `opacity 150ms linear`,
29-
}
30-
3127
const getTransitionClass = (state: string) => {
32-
return state === 'entering'
33-
? 'show'
34-
: state === 'entered'
35-
? 'show active'
36-
: state === 'exiting'
37-
? 'active'
38-
: ''
28+
return state === 'entered' && 'show'
3929
}
4030

41-
const _className = classNames('tab-pane', 'fade', className)
31+
const _className = classNames(
32+
'tab-pane',
33+
'fade',
34+
{
35+
active: visible,
36+
},
37+
className,
38+
)
4239
return (
43-
<Transition in={visible} onEnter={onShow} onExit={onHide} timeout={350}>
40+
<Transition in={visible} onEnter={onShow} onExit={onHide} timeout={150}>
4441
{(state) => {
4542
const transitionClass = getTransitionClass(state)
4643
return (
47-
<div
48-
className={classNames(_className, transitionClass)}
49-
style={{ ...style }}
50-
{...rest}
51-
ref={ref}
52-
>
44+
<div className={classNames(_className, transitionClass)} {...rest} ref={ref}>
5345
{children}
5446
</div>
5547
)

0 commit comments

Comments
 (0)