ac-patterns/dist/suggestions-box.js

"use strict";

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

var _preact = require("preact");

var _ = require("./");

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

var _smartSuggestionUtils = require("./utils/smart-suggestion-utils");

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

class _default extends _preact.Component {
  constructor(props) {
    super(props);
    this.toggleExpand = this.toggleExpand.bind(this);
    this.state = {
      expanded: true
    };
  }

  toggleExpand() {
    this.setState({
      expanded: !this.state.expanded
    });
  }

  render({
    autoSuggestType,
    name,
    value,
    suggestions,
    suggestionsDeleting,
    updateValue,
    removeSuggestion
  }, {
    expanded
  }) {
    return (0, _preact.h)("div", {
      className: "fw3 pa2 bg-near-white br2 shadow-inset",
      "data-e2e": "smartSuggestions:".concat(name)
    }, (0, _preact.h)("div", {
      className: "f6"
    }, "SmartSuggestions\u2122"), (0, _preact.h)("div", {
      className: (0, _classnames.default)('overflow-y-scroll', {
        dn: !expanded
      })
    }, suggestionsDeleting && (0, _preact.h)("div", {
      className: "flex items-center pv2",
      "data-e2e": "smartSuggestionsUpdating"
    }, (0, _preact.h)(_.Icon, {
      icon: "autorenew",
      className: "spin mr2",
      size: 16
    }), "Updating..."), !suggestionsDeleting && suggestions.map(suggestion => {
      const {
        pressed,
        phrase
      } = suggestion;
      return (0, _preact.h)("label", {
        "data-e2e": "suggestionPhrase",
        key: phrase,
        className: (0, _classnames.default)('flex items-center ph1 pv2', {
          fw6: pressed
        })
      }, (0, _preact.h)("input", {
        onChange: e => {
          e.preventDefault();

          if (autoSuggestType === 'sentence') {
            updateValue(pressed ? (0, _smartSuggestionUtils.withoutText)(value, phrase) : (0, _smartSuggestionUtils.textAppended)(value, phrase));
          } else if (autoSuggestType === 'multiple') {
            updateValue(pressed ? (0, _smartSuggestionUtils.removeCommaSeparatedItem)(value, phrase) : (0, _smartSuggestionUtils.addCommaSeparatedItem)(value, phrase));
          } else if (autoSuggestType === 'single') {
            updateValue(pressed ? '' : phrase);
          }
        },
        type: "checkbox",
        checked: suggestion.pressed,
        className: "mr2 flex-shrink-0",
        style: {
          width: '15px',
          height: '15px'
        }
      }), (0, _preact.h)("span", {
        className: "lh-solid"
      }, suggestion.phrase), (0, _preact.h)(_.Button, {
        tiny: true,
        className: "flex ml2",
        onClick: e => {
          e.preventDefault();
          e.stopImmediatePropagation();
          removeSuggestion(name, suggestion.phrase);
        },
        type: "button"
      }, (0, _preact.h)(_.Icon, {
        icon: "close",
        size: 12
      })));
    })));
  }

}

exports.default = _default;