@panneau/field-number 1.0.0-alpha.98 → 1.0.3-alpha.1

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-field-number-container{position:relative}.panneau-field-number-container input{-moz-appearance:textfield;padding-right:20px}.panneau-field-number-container input::-webkit-inner-spin-button,.panneau-field-number-container input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}.panneau-field-number-container .panneau-field-number-arrow{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;pointer-events:none;position:absolute;right:0;top:0;width:20px}.panneau-field-number-container .panneau-field-number-arrowIcon{font-size:10px;margin:auto}.panneau-field-number-container .panneau-field-number-dataListItems{background-color:#fff;border:1px solid rgba(0,0,0,.25);-webkit-border-radius:4px;border-radius:4px;left:0;list-style-type:none;padding:0;position:absolute;top:100%;width:100%;z-index:2}.panneau-field-number-container .panneau-field-number-dataListItem{width:100%}.panneau-field-number-container .panneau-field-number-dataListItemButton{background-color:rgba(0,0,0,0);border:0;text-align:left;width:100%}.panneau-field-number-container .panneau-field-number-dataListItemButton:hover{background-color:rgba(0,0,0,.1)}
+.panneau-field-number-container{position:relative}.panneau-field-number-container input{-moz-appearance:textfield;padding-right:20px}.panneau-field-number-container input::-webkit-inner-spin-button,.panneau-field-number-container input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}.panneau-field-number-container .panneau-field-number-arrow{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;pointer-events:none;position:absolute;right:0;top:0;width:20px}.panneau-field-number-container .panneau-field-number-arrowIcon{font-size:10px;margin:auto}.panneau-field-number-container .panneau-field-number-dataListItems{background-color:#fff;border:1px solid rgba(0,0,0,.25);border-radius:4px;left:0;list-style-type:none;padding:0;position:absolute;top:100%;width:100%;z-index:2}.panneau-field-number-container .panneau-field-number-dataListItem{width:100%}.panneau-field-number-container .panneau-field-number-dataListItemButton{background-color:rgba(0,0,0,0);border:0;text-align:left;width:100%}.panneau-field-number-container .panneau-field-number-dataListItemButton:hover{background-color:rgba(0,0,0,.1)}

package/es/index.js

@@ -1,64 +1,85 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import isNaN from 'lodash/isNaN';
+import isNumber from 'lodash/isNumber';
+import PropTypes from 'prop-types';
 import TextField from '@panneau/field-text';
 
 var styles = {"container":"panneau-field-number-container","arrow":"panneau-field-number-arrow","arrowIcon":"panneau-field-number-arrowIcon","dataListItems":"panneau-field-number-dataListItems","dataListItem":"panneau-field-number-dataListItem","dataListItemButton":"panneau-field-number-dataListItemButton"};
 
+var _excluded = ["value", "step", "floatStep", "float", "dataList", "autoComplete", "className", "onChange"];
 var propTypes = {
-  name: PropTypes.string,
-  value: PropTypes.number,
-  min: PropTypes.number,
-  max: PropTypes.number,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   step: PropTypes.number,
   floatStep: PropTypes.number,
   "float": PropTypes.bool,
   dataList: PropTypes.arrayOf(PropTypes.number),
   autoComplete: PropTypes.bool,
-  placeholder: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
 var defaultProps = {
-  name: null,
   value: null,
-  min: null,
-  max: null,
   step: 1,
   floatStep: 0.1,
   "float": false,
   dataList: null,
   autoComplete: false,
-  placeholder: null,
   className: null,
   onChange: null
 };
 
+function isNumeric(str) {
+  if (typeof str !== 'string') return false; // we only process strings!
+
+  return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+  !isNaN(parseFloat(str));
+}
+
 var NumberField = function NumberField(_ref) {
-  var name = _ref.name,
-      value = _ref.value,
-      min = _ref.min,
-      max = _ref.max,
+  var value = _ref.value,
       step = _ref.step,
       floatStep = _ref.floatStep,
       _float = _ref["float"],
       dataList = _ref.dataList,
       autoComplete = _ref.autoComplete,
-      placeholder = _ref.placeholder,
       className = _ref.className,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var parseValue = useCallback(function (newValue) {
-    return _float ? parseFloat(newValue) : parseInt(newValue, 10);
-  });
+    if (newValue !== null) {
+      if (_float) {
+        return newValue;
+      }
+
+      if (isNumber(newValue)) {
+        return newValue;
+      }
+
+      if (isNumeric(newValue)) {
+        return _float ? parseFloat(newValue) : parseInt(newValue, 10);
+      }
+    }
+
+    return null;
+  }, [_float]);
   var onInputChange = useCallback(function (val) {
     if (onChange !== null) {
-      onChange(val !== null && val.length ? parseValue(val) : null);
+      if (_float) {
+        onChange(val !== null && val.length > 0 ? val : null);
+      } else {
+        onChange(val !== null && val.length > 0 ? parseValue(val) : null);
+      }
+
+      onChange(val !== null && val.length > 0 ? parseValue(val) : null);
     }
-  }, [onChange]); // Datalist
+  }, [onChange, _float]); // Datalist
 
   var hasDataList = dataList !== null;
 
