@qoretechnologies/reqore 0.25.2 → 0.25.4
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/.gitpod.yml +4 -1
- package/__tests__/tree.test.tsx +14 -19
- package/dist/components/Collection/item.d.ts +1 -1
- package/dist/components/Collection/item.d.ts.map +1 -1
- package/dist/components/Collection/item.js +7 -7
- package/dist/components/Collection/item.js.map +1 -1
- package/dist/components/Message/index.d.ts +3 -2
- package/dist/components/Message/index.d.ts.map +1 -1
- package/dist/components/Message/index.js +26 -9
- package/dist/components/Message/index.js.map +1 -1
- package/dist/components/Notifications/notification.d.ts +1 -0
- package/dist/components/Notifications/notification.d.ts.map +1 -1
- package/dist/components/Notifications/notification.js +19 -11
- package/dist/components/Notifications/notification.js.map +1 -1
- package/dist/components/Panel/index.d.ts +2 -0
- package/dist/components/Panel/index.d.ts.map +1 -1
- package/dist/components/Panel/index.js +12 -9
- package/dist/components/Panel/index.js.map +1 -1
- package/dist/components/Tag/index.d.ts.map +1 -1
- package/dist/components/Tag/index.js +9 -8
- package/dist/components/Tag/index.js.map +1 -1
- package/dist/components/Tree/index.d.ts +4 -2
- package/dist/components/Tree/index.d.ts.map +1 -1
- package/dist/components/Tree/index.js +26 -48
- package/dist/components/Tree/index.js.map +1 -1
- package/dist/constants/sizes.d.ts +8 -0
- package/dist/constants/sizes.d.ts.map +1 -1
- package/dist/constants/sizes.js +9 -1
- package/dist/constants/sizes.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Collection/item.tsx +3 -2
- package/src/components/Message/index.tsx +18 -7
- package/src/components/Notifications/notification.tsx +11 -2
- package/src/components/Panel/index.tsx +22 -5
- package/src/components/Tag/index.tsx +23 -27
- package/src/components/Tree/index.tsx +95 -102
- package/src/constants/sizes.ts +9 -0
- package/src/mock/collectionData.tsx +2 -0
- package/src/stories/Input/Input.stories.tsx +1 -1
- package/src/stories/Message/Message.stories.tsx +7 -0
- package/src/stories/Panel/Panel.stories.tsx +2 -1
- package/src/stories/Tag/Tag.stories.tsx +7 -4
- package/src/stories/Tree/Tree.stories.tsx +7 -1
- package/tests.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAGtD,OAAO,EAKL,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAKpE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,eAAe,EAAE,aAAa;IAC1F,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,EAC7D,kBAAkB,EAClB,eAAe;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAGtD,OAAO,EAKL,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAKpE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,eAAe,EAAE,aAAa;IAC1F,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,EAC7D,kBAAkB,EAClB,eAAe;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,KA6CrB,CAAC;AAsDF,QAAA,MAAM,SAAS,iFAqGd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -81,7 +81,7 @@ exports.StyledTag = styled_components_1["default"].div(templateObject_4 || (temp
|
|
|
81
81
|
return width || undefined;
|
|
82
82
|
}, function (_a) {
|
|
83
83
|
var theme = _a.theme, color = _a.color, labelKey = _a.labelKey;
|
|
84
|
-
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n\n ", "
|
|
84
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n\n ", ", ", " {\n background-color: ", ";\n }\n "], ["\n background-color: ", ";\n color: ", ";\n\n ", ", ", " {\n background-color: ", ";\n }\n "])), color || (0, colors_1.changeLightness)(theme.main, 0.1), color ? (0, colors_1.getReadableColorFrom)(color) : (0, colors_1.getReadableColor)(theme, undefined, undefined), StyledTagContentKey, StyledTagContentWrapper, labelKey ? (0, colors_1.changeLightness)(color || theme.main, 0.05) : undefined);
|
|
85
85
|
}, function (_a) {
|
|
86
86
|
var theme = _a.theme, color = _a.color, interactive = _a.interactive;
|
|
87
87
|
return interactive && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n "], ["\n cursor: pointer;\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n "])), (0, colors_1.changeLightness)(color || theme.main, color ? 0.05 : 0.15), color
|
|
@@ -91,13 +91,14 @@ exports.StyledTag = styled_components_1["default"].div(templateObject_4 || (temp
|
|
|
91
91
|
var disabled = _a.disabled;
|
|
92
92
|
return disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n opacity: 0.5;\n pointer-events: none;\n cursor: not-allowed;\n "], ["\n opacity: 0.5;\n pointer-events: none;\n cursor: not-allowed;\n "])));
|
|
93
93
|
});
|
|
94
|
-
var
|
|
95
|
-
var
|
|
94
|
+
var StyledTagRightIcon = (0, styled_components_1["default"])(Icon_1["default"])(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
|
|
95
|
+
var StyledTagContentWrapper = styled_components_1["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n flex: 1;\n overflow: hidden;\n height: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n flex: 1;\n overflow: hidden;\n height: 100%;\n"])));
|
|
96
|
+
var StyledTagContent = styled_components_1["default"].span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 0 ", "px;\n height: 100%;\n display: flex;\n align-items: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n padding: 0 ", "px;\n height: 100%;\n display: flex;\n align-items: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])), function (_a) {
|
|
96
97
|
var size = _a.size;
|
|
97
98
|
return sizes_1.PADDING_FROM_SIZE[size];
|
|
98
99
|
});
|
|
99
|
-
var StyledTagContentKey = (0, styled_components_1["default"])(StyledTagContent)(
|
|
100
|
-
var StyledButtonWrapper = styled_components_1["default"].div(
|
|
100
|
+
var StyledTagContentKey = (0, styled_components_1["default"])(StyledTagContent)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-weight: 800;\n"], ["\n font-weight: 800;\n"])));
|
|
101
|
+
var StyledButtonWrapper = styled_components_1["default"].div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex-shrink: 0;\n font-size: ", "px;\n height: ", "px;\n width: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease-out;\n\n ", "\n"], ["\n flex-shrink: 0;\n font-size: ", "px;\n height: ", "px;\n width: ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease-out;\n\n ", "\n"])), function (_a) {
|
|
101
102
|
var size = _a.size;
|
|
102
103
|
return sizes_1.TEXT_FROM_SIZE[size];
|
|
103
104
|
}, function (_a) {
|
|
@@ -108,7 +109,7 @@ var StyledButtonWrapper = styled_components_1["default"].div(templateObject_9 ||
|
|
|
108
109
|
return sizes_1.SIZE_TO_PX[size];
|
|
109
110
|
}, function (_a) {
|
|
110
111
|
var theme = _a.theme, color = _a.color;
|
|
111
|
-
return (0, styled_components_1.css)(
|
|
112
|
+
return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n .reqore-icon {\n transform: scale(0.85);\n }\n &:hover {\n cursor: pointer;\n background-color: ", ";\n\n .reqore-icon {\n transform: scale(1);\n }\n }\n "], ["\n .reqore-icon {\n transform: scale(0.85);\n }\n &:hover {\n cursor: pointer;\n background-color: ", ";\n\n .reqore-icon {\n transform: scale(1);\n }\n }\n "])), (0, colors_1.changeLightness)(color || theme.main, color ? 0.09 : 0.19));
|
|
112
113
|
});
|
|
113
114
|
var ReqoreTag = (0, react_1.forwardRef)(function (_a, ref) {
|
|
114
115
|
var tooltip = _a.tooltip, label = _a.label, labelKey = _a.labelKey, icon = _a.icon, rightIcon = _a.rightIcon, className = _a.className, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? 'normal' : _b, onRemoveClick = _a.onRemoveClick, actions = _a.actions, badge = _a.badge, intent = _a.intent, color = _a.color, rest = __rest(_a, ["tooltip", "label", "labelKey", "icon", "rightIcon", "className", "onClick", "size", "onRemoveClick", "actions", "badge", "intent", "color"]);
|
|
@@ -117,7 +118,7 @@ var ReqoreTag = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
117
118
|
(0, useTooltip_1.useTooltip)(targetRef.current, tooltip);
|
|
118
119
|
// If color or intent was specified, set the color
|
|
119
120
|
var customColor = intent ? theme.intents[intent] : color;
|
|
120
|
-
return ((0, jsx_runtime_1.jsxs)(exports.StyledTag, __assign({}, rest, { labelKey: labelKey, color: customColor, className: "".concat(className || '', " reqore-tag"), size: size, ref: targetRef, badge: badge, removable: !!onRemoveClick, interactive: !!onClick && !rest.disabled }, { children: [(0, jsx_runtime_1.jsxs)(StyledTagContentWrapper, __assign({ size: size, className: 'reqore-tag-content', onClick: onClick }, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: icon, size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px"), margin: label
|
|
121
|
+
return ((0, jsx_runtime_1.jsxs)(exports.StyledTag, __assign({}, rest, { labelKey: labelKey, color: customColor, className: "".concat(className || '', " reqore-tag"), size: size, ref: targetRef, badge: badge, removable: !!onRemoveClick, interactive: !!onClick && !rest.disabled }, { children: [icon || labelKey ? ((0, jsx_runtime_1.jsxs)(StyledTagContentWrapper, __assign({ size: size, className: 'reqore-tag-content', onClick: onClick }, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: icon, size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px"), margin: label ? 'left' : 'both' })), labelKey && (0, jsx_runtime_1.jsx)(StyledTagContentKey, __assign({ size: size }, { children: labelKey }))] }))) : null, label && (0, jsx_runtime_1.jsx)(StyledTagContent, __assign({ size: size }, { children: label })), rightIcon && ((0, jsx_runtime_1.jsx)(StyledTagRightIcon, { icon: rightIcon, size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px"), margin: label || icon ? 'right' : 'both' })), (0, size_1["default"])(actions)
|
|
121
122
|
? actions.map(function (action) { return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(__1.ReqorePopover, __assign({ component: StyledButtonWrapper, componentProps: {
|
|
122
123
|
size: size,
|
|
123
124
|
color: customColor,
|
|
@@ -136,5 +137,5 @@ var ReqoreTag = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
136
137
|
}, noWrapper: true, content: 'Remove' }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'CloseLine', size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px") }) }))) : null] })));
|
|
137
138
|
});
|
|
138
139
|
exports["default"] = ReqoreTag;
|
|
139
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
140
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
140
141
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAAgC;AAChC,+BAAsD;AACtD,qEAAgD;AAChD,2BAAsC;AACtC,+CAM+B;AAE/B,4EAAsD;AACtD,+CAA+F;AAC/F,+DAA8D;AAC9D,qDAAoD;AAGpD,iDAAiC;AA+BpB,QAAA,SAAS,GAAG,8BAAM,CAAC,GAAG,uZAAiB,sLAQrC,EAAkC,iBACrC,EAA8B,oBAC3B,EAA8B,wBAC1B,EAA0D,gBAClE,EAAiC,2CAGxC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { IReqoreTheme } from '../../constants/theme';
|
|
3
|
-
|
|
3
|
+
import { IWithReqoreSize } from '../../types/global';
|
|
4
|
+
export interface IReqoreTreeProps extends IWithReqoreSize {
|
|
4
5
|
data: Object | Array<any>;
|
|
5
6
|
mode?: 'tree' | 'copy';
|
|
6
7
|
expanded?: boolean;
|
|
7
8
|
showTypes?: boolean;
|
|
8
9
|
onItemClick?: (value: any, path?: string[]) => void;
|
|
9
10
|
withLabelCopy?: boolean;
|
|
11
|
+
showControls?: boolean;
|
|
10
12
|
}
|
|
11
13
|
export interface ITreeStyle {
|
|
12
14
|
interactive?: boolean;
|
|
13
15
|
theme: IReqoreTheme;
|
|
14
16
|
}
|
|
15
|
-
export declare const ReqoreTree: ({ data, mode, expanded, showTypes, onItemClick, withLabelCopy, }: IReqoreTreeProps) => JSX.Element;
|
|
17
|
+
export declare const ReqoreTree: ({ data, mode, size, expanded, showTypes, onItemClick, withLabelCopy, showControls, }: IReqoreTreeProps) => JSX.Element;
|
|
16
18
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAKrD,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAOD,MAAM,WAAW,UAAU;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,yFASpB,gBAAgB,gBA8MlB,CAAC"}
|
|
@@ -14,29 +14,6 @@ var __assign = (this && this.__assign) || function () {
|
|
|
14
14
|
};
|
|
15
15
|
return __assign.apply(this, arguments);
|
|
16
16
|
};
|
|
17
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
-
if (k2 === undefined) k2 = k;
|
|
19
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
-
}
|
|
23
|
-
Object.defineProperty(o, k2, desc);
|
|
24
|
-
}) : (function(o, m, k, k2) {
|
|
25
|
-
if (k2 === undefined) k2 = k;
|
|
26
|
-
o[k2] = m[k];
|
|
27
|
-
}));
|
|
28
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
-
}) : function(o, v) {
|
|
31
|
-
o["default"] = v;
|
|
32
|
-
});
|
|
33
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
-
if (mod && mod.__esModule) return mod;
|
|
35
|
-
var result = {};
|
|
36
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
-
__setModuleDefault(result, mod);
|
|
38
|
-
return result;
|
|
39
|
-
};
|
|
40
17
|
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
41
18
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
42
19
|
if (ar || !(i in from)) {
|
|
@@ -53,28 +30,21 @@ exports.__esModule = true;
|
|
|
53
30
|
exports.ReqoreTree = void 0;
|
|
54
31
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
55
32
|
var lodash_1 = require("lodash");
|
|
56
|
-
var size_1 = __importDefault(require("lodash/size"));
|
|
57
|
-
var polished_1 = require("polished");
|
|
58
33
|
var react_1 = require("react");
|
|
59
|
-
var styled_components_1 =
|
|
34
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
60
35
|
var __1 = require("../..");
|
|
61
36
|
var ReqoreContext_1 = __importDefault(require("../../context/ReqoreContext"));
|
|
62
|
-
var colors_1 = require("../../helpers/colors");
|
|
63
37
|
var utils_1 = require("../../helpers/utils");
|
|
64
38
|
var Button_1 = __importDefault(require("../Button"));
|
|
65
39
|
var ControlGroup_1 = __importDefault(require("../ControlGroup"));
|
|
66
40
|
var Tag_1 = __importDefault(require("../Tag"));
|
|
67
41
|
var StyledTreeWrapper = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-flow: column;\n"], ["\n display: flex;\n flex-flow: column;\n"])));
|
|
68
|
-
var StyledLabel = styled_components_1["default"].span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: inline-block;\n line-height: 30px;\n padding: 0 10px;\n transition: all 0.2s ease-out;\n\n ", "\n"], ["\n display: inline-block;\n line-height: 30px;\n padding: 0 10px;\n transition: all 0.2s ease-out;\n\n ", "\n"])), function (_a) {
|
|
69
|
-
var interactive = _a.interactive, theme = _a.theme;
|
|
70
|
-
return interactive && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n border-radius: 5px;\n }\n "], ["\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n border-radius: 5px;\n }\n "])), (0, polished_1.rgba)((0, colors_1.changeLightness)(theme.main, 0.3), 0.2));
|
|
71
|
-
});
|
|
72
42
|
var ReqoreTree = function (_a) {
|
|
73
|
-
var data = _a.data, _b = _a.mode, mode = _b === void 0 ? 'tree' : _b, expanded = _a.expanded, showTypes = _a.showTypes, onItemClick = _a.onItemClick, withLabelCopy = _a.withLabelCopy;
|
|
74
|
-
var
|
|
75
|
-
var
|
|
76
|
-
var
|
|
77
|
-
var
|
|
43
|
+
var data = _a.data, _b = _a.mode, mode = _b === void 0 ? 'tree' : _b, _c = _a.size, size = _c === void 0 ? 'normal' : _c, expanded = _a.expanded, showTypes = _a.showTypes, onItemClick = _a.onItemClick, withLabelCopy = _a.withLabelCopy, _d = _a.showControls, showControls = _d === void 0 ? true : _d;
|
|
44
|
+
var _e = (0, react_1.useState)(mode), _mode = _e[0], setMode = _e[1];
|
|
45
|
+
var _f = (0, react_1.useState)({}), items = _f[0], setItems = _f[1];
|
|
46
|
+
var _g = (0, react_1.useState)(expanded || !showControls), allExpanded = _g[0], setAllExpanded = _g[1];
|
|
47
|
+
var _h = (0, react_1.useState)(showTypes), _showTypes = _h[0], setShowTypes = _h[1];
|
|
78
48
|
var addNotification = (0, react_1.useContext)(ReqoreContext_1["default"]).addNotification;
|
|
79
49
|
var handleCopyClick = function () {
|
|
80
50
|
setMode('copy');
|
|
@@ -112,19 +82,26 @@ var ReqoreTree = function (_a) {
|
|
|
112
82
|
var isExpandable = typeof data[key] !== 'object' ||
|
|
113
83
|
items[stateKey] ||
|
|
114
84
|
(allExpanded && items[stateKey] !== false);
|
|
115
|
-
if (isObject && (0,
|
|
85
|
+
if (isObject && (0, lodash_1.size)(data[key]) === 0) {
|
|
116
86
|
isObject = false;
|
|
117
87
|
isExpandable = false;
|
|
118
88
|
}
|
|
119
|
-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { margin: level === 1 ? '15px 0' : "15px" } }, { children: [(0, jsx_runtime_1.jsxs)(ControlGroup_1["default"], { children: [
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
89
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { margin: level === 1 ? '15px 0' : "15px" } }, { children: [isObject ? ((0, jsx_runtime_1.jsxs)(ControlGroup_1["default"], __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(Button_1["default"], __assign({ className: 'reqore-tree-toggle', icon: isObject ? (isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill') : undefined, intent: isObject && isExpandable ? 'info' : undefined, onClick: isObject ? function () { return handleItemClick(stateKey, isExpandable); } : undefined, flat: true }, { children: displayKey })), _showTypes ? (0, jsx_runtime_1.jsx)(Tag_1["default"], { label: dataType, className: 'reqore-tree-type' }) : null] }))) : ((0, jsx_runtime_1.jsxs)(ControlGroup_1["default"], __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(Tag_1["default"], { label: displayKey, actions: withLabelCopy
|
|
90
|
+
? [
|
|
91
|
+
{
|
|
92
|
+
icon: 'FileCopy2Fill',
|
|
93
|
+
onClick: function () {
|
|
94
|
+
navigator.clipboard.writeText(JSON.stringify(data[key]));
|
|
95
|
+
addNotification({
|
|
96
|
+
content: 'Successfuly copied to clipboard',
|
|
97
|
+
id: Date.now().toString(),
|
|
98
|
+
type: 'success',
|
|
99
|
+
duration: 3000
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
]
|
|
104
|
+
: undefined }), _showTypes ? (0, jsx_runtime_1.jsx)(Tag_1["default"], { className: 'reqore-tree-type', label: dataType }) : null, (0, jsx_runtime_1.jsx)(__1.ReqoreMessage, __assign({ flat: true, onClick: function () { return onItemClick(data[key], __spreadArray(__spreadArray([], path, true), [key], false)); }, className: 'reqore-tree-label' }, { children: JSON.stringify(data[key]) }))] }))), isExpandable && isObject
|
|
128
105
|
? renderTree(data[key], stateKey, level + 1, __spreadArray(__spreadArray([], path, true), [key], false))
|
|
129
106
|
: null] }), index));
|
|
130
107
|
});
|
|
@@ -148,8 +125,9 @@ var ReqoreTree = function (_a) {
|
|
|
148
125
|
}
|
|
149
126
|
var textData = renderText(data);
|
|
150
127
|
var lineCount = (0, utils_1.getLineCount)(textData);
|
|
151
|
-
return ((0, jsx_runtime_1.jsxs)(StyledTreeWrapper, __assign({ className: 'reqore-tree' }, { children: [(0, jsx_runtime_1.jsxs)(ControlGroup_1["default"], __assign({ stack: true }, { children: [isDeep() &&
|
|
128
|
+
return ((0, jsx_runtime_1.jsxs)(StyledTreeWrapper, __assign({ className: 'reqore-tree' }, { children: [showControls && ((0, jsx_runtime_1.jsxs)(ControlGroup_1["default"], __assign({ stack: true, size: size }, { children: [isDeep() && !allExpanded ? ((0, jsx_runtime_1.jsx)(Button_1["default"], __assign({ flat: true, className: 'reqore-tree-expand-all', icon: 'ArrowDownFill', onClick: handleExpandClick }, { children: "Expand all" }), 'expand-button')) : null, isDeep() &&
|
|
129
|
+
(allExpanded || (0, lodash_1.size)(items) > 0 ? ((0, jsx_runtime_1.jsxs)(Button_1["default"], __assign({ flat: true, className: 'reqore-tree-collapse-all', icon: 'ArrowUpFill', onClick: handleCollapseClick }, { children: [' ', "Collapse all", ' '] }), 'collapse-button')) : null), (0, jsx_runtime_1.jsx)(Button_1["default"], __assign({ flat: true, className: 'reqore-tree-show-types', icon: 'CodeBoxFill', active: _showTypes, onClick: handleTypesClick }, { children: "Show types" })), (0, jsx_runtime_1.jsx)(Button_1["default"], __assign({ flat: true, className: 'reqore-tree-as-tree', active: _mode === 'tree', onClick: handleTreeClick, icon: 'Menu2Fill' }, { children: "Tree View" })), (0, jsx_runtime_1.jsx)(Button_1["default"], __assign({ flat: true, className: 'reqore-tree-as-text', onClick: handleCopyClick, active: _mode === 'copy', icon: 'ClipboardFill' }, { children: "Text View" }))] }))), _mode === 'tree' && (0, jsx_runtime_1.jsx)("div", { children: renderTree(data, true) }), _mode === 'copy' && ((0, jsx_runtime_1.jsx)(__1.ReqoreTextarea, { className: 'reqore-tree-textarea', id: 'tree-content', defaultValue: textData, size: size, rows: lineCount > 20 ? 20 : lineCount }))] })));
|
|
152
130
|
};
|
|
153
131
|
exports.ReqoreTree = ReqoreTree;
|
|
154
|
-
var templateObject_1
|
|
132
|
+
var templateObject_1;
|
|
155
133
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tree/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tree/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -56,4 +56,12 @@ export declare const RADIUS_FROM_SIZE: {
|
|
|
56
56
|
big: number;
|
|
57
57
|
huge: number;
|
|
58
58
|
};
|
|
59
|
+
export declare const ICON_FROM_HEADER_SIZE: {
|
|
60
|
+
1: number;
|
|
61
|
+
2: number;
|
|
62
|
+
3: number;
|
|
63
|
+
4: number;
|
|
64
|
+
5: number;
|
|
65
|
+
6: number;
|
|
66
|
+
};
|
|
59
67
|
//# sourceMappingURL=sizes.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../src/constants/sizes.ts"],"names":[],"mappings":"AAAA,oBAAY,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAClE,oBAAY,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;CAM3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;CAM9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;CAM7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC"}
|
|
1
|
+
{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../src/constants/sizes.ts"],"names":[],"mappings":"AAAA,oBAAY,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAClE,oBAAY,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;CAM3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;CAM9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;CAM7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;CAOjC,CAAC"}
|
package/dist/constants/sizes.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
exports.__esModule = true;
|
|
3
|
-
exports.RADIUS_FROM_SIZE = exports.PADDING_FROM_SIZE = exports.TEXT_FROM_SIZE = exports.MARGIN_FROM_SIZE = exports.TABS_PADDING_TO_PX = exports.TABLE_SIZE_TO_PX = exports.TABS_SIZE_TO_PX = exports.SIZE_TO_PX = void 0;
|
|
3
|
+
exports.ICON_FROM_HEADER_SIZE = exports.RADIUS_FROM_SIZE = exports.PADDING_FROM_SIZE = exports.TEXT_FROM_SIZE = exports.MARGIN_FROM_SIZE = exports.TABS_PADDING_TO_PX = exports.TABLE_SIZE_TO_PX = exports.TABS_SIZE_TO_PX = exports.SIZE_TO_PX = void 0;
|
|
4
4
|
exports.SIZE_TO_PX = {
|
|
5
5
|
tiny: 10,
|
|
6
6
|
small: 20,
|
|
@@ -57,4 +57,12 @@ exports.RADIUS_FROM_SIZE = {
|
|
|
57
57
|
big: 7,
|
|
58
58
|
huge: 9
|
|
59
59
|
};
|
|
60
|
+
exports.ICON_FROM_HEADER_SIZE = {
|
|
61
|
+
1: 21,
|
|
62
|
+
2: 18,
|
|
63
|
+
3: 15,
|
|
64
|
+
4: 12,
|
|
65
|
+
5: 9,
|
|
66
|
+
6: 6
|
|
67
|
+
};
|
|
60
68
|
//# sourceMappingURL=sizes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../src/constants/sizes.ts"],"names":[],"mappings":";;;AAGa,QAAA,UAAU,GAAG;IACxB,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,eAAe,GAAG;IAC7B,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,kBAAkB,GAAG;IAChC,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;CACR,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,cAAc,GAAG;IAC5B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,iBAAiB,GAAG;IAC/B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;CACR,CAAC"}
|
|
1
|
+
{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../src/constants/sizes.ts"],"names":[],"mappings":";;;AAGa,QAAA,UAAU,GAAG;IACxB,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,eAAe,GAAG;IAC7B,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,kBAAkB,GAAG;IAChC,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;CACR,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,cAAc,GAAG;IAC5B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,iBAAiB,GAAG;IAC/B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;CACR,CAAC;AAEW,QAAA,qBAAqB,GAAG;IACnC,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;CACL,CAAC"}
|
package/package.json
CHANGED
|
@@ -69,6 +69,7 @@ export const StyledCollectionItemContent = styled.div`
|
|
|
69
69
|
export const ReqoreCollectionItem = ({
|
|
70
70
|
flat = true,
|
|
71
71
|
minimal = true,
|
|
72
|
+
headerSize = 3,
|
|
72
73
|
style,
|
|
73
74
|
content,
|
|
74
75
|
actions,
|
|
@@ -195,11 +196,11 @@ export const ReqoreCollectionItem = ({
|
|
|
195
196
|
</>
|
|
196
197
|
)}
|
|
197
198
|
<ReqorePanel
|
|
198
|
-
{...rest}
|
|
199
199
|
flat={flat}
|
|
200
|
-
headerSize={
|
|
200
|
+
headerSize={headerSize}
|
|
201
201
|
ref={ref}
|
|
202
202
|
minimal={minimal}
|
|
203
|
+
{...rest}
|
|
203
204
|
bottomActions={isSelected ? expandedActions : undefined}
|
|
204
205
|
style={{
|
|
205
206
|
...style,
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import { forwardRef, useEffect, useMemo, useState } from 'react';
|
|
1
|
+
import React, { forwardRef, useEffect, useMemo, useState } from 'react';
|
|
2
2
|
import { useMount, useUnmount } from 'react-use';
|
|
3
3
|
import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
|
|
4
4
|
import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
|
|
5
5
|
import ReqoreThemeProvider from '../../containers/ThemeProvider';
|
|
6
|
+
import { useReqoreTheme } from '../../hooks/useTheme';
|
|
7
|
+
import { IWithReqoreCustomTheme } from '../../types/global';
|
|
6
8
|
import { IReqoreIconName } from '../../types/icons';
|
|
7
9
|
import ReqoreIcon from '../Icon';
|
|
8
10
|
import {
|
|
@@ -14,7 +16,9 @@ import {
|
|
|
14
16
|
typeToIcon,
|
|
15
17
|
} from '../Notifications/notification';
|
|
16
18
|
|
|
17
|
-
export interface IReqoreMessageProps
|
|
19
|
+
export interface IReqoreMessageProps
|
|
20
|
+
extends IWithReqoreCustomTheme,
|
|
21
|
+
React.HTMLAttributes<HTMLDivElement> {
|
|
18
22
|
intent?: TReqoreIntent;
|
|
19
23
|
title?: string;
|
|
20
24
|
children: any;
|
|
@@ -48,10 +52,13 @@ const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
|
|
|
48
52
|
flat,
|
|
49
53
|
inverted,
|
|
50
54
|
size = 'normal',
|
|
55
|
+
customTheme,
|
|
56
|
+
...rest
|
|
51
57
|
},
|
|
52
58
|
ref: any
|
|
53
59
|
) => {
|
|
54
60
|
const [internalTimeout, setInternalTimeout] = useState<NodeJS.Timeout | null>(null);
|
|
61
|
+
const theme = useReqoreTheme('main', customTheme, intent);
|
|
55
62
|
|
|
56
63
|
useMount(() => {
|
|
57
64
|
if (duration) {
|
|
@@ -88,6 +95,7 @@ const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
|
|
|
88
95
|
return (
|
|
89
96
|
<ReqoreThemeProvider>
|
|
90
97
|
<StyledReqoreNotification
|
|
98
|
+
{...rest}
|
|
91
99
|
key={`${duration}${intent}${title}${children}`}
|
|
92
100
|
intent={intent}
|
|
93
101
|
timeout={duration}
|
|
@@ -95,13 +103,15 @@ const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
|
|
|
95
103
|
onClick={onClick}
|
|
96
104
|
flat={flat}
|
|
97
105
|
inverted={inverted}
|
|
106
|
+
asMessage
|
|
98
107
|
fluid
|
|
99
|
-
className='reqore-message
|
|
108
|
+
className={`${rest?.className || ''} reqore-message`}
|
|
100
109
|
ref={ref}
|
|
101
110
|
size={size}
|
|
111
|
+
theme={theme}
|
|
102
112
|
>
|
|
103
113
|
{leftIcon ? (
|
|
104
|
-
<StyledIconWrapper intent={intent} size={size}>
|
|
114
|
+
<StyledIconWrapper intent={intent} size={size} theme={theme}>
|
|
105
115
|
<ReqoreIcon
|
|
106
116
|
icon={leftIcon}
|
|
107
117
|
margin={flat && inverted ? undefined : 'left'}
|
|
@@ -109,12 +119,13 @@ const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
|
|
|
109
119
|
/>
|
|
110
120
|
</StyledIconWrapper>
|
|
111
121
|
) : null}
|
|
112
|
-
<StyledNotificationContentWrapper size={size}>
|
|
113
|
-
{title && <StyledNotificationTitle>{title}</StyledNotificationTitle>}
|
|
114
|
-
<StyledNotificationContent>{children}</StyledNotificationContent>
|
|
122
|
+
<StyledNotificationContentWrapper size={size} theme={theme}>
|
|
123
|
+
{title && <StyledNotificationTitle theme={theme}>{title}</StyledNotificationTitle>}
|
|
124
|
+
<StyledNotificationContent theme={theme}>{children}</StyledNotificationContent>
|
|
115
125
|
</StyledNotificationContentWrapper>
|
|
116
126
|
{onClose && (
|
|
117
127
|
<StyledIconWrapper
|
|
128
|
+
theme={theme}
|
|
118
129
|
size={size}
|
|
119
130
|
intent={intent}
|
|
120
131
|
clickable
|
|
@@ -46,6 +46,7 @@ export interface IReqoreNotificationStyle {
|
|
|
46
46
|
flat?: boolean;
|
|
47
47
|
inverted?: boolean;
|
|
48
48
|
size?: TSizes;
|
|
49
|
+
asMessage?: boolean;
|
|
49
50
|
}
|
|
50
51
|
|
|
51
52
|
const timeoutAnimation = keyframes`
|
|
@@ -67,11 +68,19 @@ export const StyledReqoreNotification = styled(animated.div)<IReqoreNotification
|
|
|
67
68
|
overflow: auto;
|
|
68
69
|
position: relative;
|
|
69
70
|
transition: all 0.2s ease-out;
|
|
70
|
-
|
|
71
|
+
|
|
72
|
+
// Do not fade in the component if it's a message
|
|
73
|
+
${({ asMessage }) =>
|
|
74
|
+
asMessage
|
|
75
|
+
? undefined
|
|
76
|
+
: css`
|
|
77
|
+
animation: 0.2s ${fadeIn} ease-in;
|
|
78
|
+
`};
|
|
79
|
+
|
|
71
80
|
font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
|
|
72
81
|
|
|
73
82
|
&:not(:first-child) {
|
|
74
|
-
margin-top: 10px;
|
|
83
|
+
margin-top: ${({ asMessage }) => (asMessage ? undefined : `10px`)};
|
|
75
84
|
}
|
|
76
85
|
|
|
77
86
|
${({
|
|
@@ -3,7 +3,12 @@ import { rgba } from 'polished';
|
|
|
3
3
|
import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
|
|
4
4
|
import { useUpdateEffect } from 'react-use';
|
|
5
5
|
import styled, { css } from 'styled-components';
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
ICON_FROM_HEADER_SIZE,
|
|
8
|
+
RADIUS_FROM_SIZE,
|
|
9
|
+
TEXT_FROM_SIZE,
|
|
10
|
+
TSizes,
|
|
11
|
+
} from '../../constants/sizes';
|
|
7
12
|
import { IReqoreTheme } from '../../constants/theme';
|
|
8
13
|
import {
|
|
9
14
|
changeDarkness,
|
|
@@ -68,6 +73,7 @@ export interface IReqorePanelProps
|
|
|
68
73
|
blur?: number;
|
|
69
74
|
minimal?: boolean;
|
|
70
75
|
headerSize?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
76
|
+
contentSize?: TSizes;
|
|
71
77
|
}
|
|
72
78
|
|
|
73
79
|
export interface IStyledPanel extends IReqorePanelProps {
|
|
@@ -87,7 +93,6 @@ export const StyledPanel = styled.div<IStyledPanel>`
|
|
|
87
93
|
display: flex;
|
|
88
94
|
flex-flow: column;
|
|
89
95
|
position: relative;
|
|
90
|
-
z-index: 1;
|
|
91
96
|
backdrop-filter: ${({ blur, opacity }) => (blur && opacity < 1 ? `blur(${blur}px)` : undefined)};
|
|
92
97
|
transition: 0.3s ease-in-out;
|
|
93
98
|
|
|
@@ -97,7 +102,10 @@ export const StyledPanel = styled.div<IStyledPanel>`
|
|
|
97
102
|
cursor: pointer;
|
|
98
103
|
|
|
99
104
|
&:hover {
|
|
100
|
-
background-color: ${rgba(
|
|
105
|
+
background-color: ${rgba(
|
|
106
|
+
changeDarkness(getMainBackgroundColor(theme), 0.06),
|
|
107
|
+
opacity === 0 ? 0.2 : opacity
|
|
108
|
+
)};
|
|
101
109
|
|
|
102
110
|
${StyledCollectionItemContent}:after {
|
|
103
111
|
background: linear-gradient(
|
|
@@ -158,12 +166,13 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
|
|
|
158
166
|
export const StyledPanelContent = styled.div<IStyledPanel>`
|
|
159
167
|
display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
|
|
160
168
|
min-height: ${({ isCollapsed }) => (isCollapsed ? undefined : '40px')};
|
|
161
|
-
padding: ${({ padded }) => (!padded ? undefined :
|
|
169
|
+
padding: ${({ padded, contentSize }) => (!padded ? undefined : TEXT_FROM_SIZE[contentSize])}px;
|
|
162
170
|
// The padding is not needed when the panel is minimal and has title, since
|
|
163
171
|
// the title already has padding and is transparent
|
|
164
172
|
padding-top: ${({ minimal, hasLabel }) => (minimal && hasLabel ? '0px' : undefined)};
|
|
165
173
|
flex: 1;
|
|
166
174
|
overflow: auto;
|
|
175
|
+
font-size: ${({ contentSize }) => TEXT_FROM_SIZE[contentSize]}px;
|
|
167
176
|
`;
|
|
168
177
|
|
|
169
178
|
export const StyledPanelTitleLabel = styled.span`
|
|
@@ -206,6 +215,7 @@ export const ReqorePanel = forwardRef(
|
|
|
206
215
|
padded = true,
|
|
207
216
|
contentStyle,
|
|
208
217
|
headerSize = 4,
|
|
218
|
+
contentSize = 'normal',
|
|
209
219
|
minimal,
|
|
210
220
|
tooltip,
|
|
211
221
|
...rest
|
|
@@ -345,7 +355,13 @@ export const ReqorePanel = forwardRef(
|
|
|
345
355
|
opacity={rest.opacity ?? (minimal ? 0 : 1)}
|
|
346
356
|
>
|
|
347
357
|
<StyledPanelTitleHeader>
|
|
348
|
-
{icon &&
|
|
358
|
+
{icon && (
|
|
359
|
+
<ReqoreIcon
|
|
360
|
+
size={`${ICON_FROM_HEADER_SIZE[headerSize]}px`}
|
|
361
|
+
icon={icon}
|
|
362
|
+
margin='right'
|
|
363
|
+
/>
|
|
364
|
+
)}
|
|
349
365
|
{typeof label === 'string' ? (
|
|
350
366
|
<StyledPanelTitleLabel as={HTMLheaderElement}>{label}</StyledPanelTitleLabel>
|
|
351
367
|
) : (
|
|
@@ -383,6 +399,7 @@ export const ReqorePanel = forwardRef(
|
|
|
383
399
|
style={contentStyle}
|
|
384
400
|
padded={padded}
|
|
385
401
|
minimal={minimal}
|
|
402
|
+
contentSize={contentSize}
|
|
386
403
|
>
|
|
387
404
|
{children}
|
|
388
405
|
</StyledPanelContent>
|