react95-native/dist/commonjs/components/NumberInput/NumberInput.js

Refreshed Windows 95 style UI components for your React Native app

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactNative = require("react-native");

var _useControlledOrUncontrolled = _interopRequireDefault(require("../../hooks/useControlledOrUncontrolled"));

var _theming = require("../../core/theming");

var _styles = require("../../styles/styles");

var _utils = require("../../utils");

var _ = require("../..");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

// TODO: allow to center input text horizontally
// TODO: how are uncontrolled inputs handled in RN?
const NumberInput = ({
  defaultValue,
  disabled,
  inputWidth,
  max = null,
  min = null,
  onChange,
  step = 1,
  style = {},
  theme,
  value,
  variant = 'default',
  ...rest
}) => {
  const [valueDerived, setValueState] = (0, _useControlledOrUncontrolled.default)({
    value,
    defaultValue
  });

  const handleClick = val => {
    const stateValue = parseFloat(valueDerived);
    const newValue = (0, _utils.clamp)(+parseFloat((stateValue + val).toString()).toFixed(2), min, max).toString();
    setValueState(parseFloat(newValue));

    if (onChange) {
      onChange(parseFloat(newValue));
    }
  };

  const valueDerivedNumber = parseFloat(valueDerived);
  const isDecrementDisabled = disabled || valueDerivedNumber === min;
  const isIncrementDisabled = disabled || valueDerivedNumber === max;
  const isFlat = variant === 'flat';
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.wrapper, style],
    accessibilityState: {
      disabled
    } // TODO: are these accessibility traits correct?
    ,
    accessibilityRole: "adjustable",
    accessibilityValue: {
      min: min === null ? undefined : min,
      max: max === null ? undefined : max,
      now: valueDerived
    }
  }, /*#__PURE__*/_react.default.createElement(_.Button, {
    theme: theme,
    disabled: isDecrementDisabled,
    onPress: () => handleClick(-step),
    variant: isFlat ? 'flat' : 'raised',
    style: styles.button,
    testID: "decrement"
  }, /*#__PURE__*/_react.default.createElement(_.ArrowIcon, {
    theme: theme,
    segments: 4,
    disabled: isDecrementDisabled,
    direction: "left"
  })), /*#__PURE__*/_react.default.createElement(_.TextInput, _extends({
    theme: theme,
    variant: variant,
    disabled: disabled,
    value: valueDerived.toString(),
    style: [styles.input, {
      width: inputWidth || 'auto'
    }],
    editable: false // eslint-disable-next-line react/jsx-props-no-spreading
    ,
    testID: "input"
  }, rest)), /*#__PURE__*/_react.default.createElement(_.Button, {
    theme: theme,
    disabled: isIncrementDisabled,
    onPress: () => handleClick(step),
    variant: isFlat ? 'flat' : 'raised',
    style: styles.button,
    testID: "increment"
  }, /*#__PURE__*/_react.default.createElement(_.ArrowIcon, {
    theme: theme,
    segments: 4,
    disabled: isIncrementDisabled,
    direction: "right"
  })));
};

const styles = _reactNative.StyleSheet.create({
  wrapper: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  input: {
    marginHorizontal: 2,
    minWidth: _styles.blockSizes.md + 2
  },
  button: {
    width: _styles.blockSizes.md
  },
  buttonText: {
    fontSize: 24
  }
});

var _default = (0, _theming.withTheme)(NumberInput);

exports.default = _default;
//# sourceMappingURL=NumberInput.js.map