"use strict";

var _react = require("@storybook/react");

var _react2 = _interopRequireWildcard(require("react"));

var _ = require(".");

var _2 = require("..");

var _Box = require("../Box");

var _Slider = require("../Slider");

var _ToggleGroup = require("../ToggleGroup");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Form', module);
stories.add('Sample', function () {
  var _useState = (0, _react2.useState)({}),
      formValue = _useState[0],
      setFormValue = _useState[1];

  return __jsx(_Box.Box, {
    maxWidth: "md",
    mx: "auto",
    mt: 9
  }, __jsx(_.Form, {
    onSubmit: function onSubmit(e, _ref) {
      var getFormValue = _ref.getFormValue;
      e.preventDefault();
      setFormValue(getFormValue());
    },
    onChange: function onChange(p) {
      return console.log(p);
    },
    initialValue: {
      cone: 'waffle',
      first_name: 'testname',
      gender: 'female',
      age: 20,
      chocolate: false,
      caramel: true,
      flavor: 'mango',
      lactose_intolerant: true
    }
  }, __jsx(_2.InputGroup, {
    label: "First Name",
    name: "first_name"
  }, __jsx(_2.Input, null)), __jsx(_2.InputGroup, {
    label: "Age",
    name: "age"
  }, __jsx(_2.NumberInput, {
    max: 100,
    min: 0,
    step: 1
  })), __jsx(_2.RadioGroup, {
    label: "Gender",
    name: "gender"
  }, __jsx(_2.Radio, {
    value: "male"
  }, "Male"), __jsx(_2.Radio, {
    value: "female"
  }, "Female")), __jsx(_ToggleGroup.ToggleGroup, {
    label: "Type of cone",
    name: "cone"
  }, __jsx(_ToggleGroup.ToggleButton, {
    value: "regular"
  }, "Regular"), __jsx(_ToggleGroup.ToggleButton, {
    value: "waffle"
  }, "Waffle"), __jsx(_ToggleGroup.ToggleButton, {
    value: "dish"
  }, "Dish")), __jsx(_2.InputGroup, {
    label: "Ice cream flavor",
    name: "flavor"
  }, __jsx(_2.Select // isMulti
  , {
    options: [{
      value: 'chocolate',
      label: 'Chocolate'
    }, {
      value: 'vanilla',
      label: 'Vanilla'
    }, {
      label: 'Fruits',
      options: [{
        label: 'Strawberry',
        value: 'strawberry'
      }, {
        label: 'Mango',
        value: 'mango'
      }]
    }]
  })), __jsx(_2.CheckboxGroup, {
    name: "toppings",
    label: "Toppings"
  }, __jsx(_2.Checkbox, {
    name: "chocolate"
  }, "Chocolate"), __jsx(_2.Checkbox, {
    name: "caramel"
  }, "Caramel")), __jsx(_2.InputGroup, {
    name: "lactose_intolerant"
  }, __jsx(_2.Switch, null, "I'm lactose intolerant")), __jsx(_Slider.Slider, {
    name: "slider",
    id: "sliderId"
  }, __jsx(_Slider.SliderFilledTrack, null), __jsx(_Slider.SliderTrack, null), __jsx(_Slider.SliderThumb, null)), __jsx(_2.Button, {
    type: "submit"
  }, "Submit")), formValue && __jsx(_Box.Box, null, __jsx(_2.Heading, {
    kind: "h4"
  }), Object.keys(formValue).map(function (key) {
    return __jsx(_2.Text, null, key, " : ", formValue[key].toString());
  })));
});
//# sourceMappingURL=examples.js.map