@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
63 lines (59 loc) • 1.6 kB
JavaScript
import { Icon } from '../../Icon/index.js';
import { close } from '@equinor/eds-icons';
import { Button } from '../../Button/Button.js';
import styled from 'styled-components';
import { filterDOMProps } from '@react-aria/utils';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
const StyledButton = styled(Button).withConfig({
displayName: "Toggle__StyledButton",
componentId: "sc-1bwqcj7-0"
})(["height:24px;width:24px;"]);
/**
* Toggle component encapsulates the reset and open calendar buttons
*/
const Toggle = ({
reset,
setOpen,
open,
icon,
disabled,
buttonProps,
valueString,
showClearButton,
readonly
}) => {
return readonly || disabled ? null : /*#__PURE__*/jsxs(Fragment, {
children: [showClearButton && /*#__PURE__*/jsx(StyledButton, {
disabled: disabled,
variant: 'ghost_icon',
"aria-label": 'Reset',
onClick: () => {
reset();
},
onKeyDown: e => {
if (e.code === 'Enter' || e.code === 'Space') {
e.preventDefault();
e.stopPropagation();
reset();
}
},
children: /*#__PURE__*/jsx(Icon, {
data: close
})
}), /*#__PURE__*/jsx(StyledButton, {
...filterDOMProps(buttonProps),
disabled: disabled,
"aria-label": valueString ? `Change date, ${valueString}` : `Change date`,
variant: 'ghost_icon',
onClick: e => {
e.preventDefault();
e.stopPropagation();
setOpen(!open);
},
children: /*#__PURE__*/jsx(Icon, {
data: icon
})
})]
});
};
export { Toggle };