@@ -78,27 +99,23 @@ var NumberField = function NumberField(_ref) {
     }
   }, [setDataListActive, hasDataList, dataListActive]);
   var onDataListClick = useCallback(function (dataListValue) {
-    if (onChange !== null) {
+    if (onChange !== null && dataListValue !== null) {
       onChange(parseValue(dataListValue));
       setDataListActive(false);
     }
   }, [onChange, setDataListActive]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(TextField, Object.assign({
     type: "number",
     className: styles.input,
-    name: name,
     value: value !== null ? "".concat(value) : '',
-    min: min,
-    max: max,
     step: _float ? floatStep : step,
     autoComplete: autoComplete ? 'on' : 'off',
-    placeholder: placeholder,
     onChange: onInputChange,
     onFocus: onInputFocus,
     onBlur: onInputBlur
-  }), hasDataList ? /*#__PURE__*/React.createElement("div", {
+  }, props)), hasDataList ? /*#__PURE__*/React.createElement("div", {
     className: styles.arrow
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     className: styles.arrowIcon,
@@ -130,5 +147,4 @@ var definition = {
   component: 'Number'
 };
 
-export default NumberField;
-export { definition };
+export { NumberField as default, definition };

package/lib/index.js

@@ -4,79 +4,103 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var PropTypes = require('prop-types');
-var classNames = require('classnames');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
+var classNames = require('classnames');
+var isNaN = require('lodash/isNaN');
+var isNumber = require('lodash/isNumber');
+var PropTypes = require('prop-types');
 var TextField = require('@panneau/field-text');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var isNaN__default = /*#__PURE__*/_interopDefaultLegacy(isNaN);
+var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
 
 var styles = {"container":"panneau-field-number-container","arrow":"panneau-field-number-arrow","arrowIcon":"panneau-field-number-arrowIcon","dataListItems":"panneau-field-number-dataListItems","dataListItem":"panneau-field-number-dataListItem","dataListItemButton":"panneau-field-number-dataListItemButton"};
 
+var _excluded = ["value", "step", "floatStep", "float", "dataList", "autoComplete", "className", "onChange"];
 var propTypes = {
-  name: PropTypes__default['default'].string,
-  value: PropTypes__default['default'].number,
-  min: PropTypes__default['default'].number,
-  max: PropTypes__default['default'].number,
-  step: PropTypes__default['default'].number,
-  floatStep: PropTypes__default['default'].number,
-  "float": PropTypes__default['default'].bool,
-  dataList: PropTypes__default['default'].arrayOf(PropTypes__default['default'].number),
-  autoComplete: PropTypes__default['default'].bool,
-  placeholder: PropTypes__default['default'].string,
-  className: PropTypes__default['default'].string,
-  onChange: PropTypes__default['default'].func
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
+  step: PropTypes__default["default"].number,
+  floatStep: PropTypes__default["default"].number,
+  "float": PropTypes__default["default"].bool,
+  dataList: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
+  autoComplete: PropTypes__default["default"].bool,
+  className: PropTypes__default["default"].string,
+  onChange: PropTypes__default["default"].func
 };
 var defaultProps = {
-  name: null,
   value: null,
-  min: null,
-  max: null,
   step: 1,
   floatStep: 0.1,
   "float": false,
   dataList: null,
   autoComplete: false,
-  placeholder: null,
   className: null,
   onChange: null
 };
 
+function isNumeric(str) {
+  if (typeof str !== 'string') return false; // we only process strings!
+
+  return !isNaN__default["default"](str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+  !isNaN__default["default"](parseFloat(str));
+}
+
 var NumberField = function NumberField(_ref) {
-  var name = _ref.name,
-      value = _ref.value,
-      min = _ref.min,
-      max = _ref.max,
+  var value = _ref.value,
       step = _ref.step,
       floatStep = _ref.floatStep,
       _float = _ref["float"],
       dataList = _ref.dataList,
       autoComplete = _ref.autoComplete,
-      placeholder = _ref.placeholder,
       className = _ref.className,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
   var parseValue = React.useCallback(function (newValue) {
-    return _float ? parseFloat(newValue) : parseInt(newValue, 10);
-  });
+    if (newValue !== null) {
+      if (_float) {
+        return newValue;
+      }
+
+      if (isNumber__default["default"](newValue)) {
+        return newValue;
+      }
+
+      if (isNumeric(newValue)) {
+        return _float ? parseFloat(newValue) : parseInt(newValue, 10);
+      }
+    }
+
+    return null;
+  }, [_float]);
   var onInputChange = React.useCallback(function (val) {
     if (onChange !== null) {
-      onChange(val !== null && val.length ? parseValue(val) : null);
+      if (_float) {
+        onChange(val !== null && val.length > 0 ? val : null);
+      } else {
+        onChange(val !== null && val.length > 0 ? parseValue(val) : null);
+      }
+
+      onChange(val !== null && val.length > 0 ? parseValue(val) : null);
     }
-  }, [onChange]); // Datalist
+  }, [onChange, _float]); // Datalist
 
   var hasDataList = dataList !== null;
 
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
       dataListActive = _useState2[0],
       setDataListActive = _useState2[1];
 
@@ -91,38 +115,34 @@ var NumberField = function NumberField(_ref) {
     }
   }, [setDataListActive, hasDataList, dataListActive]);
   var onDataListClick = React.useCallback(function (dataListValue) {
-    if (onChange !== null) {
+    if (onChange !== null && dataListValue !== null) {
       onChange(parseValue(dataListValue));
       setDataListActive(false);
     }
   }, [onChange, setDataListActive]);
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classNames__default['default']([styles.container, _defineProperty__default['default']({}, className, className !== null)])
-  }, /*#__PURE__*/React__default['default'].createElement(TextField__default['default'], {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], Object.assign({
     type: "number",
     className: styles.input,
-    name: name,
     value: value !== null ? "".concat(value) : '',
-    min: min,
-    max: max,
     step: _float ? floatStep : step,
     autoComplete: autoComplete ? 'on' : 'off',
-    placeholder: placeholder,
     onChange: onInputChange,
     onFocus: onInputFocus,
     onBlur: onInputBlur
-  }), hasDataList ? /*#__PURE__*/React__default['default'].createElement("div", {
+  }, props)), hasDataList ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.arrow
-  }, /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles.arrowIcon,
     icon: freeSolidSvgIcons.faChevronDown
