@imposium-hub/components 1.44.4 → 1.45.0

package/dist/esm/components/header/Header.js

@@ -0,0 +1,240 @@
+import * as React from 'react';
+import ImposiumDropdown from '../dropdown/Dropdown';
+import ServiceIcon from '../service-icon/ServiceIcon';
+import { string2HexCode, parameterizeServiceUrl } from '../../Util';
+import { ICON_CHEVRON_DOWN, ICON_CHEVRON_UP, ICON_HELP } from '../../constants/icons';
+export default class ImposiumHeader extends React.PureComponent {
+    static DEFAULT_TITLE = 'imposium';
+    static SERVICE_MESH_ALIAS = 'services';
+    static DOCS_HEADER = 'documentation';
+    static PRIVATE_HEADER = 'admin';
+    static API_DOCS_LINK_COPY = 'REST API';
+    static SDK_DOCS_LINK_COPY = 'Javascript SDK';
+    static API_DOCS_LINK = 'https://docs.imposium.com';
+    static SDK_DOCS_LINK = 'https://docs.imposium.com/js-sdk/';
+    static DEFAULT_SERVICE_TOGGLE_COPY = 'stories';
+    static DEFAULT_ACCOUNT_TOGGLE_COLOR = 'royalblue';
+    static NO_STORIES_COPY = 'No stories were found';
+    static LOGOUT_COPY = 'logout';
+    static UUID_LENGTH = 36;
+    static UP = (ICON_CHEVRON_UP);
+    static DOWN = (ICON_CHEVRON_DOWN);
+    static PRIVATE_IDS = [9, 10, 11, 12];
+    serviceToggleRef = null;
+    storyToggleRef = null;
+    orgsToggleRef = null;
+    constructor(p) {
+        super(p);
+        this.state = {
+            inactiveOrganizations: [],
+            servicesByOrganization: [],
+            activeServiceBlob: undefined,
+            activeOrganizationBlob: undefined,
+            showAccountDropdown: false,
+            showStoriesDropdown: false,
+            showServiceDropdown: false,
+            dropdownToggleColor: ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR,
+            activeFirstChar: ''
+        };
+        this.serviceToggleRef = React.createRef();
+        this.storyToggleRef = React.createRef();
+        this.orgsToggleRef = React.createRef();
+    }
+    componentDidMount = () => {
+        const { accessData, activeOrganization } = this.props;
+        if (accessData) {
+            this.parseAccessData(accessData, activeOrganization);
+        }
+    };
+    componentDidUpdate = (prevProps) => {
+        const { accessData: currAccess, activeOrganization: currActive } = this.props;
+        const { accessData: prevAccess, activeOrganization: prevActive } = prevProps;
+        if (currAccess && currAccess !== prevAccess) {
+            this.parseAccessData(currAccess, currActive);
+        }
+        if (typeof currActive === 'string' &&
+            currActive.length === ImposiumHeader.UUID_LENGTH &&
+            currActive !== prevActive) {
+            this.parseAccessData(currAccess, currActive);
+        }
+    };
+    parseAccessData = (accessData, activeOrganization) => {
+        const { organizations, services } = accessData;
+        const activeOrganizationBlob = (activeOrganization)
+            ? accessData.organizations.find((org) => (org.id === activeOrganization))
+            : undefined;
+        const inactiveOrganizations = (organizations.length > 1)
+            ? organizations.filter((o) => (o.id !== activeOrganization))
+            : [];
+        const servicesByOrganization = (services && activeOrganizationBlob)
+            ? services.filter((s) => (activeOrganizationBlob.services.includes(s.id)))
+            : [];
+        const activeServiceBlob = (servicesByOrganization.length > 1)
+            ? services.find((s) => (window.location.href.includes(s.url)))
+            : undefined;
+        let dropdownToggleColor = ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR;
+        let activeFirstChar = '';
+        if (activeOrganizationBlob && activeOrganizationBlob.hasOwnProperty('name')) {
+            dropdownToggleColor = string2HexCode(activeOrganizationBlob.name);
+            activeFirstChar = this.pullFirstChar(activeOrganizationBlob.name);
+        }
+        this.setState({
+            servicesByOrganization,
+            activeServiceBlob,
+            inactiveOrganizations,
+            activeOrganizationBlob,
+            dropdownToggleColor,
+            activeFirstChar
+        });
+    };
+    changeStory = (story) => {
+        const { onStoryChange } = this.props;
+        if (typeof onStoryChange === 'function') {
+            onStoryChange(story);
+            this.setState({ showStoriesDropdown: false });
+        }
+    };
+    toggleAccountDropdown = (toggle, newId = '') => {
+        const { onOrganizationChange } = this.props;
+        if (toggle) {
+            this.setState({ showAccountDropdown: true });
+        }
+        else {
+            this.setState({ showAccountDropdown: false });
+            // Propagate handler if supplied (more useful in react / redux flow)
+            if (newId && onOrganizationChange) {
+                onOrganizationChange(newId);
+            }
+            // V1 Default behavior - redirect to hub on org change
+            if (newId && !onOrganizationChange) {
+                window.location.replace(`${this.getHomeUrl()}?organization_id=${newId}`);
+            }
+        }
+    };
+    getHomeUrl = () => {
+        const { location: { hostname, host } } = window;
+        if (hostname === 'localhost') {
+            return 'http://localhost:3036';
+        }
+        else if (host.includes('.staging.')) {
+            return 'https://launchpad.staging.imposium.com';
+        }
+        else {
+            return 'https://launchpad.imposium.com';
+        }
+    };
+    doLogout = () => {
+        this.setState({ showAccountDropdown: false });
+        this.props.logout();
+    };
+    pullFirstChar = (s) => {
+        return (s) ? s.substring(0, 1) : '';
+    };
+    renderDropdownChevron = (toggle) => {
+        return (toggle) ? ImposiumHeader.UP : ImposiumHeader.DOWN;
+    };
+    renderServiceAnchor = (s, activeOrganization, activeStory) => (React.createElement("div", { className: 'anchor-wrapper', key: s.id },
+        React.createElement("a", { href: parameterizeServiceUrl(activeOrganization, activeStory, s.url, s.id) },
+            React.createElement("div", { className: 'icon-fixed' },
+                React.createElement(ServiceIcon, { iconName: s.icon, color: `#${s.color}` })),
+            s.name)));
+    render() {
+        const { email, accessData, activeOrganization, activeStory, hideStoryPicker } = this.props;
+        const { showAccountDropdown, servicesByOrganization, activeServiceBlob, showStoriesDropdown, inactiveOrganizations, activeOrganizationBlob, activeFirstChar, dropdownToggleColor, showServiceDropdown } = this.state;
+        let currentStory;
+        let headerBorder;
+        let activeService;
+        let serviceDropdownColor = {};
+        let serviceAnchors;
+        let privateAnchors;
+        let accountDropdownToggle;
+        let activePanel;
+        let storyToggle;
+        let orgPicker;
+        let storyMenuInner;
+        let serviceDropdownToggle;
+        let serviceDropdownMenu;
+        if (accessData) {
+            activeService = servicesByOrganization.find((s) => (window.location.href.includes(s.url)));
+            if (activeService) {
+                serviceDropdownColor = { color: `#${activeService.color}` };
+                headerBorder = { borderBottom: `4px solid #${activeService.color}` };
+            }
+            serviceAnchors = servicesByOrganization
+                .filter((s) => (!s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) === -1))
+                .map((s) => this.renderServiceAnchor(s, activeOrganization, activeStory));
+            privateAnchors = servicesByOrganization
+                .filter((s) => (!s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) > -1))
+                .map((s) => this.renderServiceAnchor(s, activeOrganization, activeStory));
+            serviceDropdownMenu = (React.createElement("div", { className: 'service-menu' },
+                React.createElement("section", { className: 'service-menu-section' },
+                    React.createElement("div", { className: 'service-menu-heading' }, ImposiumHeader.SERVICE_MESH_ALIAS),
+                    React.createElement("div", { className: 'service-menu-anchors' }, serviceAnchors)),
+                (privateAnchors.length > 0) && (React.createElement("section", { className: 'service-menu-section' },
+                    React.createElement("div", { className: 'service-menu-heading' }, ImposiumHeader.PRIVATE_HEADER),
+                    React.createElement("div", { className: 'service-menu-anchors' }, privateAnchors))),
+                React.createElement("section", { className: 'service-menu-section' },
+                    React.createElement("div", { className: 'service-menu-heading' }, ImposiumHeader.DOCS_HEADER),
+                    React.createElement("div", { className: 'service-menu-anchors' },
+                        React.createElement("div", { className: 'anchor-wrapper doc' },
+                            React.createElement("a", { target: '__blank', href: ImposiumHeader.API_DOCS_LINK },
+                                React.createElement("div", { className: 'icon-fixed' },
+                                    React.createElement(ServiceIcon, { iconName: 'FaCogs' })),
+                                ImposiumHeader.API_DOCS_LINK_COPY)),
+                        React.createElement("div", { className: 'anchor-wrapper doc' },
+                            React.createElement("a", { target: '__blank', href: ImposiumHeader.SDK_DOCS_LINK },
+                                React.createElement("div", { className: 'icon-fixed' },
+                                    React.createElement(ServiceIcon, { iconName: 'FaJsSquare' })),
+                                ImposiumHeader.SDK_DOCS_LINK_COPY))))));
+            serviceDropdownToggle = (React.createElement("button", { id: 'btn-toggle-services', className: 'btn-toggle-services', style: serviceDropdownColor, ref: this.serviceToggleRef, onClick: () => this.setState({ showServiceDropdown: !this.state.showServiceDropdown }) },
+                React.createElement("span", null, (activeServiceBlob) ? activeServiceBlob.name : ImposiumHeader.SERVICE_MESH_ALIAS),
+                this.renderDropdownChevron(showServiceDropdown)));
+            accountDropdownToggle = (React.createElement("button", { id: 'btn-toggle-orgs', className: 'btn-toggle-orgs', ref: this.orgsToggleRef, style: { backgroundColor: dropdownToggleColor }, onClick: () => this.toggleAccountDropdown(!showAccountDropdown) }, activeFirstChar));
+        }
+        if (accessData && activeOrganizationBlob) {
+            activePanel = (React.createElement("div", { className: 'orgs-menu-active-org' },
+                React.createElement("div", { className: 'active-first-char', style: { backgroundColor: dropdownToggleColor } }, this.pullFirstChar(activeOrganizationBlob.name)),
+                React.createElement("div", null, activeOrganizationBlob.name)));
+        }
+        if (accessData && activeOrganizationBlob && !hideStoryPicker) {
+            currentStory = activeOrganizationBlob.stories.find((s) => (s.id === activeStory));
+            storyToggle = (React.createElement("button", { id: 'btn-toggle-story', className: 'btn-toggle-story', ref: this.storyToggleRef, onClick: () => { this.setState({ showStoriesDropdown: !this.state.showStoriesDropdown }); } },
+                React.createElement("div", { className: 'story-name' }, (currentStory) ? currentStory.name : ImposiumHeader.DEFAULT_SERVICE_TOGGLE_COPY),
+                this.renderDropdownChevron(showStoriesDropdown)));
+            if (activeOrganizationBlob.stories.length === 0) {
+                storyMenuInner = (React.createElement("div", { className: 'no-stories-dialog' }, ImposiumHeader.NO_STORIES_COPY));
+            }
+            else {
+                storyMenuInner = activeOrganizationBlob.stories.map((s) => (React.createElement("button", { key: s.id, className: 'btn-change-story', onClick: () => this.changeStory(s) }, s.name)));
+            }
+        }
+        if (showAccountDropdown) {
+            orgPicker = (React.createElement("div", { className: 'orgs-menu-org-picker' }, inactiveOrganizations.map((o) => (React.createElement("button", { key: o.name, className: 'menu-item inactive-org-button', onClick: () => this.toggleAccountDropdown(false, o.id) },
+                React.createElement("div", { className: 'inactive-first-char', style: { backgroundColor: string2HexCode(o.name) } }, this.pullFirstChar(o.name)),
+                o.name)))));
+        }
+        return (React.createElement("nav", { id: 'imposium-header', className: 'imposium-header', style: headerBorder },
+            React.createElement("div", { className: 'inner-content' },
+                React.createElement("span", { className: 'inner-left' },
+                    React.createElement("a", { className: 'title', href: parameterizeServiceUrl(activeOrganization, activeStory, this.getHomeUrl()) },
+                        React.createElement("div", { className: 'logo' }),
+                        React.createElement("h1", { className: 'heading' }, ImposiumHeader.DEFAULT_TITLE)),
+                    serviceDropdownToggle),
+                React.createElement("span", { className: 'inner-right' },
+                    storyToggle,
+                    accountDropdownToggle,
+                    React.createElement("a", { href: 'https://support.imposium.com', target: '_blank' },
+                        React.createElement("div", { className: 'btn-help' }, ICON_HELP)))),
+            React.createElement(ImposiumDropdown, { key: 'services-dropdown', position: 'bottomleft', show: showServiceDropdown, toggleRef: this.serviceToggleRef, onOutsideClick: () => this.setState({ showServiceDropdown: false }) }, serviceDropdownMenu),
+            React.createElement(ImposiumDropdown, { key: 'stories-dropdown', position: 'bottomright', show: showStoriesDropdown, toggleRef: this.storyToggleRef, onOutsideClick: () => this.setState({ showStoriesDropdown: false }) },
+                React.createElement("div", { className: 'stories-menu' }, storyMenuInner)),
+            React.createElement(ImposiumDropdown, { key: 'org-dropdown', position: 'bottomright', show: showAccountDropdown, toggleRef: this.orgsToggleRef, onOutsideClick: () => this.toggleAccountDropdown(false) },
+                React.createElement("div", { className: 'orgs-menu' },
+                    activePanel,
+                    orgPicker,
+                    React.createElement("div", { className: 'orgs-menu-footer' },
+                        React.createElement("div", { className: 'email' }, email),
+                        React.createElement("button", { className: 'btn-logout', onClick: () => this.doLogout() }, ImposiumHeader.LOGOUT_COPY))))));
+    }
+}
+//# sourceMappingURL=Header.js.map

