@deephaven/components 0.5.2-beta.0 → 0.6.1-demo.10
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/AutoCompleteInput.js +410 -448
- package/dist/AutoCompleteInput.js.map +1 -1
- package/dist/AutoResizeTextarea.js +17 -46
- package/dist/AutoResizeTextarea.js.map +1 -1
- package/dist/BasicModal.js +18 -19
- package/dist/BasicModal.js.map +1 -1
- package/dist/Button.js +30 -21
- package/dist/Button.js.map +1 -1
- package/dist/ButtonGroup.js +6 -4
- package/dist/ButtonGroup.js.map +1 -1
- package/dist/ButtonOld.js +10 -8
- package/dist/ButtonOld.js.map +1 -1
- package/dist/CardFlip.js +10 -8
- package/dist/CardFlip.js.map +1 -1
- package/dist/Checkbox.js +18 -31
- package/dist/Checkbox.js.map +1 -1
- package/dist/Collapse.js +65 -105
- package/dist/Collapse.js.map +1 -1
- package/dist/ComboBox.js +432 -460
- package/dist/ComboBox.js.map +1 -1
- package/dist/CustomTimeSelect.js +485 -517
- package/dist/CustomTimeSelect.js.map +1 -1
- package/dist/DebouncedSearchInput.js +61 -91
- package/dist/DebouncedSearchInput.js.map +1 -1
- package/dist/DeephavenSpinner.js +6 -6
- package/dist/DeephavenSpinner.js.map +1 -1
- package/dist/DragUtils.js +65 -113
- package/dist/DragUtils.js.map +1 -1
- package/dist/DraggableItemList.d.ts +1 -0
- package/dist/DraggableItemList.d.ts.map +1 -1
- package/dist/DraggableItemList.js +219 -257
- package/dist/DraggableItemList.js.map +1 -1
- package/dist/HierarchicalCheckboxMenu.js +160 -227
- package/dist/HierarchicalCheckboxMenu.js.map +1 -1
- package/dist/ItemList.d.ts +4 -2
- package/dist/ItemList.d.ts.map +1 -1
- package/dist/ItemList.js +595 -598
- package/dist/ItemList.js.map +1 -1
- package/dist/ItemListItem.js +194 -215
- package/dist/ItemListItem.js.map +1 -1
- package/dist/LoadingOverlay.js +9 -10
- package/dist/LoadingOverlay.js.map +1 -1
- package/dist/LoadingSpinner.js +4 -3
- package/dist/LoadingSpinner.js.map +1 -1
- package/dist/MaskedInput.js +59 -70
- package/dist/MaskedInput.js.map +1 -1
- package/dist/Option.js +5 -3
- package/dist/Option.js.map +1 -1
- package/dist/RadioGroup.js +16 -34
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioItem.js +14 -33
- package/dist/RadioItem.js.map +1 -1
- package/dist/SearchInput.js +42 -75
- package/dist/SearchInput.js.map +1 -1
- package/dist/Select.js +10 -8
- package/dist/Select.js.map +1 -1
- package/dist/SelectValueList.js +97 -134
- package/dist/SelectValueList.js.map +1 -1
- package/dist/SocketedButton.js +13 -11
- package/dist/SocketedButton.js.map +1 -1
- package/dist/ThemeExport.js.map +1 -1
- package/dist/TimeInput.js +16 -53
- package/dist/TimeInput.js.map +1 -1
- package/dist/TimeSlider.js +62 -88
- package/dist/TimeSlider.js.map +1 -1
- package/dist/ToastNotification.js +14 -13
- package/dist/ToastNotification.js.map +1 -1
- package/dist/UISwitch.js +9 -8
- package/dist/UISwitch.js.map +1 -1
- package/dist/context-actions/ContextActionUtils.js +173 -231
- package/dist/context-actions/ContextActionUtils.js.map +1 -1
- package/dist/context-actions/ContextActions.js +135 -177
- package/dist/context-actions/ContextActions.js.map +1 -1
- package/dist/context-actions/ContextMenu.js +509 -543
- package/dist/context-actions/ContextMenu.js.map +1 -1
- package/dist/context-actions/ContextMenuItem.js +32 -22
- package/dist/context-actions/ContextMenuItem.js.map +1 -1
- package/dist/context-actions/ContextMenuRoot.js +112 -152
- package/dist/context-actions/ContextMenuRoot.js.map +1 -1
- package/dist/context-actions/GlobalContextAction.js +49 -84
- package/dist/context-actions/GlobalContextAction.js.map +1 -1
- package/dist/context-actions/GlobalContextActions.js +25 -57
- package/dist/context-actions/GlobalContextActions.js.map +1 -1
- package/dist/context-actions/index.js +4 -4
- package/dist/context-actions/index.js.map +1 -1
- package/dist/index.js +39 -39
- package/dist/index.js.map +1 -1
- package/dist/menu-actions/DropdownMenu.js +126 -159
- package/dist/menu-actions/DropdownMenu.js.map +1 -1
- package/dist/menu-actions/Menu.js +215 -245
- package/dist/menu-actions/Menu.js.map +1 -1
- package/dist/menu-actions/index.js +1 -1
- package/dist/menu-actions/index.js.map +1 -1
- package/dist/navigation/Menu.js +14 -18
- package/dist/navigation/Menu.js.map +1 -1
- package/dist/navigation/MenuItem.js +15 -14
- package/dist/navigation/MenuItem.js.map +1 -1
- package/dist/navigation/Page.js +7 -5
- package/dist/navigation/Page.js.map +1 -1
- package/dist/navigation/Stack.js +14 -39
- package/dist/navigation/Stack.js.map +1 -1
- package/dist/navigation/index.js +4 -4
- package/dist/navigation/index.js.map +1 -1
- package/dist/popper/Popper.js +209 -235
- package/dist/popper/Popper.js.map +1 -1
- package/dist/popper/Tooltip.js +227 -257
- package/dist/popper/Tooltip.js.map +1 -1
- package/dist/popper/index.js +2 -2
- package/dist/popper/index.js.map +1 -1
- package/dist/shortcuts/GlobalShortcuts.js +2 -2
- package/dist/shortcuts/GlobalShortcuts.js.map +1 -1
- package/dist/shortcuts/Shortcut.js +263 -291
- package/dist/shortcuts/Shortcut.js.map +1 -1
- package/dist/shortcuts/ShortcutRegistry.js +48 -71
- package/dist/shortcuts/ShortcutRegistry.js.map +1 -1
- package/dist/shortcuts/index.js +4 -4
- package/dist/shortcuts/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +30 -54
package/dist/SearchInput.js
CHANGED
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
2
|
-
|
|
3
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
4
|
-
|
|
5
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
6
|
-
|
|
7
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
8
|
-
|
|
9
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
10
|
-
|
|
11
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
12
|
-
|
|
13
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
14
|
-
|
|
15
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
16
|
-
|
|
17
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
18
|
-
|
|
19
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
20
|
-
|
|
21
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
22
|
-
|
|
23
1
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
24
2
|
|
|
25
3
|
import React, { PureComponent } from 'react';
|
|
@@ -28,72 +6,61 @@ import { vsSearch } from '@deephaven/icons';
|
|
|
28
6
|
import classNames from 'classnames';
|
|
29
7
|
import "./SearchInput.css";
|
|
30
8
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
var _super = _createSuper(SearchInput);
|
|
9
|
+
class SearchInput extends PureComponent {
|
|
10
|
+
constructor(props) {
|
|
11
|
+
super(props);
|
|
35
12
|
|
|
36
|
-
|
|
37
|
-
var _this;
|
|
13
|
+
_defineProperty(this, "inputField", void 0);
|
|
38
14
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
_this = _super.call(this, props);
|
|
15
|
+
this.inputField = /*#__PURE__*/React.createRef();
|
|
16
|
+
}
|
|
42
17
|
|
|
43
|
-
|
|
18
|
+
focus() {
|
|
19
|
+
var _this$inputField$curr;
|
|
44
20
|
|
|
45
|
-
_this
|
|
46
|
-
return _this;
|
|
21
|
+
(_this$inputField$curr = this.inputField.current) === null || _this$inputField$curr === void 0 ? void 0 : _this$inputField$curr.focus();
|
|
47
22
|
}
|
|
48
23
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}), matchCount != null && /*#__PURE__*/React.createElement("span", {
|
|
79
|
-
className: "search-match"
|
|
80
|
-
}, matchCount), /*#__PURE__*/React.createElement("span", {
|
|
81
|
-
className: "search-icon"
|
|
82
|
-
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
83
|
-
icon: vsSearch
|
|
84
|
-
})));
|
|
85
|
-
}
|
|
86
|
-
}]);
|
|
24
|
+
render() {
|
|
25
|
+
var {
|
|
26
|
+
value,
|
|
27
|
+
placeholder,
|
|
28
|
+
onChange,
|
|
29
|
+
className,
|
|
30
|
+
matchCount,
|
|
31
|
+
id,
|
|
32
|
+
onKeyDown
|
|
33
|
+
} = this.props;
|
|
34
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
35
|
+
className: classNames('search-group', className)
|
|
36
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
37
|
+
type: "search",
|
|
38
|
+
value: value,
|
|
39
|
+
onChange: onChange,
|
|
40
|
+
onKeyDown: onKeyDown,
|
|
41
|
+
className: "form-control",
|
|
42
|
+
placeholder: placeholder,
|
|
43
|
+
ref: this.inputField,
|
|
44
|
+
id: id
|
|
45
|
+
}), matchCount != null && /*#__PURE__*/React.createElement("span", {
|
|
46
|
+
className: "search-match"
|
|
47
|
+
}, matchCount), /*#__PURE__*/React.createElement("span", {
|
|
48
|
+
className: "search-icon"
|
|
49
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
50
|
+
icon: vsSearch
|
|
51
|
+
})));
|
|
52
|
+
}
|
|
87
53
|
|
|
88
|
-
|
|
89
|
-
}(PureComponent);
|
|
54
|
+
}
|
|
90
55
|
|
|
91
56
|
_defineProperty(SearchInput, "defaultProps", {
|
|
92
57
|
placeholder: 'Search',
|
|
93
58
|
className: '',
|
|
94
59
|
matchCount: null,
|
|
95
|
-
|
|
60
|
+
|
|
61
|
+
onKeyDown() {// no-op
|
|
96
62
|
},
|
|
63
|
+
|
|
97
64
|
id: ''
|
|
98
65
|
});
|
|
99
66
|
|
package/dist/SearchInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SearchInput.tsx"],"names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","SearchInput","props","inputField","createRef","current","
|
|
1
|
+
{"version":3,"sources":["../src/SearchInput.tsx"],"names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","SearchInput","constructor","props","inputField","createRef","focus","current","render","value","placeholder","onChange","className","matchCount","id","onKeyDown"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,aAAhB,QAAqC,OAArC;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAaA,MAAMC,WAAN,SAA0BJ,aAA1B,CAA0D;AAWxDK,EAAAA,WAAW,CAACC,KAAD,EAA0B;AACnC,UAAMA,KAAN;;AADmC;;AAEnC,SAAKC,UAAL,gBAAkBR,KAAK,CAACS,SAAN,EAAlB;AACD;;AAIDC,EAAAA,KAAK,GAAS;AAAA;;AACZ,kCAAKF,UAAL,CAAgBG,OAAhB,gFAAyBD,KAAzB;AACD;;AAEDE,EAAAA,MAAM,GAAgB;AACpB,QAAM;AACJC,MAAAA,KADI;AAEJC,MAAAA,WAFI;AAGJC,MAAAA,QAHI;AAIJC,MAAAA,SAJI;AAKJC,MAAAA,UALI;AAMJC,MAAAA,EANI;AAOJC,MAAAA;AAPI,QAQF,KAAKZ,KART;AASA,wBACE;AAAK,MAAA,SAAS,EAAEH,UAAU,CAAC,cAAD,EAAiBY,SAAjB;AAA1B,oBACE;AACE,MAAA,IAAI,EAAC,QADP;AAEE,MAAA,KAAK,EAAEH,KAFT;AAGE,MAAA,QAAQ,EAAEE,QAHZ;AAIE,MAAA,SAAS,EAAEI,SAJb;AAKE,MAAA,SAAS,EAAC,cALZ;AAME,MAAA,WAAW,EAAEL,WANf;AAOE,MAAA,GAAG,EAAE,KAAKN,UAPZ;AAQE,MAAA,EAAE,EAAEU;AARN,MADF,EAWGD,UAAU,IAAI,IAAd,iBACC;AAAM,MAAA,SAAS,EAAC;AAAhB,OAAgCA,UAAhC,CAZJ,eAcE;AAAM,MAAA,SAAS,EAAC;AAAhB,oBACE,oBAAC,eAAD;AAAiB,MAAA,IAAI,EAAEd;AAAvB,MADF,CAdF,CADF;AAoBD;;AApDuD;;gBAApDE,W,kBACkB;AACpBS,EAAAA,WAAW,EAAE,QADO;AAEpBE,EAAAA,SAAS,EAAE,EAFS;AAGpBC,EAAAA,UAAU,EAAE,IAHQ;;AAIpBE,EAAAA,SAAS,GAAS,CAChB;AACD,GANmB;;AAOpBD,EAAAA,EAAE,EAAE;AAPgB,C;;AAsDxB,eAAeb,WAAf","sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport './SearchInput.scss';\n\ninterface SearchInputProps {\n value: string;\n placeholder: string;\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n className: string;\n matchCount: number;\n id: string;\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n static defaultProps = {\n placeholder: 'Search',\n className: '',\n matchCount: null,\n onKeyDown(): void {\n // no-op\n },\n id: '',\n };\n\n constructor(props: SearchInputProps) {\n super(props);\n this.inputField = React.createRef();\n }\n\n inputField: React.RefObject<HTMLInputElement>;\n\n focus(): void {\n this.inputField.current?.focus();\n }\n\n render(): JSX.Element {\n const {\n value,\n placeholder,\n onChange,\n className,\n matchCount,\n id,\n onKeyDown,\n } = this.props;\n return (\n <div className={classNames('search-group', className)}>\n <input\n type=\"search\"\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n className=\"form-control\"\n placeholder={placeholder}\n ref={this.inputField}\n id={id}\n />\n {matchCount != null && (\n <span className=\"search-match\">{matchCount}</span>\n )}\n <span className=\"search-icon\">\n <FontAwesomeIcon icon={vsSearch} />\n </span>\n </div>\n );\n }\n}\n\nexport default SearchInput;\n"],"file":"SearchInput.js"}
|
package/dist/Select.js
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
|
|
4
|
-
var Select =
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
var Select = (_ref) => {
|
|
5
|
+
var {
|
|
6
|
+
children,
|
|
7
|
+
onChange,
|
|
8
|
+
className,
|
|
9
|
+
defaultValue,
|
|
10
|
+
value,
|
|
11
|
+
disabled
|
|
12
|
+
} = _ref;
|
|
13
|
+
var handleChange = useCallback(event => {
|
|
12
14
|
onChange(event.target.value);
|
|
13
15
|
}, [onChange]);
|
|
14
16
|
return /*#__PURE__*/React.createElement("select", {
|
package/dist/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Select.tsx"],"names":["React","useCallback","classNames","Select","children","onChange","className","defaultValue","value","disabled","handleChange","event","target"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,OAAOC,UAAP,MAAuB,YAAvB;;AAWA,IAAMC,MAAM,GAAG,
|
|
1
|
+
{"version":3,"sources":["../src/Select.tsx"],"names":["React","useCallback","classNames","Select","children","onChange","className","defaultValue","value","disabled","handleChange","event","target"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,OAAOC,UAAP,MAAuB,YAAvB;;AAWA,IAAMC,MAAM,GAAG,UAOiB;AAAA,MAPhB;AACdC,IAAAA,QADc;AAEdC,IAAAA,QAFc;AAGdC,IAAAA,SAHc;AAIdC,IAAAA,YAJc;AAKdC,IAAAA,KALc;AAMdC,IAAAA;AANc,GAOgB;AAC9B,MAAMC,YAAY,GAAGT,WAAW,CAC9BU,KAAK,IAAI;AACPN,IAAAA,QAAQ,CAACM,KAAK,CAACC,MAAN,CAAaJ,KAAd,CAAR;AACD,GAH6B,EAI9B,CAACH,QAAD,CAJ8B,CAAhC;AAOA,sBACE;AACE,IAAA,SAAS,EAAEH,UAAU,CAAC,eAAD,EAAkBI,SAAlB,CADvB;AAEE,IAAA,QAAQ,EAAEI,YAFZ;AAGE,IAAA,YAAY,EAAEH,YAHhB;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,QAAQ,EAAEC;AALZ,KAOGL,QAPH,CADF;AAWD,CA1BD;;AA4BA,eAAeD,MAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport classNames from 'classnames';\n\nexport type SelectProps = {\n children: React.ReactNode;\n onChange: (value: string) => void;\n className?: string;\n defaultValue?: string;\n value?: string;\n disabled?: boolean;\n};\n\nconst Select = ({\n children,\n onChange,\n className,\n defaultValue,\n value,\n disabled,\n}: SelectProps): JSX.Element => {\n const handleChange = useCallback(\n event => {\n onChange(event.target.value);\n },\n [onChange]\n );\n\n return (\n <select\n className={classNames('custom-select', className)}\n onChange={handleChange}\n defaultValue={defaultValue}\n value={value}\n disabled={disabled}\n >\n {children}\n </select>\n );\n};\n\nexport default Select;\n"],"file":"Select.js"}
|
package/dist/SelectValueList.js
CHANGED
|
@@ -1,55 +1,25 @@
|
|
|
1
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
2
|
-
|
|
3
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
4
|
-
|
|
5
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
6
|
-
|
|
7
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
8
|
-
|
|
9
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
10
|
-
|
|
11
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
12
|
-
|
|
13
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
14
|
-
|
|
15
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
16
|
-
|
|
17
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
18
|
-
|
|
19
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
20
|
-
|
|
21
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
22
|
-
|
|
23
1
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
24
2
|
|
|
25
3
|
import React, { PureComponent } from 'react';
|
|
26
4
|
import "./SelectValueList.css";
|
|
27
5
|
import memoize from 'memoizee';
|
|
28
|
-
import Checkbox from
|
|
6
|
+
import Checkbox from "./Checkbox.js";
|
|
29
7
|
|
|
30
8
|
/**
|
|
31
9
|
* Select values from a long scrollable list.
|
|
32
10
|
* Swaps items in and out for infinite scrolling
|
|
33
11
|
*/
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var _super = _createSuper(SelectValueList);
|
|
38
|
-
|
|
39
|
-
function SelectValueList(props) {
|
|
40
|
-
var _this;
|
|
12
|
+
class SelectValueList extends PureComponent {
|
|
13
|
+
constructor(props) {
|
|
14
|
+
super(props);
|
|
41
15
|
|
|
42
|
-
|
|
16
|
+
_defineProperty(this, "list", void 0);
|
|
43
17
|
|
|
44
|
-
|
|
18
|
+
_defineProperty(this, "topRow", void 0);
|
|
45
19
|
|
|
46
|
-
_defineProperty(
|
|
20
|
+
_defineProperty(this, "bottomRow", void 0);
|
|
47
21
|
|
|
48
|
-
_defineProperty(
|
|
49
|
-
|
|
50
|
-
_defineProperty(_assertThisInitialized(_this), "bottomRow", void 0);
|
|
51
|
-
|
|
52
|
-
_defineProperty(_assertThisInitialized(_this), "getCachedItem", memoize(function (itemIndex, key, value, displayValue, rowHeight, isSelected, disabled) {
|
|
22
|
+
_defineProperty(this, "getCachedItem", memoize((itemIndex, key, value, displayValue, rowHeight, isSelected, disabled) => {
|
|
53
23
|
var style = {
|
|
54
24
|
height: rowHeight
|
|
55
25
|
};
|
|
@@ -61,29 +31,27 @@ var SelectValueList = /*#__PURE__*/function (_PureComponent) {
|
|
|
61
31
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
62
32
|
checked: isSelected,
|
|
63
33
|
disabled: disabled,
|
|
64
|
-
onChange:
|
|
65
|
-
return _this.handleSelect(itemIndex);
|
|
66
|
-
}
|
|
34
|
+
onChange: () => this.handleSelect(itemIndex)
|
|
67
35
|
}, text));
|
|
68
36
|
}, {
|
|
69
37
|
max: 1000
|
|
70
38
|
}));
|
|
71
39
|
|
|
72
|
-
_defineProperty(
|
|
40
|
+
_defineProperty(this, "getCachedItems", memoize((items, rowHeight, offset, disabled) => {
|
|
73
41
|
var itemElements = [];
|
|
74
42
|
|
|
75
43
|
for (var i = 0; i < items.length; i += 1) {
|
|
76
44
|
var item = items[i];
|
|
77
|
-
var
|
|
78
|
-
|
|
79
|
-
|
|
45
|
+
var {
|
|
46
|
+
value: _value,
|
|
47
|
+
displayValue,
|
|
48
|
+
isSelected
|
|
49
|
+
} = item;
|
|
80
50
|
|
|
81
51
|
var _itemIndex = offset + i;
|
|
82
52
|
|
|
83
53
|
var key = _itemIndex;
|
|
84
|
-
|
|
85
|
-
var element = _this.getCachedItem(_itemIndex, key, _value, displayValue, rowHeight, isSelected, disabled);
|
|
86
|
-
|
|
54
|
+
var element = this.getCachedItem(_itemIndex, key, _value, displayValue, rowHeight, isSelected, disabled);
|
|
87
55
|
itemElements.push(element);
|
|
88
56
|
}
|
|
89
57
|
|
|
@@ -92,100 +60,95 @@ var SelectValueList = /*#__PURE__*/function (_PureComponent) {
|
|
|
92
60
|
max: 1
|
|
93
61
|
}));
|
|
94
62
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
return _this;
|
|
63
|
+
this.handleScroll = this.handleScroll.bind(this);
|
|
64
|
+
this.handleSelect = this.handleSelect.bind(this);
|
|
65
|
+
this.list = /*#__PURE__*/React.createRef();
|
|
66
|
+
this.topRow = null;
|
|
67
|
+
this.bottomRow = null;
|
|
101
68
|
}
|
|
102
69
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
70
|
+
componentDidMount() {
|
|
71
|
+
this.sendViewportUpdate();
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
componentDidUpdate() {
|
|
75
|
+
this.sendViewportUpdate();
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
handleScroll() {
|
|
79
|
+
this.sendViewportUpdate();
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
handleSelect(itemIndex) {
|
|
83
|
+
var {
|
|
84
|
+
items,
|
|
85
|
+
offset,
|
|
86
|
+
onSelect
|
|
87
|
+
} = this.props;
|
|
88
|
+
var visibleItemIndex = itemIndex - offset;
|
|
89
|
+
|
|
90
|
+
if (visibleItemIndex >= 0 && visibleItemIndex < items.length) {
|
|
91
|
+
var item = items[visibleItemIndex];
|
|
92
|
+
var {
|
|
93
|
+
value: _value2
|
|
94
|
+
} = item;
|
|
95
|
+
onSelect(itemIndex, _value2);
|
|
96
|
+
} else {
|
|
97
|
+
onSelect(itemIndex, null);
|
|
112
98
|
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
sendViewportUpdate() {
|
|
102
|
+
if (!this.list.current || this.list.current.clientHeight === 0) {
|
|
103
|
+
return;
|
|
117
104
|
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
onSelect(itemIndex, null);
|
|
133
|
-
}
|
|
105
|
+
|
|
106
|
+
var {
|
|
107
|
+
onViewportChange,
|
|
108
|
+
rowHeight
|
|
109
|
+
} = this.props;
|
|
110
|
+
var top = this.list.current.scrollTop;
|
|
111
|
+
var bottom = top + this.list.current.clientHeight;
|
|
112
|
+
var topRow = Math.floor(top / rowHeight);
|
|
113
|
+
var bottomRow = Math.ceil(bottom / rowHeight);
|
|
114
|
+
|
|
115
|
+
if (this.topRow !== topRow || this.bottomRow !== bottomRow) {
|
|
116
|
+
this.topRow = topRow;
|
|
117
|
+
this.bottomRow = bottomRow;
|
|
118
|
+
onViewportChange(topRow, bottomRow);
|
|
134
119
|
}
|
|
135
|
-
}
|
|
136
|
-
key: "sendViewportUpdate",
|
|
137
|
-
value: function sendViewportUpdate() {
|
|
138
|
-
if (!this.list.current || this.list.current.clientHeight === 0) {
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
120
|
+
}
|
|
141
121
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
122
|
+
render() {
|
|
123
|
+
var {
|
|
124
|
+
disabled,
|
|
125
|
+
items,
|
|
126
|
+
itemCount,
|
|
127
|
+
offset,
|
|
128
|
+
rowHeight
|
|
129
|
+
} = this.props;
|
|
130
|
+
var itemElements = this.getCachedItems(items, rowHeight, offset, disabled);
|
|
131
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
132
|
+
className: "select-value-list-scroll-pane h-100 w-100",
|
|
133
|
+
onScroll: this.handleScroll,
|
|
134
|
+
ref: this.list
|
|
135
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
136
|
+
className: "select-value-list",
|
|
137
|
+
style: {
|
|
138
|
+
height: itemCount * rowHeight
|
|
154
139
|
}
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
var itemElements = this.getCachedItems(items, rowHeight, offset, disabled);
|
|
166
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
167
|
-
className: "select-value-list-scroll-pane h-100 w-100",
|
|
168
|
-
onScroll: this.handleScroll,
|
|
169
|
-
ref: this.list
|
|
170
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
171
|
-
className: "select-value-list",
|
|
172
|
-
style: {
|
|
173
|
-
height: itemCount * rowHeight
|
|
174
|
-
}
|
|
175
|
-
}, /*#__PURE__*/React.createElement("ol", {
|
|
176
|
-
className: "select-value-list-content",
|
|
177
|
-
style: {
|
|
178
|
-
position: 'absolute',
|
|
179
|
-
height: items.length * rowHeight,
|
|
180
|
-
top: offset * rowHeight,
|
|
181
|
-
left: 0
|
|
182
|
-
}
|
|
183
|
-
}, itemElements)));
|
|
184
|
-
}
|
|
185
|
-
}]);
|
|
140
|
+
}, /*#__PURE__*/React.createElement("ol", {
|
|
141
|
+
className: "select-value-list-content",
|
|
142
|
+
style: {
|
|
143
|
+
position: 'absolute',
|
|
144
|
+
height: items.length * rowHeight,
|
|
145
|
+
top: offset * rowHeight,
|
|
146
|
+
left: 0
|
|
147
|
+
}
|
|
148
|
+
}, itemElements)));
|
|
149
|
+
}
|
|
186
150
|
|
|
187
|
-
|
|
188
|
-
}(PureComponent);
|
|
151
|
+
}
|
|
189
152
|
|
|
190
153
|
_defineProperty(SelectValueList, "defaultProps", {
|
|
191
154
|
disabled: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SelectValueList.tsx"],"names":["React","PureComponent","memoize","Checkbox","SelectValueList","props","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleScroll","bind","list","createRef","topRow","bottomRow","sendViewportUpdate","onSelect","visibleItemIndex","current","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","itemCount","getCachedItems","position","left"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/SelectValueList.tsx"],"names":["React","PureComponent","memoize","Checkbox","SelectValueList","constructor","props","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleScroll","bind","list","createRef","topRow","bottomRow","componentDidMount","sendViewportUpdate","componentDidUpdate","onSelect","visibleItemIndex","current","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","render","itemCount","getCachedItems","position","left"],"mappings":"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","sourcesContent":["import React, { PureComponent } from 'react';\nimport './SelectValueList.scss';\nimport memoize from 'memoizee';\nimport Checkbox from './Checkbox';\n\ninterface SelectItem<T> {\n value: T;\n displayValue?: string;\n isSelected: boolean;\n}\n\ntype SelectValueListProps<T> = {\n disabled: boolean;\n // Total item count\n itemCount: number;\n rowHeight: number;\n\n // Offset of the top item in the items array\n offset: number;\n items: SelectItem<T>[];\n\n onSelect(itemIndex: number, value: T | null): void;\n onViewportChange(topRow: number, bottomRow: number): void;\n};\n\n/**\n * Select values from a long scrollable list.\n * Swaps items in and out for infinite scrolling\n */\nclass SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {\n static defaultProps = {\n disabled: false,\n rowHeight: 21,\n };\n\n constructor(props: SelectValueListProps<T>) {\n super(props);\n\n this.handleScroll = this.handleScroll.bind(this);\n this.handleSelect = this.handleSelect.bind(this);\n\n this.list = React.createRef();\n this.topRow = null;\n this.bottomRow = null;\n }\n\n componentDidMount(): void {\n this.sendViewportUpdate();\n }\n\n componentDidUpdate(): void {\n this.sendViewportUpdate();\n }\n\n list: React.RefObject<HTMLDivElement>;\n\n topRow: number | null;\n\n bottomRow: number | null;\n\n getCachedItem = memoize(\n (\n itemIndex: number,\n key: number,\n value: T,\n displayValue: string | undefined,\n rowHeight: number,\n isSelected: boolean,\n disabled: boolean\n ): JSX.Element => {\n const style = {\n height: rowHeight,\n };\n const text = displayValue != null ? displayValue : value;\n\n return (\n <li className=\"value-list-item\" style={style} key={key}>\n <Checkbox\n checked={isSelected}\n disabled={disabled}\n onChange={() => this.handleSelect(itemIndex)}\n >\n {text}\n </Checkbox>\n </li>\n );\n },\n { max: 1000 }\n );\n\n getCachedItems = memoize(\n (\n items: SelectItem<T>[],\n rowHeight: number,\n offset: number,\n disabled: boolean\n ): React.ReactNode => {\n const itemElements: JSX.Element[] = [];\n for (let i = 0; i < items.length; i += 1) {\n const item = items[i];\n const { value, displayValue, isSelected } = item;\n const itemIndex = offset + i;\n const key = itemIndex;\n const element = this.getCachedItem(\n itemIndex,\n key,\n value,\n displayValue,\n rowHeight,\n isSelected,\n disabled\n );\n itemElements.push(element);\n }\n return itemElements;\n },\n { max: 1 }\n );\n\n handleScroll(): void {\n this.sendViewportUpdate();\n }\n\n handleSelect(itemIndex: number): void {\n const { items, offset, onSelect } = this.props;\n const visibleItemIndex = itemIndex - offset;\n if (visibleItemIndex >= 0 && visibleItemIndex < items.length) {\n const item = items[visibleItemIndex];\n const { value } = item;\n onSelect(itemIndex, value);\n } else {\n onSelect(itemIndex, null);\n }\n }\n\n sendViewportUpdate(): void {\n if (!this.list.current || this.list.current.clientHeight === 0) {\n return;\n }\n\n const { onViewportChange, rowHeight } = this.props;\n const top = this.list.current.scrollTop;\n const bottom = top + this.list.current.clientHeight;\n\n const topRow = Math.floor(top / rowHeight);\n const bottomRow = Math.ceil(bottom / rowHeight);\n\n if (this.topRow !== topRow || this.bottomRow !== bottomRow) {\n this.topRow = topRow;\n this.bottomRow = bottomRow;\n onViewportChange(topRow, bottomRow);\n }\n }\n\n render(): JSX.Element {\n const { disabled, items, itemCount, offset, rowHeight } = this.props;\n const itemElements = this.getCachedItems(\n items,\n rowHeight,\n offset,\n disabled\n );\n\n return (\n <div\n className=\"select-value-list-scroll-pane h-100 w-100\"\n onScroll={this.handleScroll}\n ref={this.list}\n >\n <div\n className=\"select-value-list\"\n style={{ height: itemCount * rowHeight }}\n >\n <ol\n className=\"select-value-list-content\"\n style={{\n position: 'absolute',\n height: items.length * rowHeight,\n top: offset * rowHeight,\n left: 0,\n }}\n >\n {itemElements}\n </ol>\n </div>\n </div>\n );\n }\n}\n\nexport default SelectValueList;\n"],"file":"SelectValueList.js"}
|
package/dist/SocketedButton.js
CHANGED
|
@@ -3,17 +3,19 @@ import classNames from 'classnames';
|
|
|
3
3
|
import { dhExclamation, vsLink } from '@deephaven/icons';
|
|
4
4
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
5
5
|
import "./SocketedButton.css";
|
|
6
|
-
var SocketedButton = /*#__PURE__*/React.forwardRef(
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
var SocketedButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
7
|
+
var {
|
|
8
|
+
children,
|
|
9
|
+
className,
|
|
10
|
+
disabled,
|
|
11
|
+
isLinked,
|
|
12
|
+
isLinkedSource,
|
|
13
|
+
isInvalid,
|
|
14
|
+
onClick,
|
|
15
|
+
onMouseEnter,
|
|
16
|
+
onMouseLeave,
|
|
17
|
+
style
|
|
18
|
+
} = props;
|
|
17
19
|
return /*#__PURE__*/React.createElement("button", {
|
|
18
20
|
ref: ref,
|
|
19
21
|
type: "button",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SocketedButton.tsx"],"names":["React","classNames","dhExclamation","vsLink","FontAwesomeIcon","SocketedButton","forwardRef","props","ref","children","className","disabled","isLinked","isLinkedSource","isInvalid","onClick","onMouseEnter","onMouseLeave","style","displayName","defaultProps","undefined"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,EAAwBC,MAAxB,QAAsC,kBAAtC;AACA,SAASC,eAAT,QAAgC,gCAAhC
|
|
1
|
+
{"version":3,"sources":["../src/SocketedButton.tsx"],"names":["React","classNames","dhExclamation","vsLink","FontAwesomeIcon","SocketedButton","forwardRef","props","ref","children","className","disabled","isLinked","isLinkedSource","isInvalid","onClick","onMouseEnter","onMouseLeave","style","displayName","defaultProps","undefined"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,EAAwBC,MAAxB,QAAsC,kBAAtC;AACA,SAASC,eAAT,QAAgC,gCAAhC;;AAiBA,IAAMC,cAAc,gBAAGL,KAAK,CAACM,UAAN,CACrB,CAACC,KAAD,EAA6BC,GAA7B,KAAqC;AACnC,MAAM;AACJC,IAAAA,QADI;AAEJC,IAAAA,SAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,cALI;AAMJC,IAAAA,SANI;AAOJC,IAAAA,OAPI;AAQJC,IAAAA,YARI;AASJC,IAAAA,YATI;AAUJC,IAAAA;AAVI,MAWFX,KAXJ;AAYA,sBACE;AACE,IAAA,GAAG,EAAEC,GADP;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,IAAA,SAAS,EAAEP,UAAU,CACnB,cADmB,EAEnB;AAAE,6BAAuBW,QAAQ,IAAIC;AAArC,KAFmB,EAGnB;AAAE,oCAA8BA;AAAhC,KAHmB,EAInB;AAAE,oBAAcC;AAAhB,KAJmB,EAKnBJ,SALmB,CAHvB;AAUE,IAAA,OAAO,EAAEK,OAVX;AAWE,IAAA,YAAY,EAAEC,YAXhB;AAYE,IAAA,YAAY,EAAEC,YAZhB;AAaE,IAAA,KAAK,EAAEC,KAbT;AAcE,IAAA,QAAQ,EAAEP;AAdZ,KAgBGF,QAhBH,eAiBE,oBAAC,eAAD;AACE,IAAA,IAAI,EAAEN,MADR;AAEE,IAAA,SAAS,EAAC,0BAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,IAjBF,eAsBE,oBAAC,eAAD;AACE,IAAA,IAAI,EAAED,aADR;AAEE,IAAA,SAAS,EAAC;AAFZ,IAtBF,CADF;AA6BD,CA3CoB,CAAvB;AA8CAG,cAAc,CAACc,WAAf,GAA6B,gBAA7B;AAEAd,cAAc,CAACe,YAAf,GAA8B;AAC5BX,EAAAA,QAAQ,EAAEY,SADkB;AAE5BX,EAAAA,SAAS,EAAE,EAFiB;AAG5BC,EAAAA,QAAQ,EAAE,KAHkB;AAI5BC,EAAAA,QAAQ,EAAE,KAJkB;AAK5BC,EAAAA,cAAc,EAAE,KALY;AAM5BC,EAAAA,SAAS,EAAE,KANiB;AAO5BC,EAAAA,OAAO,EAAEM,SAPmB;AAQ5BL,EAAAA,YAAY,EAAEK,SARc;AAS5BJ,EAAAA,YAAY,EAAEI,SATc;AAU5BH,EAAAA,KAAK,EAAEG;AAVqB,CAA9B;AAaA,eAAehB,cAAf","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { dhExclamation, vsLink } from '@deephaven/icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport './SocketedButton.scss';\n\ntype SocketedButtonProps = {\n children?: React.ReactNode;\n className?: string;\n disabled?: boolean;\n isLinked?: boolean;\n isLinkedSource?: boolean;\n isInvalid?: boolean;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n style?: React.CSSProperties;\n};\n\nconst SocketedButton = React.forwardRef<HTMLButtonElement, SocketedButtonProps>(\n (props: SocketedButtonProps, ref) => {\n const {\n children,\n className,\n disabled,\n isLinked,\n isLinkedSource,\n isInvalid,\n onClick,\n onMouseEnter,\n onMouseLeave,\n style,\n } = props;\n return (\n <button\n ref={ref}\n type=\"button\"\n className={classNames(\n 'btn-socketed',\n { 'btn-socketed-linked': isLinked || isLinkedSource },\n { 'btn-socketed-linked-source': isLinkedSource },\n { 'is-invalid': isInvalid },\n className\n )}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={style}\n disabled={disabled}\n >\n {children}\n <FontAwesomeIcon\n icon={vsLink}\n className=\"linked btn-socketed-icon\"\n transform=\"down-1\"\n />\n <FontAwesomeIcon\n icon={dhExclamation}\n className=\"is-invalid btn-socketed-icon\"\n />\n </button>\n );\n }\n);\n\nSocketedButton.displayName = 'SocketedButton';\n\nSocketedButton.defaultProps = {\n children: undefined,\n className: '',\n disabled: false,\n isLinked: false,\n isLinkedSource: false,\n isInvalid: false,\n onClick: undefined,\n onMouseEnter: undefined,\n onMouseLeave: undefined,\n style: undefined,\n};\n\nexport default SocketedButton;\n"],"file":"SocketedButton.js"}
|
package/dist/ThemeExport.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ThemeExport.ts"],"names":["ThemeExport","Object","freeze","transitionMs","transitionMidMs","transitionLongMs","transitionSlowMs"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/ThemeExport.ts"],"names":["ThemeExport","Object","freeze","transitionMs","transitionMidMs","transitionLongMs","transitionSlowMs"],"mappings":";;;;;;OAAOA,W,kCAEP;AACA;;AACA,eAAeC,MAAM,CAACC,MAAP;AACbC,EAAAA,YAAY,EAAE,GADD;AAEbC,EAAAA,eAAe,EAAE,GAFJ;AAGbC,EAAAA,gBAAgB,EAAE,GAHL;AAIbC,EAAAA,gBAAgB,EAAE;AAJL,GAKVN,WALU,EAAf","sourcesContent":["import ThemeExport from './ThemeExport.module.scss';\n\n// Note that TypeScript does not know what keys exist on ThemeExport.module.scss\n// It only knows it's an object with strings for keys and values\nexport default Object.freeze({\n transitionMs: 150,\n transitionMidMs: 200,\n transitionLongMs: 300,\n transitionSlowMs: 1000,\n ...ThemeExport,\n});\n"],"file":"ThemeExport.js"}
|