synapse-react-client/dist/containers/TermsAndConditionsItem.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var check_svg_1 = require("../assets/icons/terms/check.svg");
var TermsAndConditionsItem = function (props) {
    var id = props.id, item = props.item, enabled = props.enabled, checked = props.checked, onChange = props.onChange;
    var _a = (0, react_1.useState)(false), showDesc = _a[0], setShowDes = _a[1];
    var _b = (0, react_1.useState)(false), isChecked = _b[0], setIsChecked = _b[1];
    var mounted = true;
    (0, react_1.useEffect)(function () {
        if (mounted) {
            setIsChecked(checked);
        }
        return function () {
            mounted = false;
        };
    }, [enabled, checked]);
    var handleShowDescLink = function (e) {
        e.preventDefault();
        if (enabled) {
            setShowDes(!showDesc);
        }
    };
    var handleCheckboxClick = function (e) {
        if (enabled) {
            onChange(id);
        }
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("span", { className: "terms-icon" }, react_1.default.createElement(item.icon, null)),
        react_1.default.createElement("span", { className: "terms-desc" },
            react_1.default.createElement("label", { dangerouslySetInnerHTML: { __html: item.label } }),
            showDesc && item.description && react_1.default.createElement("div", { className: "terms-desc-content", dangerouslySetInnerHTML: { __html: item.description } }),
            item.description &&
                react_1.default.createElement("div", null,
                    react_1.default.createElement("a", { className: "terms-show-desc highlight-link", href: "", onClick: handleShowDescLink }, showDesc ? "Show Less" : "Show More"))),
        react_1.default.createElement("span", { className: "terms-checkbox" },
            react_1.default.createElement("span", { className: isChecked ? "terms-circle terms-checked" : "terms-circle", onClick: handleCheckboxClick },
                react_1.default.createElement(check_svg_1.ReactComponent, null)),
            "I agree")));
};
exports.default = TermsAndConditionsItem;
//# sourceMappingURL=TermsAndConditionsItem.js.map