grommet/es6/components/Select/stories/ChildrenRender.stories.js

focus on the essential experience

import React, { useState } from 'react';
import { FormClose } from "grommet-icons/es6/icons/FormClose";
import { Box, Button, Select, Text } from 'grommet';
var allSeasons = ['S01', 'S02', 'S03', 'S04', 'S05', 'S06', 'S07', 'S08', 'S09', 'S10'];
export var Children = function Children() {
  var _useState = useState([]),
    selected = _useState[0],
    setSelected = _useState[1];
  var onRemoveSeason = function onRemoveSeason(season) {
    setSelected(selected.filter(function (selectedSeason) {
      return selectedSeason !== season;
    }));
  };
  var renderSeason = function renderSeason(season) {
    return /*#__PURE__*/React.createElement(Button, {
      key: "season_tag_" + season,
      href: "#",
      onClick: function onClick(event) {
        event.preventDefault();
        event.stopPropagation();
        onRemoveSeason(season);
      },
      onFocus: function onFocus(event) {
        return event.stopPropagation();
      }
    }, /*#__PURE__*/React.createElement(Box, {
      align: "center",
      direction: "row",
      gap: "xsmall",
      pad: {
        vertical: 'xsmall',
        horizontal: 'small'
      },
      margin: "xsmall",
      background: "brand",
      round: "large"
    }, /*#__PURE__*/React.createElement(Text, {
      size: "small"
    }, season), /*#__PURE__*/React.createElement(Box, {
      round: "full",
      margin: {
        left: 'xsmall'
      }
    }, /*#__PURE__*/React.createElement(FormClose, {
      size: "small",
      style: {
        width: '12px',
        height: '12px'
      }
    }))));
  };
  var renderOption = function renderOption(option, state) {
    return /*#__PURE__*/React.createElement(Box, {
      pad: "small",
      background: state.active ? 'active' : undefined
    }, option);
  };
  return (
    /*#__PURE__*/
    // Uncomment <Grommet> lines when using outside of storybook
    // <Grommet theme={...}>
    React.createElement(Box, {
      fill: true,
      align: "center",
      justify: "center"
    }, /*#__PURE__*/React.createElement(Select, {
      closeOnChange: false,
      multiple: true,
      valueLabel: /*#__PURE__*/React.createElement(Box, {
        wrap: true,
        direction: "row",
        width: "small"
      }, selected && selected.length ? selected.map(function (value) {
        return renderSeason(value);
      }) : /*#__PURE__*/React.createElement(Box, {
        pad: {
          vertical: 'xsmall',
          horizontal: 'small'
        },
        margin: "xsmall"
      }, "Select Season")),
      options: allSeasons,
      value: selected,
      disabled: [2, 6],
      onChange: function onChange(_ref) {
        var nextSelected = _ref.value;
        setSelected(nextSelected);
      }
    }, renderOption))
    // </Grommet>
  );
};
Children.parameters = {
  chromatic: {
    disable: true
  }
};
Children.args = {
  full: true
};
export default {
  title: 'Input/Select/Children'
};