@atlaskit/global-search/dist/es2019/components/confluence/SpaceFilter.js

A cross-product search component (batteries included)

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { withAnalytics } from '@atlaskit/analytics';
import Avatar from '@atlaskit/avatar';
import { Checkbox } from '@atlaskit/checkbox';
import baseItem, { withItemFocus } from '@atlaskit/item';
import React from 'react';
import { FilterType } from '../../api/CrossProductSearchClient';
import { fireSpaceFilterShownEvent } from '../../util/analytics-event-helper';
const Item = withItemFocus(baseItem);
export class ConfluenceSpaceFilter extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      isChecked: false
    });

    _defineProperty(this, "generateFilter", () => {
      const {
        isChecked
      } = this.state;
      const {
        spaceAvatar,
        spaceTitle,
        spaceKey
      } = this.props;
      return isChecked ? [] : [{
        filter: {
          '@type': FilterType.Spaces,
          spaceKeys: [spaceKey]
        },
        metadata: {
          spaceTitle,
          spaceAvatar
        }
      }];
    });

    _defineProperty(this, "toggleCheckbox", () => {
      const {
        isChecked
      } = this.state;
      const filter = this.generateFilter();
      this.props.onFilterChanged(filter);
      this.setState({
        isChecked: !isChecked
      });
    });

    _defineProperty(this, "handleKeyDown", event => {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        this.toggleCheckbox();
      }
    });
  }

  componentDidMount() {
    fireSpaceFilterShownEvent(this.props.searchSessionId, this.props.createAnalyticsEvent);
  }

  getIcons() {
    const {
      isDisabled,
      spaceAvatar
    } = this.props;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
      isChecked: this.state.isChecked,
      isDisabled: isDisabled
    }), /*#__PURE__*/React.createElement(Avatar, {
      borderColor: "transparent",
      src: spaceAvatar,
      appearance: "square",
      size: "small",
      isDisabled: isDisabled
    }));
  }

  static getDerivedStateFromProps(props, state) {
    if (state.isChecked !== props.isFilterOn) {
      return {
        isChecked: props.isFilterOn
      };
    }

    return null;
  }

  render() {
    const {
      isDisabled,
      spaceTitle
    } = this.props;
    return /*#__PURE__*/React.createElement(Item, {
      onClick: this.toggleCheckbox,
      onKeyDown: this.handleKeyDown,
      elemBefore: this.getIcons(),
      isCompact: true,
      isDisabled: isDisabled
    }, spaceTitle);
  }

}
export default withAnalytics(ConfluenceSpaceFilter, {}, {});