%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/common/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/common/components/Checkbox.js |
import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; import { theme } from "styled-tools"; export const StyledCheckbox = styled.input.attrs({ type: "checkbox", })` /* Fix for global styles causing issues */ position: relative !important; left: 0 !important; opacity: 1 !important; width: 18px; height: 18px; padding: 0 !important; margin: 0 !important; accent-color: ${theme("color.primary")}; &:focus { outline: 2px solid ${theme("color.info")} !important; } `; export const CheckboxWrapper = styled.div` display: flex; align-items: center; `; export function Checkbox({ onChange, value }) { const handleKeyDown = ({ key }) => { if (key === "Enter") { onChange(!value); } }; return ( <CheckboxWrapper> <StyledCheckbox checked={value} onChange={({ target: { checked: newValue } }) => onChange(newValue)} onKeyDown={handleKeyDown} /> </CheckboxWrapper> ); } Checkbox.propTypes = { onChange: PropTypes.func.isRequired, value: PropTypes.func.isRequired, };