Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- let HelpTextBody = function(props: { helpDocument: DocumentationStore }) {
- return (
- <div>
- {props.helpDocument.toReallySimple().map(tok => {
- return React.createElement(tok.tag, null, tok.content);
- })}
- </div>
- );
- };
- toReallySimple(): MdJson[] {
- let bigParsed = this.md_.parse(this.Text, null).filter(
- t => return t.type == "inline" || t.type.indexOf("open") > 0
- });
- const StyledHelpDocument = styled(HelpTextBody)`
- background-color: lightslategray;
- `;
- class HelpText extends React.Component<helpProps, helpState> {
- constructor(props: helpProps) {
- super(props);
- this.state = {
- hidden: true
- };
- }
- swapHidden() {
- this.setState({
- hidden: !this.state.hidden
- });
- }
- render() {
- if (this.state.hidden) {
- return (
- <span>
- <StyledButton
- itemScope={this.state.hidden}
- onClick={() => this.swapHidden()}
- >
- Need Help?
- </StyledButton>
- </span>
- );
- } else {
- return (
- <span>
- <StyledButton onClick={() => this.swapHidden()}>
- Hide Help
- </StyledButton>
- <StyledHelpDocument helpDocument={this.props.helpDocument} />
- </span>
- );
- }
- }
- <style data-styled-components="">
- /* sc-component-id: sc-bdVaJa */
- .sc-bdVaJa {} .gscXTZ{background:red;color:white;font-size:1em;margin:1em;padding:0.25em 1em;border:2px solid red;border-radius:3px;}.iwtdKP{background:white;color:red;font-size:1em;margin:1em;padding:0.25em 1em;border:2px solid red;border-radius:3px;}
- /* sc-component-id: sc-bwzfXH */
- .sc-bwzfXH {} .hAvMqj{background-color:lightslategray;}</style>
- <span>
- <button class="sc-bdVaJa iwtdKP">Hide Help</button>
- <div><p>Here the text is grey</p></div>
- <!-- ^This^ is the StyledHelpDocument... no class!-->
- </span>
Add Comment
Please, Sign In to add comment