UNPKG

@dotconnor/grommet

Version:

focus on the essential experience

73 lines (71 loc) 1.58 kB
import React, { useState } from 'react'; import { FormDown } from "grommet-icons/es6/icons/FormDown"; import { FormUp } from "grommet-icons/es6/icons/FormUp"; import { Box, Grommet, Select } from 'grommet'; import { grommet } from 'grommet/themes'; import { deepMerge } from 'grommet/utils'; var customRoundedTheme = deepMerge(grommet, { global: { colors: { selected: 'neutral-3' }, control: { border: { radius: '24px' } }, input: { weight: 400 }, font: { size: '12px' } }, text: { medium: '13px' }, textInput: { extend: 'padding: 0 12px;' }, select: { control: { extend: 'padding: 3px 6px;', open: { background: '#ece0fa', border: '1px solid #7D4CDB' } }, icons: { down: FormDown, up: FormUp, color: 'dark-1', margin: 'small' } } }); export var Themed = function Themed() { var options = ['one', 'two']; var _useState = useState(''), value = _useState[0], setValue = _useState[1]; return /*#__PURE__*/React.createElement(Grommet, { full: true, theme: customRoundedTheme }, /*#__PURE__*/React.createElement(Box, { fill: true, align: "center", justify: "start", pad: "large" }, /*#__PURE__*/React.createElement(Select, { id: "select", name: "select", placeholder: "Select", value: value, options: options, onChange: function onChange(_ref) { var option = _ref.option; return setValue(option); }, open: true }))); };