@imposium-hub/components 2.5.10-13 → 2.5.10-14

package/dist/styles.css

@@ -1077,9 +1077,6 @@ body a {
   border-top: 0;
   background-color: #242424;
 }
-.ip-table-wrapper .ip-table-pagination input[type=number] {
-  -moz-appearance: textfield;
-}
 .ip-table-wrapper .ip-table-pagination .paginator-input {
   display: inline-block;
   background: #1d1d1d;
@@ -1261,9 +1258,6 @@ body a {
 .form-field textarea:disabled:hover {
   background: #1d1d1d;
 }
-.form-field input[type=number] {
-  -moz-appearance: textfield;
-}
 .form-field textarea {
   height: 60px;
   resize: none;
@@ -1399,15 +1393,14 @@ body a {
   padding-top: 1px;
   box-sizing: border-box;
   color: #939393;
-  background: #373737;
 }
 .button-group-field .button-group .button-group-option:hover {
   background: #101010;
 }
 .button-group-field .button-group .button-group-option.active {
   cursor: auto;
-  background: unset;
-  color: unset;
+  background: #373737;
+  color: #dfdfdf;
 }
 .button-group-field .button-group .button-group-option.disabled svg {
   color: gray;
@@ -2855,10 +2848,6 @@ body a {
   margin-top: 2px;
   cursor: pointer;
 }
-.imposium-asset-id {
-  cursor: pointer;
-  user-select: none;
-}
 h1,
 h2,
 h3,

package/dist/styles.less

@@ -1246,10 +1246,6 @@ body{
         border-top: 0;
         background-color: darken(@background, 1%);
 
-        input[type=number] {
-            -moz-appearance: textfield;
-        }
-        
         .paginator-input {
             .inputMixin;
             width: 60px;
@@ -1379,10 +1375,6 @@ body{
 		padding:4px;
 	}
 
-	input[type=number] {
-		-moz-appearance: textfield;
-	}
-	
 	textarea{
 		height:@inputHeight * 3;
 		resize:none;
@@ -1484,15 +1476,15 @@ body{
 			padding-top: 1px;
 			box-sizing: border-box;
 			color:darken(@textDefault, 30%);
-			background: #373737;
+
 			&:hover{
 				background:darken(@inputBackground, 5%);
 			}
 
 			&.active{
 				cursor:auto;
-				background:unset;
-				color:unset;
+				background:lighten(@inputBackground, 10%);
+				color:@textDefault;
 			}
 
 			&.disabled svg {
@@ -2944,11 +2936,6 @@ body{
         }
     }
 }
-
-.imposium-asset-id {
-    cursor: pointer;
-    user-select: none;
-}
 h1, h2, h3, h4, h5 {
     font-family: 'Oswald', sans-serif;
     color:@headerTextDefault;

package/less/components/data-table.less

@@ -207,10 +207,6 @@
         border-top: 0;
         background-color: darken(@background, 1%);
 
-        input[type=number] {
-            -moz-appearance: textfield;
-        }
-        
         .paginator-input {
             .inputMixin;
             width: 60px;

package/less/components/form-field.less

@@ -55,10 +55,6 @@
 		padding:4px;
 	}
 
-	input[type=number] {
-		-moz-appearance: textfield;
-	}
-	
 	textarea{
 		height:@inputHeight * 3;
 		resize:none;
@@ -160,15 +156,15 @@
 			padding-top: 1px;
 			box-sizing: border-box;
 			color:darken(@textDefault, 30%);
-			background: #373737;
+
 			&:hover{
 				background:darken(@inputBackground, 5%);
 			}
 
 			&.active{
 				cursor:auto;
-				background:unset;
-				color:unset;
+				background:lighten(@inputBackground, 10%);
+				color:@textDefault;
 			}
 
 			&.disabled svg {

package/less/components/tag.less

@@ -40,9 +40,4 @@
             cursor: pointer;
         }
     }
-}
-
-.imposium-asset-id {
-    cursor: pointer;
-    user-select: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.5.10-13",
+    "version": "2.5.10-14",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/assets/AssetsTableGlobalCell.tsx

@@ -6,18 +6,8 @@ interface IAssetsTableGlobalCell {
 }
 
 const AssetsTableGlobalCell: React.FC<IAssetsTableGlobalCell> = (p: IAssetsTableGlobalCell) => {
-    const {
-        cell: {
-            row: {
-                original: { story_id }
-            }
-        }
-    } = p;
-
     return (
-        <div className='asset-global-cell'>
-            {story_id || story_id === undefined ? null : ICON_GLOBE}
-        </div>
+        <div className='asset-global-cell'>{p.cell.row.original.story_id ? null : ICON_GLOBE}</div>
     );
 };
 

package/src/components/assets/AssetsTableNameCell.tsx

@@ -20,7 +20,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
     const {
         cell: {
             row: {
-                original: { name, id, percent: uploadProgress, error }
+                original: { name, id, percent: uploadProgress }
             }
         },
         disabled
@@ -45,15 +45,6 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
         };
     }, [name]);
 
-    const errorField = error ? (
-        <TextField
-            value={error}
-            width={'100%'}
-        />
-    ) : (
-        <span>{copy.uploads.preparePhase}</span>
-    );
-
     if (uploadProgress) {
         const loader: JSX.Element =
             uploadProgress < 100 ? (
@@ -62,7 +53,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
                     text={name}
                 />
             ) : (
-                errorField
+                <span>{copy.uploads.preparePhase}</span>
             );
         return loader;
     } else {

package/src/components/assets/AssetsTypeIcon.tsx

@@ -15,8 +15,7 @@ import {
     ICON_FILE_CODE,
     ICON_CLAPPERBOARD_PLAY,
     ICON_FILTERS,
-    ICON_FILE_UPLOAD,
-    ICON_FILE_ERROR
+    ICON_FILE_UPLOAD
 } from '../../constants/icons';
 
 interface IAssetsTypeIconProps {
@@ -113,8 +112,6 @@ const AssetsTypeIcon: React.FC<IAssetsTypeIconProps> = (p: IAssetsTypeIconProps)
             );
         case 'upload':
             return <span>{ICON_FILE_UPLOAD}</span>;
-        case 'error':
-            return <span>{ICON_FILE_ERROR}</span>;
         default:
             if (filter === 'multi') {
                 return <span>{ICON_FILTERS}</span>;

package/src/components/card/Card.tsx

@@ -11,7 +11,6 @@ interface ICardProps {
     onOpen?: (e: any) => any;
     onClose?: (e: any) => any;
     onToggle?: (toggle: boolean) => any;
-    buttons?: any[];
 }
 
 interface ICardState {
@@ -98,7 +97,9 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
 
         return (
             <div className={`card ${openClass} ${collapsableClass} ${styleClass}`}>
-                <div className='card-header'>
+                <div
+                    className='card-header'
+                    onClick={this.evtHandlers.toggleOpen}>
                     {this.renderTitle(styleClass)}
                     {this.renderButtons()}
                 </div>
@@ -108,36 +109,21 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
     }
 
     public renderButtons() {
-        const { collapsable, buttons } = this.props;
+        const { collapsable } = this.props;
         const { open } = this.state;
         const buttonIcon = open ? ICON_CARET_UP : ICON_CARET_DOWN;
 
-        let buttonArray: JSX.Element[];
-
-        const toggleBtn = (
-            <Button
-                key='toggleOpen'
-                style='subtle'
-                onClick={(e) => this.toggleOpen(e)}>
-                {buttonIcon}
-            </Button>
-        );
-
-        if (buttons && buttons.length > 0) {
-            buttonArray = buttons.map((button) => {
-                return button;
-            });
-        }
-
         if (collapsable) {
-            if (buttonArray && buttonArray.length > 0) {
-                buttonArray.push(toggleBtn);
-            } else {
-                buttonArray = [toggleBtn];
-            }
+            return (
+                <div className='header-buttons'>
+                    <Button
+                        style='subtle'
+                        onClick={this.evtHandlers.toggleOpen}>
+                        {buttonIcon}
+                    </Button>
+                </div>
+            );
         }
-
-        return <div className='header-buttons'>{buttonArray}</div>;
     }
 }
 

package/src/components/confirm-modal/ConfirmModal.tsx

@@ -32,7 +32,7 @@ export const ConfirmModal = (props: IConfirmModalProps) => {
             }}
             style={{
                 width: '400px',
-                height: '12%',
+                height: '14%',
                 top: 'calc(50% - 150px)',
                 left: 'calc((100% - 400px) / 2)'
             }}

package/src/components/data-table/Paginator.tsx

@@ -26,149 +26,102 @@ const Paginator: React.FC<any> = ({
     setPageSize,
     itemsPerPage,
     onItemsPerPage
-}) => {
-    const [getPageIndex, setPageIndex] = React.useState<number>(pageIndex);
-    const [getItemsPerPage, setItemsPerPage] = React.useState<number>(itemsPerPage);
-
-    React.useEffect(() => {
-        if (pageIndex !== getPageIndex) {
-            setPageIndex(pageIndex);
-        }
-    }, [pageIndex]);
-
-    const onItemsPerPageBlur = () => {
-        clearTimeout(textInputTimeout);
-        onItemsPerPage(getItemsPerPage);
-    };
-
-    const onGoToPageBlur = () => {
-        clearTimeout(textInputTimeout);
-        gotoPage(getPageIndex, pageSize);
-    };
-
-    const onItemsPerPageKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            clearTimeout(textInputTimeout);
-            onItemsPerPage(getItemsPerPage);
-        }
-    };
-
-    const onGoToPageKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            clearTimeout(textInputTimeout);
-            gotoPage(getPageIndex, pageSize);
-        }
-    };
-
-    return (
-        <section className='ip-table-pagination'>
+}) => (
+    <section className='ip-table-pagination'>
+        <span>
+            <Button
+                style='subtle'
+                size='small'
+                tooltip='Go to first page'
+                disabled={!canPreviousPage}
+                onClick={() => gotoPage(1, pageSize)}>
+                {ICON_ANGLE_DOUBLE_LEFT}
+            </Button>
+            <Button
+                style='subtle'
+                size='small'
+                tooltip='Go to previous page'
+                disabled={!canPreviousPage}
+                onClick={() => previousPage()}>
+                {ICON_ANGLE_LEFT}
+            </Button>
+            <Button
+                style='subtle'
+                size='small'
+                tooltip='Go to next page'
+                disabled={!canNextPage}
+                onClick={() => nextPage()}>
+                {ICON_ANGLE_RIGHT}
+            </Button>
+            <Button
+                style='subtle'
+                size='small'
+                tooltip='Go to last page'
+                disabled={!canNextPage}
+                onClick={() => gotoPage(pageCount, pageSize)}>
+                {ICON_ANGLE_DOUBLE_RIGHT}
+            </Button>
+            &nbsp;&nbsp;
             <span>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to first page'
-                    disabled={!canPreviousPage}
-                    onClick={() => gotoPage(1, pageSize)}>
-                    {ICON_ANGLE_DOUBLE_LEFT}
-                </Button>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to previous page'
-                    disabled={!canPreviousPage}
-                    onClick={() => previousPage()}>
-                    {ICON_ANGLE_LEFT}
-                </Button>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to next page'
-                    disabled={!canNextPage}
-                    onClick={() => nextPage()}>
-                    {ICON_ANGLE_RIGHT}
-                </Button>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to last page'
-                    disabled={!canNextPage}
-                    onClick={() => gotoPage(pageCount, pageSize)}>
-                    {ICON_ANGLE_DOUBLE_RIGHT}
-                </Button>
-                &nbsp;&nbsp;
-                <span>
-                    {copy.table.page}&nbsp;&nbsp;
-                    <strong>
-                        {getPageIndex} of {pageCount}
-                    </strong>
-                    &nbsp;&nbsp;
-                </span>
-                <span>
-                    {copy.table.goToPage}&nbsp;&nbsp;
-                    <input
-                        className='paginator-input'
-                        type='number'
-                        placeholder={getPageIndex.toString()}
-                        onChange={(e) => {
-                            const input = e.target.value;
-                            const inputNum = Number(input);
-                            let next: number;
-
-                            clearTimeout(textInputTimeout);
-
-                            if (!input || inputNum < 1 || inputNum > pageCount) {
-                                return;
-                            }
-
-                            if (inputNum >= 1 && inputNum <= pageCount) {
-                                next = inputNum;
-                            }
-
-                            textInputTimeout = window.setTimeout(
-                                () => gotoPage(next, pageSize),
-                                1000
-                            );
-                        }}
-                        onBlur={() => onGoToPageBlur()}
-                        onKeyDown={(e) => onGoToPageKeyDown(e)}
-                    />
-                </span>
+                {copy.table.page}&nbsp;&nbsp;
+                <strong>
+                    {pageIndex} of {pageCount}
+                </strong>
                 &nbsp;&nbsp;
-                <span>
-                    {copy.table.itemsPerPage}&nbsp;&nbsp;
-                    <input
-                        className='paginator-input'
-                        type='number'
-                        placeholder={getItemsPerPage.toString()}
-                        min={1}
-                        onChange={(e) => {
-                            const input = e.target.value;
-                            const inputNum = Number(input);
-
-                            clearTimeout(textInputTimeout);
-
-                            if (!input || inputNum < 1) {
-                                return;
-                            }
-
-                            setItemsPerPage(inputNum);
-
-                            textInputTimeout = window.setTimeout(
-                                () => onItemsPerPage(inputNum),
-                                1000
-                            );
-                        }}
-                        onBlur={() => onItemsPerPageBlur()}
-                        onKeyDown={(e) => onItemsPerPageKeyDown(e)}
-                    />
-                </span>
             </span>
-
-            <span className='total-assets'>
-                {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+            <span>
+                {copy.table.goToPage}&nbsp;&nbsp;
+                <input
+                    className='paginator-input'
+                    type='number'
+                    placeholder={pageIndex}
+                    onChange={(e) => {
+                        const input = e.target.value;
+                        const inputNum = Number(input);
+                        let next: number;
+
+                        clearTimeout(textInputTimeout);
+
+                        if (!input || inputNum < 1 || inputNum > pageCount) {
+                            return;
+                        }
+
+                        if (inputNum >= 1 && inputNum <= pageCount) {
+                            next = inputNum;
+                        }
+
+                        textInputTimeout = window.setTimeout(() => gotoPage(next, pageSize), 300);
+                    }}
+                />
             </span>
-        </section>
-    );
-};
+            &nbsp;&nbsp;
+            <span>
+                {copy.table.itemsPerPage}&nbsp;&nbsp;
+                <input
+                    className='paginator-input'
+                    type='number'
+                    placeholder={itemsPerPage}
+                    min={1}
+                    onChange={(e) => {
+                        const input = e.target.value;
+                        const inputNum = Number(input);
+
+                        clearTimeout(textInputTimeout);
+
+                        if (!input || inputNum < 1) {
+                            return;
+                        }
+
+                        textInputTimeout = window.setTimeout(() => onItemsPerPage(inputNum), 300);
+                    }}
+                />
+            </span>
+        </span>
+
+        <span className='total-assets'>
+            {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+        </span>
+    </section>
+);
 
 export default Paginator;

package/src/components/smpte-field/SMPTEField.tsx

@@ -12,7 +12,6 @@ interface ISMPTEFieldProps {
     width?: string | number;
     onChange?(e): void;
     onBlur?(e): void;
-    onError?(e): void;
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
@@ -76,7 +75,7 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
 
     private onBlur(e?) {
         const val = e ? e.target.value : this.inputRef.current.value;
-        const isValid = this.SMTPEValidator(val);
+        const isValid = this.smptValidator(val);
 
         if (e && e.key === 'Enter') {
             this.setDuration(isValid, val);
@@ -89,12 +88,10 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
 
     private onChange() {
         const val = this.inputRef.current.value;
-        const isValid = this.SMTPEValidator(val);
+        const isValid = this.smptValidator(val);
 
         if (isValid) {
             this.props.onChange(val);
-        } else {
-            this.props.onError(isValid);
         }
     }
 
@@ -104,13 +101,11 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
             const smpte = getSMPTE(frameRate, val);
             if (smpte && this.props.onBlur) {
                 this.props.onBlur(smpte);
-            } else {
-                this.props.onError(isValid);
             }
         }
     }
 
-    private SMTPEValidator(val) {
+    private smptValidator(val) {
         const isValidSMPTETimeCode = new RegExp(this.regex);
         const isValid = isValidSMPTETimeCode.test(val);
         const errorMsg = isValid ? null : TIMECODE.ERROR;

package/src/constants/icons.tsx

@@ -74,7 +74,6 @@ import {
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
 import { faCloudArrowUp, faFilters } from '@fortawesome/pro-solid-svg-icons';
-import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -221,5 +220,3 @@ export const ICON_CODE = <FontAwesomeIcon icon={faCode} />;
 export const ICON_UP_RIGHT_FROM_SQUARE = <FontAwesomeIcon icon={faUpRightFromSquare} />;
 
 export const ICON_FILE_UPLOAD = <FontAwesomeIcon icon={faCloudArrowUp} />;
-
-export const ICON_FILE_ERROR = <FontAwesomeIcon icon={faCircleExclamation} />;

package/src/index.ts

@@ -40,7 +40,6 @@ import AssetField from './components/assets/AssetField';
 import AssetsTableDropzone from './components/assets/AssetsTableDropzone';
 import AssetsTableNameCell from './components/assets/AssetsTableNameCell';
 import AssetsTableNameFilter from './components/assets/AssetsTableNameFilter';
-import AssetsTableAssetIdFilter from './components/assets/AssetsTableAssetIdFilter';
 import AssetsTableSelectCell from './components/assets/AssetsTableSelectCell';
 import AssetsTableSelectFilter from './components/assets/AssetsTableSelectFilter';
 import AssetsTableTagsCell from './components/assets/AssetsTableTagsCell';
@@ -160,7 +159,6 @@ import ContextMenuTrigger from './components/context-menu/ContextMenuTrigger';
 import CopyPropIdButton from './components/copy-prop-id-button/CopyPropIdButton';
 import Submenu from './components/context-menu/SubMenu';
 import { ConfirmModal } from './components/confirm-modal/ConfirmModal';
-import AssetsTableAssetIdCell from './components/assets/AssetsTableAssetIdCell';
 
 export {
     AppWrapper,
@@ -219,8 +217,6 @@ export {
     AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
-    AssetsTableAssetIdFilter,
-    AssetsTableAssetIdCell,
     AssetsTableNameCell,
     AssetsTableDurationCell,
     AssetsTableRateCell,