ac-patterns/dist/form-fields.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SignatureField = exports.IncrementButtonField = exports.TextareaField = exports.DecimalInputField = exports.InputField = exports.SelectButtons = exports.Label = void 0;

var _preact = require("preact");

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

var _plusMinus = require("./plus-minus");

var _signature = _interopRequireDefault(require("./signature"));

var _signatureBox = _interopRequireDefault(require("./signature-box"));

var _ = require(".");

var _suggestionsBox = _interopRequireDefault(require("./suggestions-box"));

var _env = require("./utils/env");

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; }

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); }

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; }

const noOp = () => {};

const Label = ({
  item,
  updateValue,
  removeSuggestion
}) => {
  const isRequired = item.required !== false;
  return (0, _preact.h)("label", {
    className: "db fw6 lh-copy f5 mb1",
    htmlFor: item.name
  }, (0, _preact.h)("div", {
    className: "flex-shrink-0"
  }, (0, _preact.h)("div", {
    className: "flex items-center"
  }, item.label, isRequired && item.isComplete && (0, _preact.h)(_.Icon, {
    className: "ml2 light-blue",
    icon: "check",
    size: "18"
  }), isRequired && !item.isComplete && (0, _preact.h)("span", {
    className: "fw3 red ml2"
  }, "(required)"), !isRequired && item.explicitOptional && (0, _preact.h)("span", {
    className: "fw3 gray ml2"
  }, "(optional)")), item.subLabel && (0, _preact.h)("div", {
    className: (0, _classnames.default)('fw3 f6', {
      orange: item.subLabelWarning,
      red: item.subLabelError
    })
  }, item.subLabel instanceof Function ? item.subLabel(item) : item.subLabel)), item.buttons && (0, _preact.h)("div", null, item.buttons.map(val => (0, _preact.h)(_.Button, {
    key: val,
    type: "button",
    "data-e2e": "".concat(item.name, "InputButton:").concat(val),
    className: "mr2 ml0 mt2",
    pressed: item.value === val,
    onClick: e => {
      e.preventDefault();
      updateValue(val);
    }
  }, val))), item.suggestions && (0, _preact.h)(_suggestionsBox.default, {
    removeSuggestion: removeSuggestion,
    name: item.name,
    value: item.value,
    autoSuggestType: item.autoSuggestType,
    updateValue: updateValue,
    suggestions: item.suggestions,
    suggestionsDeleting: item.suggestionsDeleting
  }));
};

exports.Label = Label;
const separator = ', ';

const stringToArray = str => str ? str.toString().split(separator) : [];

const arrayToString = arr => arr.filter(Boolean).join(separator);

