@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/modal/Modal.tsx

@@ -3,16 +3,15 @@ import Button from '../button/Button';
 import { ICON_TIMES } from '../../constants/icons';
 
 interface IModalProps {
-    children? : any;
-    isOpen : boolean;
-    style? : any;
-    wrapperStyle? : any;
-    onRequestClose(e) : void;
+    children?: any;
+    isOpen: boolean;
+    style?: any;
+    wrapperStyle?: any;
+    onRequestClose(e): void;
 }
 
 class Modal extends React.PureComponent<IModalProps> {
-
-    private evtHandlers : any;
+    private evtHandlers: any;
     private closeStyles = {
         position: 'absolute',
         right: '0px',
@@ -20,7 +19,6 @@ class Modal extends React.PureComponent<IModalProps> {
     };
 
     constructor(props) {
-
         super(props);
 
         this.evtHandlers = {
@@ -29,30 +27,26 @@ class Modal extends React.PureComponent<IModalProps> {
     }
 
     private onClose(e) {
-
-        const {onRequestClose} = this.props;
+        const { onRequestClose } = this.props;
 
         onRequestClose(e);
     }
 
     public render() {
-
-        const {isOpen, children, style, wrapperStyle} = this.props;
+        const { isOpen, style, wrapperStyle } = this.props;
 
         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-content'>
-                        {this.props.children}
+            return (
+                <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}>
+                            {ICON_TIMES}
+                        </Button>
                     </div>
-                    <Button
-                        onClick = {this.evtHandlers.onClose}
-                        customStyles = {this.closeStyles}>
-                        {ICON_TIMES}
-                    </Button>
                 </div>
-            </div>;
+            );
         } else {
             return null;
         }

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

@@ -4,32 +4,34 @@ import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 
 interface INoAccessProps {
-    type : 'request' | 'restrict';
+    type: 'request' | 'restrict';
 }
 
-const MAIL_TO : string = 'mailto:info@imposium.com?subject=My access to Imposium is restricted';
-const REQUEST_ACCESS_TITLE : string = 'You don\'t have access to Imposium yet';
-const REQUEST_HREF_COPY : string = 'Request Access';
-const RESTRICTED_ACCESS_TITLE : string = 'Service not found';
+const MAIL_TO: string = 'mailto:info@imposium.com?subject=My access to Imposium is restricted';
+const REQUEST_ACCESS_TITLE: string = "You don't have access to Imposium yet";
+const REQUEST_HREF_COPY: string = 'Request Access';
+const RESTRICTED_ACCESS_TITLE: string = 'Service not found';
 
-const NoAccess : React.FC<INoAccessProps> = (p : INoAccessProps) => {
+const NoAccess: React.FC<INoAccessProps> = (p: INoAccessProps) => {
     if (!p.type) {
         throw new Error('NoAccess requires a type of either: request or restrict');
     }
 
-    const isRequest : boolean = (p.type === 'request');
+    const isRequest: boolean = p.type === 'request';
 
     return (
-        <div className = 'no-access'>
-            {
-                (isRequest)
-                    ? <FontAwesomeIcon icon = {faUserLock} size = '6x' />
-                    : <FontAwesomeIcon icon = {faExclamationTriangle} size = '6x' />
-            }
+        <div className='no-access'>
+            {isRequest ? (
+                <FontAwesomeIcon icon={faUserLock} size='6x' />
+            ) : (
+                <FontAwesomeIcon icon={faExclamationTriangle} size='6x' />
+            )}
 
-            <div className = 'no-access-copy'>
-                <h1 className = 'no-access-heading'>{(isRequest) ? REQUEST_ACCESS_TITLE : RESTRICTED_ACCESS_TITLE}</h1>
-                {(isRequest) && <a href = {MAIL_TO}>{REQUEST_HREF_COPY}</a>}
+            <div className='no-access-copy'>
+                <h1 className='no-access-heading'>
+                    {isRequest ? REQUEST_ACCESS_TITLE : RESTRICTED_ACCESS_TITLE}
+                </h1>
+                {isRequest && <a href={MAIL_TO}>{REQUEST_HREF_COPY}</a>}
             </div>
         </div>
     );

package/src/components/number-field/NumberField.stories.tsx

@@ -1,29 +1,13 @@
 import * as React from 'react';
 import NumberField from './NumberField';
-import { IToolTipConfig } from '../Tooltip';
 
 export default {
     title: 'NumberField',
     component: NumberField
 };
 
-interface INumberFieldProps {
-    buttons? : any;
-    label? : string;
-    placeholder? : string;
-    readOnly? : boolean;
-    value : number;
-    tooltip? : IToolTipConfig | string;
-    width? : string | number;
-    onChange(e) : void;
-    info? : string;
-    labelPosition? : string;
-    min? : number;
-    max? : number;
-}
-
 export const defaultNumberField = () => {
-    const [ number, setNumber ] = React.useState(0);
+    const [number, setNumber] = React.useState(0);
 
     const handleChange = (e) => {
         if (e.target.value) {
@@ -33,11 +17,11 @@ export const defaultNumberField = () => {
 
     return (
         <NumberField
-            label = {'Number Field'}
-            tooltip = {'TOOLTIP'}
-            width = '33%'
-            value = {number}
-            onChange = {handleChange}
-            />
+            label={'Number Field'}
+            tooltip={'TOOLTIP'}
+            width='33%'
+            value={number}
+            onChange={handleChange}
+        />
     );
 };

package/src/components/number-field/NumberField.tsx

@@ -3,33 +3,30 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
 interface INumberFieldProps {
-    buttons? : any;
-    label? : string;
-    placeholder? : string;
-    readOnly? : boolean;
-    value : number;
-    tooltip? : IToolTipConfig | string;
-    width? : string | number;
-    onChange?(e) : void;
-    info? : string;
-    labelPosition? : string;
-    min? : number;
-    max? : number;
+    buttons?: any;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value: number;
+    tooltip?: IToolTipConfig | string;
+    width?: string | number;
+    onChange?(e): void;
+    info?: string;
+    labelPosition?: string;
+    min?: number;
+    max?: number;
 }
 
 class NumberField extends React.PureComponent<INumberFieldProps> {
-
-    private inputRef : any;
+    private inputRef: any;
 
     constructor(props) {
-
         super(props);
 
         this.inputRef = React.createRef();
     }
 
     private onChange(e) {
-
         // return null vs an empty string
         let val = e.target.value;
         if (val === '') {
@@ -42,54 +39,66 @@ class NumberField extends React.PureComponent<INumberFieldProps> {
     }
 
     private onSelectFocus() {
-
         // if (this.props.value && this.inputRef.current) {
         //     this.inputRef.current.setSelectionRange(0, this.props.value.toString().length);
         // }
     }
 
     private onSelectBlur() {
-
         // if (this.inputRef.current) {
         //     this.inputRef.current.setSelectionRange(0, 0);
         // }
     }
 
-    private handleLabelDrag(v : number) {
-
+    private handleLabelDrag(v: number) {
         const newVal = this.props.value + v;
         this.props.onChange(newVal);
     }
 
     public render() {
+        const {
+            label,
+            placeholder,
+            width,
+            readOnly,
+            buttons,
+            tooltip,
+            info,
+            labelPosition,
+            min,
+            max
+        } = this.props;
+        let value: any = this.props.value;
+        if (value === null) {
+            value = '';
+        }
 
-        const {label, placeholder, width, readOnly, buttons, tooltip, info, labelPosition, min, max} = this.props;
-        let value : any = this.props.value;
-        if (value === null) { value = ''; }
-
-        return <FieldWrapper
-            customClass = 'number-field'
-            // draggableValue = {true}
-            // onDrag = {(v)=>this.handleLabelDrag(v)}
-            label = {label}
-            tooltip = {tooltip}
-            buttons = {buttons}
-            info = {info}
-            labelPosition = {labelPosition}
-            width = {width}>
-            <input
-                ref = {this.inputRef}
-                type = 'number'
-                pattern= '/^-?(0|[1-9]\d*)(\.\d+)?$/'
-                placeholder = {placeholder}
-                value = {value}
-                readOnly = {readOnly}
-                min = {min}
-                max = {max}
-                onFocus = {() => this.onSelectFocus()}
-                onBlur = {() => this.onSelectBlur()}
-                onChange = {(e) => this.onChange(e)} />
-        </FieldWrapper>;
+        return (
+            <FieldWrapper
+                customClass='number-field'
+                // draggableValue = {true}
+                // onDrag = {(v)=>this.handleLabelDrag(v)}
+                label={label}
+                tooltip={tooltip}
+                buttons={buttons}
+                info={info}
+                labelPosition={labelPosition}
+                width={width}>
+                <input
+                    ref={this.inputRef}
+                    type='number'
+                    pattern='/^-?(0|[1-9]\d*)(\.\d+)?$/'
+                    placeholder={placeholder}
+                    value={value}
+                    readOnly={readOnly}
+                    min={min}
+                    max={max}
+                    onFocus={() => this.onSelectFocus()}
+                    onBlur={() => this.onSelectBlur()}
+                    onChange={(e) => this.onChange(e)}
+                />
+            </FieldWrapper>
+        );
     }
 }
 

package/src/components/players/AudioPlayer.tsx

@@ -3,43 +3,39 @@ import { DEFAULT_PADDING } from '../../constants/player';
 import { getPlayerStyle } from './VideoPlayer';
 
 interface IImagePlayerProps {
-    url : string;
-    height? : number;
-    width? : number;
-    padding? : number;
-    active? : boolean;
+    url: string;
+    height?: number;
+    width?: number;
+    padding?: number;
+    active?: boolean;
 }
 
 class ImagePlayer extends React.PureComponent<IImagePlayerProps, undefined> {
-
-    private audioNode : any;
+    private audioNode: any;
     private width = 1280;
     private height = 720;
 
     constructor(props) {
-
         super(props);
 
         this.audioNode = React.createRef();
     }
 
-    public getImageStyle() : any {
-
-        const {padding, width, height} = this.props;
-        const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
+    public getImageStyle(): any {
+        const { padding, width, height } = this.props;
+        const pad = padding !== undefined ? padding : DEFAULT_PADDING;
 
         return getPlayerStyle(width, height, this.width, this.height, pad);
     }
 
     public render() {
-
-        const {url, active} = this.props;
+        const { url, active } = this.props;
 
         if (active !== false) {
             return (
-                <div className = 'media-player'>
-                    <div className = 'inner-viewer' style = {this.getImageStyle()}>
-                        <audio controls src = {url} ref = {this.audioNode}/>
+                <div className='media-player'>
+                    <div className='inner-viewer' style={this.getImageStyle()}>
+                        <audio controls src={url} ref={this.audioNode} />
                     </div>
                 </div>
             );

package/src/components/players/ImagePlayer.tsx

@@ -3,49 +3,53 @@ import { DEFAULT_PADDING } from '../../constants/player';
 import { getPlayerStyle } from './VideoPlayer';
 
 interface IImagePlayerProps {
-    url : string;
-    height? : number;
-    width? : number;
-    padding? : number;
-    active? : boolean;
+    url: string;
+    height?: number;
+    width?: number;
+    padding?: number;
+    active?: boolean;
 }
 
 interface IImagePlayerState {
-    imageWidth : number;
-    imageHeight : number;
+    imageWidth: number;
+    imageHeight: number;
 }
 
 class ImagePlayer extends React.PureComponent<IImagePlayerProps, IImagePlayerState> {
-
-    private imgNode : any;
+    private imgNode: any;
 
     constructor(props) {
-
         super(props);
 
         this.state = {
-            imageHeight : 1080,
-            imageWidth : 1920
+            imageHeight: 1080,
+            imageWidth: 1920
         };
 
         this.imgNode = React.createRef();
     }
 
-    public getImageStyle() : any {
-
-        const {imageHeight, imageWidth} = this.state;
-        const {padding, width, height} = this.props;
-        const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
+    public getImageStyle(): any {
+        const { imageHeight, imageWidth } = this.state;
+        const { padding, width, height } = this.props;
+        const pad = padding !== undefined ? padding : DEFAULT_PADDING;
 
         if (imageHeight && imageWidth) {
-            return getPlayerStyle(width, height, imageWidth, imageHeight, pad, imageWidth, imageHeight);
+            return getPlayerStyle(
+                width,
+                height,
+                imageWidth,
+                imageHeight,
+                pad,
+                imageWidth,
+                imageHeight
+            );
         }
 
         return {};
     }
 
     private metadataLoaded(e) {
-
         this.setState({
             imageWidth: e.target.naturalWidth,
             imageHeight: e.target.naturalHeight
@@ -53,14 +57,13 @@ class ImagePlayer extends React.PureComponent<IImagePlayerProps, IImagePlayerSta
     }
 
     public render() {
-
-        const {url, active} = this.props;
+        const { url, active } = this.props;
 
         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='media-player'>
+                    <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

@@ -1,23 +1,23 @@
 import * as React from 'react';
 import Portal from '../portal/Portal';
-import {ICON_TIMES} from '../../constants/icons';
+import { ICON_TIMES } from '../../constants/icons';
 import Button from '../button/Button';
-import {assets as copy} from '../../constants/copy';
+import { assets as copy } from '../../constants/copy';
 interface IImagePreviewProps {
-    showMedia : boolean;
-    url : string;
-    playbackSettings? : any;
-    style? : React.CSSProperties | any;
-    onRequestClose?(e) : void;
+    showMedia: boolean;
+    url: string;
+    playbackSettings?: any;
+    style?: React.CSSProperties | any;
+    onRequestClose?(e): void;
 }
 
 interface IImagePreviewState {
-    loaded : boolean;
+    loaded: boolean;
 }
 
 class ImagePreview extends React.PureComponent<IImagePreviewProps, IImagePreviewState> {
-    private imageNode : any = null;
-    private evtHandlers : any;
+    private imageNode: any = null;
+    private evtHandlers: any;
     constructor(props) {
         super(props);
         this.imageNode = React.createRef();
@@ -30,32 +30,30 @@ class ImagePreview extends React.PureComponent<IImagePreviewProps, IImagePreview
     }
 
     private onClose(e) {
-
-        const {onRequestClose} = this.props;
+        const { onRequestClose } = this.props;
 
         onRequestClose(e);
     }
 
     public render() {
-        const {showMedia, url, style} = this.props;
-        const {loaded} = this.state;
+        const { showMedia, url, style } = this.props;
+        const { loaded } = this.state;
 
         if (showMedia) {
             return (
                 <Portal id='portal-root'>
-                    <div style={{...style}} className={'close-icon-preview'}>
-                            <Button
-                                key = 'btn-filter'
-                                onClick = {this.evtHandlers.onClose}
-                                size={'large'}
-                                style = 'subtle'
-                                tooltip = {copy.field.tooltipFilter}
-                                >
-                                {ICON_TIMES}
-                            </Button>
+                    <div style={{ ...style }} className={'close-icon-preview'}>
+                        <Button
+                            key='btn-filter'
+                            onClick={this.evtHandlers.onClose}
+                            size={'large'}
+                            style='subtle'
+                            tooltip={copy.field.tooltipFilter}>
+                            {ICON_TIMES}
+                        </Button>
                     </div>
                     <img
-                        onLoad = {() => this.setState({loaded: true})}
+                        onLoad={() => this.setState({ loaded: true })}
                         src={url}
                         ref={this.imageNode}
                         className={`media-preview ${!loaded ? 'hidden' : ''}`}

package/src/components/players/ImageSequencePlayer.tsx

@@ -3,39 +3,39 @@ import { DEFAULT_PADDING } from '../../constants/player';
 import { getPlayerStyle } from './VideoPlayer';
 
 interface IImageSequencePlayerProps {
-    url : string;
-    height? : number;
-    width? : number;
-    padding? : number;
-    active? : boolean;
+    url: string;
+    height?: number;
+    width?: number;
+    padding?: number;
+    active?: boolean;
 }
 
 interface IImageSequencePlayerState {
-    imageWidth : number;
-    imageHeight : number;
+    imageWidth: number;
+    imageHeight: number;
 }
 
-class ImageSequencePlayer extends React.PureComponent<IImageSequencePlayerProps, IImageSequencePlayerState> {
-
-    private imgNode : any;
+class ImageSequencePlayer extends React.PureComponent<
+    IImageSequencePlayerProps,
+    IImageSequencePlayerState
+> {
+    private imgNode: any;
 
     constructor(props) {
-
         super(props);
 
         this.state = {
-            imageHeight : 1080,
-            imageWidth : 1920
+            imageHeight: 1080,
+            imageWidth: 1920
         };
 
         this.imgNode = React.createRef();
     }
 
-    public getImageStyle() : any {
-
-        const {imageHeight, imageWidth} = this.state;
-        const {padding, width, height} = this.props;
-        const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
+    public getImageStyle(): any {
+        const { imageHeight, imageWidth } = this.state;
+        const { padding, width, height } = this.props;
+        const pad = padding !== undefined ? padding : DEFAULT_PADDING;
 
         if (imageHeight && imageWidth) {
             return getPlayerStyle(width, height, imageWidth, imageHeight, pad);
@@ -45,7 +45,6 @@ class ImageSequencePlayer extends React.PureComponent<IImageSequencePlayerProps,
     }
 
     private metadataLoaded(e) {
-
         this.setState({
             imageWidth: e.target.naturalWidth,
             imageHeight: e.target.naturalHeight
@@ -53,15 +52,12 @@ class ImageSequencePlayer extends React.PureComponent<IImageSequencePlayerProps,
     }
 
     public render() {
-
-        const {url, active} = this.props;
+        const { active } = this.props;
 
         if (active !== false) {
             return (
-                <div className = 'mediap-player'>
-                    <div className = 'inner-viewer' style = {this.getImageStyle()}>
-
-                    </div>
+                <div className='mediap-player'>
+                    <div className='inner-viewer' style={this.getImageStyle()}></div>
                 </div>
             );
         } else {