@polkadot/dev
Version:
A collection of shared CI scripts and development environment used by @polkadot projects
17 lines (16 loc) • 1.14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = require("styled-components");
const JsxChild_js_1 = tslib_1.__importDefault(require("./JsxChild.js"));
function Hidden({ children, className }) {
const [isMessageVisible, setMessageVisibility] = (0, react_1.useState)(false);
const onShow = (0, react_1.useCallback)((e) => setMessageVisibility(e.target.checked), []);
return ((0, jsx_runtime_1.jsxs)(StyledDiv, { className: className, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: 'toggle', children: "Show Message" }), (0, jsx_runtime_1.jsx)("input", { checked: isMessageVisible, id: 'toggle', onChange: onShow, type: 'checkbox' }), isMessageVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)(JsxChild_js_1.default, { label: 'hello' })] }))] }));
}
const StyledDiv = styled_components_1.styled.div `
background: red;
`;
exports.default = react_1.default.memo(Hidden);