grommet
Version:
focus on the essential experience
82 lines • 2.36 kB
JavaScript
import React, { useRef, useState } from 'react';
import { Box, Button, Drop, Nav, Text } from 'grommet';
import { Calculator } from "grommet-icons/es6/icons/Calculator";
import { Bug } from "grommet-icons/es6/icons/Bug";
import { Achievement } from "grommet-icons/es6/icons/Achievement";
var align = {
left: 'right'
};
var TooltipButton = function TooltipButton(_ref) {
var icon = _ref.icon,
name = _ref.name;
var _useState = useState(false),
over = _useState[0],
setOver = _useState[1];
var ref = useRef();
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
ref: ref,
onMouseOver: function onMouseOver() {
return setOver(true);
},
onMouseLeave: function onMouseLeave() {
return setOver(false);
},
onFocus: function onFocus() {
return setOver(true);
},
onBlur: function onBlur() {
return setOver(false);
},
plain: true
}, /*#__PURE__*/React.createElement(Box, {
pad: {
vertical: 'small'
},
align: "center"
}, icon)), ref.current && over && /*#__PURE__*/React.createElement(Drop, {
plain: true,
align: align,
target: ref.current,
margin: {
horizontal: 'small'
}
// trapFocus set to false allows tabbing through the buttons
,
trapFocus: false
}, /*#__PURE__*/React.createElement(Box, {
pad: "small",
background: "brand"
}, /*#__PURE__*/React.createElement(Text, {
color: "white"
}, name))));
};
export var TrapFocus = function TrapFocus() {
return (
/*#__PURE__*/
// Uncomment <Grommet> lines when using outside of storybook
// <Grommet theme={...}>
React.createElement(Nav, {
align: "center",
pad: "large"
}, /*#__PURE__*/React.createElement(TooltipButton, {
icon: /*#__PURE__*/React.createElement(Calculator, null),
name: "Calculator"
}), /*#__PURE__*/React.createElement(TooltipButton, {
icon: /*#__PURE__*/React.createElement(Bug, null),
name: "Bug"
}), /*#__PURE__*/React.createElement(TooltipButton, {
icon: /*#__PURE__*/React.createElement(Achievement, null),
name: "Achievement"
}))
// </Grommet>
);
};
TrapFocus.parameters = {
chromatic: {
disable: true
}
};
TrapFocus.storyName = 'Trap focus';
export default {
title: 'Controls/Drop/Trap focus'
};