%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/def/static/js/common/components/Button/ |
Current File : /home/emergentqj/actioncivile/pre-auth/def/static/js/common/components/Button/Button.js |
import React from "react"; import styled, { css } from "styled-components"; import { ifProp, theme } from "styled-tools"; import PropTypes from "prop-types"; import { Image } from "react-bootstrap"; import { Text, TEXT_KINDS, TEXT_SIZES } from "../Text"; const Wrapper = styled.button` display: inline-flex; align-items: center; text-align: center; background-color: ${ifProp("filled", theme("color.primary"), "transparent")}; border: ${ifProp( "outlined", ({ theme: { color } }) => `1px solid ${color.primary}`, "unset", )}; border-radius: ${ifProp("rounded", "19px", "4px")}; padding: 8px 16px; cursor: ${ifProp("disabled", "not-allowed", "pointer")}; &:focus { outline: 2px solid ${theme("color.info")}; } `; const Label = styled(Text)` ${ifProp( "extraPadding", css` margin-left: 8px; `, )} `; export function Button({ onClick, icon, outlined, filled, rounded, tabIndex, children, disabled, labelColor, id, }) { const handleOnClick = (event) => { event.stopPropagation(); onClick(); }; const handleKeyDown = ({ key }) => { if (key === "Enter") { handleOnClick(); } }; return ( <Wrapper onKeyDown={handleKeyDown} tabIndex={tabIndex} outlined={outlined} rounded={rounded} filled={filled} onClick={handleOnClick} disabled={disabled} hasChildren={!!children} id={id} > <Image src={icon} /> {children && ( <Label kind={TEXT_KINDS.LABEL} size={TEXT_SIZES.LARGE} color={ labelColor ?? (filled ? "neutral-container.primary" : "primary") } extraPadding={!!icon} > {children} </Label> )} </Wrapper> ); } Button.propTypes = { icon: PropTypes.string, // eslint-disable-next-line react/forbid-prop-types children: PropTypes.any, onClick: PropTypes.func.isRequired, outlined: PropTypes.bool, rounded: PropTypes.bool, filled: PropTypes.bool, tabIndex: PropTypes.string, disabled: PropTypes.bool, labelColor: PropTypes.string, id: PropTypes.string, }; Button.defaultProps = { icon: null, children: null, outlined: false, rounded: false, filled: false, tabIndex: "0", disabled: false, labelColor: null, id: null, };