expensify-common 2.0.188 → 2.0.190

package/dist/esm/components/form/element/dropdown.d.ts

@@ -0,0 +1,35 @@
+export default DropDown;
+declare class DropDown extends React.Component<any, any, any> {
+    constructor(props: any);
+    handleClick(option: any): void;
+    renderOption(option: any): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+declare namespace DropDown {
+    export { propTypes };
+    export { defaultProps };
+}
+import React from 'react';
+declare namespace propTypes {
+    let options: PropTypes.Validator<(PropTypes.InferProps<{
+        value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        text: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        focused: PropTypes.Requireable<boolean>;
+        isSelected: PropTypes.Requireable<boolean>;
+        isSelectable: PropTypes.Requireable<boolean>;
+    }> | null | undefined)[]>;
+    let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    let bs4: PropTypes.Requireable<boolean>;
+    let extraClasses: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+}
+declare namespace defaultProps {
+    export function onChange_1(): void;
+    export { onChange_1 as onChange };
+    let bs4_1: boolean;
+    export { bs4_1 as bs4 };
+    let extraClasses_1: never[];
+    export { extraClasses_1 as extraClasses };
+}
+import PropTypes from 'prop-types';

package/dist/esm/components/form/element/dropdown.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import uniqueId from 'lodash/uniqueId';
+import DropDownItem from './dropdownItem';
+const propTypes = {
+    // These are the elements to show in the dropdown
+    options: PropTypes.arrayOf(PropTypes.shape({
+        // The value of the option, should be unique
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        // The human readable text of the option
+        text: PropTypes.string,
+        // If we need more than text to style more each option
+        children: PropTypes.element,
+        // Whether or not the option is currently disabled
+        disabled: PropTypes.bool,
+        // Whether or not the option is currently in focus
+        focused: PropTypes.bool,
+        // Whether or not the option is currently selected
+        isSelected: PropTypes.bool,
+        // Whether or not the option can be selected
+        isSelectable: PropTypes.bool,
+    })).isRequired,
+    // A callback that is triggered when a selection is made and passes the value
+    // of the selected option as the only parameter
+    onChange: PropTypes.func,
+    // Bootstrap 4 compatibility flag
+    bs4: PropTypes.bool,
+    // An array of extra classes to put on the combobox
+    extraClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+};
+const defaultProps = {
+    onChange: () => { },
+    bs4: false,
+    extraClasses: [],
+};
+class DropDown extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleClick = this.handleClick.bind(this);
+        this.renderOption = this.renderOption.bind(this);
+    }
+    handleClick(option) {
+        if (option.isSelectable === false || option.disabled) {
+            return;
+        }
+        this.props.onChange(option.value);
+    }
+    renderOption(option) {
+        return (React.createElement(DropDownItem, { key: uniqueId(), bs4: this.props.bs4, value: option.value, text: option.text || '', 
+            // eslint-disable-next-line react/no-children-prop
+            children: option.children || null, disabled: option.disabled || false, focused: option.focused || false, isSelected: option.isSelected || false, isSelectable: option.isSelectable || true, divider: option.divider || false, extraClasses: option.extraClasses || [], onClick: () => this.handleClick(option) }, option.children));
+    }
+    render() {
+        const { options, extraClasses } = this.props;
+        return React.createElement("ul", { className: cn('dropdown-menu', extraClasses) }, options.map(this.renderOption));
+    }
+}
+DropDown.propTypes = propTypes;
+DropDown.defaultProps = defaultProps;
+export default DropDown;

package/dist/esm/components/form/element/dropdownItem.d.ts

