import React, { useCallback, useReducer } from 'react'; import PropTypes from 'prop-types'; import { produce } from 'immer'; import classnames from 'classnames'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import CheckBox from '../../../ui/check-box/check-box.component'; import { BackgroundColor, IconColor, TextVariant, TextAlign, Size, JustifyContent, FontWeight, } from '../../../../helpers/constants/design-system'; import Popover from '../../../ui/popover'; import Button from '../../../ui/button'; import { AvatarIcon, Text, IconName } from '../../../component-library'; import Box from '../../../ui/box/box'; /** * a very simple reducer using produce from Immer to keep checkboxes state manipulation * immutable and painless. */ const checkboxStateReducer = produce((state, action) => { switch (action.type) { case 'check': state[action.checkboxId] = state[action.checkboxId] ? !state[action.checkboxId] : true; break; default: throw new Error( 'You must provide a type when dispatching an action for checkboxState', ); } }); export default function SnapInstallWarning({ onCancel, onSubmit, warnings, snapName, }) { const t = useI18nContext(); const [checkboxState, dispatch] = useReducer(checkboxStateReducer, {}); const isAllChecked = warnings.every((warning) => checkboxState[warning.id]); const onCheckboxClicked = useCallback((checkboxId) => { dispatch({ type: 'check', checkboxId }); }, []); const SnapInstallWarningFooter = () => { return (
); }; return ( } headerProps={{ padding: [6, 6, 0] }} contentProps={{ paddingLeft: [6, 4], paddingRight: [6, 4], paddingTop: 0, paddingBottom: [6, 4], }} footerProps={{ padding: [4, 6] }} onClose={onCancel} > {t('snapInstallWarningHeading')} {warnings.length > 1 ? t('snapInstallWarningCheckPlural', [ {snapName} , ]) : t('snapInstallWarningCheck', [ {snapName} , ])} {warnings.map((warning, i) => (
onCheckboxClicked(warning.id)} />
))}
); } SnapInstallWarning.propTypes = { /** * onCancel handler */ onCancel: PropTypes.func, /** * onSubmit handler */ onSubmit: PropTypes.func, /** * warnings list */ warnings: PropTypes.arrayOf({ message: PropTypes.node, id: PropTypes.string, }), /** * Snap name */ snapName: PropTypes.string.isRequired, };