@qoretechnologies/reqore 0.38.3 → 0.38.5
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/.vscode/settings.json +0 -19
- package/__tests__/tree.test.tsx +0 -16
- package/dist/components/Button/index.d.ts +2 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +5 -5
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Drawer/backdrop.d.ts.map +1 -1
- package/dist/components/Drawer/backdrop.js +2 -1
- package/dist/components/Drawer/backdrop.js.map +1 -1
- package/dist/components/Drawer/index.d.ts.map +1 -1
- package/dist/components/Drawer/index.js +3 -3
- package/dist/components/Drawer/index.js.map +1 -1
- package/dist/components/Dropdown/list.d.ts.map +1 -1
- package/dist/components/Dropdown/list.js +4 -3
- package/dist/components/Dropdown/list.js.map +1 -1
- package/dist/components/Icon/index.d.ts +2 -0
- package/dist/components/Icon/index.d.ts.map +1 -1
- package/dist/components/Icon/index.js +13 -6
- package/dist/components/Icon/index.js.map +1 -1
- package/dist/components/Paragraph/index.d.ts.map +1 -1
- package/dist/components/Paragraph/index.js +3 -2
- package/dist/components/Paragraph/index.js.map +1 -1
- package/dist/components/Textarea/index.d.ts.map +1 -1
- package/dist/components/Textarea/index.js +3 -1
- package/dist/components/Textarea/index.js.map +1 -1
- package/dist/components/Tree/index.d.ts.map +1 -1
- package/dist/components/Tree/index.js +25 -18
- package/dist/components/Tree/index.js.map +1 -1
- package/dist/constants/colors.js +1 -1
- package/package.json +3 -1
- package/src/components/Button/index.tsx +12 -5
- package/src/components/Drawer/backdrop.tsx +3 -2
- package/src/components/Drawer/index.tsx +3 -3
- package/src/components/Dropdown/list.tsx +8 -3
- package/src/components/Icon/index.tsx +10 -3
- package/src/components/Paragraph/index.tsx +3 -1
- package/src/components/Textarea/index.tsx +3 -0
- package/src/components/Tree/index.tsx +51 -31
- package/src/constants/colors.ts +1 -1
- package/src/stories/Button/Button.stories.tsx +7 -0
- package/src/stories/Modal/Modal.stories.tsx +14 -7
- package/src/stories/TextArea/TextAreaTests.stories.tsx +7 -2
- package/tests.json +1 -1
|
@@ -50,8 +50,10 @@ var Button_1 = __importDefault(require("../Button"));
|
|
|
50
50
|
var ControlGroup_1 = __importDefault(require("../ControlGroup"));
|
|
51
51
|
var ExportModal_1 = require("../ExportModal");
|
|
52
52
|
var helpers_1 = require("../Table/helpers");
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
exports.StyledTreeLabel = (0, styled_components_1["default"])(__1.ReqoreP)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-shrink: 1;\n\n cursor: ", ";\n"], ["\n flex-shrink: 1;\n\n cursor: ", ";\n"])), function (_a) {
|
|
54
|
+
var onClick = _a.onClick;
|
|
55
|
+
return (onClick ? 'pointer' : 'default');
|
|
56
|
+
});
|
|
55
57
|
exports.StyledTreeWrapper = styled_components_1["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-flow: column;\n gap: ", "px;\n margin-left: ", "px;\n"], ["\n display: flex;\n flex-flow: column;\n gap: ", "px;\n margin-left: ", "px;\n"])), function (_a) {
|
|
56
58
|
var size = _a.size;
|
|
57
59
|
return sizes_1.GAP_FROM_SIZE[size];
|
|
@@ -101,22 +103,27 @@ var ReqoreTree = function (_a) {
|
|
|
101
103
|
isObject = false;
|
|
102
104
|
isExpandable = false;
|
|
103
105
|
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
106
|
+
var badges = ["{...} ".concat((0, lodash_1.size)(data[key]), " items")];
|
|
107
|
+
if (_showTypes) {
|
|
108
|
+
badges.push({
|
|
109
|
+
icon: 'CodeBoxFill',
|
|
110
|
+
label: dataType
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
return ((0, jsx_runtime_1.jsxs)(exports.StyledTreeWrapper, __assign({ size: helpers_1.zoomToSize[zoom], level: level }, { children: [isObject ? ((0, jsx_runtime_1.jsxs)(ControlGroup_1["default"], __assign({ size: helpers_1.zoomToSize[zoom] }, { children: [level !== 1 && (0, jsx_runtime_1.jsx)(__1.ReqoreHorizontalSpacer, { width: 5 }), (0, jsx_runtime_1.jsx)(Button_1["default"], __assign({ compact: true, minimal: true, className: 'reqore-tree-toggle', icon: isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill', intent: isExpandable ? 'info' : undefined, onClick: function () { return handleItemClick(stateKey, isExpandable); }, flat: false, badge: badges }, { children: displayKey }))] }))) : ((0, jsx_runtime_1.jsxs)(ControlGroup_1["default"], __assign({ verticalAlign: 'flex-start' }, { children: [level !== 1 && (0, jsx_runtime_1.jsx)(__1.ReqoreHorizontalSpacer, { width: 5 }), (0, jsx_runtime_1.jsxs)(__1.ReqoreP, __assign({ customTheme: { text: { color: 'info:lighten' } }, style: { flexShrink: 0 }, size: helpers_1.zoomToSize[zoom] }, { children: [displayKey, ":"] })), withLabelCopy && ((0, jsx_runtime_1.jsx)(__1.ReqoreIcon, { interactive: true, icon: 'ClipboardLine', size: (0, utils_1.getOneLessSize)(helpers_1.zoomToSize[zoom]), onClick: function () {
|
|
114
|
+
try {
|
|
115
|
+
navigator.clipboard.writeText(JSON.stringify(data[key]));
|
|
116
|
+
addNotification({
|
|
117
|
+
content: 'Successfuly copied to clipboard',
|
|
118
|
+
id: Date.now().toString(),
|
|
119
|
+
type: 'success',
|
|
120
|
+
duration: 3000
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
catch (e) {
|
|
124
|
+
console.error(e);
|
|
125
|
+
}
|
|
126
|
+
} })), (0, jsx_runtime_1.jsx)(exports.StyledTreeLabel, __assign({ flat: true, onClick: function () { return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(data[key], __spreadArray(__spreadArray([], path, true), [key], false)); }, className: 'reqore-tree-label', size: helpers_1.zoomToSize[zoom] }, { children: JSON.stringify(data[key]) }))] }))), isExpandable && isObject
|
|
120
127
|
? renderTree(data[key], stateKey, level + 1, __spreadArray(__spreadArray([], path, true), [key], false))
|
|
121
128
|
: null] }), index));
|
|
122
129
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tree/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAuD;AACvD,+BAA0C;AAC1C,wEAAuC;AACvC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tree/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/constants/colors.js
CHANGED
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qoretechnologies/reqore",
|
|
3
|
-
"version": "0.38.
|
|
3
|
+
"version": "0.38.5",
|
|
4
4
|
"description": "ReQore is a highly theme-able and modular UI library for React",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"scripts": {
|
|
8
|
+
"source": "source ~/.profile",
|
|
8
9
|
"test": "./node_modules/.bin/jest",
|
|
9
10
|
"test:watch": "./node_modules/.bin/jest --watch",
|
|
10
11
|
"test:ci": "./node_modules/.bin/jest --silent --json --outputFile=tests.json",
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
"react"
|
|
28
29
|
],
|
|
29
30
|
"pre-push": [
|
|
31
|
+
"source",
|
|
30
32
|
"build:test:prod",
|
|
31
33
|
"lint",
|
|
32
34
|
"test"
|
|
@@ -283,9 +283,10 @@ export interface IReqoreButtonBadgeProps extends IWithReqoreSize {
|
|
|
283
283
|
content?: TReqoreBadge | TReqoreBadge[];
|
|
284
284
|
wrap?: boolean;
|
|
285
285
|
wrapGroup?: boolean;
|
|
286
|
+
compact?: boolean;
|
|
286
287
|
}
|
|
287
288
|
|
|
288
|
-
export const ButtonBadge = memo(({ wrapGroup, ...props }: IReqoreButtonBadgeProps) => {
|
|
289
|
+
export const ButtonBadge = memo(({ wrapGroup, compact, ...props }: IReqoreButtonBadgeProps) => {
|
|
289
290
|
const renderTag = useCallback(
|
|
290
291
|
({ size, color, theme, content, key }: IReqoreButtonBadgeProps & { key: number }) => (
|
|
291
292
|
<ReqoreTag
|
|
@@ -309,7 +310,7 @@ export const ButtonBadge = memo(({ wrapGroup, ...props }: IReqoreButtonBadgeProp
|
|
|
309
310
|
return (
|
|
310
311
|
<>
|
|
311
312
|
<ReqoreSpacer
|
|
312
|
-
width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size]}
|
|
313
|
+
width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1)}
|
|
313
314
|
height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
|
|
314
315
|
/>
|
|
315
316
|
<ReqoreTagGroup wrap={wrapGroup}>
|
|
@@ -363,6 +364,7 @@ const ReqoreButton = memo(
|
|
|
363
364
|
leftIconProps,
|
|
364
365
|
rightIconProps,
|
|
365
366
|
label,
|
|
367
|
+
compact,
|
|
366
368
|
as,
|
|
367
369
|
...rest
|
|
368
370
|
}: IReqoreButtonProps,
|
|
@@ -418,6 +420,7 @@ const ReqoreButton = memo(
|
|
|
418
420
|
wrap={wrap}
|
|
419
421
|
description={description}
|
|
420
422
|
className={`${className || ''} reqore-control reqore-button`}
|
|
423
|
+
compact={compact}
|
|
421
424
|
>
|
|
422
425
|
<StyledButtonContent size={size} wrap={wrap} description={description} flat={_flat}>
|
|
423
426
|
{hasLeftIcon ? (
|
|
@@ -426,6 +429,7 @@ const ReqoreButton = memo(
|
|
|
426
429
|
icon={icon}
|
|
427
430
|
size={size}
|
|
428
431
|
color={leftIconColor || iconColor}
|
|
432
|
+
compact={compact}
|
|
429
433
|
{...leftIconProps}
|
|
430
434
|
style={
|
|
431
435
|
textAlign !== 'left' || iconsAlign === 'center'
|
|
@@ -440,7 +444,7 @@ const ReqoreButton = memo(
|
|
|
440
444
|
}
|
|
441
445
|
/>
|
|
442
446
|
{_children || hasRightIcon ? (
|
|
443
|
-
<ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
|
|
447
|
+
<ReqoreSpacer width={PADDING_FROM_SIZE[size] / (compact ? 2 : 1)} />
|
|
444
448
|
) : null}
|
|
445
449
|
</>
|
|
446
450
|
) : _children ? (
|
|
@@ -471,7 +475,7 @@ const ReqoreButton = memo(
|
|
|
471
475
|
</StyledAnimatedTextWrapper>
|
|
472
476
|
)}
|
|
473
477
|
{(badge || badge === 0) && !wrap ? (
|
|
474
|
-
<ButtonBadge content={badge} size={size} theme={theme} />
|
|
478
|
+
<ButtonBadge content={badge} size={size} theme={theme} compact={compact} />
|
|
475
479
|
) : null}
|
|
476
480
|
{!hasRightIcon ? (
|
|
477
481
|
_children ? (
|
|
@@ -482,11 +486,14 @@ const ReqoreButton = memo(
|
|
|
482
486
|
) : null
|
|
483
487
|
) : (
|
|
484
488
|
<>
|
|
485
|
-
{_children || badge ?
|
|
489
|
+
{_children || badge ? (
|
|
490
|
+
<ReqoreSpacer width={PADDING_FROM_SIZE[size] / (compact ? 2 : 1)} />
|
|
491
|
+
) : null}
|
|
486
492
|
<ReqoreIcon
|
|
487
493
|
icon={rightIcon}
|
|
488
494
|
size={size}
|
|
489
495
|
color={rightIconColor || iconColor}
|
|
496
|
+
compact={compact}
|
|
490
497
|
{...rightIconProps}
|
|
491
498
|
style={
|
|
492
499
|
textAlign !== 'right' || iconsAlign === 'center'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { animated } from '@react-spring/web';
|
|
2
2
|
import { rgba } from 'polished';
|
|
3
|
-
import { memo } from 'react';
|
|
3
|
+
import { memo, useMemo } from 'react';
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
import { IReqoreDrawerStyle } from '.';
|
|
6
6
|
import { useReqoreProperty } from '../..';
|
|
@@ -30,6 +30,7 @@ export const StyledBackdrop = styled(animated.div)<
|
|
|
30
30
|
export const ReqoreBackdrop = memo(
|
|
31
31
|
({ onClose, zIndex, blur, opacity, ...rest }: IReqoreBackdropProps) => {
|
|
32
32
|
const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
|
|
33
|
+
const finalZIndex = useMemo(() => zIndex || getAndIncreaseZIndex(), [zIndex]);
|
|
33
34
|
|
|
34
35
|
return (
|
|
35
36
|
<StyledBackdrop
|
|
@@ -42,7 +43,7 @@ export const ReqoreBackdrop = memo(
|
|
|
42
43
|
}
|
|
43
44
|
}}
|
|
44
45
|
closable={!!onClose}
|
|
45
|
-
zIndex={
|
|
46
|
+
zIndex={finalZIndex}
|
|
46
47
|
blur={blur}
|
|
47
48
|
style={{
|
|
48
49
|
opacity,
|
|
@@ -7,7 +7,6 @@ import { useReqoreProperty } from '../..';
|
|
|
7
7
|
import { SPRING_CONFIG, SPRING_CONFIG_NO_ANIMATIONS } from '../../constants/animations';
|
|
8
8
|
import { IReqoreTheme } from '../../constants/theme';
|
|
9
9
|
import ReqoreThemeProvider from '../../containers/ThemeProvider';
|
|
10
|
-
import useLatestZIndex from '../../hooks/useLatestZIndex';
|
|
11
10
|
import { useReqoreTheme } from '../../hooks/useTheme';
|
|
12
11
|
import { IReqoreIconName } from '../../types/icons';
|
|
13
12
|
import ReqoreButton from '../Button';
|
|
@@ -159,6 +158,7 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
|
|
|
159
158
|
...rest
|
|
160
159
|
}: IReqoreDrawerProps) => {
|
|
161
160
|
const animations = useReqoreProperty('animations');
|
|
161
|
+
const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
|
|
162
162
|
const theme = useReqoreTheme('main', customTheme, intent);
|
|
163
163
|
const layout = useMemo(
|
|
164
164
|
() =>
|
|
@@ -183,8 +183,8 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
|
|
|
183
183
|
config: animations.dialogs ? SPRING_CONFIG : SPRING_CONFIG_NO_ANIMATIONS,
|
|
184
184
|
});
|
|
185
185
|
|
|
186
|
-
const zIndex =
|
|
187
|
-
const wrapperZIndex =
|
|
186
|
+
const zIndex = useMemo(() => getAndIncreaseZIndex(), []);
|
|
187
|
+
const wrapperZIndex = useMemo(() => getAndIncreaseZIndex(), []);
|
|
188
188
|
const _actions: IReqorePanelAction[] = useMemo(() => {
|
|
189
189
|
const builtActions: IReqorePanelAction[] = [...actions];
|
|
190
190
|
|
|
@@ -81,7 +81,7 @@ const ReqoreDropdownList = memo(
|
|
|
81
81
|
|
|
82
82
|
return _items.filter((item) => {
|
|
83
83
|
if (item.divider) {
|
|
84
|
-
return
|
|
84
|
+
return true;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
const text: string | undefined = item.label || item.value || item.children;
|
|
@@ -153,7 +153,8 @@ const ReqoreDropdownList = memo(
|
|
|
153
153
|
{_onBackClick && (
|
|
154
154
|
<ReqoreButton
|
|
155
155
|
icon='ArrowLeftSLine'
|
|
156
|
-
fluid
|
|
156
|
+
fluid={!filterable}
|
|
157
|
+
fixed={filterable}
|
|
157
158
|
onClick={_onBackClick}
|
|
158
159
|
className='reqore-dropdown-back-button'
|
|
159
160
|
/>
|
|
@@ -163,7 +164,10 @@ const ReqoreDropdownList = memo(
|
|
|
163
164
|
value={onFilterChange ? filter : query}
|
|
164
165
|
icon='SearchLine'
|
|
165
166
|
onChange={handleQueryChange}
|
|
166
|
-
placeholder={
|
|
167
|
+
placeholder={
|
|
168
|
+
filterPlaceholder ||
|
|
169
|
+
`Search ${size(_items.filter((item) => !item.divider))} items...`
|
|
170
|
+
}
|
|
167
171
|
onClearClick={() => (onFilterChange ? onFilterChange('') : setQuery(''))}
|
|
168
172
|
{...inputProps}
|
|
169
173
|
/>
|
|
@@ -195,6 +199,7 @@ const ReqoreDropdownList = memo(
|
|
|
195
199
|
<ReqoreDropdownItem
|
|
196
200
|
key={item.label || item.value || index}
|
|
197
201
|
{...item}
|
|
202
|
+
disabled={'items' in item && !size(item.items) ? true : item.disabled}
|
|
198
203
|
onItemClick={handleItemClick}
|
|
199
204
|
scrollIntoView={scrollToSelected && item.selected && !multiSelect}
|
|
200
205
|
/>
|
|
@@ -29,6 +29,8 @@ export interface IReqoreIconProps
|
|
|
29
29
|
rounded?: boolean;
|
|
30
30
|
rotation?: number;
|
|
31
31
|
animation?: 'spin' | 'heartbeat';
|
|
32
|
+
interactive?: boolean;
|
|
33
|
+
compact?: boolean;
|
|
32
34
|
}
|
|
33
35
|
|
|
34
36
|
const SpinKeyframes = keyframes`
|
|
@@ -51,18 +53,23 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
|
|
|
51
53
|
|
|
52
54
|
border-radius: ${({ rounded }) => (rounded ? '50%' : undefined)};
|
|
53
55
|
rotate: ${({ rotation }) => (rotation ? `${rotation}deg` : undefined)};
|
|
56
|
+
cursor: ${({ interactive }) => (interactive ? 'pointer' : undefined)};
|
|
54
57
|
|
|
55
|
-
${({ margin, size }) =>
|
|
58
|
+
${({ margin, size, compact }) =>
|
|
56
59
|
margin &&
|
|
57
60
|
css`
|
|
58
61
|
margin-left: ${margin === 'left' || margin === 'both'
|
|
59
62
|
? isStringSize(size)
|
|
60
|
-
? `${PADDING_FROM_SIZE[size]}px`
|
|
63
|
+
? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
|
|
64
|
+
: compact
|
|
65
|
+
? '3px'
|
|
61
66
|
: '10px'
|
|
62
67
|
: undefined};
|
|
63
68
|
margin-right: ${margin === 'right' || margin === 'both'
|
|
64
69
|
? isStringSize(size)
|
|
65
|
-
? `${PADDING_FROM_SIZE[size]}px`
|
|
70
|
+
? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
|
|
71
|
+
: compact
|
|
72
|
+
? '3px'
|
|
66
73
|
: '10px'
|
|
67
74
|
: undefined};
|
|
68
75
|
`}
|
|
@@ -17,7 +17,8 @@ export interface IReqoreParagraphProps
|
|
|
17
17
|
export const StyledParagraph = styled(StyledTextEffect)`
|
|
18
18
|
padding: 0;
|
|
19
19
|
margin: 0;
|
|
20
|
-
color: ${({ theme, intent }) =>
|
|
20
|
+
color: ${({ theme, intent }) =>
|
|
21
|
+
intent ? theme.intents[intent] : theme.text?.color || 'inherit'};
|
|
21
22
|
font-size: ${({ _size }) => (isStringSize(_size) ? `${TEXT_FROM_SIZE[_size]}px` : _size)};
|
|
22
23
|
`;
|
|
23
24
|
|
|
@@ -29,6 +30,7 @@ export const ReqoreP = memo(
|
|
|
29
30
|
<StyledParagraph
|
|
30
31
|
as='p'
|
|
31
32
|
theme={theme}
|
|
33
|
+
color={theme.text.color}
|
|
32
34
|
intent={intent}
|
|
33
35
|
{...props}
|
|
34
36
|
_size={size}
|
|
@@ -188,6 +188,8 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
|
|
|
188
188
|
)}`;
|
|
189
189
|
|
|
190
190
|
setValue(value);
|
|
191
|
+
// Trigger the onChange event
|
|
192
|
+
onChange?.({ target: { value } } as any);
|
|
191
193
|
},
|
|
192
194
|
[inputRef, _value]
|
|
193
195
|
);
|
|
@@ -232,6 +234,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
|
|
|
232
234
|
component={StyledTextareaWrapper}
|
|
233
235
|
className={`${className || ''} reqore-control-wrapper`}
|
|
234
236
|
width={width}
|
|
237
|
+
filterable
|
|
235
238
|
height={height}
|
|
236
239
|
fluid={fluid}
|
|
237
240
|
fixed={fixed}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import { cloneDeep, size as lodashSize } from 'lodash';
|
|
2
2
|
import { useMemo, useState } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import {
|
|
4
|
+
import { ReqoreHorizontalSpacer, ReqoreIcon, ReqoreP, ReqorePanel, useReqoreProperty } from '../..';
|
|
5
5
|
import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
|
|
6
6
|
import { IReqoreTheme } from '../../constants/theme';
|
|
7
|
-
import { getTypeFromValue } from '../../helpers/utils';
|
|
7
|
+
import { getOneLessSize, getTypeFromValue } from '../../helpers/utils';
|
|
8
8
|
import { IWithReqoreSize } from '../../types/global';
|
|
9
|
-
import ReqoreButton from '../Button';
|
|
9
|
+
import ReqoreButton, { IReqoreButtonProps } from '../Button';
|
|
10
10
|
import ReqoreControlGroup from '../ControlGroup';
|
|
11
11
|
import { ReqoreExportModal } from '../ExportModal';
|
|
12
12
|
import { IReqorePanelAction, IReqorePanelProps } from '../Panel';
|
|
13
13
|
import { getExportActions, getZoomActions, sizeToZoom, zoomToSize } from '../Table/helpers';
|
|
14
|
-
import ReqoreTag from '../Tag';
|
|
15
14
|
|
|
16
15
|
export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
|
|
17
16
|
data: Record<string, unknown> | Array<any>;
|
|
@@ -33,8 +32,10 @@ export interface ITreeStyle {
|
|
|
33
32
|
size?: TSizes;
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
export const StyledTreeLabel = styled(
|
|
35
|
+
export const StyledTreeLabel = styled(ReqoreP)`
|
|
37
36
|
flex-shrink: 1;
|
|
37
|
+
|
|
38
|
+
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
|
|
38
39
|
`;
|
|
39
40
|
|
|
40
41
|
export const StyledTreeWrapper = styled.div<ITreeStyle>`
|
|
@@ -107,49 +108,68 @@ export const ReqoreTree = ({
|
|
|
107
108
|
isExpandable = false;
|
|
108
109
|
}
|
|
109
110
|
|
|
111
|
+
const badges: IReqoreButtonProps['badge'] = [`{...} ${lodashSize(data[key])} items`];
|
|
112
|
+
|
|
113
|
+
if (_showTypes) {
|
|
114
|
+
badges.push({
|
|
115
|
+
icon: 'CodeBoxFill',
|
|
116
|
+
label: dataType,
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
|
|
110
120
|
return (
|
|
111
121
|
<StyledTreeWrapper key={index} size={zoomToSize[zoom]} level={level}>
|
|
112
122
|
{isObject ? (
|
|
113
123
|
<ReqoreControlGroup size={zoomToSize[zoom]}>
|
|
124
|
+
{level !== 1 && <ReqoreHorizontalSpacer width={5} />}
|
|
114
125
|
<ReqoreButton
|
|
126
|
+
compact
|
|
127
|
+
minimal
|
|
115
128
|
className='reqore-tree-toggle'
|
|
116
129
|
icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
|
|
117
130
|
intent={isExpandable ? 'info' : undefined}
|
|
118
131
|
onClick={() => handleItemClick(stateKey, isExpandable)}
|
|
119
|
-
flat
|
|
132
|
+
flat={false}
|
|
133
|
+
badge={badges}
|
|
120
134
|
>
|
|
121
135
|
{displayKey}
|
|
122
136
|
</ReqoreButton>
|
|
123
|
-
{_showTypes ? <ReqoreTag label={dataType} className='reqore-tree-type' /> : null}
|
|
124
137
|
</ReqoreControlGroup>
|
|
125
138
|
) : (
|
|
126
|
-
<ReqoreControlGroup
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
139
|
+
<ReqoreControlGroup verticalAlign='flex-start'>
|
|
140
|
+
{level !== 1 && <ReqoreHorizontalSpacer width={5} />}
|
|
141
|
+
<ReqoreP
|
|
142
|
+
customTheme={{ text: { color: 'info:lighten' } }}
|
|
143
|
+
style={{ flexShrink: 0 }}
|
|
144
|
+
size={zoomToSize[zoom]}
|
|
145
|
+
>
|
|
146
|
+
{displayKey}:
|
|
147
|
+
</ReqoreP>
|
|
148
|
+
{withLabelCopy && (
|
|
149
|
+
<ReqoreIcon
|
|
150
|
+
interactive
|
|
151
|
+
icon='ClipboardLine'
|
|
152
|
+
size={getOneLessSize(zoomToSize[zoom])}
|
|
153
|
+
onClick={() => {
|
|
154
|
+
try {
|
|
155
|
+
navigator.clipboard.writeText(JSON.stringify(data[key]));
|
|
156
|
+
addNotification({
|
|
157
|
+
content: 'Successfuly copied to clipboard',
|
|
158
|
+
id: Date.now().toString(),
|
|
159
|
+
type: 'success',
|
|
160
|
+
duration: 3000,
|
|
161
|
+
});
|
|
162
|
+
} catch (e) {
|
|
163
|
+
console.error(e);
|
|
164
|
+
}
|
|
165
|
+
}}
|
|
166
|
+
/>
|
|
167
|
+
)}
|
|
149
168
|
<StyledTreeLabel
|
|
150
169
|
flat
|
|
151
|
-
onClick={() => onItemClick(data[key], [...path, key])}
|
|
170
|
+
onClick={() => onItemClick?.(data[key], [...path, key])}
|
|
152
171
|
className='reqore-tree-label'
|
|
172
|
+
size={zoomToSize[zoom]}
|
|
153
173
|
>
|
|
154
174
|
{JSON.stringify(data[key])}
|
|
155
175
|
</StyledTreeLabel>
|
package/src/constants/colors.ts
CHANGED
|
@@ -53,6 +53,13 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
|
|
|
53
53
|
</ReqoreButton>
|
|
54
54
|
<ReqoreButton {...buttonProps} rightIcon={undefined} compact />
|
|
55
55
|
<ReqoreButton {...buttonProps} compact />
|
|
56
|
+
<ReqoreButton
|
|
57
|
+
{...buttonProps}
|
|
58
|
+
compact
|
|
59
|
+
icon='AirplayLine'
|
|
60
|
+
rightIcon='Building3Fill'
|
|
61
|
+
label='Compact'
|
|
62
|
+
/>
|
|
56
63
|
<ReqoreButton {...buttonProps} readOnly onClick={alert}>
|
|
57
64
|
Read only
|
|
58
65
|
</ReqoreButton>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { StoryFn, StoryObj } from '@storybook/react';
|
|
2
2
|
import { noop } from 'lodash';
|
|
3
|
+
import { useState } from 'react';
|
|
3
4
|
import { useMount } from 'react-use';
|
|
4
5
|
import { IReqoreModalProps } from '../../components/Modal';
|
|
5
6
|
import { ReqoreModal, ReqorePanel, useReqoreProperty } from '../../index';
|
|
@@ -67,15 +68,21 @@ type Story = StoryObj<typeof meta>;
|
|
|
67
68
|
|
|
68
69
|
const Template: StoryFn<IReqoreModalProps & { confirm?: boolean }> = (args) => {
|
|
69
70
|
const confirmAction = useReqoreProperty('confirmAction');
|
|
71
|
+
const [count, setCount] = useState(0);
|
|
72
|
+
|
|
73
|
+
const handleConfirm = () => {
|
|
74
|
+
confirmAction({
|
|
75
|
+
description: 'How is the wheather going to be?',
|
|
76
|
+
title: 'Tell me something',
|
|
77
|
+
onConfirm: noop,
|
|
78
|
+
onCancel: noop,
|
|
79
|
+
});
|
|
80
|
+
setCount(count + 1);
|
|
81
|
+
};
|
|
70
82
|
|
|
71
83
|
useMount(() => {
|
|
72
84
|
if (args.confirm) {
|
|
73
|
-
|
|
74
|
-
description: 'How is the wheather going to be?',
|
|
75
|
-
title: 'Tell me something',
|
|
76
|
-
onConfirm: noop,
|
|
77
|
-
onCancel: noop,
|
|
78
|
-
});
|
|
85
|
+
handleConfirm();
|
|
79
86
|
}
|
|
80
87
|
});
|
|
81
88
|
|
|
@@ -126,7 +133,7 @@ const Template: StoryFn<IReqoreModalProps & { confirm?: boolean }> = (args) => {
|
|
|
126
133
|
{...args}
|
|
127
134
|
onClose={() => noop}
|
|
128
135
|
bottomActions={[
|
|
129
|
-
{ label: 'Confirm', intent: 'success', position: 'right' },
|
|
136
|
+
{ label: 'Confirm', intent: 'success', position: 'right', onClick: handleConfirm },
|
|
130
137
|
{ label: 'Cancel', intent: 'danger', position: 'left' },
|
|
131
138
|
]}
|
|
132
139
|
>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { expect } from '@storybook/jest';
|
|
1
|
+
import { expect, jest } from '@storybook/jest';
|
|
2
2
|
import { StoryObj } from '@storybook/react';
|
|
3
3
|
import { fireEvent, waitFor, within } from '@storybook/testing-library';
|
|
4
4
|
import { IReqoreTextareaProps } from '../../components/Textarea';
|
|
@@ -16,6 +16,7 @@ const meta = {
|
|
|
16
16
|
scaleWithContent: true,
|
|
17
17
|
fluid: undefined,
|
|
18
18
|
placeholder: 'Placeholder',
|
|
19
|
+
onChange: jest.fn(),
|
|
19
20
|
},
|
|
20
21
|
argTypes: {
|
|
21
22
|
...MinimalArg(),
|
|
@@ -77,12 +78,13 @@ export const ItemCanBeSelected: Story = {
|
|
|
77
78
|
label: 'New event in Google Calendar',
|
|
78
79
|
icon: 'Calendar2Fill',
|
|
79
80
|
description: 'When a new event is created in Google Calendar',
|
|
81
|
+
items: [],
|
|
80
82
|
},
|
|
81
83
|
],
|
|
82
84
|
},
|
|
83
85
|
},
|
|
84
86
|
|
|
85
|
-
play: async ({ canvasElement }) => {
|
|
87
|
+
play: async ({ canvasElement, args }) => {
|
|
86
88
|
const canvas = within(canvasElement);
|
|
87
89
|
|
|
88
90
|
await sleep(200);
|
|
@@ -99,5 +101,8 @@ export const ItemCanBeSelected: Story = {
|
|
|
99
101
|
await fireEvent.click(canvas.getAllByText('Author')[0]);
|
|
100
102
|
|
|
101
103
|
await expect(canvas.getAllByText('$state:{1.field.author}')[0]).toBeTruthy();
|
|
104
|
+
await expect(args.onChange).toHaveBeenCalledWith({
|
|
105
|
+
target: { value: '$state:{1.field.author}' },
|
|
106
|
+
});
|
|
102
107
|
},
|
|
103
108
|
};
|