-  })) : null, hasDataList && dataListActive ? /*#__PURE__*/React__default['default'].createElement("ul", {
+  })) : null, hasDataList && dataListActive ? /*#__PURE__*/React__default["default"].createElement("ul", {
     className: styles.dataListItems
   }, dataList.map(function (dataListValue) {
-    return /*#__PURE__*/React__default['default'].createElement("li", {
+    return /*#__PURE__*/React__default["default"].createElement("li", {
       key: "data-list-".concat(dataListValue),
       className: styles.dataListItem
-    }, /*#__PURE__*/React__default['default'].createElement("button", {
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
       className: styles.dataListItemButton,
       type: "button",
       onTouchStart: function onTouchStart() {
@@ -143,5 +163,5 @@ var definition = {
   component: 'Number'
 };
 
-exports.default = NumberField;
+exports["default"] = NumberField;
 exports.definition = definition;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-number",
-    "version": "1.0.0-alpha.98",
+    "version": "1.0.3-alpha.1",
     "description": "A number field",
     "keywords": [
         "javascript"
@@ -44,26 +44,27 @@
         "prepare": "../../scripts/prepare-package.sh"
     },
     "devDependencies": {
-        "react": "^16.8.0",
-        "react-dom": "^16.8.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
     "peerDependencies": {
-        "react": "^16.8.0",
-        "react-dom": "^16.8.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/react-fontawesome": "^0.1.14",
-        "@panneau/core": "^1.0.0-alpha.97",
-        "@panneau/field-text": "^1.0.0-alpha.97",
-        "@panneau/themes": "^1.0.0-alpha.97",
+        "@panneau/core": "^1.0.3-alpha.1",
+        "@panneau/field-text": "^1.0.3-alpha.1",
+        "@panneau/themes": "^1.0.3-alpha.1",
         "classnames": "^2.2.6",
+        "lodash": "^4.17.21",
         "prop-types": "^15.7.2"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1911a1f7290499b0b02351d4fa9a6a477b764d72"
+    "gitHead": "e04e663c7f1eb692f89a0136f2e8f45024fbe355"
 }