@imposium-hub/components 1.44.3 → 1.45.0

package/dist/esm/components/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/tabs/Tabs.stories.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Pick<Omit<Omit<Omit<any, "targetRef"> & {
+        targetRef?: any;
+    }, "width">, "height">, string | number | symbol> & React.RefAttributes<HTMLElement>>;
+};
+export default _default;
+export declare const defaultTabs: () => JSX.Element;

package/dist/esm/components/tabs/Tabs.stories.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Tabs from './Tabs';
+export default {
+    title: 'Tabs',
+    component: Tabs
+};
+const tabs = [
+    {
+        label: 'Tab1',
+        key: 'project',
+        content: 'Content 1'
+    },
+    {
+        label: 'Tab2',
+        key: 'moderation',
+        content: 'Content 2'
+    },
+    {
+        label: 'Tab3',
+        key: 'advanced',
+        content: 'Content 3'
+    },
+    {
+        label: 'Tab4',
+        key: 'video',
+        content: 'Content 4'
+    }
+];
+export const defaultTabs = () => {
+    const [activeTab, setActiveTab] = React.useState('project');
+    const handleTabChange = (i) => {
+        setActiveTab(i);
+    };
+    return (React.createElement(Tabs, { activeTab: activeTab, onChange: (i) => handleTabChange(i), options: tabs }));
+};
+//# sourceMappingURL=Tabs.stories.js.map

package/dist/esm/components/tabs/Tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,eAAe;IACX,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CAClB,CAAC;AAuBF,MAAM,IAAI,GAAG;IACT;QACI,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,SAAS;QACd,OAAO,EAAE,WAAW;KACvB;IACD;QACI,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,YAAY;QACjB,OAAO,EAAE,WAAW;KACvB;IACD;QACI,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,UAAU;QACf,OAAO,EAAE,WAAW;KACvB;IACD;QACI,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,OAAO;QACZ,OAAO,EAAE,WAAW;KACvB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE5D,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,EAAE;QAC1B,YAAY,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,IAAI,IACD,SAAS,EAAK,SAAS,EACvB,QAAQ,EAAI,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,EACrC,OAAO,EAAI,IAAI,GAAG,CACzB,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/tag/Tag.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ITagProps {
+    copy: string;
+    colorize?: boolean;
+    removeHandler?: (...args: any[]) => any;
+}
+declare const TagMemoized: React.NamedExoticComponent<ITagProps>;
+export default TagMemoized;

package/dist/esm/components/tag/Tag.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ICON_TIMES } from '../../constants/icons';
+import { string2HexCode } from '../../Util';
+const Tag = (p) => {
+    if (typeof p.copy !== 'string') {
+        throw new Error('Prop passed to Tag is not string: ');
+    }
+    const borderLeftColor = (p.colorize) ? `${string2HexCode(p.copy)}` : '';
+    const remove = (typeof p.removeHandler === 'function') &&
+        (React.createElement("div", { className: 'remove-tag', onClick: p.removeHandler }, ICON_TIMES));
+    return (React.createElement("div", { key: p.copy, style: { borderLeftColor }, className: 'imposium-tag' },
+        p.copy,
+        remove));
+};
+const TagMemoized = React.memo(Tag);
+export default TagMemoized;
+//# sourceMappingURL=Tag.js.map

package/dist/esm/components/tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAQ5C,MAAM,GAAG,GAAyB,CAAC,CAAa,EAAE,EAAE;IAChD,IAAI,OAAO,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC;KACzD;IAED,MAAM,eAAe,GAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjF,MAAM,MAAM,GAAiB,CAAC,OAAO,CAAC,CAAC,aAAa,KAAK,UAAU,CAAC;QAChE,CAAC,6BAAK,SAAS,EAAG,YAAY,EAAC,OAAO,EAAI,CAAC,CAAC,aAAa,IAAG,UAAU,CAAO,CAAC,CAAC;IAEnF,OAAO,CACH,6BACI,GAAG,EAAI,CAAC,CAAC,IAAI,EACb,KAAK,EAAI,EAAC,eAAe,EAAC,EAC1B,SAAS,EAAG,cAAc;QAEzB,CAAC,CAAC,IAAI;QACN,MAAM,CACL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACpC,eAAe,WAAW,CAAC"}

