@elliemae/ds-dropzone 3.26.1-rc.1 → 3.27.0-next.2
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/dist/cjs/DSDropzone.js +1 -0
- package/dist/cjs/DSDropzone.js.map +2 -2
- package/dist/cjs/config/useDSDropzone.js +15 -10
- package/dist/cjs/config/useDSDropzone.js.map +2 -2
- package/dist/cjs/styled.js +5 -0
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/DSDropzone.js +1 -0
- package/dist/esm/DSDropzone.js.map +2 -2
- package/dist/esm/config/useDSDropzone.js +15 -10
- package/dist/esm/config/useDSDropzone.js.map +2 -2
- package/dist/esm/styled.js +6 -1
- package/dist/esm/styled.js.map +2 -2
- package/package.json +10 -10
package/dist/cjs/DSDropzone.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSDropzone.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSDropzoneT, DSDropzonePropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSDropzone } from './config/useDSDropzone.js';\nimport { DSDropzoneName } from './constants/index.js';\nimport { StyledDropZone, StyledDropZoneHolder } from './styled.js';\nimport { DSActivezone } from './parts/DSActivezone/DSActivezone.js';\nimport { omit } from 'lodash';\n\nconst DSDropzone: React.ComponentType<DSDropzoneT.Props> = (props) => {\n const {\n propsWithDefault,\n globalProps,\n xstyledProps,\n isDragInside,\n onDragEnterHandler,\n onDragOverHandler,\n onDragLeaveHandler,\n onDropHandler,\n } = useDSDropzone(props);\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n const safeGlobalProps = omit(globalProps, 'onDrop', 'hasError');\n return (\n <StyledDropZoneHolder\n {...safeGlobalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledDropZone\n onDragEnter={onDragEnterHandler}\n onDragOver={onDragOverHandler}\n onDragLeave={onDragLeaveHandler}\n onDrop={onDropHandler}\n hasError={Boolean(propsWithDefault.hasError)}\n disabled={Boolean(propsWithDefault.disabled)}\n isDragActive={isDragInside}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {propsWithDefault.children}\n {isDragInside ? <DSActivezone /> : null}\n </StyledDropZone>\n </StyledDropZoneHolder>\n );\n};\n\nDSDropzone.propTypes = DSDropzonePropTypesSchema;\nDSDropzone.displayName = DSDropzoneName;\nconst DSDropzoneWithSchema = describe(DSDropzone);\nDSDropzoneWithSchema.propTypes = DSDropzonePropTypesSchema;\n\nexport { DSDropzone, DSDropzoneWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSDropzoneT, DSDropzonePropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSDropzone } from './config/useDSDropzone.js';\nimport { DSDropzoneName } from './constants/index.js';\nimport { StyledDropZone, StyledDropZoneHolder } from './styled.js';\nimport { DSActivezone } from './parts/DSActivezone/DSActivezone.js';\nimport { omit } from 'lodash';\n\nconst DSDropzone: React.ComponentType<DSDropzoneT.Props> = (props) => {\n const {\n propsWithDefault,\n globalProps,\n xstyledProps,\n isDragInside,\n onDragEnterHandler,\n onDragOverHandler,\n onDragLeaveHandler,\n onDropHandler,\n } = useDSDropzone(props);\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n const safeGlobalProps = omit(globalProps, 'onDrop', 'hasError');\n return (\n <StyledDropZoneHolder\n {...safeGlobalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n disabled={Boolean(propsWithDefault.disabled)}\n >\n <StyledDropZone\n onDragEnter={onDragEnterHandler}\n onDragOver={onDragOverHandler}\n onDragLeave={onDragLeaveHandler}\n onDrop={onDropHandler}\n hasError={Boolean(propsWithDefault.hasError)}\n disabled={Boolean(propsWithDefault.disabled)}\n isDragActive={isDragInside}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {propsWithDefault.children}\n {isDragInside ? <DSActivezone /> : null}\n </StyledDropZone>\n </StyledDropZoneHolder>\n );\n};\n\nDSDropzone.propTypes = DSDropzonePropTypesSchema;\nDSDropzone.displayName = DSDropzoneName;\nconst DSDropzoneWithSchema = describe(DSDropzone);\nDSDropzoneWithSchema.propTypes = DSDropzonePropTypesSchema;\n\nexport { DSDropzone, DSDropzoneWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BjB;AA/BN,mBAAkB;AAClB,8BAAyB;AACzB,mCAA4D;AAC5D,2BAA8B;AAC9B,uBAA+B;AAC/B,oBAAqD;AACrD,0BAA6B;AAC7B,oBAAqB;AAErB,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc,KAAK;AACvB,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,sBAAkB,oBAAK,aAAa,UAAU,UAAU;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,MAE3C;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,QAAQ;AAAA,UACR,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,UAC3C,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,UAC3C,cAAc;AAAA,UACd;AAAA,UACA;AAAA,UAEC;AAAA,6BAAiB;AAAA,YACjB,eAAe,4CAAC,oCAAa,IAAK;AAAA;AAAA;AAAA,MACrC;AAAA;AAAA,EACF;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -47,7 +47,7 @@ const useDSDropzone = (propsFromUser) => {
|
|
|
47
47
|
"wrap"
|
|
48
48
|
]);
|
|
49
49
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
50
|
-
const { id, onDrop } = propsWithDefault;
|
|
50
|
+
const { id, disabled, onDrop } = propsWithDefault;
|
|
51
51
|
const instanceUid = import_react.default.useMemo(() => id || (0, import_uid.uid)(5), [id]);
|
|
52
52
|
const [isDragInside, setIsDragInside] = import_react.default.useState(false);
|
|
53
53
|
const onBodyDragDropEvent = import_react.default.useCallback((e) => {
|
|
@@ -59,20 +59,25 @@ const useDSDropzone = (propsFromUser) => {
|
|
|
59
59
|
document.body.removeEventListener("drop", onBodyDragDropEvent);
|
|
60
60
|
};
|
|
61
61
|
}, [onBodyDragDropEvent]);
|
|
62
|
-
const onDragEnterHandler = import_react.default.useCallback(
|
|
63
|
-
e
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
const onDragEnterHandler = import_react.default.useCallback(
|
|
63
|
+
(e) => {
|
|
64
|
+
e.preventDefault();
|
|
65
|
+
e.stopPropagation();
|
|
66
|
+
if (!disabled)
|
|
67
|
+
setIsDragInside(true);
|
|
68
|
+
},
|
|
69
|
+
[disabled]
|
|
70
|
+
);
|
|
67
71
|
const onDragOverHandler = import_react.default.useCallback((e) => {
|
|
68
72
|
e.preventDefault();
|
|
69
73
|
e.stopPropagation();
|
|
70
|
-
setIsDragInside(true);
|
|
71
74
|
}, []);
|
|
72
75
|
const onDragLeaveHandler = import_react.default.useCallback((e) => {
|
|
73
|
-
e.
|
|
74
|
-
|
|
75
|
-
|
|
76
|
+
if (e.relatedTarget !== e.currentTarget && !e.currentTarget.contains(e.relatedTarget)) {
|
|
77
|
+
e.preventDefault();
|
|
78
|
+
e.stopPropagation();
|
|
79
|
+
setIsDragInside(false);
|
|
80
|
+
}
|
|
76
81
|
}, []);
|
|
77
82
|
const onDropHandler = import_react.default.useCallback(
|
|
78
83
|
(e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useDSDropzone.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSDropzoneT, DSDropzonePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DropzoneCTX {\n propsWithDefault: DSDropzoneT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useDSDropzone = (propsFromUser: DSDropzoneT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSDropzoneT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSDropzonePropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = omit(useGetGlobalAttributes<DSDropzoneT.InternalProps>(propsWithDefault), [\n 'cols',\n 'rows',\n 'wrap',\n ]);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const { id, onDrop } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const [isDragInside, setIsDragInside] = React.useState(false);\n\n const onBodyDragDropEvent = React.useCallback((e: Event) => {\n e.preventDefault();\n }, []);\n\n /**\n * Prevent default open file in browser\n */\n React.useEffect(() => {\n document.body.addEventListener('drop', onBodyDragDropEvent);\n return () => {\n document.body.removeEventListener('drop', onBodyDragDropEvent);\n };\n }, [onBodyDragDropEvent]);\n\n const onDragEnterHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAqB;AACrB,0BAAyF;AACzF,iBAAoB;AACpB,mCAAoE;AACpE,8BAAiC;AAS1B,MAAM,gBAAgB,CAAC,kBAAqC;AAIjE,QAAM,uBAAmB,kDAAwD,eAAe,yCAAY;AAC5G,gDAAiB,kBAAkB,gDAAmB;AAItD,QAAM,kBAAc,wBAAK,4CAAkD,gBAAgB,GAAG;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,mBAAe,wCAAmB,gBAAgB;AAKxD,QAAM,EAAE,IAAI,OAAO,IAAI;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSDropzoneT, DSDropzonePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DropzoneCTX {\n propsWithDefault: DSDropzoneT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useDSDropzone = (propsFromUser: DSDropzoneT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSDropzoneT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSDropzonePropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = omit(useGetGlobalAttributes<DSDropzoneT.InternalProps>(propsWithDefault), [\n 'cols',\n 'rows',\n 'wrap',\n ]);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const { id, disabled, onDrop } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const [isDragInside, setIsDragInside] = React.useState(false);\n\n const onBodyDragDropEvent = React.useCallback((e: Event) => {\n e.preventDefault();\n }, []);\n\n /**\n * Prevent default open file in browser\n */\n React.useEffect(() => {\n document.body.addEventListener('drop', onBodyDragDropEvent);\n return () => {\n document.body.removeEventListener('drop', onBodyDragDropEvent);\n };\n }, [onBodyDragDropEvent]);\n\n const onDragEnterHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (!disabled) setIsDragInside(true);\n },\n [disabled],\n );\n const onDragOverHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n e.preventDefault();\n e.stopPropagation();\n }, []);\n const onDragLeaveHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n if (e.relatedTarget !== e.currentTarget && !e.currentTarget.contains(e.relatedTarget as Node)) {\n e.preventDefault();\n e.stopPropagation();\n setIsDragInside(false);\n }\n }, []);\n const onDropHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragInside(false);\n const filesArray = Array.from(e.dataTransfer?.files ?? []);\n onDrop?.(filesArray, e);\n },\n [onDrop],\n );\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n isDragInside,\n onDragEnterHandler,\n onDragOverHandler,\n onDragLeaveHandler,\n onDropHandler,\n // ...eventHandlers,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n isDragInside,\n onDragEnterHandler,\n onDragOverHandler,\n onDragLeaveHandler,\n onDropHandler,\n // eventHandlers,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAqB;AACrB,0BAAyF;AACzF,iBAAoB;AACpB,mCAAoE;AACpE,8BAAiC;AAS1B,MAAM,gBAAgB,CAAC,kBAAqC;AAIjE,QAAM,uBAAmB,kDAAwD,eAAe,yCAAY;AAC5G,gDAAiB,kBAAkB,gDAAmB;AAItD,QAAM,kBAAc,wBAAK,4CAAkD,gBAAgB,GAAG;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,mBAAe,wCAAmB,gBAAgB;AAKxD,QAAM,EAAE,IAAI,UAAU,OAAO,IAAI;AACjC,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAI1D,QAAM,CAAC,cAAc,eAAe,IAAI,aAAAA,QAAM,SAAS,KAAK;AAE5D,QAAM,sBAAsB,aAAAA,QAAM,YAAY,CAAC,MAAa;AAC1D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,eAAAA,QAAM,UAAU,MAAM;AACpB,aAAS,KAAK,iBAAiB,QAAQ,mBAAmB;AAC1D,WAAO,MAAM;AACX,eAAS,KAAK,oBAAoB,QAAQ,mBAAmB;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAExB,QAAM,qBAA6D,aAAAA,QAAM;AAAA,IACvE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,UAAI,CAAC;AAAU,wBAAgB,IAAI;AAAA,IACrC;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AACA,QAAM,oBAA4D,aAAAA,QAAM,YAAY,CAAC,MAAM;AACzF,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AACL,QAAM,qBAA6D,aAAAA,QAAM,YAAY,CAAC,MAAM;AAC1F,QAAI,EAAE,kBAAkB,EAAE,iBAAiB,CAAC,EAAE,cAAc,SAAS,EAAE,aAAqB,GAAG;AAC7F,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,sBAAgB,KAAK;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,gBAAwD,aAAAA,QAAM;AAAA,IAClE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,sBAAgB,KAAK;AACrB,YAAM,aAAa,MAAM,KAAK,EAAE,cAAc,SAAS,CAAC,CAAC;AACzD,eAAS,YAAY,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -36,12 +36,16 @@ var React = __toESM(require("react"));
|
|
|
36
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
38
38
|
var import_constants = require("./constants/index.js");
|
|
39
|
+
const disabledStyles = import_ds_system.css`
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
`;
|
|
39
42
|
const borderImage = (color) => `url("data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${import_constants.DROP_ZONE_CONSTANTS.BORDER_RADIUS}' ry='${import_constants.DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${import_constants.DROP_ZONE_CONSTANTS.BORDER_WIDTH}' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")`;
|
|
40
43
|
const StyledDropZoneHolder = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
41
44
|
name: import_constants.DSDropzoneName,
|
|
42
45
|
slot: import_constants.DROPZONE_SLOTS.WRAPPER_HOLDER
|
|
43
46
|
})`
|
|
44
47
|
position: relative;
|
|
48
|
+
${(props) => props.disabled && "cursor: not-allowed;"}
|
|
45
49
|
`;
|
|
46
50
|
const StyledDropZone = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSDropzoneName, slot: import_constants.DROPZONE_SLOTS.WRAPPER })`
|
|
47
51
|
border-radius: ${import_constants.DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;
|
|
@@ -74,5 +78,6 @@ const StyledDropZone = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
|
74
78
|
}};
|
|
75
79
|
}
|
|
76
80
|
cursor: ${(props) => props.isDragActive ? "grabbing" : "default"};
|
|
81
|
+
${(props) => props.disabled && disabledStyles}
|
|
77
82
|
`;
|
|
78
83
|
//# sourceMappingURL=styled.js.map
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type {} from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from './constants/index.js';\n\n// const borderImageCreator = (color: any, stroke: number) =>\n// encodeURIComponent(\n// `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"8\" ry=\"8\" stroke=\"${color}\" stroke-width=\"${stroke}\" stroke-dasharray=\"6, 14\" stroke-dashoffset=\"0\" stroke-linecap=\"square\"/></svg>`,\n// );\n\n// const handleBorder = (props: StyledProps<DSDropzoneT.InternalProps>): string => {\n// const { isDragAccept, isDragReject, isFocused } = props;\n// console.log(props);\n// if (isDragAccept) return borderImageCreator(props.theme.colors.brand[600], 2);\n// if (isDragReject) return borderImageCreator(props.theme.colors.danger[900], 2);\n// return borderImageCreator(props.theme.colors.neutral[400], 2);\n// };\n\nconst borderImage = (color: string) =>\n `url(\"data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${\n DROP_ZONE_CONSTANTS.BORDER_RADIUS\n }' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${\n DROP_ZONE_CONSTANTS.BORDER_WIDTH\n }' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e\")`;\n\ninterface DropzoneStyledProps {\n isDragActive: boolean;\n disabled: boolean;\n hasError: boolean;\n getOwnerProps: () => object;\n getOwnerPropsArguments: () => object;\n}\nexport const StyledDropZoneHolder = styled(Grid, {\n name: DSDropzoneName,\n slot: DROPZONE_SLOTS.WRAPPER_HOLDER,\n})`\n position: relative;\n`;\nexport const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })<DropzoneStyledProps>`\n border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n background-color: ${(props) => props.theme.colors.neutral['000']};\n background-image: ${(props) => {\n if (props.disabled) {\n return borderImage(props.theme.colors.neutral[400]);\n }\n if (props.isDragActive) {\n return borderImage(props.theme.colors.brand[600]);\n }\n if (props.hasError) {\n return borderImage(props.theme.colors.danger[900]);\n }\n return borderImage(props.theme.colors.neutral[400]);\n }};\n padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;\n &:hover {\n background-image: ${(props) => {\n if (props.disabled) {\n return borderImage(props.theme.colors.neutral[400]);\n }\n if (props.isDragActive) {\n return borderImage(props.theme.colors.brand[600]);\n }\n if (props.hasError) {\n return borderImage(props.theme.colors.danger[900]);\n }\n return borderImage(props.theme.colors.brand[600]);\n }};\n }\n cursor: ${(props) => (props.isDragActive ? 'grabbing' : 'default')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["import type {} from '@elliemae/ds-system';\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from './constants/index.js';\n\n// const borderImageCreator = (color: any, stroke: number) =>\n// encodeURIComponent(\n// `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"8\" ry=\"8\" stroke=\"${color}\" stroke-width=\"${stroke}\" stroke-dasharray=\"6, 14\" stroke-dashoffset=\"0\" stroke-linecap=\"square\"/></svg>`,\n// );\n\n// const handleBorder = (props: StyledProps<DSDropzoneT.InternalProps>): string => {\n// const { isDragAccept, isDragReject, isFocused } = props;\n// console.log(props);\n// if (isDragAccept) return borderImageCreator(props.theme.colors.brand[600], 2);\n// if (isDragReject) return borderImageCreator(props.theme.colors.danger[900], 2);\n// return borderImageCreator(props.theme.colors.neutral[400], 2);\n// };\n\nconst disabledStyles = css`\n pointer-events: none;\n`;\n\nconst borderImage = (color: string) =>\n `url(\"data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${\n DROP_ZONE_CONSTANTS.BORDER_RADIUS\n }' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${\n DROP_ZONE_CONSTANTS.BORDER_WIDTH\n }' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e\")`;\n\ninterface DropzoneStyledProps {\n isDragActive: boolean;\n disabled: boolean;\n hasError: boolean;\n getOwnerProps: () => object;\n getOwnerPropsArguments: () => object;\n}\nexport const StyledDropZoneHolder = styled(Grid, {\n name: DSDropzoneName,\n slot: DROPZONE_SLOTS.WRAPPER_HOLDER,\n})`\n position: relative;\n ${(props) => props.disabled && 'cursor: not-allowed;'}\n`;\nexport const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })<DropzoneStyledProps>`\n border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n background-color: ${(props) => props.theme.colors.neutral['000']};\n background-image: ${(props) => {\n if (props.disabled) {\n return borderImage(props.theme.colors.neutral[400]);\n }\n if (props.isDragActive) {\n return borderImage(props.theme.colors.brand[600]);\n }\n if (props.hasError) {\n return borderImage(props.theme.colors.danger[900]);\n }\n return borderImage(props.theme.colors.neutral[400]);\n }};\n padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;\n &:hover {\n background-image: ${(props) => {\n if (props.disabled) {\n return borderImage(props.theme.colors.neutral[400]);\n }\n if (props.isDragActive) {\n return borderImage(props.theme.colors.brand[600]);\n }\n if (props.hasError) {\n return borderImage(props.theme.colors.danger[900]);\n }\n return borderImage(props.theme.colors.brand[600]);\n }};\n }\n cursor: ${(props) => (props.isDragActive ? 'grabbing' : 'default')};\n ${(props) => props.disabled && disabledStyles}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA4B;AAC5B,qBAAqB;AACrB,uBAAoE;AAepE,MAAM,iBAAiB;AAAA;AAAA;AAIvB,MAAM,cAAc,CAAC,UACnB,gLACE,qCAAoB,sBACb,qCAAoB,0BAA0B,mBAAmB,KAAK,oBAC7E,qCAAoB;AAUjB,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gCAAe;AACvB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU,MAAM,YAAY;AAAA;AAE1B,MAAM,qBAAiB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,gCAAe,QAAQ,CAAC;AAAA,mBAC9E,qCAAoB;AAAA,sBACjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,sBAC3C,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AACpD;AAAA,aACW,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,wBAElB,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAClD;AAAA;AAAA,YAEQ,CAAC,UAAW,MAAM,eAAe,aAAa;AAAA,IACtD,CAAC,UAAU,MAAM,YAAY;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSDropzone.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSDropzone.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSDropzoneT, DSDropzonePropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSDropzone } from './config/useDSDropzone.js';\nimport { DSDropzoneName } from './constants/index.js';\nimport { StyledDropZone, StyledDropZoneHolder } from './styled.js';\nimport { DSActivezone } from './parts/DSActivezone/DSActivezone.js';\nimport { omit } from 'lodash';\n\nconst DSDropzone: React.ComponentType<DSDropzoneT.Props> = (props) => {\n const {\n propsWithDefault,\n globalProps,\n xstyledProps,\n isDragInside,\n onDragEnterHandler,\n onDragOverHandler,\n onDragLeaveHandler,\n onDropHandler,\n } = useDSDropzone(props);\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n const safeGlobalProps = omit(globalProps, 'onDrop', 'hasError');\n return (\n <StyledDropZoneHolder\n {...safeGlobalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledDropZone\n onDragEnter={onDragEnterHandler}\n onDragOver={onDragOverHandler}\n onDragLeave={onDragLeaveHandler}\n onDrop={onDropHandler}\n hasError={Boolean(propsWithDefault.hasError)}\n disabled={Boolean(propsWithDefault.disabled)}\n isDragActive={isDragInside}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {propsWithDefault.children}\n {isDragInside ? <DSActivezone /> : null}\n </StyledDropZone>\n </StyledDropZoneHolder>\n );\n};\n\nDSDropzone.propTypes = DSDropzonePropTypesSchema;\nDSDropzone.displayName = DSDropzoneName;\nconst DSDropzoneWithSchema = describe(DSDropzone);\nDSDropzoneWithSchema.propTypes = DSDropzonePropTypesSchema;\n\nexport { DSDropzone, DSDropzoneWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSDropzoneT, DSDropzonePropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSDropzone } from './config/useDSDropzone.js';\nimport { DSDropzoneName } from './constants/index.js';\nimport { StyledDropZone, StyledDropZoneHolder } from './styled.js';\nimport { DSActivezone } from './parts/DSActivezone/DSActivezone.js';\nimport { omit } from 'lodash';\n\nconst DSDropzone: React.ComponentType<DSDropzoneT.Props> = (props) => {\n const {\n propsWithDefault,\n globalProps,\n xstyledProps,\n isDragInside,\n onDragEnterHandler,\n onDragOverHandler,\n onDragLeaveHandler,\n onDropHandler,\n } = useDSDropzone(props);\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n const safeGlobalProps = omit(globalProps, 'onDrop', 'hasError');\n return (\n <StyledDropZoneHolder\n {...safeGlobalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n disabled={Boolean(propsWithDefault.disabled)}\n >\n <StyledDropZone\n onDragEnter={onDragEnterHandler}\n onDragOver={onDragOverHandler}\n onDragLeave={onDragLeaveHandler}\n onDrop={onDropHandler}\n hasError={Boolean(propsWithDefault.hasError)}\n disabled={Boolean(propsWithDefault.disabled)}\n isDragActive={isDragInside}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {propsWithDefault.children}\n {isDragInside ? <DSActivezone /> : null}\n </StyledDropZone>\n </StyledDropZoneHolder>\n );\n};\n\nDSDropzone.propTypes = DSDropzonePropTypesSchema;\nDSDropzone.displayName = DSDropzoneName;\nconst DSDropzoneWithSchema = describe(DSDropzone);\nDSDropzoneWithSchema.propTypes = DSDropzonePropTypesSchema;\n\nexport { DSDropzone, DSDropzoneWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+BjB,SAYkB,KAZlB;AA/BN,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAA2B,iCAAiC;AAC5D,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAErB,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc,KAAK;AACvB,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,kBAAkB,KAAK,aAAa,UAAU,UAAU;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,MAE3C;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,QAAQ;AAAA,UACR,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,UAC3C,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,UAC3C,cAAc;AAAA,UACd;AAAA,UACA;AAAA,UAEC;AAAA,6BAAiB;AAAA,YACjB,eAAe,oBAAC,gBAAa,IAAK;AAAA;AAAA;AAAA,MACrC;AAAA;AAAA,EACF;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -14,7 +14,7 @@ const useDSDropzone = (propsFromUser) => {
|
|
|
14
14
|
"wrap"
|
|
15
15
|
]);
|
|
16
16
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
17
|
-
const { id, onDrop } = propsWithDefault;
|
|
17
|
+
const { id, disabled, onDrop } = propsWithDefault;
|
|
18
18
|
const instanceUid = React2.useMemo(() => id || uid(5), [id]);
|
|
19
19
|
const [isDragInside, setIsDragInside] = React2.useState(false);
|
|
20
20
|
const onBodyDragDropEvent = React2.useCallback((e) => {
|
|
@@ -26,20 +26,25 @@ const useDSDropzone = (propsFromUser) => {
|
|
|
26
26
|
document.body.removeEventListener("drop", onBodyDragDropEvent);
|
|
27
27
|
};
|
|
28
28
|
}, [onBodyDragDropEvent]);
|
|
29
|
-
const onDragEnterHandler = React2.useCallback(
|
|
30
|
-
e
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
const onDragEnterHandler = React2.useCallback(
|
|
30
|
+
(e) => {
|
|
31
|
+
e.preventDefault();
|
|
32
|
+
e.stopPropagation();
|
|
33
|
+
if (!disabled)
|
|
34
|
+
setIsDragInside(true);
|
|
35
|
+
},
|
|
36
|
+
[disabled]
|
|
37
|
+
);
|
|
34
38
|
const onDragOverHandler = React2.useCallback((e) => {
|
|
35
39
|
e.preventDefault();
|
|
36
40
|
e.stopPropagation();
|
|
37
|
-
setIsDragInside(true);
|
|
38
41
|
}, []);
|
|
39
42
|
const onDragLeaveHandler = React2.useCallback((e) => {
|
|
40
|
-
e.
|
|
41
|
-
|
|
42
|
-
|
|
43
|
+
if (e.relatedTarget !== e.currentTarget && !e.currentTarget.contains(e.relatedTarget)) {
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
e.stopPropagation();
|
|
46
|
+
setIsDragInside(false);
|
|
47
|
+
}
|
|
43
48
|
}, []);
|
|
44
49
|
const onDropHandler = React2.useCallback(
|
|
45
50
|
(e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDSDropzone.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSDropzoneT, DSDropzonePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DropzoneCTX {\n propsWithDefault: DSDropzoneT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useDSDropzone = (propsFromUser: DSDropzoneT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSDropzoneT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSDropzonePropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = omit(useGetGlobalAttributes<DSDropzoneT.InternalProps>(propsWithDefault), [\n 'cols',\n 'rows',\n 'wrap',\n ]);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const { id, onDrop } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const [isDragInside, setIsDragInside] = React.useState(false);\n\n const onBodyDragDropEvent = React.useCallback((e: Event) => {\n e.preventDefault();\n }, []);\n\n /**\n * Prevent default open file in browser\n */\n React.useEffect(() => {\n document.body.addEventListener('drop', onBodyDragDropEvent);\n return () => {\n document.body.removeEventListener('drop', onBodyDragDropEvent);\n };\n }, [onBodyDragDropEvent]);\n\n const onDragEnterHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AAS1B,MAAM,gBAAgB,CAAC,kBAAqC;AAIjE,QAAM,mBAAmB,6BAAwD,eAAe,YAAY;AAC5G,mBAAiB,kBAAkB,mBAAmB;AAItD,QAAM,cAAc,KAAK,uBAAkD,gBAAgB,GAAG;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,EAAE,IAAI,OAAO,IAAI;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSDropzoneT, DSDropzonePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DropzoneCTX {\n propsWithDefault: DSDropzoneT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useDSDropzone = (propsFromUser: DSDropzoneT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSDropzoneT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSDropzonePropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = omit(useGetGlobalAttributes<DSDropzoneT.InternalProps>(propsWithDefault), [\n 'cols',\n 'rows',\n 'wrap',\n ]);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const { id, disabled, onDrop } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const [isDragInside, setIsDragInside] = React.useState(false);\n\n const onBodyDragDropEvent = React.useCallback((e: Event) => {\n e.preventDefault();\n }, []);\n\n /**\n * Prevent default open file in browser\n */\n React.useEffect(() => {\n document.body.addEventListener('drop', onBodyDragDropEvent);\n return () => {\n document.body.removeEventListener('drop', onBodyDragDropEvent);\n };\n }, [onBodyDragDropEvent]);\n\n const onDragEnterHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (!disabled) setIsDragInside(true);\n },\n [disabled],\n );\n const onDragOverHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n e.preventDefault();\n e.stopPropagation();\n }, []);\n const onDragLeaveHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n if (e.relatedTarget !== e.currentTarget && !e.currentTarget.contains(e.relatedTarget as Node)) {\n e.preventDefault();\n e.stopPropagation();\n setIsDragInside(false);\n }\n }, []);\n const onDropHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragInside(false);\n const filesArray = Array.from(e.dataTransfer?.files ?? []);\n onDrop?.(filesArray, e);\n },\n [onDrop],\n );\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n isDragInside,\n onDragEnterHandler,\n onDragOverHandler,\n onDragLeaveHandler,\n onDropHandler,\n // ...eventHandlers,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n isDragInside,\n onDragEnterHandler,\n onDragOverHandler,\n onDragLeaveHandler,\n onDropHandler,\n // eventHandlers,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AAS1B,MAAM,gBAAgB,CAAC,kBAAqC;AAIjE,QAAM,mBAAmB,6BAAwD,eAAe,YAAY;AAC5G,mBAAiB,kBAAkB,mBAAmB;AAItD,QAAM,cAAc,KAAK,uBAAkD,gBAAgB,GAAG;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,EAAE,IAAI,UAAU,OAAO,IAAI;AACjC,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAI1D,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAS,KAAK;AAE5D,QAAM,sBAAsBA,OAAM,YAAY,CAAC,MAAa;AAC1D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,EAAAA,OAAM,UAAU,MAAM;AACpB,aAAS,KAAK,iBAAiB,QAAQ,mBAAmB;AAC1D,WAAO,MAAM;AACX,eAAS,KAAK,oBAAoB,QAAQ,mBAAmB;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAExB,QAAM,qBAA6DA,OAAM;AAAA,IACvE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,UAAI,CAAC;AAAU,wBAAgB,IAAI;AAAA,IACrC;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AACA,QAAM,oBAA4DA,OAAM,YAAY,CAAC,MAAM;AACzF,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AACL,QAAM,qBAA6DA,OAAM,YAAY,CAAC,MAAM;AAC1F,QAAI,EAAE,kBAAkB,EAAE,iBAAiB,CAAC,EAAE,cAAc,SAAS,EAAE,aAAqB,GAAG;AAC7F,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,sBAAgB,KAAK;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,gBAAwDA,OAAM;AAAA,IAClE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,sBAAgB,KAAK;AACrB,YAAM,aAAa,MAAM,KAAK,EAAE,cAAc,SAAS,CAAC,CAAC;AACzD,eAAS,YAAY,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled } from "@elliemae/ds-system";
|
|
2
|
+
import { styled, css } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from "./constants/index.js";
|
|
5
|
+
const disabledStyles = css`
|
|
6
|
+
pointer-events: none;
|
|
7
|
+
`;
|
|
5
8
|
const borderImage = (color) => `url("data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${DROP_ZONE_CONSTANTS.BORDER_WIDTH}' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")`;
|
|
6
9
|
const StyledDropZoneHolder = styled(Grid, {
|
|
7
10
|
name: DSDropzoneName,
|
|
8
11
|
slot: DROPZONE_SLOTS.WRAPPER_HOLDER
|
|
9
12
|
})`
|
|
10
13
|
position: relative;
|
|
14
|
+
${(props) => props.disabled && "cursor: not-allowed;"}
|
|
11
15
|
`;
|
|
12
16
|
const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })`
|
|
13
17
|
border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;
|
|
@@ -40,6 +44,7 @@ const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS
|
|
|
40
44
|
}};
|
|
41
45
|
}
|
|
42
46
|
cursor: ${(props) => props.isDragActive ? "grabbing" : "default"};
|
|
47
|
+
${(props) => props.disabled && disabledStyles}
|
|
43
48
|
`;
|
|
44
49
|
export {
|
|
45
50
|
StyledDropZone,
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from './constants/index.js';\n\n// const borderImageCreator = (color: any, stroke: number) =>\n// encodeURIComponent(\n// `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"8\" ry=\"8\" stroke=\"${color}\" stroke-width=\"${stroke}\" stroke-dasharray=\"6, 14\" stroke-dashoffset=\"0\" stroke-linecap=\"square\"/></svg>`,\n// );\n\n// const handleBorder = (props: StyledProps<DSDropzoneT.InternalProps>): string => {\n// const { isDragAccept, isDragReject, isFocused } = props;\n// console.log(props);\n// if (isDragAccept) return borderImageCreator(props.theme.colors.brand[600], 2);\n// if (isDragReject) return borderImageCreator(props.theme.colors.danger[900], 2);\n// return borderImageCreator(props.theme.colors.neutral[400], 2);\n// };\n\nconst borderImage = (color: string) =>\n `url(\"data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${\n DROP_ZONE_CONSTANTS.BORDER_RADIUS\n }' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${\n DROP_ZONE_CONSTANTS.BORDER_WIDTH\n }' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e\")`;\n\ninterface DropzoneStyledProps {\n isDragActive: boolean;\n disabled: boolean;\n hasError: boolean;\n getOwnerProps: () => object;\n getOwnerPropsArguments: () => object;\n}\nexport const StyledDropZoneHolder = styled(Grid, {\n name: DSDropzoneName,\n slot: DROPZONE_SLOTS.WRAPPER_HOLDER,\n})`\n position: relative;\n`;\nexport const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })<DropzoneStyledProps>`\n border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n background-color: ${(props) => props.theme.colors.neutral['000']};\n background-image: ${(props) => {\n if (props.disabled) {\n return borderImage(props.theme.colors.neutral[400]);\n }\n if (props.isDragActive) {\n return borderImage(props.theme.colors.brand[600]);\n }\n if (props.hasError) {\n return borderImage(props.theme.colors.danger[900]);\n }\n return borderImage(props.theme.colors.neutral[400]);\n }};\n padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;\n &:hover {\n background-image: ${(props) => {\n if (props.disabled) {\n return borderImage(props.theme.colors.neutral[400]);\n }\n if (props.isDragActive) {\n return borderImage(props.theme.colors.brand[600]);\n }\n if (props.hasError) {\n return borderImage(props.theme.colors.danger[900]);\n }\n return borderImage(props.theme.colors.brand[600]);\n }};\n }\n cursor: ${(props) => (props.isDragActive ? 'grabbing' : 'default')};\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-system';\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from './constants/index.js';\n\n// const borderImageCreator = (color: any, stroke: number) =>\n// encodeURIComponent(\n// `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"8\" ry=\"8\" stroke=\"${color}\" stroke-width=\"${stroke}\" stroke-dasharray=\"6, 14\" stroke-dashoffset=\"0\" stroke-linecap=\"square\"/></svg>`,\n// );\n\n// const handleBorder = (props: StyledProps<DSDropzoneT.InternalProps>): string => {\n// const { isDragAccept, isDragReject, isFocused } = props;\n// console.log(props);\n// if (isDragAccept) return borderImageCreator(props.theme.colors.brand[600], 2);\n// if (isDragReject) return borderImageCreator(props.theme.colors.danger[900], 2);\n// return borderImageCreator(props.theme.colors.neutral[400], 2);\n// };\n\nconst disabledStyles = css`\n pointer-events: none;\n`;\n\nconst borderImage = (color: string) =>\n `url(\"data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${\n DROP_ZONE_CONSTANTS.BORDER_RADIUS\n }' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${\n DROP_ZONE_CONSTANTS.BORDER_WIDTH\n }' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e\")`;\n\ninterface DropzoneStyledProps {\n isDragActive: boolean;\n disabled: boolean;\n hasError: boolean;\n getOwnerProps: () => object;\n getOwnerPropsArguments: () => object;\n}\nexport const StyledDropZoneHolder = styled(Grid, {\n name: DSDropzoneName,\n slot: DROPZONE_SLOTS.WRAPPER_HOLDER,\n})`\n position: relative;\n ${(props) => props.disabled && 'cursor: not-allowed;'}\n`;\nexport const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })<DropzoneStyledProps>`\n border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n background-color: ${(props) => props.theme.colors.neutral['000']};\n background-image: ${(props) => {\n if (props.disabled) {\n return borderImage(props.theme.colors.neutral[400]);\n }\n if (props.isDragActive) {\n return borderImage(props.theme.colors.brand[600]);\n }\n if (props.hasError) {\n return borderImage(props.theme.colors.danger[900]);\n }\n return borderImage(props.theme.colors.neutral[400]);\n }};\n padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;\n &:hover {\n background-image: ${(props) => {\n if (props.disabled) {\n return borderImage(props.theme.colors.neutral[400]);\n }\n if (props.isDragActive) {\n return borderImage(props.theme.colors.brand[600]);\n }\n if (props.hasError) {\n return borderImage(props.theme.colors.danger[900]);\n }\n return borderImage(props.theme.colors.brand[600]);\n }};\n }\n cursor: ${(props) => (props.isDragActive ? 'grabbing' : 'default')};\n ${(props) => props.disabled && disabledStyles}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,gBAAgB,qBAAqB,sBAAsB;AAepE,MAAM,iBAAiB;AAAA;AAAA;AAIvB,MAAM,cAAc,CAAC,UACnB,gLACE,oBAAoB,sBACb,oBAAoB,0BAA0B,mBAAmB,KAAK,oBAC7E,oBAAoB;AAUjB,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,eAAe;AACvB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU,MAAM,YAAY;AAAA;AAE1B,MAAM,iBAAiB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,eAAe,QAAQ,CAAC;AAAA,mBAC9E,oBAAoB;AAAA,sBACjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,sBAC3C,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AACpD;AAAA,aACW,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,wBAElB,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAClD;AAAA;AAAA,YAEQ,CAAC,UAAW,MAAM,eAAe,aAAa;AAAA,IACtD,CAAC,UAAU,MAAM,YAAY;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dropzone",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.27.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Dropzone",
|
|
6
6
|
"files": [
|
|
@@ -37,21 +37,21 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@xstyled/styled-components": "~3.6.0",
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-button": "3.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button": "3.27.0-next.2",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.27.0-next.2",
|
|
42
|
+
"@elliemae/ds-system": "3.27.0-next.2",
|
|
43
|
+
"@elliemae/ds-typography": "3.27.0-next.2",
|
|
44
|
+
"@elliemae/ds-utilities": "3.27.0-next.2",
|
|
45
|
+
"@elliemae/ds-grid": "3.27.0-next.2",
|
|
46
|
+
"@elliemae/ds-hooks-fontsize-media": "3.27.0-next.2",
|
|
47
|
+
"@elliemae/ds-icons": "3.27.0-next.2"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
51
51
|
"@xstyled/system": "3.7.0",
|
|
52
52
|
"lodash": "^4.17.21",
|
|
53
53
|
"styled-components": "~5.3.9",
|
|
54
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
54
|
+
"@elliemae/ds-monorepo-devops": "3.27.0-next.2"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
57
|
"lodash": "^4.17.21",
|