ac-patterns/dist/plus-minus.js

"use strict";

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

var _preact = require("preact");

var _classnames = _interopRequireDefault(require("classnames"));

var _ = require("./");

var _decimals = require("./utils/decimals");

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }

const HOLD_DELAY = 180;
const ITERATION_DELAY = 90;

const getPlusMinusButton = icon => class extends _preact.Component {
  constructor(props) {
    super(props);
    this.runIt = this.runIt.bind(this);
    this.onClick = this.onClick.bind(this);
    this.onPress = this.onPress.bind(this);
    this.clear = this.clear.bind(this);
    this.holdStart = false;
  }

  runIt() {
    const {
      onClick,
      disabled
    } = this.props;

    if (onClick && !disabled) {
      onClick();
    }
  }

  componentDidMount() {
    if (this.base && this.base.addEventListener) {
      this.base.addEventListener('touchstart', this.onPress);
      this.base.addEventListener('touchend', this.clear);
      this.base.addEventListener('touchcancel', this.clear);
    }
  }

  componentWillUnmount() {
    if (this.base && this.base.removeEventListener) {
      this.base.removeEventListener('touchstart', this.onPress);
      this.base.removeEventListener('touchend', this.clear);
      this.base.removeEventListener('touchcancel', this.clear);
    }
  }

  onClick(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    this.clear();
    this.runIt();
  }

  onPress() {
    const iterate = () => {
      clearTimeout(this.iterationTimer);
      let delay = this.props.iterationDelay || ITERATION_DELAY;
      const holdDuration = Date.now() - this.holdStart;

      if (holdDuration > 4000) {
        delay = delay * 0.4;
      } else if (holdDuration > 2000) {
        delay = delay * 0.5;
      }

      this.iterationTimer = setTimeout(() => {
        if (this.holdStart && !this.props.disabled) {
          this.runIt();
          iterate();
        }
      }, delay);
    };

    this.holdTimer = setTimeout(() => {
      this.holdStart = Date.now();
      iterate();
    }, this.props.holdDelay || HOLD_DELAY);
  }

  clear() {
    clearTimeout(this.holdTimer);
    clearTimeout(this.iterationTimer);
    this.holdStart = false;
  }

  render() {
    const {
      className,
      disabled,
      name
    } = this.props;
    return (0, _preact.h)(_.Button, {
      "data-e2e": "".concat(name || '').concat(icon.charAt(0).toUpperCase()).concat(icon.slice(1), "Button"),
      type: "button",
      onContextMenu: e => {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
      },
      onClick: this.onClick,
      onMouseUp: this.clear,
      onMouseLeave: this.clear,
      onMouseDown: this.onPress,
      disabled: disabled,
      className: (0, _classnames.default)('ba br2 pa2 mv1', {
        mr2: icon === 'add'
      }, className)
    }, (0, _preact.h)("div", {
      className: "flex items-center"
    }, (0, _preact.h)(_.Icon, {
      size: "18",
      icon: icon
    }), this.props.children));
  }

};

const PlusButton = getPlusMinusButton('add');
exports.PlusButton = PlusButton;
const MinusButton = getPlusMinusButton('remove');
exports.MinusButton = MinusButton;

const IncrementorButtons = ({
  displayValue,
  updateValue,
  step = 1,
  max = Infinity,
  min = 0,
  className = '',
  width = '200px',
  showStep = true,
  unit = '',
  displayValueClasses = 'f4',
  value,
  startingValue,
  formatter,
  name,
  style
}) => {
  const targetNumberOfDecimals = (0, _decimals.getNumberOfDecimals)(step);
  let valueToShow = displayValue != null ? displayValue : value;

  if (!valueToShow) {
    valueToShow = targetNumberOfDecimals === 0 ? value : (0, _decimals.ensureDecimals)(value, targetNumberOfDecimals);
  }

  if (formatter) {
    valueToShow = formatter(valueToShow);
  }

  let stepDown = step;
  let stepUp = step;
  const effectiveValue = value != null ? value : startingValue;
  return (0, _preact.h)("div", {
    className: "flex items-center justify-between ".concat(className),
    style: _objectSpread({
      width
    }, style)
  }, (0, _preact.h)("div", {
    "data-e2e": "".concat(name, "Value"),
    className: "dib ".concat(displayValueClasses)
  }, valueToShow, unit && " ".concat(unit)), (0, _preact.h)("div", null, (0, _preact.h)(PlusButton, {
    name: name,
    disabled: effectiveValue + stepUp > max,
    onClick: () => updateValue((0, _decimals.roundToDecimal)(effectiveValue + stepUp, targetNumberOfDecimals))
  }, showStep ? step : null), (0, _preact.h)(MinusButton, {
    name: name,
    disabled: effectiveValue - stepDown < min,
    onClick: () => updateValue((0, _decimals.roundToDecimal)(effectiveValue - stepDown, targetNumberOfDecimals))
  }, showStep ? step : null)));
};

exports.IncrementorButtons = IncrementorButtons;