packages/website/ts/pages/faq/question.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import * as _ from 'lodash';
import {Card, CardHeader, CardText} from 'material-ui/Card';
import * as React from 'react';
import {colors} from 'ts/utils/colors';

export interface QuestionProps {
    prompt: string;
    answer: React.ReactNode;
    shouldDisplayExpanded: boolean;
}

interface QuestionState {
    isExpanded: boolean;
}

export class Question extends React.Component<QuestionProps, QuestionState> {
    constructor(props: QuestionProps) {
        super(props);
        this.state = {
            isExpanded: props.shouldDisplayExpanded,
        };
    }
    public render() {
        return (
            <div
                className="py1"
            >
                <Card
                    initiallyExpanded={this.props.shouldDisplayExpanded}
                    onExpandChange={this._onExchangeChange.bind(this)}
                >
                    <CardHeader
                        title={this.props.prompt}
                        style={{borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none'}}
                        titleStyle={{color: colors.darkerGrey}}
                        actAsExpander={true}
                        showExpandableButton={true}
                    />
                    <CardText expandable={true}>
                        <div style={{lineHeight: 1.4}}>
                            {this.props.answer}
                        </div>
                    </CardText>
                </Card>
            </div>
        );
    }
    private _onExchangeChange() {
        this.setState({
            isExpanded: !this.state.isExpanded,
        });
    }
}