package/dist/esm/components/header/Header.js.map

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

package/dist/esm/components/list-field/ListField.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface IListFieldProps {
+    buttons?: any;
+    disabled?: boolean;
+    label?: string;
+    options: any;
+    placeholder?: string;
+    tooltip?: IToolTipConfig | string;
+    tooltipAdd?: IToolTipConfig | string;
+    width?: string | number;
+    onChange(e: any): void;
+    onError(e: any): void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    info?: string;
+    labelPosition?: string;
+}
+interface IListFieldState {
+    textInputValue: string;
+}
+declare class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
+    private inputRef;
+    private submitHandler;
+    constructor(props: any);
+    private deleteOption;
+    componentWillUnmount(): void;
+    private inputBlur;
+    private inputChanged;
+    private inputFocus;
+    private submitOption;
+    render(): JSX.Element;
+    renderButtons(): any[];
+}
+export default ListField;

package/dist/esm/components/list-field/ListField.js

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import hotkeys from 'hotkeys-js';
+import Button from '../button/Button';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import ControlledList from '../controlled-list/ControlledList';
+import { filterHotkeys } from '../../Util';
+import { ICON_PLUS } from '../../constants/icons';
+class ListField extends React.PureComponent {
+    inputRef;
+    submitHandler;
+    constructor(props) {
+        super(props);
+        this.state = {
+            textInputValue: ''
+        };
+        this.inputRef = React.createRef();
+        hotkeys.filter = (e) => filterHotkeys(e);
+        this.submitHandler = () => this.submitOption();
+    }
+    deleteOption(index) {
+        const items = [...this.props.options];
+        items.splice(index, 1);
+        this.props.onChange(items);
+    }
+    componentWillUnmount() {
+        hotkeys.unbind('enter', this.submitHandler);
+    }
+    inputBlur(e) {
+        hotkeys.unbind('enter', this.submitHandler);
+        if (this.props.onBlur) {
+            this.props.onBlur();
+        }
+    }
+    inputChanged(e) {
+        this.setState({
+            textInputValue: e.target.value
+        });
+    }
+    inputFocus(e) {
+        hotkeys('enter', this.submitHandler);
+        if (this.props.onFocus) {
+            this.props.onFocus();
+        }
+    }
+    submitOption() {
+        const { textInputValue } = this.state;
+        const { onError } = this.props;
+        if (textInputValue !== '') {
+            let items;
+            if (this.props.options) {
+                items = [...this.props.options];
+            }
+            else {
+                items = [];
+            }
+            if (items.indexOf(textInputValue) === -1) {
+                items.push(textInputValue);
+                this.props.onChange(items);
+                this.setState({
+                    textInputValue: ''
+                }, () => {
+                    const input = this.inputRef.current;
+                    if (input) {
+                        input.focus();
+                    }
+                });
+            }
+            else {
+                if (onError) {
+                    this.props.onError(`"${textInputValue}" already exists in the list.`);
+                }
+            }
+        }
+        else {
+            if (onError) {
+                this.props.onError(`Can not add an empty item to the list`);
+            }
+        }
+    }
+    render() {
+        const { label, options, placeholder, disabled, width, tooltip, tooltipAdd, info, labelPosition } = this.props;
+        const { textInputValue } = this.state;
+        return React.createElement(FieldWrapper, { customClass: 'list-field', label: label, tooltip: tooltip, buttons: this.renderButtons(), info: info, labelPosition: labelPosition, width: width },
+            React.createElement("input", { type: 'text', placeholder: placeholder, value: textInputValue, ref: this.inputRef, disabled: disabled, onChange: (e) => this.inputChanged(e), onFocus: (e) => this.inputFocus(e), onBlur: (e) => this.inputBlur(e) }),
+            React.createElement(ControlledList, { items: options, removable: true, onRemove: (i) => this.deleteOption(i) }));
+    }
+    renderButtons() {
+        const { buttons, tooltipAdd } = this.props;
+        const buttonArray = (buttons) ? [...buttons] : [];
+        buttonArray.push(React.createElement(Button, { key: 'btn-submit', style: 'subtle', tooltip: tooltipAdd, color: 'primary', onClick: this.submitHandler }, ICON_PLUS));
+        return buttonArray;
+    }
+}
+export default ListField;
+//# sourceMappingURL=ListField.js.map

