@renderlesskit/react
Version:
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit
230 lines (197 loc) • 10.4 kB
JavaScript
;
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.useNumberInput = exports.NumberInput = void 0;
var React = _interopRequireWildcard(require("react"));
var _reakit = require("reakit");
var _reactUtils = require("@chakra-ui/react-utils");
var _utils = require("@chakra-ui/utils");
var _system = require("../system");
var _utils2 = require("../utils");
var _keys = require("./__keys");
var _helpers = require("./helpers");
var _excluded = ["allowMouseWheel", "clampValueOnBlur"],
_excluded2 = ["ref", "onChange", "onKeyDown", "onFocus", "onBlur", "onWheel", "required", "readOnly"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var useNumberInput = (0, _system.createHook)({
name: "NumberInput",
compose: _reakit.useInput,
keys: _keys.NUMBER_INPUT_KEYS,
useOptions: function useOptions(_ref) {
var _ref$allowMouseWheel = _ref.allowMouseWheel,
allowMouseWheel = _ref$allowMouseWheel === void 0 ? true : _ref$allowMouseWheel,
_ref$clampValueOnBlur = _ref.clampValueOnBlur,
clampValueOnBlur = _ref$clampValueOnBlur === void 0 ? true : _ref$clampValueOnBlur,
options = _objectWithoutProperties(_ref, _excluded);
var disabled = options.disabled || options.isDisabled;
return _objectSpread(_objectSpread({
allowMouseWheel: allowMouseWheel,
clampValueOnBlur: clampValueOnBlur
}, options), {}, {
disabled: disabled
});
},
useProps: function useProps(options, _ref2) {
var htmlRef = _ref2.ref,
htmlOnChange = _ref2.onChange,
htmlOnKeyDown = _ref2.onKeyDown,
htmlOnFocus = _ref2.onFocus,
htmlOnBlur = _ref2.onBlur,
htmlOnWheel = _ref2.onWheel,
htmlRequired = _ref2.required,
htmlReadOnly = _ref2.readOnly,
htmlProps = _objectWithoutProperties(_ref2, _excluded2);
var min = options.min,
max = options.max,
step = options.step,
updateValue = options.updateValue,
increment = options.increment,
decrement = options.decrement,
value = options.value,
valueAsNumber = options.valueAsNumber,
clampValueOnBlur = options.clampValueOnBlur,
setCastedValue = options.setCastedValue,
inputRef = options.inputRef,
disabled = options.disabled,
isInvalid = options.isInvalid,
isReadOnly = options.isReadOnly,
isRequired = options.isRequired,
isOutOfRange = options.isOutOfRange;
var readOnly = htmlReadOnly || isReadOnly;
var required = htmlRequired || isRequired;
/**
* The `onChange` handler filters out any character typed
* that isn't floating point compatible.
*/
var onChange = React.useCallback(function (event) {
updateValue((0, _helpers.sanitize)(event.target.value));
}, [updateValue]);
var onKeyDown = React.useCallback(function (event) {
/**
* only allow valid numeric keys
*/
if (!(0, _helpers.isValidNumericKeyboardEvent)(event)) {
event.preventDefault();
}
/**
* Keyboard Accessibility
*
* We want to increase or decrease the input's value
* based on if the user the arrow keys.
*
* @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17
*/
var stepFactor = (0, _helpers.getStepFactor)(event) * step;
var eventKey = (0, _utils.normalizeEventKey)(event);
var keyMap = {
ArrowUp: function ArrowUp() {
return increment(stepFactor);
},
ArrowDown: function ArrowDown() {
return decrement(stepFactor);
},
Home: function Home() {
return updateValue(min);
},
End: function End() {
return updateValue(max);
}
};
var action = keyMap[eventKey];
if (action) {
event.preventDefault();
action(event);
}
}, [decrement, increment, max, min, step, updateValue]);
var onBlur = React.useCallback(function () {
if (!clampValueOnBlur) return;
var next = value;
if (next === "") return;
if (valueAsNumber < min) {
next = min;
}
if (valueAsNumber > max) {
next = max;
}
/**
* `setCastedValue` does 2 things:
*
* - sanitize the value by using parseFloat and some Regex
* - used to round value to computed precision or decimal points
*/
setCastedValue(next);
}, [setCastedValue, clampValueOnBlur, max, min, value, valueAsNumber]);
React.useEffect(function () {
var input = inputRef.current;
if (!input) return undefined;
function onWheel(event) {
var isInputFocused = document.activeElement === inputRef.current;
if (!options.allowMouseWheel || !isInputFocused) return;
event.preventDefault();
var stepFactor = (0, _helpers.getStepFactor)(event) * step;
var direction = Math.sign(event.deltaY);
if (direction === -1) {
increment(stepFactor);
} else if (direction === 1) {
decrement(stepFactor);
}
}
input.addEventListener("wheel", onWheel);
return function () {
input.removeEventListener("wheel", onWheel);
};
}, [decrement, increment, inputRef, options.allowMouseWheel, step]);
var onWheel = React.useCallback(function (event) {
if (!options.allowMouseWheel) return;
event.preventDefault();
var stepFactor = (0, _helpers.getStepFactor)(event) * step;
var direction = Math.sign(event.deltaY);
if (direction === -1) {
increment(stepFactor);
} else if (direction === 1) {
decrement(stepFactor);
}
}, [decrement, increment, options.allowMouseWheel, step]);
return _objectSpread({
ref: (0, _reactUtils.mergeRefs)(htmlRef, inputRef),
value: value,
type: "text",
role: "spinbutton",
inputMode: "decimal",
pattern: "[0-9]*(.[0-9]+)?",
autoComplete: "off",
autoCorrect: "off",
spellCheck: false,
disabled: disabled,
readOnly: readOnly,
required: required,
onChange: (0, _utils.callAllHandlers)(htmlOnChange, onChange),
onKeyDown: (0, _utils.callAllHandlers)(htmlOnKeyDown, onKeyDown),
onBlur: (0, _utils.callAllHandlers)(htmlOnBlur, onBlur),
onWheel: (0, _utils.callAllHandlers)(htmlOnWheel, onWheel),
"aria-readonly": readOnly,
"aria-required": required,
"aria-invalid": (0, _utils2.ariaAttr)(isInvalid !== null && isInvalid !== void 0 ? isInvalid : isOutOfRange),
"aria-valuemin": min,
"aria-valuemax": max,
"aria-valuenow": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,
"aria-valuetext": !value.toString() ? undefined : value.toString()
}, htmlProps);
}
});
exports.useNumberInput = useNumberInput;
var NumberInput = (0, _system.createComponent)({
as: "input",
memo: true,
useHook: useNumberInput
});
exports.NumberInput = NumberInput;
//# sourceMappingURL=NumberInput.js.map