Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add togglebox options #896

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+57 −12
Open

add togglebox options #896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 43 additions & 6 deletions app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,49 @@ import * as React from 'react';
import classNames from 'classnames';
import nextId from "react-id-generator";
import {IPropsCustomHeader} from "../ToggleBox/index";
import {assertNever} from '../../helpers';

interface IState {
isOpen: boolean;
wasOpened: boolean;
isAnimating: boolean;
}

export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
type IProps = IPropsCustomHeader;

export class CustomHeaderToggleBox extends React.PureComponent<IProps, IState> {
static defaultProps: Partial<IProps>;

htmlId = nextId('togglebox-');
contentRef = React.createRef<HTMLDivElement>();

constructor(props: IPropsCustomHeader) {
constructor(props: IProps) {
super(props);

const isOpen = this.props.initiallyOpen ?? false;

this.state = {
isOpen: this.props.initiallyOpen ?? false,
isOpen: isOpen,
wasOpened: isOpen,
isAnimating: false,
};
}

toggle = (): void => {
this.setState({isOpen: !this.state.isOpen}, () => {
const nextState: Partial<IState> = {
isOpen: !this.state.isOpen,
};

if (this.state.wasOpened !== true && nextState.isOpen === true) {
nextState.wasOpened = true;
}

this.setState({...this.state, ...nextState}, () => {
this.props.onToggle?.(this.state.isOpen);
});
}

componentDidUpdate(_prevProps: IPropsCustomHeader, prevState: IState) {
componentDidUpdate(_prevProps: IProps, prevState: IState) {
if (prevState.isOpen !== this.state.isOpen) {
this.setState({ isAnimating: true });

Expand All @@ -49,6 +67,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
'new-collapse-box--open': this.state.isOpen,
});
const { isOpen } = this.state;
const renderChildren = this.props.renderChildren ?? 'always';

return (
<div
Expand Down Expand Up @@ -80,7 +99,25 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
'toggle-box__content--animation': this.state.isAnimating,
})}
>
{this.props.children}
{(() => {
if (renderChildren === 'always') {
return this.props.children;
} else if (renderChildren === 'when-open') {
if (isOpen) {
return this.props.children;
} else {
return null;
}
} else if (renderChildren === 'after-first-opening') {
if (this.state.isOpen || this.state.wasOpened) {
return this.props.children;
} else {
return null;
}
} else {
return assertNever(renderChildren);
}
})()}
</div>
</div>
</div>
Expand Down
7 changes: 7 additions & 0 deletions app-typescript/components/ToggleBox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,13 @@ export interface IPropsCustomHeader {
getToggleButtonLabel: (isOpen: boolean) => string;
initiallyOpen?: boolean;
onToggle?(isOpen: boolean): void;

/**
* 'after-first-opening' - will start rendering children upon first opening the togglebox.
* If togglebox is closed, it will continue rendering children in order to prevent unmounting
* and losing state of components rendered in children.
*/
renderChildren?: 'when-open' | 'always' | 'after-first-opening'; // defaults to 'always'
}

type IProps = IPropsSimple | IPropsCustomHeader;
Expand Down
13 changes: 7 additions & 6 deletions examples/pages/components/Togglebox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,15 @@ const ToggleboxDocs = () => {
<ToggleBox variant='simple' title="Togglebox - circled chevron" circledChevron={true}>Togglebox content</ToggleBox>
<ToggleBox variant='simple' title="Large title" largeTitle={true} circledChevron={true}>
<div className="px-4 text-sm line-height-lg">
<p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
<p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Curabitur blandit tempus porttitor.</p>

<p className="mb-2">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere
erat a ante venenatis dapibus posuere velit aliquet.</p>

<p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id
<p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id
ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</div>
</ToggleBox>
Expand Down Expand Up @@ -98,12 +98,12 @@ const ToggleboxDocs = () => {
</div>
</div>
}
toggleButtonLabel={'show more'}
getToggleButtonLabel={() => 'show more'}
onToggle={(isOpen) => false}
>
<div>
<FormLabel text='Name'/>
<Text size='small' weight='medium'>Australian Open 2024</Text>
<Text size='small' weight='medium'>Australian Open 2024-</Text>
</div>
<ContentDivider type="dashed" margin='x-small' />
<div>
Expand Down Expand Up @@ -148,6 +148,7 @@ const ToggleboxDocs = () => {
</div>
</div>
}
getToggleButtonLabel={() => 'show more'}
onToggle={() => false}
>
<div>
Expand Down
Loading