test-lib-audits/dist/components/Search/index.js

React library for audits

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _moment = require("moment");

var _moment2 = _interopRequireDefault(_moment);

var _noun_Delete_ = require("../../assets/noun_Delete_1676375.svg");

var _noun_Delete_2 = _interopRequireDefault(_noun_Delete_);

var _noun_print_ = require("../../assets/noun_print_2117815.svg");

var _noun_print_2 = _interopRequireDefault(_noun_print_);

var _noun_exportPdf_ = require("../../assets/noun_export pdf_2021663.svg");

var _noun_exportPdf_2 = _interopRequireDefault(_noun_exportPdf_);

var _noun_exportCsv_ = require("../../assets/noun_export csv_2021662.svg");

var _noun_exportCsv_2 = _interopRequireDefault(_noun_exportCsv_);

var _filter = require("../../assets/filter.png");

var _filter2 = _interopRequireDefault(_filter);

var _noun_confirm_ = require("../../assets/noun_confirm_275573.svg");

var _noun_confirm_2 = _interopRequireDefault(_noun_confirm_);

require("./style.css");

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

(function () {
  var enterModule = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).enterModule;
  enterModule && enterModule(module);
})();

var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
  return a;
};

var Search = function Search(props) {
  var _useState = (0, _react.useState)(""),
      _useState2 = _slicedToArray(_useState, 2),
      searchTerm = _useState2[0],
      updateSearch = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = _slicedToArray(_useState3, 2),
      showPanel = _useState4[0],
      togglePanel = _useState4[1];

  var _useState5 = (0, _react.useState)(false),
      _useState6 = _slicedToArray(_useState5, 2),
      filterEnabled = _useState6[0],
      filterEnabler = _useState6[1];

  var _useState7 = (0, _react.useState)(""),
      _useState8 = _slicedToArray(_useState7, 2),
      filterName = _useState8[0],
      setFilterName = _useState8[1];

  var _useState9 = (0, _react.useState)(""),
      _useState10 = _slicedToArray(_useState9, 2),
      filterText = _useState10[0],
      changeFilterText = _useState10[1];

  var toggleFilter = function toggleFilter(filterKey, filterEnabled) {
    setFilterName(filterKey);
    filterEnabler(filterEnabled);
  };
  var createFilterObject = function createFilterObject(e) {
    e.preventDefault();
    var obj = void 0;
    if (filterName === "date" || filterName === "time" || filterName === "createdAt") {
      obj = {
        key: filterName,
        value: filterText || (0, _moment2.default)().format("YYYY-MM-DD")
      };
    } else {
      obj = {
        key: filterName,
        value: filterText
      };
    }
    props.filterData(obj);
    changeFilterText("");
    toggleFilter("", false);
  };
  return _react2.default.createElement(
    "div",
    null,
    _react2.default.createElement(
      "div",
      { className: "separator search-div" },
      _react2.default.createElement(
        "div",
        { className: "search-form-div" },
        _react2.default.createElement(
          "form",
          {
            className: "search-form",
            onSubmit: function onSubmit(e) {
              e.preventDefault();
              props.textSearch(searchTerm);
            } },
          _react2.default.createElement("input", {
            type: "text",
            value: searchTerm,
            onChange: function onChange(e) {
              return updateSearch(e.target.value);
            },
            placeholder: "Search by any text",
            className: "search-input search-box-content search-box"
          })
        ),
        _react2.default.createElement(
          "div",
          {
            onClick: function onClick() {
              return togglePanel(!showPanel);
            },
            className: props.filters.length !== 0 ? "filter-tags filter-tags-visible" : "filter-tags" },
          _react2.default.createElement(
            "span",
            null,
            _react2.default.createElement("img", { src: _filter2.default, alt: "filter", width: 25, height: 25 })
          ),
          _react2.default.createElement(
            "span",
            {
              className: props.filters.length !== 0 ? "filter-marker-change filter-marker" : "filter-marker" },
            props.filters.length
          )
        )
      ),
      _react2.default.createElement(
        "div",
        {
          className: "search-box-content hide-box display-box " + (props.filters.length === 0 && "d-none"),
          style: { minHeight: "2rem" } },
        _react2.default.createElement(
          "ul",
          { className: "search-box-ul" },
          props.filters.length !== 0 ? props.filters.map(function (filter, index) {
            return _react2.default.createElement(
              "li",
              {
                key: index,
                className: "search-li-active search-li-active-tag" },
              filter.key + ": " + filter.value,
              _react2.default.createElement(
                "a",
                {
                  className: "cancel-icon",
                  onClick: function onClick() {
                    return props.removeFilter(filter);
                  } },
                "x"
              )
            );
          }) : null
        )
      ),
      _react2.default.createElement(
        "div",
        { className: "hide-box" },
        _react2.default.createElement(
          "ul",
          { className: "search-icon-ul" },
          _react2.default.createElement(
            "li",
            { onClick: function onClick() {
                return props.deleteAudits();
              } },
            _react2.default.createElement("img", { src: _noun_Delete_2.default, alt: "deleteIcon", className: "action-icon" })
          ),
          _react2.default.createElement(
            "li",
            null,
            _react2.default.createElement("img", { src: _noun_print_2.default, alt: "printIcon", className: "action-icon" })
          ),
          _react2.default.createElement(
            "li",
            { onClick: function onClick() {
                return props.exportPDF();
              } },
            _react2.default.createElement("img", { src: _noun_exportPdf_2.default, alt: "PDFIcon", className: "action-icon" })
          ),
          _react2.default.createElement(
            "li",
            { onClick: function onClick() {
                return props.exportCSV();
              } },
            _react2.default.createElement("img", { src: _noun_exportCsv_2.default, alt: "CSVIcon", className: "action-icon" })
          )
        )
      )
    ),
    showPanel && _react2.default.createElement(
      "div",
      { className: "search-filter-div" },
      _react2.default.createElement(
        "h5",
        { className: "search-user-text" },
        "Filter By",
        " ",
        filterEnabled ? filterName === "createdAt" ? "Time" : filterName.charAt(0).toUpperCase() + filterName.slice(1) : "Options",
        _react2.default.createElement(
          "span",
          {
            className: "cancel-filter-btn",
            onClick: function onClick() {
              return filterEnabled ? toggleFilter("", false) : togglePanel(false);
            } },
          "X"
        )
      ),
      !filterEnabled ? _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(
          "ul",
          { className: "search-filters-ul" },
          _react2.default.createElement(
            "li",
            { onClick: function onClick() {
                return toggleFilter("createdAt", true);
              } },
            _react2.default.createElement(
              "span",
              null,
              "Time"
            ),
            _react2.default.createElement(
              "span",
              { className: "search-icon" },
              ">"
            )
          ),
          _react2.default.createElement(
            "li",
            { onClick: function onClick() {
                return toggleFilter("user", true);
              } },
            _react2.default.createElement(
              "span",
              null,
              "User"
            ),
            _react2.default.createElement(
              "span",
              { className: "search-icon" },
              ">"
            )
          ),
          _react2.default.createElement(
            "li",
            { onClick: function onClick() {
                return toggleFilter("resource", true);
              } },
            _react2.default.createElement(
              "span",
              null,
              "Resource"
            ),
            _react2.default.createElement(
              "span",
              { className: "search-icon" },
              ">"
            )
          )
        )
      ) : _react2.default.createElement(
        "form",
        { onSubmit: function onSubmit(e) {
            return createFilterObject(e);
          } },
        _react2.default.createElement(
          "div",
          { className: "search-user-input-div" },
          _react2.default.createElement("input", {
            type: "" + (filterName === "createdAt" ? "date" : "text"),
            placeholder: "Search by text...",
            className: "search-user-input",
            value: filterText || (filterName === "createdAt" ? (0, _moment2.default)().format("YYYY-MM-DD") : ""),
            onChange: function onChange(e) {
              return changeFilterText(e.target.value);
            }
          }),
          _react2.default.createElement("img", {
            src: _noun_confirm_2.default,
            className: "confirm-btn",
            alt: "confirm",
            onClick: function onClick(e) {
              return createFilterObject(e);
            }
          })
        )
      )
    )
  );
};

__signature__(Search, "useState{[searchTerm, updateSearch](\"\")}\nuseState{[showPanel, togglePanel](false)}\nuseState{[filterEnabled, filterEnabler](false)}\nuseState{[filterName, setFilterName](\"\")}\nuseState{[filterText, changeFilterText](\"\")}");

var _default = Search;
exports.default = _default;
;

(function () {
  var reactHotLoader = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).default;

  if (!reactHotLoader) {
    return;
  }

  reactHotLoader.register(Search, "Search", "src/components/Search/index.js");
  reactHotLoader.register(_default, "default", "src/components/Search/index.js");
})();

;

(function () {
  var leaveModule = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).leaveModule;
  leaveModule && leaveModule(module);
})();