package/dist/esm/components/tag/Tag.test.js

@@ -0,0 +1 @@
+//# sourceMappingURL=Tag.test.js.map

package/dist/esm/components/tag/Tag.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.test.js","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.test.tsx"],"names":[],"mappings":""}

package/dist/esm/components/text-area-field/TextAreaField.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface ITextAreaFieldProps {
+    buttons?: any;
+    controlled?: boolean;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value: string;
+    showCopy?: boolean;
+    width?: string | number;
+    tooltip?: IToolTipConfig | string;
+    onBlur?(e: any): void;
+    onChange?(e: any): void;
+    onFocus?(e: any): void;
+    onNotification?(n: any, t?: any): void;
+    onError?(e: any): void;
+    onSubmit?(e: any): void;
+    info?: string;
+    labelPosition?: string;
+}
+interface ITextAreaFieldState {
+    editing: boolean;
+    internalValue: string;
+}
+declare class TextAreaField extends React.PureComponent<ITextAreaFieldProps, ITextAreaFieldState> {
+    private evtHandlers;
+    constructor(props: any);
+    private inputRef;
+    private blur;
+    private copyToClipboard;
+    private focus;
+    private getValue;
+    private onChange;
+    private renderButtons;
+    private toggleEditing;
+    componentDidUpdate(prevProps: any): void;
+    render(): JSX.Element;
+}
+export default TextAreaField;

package/dist/esm/components/text-area-field/TextAreaField.js

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import Button from '../button/Button';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import { ICON_CLIPBOARD, ICON_EDIT, ICON_CHECK } from '../../constants/icons';
+class TextAreaField extends React.PureComponent {
+    evtHandlers;
+    constructor(props) {
+        super(props);
+        this.state = {
+            internalValue: props.value,
+            editing: false
+        };
+        this.evtHandlers = {
+            toggleEditing: (e) => this.toggleEditing(e),
+            copyToClipboard: (e) => this.copyToClipboard(e)
+        };
+        this.inputRef = React.createRef();
+    }
+    inputRef;
+    blur(e) {
+        if (this.props.onBlur) {
+            this.props.onBlur(e);
+        }
+    }
+    copyToClipboard(e) {
+        const { onNotification, onError } = this.props;
+        navigator.clipboard.writeText(this.props.value).then(() => {
+            if (onNotification) {
+                onNotification('Copied to clipboard!');
+            }
+        }, () => {
+            if (onError) {
+                onError('Error copying to clipboard.');
+            }
+        });
+    }
+    focus(e) {
+        if (this.props.onFocus) {
+            this.props.onFocus(e);
+        }
+    }
+    getValue() {
+        const { controlled, value } = this.props;
+        const { internalValue } = this.state;
+        if (controlled) {
+            return internalValue;
+        }
+        else {
+            return value;
+        }
+    }
+    onChange(e) {
+        if (!this.props.controlled) {
+            this.props.onChange(e.target.value);
+        }
+        else {
+            this.setState({
+                internalValue: e.target.value
+            });
+        }
+    }
+    renderButtons() {
+        const { controlled, readOnly, buttons, showCopy } = this.props;
+        const { editing } = this.state;
+        const buttonArray = (buttons) ? [...buttons] : [];
+        if (controlled) {
+            const icon = (editing) ? ICON_CHECK : ICON_EDIT;
+            buttonArray.push(React.createElement(Button, { key: 'btn-edit', style: 'subtle', color: 'secondary', onClick: this.evtHandlers.toggleEditing }, icon));
+        }
+        if (showCopy) {
+            buttonArray.push(React.createElement(Button, { key: 'btn-copy', style: 'subtle', tooltip: 'Copy to Clipboard', color: 'primary', onClick: this.evtHandlers.copyToClipboard }, ICON_CLIPBOARD));
+        }
+        return buttonArray;
+    }
+    toggleEditing(e) {
+        const { editing, internalValue } = this.state;
+        const { value } = this.props;
+        if (editing) {
+            this.setState({
+                editing: false
+            }, () => {
+                // only fire onSubmit if the value changed
+                if (internalValue !== value) {
+                    this.props.onSubmit(this.state.internalValue);
+                }
+            });
+        }
+        else {
+            this.setState({
+                editing: true
+            }, () => {
+                const input = this.inputRef.current;
+                if (input) {
+                    input.focus();
+                }
+            });
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.controlled) {
+            if (prevProps.value !== this.props.value) {
+                this.setState({
+                    internalValue: this.props.value
+                });
+            }
+        }
+    }
+    render() {
+        const { label, placeholder, controlled, disabled, readOnly, width, tooltip, info, labelPosition } = this.props;
+        const { editing } = this.state;
+        const disable = (controlled && !editing || disabled);
+        return React.createElement(FieldWrapper, { customClass: 'text-area-field', label: label, tooltip: tooltip, buttons: this.renderButtons(), info: info, labelPosition: labelPosition, width: width },
+            React.createElement("textarea", { placeholder: placeholder, value: this.getValue(), disabled: disable, readOnly: readOnly, ref: this.inputRef, onChange: (e) => this.onChange(e), onFocus: (e) => this.focus(e), onBlur: (e) => this.blur(e) }));
+    }
+}
+export default TextAreaField;
+//# sourceMappingURL=TextAreaField.js.map