@@ -0,0 +1,55 @@
+export default DropDownItem;
+declare class DropDownItem extends React.Component<any, any, any> {
+    constructor(props: any);
+    /**
+     * Only instantiate the tooltip this dropdown item contains
+     */
+    createTooltip(): void;
+    hasInstantiatedTooltip: boolean;
+    componentWillUnmount(): void;
+    /**
+     * If there is an instantiated tooltip on the component, destroy it
+     */
+    destroyTooltip(): void;
+    render(): React.JSX.Element;
+    tooltipContainer: JQueryStatic | undefined;
+}
+declare namespace DropDownItem {
+    export { propTypes };
+    export { defaultProps };
+}
+import React from 'react';
+declare namespace propTypes {
+    let onClick: PropTypes.Validator<(...args: any[]) => any>;
+    let value: PropTypes.Validator<any>;
+    let text: PropTypes.Requireable<string>;
+    let children: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    let disabled: PropTypes.Requireable<boolean>;
+    let focused: PropTypes.Requireable<boolean>;
+    let isSelected: PropTypes.Requireable<boolean>;
+    let isSelectable: PropTypes.Requireable<boolean>;
+    let divider: PropTypes.Requireable<boolean>;
+    let bs4: PropTypes.Requireable<boolean>;
+    let extraClasses: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+}
+declare namespace defaultProps {
+    let text_1: string;
+    export { text_1 as text };
+    let children_1: null;
+    export { children_1 as children };
+    let disabled_1: boolean;
+    export { disabled_1 as disabled };
+    let focused_1: boolean;
+    export { focused_1 as focused };
+    let isSelected_1: boolean;
+    export { isSelected_1 as isSelected };
+    let isSelectable_1: boolean;
+    export { isSelectable_1 as isSelectable };
+    let divider_1: boolean;
+    export { divider_1 as divider };
+    let bs4_1: boolean;
+    export { bs4_1 as bs4 };
+    let extraClasses_1: never[];
+    export { extraClasses_1 as extraClasses };
+}
+import PropTypes from 'prop-types';

package/dist/esm/components/form/element/dropdownItem.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import Str from '../../../str';
+/**
+ * A very basic dropdown item
+ */
+const propTypes = {
+    // The function to be called when this item is being clicked
+    onClick: PropTypes.func.isRequired,
+    // The value of the option, should be unique
+    value: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
+    // The human readable text of the option
+    text: PropTypes.string,
+    // If we need more than text to style more each option
+    children: PropTypes.element,
+    // Whether or not the option is currently disabled
+    disabled: PropTypes.bool,
+    // Whether or not the option is currently in focus
+    focused: PropTypes.bool,
+    // Whether or not the option is currently selected
+    isSelected: PropTypes.bool,
+    // Whether or not the option can be selected
+    isSelectable: PropTypes.bool,
+    // Whether this item is a divider or not
+    divider: PropTypes.bool,
+    // Bootstrap 4 compatibility flag
+    bs4: PropTypes.bool,
+    // An array of extra classes to put on the combobox
+    extraClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+};
+const defaultProps = {
+    text: '',
+    children: null,
+    disabled: false,
+    focused: false,
+    isSelected: false,
+    isSelectable: true,
+    divider: false,
+    bs4: false,
+    extraClasses: [],
+};
+class DropDownItem extends React.Component {
+    constructor(props) {
+        super(props);
+        this.createTooltip = this.createTooltip.bind(this);
+        this.hasInstantiatedTooltip = false;
+    }
+    componentWillUnmount() {
+        this.destroyTooltip();
+    }
+    /**
+     * Only instantiate the tooltip this dropdown item contains
+     */
+    createTooltip() {
+        if (this.hasInstantiatedTooltip) {
+            return;
+        }
+        this.tooltipContainer.tooltip({
+            template: '<div class="tooltip tooltip--from-combobox" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
+        });
+        this.hasInstantiatedTooltip = true;
+    }
+    /**
+     * If there is an instantiated tooltip on the component, destroy it
+     */
+    destroyTooltip() {
+        if (!this.hasInstantiatedTooltip) {
+            return;
+        }
+        this.tooltipContainer.tooltip('destroy');
+        this.hasInstantiatedTooltip = false;
+    }
+    render() {
+        const classes = {
+            a: {
+                focus: this.props.focused,
+            },
+            liOrButton: {
+                active: this.props.isSelected && this.props.isSelectable !== false,
+                'li-compact': !this.props.bs4,
+                'dropdown-item': this.props.bs4,
+                disabled: this.props.isSelectable === false || this.props.disabled,
+                'dropdown-header': this.props.disabled,
+                divider: this.props.divider,
+            },
+        };
+        const extraClasses = cn('expensicons expensicons-checkmark', this.props.extraClasses);
+        // Don't do anything when clicking if we can't select something
+        const clickHandler = this.props.isSelectable !== false && !this.props.disabled ? this.props.onClick : () => { };
+        // Special rendering if we're in Bootstrap 4 compat mode
+        if (this.props.bs4) {
+            if (this.props.divider) {
+                return React.createElement("div", { className: "dropdown-divider" });
+            }
+            return (React.createElement("button", { type: "button", className: cn(classes.liOrButton), onClick: clickHandler, "data-toggle": "tooltip", "data-container": "body", "data-delay": '{"show":1000, "hide":100}', "data-value": this.props.value, title: typeof this.props.children === 'string' ? this.props.children : Str.htmlDecode(this.props.text) },
+                this.props.isSelected && this.props.isSelectable !== false ? (React.createElement("span", null,
+                    React.createElement("i", { className: extraClasses }),
+                    ' ')) : (''),
+                this.props.children || Str.htmlDecode(this.props.text)));
+        }
+        return (React.createElement("li", { className: cn(classes.liOrButton), "data-value": this.props.value }, !this.props.divider && (
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        React.createElement("a", { href: "#", className: cn(classes.a), onClick: clickHandler, role: "button", tabIndex: "-1", "data-toggle": "tooltip", onMouseEnter: this.createTooltip, onFocus: this.createTooltip, "data-container": "body", "data-delay": '{"show":1000, "hide":100}', title: typeof this.props.children === 'string' ? this.props.children : Str.htmlDecode(this.props.text), ref: (el) => (this.tooltipContainer = $(el)) },
+            this.props.isSelected && this.props.isSelectable !== false ? (React.createElement("span", null,
+                React.createElement("i", { className: extraClasses }),
+                ' ')) : (''),
+            this.props.children || Str.htmlDecode(this.props.text)))));
+    }
+}
+DropDownItem.propTypes = propTypes;
+DropDownItem.defaultProps = defaultProps;
+export default DropDownItem;

