feeles-ide/lib/Cards/HierarchyCard/SearchBar.js

The hackable and serializable IDE to make learning material

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _styles = require("@material-ui/core/styles");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

var _IntegrationReactSelect = _interopRequireDefault(require("../../jsx/IntegrationReactSelect"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _DeleteForever = _interopRequireDefault(require("@material-ui/icons/DeleteForever"));

var _TrashBox = _interopRequireDefault(require("./TrashBox"));

var _search = _interopRequireWildcard(require("./search"));

var _DesktopFile = _interopRequireDefault(require("./DesktopFile"));

var _dec, _class, _class2, _temp;

var SearchBarHeight = 40;
var cn = {
  icon: (0, _typestyle.style)({
    marginTop: 4
  })
};

var getCn = function getCn(props) {
  return {
    root: (0, _typestyle.style)({
      display: 'flex',
      alignItems: 'center',
      boxSizing: 'border-box',
      width: '100%',
      height: SearchBarHeight,
      paddingRight: 16,
      paddingLeft: props.theme.spacing.unit,
      zIndex: 100
    }),
    bar: (0, _typestyle.style)({
      display: 'flex',
      alignItems: 'center',
      width: '100%',
      height: SearchBarHeight,
      paddingLeft: props.theme.spacing.unit,
      backgroundColor: props.theme.palette.background.paper
    }),
    empty: (0, _typestyle.style)({
      flex: '1 0 auto',
      height: SearchBarHeight,
      marginLeft: props.theme.spacing.unit
    })
  };
};

var SearchBar = (_dec = (0, _styles.withTheme)(), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(SearchBar, _PureComponent);

  function SearchBar() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, SearchBar);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(SearchBar)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      showTrashes: false,
      query: ''
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleUpdate", function (value, context) {
      var query = (0, _typeof2.default)(value) === 'object' ? value.value : value;

      if (!query && context) {
        if (context.action !== 'input-change') {
          // react-select は value="" でイベント発火することがある
          return;
        }
      }

      var filterRef = _this.props.filterRef;
      var options = (0, _search.getOptions)(query);
      filterRef(function (file) {
        return (0, _search.default)(file, query, options);
      });

      _this.setState({
        query: query,
        showTrashes: options.showTrashes
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleTrashBoxTap", function () {
      var _this$state = _this.state,
          query = _this$state.query,
          showTrashes = _this$state.showTrashes;

      if (!showTrashes) {
        _this.handleUpdate(':trash ' + query);
      } else {
        _this.handleUpdate(query.replace(/(^|\s):trash(\s|$)/g, '$1'));
      }
    });
    return _this;
  }

  (0, _createClass2.default)(SearchBar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.handleUpdate('');
    }
  }, {
    key: "render",
    value: function render() {
      var dcn = getCn(this.props);
      var _this$props = this.props,
          putFile = _this$props.putFile,
          onOpen = _this$props.onOpen,
          deleteAll = _this$props.deleteAll,
          localization = _this$props.localization;
      var _this$state2 = this.state,
          showTrashes = _this$state2.showTrashes,
          query = _this$state2.query;
      var fileNames = this.props.files.map(function (f) {
        return f.moduleName;
      }).filter(function (s) {
        return s;
      }).map(function (s) {
        return {
          value: s,
          label: s
        };
      });
      return _react.default.createElement("div", {
        className: dcn.root
      }, _react.default.createElement(_TrashBox.default, {
        showTrashes: showTrashes,
        putFile: putFile,
        onClick: this.handleTrashBoxTap
      }), _react.default.createElement(_DesktopFile.default, {
        onOpen: onOpen,
        saveAs: this.props.saveAs
      }), _react.default.createElement(_Paper.default, {
        elevation: 3,
        className: dcn.bar
      }, _react.default.createElement(_Search.default, {
        className: cn.icon
      }), _react.default.createElement(_IntegrationReactSelect.default, {
        value: query,
        suggestions: fileNames,
        onChange: this.handleUpdate,
        placeholder: ""
      })), showTrashes ? _react.default.createElement(_Button.default, {
        variant: "contained",
        color: "secondary",
        className: dcn.empty,
        onClick: deleteAll
      }, _react.default.createElement(_DeleteForever.default, null), localization.hierarchyCard.emptyTrashBox) : null);
    }
  }]);
  return SearchBar;
}(_react.PureComponent), (0, _defineProperty2.default)(_class2, "propTypes", {
  theme: _propTypes.default.object.isRequired,
  files: _propTypes.default.array.isRequired,
  filterRef: _propTypes.default.func.isRequired,
  putFile: _propTypes.default.func.isRequired,
  deleteAll: _propTypes.default.func.isRequired,
  onOpen: _propTypes.default.func.isRequired,
  saveAs: _propTypes.default.func.isRequired,
  localization: _propTypes.default.object.isRequired
}), _temp)) || _class);
exports.default = SearchBar;