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

The hackable and serializable IDE to make learning material

import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import AutoComplete from 'material-ui/AutoComplete';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import ActionSearch from 'material-ui/svg-icons/action/search';
import RaisedButton from 'material-ui/RaisedButton';
import ActionDeleteForever from 'material-ui/svg-icons/action/delete-forever';
import NavigationClose from 'material-ui/svg-icons/navigation/close';

import TrashBox from './TrashBox';
import search, { getOptions } from './search';
import DesktopFile from './DesktopFile';

var SearchBarHeight = 40;

var getStyles = function getStyles(props, context, state) {
  var _context$muiTheme = context.muiTheme,
      palette = _context$muiTheme.palette,
      spacing = _context$muiTheme.spacing,
      prepareStyles = _context$muiTheme.prepareStyles;
  var focus = state.focus;


  return {
    root: prepareStyles({
      display: 'flex',
      alignItems: 'center',
      boxSizing: 'border-box',
      width: '100%',
      height: SearchBarHeight,
      paddingRight: 16,
      paddingLeft: spacing.desktopGutterMini,
      zIndex: 100
    }),
    bar: {
      display: 'flex',
      alignItems: 'center',
      width: '100%',
      height: SearchBarHeight,
      paddingLeft: spacing.desktopGutterMini,
      backgroundColor: palette.canvasColor,
      opacity: focus ? 1 : 0.9
    },
    icon: {
      marginTop: 4,
      marginRight: focus ? 8 : 0
    },
    empty: {
      flex: '1 0 auto',
      height: SearchBarHeight,
      marginLeft: spacing.desktopGutterMini
    }
  };
};

var SearchBar = function (_PureComponent) {
  _inherits(SearchBar, _PureComponent);

  function SearchBar() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, SearchBar);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SearchBar.__proto__ || _Object$getPrototypeOf(SearchBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      focus: false,
      showTrashes: false,
      query: ''
    }, _this.handleUpdate = function (query) {
      var filterRef = _this.props.filterRef;


      var options = getOptions(query);
      filterRef(function (file) {
        return search(file, query, options);
      });

      _this.setState({
        query: query,
        showTrashes: options.showTrashes
      });
    }, _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'));
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(SearchBar, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.handleUpdate('');
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          putFile = _props.putFile,
          onOpen = _props.onOpen,
          deleteAll = _props.deleteAll,
          localization = _props.localization;
      var _state = this.state,
          showTrashes = _state.showTrashes,
          query = _state.query;
      var _context$muiTheme$pal = this.context.muiTheme.palette,
          secondaryTextColor = _context$muiTheme$pal.secondaryTextColor,
          alternateTextColor = _context$muiTheme$pal.alternateTextColor;

      var fileNames = this.props.files.map(function (f) {
        return f.moduleName;
      }).filter(function (s) {
        return s;
      });

      var _getStyles = getStyles(this.props, this.context, this.state),
          root = _getStyles.root,
          bar = _getStyles.bar,
          icon = _getStyles.icon,
          empty = _getStyles.empty;

      return React.createElement(
        'div',
        { style: root },
        React.createElement(TrashBox, {
          showTrashes: showTrashes,
          putFile: putFile,
          onClick: this.handleTrashBoxTap
        }),
        React.createElement(DesktopFile, { onOpen: onOpen, saveAs: this.props.saveAs }),
        React.createElement(
          Paper,
          { zDepth: 3, style: bar },
          React.createElement(ActionSearch, { style: icon, color: secondaryTextColor }),
          React.createElement(AutoComplete, {
            id: 'search',
            searchText: query,
            dataSource: fileNames,
            maxSearchResults: 5,
            onNewRequest: this.handleUpdate,
            onUpdateInput: this.handleUpdate,
            onFocus: function onFocus() {
              return _this2.setState({ focus: true });
            },
            onBlur: function onBlur() {
              return _this2.setState({ focus: false });
            },
            fullWidth: true
          }),
          React.createElement(
            IconButton,
            { disabled: !query, onClick: function onClick() {
                return _this2.handleUpdate('');
              } },
            React.createElement(NavigationClose, { color: secondaryTextColor })
          )
        ),
        showTrashes ? React.createElement(RaisedButton, {
          secondary: true,
          label: localization.hierarchyCard.emptyTrashBox,
          icon: React.createElement(ActionDeleteForever, { color: alternateTextColor }),
          style: empty,
          onClick: deleteAll
        }) : null
      );
    }
  }]);

  return SearchBar;
}(PureComponent);

SearchBar.propTypes = {
  files: PropTypes.array.isRequired,
  filterRef: PropTypes.func.isRequired,
  putFile: PropTypes.func.isRequired,
  deleteAll: PropTypes.func.isRequired,
  onOpen: PropTypes.func.isRequired,
  saveAs: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired
};
SearchBar.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default SearchBar;