const text = [
"You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.",
"Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.",
"Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.",
"You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic."
];
const {Collapse, UnmountClosed} = ReactCollapse;
const getText = num => text.slice(0, num).map((p, i) => <p key={i}>{p}</p>);
class VariableText extends React.Component {
static propTypes = {
isOpened: PropTypes.bool
};
static defaultProps = {
isOpened: false
};
constructor(props) {
super(props);
const {isOpened} = this.props;
this.state = {isOpened, paragraphs: 0};
}
render() {
const {isOpened, paragraphs} = this.state;
return (
<div>
<div className="config">
<label className="label">
Opened:
<input
className="input"
type="checkbox"
checked={isOpened}
onChange={({target: {checked}}) => this.setState({isOpened: checked})} />
</label>
<label className="label">
Paragraphs:
<input
className="input"
type="range"
value={paragraphs}
step={1}
min={0}
max={4}
onChange={({target: {value}}) => this.setState({paragraphs: parseInt(value, 10)})} />
{paragraphs}
</label>
</div>
<Collapse isOpened={isOpened}>
<div className="text">
{paragraphs ? getText(paragraphs) : <p>No text</p>}
</div>
</Collapse>
</div>
);
}
}
class VariableHeight extends React.PureComponent {
constructor(props) {
super(props);
this.state = {isOpened: false, height: 100};
}
render() {
const {isOpened, height} = this.state;
return (
<div {...this.props}>
<div className="config">
<label className="label">
Opened:
<input
className="input"
type="checkbox"
checked={isOpened}
onChange={({target: {checked}}) => this.setState({isOpened: checked})} />
</label>
<label className="label">
Content height:
<input
className="input"
type="range"
value={height}
step={50}
min={0}
max={500}
onChange={({target: {value}}) => this.setState({height: parseInt(value, 10)})} />
{height}
</label>
</div>
<Collapse isOpened={isOpened}>
<div style={{height}} className="blob" />
</Collapse>
</div>
);
}
}
class InitiallyOpened extends React.PureComponent {
constructor(props) {
super(props);
this.state = {isOpened: true};
}
render() {
const {isOpened} = this.state;
const height = 100;
return (
<div>
<div className="config">
<label className="label">
Opened:
<input
className="input"
type="checkbox"
checked={isOpened}
onChange={({target: {checked}}) => this.setState({isOpened: checked})} />
</label>
</div>
<Collapse isOpened={isOpened}>
<div style={{height}} className="blob" />
</Collapse>
</div>
);
}
}
class Nested extends React.PureComponent {
constructor(props) {
super(props);
this.state = {isOpened: true};
}
render() {
const {isOpened} = this.state;
return (
<div>
<div className="config">
<label className="label">
Opened:
<input
className="input"
type="checkbox"
checked={isOpened}
onChange={({target: {checked}}) => this.setState({isOpened: checked})} />
</label>
</div>
<Collapse isOpened={isOpened} hasNestedCollapse>
<InitiallyOpened className="subCollapse" />
<VariableHeight className="subCollapse" />
<VariableHeight className="subCollapse" />
</Collapse>
</div>
);
}
}
class Hooks extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
isOpened: false,
isResting: false,
paragraphs: 0
};
}
render() {
const {
isResting, isOpened, paragraphs, params
} = this.state;
return (
<div>
<div className="config">
<label className="label">
Opened:
<input
className="input"
type="checkbox"
checked={isOpened}
onChange={({target: {checked}}) => this.setState({isOpened: checked})} />
</label>
<label className="label">
Paragraphs:
<input
className="input"
type="range"
value={paragraphs}
step={1}
min={0}
max={4}
onChange={({target: {value}}) => this.setState({paragraphs: parseInt(value, 10)})} />
{paragraphs}
</label>
</div>
<div className="config">
<span className="label">
Resting:
{' '}
{isResting ? 'true' : 'false'}
</span>
<span className="label">
onRest/onWork arguments:
{' '}
{params}
</span>
</div>
<Collapse
isOpened={isOpened}
onWork={p => this.setState({isResting: false, params: JSON.stringify(p)})}
onRest={p => this.setState({isResting: true, params: JSON.stringify(p)})}>
<div className="text">{paragraphs ? getText(paragraphs) : <p>No text</p>}</div>
</Collapse>
</div>
);
}
}
class Test extends React.PureComponent {
static propTypes = {
onMount: PropTypes.func.isRequired,
onUnmount: PropTypes.func.isRequired
};
componentDidMount() {
const {onMount} = this.props;
onMount();
}
componentWillUnmount() {
const {onUnmount} = this.props;
onUnmount();
}
render() {
return <div>Test</div>;
}
}
class AutoUnmount extends React.PureComponent {
static propTypes = {
isOpened: PropTypes.bool.isRequired
};
constructor(props) {
super(props);
const {isOpened} = this.props;
this.state = {isOpened};
this.counter = 0;
this.messages = [];
}
onRef = ref => {
this.ref = ref;
};
onMount = () => {
if (this.ref) {
this.messages.unshift(`${this.counter}. Mounted`);
this.messages = this.messages.slice(0, 5);
this.ref.innerHTML = this.messages.join('<br />');
this.counter = this.counter + 1;
}
};
onUnmount = () => {
if (this.ref) {
this.messages.unshift(`${this.counter}. Unmounted`);
this.messages = this.messages.slice(0, 5);
this.ref.innerHTML = this.messages.join('<br />');
this.counter = this.counter + 1;
}
};
onChange = ({target: {checked}}) => {
this.setState({isOpened: checked});
};
render() {
const {isOpened} = this.state;
return (
<div>
<div className="config">
<label className="label">
Opened:
<input
className="input"
type="checkbox"
checked={isOpened}
onChange={this.onChange} />
</label>
</div>
<UnmountClosed isOpened={isOpened}>
<Test onMount={this.onMount} onUnmount={this.onUnmount} />
</UnmountClosed>
<div className="log" ref={this.onRef} />
</div>
);
}
}
class ForceInitialAnimation extends React.PureComponent {
constructor(props) {
super(props);
this.state = {isOpened: true};
}
render() {
const {isOpened} = this.state;
const height = 100;
return (
<div>
<div className="config">
<label className="label">
Opened:
<input
className="input"
type="checkbox"
checked={isOpened}
onChange={({target: {checked}}) => this.setState({isOpened: checked})} />
</label>
</div>
<Collapse isOpened={isOpened} initialStyle={{height: 0, overflow: 'hidden'}}>
<div style={{height}} className="blob" />
</Collapse>
</div>
);
}
}
const App = () => (
<div className="app">
<h1>react-collapse</h1>
<section className="section">
<h2>Variable text</h2>
<VariableText />
</section>
<section className="section">
<h2>Variable text (initially opened)</h2>
<VariableText isOpened />
</section>
<section className="section">
<h2>Variable height content</h2>
<VariableHeight />
</section>
<section className="section">
<h2>Initially opened</h2>
<InitiallyOpened />
</section>
<section className="section">
<h2>Force initial animation</h2>
<ForceInitialAnimation />
</section>
<section className="section">
<h2>Nested Collapse</h2>
<Nested />
</section>
<section className="section">
<h2>Hooks</h2>
<Hooks />
</section>
<section className="section">
<h2>Auto-unmount when closed</h2>
<p>closed by default</p>
<AutoUnmount isOpened={false} />
<section className="section">
<p>opened by default</p>
<AutoUnmount isOpened />
</section>
</section>
</div>
);
ReactDOM.render(<App />, document.querySelector('#app'));
!
