@dotconnor/grommet
Version:
focus on the essential experience
73 lines (71 loc) • 1.58 kB
JavaScript
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
})));
};