This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function WithLoader(props) { | |
return props.condition ? ( | |
props.children | |
) : ( | |
<section | |
className={styles.Loading} | |
style={{ height: props.height, width: props.width }}> | |
<h3>{props.message}</h3> | |
<Loader /> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function Option({ value, html, text, onClick }) { | |
if (html) { | |
return ( | |
<li | |
data-value={value} | |
onClick={onClick} | |
dangerouslySetInnerHTML={{ __html: html }} | |
/> | |
) | |
} else { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class SelectGuide extends Component { | |
state = { | |
value: 'Initial message', | |
text: 'Initial' | |
} | |
render() { | |
return ( | |
<React.Fragment> | |
<p> | |
The Select component requires that you also import the Option |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Usage: | |
<Input name="name" placeholder="Name" disabled /> | |
<Input | |
name="name" | |
autoComplete="off" | |
placeholder="Name (autocomplete disabled)" | |
/> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function Toggle(props) { | |
return ( | |
<label className={styles.switch}> | |
<input {...props} type="checkbox" /> | |
<span className={styles.slider} /> | |
</label> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Usage: | |
<React.Fragment> | |
<p>Mouseover for more information</p> | |
<Infotip title="This is the Infotip title" /> | |
</React.Fragment> | |
Code: | |
export function Infotip(props) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class Search extends Component { | |
state = { | |
searchTerm: '' | |
} | |
componentDidMount() { | |
// lets the user override the initial value in the search box | |
if (this.props.override) { | |
this.setState({ searchTerm: this.props.override }) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class TextFieldType extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
textInput: "" | |
}; | |
} | |
render() { | |
const { textInput } = this.state; | |
return ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class TextareaFieldType extends Component { | |
constructor(props) { | |
super(props) | |
this.state = { | |
textInput: '' | |
} | |
} | |
render() { | |
const { textInput } = this.state | |
return ( |