@imposium-hub/components 1.46.2 → 1.47.0

package/src/components/modal/Modal.tsx

@@ -12,6 +12,7 @@ interface IModalProps {
 
 class Modal extends React.PureComponent<IModalProps> {
     private evtHandlers: any;
+
     private closeStyles = {
         position: 'absolute',
         right: '0px',
@@ -37,11 +38,20 @@ class Modal extends React.PureComponent<IModalProps> {
 
         if (isOpen) {
             return (
-                <div className={`modal`} style={wrapperStyle}>
-                    <div className='modal-bg' onClick={this.evtHandlers.onClose} />
-                    <div className='modal-container' style={style}>
+                <div
+                    className={`modal`}
+                    style={wrapperStyle}>
+                    <div
+                        className='modal-bg'
+                        onClick={this.evtHandlers.onClose}
+                    />
+                    <div
+                        className='modal-container'
+                        style={style}>
                         <div className='modal-content'>{this.props.children}</div>
-                        <Button onClick={this.evtHandlers.onClose} customStyles={this.closeStyles}>
+                        <Button
+                            onClick={this.evtHandlers.onClose}
+                            customStyles={this.closeStyles}>
                             {ICON_TIMES}
                         </Button>
                     </div>

package/src/components/no-access/NoAccess.tsx

@@ -22,9 +22,15 @@ const NoAccess: React.FC<INoAccessProps> = (p: INoAccessProps) => {
     return (
         <div className='no-access'>
             {isRequest ? (
-                <FontAwesomeIcon icon={faUserLock} size='6x' />
+                <FontAwesomeIcon
+                    icon={faUserLock}
+                    size='6x'
+                />
             ) : (
-                <FontAwesomeIcon icon={faExclamationTriangle} size='6x' />
+                <FontAwesomeIcon
+                    icon={faExclamationTriangle}
+                    size='6x'
+                />
             )}
 
             <div className='no-access-copy'>

package/src/components/players/AudioPlayer.tsx

@@ -12,7 +12,9 @@ interface IImagePlayerProps {
 
 class ImagePlayer extends React.PureComponent<IImagePlayerProps, undefined> {
     private audioNode: any;
+
     private width = 1280;
+
     private height = 720;
 
     constructor(props) {
@@ -34,8 +36,14 @@ class ImagePlayer extends React.PureComponent<IImagePlayerProps, undefined> {
         if (active !== false) {
             return (
                 <div className='media-player'>
-                    <div className='inner-viewer' style={this.getImageStyle()}>
-                        <audio controls src={url} ref={this.audioNode} />
+                    <div
+                        className='inner-viewer'
+                        style={this.getImageStyle()}>
+                        <audio
+                            controls
+                            src={url}
+                            ref={this.audioNode}
+                        />
                     </div>
                 </div>
             );

package/src/components/players/ImagePlayer.tsx

@@ -62,8 +62,14 @@ class ImagePlayer extends React.PureComponent<IImagePlayerProps, IImagePlayerSta
         if (active !== false) {
             return (
                 <div className='media-player'>
-                    <div className='inner-viewer' style={this.getImageStyle()}>
-                        <img onLoad={(e) => this.metadataLoaded(e)} src={url} ref={this.imgNode} />
+                    <div
+                        className='inner-viewer'
+                        style={this.getImageStyle()}>
+                        <img
+                            onLoad={(e) => this.metadataLoaded(e)}
+                            src={url}
+                            ref={this.imgNode}
+                        />
                     </div>
                 </div>
             );

package/src/components/players/ImagePreview.tsx

@@ -17,7 +17,9 @@ interface IImagePreviewState {
 
 class ImagePreview extends React.PureComponent<IImagePreviewProps, IImagePreviewState> {
     private imageNode: any = null;
+
     private evtHandlers: any;
+
     constructor(props) {
         super(props);
         this.imageNode = React.createRef();
@@ -42,7 +44,9 @@ class ImagePreview extends React.PureComponent<IImagePreviewProps, IImagePreview
         if (showMedia) {
             return (
                 <Portal id='portal-root'>
-                    <div style={{ ...style }} className={'close-icon-preview'}>
+                    <div
+                        style={{ ...style }}
+                        className={'close-icon-preview'}>
                         <Button
                             key='btn-filter'
                             onClick={this.evtHandlers.onClose}

package/src/components/players/ImageSequencePlayer.tsx

@@ -57,7 +57,9 @@ class ImageSequencePlayer extends React.PureComponent<
         if (active !== false) {
             return (
                 <div className='mediap-player'>
-                    <div className='inner-viewer' style={this.getImageStyle()}></div>
+                    <div
+                        className='inner-viewer'
+                        style={this.getImageStyle()}></div>
                 </div>
             );
         } else {

package/src/components/players/TemplatePlayer.tsx

@@ -13,7 +13,9 @@ interface ITemplatePlayerProps {
 
 class TemplatePlayer extends React.PureComponent<ITemplatePlayerProps, undefined> {
     private audioNode: any;
+
     private width = 1280;
+
     private height = 720;
 
     constructor(props) {
@@ -35,7 +37,9 @@ class TemplatePlayer extends React.PureComponent<ITemplatePlayerProps, undefined
         if (active !== false) {
             return (
                 <div className='media-player'>
-                    <div className='inner-viewer' style={this.getImageStyle()}>
+                    <div
+                        className='inner-viewer'
+                        style={this.getImageStyle()}>
                         <PreviewNotAvailable />
                     </div>
                 </div>

package/src/components/players/VideoPlayer.tsx

@@ -51,6 +51,7 @@ export const getPlayerStyle = (
 
 class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoPlayerState> {
     private videoNode: any;
+
     public static SCALE_MODES = {
         MANUAL: 'manual',
         AUTOMATIC: 'automatic'
@@ -114,7 +115,9 @@ class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoPlayerSta
         if (active !== false) {
             return (
                 <div className='media-player'>
-                    <div className='inner-viewer' style={this.getVideoStyle()}>
+                    <div
+                        className='inner-viewer'
+                        style={this.getVideoStyle()}>
                         <video
                             controls={controls}
                             onLoadedMetadata={(e) => this.metadataLoaded(e)}

package/src/components/players/VideoPreview.tsx

@@ -14,7 +14,9 @@ interface IVideoPreviewProps {
 
 class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
     private videoNode: any = null;
+
     private evtHandlers: any;
+
     constructor(props) {
         super(props);
         this.videoNode = React.createRef();
@@ -34,7 +36,9 @@ class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
         if (showMedia) {
             return (
                 <Portal id='portal-root'>
-                    <div style={{ ...style }} className={'close-icon-preview'}>
+                    <div
+                        style={{ ...style }}
+                        className={'close-icon-preview'}>
                         <Button
                             key='btn-filter'
                             onClick={this.evtHandlers.onClose}

package/src/components/publish-wizard/PublishWizard.tsx

@@ -97,7 +97,9 @@ interface IBigLinkProps {
 
 class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWizardState> {
     public emailWorkflow: any;
+
     private readonly hiddenFileInputRef: any;
+
     constructor(props) {
         super(props);
         this.state = {
@@ -613,7 +615,10 @@ export const WizardError = (props: { title: string; description: string }) => {
 
 export const BigLink: React.FC<IBigLinkProps> = (p: IBigLinkProps) => {
     return (
-        <a className='big-link' target='_blank' href={p.link}>
+        <a
+            className='big-link'
+            target='_blank'
+            href={p.link}>
             <h1>{p.label}</h1>
         </a>
     );

package/src/components/publish-wizard/publish/APIIntegration.tsx

@@ -13,7 +13,13 @@ class APIIntegration extends React.PureComponent {
                 <p>{copy.integration.docParagraph}</p>
                 <div className='link-wrapper'>
                     {documentationLinks?.map((link) => {
-                        return <BigLink key={link.key} label={link.label} link={link.link} />;
+                        return (
+                            <BigLink
+                                key={link.key}
+                                label={link.label}
+                                link={link.link}
+                            />
+                        );
                     })}
                 </div>
             </div>

package/src/components/publish-wizard/publish/EmailWorkflow.tsx

@@ -68,7 +68,9 @@ interface IEmailWorkflowState {
 
 class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkflowState> {
     private readonly hiddenFileInputRef: any;
+
     private static readonly PROGRESS_MAX_VALUE: number = 100;
+
     private static readonly CSV_EXPORT_CONFIG: any = {
         fieldSeparator: ',',
         quoteStrings: '"',
@@ -455,7 +457,9 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                                     const rClass = !v.optional ? 'required' : '';
 
                                     return (
-                                        <tr key={`var-${v.id}`} className={`${rClass}`}>
+                                        <tr
+                                            key={`var-${v.id}`}
+                                            className={`${rClass}`}>
                                             <td className='variable'>
                                                 <p>
                                                     {v.name}{' '}
@@ -522,7 +526,10 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
 
         const reRenderLabel = (
             <div className={'progress-bar'}>
-                <progress max={EmailWorkflow.PROGRESS_MAX_VALUE} value={renders[selectedBatchId]} />
+                <progress
+                    max={EmailWorkflow.PROGRESS_MAX_VALUE}
+                    value={renders[selectedBatchId]}
+                />
             </div>
         );
 
@@ -535,7 +542,10 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                 </p>
 
                 {isExport && uploadComplete && !renderedBatch ? (
-                    <BigButton label={reRenderLabel} disabled={isExport} />
+                    <BigButton
+                        label={reRenderLabel}
+                        disabled={isExport}
+                    />
                 ) : (
                     <BigButton
                         label={downloadCsvLabel}

package/src/components/publish-wizard/publish/WebpageHosted.tsx

@@ -126,7 +126,13 @@ class WebpageHosted extends React.PureComponent<IWebpageHostedProps> {
                 <p>{copy.integration.docParagraph}</p>
                 <div className='link-wrapper'>
                     {documentationLinks?.map((link) => {
-                        return <BigLink key={link.key} label={link.label} link={link.link} />;
+                        return (
+                            <BigLink
+                                key={link.key}
+                                label={link.label}
+                                link={link.link}
+                            />
+                        );
                     })}
                 </div>
             </div>

package/src/components/section/Section.stories.tsx

@@ -37,8 +37,13 @@ export const defaultSection = () => {
     );
 
     return (
-        <Section title='Section Title' buttons={menu}>
-            <Card title='Card' open={true} collapsable={false}>
+        <Section
+            title='Section Title'
+            buttons={menu}>
+            <Card
+                title='Card'
+                open={true}
+                collapsable={false}>
                 <TextField
                     label={'TextField'}
                     tooltip={'TOOLTIP'}
@@ -55,7 +60,10 @@ export const defaultSection = () => {
                     onChange={action('CLICKED')}
                 />
             </Card>
-            <Card title='Card' open={true} collapsable={false}>
+            <Card
+                title='Card'
+                open={true}
+                collapsable={false}>
                 <TextField
                     label={'TextField'}
                     tooltip={'TOOLTIP'}

package/src/components/select-field/SelectField.tsx

@@ -80,7 +80,9 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
 
         const selectValue = value === null || value === undefined ? '' : value;
         const caret = (
-            <div key='caret' className='caret'>
+            <div
+                key='caret'
+                className='caret'>
                 {ICON_CARET_DOWN}
             </div>
         );
@@ -117,7 +119,10 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
                 const optionValue = option.value !== undefined ? option.value : option;
                 const optionLabel = option.label !== undefined ? option.label : option;
                 return (
-                    <option disabled={disabled} key={`option-${optionValue}`} value={optionValue}>
+                    <option
+                        disabled={disabled}
+                        key={`option-${optionValue}`}
+                        value={optionValue}>
                         {optionLabel}
                     </option>
                 );

package/src/components/service-icon/ServiceIcon.tsx

@@ -23,29 +23,89 @@ interface IServiceIconProps {
 const ServiceIcon: React.FC<IServiceIconProps> = (p: IServiceIconProps) => {
     switch (p.iconName) {
         case 'FaFilm':
-            return <FontAwesomeIcon icon={faFilm} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faFilm}
+                    color={p.color}
+                />
+            );
         case 'FaRegFileVideo':
-            return <FontAwesomeIcon icon={faFileVideo} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faFileVideo}
+                    color={p.color}
+                />
+            );
         case 'FaChartBar':
-            return <FontAwesomeIcon icon={faChartBar} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faChartBar}
+                    color={p.color}
+                />
+            );
         case 'FaGavel':
-            return <FontAwesomeIcon icon={faGavel} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faGavel}
+                    color={p.color}
+                />
+            );
         case 'FaDatabase':
-            return <FontAwesomeIcon icon={faDatabase} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faDatabase}
+                    color={p.color}
+                />
+            );
         case 'FaVideo':
-            return <FontAwesomeIcon icon={faVideo} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faVideo}
+                    color={p.color}
+                />
+            );
         case 'FaUsersCog':
-            return <FontAwesomeIcon icon={faUsersCog} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faUsersCog}
+                    color={p.color}
+                />
+            );
         case 'FaPlayCircle':
-            return <FontAwesomeIcon icon={faPlayCircle} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faPlayCircle}
+                    color={p.color}
+                />
+            );
         case 'FaUserLock':
-            return <FontAwesomeIcon icon={faUserLock} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faUserLock}
+                    color={p.color}
+                />
+            );
         case 'FaSiteMap':
-            return <FontAwesomeIcon icon={faSitemap} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faSitemap}
+                    color={p.color}
+                />
+            );
         case 'FaFileAlt':
-            return <FontAwesomeIcon icon={faFileAlt} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faFileAlt}
+                    color={p.color}
+                />
+            );
         case 'FaChartArea':
-            return <FontAwesomeIcon icon={faChartArea} color={p.color} />;
+            return (
+                <FontAwesomeIcon
+                    icon={faChartArea}
+                    color={p.color}
+                />
+            );
         case 'FaCogs':
             return <FontAwesomeIcon icon={faCogs} />;
         case 'FaJsSquare':

package/src/components/shortcut-menu/ShortcutMenu.tsx

@@ -20,7 +20,9 @@ export const ShortcutMenu: React.FC<IShortcutMenu> = ({ shortcutCopyMap, heading
             <table>
                 <tbody>
                     {Object.keys(shortcutCopyMap).map((key: string) => (
-                        <tr className='shortcut' key={key}>
+                        <tr
+                            className='shortcut'
+                            key={key}>
                             <td className='hotkey-cell'>{key}</td>
                             <td className='shortcut-desc'>{shortcutCopyMap[key]}</td>
                         </tr>

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -52,8 +52,11 @@ interface IStoryPreviewerState {
 
 class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPreviewerState> {
     private timer: Timer;
+
     private evtHandlers: any;
+
     private TIMEOUT: string = '02:00';
+
     constructor(props) {
         super(props);
 
@@ -331,7 +334,9 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                         break;
                     case VARIABLE_TYPES.IMAGE:
                         fields.push(
-                            <FieldWrapper label={inv.name} key={inv.id}>
+                            <FieldWrapper
+                                label={inv.name}
+                                key={inv.id}>
                                 <MediaVariableField
                                     value={inventory[inv.id]}
                                     type={inv.type}
@@ -342,7 +347,9 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                         break;
                     case VARIABLE_TYPES.VIDEO:
                         fields.push(
-                            <FieldWrapper label={inv.name} key={inv.id}>
+                            <FieldWrapper
+                                label={inv.name}
+                                key={inv.id}>
                                 <MediaVariableField
                                     type={inv.type}
                                     value={inventory[inv.id]}
@@ -353,7 +360,9 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                         break;
                     case VARIABLE_TYPES.AUDIO:
                         fields.push(
-                            <FieldWrapper label={inv.name} key={inv.id}>
+                            <FieldWrapper
+                                label={inv.name}
+                                key={inv.id}>
                                 <MediaVariableField
                                     type={inv.type}
                                     value={inventory[inv.id]}
@@ -617,7 +626,12 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
 
             if (type === OUTPUT_TYPES.IMAGE) {
                 url = experience.output.images[key];
-                player = <ImagePlayer url={url} active={true} />;
+                player = (
+                    <ImagePlayer
+                        url={url}
+                        active={true}
+                    />
+                );
             } else if (type === OUTPUT_TYPES.VIDEO) {
                 const output: any = experience.output.videos[key];
                 const mWidth = output.width !== undefined ? parseInt(output.width, 10) : null;
@@ -636,13 +650,19 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             } else if (type === OUTPUT_TYPES.LOG) {
                 player = (
                     <div className='log'>
-                        <LogViewer api={api} onError={onError} jobId={key} />
+                        <LogViewer
+                            api={api}
+                            onError={onError}
+                            jobId={key}
+                        />
                     </div>
                 );
             }
 
             return (
-                <ReactResizeDetector handleWidth handleHeight>
+                <ReactResizeDetector
+                    handleWidth
+                    handleHeight>
                     {player}
                 </ReactResizeDetector>
             );
@@ -661,7 +681,11 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         const { rendering, experience, activeOutput } = this.state;
         const renderCopy = experience ? copy.btnReRender : copy.btnRender;
         const btnRender = !rendering ? (
-            <Button size='large' onClick={this.evtHandlers.createExp} color='primary' style='bold'>
+            <Button
+                size='large'
+                onClick={this.evtHandlers.createExp}
+                color='primary'
+                style='bold'>
                 {renderCopy}
             </Button>
         ) : null;

package/src/components/tabs/Tabs.stories.tsx

@@ -36,5 +36,11 @@ export const defaultTabs = () => {
         setActiveTab(i);
     };
 
-    return <Tabs activeTab={activeTab} onChange={(i) => handleTabChange(i)} options={tabs} />;
+    return (
+        <Tabs
+            activeTab={activeTab}
+            onChange={(i) => handleTabChange(i)}
+            options={tabs}
+        />
+    );
 };

package/src/components/tabs/Tabs.tsx

@@ -177,7 +177,10 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
         }
 
         const btnOpenMenu = (
-            <Button size='large' style='subtle' color={activeTabInMenu ? 'primary' : null}>
+            <Button
+                size='large'
+                style='subtle'
+                color={activeTabInMenu ? 'primary' : null}>
                 {ICON_BARS}
             </Button>
         );
@@ -204,7 +207,9 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
     public render() {
         return (
             <div className='tabs'>
-                <div ref={this.headerRef} className='tab-header'>
+                <div
+                    ref={this.headerRef}
+                    className='tab-header'>
                     {this.renderHeader()}
                 </div>
                 <div className='tab-content'>{this.renderContent()}</div>

package/src/components/text-field/TextField.stories.tsx

@@ -8,5 +8,10 @@ export default {
 };
 
 export const defaultTextField = () => (
-    <TextField label={'Label'} tooltip={'TOOLTIP'} value={''} onChange={(v) => action(v)} />
+    <TextField
+        label={'Label'}
+        tooltip={'TOOLTIP'}
+        value={''}
+        onChange={(v) => action(v)}
+    />
 );

package/src/components/text-field/TextField.tsx

@@ -449,7 +449,12 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         } else {
             inputProps.onChange = (e) => this.onChange(e);
 
-            return <input className={`${inputClass}`} {...inputProps} />;
+            return (
+                <input
+                    className={`${inputClass}`}
+                    {...inputProps}
+                />
+            );
         }
     }
 

package/src/components/toast-service/ToastService.tsx

@@ -16,7 +16,12 @@ export default class ToastService {
             style: 'solid',
             color: '#56B05E'
         },
-        renderIcon: () => <FontAwesomeIcon icon={faInfoCircle} color='#56B05E' />
+        renderIcon: () => (
+            <FontAwesomeIcon
+                icon={faInfoCircle}
+                color='#56B05E'
+            />
+        )
     };
 
     private static ERROR_STYLE: any = {
@@ -25,7 +30,12 @@ export default class ToastService {
             style: 'solid',
             color: '#AF1126'
         },
-        renderIcon: () => <FontAwesomeIcon icon={faExclamationTriangle} color='#AF1126' />
+        renderIcon: () => (
+            <FontAwesomeIcon
+                icon={faExclamationTriangle}
+                color='#AF1126'
+            />
+        )
     };
 
     public static emit = (type: string, copy: string): void => {

package/src/services/API.ts

@@ -115,10 +115,15 @@ interface ICancelTokenCache {
 
 export default class API {
     private http: AxiosInstance;
+
     private awsHttp: AxiosInstance;
+
     private pollingInterval: number = 1000;
+
     private experiencePollTimer: any;
+
     private jobPollTimer: any;
+
     private cancelTokenCache: ICancelTokenCache = {
         player: undefined,
         system: undefined