@blaze-cms/plugin-data-ui 0.146.0-core-styles.63 → 0.146.0-core-styles.64

package/lib-es/components/ListingTable/ListingTableContent/ListingTableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListingTableContent.js","names":["React","Table","Pagination","PropTypes","withRouter","ListingTableContent","tableData","handleSelect","onSort","handleOnPageChange","currentPage","totalItems","displayTable","rows","length","isEnquiry","className","createElement","Fragment","data","checkboxes","onSelect","visiblePages","onPageChange","propTypes","object","isRequired","match","shape","url","string","func","number","defaultProps"],"sources":["../../../../src/components/ListingTable/ListingTableContent/ListingTableContent.js"],"sourcesContent":["import React from 'react';\nimport Table from '@blaze-react/table';\nimport Pagination from '@blaze-react/pagination';\n\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\n\nconst ListingTableContent = ({\n  tableData,\n  handleSelect,\n  onSort,\n  handleOnPageChange,\n  currentPage,\n  totalItems\n}) => {\n  const displayTable = tableData && tableData.rows && !!tableData.rows.length;\n  const { isEnquiry } = tableData;\n  const className = `page__content${isEnquiry ? ' array-table' : ''}`;\n\n  return (\n    <>\n      {displayTable ? (\n        <>\n          <div className={className}>\n            <Table\n              onSort={onSort}\n              data={tableData}\n              checkboxes={!isEnquiry}\n              onSelect={handleSelect}\n              data-testid=\"listing-table-content\"\n            />\n            <Pagination\n              visiblePages={10}\n              totalItems={totalItems}\n              currentPage={currentPage}\n              onPageChange={handleOnPageChange}\n            />\n          </div>\n        </>\n      ) : (\n        <span className=\"table-no-results\" data-testid=\"no-results\">\n          No results\n        </span>\n      )}\n    </>\n  );\n};\n\nListingTableContent.propTypes = {\n  tableData: PropTypes.object.isRequired,\n  match: PropTypes.shape({\n    url: PropTypes.string\n  }).isRequired,\n  handleSelect: PropTypes.func,\n  onSort: PropTypes.func,\n  handleOnPageChange: PropTypes.func,\n  currentPage: PropTypes.number.isRequired,\n  totalItems: PropTypes.number.isRequired\n};\n\nListingTableContent.defaultProps = {\n  handleSelect: () => {},\n  onSort: () => {},\n  handleOnPageChange: () => {}\n};\n\nexport default withRouter(ListingTableContent);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,oBAAoB;AACtC,OAAOC,UAAU,MAAM,yBAAyB;AAEhD,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,SAAS;EACTC,YAAY;EACZC,MAAM;EACNC,kBAAkB;EAClBC,WAAW;EACXC;AACF,CAAC,KAAK;EACJ,MAAMC,YAAY,GAAGN,SAAS,IAAIA,SAAS,CAACO,IAAI,IAAI,CAAC,CAACP,SAAS,CAACO,IAAI,CAACC,MAAM;EAC3E,MAAM;IAAEC;EAAU,CAAC,GAAGT,SAAS;EAC/B,MAAMU,SAAS,GAAG,gBAAgBD,SAAS,GAAG,cAAc,GAAG,EAAE,EAAE;EAEnE,oBACEf,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,QACGN,YAAY,gBACXZ,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,qBACElB,KAAA,CAAAiB,aAAA;IAAKD,SAAS,EAAEA;EAAU,gBACxBhB,KAAA,CAAAiB,aAAA,CAAChB,KAAK;IACJO,MAAM,EAAEA,MAAO;IACfW,IAAI,EAAEb,SAAU;IAChBc,UAAU,EAAE,CAACL,SAAU;IACvBM,QAAQ,EAAEd,YAAa;IACvB,eAAY;EAAuB,CACpC,CAAC,eACFP,KAAA,CAAAiB,aAAA,CAACf,UAAU;IACToB,YAAY,EAAE,EAAG;IACjBX,UAAU,EAAEA,UAAW;IACvBD,WAAW,EAAEA,WAAY;IACzBa,YAAY,EAAEd;EAAmB,CAClC,CACE,CACL,CAAC,gBAEHT,KAAA,CAAAiB,aAAA;IAAMD,SAAS,EAAC,kBAAkB;IAAC,eAAY;EAAY,GAAC,YAEtD,CAER,CAAC;AAEP,CAAC;AAEDX,mBAAmB,CAACmB,SAAS,GAAG;EAC9BlB,SAAS,EAAEH,SAAS,CAACsB,MAAM,CAACC,UAAU;EACtCC,KAAK,EAAExB,SAAS,CAACyB,KAAK,CAAC;IACrBC,GAAG,EAAE1B,SAAS,CAAC2B;EACjB,CAAC,CAAC,CAACJ,UAAU;EACbnB,YAAY,EAAEJ,SAAS,CAAC4B,IAAI;EAC5BvB,MAAM,EAAEL,SAAS,CAAC4B,IAAI;EACtBtB,kBAAkB,EAAEN,SAAS,CAAC4B,IAAI;EAClCrB,WAAW,EAAEP,SAAS,CAAC6B,MAAM,CAACN,UAAU;EACxCf,UAAU,EAAER,SAAS,CAAC6B,MAAM,CAACN;AAC/B,CAAC;AAEDrB,mBAAmB,CAAC4B,YAAY,GAAG;EACjC1B,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAC;EACtBC,MAAM,EAAEA,CAAA,KAAM,CAAC,CAAC;EAChBC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;AAC7B,CAAC;AAED,eAAeL,UAAU,CAACC,mBAAmB,CAAC","ignoreList":[]}
+{"version":3,"file":"ListingTableContent.js","names":["React","useEffect","useRef","Table","Pagination","PropTypes","withRouter","ListingTableContent","tableData","handleSelect","onSort","handleOnPageChange","currentPage","totalItems","ref","displayTable","rows","length","isEnquiry","className","current","tableHeadCells","querySelectorAll","firstRowCells","forEach","element","i","styles","window","getComputedStyle","style","flex","createElement","Fragment","data","onSelect","visiblePages","onPageChange","propTypes","object","isRequired","match","shape","url","string","func","number","defaultProps"],"sources":["../../../../src/components/ListingTable/ListingTableContent/ListingTableContent.js"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport Table from '@blaze-react/table';\nimport Pagination from '@blaze-react/pagination';\n\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\n\nconst ListingTableContent = ({\n  tableData,\n  handleSelect,\n  onSort,\n  handleOnPageChange,\n  currentPage,\n  totalItems\n}) => {\n  const ref = useRef(null);\n  const displayTable = tableData && tableData.rows && !!tableData.rows.length;\n  const { isEnquiry } = tableData;\n  const className = `page__content${isEnquiry ? ' array-table' : ''}`;\n\n  useEffect(\n    () => {\n      // set table head to match body column widths to handle dynamic content\n      if (ref.current) {\n        const tableHeadCells = ref.current.querySelectorAll('.table-head .table-cell');\n        const firstRowCells = ref.current.querySelectorAll(\n          '.table-body .table-row:first-child .table-cell'\n        );\n\n        firstRowCells.forEach((element, i) => {\n          const styles = window.getComputedStyle(element);\n\n          if (tableHeadCells[i]) {\n            tableHeadCells[i].style.flex = styles.flex;\n            tableHeadCells[i].style['justify-content'] = styles['justify-content'];\n          }\n        });\n      }\n    },\n    [tableData]\n  );\n\n  return (\n    <>\n      {displayTable ? (\n        <>\n          <div ref={ref} className={className}>\n            <Table\n              onSort={onSort}\n              data={tableData}\n              onSelect={handleSelect}\n              data-testid=\"listing-table-content\"\n            />\n            <Pagination\n              visiblePages={10}\n              totalItems={totalItems}\n              currentPage={currentPage}\n              onPageChange={handleOnPageChange}\n            />\n          </div>\n        </>\n      ) : (\n        <span className=\"table-no-results\" data-testid=\"no-results\">\n          No results\n        </span>\n      )}\n    </>\n  );\n};\n\nListingTableContent.propTypes = {\n  tableData: PropTypes.object.isRequired,\n  match: PropTypes.shape({\n    url: PropTypes.string\n  }).isRequired,\n  handleSelect: PropTypes.func,\n  onSort: PropTypes.func,\n  handleOnPageChange: PropTypes.func,\n  currentPage: PropTypes.number.isRequired,\n  totalItems: PropTypes.number.isRequired\n};\n\nListingTableContent.defaultProps = {\n  handleSelect: () => {},\n  onSort: () => {},\n  handleOnPageChange: () => {}\n};\n\nexport default withRouter(ListingTableContent);\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-data-ui",
-  "version": "0.146.0-core-styles.63",
+  "version": "0.146.0-core-styles.64",
   "description": "Blaze plugin data ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -68,5 +68,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "ced9156d14f886f57f602047bab502e1b8e19d0e"
+  "gitHead": "743a494c3c2d9858448ae1b57b3f2e503ee2590c"
 }

package/src/components/EntityManager/Entity/Entity.js

@@ -72,6 +72,8 @@ const Entity = ({
   const [newUpdatedDate, setNewUpdatedDate] = useState(null);
   const [saveButtonText, setSaveButtonText] = useState(SAVE_BUTTON_TEXTS.save);
   const [externalUpdateTime, setExternalUpdateTime] = useState(null);
+  const [isRightSidebarOpen, setIsRightSidebarOpen] = useState(true);
+  const handleToggleRightSidebar = () => setIsRightSidebarOpen(!isRightSidebarOpen);
 
   const isCreatePage = history.location.pathname.includes('create');
   const [isNewEntity, setIsNewEntity] = useState(isCreatePage);
@@ -461,7 +463,10 @@ const Entity = ({
               />
             )}
 
-            <div className="page__content--fixed">
+            <div
+              className={`page__content--fixed${
+                !isRightSidebarOpen ? ' right-sidebar-collapsed' : ''
+              }`}>
               <div className="page__content">
                 <div className="content">
                   <RenderHook
@@ -502,13 +507,18 @@ const Entity = ({
             </div>
           </div>
 
-          <div className="column column--one-third page-sidebar page-sidebar--relations">
+          <div
+            className={`column column--one-third page-sidebar page-sidebar--relations${
+              !isRightSidebarOpen ? ' sidebar--collapsed' : ''
+            }`}>
             {showSideBarRelations && (
               <SideBarRelations
                 entity={entity}
                 formData={formData.values}
                 schema={schema}
                 onChange={onChangeSideBarRelations}
+                isOpen={isRightSidebarOpen}
+                onToggle={handleToggleRightSidebar}
               />
             )}
           </div>

package/src/components/EntityManager/Entity/SideBarRelations/index.js

@@ -10,7 +10,7 @@ import { PUBLISHED, UNPUBLISHED } from '../../../../constants';
 import CustomSidebarInfoContainer from './container/CustomSidebarInfoContainer';
 import EntityNavLinks from '../EntitiyNavLinks';
 
-const SideBarRelations = ({ schema, onChange, formData, entity }) => {
+const SideBarRelations = ({ schema, onChange, formData, entity, isOpen, onToggle }) => {
   const { relation: RelationComponent } = formFieldTypes;
   const {
     formattedStatus,
@@ -67,7 +67,16 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
   });
 
   return (
-    <div className="sidebar" data-testid="sideBarRelations-main-div">
+    <div
+      className={classnames('sidebar', { 'sidebar--collapsed': !isOpen })}
+      data-testid="sideBarRelations-main-div">
+      <div
+        className="sidebar__toggle-button"
+        onClick={onToggle}
+        role="button"
+        aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}>
+        <i className="material-icons">{isOpen ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}</i>
+      </div>
       <div className="sidebar__content">
         <div className="sidebar__status">
           {formattedCreated && (
@@ -131,11 +140,14 @@ SideBarRelations.propTypes = {
   schema: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
   formData: PropTypes.object.isRequired,
-  entity: PropTypes.object
+  entity: PropTypes.object,
+  isOpen: PropTypes.bool,
+  onToggle: PropTypes.func
 };
-
 SideBarRelations.defaultProps = {
-  entity: {}
+  entity: {},
+  isOpen: true,
+  onToggle: () => {}
 };
 
 export default SideBarRelations;

package/src/components/ListingTable/ListingTable.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import More from '@blaze-react/more';
 import { useApolloClient } from '@apollo/client';
 import { withRouter, Link, useLocation } from 'react-router-dom';
 import { PageHeader, DeleteAction, CardPrompt } from '@blaze-cms/admin';
@@ -180,14 +179,6 @@ const ListingTable = ({ match, entitySchema, history }) => {
                 to={`${match.url}/create`}>
                 Add
               </Link>
-              <PageHeader.Actions>
-                <More>
-                  <More.Avatar isMoreMenu>
-                    <span className="material-icons">more_vert</span>
-                  </More.Avatar>
-                  <More.Content isMoreMenu />
-                </More>
-              </PageHeader.Actions>
             </Fragment>
           )}
       </PageHeader>

package/src/components/ListingTable/ListingTableContent/ListingTableContent.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import Table from '@blaze-react/table';
 import Pagination from '@blaze-react/pagination';
 
@@ -13,19 +13,41 @@ const ListingTableContent = ({
   currentPage,
   totalItems
 }) => {
+  const ref = useRef(null);
   const displayTable = tableData && tableData.rows && !!tableData.rows.length;
   const { isEnquiry } = tableData;
   const className = `page__content${isEnquiry ? ' array-table' : ''}`;
 
+  useEffect(
+    () => {
+      // set table head to match body column widths to handle dynamic content
+      if (ref.current) {
+        const tableHeadCells = ref.current.querySelectorAll('.table-head .table-cell');
+        const firstRowCells = ref.current.querySelectorAll(
+          '.table-body .table-row:first-child .table-cell'
+        );
+
+        firstRowCells.forEach((element, i) => {
+          const styles = window.getComputedStyle(element);
+
+          if (tableHeadCells[i]) {
+            tableHeadCells[i].style.flex = styles.flex;
+            tableHeadCells[i].style['justify-content'] = styles['justify-content'];
+          }
+        });
+      }
+    },
+    [tableData]
+  );
+
   return (
     <>
       {displayTable ? (
         <>
-          <div className={className}>
+          <div ref={ref} className={className}>
             <Table
               onSort={onSort}
               data={tableData}
-              checkboxes={!isEnquiry}
               onSelect={handleSelect}
               data-testid="listing-table-content"
             />