Skip to content

Commit

Permalink
Add renderChildrenCollapsed prop to fix keyboard accessibility when c…
Browse files Browse the repository at this point in the history 
…ollapsed (#271)

* add ability to not render children when not visible for proper keyboard accessibility

* prettier cleanup

* prettier fixes round 2

* Propagate renderChildrenCollapsed to Collapsible

* Add renderChildrenCollapsed prop to README and types

Co-authored-by: Joel Arvidsson <joel@oblador.se>
Co-authored-by: Joel Arvidsson <joel.arvidsson@klarna.com>
  • Loading branch information
@DaKaZ @oblador
3 people authored Apr 29, 2021
1 parent 3f92942 commit 7b90f6a
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 16 deletions.
1 change: 1 addition & 0 deletions Accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const COLLAPSIBLE_PROPS = [
'align',
'collapsed',
'collapsedHeight',
'renderChildrenCollapsed',
'enablePointerEvents',
'duration',
'easing',
Expand Down
14 changes: 12 additions & 2 deletions Collapsible.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default class Collapsible extends Component {
duration: 300,
easing: 'easeOutCubic',
onAnimationEnd: () => null,
renderChildrenCollapsed: true,
};

constructor(props) {
Expand Down Expand Up @@ -172,7 +173,11 @@ export default class Collapsible extends Component {
};

render() {
const { collapsed, enablePointerEvents } = this.props;
const {
collapsed,
enablePointerEvents,
renderChildrenCollapsed,
} = this.props;
const {
height,
contentHeight,
Expand Down Expand Up @@ -211,6 +216,11 @@ export default class Collapsible extends Component {
if (animating) {
contentStyle.height = contentHeight;
}
const shouldRenderChildren =
renderChildrenCollapsed ||
((!collapsed || (collapsed && animating)) &&
(animating || measuring || measured));

return (
<Animated.View
style={style}
Expand All @@ -221,7 +231,7 @@ export default class Collapsible extends Component {
style={[this.props.style, contentStyle]}
onLayout={this.state.animating ? undefined : this._handleLayoutChange}
>
{this.props.children}
{shouldRenderChildren && this.props.children}
</Animated.View>
</Animated.View>
);
Expand Down
29 changes: 15 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,17 @@ import Collapsible from 'react-native-collapsible';

## Properties

| Prop | Description | Default |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | `top` |
| **`collapsed`** | Whether to show the child components or not | `true` |
| **`collapsedHeight`** | Which height should the component collapse to | `0` |
| **`enablePointerEvents`** | Enable pointer events on collapsed view | `false` |
| **`duration`** | Duration of transition in milliseconds | `300` |
| **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
| **`style`** | Optional styling for the container | |
| **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | `() => {}` |
| Prop | Description | Default |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | `top` |
| **`collapsed`** | Whether to show the child components or not | `true` |
| **`collapsedHeight`** | Which height should the component collapse to | `0` |
| **`enablePointerEvents`** | Enable pointer events on collapsed view | `false` |
| **`duration`** | Duration of transition in milliseconds | `300` |
| **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
| **`renderChildrenCollapsed`** | Render children in collapsible even if not visible. | `true` |
| **`style`** | Optional styling for the container | |
| **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | `() => {}` |

## Accordion Usage

Expand Down Expand Up @@ -108,31 +109,31 @@ class AccordionView extends Component {
activeSections: [],
};

_renderSectionTitle = section => {
_renderSectionTitle = (section) => {
return (
<View style={styles.content}>
<Text>{section.content}</Text>
</View>
);
};

_renderHeader = section => {
_renderHeader = (section) => {
return (
<View style={styles.header}>
<Text style={styles.headerText}>{section.title}</Text>
</View>
);
};

_renderContent = section => {
_renderContent = (section) => {
return (
<View style={styles.content}>
<Text>{section.content}</Text>
</View>
);
};

_updateSections = activeSections => {
_updateSections = (activeSections) => {
this.setState({ activeSections });
};

Expand Down
7 changes: 7 additions & 0 deletions index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,13 @@ export interface CollapsibleProps {
*/
easing?: EasingMode | any;

/**
* Render children in collapsible even if not visible
*
* @default true
*/
renderChildrenCollapsed?: boolean;

/**
* Optional styling for the container
*/
Expand Down

0 comments on commit 7b90f6a

Please sign in to comment.