Login

Cloud Defense Logo

Products

Solutions

Company

Book A Live Demo

Top 10 Examples of "grommet in functional component" in JavaScript

Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'grommet' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.

} 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 &lt; 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 &lt; sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) &gt;= 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 = () =&gt; (
  
    
);
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 = () =&gt; (
  
    
    
    
      <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: [{

Is your System Free of Underlying Vulnerabilities?
Find Out Now