package/dist/esm/components/text-area-field/TextAreaField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaField.js","sourceRoot":"","sources":["../../../../src/components/text-area-field/TextAreaField.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/text-area-field/TextAreaField.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import TextAreaField from './TextAreaField';
+declare const _default: {
+    title: string;
+    components: typeof TextAreaField;
+};
+export default _default;
+export declare const defaultTextAreaField: () => JSX.Element;

package/dist/esm/components/text-area-field/TextAreaField.stories.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import TextAreaField from './TextAreaField';
+import { action } from '@storybook/addon-actions';
+export default {
+    title: 'TextAreaField',
+    components: TextAreaField
+};
+export const defaultTextAreaField = () => (React.createElement(TextAreaField, { label: 'TextArea Field', showCopy: true, tooltip: 'TOOLTIP', value: '', onNotification: (n) => action(n), onError: (n) => action(n), onChange: action('CHANGED') }));
+//# sourceMappingURL=TextAreaField.stories.js.map

package/dist/esm/components/text-area-field/TextAreaField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaField.stories.js","sourceRoot":"","sources":["../../../../src/components/text-area-field/TextAreaField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,eAAe;IACX,KAAK,EAAE,eAAe;IACtB,UAAU,EAAE,aAAa;CAC5B,CAAC;AA4BF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACtC,oBAAC,aAAa,IACV,KAAK,EAAI,gBAAgB,EACzB,QAAQ,EAAI,IAAI,EAChB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAI,EAAE,EACX,cAAc,EAAI,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAClC,OAAO,EAAI,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAC3B,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CACvC,CAAC"}

