) => (
58 |
59 | {props.children}
60 |
61 | )
62 | )
63 |
64 | export const excerpt =
65 | 'In the morning I walked down the Boulevard to the rue Soufflot for coffee and brioche. It was a fine morning. The horse-chestnut trees in the Luxembourg gardens were in bloom. There was the pleasant early-morning feeling of a hot day. I read the papers with the coffee and then smoked a cigarette. The flower-women were coming up from the market and arranging their daily stock. Students went by going up to the law school, or down to the Sorbonne. The Boulevard was busy with trams and people going to work.'
66 |
--------------------------------------------------------------------------------
/src/stories/div.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import useCollapse from '..'
3 | import { Toggle, Collapse, excerpt } from './components'
4 |
5 | export default {
6 | title: 'Using divs',
7 | }
8 |
9 | export const Div = () => {
10 | const { getCollapseProps, getToggleProps, isExpanded } = useCollapse({
11 | defaultExpanded: true,
12 | })
13 |
14 | return (
15 |
16 |
17 | {isExpanded ? 'Close' : 'Open'}
18 |
19 | {excerpt}
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/stories/nested.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import useCollapse from '..'
3 | import { Toggle, Collapse } from './components'
4 |
5 | export default {
6 | title: 'Nested Collapses',
7 | }
8 |
9 | function InnerCollapse() {
10 | const { getCollapseProps, getToggleProps, isExpanded } = useCollapse()
11 |
12 | return (
13 | <>
14 |
15 | Friends, Romans, countrymen, lend me your ears;
16 |
17 | I come to bury Caesar, not to praise him.
18 |
19 | The evil that men do lives after them;
20 |
21 | The good is oft interred with their bones;
22 |
23 | So let it be with Caesar. The noble Brutus
24 |
25 | Hath told you Caesar was ambitious:
26 |
27 | If it were so, it was a grievous fault,
28 |
29 | And grievously hath Caesar answer’d it.
30 |
31 | Here, under leave of Brutus and the rest–
32 |
33 | For Brutus is an honourable man;
34 |
35 | So are they all, all honourable men–
36 |
37 | Come I to speak in Caesar’s funeral.
38 |
39 |
40 | He was my friend, faithful and just to me:
41 |
42 | But Brutus says he was ambitious;
43 |
44 | And Brutus is an honourable man.
45 |
46 | He hath brought many captives home to Rome
47 |
48 | Whose ransoms did the general coffers fill:
49 |
50 | Did this in Caesar seem ambitious?
51 |
52 | When that the poor have cried, Caesar hath wept:
53 |
54 | Ambition should be made of sterner stuff:
55 |
56 |
59 | {isExpanded ? 'Click to collapse' : 'Read more?'}
60 |
61 |
62 | )
63 | }
64 |
65 | export function Nested() {
66 | const { getCollapseProps, getToggleProps, isExpanded } = useCollapse({
67 | defaultExpanded: true,
68 | })
69 |
70 | return (
71 | <>
72 | {isExpanded ? 'Close' : 'Expand'}
73 |
78 |
79 | )
80 | }
81 |
--------------------------------------------------------------------------------
/src/stories/unmount.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import useCollapse from '..'
3 | import { Collapse, excerpt, Toggle } from './components'
4 |
5 | export default {
6 | title: 'Unmount content on collapse',
7 | component: useCollapse,
8 | }
9 |
10 | export function Unmount() {
11 | const [mountChildren, setMountChildren] = React.useState(true)
12 | const { getCollapseProps, getToggleProps, isExpanded } = useCollapse({
13 | defaultExpanded: true,
14 | onExpandStart() {
15 | setMountChildren(true)
16 | },
17 | onCollapseEnd() {
18 | setMountChildren(false)
19 | },
20 | })
21 |
22 | return (
23 | <>
24 | {isExpanded ? 'Close' : 'Open'}
25 |
26 | {mountChildren && {excerpt}}
27 |
28 |
29 | )
30 | }
31 |
32 | Unmount.story = {
33 | name: 'Unmount content when closed',
34 | }
35 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | ReactNode,
3 | CSSProperties,
4 | TransitionEvent,
5 | MouseEvent,
6 | MutableRefObject,
7 | } from 'react'
8 |
9 | type ButtonType = 'submit' | 'reset' | 'button'
10 | type AriaBoolean = boolean | 'true' | 'false'
11 |
12 | /**
13 | * React.Ref uses the readonly type `React.RefObject` instead of
14 | * `React.MutableRefObject`, We pretty much always assume ref objects are
15 | * mutable (at least when we create them), so this type is a workaround so some
16 | * of the weird mechanics of using refs with TS.
17 | */
18 | export type AssignableRef =
19 | | {
20 | bivarianceHack(instance: ValueType | null): void
21 | }['bivarianceHack']
22 | | MutableRefObject
23 |
24 | export interface GetTogglePropsOutput {
25 | disabled: boolean
26 | type: ButtonType
27 | role: string
28 | id: string
29 | 'aria-controls': string
30 | 'aria-expanded': AriaBoolean
31 | tabIndex: number
32 | onClick: (e: MouseEvent) => void
33 | }
34 |
35 | export interface GetTogglePropsInput {
36 | [key: string]: unknown
37 | disabled?: boolean
38 | onClick?: (e: MouseEvent) => void
39 | }
40 |
41 | export interface GetCollapsePropsOutput {
42 | id: string
43 | onTransitionEnd: (e: TransitionEvent) => void
44 | style: CSSProperties
45 | 'aria-hidden': AriaBoolean
46 | }
47 |
48 | export interface GetCollapsePropsInput {
49 | [key: string]: unknown
50 | style?: CSSProperties
51 | onTransitionEnd?: (e: TransitionEvent) => void
52 | refKey?: string
53 | ref?: (node: ReactNode) => void | null | undefined
54 | }
55 |
56 | export interface UseCollapseInput {
57 | isExpanded?: boolean
58 | defaultExpanded?: boolean
59 | collapsedHeight?: number
60 | expandStyles?: {}
61 | collapseStyles?: {}
62 | easing?: string
63 | duration?: number
64 | onCollapseStart?: () => void
65 | onCollapseEnd?: () => void
66 | onExpandStart?: () => void
67 | onExpandEnd?: () => void
68 | hasDisabledAnimation?: boolean
69 | }
70 |
71 | export interface UseCollapseOutput {
72 | getCollapseProps: (config?: GetCollapsePropsInput) => GetCollapsePropsOutput
73 | getToggleProps: (config?: GetTogglePropsInput) => GetTogglePropsOutput
74 | isExpanded: boolean
75 | setExpanded: React.Dispatch>
76 | }
77 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | import {
2 | RefObject,
3 | useState,
4 | useRef,
5 | useEffect,
6 | useCallback,
7 | } from 'react'
8 | import warning from 'tiny-warning'
9 | import type { AssignableRef } from './types'
10 |
11 | type AnyFunction = (...args: any[]) => unknown
12 |
13 | // eslint-disable-next-line @typescript-eslint/no-empty-function
14 | export const noop = (): void => {}
15 |
16 | export function getElementHeight(
17 | el: RefObject | { current?: { scrollHeight: number } }
18 | ): string | number {
19 | if (!el?.current) {
20 | warning(
21 | true,
22 | `useCollapse was not able to find a ref to the collapse element via \`getCollapseProps\`. Ensure that the element exposes its \`ref\` prop. If it exposes the ref prop under a different name (like \`innerRef\`), use the \`refKey\` property to change it. Example:
23 |
24 | {...getCollapseProps({refKey: 'innerRef'})}`
25 | )
26 | return 'auto'
27 | }
28 | return el.current.scrollHeight
29 | }
30 |
31 | // Helper function for render props. Sets a function to be called, plus any additional functions passed in
32 | export const callAll =
33 | (...fns: AnyFunction[]) =>
34 | (...args: any[]): void =>
35 | fns.forEach((fn) => fn && fn(...args))
36 |
37 | // https://github.com/mui-org/material-ui/blob/da362266f7c137bf671d7e8c44c84ad5cfc0e9e2/packages/material-ui/src/styles/transitions.js#L89-L98
38 | export function getAutoHeightDuration(height: number | string): number {
39 | if (!height || typeof height === 'string') {
40 | return 0
41 | }
42 |
43 | const constant = height / 36
44 |
45 | // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
46 | return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10)
47 | }
48 |
49 | export function assignRef(
50 | ref: AssignableRef | null | undefined,
51 | value: any
52 | ) {
53 | if (ref == null) return
54 | if (typeof ref === 'function') {
55 | ref(value)
56 | } else {
57 | try {
58 | ref.current = value
59 | } catch (error) {
60 | throw new Error(`Cannot assign value "${value}" to ref "${ref}"`)
61 | }
62 | }
63 | }
64 |
65 | /**
66 | * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
67 | * dealing with components that need an explicit ref for DOM calculations but
68 | * also forwards refs assigned by an app.
69 | *
70 | * @param refs Refs to fork
71 | */
72 | export function mergeRefs(
73 | ...refs: (AssignableRef | null | undefined)[]
74 | ) {
75 | if (refs.every((ref) => ref == null)) {
76 | return null
77 | }
78 | return (node: any) => {
79 | refs.forEach((ref) => {
80 | assignRef(ref, node)
81 | })
82 | }
83 | }
84 |
85 | export function useControlledState(
86 | isExpanded?: boolean,
87 | defaultExpanded?: boolean
88 | ): [boolean, React.Dispatch>] {
89 | const [stateExpanded, setStateExpanded] = useState(defaultExpanded || false)
90 | const initiallyControlled = useRef(isExpanded != null)
91 | const expanded = initiallyControlled.current
92 | ? (isExpanded as boolean)
93 | : stateExpanded
94 | const setExpanded = useCallback((n) => {
95 | if (!initiallyControlled.current) {
96 | setStateExpanded(n)
97 | }
98 | }, [])
99 |
100 | useEffect(() => {
101 | warning(
102 | !(initiallyControlled.current && isExpanded == null),
103 | 'useCollapse is changing from controlled to uncontrolled. useCollapse should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled collapse for the lifetime of the component. Check the `isExpanded` prop.'
104 | )
105 | warning(
106 | !(!initiallyControlled.current && isExpanded != null),
107 | 'useCollapse is changing from uncontrolled to controlled. useCollapse should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled collapse for the lifetime of the component. Check the `isExpanded` prop.'
108 | )
109 | }, [isExpanded])
110 |
111 | return [expanded, setExpanded]
112 | }
113 |
114 | export function useEffectAfterMount(
115 | cb: () => void,
116 | dependencies: unknown[]
117 | ): void {
118 | const justMounted = useRef(true)
119 | // eslint-disable-next-line consistent-return
120 | useEffect(() => {
121 | if (!justMounted.current) {
122 | return cb()
123 | }
124 | justMounted.current = false
125 | // eslint-disable-next-line react-hooks/exhaustive-deps
126 | }, dependencies)
127 | }
128 |
129 | export function usePaddingWarning(element: RefObject): void {
130 | // @ts-ignore
131 | let warn = (el?: RefObject): void => {}
132 |
133 | if (process.env.NODE_ENV !== 'production') {
134 | warn = (el) => {
135 | if (!el?.current) {
136 | return
137 | }
138 | const { paddingTop, paddingBottom } = window.getComputedStyle(el.current)
139 | const hasPadding =
140 | (paddingTop && paddingTop !== '0px') ||
141 | (paddingBottom && paddingBottom !== '0px')
142 |
143 | warning(
144 | !hasPadding,
145 | 'react-collapsed: Padding applied to the collapse element will cause the animation to break and not perform as expected. To fix, apply equivalent padding to the direct descendent of the collapse element.'
146 | )
147 | }
148 | }
149 |
150 | useEffect(() => {
151 | warn(element)
152 | }, [element])
153 | }
154 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["src"],
3 | "exclude": ["src/__tests__/**/*", "src/stories/**/*"],
4 | "compilerOptions": {
5 | "target": "ESNext",
6 | "module": "ESNext",
7 | "lib": ["dom", "ESNext"],
8 | "importHelpers": true,
9 | "sourceMap": true,
10 | "strict": true,
11 | "noImplicitAny": true,
12 | "strictNullChecks": true,
13 | "strictFunctionTypes": true,
14 | "strictPropertyInitialization": true,
15 | "noImplicitThis": true,
16 | "alwaysStrict": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "noImplicitReturns": true,
20 | "noFallthroughCasesInSwitch": true,
21 | "moduleResolution": "node",
22 | "jsx": "react",
23 | "esModuleInterop": true,
24 | "skipLibCheck": true
25 | }
26 | }
27 |
--------------------------------------------------------------------------------