package/dist/esm/components/form/element/onOffSwitch.d.ts

@@ -0,0 +1,94 @@
+export default OnOffSwitch;
+declare class OnOffSwitch extends React.Component<any, any, any> {
+    constructor(props: any);
+    /**
+     * Callback function called after toggling the switch
+     * @param {boolean} newState
+     */
+    onChangeCallback(newState: boolean): void;
+    /**
+     * Force switch off and prevent editing it
+     * @param {boolean} checked
+     * @param {string} msg
+     */
+    lock(checked: boolean, msg: string): void;
+    /**
+     * Release switch to its original value, and allow editing it
+     */
+    unlock(): void;
+    /**
+     * Is the switch on or off ?
+     *
+     * @returns {boolean} true if on
+     */
+    getValue(): boolean;
+    /**
+     * Toggle the state of this switch.
+     *
+     * Note: this is used via refs, so please don't delete it unless you know what you're doing :D
+     */
+    toggle(): void;
+    state: {
+        checked: any;
+        preventEdit: any;
+        preventEditDescription: string;
+    };
+    render(): React.JSX.Element;
+}
+declare namespace OnOffSwitch {
+    export { propTypes };
+    export { defaultProps };
+}
+import React from 'react';
+declare namespace propTypes {
+    let id: PropTypes.Validator<string>;
+    let label: PropTypes.Requireable<string>;
+    let labelOnRight: PropTypes.Requireable<boolean>;
+    let labelClasses: PropTypes.Requireable<any>;
+    let checked: PropTypes.Validator<boolean>;
+    let onChangeCallback: PropTypes.Requireable<(...args: any[]) => any>;
+    let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    let preventEdit: PropTypes.Requireable<boolean>;
+    let description: PropTypes.Requireable<string>;
+    let onlyShowDescriptionWhenOn: PropTypes.Requireable<boolean>;
+    let noLeftPaddingOnChildren: PropTypes.Requireable<boolean>;
+    let alwaysShowChildren: PropTypes.Requireable<boolean>;
+    let descriptionBeforeChildren: PropTypes.Requireable<boolean>;
+    let safeDescription: PropTypes.Requireable<boolean>;
+    let extraClasses: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+    let hideEnabledDisabledText: PropTypes.Requireable<boolean>;
+    let tooltipText: PropTypes.Requireable<string>;
+}
+declare namespace defaultProps {
+    let label_1: string;
+    export { label_1 as label };
+    let labelOnRight_1: boolean;
+    export { labelOnRight_1 as labelOnRight };
+    let labelClasses_1: null;
+    export { labelClasses_1 as labelClasses };
+    export function onChangeCallback_1(): void;
+    export { onChangeCallback_1 as onChangeCallback };
+    let children_1: null;
+    export { children_1 as children };
+    let preventEdit_1: boolean;
+    export { preventEdit_1 as preventEdit };
+    let description_1: string;
+    export { description_1 as description };
+    let onlyShowDescriptionWhenOn_1: boolean;
+    export { onlyShowDescriptionWhenOn_1 as onlyShowDescriptionWhenOn };
+    let noLeftPaddingOnChildren_1: boolean;
+    export { noLeftPaddingOnChildren_1 as noLeftPaddingOnChildren };
+    let alwaysShowChildren_1: boolean;
+    export { alwaysShowChildren_1 as alwaysShowChildren };
+    let descriptionBeforeChildren_1: boolean;
+    export { descriptionBeforeChildren_1 as descriptionBeforeChildren };
+    let safeDescription_1: boolean;
+    export { safeDescription_1 as safeDescription };
+    let hideEnabledDisabledText_1: boolean;
+    export { hideEnabledDisabledText_1 as hideEnabledDisabledText };
+    let extraClasses_1: never[];
+    export { extraClasses_1 as extraClasses };
+    let tooltipText_1: string;
+    export { tooltipText_1 as tooltipText };
+}
+import PropTypes from 'prop-types';

