@pie-lib/config-ui 11.9.25-next.0 → 11.10.1-beta.0

package/src/radio-with-label.jsx

@@ -2,17 +2,21 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Radio from '@material-ui/core/Radio';
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
+import { color } from '@pie-lib/render-ui';
 
 export default withStyles({
   label: {
     left: '-5px',
     position: 'relative',
   },
+  customColor: {
+    color: `${color.tertiary()} !important`,
+  },
 })(({ label, value, checked, onChange, classes }) => (
   <FormControlLabel
     value={value}
-    classes={classes}
-    control={<Radio checked={checked} onChange={onChange} />}
+    classes={{ label: classes.label }}
+    control={<Radio className={classes.customColor} checked={checked} onChange={onChange} />}
     label={label}
   />
 ));

package/src/settings/index.js

@@ -8,10 +8,11 @@ export const textField = (label, isConfigProperty = true) => ({
   isConfigProperty,
 });
 
-export const toggle = (label, isConfigProperty = false) => ({
+export const toggle = (label, isConfigProperty = false, disabled = false) => ({
   type: 'toggle',
   label,
   isConfigProperty,
+  disabled,
 });
 
 const toChoice = (opt) => {

package/src/settings/panel.jsx

@@ -11,7 +11,7 @@ import debug from 'debug';
 import Toggle from './toggle';
 import { NChoice } from '../two-choice';
 import SettingsRadioLabel from './settings-radio-label';
-import { NumberTextField } from '../index';
+import NumberTextField from '../number-text-field';
 import Checkbox from '../checkbox';
 import Typography from '@material-ui/core/Typography';
 
@@ -151,6 +151,7 @@ const NumberField = withStyles((theme) => ({
       showErrorWhenOutsideRange
       inputClassName={classes.wrapper}
       disableUnderline
+      classes={classes}
     />
   );
 });
@@ -168,7 +169,9 @@ TextField.propTypes = {
   ...baseTypes,
 };
 
-const ToggleWrapper = ({ label, value, onChange }) => <Toggle label={label} checked={!!value} toggle={onChange} />;
+const ToggleWrapper = ({ disabled, label, value, onChange }) => (
+  <Toggle label={label} checked={!!value} disabled={!!disabled} toggle={onChange} />
+);
 
 ToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };
 

package/src/settings/settings-radio-label.jsx

@@ -2,6 +2,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Radio from '@material-ui/core/Radio';
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
+import { color } from '@pie-lib/render-ui';
 
 export default withStyles((theme) => ({
   label: {
@@ -10,11 +11,14 @@ export default withStyles((theme) => ({
     left: '-5px',
     position: 'relative',
   },
+  customColor: {
+    color: `${color.tertiary()} !important`,
+  },
 }))(({ label, value, checked, onChange, classes }) => (
   <FormControlLabel
     value={value}
-    classes={classes}
-    control={<Radio checked={checked} onChange={onChange} />}
+    classes={{ label: classes.label }}
+    control={<Radio className={classes.customColor} checked={checked} onChange={onChange} />}
     label={label}
   />
 ));

package/src/settings/toggle.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import InputLabel from '@material-ui/core/InputLabel';
 import { withStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
+import classNames from 'classnames';
+import { color } from '@pie-lib/render-ui';
 
 const Toggle = withStyles((theme) => ({
   toggle: {
@@ -15,10 +17,26 @@ const Toggle = withStyles((theme) => ({
     fontSize: theme.typography.fontSize,
     paddingTop: theme.spacing.unit * 2,
   },
-}))(({ checked, label, toggle, classes }) => (
+  checkedThumb: {
+    color: `${color.tertiary()} !important`,
+  },
+  checkedBar: {
+    backgroundColor: `${color.tertiaryLight()} !important`,
+  },
+}))(({ checked, disabled, label, toggle, classes }) => (
   <div className={classes.toggle}>
     <InputLabel className={classes.label}>{label}</InputLabel>
-    <Switch checked={checked} onChange={(e) => toggle(e.target.checked)} />
+    <Switch
+      classes={{
+        checked: classNames(classes.checkedThumb),
+        bar: classNames({
+          [classes.checkedBar]: checked,
+        }),
+      }}
+      checked={checked}
+      disabled={disabled}
+      onChange={(e) => toggle(e.target.checked)}
+    />
   </div>
 ));
 

package/src/tags-input/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagsInput snapshots renders 1`] = `
+<TagsInput
+  classes={
+    Object {
+      "tagsInput": "tagsInput",
+    }
+  }
+  onChange={[MockFunction]}
+  tags={
+    Array [
+      "foo",
+    ]
+  }
+>
+  <WithStyles(Component)
+    focused={false}
+  >
+    <Component
+      classes={
+        Object {
+          "focused": "Component-focused-2",
+          "muiBox": "Component-muiBox-1",
+        }
+      }
+      focused={false}
+    >
+      <div
+        className="Component-muiBox-1"
+      >
+        <div
+          className="tagsInput"
+        >
+          <WithStyles(Component)
+            key="0"
+            label="foo"
+            onDelete={[Function]}
+          >
+            <Component
+              classes={
+                Object {
+                  "tag": "Component-tag-3",
+                }
+              }
+              label="foo"
+              onDelete={[Function]}
+            >
+              <WithStyles(Chip)
+                className="Component-tag-3"
+                label="foo"
+                onDelete={[Function]}
+              >
+                <Chip
+                  className="Component-tag-3"
+                  classes={
+                    Object {
+                      "avatar": "MuiChip-avatar-16",
+                      "avatarChildren": "MuiChip-avatarChildren-19",
+                      "avatarColorPrimary": "MuiChip-avatarColorPrimary-17",
+                      "avatarColorSecondary": "MuiChip-avatarColorSecondary-18",
+                      "clickable": "MuiChip-clickable-7",
+                      "clickableColorPrimary": "MuiChip-clickableColorPrimary-8",
+                      "clickableColorSecondary": "MuiChip-clickableColorSecondary-9",
+                      "colorPrimary": "MuiChip-colorPrimary-5",
+                      "colorSecondary": "MuiChip-colorSecondary-6",
+                      "deletable": "MuiChip-deletable-10",
+                      "deletableColorPrimary": "MuiChip-deletableColorPrimary-11",
+                      "deletableColorSecondary": "MuiChip-deletableColorSecondary-12",
+                      "deleteIcon": "MuiChip-deleteIcon-24",
+                      "deleteIconColorPrimary": "MuiChip-deleteIconColorPrimary-25",
+                      "deleteIconColorSecondary": "MuiChip-deleteIconColorSecondary-26",
+                      "deleteIconOutlinedColorPrimary": "MuiChip-deleteIconOutlinedColorPrimary-27",
+                      "deleteIconOutlinedColorSecondary": "MuiChip-deleteIconOutlinedColorSecondary-28",
+                      "icon": "MuiChip-icon-20",
+                      "iconColorPrimary": "MuiChip-iconColorPrimary-21",
+                      "iconColorSecondary": "MuiChip-iconColorSecondary-22",
+                      "label": "MuiChip-label-23",
+                      "outlined": "MuiChip-outlined-13",
+                      "outlinedPrimary": "MuiChip-outlinedPrimary-14",
+                      "outlinedSecondary": "MuiChip-outlinedSecondary-15",
+                      "root": "MuiChip-root-4",
+                    }
+                  }
+                  color="default"
+                  component="div"
+                  label="foo"
+                  onDelete={[Function]}
+                  variant="default"
+                >
+                  <div
+                    className="MuiChip-root-4 MuiChip-deletable-10 Component-tag-3"
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <span
+                      className="MuiChip-label-23"
+                    >
+                      foo
+                    </span>
+                    <pure(Cancel)
+                      className="MuiChip-deleteIcon-24"
+                      onClick={[Function]}
+                    >
+                      <Cancel
+                        className="MuiChip-deleteIcon-24"
+                        onClick={[Function]}
+                      >
+                        <WithStyles(SvgIcon)
+                          className="MuiChip-deleteIcon-24"
+                          onClick={[Function]}
+                        >
+                          <SvgIcon
+                            className="MuiChip-deleteIcon-24"
+                            classes={
+                              Object {
+                                "colorAction": "MuiSvgIcon-colorAction-32",
+                                "colorDisabled": "MuiSvgIcon-colorDisabled-34",
+                                "colorError": "MuiSvgIcon-colorError-33",
+                                "colorPrimary": "MuiSvgIcon-colorPrimary-30",
+                                "colorSecondary": "MuiSvgIcon-colorSecondary-31",
+                                "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-35",
+                                "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-37",
+                                "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-36",
+                                "root": "MuiSvgIcon-root-29",
+                              }
+                            }
+                            color="inherit"
+                            component="svg"
+                            fontSize="default"
+                            onClick={[Function]}
+                            viewBox="0 0 24 24"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className="MuiSvgIcon-root-29 MuiChip-deleteIcon-24"
+                              focusable="false"
+                              onClick={[Function]}
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                              />
+                            </svg>
+                          </SvgIcon>
+                        </WithStyles(SvgIcon)>
+                      </Cancel>
+                    </pure(Cancel)>
+                  </div>
+                </Chip>
+              </WithStyles(Chip)>
+            </Component>
+          </WithStyles(Component)>
+          <input
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </Component>
+  </WithStyles(Component)>
+</TagsInput>
+`;

package/src/tags-input/__tests__/index.test.jsx

@@ -0,0 +1,62 @@
+import { TagsInput } from '../index';
+import toJson from 'enzyme-to-json';
+import { shallow, mount } from 'enzyme';
+import React from 'react';
+
+describe('TagsInput', () => {
+  describe('snapshots', () => {
+    it('renders', () => {
+      const wrapper = mount(<TagsInput classes={{ tagsInput: 'tagsInput' }} tags={['foo']} onChange={jest.fn()} />);
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let onChange;
+    const mkWrapper = () => {
+      onChange = jest.fn();
+      return shallow(<TagsInput onChange={onChange} classes={{}} tags={['foo']} />);
+    };
+
+    describe('onFocus', () => {
+      it('sets state.focused = true', () => {
+        const wrapper = mkWrapper();
+        wrapper.instance().onFocus();
+        expect(wrapper.state('focused')).toEqual(true);
+      });
+    });
+
+    describe('onBlur', () => {
+      it('sets state.focused = false', () => {
+        const wrapper = mkWrapper();
+        wrapper.instance().onFocus();
+        wrapper.instance().onBlur();
+        expect(wrapper.state('focused')).toEqual(false);
+      });
+    });
+
+    describe('onChange', () => {
+      it('sets state.value  ', () => {
+        const wrapper = mkWrapper();
+        wrapper.instance().onChange({ target: { value: 'boo' } });
+        expect(wrapper.state('value')).toEqual('boo');
+      });
+    });
+
+    describe('onKeyDown', () => {
+      it('calls onChange on enter', () => {
+        const wrapper = mkWrapper();
+        wrapper.setState({ value: 'banana' });
+        wrapper.instance().onKeyDown({ keyCode: 13 });
+        expect(onChange).toBeCalledWith(['foo', 'banana']);
+      });
+
+      it('doesnt calls onChange on enter if the value is the same as a value in tags', () => {
+        const wrapper = mkWrapper();
+        wrapper.setState({ value: 'foo' });
+        wrapper.instance().onKeyDown({ keyCode: 13 });
+        expect(onChange).not.toBeCalled();
+      });
+    });
+  });
+});

package/README.md

@@ -1,12 +0,0 @@
-# install
-
-```
-npm install
-```
-
-# demo
-
-```
-cd demo
-../node_modules/.bin/webpack-dev-server --hot --inline
-```

package/lib/alert-dialog.js

@@ -1,44 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _core = require("@material-ui/core");
-
-var AlertDialog = function AlertDialog(_ref) {
-  var text = _ref.text,
-      title = _ref.title,
-      onClose = _ref.onClose,
-      onConfirm = _ref.onConfirm,
-      open = _ref.open;
-  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
-    open: open,
-    onClose: onClose
-  }, title && /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, null, title), text && /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_core.DialogContentText, null, text)), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, null, onClose && /*#__PURE__*/_react["default"].createElement(_core.Button, {
-    onClick: onClose,
-    color: "primary"
-  }, "CANCEL"), onConfirm && /*#__PURE__*/_react["default"].createElement(_core.Button, {
-    autoFocus: true,
-    onClick: onConfirm,
-    color: "primary"
-  }, "OK")));
-};
-
-AlertDialog.propTypes = {
-  text: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  onClose: _propTypes["default"].func,
-  onConfirm: _propTypes["default"].func,
-  open: _propTypes["default"].bool
-};
-var _default = AlertDialog;
-exports["default"] = _default;
-//# sourceMappingURL=alert-dialog.js.map

package/lib/alert-dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/alert-dialog.jsx"],"names":["AlertDialog","text","title","onClose","onConfirm","open","propTypes","PropTypes","string","func","bool"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,WAAW,GAAG,SAAdA,WAAc;AAAA,MAAGC,IAAH,QAAGA,IAAH;AAAA,MAASC,KAAT,QAASA,KAAT;AAAA,MAAgBC,OAAhB,QAAgBA,OAAhB;AAAA,MAAyBC,SAAzB,QAAyBA,SAAzB;AAAA,MAAoCC,IAApC,QAAoCA,IAApC;AAAA,sBAClB,gCAAC,YAAD;AAAQ,IAAA,IAAI,EAAEA,IAAd;AAAoB,IAAA,OAAO,EAAEF;AAA7B,KACGD,KAAK,iBAAI,gCAAC,iBAAD,QAAcA,KAAd,CADZ,EAEGD,IAAI,iBACH,gCAAC,mBAAD,qBACE,gCAAC,uBAAD,QAAoBA,IAApB,CADF,CAHJ,eAOE,gCAAC,mBAAD,QACGE,OAAO,iBACN,gCAAC,YAAD;AAAQ,IAAA,OAAO,EAAEA,OAAjB;AAA0B,IAAA,KAAK,EAAC;AAAhC,cAFJ,EAMGC,SAAS,iBACR,gCAAC,YAAD;AAAQ,IAAA,SAAS,MAAjB;AAAkB,IAAA,OAAO,EAAEA,SAA3B;AAAsC,IAAA,KAAK,EAAC;AAA5C,UAPJ,CAPF,CADkB;AAAA,CAApB;;AAuBAJ,WAAW,CAACM,SAAZ,GAAwB;AACtBL,EAAAA,IAAI,EAAEM,sBAAUC,MADM;AAEtBN,EAAAA,KAAK,EAAEK,sBAAUC,MAFK;AAGtBL,EAAAA,OAAO,EAAEI,sBAAUE,IAHG;AAItBL,EAAAA,SAAS,EAAEG,sBAAUE,IAJC;AAKtBJ,EAAAA,IAAI,EAAEE,sBAAUG;AALM,CAAxB;eAQeV,W","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';\n\nconst AlertDialog = ({ text, title, onClose, onConfirm, open }) => (\n  <Dialog open={open} onClose={onClose}>\n    {title && <DialogTitle>{title}</DialogTitle>}\n    {text && (\n      <DialogContent>\n        <DialogContentText>{text}</DialogContentText>\n      </DialogContent>\n    )}\n    <DialogActions>\n      {onClose && (\n        <Button onClick={onClose} color=\"primary\">\n          CANCEL\n        </Button>\n      )}\n      {onConfirm && (\n        <Button autoFocus onClick={onConfirm} color=\"primary\">\n          OK\n        </Button>\n      )}\n    </DialogActions>\n  </Dialog>\n);\n\nAlertDialog.propTypes = {\n  text: PropTypes.string,\n  title: PropTypes.string,\n  onClose: PropTypes.func,\n  onConfirm: PropTypes.func,\n  open: PropTypes.bool,\n};\n\nexport default AlertDialog;\n"],"file":"alert-dialog.js"}

package/lib/checkbox.js

@@ -1,94 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
-
-var Checkbox = function Checkbox(_ref) {
-  var _classNames2;
-
-  var mini = _ref.mini,
-      checked = _ref.checked,
-      onChange = _ref.onChange,
-      value = _ref.value,
-      label = _ref.label,
-      classes = _ref.classes,
-      error = _ref.error;
-  return /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
-    className: (0, _classnames["default"])(classes.mini),
-    classes: {
-      label: (0, _classnames["default"])(classes.label, (0, _defineProperty2["default"])({}, classes.miniLabel, mini))
-    },
-    control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-      checked: checked,
-      onChange: onChange,
-      value: value,
-      className: (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, classes.miniCheckbox, mini), (0, _defineProperty2["default"])(_classNames2, classes.error, error), _classNames2))
-    }),
-    label: label
-  });
-};
-
-Checkbox.propTypes = {
-  mini: _propTypes["default"].bool,
-  classes: _propTypes["default"].object.isRequired,
-  checked: _propTypes["default"].bool.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  value: _propTypes["default"].string,
-  label: _propTypes["default"].string.isRequired
-};
-Checkbox.defaultProps = {
-  value: '',
-  mini: false
-};
-
-var _default = (0, _styles.withStyles)(function (theme) {
-  return {
-    label: {
-      fontSize: theme.typography.fontSize - 1,
-      transform: 'translate(-4%, 2%)',
-      color: 'rgba(0,0,0,1.0)'
-    },
-    miniCheckbox: {
-      margin: 0,
-      padding: 0,
-      width: theme.spacing.unit * 3,
-      height: theme.spacing.unit * 3
-    },
-    miniLabel: {
-      marginLeft: theme.spacing.unit,
-      color: _grey["default"][700],
-      fontSize: theme.typography.fontSize - 3
-    },
-    mini: {
-      margin: 0,
-      marginLeft: 0,
-      padding: 0
-    },
-    error: {
-      color: theme.palette.error.main
-    }
-  };
-})(Checkbox);
-
-exports["default"] = _default;
-//# sourceMappingURL=checkbox.js.map

package/lib/checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/checkbox.jsx"],"names":["Checkbox","mini","checked","onChange","value","label","classes","error","miniLabel","miniCheckbox","propTypes","PropTypes","bool","object","isRequired","func","string","defaultProps","theme","fontSize","typography","transform","color","margin","padding","width","spacing","unit","height","marginLeft","grey","palette","main"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW;AAAA;;AAAA,MAAGC,IAAH,QAAGA,IAAH;AAAA,MAASC,OAAT,QAASA,OAAT;AAAA,MAAkBC,QAAlB,QAAkBA,QAAlB;AAAA,MAA4BC,KAA5B,QAA4BA,KAA5B;AAAA,MAAmCC,KAAnC,QAAmCA,KAAnC;AAAA,MAA0CC,OAA1C,QAA0CA,OAA1C;AAAA,MAAmDC,KAAnD,QAAmDA,KAAnD;AAAA,sBACf,gCAAC,4BAAD;AACE,IAAA,SAAS,EAAE,4BAAWD,OAAO,CAACL,IAAnB,CADb;AAEE,IAAA,OAAO,EAAE;AACPI,MAAAA,KAAK,EAAE,4BAAWC,OAAO,CAACD,KAAnB,uCAA6BC,OAAO,CAACE,SAArC,EAAiDP,IAAjD;AADA,KAFX;AAKE,IAAA,OAAO,eACL,gCAAC,oBAAD;AACE,MAAA,OAAO,EAAEC,OADX;AAEE,MAAA,QAAQ,EAAEC,QAFZ;AAGE,MAAA,KAAK,EAAEC,KAHT;AAIE,MAAA,SAAS,EAAE,+FAAcE,OAAO,CAACG,YAAtB,EAAqCR,IAArC,kDAA4CK,OAAO,CAACC,KAApD,EAA4DA,KAA5D;AAJb,MANJ;AAaE,IAAA,KAAK,EAAEF;AAbT,IADe;AAAA,CAAjB;;AAkBAL,QAAQ,CAACU,SAAT,GAAqB;AACnBT,EAAAA,IAAI,EAAEU,sBAAUC,IADG;AAEnBN,EAAAA,OAAO,EAAEK,sBAAUE,MAAV,CAAiBC,UAFP;AAGnBZ,EAAAA,OAAO,EAAES,sBAAUC,IAAV,CAAeE,UAHL;AAInBX,EAAAA,QAAQ,EAAEQ,sBAAUI,IAAV,CAAeD,UAJN;AAKnBV,EAAAA,KAAK,EAAEO,sBAAUK,MALE;AAMnBX,EAAAA,KAAK,EAAEM,sBAAUK,MAAV,CAAiBF;AANL,CAArB;AASAd,QAAQ,CAACiB,YAAT,GAAwB;AACtBb,EAAAA,KAAK,EAAE,EADe;AAEtBH,EAAAA,IAAI,EAAE;AAFgB,CAAxB;;eAKe,wBAAW,UAACiB,KAAD;AAAA,SAAY;AACpCb,IAAAA,KAAK,EAAE;AACLc,MAAAA,QAAQ,EAAED,KAAK,CAACE,UAAN,CAAiBD,QAAjB,GAA4B,CADjC;AAELE,MAAAA,SAAS,EAAE,oBAFN;AAGLC,MAAAA,KAAK,EAAE;AAHF,KAD6B;AAMpCb,IAAAA,YAAY,EAAE;AACZc,MAAAA,MAAM,EAAE,CADI;AAEZC,MAAAA,OAAO,EAAE,CAFG;AAGZC,MAAAA,KAAK,EAAEP,KAAK,CAACQ,OAAN,CAAcC,IAAd,GAAqB,CAHhB;AAIZC,MAAAA,MAAM,EAAEV,KAAK,CAACQ,OAAN,CAAcC,IAAd,GAAqB;AAJjB,KANsB;AAYpCnB,IAAAA,SAAS,EAAE;AACTqB,MAAAA,UAAU,EAAEX,KAAK,CAACQ,OAAN,CAAcC,IADjB;AAETL,MAAAA,KAAK,EAAEQ,iBAAK,GAAL,CAFE;AAGTX,MAAAA,QAAQ,EAAED,KAAK,CAACE,UAAN,CAAiBD,QAAjB,GAA4B;AAH7B,KAZyB;AAiBpClB,IAAAA,IAAI,EAAE;AACJsB,MAAAA,MAAM,EAAE,CADJ;AAEJM,MAAAA,UAAU,EAAE,CAFR;AAGJL,MAAAA,OAAO,EAAE;AAHL,KAjB8B;AAsBpCjB,IAAAA,KAAK,EAAE;AACLe,MAAAA,KAAK,EAAEJ,KAAK,CAACa,OAAN,CAAcxB,KAAd,CAAoByB;AADtB;AAtB6B,GAAZ;AAAA,CAAX,EAyBXhC,QAzBW,C","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport MuiCheckbox from '@material-ui/core/Checkbox';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport grey from '@material-ui/core/colors/grey';\n\nconst Checkbox = ({ mini, checked, onChange, value, label, classes, error }) => (\n  <FormControlLabel\n    className={classNames(classes.mini)}\n    classes={{\n      label: classNames(classes.label, { [classes.miniLabel]: mini }),\n    }}\n    control={\n      <MuiCheckbox\n        checked={checked}\n        onChange={onChange}\n        value={value}\n        className={classNames({ [classes.miniCheckbox]: mini, [classes.error]: error })}\n      />\n    }\n    label={label}\n  />\n);\n\nCheckbox.propTypes = {\n  mini: PropTypes.bool,\n  classes: PropTypes.object.isRequired,\n  checked: PropTypes.bool.isRequired,\n  onChange: PropTypes.func.isRequired,\n  value: PropTypes.string,\n  label: PropTypes.string.isRequired,\n};\n\nCheckbox.defaultProps = {\n  value: '',\n  mini: false,\n};\n\nexport default withStyles((theme) => ({\n  label: {\n    fontSize: theme.typography.fontSize - 1,\n    transform: 'translate(-4%, 2%)',\n    color: 'rgba(0,0,0,1.0)',\n  },\n  miniCheckbox: {\n    margin: 0,\n    padding: 0,\n    width: theme.spacing.unit * 3,\n    height: theme.spacing.unit * 3,\n  },\n  miniLabel: {\n    marginLeft: theme.spacing.unit,\n    color: grey[700],\n    fontSize: theme.typography.fontSize - 3,\n  },\n  mini: {\n    margin: 0,\n    marginLeft: 0,\n    padding: 0,\n  },\n  error: {\n    color: theme.palette.error.main,\n  },\n}))(Checkbox);\n"],"file":"checkbox.js"}