UNPKG

@dotconnor/grommet

Version:

focus on the essential experience

34 lines (30 loc) 900 B
import React from 'react'; import { Grommet, Box, List } from 'grommet'; import { grommet } from 'grommet/themes'; var data = []; for (var i = 0; i < 40; i += 1) { data.push({ entry: "entry-" + (i + 1) }); } export var Selection = function Selection() { var _ref; var _React$useState = React.useState(), selected = _React$useState[0], setSelected = _React$useState[1]; return /*#__PURE__*/React.createElement(Grommet, { theme: grommet }, /*#__PURE__*/React.createElement(Box, { align: "center", pad: "large", gap: "large" }, /*#__PURE__*/React.createElement(List, { data: data.slice(0, 10), itemProps: selected >= 0 ? (_ref = {}, _ref[selected] = { background: 'brand' }, _ref) : undefined, onClickItem: function onClickItem(event) { return setSelected(selected === event.index ? undefined : event.index); } }))); };