package/dist/esm/components/list-field/ListField.js.map

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

package/dist/esm/components/list-field/ListField.stories.d.ts

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

package/dist/esm/components/list-field/ListField.stories.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import ListField from './ListField';
+import { action } from '@storybook/addon-actions';
+export default {
+    title: 'ListFIeld',
+    component: ListField
+};
+export const defaultListFIeld = () => (React.createElement("div", { style: { width: '25%' } },
+    React.createElement(ListField, { options: ['Option1', 'Option2'], label: 'ListField', tooltip: 'TOOLTIP', tooltipAdd: 'TOOLTIP ADD', onError: action('ERROR'), onChange: action('CHANGE') })));
+//# sourceMappingURL=ListField.stories.js.map

package/dist/esm/components/list-field/ListField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListField.stories.js","sourceRoot":"","sources":["../../../../src/components/list-field/ListField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,eAAe;IACX,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,SAAS;CACvB,CAAC;AAqBF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAClC,6BAAK,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAC;IACtB,oBAAC,SAAS,IACN,OAAO,EAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EACjC,KAAK,EAAI,WAAW,EACpB,OAAO,EAAI,SAAS,EACpB,UAAU,EAAI,aAAa,EAC3B,OAAO,EAAI,MAAM,CAAC,OAAO,CAAC,EAC1B,QAAQ,EAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CACjC,CACT,CAAC"}

