Skip to content

Commit 74f4cd1

Browse files
authored
Quick Starts (NEONScience#54)
* documents layout and viewing components * document variant support for quick starts * document download status, error handling * document list item resize, document sorting * flexify document list item structure * browserslist update * bump material-table dep version to actual resolved * potential safari object reload fix * safari object reload fix * prepare v1.13.0
1 parent f17f7cf commit 74f4cd1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+4549
-148
lines changed
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
declare const WrappedSplitButton: any;
2+
export default WrappedSplitButton;
Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
"use strict";
2+
3+
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); }
4+
5+
Object.defineProperty(exports, "__esModule", {
6+
value: true
7+
});
8+
exports.default = void 0;
9+
10+
var _react = _interopRequireWildcard(require("react"));
11+
12+
var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
13+
14+
var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
15+
16+
var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));
17+
18+
var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
19+
20+
var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
21+
22+
var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
23+
24+
var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
25+
26+
var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
27+
28+
var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
29+
30+
var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
31+
32+
var _Theme = _interopRequireDefault(require("../Theme/Theme"));
33+
34+
var _typeUtil = require("../../util/typeUtil");
35+
36+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
37+
38+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
39+
40+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41+
42+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
43+
44+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
45+
46+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
47+
48+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
49+
50+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
51+
52+
function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
53+
54+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
55+
56+
var SplitButton = function SplitButton(props) {
57+
var name = props.name,
58+
options = props.options,
59+
selectedOption = props.selectedOption,
60+
selectedOptionDisplayCallback = props.selectedOptionDisplayCallback,
61+
onClick = props.onClick,
62+
onChange = props.onChange,
63+
buttonGroupProps = props.buttonGroupProps,
64+
buttonMenuProps = props.buttonMenuProps,
65+
buttonProps = props.buttonProps;
66+
67+
var _useState = (0, _react.useState)(false),
68+
_useState2 = _slicedToArray(_useState, 2),
69+
open = _useState2[0],
70+
setOpen = _useState2[1];
71+
72+
var _useState3 = (0, _react.useState)(selectedOption),
73+
_useState4 = _slicedToArray(_useState3, 2),
74+
stateSelectedOption = _useState4[0],
75+
setStateSelectedOption = _useState4[1];
76+
77+
var anchorRef = (0, _react.useRef)(null);
78+
var appliedButtonGroupProps = {
79+
variant: 'outlined',
80+
color: 'primary'
81+
};
82+
83+
if ((0, _typeUtil.exists)(buttonGroupProps)) {
84+
appliedButtonGroupProps = buttonGroupProps;
85+
}
86+
87+
var appliedButtonProps = {
88+
color: 'primary',
89+
size: 'small'
90+
};
91+
92+
if ((0, _typeUtil.exists)(buttonProps)) {
93+
appliedButtonProps = buttonProps;
94+
}
95+
96+
var appliedButtonMenuProps = {
97+
color: 'primary',
98+
size: 'small'
99+
};
100+
101+
if ((0, _typeUtil.exists)(buttonMenuProps)) {
102+
appliedButtonMenuProps = buttonMenuProps;
103+
}
104+
105+
(0, _react.useEffect)(function () {
106+
if (selectedOption === stateSelectedOption) return;
107+
setStateSelectedOption(selectedOption);
108+
}, [selectedOption, stateSelectedOption]);
109+
110+
var handleClick = function handleClick() {
111+
onClick(stateSelectedOption);
112+
};
113+
114+
var handleMenuItemClick = function handleMenuItemClick(event, index) {
115+
setStateSelectedOption(options[index]);
116+
onChange(options[index]);
117+
setOpen(false);
118+
};
119+
120+
var handleToggle = function handleToggle() {
121+
setOpen(function (prevOpen) {
122+
return !prevOpen;
123+
});
124+
};
125+
126+
var handleClose = function handleClose(event) {
127+
if (anchorRef.current && anchorRef.current.contains(event.target)) {
128+
return;
129+
}
130+
131+
setOpen(false);
132+
};
133+
134+
var renderSelectedOption = function renderSelectedOption() {
135+
if ((0, _typeUtil.exists)(selectedOptionDisplayCallback)) {
136+
// eslint-disable-next-line max-len
137+
return selectedOptionDisplayCallback(stateSelectedOption);
138+
}
139+
140+
return stateSelectedOption;
141+
};
142+
143+
return /*#__PURE__*/_react.default.createElement(_Grid.default, {
144+
container: true,
145+
direction: "column",
146+
alignItems: "center"
147+
}, /*#__PURE__*/_react.default.createElement(_Grid.default, {
148+
item: true,
149+
xs: 12
150+
}, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, _extends({
151+
"aria-label": "".concat(name, "-split-button")
152+
}, appliedButtonGroupProps, {
153+
ref: anchorRef
154+
}), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, appliedButtonProps, {
155+
onClick: handleClick
156+
}), renderSelectedOption()), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
157+
"aria-controls": open ? "".concat(name, "-split-button-menu") : undefined,
158+
"aria-expanded": open ? 'true' : undefined,
159+
"aria-label": "".concat(name, "-split-button-select"),
160+
"aria-haspopup": "menu"
161+
}, appliedButtonMenuProps, {
162+
onClick: handleToggle
163+
}), /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null))), /*#__PURE__*/_react.default.createElement(_Popper.default, {
164+
transition: true,
165+
anchorEl: anchorRef.current,
166+
open: open,
167+
role: undefined
168+
}, function (_ref) {
169+
var TransitionProps = _ref.TransitionProps,
170+
placement = _ref.placement;
171+
return /*#__PURE__*/_react.default.createElement(_Grow.default, _extends({}, TransitionProps, {
172+
style: {
173+
transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
174+
}
175+
}), /*#__PURE__*/_react.default.createElement(_Paper.default, null, /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
176+
onClickAway: handleClose
177+
}, /*#__PURE__*/_react.default.createElement(_MenuList.default, {
178+
id: "".concat(name, "-split-button-menu")
179+
}, options.map(function (option, index) {
180+
return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
181+
key: option,
182+
selected: option === stateSelectedOption,
183+
onClick: function onClick(event) {
184+
return handleMenuItemClick(event, index);
185+
}
186+
}, option);
187+
})))));
188+
})));
189+
};
190+
191+
var WrappedSplitButton = _Theme.default.getWrappedComponent(SplitButton);
192+
193+
var _default = WrappedSplitButton;
194+
exports.default = _default;

