@bento-core/query-bar 1.0.1-icdc.19 → 1.0.1-icdc.20

package/dist/components/QueryUrl.js

@@ -16,61 +16,15 @@ 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 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;
+const QueryUrl = _ref => {
   let {
     classes,
     filterItems,
     localFind = {},
     rootPath
-  } = _ref2;
+  } = _ref;
   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 {
@@ -93,15 +47,10 @@ const QueryUrl = _ref2 => {
   }, /*#__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, expand ? /*#__PURE__*/_react.default.createElement("span", {
+  }, display ? 'Hide Query URL' : 'Show Query URL'), display && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     type: "button",
-    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, {
+    className: (0, _clsx.default)(classes.viewLink)
+  }, url), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
     arrow: true,
     title: "Copy to Clipboard"
   }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
@@ -130,45 +79,40 @@ const styles = () => ({
     marginTop: '10px',
     minHeight: '10px'
   },
-  link: {
-    lineBreak: 'anywhere',
+  viewLink: {
     overflow: 'hidden',
+    textOverflow: 'ellipsis',
     fontFamily: 'Nunito',
     fontSize: '12px',
     fontWeight: '500',
     lineHeight: '16px',
     letterSpacing: '0em',
-    padding: '5px',
+    padding: '2px 5px',
     borderRadius: '5px',
     float: 'left',
     color: '#1D79A8',
     backgroundColor: '#fff',
-    maxWidth: '80%'
-  },
-  viewLink: {
-    margin: '0'
+    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',
@@ -181,28 +125,12 @@ 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.19",
+  "version": "1.0.1-icdc.20",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/QueryUrl.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import clsx from 'clsx';
 import {
   Button,
@@ -12,62 +12,6 @@ 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,
@@ -77,8 +21,6 @@ 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) => {
@@ -112,21 +54,12 @@ const QueryUrl = ({
         {
           (display) && (
             <>
-              {(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}
-                />
-              )}
+              <div
+                type="button"
+                className={clsx(classes.viewLink)}
+              >
+                {url}
+              </div>
               <Tooltip
                 arrow
                 title="Copy to Clipboard"
@@ -167,45 +100,40 @@ const styles = () => ({
     marginTop: '10px',
     minHeight: '10px',
   },
-  link: {
-    lineBreak: 'anywhere',
+  viewLink: {
     overflow: 'hidden',
+    textOverflow: 'ellipsis',
     fontFamily: 'Nunito',
     fontSize: '12px',
     fontWeight: '500',
     lineHeight: '16px',
     letterSpacing: '0em',
-    padding: '5px',
+    padding: '2px 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',
@@ -218,28 +146,12 @@ 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',