@bento-core/query-bar 1.0.1-icdc.15 → 1.0.1-icdc.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/QueryUrl.js +16 -6
  2. package/package.json +1 -1
  3. package/src/components/QueryUrl.js +18 -6
package/dist/components/QueryUrl.js CHANGED
@@ -23,7 +23,7 @@ const ViewFullLinkComponent = _ref => {
23
23
  maxWidth = 1200
24
24
  } = _ref;
25
25
  const linkRef = (0, _react.useRef)(null);
26
- const [expandLink, setExpand] = (0, _react.useState)(false);
26
+ const [collapseLink, setCollapseLink] = (0, _react.useState)(false);
27
27
 
28
28
  /**
29
29
  * Compute url link width based on the windowsize
@@ -32,22 +32,29 @@ const ViewFullLinkComponent = _ref => {
32
32
  var _linkRef$current;
33
33
  const urlWidth = linkRef === null || linkRef === void 0 ? void 0 : (_linkRef$current = linkRef.current) === null || _linkRef$current === void 0 ? void 0 : _linkRef$current.offsetWidth;
34
34
  if (urlWidth > maxWidth / 2) {
35
- setExpand(true);
35
+ setCollapseLink(true);
36
36
  }
37
37
  }, []);
38
38
  const expandUrl = () => {
39
- setExpand(!expandLink);
39
+ setCollapseLink(false);
40
+ };
41
+ const collapseUrl = () => {
42
+ setCollapseLink(true);
40
43
  };
41
44
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
42
45
  ref: linkRef,
43
46
  className: classes.link
44
47
  }, /*#__PURE__*/_react.default.createElement("span", {
45
48
  className: (0, _clsx.default)(classes.viewLink, {
46
- [classes.collapseLink]: expandLink
49
+ [classes.collapseLink]: collapseLink
47
50
  })
48
51
  }, /*#__PURE__*/_react.default.createElement("span", {
49
- className: classes.urlView
50
- }, url), expandLink && /*#__PURE__*/_react.default.createElement("span", {
52
+ className: (0, _clsx.default)(classes.urlView, {
53
+ [classes.urlViewBtn]: !collapseLink
54
+ }),
55
+ type: "button",
56
+ onClick: collapseUrl
57
+ }, url), collapseLink && /*#__PURE__*/_react.default.createElement("span", {
51
58
  className: classes.expandLinkBtn,
52
59
  type: "button",
53
60
  onClick: expandUrl
@@ -140,6 +147,9 @@ const styles = () => ({
140
147
  viewLink: {
141
148
  margin: '0'
142
149
  },
150
+ urlViewBtn: {
151
+ cursor: 'pointer'
152
+ },
143
153
  collapseLink: {
144
154
  maxHeight: '1em',
145
155
  display: 'block',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.1-icdc.15",
3
+ "version": "1.0.1-icdc.16",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/QueryUrl.js CHANGED
@@ -18,7 +18,7 @@ const ViewFullLinkComponent = ({
18
18
  maxWidth = 1200,
19
19
  }) => {
20
20
  const linkRef = useRef(null);
21
- const [expandLink, setExpand] = useState(false);
21
+ const [collapseLink, setCollapseLink] = useState(false);
22
22
 
23
23
  /**
24
24
  * Compute url link width based on the windowsize
@@ -26,12 +26,16 @@ const ViewFullLinkComponent = ({
26
26
  useEffect(() => {
27
27
  const urlWidth = linkRef?.current?.offsetWidth;
28
28
  if (urlWidth > maxWidth / 2) {
29
- setExpand(true);
29
+ setCollapseLink(true);
30
30
  }
31
31
  }, []);
32
32
 
33
33
  const expandUrl = () => {
34
- setExpand(!expandLink);
34
+ setCollapseLink(false);
35
+ };
36
+
37
+ const collapseUrl = () => {
38
+ setCollapseLink(true);
35
39
  };
36
40
 
37
41
  return (
@@ -39,12 +43,17 @@ const ViewFullLinkComponent = ({
39
43
  <span ref={linkRef} className={classes.link}>
40
44
  <span
41
45
  className={clsx(classes.viewLink,
42
- { [classes.collapseLink]: expandLink })}
46
+ { [classes.collapseLink]: collapseLink })}
43
47
  >
44
- <span className={classes.urlView}>
48
+ <span
49
+ className={clsx(classes.urlView,
50
+ { [classes.urlViewBtn]: !collapseLink })}
51
+ type="button"
52
+ onClick={collapseUrl}
53
+ >
45
54
  {url}
46
55
  </span>
47
- {(expandLink) && (
56
+ {(collapseLink) && (
48
57
  <span
49
58
  className={classes.expandLinkBtn}
50
59
  type="button"
@@ -175,6 +184,9 @@ const styles = () => ({
175
184
  viewLink: {
176
185
  margin: '0',
177
186
  },
187
+ urlViewBtn: {
188
+ cursor: 'pointer',
189
+ },
178
190
  collapseLink: {
179
191
  maxHeight: '1em',
180
192
  display: 'block',