lib/components/Button/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./SplitButton";

lib/components/Button/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
Object.defineProperty(exports, "default", {
7+
enumerable: true,
8+
get: function get() {
9+
return _SplitButton.default;
10+
}
11+
});
12+
13+
var _SplitButton = _interopRequireDefault(require("./SplitButton"));
14+
15+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/components/Button/package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"private": true,
3+
"name": "neon-buttons",
4+
"main": "./SplitButton.tsx",
5+
"module": "./SplitButton.tsx"
6+
}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { DocumentListItemModel } from './DocumentListItem';
2+
import { Nullable } from '../../types/core';
3+
export interface DocumentListProps {
4+
documents: DocumentListItemModel[];
5+
makeDownloadableLink: Nullable<boolean>;
6+
enableDownloadButton: Nullable<boolean>;
7+
fetchVariants: Nullable<boolean>;
8+
enableVariantChips: Nullable<boolean>;
9+
}
10+
declare const WrappedDocumentList: any;
11+
export default WrappedDocumentList;
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = void 0;
7+
8+
var _react = _interopRequireDefault(require("react"));
9+
10+
var _List = _interopRequireDefault(require("@material-ui/core/List"));
11+
12+
var _styles = require("@material-ui/core/styles");
13+
14+
var _DocumentListItem = _interopRequireDefault(require("./DocumentListItem"));
15+
16+
var _Theme = _interopRequireDefault(require("../Theme/Theme"));
17+
18+
var _WarningCard = _interopRequireDefault(require("../Card/WarningCard"));
19+
20+
var _typeUtil = require("../../util/typeUtil");
21+
22+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23+
24+
var useStyles = (0, _styles.makeStyles)(function (muiTheme) {
25+
return (// eslint-disable-next-line implicit-arrow-linebreak
26+
(0, _styles.createStyles)({
27+
list: {
28+
paddingTop: muiTheme.spacing(0)
29+
}
30+
})
31+
);
32+
});
33+
34+
var DocumentList = function DocumentList(props) {
35+
var classes = useStyles(_Theme.default);
36+
var documents = props.documents,
37+
makeDownloadableLink = props.makeDownloadableLink,
38+
enableDownloadButton = props.enableDownloadButton,
39+
fetchVariants = props.fetchVariants,
40+
enableVariantChips = props.enableVariantChips;
41+
42+
if (!(0, _typeUtil.existsNonEmpty)(documents)) {
43+
return /*#__PURE__*/_react.default.createElement("div", {
44+
className: classes.container
45+
}, /*#__PURE__*/_react.default.createElement(_WarningCard.default, {
46+
title: "No Documents",
47+
message: "No documents available to display"
48+
}));
49+
}
50+
51+
var renderDocuments = function renderDocuments() {
52+
return documents.map(function (document, index) {
53+
return /*#__PURE__*/_react.default.createElement(_DocumentListItem.default, {
54+
key: document.name,
55+
id: index,
56+
document: document,
57+
makeDownloadableLink: makeDownloadableLink === true,
58+
enableDownloadButton: enableDownloadButton,
59+
fetchVariants: fetchVariants,
60+
enableVariantChips: enableVariantChips
61+
});
62+
});
63+
};
64+
65+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_List.default, {
66+
dense: true,
67+
className: classes.list
68+
}, renderDocuments()));
69+
};
70+
71+
var WrappedDocumentList = _Theme.default.getWrappedComponent(DocumentList);
72+
73+
var _default = WrappedDocumentList;
74+
exports.default = _default;
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { Nullable, Undef } from '../../types/core';
3+
import { NeonDocument } from '../../types/neonApi';
4+
export interface DocumentListItemModel extends NeonDocument {
5+
variants: NeonDocument[];
6+
}
7+
export interface DocumentListItemProps {
8+
id: number;
9+
document: DocumentListItemModel;
10+
makeDownloadableLink: boolean;
11+
enableDownloadButton: Nullable<boolean>;
12+
fetchVariants: Nullable<boolean>;
13+
enableVariantChips: Nullable<boolean>;
14+
containerComponent: Undef<React.ElementType<React.HTMLAttributes<HTMLDivElement>>>;
15+
}
16+
declare const WrappedDocumentListItem: any;
17+
export default WrappedDocumentListItem;

0 commit comments

Comments
 (0)