@pie-lib/config-ui 10.12.2 → 10.13.1

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.13.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@10.13.0...@pie-lib/config-ui@10.13.1) (2022-05-24)
+
+**Note:** Version bump only for package @pie-lib/config-ui
+
+
+
+
+
+# [10.13.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@10.12.3...@pie-lib/config-ui@10.13.0) (2022-05-16)
+
+
+### Features
+
+* **config-ui:** number text field UI improvements ([3b72537](https://github.com/pie-framework/pie-lib/commit/3b72537ebf29aab293bbb61d6be34888385a850b))
+* **config-ui:** number text field UI improvements ([ed8cdb6](https://github.com/pie-framework/pie-lib/commit/ed8cdb6d6f15763c3b85c9d2dfbeadf49bbcd5d8))
+* implemented custom number text field ([7e5dd09](https://github.com/pie-framework/pie-lib/commit/7e5dd09bb0d5ceb7e7214b8b2cc0b5ee1964b2bb))
+
+
+
+
+
+## [10.12.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@10.12.2...@pie-lib/config-ui@10.12.3) (2022-05-10)
+
+**Note:** Version bump only for package @pie-lib/config-ui
+
+
+
+
+
 ## [10.12.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@10.12.1...@pie-lib/config-ui@10.12.2) (2022-05-09)
 
 **Note:** Version bump only for package @pie-lib/config-ui

package/lib/index.js

@@ -113,6 +113,12 @@ Object.defineProperty(exports, "NumberTextField", {
     return _numberTextField["default"];
   }
 });
+Object.defineProperty(exports, "NumberTextFieldCustom", {
+  enumerable: true,
+  get: function get() {
+    return _numberTextFieldCustom["default"];
+  }
+});
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function get() {
@@ -174,6 +180,8 @@ var _renderUi = require("@pie-lib/render-ui");
 
 var _numberTextField = _interopRequireDefault(require("./number-text-field"));
 
+var _numberTextFieldCustom = _interopRequireDefault(require("./number-text-field-custom"));
+
 var _twoChoice = _interopRequireWildcard(require("./two-choice"));
 
 var _tagsInput = _interopRequireDefault(require("./tags-input"));

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA;;;;AACA;;AACA;;AACA;;AAEA","sourcesContent":["import AlertDialog from './alert-dialog';\nimport FeedbackConfig, {\n  FeedbackSelector,\n  buildDefaults as feedbackConfigDefaults\n} from './feedback-config';\nimport { InputCheckbox, InputSwitch, InputRadio } from './inputs';\nimport Langs, { LanguageControls } from './langs';\nimport Tabs from './tabs';\nimport Checkbox from './checkbox';\nimport FormSection from './form-section';\nimport Help from './help';\nimport Input from './input';\nimport { InputContainer } from '@pie-lib/render-ui';\nimport NumberTextField from './number-text-field';\nimport TwoChoice, { NChoice } from './two-choice';\nimport TagsInput from './tags-input';\nimport MuiBox from './mui-box';\nimport ChoiceConfiguration from './choice-configuration';\nimport * as layout from './layout';\n\nimport * as choiceUtils from './choice-utils';\nimport withStatefulModel from './with-stateful-model';\nimport Toggle from './settings/toggle';\nimport DisplaySize from './settings/display-size';\n\nimport * as settings from './settings';\n\nexport {\n  AlertDialog,\n  FeedbackConfig,\n  FeedbackSelector,\n  feedbackConfigDefaults,\n  InputCheckbox,\n  InputSwitch,\n  InputRadio,\n  Langs,\n  LanguageControls,\n  Tabs,\n  Checkbox,\n  FormSection,\n  Help,\n  Input,\n  InputContainer,\n  NumberTextField,\n  TwoChoice,\n  NChoice,\n  TagsInput,\n  MuiBox,\n  ChoiceConfiguration,\n  layout,\n  choiceUtils,\n  withStatefulModel,\n  Toggle,\n  DisplaySize,\n  settings\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA;;;;AACA;;AACA;;AACA;;AAEA","sourcesContent":["import AlertDialog from './alert-dialog';\nimport FeedbackConfig, {\n  FeedbackSelector,\n  buildDefaults as feedbackConfigDefaults\n} from './feedback-config';\nimport { InputCheckbox, InputSwitch, InputRadio } from './inputs';\nimport Langs, { LanguageControls } from './langs';\nimport Tabs from './tabs';\nimport Checkbox from './checkbox';\nimport FormSection from './form-section';\nimport Help from './help';\nimport Input from './input';\nimport { InputContainer } from '@pie-lib/render-ui';\nimport NumberTextField from './number-text-field';\nimport NumberTextFieldCustom from './number-text-field-custom';\nimport TwoChoice, { NChoice } from './two-choice';\nimport TagsInput from './tags-input';\nimport MuiBox from './mui-box';\nimport ChoiceConfiguration from './choice-configuration';\nimport * as layout from './layout';\n\nimport * as choiceUtils from './choice-utils';\nimport withStatefulModel from './with-stateful-model';\nimport Toggle from './settings/toggle';\nimport DisplaySize from './settings/display-size';\n\nimport * as settings from './settings';\n\nexport {\n  AlertDialog,\n  FeedbackConfig,\n  FeedbackSelector,\n  feedbackConfigDefaults,\n  InputCheckbox,\n  InputSwitch,\n  InputRadio,\n  Langs,\n  LanguageControls,\n  Tabs,\n  Checkbox,\n  FormSection,\n  Help,\n  Input,\n  InputContainer,\n  NumberTextField,\n  NumberTextFieldCustom,\n  TwoChoice,\n  NChoice,\n  TagsInput,\n  MuiBox,\n  ChoiceConfiguration,\n  layout,\n  choiceUtils,\n  withStatefulModel,\n  Toggle,\n  DisplaySize,\n  settings\n};\n"],"file":"index.js"}

package/lib/number-text-field-custom.js

@@ -0,0 +1,308 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NumberTextFieldCustom = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _isFinite = _interopRequireDefault(require("lodash/isFinite"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+
+var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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; }
+
+var styles = function styles(theme) {
+  return {
+    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'
+    }
+  };
+};
+
+var fallbackNumber = function fallbackNumber(min, max) {
+  if (!(0, _isFinite["default"])(min) && !(0, _isFinite["default"])(max)) {
+    return 0;
+  }
+
+  if (!(0, _isFinite["default"])(min) && (0, _isFinite["default"])(max)) {
+    return max;
+  }
+
+  if ((0, _isFinite["default"])(min)) {
+    return min;
+  }
+};
+
+var NumberTextFieldCustom = /*#__PURE__*/function (_React$Component) {
+  _inherits(NumberTextFieldCustom, _React$Component);
+
+  var _super = _createSuper(NumberTextFieldCustom);
+
+  function NumberTextFieldCustom(props) {
+    var _this;
+
+    _classCallCheck(this, NumberTextFieldCustom);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "onBlur", function (event) {
+      var onlyIntegersAllowed = _this.props.onlyIntegersAllowed;
+      var value = event.target.value;
+      var rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
+
+      var number = _this.clamp(rawNumber);
+
+      if (number !== _this.state.value) {
+        _this.setState({
+          value: number.toString()
+        }, function () {
+          return _this.props.onChange(event, number);
+        });
+      }
+    });
+
+    var _value = _this.clamp(props.value);
+
+    _this.state = {
+      value: _value
+    };
+
+    if (_value !== props.value) {
+      _this.props.onChange({}, _value);
+    }
+
+    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(NumberTextFieldCustom, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(props) {
+      var value = this.clamp(props.value);
+      this.setState({
+        value: value
+      });
+    }
+  }, {
+    key: "clamp",
+    value: function clamp(value) {
+      var _this$props = this.props,
+          min = _this$props.min,
+          max = _this$props.max;
+
+      if (!(0, _isFinite["default"])(value)) {
+        return fallbackNumber(min, max);
+      }
+
+      if ((0, _isFinite["default"])(max)) {
+        value = Math.min(value, max);
+      }
+
+      if ((0, _isFinite["default"])(min)) {
+        value = Math.max(value, min);
+      }
+
+      return value;
+    }
+  }, {
+    key: "onChange",
+    value: function onChange(event) {
+      var value = event.target.value;
+      this.setState({
+        value: value
+      });
+    }
+  }, {
+    key: "changeValue",
+    value: function changeValue(event) {
+      var sign = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+      var shouldUpdate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      event.preventDefault();
+      var _this$props2 = this.props,
+          step = _this$props2.step,
+          onlyIntegersAllowed = _this$props2.onlyIntegersAllowed,
+          onChange = _this$props2.onChange;
+      var value = this.state.value;
+      var rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
+      var updatedValue = (rawNumber * 10000 + step * sign * 10000) / 10000;
+      var number = this.clamp(updatedValue);
+      this.setState({
+        value: number.toString()
+      }, function () {
+        if (shouldUpdate) {
+          onChange(event, number);
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          classes = _this$props3.classes,
+          label = _this$props3.label,
+          disabled = _this$props3.disabled,
+          error = _this$props3.error,
+          min = _this$props3.min,
+          max = _this$props3.max,
+          inputClassName = _this$props3.inputClassName,
+          disableUnderline = _this$props3.disableUnderline,
+          helperText = _this$props3.helperText,
+          variant = _this$props3.variant,
+          textAlign = _this$props3.textAlign;
+      var value = this.state.value;
+      var names = (0, _classnames["default"])(className, classes.input);
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        variant: variant,
+        inputRef: function inputRef(ref) {
+          return _this2.inputRef = ref;
+        },
+        disabled: disabled,
+        label: label,
+        value: value,
+        error: error,
+        helperText: helperText,
+        onChange: this.onChange,
+        onBlur: this.onBlur,
+        onKeyPress: function onKeyPress(e) {
+          // once the Enter key is pressed, we force input blur
+          if (e.key === 'Enter' && _this2.inputRef) {
+            _this2.inputRef.blur();
+          }
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === 'ArrowUp') {
+            _this2.changeValue(e);
+          }
+
+          if (e.key === 'ArrowDown') {
+            _this2.changeValue(e, -1);
+          }
+        },
+        type: "number",
+        className: names,
+        InputProps: {
+          className: inputClassName,
+          disableUnderline: disableUnderline,
+          startAdornment: /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
+            position: "start"
+          }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+            className: classes.iconButton,
+            disabled: disabled,
+            onClick: function onClick(e) {
+              return _this2.changeValue(e, -1, true);
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_Remove["default"], {
+            fontSize: "small"
+          }))),
+          endAdornment: /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
+            position: "end"
+          }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+            className: classes.iconButton,
+            disabled: disabled,
+            onClick: function onClick(e) {
+              return _this2.changeValue(e, 1, true);
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_Add["default"], {
+            fontSize: "small"
+          })))
+        },
+        inputProps: {
+          style: {
+            textAlign: textAlign
+          },
+          min: min,
+          max: max
+        }
+      });
+    }
+  }]);
+
+  return NumberTextFieldCustom;
+}(_react["default"].Component);
+
+exports.NumberTextFieldCustom = NumberTextFieldCustom;
+
+_defineProperty(NumberTextFieldCustom, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  error: _propTypes["default"].bool,
+  inputClassName: _propTypes["default"].string,
+  onChange: _propTypes["default"].func.isRequired,
+  onlyIntegersAllowed: _propTypes["default"].bool,
+  value: _propTypes["default"].number,
+  min: _propTypes["default"].number,
+  max: _propTypes["default"].number,
+  step: _propTypes["default"].number,
+  label: _propTypes["default"].string,
+  disableUnderline: _propTypes["default"].bool,
+  variant: _propTypes["default"].string
+});
+
+_defineProperty(NumberTextFieldCustom, "defaultProps", {
+  step: 1,
+  textAlign: 'center',
+  variant: 'standard',
+  onlyIntegersAllowed: false
+});
+
+var _default = (0, _styles.withStyles)(styles)(NumberTextFieldCustom);
+
+exports["default"] = _default;
+//# sourceMappingURL=number-text-field-custom.js.map

