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

package/src/feedback-config/__tests__/__snapshots__/feedback-config.test.jsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeedbackConfig render Feedback Config Component snapshot matches the snapshot 1`] = `
+<div>
+  <WithStyles(ExpansionPanel)>
+    <WithStyles(ExpansionPanelSummary)
+      expandIcon={<pure(ExpandMoreIcon) />}
+    >
+      <WithStyles(Typography)>
+        Feedback
+      </WithStyles(Typography)>
+    </WithStyles(ExpansionPanelSummary)>
+    <WithStyles(ExpansionPanelDetails)>
+      <div>
+        <WithStyles(FeedbackSelector)
+          label="If correct, show"
+          onChange={[Function]}
+        />
+        <WithStyles(FeedbackSelector)
+          label="If incorrect, show"
+          onChange={[Function]}
+        />
+      </div>
+    </WithStyles(ExpansionPanelDetails)>
+  </WithStyles(ExpansionPanel)>
+</div>
+`;

package/src/feedback-config/__tests__/__snapshots__/feedback-selector.test.jsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`feedback-selector snapshot renders 1`] = `
+<div>
+  <WithStyles(RawInputContainer)
+    extraClasses={
+      Object {
+        "label": undefined,
+      }
+    }
+    label="foo"
+  >
+    <WithStyles(Group)
+      feedbackLabels={
+        Object {
+          "custom": "Customized Feedback",
+          "default": "Simple Feedback",
+          "none": "No Feedback",
+        }
+      }
+      keys={
+        Array [
+          "default",
+          "none",
+          "custom",
+        ]
+      }
+      label="foo"
+      onChange={[Function]}
+      value="default"
+    />
+  </WithStyles(RawInputContainer)>
+  <div>
+     
+    hi
+  </div>
+</div>
+`;

package/src/feedback-config/__tests__/feedback-config.test.jsx

@@ -0,0 +1,71 @@
+import React, { PropTypes } from 'react';
+import Enzyme, { shallow, mount } from 'enzyme';
+import { FeedbackConfig } from '../index';
+import FeedbackSelector from '../feedback-selector';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('FeedbackConfig', () => {
+  describe('render', () => {
+    let component, selectors;
+    let feedback = {
+      correctFeedback: undefined,
+      correctFeedbackType: 'default',
+      incorrectFeedback: undefined,
+      incorrectFeedbackType: 'default',
+    };
+
+    let defaults = {
+      correct: 'Correct',
+      incorrect: 'Incorrect',
+      partial: 'Nearly',
+    };
+
+    describe('Feedback Config Component', () => {
+      it('should exist', () => {
+        component = shallow(
+          <FeedbackConfig feedback={feedback} defaults={defaults} onChange={jest.fn()} classes={{}} />,
+        );
+
+        selectors = component.find(FeedbackSelector);
+
+        expect(selectors.length).toEqual(3);
+      });
+
+      describe('props', () => {
+        it('should not render optionally correct if optional is not needed', () => {
+          component = shallow(
+            <FeedbackConfig
+              allowPartial={false}
+              feedback={feedback}
+              defaults={defaults}
+              onChange={jest.fn()}
+              classes={{}}
+            />,
+          );
+
+          selectors = component.find(FeedbackSelector);
+
+          expect(selectors.length).toEqual(2);
+        });
+      });
+
+      describe('snapshot', () => {
+        it('matches the snapshot', () => {
+          component = shallow(
+            <FeedbackConfig
+              allowPartial={false}
+              feedback={feedback}
+              defaults={defaults}
+              onChange={jest.fn()}
+              classes={{}}
+            />,
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

package/src/feedback-config/__tests__/feedback-selector.test.jsx

@@ -0,0 +1,60 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { FeedbackSelector } from '../feedback-selector';
+
+describe('feedback-selector', () => {
+  let w, onChange;
+
+  const getWrapper = () => {
+    return shallow(
+      <FeedbackSelector
+        classes={{}}
+        label={'foo'}
+        onChange={onChange}
+        feedback={{
+          type: 'default',
+          default: 'hi',
+        }}
+      />,
+    );
+  };
+
+  beforeEach(() => {
+    onChange = jest.fn();
+    w = getWrapper();
+  });
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('changeCustom', () => {
+      it('calls onChange with text', () => {
+        w.instance().changeCustom('bar');
+        expect(onChange).toBeCalledWith({
+          type: 'custom',
+          custom: 'bar',
+          default: 'hi',
+        });
+      });
+    });
+
+    describe('changeType', () => {
+      it('calls onChange with default', () => {
+        w.instance().changeType('default');
+        expect(onChange).toBeCalledWith({ type: 'default', default: 'hi' });
+      });
+      it('calls onChange with custom', () => {
+        w.instance().changeType('custom');
+        expect(onChange).toBeCalledWith({ type: 'custom', default: 'hi' });
+      });
+      it('calls onChange with none', () => {
+        w.instance().changeType('none');
+        expect(onChange).toBeCalledWith({ type: 'none', default: 'hi' });
+      });
+    });
+  });
+});

package/src/inputs.jsx

@@ -6,6 +6,7 @@ import React from 'react';
 import Switch from '@material-ui/core/Switch';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
+import { color } from '@pie-lib/render-ui';
 
 const InputTypes = {
   classes: PropTypes.object.isRequired,
@@ -40,7 +41,7 @@ const RawInputCheckbox = (props) => {
   return (
     <InputContainer className={className} label={label}>
       <Checkbox
-        className={classNames(classes.checkboxRoot, error && classes.error)}
+        className={classNames(classes.checkboxRoot, classes.customColor, error && classes.error)}
         disabled={disabled}
         checked={checked}
         onChange={onChange}
@@ -58,7 +59,7 @@ const RawInputRadio = (props) => {
   return (
     <InputContainer className={className} label={label}>
       <Radio
-        className={classNames(classes.radioRoot, error && classes.error)}
+        className={classNames(classes.radioRoot, classes.customColor, error && classes.error)}
         disabled={disabled}
         checked={checked}
         onChange={onChange}
@@ -77,6 +78,9 @@ const InputCheckbox = withStyles((theme) => ({
   error: {
     color: theme.palette.error.main,
   },
+  customColor: {
+    color: `${color.tertiary()} !important`,
+  },
 }))(RawInputCheckbox);
 
 const InputRadio = withStyles((theme) => ({
@@ -86,6 +90,9 @@ const InputRadio = withStyles((theme) => ({
   error: {
     color: theme.palette.error.main,
   },
+  customColor: {
+    color: `${color.tertiary()} !important`,
+  },
 }))(RawInputRadio);
 
 export { InputSwitch, InputCheckbox, InputRadio };

package/src/layout/__tests__/__snapshots__/config.layout.test.jsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`layout - snapshot renders correctly with a side panel 1`] = `
+<WithContentRect
+  classes={
+    Object {
+      "extraCSSRules": "WithContentRect-extraCSSRules-1",
+    }
+  }
+  settings={
+    <div>
+      <div>
+        Foo
+      </div>
+      <div>
+        Bar
+      </div>
+    </div>
+  }
+>
+  <div>
+    <div>
+      Foo
+    </div>
+    <div>
+      Bar
+    </div>
+  </div>
+</WithContentRect>
+`;
+
+exports[`layout - snapshot renders correctly without a side panel 1`] = `
+<WithContentRect
+  classes={
+    Object {
+      "extraCSSRules": "WithContentRect-extraCSSRules-1",
+    }
+  }
+  settings={
+    <div>
+      <div>
+        Foo
+      </div>
+      <div>
+        Bar
+      </div>
+    </div>
+  }
+>
+  <div>
+    <div>
+      Foo
+    </div>
+    <div>
+      Bar
+    </div>
+  </div>
+</WithContentRect>
+`;

package/src/layout/__tests__/config.layout.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import ConfigLayout from '../config-layout';
+import { shallow } from 'enzyme';
+
+describe('layout - snapshot', () => {
+  it('renders correctly with a side panel', () => {
+    const tree = shallow(
+      <ConfigLayout
+        settings={
+          <div>
+            <div key={0}>Foo</div>
+            <div key={1}>Bar</div>
+          </div>
+        }
+      >
+        <div>
+          <div>Foo</div>
+          <div>Bar</div>
+        </div>
+      </ConfigLayout>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders correctly without a side panel', () => {
+    const tree = shallow(
+      <ConfigLayout
+        settings={
+          <div>
+            <div key={0}>Foo</div>
+            <div key={1}>Bar</div>
+          </div>
+        }
+      >
+        <div>
+          <div>Foo</div>
+          <div>Bar</div>
+        </div>
+      </ConfigLayout>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/layout/__tests__/layout-content.test.jsx

@@ -0,0 +1,3 @@
+describe('layout-content', () => {
+  it.todo('add tests!');
+});

package/src/layout/config-layout.jsx

@@ -1,11 +1,18 @@
 import React from 'react';
 import Measure from 'react-measure';
 import { withContentRect } from 'react-measure';
+import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import LayoutContents from './layout-contents';
 import SettingsBox from './settings-box';
+import { AppendCSSRules } from '@pie-lib/render-ui';
 
-class MeasuredConfigLayout extends React.Component {
+const styles = {
+  extraCSSRules: {},
+};
+
+class MeasuredConfigLayout extends AppendCSSRules {
   static propTypes = {
     children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
     className: PropTypes.string,
@@ -17,13 +24,13 @@ class MeasuredConfigLayout extends React.Component {
   };
 
   static defaultProps = {
-    sidePanelMinWidth: 950,
+    sidePanelMinWidth: 1135,
     hideSettings: false,
     dimensions: {},
   };
 
-  constructor(props) {
-    super(props);
+  constructor(...props) {
+    super(...props);
     this.state = { layoutMode: undefined };
   }
 
@@ -33,7 +40,7 @@ class MeasuredConfigLayout extends React.Component {
     const { maxWidth } = dimensions || {};
 
     const layoutMode =
-      bounds.width >= sidePanelMinWidth && (maxWidth ? maxWidth >= sidePanelMinWidth : true) ? 'inline' : 'tabbed';
+      bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
 
     this.setState({ layoutMode });
   };
@@ -42,15 +49,16 @@ class MeasuredConfigLayout extends React.Component {
     return (
       <Measure bounds onResize={this.onResize}>
         {({ measureRef }) => {
-          const { children, settings, hideSettings, dimensions } = this.props;
+          const { children, settings, hideSettings, dimensions, classes } = this.props;
           const { layoutMode } = this.state;
 
           const settingsPanel =
             layoutMode === 'inline' ? <SettingsBox className="settings-box">{settings}</SettingsBox> : settings;
           const secondaryContent = hideSettings ? null : settingsPanel;
+          const finalClass = classNames('main-container', classes.extraCSSRules);
 
           return (
-            <div ref={measureRef} className="main-container">
+            <div ref={measureRef} className={finalClass}>
               <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
                 {children}
               </LayoutContents>
@@ -62,6 +70,6 @@ class MeasuredConfigLayout extends React.Component {
   }
 }
 
-const ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);
+const ConfigLayout = withStyles(styles)(withContentRect('bounds')(MeasuredConfigLayout));
 
 export default ConfigLayout;

package/src/number-text-field-custom.jsx

@@ -8,6 +8,7 @@ import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import Remove from '@material-ui/icons/Remove';
 import Add from '@material-ui/icons/Add';
+import * as math from 'mathjs';
 
 const styles = () => ({
   input: {
@@ -53,7 +54,7 @@ export class NumberTextFieldCustom extends React.Component {
     helperText: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     onlyIntegersAllowed: PropTypes.bool,
-    value: PropTypes.number,
+    value: PropTypes.any,
     min: PropTypes.number,
     max: PropTypes.number,
     step: PropTypes.number,
@@ -61,6 +62,7 @@ export class NumberTextFieldCustom extends React.Component {
     disableUnderline: PropTypes.bool,
     textAlign: PropTypes.string,
     variant: PropTypes.string,
+    type: PropTypes.string,
   };
 
   static defaultProps = {
@@ -89,13 +91,13 @@ export class NumberTextFieldCustom extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(props) {
-    const { value, currentIndex } = this.normalizeValueAndIndex(props.customValues, props.value);
+    const { value, currentIndex } = this.normalizeValueAndIndex(props.customValues, props.value, props.min, props.max);
 
     this.setState({ value, currentIndex });
   }
 
-  clamp(value) {
-    const { min, max, customValues } = this.props;
+  clamp(value, min = this.props.min, max = this.props.max) {
+    const { customValues } = this.props;
 
     if ((customValues || []).length > 0) {
       return value;
@@ -116,12 +118,14 @@ export class NumberTextFieldCustom extends React.Component {
     return value;
   }
 
-  normalizeValueAndIndex = (customValues, number) => {
-    const value = this.clamp(number);
+  normalizeValueAndIndex = (customValues, number, min, max) => {
+    const { type } = this.props;
+    const value = this.clamp(number, min, max);
     const currentIndex = (customValues || []).findIndex((val) => val === value);
 
     if ((customValues || []).length > 0 && currentIndex === -1) {
-      const closestValue = this.getClosestValue(customValues, value);
+      const closestValue =
+        type === 'text' ? this.getClosestFractionValue(customValues, value) : this.getClosestValue(customValues, value);
 
       return { value: closestValue.value, currentIndex: closestValue.index };
     }
@@ -136,50 +140,92 @@ export class NumberTextFieldCustom extends React.Component {
       { value: customValues[0], index: 0 },
     );
 
-  onBlur = (event) => {
-    const { customValues, onlyIntegersAllowed } = this.props;
-    const { value } = event.target;
-    const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
+  getClosestFractionValue = (customValues, number) =>
+    customValues.reduce(
+      (closest, value, index) =>
+        Math.abs(math.number(math.fraction(value)) - math.number(math.fraction(number))) <
+        Math.abs(math.number(math.fraction(closest.value)) - math.number(math.fraction(number)))
+          ? { value, index }
+          : closest,
+      { value: customValues[0], index: 0 },
+    );
 
-    const { value: number, currentIndex } = this.normalizeValueAndIndex(customValues, rawNumber);
+  getValidFraction = (value) => {
+    if (this.isPositiveInteger(value.trim())) {
+      return value.trim();
+    }
+    if (value.trim() === '' || value.trim().split('/').length !== 2) {
+      return false;
+    }
+    let [numerator, denominator] = value.trim().split('/');
+    if (isNaN(numerator) || isNaN(denominator)) {
+      return false;
+    }
+    numerator = parseFloat(numerator);
+    denominator = parseFloat(denominator);
+    if (!Number.isInteger(numerator) || !Number.isInteger(denominator)) {
+      return false;
+    }
+    if (numerator < 0 || denominator < 1) {
+      return false;
+    }
+    return numerator + '/' + denominator;
+  };
+
+  isPositiveInteger = (n) => {
+    return n >>> 0 === parseFloat(n);
+  };
 
-    if (number !== this.state.value) {
-      this.setState(
-        {
-          value: number.toString(),
-          currentIndex,
-        },
-        () => this.props.onChange(event, number),
-      );
+  onBlur = (event) => {
+    const { customValues, onlyIntegersAllowed, type } = this.props;
+    let { value } = event.target;
+    if (type === 'text') {
+      let tempValue = this.getValidFraction(value);
+      if (tempValue) {
+        value = tempValue;
+      } else {
+        value = this.props.value;
+      }
+    }
+    let rawNumber = onlyIntegersAllowed ? Math.round(parseFloat(value)) : parseFloat(value);
+    if (type === 'text') {
+      rawNumber = value.trim();
     }
+    const { value: number, currentIndex } = this.normalizeValueAndIndex(customValues, rawNumber);
+    this.setState(
+      {
+        value: number.toString(),
+        currentIndex,
+      },
+      () => this.props.onChange(event, number),
+    );
   };
 
   onChange(event) {
+    const { type } = this.props;
     const { value } = event.target;
-
+    if (type !== 'text' && typeof value === 'string' && value.trim() === '') {
+      return;
+    }
     this.setState({ value });
   }
 
   changeValue(event, sign = 1, shouldUpdate = false) {
     event.preventDefault();
-
     const { customValues, step, onlyIntegersAllowed, onChange } = this.props;
     const { currentIndex, value } = this.state;
     const updatedIndex = currentIndex + sign * 1;
     let number;
-
     if (customValues.length > 0) {
       if (updatedIndex < 0 || updatedIndex >= customValues.length) {
         return;
       }
-
       number = customValues[updatedIndex];
     } else {
       const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
       const updatedValue = (rawNumber * 10000 + step * sign * 10000) / 10000;
       number = this.clamp(updatedValue);
     }
-
     this.setState(
       {
         value: number.toString(),
@@ -202,14 +248,26 @@ export class NumberTextFieldCustom extends React.Component {
       error,
       min,
       max,
+      customValues,
       inputClassName,
       disableUnderline,
       helperText,
       variant,
       textAlign,
+      type = 'number',
     } = this.props;
     const { value } = this.state;
     const names = classNames(className, classes.input);
+    //Logic to disable the increment and decrement buttons
+    let disabledStart = false;
+    let disabledEnd = false;
+    if (customValues.length > 0) {
+      disabledStart = value === customValues[0];
+      disabledEnd = value === customValues[customValues.length - 1];
+    } else if (isFinite(min) && isFinite(max)) {
+      disabledStart = value === min;
+      disabledEnd = value === max;
+    }
 
     return (
       <TextField
@@ -238,7 +296,7 @@ export class NumberTextFieldCustom extends React.Component {
           }
         }}
         title={''}
-        type="number"
+        type={type}
         className={names}
         InputProps={{
           className: inputClassName,
@@ -247,7 +305,7 @@ export class NumberTextFieldCustom extends React.Component {
             <InputAdornment position="start">
               <IconButton
                 className={classes.iconButton}
-                disabled={disabled}
+                disabled={disabled ? disabled : disabledStart}
                 onClick={(e) => this.changeValue(e, -1, true)}
               >
                 <Remove fontSize="small" />
@@ -258,7 +316,7 @@ export class NumberTextFieldCustom extends React.Component {
             <InputAdornment position="end">
               <IconButton
                 className={classes.iconButton}
-                disabled={disabled}
+                disabled={disabled ? disabled : disabledEnd}
                 onClick={(e) => this.changeValue(e, 1, true)}
               >
                 <Add fontSize="small" />

package/src/number-text-field.jsx

@@ -68,23 +68,24 @@ export class NumberTextField extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(props) {
-    const value = this.clamp(props.value);
+    const value = this.clamp(props.value, props.min, props.max);
+
     this.setState({ value });
   }
 
-  clamp(value) {
+  clamp(value, min = this.props.min, max = this.props.max) {
     if (!isFinite(value)) {
-      return fallbackNumber(this.props.min, this.props.max);
+      return fallbackNumber(min, max);
     }
 
-    const { min, max } = this.props;
-
     if (isFinite(max)) {
       value = Math.min(value, max);
     }
+
     if (isFinite(min)) {
       value = Math.max(value, min);
     }
+
     return value;
   }