package/dist/esm/components/text-field/TextField.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface ITextFieldProps {
+    buttons?: any;
+    controlled?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    submittable?: boolean;
+    focusOnMount?: boolean;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value?: string;
+    tooltip?: IToolTipConfig | string;
+    showCopy?: boolean;
+    width?: string | number;
+    submittableType?: 'search' | 'add' | 'check';
+    suggestions?: string[];
+    hideButtons?: boolean;
+    onBlur?(e: any): void;
+    onChange?(e: any): void;
+    onFocus?(e: any): void;
+    onNotification?(e: any): void;
+    onError?(e: any): void;
+    onSubmit?(e: any): void;
+    doSubmit?: (v: string) => any;
+    pattern?: RegExp;
+    info?: string;
+    labelPosition?: string;
+}
+interface ITextFieldState {
+    editing: boolean;
+    suggestions: string[];
+    internalValue: string;
+}
+declare class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
+    private inputRef;
+    private evtHandlers;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate: (prevProps: any, prevState: any) => void;
+    setEditing(editing: any): void;
+    private blur;
+    private focus;
+    private cancelEdit;
+    private copyToClipboard;
+    private getValue;
+    private onChange;
+    private forceSubmit;
+    private toggleEditing;
+    private clearValue;
+    private getSuggestions;
+    private getSuggestionValue;
+    private renderSuggestion;
+    private renderSubmittableIcon;
+    private renderButtons;
+    private onSuggestionsFetchRequested;
+    private onSuggestionsClearRequested;
+    private renderInput;
+    render(): JSX.Element;
+}
+export default TextField;

package/dist/esm/components/text-field/TextField.js

