How to use react-outside-click-handler - 4 common examples

import * as Components from '@meetalva/components';
import * as MobxReact from 'mobx-react';
import * as Model from '@meetalva/model';
import * as React from 'react';
import { ViewStore } from '../../store';
import { debounce } from 'lodash';

const OutsideClickHandler = require('react-outside-click-handler').default;

export interface PropertyItemColorProps {
	property: Model.ElementProperty;
}

@MobxReact.inject('store')
@MobxReact.observer
export class PropertyItemColor extends React.Component {
	private commit = debounce(() => {
		const props = this.props as PropertyItemColorProps & { store: ViewStore };
		props.store.commit();
	}, 300);

	private handleColorPickerChange = (color: { hex: string }) => {
		const { property } = this.props;
		property.setValue(color.hex);

import * as Components from '@meetalva/components';
import * as MobxReact from 'mobx-react';
import * as Model from '@meetalva/model';
import * as React from 'react';
import { ViewStore } from '../../store';

const OutsideClickHandler = require('react-outside-click-handler').default;

export interface ActionPayloadSelectProps {
	autoFocus?: boolean;
	placeholder?: string;
	menuIsOpen?: boolean;
	elementAction: Model.ElementAction;
	onChange?: Components.SelectProps['onChange'];
	onBlur?: React.ChangeEventHandler;
	onOutsideClick?: React.MouseEventHandler;
}

@MobxReact.inject('store')
@MobxReact.observer
export class ActionPayloadSelect extends React.Component {
	public render(): JSX.Element | null {
		const props = this.props as ActionPayloadSelectProps & { store: ViewStore };

import { ViewStore } from '../../store';
import * as uuid from 'uuid';
import * as Mobx from 'mobx';

export interface ReferenceSelectProps {
	property: Model.ElementProperty;
	iconPosition?: IconPosition;
	onDidRender?(): void;
}

export enum IconPosition {
	Default,
	Indent
}

const OutsideClickHandler = require('react-outside-click-handler').default;

const HoverReveal = styled.div`
	${Components.PropertyLinkIcon} {
		opacity: 0;
		transition: 0.3s ease-in-out opacity;
	}

	&:hover ${Components.PropertyLinkIcon} {
		opacity: 1;
	}
`;

interface PositionedLinkIconProps {
	position: IconPosition;
}

import * as MobxReact from 'mobx-react';
import * as React from 'react';
import * as C from '@meetalva/components';
import { ViewStore } from '../../store';
import * as Types from '@meetalva/types';
import { Check, ChevronDown } from 'react-feather';
import { When } from '../when';
const ReactSelectComponents = require('react-select').components;
const OutsideClickHandler = require('react-outside-click-handler').default;

const AppPanes = [
	Types.AppPane.PagesPane,
	Types.AppPane.ElementsPane,
	Types.AppPane.PropertiesPane
];

@MobxReact.inject('store')
@MobxReact.observer
export class ChromeSwitch extends React.Component {
	public render(): JSX.Element | null {
		const { store } = this.props as { store: ViewStore };
		const viewMode = store.getApp().getProjectViewMode();
		const isDesignView = viewMode === Types.ProjectViewMode.Design;

		const app = store.getApp();