Skip to content

Commit

Permalink
feat(animation): Add hasDisabledAnimation parameter (#79)
Browse files Browse the repository at this point in the history 
* Adds `hasDisabledAnimation` parameter to prevent animation

* feat(animation): add `hasDisabledAnimation` parameter

* update readme
  • Loading branch information
@roginfarrer
roginfarrer authored Dec 23, 2021
1 parent f7a8613 commit 4a817fd
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 16 deletions.
27 changes: 14 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,19 +99,20 @@ const { getCollapseProps, getToggleProps, isExpanded, setExpanded } =

The following are optional properties passed into `useCollapse({ })`:

| Prop | Type | Default | Description |
| --------------- | -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| isExpanded | boolean | `undefined` | If true, the Collapse is expanded |
| defaultExpanded | boolean | `false` | If true, the Collapse will be expanded when mounted |
| expandStyles | object | `{}` | Style object applied to the collapse panel when it expands |
| collapseStyles | object | `{}` | Style object applied to the collapse panel when it collapses |
| collapsedHeight | number | `0` | The height of the content when collapsed |
| easing | string | `cubic-bezier(0.4, 0, 0.2, 1)` | The transition timing function for the animation |
| duration | number | `undefined` | The duration of the animation in milliseconds. By default, the duration is programmatically calculated based on the height of the collapsed element |
| onCollapseStart | function | no-op | Handler called when the collapse animation begins |
| onCollapseEnd | function | no-op | Handler called when the collapse animation ends |
| onExpandStart | function | no-op | Handler called when the expand animation begins |
| onExpandEnd | function | no-op | Handler called when the expand animation ends |
| Prop | Type | Default | Description |
| -------------------- | -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| isExpanded | boolean | `undefined` | If true, the Collapse is expanded |
| defaultExpanded | boolean | `false` | If true, the Collapse will be expanded when mounted |
| expandStyles | object | `{}` | Style object applied to the collapse panel when it expands |
| collapseStyles | object | `{}` | Style object applied to the collapse panel when it collapses |
| collapsedHeight | number | `0` | The height of the content when collapsed |
| easing | string | `cubic-bezier(0.4, 0, 0.2, 1)` | The transition timing function for the animation |
| duration | number | `undefined` | The duration of the animation in milliseconds. By default, the duration is programmatically calculated based on the height of the collapsed element |
| onCollapseStart | function | no-op | Handler called when the collapse animation begins |
| onCollapseEnd | function | no-op | Handler called when the collapse animation ends |
| onExpandStart | function | no-op | Handler called when the expand animation begins |
| onExpandEnd | function | no-op | Handler called when the expand animation ends |
| hasDisabledAnimation | boolean | false | If true, will disable the animation |

### What you get

Expand Down
8 changes: 5 additions & 3 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default function useCollapse({
onCollapseEnd = noop,
isExpanded: configIsExpanded,
defaultExpanded = false,
hasDisabledAnimation = false,
...initialConfig
}: UseCollapseInput = {}): UseCollapseOutput {
const [isExpanded, setExpanded] = useControlledState(
Expand Down Expand Up @@ -64,9 +65,10 @@ export default function useCollapse({
setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }))
}

function getTransitionStyles(height: number | string): {
transition: string
} {
function getTransitionStyles(height: number | string): CSSProperties {
if (hasDisabledAnimation) {
return {}
}
const _duration = duration || getAutoHeightDuration(height)
return {
transition: `height ${_duration}ms ${easing}`,
Expand Down
36 changes: 36 additions & 0 deletions src/stories/basic.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,42 @@ export const Controlled = () => {
)
}

function useReduceMotion() {
const [matches, setMatch] = React.useState(
window.matchMedia('(prefers-reduced-motion: reduce)').matches
);
React.useEffect(() => {
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
const handleChange = () => {
setMatch(mq.matches);
};
handleChange();
mq.addEventListener('change', handleChange);
return () => {
mq.removeEventListener('change', handleChange);
};
}, []);
return matches;
}

export const PrefersReducedMotion = () => {
const reduceMotion = useReduceMotion()
const [isExpanded, setOpen] = React.useState<boolean>(true)
const { getCollapseProps, getToggleProps } = useCollapse({
isExpanded,
hasDisabledAnimation: reduceMotion,
})

return (
<div>
<Toggle {...getToggleProps({ onClick: () => setOpen((old) => !old) })}>
{isExpanded ? 'Close' : 'Open'}
</Toggle>
<Collapse {...getCollapseProps()}>{excerpt}</Collapse>
</div>
)
}

export default {
title: 'Basic Usage',
}
1 change: 1 addition & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export interface UseCollapseInput {
onCollapseEnd?: () => void
onExpandStart?: () => void
onExpandEnd?: () => void
hasDisabledAnimation?: boolean
}

export interface UseCollapseOutput {
Expand Down

0 comments on commit 4a817fd

Please sign in to comment.