@bento-core/query-bar 1.0.1-icdc.26 → 1.0.1-icdc.28

package/dist/components/QueryUrl.js

@@ -16,15 +16,61 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-const QueryUrl = _ref => {
+const ViewFullLinkComponent = _ref => {
+  let {
+    classes,
+    url,
+    maxWidth = 1200
+  } = _ref;
+  const linkRef = (0, _react.useRef)(null);
+  const [collapseLink, setCollapseLink] = (0, _react.useState)(false);
+
+  /**
+   * Compute url link width based on the windowsize
+   */
+  (0, _react.useEffect)(() => {
+    var _linkRef$current;
+    const urlWidth = linkRef === null || linkRef === void 0 ? void 0 : (_linkRef$current = linkRef.current) === null || _linkRef$current === void 0 ? void 0 : _linkRef$current.offsetWidth;
+    if (urlWidth > maxWidth / 2) {
+      setCollapseLink(true);
+    }
+  }, []);
+  const expandUrl = () => {
+    setCollapseLink(false);
+  };
+  const collapseUrl = () => {
+    setCollapseLink(true);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    ref: linkRef,
+    className: classes.link
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _clsx.default)(classes.viewLink, {
+      [classes.collapseLink]: collapseLink
+    })
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _clsx.default)(classes.urlView, {
+      [classes.urlViewBtn]: !collapseLink
+    }),
+    type: "button",
+    onClick: collapseUrl
+  }, url), collapseLink && /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.expandLinkBtn,
+    type: "button",
+    onClick: expandUrl
+  }, "..."))));
+};
+const QueryUrl = _ref2 => {
+  var _queryRef$current;
   let {
     classes,
     filterItems,
     localFind = {},
     rootPath
-  } = _ref;
+  } = _ref2;
   const [display, setDisplay] = (0, _react.useState)(false);
   const toggleDisplay = () => setDisplay(!display);
