@capillarytech/blaze-ui 6.5.0 → 6.6.1
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/CapAdvancedIcon/types.d.ts +1 -0
- package/CapAdvancedIcon/types.d.ts.map +1 -1
- package/CapDnDGraph/index.js +2 -2
- package/CapDndGraphSidebar/SideBarIcon.d.ts +3 -23
- package/CapDndGraphSidebar/SideBarIcon.d.ts.map +1 -1
- package/CapDndGraphSidebar/SideBarIcon.js +21 -39
- package/CapDndGraphSidebar/SidebarNodesRendered.d.ts +3 -9
- package/CapDndGraphSidebar/SidebarNodesRendered.d.ts.map +1 -1
- package/CapDndGraphSidebar/SidebarNodesRendered.js +13 -4
- package/CapDndGraphSidebar/index.d.ts +4 -20
- package/CapDndGraphSidebar/index.d.ts.map +1 -1
- package/CapDndGraphSidebar/index.js +31 -33
- package/CapDndGraphSidebar/styles.css +20 -6
- package/CapDndGraphSidebar/styles.module.scss.js +15 -0
- package/CapDndGraphSidebar/styles.scss +69 -51
- package/CapDndGraphSidebar/types.d.ts +106 -0
- package/CapDndGraphSidebar/types.d.ts.map +1 -0
- package/CapDragAndDrop/index.d.ts +3 -19
- package/CapDragAndDrop/index.d.ts.map +1 -1
- package/CapDragAndDrop/index.js +24 -29
- package/CapDragAndDrop/messages.d.ts +25 -0
- package/CapDragAndDrop/messages.d.ts.map +1 -0
- package/CapDragAndDrop/messages.js +28 -0
- package/CapDragAndDrop/styles.css +17 -15
- package/CapDragAndDrop/styles.module.scss.js +21 -0
- package/CapDragAndDrop/styles.scss +18 -16
- package/CapDragAndDrop/types.d.ts +17 -0
- package/CapDragAndDrop/types.d.ts.map +1 -0
- package/CapDragAndDrop/types.js +1 -0
- package/CapIcon/index.js +12 -12
- package/CapIcon/styles.css +17 -21
- package/CapIcon/styles.module.scss.js +3 -4
- package/CapIcon/styles.scss +10 -15
- package/CapMediaPreview/ImageRenderer.d.ts +2 -15
- package/CapMediaPreview/ImageRenderer.d.ts.map +1 -1
- package/CapMediaPreview/ImageRenderer.js +3 -11
- package/CapMediaPreview/MediaRenderer.d.ts +2 -1
- package/CapMediaPreview/MediaRenderer.d.ts.map +1 -1
- package/CapMediaPreview/MediaRenderer.js +17 -15
- package/CapMediaPreview/VideoPlayer.d.ts +2 -1
- package/CapMediaPreview/VideoPlayer.d.ts.map +1 -1
- package/CapMediaPreview/VideoPlayer.js +16 -15
- package/CapMediaPreview/index.d.ts +4 -51
- package/CapMediaPreview/index.d.ts.map +1 -1
- package/CapMediaPreview/index.js +86 -69
- package/CapMediaPreview/styles.css +31 -21
- package/CapMediaPreview/styles.module.scss.js +24 -0
- package/CapMediaPreview/styles.scss +38 -27
- package/CapMediaPreview/types.d.ts +48 -0
- package/CapMediaPreview/types.d.ts.map +1 -0
- package/CapMediaPreview/types.js +1 -0
- package/CapPopoverTree/index.d.ts +40 -3
- package/CapPopoverTree/index.d.ts.map +1 -1
- package/CapPopoverTree/index.js +82 -72
- package/CapPopoverTree/style.d.ts +1 -5
- package/CapPopoverTree/style.d.ts.map +1 -1
- package/CapPopoverTree/styles.css +18 -119
- package/CapPopoverTree/styles.scss +31 -179
- package/CapSelectFilter/types.d.ts +1 -1
- package/CapSelectFilter/types.d.ts.map +1 -1
- package/CapTimeline/CapTimelineCard.d.ts +4 -27
- package/CapTimeline/CapTimelineCard.d.ts.map +1 -1
- package/CapTimeline/CapTimelineCard.js +40 -157
- package/CapTimeline/CapTimelinePanesWrapper.d.ts +4 -25
- package/CapTimeline/CapTimelinePanesWrapper.d.ts.map +1 -1
- package/CapTimeline/CapTimelinePanesWrapper.js +24 -20
- package/CapTimeline/index.d.ts +2 -17
- package/CapTimeline/index.d.ts.map +1 -1
- package/CapTimeline/index.js +62 -23
- package/CapTimeline/messages.d.ts +21 -0
- package/CapTimeline/messages.d.ts.map +1 -0
- package/CapTimeline/messages.js +24 -0
- package/CapTimeline/styles.css +40 -40
- package/CapTimeline/styles.module.scss.js +30 -0
- package/CapTimeline/styles.scss +76 -57
- package/CapTimeline/tests/CapTimeline.mockData.d.ts +14 -0
- package/CapTimeline/tests/CapTimeline.mockData.d.ts.map +1 -0
- package/CapTimeline/types.d.ts +60 -0
- package/CapTimeline/types.d.ts.map +1 -0
- package/CapTimeline/types.js +1 -0
- package/index.d.ts +8 -0
- package/index.d.ts.map +1 -1
- package/index.js +179 -171
- package/package.json +2 -2
- package/utils/getCapThemeConfig.d.ts +1 -1
- package/utils/getCapThemeConfig.d.ts.map +1 -1
- package/utils/getCapThemeConfig.js +9 -1
- package/CapPopoverTree/styles.module.scss.js +0 -26
- package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts +0 -22
- package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts.map +0 -1
- package/CapPopoverTree/types.d.ts +0 -62
- package/CapPopoverTree/types.d.ts.map +0 -1
- package/CapVirtualSelect/actions.d.ts +0 -16
- package/CapVirtualSelect/actions.d.ts.map +0 -1
- package/CapVirtualSelect/actions.js +0 -21
- package/CapVirtualSelect/constants.d.ts +0 -13
- package/CapVirtualSelect/constants.d.ts.map +0 -1
- package/CapVirtualSelect/constants.js +0 -26
- package/CapVirtualSelect/index.d.ts +0 -169
- package/CapVirtualSelect/index.d.ts.map +0 -1
- package/CapVirtualSelect/index.js +0 -409
- package/CapVirtualSelect/messages.d.ts +0 -9
- package/CapVirtualSelect/messages.d.ts.map +0 -1
- package/CapVirtualSelect/messages.js +0 -12
- package/CapVirtualSelect/reducer.d.ts +0 -4
- package/CapVirtualSelect/reducer.d.ts.map +0 -1
- package/CapVirtualSelect/reducer.js +0 -63
- package/CapVirtualSelect/saga.d.ts +0 -40
- package/CapVirtualSelect/saga.d.ts.map +0 -1
- package/CapVirtualSelect/saga.js +0 -91
- package/CapVirtualSelect/selectors.d.ts +0 -28
- package/CapVirtualSelect/selectors.d.ts.map +0 -1
- package/CapVirtualSelect/selectors.js +0 -30
- package/CapVirtualSelect/styles.css +0 -110
- package/CapVirtualSelect/styles.scss +0 -106
- package/CapVirtualSelect/tests/mockData.d.ts +0 -7
- package/CapVirtualSelect/tests/mockData.d.ts.map +0 -1
- package/CapVirtualSelect/utils.d.ts +0 -2
- package/CapVirtualSelect/utils.d.ts.map +0 -1
- package/CapVirtualSelect/utils.js +0 -12
- /package/{CapPopoverTree → CapDndGraphSidebar}/types.js +0 -0
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import type { DragSourceMonitor } from 'react-dnd';
|
|
3
|
+
/**
|
|
4
|
+
* Child node structure for sidebar icons
|
|
5
|
+
*/
|
|
6
|
+
export interface ChildNode {
|
|
7
|
+
id: string;
|
|
8
|
+
type: string;
|
|
9
|
+
label: string;
|
|
10
|
+
isMultiPath?: boolean;
|
|
11
|
+
isDisabled?: boolean;
|
|
12
|
+
tooltipText?: string | ((id: string, isDisabled: boolean, handleModel: () => void) => React.ReactNode);
|
|
13
|
+
premiumTooltipText?: string;
|
|
14
|
+
showPremiumIcon?: boolean;
|
|
15
|
+
premiumModelContent?: () => React.ReactNode;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Node structure with categories and children
|
|
19
|
+
*/
|
|
20
|
+
export interface Node {
|
|
21
|
+
key: string;
|
|
22
|
+
title: string;
|
|
23
|
+
tooltipText?: string;
|
|
24
|
+
children: ChildNode[];
|
|
25
|
+
color: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Props for CapDndGraphSidebar component
|
|
29
|
+
*/
|
|
30
|
+
export interface CapDndGraphSidebarProps {
|
|
31
|
+
/** Array of node categories with their children */
|
|
32
|
+
nodes?: Node[];
|
|
33
|
+
/** Title displayed at the top of the sidebar */
|
|
34
|
+
sidebarTitle?: string;
|
|
35
|
+
/** Description text displayed below the title */
|
|
36
|
+
sidebarDescription?: string;
|
|
37
|
+
/** Info tooltip text for the sidebar title */
|
|
38
|
+
sidebarTitleInfo?: string;
|
|
39
|
+
/** Whether nodes can be dragged */
|
|
40
|
+
isNodeDraggable?: boolean;
|
|
41
|
+
/** Handler for drag end events */
|
|
42
|
+
endDrag?: (item: unknown, monitor: DragSourceMonitor) => void;
|
|
43
|
+
/** Whether the sidebar is in view-only mode */
|
|
44
|
+
viewMode?: boolean;
|
|
45
|
+
/** Callback when a node is dropped outside the canvas */
|
|
46
|
+
onDropOutsideCanvas?: (item: {
|
|
47
|
+
id: string;
|
|
48
|
+
type: string;
|
|
49
|
+
iconType: string;
|
|
50
|
+
color: string;
|
|
51
|
+
isMultiPath?: boolean;
|
|
52
|
+
}) => void;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Props for SideBarIcon component
|
|
56
|
+
*/
|
|
57
|
+
export interface SideBarIconProps {
|
|
58
|
+
/** Child node data */
|
|
59
|
+
childNode: ChildNode;
|
|
60
|
+
/** Color for the icon background */
|
|
61
|
+
color: string;
|
|
62
|
+
/** Whether the node can be dragged */
|
|
63
|
+
isNodeDraggable?: boolean;
|
|
64
|
+
/** Whether the sidebar is in view-only mode */
|
|
65
|
+
viewMode?: boolean;
|
|
66
|
+
/** Callback when a node is dropped outside the canvas */
|
|
67
|
+
onDropOutsideCanvas?: (item: {
|
|
68
|
+
id: string;
|
|
69
|
+
type: string;
|
|
70
|
+
iconType: string;
|
|
71
|
+
color: string;
|
|
72
|
+
isMultiPath?: boolean;
|
|
73
|
+
}) => void;
|
|
74
|
+
/** Whether the premium modal is shown */
|
|
75
|
+
showModel?: boolean;
|
|
76
|
+
/** Handler to toggle the premium modal */
|
|
77
|
+
setShowModel?: (show: boolean) => void;
|
|
78
|
+
/** Handler for drag end events (passed through but not used directly) */
|
|
79
|
+
endDrag?: (item: unknown, monitor: DragSourceMonitor) => void;
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Props for SidebarNodesRendered component
|
|
83
|
+
*/
|
|
84
|
+
export interface SidebarNodesRenderedProps {
|
|
85
|
+
/** Array of node categories with their children */
|
|
86
|
+
nodes?: Node[];
|
|
87
|
+
/** Whether nodes can be dragged */
|
|
88
|
+
isNodeDraggable?: boolean;
|
|
89
|
+
/** Handler for drag end events */
|
|
90
|
+
endDrag?: (item: unknown, monitor: DragSourceMonitor) => void;
|
|
91
|
+
/** Whether the sidebar is in view-only mode */
|
|
92
|
+
viewMode?: boolean;
|
|
93
|
+
/** Callback when a node is dropped outside the canvas */
|
|
94
|
+
onDropOutsideCanvas?: (item: {
|
|
95
|
+
id: string;
|
|
96
|
+
type: string;
|
|
97
|
+
iconType: string;
|
|
98
|
+
color: string;
|
|
99
|
+
isMultiPath?: boolean;
|
|
100
|
+
}) => void;
|
|
101
|
+
/** Whether the premium modal is shown */
|
|
102
|
+
showModel?: boolean;
|
|
103
|
+
/** Handler to toggle the premium modal */
|
|
104
|
+
setShowModel?: (show: boolean) => void;
|
|
105
|
+
}
|
|
106
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapDndGraphSidebar/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,24 +4,8 @@
|
|
|
4
4
|
*
|
|
5
5
|
*/
|
|
6
6
|
import React from 'react';
|
|
7
|
-
import '
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
setrejectedfiles: any;
|
|
11
|
-
accept?: {
|
|
12
|
-
'text/csv': string[];
|
|
13
|
-
'application/vnd.ms-excel': string[];
|
|
14
|
-
};
|
|
15
|
-
maxfilesize?: number;
|
|
16
|
-
minfilesize?: number;
|
|
17
|
-
multiple?: boolean;
|
|
18
|
-
dropboxwidth?: string;
|
|
19
|
-
dropboxtext: any;
|
|
20
|
-
selectFilesText: any;
|
|
21
|
-
droptext: any;
|
|
22
|
-
invalidFileSelectionText: any;
|
|
23
|
-
or: any;
|
|
24
|
-
className: any;
|
|
25
|
-
} & import("react-intl").WrappedComponentProps, "intl">>;
|
|
7
|
+
import type { WrappedComponentProps } from 'react-intl';
|
|
8
|
+
import type { CapDragAndDropProps } from './types';
|
|
9
|
+
declare const _default: React.ComponentType<Omit<CapDragAndDropProps & WrappedComponentProps, "intl">>;
|
|
26
10
|
export default _default;
|
|
27
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapDragAndDrop/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapDragAndDrop/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAUxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;;AA4GnD,wBAA0C"}
|
package/CapDragAndDrop/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import classNames from "classnames";
|
|
3
3
|
import { isEmpty } from "lodash";
|
|
4
|
-
import PropTypes from "prop-types";
|
|
5
4
|
import { useCallback } from "react";
|
|
6
5
|
import { useDropzone } from "react-dropzone";
|
|
6
|
+
import { injectIntl } from "react-intl";
|
|
7
7
|
import addFileSvg from "../assets/images/file-selector.svg.js";
|
|
8
8
|
import CapButton from "../CapButton/index.js";
|
|
9
9
|
import CapImage from "../CapImage/index.js";
|
|
10
10
|
import CapRow from "../CapRow/index.js";
|
|
11
|
-
import LocaleHoc from "../LocaleHoc/index.js";
|
|
12
11
|
import { defaultMinFileSize, defaultMaxFileSize, defaultAcceptedFiles, small } from "./constants.js";
|
|
13
|
-
import
|
|
12
|
+
import messages from "./messages.js";
|
|
13
|
+
import styles from "./styles.module.scss.js";
|
|
14
14
|
const clsPrefix = "cap-drag-and-drop-v1";
|
|
15
15
|
const CapDragAndDrop = ({
|
|
16
16
|
setacceptedfiles,
|
|
@@ -25,8 +25,14 @@ const CapDragAndDrop = ({
|
|
|
25
25
|
droptext,
|
|
26
26
|
invalidFileSelectionText,
|
|
27
27
|
or,
|
|
28
|
-
className
|
|
28
|
+
className,
|
|
29
|
+
intl: { formatMessage }
|
|
29
30
|
}) => {
|
|
31
|
+
const displayDropboxtext = dropboxtext ?? formatMessage(messages.dropboxtext);
|
|
32
|
+
const displaySelectFilesText = selectFilesText ?? formatMessage(messages.selectFilesText);
|
|
33
|
+
const displayDroptext = droptext ?? formatMessage(messages.droptext);
|
|
34
|
+
const displayInvalidFileSelectionText = invalidFileSelectionText ?? formatMessage(messages.invalidFileSelectionText);
|
|
35
|
+
const displayOr = or ?? formatMessage(messages.or);
|
|
30
36
|
const onDrop = useCallback(
|
|
31
37
|
(filesAccepted, filesRejected) => {
|
|
32
38
|
if (multiple) {
|
|
@@ -52,40 +58,29 @@ const CapDragAndDrop = ({
|
|
|
52
58
|
maxSize: maxfilesize,
|
|
53
59
|
minSize: minfilesize
|
|
54
60
|
});
|
|
55
|
-
return /* @__PURE__ */ jsx(CapRow, { className: classNames("uploadFileSlideBoxContent", className), children: /* @__PURE__ */ jsx(CapRow, { "data-testid": "dragZoneCapColumn", type: "flex", children: /* @__PURE__ */ jsxs(
|
|
61
|
+
return /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: classNames("uploadFileSlideBoxContent", className), children: /* @__PURE__ */ jsx(CapRow, { useLegacy: true, "data-testid": "dragZoneCapColumn", type: "flex", children: /* @__PURE__ */ jsxs(
|
|
56
62
|
"div",
|
|
57
63
|
{
|
|
58
|
-
className: classNames(
|
|
64
|
+
className: classNames(
|
|
65
|
+
styles[`${clsPrefix}-main-div`],
|
|
66
|
+
styles[`${clsPrefix}-${dropboxwidth}`]
|
|
67
|
+
),
|
|
59
68
|
...getRootProps({ isDragAccept, isDragReject }),
|
|
60
69
|
children: [
|
|
61
|
-
/* @__PURE__ */ jsx("input", { ...getInputProps(), className: "cap-drag-and-drop-input" }),
|
|
62
|
-
!isDragActive && /* @__PURE__ */ jsxs(CapRow, { "data-testid": "dragZone", className: "dragInactiveText", children: [
|
|
63
|
-
/* @__PURE__ */ jsx(CapRow, { className: "fileUploadImage", children: /* @__PURE__ */ jsx(CapImage, { src: addFileSvg, alt: "default" }) }),
|
|
64
|
-
/* @__PURE__ */ jsx(CapRow, { className:
|
|
65
|
-
/* @__PURE__ */ jsx(CapRow, { className: "intermediateOR", children:
|
|
66
|
-
/* @__PURE__ */ jsx(CapRow, { className:
|
|
70
|
+
/* @__PURE__ */ jsx("input", { ...getInputProps(), className: styles["cap-drag-and-drop-input"] }),
|
|
71
|
+
!isDragActive && /* @__PURE__ */ jsxs(CapRow, { "data-testid": "dragZone", useLegacy: true, className: styles["dragInactiveText"], children: [
|
|
72
|
+
/* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles["fileUploadImage"], children: /* @__PURE__ */ jsx(CapImage, { src: addFileSvg, alt: "default" }) }),
|
|
73
|
+
/* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles[`${clsPrefix}-dropBoxText`], children: displayDropboxtext }),
|
|
74
|
+
/* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles["intermediateOR"], children: displayOr }),
|
|
75
|
+
/* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles[`${clsPrefix}-uploadButton`], children: /* @__PURE__ */ jsx(CapButton, { type: "secondary", children: displaySelectFilesText }) })
|
|
67
76
|
] }),
|
|
68
|
-
isDragReject && /* @__PURE__ */ jsx(CapRow, { className: "drag-active-section", children:
|
|
69
|
-
isDragAccept && /* @__PURE__ */ jsx(CapRow, { className: "drag-active-section", children:
|
|
77
|
+
isDragReject && /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles["drag-active-section"], children: displayInvalidFileSelectionText }),
|
|
78
|
+
isDragAccept && /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles["drag-active-section"], children: displayDroptext })
|
|
70
79
|
]
|
|
71
80
|
}
|
|
72
81
|
) }) });
|
|
73
82
|
};
|
|
74
|
-
|
|
75
|
-
setacceptedfiles: PropTypes.func.isRequired,
|
|
76
|
-
setrejectedfiles: PropTypes.func,
|
|
77
|
-
accept: PropTypes.object,
|
|
78
|
-
maxfilesize: PropTypes.number,
|
|
79
|
-
multiple: PropTypes.bool,
|
|
80
|
-
dropboxwidth: PropTypes.string,
|
|
81
|
-
dropboxtext: PropTypes.string,
|
|
82
|
-
className: PropTypes.string
|
|
83
|
-
};
|
|
84
|
-
CapDragAndDrop.defaultProps = {
|
|
85
|
-
dropboxwidth: small,
|
|
86
|
-
multiple: true
|
|
87
|
-
};
|
|
88
|
-
const index = LocaleHoc(CapDragAndDrop, { key: "CapDragAndDrop" });
|
|
83
|
+
const index = injectIntl(CapDragAndDrop);
|
|
89
84
|
export {
|
|
90
85
|
index as default
|
|
91
86
|
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export declare const scope = "app.commonUtils.capUiLibrary.CapDragAndDrop";
|
|
2
|
+
declare const _default: {
|
|
3
|
+
dropboxtext: {
|
|
4
|
+
id: string;
|
|
5
|
+
defaultMessage: string;
|
|
6
|
+
};
|
|
7
|
+
selectFilesText: {
|
|
8
|
+
id: string;
|
|
9
|
+
defaultMessage: string;
|
|
10
|
+
};
|
|
11
|
+
droptext: {
|
|
12
|
+
id: string;
|
|
13
|
+
defaultMessage: string;
|
|
14
|
+
};
|
|
15
|
+
invalidFileSelectionText: {
|
|
16
|
+
id: string;
|
|
17
|
+
defaultMessage: string;
|
|
18
|
+
};
|
|
19
|
+
or: {
|
|
20
|
+
id: string;
|
|
21
|
+
defaultMessage: string;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
export default _default;
|
|
25
|
+
//# sourceMappingURL=messages.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapDragAndDrop/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,gDAAgD,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAEnE,wBAqBG"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { defineMessages } from "react-intl";
|
|
2
|
+
const scope = "app.commonUtils.capUiLibrary.CapDragAndDrop";
|
|
3
|
+
const messages = defineMessages({
|
|
4
|
+
dropboxtext: {
|
|
5
|
+
id: `${scope}.dropboxtext`,
|
|
6
|
+
defaultMessage: "Drop here!"
|
|
7
|
+
},
|
|
8
|
+
selectFilesText: {
|
|
9
|
+
id: `${scope}.selectFilesText`,
|
|
10
|
+
defaultMessage: "Select files from your computer"
|
|
11
|
+
},
|
|
12
|
+
droptext: {
|
|
13
|
+
id: `${scope}.droptext`,
|
|
14
|
+
defaultMessage: "Drag and drop files"
|
|
15
|
+
},
|
|
16
|
+
invalidFileSelectionText: {
|
|
17
|
+
id: `${scope}.invalidFileSelectionText`,
|
|
18
|
+
defaultMessage: "Invalid file selection!"
|
|
19
|
+
},
|
|
20
|
+
or: {
|
|
21
|
+
id: `${scope}.or`,
|
|
22
|
+
defaultMessage: "OR"
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
export {
|
|
26
|
+
messages as default,
|
|
27
|
+
scope
|
|
28
|
+
};
|
|
@@ -10,30 +10,31 @@
|
|
|
10
10
|
display: flex;
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
align-items: center;
|
|
13
|
-
padding:
|
|
14
|
-
gap:
|
|
13
|
+
padding: 2.143rem 11.286rem;
|
|
14
|
+
gap: 0.714rem;
|
|
15
15
|
background: #ffffff;
|
|
16
|
-
border:
|
|
17
|
-
border-radius:
|
|
18
|
-
border-width:
|
|
19
|
-
height:
|
|
16
|
+
border: 0.143rem dashed #ebecf0;
|
|
17
|
+
border-radius: 0.357rem;
|
|
18
|
+
border-width: 0.214rem;
|
|
19
|
+
height: 20.357rem;
|
|
20
20
|
}
|
|
21
21
|
.cap-drag-and-drop-v1-size-r {
|
|
22
|
-
width:
|
|
22
|
+
width: 35.357rem;
|
|
23
23
|
}
|
|
24
24
|
.cap-drag-and-drop-v1-size-s {
|
|
25
|
-
width:
|
|
25
|
+
width: 23rem;
|
|
26
26
|
}
|
|
27
27
|
.dragInactiveText {
|
|
28
|
+
display: block;
|
|
28
29
|
font-weight: 500;
|
|
29
30
|
font-size: 1.428rem;
|
|
30
|
-
line-height:
|
|
31
|
+
line-height: 1.875rem;
|
|
31
32
|
text-align: center;
|
|
32
|
-
width:
|
|
33
|
+
width: 21.429rem;
|
|
33
34
|
}
|
|
34
35
|
.intermediateOR {
|
|
35
|
-
margin-top:
|
|
36
|
-
margin-bottom:
|
|
36
|
+
margin-top: 1.214rem;
|
|
37
|
+
margin-bottom: 0.929rem;
|
|
37
38
|
font-weight: 400;
|
|
38
39
|
font-size: 1.142rem;
|
|
39
40
|
line-height: 1.714rem;
|
|
@@ -41,17 +42,18 @@
|
|
|
41
42
|
color: #091e42;
|
|
42
43
|
}
|
|
43
44
|
.fileUploadImage {
|
|
44
|
-
margin-bottom:
|
|
45
|
+
margin-bottom: 2.214rem;
|
|
45
46
|
}
|
|
46
47
|
.cap-drag-and-drop-v1-uploadButton {
|
|
47
|
-
margin-bottom:
|
|
48
|
+
margin-bottom: 0.714rem;
|
|
48
49
|
}
|
|
49
50
|
.cap-drag-and-drop-v1-dropBoxText {
|
|
50
51
|
white-space: initial;
|
|
51
52
|
word-break: break-word;
|
|
53
|
+
font-size: 1.428rem;
|
|
52
54
|
}
|
|
53
55
|
.drag-active-section {
|
|
54
|
-
width:
|
|
56
|
+
width: 14.286rem;
|
|
55
57
|
text-align: center;
|
|
56
58
|
}
|
|
57
59
|
.cap-drag-and-drop-input {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import './styles.css';const dragInactiveText = "dragInactiveText";
|
|
2
|
+
const intermediateOR = "intermediateOR";
|
|
3
|
+
const fileUploadImage = "fileUploadImage";
|
|
4
|
+
const styles = {
|
|
5
|
+
"cap-drag-and-drop-v1-main-div": "cap-drag-and-drop-v1-main-div",
|
|
6
|
+
"cap-drag-and-drop-v1-size-r": "cap-drag-and-drop-v1-size-r",
|
|
7
|
+
"cap-drag-and-drop-v1-size-s": "cap-drag-and-drop-v1-size-s",
|
|
8
|
+
dragInactiveText,
|
|
9
|
+
intermediateOR,
|
|
10
|
+
fileUploadImage,
|
|
11
|
+
"cap-drag-and-drop-v1-uploadButton": "cap-drag-and-drop-v1-uploadButton",
|
|
12
|
+
"cap-drag-and-drop-v1-dropBoxText": "cap-drag-and-drop-v1-dropBoxText",
|
|
13
|
+
"drag-active-section": "drag-active-section",
|
|
14
|
+
"cap-drag-and-drop-input": "cap-drag-and-drop-input"
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
styles as default,
|
|
18
|
+
dragInactiveText,
|
|
19
|
+
fileUploadImage,
|
|
20
|
+
intermediateOR
|
|
21
|
+
};
|
|
@@ -1,36 +1,37 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import '../styles/_variables.scss';
|
|
2
2
|
|
|
3
3
|
.cap-drag-and-drop-v1-main-div {
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
align-items: center;
|
|
7
|
-
padding: 30px 158px
|
|
8
|
-
gap: 10px
|
|
7
|
+
padding: 2.143rem 11.286rem; // 30px 158px
|
|
8
|
+
gap: 0.714rem; // 10px
|
|
9
9
|
background: $CAP_WHITE;
|
|
10
|
-
border:
|
|
11
|
-
border-radius: 5px
|
|
12
|
-
border-width: 3px
|
|
13
|
-
height: 285px
|
|
10
|
+
border: 0.143rem dashed $CAP_G08; // 2px
|
|
11
|
+
border-radius: 0.357rem; // 5px
|
|
12
|
+
border-width: 0.214rem; // 3px
|
|
13
|
+
height: 20.357rem; // 285px
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.cap-drag-and-drop-v1-size-r {
|
|
17
|
-
width: 495px
|
|
17
|
+
width: 35.357rem; // 495px
|
|
18
18
|
}
|
|
19
19
|
.cap-drag-and-drop-v1-size-s {
|
|
20
|
-
width: 322px
|
|
20
|
+
width: 23rem; // 322px
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.dragInactiveText {
|
|
24
|
+
display: block;
|
|
24
25
|
font-weight: 500;
|
|
25
26
|
font-size: $CAP_SPACE_20;
|
|
26
|
-
line-height:
|
|
27
|
+
line-height: 1.875rem;
|
|
27
28
|
text-align: center;
|
|
28
|
-
width: 300px
|
|
29
|
+
width: 21.429rem; // 300px
|
|
29
30
|
}
|
|
30
31
|
|
|
31
32
|
.intermediateOR {
|
|
32
|
-
margin-top: 17px
|
|
33
|
-
margin-bottom: 13px
|
|
33
|
+
margin-top: 1.214rem; // 17px
|
|
34
|
+
margin-bottom: 0.929rem; // 13px
|
|
34
35
|
font-weight: $FONT_WEIGHT_REGULAR;
|
|
35
36
|
font-size: $CAP_SPACE_16;
|
|
36
37
|
line-height: $CAP_SPACE_24;
|
|
@@ -39,19 +40,20 @@
|
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
.fileUploadImage {
|
|
42
|
-
margin-bottom: 31px
|
|
43
|
+
margin-bottom: 2.214rem; // 31px
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
.cap-drag-and-drop-v1-uploadButton {
|
|
46
|
-
margin-bottom: 10px
|
|
47
|
+
margin-bottom: 0.714rem; // 10px
|
|
47
48
|
}
|
|
48
49
|
.cap-drag-and-drop-v1-dropBoxText {
|
|
49
50
|
white-space: initial;
|
|
50
51
|
word-break: break-word;
|
|
52
|
+
font-size: $CAP_SPACE_20;
|
|
51
53
|
}
|
|
52
54
|
|
|
53
55
|
.drag-active-section {
|
|
54
|
-
width: 200px
|
|
56
|
+
width: 14.286rem; // 200px
|
|
55
57
|
text-align: center;
|
|
56
58
|
}
|
|
57
59
|
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
export interface CapDragAndDropProps {
|
|
3
|
+
setacceptedfiles: (value: File[] | ((prev: File[]) => File[])) => void;
|
|
4
|
+
setrejectedfiles?: (value: unknown) => void;
|
|
5
|
+
accept?: Record<string, string[]>;
|
|
6
|
+
maxfilesize?: number;
|
|
7
|
+
minfilesize?: number;
|
|
8
|
+
multiple?: boolean;
|
|
9
|
+
dropboxwidth?: string;
|
|
10
|
+
dropboxtext?: string;
|
|
11
|
+
selectFilesText?: string;
|
|
12
|
+
droptext?: string;
|
|
13
|
+
invalidFileSelectionText?: string;
|
|
14
|
+
or?: React.ReactNode;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapDragAndDrop/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACvE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/CapIcon/index.js
CHANGED
|
@@ -55,8 +55,8 @@ const CapIcon = React.forwardRef(
|
|
|
55
55
|
{
|
|
56
56
|
ref,
|
|
57
57
|
className: classNames(
|
|
58
|
-
styles["cap-icon-
|
|
59
|
-
|
|
58
|
+
styles["cap-icon-v2"],
|
|
59
|
+
type ? `cap-icon-v2-${type}` : null,
|
|
60
60
|
styles[size],
|
|
61
61
|
{ [styles["with-text-label"]]: textLabel, [styles.disabled]: disabled },
|
|
62
62
|
className
|
|
@@ -84,8 +84,8 @@ const CapIcon = React.forwardRef(
|
|
|
84
84
|
{
|
|
85
85
|
ref: withBackground ? void 0 : ref,
|
|
86
86
|
className: classNames(
|
|
87
|
-
styles["cap-icon-
|
|
88
|
-
|
|
87
|
+
styles["cap-icon-v2"],
|
|
88
|
+
type ? `cap-icon-v2-${type}` : null,
|
|
89
89
|
styles[size],
|
|
90
90
|
{
|
|
91
91
|
[styles.spin]: spin,
|
|
@@ -106,7 +106,7 @@ const CapIcon = React.forwardRef(
|
|
|
106
106
|
"div",
|
|
107
107
|
{
|
|
108
108
|
ref,
|
|
109
|
-
className: classNames(styles["cap-icon-background
|
|
109
|
+
className: classNames(styles["cap-icon-background"], styles[size]),
|
|
110
110
|
...backgroundProps,
|
|
111
111
|
children: iconComponent
|
|
112
112
|
}
|
|
@@ -120,8 +120,8 @@ const CapIcon = React.forwardRef(
|
|
|
120
120
|
{
|
|
121
121
|
ref: withBackground ? void 0 : ref,
|
|
122
122
|
className: classNames(
|
|
123
|
-
styles["cap-icon-
|
|
124
|
-
|
|
123
|
+
styles["cap-icon-v2"],
|
|
124
|
+
type ? `cap-icon-v2-${type}` : null,
|
|
125
125
|
styles[size],
|
|
126
126
|
{ [styles.disabled]: disabled, [styles["with-text-label"]]: textLabel },
|
|
127
127
|
className
|
|
@@ -139,7 +139,7 @@ const CapIcon = React.forwardRef(
|
|
|
139
139
|
"span",
|
|
140
140
|
{
|
|
141
141
|
ref,
|
|
142
|
-
className: classNames(styles["cap-icon-background
|
|
142
|
+
className: classNames(styles["cap-icon-background"], styles[size]),
|
|
143
143
|
...backgroundProps,
|
|
144
144
|
children: iconComponent
|
|
145
145
|
}
|
|
@@ -150,8 +150,8 @@ const CapIcon = React.forwardRef(
|
|
|
150
150
|
{
|
|
151
151
|
ref,
|
|
152
152
|
className: classNames(
|
|
153
|
-
styles["cap-icon-
|
|
154
|
-
|
|
153
|
+
styles["cap-icon-v2"],
|
|
154
|
+
type ? `cap-icon-v2-${type}` : null,
|
|
155
155
|
styles[size],
|
|
156
156
|
{ [styles.disabled]: disabled, [styles["with-text-label"]]: textLabel },
|
|
157
157
|
className
|
|
@@ -168,7 +168,7 @@ CapIcon.displayName = "CapIcon";
|
|
|
168
168
|
const AntIcon = ({ className, ...rest }) => /* @__PURE__ */ jsx(
|
|
169
169
|
"i",
|
|
170
170
|
{
|
|
171
|
-
className: classNames(styles["cap-icon-
|
|
171
|
+
className: classNames(styles["cap-icon-v2"], className),
|
|
172
172
|
style: { display: "inline-flex", alignItems: "center", justifyContent: "center" },
|
|
173
173
|
...rest
|
|
174
174
|
}
|
|
@@ -181,7 +181,7 @@ const CapIconAvatar = ({
|
|
|
181
181
|
backgroundProps = {},
|
|
182
182
|
labelProps = {}
|
|
183
183
|
}) => {
|
|
184
|
-
return /* @__PURE__ */ jsxs("div", { className: classNames(styles["cap-icon-avatar"], className), children: [
|
|
184
|
+
return /* @__PURE__ */ jsxs("div", { className: classNames(styles["cap-icon-v2-avatar"], className), children: [
|
|
185
185
|
/* @__PURE__ */ jsx(LogoBackground, { width, height, ...backgroundProps }),
|
|
186
186
|
text && /* @__PURE__ */ jsx("span", { className: styles["text-label"], ...labelProps, children: text })
|
|
187
187
|
] });
|
package/CapIcon/styles.css
CHANGED
|
@@ -6,50 +6,46 @@
|
|
|
6
6
|
/* Border Width */
|
|
7
7
|
/* Transition */
|
|
8
8
|
/* Timezones Footer */
|
|
9
|
-
.cap-icon-
|
|
9
|
+
.cap-icon-v2 {
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
align-items: center;
|
|
12
12
|
justify-content: center;
|
|
13
13
|
}
|
|
14
|
-
.cap-icon-
|
|
14
|
+
.cap-icon-v2.disabled {
|
|
15
15
|
cursor: not-allowed;
|
|
16
16
|
opacity: 0.5;
|
|
17
17
|
}
|
|
18
|
-
.cap-icon-
|
|
18
|
+
.cap-icon-v2.xs {
|
|
19
19
|
font-size: 0.857rem;
|
|
20
20
|
}
|
|
21
|
-
.cap-icon-
|
|
21
|
+
.cap-icon-v2.s {
|
|
22
22
|
font-size: 1.143rem;
|
|
23
23
|
}
|
|
24
|
-
.cap-icon-
|
|
24
|
+
.cap-icon-v2.m {
|
|
25
25
|
font-size: 1.714rem;
|
|
26
26
|
}
|
|
27
|
-
.cap-icon-
|
|
27
|
+
.cap-icon-v2.l {
|
|
28
28
|
font-size: 2.286rem;
|
|
29
29
|
}
|
|
30
|
-
.cap-icon-
|
|
30
|
+
.cap-icon-v2.with-text-label {
|
|
31
31
|
display: inline-flex;
|
|
32
32
|
align-items: center;
|
|
33
33
|
gap: 0.571rem;
|
|
34
34
|
}
|
|
35
|
-
.cap-icon-
|
|
36
|
-
display:
|
|
35
|
+
.cap-icon-v2 .anticon {
|
|
36
|
+
display: flex;
|
|
37
37
|
align-items: center;
|
|
38
38
|
justify-content: center;
|
|
39
|
-
border-radius: 50%;
|
|
40
|
-
background-color: #dfe2e7;
|
|
41
39
|
}
|
|
42
|
-
.cap-icon {
|
|
43
|
-
|
|
44
|
-
align-items: center;
|
|
40
|
+
.cap-icon-v2.spin {
|
|
41
|
+
animation: rotate 2s linear infinite;
|
|
45
42
|
}
|
|
46
|
-
.cap-icon
|
|
47
|
-
display: flex;
|
|
43
|
+
.cap-icon-background {
|
|
44
|
+
display: inline-flex;
|
|
48
45
|
align-items: center;
|
|
49
46
|
justify-content: center;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
animation: rotate 2s linear infinite;
|
|
47
|
+
border-radius: 50%;
|
|
48
|
+
background-color: #dfe2e7;
|
|
53
49
|
}
|
|
54
50
|
@keyframes rotate {
|
|
55
51
|
from {
|
|
@@ -59,13 +55,13 @@
|
|
|
59
55
|
transform: rotate(360deg);
|
|
60
56
|
}
|
|
61
57
|
}
|
|
62
|
-
.cap-icon-avatar {
|
|
58
|
+
.cap-icon-v2-avatar {
|
|
63
59
|
display: inline-flex;
|
|
64
60
|
align-items: center;
|
|
65
61
|
justify-content: center;
|
|
66
62
|
position: relative;
|
|
67
63
|
}
|
|
68
|
-
.cap-icon-avatar .text-label {
|
|
64
|
+
.cap-icon-v2-avatar .text-label {
|
|
69
65
|
position: absolute;
|
|
70
66
|
display: flex;
|
|
71
67
|
align-items: center;
|
|
@@ -7,19 +7,18 @@ const anticon = "anticon";
|
|
|
7
7
|
const spin = "spin";
|
|
8
8
|
const rotate = "rotate";
|
|
9
9
|
const styles = {
|
|
10
|
-
"cap-icon-
|
|
10
|
+
"cap-icon-v2": "cap-icon-v2",
|
|
11
11
|
disabled,
|
|
12
12
|
xs,
|
|
13
13
|
s,
|
|
14
14
|
m,
|
|
15
15
|
l,
|
|
16
16
|
"with-text-label": "with-text-label",
|
|
17
|
-
"cap-icon-background-wrapper": "cap-icon-background-wrapper",
|
|
18
|
-
"cap-icon": "cap-icon",
|
|
19
17
|
anticon,
|
|
20
18
|
spin,
|
|
21
19
|
rotate,
|
|
22
|
-
"cap-icon-
|
|
20
|
+
"cap-icon-background": "cap-icon-background",
|
|
21
|
+
"cap-icon-v2-avatar": "cap-icon-v2-avatar",
|
|
23
22
|
"text-label": "text-label"
|
|
24
23
|
};
|
|
25
24
|
export {
|