@elyra/canvas 12.27.0 → 12.28.0
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.
- package/dist/{canvas-constants-07dbe4b7.js → canvas-constants-046e4126.js} +2 -2
- package/dist/{canvas-constants-07dbe4b7.js.map → canvas-constants-046e4126.js.map} +1 -1
- package/dist/canvas-constants-f4e65d4d.js +2 -0
- package/dist/canvas-constants-f4e65d4d.js.map +1 -0
- package/dist/{canvas-controller-01c28c3a.js → canvas-controller-1bbd9c0e.js} +2 -2
- package/dist/canvas-controller-1bbd9c0e.js.map +1 -0
- package/dist/canvas-controller-d6aa7d4d.js +2 -0
- package/dist/canvas-controller-d6aa7d4d.js.map +1 -0
- package/dist/common-canvas-9c735f47.js +2 -0
- package/dist/common-canvas-9c735f47.js.map +1 -0
- package/dist/common-canvas-a02e75c1.js +2 -0
- package/dist/common-canvas-a02e75c1.js.map +1 -0
- package/dist/common-canvas.es.js +1 -1
- package/dist/common-canvas.js +1 -1
- package/dist/common-properties-237b46d6.js +2 -0
- package/dist/common-properties-237b46d6.js.map +1 -0
- package/dist/common-properties-ad60cdab.js +2 -0
- package/dist/common-properties-ad60cdab.js.map +1 -0
- package/dist/datarecord-metadata-v3-schema-6a3754ce.js +1 -1
- package/dist/datarecord-metadata-v3-schema-6a3754ce.js.map +1 -1
- package/dist/datarecord-metadata-v3-schema-ba1f2849.js +1 -1
- package/dist/datarecord-metadata-v3-schema-ba1f2849.js.map +1 -1
- package/dist/en-7201b548.js +1 -1
- package/dist/en-7201b548.js.map +1 -1
- package/dist/en-a08356c8.js +1 -1
- package/dist/en-a08356c8.js.map +1 -1
- package/dist/{extends-a6ea3ccf.js → extends-7d4f15b6.js} +2 -2
- package/dist/extends-7d4f15b6.js.map +1 -0
- package/dist/extends-d144eab9.js +7 -0
- package/dist/extends-d144eab9.js.map +1 -0
- package/dist/flexible-table-8219d7a0.js +2 -0
- package/dist/flexible-table-8219d7a0.js.map +1 -0
- package/dist/flexible-table-f5d55fe4.js +2 -0
- package/dist/flexible-table-f5d55fe4.js.map +1 -0
- package/dist/icon-221bb2e5.js +2 -0
- package/dist/icon-221bb2e5.js.map +1 -0
- package/dist/icon-ea917a08.js +2 -0
- package/dist/icon-ea917a08.js.map +1 -0
- package/dist/index-9a4fa2be.js +2 -0
- package/dist/index-9a4fa2be.js.map +1 -0
- package/dist/index-cc43e17c.js +2 -0
- package/dist/index-cc43e17c.js.map +1 -0
- package/dist/isArrayLikeObject-a9c7973b.js +1 -1
- package/dist/isArrayLikeObject-a9c7973b.js.map +1 -1
- package/dist/isArrayLikeObject-f3b27f64.js +1 -1
- package/dist/isArrayLikeObject-f3b27f64.js.map +1 -1
- package/dist/lib/canvas-controller.es.js +1 -1
- package/dist/lib/canvas-controller.js +1 -1
- package/dist/lib/canvas.es.js +1 -1
- package/dist/lib/canvas.js +1 -1
- package/dist/lib/context-menu.es.js +1 -1
- package/dist/lib/context-menu.js +1 -1
- package/dist/lib/properties/field-picker.es.js +1 -1
- package/dist/lib/properties/field-picker.js +1 -1
- package/dist/lib/properties/flexible-table.es.js +1 -1
- package/dist/lib/properties/flexible-table.js +1 -1
- package/dist/lib/properties.es.js +1 -1
- package/dist/lib/properties.js +1 -1
- package/dist/lib/tooltip.es.js +1 -1
- package/dist/lib/tooltip.es.js.map +1 -1
- package/dist/lib/tooltip.js +1 -1
- package/dist/lib/tooltip.js.map +1 -1
- package/dist/styles/common-canvas.min.css +1 -1
- package/dist/styles/common-canvas.min.css.map +1 -1
- package/dist/toolbar-2bbc9542.js +2 -0
- package/dist/toolbar-2bbc9542.js.map +1 -0
- package/dist/toolbar-c173e22a.js +2 -0
- package/dist/toolbar-c173e22a.js.map +1 -0
- package/locales/common-properties/locales/de.json +2 -1
- package/locales/common-properties/locales/en.json +4 -1
- package/locales/common-properties/locales/eo.json +4 -1
- package/locales/common-properties/locales/es.json +3 -2
- package/locales/common-properties/locales/fr.json +2 -1
- package/locales/common-properties/locales/it.json +2 -1
- package/locales/common-properties/locales/ja.json +2 -1
- package/locales/common-properties/locales/ko.json +2 -1
- package/locales/common-properties/locales/pt-br.json +2 -1
- package/locales/common-properties/locales/sv.json +2 -1
- package/locales/common-properties/locales/zh-CN.json +5 -4
- package/locales/common-properties/locales/zh-TW.json +2 -1
- package/locales/notification-panel/locales/de.json +3 -0
- package/locales/notification-panel/locales/es.json +3 -0
- package/locales/notification-panel/locales/fr.json +3 -0
- package/locales/notification-panel/locales/it.json +3 -0
- package/locales/notification-panel/locales/ja.json +3 -0
- package/locales/notification-panel/locales/ko.json +3 -0
- package/locales/notification-panel/locales/pt-BR.json +3 -0
- package/locales/notification-panel/locales/sv.json +3 -0
- package/locales/notification-panel/locales/zh-CN.json +3 -0
- package/locales/notification-panel/locales/zh-TW.json +3 -0
- package/package.json +1 -1
- package/src/common-canvas/canvas-controller.js +31 -0
- package/src/common-canvas/cc-toolbar.jsx +5 -5
- package/src/common-canvas/constants/canvas-constants.js +2 -0
- package/src/common-canvas/svg-canvas-renderer.js +29 -14
- package/src/common-properties/actions/button/button.jsx +1 -3
- package/src/common-properties/actions/image/image.jsx +1 -3
- package/src/common-properties/common-properties.jsx +9 -6
- package/src/common-properties/components/control-item/control-item.jsx +1 -3
- package/src/common-properties/components/control-item/control-item.scss +2 -0
- package/src/common-properties/components/field-picker/field-picker.jsx +1 -3
- package/src/common-properties/components/truncated-content-tooltip/truncated-content-tooltip.jsx +11 -3
- package/src/common-properties/components/truncated-content-tooltip/truncated-content-tooltip.scss +1 -1
- package/src/common-properties/components/validation-message/validation-message.jsx +1 -2
- package/src/common-properties/components/virtualized-table/virtualized-table.jsx +18 -31
- package/src/common-properties/constants/constants.js +13 -1
- package/src/common-properties/constants/form-constants.js +2 -0
- package/src/common-properties/controls/abstract-table.jsx +7 -4
- package/src/common-properties/controls/checkbox/checkbox.jsx +1 -2
- package/src/common-properties/controls/checkboxset/checkboxset.jsx +1 -1
- package/src/common-properties/controls/control-factory.js +10 -0
- package/src/common-properties/controls/controls.scss +3 -1
- package/src/common-properties/controls/datepicker/datepicker.jsx +118 -0
- package/src/common-properties/controls/datepicker/datepicker.scss +23 -0
- package/src/common-properties/controls/datepicker/index.js +18 -0
- package/src/common-properties/controls/datepicker-range/datepicker-range.jsx +194 -0
- package/src/common-properties/controls/datepicker-range/datepicker-range.scss +21 -0
- package/src/common-properties/controls/datepicker-range/index.js +18 -0
- package/src/common-properties/controls/dropdown/dropdown.jsx +2 -1
- package/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx +3 -2
- package/src/common-properties/controls/expression/expression-builder/expression-select-operator.jsx +1 -3
- package/src/common-properties/controls/radioset/radioset.jsx +1 -1
- package/src/common-properties/controls/readonly/readonly.jsx +7 -0
- package/src/common-properties/controls/textarea/textarea.jsx +3 -2
- package/src/common-properties/controls/textfield/textfield.jsx +15 -17
- package/src/common-properties/controls/textfield/textfield.scss +1 -0
- package/src/common-properties/form/EditorForm.js +5 -1
- package/src/common-properties/form/Form.js +2 -8
- package/src/common-properties/panels/sub-panel/cell.jsx +1 -2
- package/src/common-properties/panels/summary/summary.jsx +12 -12
- package/src/common-properties/panels/summary/summary.scss +4 -10
- package/src/common-properties/properties-controller.js +15 -6
- package/src/common-properties/properties-main/properties-main.jsx +16 -8
- package/src/common-properties/ui-conditions/condition-ops/contains.js +1 -1
- package/src/common-properties/ui-conditions/condition-ops/greaterThan.js +22 -1
- package/src/common-properties/ui-conditions/condition-ops/isDateTime.js +9 -6
- package/src/common-properties/ui-conditions/condition-ops/isEmpty.js +7 -1
- package/src/common-properties/ui-conditions/condition-ops/isNotEmpty.js +5 -1
- package/src/common-properties/ui-conditions/condition-ops/lessThan.js +22 -1
- package/src/common-properties/ui-conditions/condition-ops/notContains.js +1 -1
- package/src/common-properties/ui-conditions/conditions-utils.js +5 -5
- package/src/common-properties/util/control-utils.js +18 -3
- package/src/common-properties/util/date-utils.js +152 -0
- package/src/common-properties/util/property-utils.js +27 -12
- package/src/notification-panel/notification-panel.scss +4 -2
- package/src/object-model/api-pipeline.js +1 -0
- package/src/object-model/object-model.js +12 -0
- package/src/object-model/redux/reducers/canvasinfo.js +8 -0
- package/src/themes/light.scss +16 -0
- package/src/toolbar/toolbar-action-item.jsx +9 -7
- package/src/tooltip/tooltip.jsx +28 -15
- package/src/tooltip/tooltip.scss +7 -7
- package/stats.html +1 -1
- package/dist/canvas-constants-ba465147.js +0 -2
- package/dist/canvas-constants-ba465147.js.map +0 -1
- package/dist/canvas-controller-01c28c3a.js.map +0 -1
- package/dist/canvas-controller-fc5bee30.js +0 -2
- package/dist/canvas-controller-fc5bee30.js.map +0 -1
- package/dist/common-canvas-151f18c0.js +0 -2
- package/dist/common-canvas-151f18c0.js.map +0 -1
- package/dist/common-canvas-39a5b48a.js +0 -2
- package/dist/common-canvas-39a5b48a.js.map +0 -1
- package/dist/common-properties-890b3edd.js +0 -2
- package/dist/common-properties-890b3edd.js.map +0 -1
- package/dist/common-properties-d9a48d36.js +0 -2
- package/dist/common-properties-d9a48d36.js.map +0 -1
- package/dist/extends-17f4b844.js +0 -7
- package/dist/extends-17f4b844.js.map +0 -1
- package/dist/extends-a6ea3ccf.js.map +0 -1
- package/dist/flexible-table-5ca1f2b9.js +0 -2
- package/dist/flexible-table-5ca1f2b9.js.map +0 -1
- package/dist/flexible-table-a51640b9.js +0 -2
- package/dist/flexible-table-a51640b9.js.map +0 -1
- package/dist/icon-4bfec280.js +0 -2
- package/dist/icon-4bfec280.js.map +0 -1
- package/dist/icon-b599856a.js +0 -2
- package/dist/icon-b599856a.js.map +0 -1
- package/dist/index-904463a1.js +0 -2
- package/dist/index-904463a1.js.map +0 -1
- package/dist/index-cf7580bf.js +0 -2
- package/dist/index-cf7580bf.js.map +0 -1
- package/dist/toolbar-93657677.js +0 -2
- package/dist/toolbar-93657677.js.map +0 -1
- package/dist/toolbar-ea057c6f.js +0 -2
- package/dist/toolbar-ea057c6f.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../createClass-be661622.js";import"../isArrayLikeObject-a9c7973b.js";export{C as default}from"../canvas-controller-
|
|
1
|
+
import"../createClass-be661622.js";import"../isArrayLikeObject-a9c7973b.js";export{C as default}from"../canvas-controller-d6aa7d4d.js";import"./command-stack.es.js";import"../canvas-constants-f4e65d4d.js";import"../canvas-logger-27d3180d.js";import"../getPrototypeOf-3751add9.js";import"../datarecord-metadata-v3-schema-ba1f2849.js";import"../en-7201b548.js";import"uuid";import"redux";import"jsonschema";import"@elyra/pipeline-schemas";import"immutable";
|
|
2
2
|
//# sourceMappingURL=canvas-controller.es.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";require("../createClass-826941b3.js"),require("../isArrayLikeObject-f3b27f64.js");var e=require("../canvas-controller-
|
|
1
|
+
"use strict";require("../createClass-826941b3.js"),require("../isArrayLikeObject-f3b27f64.js");var e=require("../canvas-controller-1bbd9c0e.js");require("./command-stack.js"),require("../canvas-constants-046e4126.js"),require("../canvas-logger-bb537fb3.js"),require("../getPrototypeOf-1e698126.js"),require("../datarecord-metadata-v3-schema-6a3754ce.js"),require("../en-a08356c8.js"),require("uuid"),require("redux"),require("jsonschema"),require("@elyra/pipeline-schemas"),require("immutable"),module.exports=e.CanvasController;
|
|
2
2
|
//# sourceMappingURL=canvas-controller.js.map
|
package/dist/lib/canvas.es.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{c as CommonCanvas}from"../common-canvas-
|
|
1
|
+
export{c as CommonCanvas}from"../common-canvas-9c735f47.js";export{C as CanvasController}from"../canvas-controller-d6aa7d4d.js";import"../createClass-be661622.js";import"../getPrototypeOf-3751add9.js";import"react";import"react-redux";import"react-intl";import"../isArrayLikeObject-a9c7973b.js";import"../icon-ea917a08.js";import"../extends-7d4f15b6.js";import"react-inlinesvg";import"@carbon/icons-react";import"../canvas-constants-f4e65d4d.js";import"../toolbar-c173e22a.js";import"../datarecord-metadata-v3-schema-ba1f2849.js";import"../en-7201b548.js";import"react-resize-detector";import"./tooltip.es.js";import"react-portal";import"carbon-components-react";import"uuid";import"../canvas-logger-27d3180d.js";import"./context-menu.es.js";import"react-contextmenu";import"../_baseForOwn-d38b560e.js";import"./command-stack.es.js";import"immutable";import"redux";import"jsonschema";import"@elyra/pipeline-schemas";
|
|
2
2
|
//# sourceMappingURL=canvas.es.js.map
|
package/dist/lib/canvas.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../common-canvas-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../common-canvas-a02e75c1.js"),r=require("../canvas-controller-1bbd9c0e.js");require("../createClass-826941b3.js"),require("../getPrototypeOf-1e698126.js"),require("react"),require("react-redux"),require("react-intl"),require("../isArrayLikeObject-f3b27f64.js"),require("../icon-221bb2e5.js"),require("../extends-d144eab9.js"),require("react-inlinesvg"),require("@carbon/icons-react"),require("../canvas-constants-046e4126.js"),require("../toolbar-2bbc9542.js"),require("../datarecord-metadata-v3-schema-6a3754ce.js"),require("../en-a08356c8.js"),require("react-resize-detector"),require("./tooltip.js"),require("react-portal"),require("carbon-components-react"),require("uuid"),require("../canvas-logger-bb537fb3.js"),require("./context-menu.js"),require("react-contextmenu"),require("../_baseForOwn-7d4e8506.js"),require("./command-stack.js"),require("immutable"),require("redux"),require("jsonschema"),require("@elyra/pipeline-schemas"),exports.CommonCanvas=e.commonCanvas,exports.CanvasController=r.CanvasController;
|
|
2
2
|
//# sourceMappingURL=canvas.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,a as t}from"../createClass-be661622.js";import{_ as n,a as o,b as r,c}from"../getPrototypeOf-3751add9.js";import i from"react";import{_ as a,C as l}from"../canvas-constants-
|
|
1
|
+
import{_ as e,a as t}from"../createClass-be661622.js";import{_ as n,a as o,b as r,c}from"../getPrototypeOf-3751add9.js";import i from"react";import{_ as a,C as l}from"../canvas-constants-f4e65d4d.js";import{_ as u}from"../extends-7d4f15b6.js";import{MenuItem as s,SubMenu as d}from"react-contextmenu";import{I as m}from"../icon-ea917a08.js";import{L as f}from"../canvas-logger-27d3180d.js";import"react-inlinesvg";import"@carbon/icons-react";function p(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,c=o(e);if(t){var i=o(this).constructor;n=Reflect.construct(c,arguments,i)}else n=c.apply(this,arguments);return r(this,n)}}var h=function(o){n(a,o);var r=p(a);function a(t){var n;return e(this,a),(n=r.call(this,t)).logger=new f("CC-ContextMenu"),n.onClick=n.onClick.bind(c(n)),n}return t(a,[{key:"onClick",value:function(e){var t=e.target.dataset.color;this.props.clickActionHandler(t)}},{key:"render",value:function(){return this.logger.log("render"),i.createElement("div",{className:"color-picker-panel",onClick:this.onClick},i.createElement("div",{tabIndex:"0","data-color":"bkg-col-white-0",className:"color-picker-item white-0"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-yellow-20",className:"color-picker-item yellow-20"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-gray-20",className:"color-picker-item gray-20"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-green-20",className:"color-picker-item green-20"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-teal-20",className:"color-picker-item teal-20"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-cyan-20",className:"color-picker-item cyan-20"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-red-50",className:"color-picker-item red-50"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-orange-40",className:"color-picker-item orange-40"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-gray-50",className:"color-picker-item gray-50"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-green-50",className:"color-picker-item green-50"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-teal-50",className:"color-picker-item teal-50"}),i.createElement("div",{tabIndex:"0","data-color":"bkg-col-cyan-50",className:"color-picker-item cyan-50"}))}}]),a}(i.Component);function v(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,c=o(e);if(t){var i=o(this).constructor;n=Reflect.construct(c,arguments,i)}else n=c.apply(this,arguments);return r(this,n)}}var k=function(o){n(f,o);var r=v(f);function f(t){var n;return e(this,f),(n=r.call(this,t)).state={},n.itemSelected=n.itemSelected.bind(c(n)),n.colorClicked=n.colorClicked.bind(c(n)),n}return t(f,[{key:"onContextMenu",value:function(e){e.preventDefault()}},{key:"itemSelected",value:function(e,t){this.props.contextHandler(e),t&&t.stopPropagation()}},{key:"colorClicked",value:function(e){this.props.contextHandler("colorSelectedObjects",{color:e})}},{key:"calculateMenuSize",value:function(e){for(var t=0,n=0;n<e.length;++n){e[n].divider&&t++}return{height:30*(e.length-t)+1*t,width:160}}},{key:"calculateMenuPos",value:function(e,t,n){var o={x:e.x,y:e.y};return e.y+t.height>n.height&&(o.y=n.height-t.height-5,o.y<0&&(o.y=0)),e.x+t.width>n.width&&(o.x-=t.width),o.x+=1,o.y+=1,o}},{key:"areAllSubmenuItemsDisabled",value:function(e){var t=0,n=0;return e.forEach((function(e){e.divider||t++,!1===e.enable&&n++})),n===t}},{key:"buildMenu",value:function(e,t,n,o){for(var r={className:"contextmenu-divider"},c=[],a=0,l=!1,d=0;d<e.length;++d){var m=e[d].divider,f=e[d].submenu;if(m)l||(c.push(i.createElement(s,{attributes:r,key:d+1,onClick:function(){},divider:!0})),a+=1,l=!0);else if(f)if(l=!1,"colorPicker"===e[d].menu){var p={width:160,height:50},h=this.buildColorPickerPanel(),v=this.buildSubMenu(e,d,h,a,n,t,p,o,!1);c.push(v),a+=30}else{var k={disabled:this.areAllSubmenuItemsDisabled(e[d].menu)},y=this.calculateMenuSize(e[d].menu),b=this.buildMenu(e[d].menu,t,n,o),g=this.buildSubMenu(e,d,b,a,n,t,y,o,k);c.push(g),a+=30}else{l=!1;var x={disabled:!1===e[d].enable};c.push(i.createElement(s,u({onClick:this.itemSelected.bind(null,e[d].action),key:d+1},x),e[d].label)),a+=30}}return c}},{key:"buildColorPickerPanel",value:function(){return i.createElement(h,a({clickActionHandler:this.colorPickHandler},"clickActionHandler",this.colorClicked))}},{key:"buildSubMenu",value:function(e,t,n,o,r,c,a,s,f){var p=this.buildRtlState(r,c,a,s),h=this.buildSubMenuPosStyle(o,r,a,s),v=i.createElement(m,{type:l.CHEVRONARROWS.RIGHT,disabled:!1,className:"react-contextmenu-submenu-icon"}),k=i.createElement("div",null,e[t].label,v," ");return i.createElement(d,u({title:k,key:t+1,className:"contextmenu-submenu",rtl:p},f),i.createElement("div",{key:t+1,style:h,className:"context-menu-popover"},n))}},{key:"buildRtlState",value:function(e,t,n,o){return e.x+t.width+n.width>o.right}},{key:"buildSubMenuPosStyle",value:function(e,t,n,o){var r=o.bottom-(t.y+e+n.height);return{top:(r>0?0:r-5)+"px"}}},{key:"render",value:function(){var e=this.calculateMenuSize(this.props.menuDefinition),t=this.calculateMenuPos(this.props.mousePos,e,this.props.canvasRect),n={left:t.x+"px",top:t.y+"px"},o=this.buildMenu(this.props.menuDefinition,e,t,this.props.canvasRect);return i.createElement("div",{id:"context-menu-popover",className:"context-menu-popover",style:n,onContextMenu:this.onContextMenu},o)}}]),f}(i.Component);function y(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,c=o(e);if(t){var i=o(this).constructor;n=Reflect.construct(c,arguments,i)}else n=c.apply(this,arguments);return r(this,n)}}var b=function(o){n(a,o);var r=y(a);function a(t){var n;return e(this,a),(n=r.call(this,t)).state={},n.contextMenuClicked=n.contextMenuClicked.bind(c(n)),n.handleClickOutside=n.handleClickOutside.bind(c(n)),n}return t(a,[{key:"componentDidMount",value:function(){document.addEventListener("click",this.handleClickOutside,!0)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("click",this.handleClickOutside,!0)}},{key:"getCanvasRect",value:function(){var e=document.getElementById(this.props.containingDivId).getBoundingClientRect();return{top:0,bottom:e.bottom-e.top,left:0,right:e.right-e.left,height:e.height,width:e.width}}},{key:"handleClickOutside",value:function(e){e.ctrlKey?e.stopPropagation():this.isOverContextMenu(e)||this.isOverEllipsisButton(e)||(this.props.stopPropagation&&e.stopPropagation(),this.props.closeContextMenu())}},{key:"isOverContextMenu",value:function(e){var t=document.getElementById("context-menu-popover");return!t||t.contains(e.target)}},{key:"isOverEllipsisButton",value:function(e){for(var t=document.getElementsByClassName("d3-node-ellipsis-group"),n=!1,o=0;o<t.length;o++)!1===n&&t[o].contains(e.target)&&(n=!0);return n}},{key:"contextMenuClicked",value:function(e,t){this.props.contextMenuActionHandler(e,t)}},{key:"render",value:function(){return i.createElement(k,{contextHandler:this.contextMenuClicked,menuDefinition:this.props.contextMenuDef,canvasRect:this.getCanvasRect(),mousePos:this.props.contextMenuPos})}}]),a}(i.Component);export{b as default};
|
|
2
2
|
//# sourceMappingURL=context-menu.es.js.map
|
package/dist/lib/context-menu.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../createClass-826941b3.js"),t=require("../getPrototypeOf-1e698126.js"),n=require("react"),r=require("../canvas-constants-
|
|
1
|
+
"use strict";var e=require("../createClass-826941b3.js"),t=require("../getPrototypeOf-1e698126.js"),n=require("react"),r=require("../canvas-constants-046e4126.js"),o=require("../extends-d144eab9.js"),i=require("react-contextmenu"),l=require("../icon-221bb2e5.js"),c=require("../canvas-logger-bb537fb3.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-inlinesvg"),require("@carbon/icons-react");var u=a(n);function s(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=t._getPrototypeOf(e);if(n){var i=t._getPrototypeOf(this).constructor;r=Reflect.construct(o,arguments,i)}else r=o.apply(this,arguments);return t._possibleConstructorReturn(this,r)}}var d=function(n){t._inherits(o,n);var r=s(o);function o(n){var i;return e._classCallCheck(this,o),(i=r.call(this,n)).logger=new c.Logger("CC-ContextMenu"),i.onClick=i.onClick.bind(t._assertThisInitialized(i)),i}return e._createClass(o,[{key:"onClick",value:function(e){var t=e.target.dataset.color;this.props.clickActionHandler(t)}},{key:"render",value:function(){return this.logger.log("render"),u.default.createElement("div",{className:"color-picker-panel",onClick:this.onClick},u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-white-0",className:"color-picker-item white-0"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-yellow-20",className:"color-picker-item yellow-20"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-gray-20",className:"color-picker-item gray-20"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-green-20",className:"color-picker-item green-20"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-teal-20",className:"color-picker-item teal-20"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-cyan-20",className:"color-picker-item cyan-20"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-red-50",className:"color-picker-item red-50"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-orange-40",className:"color-picker-item orange-40"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-gray-50",className:"color-picker-item gray-50"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-green-50",className:"color-picker-item green-50"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-teal-50",className:"color-picker-item teal-50"}),u.default.createElement("div",{tabIndex:"0","data-color":"bkg-col-cyan-50",className:"color-picker-item cyan-50"}))}}]),o}(u.default.Component);function f(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=t._getPrototypeOf(e);if(n){var i=t._getPrototypeOf(this).constructor;r=Reflect.construct(o,arguments,i)}else r=o.apply(this,arguments);return t._possibleConstructorReturn(this,r)}}var h=function(n){t._inherits(a,n);var c=f(a);function a(n){var r;return e._classCallCheck(this,a),(r=c.call(this,n)).state={},r.itemSelected=r.itemSelected.bind(t._assertThisInitialized(r)),r.colorClicked=r.colorClicked.bind(t._assertThisInitialized(r)),r}return e._createClass(a,[{key:"onContextMenu",value:function(e){e.preventDefault()}},{key:"itemSelected",value:function(e,t){this.props.contextHandler(e),t&&t.stopPropagation()}},{key:"colorClicked",value:function(e){this.props.contextHandler("colorSelectedObjects",{color:e})}},{key:"calculateMenuSize",value:function(e){for(var t=0,n=0;n<e.length;++n){e[n].divider&&t++}return{height:30*(e.length-t)+1*t,width:160}}},{key:"calculateMenuPos",value:function(e,t,n){var r={x:e.x,y:e.y};return e.y+t.height>n.height&&(r.y=n.height-t.height-5,r.y<0&&(r.y=0)),e.x+t.width>n.width&&(r.x-=t.width),r.x+=1,r.y+=1,r}},{key:"areAllSubmenuItemsDisabled",value:function(e){var t=0,n=0;return e.forEach((function(e){e.divider||t++,!1===e.enable&&n++})),n===t}},{key:"buildMenu",value:function(e,t,n,r){for(var l={className:"contextmenu-divider"},c=[],a=0,s=!1,d=0;d<e.length;++d){var f=e[d].divider,h=e[d].submenu;if(f)s||(c.push(u.default.createElement(i.MenuItem,{attributes:l,key:d+1,onClick:function(){},divider:!0})),a+=1,s=!0);else if(h)if(s=!1,"colorPicker"===e[d].menu){var p={width:160,height:50},m=this.buildColorPickerPanel(),v=this.buildSubMenu(e,d,m,a,n,t,p,r,!1);c.push(v),a+=30}else{var k={disabled:this.areAllSubmenuItemsDisabled(e[d].menu)},y=this.calculateMenuSize(e[d].menu),b=this.buildMenu(e[d].menu,t,n,r),g=this.buildSubMenu(e,d,b,a,n,t,y,r,k);c.push(g),a+=30}else{s=!1;var C={disabled:!1===e[d].enable};c.push(u.default.createElement(i.MenuItem,o._extends({onClick:this.itemSelected.bind(null,e[d].action),key:d+1},C),e[d].label)),a+=30}}return c}},{key:"buildColorPickerPanel",value:function(){return u.default.createElement(d,r._defineProperty({clickActionHandler:this.colorPickHandler},"clickActionHandler",this.colorClicked))}},{key:"buildSubMenu",value:function(e,t,n,c,a,s,d,f,h){var p=this.buildRtlState(a,s,d,f),m=this.buildSubMenuPosStyle(c,a,d,f),v=u.default.createElement(l.Icon,{type:r.CONTEXT_MENU_CARBON_ICONS.CHEVRONARROWS.RIGHT,disabled:!1,className:"react-contextmenu-submenu-icon"}),k=u.default.createElement("div",null,e[t].label,v," ");return u.default.createElement(i.SubMenu,o._extends({title:k,key:t+1,className:"contextmenu-submenu",rtl:p},h),u.default.createElement("div",{key:t+1,style:m,className:"context-menu-popover"},n))}},{key:"buildRtlState",value:function(e,t,n,r){return e.x+t.width+n.width>r.right}},{key:"buildSubMenuPosStyle",value:function(e,t,n,r){var o=r.bottom-(t.y+e+n.height);return{top:(o>0?0:o-5)+"px"}}},{key:"render",value:function(){var e=this.calculateMenuSize(this.props.menuDefinition),t=this.calculateMenuPos(this.props.mousePos,e,this.props.canvasRect),n={left:t.x+"px",top:t.y+"px"},r=this.buildMenu(this.props.menuDefinition,e,t,this.props.canvasRect);return u.default.createElement("div",{id:"context-menu-popover",className:"context-menu-popover",style:n,onContextMenu:this.onContextMenu},r)}}]),a}(u.default.Component);function p(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=t._getPrototypeOf(e);if(n){var i=t._getPrototypeOf(this).constructor;r=Reflect.construct(o,arguments,i)}else r=o.apply(this,arguments);return t._possibleConstructorReturn(this,r)}}var m=function(n){t._inherits(o,n);var r=p(o);function o(n){var i;return e._classCallCheck(this,o),(i=r.call(this,n)).state={},i.contextMenuClicked=i.contextMenuClicked.bind(t._assertThisInitialized(i)),i.handleClickOutside=i.handleClickOutside.bind(t._assertThisInitialized(i)),i}return e._createClass(o,[{key:"componentDidMount",value:function(){document.addEventListener("click",this.handleClickOutside,!0)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("click",this.handleClickOutside,!0)}},{key:"getCanvasRect",value:function(){var e=document.getElementById(this.props.containingDivId).getBoundingClientRect();return{top:0,bottom:e.bottom-e.top,left:0,right:e.right-e.left,height:e.height,width:e.width}}},{key:"handleClickOutside",value:function(e){e.ctrlKey?e.stopPropagation():this.isOverContextMenu(e)||this.isOverEllipsisButton(e)||(this.props.stopPropagation&&e.stopPropagation(),this.props.closeContextMenu())}},{key:"isOverContextMenu",value:function(e){var t=document.getElementById("context-menu-popover");return!t||t.contains(e.target)}},{key:"isOverEllipsisButton",value:function(e){for(var t=document.getElementsByClassName("d3-node-ellipsis-group"),n=!1,r=0;r<t.length;r++)!1===n&&t[r].contains(e.target)&&(n=!0);return n}},{key:"contextMenuClicked",value:function(e,t){this.props.contextMenuActionHandler(e,t)}},{key:"render",value:function(){return u.default.createElement(h,{contextHandler:this.contextMenuClicked,menuDefinition:this.props.contextMenuDef,canvasRect:this.getCanvasRect(),mousePos:this.props.contextMenuPos})}}]),o}(u.default.Component);module.exports=m;
|
|
2
2
|
//# sourceMappingURL=context-menu.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{F as default}from"../../index-
|
|
1
|
+
export{F as default}from"../../index-cc43e17c.js";import"../../createClass-be661622.js";import"../../getPrototypeOf-3751add9.js";import"../../isArrayLikeObject-a9c7973b.js";import"../../flexible-table-f5d55fe4.js";import"../../extends-7d4f15b6.js";import"react";import"react-intl";import"react-dom";import"carbon-components-react";import"../../_baseForOwn-d38b560e.js";import"react-virtualized";import"react-draggable";import"@carbon/icons-react";import"../tooltip.es.js";import"react-portal";import"uuid";import"react-resize-detector";import"../../canvas-constants-f4e65d4d.js";import"../../en-7201b548.js";import"../../icon-ea917a08.js";import"react-inlinesvg";
|
|
2
2
|
//# sourceMappingURL=field-picker.es.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../index-
|
|
1
|
+
"use strict";var e=require("../../index-9a4fa2be.js");require("../../createClass-826941b3.js"),require("../../getPrototypeOf-1e698126.js"),require("../../isArrayLikeObject-f3b27f64.js"),require("../../flexible-table-8219d7a0.js"),require("../../extends-d144eab9.js"),require("react"),require("react-intl"),require("react-dom"),require("carbon-components-react"),require("../../_baseForOwn-7d4e8506.js"),require("react-virtualized"),require("react-draggable"),require("@carbon/icons-react"),require("../tooltip.js"),require("react-portal"),require("uuid"),require("react-resize-detector"),require("../../canvas-constants-046e4126.js"),require("../../en-a08356c8.js"),require("../../icon-221bb2e5.js"),require("react-inlinesvg"),module.exports=e.FieldPicker;
|
|
2
2
|
//# sourceMappingURL=field-picker.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{F as t}from"../../flexible-table-
|
|
1
|
+
import{F as t}from"../../flexible-table-f5d55fe4.js";export{F as default}from"../../flexible-table-f5d55fe4.js";import"../../extends-7d4f15b6.js";import"../../createClass-be661622.js";import"../../getPrototypeOf-3751add9.js";import"../../isArrayLikeObject-a9c7973b.js";import"react";import"react-intl";import"react-dom";import"carbon-components-react";import"../../_baseForOwn-d38b560e.js";import"react-virtualized";import"react-draggable";import"@carbon/icons-react";import"../tooltip.es.js";import"react-portal";import"uuid";import"react-resize-detector";
|
|
2
2
|
//# sourceMappingURL=flexible-table.es.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../flexible-table-
|
|
1
|
+
"use strict";var e=require("../../flexible-table-8219d7a0.js");require("../../extends-d144eab9.js"),require("../../createClass-826941b3.js"),require("../../getPrototypeOf-1e698126.js"),require("../../isArrayLikeObject-f3b27f64.js"),require("react"),require("react-intl"),require("react-dom"),require("carbon-components-react"),require("../../_baseForOwn-7d4e8506.js"),require("react-virtualized"),require("react-draggable"),require("@carbon/icons-react"),require("../tooltip.js"),require("react-portal"),require("uuid"),require("react-resize-detector"),module.exports=e.FlexibleTable;
|
|
2
2
|
//# sourceMappingURL=flexible-table.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{c as CommonProperties,P as PropertiesController}from"../common-properties-
|
|
1
|
+
export{c as CommonProperties,P as PropertiesController}from"../common-properties-237b46d6.js";export{F as FlexibleTable}from"../flexible-table-f5d55fe4.js";export{F as FieldPicker}from"../index-cc43e17c.js";import"../createClass-be661622.js";import"../getPrototypeOf-3751add9.js";import"react";import"../en-7201b548.js";import"../isArrayLikeObject-a9c7973b.js";import"../datarecord-metadata-v3-schema-ba1f2849.js";import"carbon-components-react";import"../extends-7d4f15b6.js";import"react-portal";import"react-redux";import"@carbon/icons-react";import"react-dom";import"../icon-ea917a08.js";import"react-inlinesvg";import"../canvas-constants-f4e65d4d.js";import"uuid";import"./tooltip.es.js";import"redux";import"seedrandom";import"./command-stack.es.js";import"immutable";import"react-intl";import"date-fns";import"prop-types";import"../toolbar-c173e22a.js";import"react-resize-detector";import"react-codemirror2";import"jsonschema";import"../_baseForOwn-d38b560e.js";import"react-virtualized";import"react-draggable";
|
|
2
2
|
//# sourceMappingURL=properties.es.js.map
|
package/dist/lib/properties.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../common-properties-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../common-properties-ad60cdab.js"),r=require("../flexible-table-8219d7a0.js"),i=require("../index-9a4fa2be.js");require("../createClass-826941b3.js"),require("../getPrototypeOf-1e698126.js"),require("react"),require("../en-a08356c8.js"),require("../isArrayLikeObject-f3b27f64.js"),require("../datarecord-metadata-v3-schema-6a3754ce.js"),require("carbon-components-react"),require("../extends-d144eab9.js"),require("react-portal"),require("react-redux"),require("@carbon/icons-react"),require("react-dom"),require("../icon-221bb2e5.js"),require("react-inlinesvg"),require("../canvas-constants-046e4126.js"),require("uuid"),require("./tooltip.js"),require("redux"),require("seedrandom"),require("./command-stack.js"),require("immutable"),require("react-intl"),require("date-fns"),require("prop-types"),require("../toolbar-2bbc9542.js"),require("react-resize-detector"),require("react-codemirror2"),require("jsonschema"),require("../_baseForOwn-7d4e8506.js"),require("react-virtualized"),require("react-draggable"),exports.CommonProperties=e.commonProperties,exports.PropertiesController=e.PropertiesController,exports.FlexibleTable=r.FlexibleTable,exports.FieldPicker=i.FieldPicker;
|
|
2
2
|
//# sourceMappingURL=properties.js.map
|
package/dist/lib/tooltip.es.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,a as e,b as i}from"../createClass-be661622.js";import{_ as o,a as l,b as s,c as n}from"../getPrototypeOf-3751add9.js";import r from"react";import{Portal as p}from"react-portal";import{Link as h}from"carbon-components-react";function
|
|
1
|
+
import{_ as t,a as e,b as i}from"../createClass-be661622.js";import{_ as o,a as l,b as s,c as n}from"../getPrototypeOf-3751add9.js";import r from"react";import{Portal as p}from"react-portal";import{Link as h}from"carbon-components-react";import{v4 as a}from"uuid";function u(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,o=l(t);if(e){var n=l(this).constructor;i=Reflect.construct(o,arguments,n)}else i=o.apply(this,arguments);return s(this,i)}}var c=function(l){o(c,l);var s=u(c);function c(e){var i;return t(this,c),(i=s.call(this,e)).state={isTooltipVisible:!1},i.uuid=a(),i.pendingTooltip=null,i.hideTooltipOnScrollAndResize=i.hideTooltipOnScrollAndResize.bind(n(i)),i}return e(c,[{key:"componentDidMount",value:function(){window.addEventListener("scroll",this.hideTooltipOnScrollAndResize,!0),window.addEventListener("resize",this.hideTooltipOnScrollAndResize,!0),this.props.targetObj&&this.setTooltipVisible(!0)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.hideTooltipOnScrollAndResize,!0),window.removeEventListener("resize",this.hideTooltipOnScrollAndResize,!0),this.pendingTooltip&&clearTimeout(this.pendingTooltip)}},{key:"setTooltipVisible",value:function(t){if((!this.showTooltip()||!t&&this.pendingTooltip)&&(clearTimeout(this.pendingTooltip),this.pendingTooltip=null,this.setState({isTooltipVisible:!1})),this.showTooltip()){var e=document.querySelector("[data-id='".concat(this.uuid,"-").concat(this.props.id,"']"));if(this.pendingTooltip=null,this.setState({isTooltipVisible:t}),t){var i=null;(i=this.props.targetObj?this.props.targetObj:document.querySelector("[data-id='".concat(this.uuid,"-").concat(this.props.id,"-trigger']")))&&e&&this.updateTooltipLayout(e,i,e.getAttribute("direction"))}}}},{key:"getStyleValue",value:function(t){return t+"px"}},{key:"getNewDirection",value:function(t){var e;switch(t){case"top":e="bottom";break;case"bottom":e="top";break;case"left":e="right";break;default:e="left"}return e}},{key:"showTooltip",value:function(){var t=this.canDisplayFullText(this.triggerRef);return!this.props.disable&&!this.props.showToolTipIfTruncated||!this.props.disable&&this.props.showToolTipIfTruncated&&!t}},{key:"canDisplayFullText",value:function(t){var e=this.props.truncatedRef?this.props.truncatedRef:t;if(e){var i=e.firstChild&&e.firstChild.scrollWidth&&0!==e.firstChild.scrollWidth?e.firstChild.scrollWidth:e.scrollWidth,o=e.firstChild&&e.firstChild.offsetWidth&&e.firstChild.offsetWidth||0,l=i<=(0!==o&&o<e.offsetWidth?o:e.offsetWidth);return l}return!1}},{key:"showTooltipWithDelay",value:function(){if(!this.pendingTooltip&&this.showTooltip()){var t=this;this.pendingTooltip=setTimeout((function(){t.setTooltipVisible(!0)}),this.props.delay)}}},{key:"updateTooltipLayout",value:function(t,e,i){var o=i,l=document.documentElement.clientWidth,s=document.documentElement.clientHeight,n=e.getBoundingClientRect(),r=t.querySelector("svg"),p=r.getBoundingClientRect();if(t.style.left=this.getStyleValue(n.left),t.style.top=this.getStyleValue(n.top),this.props.mousePos)this.updateLocationBasedOnMousePos(t,this.props.mousePos,i);else{if("top"===o||"bottom"===o){var h=n.left;t.offsetWidth>n.width?(h-=(t.offsetWidth-n.width)/2)<0&&(h=2):t.offsetWidth<n.width&&(h+=(n.width-t.offsetWidth)/2),t.style.left=this.getStyleValue(h),h+t.offsetWidth>l&&(t.style.left=this.getStyleValue(l-t.offsetWidth))}else if("left"===o)for(;t.offsetLeft+t.offsetWidth+p.width>Math.round(n.left);)t.style.left=this.getStyleValue(n.left-t.offsetWidth-p.width);else"right"===o&&(t.style.left=this.getStyleValue(n.right+p.width));if("top"===o)t.style.top=this.getStyleValue(n.top-p.height-t.offsetHeight);else if("bottom"===o)t.style.top=this.getStyleValue(n.bottom+p.height);else if("left"===o||"right"===o){var a=n.top;t.offsetHeight>n.height?(a-=(t.offsetHeight-n.height)/2)<0&&(a=n.top):t.offsetHeight<n.height&&(a+=(n.height-t.offsetHeight)/2),t.style.top=this.getStyleValue(a+1),s-t.offsetHeight<n.top&&(t.style.top=this.getStyleValue(s-t.offsetHeight))}"top"===o||"bottom"===o?r.style.left=this.getStyleValue(n.left-t.getBoundingClientRect().left+e.getBoundingClientRect().width/2-p.width/2+1):"left"===o?r.style.left=this.getStyleValue(t.offsetWidth-3):"right"===o&&(r.style.left=this.getStyleValue(2-p.width)),"top"===o?r.style.top=this.getStyleValue(t.offsetHeight-5):"bottom"===o?r.style.top="-11px":"left"!==o&&"right"!==o||(r.style.top=this.getStyleValue(n.top-t.getBoundingClientRect().top+e.offsetHeight/2-p.height/2))}if(this.isOutOfBounds(t)&&t.getAttribute("direction")===o){var u=this.getNewDirection(o);return this.updateTooltipLayout(t,e,u),void t.setAttribute("direction",u)}}},{key:"updateLocationBasedOnMousePos",value:function(t,e,i){var o=i,l=document.documentElement.clientWidth,s=document.documentElement.clientHeight,n=t.querySelector("svg"),r=n.getBoundingClientRect(),p=this.props.mousePos.x,h=this.props.mousePos.y;if("top"===o||"bottom"===o){var a=p-t.offsetWidth/2;l-t.offsetWidth<a?a=l-t.offsetWidth:a<0&&(a=2),t.style.left=this.getStyleValue(a)}else"left"===o?t.style.left=this.getStyleValue(p-t.offsetWidth-r.width-5):"right"===o&&(t.style.left=this.getStyleValue(p+r.width+5));if("top"===o)t.style.top=this.getStyleValue(h-r.height-t.offsetHeight);else if("bottom"===o)t.style.top=this.getStyleValue(h+2*r.height);else if("left"===o||"right"===o){var u=h-t.offsetHeight/2;s-t.offsetHeight<u?u=s-t.offsetHeight:u<0&&(u=2),t.style.top=this.getStyleValue(u+1)}"top"===o||"bottom"===o?n.style.left=this.getStyleValue(p-t.getBoundingClientRect().left-r.width/2):"left"===o?n.style.left=this.getStyleValue(t.offsetWidth-3):"right"===o&&(n.style.left=this.getStyleValue(2-r.width)),"top"===o?n.style.top=this.getStyleValue(t.offsetHeight-5):"bottom"===o?n.style.top="-11px":"left"!==o&&"right"!==o||(n.style.top=this.getStyleValue(h-t.getBoundingClientRect().top-r.height/2))}},{key:"isOutOfBounds",value:function(t){var e=parseFloat(t.style.left),i=parseFloat(t.style.top);return e+t.offsetWidth>document.documentElement.clientWidth||e<0||i<0||i+t.offsetHeight>document.documentElement.clientHeight}},{key:"toggleTooltipOnClick",value:function(t){t.stopPropagation(),t.preventDefault(),this.state.isTooltipVisible?this.setTooltipVisible(!1):this.setTooltipVisible(!0)}},{key:"hideTooltipOnScrollAndResize",value:function(t){this.state.isTooltipVisible&&this.setTooltipVisible(!1)}},{key:"tooltipLinkOnClick",value:function(t){window.open(t,"_blank","noopener")}},{key:"render",value:function(){var t=this,e=null,o=null;if(this.props.children){o=r.createElement("div",{"data-id":"".concat(this.uuid,"-").concat(this.props.id,"-trigger"),className:"tooltip-trigger",onMouseOver:this.props.showToolTipOnClick?null:function(){return t.setTooltipVisible(!0)},onMouseLeave:this.props.showToolTipOnClick?null:function(){return t.setTooltipVisible(!1)},onMouseDown:this.props.showToolTipOnClick?null:function(){return t.setTooltipVisible(!1)},onClick:this.props.showToolTipOnClick?function(e){return t.toggleTooltipOnClick(e)}:null,onFocus:this.props.showToolTipOnClick?function(){return t.showTooltipWithDelay()}:null,onBlur:this.props.showToolTipOnClick?function(e){null!==e.relatedTarget&&t.setTooltipVisible(!1)}:null,tabIndex:this.props.showToolTipOnClick?0:null,role:this.props.showToolTipOnClick?"button":null,"aria-labelledby":"".concat(this.uuid,"-").concat(this.props.id),"aria-expanded":this.props.showToolTipOnClick?this.state.isTooltipVisible:null,"aria-controls":this.props.showToolTipOnClick?"".concat(this.uuid,"-").concat(this.props.id):null,ref:function(e){return t.triggerRef=e}},this.props.children)}"string"==typeof this.props.tip?e=r.createElement("span",{className:"tooltipContainer"},this.props.tip):"object"===i(this.props.tip)?e=r.createElement("div",{className:"tooltipContainer"},this.props.tip):"function"==typeof this.props.tip&&(e=this.props.tip());var l="common-canvas-tooltip";this.props.className&&(l+=" "+this.props.className);var s=null;if(this.state.isTooltipVisible&&this.props.tooltipLinkHandler&&this.props.link){var n=this.props.tooltipLinkHandler(this.props.link);"object"===i(n)&&n.label&&n.url&&(s=r.createElement(h,{className:"tooltip-link",id:this.props.link.id,onClick:this.tooltipLinkOnClick.bind(this,n.url)},n.label))}var a=null;return(e||s)&&(a=r.createElement(p,null,r.createElement("div",{role:"tooltip",id:"".concat(this.uuid,"-").concat(this.props.id),"data-id":"".concat(this.uuid,"-").concat(this.props.id),className:l,"aria-hidden":!this.state.isTooltipVisible,direction:this.props.direction},r.createElement("svg",{className:"tipArrow",x:"0px",y:"0px",viewBox:"0 0 9.1 16.1"},r.createElement("polyline",{points:"9.1,15.7 1.4,8.1 9.1,0.5"}),r.createElement("polygon",{points:"8.1,16.1 0,8.1 8.1,0 8.1,1.4 1.4,8.1 8.1,14.7"})),e,s))),r.createElement("div",{className:"tooltip-container"},o,a)}}]),c}(r.Component);c.defaultProps={delay:200,direction:"bottom",showToolTipIfTruncated:!1,showToolTipOnClick:!1};export{c as default};
|
|
2
2
|
//# sourceMappingURL=tooltip.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.es.js","sources":["../../src/tooltip/tooltip.jsx"],"sourcesContent":["/*\n * Copyright 2017-2022 Elyra Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/*\n\tThis code is a modified version from portal-common-api for the Elyra canvas tooltips\n*/\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Portal } from \"react-portal\";\nimport { Link } from \"carbon-components-react\";\n\nclass ToolTip extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tisTooltipVisible: false\n\t\t};\n\n\t\tthis.pendingTooltip = null;\n\t\tthis.hideTooltipOnScrollAndResize = this.hideTooltipOnScrollAndResize.bind(this);\n\t}\n\n\tcomponentDidMount() {\n\t\twindow.addEventListener(\"scroll\", this.hideTooltipOnScrollAndResize, true);\n\t\twindow.addEventListener(\"resize\", this.hideTooltipOnScrollAndResize, true);\n\t\tif (this.props.targetObj) {\n\t\t\tthis.setTooltipVisible(true);\n\t\t}\n\t}\n\n\tcomponentWillUnmount() {\n\t\twindow.removeEventListener(\"scroll\", this.hideTooltipOnScrollAndResize, true);\n\t\twindow.removeEventListener(\"resize\", this.hideTooltipOnScrollAndResize, true);\n\t\tif (this.pendingTooltip) {\n\t\t\tclearTimeout(this.pendingTooltip);\n\t\t}\n\t}\n\n\tsetTooltipVisible(visible) {\n\t\t// clear the display timer if set\n\t\tif (!this.showTooltip() || (!visible && this.pendingTooltip)) {\n\t\t\tclearTimeout(this.pendingTooltip);\n\t\t\tthis.pendingTooltip = null;\n\t\t\tthis.setState({\n\t\t\t\tisTooltipVisible: false\n\t\t\t});\n\t\t}\n\n\n\t\tif (this.showTooltip()) {\n\t\t\tconst tooltip = document.querySelector(\"[data-id='\" + this.props.id + \"']\");\n\t\t\tthis.pendingTooltip = null;\n\t\t\tthis.setState({\n\t\t\t\tisTooltipVisible: visible\n\t\t\t});\n\t\t\t// updates the tooltip display\n\t\t\tif (visible) {\n\t\t\t\tlet tooltipTrigger = null;\n\t\t\t\tif (this.props.targetObj) {\n\t\t\t\t\ttooltipTrigger = this.props.targetObj;\n\t\t\t\t} else {\n\t\t\t\t\ttooltipTrigger = document.querySelector(\"[data-id='\" + this.props.id + \"-trigger']\");\n\t\t\t\t}\n\t\t\t\tif (tooltipTrigger && tooltip) {\n\t\t\t\t\tthis.updateTooltipLayout(tooltip, tooltipTrigger, tooltip.getAttribute(\"direction\"));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tgetStyleValue(value) {\n\t\treturn value + \"px\";\n\t}\n\n\tgetNewDirection(currentDirection) {\n\t\tlet newDirection;\n\t\tswitch (currentDirection) {\n\t\tcase \"top\":\n\t\t\tnewDirection = \"bottom\";\n\t\t\tbreak;\n\t\tcase \"bottom\":\n\t\t\tnewDirection = \"top\";\n\t\t\tbreak;\n\t\tcase \"left\":\n\t\t\tnewDirection = \"right\";\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tnewDirection = \"left\";\n\t\t}\n\t\treturn newDirection;\n\t}\n\n\tshowTooltip() {\n\t\tconst canDisplayFullText = this.canDisplayFullText(this.triggerRef);\n\t\tconst showToolTip = (\n\t\t\t// show tooltip if not disabled and showToolTipIfTruncated is false\n\t\t\t(!this.props.disable && !this.props.showToolTipIfTruncated) ||\n\t\t\t// show tooltip if not disabled and showToolTipIfTruncated is true and string is truncated\n\t\t\t(!this.props.disable && this.props.showToolTipIfTruncated && !canDisplayFullText));\n\t\treturn showToolTip;\n\t}\n\n\t// Return true if the string can be displayed in the available space\n\t// Return false if the string is truncated and ellipsis is shown on the UI\n\t// (offsetWidth) is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars\n\t// (scrollWidth) value is equal to the minimum width the element would require\n\t// in order to fit all the content in the viewport without using a horizontal scrollbar\n\tcanDisplayFullText(elem) {\n\t\tif (elem) {\n\t\t\tconst firstChildWidth = elem.firstChild && elem.firstChild.scrollWidth ? elem.firstChild.scrollWidth : 0;\n\t\t\tconst displayWidth = elem.offsetWidth;\n\t\t\tlet fullWidth = firstChildWidth;\n\t\t\tif (firstChildWidth === 0) {\n\t\t\t\tfullWidth = elem.scrollWidth;\n\t\t\t}\n\t\t\tconst canDisplayFullText = fullWidth <= displayWidth;\n\t\t\treturn canDisplayFullText;\n\t\t}\n\t\treturn false; // Show tooltip if we cannot read the width (Canvas objects)\n\t}\n\n\tshowTooltipWithDelay() {\n\n\t\t// set a delay on displaying the tooltip\n\t\tif (!this.pendingTooltip && this.showTooltip()) {\n\t\t\tconst that = this;\n\t\t\tthis.pendingTooltip = setTimeout(function() {\n\t\t\t\tthat.setTooltipVisible(true);\n\t\t\t}, this.props.delay);\n\t\t}\n\n\t}\n\n\tupdateTooltipLayout(tooltip, tooltipTrigger, direction) {\n\t\tconst tooltipDirection = direction;\n\t\tconst viewPortWidth = document.documentElement.clientWidth;\n\t\tconst viewPortHeight = document.documentElement.clientHeight;\n\t\tconst triggerLayout = tooltipTrigger.getBoundingClientRect();\n\t\tconst pointer = tooltip.querySelector(\"svg\");\n\t\tconst pointerLayout = pointer.getBoundingClientRect();\n\t\tconst pointerCorrection = 1;\n\n\t\t// always initialize tooltip location so it's all visible to ensure adjustments are done on the right size\n\t\ttooltip.style.left = this.getStyleValue(triggerLayout.left);\n\t\ttooltip.style.top = this.getStyleValue(triggerLayout.top);\n\n\t\tif (this.props.mousePos) {\n\t\t\tthis.updateLocationBasedOnMousePos(tooltip, this.props.mousePos, direction);\n\t\t} else { // tooltip relativ to element\n\t\t\t// tooltip - left correction\n\t\t\tif (tooltipDirection === \"top\" || tooltipDirection === \"bottom\") {\n\t\t\t\tlet tooltipLeft = triggerLayout.left;\n\t\t\t\tif (tooltip.offsetWidth > triggerLayout.width) {\n\t\t\t\t\ttooltipLeft -= (tooltip.offsetWidth - triggerLayout.width) / 2; // distribute overlap evenly left and right\n\t\t\t\t\tif (tooltipLeft < 0) {\n\t\t\t\t\t\ttooltipLeft = 2; // hitting left border\n\t\t\t\t\t}\n\t\t\t\t} else if (tooltip.offsetWidth < triggerLayout.width) {\n\t\t\t\t\ttooltipLeft += (triggerLayout.width - tooltip.offsetWidth) / 2; // center tip within triggerLayout\n\t\t\t\t}\n\t\t\t\ttooltip.style.left = this.getStyleValue(tooltipLeft);\n\t\t\t\tif ((tooltipLeft + tooltip.offsetWidth) > viewPortWidth) {\n\t\t\t\t\ttooltip.style.left = this.getStyleValue(viewPortWidth - tooltip.offsetWidth); // hitting right border\n\t\t\t\t}\n\t\t\t} else if (tooltipDirection === \"left\") {\n\t\t\t\t// For long tooltips, tooltip.offsetWidth is updated after setting tooltip.style.left. Ensure tooltip doesn't overlap tooltipTrigger element.\n\t\t\t\twhile ((tooltip.offsetLeft + tooltip.offsetWidth + pointerLayout.width) > Math.round(triggerLayout.left)) {\n\t\t\t\t\ttooltip.style.left = this.getStyleValue(triggerLayout.left - tooltip.offsetWidth - pointerLayout.width);\n\t\t\t\t}\n\t\t\t} else if (tooltipDirection === \"right\") {\n\t\t\t\ttooltip.style.left = this.getStyleValue(triggerLayout.right + pointerLayout.width);\n\t\t\t}\n\n\t\t\t// tooltip - top correction\n\t\t\tif (tooltipDirection === \"top\") {\n\t\t\t\ttooltip.style.top = this.getStyleValue(triggerLayout.top - pointerLayout.height - tooltip.offsetHeight);\n\t\t\t} else if (tooltipDirection === \"bottom\") {\n\t\t\t\ttooltip.style.top = this.getStyleValue(triggerLayout.bottom + pointerLayout.height);\n\t\t\t} else if (tooltipDirection === \"left\" || tooltipDirection === \"right\") {\n\t\t\t\tlet tooltipTop = triggerLayout.top;\n\t\t\t\tif (tooltip.offsetHeight > triggerLayout.height) {\n\t\t\t\t\ttooltipTop -= (tooltip.offsetHeight - triggerLayout.height) / 2; // distribute overlap evenly top and bottom\n\t\t\t\t\tif (tooltipTop < 0) {\n\t\t\t\t\t\ttooltipTop = triggerLayout.top; // hitting top border\n\t\t\t\t\t}\n\t\t\t\t} else if (tooltip.offsetHeight < triggerLayout.height) {\n\t\t\t\t\ttooltipTop += (triggerLayout.height - tooltip.offsetHeight) / 2; // center tip within triggerLayout\n\t\t\t\t}\n\t\t\t\ttooltip.style.top = this.getStyleValue(tooltipTop + pointerCorrection);\n\t\t\t\tif ((viewPortHeight - tooltip.offsetHeight) < triggerLayout.top) {\n\t\t\t\t\ttooltip.style.top = this.getStyleValue(viewPortHeight - tooltip.offsetHeight); // hitting bottom border\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// pointer - left correction\n\t\t\tif (tooltipDirection === \"top\" || tooltipDirection === \"bottom\") {\n\t\t\t\tpointer.style.left = this.getStyleValue(triggerLayout.left - tooltip.getBoundingClientRect().left +\n\t\t\t\t\ttooltipTrigger.getBoundingClientRect().width / 2 - pointerLayout.width / 2\t + pointerCorrection);\n\t\t\t} else if (tooltipDirection === \"left\") {\n\t\t\t\tpointer.style.left = this.getStyleValue(tooltip.offsetWidth - 3);\n\t\t\t} else if (tooltipDirection === \"right\") {\n\t\t\t\tpointer.style.left = this.getStyleValue(-pointerLayout.width + 2);\n\t\t\t}\n\n\t\t\t// pointer - top correction\n\t\t\tif (tooltipDirection === \"top\") {\n\t\t\t\tpointer.style.top = this.getStyleValue(tooltip.offsetHeight - 5);\n\t\t\t} else if (tooltipDirection === \"bottom\") {\n\t\t\t\tpointer.style.top = \"-11px\";\n\t\t\t} else if (tooltipDirection === \"left\" || tooltipDirection === \"right\") {\n\t\t\t\tpointer.style.top = this.getStyleValue(triggerLayout.top - tooltip.getBoundingClientRect().top +\n\t\t\t\t\ttooltipTrigger.offsetHeight / 2 - pointerLayout.height / 2);\n\t\t\t}\n\t\t}\n\n\t\t// check if out-of-bounds at the end and if so, trigger new layout on opposite site if not already re-rendered already\n\t\tif (this.isOutOfBounds(tooltip) && tooltip.getAttribute(\"direction\") === tooltipDirection) {\n\t\t\tconst newDirection = this.getNewDirection(tooltipDirection);\n\t\t\tthis.updateTooltipLayout(tooltip, tooltipTrigger, newDirection);\n\t\t\t// update class name directly, otherwise setState triggers re-render loop in canvas\n\t\t\t// also call after updateTooltipLayout, otherwise the newDirection and class of trigger are the same\n\t\t\ttooltip.setAttribute(\"direction\", newDirection);\n\t\t\treturn;\n\t\t}\n\t}\n\n\tupdateLocationBasedOnMousePos(tooltip, mousePos, direction) {\n\t\tconst tooltipDirection = direction;\n\t\tconst viewPortWidth = document.documentElement.clientWidth;\n\t\tconst viewPortHeight = document.documentElement.clientHeight;\n\t\tconst pointer = tooltip.querySelector(\"svg\");\n\t\tconst pointerLayout = pointer.getBoundingClientRect();\n\t\tconst pointerCorrection = 1;\n\n\t\tconst mouseX = this.props.mousePos.x;\n\t\tconst mouseY = this.props.mousePos.y;\n\t\t// if mouse position is passed in, use the cursor as reference point\n\n\t\t// tooltip - left correction\n\t\tif (tooltipDirection === \"top\" || tooltipDirection === \"bottom\") {\n\t\t\tlet tooltipLeft = mouseX - tooltip.offsetWidth / 2;\n\t\t\tif ((viewPortWidth - tooltip.offsetWidth) < tooltipLeft) {\n\t\t\t\ttooltipLeft = viewPortWidth - tooltip.offsetWidth; // hitting right border\n\t\t\t} else if (tooltipLeft < 0) {\n\t\t\t\ttooltipLeft = 2; // hitting left border\n\t\t\t}\n\t\t\ttooltip.style.left = this.getStyleValue(tooltipLeft);\n\t\t} else if (tooltipDirection === \"left\") {\n\t\t\ttooltip.style.left = this.getStyleValue(mouseX - tooltip.offsetWidth - pointerLayout.width - 5);\n\t\t} else if (tooltipDirection === \"right\") {\n\t\t\ttooltip.style.left = this.getStyleValue(mouseX + pointerLayout.width + 5);\n\t\t}\n\n\t\t// tooltip - top correction\n\t\tif (tooltipDirection === \"top\") {\n\t\t\ttooltip.style.top = this.getStyleValue(mouseY - pointerLayout.height - tooltip.offsetHeight);\n\t\t} else if (tooltipDirection === \"bottom\") {\n\t\t\ttooltip.style.top = this.getStyleValue(mouseY + 2 * pointerLayout.height);\n\t\t} else if (tooltipDirection === \"left\" || tooltipDirection === \"right\") {\n\t\t\tlet tooltipTop = mouseY - tooltip.offsetHeight / 2;\n\t\t\tif ((viewPortHeight - tooltip.offsetHeight) < tooltipTop) {\n\t\t\t\ttooltipTop = viewPortHeight - tooltip.offsetHeight; // hitting bottom border\n\t\t\t} else if (tooltipTop < 0) {\n\t\t\t\ttooltipTop = 2; // hitting top border\n\t\t\t}\n\t\t\ttooltip.style.top = this.getStyleValue(tooltipTop + pointerCorrection);\n\t\t}\n\n\t\t// pointer - left correction\n\t\tif (tooltipDirection === \"top\" || tooltipDirection === \"bottom\") {\n\t\t\tpointer.style.left = this.getStyleValue(mouseX - tooltip.getBoundingClientRect().left - pointerLayout.width / 2);\n\t\t} else if (tooltipDirection === \"left\") {\n\t\t\tpointer.style.left = this.getStyleValue(tooltip.offsetWidth - 3);\n\t\t} else if (tooltipDirection === \"right\") {\n\t\t\tpointer.style.left = this.getStyleValue(-pointerLayout.width + 2);\n\t\t}\n\n\t\t// pointer - top correction\n\t\tif (tooltipDirection === \"top\") {\n\t\t\tpointer.style.top = this.getStyleValue(tooltip.offsetHeight - 5);\n\t\t} else if (tooltipDirection === \"bottom\") {\n\t\t\tpointer.style.top = \"-11px\";\n\t\t} else if (tooltipDirection === \"left\" || tooltipDirection === \"right\") {\n\t\t\tpointer.style.top = this.getStyleValue(mouseY - tooltip.getBoundingClientRect().top - pointerLayout.height / 2);\n\t\t}\n\t}\n\n\tisOutOfBounds(tooltip) {\n\t\tconst tooltipLeft = parseFloat(tooltip.style.left);\n\t\tconst tooltipTop = parseFloat(tooltip.style.top);\n\t\treturn (((tooltipLeft + tooltip.offsetWidth) > document.documentElement.clientWidth) || // to the right\n\t\t\t\t(tooltipLeft < 0) || // to the left\n\t\t\t\t(tooltipTop < 0) || // to the top\n\t\t\t\t((tooltipTop + tooltip.offsetHeight) > document.documentElement.clientHeight)); // to the bottom\n\t}\n\n\ttoggleTooltipOnClick(evt) {\n\t\t// 'blur' event occurs before 'click' event. Because of this, onBlur function is called which hides the tooltip.\n\t\t// To prevent this default behavior, stopPropagation and preventDefault is used.\n\t\tevt.stopPropagation();\n\t\tevt.preventDefault();\n\t\tif (this.state.isTooltipVisible) {\n\t\t\t// Tooltip is visible and user clicks on trigger element again, hide tooltip\n\t\t\tthis.setTooltipVisible(false);\n\t\t} else {\n\t\t\tthis.setTooltipVisible(true);\n\t\t}\n\t}\n\n\thideTooltipOnScrollAndResize(evt) {\n\t\tif (this.state.isTooltipVisible) {\n\t\t\tthis.setTooltipVisible(false);\n\t\t}\n\t}\n\n\ttooltipLinkOnClick(url) {\n\t\twindow.open(url, \"_blank\", \"noopener\");\n\t}\n\n\trender() {\n\t\tlet tooltipContent = null;\n\t\tlet triggerContent = null;\n\t\tif (this.props.children) {\n\t\t\t// when children are passed in, tooltip will handle show/hide, otherwise consumer has to hide show/hide tooltip\n\t\t\tconst mouseover = () => this.setTooltipVisible(true);\n\t\t\tconst mouseleave = () => this.setTooltipVisible(false);\n\t\t\tconst mousedown = () => this.setTooltipVisible(false);\n\t\t\t// `focus` event occurs before `click`. Adding timeout in onFocus function to ensure click is executed first.\n\t\t\t// Ref - https://stackoverflow.com/a/49512400\n\t\t\tconst onFocus = () => this.showTooltipWithDelay();\n\t\t\tconst onBlur = (evt) => {\n\t\t\t\t// Keep tooltip visible when clicked on a link.\n\t\t\t\t// Since link is an anchor tag without \"href\" attribute, it has relatedTarget=null\n\t\t\t\tif (evt.relatedTarget !== null) {\n\t\t\t\t\tthis.setTooltipVisible(false);\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst click = (evt) => this.toggleTooltipOnClick(evt);\n\n\t\t\ttriggerContent = (<div\n\t\t\t\tdata-id={this.props.id + \"-trigger\"}\n\t\t\t\tclassName=\"tooltip-trigger\"\n\t\t\t\tonMouseOver={!this.props.showToolTipOnClick ? mouseover : null}\n\t\t\t\tonMouseLeave={!this.props.showToolTipOnClick ? mouseleave : null}\n\t\t\t\tonMouseDown={!this.props.showToolTipOnClick ? mousedown : null}\n\t\t\t\tonClick={this.props.showToolTipOnClick ? click : null}\n\t\t\t\tonFocus={this.props.showToolTipOnClick ? onFocus : null} // When focused using keyboard\n\t\t\t\tonBlur={this.props.showToolTipOnClick ? onBlur : null}\n\t\t\t\ttabIndex={this.props.showToolTipOnClick ? 0 : null}\n\t\t\t\tref={(ref) => (this.triggerRef = ref)}\n\t\t\t>\n\t\t\t\t{this.props.children}\n\t\t\t</div>);\n\t\t}\n\n\t\tif ((typeof this.props.tip) === \"string\") {\n\t\t\ttooltipContent = (\n\t\t\t\t<span id=\"tooltipContainer\">\n\t\t\t\t\t{this.props.tip}\n\t\t\t\t</span>\n\t\t\t);\n\t\t} else if ((typeof this.props.tip) === \"object\") {\n\t\t\ttooltipContent = (\n\t\t\t\t<div id=\"tooltipContainer\">\n\t\t\t\t\t{this.props.tip}\n\t\t\t\t</div>\n\t\t\t);\n\t\t} else if ((typeof this.props.tip) === \"function\") {\n\t\t\ttooltipContent = this.props.tip();\n\t\t}\n\n\t\tlet tipClass = \"common-canvas-tooltip\";\n\t\tif (this.props.className) {\n\t\t\ttipClass += \" \" + this.props.className;\n\t\t}\n\n\t\tlet link = null;\n\t\tif (this.state.isTooltipVisible && this.props.tooltipLinkHandler && this.props.link) {\n\t\t\tconst linkInformation = this.props.tooltipLinkHandler(this.props.link);\n\t\t\t// Verify tooltipLinkHandler returns object in correct format\n\t\t\tif (typeof linkInformation === \"object\" && linkInformation.label && linkInformation.url) {\n\t\t\t\tlink = (<Link\n\t\t\t\t\tclassName=\"tooltip-link\"\n\t\t\t\t\tid={this.props.link.id}\n\t\t\t\t\tonClick={this.tooltipLinkOnClick.bind(this, linkInformation.url)}\n\t\t\t\t>\n\t\t\t\t\t{linkInformation.label}\n\t\t\t\t</Link>);\n\t\t\t}\n\t\t}\n\n\t\tlet tooltip = null;\n\t\tif (tooltipContent || link) {\n\t\t\ttooltip = (\n\t\t\t\t<Portal>\n\t\t\t\t\t<div data-id={this.props.id} className={tipClass} aria-hidden={!this.state.isTooltipVisible} direction={this.props.direction}>\n\t\t\t\t\t\t<svg id=\"tipArrow\" x=\"0px\" y=\"0px\" viewBox=\"0 0 9.1 16.1\">\n\t\t\t\t\t\t\t<polyline points=\"9.1,15.7 1.4,8.1 9.1,0.5\" />\n\t\t\t\t\t\t\t<polygon points=\"8.1,16.1 0,8.1 8.1,0 8.1,1.4 1.4,8.1 8.1,14.7\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t{tooltipContent}\n\t\t\t\t\t\t{link}\n\t\t\t\t\t</div>\n\t\t\t\t</Portal>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div className=\"tooltip-container\">\n\t\t\t\t{triggerContent}\n\t\t\t\t{tooltip}\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nToolTip.propTypes = {\n\ttip: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,\n\tlink: PropTypes.object,\n\ttooltipLinkHandler: PropTypes.func,\n\tdirection: PropTypes.oneOf([\"left\", \"right\", \"top\", \"bottom\"]),\n\tchildren: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n\ttargetObj: PropTypes.object,\n\tid: PropTypes.string.isRequired,\n\tclassName: PropTypes.string,\n\tmousePos: PropTypes.object,\n\tdisable: PropTypes.bool, // Tooltip will not show if disabled\n\tshowToolTipIfTruncated: PropTypes.bool, // Set to true to only display tooltip if full text does not fit in displayable width\n\tdelay: PropTypes.number,\n\tshowToolTipOnClick: PropTypes.bool\n};\n\nToolTip.defaultProps = {\n\tdelay: 200,\n\tdirection: \"bottom\",\n\tshowToolTipIfTruncated: false, // False will always show Tooltip even when whole word can be displayed\n\tshowToolTipOnClick: false\n};\n\nexport default ToolTip;\n"],"names":["ToolTip","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","state","isTooltipVisible","pendingTooltip","hideTooltipOnScrollAndResize","bind","_assertThisInitialized","_createClass","key","value","window","addEventListener","this","targetObj","setTooltipVisible","removeEventListener","clearTimeout","visible","showTooltip","setState","tooltip","document","querySelector","id","tooltipTrigger","updateTooltipLayout","getAttribute","currentDirection","newDirection","canDisplayFullText","triggerRef","disable","showToolTipIfTruncated","elem","firstChildWidth","firstChild","scrollWidth","displayWidth","offsetWidth","fullWidth","that","setTimeout","delay","direction","tooltipDirection","viewPortWidth","documentElement","clientWidth","viewPortHeight","clientHeight","triggerLayout","getBoundingClientRect","pointer","pointerLayout","style","left","getStyleValue","top","mousePos","updateLocationBasedOnMousePos","tooltipLeft","width","offsetLeft","Math","round","right","height","offsetHeight","bottom","tooltipTop","isOutOfBounds","getNewDirection","setAttribute","mouseX","x","mouseY","y","parseFloat","evt","stopPropagation","preventDefault","url","open","_this2","tooltipContent","triggerContent","children","React","createElement","className","onMouseOver","showToolTipOnClick","onMouseLeave","onMouseDown","onClick","toggleTooltipOnClick","onFocus","showTooltipWithDelay","onBlur","relatedTarget","tabIndex","ref","tip","_typeof","tipClass","link","tooltipLinkHandler","linkInformation","label","Link","tooltipLinkOnClick","Portal","viewBox","points","Component","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.es.js","sources":["../../src/tooltip/tooltip.jsx"],"sourcesContent":["/*\n * Copyright 2017-2022 Elyra Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/*\n\tThis code is a modified version from portal-common-api for the Elyra canvas tooltips\n*/\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Portal } from \"react-portal\";\nimport { Link } from \"carbon-components-react\";\nimport { v4 as uuid4 } from \"uuid\";\n\nclass ToolTip extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tisTooltipVisible: false\n\t\t};\n\t\tthis.uuid = uuid4();\n\t\tthis.pendingTooltip = null;\n\t\tthis.hideTooltipOnScrollAndResize = this.hideTooltipOnScrollAndResize.bind(this);\n\t}\n\n\tcomponentDidMount() {\n\t\twindow.addEventListener(\"scroll\", this.hideTooltipOnScrollAndResize, true);\n\t\twindow.addEventListener(\"resize\", this.hideTooltipOnScrollAndResize, true);\n\t\tif (this.props.targetObj) {\n\t\t\tthis.setTooltipVisible(true);\n\t\t}\n\t}\n\n\tcomponentWillUnmount() {\n\t\twindow.removeEventListener(\"scroll\", this.hideTooltipOnScrollAndResize, true);\n\t\twindow.removeEventListener(\"resize\", this.hideTooltipOnScrollAndResize, true);\n\t\tif (this.pendingTooltip) {\n\t\t\tclearTimeout(this.pendingTooltip);\n\t\t}\n\t}\n\n\tsetTooltipVisible(visible) {\n\t\t// clear the display timer if set\n\t\tif (!this.showTooltip() || (!visible && this.pendingTooltip)) {\n\t\t\tclearTimeout(this.pendingTooltip);\n\t\t\tthis.pendingTooltip = null;\n\t\t\tthis.setState({\n\t\t\t\tisTooltipVisible: false\n\t\t\t});\n\t\t}\n\n\n\t\tif (this.showTooltip()) {\n\t\t\tconst tooltip = document.querySelector(`[data-id='${this.uuid}-${this.props.id}']`);\n\t\t\tthis.pendingTooltip = null;\n\t\t\tthis.setState({\n\t\t\t\tisTooltipVisible: visible\n\t\t\t});\n\t\t\t// updates the tooltip display\n\t\t\tif (visible) {\n\t\t\t\tlet tooltipTrigger = null;\n\t\t\t\tif (this.props.targetObj) {\n\t\t\t\t\ttooltipTrigger = this.props.targetObj;\n\t\t\t\t} else {\n\t\t\t\t\ttooltipTrigger = document.querySelector(`[data-id='${this.uuid}-${this.props.id}-trigger']`);\n\t\t\t\t}\n\t\t\t\tif (tooltipTrigger && tooltip) {\n\t\t\t\t\tthis.updateTooltipLayout(tooltip, tooltipTrigger, tooltip.getAttribute(\"direction\"));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tgetStyleValue(value) {\n\t\treturn value + \"px\";\n\t}\n\n\tgetNewDirection(currentDirection) {\n\t\tlet newDirection;\n\t\tswitch (currentDirection) {\n\t\tcase \"top\":\n\t\t\tnewDirection = \"bottom\";\n\t\t\tbreak;\n\t\tcase \"bottom\":\n\t\t\tnewDirection = \"top\";\n\t\t\tbreak;\n\t\tcase \"left\":\n\t\t\tnewDirection = \"right\";\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tnewDirection = \"left\";\n\t\t}\n\t\treturn newDirection;\n\t}\n\n\tshowTooltip() {\n\t\tconst canDisplayFullText = this.canDisplayFullText(this.triggerRef);\n\t\tconst showToolTip = (\n\t\t\t// show tooltip if not disabled and showToolTipIfTruncated is false\n\t\t\t(!this.props.disable && !this.props.showToolTipIfTruncated) ||\n\t\t\t// show tooltip if not disabled and showToolTipIfTruncated is true and string is truncated\n\t\t\t(!this.props.disable && this.props.showToolTipIfTruncated && !canDisplayFullText));\n\t\treturn showToolTip;\n\t}\n\n\t// Return true if the string can be displayed in the available space\n\t// Return false if the string is truncated and ellipsis is shown on the UI\n\t// (offsetWidth) is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars\n\t// (scrollWidth) value is equal to the minimum width the element would require\n\t// in order to fit all the content in the viewport without using a horizontal scrollbar\n\tcanDisplayFullText(elem) {\n\t\tconst triggerElem = this.props.truncatedRef ? this.props.truncatedRef : elem;\n\t\tif (triggerElem) {\n\t\t\tconst fullWidth = triggerElem.firstChild && triggerElem.firstChild.scrollWidth && triggerElem.firstChild.scrollWidth !== 0 ? triggerElem.firstChild.scrollWidth\n\t\t\t\t: triggerElem.scrollWidth;\n\t\t\tconst childWidth = triggerElem.firstChild && triggerElem.firstChild.offsetWidth && triggerElem.firstChild.offsetWidth || 0;\n\t\t\t// need different handling when content is within a span vs div\n\t\t\tconst displayWidth = childWidth !== 0 && childWidth < triggerElem.offsetWidth ? childWidth : triggerElem.offsetWidth;\n\t\t\tconst canDisplayFullText = fullWidth <= displayWidth;\n\t\t\treturn canDisplayFullText;\n\t\t}\n\t\treturn false; // Show tooltip if we cannot read the width (Canvas objects)\n\t}\n\n\tshowTooltipWithDelay() {\n\n\t\t// set a delay on displaying the tooltip\n\t\tif (!this.pendingTooltip && this.showTooltip()) {\n\t\t\tconst that = this;\n\t\t\tthis.pendingTooltip = setTimeout(function() {\n\t\t\t\tthat.setTooltipVisible(true);\n\t\t\t}, this.props.delay);\n\t\t}\n\n\t}\n\n\tupdateTooltipLayout(tooltip, tooltipTrigger, direction) {\n\t\tconst tooltipDirection = direction;\n\t\tconst viewPortWidth = document.documentElement.clientWidth;\n\t\tconst viewPortHeight = document.documentElement.clientHeight;\n\t\tconst triggerLayout = tooltipTrigger.getBoundingClientRect();\n\t\tconst pointer = tooltip.querySelector(\"svg\");\n\t\tconst pointerLayout = pointer.getBoundingClientRect();\n\t\tconst pointerCorrection = 1;\n\n\t\t// always initialize tooltip location so it's all visible to ensure adjustments are done on the right size\n\t\ttooltip.style.left = this.getStyleValue(triggerLayout.left);\n\t\ttooltip.style.top = this.getStyleValue(triggerLayout.top);\n\n\t\tif (this.props.mousePos) {\n\t\t\tthis.updateLocationBasedOnMousePos(tooltip, this.props.mousePos, direction);\n\t\t} else { // tooltip relativ to element\n\t\t\t// tooltip - left correction\n\t\t\tif (tooltipDirection === \"top\" || tooltipDirection === \"bottom\") {\n\t\t\t\tlet tooltipLeft = triggerLayout.left;\n\t\t\t\tif (tooltip.offsetWidth > triggerLayout.width) {\n\t\t\t\t\ttooltipLeft -= (tooltip.offsetWidth - triggerLayout.width) / 2; // distribute overlap evenly left and right\n\t\t\t\t\tif (tooltipLeft < 0) {\n\t\t\t\t\t\ttooltipLeft = 2; // hitting left border\n\t\t\t\t\t}\n\t\t\t\t} else if (tooltip.offsetWidth < triggerLayout.width) {\n\t\t\t\t\ttooltipLeft += (triggerLayout.width - tooltip.offsetWidth) / 2; // center tip within triggerLayout\n\t\t\t\t}\n\t\t\t\ttooltip.style.left = this.getStyleValue(tooltipLeft);\n\t\t\t\tif ((tooltipLeft + tooltip.offsetWidth) > viewPortWidth) {\n\t\t\t\t\ttooltip.style.left = this.getStyleValue(viewPortWidth - tooltip.offsetWidth); // hitting right border\n\t\t\t\t}\n\t\t\t} else if (tooltipDirection === \"left\") {\n\t\t\t\t// For long tooltips, tooltip.offsetWidth is updated after setting tooltip.style.left. Ensure tooltip doesn't overlap tooltipTrigger element.\n\t\t\t\twhile ((tooltip.offsetLeft + tooltip.offsetWidth + pointerLayout.width) > Math.round(triggerLayout.left)) {\n\t\t\t\t\ttooltip.style.left = this.getStyleValue(triggerLayout.left - tooltip.offsetWidth - pointerLayout.width);\n\t\t\t\t}\n\t\t\t} else if (tooltipDirection === \"right\") {\n\t\t\t\ttooltip.style.left = this.getStyleValue(triggerLayout.right + pointerLayout.width);\n\t\t\t}\n\n\t\t\t// tooltip - top correction\n\t\t\tif (tooltipDirection === \"top\") {\n\t\t\t\ttooltip.style.top = this.getStyleValue(triggerLayout.top - pointerLayout.height - tooltip.offsetHeight);\n\t\t\t} else if (tooltipDirection === \"bottom\") {\n\t\t\t\ttooltip.style.top = this.getStyleValue(triggerLayout.bottom + pointerLayout.height);\n\t\t\t} else if (tooltipDirection === \"left\" || tooltipDirection === \"right\") {\n\t\t\t\tlet tooltipTop = triggerLayout.top;\n\t\t\t\tif (tooltip.offsetHeight > triggerLayout.height) {\n\t\t\t\t\ttooltipTop -= (tooltip.offsetHeight - triggerLayout.height) / 2; // distribute overlap evenly top and bottom\n\t\t\t\t\tif (tooltipTop < 0) {\n\t\t\t\t\t\ttooltipTop = triggerLayout.top; // hitting top border\n\t\t\t\t\t}\n\t\t\t\t} else if (tooltip.offsetHeight < triggerLayout.height) {\n\t\t\t\t\ttooltipTop += (triggerLayout.height - tooltip.offsetHeight) / 2; // center tip within triggerLayout\n\t\t\t\t}\n\t\t\t\ttooltip.style.top = this.getStyleValue(tooltipTop + pointerCorrection);\n\t\t\t\tif ((viewPortHeight - tooltip.offsetHeight) < triggerLayout.top) {\n\t\t\t\t\ttooltip.style.top = this.getStyleValue(viewPortHeight - tooltip.offsetHeight); // hitting bottom border\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// pointer - left correction\n\t\t\tif (tooltipDirection === \"top\" || tooltipDirection === \"bottom\") {\n\t\t\t\tpointer.style.left = this.getStyleValue(triggerLayout.left - tooltip.getBoundingClientRect().left +\n\t\t\t\t\ttooltipTrigger.getBoundingClientRect().width / 2 - pointerLayout.width / 2\t + pointerCorrection);\n\t\t\t} else if (tooltipDirection === \"left\") {\n\t\t\t\tpointer.style.left = this.getStyleValue(tooltip.offsetWidth - 3);\n\t\t\t} else if (tooltipDirection === \"right\") {\n\t\t\t\tpointer.style.left = this.getStyleValue(-pointerLayout.width + 2);\n\t\t\t}\n\n\t\t\t// pointer - top correction\n\t\t\tif (tooltipDirection === \"top\") {\n\t\t\t\tpointer.style.top = this.getStyleValue(tooltip.offsetHeight - 5);\n\t\t\t} else if (tooltipDirection === \"bottom\") {\n\t\t\t\tpointer.style.top = \"-11px\";\n\t\t\t} else if (tooltipDirection === \"left\" || tooltipDirection === \"right\") {\n\t\t\t\tpointer.style.top = this.getStyleValue(triggerLayout.top - tooltip.getBoundingClientRect().top +\n\t\t\t\t\ttooltipTrigger.offsetHeight / 2 - pointerLayout.height / 2);\n\t\t\t}\n\t\t}\n\n\t\t// check if out-of-bounds at the end and if so, trigger new layout on opposite site if not already re-rendered already\n\t\tif (this.isOutOfBounds(tooltip) && tooltip.getAttribute(\"direction\") === tooltipDirection) {\n\t\t\tconst newDirection = this.getNewDirection(tooltipDirection);\n\t\t\tthis.updateTooltipLayout(tooltip, tooltipTrigger, newDirection);\n\t\t\t// update class name directly, otherwise setState triggers re-render loop in canvas\n\t\t\t// also call after updateTooltipLayout, otherwise the newDirection and class of trigger are the same\n\t\t\ttooltip.setAttribute(\"direction\", newDirection);\n\t\t\treturn;\n\t\t}\n\t}\n\n\tupdateLocationBasedOnMousePos(tooltip, mousePos, direction) {\n\t\tconst tooltipDirection = direction;\n\t\tconst viewPortWidth = document.documentElement.clientWidth;\n\t\tconst viewPortHeight = document.documentElement.clientHeight;\n\t\tconst pointer = tooltip.querySelector(\"svg\");\n\t\tconst pointerLayout = pointer.getBoundingClientRect();\n\t\tconst pointerCorrection = 1;\n\n\t\tconst mouseX = this.props.mousePos.x;\n\t\tconst mouseY = this.props.mousePos.y;\n\t\t// if mouse position is passed in, use the cursor as reference point\n\n\t\t// tooltip - left correction\n\t\tif (tooltipDirection === \"top\" || tooltipDirection === \"bottom\") {\n\t\t\tlet tooltipLeft = mouseX - tooltip.offsetWidth / 2;\n\t\t\tif ((viewPortWidth - tooltip.offsetWidth) < tooltipLeft) {\n\t\t\t\ttooltipLeft = viewPortWidth - tooltip.offsetWidth; // hitting right border\n\t\t\t} else if (tooltipLeft < 0) {\n\t\t\t\ttooltipLeft = 2; // hitting left border\n\t\t\t}\n\t\t\ttooltip.style.left = this.getStyleValue(tooltipLeft);\n\t\t} else if (tooltipDirection === \"left\") {\n\t\t\ttooltip.style.left = this.getStyleValue(mouseX - tooltip.offsetWidth - pointerLayout.width - 5);\n\t\t} else if (tooltipDirection === \"right\") {\n\t\t\ttooltip.style.left = this.getStyleValue(mouseX + pointerLayout.width + 5);\n\t\t}\n\n\t\t// tooltip - top correction\n\t\tif (tooltipDirection === \"top\") {\n\t\t\ttooltip.style.top = this.getStyleValue(mouseY - pointerLayout.height - tooltip.offsetHeight);\n\t\t} else if (tooltipDirection === \"bottom\") {\n\t\t\ttooltip.style.top = this.getStyleValue(mouseY + 2 * pointerLayout.height);\n\t\t} else if (tooltipDirection === \"left\" || tooltipDirection === \"right\") {\n\t\t\tlet tooltipTop = mouseY - tooltip.offsetHeight / 2;\n\t\t\tif ((viewPortHeight - tooltip.offsetHeight) < tooltipTop) {\n\t\t\t\ttooltipTop = viewPortHeight - tooltip.offsetHeight; // hitting bottom border\n\t\t\t} else if (tooltipTop < 0) {\n\t\t\t\ttooltipTop = 2; // hitting top border\n\t\t\t}\n\t\t\ttooltip.style.top = this.getStyleValue(tooltipTop + pointerCorrection);\n\t\t}\n\n\t\t// pointer - left correction\n\t\tif (tooltipDirection === \"top\" || tooltipDirection === \"bottom\") {\n\t\t\tpointer.style.left = this.getStyleValue(mouseX - tooltip.getBoundingClientRect().left - pointerLayout.width / 2);\n\t\t} else if (tooltipDirection === \"left\") {\n\t\t\tpointer.style.left = this.getStyleValue(tooltip.offsetWidth - 3);\n\t\t} else if (tooltipDirection === \"right\") {\n\t\t\tpointer.style.left = this.getStyleValue(-pointerLayout.width + 2);\n\t\t}\n\n\t\t// pointer - top correction\n\t\tif (tooltipDirection === \"top\") {\n\t\t\tpointer.style.top = this.getStyleValue(tooltip.offsetHeight - 5);\n\t\t} else if (tooltipDirection === \"bottom\") {\n\t\t\tpointer.style.top = \"-11px\";\n\t\t} else if (tooltipDirection === \"left\" || tooltipDirection === \"right\") {\n\t\t\tpointer.style.top = this.getStyleValue(mouseY - tooltip.getBoundingClientRect().top - pointerLayout.height / 2);\n\t\t}\n\t}\n\n\tisOutOfBounds(tooltip) {\n\t\tconst tooltipLeft = parseFloat(tooltip.style.left);\n\t\tconst tooltipTop = parseFloat(tooltip.style.top);\n\t\treturn (((tooltipLeft + tooltip.offsetWidth) > document.documentElement.clientWidth) || // to the right\n\t\t\t\t(tooltipLeft < 0) || // to the left\n\t\t\t\t(tooltipTop < 0) || // to the top\n\t\t\t\t((tooltipTop + tooltip.offsetHeight) > document.documentElement.clientHeight)); // to the bottom\n\t}\n\n\ttoggleTooltipOnClick(evt) {\n\t\t// 'blur' event occurs before 'click' event. Because of this, onBlur function is called which hides the tooltip.\n\t\t// To prevent this default behavior, stopPropagation and preventDefault is used.\n\t\tevt.stopPropagation();\n\t\tevt.preventDefault();\n\t\tif (this.state.isTooltipVisible) {\n\t\t\t// Tooltip is visible and user clicks on trigger element again, hide tooltip\n\t\t\tthis.setTooltipVisible(false);\n\t\t} else {\n\t\t\tthis.setTooltipVisible(true);\n\t\t}\n\t}\n\n\thideTooltipOnScrollAndResize(evt) {\n\t\tif (this.state.isTooltipVisible) {\n\t\t\tthis.setTooltipVisible(false);\n\t\t}\n\t}\n\n\ttooltipLinkOnClick(url) {\n\t\twindow.open(url, \"_blank\", \"noopener\");\n\t}\n\n\trender() {\n\t\tlet tooltipContent = null;\n\t\tlet triggerContent = null;\n\t\tif (this.props.children) {\n\t\t\t// when children are passed in, tooltip will handle show/hide, otherwise consumer has to hide show/hide tooltip\n\t\t\tconst mouseover = () => this.setTooltipVisible(true);\n\t\t\tconst mouseleave = () => this.setTooltipVisible(false);\n\t\t\tconst mousedown = () => this.setTooltipVisible(false);\n\t\t\t// `focus` event occurs before `click`. Adding timeout in onFocus function to ensure click is executed first.\n\t\t\t// Ref - https://stackoverflow.com/a/49512400\n\t\t\tconst onFocus = () => this.showTooltipWithDelay();\n\t\t\tconst onBlur = (evt) => {\n\t\t\t\t// Keep tooltip visible when clicked on a link.\n\t\t\t\t// Since link is an anchor tag without \"href\" attribute, it has relatedTarget=null\n\t\t\t\tif (evt.relatedTarget !== null) {\n\t\t\t\t\tthis.setTooltipVisible(false);\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst click = (evt) => this.toggleTooltipOnClick(evt);\n\n\t\t\ttriggerContent = (<div\n\t\t\t\tdata-id={`${this.uuid}-${this.props.id}-trigger`}\n\t\t\t\tclassName=\"tooltip-trigger\"\n\t\t\t\tonMouseOver={!this.props.showToolTipOnClick ? mouseover : null}\n\t\t\t\tonMouseLeave={!this.props.showToolTipOnClick ? mouseleave : null}\n\t\t\t\tonMouseDown={!this.props.showToolTipOnClick ? mousedown : null}\n\t\t\t\tonClick={this.props.showToolTipOnClick ? click : null}\n\t\t\t\tonFocus={this.props.showToolTipOnClick ? onFocus : null} // When focused using keyboard\n\t\t\t\tonBlur={this.props.showToolTipOnClick ? onBlur : null}\n\t\t\t\ttabIndex={this.props.showToolTipOnClick ? 0 : null}\n\t\t\t\trole={this.props.showToolTipOnClick ? \"button\" : null}\n\t\t\t\taria-labelledby={`${this.uuid}-${this.props.id}`}\n\t\t\t\taria-expanded={this.props.showToolTipOnClick ? this.state.isTooltipVisible : null}\n\t\t\t\taria-controls={this.props.showToolTipOnClick ? `${this.uuid}-${this.props.id}` : null}\n\t\t\t\tref={(ref) => (this.triggerRef = ref)}\n\t\t\t>\n\t\t\t\t{this.props.children}\n\t\t\t</div>);\n\t\t}\n\n\t\tif ((typeof this.props.tip) === \"string\") {\n\t\t\ttooltipContent = (\n\t\t\t\t<span className=\"tooltipContainer\">\n\t\t\t\t\t{this.props.tip}\n\t\t\t\t</span>\n\t\t\t);\n\t\t} else if ((typeof this.props.tip) === \"object\") {\n\t\t\ttooltipContent = (\n\t\t\t\t<div className=\"tooltipContainer\">\n\t\t\t\t\t{this.props.tip}\n\t\t\t\t</div>\n\t\t\t);\n\t\t} else if ((typeof this.props.tip) === \"function\") {\n\t\t\ttooltipContent = this.props.tip();\n\t\t}\n\n\t\tlet tipClass = \"common-canvas-tooltip\";\n\t\tif (this.props.className) {\n\t\t\ttipClass += \" \" + this.props.className;\n\t\t}\n\n\t\tlet link = null;\n\t\tif (this.state.isTooltipVisible && this.props.tooltipLinkHandler && this.props.link) {\n\t\t\tconst linkInformation = this.props.tooltipLinkHandler(this.props.link);\n\t\t\t// Verify tooltipLinkHandler returns object in correct format\n\t\t\tif (typeof linkInformation === \"object\" && linkInformation.label && linkInformation.url) {\n\t\t\t\tlink = (<Link\n\t\t\t\t\tclassName=\"tooltip-link\"\n\t\t\t\t\tid={this.props.link.id}\n\t\t\t\t\tonClick={this.tooltipLinkOnClick.bind(this, linkInformation.url)}\n\t\t\t\t>\n\t\t\t\t\t{linkInformation.label}\n\t\t\t\t</Link>);\n\t\t\t}\n\t\t}\n\n\t\tlet tooltip = null;\n\t\tif (tooltipContent || link) {\n\t\t\ttooltip = (\n\t\t\t\t<Portal>\n\t\t\t\t\t<div\n\t\t\t\t\t\trole=\"tooltip\"\n\t\t\t\t\t\tid={`${this.uuid}-${this.props.id}`}\n\t\t\t\t\t\tdata-id={`${this.uuid}-${this.props.id}`}\n\t\t\t\t\t\tclassName={tipClass}\n\t\t\t\t\t\taria-hidden={!this.state.isTooltipVisible}\n\t\t\t\t\t\tdirection={this.props.direction}\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg className=\"tipArrow\" x=\"0px\" y=\"0px\" viewBox=\"0 0 9.1 16.1\">\n\t\t\t\t\t\t\t<polyline points=\"9.1,15.7 1.4,8.1 9.1,0.5\" />\n\t\t\t\t\t\t\t<polygon points=\"8.1,16.1 0,8.1 8.1,0 8.1,1.4 1.4,8.1 8.1,14.7\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t{tooltipContent}\n\t\t\t\t\t\t{link}\n\t\t\t\t\t</div>\n\t\t\t\t</Portal>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div className=\"tooltip-container\">\n\t\t\t\t{triggerContent}\n\t\t\t\t{tooltip}\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nToolTip.propTypes = {\n\ttip: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,\n\tlink: PropTypes.object,\n\ttooltipLinkHandler: PropTypes.func,\n\tdirection: PropTypes.oneOf([\"left\", \"right\", \"top\", \"bottom\"]),\n\tchildren: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n\ttargetObj: PropTypes.object,\n\tid: PropTypes.string.isRequired,\n\tclassName: PropTypes.string,\n\tmousePos: PropTypes.object,\n\tdisable: PropTypes.bool, // Tooltip will not show if disabled\n\tshowToolTipIfTruncated: PropTypes.bool, // Set to true to only display tooltip if full text does not fit in displayable width\n\ttruncatedRef: PropTypes.object,\n\tdelay: PropTypes.number,\n\tshowToolTipOnClick: PropTypes.bool\n};\n\nToolTip.defaultProps = {\n\tdelay: 200,\n\tdirection: \"bottom\",\n\tshowToolTipIfTruncated: false, // False will always show Tooltip even when whole word can be displayed\n\tshowToolTipOnClick: false\n};\n\nexport default ToolTip;\n"],"names":["ToolTip","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","state","isTooltipVisible","uuid","uuid4","pendingTooltip","hideTooltipOnScrollAndResize","bind","_assertThisInitialized","_createClass","key","value","window","addEventListener","this","targetObj","setTooltipVisible","removeEventListener","clearTimeout","visible","showTooltip","setState","tooltip","document","querySelector","concat","id","tooltipTrigger","updateTooltipLayout","getAttribute","currentDirection","newDirection","canDisplayFullText","triggerRef","disable","showToolTipIfTruncated","elem","triggerElem","truncatedRef","fullWidth","firstChild","scrollWidth","childWidth","offsetWidth","that","setTimeout","delay","direction","tooltipDirection","viewPortWidth","documentElement","clientWidth","viewPortHeight","clientHeight","triggerLayout","getBoundingClientRect","pointer","pointerLayout","style","left","getStyleValue","top","mousePos","updateLocationBasedOnMousePos","tooltipLeft","width","offsetLeft","Math","round","right","height","offsetHeight","bottom","tooltipTop","isOutOfBounds","getNewDirection","setAttribute","mouseX","x","mouseY","y","parseFloat","evt","stopPropagation","preventDefault","url","open","_this2","tooltipContent","triggerContent","children","React","createElement","className","onMouseOver","showToolTipOnClick","onMouseLeave","onMouseDown","onClick","toggleTooltipOnClick","onFocus","showTooltipWithDelay","onBlur","relatedTarget","tabIndex","role","ref","tip","_typeof","tipClass","link","tooltipLinkHandler","linkInformation","label","Link","tooltipLinkOnClick","Portal","viewBox","points","Component","defaultProps"],"mappings":"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"}
|
package/dist/lib/tooltip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var t=require("../createClass-826941b3.js"),e=require("../getPrototypeOf-1e698126.js"),i=require("react"),o=require("react-portal"),l=require("carbon-components-react");function
|
|
1
|
+
"use strict";var t=require("../createClass-826941b3.js"),e=require("../getPrototypeOf-1e698126.js"),i=require("react"),o=require("react-portal"),l=require("carbon-components-react"),s=require("uuid");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(i);function p(t){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var o,l=e._getPrototypeOf(t);if(i){var s=e._getPrototypeOf(this).constructor;o=Reflect.construct(l,arguments,s)}else o=l.apply(this,arguments);return e._possibleConstructorReturn(this,o)}}var h=function(i){e._inherits(h,i);var n=p(h);function h(i){var o;return t._classCallCheck(this,h),(o=n.call(this,i)).state={isTooltipVisible:!1},o.uuid=s.v4(),o.pendingTooltip=null,o.hideTooltipOnScrollAndResize=o.hideTooltipOnScrollAndResize.bind(e._assertThisInitialized(o)),o}return t._createClass(h,[{key:"componentDidMount",value:function(){window.addEventListener("scroll",this.hideTooltipOnScrollAndResize,!0),window.addEventListener("resize",this.hideTooltipOnScrollAndResize,!0),this.props.targetObj&&this.setTooltipVisible(!0)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.hideTooltipOnScrollAndResize,!0),window.removeEventListener("resize",this.hideTooltipOnScrollAndResize,!0),this.pendingTooltip&&clearTimeout(this.pendingTooltip)}},{key:"setTooltipVisible",value:function(t){if((!this.showTooltip()||!t&&this.pendingTooltip)&&(clearTimeout(this.pendingTooltip),this.pendingTooltip=null,this.setState({isTooltipVisible:!1})),this.showTooltip()){var e=document.querySelector("[data-id='".concat(this.uuid,"-").concat(this.props.id,"']"));if(this.pendingTooltip=null,this.setState({isTooltipVisible:t}),t){var i=null;(i=this.props.targetObj?this.props.targetObj:document.querySelector("[data-id='".concat(this.uuid,"-").concat(this.props.id,"-trigger']")))&&e&&this.updateTooltipLayout(e,i,e.getAttribute("direction"))}}}},{key:"getStyleValue",value:function(t){return t+"px"}},{key:"getNewDirection",value:function(t){var e;switch(t){case"top":e="bottom";break;case"bottom":e="top";break;case"left":e="right";break;default:e="left"}return e}},{key:"showTooltip",value:function(){var t=this.canDisplayFullText(this.triggerRef);return!this.props.disable&&!this.props.showToolTipIfTruncated||!this.props.disable&&this.props.showToolTipIfTruncated&&!t}},{key:"canDisplayFullText",value:function(t){var e=this.props.truncatedRef?this.props.truncatedRef:t;if(e){var i=e.firstChild&&e.firstChild.scrollWidth&&0!==e.firstChild.scrollWidth?e.firstChild.scrollWidth:e.scrollWidth,o=e.firstChild&&e.firstChild.offsetWidth&&e.firstChild.offsetWidth||0,l=i<=(0!==o&&o<e.offsetWidth?o:e.offsetWidth);return l}return!1}},{key:"showTooltipWithDelay",value:function(){if(!this.pendingTooltip&&this.showTooltip()){var t=this;this.pendingTooltip=setTimeout((function(){t.setTooltipVisible(!0)}),this.props.delay)}}},{key:"updateTooltipLayout",value:function(t,e,i){var o=i,l=document.documentElement.clientWidth,s=document.documentElement.clientHeight,n=e.getBoundingClientRect(),r=t.querySelector("svg"),p=r.getBoundingClientRect();if(t.style.left=this.getStyleValue(n.left),t.style.top=this.getStyleValue(n.top),this.props.mousePos)this.updateLocationBasedOnMousePos(t,this.props.mousePos,i);else{if("top"===o||"bottom"===o){var h=n.left;t.offsetWidth>n.width?(h-=(t.offsetWidth-n.width)/2)<0&&(h=2):t.offsetWidth<n.width&&(h+=(n.width-t.offsetWidth)/2),t.style.left=this.getStyleValue(h),h+t.offsetWidth>l&&(t.style.left=this.getStyleValue(l-t.offsetWidth))}else if("left"===o)for(;t.offsetLeft+t.offsetWidth+p.width>Math.round(n.left);)t.style.left=this.getStyleValue(n.left-t.offsetWidth-p.width);else"right"===o&&(t.style.left=this.getStyleValue(n.right+p.width));if("top"===o)t.style.top=this.getStyleValue(n.top-p.height-t.offsetHeight);else if("bottom"===o)t.style.top=this.getStyleValue(n.bottom+p.height);else if("left"===o||"right"===o){var a=n.top;t.offsetHeight>n.height?(a-=(t.offsetHeight-n.height)/2)<0&&(a=n.top):t.offsetHeight<n.height&&(a+=(n.height-t.offsetHeight)/2),t.style.top=this.getStyleValue(a+1),s-t.offsetHeight<n.top&&(t.style.top=this.getStyleValue(s-t.offsetHeight))}"top"===o||"bottom"===o?r.style.left=this.getStyleValue(n.left-t.getBoundingClientRect().left+e.getBoundingClientRect().width/2-p.width/2+1):"left"===o?r.style.left=this.getStyleValue(t.offsetWidth-3):"right"===o&&(r.style.left=this.getStyleValue(2-p.width)),"top"===o?r.style.top=this.getStyleValue(t.offsetHeight-5):"bottom"===o?r.style.top="-11px":"left"!==o&&"right"!==o||(r.style.top=this.getStyleValue(n.top-t.getBoundingClientRect().top+e.offsetHeight/2-p.height/2))}if(this.isOutOfBounds(t)&&t.getAttribute("direction")===o){var u=this.getNewDirection(o);return this.updateTooltipLayout(t,e,u),void t.setAttribute("direction",u)}}},{key:"updateLocationBasedOnMousePos",value:function(t,e,i){var o=i,l=document.documentElement.clientWidth,s=document.documentElement.clientHeight,n=t.querySelector("svg"),r=n.getBoundingClientRect(),p=this.props.mousePos.x,h=this.props.mousePos.y;if("top"===o||"bottom"===o){var a=p-t.offsetWidth/2;l-t.offsetWidth<a?a=l-t.offsetWidth:a<0&&(a=2),t.style.left=this.getStyleValue(a)}else"left"===o?t.style.left=this.getStyleValue(p-t.offsetWidth-r.width-5):"right"===o&&(t.style.left=this.getStyleValue(p+r.width+5));if("top"===o)t.style.top=this.getStyleValue(h-r.height-t.offsetHeight);else if("bottom"===o)t.style.top=this.getStyleValue(h+2*r.height);else if("left"===o||"right"===o){var u=h-t.offsetHeight/2;s-t.offsetHeight<u?u=s-t.offsetHeight:u<0&&(u=2),t.style.top=this.getStyleValue(u+1)}"top"===o||"bottom"===o?n.style.left=this.getStyleValue(p-t.getBoundingClientRect().left-r.width/2):"left"===o?n.style.left=this.getStyleValue(t.offsetWidth-3):"right"===o&&(n.style.left=this.getStyleValue(2-r.width)),"top"===o?n.style.top=this.getStyleValue(t.offsetHeight-5):"bottom"===o?n.style.top="-11px":"left"!==o&&"right"!==o||(n.style.top=this.getStyleValue(h-t.getBoundingClientRect().top-r.height/2))}},{key:"isOutOfBounds",value:function(t){var e=parseFloat(t.style.left),i=parseFloat(t.style.top);return e+t.offsetWidth>document.documentElement.clientWidth||e<0||i<0||i+t.offsetHeight>document.documentElement.clientHeight}},{key:"toggleTooltipOnClick",value:function(t){t.stopPropagation(),t.preventDefault(),this.state.isTooltipVisible?this.setTooltipVisible(!1):this.setTooltipVisible(!0)}},{key:"hideTooltipOnScrollAndResize",value:function(t){this.state.isTooltipVisible&&this.setTooltipVisible(!1)}},{key:"tooltipLinkOnClick",value:function(t){window.open(t,"_blank","noopener")}},{key:"render",value:function(){var e=this,i=null,s=null;if(this.props.children){s=r.default.createElement("div",{"data-id":"".concat(this.uuid,"-").concat(this.props.id,"-trigger"),className:"tooltip-trigger",onMouseOver:this.props.showToolTipOnClick?null:function(){return e.setTooltipVisible(!0)},onMouseLeave:this.props.showToolTipOnClick?null:function(){return e.setTooltipVisible(!1)},onMouseDown:this.props.showToolTipOnClick?null:function(){return e.setTooltipVisible(!1)},onClick:this.props.showToolTipOnClick?function(t){return e.toggleTooltipOnClick(t)}:null,onFocus:this.props.showToolTipOnClick?function(){return e.showTooltipWithDelay()}:null,onBlur:this.props.showToolTipOnClick?function(t){null!==t.relatedTarget&&e.setTooltipVisible(!1)}:null,tabIndex:this.props.showToolTipOnClick?0:null,role:this.props.showToolTipOnClick?"button":null,"aria-labelledby":"".concat(this.uuid,"-").concat(this.props.id),"aria-expanded":this.props.showToolTipOnClick?this.state.isTooltipVisible:null,"aria-controls":this.props.showToolTipOnClick?"".concat(this.uuid,"-").concat(this.props.id):null,ref:function(t){return e.triggerRef=t}},this.props.children)}"string"==typeof this.props.tip?i=r.default.createElement("span",{className:"tooltipContainer"},this.props.tip):"object"===t._typeof(this.props.tip)?i=r.default.createElement("div",{className:"tooltipContainer"},this.props.tip):"function"==typeof this.props.tip&&(i=this.props.tip());var n="common-canvas-tooltip";this.props.className&&(n+=" "+this.props.className);var p=null;if(this.state.isTooltipVisible&&this.props.tooltipLinkHandler&&this.props.link){var h=this.props.tooltipLinkHandler(this.props.link);"object"===t._typeof(h)&&h.label&&h.url&&(p=r.default.createElement(l.Link,{className:"tooltip-link",id:this.props.link.id,onClick:this.tooltipLinkOnClick.bind(this,h.url)},h.label))}var a=null;return(i||p)&&(a=r.default.createElement(o.Portal,null,r.default.createElement("div",{role:"tooltip",id:"".concat(this.uuid,"-").concat(this.props.id),"data-id":"".concat(this.uuid,"-").concat(this.props.id),className:n,"aria-hidden":!this.state.isTooltipVisible,direction:this.props.direction},r.default.createElement("svg",{className:"tipArrow",x:"0px",y:"0px",viewBox:"0 0 9.1 16.1"},r.default.createElement("polyline",{points:"9.1,15.7 1.4,8.1 9.1,0.5"}),r.default.createElement("polygon",{points:"8.1,16.1 0,8.1 8.1,0 8.1,1.4 1.4,8.1 8.1,14.7"})),i,p))),r.default.createElement("div",{className:"tooltip-container"},s,a)}}]),h}(r.default.Component);h.defaultProps={delay:200,direction:"bottom",showToolTipIfTruncated:!1,showToolTipOnClick:!1},module.exports=h;
|
|
2
2
|
//# sourceMappingURL=tooltip.js.map
|