51 lines
1.6 KiB
JavaScript
51 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
|
|
/**
|
|
* This component works just like a switch statement, although the conditions of the first items
|
|
* are checked first, and the first component with a condition that is true will be shown.
|
|
*
|
|
* For single conditions and options any kind of component can be taken, while the Option-component
|
|
* is dedicated for this job. The only important thing is that this component has to have a condition property.
|
|
*
|
|
* You should also give a default option with a condition that always evaluates to true.
|
|
*
|
|
* A quick example would be some content that is only to be shown when the user is logged in:
|
|
*
|
|
* function SomeRestrictedContent(props) {
|
|
* const { isSignedIn } = props;
|
|
*
|
|
* return (
|
|
* <UserRestrictor>
|
|
* <Option condition={isSignedIn}>
|
|
* < The restricted content >
|
|
* </Option>
|
|
* <Option condition={true}>
|
|
* < Some default content; in this case some kind of login >
|
|
* </Option>
|
|
* </UserRestrictor>
|
|
* );
|
|
* }
|
|
*
|
|
* In the example you'll have to note that the default option is at the bottom of all the options
|
|
* since it would always be taken otherwise (the options' conditions are checked from top to bottom)
|
|
*/
|
|
export class UserRestrictor extends React.Component {
|
|
render() {
|
|
const {children} = this.props;
|
|
|
|
for (const i in children) {
|
|
const c = children[i];
|
|
|
|
if (c.props.condition) {
|
|
return c;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export function Option(props) {
|
|
return props.children;
|
|
}
|