superdesk-ui-framework 2.4.14 → 2.4.18
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/app/index.js +1 -0
- package/app/scripts/modals.js +22 -9
- package/app/styles/_accessibility.scss +3 -2
- package/app/styles/_buttons.scss +17 -0
- package/app/styles/_modals.scss +23 -17
- package/app/styles/_tooltips.scss +66 -0
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_sd-toaster.scss +6 -5
- package/app/styles/form-elements/_inputs.scss +1 -0
- package/app/styles/form-elements/_select-grid.scss +77 -0
- package/app/styles/pr-superdesk-theme.scss +3 -1
- package/app/styles/primereact/_pr-menu.scss +38 -0
- package/app/styles/primereact/_pr-skeleton.scss +35 -0
- package/app/styles/variables/_colors.scss +30 -18
- package/app-typescript/components/Button.tsx +2 -2
- package/app-typescript/components/Dropdown.tsx +0 -1
- package/app-typescript/components/DropdownFirst.tsx +2 -2
- package/app-typescript/components/IconPicker.tsx +277 -0
- package/app-typescript/components/Input.tsx +8 -3
- package/app-typescript/components/ListItemLoader.tsx +30 -0
- package/app-typescript/components/Menu.tsx +149 -0
- package/app-typescript/components/PropsList.tsx +2 -2
- package/app-typescript/components/Radio.tsx +19 -10
- package/app-typescript/components/Select.tsx +6 -3
- package/app-typescript/components/SelectGrid.tsx +233 -0
- package/app-typescript/components/SelectWithTemplate.tsx +0 -2
- package/app-typescript/components/Skeleton.tsx +48 -0
- package/app-typescript/components/Tag.tsx +2 -2
- package/app-typescript/components/Toast.tsx +31 -5
- package/app-typescript/components/ToastMessage.tsx +9 -16
- package/app-typescript/components/ToastText.tsx +2 -4
- package/app-typescript/components/ToastWrapper.tsx +4 -4
- package/app-typescript/components/Togglebox.tsx +108 -0
- package/app-typescript/components/Tooltip.tsx +25 -1
- package/app-typescript/index.ts +8 -0
- package/dist/components/modals.html +180 -4
- package/dist/examples.bundle.css +52 -36
- package/dist/examples.bundle.js +5775 -3059
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +14 -1
- package/dist/react/Alerts.tsx +4 -4
- package/dist/react/Autocomplete.tsx +17 -17
- package/dist/react/Badges.tsx +4 -4
- package/dist/react/BigIconFont.tsx +3 -3
- package/dist/react/ButtonGroups.tsx +6 -6
- package/dist/react/Buttons.tsx +11 -11
- package/dist/react/Carousel.tsx +15 -15
- package/dist/react/Checkboxs.tsx +10 -10
- package/dist/react/DatePicker.tsx +6 -6
- package/dist/react/Dropdowns.tsx +15 -15
- package/dist/react/EmptyStates.tsx +4 -4
- package/dist/react/GridItem.tsx +8 -8
- package/dist/react/GridList.tsx +3 -3
- package/dist/react/IconButtons.tsx +3 -3
- package/dist/react/IconFont.tsx +10 -9
- package/dist/react/IconLabels.tsx +4 -4
- package/dist/react/IconPicker.tsx +65 -0
- package/dist/react/Index.tsx +27 -2
- package/dist/react/Inputs.tsx +29 -11
- package/dist/react/Labels.tsx +6 -6
- package/dist/react/LeftNavigations.tsx +6 -6
- package/dist/react/ListItems.tsx +34 -0
- package/dist/react/Menu.tsx +159 -0
- package/dist/react/Modal.tsx +9 -9
- package/dist/react/NavButtons.tsx +7 -7
- package/dist/react/Popover.tsx +5 -5
- package/dist/react/Radios.tsx +29 -29
- package/dist/react/SelectGrid.tsx +121 -0
- package/dist/react/Selects.tsx +31 -9
- package/dist/react/Switch.tsx +5 -5
- package/dist/react/Tabs.tsx +12 -12
- package/dist/react/TimePicker.tsx +4 -4
- package/dist/react/Toasts.tsx +44 -56
- package/dist/react/Togglebox.tsx +51 -0
- package/dist/react/Tooltips.tsx +48 -4
- package/dist/superdesk-ui.bundle.css +3774 -96
- package/dist/superdesk-ui.bundle.js +4503 -2050
- package/dist/vendor.bundle.js +53312 -53308
- package/examples/pages/components/modals.html +180 -4
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +14 -1
- package/examples/pages/react/Alerts.tsx +4 -4
- package/examples/pages/react/Autocomplete.tsx +17 -17
- package/examples/pages/react/Badges.tsx +4 -4
- package/examples/pages/react/BigIconFont.tsx +3 -3
- package/examples/pages/react/ButtonGroups.tsx +6 -6
- package/examples/pages/react/Buttons.tsx +11 -11
- package/examples/pages/react/Carousel.tsx +15 -15
- package/examples/pages/react/Checkboxs.tsx +10 -10
- package/examples/pages/react/DatePicker.tsx +6 -6
- package/examples/pages/react/Dropdowns.tsx +15 -15
- package/examples/pages/react/EmptyStates.tsx +4 -4
- package/examples/pages/react/GridItem.tsx +8 -8
- package/examples/pages/react/GridList.tsx +3 -3
- package/examples/pages/react/IconButtons.tsx +3 -3
- package/examples/pages/react/IconFont.tsx +10 -9
- package/examples/pages/react/IconLabels.tsx +4 -4
- package/examples/pages/react/IconPicker.tsx +65 -0
- package/examples/pages/react/Index.tsx +27 -2
- package/examples/pages/react/Inputs.tsx +29 -11
- package/examples/pages/react/Labels.tsx +6 -6
- package/examples/pages/react/LeftNavigations.tsx +6 -6
- package/examples/pages/react/ListItems.tsx +34 -0
- package/examples/pages/react/Menu.tsx +159 -0
- package/examples/pages/react/Modal.tsx +9 -9
- package/examples/pages/react/NavButtons.tsx +7 -7
- package/examples/pages/react/Popover.tsx +5 -5
- package/examples/pages/react/Radios.tsx +29 -29
- package/examples/pages/react/SelectGrid.tsx +121 -0
- package/examples/pages/react/Selects.tsx +31 -9
- package/examples/pages/react/Switch.tsx +5 -5
- package/examples/pages/react/Tabs.tsx +12 -12
- package/examples/pages/react/TimePicker.tsx +4 -4
- package/examples/pages/react/Toasts.tsx +44 -56
- package/examples/pages/react/Togglebox.tsx +51 -0
- package/examples/pages/react/Tooltips.tsx +48 -4
- package/package.json +2 -2
- package/patches/@superdesk+primereact+5.0.2-4.patch +13 -0
- package/react/components/Button.d.ts +1 -1
- package/react/components/Button.js +2 -1
- package/react/components/Dropdown.js +0 -1
- package/react/components/DropdownFirst.js +1 -1
- package/react/components/IconPicker.d.ts +24 -0
- package/react/components/IconPicker.js +283 -0
- package/react/components/Input.d.ts +2 -1
- package/react/components/Input.js +4 -1
- package/react/components/ListItemLoader.d.ts +4 -0
- package/react/components/ListItemLoader.js +62 -0
- package/react/components/Menu.d.ts +59 -0
- package/react/components/Menu.js +92 -0
- package/react/components/PropsList.d.ts +1 -1
- package/react/components/PropsList.js +1 -1
- package/react/components/Radio.d.ts +8 -7
- package/react/components/Radio.js +1 -1
- package/react/components/Select.d.ts +2 -1
- package/react/components/Select.js +4 -2
- package/react/components/SelectGrid.d.ts +45 -0
- package/react/components/SelectGrid.js +179 -0
- package/react/components/SelectWithTemplate.js +0 -1
- package/react/components/Skeleton.d.ts +30 -0
- package/react/components/Skeleton.js +55 -0
- package/react/components/Tag.js +1 -1
- package/react/components/Toast.d.ts +15 -0
- package/react/components/Toast.js +69 -0
- package/react/components/ToastMessage.d.ts +18 -0
- package/react/components/ToastMessage.js +66 -0
- package/react/components/ToastText.d.ts +9 -0
- package/react/components/ToastText.js +42 -0
- package/react/components/ToastWrapper.d.ts +31 -0
- package/react/components/ToastWrapper.js +116 -0
- package/react/components/Togglebox.d.ts +27 -0
- package/react/components/Togglebox.js +76 -0
- package/react/components/Tooltip.d.ts +2 -5
- package/react/components/Tooltip.js +48 -7
- package/react/index.d.ts +7 -0
- package/react/index.js +14 -0
@@ -0,0 +1,18 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
export declare type MessageProp = React.ReactNode | string;
|
3
|
+
export declare type Position = 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
4
|
+
export declare type NotesType = 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
|
5
|
+
export interface IMessageOptions {
|
6
|
+
id: string;
|
7
|
+
position: Position;
|
8
|
+
message?: MessageProp;
|
9
|
+
duration?: number | null;
|
10
|
+
type?: NotesType;
|
11
|
+
icon?: string;
|
12
|
+
size?: 'fixed-s' | 'fixed-m' | 'fixed-l' | 'fixed-xl';
|
13
|
+
}
|
14
|
+
interface IProps extends IMessageOptions {
|
15
|
+
closeElement(id: string, position: Position): void;
|
16
|
+
}
|
17
|
+
export declare const ToastMessage: ({ id, message, type, icon, size, duration, position, closeElement, }: IProps) => JSX.Element;
|
18
|
+
export {};
|
@@ -0,0 +1,66 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
5
|
+
}) : (function(o, m, k, k2) {
|
6
|
+
if (k2 === undefined) k2 = k;
|
7
|
+
o[k2] = m[k];
|
8
|
+
}));
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
11
|
+
}) : function(o, v) {
|
12
|
+
o["default"] = v;
|
13
|
+
});
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
15
|
+
if (mod && mod.__esModule) return mod;
|
16
|
+
var result = {};
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
18
|
+
__setModuleDefault(result, mod);
|
19
|
+
return result;
|
20
|
+
};
|
21
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
22
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
23
|
+
};
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
25
|
+
exports.ToastMessage = void 0;
|
26
|
+
var React = __importStar(require("react"));
|
27
|
+
var ToastText_1 = __importDefault(require("./ToastText"));
|
28
|
+
var classnames_1 = __importDefault(require("classnames"));
|
29
|
+
exports.ToastMessage = function (_a) {
|
30
|
+
var _b;
|
31
|
+
var id = _a.id, message = _a.message, type = _a.type, icon = _a.icon, size = _a.size, duration = _a.duration, position = _a.position, closeElement = _a.closeElement;
|
32
|
+
var _c = React.useState(false), show = _c[0], setShow = _c[1];
|
33
|
+
var _d = React.useState(false), enter = _d[0], setEnter = _d[1];
|
34
|
+
var timer;
|
35
|
+
React.useEffect(function () { return setShow(true); }, []);
|
36
|
+
if (typeof duration === "number") {
|
37
|
+
React.useEffect(function () {
|
38
|
+
timer = window.setTimeout(function () {
|
39
|
+
close(id, position);
|
40
|
+
}, duration);
|
41
|
+
return function () { return clearTimeout(timer); };
|
42
|
+
}, [enter]);
|
43
|
+
}
|
44
|
+
function onMouseEnter() {
|
45
|
+
clearTimeout(timer);
|
46
|
+
}
|
47
|
+
function onMouseLeave() {
|
48
|
+
setEnter(false);
|
49
|
+
}
|
50
|
+
function close(element, elementPosition) {
|
51
|
+
setShow(false);
|
52
|
+
setTimeout(function () {
|
53
|
+
closeElement(element, elementPosition);
|
54
|
+
}, 100);
|
55
|
+
}
|
56
|
+
var classes = classnames_1.default('sd-toast', (_b = {},
|
57
|
+
_b["sd-toast--" + type] = type,
|
58
|
+
_b["sd-toast--" + size] = size,
|
59
|
+
_b['sd-toast--enter'] = !show && !enter,
|
60
|
+
_b['sd-toast--enter-active'] = show,
|
61
|
+
_b['sd-toast--exit'] = enter && !show,
|
62
|
+
_b['sd-toast--exit-active'] = !show,
|
63
|
+
_b));
|
64
|
+
return (React.createElement("div", { className: classes, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "aria-live": "assertive", "aria-atomic": "true" },
|
65
|
+
React.createElement(ToastText_1.default, { id: id, title: message, icon: icon, onClose: function () { return close(id, position); } })));
|
66
|
+
};
|
@@ -0,0 +1,42 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
5
|
+
}) : (function(o, m, k, k2) {
|
6
|
+
if (k2 === undefined) k2 = k;
|
7
|
+
o[k2] = m[k];
|
8
|
+
}));
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
11
|
+
}) : function(o, v) {
|
12
|
+
o["default"] = v;
|
13
|
+
});
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
15
|
+
if (mod && mod.__esModule) return mod;
|
16
|
+
var result = {};
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
18
|
+
__setModuleDefault(result, mod);
|
19
|
+
return result;
|
20
|
+
};
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
22
|
+
var React = __importStar(require("react"));
|
23
|
+
var Icon_1 = require("./Icon");
|
24
|
+
var ToastText = function (_a) {
|
25
|
+
var id = _a.id, title = _a.title, icon = _a.icon, onClose = _a.onClose;
|
26
|
+
var ref = React.useRef(null);
|
27
|
+
return (React.createElement(React.Fragment, null,
|
28
|
+
icon ?
|
29
|
+
React.createElement("div", { className: 'sd-toast__icon' },
|
30
|
+
React.createElement(Icon_1.Icon, { name: icon })) : null,
|
31
|
+
typeof title === 'string' ?
|
32
|
+
(React.createElement("span", { style: { width: '100%' }, ref: ref, id: id },
|
33
|
+
React.createElement("div", { className: 'sd-toast__message' }, title))) :
|
34
|
+
React.createElement("span", { style: { width: '100%', display: 'inherit' }, ref: ref, id: id }, title),
|
35
|
+
onClose && React.createElement(Close, { onClose: onClose })));
|
36
|
+
};
|
37
|
+
var Close = function (_a) {
|
38
|
+
var onClose = _a.onClose;
|
39
|
+
return (React.createElement("button", { className: "icn-btn sd-toast__actions", type: "button", "aria-label": "Close", onClick: onClose },
|
40
|
+
React.createElement(Icon_1.Icon, { name: 'close-small' })));
|
41
|
+
};
|
42
|
+
exports.default = ToastText;
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { MessageProp, IMessageOptions } from './ToastMessage';
|
3
|
+
declare type State = {
|
4
|
+
top: Array<IMessageOptions>;
|
5
|
+
bottom: Array<IMessageOptions>;
|
6
|
+
'top-right': Array<IMessageOptions>;
|
7
|
+
'top-left': Array<IMessageOptions>;
|
8
|
+
'bottom-right': Array<IMessageOptions>;
|
9
|
+
'bottom-left': Array<IMessageOptions>;
|
10
|
+
};
|
11
|
+
export default class ToastWrapper extends React.PureComponent<{}, State> {
|
12
|
+
static idCounter: number;
|
13
|
+
state: State;
|
14
|
+
constructor(props: {});
|
15
|
+
notify: (message: MessageProp, options: Partial<IMessageOptions>) => {
|
16
|
+
id: string;
|
17
|
+
position: import("./ToastMessage").Position;
|
18
|
+
};
|
19
|
+
createToastState: (message: MessageProp, options: Partial<IMessageOptions>) => {
|
20
|
+
id: string;
|
21
|
+
message: React.ReactNode;
|
22
|
+
icon: string | undefined;
|
23
|
+
position: import("./ToastMessage").Position;
|
24
|
+
duration: number | null | undefined;
|
25
|
+
type: "default" | "primary" | "success" | "warning" | "alert" | "highlight" | "light" | undefined;
|
26
|
+
size: "fixed-s" | "fixed-m" | "fixed-l" | "fixed-xl" | undefined;
|
27
|
+
};
|
28
|
+
requestClose: (id: string, position: keyof State) => void;
|
29
|
+
render(): JSX.Element[];
|
30
|
+
}
|
31
|
+
export {};
|
@@ -0,0 +1,116 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
3
|
+
var extendStatics = function (d, b) {
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6
|
+
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
7
|
+
return extendStatics(d, b);
|
8
|
+
};
|
9
|
+
return function (d, b) {
|
10
|
+
extendStatics(d, b);
|
11
|
+
function __() { this.constructor = d; }
|
12
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
13
|
+
};
|
14
|
+
})();
|
15
|
+
var __assign = (this && this.__assign) || function () {
|
16
|
+
__assign = Object.assign || function(t) {
|
17
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
18
|
+
s = arguments[i];
|
19
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
20
|
+
t[p] = s[p];
|
21
|
+
}
|
22
|
+
return t;
|
23
|
+
};
|
24
|
+
return __assign.apply(this, arguments);
|
25
|
+
};
|
26
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
27
|
+
if (k2 === undefined) k2 = k;
|
28
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
29
|
+
}) : (function(o, m, k, k2) {
|
30
|
+
if (k2 === undefined) k2 = k;
|
31
|
+
o[k2] = m[k];
|
32
|
+
}));
|
33
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
34
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
35
|
+
}) : function(o, v) {
|
36
|
+
o["default"] = v;
|
37
|
+
});
|
38
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
39
|
+
if (mod && mod.__esModule) return mod;
|
40
|
+
var result = {};
|
41
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
42
|
+
__setModuleDefault(result, mod);
|
43
|
+
return result;
|
44
|
+
};
|
45
|
+
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
46
|
+
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
47
|
+
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
48
|
+
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
49
|
+
r[k] = a[j];
|
50
|
+
return r;
|
51
|
+
};
|
52
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
53
|
+
var React = __importStar(require("react"));
|
54
|
+
var ToastMessage_1 = require("./ToastMessage");
|
55
|
+
var firstState = {
|
56
|
+
top: [],
|
57
|
+
bottom: [],
|
58
|
+
'top-right': [],
|
59
|
+
'top-left': [],
|
60
|
+
'bottom-right': [],
|
61
|
+
'bottom-left': [],
|
62
|
+
};
|
63
|
+
var ToastWrapper = /** @class */ (function (_super) {
|
64
|
+
__extends(ToastWrapper, _super);
|
65
|
+
function ToastWrapper(props) {
|
66
|
+
var _this = _super.call(this, props) || this;
|
67
|
+
_this.state = firstState;
|
68
|
+
_this.notify = function (message, options) {
|
69
|
+
var toast = _this.createToastState(message, options);
|
70
|
+
var position = toast.position;
|
71
|
+
var isTop = position === 'top';
|
72
|
+
_this.setState(function (prev) {
|
73
|
+
var _a;
|
74
|
+
return __assign(__assign({}, prev), (_a = {}, _a[position] = isTop
|
75
|
+
? __spreadArrays([toast], prev[position]) : __spreadArrays(prev[position], [toast]), _a));
|
76
|
+
});
|
77
|
+
return { id: toast.id, position: toast.position };
|
78
|
+
};
|
79
|
+
_this.createToastState = function (message, options) {
|
80
|
+
var _a;
|
81
|
+
var id = '' + ++ToastWrapper.idCounter;
|
82
|
+
var position = (_a = options.position) !== null && _a !== void 0 ? _a : 'top';
|
83
|
+
return {
|
84
|
+
id: id,
|
85
|
+
message: message,
|
86
|
+
icon: options.icon,
|
87
|
+
position: position,
|
88
|
+
duration: options.duration,
|
89
|
+
type: options.type,
|
90
|
+
size: options.size,
|
91
|
+
};
|
92
|
+
};
|
93
|
+
_this.requestClose = function (id, position) {
|
94
|
+
_this.setState(function (prev) {
|
95
|
+
var _a;
|
96
|
+
return __assign(__assign({}, prev), (_a = {}, _a[position] = prev[position].filter(function (toast) { return toast.id !== id; }), _a));
|
97
|
+
});
|
98
|
+
};
|
99
|
+
_this.notify = _this.notify.bind(_this);
|
100
|
+
return _this;
|
101
|
+
}
|
102
|
+
ToastWrapper.prototype.render = function () {
|
103
|
+
var _this = this;
|
104
|
+
return Object.keys(this.state).map(function (position) {
|
105
|
+
var pos = position;
|
106
|
+
var toasts = _this.state[pos];
|
107
|
+
return (React.createElement("div", { key: position, className: "sd-toast__container sd-toast__container--" + pos }, (pos === 'top' ?
|
108
|
+
toasts : __spreadArrays(toasts).reverse()).map(function (toast) {
|
109
|
+
return React.createElement(ToastMessage_1.ToastMessage, { position: pos, type: toast.type, icon: toast.icon, closeElement: _this.requestClose, duration: toast.duration, key: toast.id, id: toast.id, message: toast.message, size: toast.size });
|
110
|
+
})));
|
111
|
+
});
|
112
|
+
};
|
113
|
+
ToastWrapper.idCounter = 0;
|
114
|
+
return ToastWrapper;
|
115
|
+
}(React.PureComponent));
|
116
|
+
exports.default = ToastWrapper;
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
interface IProps {
|
3
|
+
title: string;
|
4
|
+
badge?: JSX.Element;
|
5
|
+
children: any;
|
6
|
+
hideUsingCSS?: boolean;
|
7
|
+
initiallyOpen?: boolean;
|
8
|
+
className?: string;
|
9
|
+
onOpen?(): void;
|
10
|
+
onClose?(): void;
|
11
|
+
}
|
12
|
+
interface IState {
|
13
|
+
isOpen: boolean;
|
14
|
+
}
|
15
|
+
/**
|
16
|
+
* @ngdoc react
|
17
|
+
* @name ToggleBox
|
18
|
+
* @description ToggleBox used to open/close a set of details
|
19
|
+
*/
|
20
|
+
export declare class ToggleBox extends React.PureComponent<IProps, IState> {
|
21
|
+
htmlId: string;
|
22
|
+
constructor(props: IProps);
|
23
|
+
handleKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
|
24
|
+
toggle: () => void;
|
25
|
+
render(): JSX.Element;
|
26
|
+
}
|
27
|
+
export {};
|
@@ -0,0 +1,76 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
3
|
+
var extendStatics = function (d, b) {
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6
|
+
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
7
|
+
return extendStatics(d, b);
|
8
|
+
};
|
9
|
+
return function (d, b) {
|
10
|
+
extendStatics(d, b);
|
11
|
+
function __() { this.constructor = d; }
|
12
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
13
|
+
};
|
14
|
+
})();
|
15
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
16
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
17
|
+
};
|
18
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
19
|
+
exports.ToggleBox = void 0;
|
20
|
+
var react_1 = __importDefault(require("react"));
|
21
|
+
var classnames_1 = __importDefault(require("classnames"));
|
22
|
+
var react_id_generator_1 = __importDefault(require("react-id-generator"));
|
23
|
+
/**
|
24
|
+
* @ngdoc react
|
25
|
+
* @name ToggleBox
|
26
|
+
* @description ToggleBox used to open/close a set of details
|
27
|
+
*/
|
28
|
+
var ToggleBox = /** @class */ (function (_super) {
|
29
|
+
__extends(ToggleBox, _super);
|
30
|
+
function ToggleBox(props) {
|
31
|
+
var _a;
|
32
|
+
var _this = _super.call(this, props) || this;
|
33
|
+
_this.htmlId = react_id_generator_1.default();
|
34
|
+
_this.handleKeyDown = function (event) {
|
35
|
+
if (event.key === "ArrowRight" && !_this.state.isOpen) {
|
36
|
+
_this.setState({ isOpen: true });
|
37
|
+
}
|
38
|
+
else if (event.key === "ArrowLeft" && _this.state.isOpen) {
|
39
|
+
_this.setState({ isOpen: false });
|
40
|
+
}
|
41
|
+
else if (event.key === "Enter") {
|
42
|
+
_this.toggle();
|
43
|
+
}
|
44
|
+
};
|
45
|
+
_this.toggle = function () {
|
46
|
+
_this.setState({ isOpen: !_this.state.isOpen }, function () {
|
47
|
+
if (!_this.state.isOpen && _this.props.onClose) {
|
48
|
+
_this.props.onClose();
|
49
|
+
}
|
50
|
+
else if (_this.props.onOpen) {
|
51
|
+
_this.props.onOpen();
|
52
|
+
}
|
53
|
+
});
|
54
|
+
};
|
55
|
+
_this.state = {
|
56
|
+
isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
|
57
|
+
};
|
58
|
+
return _this;
|
59
|
+
}
|
60
|
+
ToggleBox.prototype.render = function () {
|
61
|
+
var _a = this.props, title = _a.title, hideUsingCSS = _a.hideUsingCSS, className = _a.className, children = _a.children, badge = _a.badge;
|
62
|
+
var isOpen = this.state.isOpen;
|
63
|
+
return (react_1.default.createElement("div", { className: classnames_1.default('toggle-box', className, { hidden: !isOpen }) },
|
64
|
+
react_1.default.createElement("a", { className: "toggle-box__header", onClick: this.toggle, role: "button", tabIndex: 0, onKeyDown: this.handleKeyDown, id: "togglebox-" + this.htmlId },
|
65
|
+
react_1.default.createElement("div", { className: "toggle-box__chevron" },
|
66
|
+
react_1.default.createElement("i", { className: "icon-chevron-right-thin" })),
|
67
|
+
react_1.default.createElement("div", { className: "toggle-box__label" }, title),
|
68
|
+
react_1.default.createElement("div", { className: "toggle-box__line" }),
|
69
|
+
badge ? badge : null),
|
70
|
+
react_1.default.createElement("div", { className: "toggle-box__content-wraper" },
|
71
|
+
isOpen && !hideUsingCSS && (react_1.default.createElement("div", { className: "toggle-box__content", "aria-describedby": "togglebox-" + this.htmlId }, children)),
|
72
|
+
hideUsingCSS && (react_1.default.createElement("div", { className: classnames_1.default('toggle-box__content', { 'toggle-box__content--hidden': !isOpen }), "aria-describedby": "togglebox-" + this.htmlId }, children)))));
|
73
|
+
};
|
74
|
+
return ToggleBox;
|
75
|
+
}(react_1.default.PureComponent));
|
76
|
+
exports.ToggleBox = ToggleBox;
|
@@ -2,10 +2,7 @@ import * as React from 'react';
|
|
2
2
|
interface IProps {
|
3
3
|
text: string;
|
4
4
|
flow?: 'top' | 'left' | 'right' | 'down';
|
5
|
+
appendToBody?: boolean;
|
5
6
|
}
|
6
|
-
export declare
|
7
|
-
htmlId: string;
|
8
|
-
componentDidMount(): void;
|
9
|
-
render(): JSX.Element;
|
10
|
-
}
|
7
|
+
export declare const Tooltip: React.FC<IProps>;
|
11
8
|
export {};
|
@@ -12,6 +12,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
12
12
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
13
13
|
};
|
14
14
|
})();
|
15
|
+
var __assign = (this && this.__assign) || function () {
|
16
|
+
__assign = Object.assign || function(t) {
|
17
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
18
|
+
s = arguments[i];
|
19
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
20
|
+
t[p] = s[p];
|
21
|
+
}
|
22
|
+
return t;
|
23
|
+
};
|
24
|
+
return __assign.apply(this, arguments);
|
25
|
+
};
|
15
26
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
16
27
|
if (k2 === undefined) k2 = k;
|
17
28
|
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
@@ -31,6 +42,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
31
42
|
__setModuleDefault(result, mod);
|
32
43
|
return result;
|
33
44
|
};
|
45
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
46
|
+
var t = {};
|
47
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
48
|
+
t[p] = s[p];
|
49
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
50
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
51
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
52
|
+
t[p[i]] = s[p[i]];
|
53
|
+
}
|
54
|
+
return t;
|
55
|
+
};
|
34
56
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
35
57
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
36
58
|
};
|
@@ -38,21 +60,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
60
|
exports.Tooltip = void 0;
|
39
61
|
var React = __importStar(require("react"));
|
40
62
|
var react_id_generator_1 = __importDefault(require("react-id-generator"));
|
41
|
-
var
|
42
|
-
|
43
|
-
|
63
|
+
var tooltip_1 = require("@superdesk/primereact/tooltip");
|
64
|
+
exports.Tooltip = function (_a) {
|
65
|
+
var appendToBody = _a.appendToBody, children = _a.children, otherProps = __rest(_a, ["appendToBody", "children"]);
|
66
|
+
return appendToBody ?
|
67
|
+
React.createElement(TooltipAppended, __assign({}, otherProps), children)
|
68
|
+
:
|
69
|
+
React.createElement(TooltipBasic, __assign({}, otherProps), children);
|
70
|
+
};
|
71
|
+
var TooltipBasic = /** @class */ (function (_super) {
|
72
|
+
__extends(TooltipBasic, _super);
|
73
|
+
function TooltipBasic() {
|
44
74
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
45
75
|
_this.htmlId = react_id_generator_1.default();
|
46
76
|
return _this;
|
47
77
|
}
|
48
|
-
|
78
|
+
TooltipBasic.prototype.componentDidMount = function () {
|
49
79
|
var tooltip = document.getElementById('t' + this.htmlId);
|
50
80
|
tooltip === null || tooltip === void 0 ? void 0 : tooltip.setAttribute('data-sd-tooltip', this.props.text);
|
51
81
|
if (this.props.flow) {
|
52
82
|
tooltip === null || tooltip === void 0 ? void 0 : tooltip.setAttribute('data-flow', this.props.flow);
|
53
83
|
}
|
54
84
|
};
|
55
|
-
|
85
|
+
TooltipBasic.prototype.render = function () {
|
56
86
|
if (React.isValidElement(this.props.children)) {
|
57
87
|
return (React.cloneElement(this.props.children, { id: 't' + this.htmlId }));
|
58
88
|
}
|
@@ -60,6 +90,17 @@ var Tooltip = /** @class */ (function (_super) {
|
|
60
90
|
return (React.createElement(React.Fragment, null));
|
61
91
|
}
|
62
92
|
};
|
63
|
-
return
|
93
|
+
return TooltipBasic;
|
64
94
|
}(React.PureComponent));
|
65
|
-
|
95
|
+
var TooltipAppended = function (_a) {
|
96
|
+
var children = _a.children, flow = _a.flow, text = _a.text;
|
97
|
+
var htmlId = react_id_generator_1.default();
|
98
|
+
var triggerId = "t" + htmlId;
|
99
|
+
var position = flow === "down" ? "bottom" : flow;
|
100
|
+
return (React.createElement(React.Fragment, null,
|
101
|
+
React.createElement(tooltip_1.Tooltip, { target: "#" + triggerId, content: text, position: position !== null && position !== void 0 ? position : 'top' }),
|
102
|
+
React.isValidElement(children) ?
|
103
|
+
React.cloneElement(children, { id: triggerId })
|
104
|
+
:
|
105
|
+
React.createElement(React.Fragment, null)));
|
106
|
+
};
|
package/react/index.d.ts
CHANGED
@@ -54,5 +54,12 @@ export { TagInput } from './components/TagInput';
|
|
54
54
|
export { TagInputTest } from './components/TagInputTest';
|
55
55
|
export { GridList } from './components/GridList';
|
56
56
|
export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper } from './components/GridItem';
|
57
|
+
export { toasted } from './components/Toast';
|
58
|
+
export { Menu } from './components/Menu';
|
59
|
+
export { ToggleBox } from './components/Togglebox';
|
60
|
+
export { SelectGrid } from './components/SelectGrid';
|
61
|
+
export { IconPicker } from './components/IconPicker';
|
62
|
+
export { Skeleton } from './components/Skeleton';
|
63
|
+
export { ListItemLoader } from './components/ListItemLoader';
|
57
64
|
export declare const ToggleBoxNext: any;
|
58
65
|
export declare const reactToAngular1: any;
|
package/react/index.js
CHANGED
@@ -130,3 +130,17 @@ Object.defineProperty(exports, "GridItemFooterBlock", { enumerable: true, get: f
|
|
130
130
|
Object.defineProperty(exports, "GridItemFooterActions", { enumerable: true, get: function () { return GridItem_1.GridItemFooterActions; } });
|
131
131
|
Object.defineProperty(exports, "GridItemTopActions", { enumerable: true, get: function () { return GridItem_1.GridItemTopActions; } });
|
132
132
|
Object.defineProperty(exports, "GridItemCheckWrapper", { enumerable: true, get: function () { return GridItem_1.GridItemCheckWrapper; } });
|
133
|
+
var Toast_1 = require("./components/Toast");
|
134
|
+
Object.defineProperty(exports, "toasted", { enumerable: true, get: function () { return Toast_1.toasted; } });
|
135
|
+
var Menu_1 = require("./components/Menu");
|
136
|
+
Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
|
137
|
+
var Togglebox_1 = require("./components/Togglebox");
|
138
|
+
Object.defineProperty(exports, "ToggleBox", { enumerable: true, get: function () { return Togglebox_1.ToggleBox; } });
|
139
|
+
var SelectGrid_1 = require("./components/SelectGrid");
|
140
|
+
Object.defineProperty(exports, "SelectGrid", { enumerable: true, get: function () { return SelectGrid_1.SelectGrid; } });
|
141
|
+
var IconPicker_1 = require("./components/IconPicker");
|
142
|
+
Object.defineProperty(exports, "IconPicker", { enumerable: true, get: function () { return IconPicker_1.IconPicker; } });
|
143
|
+
var Skeleton_1 = require("./components/Skeleton");
|
144
|
+
Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
|
145
|
+
var ListItemLoader_1 = require("./components/ListItemLoader");
|
146
|
+
Object.defineProperty(exports, "ListItemLoader", { enumerable: true, get: function () { return ListItemLoader_1.ListItemLoader; } });
|