package/dist/esm/components/form/element/onOffSwitch.js

@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { invoke } from '../../../Func';
+import { UI } from '../../../CONST';
+import Switch from './switch';
+/**
+ * Displays an on off switch (optionally) with label
+ */
+const propTypes = {
+    // A unique identifier
+    id: PropTypes.string.isRequired,
+    // Label to be displayed left to the switch
+    label: PropTypes.string,
+    // True if the label should be on the right
+    labelOnRight: PropTypes.bool,
+    // Classes of the label
+    // eslint-disable-next-line react/forbid-prop-types
+    labelClasses: PropTypes.any,
+    // True if the switch is on
+    checked: PropTypes.bool.isRequired,
+    // Callback function to call when changing the switch (optional)
+    onChangeCallback: PropTypes.func,
+    // Element to be displayed below the switch when it's on (optional)
+    children: PropTypes.node,
+    // Disable edition of the switch (optional)
+    preventEdit: PropTypes.bool,
+    // Description to be displayed below the switch (optional)
+    description: PropTypes.string,
+    // If set to true, the description of the switch is only displayed when it is in the 'checked' state (optional)
+    onlyShowDescriptionWhenOn: PropTypes.bool,
+    // If set to true, children elements won't be applied a left padding (optional)
+    noLeftPaddingOnChildren: PropTypes.bool,
+    // Whether we should always show the children classes
+    alwaysShowChildren: PropTypes.bool,
+    // If set to true, the description of the switch will be placed above the children elements (optional)
+    descriptionBeforeChildren: PropTypes.bool,
+    // Safety check to ensure we are using dangerouslySetInnerHTML() safely
+    safeDescription: PropTypes.bool,
+    // An array of extra classes to put on the combobox
+    extraClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+    // There is usually text just following a switch that says "ENABLED" and "DISABLED" and
+    // you can use this option to hide that text
+    hideEnabledDisabledText: PropTypes.bool,
+    // Text to display in a tooltip
+    tooltipText: PropTypes.string,
+};
+const defaultProps = {
+    label: '',
+    labelOnRight: false,
+    labelClasses: null,
+    onChangeCallback: () => { },
+    children: null,
+    preventEdit: false,
+    description: '',
+    onlyShowDescriptionWhenOn: false,
+    noLeftPaddingOnChildren: false,
+    alwaysShowChildren: false,
+    descriptionBeforeChildren: false,
+    safeDescription: false,
+    hideEnabledDisabledText: false,
+    extraClasses: [],
+    tooltipText: '',
+};
+class OnOffSwitch extends Component {
+    constructor(props) {
+        super(props);
+        this.onChangeCallback = this.onChangeCallback.bind(this);
+        this.lock = this.lock.bind(this);
+        this.unlock = this.unlock.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.toggle = this.toggle.bind(this);
+        this.state = {
+            checked: this.props.checked,
+            preventEdit: this.props.preventEdit,
+            preventEditDescription: '',
+        };
+    }
+    /**
+     * Callback function called after toggling the switch
+     * @param {boolean} newState
+     */
+    onChangeCallback(newState) {
+        invoke(this.props.onChangeCallback, [newState]);
+        this.setState({
+            checked: newState,
+        });
+    }
+    /**
+     * Is the switch on or off ?
+     *
+     * @returns {boolean} true if on
+     */
+    getValue() {
+        return this.state.checked;
+    }
+    /**
+     * Toggle the state of this switch.
+     *
+     * Note: this is used via refs, so please don't delete it unless you know what you're doing :D
+     */
+    toggle() {
+        this.setState((prevState) => ({
+            checked: !prevState.checked,
+        }));
+    }
+    /**
+     * Force switch off and prevent editing it
+     * @param {boolean} checked
+     * @param {string} msg
+     */
+    lock(checked, msg) {
+        this.setState({
+            checked,
+            preventEdit: true,
+            preventEditDescription: msg,
+        });
+    }
+    /**
+     * Release switch to its original value, and allow editing it
+     */
+    unlock() {
+        this.setState((prevState) => ({
+            checked: prevState.checked,
+            preventEdit: false,
+            preventEditDescription: '',
+        }));
+    }
+    render() {
+        const childrenClasses = {
+            depreciated: !this.props.noLeftPaddingOnChildren,
+            helperLabel: !this.props.noLeftPaddingOnChildren,
+        };
+        if (!this.props.alwaysShowChildren) {
+            childrenClasses[UI.HIDDEN] = !this.state.checked;
+        }
+        const children = this.props.children ? React.createElement("div", { className: cn(childrenClasses) }, this.props.children) : null;
+        // Only use dangerouslySetInnerHTML if we explicitly pass safeDescription as a parameter.
+        // Otherwise, just set the description inside a div
+        // We use dangerouslySetInnerHTML, which could introduce XSS vulnerabilities if derived from user input,
+        // to keep the description property simple without a bunch of nested HTML elements
+        const description = this.state.preventEdit && this.state.preventEditDescription ? this.state.preventEditDescription : this.props.description;
+        let descriptionElm = null;
+        if (description && (this.state.checked || !this.props.onlyShowDescriptionWhenOn)) {
+            if (this.props.safeDescription) {
+                descriptionElm = (React.createElement("div", { className: "depreciated helperLabel", 
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML: { __html: description } }));
+            }
+            else {
+                descriptionElm = React.createElement("div", { className: "depreciated helperLabel" }, description);
+            }
+        }
+        return (React.createElement("div", null,
+            this.props.label && !this.props.labelOnRight && (React.createElement("label", { className: cn(this.props.labelClasses), htmlFor: this.props.id }, this.props.label)),
+            React.createElement(Switch, { id: this.props.id, checked: this.state.checked, disabled: this.state.preventEdit, onChange: this.onChangeCallback, extraClasses: [this.props.extraClasses, { marginLeft10: !this.props.labelOnRight }], hideEnabledDisabledText: this.props.hideEnabledDisabledText, tooltipText: this.props.tooltipText }),
+            this.props.label && this.props.labelOnRight && (React.createElement("label", { className: cn(this.props.labelClasses, 'marginLeft5'), htmlFor: this.props.id }, this.props.label)),
+            this.props.descriptionBeforeChildren ? (React.createElement("div", null,
+                descriptionElm,
+                children)) : (React.createElement("div", null,
+                children,
+                descriptionElm))));
+    }
+}
+OnOffSwitch.propTypes = propTypes;
+OnOffSwitch.defaultProps = defaultProps;
+export default OnOffSwitch;