package/lib/number-text-field-custom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/number-text-field-custom.jsx"],"names":["styles","theme","input","margin","iconButton","padding","fallbackNumber","min","max","NumberTextFieldCustom","props","event","onlyIntegersAllowed","value","target","rawNumber","parseInt","parseFloat","number","clamp","state","setState","toString","onChange","bind","Math","sign","shouldUpdate","preventDefault","step","updatedValue","className","classes","label","disabled","error","inputClassName","disableUnderline","helperText","variant","textAlign","names","ref","inputRef","onBlur","e","key","blur","changeValue","startAdornment","endAdornment","style","React","Component","PropTypes","object","isRequired","string","bool","func"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport isFinite from 'lodash/isFinite';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport Remove from '@material-ui/icons/Remove';\nimport Add from '@material-ui/icons/Add';\n\nconst styles = theme => ({\n  input: {\n    '& input[type=number]': {\n      '-moz-appearance': 'textfield'\n    },\n    '& input[type=number]::-webkit-outer-spin-button': {\n      '-webkit-appearance': 'none',\n      margin: 0\n    },\n    '& input[type=number]::-webkit-inner-spin-button': {\n      '-webkit-appearance': 'none',\n      margin: 0\n    }\n  },\n  iconButton: {\n    padding: '2px'\n  }\n});\n\nconst fallbackNumber = (min, max) => {\n  if (!isFinite(min) && !isFinite(max)) {\n    return 0;\n  }\n\n  if (!isFinite(min) && isFinite(max)) {\n    return max;\n  }\n\n  if (isFinite(min)) {\n    return min;\n  }\n};\n\nexport class NumberTextFieldCustom extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    inputClassName: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    onlyIntegersAllowed: PropTypes.bool,\n    value: PropTypes.number,\n    min: PropTypes.number,\n    max: PropTypes.number,\n    step: PropTypes.number,\n    label: PropTypes.string,\n    disableUnderline: PropTypes.bool,\n    variant: PropTypes.string\n  };\n\n  static defaultProps = {\n    step: 1,\n    textAlign: 'center',\n    variant: 'standard',\n    onlyIntegersAllowed: false\n  };\n\n  constructor(props) {\n    super(props);\n\n    const value = this.clamp(props.value);\n\n    this.state = {\n      value\n    };\n\n    if (value !== props.value) {\n      this.props.onChange({}, value);\n    }\n\n    this.onChange = this.onChange.bind(this);\n  }\n\n  UNSAFE_componentWillReceiveProps(props) {\n    const value = this.clamp(props.value);\n\n    this.setState({ value });\n  }\n\n  clamp(value) {\n    const { min, max } = this.props;\n\n    if (!isFinite(value)) {\n      return fallbackNumber(min, max);\n    }\n\n    if (isFinite(max)) {\n      value = Math.min(value, max);\n    }\n\n    if (isFinite(min)) {\n      value = Math.max(value, min);\n    }\n\n    return value;\n  }\n\n  onBlur = event => {\n    const { onlyIntegersAllowed } = this.props;\n    const { value } = event.target;\n    const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);\n    const number = this.clamp(rawNumber);\n\n    if (number !== this.state.value) {\n      this.setState({ value: number.toString() }, () => this.props.onChange(event, number));\n    }\n  };\n\n  onChange(event) {\n    const { value } = event.target;\n\n    this.setState({ value });\n  }\n\n  changeValue(event, sign = 1, shouldUpdate = false) {\n    event.preventDefault();\n\n    const { step, onlyIntegersAllowed, onChange } = this.props;\n    const { value } = this.state;\n    const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);\n    const updatedValue = (rawNumber * 10000 + step * sign * 10000) / 10000;\n    const number = this.clamp(updatedValue);\n\n    this.setState({ value: number.toString() }, () => {\n      if (shouldUpdate) {\n        onChange(event, number);\n      }\n    });\n  }\n\n  render() {\n    const {\n      className,\n      classes,\n      label,\n      disabled,\n      error,\n      min,\n      max,\n      inputClassName,\n      disableUnderline,\n      helperText,\n      variant,\n      textAlign\n    } = this.props;\n    const { value } = this.state;\n    const names = classNames(className, classes.input);\n\n    return (\n      <TextField\n        variant={variant}\n        inputRef={ref => (this.inputRef = ref)}\n        disabled={disabled}\n        label={label}\n        value={value}\n        error={error}\n        helperText={helperText}\n        onChange={this.onChange}\n        onBlur={this.onBlur}\n        onKeyPress={e => {\n          // once the Enter key is pressed, we force input blur\n          if (e.key === 'Enter' && this.inputRef) {\n            this.inputRef.blur();\n          }\n        }}\n        onKeyDown={e => {\n          if (e.key === 'ArrowUp') {\n            this.changeValue(e);\n          }\n\n          if (e.key === 'ArrowDown') {\n            this.changeValue(e, -1);\n          }\n        }}\n        type=\"number\"\n        className={names}\n        InputProps={{\n          className: inputClassName,\n          disableUnderline: disableUnderline,\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton\n                className={classes.iconButton}\n                disabled={disabled}\n                onClick={e => this.changeValue(e, -1, true)}\n              >\n                <Remove fontSize=\"small\" />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: (\n            <InputAdornment position=\"end\">\n              <IconButton\n                className={classes.iconButton}\n                disabled={disabled}\n                onClick={e => this.changeValue(e, 1, true)}\n              >\n                <Add fontSize=\"small\" />\n              </IconButton>\n            </InputAdornment>\n          )\n        }}\n        inputProps={{\n          style: { textAlign },\n          min,\n          max\n        }}\n      />\n    );\n  }\n}\n\nexport default withStyles(styles)(NumberTextFieldCustom);\n"],"file":"number-text-field-custom.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/config-ui",
-  "version": "10.12.2",
+  "version": "10.13.1",
   "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.22.2",