@@ -0,0 +1,304 @@
+import * as React from 'react';
+import hotkeys from 'hotkeys-js';
+import Button from '../button/Button';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import { filterHotkeys } from '../../Util';
+import { ICON_CHECK, ICON_EDIT, ICON_SEARCH, ICON_PLUS, ICON_CLIPBOARD, ICON_TIMES } from '../../constants/icons';
+import Autosuggest from 'react-autosuggest';
+class TextField extends React.PureComponent {
+    inputRef;
+    evtHandlers = {
+        submittable: () => this.forceSubmit(),
+        controlled: (e) => this.toggleEditing(e),
+        cancel: () => this.cancelEdit(),
+        clear: () => this.forceSubmit(true),
+        toggleEditing: (e) => this.toggleEditing(e),
+        forceSubmit: () => this.forceSubmit(),
+        clearValue: () => this.clearValue(),
+        copyToClipboard: (e) => this.copyToClipboard(e),
+        onSuggestionsFetchRequested: (e) => this.onSuggestionsFetchRequested(e),
+        onSuggestionsClearRequested: () => this.onSuggestionsClearRequested(),
+        getSuggestionValue: (e) => this.getSuggestionValue(e),
+        renderSuggestion: (e) => this.renderSuggestion(e)
+    };
+    constructor(props) {
+        super(props);
+        if (this.props.controlled && this.props.submittable) {
+            throw new Error('Actionable TextField(s) must be one of either: controlled or submittable.');
+        }
+        this.state = {
+            internalValue: props.value || '',
+            suggestions: [],
+            editing: false
+        };
+        this.inputRef = React.createRef();
+        hotkeys.filter = (e) => filterHotkeys(e);
+    }
+    componentDidMount() {
+        if (this.props.focusOnMount && this.inputRef.current) {
+            this.inputRef.current.focus();
+        }
+    }
+    componentWillUnmount() {
+        if (this.props.submittable) {
+            hotkeys.unbind('enter', this.evtHandlers.submittable);
+            hotkeys.unbind('esc', this.evtHandlers.clear);
+        }
+        else if (this.props.controlled) {
+            hotkeys.unbind('enter', this.evtHandlers.controlled);
+            hotkeys.unbind('esc', this.evtHandlers.cancel);
+        }
+    }
+    componentDidUpdate = (prevProps, prevState) => {
+        if (this.props.controlled || this.props.submittable) {
+            if (prevProps.value !== this.props.value) {
+                this.setState({
+                    internalValue: this.props.value
+                });
+            }
+            if (this.props.value === '' && !this.state.editing && prevState.editing) {
+                this.setState({
+                    internalValue: ''
+                });
+            }
+        }
+    };
+    setEditing(editing) {
+        this.setState({
+            editing
+        }, () => {
+            this.inputRef.current.focus();
+        });
+    }
+    blur(e) {
+        if (this.props.onBlur) {
+            this.props.onBlur(e);
+        }
+        if (this.props.submittable) {
+            hotkeys.unbind('enter', this.evtHandlers.submittable);
+            hotkeys.unbind('esc', this.evtHandlers.clear);
+        }
+        else if (this.props.controlled) {
+            hotkeys.unbind('enter', this.evtHandlers.controlled);
+            hotkeys.unbind('esc', this.evtHandlers.cancel);
+        }
+    }
+    focus(e) {
+        if (this.props.onFocus) {
+            this.props.onFocus(e);
+        }
+        if (this.props.submittable) {
+            hotkeys('enter', this.evtHandlers.submittable);
+            hotkeys('esc', this.evtHandlers.clear);
+        }
+        else if (this.props.controlled) {
+            hotkeys('enter', this.evtHandlers.controlled);
+            hotkeys('esc', this.evtHandlers.cancel);
+        }
+    }
+    cancelEdit() {
+        this.setState({
+            editing: false,
+            internalValue: this.props.value
+        });
+    }
+    copyToClipboard(e) {
+        const { onNotification, onError } = this.props;
+        navigator.clipboard.writeText(this.props.value).then(() => {
+            if (onNotification) {
+                onNotification('Copied to clipboard!');
+            }
+        }, () => {
+            if (onError) {
+                onError('Error copying to clipboard.');
+            }
+        });
+    }
+    getValue() {
+        const { controlled, submittable, value } = this.props;
+        const { internalValue } = this.state;
+        if (controlled || submittable) {
+            return internalValue;
+        }
+        else {
+            return value || '';
+        }
+    }
+    onChange(e, v) {
+        const { pattern } = this.props;
+        let val = (v) ? v.newValue : e.target.value;
+        if (!this.props.controlled && !this.props.submittable) {
+            if (pattern) {
+                if (!pattern.test(val)) {
+                    return;
+                }
+            }
+            if (val === '') {
+                val = null;
+            }
+            this.props.onChange(val);
+        }
+        else {
+            this.setState({
+                internalValue: val
+            }, () => {
+                if (v) {
+                    if (v.method === 'click') {
+                        this.evtHandlers.submittable();
+                    }
+                }
+            });
+        }
+    }
+    forceSubmit = (clear = false) => {
+        const { internalValue } = this.state;
+        if (!clear) {
+            this.props.doSubmit(internalValue);
+            if (this.props.submittableType === 'add') {
+                this.setState({ internalValue: '' });
+            }
+        }
+        if (clear) {
+            this.props.doSubmit('');
+            this.setState({ internalValue: '' });
+        }
+    };
+    toggleEditing(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const { editing, internalValue } = this.state;
+        const { value } = this.props;
+        if (editing) {
+            this.setState({
+                editing: false
+            }, () => {
+                // only fire onSubmit if the value changed
+                if (internalValue !== value) {
+                    let val = this.state.internalValue;
+                    if (val === '') {
+                        val = null;
+                    }
+                    this.props.onSubmit(val);
+                }
+            });
+        }
+        else {
+            this.setState({
+                editing: true
+            }, () => {
+                const input = this.inputRef.current;
+                if (input) {
+                    input.focus();
+                }
+            });
+        }
+    }
+    clearValue() {
+        this.setState({
+            internalValue: ''
+        }, () => {
+            this.props.doSubmit('');
+        });
+    }
+    getSuggestions(value) {
+        const inputValue = value.trim().toLowerCase();
+        const inputLength = inputValue.length;
+        return inputLength === 0 ? [] : this.props.suggestions.filter((tag) => tag.toLowerCase().slice(0, inputLength) === inputValue);
+    }
+    getSuggestionValue(suggestion) {
+        return suggestion;
+    }
+    // Use your imagination to render suggestions.
+    renderSuggestion(suggestion) {
+        return React.createElement("div", { className: 'suggestion' }, suggestion);
+    }
+    renderSubmittableIcon = () => {
+        const { submittableType } = this.props;
+        switch (submittableType) {
+            case 'search':
+                return (ICON_SEARCH);
+            case 'check':
+                return (ICON_CHECK);
+            case 'add':
+                return (ICON_PLUS);
+            default:
+                return null;
+        }
+    };
+    renderButtons() {
+        const { controlled, submittable, readOnly, buttons, showCopy, submittableType, value, hideButtons } = this.props;
+        const { editing, internalValue } = this.state;
+        let buttonArray;
+        if (buttons) {
+            if (Array.isArray(buttons)) {
+                buttonArray = [...buttons];
+            }
+            else {
+                buttonArray = [];
+                buttonArray.push(buttons);
+            }
+        }
+        else {
+            buttonArray = [];
+        }
+        const tooltip = (submittableType === 'search') ? 'Search' : 'Confirm';
+        if (hideButtons) {
+            return [];
+        }
+        if (controlled) {
+            const icon = (editing) ? ICON_CHECK : ICON_EDIT;
+            buttonArray.push(React.createElement(Button, { key: 'btn-edit', style: 'subtle', tooltip: 'Edit', color: 'secondary', onClick: this.evtHandlers.toggleEditing }, icon));
+        }
+        if (submittable) {
+            buttonArray.push((React.createElement(Button, { key: 'btn-submit', style: 'subtle', tooltip: tooltip, color: 'secondary', onClick: this.evtHandlers.forceSubmit }, this.renderSubmittableIcon())));
+            if (value) {
+                buttonArray.push((React.createElement(Button, { key: 'btn-clear', style: 'subtle', tooltip: 'Clear', onClick: this.evtHandlers.clearValue }, ICON_TIMES)));
+            }
+        }
+        if (showCopy) {
+            buttonArray.push(React.createElement(Button, { key: 'btn-copy', style: 'subtle', color: 'primary', tooltip: 'Copy to Clipboard', onClick: this.evtHandlers.copyToClipboard }, ICON_CLIPBOARD));
+        }
+        return buttonArray;
+    }
+    onSuggestionsFetchRequested = ({ value }) => {
+        this.setState({
+            suggestions: this.getSuggestions(value)
+        });
+    };
+    onSuggestionsClearRequested = () => {
+        this.setState({
+            suggestions: []
+        });
+    };
+    renderInput() {
+        const { placeholder, controlled, submittable, disabled, readOnly, loading } = this.props;
+        const { suggestions } = this.state;
+        const { editing } = this.state;
+        const disable = (controlled && !editing || disabled);
+        const inputClass = (controlled || submittable) ? 'controlled-input' : '';
+        const inputProps = {
+            type: 'text',
+            placeholder,
+            value: this.getValue(),
+            disabled: disable || loading,
+            readOnly,
+            ref: this.inputRef,
+            onFocus: (e) => this.focus(e),
+            onBlur: (e) => this.blur(e)
+        };
+        if (this.props.suggestions) {
+            inputProps.onChange = (e, v) => this.onChange(e, v);
+            return React.createElement(Autosuggest, { suggestions: suggestions, onSuggestionsFetchRequested: this.evtHandlers.onSuggestionsFetchRequested, onSuggestionsClearRequested: this.evtHandlers.onSuggestionsClearRequested, getSuggestionValue: this.evtHandlers.getSuggestionValue, renderSuggestion: this.evtHandlers.renderSuggestion, inputProps: inputProps });
+        }
+        else {
+            inputProps.onChange = (e) => this.onChange(e);
+            return React.createElement("input", { className: `${inputClass}`, ...inputProps });
+        }
+    }
+    render() {
+        const { label, width, tooltip, info, labelPosition } = this.props;
+        return React.createElement(FieldWrapper, { customClass: 'text-field', label: label, buttons: this.renderButtons(), tooltip: tooltip, info: info, labelPosition: labelPosition, width: width }, this.renderInput());
+    }
+}
+export default TextField;
+//# sourceMappingURL=TextField.js.map