@blaze-cms/plugin-data-ui 0.146.0-alpha.4 → 0.146.0-alpha.40

package/src/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import InfoBoxValue from '../../../../InfoBoxes/presentational/InfoBoxValue';
 import InfoBoxLabel from '../../../../InfoBoxes/presentational/InfoBoxLabel';
+import InfoBoxTooltip from '../../../../InfoBoxes/InfoBoxTooltip';
 
 const CustomSidebarInfo = ({ items, customSidebarInfoKey }) => {
   if (!items) return null;
@@ -12,10 +13,11 @@ const CustomSidebarInfo = ({ items, customSidebarInfoKey }) => {
         if (!info.label || !info.value) return null;
 
         return (
-          <p>
+          <p key={`${customSidebarInfoKey}-${info.label.toLowerCase()}`}>
             <InfoBoxLabel item={info} />
             <span>
               <InfoBoxValue item={info} />
+              <InfoBoxTooltip info={info} position="left" />
             </span>
           </p>
         );
@@ -30,9 +32,9 @@ const CustomSidebarInfo = ({ items, customSidebarInfoKey }) => {
   );
 };
 
-export default CustomSidebarInfo;
-
 CustomSidebarInfo.propTypes = {
   customSidebarInfoKey: PropTypes.string.isRequired,
   items: PropTypes.array.isRequired
 };
+
+export default CustomSidebarInfo;

package/src/components/InfoBoxes/InfoBoxTooltip.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Tooltip from '@blaze-react/tooltip';
+
+const InfoBoxTooltip = ({ info, ...tooltipProps }) => {
+  const { tooltipContent, tooltipIcon } = info;
+  if (!tooltipContent) return null;
+
+  const renderTooltipIcon = icon => {
+    if (!icon) return null;
+    return <i className={`${icon} info-box--icon`} />;
+  };
+
+  return (
+    <Tooltip
+      tooltipContent={tooltipContent}
+      trigger="click"
+      className="info-box--tooltip"
+      {...tooltipProps}>
+      {renderTooltipIcon(tooltipIcon)}
+    </Tooltip>
+  );
+};
+
+InfoBoxTooltip.propTypes = {
+  info: PropTypes.shape({
+    tooltipContent: PropTypes.node,
+    tooltipIcon: PropTypes.string
+  }).isRequired
+};
+
+export default InfoBoxTooltip;

package/src/components/InfoBoxes/helpers/build-dynamic-query.js

@@ -17,6 +17,8 @@ export default function buildDynamicQuery({ id, schema, properties }) {
       value
       showLabel
       url
+      tooltipIcon
+      tooltipContent
     }`
   );
 

package/src/components/InfoBoxes/presentational/InfoBox.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import InfoBoxValue from './InfoBoxValue';
 import InfoBoxLabel from './InfoBoxLabel';
+import InfoBoxTooltip from '../InfoBoxTooltip';
 
 const InfoBox = ({ items, infoBoxKey }) => {
   if (!items) return null;
@@ -18,6 +19,7 @@ const InfoBox = ({ items, infoBoxKey }) => {
             </div>
             <div className="info-box--value">
               <InfoBoxValue item={info} />
+              <InfoBoxTooltip info={info} />
             </div>
           </div>
         );
@@ -32,9 +34,9 @@ const InfoBox = ({ items, infoBoxKey }) => {
   );
 };
 
-export default InfoBox;
-
 InfoBox.propTypes = {
   infoBoxKey: PropTypes.string.isRequired,
   items: PropTypes.array.isRequired
 };
+
+export default InfoBox;

package/src/components/ListingTable/ListingTable.js

@@ -138,7 +138,8 @@ const ListingTable = ({ match, entitySchema, history }) => {
         url: match.url,
         toggleModal,
         firstColumn,
-        isEnquiry
+        isEnquiry,
+        entitySchema
       })
     });
     history.push('?page=1');

package/src/components/ListingTable/mappers/populate-rows.js

@@ -1,19 +1,39 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
 import TableActions from '../TableActions';
 import { ACTIONS } from '../../../constants';
 import InfoBoxValue from '../../InfoBoxes/presentational/InfoBoxValue';
 import InfoBoxLabel from '../../InfoBoxes/presentational/InfoBoxLabel';
+import InfoBoxTooltip from '../../InfoBoxes/InfoBoxTooltip';
 
-const formatRows = ({ rows, url, toggleModal, label, firstColumn = 'name', isEnquiry }) =>
+const formatRows = ({
+  rows,
+  url,
+  toggleModal,
+  label,
+  firstColumn = 'name',
+  isEnquiry,
+  entitySchema
+}) =>
   rows.map(data => {
     const editUrl = `${url}/update/${data.id}`;
+
     const rowProps = {
       ...data,
       [firstColumn]: (
-        <Link to={editUrl} role="button">
-          {data[firstColumn]}
-        </Link>
+        <>
+          <Link to={editUrl} role="button">
+            {data[firstColumn]}
+          </Link>
+          <RenderHook
+            hookKey="entity:listing:table:row:column:after"
+            schema={entitySchema}
+            data={data}
+            value={data[firstColumn]}
+            column={firstColumn}
+          />
+        </>
       )
     };
     if (!isEnquiry)
@@ -47,6 +67,7 @@ const buildArrayRowContent = rowData => (
               </span>
               <span className="table-row-list__group__item__value">
                 <InfoBoxValue item={item} />
+                <InfoBoxTooltip info={item} />
               </span>
             </div>
           ))}
@@ -117,7 +138,14 @@ const populateRows = ({ toggleModal, url, entitySchema, rows }) => {
     columns,
     labels,
     orderBy: [...formProperties],
-    rows: formatRows({ firstColumn, rows: parsedRowData, url, toggleModal, isEnquiry }),
+    rows: formatRows({
+      firstColumn,
+      rows: parsedRowData,
+      url,
+      toggleModal,
+      isEnquiry,
+      entitySchema
+    }),
     isEnquiry
   };
 };