package/dist/esm/components/form/element/switch.d.ts

@@ -0,0 +1,58 @@
+export default Switch;
+declare class Switch extends React.Component<any, any, any> {
+    constructor(props: any);
+    /**
+     * Fires the change handler with the current value
+     */
+    fireChangeHandler(): void;
+    /**
+     * If there was a confirm object specified in our properties,
+     * then we need to open a confirm modal with those settings
+     *
+     * @param {SyntheticEvent} e
+     * @returns {Boolean}
+     */
+    showConfirm(e: SyntheticEvent): boolean;
+    checkbox: HTMLInputElement | null;
+    element: HTMLSpanElement | null;
+    componentDidMount(): void;
+    /**
+     * Gets the value of the field
+     *
+     * @returns {boolean}
+     */
+    getValue(): boolean;
+    render(): React.JSX.Element;
+}
+declare namespace Switch {
+    export { propTypes };
+    export { defaultProps };
+}
+import React from 'react';
+declare namespace propTypes {
+    let id: PropTypes.Validator<string>;
+    let checked: PropTypes.Requireable<boolean>;
+    let disabled: PropTypes.Requireable<boolean>;
+    let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    let confirm: PropTypes.Requireable<object>;
+    let extraClasses: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+    let hideEnabledDisabledText: PropTypes.Requireable<boolean>;
+    let tooltipText: PropTypes.Requireable<string>;
+}
+declare namespace defaultProps {
+    let checked_1: boolean;
+    export { checked_1 as checked };
+    let disabled_1: boolean;
+    export { disabled_1 as disabled };
+    export function onChange_1(): void;
+    export { onChange_1 as onChange };
+    let confirm_1: null;
+    export { confirm_1 as confirm };
+    let extraClasses_1: never[];
+    export { extraClasses_1 as extraClasses };
+    let hideEnabledDisabledText_1: boolean;
+    export { hideEnabledDisabledText_1 as hideEnabledDisabledText };
+    let tooltipText_1: string;
+    export { tooltipText_1 as tooltipText };
+}
+import PropTypes from 'prop-types';