+  const [expand, setExpand] = (0, _react.useState)(false);
   const [open, toggleOpen] = (0, _react.useState)(false);
   const pathFilterParams = filterItems.reduce((acc, item) => {
     const {
@@ -47,10 +93,15 @@ const QueryUrl = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     onClick: toggleDisplay,
     className: classes.viewLinkToggleBtn
-  }, display ? 'Hide Query URL' : 'Show Query URL'), display && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, display ? 'Hide Query URL' : 'Show Query URL'), display && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, expand ? /*#__PURE__*/_react.default.createElement("span", {
     type: "button",
-    className: (0, _clsx.default)(classes.viewLink)
-  }, url), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+    onClick: () => setExpand(!expand),
+    className: (0, _clsx.default)(classes.link, classes.viewLink, classes.expandLink)
+  }, url) : /*#__PURE__*/_react.default.createElement(ViewFullLinkComponent, {
+    url: url,
+    classes: classes,
+    maxWidth: queryRef === null || queryRef === void 0 ? void 0 : (_queryRef$current = queryRef.current) === null || _queryRef$current === void 0 ? void 0 : _queryRef$current.offsetWidth
+  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
     arrow: true,
     title: "Copy to Clipboard"
   }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
@@ -76,43 +127,48 @@ const QueryUrl = _ref => {
 const styles = () => ({
   urlContainer: {
     display: 'flex',
-    marginTop: '3px',
+    marginTop: '10px',
     minHeight: '10px'
   },
-  viewLink: {
+  link: {
+    lineBreak: 'anywhere',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
     fontFamily: 'Nunito',
     fontSize: '12px',
     fontWeight: '500',
     lineHeight: '16px',
     letterSpacing: '0em',
-    padding: '2px 5px',
+    padding: '5px',
     borderRadius: '5px',
     float: 'left',
     color: '#1D79A8',
     backgroundColor: '#fff',
-    margin: '0',
-    whiteSpace: 'nowrap',
-    wordBreak: 'break-all',
-    '@media (max-width: 2560px)': {
-      maxWidth: '1800px'
-    },
-    '@media (max-width: 2000px)': {
-      maxWidth: '1500px'
-    },
-    '@media (max-width: 1600px)': {
-      maxWidth: '1100px'
-    },
-    '@media (max-width: 1300px)': {
-      maxWidth: '900px'
-    }
+    maxWidth: '80%'
+  },
+  viewLink: {
+    margin: '0'
   },
   urlViewBtn: {
     cursor: 'pointer'
   },
+  collapseLink: {
+    maxHeight: '1em',
+    display: 'block',
+    // display: '-webkit-box',
+    '-webkit-box-orient': 'vertical',
+    '-webkit-line-clamp': '1',
+    overflow: 'hidden'
+  },
+  expandLink: {
+    cursor: 'pointer'
+  },
+  expandLinkBtn: {
+    float: 'left',
+    '&:hover': {
+      cursor: 'pointer'
+    }
+  },
   viewLinkToggleBtn: {
-    padding: '5px 10px 5px 10px',
     height: '20px',
     fontFamily: 'Nunito',
     fontSize: '12px',
@@ -125,12 +181,28 @@ const styles = () => ({
     color: '#fff',
     float: 'left',
     margin: '0px 10px 0px 0px',
-    whiteSpace: 'nowrap',
     '&:hover': {
       backgroundColor: '#1D79A8',
       color: '#fff'
     }
   },
+  urlView: {
+    float: 'left',
+    width: 'calc(100% - 13px)',
+    minWidth: '840px',
+    '@media (max-width: 2560px)': {
+      maxWidth: '1800px'
+    },
+    '@media (max-width: 2000px)': {
+      maxWidth: '1400px'
+    },
+    '@media (max-width: 1600px)': {
+      maxWidth: '1200px'
+    },
+    '@media (max-width: 1300px)': {
+      maxWidth: '1050px'
+    }
+  },
   copyIconBtn: {
     padding: '0px',
     height: '20px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-icdc.26",
+  "version": "1.0.1-icdc.28",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/QueryUrl.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import {
   Button,
@@ -12,6 +12,62 @@ import {
 } from '@material-ui/core';
 import CopyIcon from '../assets/CopyIcon.svg';
 
+const ViewFullLinkComponent = ({
+  classes,
+  url,
+  maxWidth = 1200,
+}) => {
+  const linkRef = useRef(null);
+  const [collapseLink, setCollapseLink] = useState(false);
+
+  /**
+   * Compute url link width based on the windowsize
+   */
+  useEffect(() => {
+    const urlWidth = linkRef?.current?.offsetWidth;
+    if (urlWidth > maxWidth / 2) {
+      setCollapseLink(true);
+    }
+  }, []);
+
+  const expandUrl = () => {
+    setCollapseLink(false);
+  };
+
+  const collapseUrl = () => {
+    setCollapseLink(true);
+  };
+
+  return (
+    <>
+      <span ref={linkRef} className={classes.link}>
+        <span
+          className={clsx(classes.viewLink,
+            { [classes.collapseLink]: collapseLink })}
+        >
+          <span
+            className={clsx(classes.urlView,
+              { [classes.urlViewBtn]: !collapseLink })}
+            type="button"
+            onClick={collapseUrl}
+          >
+            {url}
+          </span>
+          {(collapseLink) && (
+            <span
+              className={classes.expandLinkBtn}
+              type="button"
+              onClick={expandUrl}
+            >
+              ...
+            </span>
+          )}
+        </span>
+      </span>
+    </>
+  );
+};
+
 const QueryUrl = ({
   classes,
   filterItems,
@@ -21,6 +77,8 @@ const QueryUrl = ({
   const [display, setDisplay] = useState(false);
   const toggleDisplay = () => setDisplay(!display);
 
+  const [expand, setExpand] = useState(false);
+
   const [open, toggleOpen] = useState(false);
 
   const pathFilterParams = filterItems.reduce((acc, item) => {
@@ -55,12 +113,21 @@ const QueryUrl = ({
         {
           (display) && (
             <>
-              <div
-                type="button"
-                className={clsx(classes.viewLink)}
-              >
-                {url}
-              </div>
+              {(expand) ? (
+                <span
+                  type="button"
+                  onClick={() => setExpand(!expand)}
+                  className={clsx(classes.link, classes.viewLink, classes.expandLink)}
+                >
+                  {url}
+                </span>
+              ) : (
+                <ViewFullLinkComponent
+                  url={url}
+                  classes={classes}
+                  maxWidth={queryRef?.current?.offsetWidth}
+                />
+              )}
               <Tooltip
                 arrow
                 title="Copy to Clipboard"
@@ -98,43 +165,48 @@ const QueryUrl = ({
 const styles = () => ({
   urlContainer: {
     display: 'flex',
-    marginTop: '3px',
+    marginTop: '10px',
     minHeight: '10px',
   },
-  viewLink: {
+  link: {
+    lineBreak: 'anywhere',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
     fontFamily: 'Nunito',
     fontSize: '12px',
     fontWeight: '500',
     lineHeight: '16px',
     letterSpacing: '0em',
-    padding: '2px 5px',
+    padding: '5px',
     borderRadius: '5px',
     float: 'left',
     color: '#1D79A8',
     backgroundColor: '#fff',
+    maxWidth: '80%',
+  },
+  viewLink: {
     margin: '0',
-    whiteSpace: 'nowrap',
-    wordBreak: 'break-all',
-    '@media (max-width: 2560px)': {
-      maxWidth: '1800px',
-    },
-    '@media (max-width: 2000px)': {
-      maxWidth: '1500px',
-    },
-    '@media (max-width: 1600px)': {
-      maxWidth: '1100px',
-    },
-    '@media (max-width: 1300px)': {
-      maxWidth: '900px',
-    },
   },
   urlViewBtn: {
     cursor: 'pointer',
   },
+  collapseLink: {
+    maxHeight: '1em',
+    display: 'block',
+    // display: '-webkit-box',
+    '-webkit-box-orient': 'vertical',
+    '-webkit-line-clamp': '1',
+    overflow: 'hidden',
+  },
+  expandLink: {
+    cursor: 'pointer',
+  },
+  expandLinkBtn: {
+    float: 'left',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
   viewLinkToggleBtn: {
-    padding: '5px 10px 5px 10px',
     height: '20px',
     fontFamily: 'Nunito',
     fontSize: '12px',
@@ -147,12 +219,28 @@ const styles = () => ({
     color: '#fff',
     float: 'left',
     margin: '0px 10px 0px 0px',
-    whiteSpace: 'nowrap',
     '&:hover': {
       backgroundColor: '#1D79A8',
       color: '#fff',
     },
   },
+  urlView: {
+    float: 'left',
+    width: 'calc(100% - 13px)',
+    minWidth: '840px',
+    '@media (max-width: 2560px)': {
+      maxWidth: '1800px',
+    },
+    '@media (max-width: 2000px)': {
+      maxWidth: '1400px',
+    },
+    '@media (max-width: 1600px)': {
+      maxWidth: '1200px',
+    },
+    '@media (max-width: 1300px)': {
+      maxWidth: '1050px',
+    },
+  },
   copyIconBtn: {
     padding: '0px',
     height: '20px',