package/dist/esm/components/log-viewer/LogViewer.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IImposiumAPI } from '../../services/API';
+interface ILogViewerProps {
+    jobId: string;
+    onError?(e: string): void;
+    api: IImposiumAPI;
+}
+interface ILogViewerState {
+    loading: boolean;
+    log: string;
+}
+declare class LogViewer extends React.PureComponent<ILogViewerProps, ILogViewerState> {
+    private videoNode;
+    private ansi_up;
+    constructor(props: any);
+    private getJobLogs;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    render(): JSX.Element;
+}
+export default LogViewer;

package/dist/esm/components/log-viewer/LogViewer.js

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import AnsiUp from 'ansi_up';
+import { previewer as copy } from '../../constants/copy';
+class LogViewer extends React.PureComponent {
+    videoNode;
+    ansi_up;
+    constructor(props) {
+        super(props);
+        this.state = {
+            loading: true,
+            log: ''
+        };
+        this.ansi_up = new AnsiUp();
+        this.ansi_up.use_classes = true;
+    }
+    getJobLogs() {
+        const { api, onError, jobId } = this.props;
+        api.getJobLogUrl(this.props.jobId).then((resLogUrl) => {
+            const jobUrl = resLogUrl.signed_url;
+            api.getJobLog(jobUrl).then((log) => {
+                this.setState({
+                    loading: false,
+                    log
+                });
+            }).catch((e) => {
+                if (onError) {
+                    onError(copy.logDownloadError.replace('[jobId]', jobId));
+                }
+                this.setState({
+                    loading: false,
+                    log: ''
+                });
+            });
+        }).catch((e) => {
+            if (onError) {
+                onError(copy.logURLError.replace('[jobId]', this.props.jobId));
+            }
+            this.setState({
+                loading: false,
+                log: ''
+            });
+        });
+    }
+    componentDidMount() {
+        if (this.props.jobId) {
+            this.getJobLogs();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.jobId !== this.props.jobId && this.props.jobId) {
+            this.getJobLogs();
+        }
+    }
+    render() {
+        const logHTML = this.ansi_up.ansi_to_html(this.state.log);
+        return (React.createElement("div", { className: 'log-viewer' },
+            React.createElement("div", { className: 'log-html', dangerouslySetInnerHTML: { __html: logHTML } })));
+    }
+}
+export default LogViewer;
+//# sourceMappingURL=LogViewer.js.map