package/dist/esm/components/form/element/switch.js

@@ -0,0 +1,98 @@
+/* globals Func, Modal */
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import get from 'lodash/get';
+/**
+ * Form Element Switch - Displays an on/off switch
+ */
+const propTypes = {
+    id: PropTypes.string.isRequired,
+    // If it is turned on by default
+    checked: PropTypes.bool,
+    // If it is disabled or not
+    disabled: PropTypes.bool,
+    // A callback method for when the value is changed
+    onChange: PropTypes.func,
+    // A configuration object that is passed to Modal.confirm() if we want to have
+    // the user confirm their choice
+    confirm: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    // An array of extra classes to put on the combobox
+    extraClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+    // There is usually text just following a switch that says "ENABLED" and "DISABLED" and
+    // you can use this option to hide that text
+    hideEnabledDisabledText: PropTypes.bool,
+    // Text to display in a tooltip
+    tooltipText: PropTypes.string,
+};
+const defaultProps = {
+    checked: false,
+    disabled: false,
+    onChange: () => { },
+    confirm: null,
+    extraClasses: [],
+    hideEnabledDisabledText: false,
+    tooltipText: '',
+};
+class Switch extends React.Component {
+    constructor(props) {
+        super(props);
+        this.fireChangeHandler = this.fireChangeHandler.bind(this);
+        this.showConfirm = this.showConfirm.bind(this);
+        this.checkbox = null;
+        this.element = null;
+    }
+    componentDidMount() {
+        $(this.element).tooltip('destroy').tooltip();
+    }
+    /**
+     * Gets the value of the field
+     *
+     * @returns {boolean}
+     */
+    getValue() {
+        return $(this.checkbox)[0].checked;
+    }
+    /**
+     * Fires the change handler with the current value
+     */
+    fireChangeHandler() {
+        // Don't do anything here if we want the user to confirm their choice
+        if (this.props.confirm) {
+            return;
+        }
+        Func.invoke(this.props.onChange, [this.getValue()]);
+    }
+    /**
+     * If there was a confirm object specified in our properties,
+     * then we need to open a confirm modal with those settings
+     *
+     * @param {SyntheticEvent} e
+     * @returns {Boolean}
+     */
+    showConfirm(e) {
+        // Let our event happen normally
+        if (!this.props.confirm) {
+            return true;
+        }
+        e.preventDefault();
+        Modal.confirm(Object.assign(Object.assign({}, get(this.props, 'confirm', {})), { onYesCallback: () => {
+                // Toggle the checked property and then fire our change handler
+                this.checkbox.checked = !this.getValue();
+                Func.invoke(this.props.onChange, [this.getValue()]);
+            } }));
+        return false;
+    }
+    render() {
+        return (React.createElement("span", { className: cn('onoffswitch-wrapper js_tooltip', this.props.extraClasses), title: this.props.tooltipText, ref: (el) => (this.element = el) },
+            React.createElement("input", { ref: (el) => (this.checkbox = el), type: "checkbox", id: this.props.id, className: "onoffswitch-checkbox", checked: this.props.checked, disabled: this.props.disabled, onClick: this.showConfirm, onChange: this.fireChangeHandler }),
+            React.createElement("label", { className: "onoffswitch-label", htmlFor: this.props.id },
+                React.createElement("span", { className: cn('onoffswitch-inner', {
+                        noText: this.props.hideEnabledDisabledText,
+                    }) }),
+                React.createElement("span", { className: "onoffswitch-switch" }))));
+    }
+}
+Switch.propTypes = propTypes;
+Switch.defaultProps = defaultProps;
+export default Switch;