Questionnare

gistfile1.txt

import withStyles from '@material-ui/core/styles/withStyles';
import React, { useState } from 'react';
import { withQuestionWrapper } from '@scacap-whitelabel/components/lib/questions/component/wrapper';
import Grid from '@material-ui/core/Grid';
import { withI18n } from '@scacap-whitelabel/components/lib/i18n';
import InfoPopup from '@components/info-popup';
import { AmountInput } from '../input';
import Hint from '../hint';

const styles = ({ breakpoints, spacing }) => ({
    root: {
        width: '100%',
        '& span, & h5': {
            paddingLeft: spacing.unit,
            alignSelf: 'center'
        }
    },
    [breakpoints.mobile()]: {
        root: {
            '& span,& h5': {
                paddingLeft: 0
            }
        }
    }
});

const handleChange = (onChange, questionId) => ({ target: { value } }) => {
    onChange({
        questionId,
        answer: value
    });
};

const UnstyledAmountInputQuestion = ({
    question,
    error,
    onChange,
    currentSelection,
    description
}) => {
    const [showHint, setShowHint] = useState(false);
    // console.log(question);
    // console.log(InfoIComponent);
    // console.log(infoIPlacement);
    return (
        <Grid container direction="row">
            <Grid item md={6} xs={12}>
                <AmountInput
                    value={currentSelection}
                    onChange={handleChange(onChange, question.id)}
                    error={error}
                    onFocus={() => {
                        setShowHint(true);
                    }}
                    onBlur={() =>
                        setTimeout(() => {
                            setShowHint(false);
                        }, 100)
                    }
                />
            </Grid>
            <Grid item md={6} xs={12} component="span">
                {description && showHint ? <Hint label={description} variant="h5" /> : null}
            </Grid>
        </Grid>
    );
};

export { UnstyledAmountInputQuestion };

export const InternalAmountInputQuestion = withStyles(styles)(
    withQuestionWrapper({
        stylePrefix: 'amountInputQuestion'
    })(UnstyledAmountInputQuestion)
);

export const AmountInputQuestionComponent = props => {
    const { question, t, InfoIComponent, infoIPlacement, TitleComponent } = props;
    const { name } = question;
    console.log(props);
    // remove description so that question wrapper doesn't show it
    // eslint-disable-next-line react/destructuring-assignment
    const newQuestion = {
        ...question,
        description: ' '
        // title: t(`riskcapacity.${name}.title`)
    };

    const Title = () => {
        return (
            <>
                {t(`riskcapacity.${name}.title`)}
                {InfoIComponent()}
            </>
        );
    };

    return (
        <>
            <InternalAmountInputQuestion
                {...props}
                question={newQuestion}
                description={t(`riskcapacity.${name}.hint`)}
                InfoIComponent={InfoIComponent}
                TitleComponent={Title}
                infoIPlacement={infoIPlacement}
            />
        </>
    );
};

export default withI18n()(AmountInputQuestionComponent);