package/dist/esm/components/log-viewer/LogViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewer.js","sourceRoot":"","sources":["../../../../src/components/log-viewer/LogViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,SAAS,CAAC;AAE7B,OAAO,EAAE,SAAS,IAAI,IAAI,EAAC,MAAM,sBAAsB,CAAC;AAcxD,MAAM,SAAU,SAAQ,KAAK,CAAC,aAA+C;IAEjE,SAAS,CAAO;IAChB,OAAO,CAAO;IAEtB,YAAY,KAAK;QAEb,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG;YACT,OAAO,EAAG,IAAI;YACd,GAAG,EAAE,EAAE;SACV,CAAC;QAEF,IAAI,CAAC,OAAO,GAAG,IAAI,MAAM,EAAE,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IACpC,CAAC;IAEO,UAAU;QAEd,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE3C,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE;YAElD,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC;YAEpC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBAE/B,IAAI,CAAC,QAAQ,CAAC;oBACV,OAAO,EAAE,KAAK;oBACd,GAAG;iBACN,CAAC,CAAC;YAEP,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;gBACX,IAAI,OAAO,EAAE;oBACT,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;iBAC5D;gBACD,IAAI,CAAC,QAAQ,CAAC;oBACV,OAAO,EAAE,KAAK;oBACd,GAAG,EAAE,EAAE;iBACV,CAAC,CAAC;YACP,CAAC,CAAC,CAAC;QAEP,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;YACX,IAAI,OAAO,EAAE;gBACT,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;aAClE;YACD,IAAI,CAAC,QAAQ,CAAC;gBACV,OAAO,EAAE,KAAK;gBACd,GAAG,EAAE,EAAE;aACV,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC;IAEM,iBAAiB;QAEpB,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YAClB,IAAI,CAAC,UAAU,EAAE,CAAC;SACrB;IACL,CAAC;IAEM,kBAAkB,CAAC,SAAS;QAE/B,IAAI,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YAC1D,IAAI,CAAC,UAAU,EAAE,CAAC;SACrB;IACL,CAAC;IACM,MAAM;QAET,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE1D,OAAO,CACH,6BAAK,SAAS,EAAG,YAAY;YACzB,6BAAK,SAAS,EAAG,UAAU,EAAC,uBAAuB,EAAE,EAAC,MAAM,EAAE,OAAO,EAAC,GAAQ,CAC5E,CACT,CAAC;IACN,CAAC;CACJ;AAED,eAAe,SAAS,CAAC"}

package/dist/esm/components/media-variable-field/MediaVariableField.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+interface IMediaVariableFieldProps {
+    value: any;
+    type: string;
+    onChange(c: any): void;
+}
+interface IMediaVariableFieldState {
+    processing: boolean;
+    processedFile: any;
+}
+declare class MediaVariableField extends React.PureComponent<IMediaVariableFieldProps, IMediaVariableFieldState> {
+    private input;
+    private evtHandlers;
+    constructor(props: any);
+    private clearSelection;
+    private fileUploaded;
+    componentDidUpdate(prevProps: any): void;
+    componentDidMount(): void;
+    private checkFile;
+    private renderFields;
+    private getInputFilter;
+    onClick(): void;
+    private renderClearButton;
+    private onFileDrop;
+    render(): JSX.Element;
+}
+export default MediaVariableField;