class SelectButtons extends _preact.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    this.handleButtonPress = this.handleButtonPress.bind(this);
    this.handleOtherPress = this.handleOtherPress.bind(this);

    this.open = () => {
      if (!this.state.open) {
        this.setState({
          open: true
        });
      }

      setTimeout(() => {
        this.base.querySelector('input').focus();
      }, 200);
    };

    this.close = () => this.setState({
      open: false
    });

    this.choiceValues = props.item.choices.reduce((res, choice) => {
      res[choice.val] = true;
      return res;
    }, {});
  }

  handleButtonPress(val, isPressed) {
    const {
      item,
      allowDeselect,
      updateValue
    } = this.props;
    const isMultiButton = item.type === 'multiButton';
    const {
      value
    } = item;

    if (!isMultiButton) {
      this.close();

      if (isPressed && allowDeselect === false) {
        return;
      }

      updateValue(isPressed ? null : val);
    } else {
      const values = stringToArray(value);
      const index = values.indexOf(val);

      if (index === -1) {
        values.push(val);
      } else {
        values.splice(index, 1);
      }

      this.UpdateValue(arrayToString(values));
    }
  }

  handleOtherPress(isPressed) {
    const {
      item,
      updateValue
    } = this.props;
    const isMultiButton = item.type === 'multiButton';

    if (!isMultiButton) {
      if (isPressed) {
        this.close();
        updateValue(null);
      } else {
        this.open();
        updateValue('');
      }
    } else {
      const values = stringToArray(this.props.item.value);

      if (isPressed) {
        this.close();
        const unknownRemoved = values.reduce((res, val) => {
          if (this.choiceValues[val]) {
            res.push(val);
          }

          return res;
        }, []);
        updateValue(arrayToString(unknownRemoved));
      } else {
        values.push('');
        updateValue(arrayToString(values));
        this.open();
      }
    }
  }

  getPressed(val) {
    const {
      value,
      type
    } = this.props.item;
    const isMultiButton = type === 'multiButton'; // if there are no unusual circumstances, we just want an exact match

    if (!isMultiButton) {
      return value === val;
    }

    return value != null && value.toString().includes(val);
  }

  getOtherInputVisible() {
    return (// either its explicitly open
      this.state.open || // or it contains something outside of known options
      // this is important for first load (since we may not have state yet)
      !stringToArray(this.props.item.value).every(val => this.choiceValues[val])
    );
  }

  render(_ref) {
    let {
      item,
      updateValue
    } = _ref,
        rest = _objectWithoutProperties(_ref, ["item", "updateValue"]);

    const showOtherInput = this.getOtherInputVisible();
    const {
      value
    } = item;
    return (0, _preact.h)("div", rest, item.label && (0, _preact.h)(Label, {
      item: item,
      updateValue: updateValue
    }), (0, _preact.h)("div", {
      "data-e2e": "".concat(item.name, "InputButtons")
    }, item.choices.map(choice => {
      let {
        name,
        val
      } = choice;
      const pressed = this.getPressed(val);
      return (0, _preact.h)(_.Button, {
        key: val,
        pressed: pressed,
        className: "mr2 mv1 items-base",
        "data-e2e": "".concat(item.name, "InputButton:").concat(val),
        "data-state": pressed ? 'pressed' : 'unpressed',
        type: "button",
        onClick: () => this.handleButtonPress(val, pressed)
      }, name);
    }), item.showOther && (0, _preact.h)(_.Button, {
      key: "other",
      pressed: showOtherInput,
      "data-state": showOtherInput ? 'pressed' : 'unpressed',
      className: "mr2 mv1 items-base",
      type: "button",
      onClick: () => this.handleOtherPress(showOtherInput),
      "data-e2e": "".concat(item.name, "InputButton:other")
    }, "Other"), item.showOther && showOtherInput && (0, _preact.h)(_.Input, {
      className: "mv1 w-100 border-box",
      name: "".concat(item.name, "Other"),
      value: value,
      onInput: e => updateValue(e.target.value)
    })));
  }

}

exports.SelectButtons = SelectButtons;

const identity = res => res;

const autoCompleteFallback = _env.IS_CHROME ? 'new-password' : 'none';

const InputField = (_ref2) => {
  let {
    item,
    updateValue,
    autocomplete = autoCompleteFallback,
    autofocus,
    className = '',
    inputClassName = 'w-100',
    removeSuggestion
  } = _ref2,
      rest = _objectWithoutProperties(_ref2, ["item", "updateValue", "autocomplete", "autofocus", "className", "inputClassName", "removeSuggestion"]);

  const type = item.type || 'text';
  let clean = item.clean;
  const {
    value,
    cleanRe
  } = item;

  if (!clean && cleanRe) {
    clean = val => val.replace(cleanRe, '');
  }

  if (!clean) {
    clean = identity;
  }

  const update = e => updateValue(clean(e.target.value));

  const hasError = !!item.errorMessage;
  return (0, _preact.h)("div", _extends({
    className: "w-100 ".concat(className)
  }, rest), item.label && (0, _preact.h)(Label, {
    item: item,
    updateValue: updateValue,
    removeSuggestion: removeSuggestion
  }), (0, _preact.h)(_.Input, {
    className: (0, _classnames.default)('mv1', {
      'bg-washed-red': hasError
    }, inputClassName),
    name: item.name,
    onChange: item.onInput ? noOp : update,
    onInput: item.onInput ? update : noOp,
    id: item.name,
    placeholder: item.placeholder,
    type,
    value,
    autocomplete,
    autofocus,
    inputmode: item.inputmode || null,
    'data-e2e': "".concat(item.name, "Input"),
    'data-has-error': hasError ? true : null,
    style: item.inputWidth ? {
      width: item.inputWidth
    } : null
  }));
};

