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

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
-```