+    "@pie-lib/editable-html": "^7.22.4",
     "@pie-lib/icons": "^2.4.25",
-    "@pie-lib/render-ui": "^4.12.6",
+    "@pie-lib/render-ui": "^4.12.7",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
@@ -26,5 +26,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "ea44ab953756475319bd8401eb229e2c9864845b"
+  "gitHead": "611d47d0ed9fb2591be8f26cc78a40049e5e70a5"
 }

package/src/index.js

@@ -12,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';
@@ -42,6 +43,7 @@ export {
   Input,
   InputContainer,
   NumberTextField,
+  NumberTextFieldCustom,
   TwoChoice,
   NChoice,
   TagsInput,

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

@@ -0,0 +1,225 @@
+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,
+    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,
+    textAlign: 'center',
+    variant: 'standard',
+    onlyIntegersAllowed: false
+  };
+
+  constructor(props) {
+    super(props);
+
+    const value = this.clamp(props.value);
+
+    this.state = {
+      value
+    };
+
+    if (value !== props.value) {
+      this.props.onChange({}, value);
+    }
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  UNSAFE_componentWillReceiveProps(props) {
+    const value = this.clamp(props.value);
+
+    this.setState({ value });
+  }
+
+  clamp(value) {
+    const { min, max } = this.props;
+
+    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;
+  }
+
+  onBlur = event => {
+    const { onlyIntegersAllowed } = this.props;
+    const { value } = event.target;
+    const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
+    const number = this.clamp(rawNumber);
+
+    if (number !== this.state.value) {
+      this.setState({ value: number.toString() }, () => this.props.onChange(event, number));
+    }
+  };
+
+  onChange(event) {
+    const { value } = event.target;
+
+    this.setState({ value });
+  }
+
+  changeValue(event, sign = 1, shouldUpdate = false) {
+    event.preventDefault();
+
+    const { step, onlyIntegersAllowed, onChange } = this.props;
+    const { value } = this.state;
+    const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
+    const updatedValue = (rawNumber * 10000 + step * sign * 10000) / 10000;
+    const number = this.clamp(updatedValue);
+
+    this.setState({ value: number.toString() }, () => {
+      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);