How to use grommet - 10 common examples

} else if (attempts === 4) {
        params = {
          country: props.country,
          format: 'json',
        };
      }

      // need to change map zoom depending on the number of attempts
      const mapSize = {
        1: 14,
        2: 10,
        3: 10,
        4: 5,
      };

      Rest
        .get(
          `${window.location.protocol}//nominatim.openstreetmap.org/search`,
          params
        )
        .end((err, res) => {
          if (!err && res.ok && res.body && res.body[0]) {
            const place = res.body[0];
            this.setState(
              { latitude: place.lat, longitude: place.lon, busy: false },
              this.setMap.bind(this, mapSize[attempts])
            );
          } else if (attempts < 4) {
            this.getGeocode(props, ++attempts);
          } else {
            console.log('!!! geocode response error', err, res);
            if (this.state.map) {

var _themes = require("grommet/themes");

var _utils = require("grommet/utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

// Two responsive grids
//    - First one with a known number of elements
//    - Second one with an unknown number of elements
// set custom breakpoints so we can see the changes
var customBreakpoints = (0, _utils.deepMerge)(_themes.grommet, {
  global: {
    breakpoints: {
      small: {
        value: 600
      },
      medium: {
        value: 900
      },
      large: 3000
    }
  }
}); // columns, rows and areas are for Grid with a known number of contents / boxes.
// If the size is small, we only see 1 column
// If the size is medium, we only see 2 columns
// If the size is either large or xlarge, we see 3 columns

var _grommet = require("grommet");

var _themes = require("grommet/themes");

var _utils = require("grommet/utils");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var customEdge = (0, _utils.deepMerge)(_themes.grommet, {
  rangeSelector: {
    edge: {
      type: _react["default"].createElement(_grommetIcons.Gremlin, {
        size: "large",
        color: "neutral-2"
      }) // it is also possible to use an actual node
      // type:  <div style="{{">,

    }
  }
});

var CustomEdgeControl = function CustomEdgeControl(_ref) {
  var _ref$direction = _ref.direction,
      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
      rest = _objectWithoutPropertiesLoose(_ref, ["direction"]);</div>

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Gremlin } from "grommet-icons/es6/icons/Gremlin";
import { Grommet as GrommetIcon } from "grommet-icons/es6/icons/Grommet";
import { Grommet, Box, RangeSelector, Stack, Text } from 'grommet';
import { grommet } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';
var customEdge = deepMerge(grommet, {
  rangeSelector: {
    edge: {
      type: React.createElement(Gremlin, {
        size: "large",
        color: "neutral-2"
      }) // it is also possible to use an actual node
      // type:  <div style="{{">,

    }
  }
});

var CustomEdgeControl = function CustomEdgeControl(_ref) {
  var _ref$direction = _ref.direction,
      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
      rest = _objectWithoutPropertiesLoose(_ref, ["direction"]);</div>

//                      ||
//                    \\||//
//                     \\//
//                 ____________
//
export const DropzoneIcon = () => (
  
    
);
const DropzoneIconStyled = styled.svg`
  fill: ${normalizeColor('light-5', theme)};
  width: 4rem;
  height: 4rem;
`;

dropzoneDragText: {
    defaultMessage: 'or drop it here',
    description: `File upload dropzone: helptext on the dropzone,
      goes along with the button (components.UploadForm.dropzoneButtonPick)`,
    id: 'components.UploadForm.dropzoneDragText',
  },
});

const DropzonePlaceholderStyled = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-grow: 1;
  align-items: center;
  background-color: ${normalizeColor('light-1', theme)};
  padding-top: 2rem;
  padding-bottom: 1rem;
`;

// Align the helptext vertically exactly with the button
const DropzoneHelpText = styled.span`
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  display: inline-block;
  border: 1px solid transparent;
  vertical-align: middle;
`;

// Make sure the dashbox background does not overlay the interactive UI
const DropzoneTextBox = styled(Box)`
  z-index: 1;
`;

border: 1px solid transparent;
  vertical-align: middle;
`;

// Make sure the dashbox background does not overlay the interactive UI
const DropzoneTextBox = styled(Box)`
  z-index: 1;
`;

const DropzoneDashBox = styled.div`
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  border: 3px dashed ${normalizeColor('light-5', theme)};
  border-radius: 0.375rem;
`;

export const DropzonePlaceholder = () => (
  
    
    
    
      <button label="{<FormattedMessage" color="{'brand'}">}
        primary={true}
      /&gt;
      
        </button>

var _grommetIcons = require('grommet-icons');

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _lib = require('../../lib');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

// Note: I shouldn't have to define the fill color
// This is a bug in v2: https://github.com/grommet/grommet/issues/2141
var StyledSocialAnchor = exports.StyledSocialAnchor = (0, _styledComponents2.default)(_grommet.Anchor)(_templateObject, _lib.whichTealColorForTheme, _lib.whichTealColorForTheme);

function SocialAnchor(_ref) {
  var colorTheme = _ref.colorTheme,
      hrefs = _ref.hrefs,
      service = _ref.service;

  var icons = {
    facebook: _react2.default.createElement(_grommetIcons.FacebookOption, { size: 'small' }),
    instagram: _react2.default.createElement(_grommetIcons.Instagram, { size: 'small' }),
    twitter: _react2.default.createElement(_grommetIcons.Twitter, { size: 'small' })
  };

  return _react2.default.createElement(
    _styledComponents.ThemeProvider,
    { theme: { mode: colorTheme } },
    _react2.default.createElement(StyledSocialAnchor, {

options = _useState[0],
      setOptions = _useState[1];

  var _useState2 = (0, _react.useState)(''),
      value = _useState2[0],
      setValue = _useState2[1];

  return _react["default"].createElement(_grommet.Grommet, {
    full: true,
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large"
  }, _react["default"].createElement(_grommet.Select, {
    size: "medium",
    placeholder: "Select",
    value: value,
    options: options,
    onChange: function onChange(_ref) {
      var option = _ref.option;
      return setValue(option);
    },
    onClose: function onClose() {
      return setOptions(defaultOptions);
    },
    onSearch: function onSearch(text) {
      // The line below escapes regular expression special characters:
      // [ \ ^ $ . | ? * + ( )
      var escapedText = text.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&'); // Create the regular expression with modified value which
      // handles escaping special characters. Without escaping special

var _React$useState = _react["default"].useState(),
      date = _React$useState[0],
      setDate = _React$useState[1];

  var _React$useState2 = _react["default"].useState(),
      time = _React$useState2[0],
      setTime = _React$useState2[1];

  var close = function close() {
    return onClose(date || initialDate, time || initialTime);
  };

  return _react["default"].createElement(_grommet.Box, {
    align: "center"
  }, _react["default"].createElement(_grommet.Calendar, {
    animate: false,
    date: date || initialDate,
    onSelect: setDate,
    showAdjacentDays: false
  }), _react["default"].createElement(_grommet.Box, {
    flex: false,
    pad: "medium",
    gap: "medium"
  }, _react["default"].createElement(_grommet.Keyboard, {
    onEnter: function onEnter(event) {
      event.preventDefault(); // so drop doesn't re-open

      close();
    }
  }, _react["default"].createElement(_grommet.MaskedInput, {
    mask: [{