exports.InputField = InputField;

const DecimalInputField = (_ref3) => {
  let {
    item,
    updateValue
  } = _ref3,
      rest = _objectWithoutProperties(_ref3, ["item", "updateValue"]);

  const modifiedItem = _objectSpread({
    type: 'number',
    onInput: true,
    inputmode: 'decimal',
    clean: _decimals.cleanDecimalInput,
    required: false
  }, item);

  return (0, _preact.h)(InputField, _extends({
    updateValue: updateValue,
    item: modifiedItem
  }, rest));
};

exports.DecimalInputField = DecimalInputField;

const TextareaField = ({
  item,
  updateValue,
  removeSuggestion
}) => (0, _preact.h)("div", {
  className: "mb2"
}, (0, _preact.h)(Label, {
  item: item,
  updateValue: updateValue,
  removeSuggestion: removeSuggestion
}), (0, _preact.h)(_.Textarea, {
  className: (0, _classnames.default)('w-100', item.size === 'large' ? 'h5' : 'h4'),
  name: item.name,
  onChange: item.onInput ? noOp : e => updateValue(e.target.value),
  onInput: item.onInput ? e => updateValue(e.target.value) : noOp,
  value: item.value,
  id: item.name,
  'data-e2e': "".concat(item.name, "Input")
}));

exports.TextareaField = TextareaField;

const IncrementButtonField = ({
  item,
  displayValue,
  updateValue,
  step = 1,
  max = Infinity,
  min = 0,
  width,
  unit = '',
  showStep = true,
  formatter,
  className
}) => {
  const {
    name,
    value,
    fieldSpecificProps
  } = item;

  const passOn = _objectSpread({
    formatter,
    width,
    updateValue,
    displayValue,
    step,
    showStep,
    max,
    min,
    unit,
    name,
    value: value != null ? value : fieldSpecificProps.startingValue
  }, fieldSpecificProps || {});

  return (0, _preact.h)("div", {
    className: (0, _classnames.default)(className)
  }, (0, _preact.h)(Label, {
    item: item
  }), (0, _preact.h)("div", null, (0, _preact.h)(_plusMinus.IncrementorButtons, passOn)));
};

exports.IncrementButtonField = IncrementButtonField;

class SignatureField extends _preact.Component {
  constructor(props) {
    super(props);
    this.state = {
      editing: false
    };
  }

  render({
    item,
    updateValue
  }, {
    editing
  }) {
    const {
      value
    } = item;
    return (0, _preact.h)("div", null, item.label && (0, _preact.h)(Label, {
      item: item
    }), (0, _preact.h)("div", null, !editing && value && (0, _preact.h)(_signature.default, {
      width: "200",
      path: value,
      className: _.inputClasses
    }), !editing && (0, _preact.h)(_.Button, {
      type: "button",
      className: "db mv2",
      onClick: () => this.setState({
        editing: true
      })
    }, value ? 'Change' : 'Add Signature'), editing && (0, _preact.h)(_signatureBox.default, {
      name: item.signatureLineName,
      close: () => this.setState({
        editing: false
      }),
      updateValue: val => {
        updateValue(val);
        this.setState({
          editing: false
        });
      }
    })));
  }

}

exports.SignatureField = SignatureField;