@imposium-hub/components 2.4.1 → 2.4.2-1

package/dist/styles.css

@@ -371,12 +371,18 @@ body a {
 .asset-filter {
   padding: 7px;
   border-bottom: 1px solid #494949;
-  background: #272727;
+  background: #161616;
   display: inline-block;
 }
-.asset-filter:hover {
+.asset-filter .clear-filter {
+  cursor: default;
+}
+.asset-filter.active {
   background: #353535;
 }
+.asset-filter:hover {
+  background: #272727;
+}
 .assets-paginator {
   width: 100%;
   height: 25px;
@@ -864,8 +870,8 @@ body a {
 .controlled-list .item .buttons {
   display: none;
   position: absolute;
-  right: 0px;
-  top: 0px;
+  right: 10px;
+  top: 2px;
 }
 .ip-table-wrapper {
   width: 100%;
@@ -1771,6 +1777,8 @@ body a {
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
+  text-transform: none;
+  font-size: 17px;
   max-width: 220px;
 }
 .imposium-header .inner-content .inner-right .btn-logout {
@@ -1866,8 +1874,33 @@ body a {
 }
 .imposium-header .orgs-menu {
   width: 240px;
-  max-height: 400px;
-  overflow: auto;
+}
+.imposium-header .orgs-menu .react-select__menu {
+  margin-bottom: unset;
+  margin-top: unset;
+  width: 100.8%;
+  left: -1px;
+  position: relative;
+}
+.imposium-header .orgs-menu .react-select__single-value {
+  color: white;
+}
+.imposium-header .orgs-menu .react-select__control {
+  background-color: #161616;
+  border-style: none;
+  box-shadow: unset;
+}
+.imposium-header .orgs-menu .react-select__control:hover {
+  border-color: unset;
+}
+.imposium-header .orgs-menu .react-select__menu-list {
+  padding-bottom: unset;
+  padding-top: unset;
+  background-color: #161616;
+  border: 1px solid #5f5f5f;
+}
+.imposium-header .orgs-menu .react-select__indicator {
+  color: white;
 }
 .imposium-header .orgs-menu .orgs-menu-active-org {
   font-family: 'OswaldHeader', 'Oswald', sans-serif;
@@ -1899,7 +1932,11 @@ body a {
   line-height: 40px;
   margin-right: 10px;
 }
-.imposium-header .orgs-menu .menu-item {
+.imposium-header .orgs-menu .react-select__input-container {
+  color: white;
+}
+.imposium-header .orgs-menu .menu-item,
+.imposium-header .orgs-menu .react-select__option {
   padding: 0;
   border: none;
   font: inherit;
@@ -1918,11 +1955,16 @@ body a {
   text-transform: uppercase;
   color: white;
   width: 100%;
-  padding: 10px 0px;
+  padding: 10px;
   font-size: 12px;
   border-bottom: 1px solid #494949;
 }
-.imposium-header .orgs-menu .menu-item .inactive-first-char {
+.imposium-header .orgs-menu .menu-item.react-select__option--is-focused,
+.imposium-header .orgs-menu .react-select__option.react-select__option--is-focused {
+  background-color: #494949;
+}
+.imposium-header .orgs-menu .menu-item .inactive-first-char,
+.imposium-header .orgs-menu .react-select__option .inactive-first-char {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -1937,14 +1979,16 @@ body a {
   line-height: 28px;
   margin-right: 10px;
 }
-.imposium-header .orgs-menu .menu-item.inactive-org-button {
+.imposium-header .orgs-menu .menu-item.inactive-org-button,
+.imposium-header .orgs-menu .react-select__option.inactive-org-button {
   display: flex;
   align-items: center;
   box-sizing: content-box;
   box-sizing: border-box;
   padding: 10px;
 }
-.imposium-header .orgs-menu .menu-item:last-of-type {
+.imposium-header .orgs-menu .menu-item:last-of-type,
+.imposium-header .orgs-menu .react-select__option:last-of-type {
   border-bottom: none;
 }
 .imposium-header .orgs-menu .orgs-menu-footer {

package/dist/styles.less

@@ -461,11 +461,19 @@ body{
 .asset-filter {
     padding: 7px;
     border-bottom: 1px solid #494949;
-    background: @background;
+    background: @backgroundDark;
     display: inline-block;
-    &:hover {
+
+    .clear-filter {
+        cursor: default;
+    }
+
+    &.active {
         background: @backgroundLight;
     }
+    &:hover {
+        background: @background;
+    }
 }
 
 .assets-paginator {
@@ -998,8 +1006,8 @@ body{
 		.buttons{
 			display: none;
 			position:absolute;
-			right:0px;
-			top:0px;
+			right: 10px;
+			top: 2px;
 		}
 	}
 }
@@ -1799,6 +1807,8 @@ body{
 
                 .story-name {
                     .ellipsis;
+                    text-transform: none;
+                    font-size: 17px;
                     max-width: 220px;
                 }
             }
@@ -1886,9 +1896,35 @@ body{
 
     .orgs-menu {
         width: 240px;
-        max-height: 400px;
-        overflow: auto;
-
+        // max-height: 400px;
+        // overflow: auto;
+        .react-select__menu{
+            margin-bottom: unset;
+            margin-top: unset;
+            width: 100.8%;
+            left: -1px;
+            position: relative;
+        }
+        .react-select__single-value{
+            color: white;
+        }
+        .react-select__control{
+            background-color: rgb(22, 22, 22);
+            border-style: none;
+            box-shadow: unset;
+            &:hover {
+                border-color: unset;
+            }
+        }
+        .react-select__menu-list{
+            padding-bottom: unset;
+            padding-top: unset;
+            background-color: rgb(22, 22, 22);
+            border: 1px solid #5f5f5f;
+        }
+        .react-select__indicator{
+            color: white
+        }
         .orgs-menu-active-org {
             .font-style;
             .flex-row;
@@ -1905,14 +1941,19 @@ body{
                 margin-right: 10px;
             }
         }
-
-        .menu-item {
+        .react-select__input-container{
+            color: white;
+        }
+        .menu-item, .react-select__option {
             .btn-reset;
             width: 100%;
-            padding: 10px 0px;
+            padding: 10px;
             font-size: 12px;
             border-bottom: 1px solid @defaultBorderColor;
 
+            &.react-select__option--is-focused{
+                background-color: #494949
+            }
             .inactive-first-char {
                .circle-style;
                margin-right: 10px;

package/less/components/assets.less

@@ -215,11 +215,19 @@
 .asset-filter {
     padding: 7px;
     border-bottom: 1px solid #494949;
-    background: @background;
+    background: @backgroundDark;
     display: inline-block;
-    &:hover {
+
+    .clear-filter {
+        cursor: default;
+    }
+
+    &.active {
         background: @backgroundLight;
     }
+    &:hover {
+        background: @background;
+    }
 }
 
 .assets-paginator {

package/less/components/controlled-list.less

@@ -20,8 +20,8 @@
 		.buttons{
 			display: none;
 			position:absolute;
-			right:0px;
-			top:0px;
+			right: 10px;
+			top: 2px;
 		}
 	}
 }

package/less/components/header.less

@@ -214,6 +214,8 @@
 
                 .story-name {
                     .ellipsis;
+                    text-transform: none;
+                    font-size: 17px;
                     max-width: 220px;
                 }
             }
@@ -301,9 +303,35 @@
 
     .orgs-menu {
         width: 240px;
-        max-height: 400px;
-        overflow: auto;
-
+        // max-height: 400px;
+        // overflow: auto;
+        .react-select__menu{
+            margin-bottom: unset;
+            margin-top: unset;
+            width: 100.8%;
+            left: -1px;
+            position: relative;
+        }
+        .react-select__single-value{
+            color: white;
+        }
+        .react-select__control{
+            background-color: rgb(22, 22, 22);
+            border-style: none;
+            box-shadow: unset;
+            &:hover {
+                border-color: unset;
+            }
+        }
+        .react-select__menu-list{
+            padding-bottom: unset;
+            padding-top: unset;
+            background-color: rgb(22, 22, 22);
+            border: 1px solid #5f5f5f;
+        }
+        .react-select__indicator{
+            color: white
+        }
         .orgs-menu-active-org {
             .font-style;
             .flex-row;
@@ -320,14 +348,19 @@
                 margin-right: 10px;
             }
         }
-
-        .menu-item {
+        .react-select__input-container{
+            color: white;
+        }
+        .menu-item, .react-select__option {
             .btn-reset;
             width: 100%;
-            padding: 10px 0px;
+            padding: 10px;
             font-size: 12px;
             border-bottom: 1px solid @defaultBorderColor;
 
+            &.react-select__option--is-focused{
+                background-color: #494949
+            }
             .inactive-first-char {
                .circle-style;
                margin-right: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.4.1",
+    "version": "2.4.2-1",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -46,6 +46,7 @@
         "moment": "^2.29.1",
         "react-merge-refs": "^1.1.0",
         "react-moveable": "^0.26.1",
+        "react-select": "^5.8.0",
         "react-transition-group": "^4.4.5"
     },
     "peerDependencies": {

package/src/components/assets/AssetsTableTypeFilter.tsx

@@ -33,8 +33,31 @@ class AssetsTableTypeFilter extends React.PureComponent<
     }
 
     private handleFilterChange = (type: string): void => {
+        const {
+            assetFilters: { type: filterType }
+        } = this.props;
+
+        const { openMenu } = this.state;
+        let filter = [];
+
+        if (filterType !== '') {
+            filter = filterType.split(',');
+        }
+
         const freshTypeFilter: string = type !== ASSET_TYPES.ALL ? type : '';
-        this.props.updateFilters({ type: freshTypeFilter, page: 1 });
+
+        if (type === ASSET_TYPES.ALL) {
+            this.setState({ openMenu: !openMenu }, () =>
+                this.props.updateFilters({ type: freshTypeFilter, page: 1 })
+            );
+            return;
+        } else if (filter.indexOf(freshTypeFilter) === -1) {
+            filter.push(freshTypeFilter);
+        } else {
+            filter.splice(filter.indexOf(freshTypeFilter), 1);
+        }
+
+        this.props.updateFilters({ type: filter.toString(), page: 1 });
     };
 
     public render = (): JSX.Element => {
@@ -43,12 +66,13 @@ class AssetsTableTypeFilter extends React.PureComponent<
             assetFilters: { type }
         } = this.props;
         const filterButtons: any = [];
-
+        const filter = type.split(',');
         for (const assetTypeOption of ASSET_TYPE_FILTER_OPTIONS) {
+            const index = filter.indexOf(assetTypeOption);
             filterButtons.push(
                 <div
                     key={assetTypeOption}
-                    className='asset-filter'
+                    className={`asset-filter ${index !== -1 ? 'active' : null}`}
                     onClick={() => this.handleFilterChange(assetTypeOption)}>
                     <AssetsTypeIcon type={assetTypeOption} />
                 </div>

package/src/components/assets/AssetsTypeIcon.tsx

@@ -3,7 +3,6 @@ import { ASSET_COLORS, ASSET_TYPES } from '../../constants/assets';
 import { assets as copy } from '../../constants/copy';
 import {
     ICON_FILTER,
-    ICON_TIMES,
     ICON_VIDEO,
     ICON_AUDIO_TYPE,
     ICON_FONT,
@@ -14,7 +13,8 @@ import {
     ICON_FILE_ARCHIVE,
     ICON_IMAGE_SEQ_TYPE,
     ICON_FILE_CODE,
-    ICON_CLAPPERBOARD_PLAY
+    ICON_CLAPPERBOARD_PLAY,
+    ICON_FILTERS
 } from '../../constants/icons';
 
 interface IAssetsTypeIconProps {
@@ -26,11 +26,19 @@ const AssetsTypeIcon: React.FC<IAssetsTypeIconProps> = (p: IAssetsTypeIconProps)
         color: ASSET_COLORS[p.type]
     };
 
+    const filter = p.type.split(',').length > 0 ? 'multi' : null;
+
     switch (p.type) {
         case 'filter':
             return <span>{ICON_FILTER}</span>;
         case 'all':
-            return <span title={copy.iconTypes.all}>{ICON_TIMES}</span>;
+            return (
+                <span
+                    className='clear-filter'
+                    title={copy.iconTypes.all}>
+                    Clear
+                </span>
+            );
         case ASSET_TYPES.VIDEO:
             return (
                 <span
@@ -102,7 +110,11 @@ const AssetsTypeIcon: React.FC<IAssetsTypeIconProps> = (p: IAssetsTypeIconProps)
                 </span>
             );
         default:
-            return null;
+            if (filter === 'multi') {
+                return <span>{ICON_FILTERS}</span>;
+            } else {
+                return null;
+            }
     }
 };
 

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

@@ -75,7 +75,7 @@ interface IDataTableProps {
     itemsPerPage?: number;
     totalItems?: number;
     onPage?: (pageIndex: number, pageSize: number) => void;
-
+    onItemsPerPage?: (item: number) => void;
     // controlled sorting props, use internal sorting if not set
     sortBy?: any[];
     onSort?: (sortBy: any[]) => void;
@@ -442,7 +442,9 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                             : nextPage,
                         previousPage: manualPagination
                             ? () => props.onPage(props.currentPage - 1, pageSize)
-                            : previousPage
+                            : previousPage,
+                        itemsPerPage: props.itemsPerPage,
+                        onItemsPerPage: (i) => props.onItemsPerPage(i)
                     }}
                 />
             )}

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

@@ -8,6 +8,7 @@ import {
     ICON_ANGLE_RIGHT
 } from '../../constants/icons';
 
+import { assets as copy } from '../../constants/copy';
 let textInputTimeout: number;
 
 const Paginator: React.FC<any> = ({
@@ -22,7 +23,9 @@ const Paginator: React.FC<any> = ({
     gotoPage,
     previousPage,
     nextPage,
-    setPageSize
+    setPageSize,
+    itemsPerPage,
+    onItemsPerPage
 }) => (
     <section className='ip-table-pagination'>
         <span>
@@ -60,14 +63,14 @@ const Paginator: React.FC<any> = ({
             </Button>
             &nbsp;&nbsp;
             <span>
-                Page&nbsp;&nbsp;
+                {copy.table.page}&nbsp;&nbsp;
                 <strong>
                     {pageIndex} of {pageCount}
                 </strong>
                 &nbsp;&nbsp;
             </span>
             <span>
-                Go to page &nbsp;&nbsp;
+                {copy.table.goToPage}&nbsp;&nbsp;
                 <input
                     className='paginator-input'
                     type='number'
@@ -92,10 +95,30 @@ const Paginator: React.FC<any> = ({
                 />
             </span>
             &nbsp;&nbsp;
+            <span>
+                {copy.table.itemsPerPage}&nbsp;&nbsp;
+                <input
+                    className='paginator-input'
+                    type='number'
+                    placeholder={itemsPerPage}
+                    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'>
-            Total&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+            {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
         </span>
     </section>
 );