@patternplate/client/lib/app/components/search.js

Universal javascript client application for patternplate

"use strict";

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

var _url = _interopRequireDefault(require("url"));

var _lodash = require("lodash");

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

var _components = require("@patternplate/components");

var _tagHoc = _interopRequireDefault(require("tag-hoc"));

var _outside = _interopRequireDefault(require("./outside"));

var _searchField = _interopRequireDefault(require("./search-field"));

var _withToggleStates = _interopRequireDefault(require("../connectors/with-toggle-states"));

var _passThrough = _interopRequireDefault(require("../containers/pass-through"));

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

const InfoPane = (0, _withToggleStates.default)(_components.InnerInfoPane);
const SearchComponent = _components.Search.Search,
      SearchResult = _components.Search.SearchResult,
      SearchResultList = _components.Search.SearchResultList,
      SearchResultHeading = _components.Search.SearchResultHeading,
      SearchResultPreview = _components.Search.SearchResultPreview,
      SearchFieldSlot = _components.Search.SearchFieldSlot,
      SearchClose = _components.Search.Close,
      SearchPassThroughSlot = _components.Search.PassThroughSlot;

const NOOP = () => {};

class Search extends _react.default.Component {
  constructor(...args) {
    super(...args);
    Object.defineProperty(this, "getSearchResult", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: (item, type) => _react.default.createElement(SearchResult, {
        active: (this.props.activeItem || {}).id === item.id,
        href: item.href,
        id: item.id,
        index: item.index,
        icon: item.manifest.icon || item.type,
        name: item.manifest.displayName,
        key: item.id,
        onActivate: this.props.onActivate,
        onScrollRequest: this.handleScrollRequest,
        type: type
      })
    });
    Object.defineProperty(this, "getSearchResultPreview", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: () => {
        const item = this.props.activeItem;

        switch (item.contentType) {
          case "doc":
            return _react.default.createElement(SearchResultPreview, this.props, _react.default.createElement(_components.Markdown, {
              source: item.contents
            }));

          default:
            return _react.default.createElement(SearchResultPreview, this.props, _react.default.createElement(InfoPane, {
              active: true,
              demoDependencies: (0, _lodash.values)(item.demoDependencies),
              demoDependents: (0, _lodash.values)(item.demoDependents),
              dependencies: (0, _lodash.values)(item.dependencies),
              dependents: (0, _lodash.values)(item.dependents),
              flag: item.manifest.flag,
              id: item.id,
              manifest: JSON.stringify(item.manifest, null, "  "),
              name: item.manifest.displayName,
              tags: item.manifest.tags,
              version: item.manifest.version
            }));
        }
      }
    });
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleUp = this.handleUp.bind(this);
    this.handleDown = this.handleDown.bind(this);
    this.handleActivate = this.handleActivate.bind(this);
    this.handleScrollRequest = this.handleScrollRequest.bind(this);
    this.getListRef = this.getListRef.bind(this);
    this.getSearchResult = this.getSearchResult.bind(this);
  }

  handleScrollRequest(e) {
    if (!this.list) {
      return;
    }

    const l = this.list.getBoundingClientRect();
    const i = e.target.getBoundingClientRect();

    if (i.bottom > l.bottom) {
      this.list.scrollTop = e.target.offsetTop - l.height + i.height;
    }

    if (i.top < l.top) {
      this.list.scrollTop = e.target.offsetTop - 30;
    }
  }

  getListRef(ref) {
    this.list = ref;
  }

  componentDidMount() {
    if (typeof this.props.onMount === "function") {
      this.props.onMount();
    }
  }

  handleActivate(e) {
    const id = e.target.getAttribute("data-id");
    const index = [...this.props.docs, ...this.props.components].findIndex(i => i.id === id);

    if (index > -1) {
      this.props.onActivate(index);
    }
  }

  handleUp(e) {
    e.stopPropagation();

    if (this.props.activeItem && this.props.activeItem.index > 0) {
      e.preventDefault();
      this.props.onUp();
    }
  }

  handleDown(e) {
    e.stopPropagation();
    const available = this.props.components.length + this.props.docs.length - 2;

    if (this.props.activeItem && available >= this.props.activeItem.index) {
      this.props.onDown();
    }
  }

  handleSubmit(e) {
    e.preventDefault();
    const props = this.props;

    if (!props.activeItem) {
      return props.onSubmit(e);
    }

    const activeItem = props.activeItem;
    props.onNavigate(activeItem);
  }

  render() {
    const props = this.props;
    const withComponents = props.components.length > 0;
    const withDocs = props.docs.length > 0;
    return _react.default.createElement(SearchComponent, {
      activeItem: props.activeItem,
      docs: props.docs,
      enabled: props.enabled,
      inline: props.inline,
      onActivate: props.inline ? NOOP : this.handleActivate,
      onClickOutside: props.inline ? NOOP : props.onClickOutside,
      onBlur: props.inline ? NOOP : props.onBlur,
      onChange: props.inline ? NOOP : props.onChange,
      onClear: props.inline ? NOOP : props.onClear,
      onComplete: props.inline ? NOOP : props.onComplete,
      onDown: props.inline ? NOOP : this.handleDown,
      onFocus: props.inline ? NOOP : props.onFocus,
      onStop: props.inline ? NOOP : props.onStop,
      onSubmit: props.inline ? NOOP : this.handleSubmit,
      onUp: props.inline ? NOOP : this.handleUp,
      shortcuts: props.shortcuts,
      suggestion: props.suggestion,
      legend: props.legend
    }, _react.default.createElement(SearchResultList, {
      ref: this.getListRef
    }, withDocs > 0 && _react.default.createElement(SearchResultHeading, null, "Docs (", props.docs.length, ")"), props.docs.map(d => this.getSearchResult(d, "doc", props)), withComponents > 0 && _react.default.createElement(SearchResultHeading, {
      navigationEnabled: props.navigationEnabled
    }, "Components (", props.components.length, ")"), props.components.map(d => this.getSearchResult(d, "pattern"))), (withComponents || withDocs) && this.getSearchResultPreview(), _react.default.createElement(SearchFieldSlot, null, _react.default.createElement(_searchField.default, {
      autoFocus: !props.inline,
      linkTo: "/search",
      mark: props.inline ? null : true,
      name: props.inline ? "inline-search" : "search",
      onBlur: props.onBlur,
      onChange: props.onChange,
      onClear: props.onClear,
      onClose: props.onClose,
      onComplete: props.onComplete,
      onDown: this.handleDown,
      onFocus: props.onFocus,
      onStop: props.onStop,
      onUp: this.handleUp,
      placeholder: "Search",
      suggestion: props.suggestion,
      title: `Search for patterns ${props.shortcuts.toggleSearch.toString()}`,
      value: props.value
    }, props.enabled && _react.default.createElement(SearchClose, {
      shortcut: props.shortcuts.close,
      clears: typeof props.value === "string" && props.value.length > 0
    }))), _react.default.createElement(SearchPassThroughSlot, null, _react.default.createElement(_passThrough.default, {
      query: {
        "search-enabled": true,
        search: null
      }
    })));
  }

}

exports.default = Search;
//# sourceMappingURL=search.js.map