grommet
Version:
focus on the essential experience
67 lines (66 loc) • 2.26 kB
JavaScript
;
exports.__esModule = true;
exports["default"] = exports.OnClickItemList = void 0;
var _react = _interopRequireDefault(require("react"));
var _grommet = require("grommet");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var locations = ['Boise', 'Fort Collins', 'Los Gatos', 'Palo Alto', 'San Francisco'];
var data = [];
for (var i = 0; i < 40; i += 1) {
data.push({
entry: "entry-" + (i + 1),
location: locations[i % locations.length],
date: "2018-07-" + (i % 30 + 1),
percent: i % 11 * 10,
paid: (i + 1) * 17 % 1000
});
}
var OnClickItemList = exports.OnClickItemList = function OnClickItemList() {
var _React$useState = _react["default"].useState(),
clicked = _React$useState[0],
setClicked = _React$useState[1];
var _React$useState2 = _react["default"].useState(),
show = _React$useState2[0],
setShow = _React$useState2[1];
return /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large",
gap: "large"
}, /*#__PURE__*/_react["default"].createElement(_grommet.List, {
"aria-label": "onClickItem list",
data: data.slice(0, 10),
onClickItem: function onClickItem(event) {
setShow(true);
setClicked(event.item);
}
}), show && /*#__PURE__*/_react["default"].createElement(_grommet.Layer, {
position: "center",
onEsc: function onEsc() {
return setShow(false);
},
onClickOutside: function onClickOutside() {
return setShow(false);
}
}, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
margin: "medium"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Text, null, clicked && JSON.stringify(clicked, null, 2)), /*#__PURE__*/_react["default"].createElement(_grommet.Button, {
margin: {
top: 'medium'
},
label: "close",
onClick: function onClick() {
return setShow(false);
}
}))));
};
OnClickItemList.storyName = 'onClickItem';
OnClickItemList.parameters = {
// chromatic disabled because snapshot is covered by jest testing
// and snapshot is the same as selection
chromatic: {
disable: true
}
};
var _default = exports["default"] = {
title: 'Visualizations/List/onClickItem'
};