@pie-lib/config-ui 10.10.4-next.62 → 10.10.4-next.626

package/lib/with-stateful-model.js

@@ -1,64 +1,59 @@
 "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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+var _react = _interopRequireDefault(require("react"));
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var withStatefulModel = function withStatefulModel(Component) {
-  var Stateful =
-  /*#__PURE__*/
-  function (_React$Component) {
-    _inherits(Stateful, _React$Component);
+  var Stateful = /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2["default"])(Stateful, _React$Component);
+
+    var _super = _createSuper(Stateful);
 
     function Stateful(props) {
       var _this;
 
-      _classCallCheck(this, Stateful);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Stateful).call(this, props));
-
-      _defineProperty(_assertThisInitialized(_this), "onChange", function (model) {
+      (0, _classCallCheck2["default"])(this, Stateful);
+      _this = _super.call(this, props);
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (model) {
         _this.setState({
           model: model
         }, function () {
           _this.props.onChange(_this.state.model);
         });
       });
-
       _this.state = {
         model: props.model
       };
       return _this;
     }
 
-    _createClass(Stateful, [{
+    (0, _createClass2["default"])(Stateful, [{
       key: "componentWillReceiveProps",
       value: function componentWillReceiveProps(props) {
         this.setState({
@@ -68,21 +63,19 @@ var withStatefulModel = function withStatefulModel(Component) {
     }, {
       key: "render",
       value: function render() {
-        return _react["default"].createElement(Component, {
+        return /*#__PURE__*/_react["default"].createElement(Component, {
           model: this.state.model,
           onChange: this.onChange
         });
       }
     }]);
-
     return Stateful;
   }(_react["default"].Component);
 
-  _defineProperty(Stateful, "propTypes", {
+  (0, _defineProperty2["default"])(Stateful, "propTypes", {
     model: _propTypes["default"].object.isRequired,
     onChange: _propTypes["default"].func.isRequired
   });
-
   return Stateful;
 };
 

package/lib/with-stateful-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/with-stateful-model.jsx"],"names":["withStatefulModel","Component","Stateful","props","model","setState","onChange","state","React","PropTypes","object","isRequired","func"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAAAC,SAAS,EAAI;AAAA,MAC/BC,QAD+B;AAAA;AAAA;AAAA;;AAOnC,sBAAYC,KAAZ,EAAmB;AAAA;;AAAA;;AACjB,oFAAMA,KAAN;;AADiB,iEAWR,UAAAC,KAAK,EAAI;AAClB,cAAKC,QAAL,CAAc;AAAED,UAAAA,KAAK,EAALA;AAAF,SAAd,EAAyB,YAAM;AAC7B,gBAAKD,KAAL,CAAWG,QAAX,CAAoB,MAAKC,KAAL,CAAWH,KAA/B;AACD,SAFD;AAGD,OAfkB;;AAEjB,YAAKG,KAAL,GAAa;AACXH,QAAAA,KAAK,EAAED,KAAK,CAACC;AADF,OAAb;AAFiB;AAKlB;;AAZkC;AAAA;AAAA,gDAcTD,KAdS,EAcF;AAC/B,aAAKE,QAAL,CAAc;AAAED,UAAAA,KAAK,EAAED,KAAK,CAACC;AAAf,SAAd;AACD;AAhBkC;AAAA;AAAA,+BAwB1B;AACP,eAAO,gCAAC,SAAD;AAAW,UAAA,KAAK,EAAE,KAAKG,KAAL,CAAWH,KAA7B;AAAoC,UAAA,QAAQ,EAAE,KAAKE;AAAnD,UAAP;AACD;AA1BkC;;AAAA;AAAA,IACdE,kBAAMP,SADQ;;AAAA,kBAC/BC,QAD+B,eAEhB;AACjBE,IAAAA,KAAK,EAAEK,sBAAUC,MAAV,CAAiBC,UADP;AAEjBL,IAAAA,QAAQ,EAAEG,sBAAUG,IAAV,CAAeD;AAFR,GAFgB;;AA6BrC,SAAOT,QAAP;AACD,CA9BD;;eAgCeF,iB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst withStatefulModel = Component => {\n  class Stateful extends React.Component {\n    static propTypes = {\n      model: PropTypes.object.isRequired,\n      onChange: PropTypes.func.isRequired\n    };\n\n    constructor(props) {\n      super(props);\n      this.state = {\n        model: props.model\n      };\n    }\n\n    componentWillReceiveProps(props) {\n      this.setState({ model: props.model });\n    }\n\n    onChange = model => {\n      this.setState({ model }, () => {\n        this.props.onChange(this.state.model);\n      });\n    };\n\n    render() {\n      return <Component model={this.state.model} onChange={this.onChange} />;\n    }\n  }\n\n  return Stateful;\n};\n\nexport default withStatefulModel;\n"],"file":"with-stateful-model.js"}
+{"version":3,"file":"with-stateful-model.js","names":["withStatefulModel","Component","Stateful","props","model","setState","onChange","state","React","PropTypes","object","isRequired","func"],"sources":["../src/with-stateful-model.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst withStatefulModel = Component => {\n  class Stateful extends React.Component {\n    static propTypes = {\n      model: PropTypes.object.isRequired,\n      onChange: PropTypes.func.isRequired\n    };\n\n    constructor(props) {\n      super(props);\n      this.state = {\n        model: props.model\n      };\n    }\n\n    componentWillReceiveProps(props) {\n      this.setState({ model: props.model });\n    }\n\n    onChange = model => {\n      this.setState({ model }, () => {\n        this.props.onChange(this.state.model);\n      });\n    };\n\n    render() {\n      return <Component model={this.state.model} onChange={this.onChange} />;\n    }\n  }\n\n  return Stateful;\n};\n\nexport default withStatefulModel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAAAC,SAAS,EAAI;EAAA,IAC/BC,QAD+B;IAAA;;IAAA;;IAOnC,kBAAYC,KAAZ,EAAmB;MAAA;;MAAA;MACjB,0BAAMA,KAAN;MADiB,6FAWR,UAAAC,KAAK,EAAI;QAClB,MAAKC,QAAL,CAAc;UAAED,KAAK,EAALA;QAAF,CAAd,EAAyB,YAAM;UAC7B,MAAKD,KAAL,CAAWG,QAAX,CAAoB,MAAKC,KAAL,CAAWH,KAA/B;QACD,CAFD;MAGD,CAfkB;MAEjB,MAAKG,KAAL,GAAa;QACXH,KAAK,EAAED,KAAK,CAACC;MADF,CAAb;MAFiB;IAKlB;;IAZkC;MAAA;MAAA,OAcnC,mCAA0BD,KAA1B,EAAiC;QAC/B,KAAKE,QAAL,CAAc;UAAED,KAAK,EAAED,KAAK,CAACC;QAAf,CAAd;MACD;IAhBkC;MAAA;MAAA,OAwBnC,kBAAS;QACP,oBAAO,gCAAC,SAAD;UAAW,KAAK,EAAE,KAAKG,KAAL,CAAWH,KAA7B;UAAoC,QAAQ,EAAE,KAAKE;QAAnD,EAAP;MACD;IA1BkC;IAAA;EAAA,EACdE,iBAAA,CAAMP,SADQ;;EAAA,iCAC/BC,QAD+B,eAEhB;IACjBE,KAAK,EAAEK,qBAAA,CAAUC,MAAV,CAAiBC,UADP;IAEjBL,QAAQ,EAAEG,qBAAA,CAAUG,IAAV,CAAeD;EAFR,CAFgB;EA6BrC,OAAOT,QAAP;AACD,CA9BD;;eAgCeF,iB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/config-ui",
-  "version": "10.10.4-next.62+1f1d2cba",
+  "version": "10.10.4-next.626+ec82d2a5",
   "main": "lib/index.js",
   "module": "src/index.js",
   "publishConfig": {
@@ -10,9 +10,9 @@
   "dependencies": {
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
-    "@pie-lib/editable-html": "^7.17.4-next.62+1f1d2cba",
+    "@pie-lib/editable-html": "^9.1.4",
     "@pie-lib/icons": "^2.4.25",
-    "@pie-lib/render-ui": "^4.12.0",
+    "@pie-lib/render-ui": "^4.13.4",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
@@ -26,5 +26,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "1f1d2cba382179d4a5e3956f5763ae0db8882bde"
+  "gitHead": "ec82d2a52d750cb7e069157bc2c58dee83227ce0"
 }

package/src/alert-dialog.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle
+} from '@material-ui/core';
+
+const AlertDialog = ({ text, title, onClose, onConfirm, open }) => (
+  <Dialog open={open} onClose={onClose}>
+    {title && <DialogTitle>{title}</DialogTitle>}
+    {text && (
+      <DialogContent>
+        <DialogContentText>{text}</DialogContentText>
+      </DialogContent>
+    )}
+    <DialogActions>
+      {onClose && (
+        <Button onClick={onClose} color="primary">
+          CANCEL
+        </Button>
+      )}
+      {onConfirm && (
+        <Button autoFocus onClick={onConfirm} color="primary">
+          OK
+        </Button>
+      )}
+    </DialogActions>
+  </Dialog>
+);
+
+AlertDialog.propTypes = {
+  text: PropTypes.string,
+  title: PropTypes.string,
+  onClose: PropTypes.func,
+  onConfirm: PropTypes.func,
+  open: PropTypes.bool
+};
+
+export default AlertDialog;

package/src/choice-configuration/index.jsx

@@ -25,8 +25,12 @@ const EditableHtmlContainer = withStyles(theme => ({
     className,
     imageSupport,
     disabled,
+    spellCheck,
     nonEmpty,
-    toolbarOpts
+    toolbarOpts,
+    error,
+    maxImageWidth,
+    maxImageHeight
   }) => {
     const names = classNames(classes.labelContainer, className);
 
@@ -36,11 +40,16 @@ const EditableHtmlContainer = withStyles(theme => ({
           <EditableHtml
             markup={value || ''}
             disabled={disabled}
+            spellCheck={spellCheck}
             nonEmpty={nonEmpty}
             onChange={onChange}
             imageSupport={imageSupport}
             className={classes.editor}
             toolbarOpts={toolbarOpts}
+            error={error}
+            maxImageWidth={maxImageWidth}
+            maxImageHeight={maxImageHeight}
+            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
           />
         </div>
       </InputContainer>
@@ -183,10 +192,13 @@ export class ChoiceConfiguration extends React.Component {
       useLetterOrdering,
       imageSupport,
       disabled,
+      spellCheck,
       nonEmpty,
       allowFeedBack,
       allowDelete,
-      toolbarOpts
+      toolbarOpts,
+      error,
+      noCorrectAnswerError
     } = this.props;
 
     const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
@@ -204,6 +216,7 @@ export class ChoiceConfiguration extends React.Component {
             onChange={this.onCheckedChange}
             label={!noLabels ? 'Correct' : ''}
             checked={!!data.correct}
+            error={noCorrectAnswerError}
           />
           <div className={classes.middleColumn}>
             <EditableHtmlContainer
@@ -212,9 +225,12 @@ export class ChoiceConfiguration extends React.Component {
               onChange={this.onLabelChange}
               imageSupport={imageSupport}
               disabled={disabled}
+              spellCheck={spellCheck}
               nonEmpty={nonEmpty}
               toolbarOpts={toolbarOpts}
+              error={error}
             />
+            {error && <div className={classes.errorText}>{error}</div>}
 
             {allowFeedBack && (
               <Feedback
@@ -294,6 +310,10 @@ const styles = theme => ({
     display: 'flex',
     flex: 1,
     flexDirection: 'column'
+  },
+  errorText: {
+    fontSize: '12px',
+    color: 'red'
   }
 });
 

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

@@ -102,6 +102,7 @@ export class FeedbackSelector extends React.Component {
               onChange={this.changeCustom}
               markup={feedback.custom || ''}
               toolbarOpts={toolbarOpts}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
             />
           </div>
         )}

package/src/form-section.jsx

@@ -13,9 +13,9 @@ const styles = theme => ({
   }
 });
 
-export default withStyles(styles)(({ className, classes, label, children }) => (
+export default withStyles(styles)(({ className, classes, label, children, labelExtraStyle }) => (
   <div className={classNames(classes.formSection, className)}>
-    <Typography className={classes.label} type="subheading">
+    <Typography className={classes.label} type="subheading" style={labelExtraStyle}>
       {label}
     </Typography>
     {children}

package/src/index.js

@@ -1,3 +1,4 @@
+import AlertDialog from './alert-dialog';
 import FeedbackConfig, {
   FeedbackSelector,
   buildDefaults as feedbackConfigDefaults
@@ -11,6 +12,7 @@ import Help from './help';
 import Input from './input';
 import { InputContainer } from '@pie-lib/render-ui';
 import NumberTextField from './number-text-field';
+import NumberTextFieldCustom from './number-text-field-custom';
 import TwoChoice, { NChoice } from './two-choice';
 import TagsInput from './tags-input';
 import MuiBox from './mui-box';
@@ -25,6 +27,7 @@ import DisplaySize from './settings/display-size';
 import * as settings from './settings';
 
 export {
+  AlertDialog,
   FeedbackConfig,
   FeedbackSelector,
   feedbackConfigDefaults,
@@ -40,6 +43,7 @@ export {
   Input,
   InputContainer,
   NumberTextField,
+  NumberTextFieldCustom,
   TwoChoice,
   NChoice,
   TagsInput,

package/src/inputs.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Switch from '@material-ui/core/Switch';
 import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
 
 const InputTypes = {
   classes: PropTypes.object.isRequired,
@@ -12,7 +13,8 @@ const InputTypes = {
   label: PropTypes.string,
   checked: PropTypes.bool,
   onChange: PropTypes.func,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  error: PropTypes.string
 };
 
 const RawInputSwitch = ({ classes, className, label, checked, onChange }) => {
@@ -38,12 +40,12 @@ const InputSwitch = withStyles({
 })(RawInputSwitch);
 
 const RawInputCheckbox = props => {
-  const { classes, className, label, checked, onChange, disabled } = props;
+  const { classes, className, label, checked, onChange, disabled, error } = props;
 
   return (
     <InputContainer className={className} label={label}>
       <Checkbox
-        className={classes.checkboxRoot}
+        className={classNames(classes.checkboxRoot, error && classes.error)}
         disabled={disabled}
         checked={checked}
         onChange={onChange}
@@ -56,12 +58,12 @@ const RawInputCheckbox = props => {
 RawInputCheckbox.propTypes = { ...InputTypes };
 
 const RawInputRadio = props => {
-  const { classes, className, label, checked, onChange, disabled } = props;
+  const { classes, className, label, checked, onChange, disabled, error } = props;
 
   return (
     <InputContainer className={className} label={label}>
       <Radio
-        className={classes.radioRoot}
+        className={classNames(classes.radioRoot, error && classes.error)}
         disabled={disabled}
         checked={checked}
         onChange={onChange}
@@ -76,12 +78,18 @@ RawInputRadio.propTypes = { ...InputTypes };
 const InputCheckbox = withStyles({
   checkboxRoot: {
     transform: 'translate(-25%, 20%)'
+  },
+  error: {
+    color: 'red'
   }
 })(RawInputCheckbox);
 
 const InputRadio = withStyles(() => ({
   radioRoot: {
     transform: 'translate(-20%, 20%)'
+  },
+  error: {
+    color: 'red'
   }
 }))(RawInputRadio);
 

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

@@ -0,0 +1,276 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import isFinite from 'lodash/isFinite';
+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';
+
+const styles = theme => ({
+  input: {
+    '& input[type=number]': {
+      '-moz-appearance': 'textfield'
+    },
+    '& input[type=number]::-webkit-outer-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    },
+    '& input[type=number]::-webkit-inner-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    }
+  },
+  iconButton: {
+    padding: '2px'
+  }
+});
+
+const fallbackNumber = (min, max) => {
+  if (!isFinite(min) && !isFinite(max)) {
+    return 0;
+  }
+
+  if (!isFinite(min) && isFinite(max)) {
+    return max;
+  }
+
+  if (isFinite(min)) {
+    return min;
+  }
+};
+
+export class NumberTextFieldCustom extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    customValues: PropTypes.array,
+    disabled: PropTypes.bool,
+    error: PropTypes.bool,
+    inputClassName: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    onlyIntegersAllowed: PropTypes.bool,
+    value: PropTypes.number,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    step: PropTypes.number,
+    label: PropTypes.string,
+    disableUnderline: PropTypes.bool,
+    variant: PropTypes.string
+  };
+
+  static defaultProps = {
+    step: 1,
+    customValues: [],
+    textAlign: 'center',
+    variant: 'standard',
+    onlyIntegersAllowed: false
+  };
+
+  constructor(props) {
+    super(props);
+
+    const { value, currentIndex } = this.normalizeValueAndIndex(props.customValues, props.value);
+
+    this.state = {
+      value,
+      currentIndex
+    };
+
+    if (value !== props.value) {
+      this.props.onChange({}, value);
+    }
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  UNSAFE_componentWillReceiveProps(props) {
+    const { value, currentIndex } = this.normalizeValueAndIndex(props.customValues, props.value);
+
+    this.setState({ value, currentIndex });
+  }
+
+  clamp(value) {
+    const { min, max, customValues } = this.props;
+
+    if ((customValues || []).length > 0) {
+      return value;
+    }
+
+    if (!isFinite(value)) {
+      return fallbackNumber(min, max);
+    }
+
+    if (isFinite(max)) {
+      value = Math.min(value, max);
+    }
+
+    if (isFinite(min)) {
+      value = Math.max(value, min);
+    }
+
+    return value;
+  }
+
+  normalizeValueAndIndex = (customValues, number) => {
+    const value = this.clamp(number);
+    const currentIndex = (customValues || []).findIndex(val => val === value);
+
+    if ((customValues || []).length > 0 && currentIndex === -1) {
+      const closestValue = this.getClosestValue(customValues, value);
+
+      return { value: closestValue.value, currentIndex: closestValue.index };
+    }
+
+    return { value, currentIndex };
+  };
+
+  getClosestValue = (customValues, number) =>
+    customValues.reduce(
+      (closest, value, index) =>
+        Math.abs(value - number) < Math.abs(closest.value - number) ? { value, index } : closest,
+      { value: customValues[0], index: 0 }
+    );
+
+  onBlur = event => {
+    const { customValues, onlyIntegersAllowed } = this.props;
+    const { value } = event.target;
+    const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
+
+    const { value: number, currentIndex } = this.normalizeValueAndIndex(customValues, rawNumber);
+
+    if (number !== this.state.value) {
+      this.setState(
+        {
+          value: number.toString(),
+          currentIndex
+        },
+        () => this.props.onChange(event, number)
+      );
+    }
+  };
+
+  onChange(event) {
+    const { value } = event.target;
+
+    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(),
+        currentIndex: updatedIndex
+      },
+      () => {
+        if (shouldUpdate) {
+          onChange(event, number);
+        }
+      }
+    );
+  }
+
+  render() {
+    const {
+      className,
+      classes,
+      label,
+      disabled,
+      error,
+      min,
+      max,
+      inputClassName,
+      disableUnderline,
+      helperText,
+      variant,
+      textAlign
+    } = this.props;
+    const { value } = this.state;
+    const names = classNames(className, classes.input);
+
+    return (
+      <TextField
+        variant={variant}
+        inputRef={ref => (this.inputRef = ref)}
+        disabled={disabled}
+        label={label}
+        value={value}
+        error={error}
+        helperText={helperText}
+        onChange={this.onChange}
+        onBlur={this.onBlur}
+        onKeyPress={e => {
+          // once the Enter key is pressed, we force input blur
+          if (e.key === 'Enter' && this.inputRef) {
+            this.inputRef.blur();
+          }
+        }}
+        onKeyDown={e => {
+          if (e.key === 'ArrowUp') {
+            this.changeValue(e);
+          }
+
+          if (e.key === 'ArrowDown') {
+            this.changeValue(e, -1);
+          }
+        }}
+        type="number"
+        className={names}
+        InputProps={{
+          className: inputClassName,
+          disableUnderline: disableUnderline,
+          startAdornment: (
+            <InputAdornment position="start">
+              <IconButton
+                className={classes.iconButton}
+                disabled={disabled}
+                onClick={e => this.changeValue(e, -1, true)}
+              >
+                <Remove fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                className={classes.iconButton}
+                disabled={disabled}
+                onClick={e => this.changeValue(e, 1, true)}
+              >
+                <Add fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          )
+        }}
+        inputProps={{
+          style: { textAlign },
+          min,
+          max
+        }}
+      />
+    );
+  }
+}
+
+export default withStyles(styles)(NumberTextFieldCustom);