@cloudscape-design/components 3.0.806 → 3.0.808
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/file-upload/internal.d.ts.map +1 -1
- package/file-upload/internal.js +3 -3
- package/file-upload/internal.js.map +1 -1
- package/internal/components/file-dropzone/index.d.ts +6 -0
- package/internal/components/file-dropzone/index.d.ts.map +1 -0
- package/internal/components/file-dropzone/index.js +33 -0
- package/internal/components/file-dropzone/index.js.map +1 -0
- package/internal/components/file-dropzone/interfaces.d.ts +20 -0
- package/internal/components/file-dropzone/interfaces.d.ts.map +1 -0
- package/internal/components/file-dropzone/interfaces.js +2 -0
- package/internal/components/file-dropzone/interfaces.js.map +1 -0
- package/internal/components/file-dropzone/styles.css.js +8 -0
- package/{file-upload/dropzone → internal/components/file-dropzone}/styles.scoped.css +6 -2
- package/{file-upload/dropzone → internal/components/file-dropzone}/styles.selectors.js +3 -2
- package/internal/components/file-dropzone/use-files-dragging.d.ts +10 -0
- package/internal/components/file-dropzone/use-files-dragging.d.ts.map +1 -0
- package/{file-upload/dropzone/index.js → internal/components/file-dropzone/use-files-dragging.js} +16 -38
- package/internal/components/file-dropzone/use-files-dragging.js.map +1 -0
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/hooks/use-table-interaction-metrics/index.d.ts.map +1 -1
- package/internal/hooks/use-table-interaction-metrics/index.js +15 -8
- package/internal/hooks/use-table-interaction-metrics/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/test-utils/dom/internal/file-dropzone.d.ts +5 -0
- package/test-utils/dom/internal/file-dropzone.js +14 -0
- package/test-utils/dom/internal/file-dropzone.js.map +1 -0
- package/test-utils/selectors/internal/file-dropzone.d.ts +5 -0
- package/test-utils/selectors/internal/file-dropzone.js +14 -0
- package/test-utils/selectors/internal/file-dropzone.js.map +1 -0
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/file-upload/dropzone/index.d.ts +0 -9
- package/file-upload/dropzone/index.d.ts.map +0 -1
- package/file-upload/dropzone/index.js.map +0 -1
- package/file-upload/dropzone/styles.css.js +0 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAQnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AAQ/C,wBAAoD"}
|
package/file-upload/internal.js
CHANGED
|
@@ -8,6 +8,7 @@ import InternalBox from '../box/internal';
|
|
|
8
8
|
import { useFormFieldContext } from '../contexts/form-field';
|
|
9
9
|
import { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';
|
|
10
10
|
import { getBaseProps } from '../internal/base-component';
|
|
11
|
+
import InternalFileDropzone, { useFilesDragging } from '../internal/components/file-dropzone';
|
|
11
12
|
import TokenList from '../internal/components/token-list';
|
|
12
13
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
13
14
|
import checkControlled from '../internal/hooks/check-controlled';
|
|
@@ -17,7 +18,6 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
|
17
18
|
import { joinStrings } from '../internal/utils/strings';
|
|
18
19
|
import InternalSpaceBetween from '../space-between/internal';
|
|
19
20
|
import { Token } from '../token-group/token';
|
|
20
|
-
import { Dropzone, useDropzoneVisible } from './dropzone';
|
|
21
21
|
import FileInput from './file-input';
|
|
22
22
|
import { FileOption } from './file-option';
|
|
23
23
|
import tokenListStyles from '../internal/components/token-list/styles.css.js';
|
|
@@ -58,7 +58,7 @@ function InternalFileUpload(_a, externalRef) {
|
|
|
58
58
|
fireNonCancelableEvent(onChange, { value: newValue });
|
|
59
59
|
setNextFocusIndex(removeFileIndex);
|
|
60
60
|
};
|
|
61
|
-
const
|
|
61
|
+
const { areFilesDragging } = useFilesDragging();
|
|
62
62
|
const showWarning = warningText && !errorText;
|
|
63
63
|
if (warningText && errorText) {
|
|
64
64
|
warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');
|
|
@@ -69,7 +69,7 @@ function InternalFileUpload(_a, externalRef) {
|
|
|
69
69
|
const invalid = restProps.invalid || formFieldContext.invalid || hasError;
|
|
70
70
|
return (React.createElement(InternalSpaceBetween, Object.assign({}, baseProps, { size: "xs", className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, ref: tokenListRef }),
|
|
71
71
|
React.createElement(InternalBox, null,
|
|
72
|
-
|
|
72
|
+
areFilesDragging ? (React.createElement(InternalFileDropzone, { onChange: event => handleFilesChange(event.detail.value) }, i18nStrings.dropzoneText(multiple))) : (React.createElement(FileInput, Object.assign({ ref: ref, accept: accept, ariaRequired: ariaRequired, multiple: multiple, onChange: handleFilesChange, value: value }, restProps, { ariaDescribedby: ariaDescribedBy, invalid: invalid }), i18nStrings.uploadButtonText(multiple))),
|
|
73
73
|
(constraintText || errorText || warningText) && (React.createElement("div", { className: styles.hints },
|
|
74
74
|
errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, errorText)),
|
|
75
75
|
showWarning && (React.createElement(FormFieldWarning, { id: warningId, warningIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningIconAriaLabel }, warningText)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { Token } from '../token-group/token';\nimport { Dropzone, useDropzoneVisible } from './dropzone';\nimport FileInput from './file-input';\nimport { FileOption } from './file-option';\nimport { FileUploadProps } from './interfaces';\n\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport fileInputStyles from './file-input/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n {\n accept,\n ariaRequired,\n multiple = false,\n onChange,\n value,\n tokenLimit,\n showFileSize,\n showFileLastModified,\n showFileThumbnail,\n i18nStrings,\n __internalRootRef = null,\n constraintText,\n errorText,\n warningText,\n fileErrors,\n fileWarnings,\n ...restProps\n }: InternalFileUploadProps,\n externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n const tokenListRef = useListFocusController({\n nextFocusIndex,\n onFocusMoved: target => {\n target.focus();\n setNextFocusIndex(null);\n },\n listItemSelector: `.${tokenListStyles['list-item']}`,\n showMoreSelector: `.${tokenListStyles.toggle}`,\n fallbackSelector: `.${fileInputStyles['upload-input']}`,\n });\n\n const baseProps = getBaseProps(restProps);\n const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n const errorId = useUniqueId('error-');\n const warningId = useUniqueId('warning-');\n const constraintTextId = useUniqueId('constraint-text-');\n\n const fileInputRef = useRef<ButtonProps.Ref>(null);\n const ref = useMergeRefs(fileInputRef, externalRef);\n\n checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n if (!multiple && value.length > 1) {\n warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n }\n\n const handleFilesChange = (newFiles: File[]) => {\n const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles.slice(0, 1) : [...value];\n fireNonCancelableEvent(onChange, { value: newValue });\n };\n\n const onFileRemove = (removeFileIndex: number) => {\n const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n fireNonCancelableEvent(onChange, { value: newValue });\n setNextFocusIndex(removeFileIndex);\n };\n\n const isDropzoneVisible = useDropzoneVisible(multiple);\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const formFieldContext = useFormFieldContext(restProps);\n const ariaDescribedBy = joinStrings(\n restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n errorText ? errorId : undefined,\n showWarning ? warningId : undefined,\n constraintText ? constraintTextId : undefined\n );\n\n const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n return (\n <InternalSpaceBetween\n {...baseProps}\n size=\"xs\"\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n ref={tokenListRef}\n >\n <InternalBox>\n {isDropzoneVisible ? (\n <Dropzone onChange={handleFilesChange}>{i18nStrings.dropzoneText(multiple)}</Dropzone>\n ) : (\n <FileInput\n ref={ref}\n accept={accept}\n ariaRequired={ariaRequired}\n multiple={multiple}\n onChange={handleFilesChange}\n value={value}\n {...restProps}\n ariaDescribedby={ariaDescribedBy}\n invalid={invalid}\n >\n {i18nStrings.uploadButtonText(multiple)}\n </FileInput>\n )}\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </InternalBox>\n\n {!multiple && value.length > 0 ? (\n <InternalBox>\n <Token\n ariaLabel={value[0].name}\n dismissLabel={i18nStrings.removeFileAriaLabel(0)}\n onDismiss={() => onFileRemove(0)}\n errorText={fileErrors?.[0]}\n warningText={fileWarnings?.[0]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={0}\n >\n <FileOption file={value[0]} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n </InternalBox>\n ) : null}\n\n {multiple && value.length > 0 ? (\n <InternalBox>\n <TokenList\n alignment=\"vertical\"\n items={value}\n renderItem={(file, fileIndex) => (\n <Token\n ariaLabel={file.name}\n dismissLabel={i18nStrings.removeFileAriaLabel(fileIndex)}\n onDismiss={() => onFileRemove(fileIndex)}\n errorText={fileErrors?.[fileIndex]}\n warningText={fileWarnings?.[fileIndex]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={fileIndex}\n >\n <FileOption file={file} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n )}\n limit={tokenLimit}\n i18nStrings={{\n limitShowFewer: i18nStrings.limitShowFewer,\n limitShowMore: i18nStrings.limitShowMore,\n }}\n />\n </InternalBox>\n ) : null}\n </InternalSpaceBetween>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalFileDropzone, { useFilesDragging } from '../internal/components/file-dropzone';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { Token } from '../token-group/token';\nimport FileInput from './file-input';\nimport { FileOption } from './file-option';\nimport { FileUploadProps } from './interfaces';\n\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport fileInputStyles from './file-input/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n {\n accept,\n ariaRequired,\n multiple = false,\n onChange,\n value,\n tokenLimit,\n showFileSize,\n showFileLastModified,\n showFileThumbnail,\n i18nStrings,\n __internalRootRef = null,\n constraintText,\n errorText,\n warningText,\n fileErrors,\n fileWarnings,\n ...restProps\n }: InternalFileUploadProps,\n externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n const tokenListRef = useListFocusController({\n nextFocusIndex,\n onFocusMoved: target => {\n target.focus();\n setNextFocusIndex(null);\n },\n listItemSelector: `.${tokenListStyles['list-item']}`,\n showMoreSelector: `.${tokenListStyles.toggle}`,\n fallbackSelector: `.${fileInputStyles['upload-input']}`,\n });\n\n const baseProps = getBaseProps(restProps);\n const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n const errorId = useUniqueId('error-');\n const warningId = useUniqueId('warning-');\n const constraintTextId = useUniqueId('constraint-text-');\n\n const fileInputRef = useRef<ButtonProps.Ref>(null);\n const ref = useMergeRefs(fileInputRef, externalRef);\n\n checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n if (!multiple && value.length > 1) {\n warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n }\n\n const handleFilesChange = (newFiles: File[]) => {\n const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles.slice(0, 1) : [...value];\n fireNonCancelableEvent(onChange, { value: newValue });\n };\n\n const onFileRemove = (removeFileIndex: number) => {\n const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n fireNonCancelableEvent(onChange, { value: newValue });\n setNextFocusIndex(removeFileIndex);\n };\n\n const { areFilesDragging } = useFilesDragging();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const formFieldContext = useFormFieldContext(restProps);\n const ariaDescribedBy = joinStrings(\n restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n errorText ? errorId : undefined,\n showWarning ? warningId : undefined,\n constraintText ? constraintTextId : undefined\n );\n\n const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n return (\n <InternalSpaceBetween\n {...baseProps}\n size=\"xs\"\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n ref={tokenListRef}\n >\n <InternalBox>\n {areFilesDragging ? (\n <InternalFileDropzone onChange={event => handleFilesChange(event.detail.value)}>\n {i18nStrings.dropzoneText(multiple)}\n </InternalFileDropzone>\n ) : (\n <FileInput\n ref={ref}\n accept={accept}\n ariaRequired={ariaRequired}\n multiple={multiple}\n onChange={handleFilesChange}\n value={value}\n {...restProps}\n ariaDescribedby={ariaDescribedBy}\n invalid={invalid}\n >\n {i18nStrings.uploadButtonText(multiple)}\n </FileInput>\n )}\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </InternalBox>\n\n {!multiple && value.length > 0 ? (\n <InternalBox>\n <Token\n ariaLabel={value[0].name}\n dismissLabel={i18nStrings.removeFileAriaLabel(0)}\n onDismiss={() => onFileRemove(0)}\n errorText={fileErrors?.[0]}\n warningText={fileWarnings?.[0]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={0}\n >\n <FileOption file={value[0]} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n </InternalBox>\n ) : null}\n\n {multiple && value.length > 0 ? (\n <InternalBox>\n <TokenList\n alignment=\"vertical\"\n items={value}\n renderItem={(file, fileIndex) => (\n <Token\n ariaLabel={file.name}\n dismissLabel={i18nStrings.removeFileAriaLabel(fileIndex)}\n onDismiss={() => onFileRemove(fileIndex)}\n errorText={fileErrors?.[fileIndex]}\n warningText={fileWarnings?.[fileIndex]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={fileIndex}\n >\n <FileOption file={file} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n )}\n limit={tokenLimit}\n i18nStrings={{\n limitShowFewer: i18nStrings.limitShowFewer,\n limitShowMore: i18nStrings.limitShowMore,\n }}\n />\n </InternalBox>\n ) : null}\n </InternalSpaceBetween>\n );\n}\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FileDropzoneProps } from './interfaces';
|
|
3
|
+
import { useFilesDragging } from './use-files-dragging';
|
|
4
|
+
export { FileDropzoneProps, useFilesDragging };
|
|
5
|
+
export default function InternalFileDropzone({ onChange, children }: FileDropzoneProps): JSX.Element;
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/file-dropzone/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIxD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAqCrF"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { fireNonCancelableEvent } from '../../events';
|
|
6
|
+
import { useFilesDragging } from './use-files-dragging';
|
|
7
|
+
import styles from './styles.css.js';
|
|
8
|
+
export { useFilesDragging };
|
|
9
|
+
export default function InternalFileDropzone({ onChange, children }) {
|
|
10
|
+
const [isDropzoneHovered, setDropzoneHovered] = useState(false);
|
|
11
|
+
const onDragOver = (event) => {
|
|
12
|
+
event.preventDefault();
|
|
13
|
+
if (event.dataTransfer) {
|
|
14
|
+
setDropzoneHovered(true);
|
|
15
|
+
event.dataTransfer.dropEffect = 'copy';
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
const onDragLeave = (event) => {
|
|
19
|
+
event.preventDefault();
|
|
20
|
+
setDropzoneHovered(false);
|
|
21
|
+
if (event.dataTransfer) {
|
|
22
|
+
event.dataTransfer.dropEffect = 'none';
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
const onDrop = (event) => {
|
|
26
|
+
event.preventDefault();
|
|
27
|
+
setDropzoneHovered(false);
|
|
28
|
+
fireNonCancelableEvent(onChange, { value: Array.from(event.dataTransfer.files) });
|
|
29
|
+
};
|
|
30
|
+
return (React.createElement("div", { className: clsx(styles.root, isDropzoneHovered && styles.hovered), onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop },
|
|
31
|
+
React.createElement("div", { className: styles.content }, children)));
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/file-dropzone/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAqB,gBAAgB,EAAE,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAqB;IACpF,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;QAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,KAAK,CAAC,YAAY,EAAE;YACtB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;SACxC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAsB,EAAE,EAAE;QAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,KAAK,CAAC,YAAY,EAAE;YACtB,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;SACxC;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,KAAsB,EAAE,EAAE;QACxC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAE1B,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACpF,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC,OAAO,CAAC,EACjE,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM;QAEd,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport { FileDropzoneProps } from './interfaces';\nimport { useFilesDragging } from './use-files-dragging';\n\nimport styles from './styles.css.js';\n\nexport { FileDropzoneProps, useFilesDragging };\n\nexport default function InternalFileDropzone({ onChange, children }: FileDropzoneProps) {\n const [isDropzoneHovered, setDropzoneHovered] = useState(false);\n\n const onDragOver = (event: React.DragEvent) => {\n event.preventDefault();\n\n if (event.dataTransfer) {\n setDropzoneHovered(true);\n event.dataTransfer.dropEffect = 'copy';\n }\n };\n\n const onDragLeave = (event: React.DragEvent) => {\n event.preventDefault();\n setDropzoneHovered(false);\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = 'none';\n }\n };\n\n const onDrop = (event: React.DragEvent) => {\n event.preventDefault();\n setDropzoneHovered(false);\n\n fireNonCancelableEvent(onChange, { value: Array.from(event.dataTransfer.files) });\n };\n\n return (\n <div\n className={clsx(styles.root, isDropzoneHovered && styles.hovered)}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n onDrop={onDrop}\n >\n <div className={styles.content}>{children}</div>\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BaseComponentProps } from '../../base-component';
|
|
3
|
+
import { NonCancelableEventHandler } from '../../events';
|
|
4
|
+
export interface FileDropzoneProps extends BaseComponentProps {
|
|
5
|
+
/**
|
|
6
|
+
* Called when the user selects new file(s), or removes a file.
|
|
7
|
+
* The event `detail` contains the current value of the component.
|
|
8
|
+
*/
|
|
9
|
+
onChange: NonCancelableEventHandler<FileDropzoneProps.ChangeDetail>;
|
|
10
|
+
/**
|
|
11
|
+
* Children of the Dropzone.
|
|
12
|
+
*/
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
export declare namespace FileDropzoneProps {
|
|
16
|
+
interface ChangeDetail {
|
|
17
|
+
value: File[];
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/file-dropzone/interfaces.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D;;;OAGG;IACH,QAAQ,EAAE,yBAAyB,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACpE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,yBAAiB,iBAAiB,CAAC;IACjC,UAAiB,YAAY;QAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;KACf;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/file-dropzone/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../../base-component';\nimport { NonCancelableEventHandler } from '../../events';\n\nexport interface FileDropzoneProps extends BaseComponentProps {\n /**\n * Called when the user selects new file(s), or removes a file.\n * The event `detail` contains the current value of the component.\n */\n onChange: NonCancelableEventHandler<FileDropzoneProps.ChangeDetail>;\n /**\n * Children of the Dropzone.\n */\n children: React.ReactNode;\n}\n\nexport namespace FileDropzoneProps {\n export interface ChangeDetail {\n value: File[];\n }\n}\n"]}
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
*/
|
|
175
175
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
176
176
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
177
|
-
.
|
|
177
|
+
.awsui_root_1tk3k_uajxe_177:not(#\9) {
|
|
178
178
|
display: flex;
|
|
179
179
|
flex-direction: column;
|
|
180
180
|
align-items: center;
|
|
@@ -190,7 +190,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
190
190
|
background-color: var(--color-dropzone-background-active-xjesd4, #ebebf0);
|
|
191
191
|
font-weight: 700;
|
|
192
192
|
}
|
|
193
|
-
.
|
|
193
|
+
.awsui_root_1tk3k_uajxe_177.awsui_hovered_1tk3k_uajxe_193:not(#\9) {
|
|
194
194
|
color: var(--color-dropzone-text-hover-xjyyuz, #002b66);
|
|
195
195
|
background-color: var(--color-dropzone-background-hover-elxayo, #d1f1ff);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.awsui_content_1tk3k_uajxe_198:not(#\9) {
|
|
199
|
+
/* used in test-utils */
|
|
196
200
|
}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
5
|
+
"root": "awsui_root_1tk3k_uajxe_177",
|
|
6
|
+
"hovered": "awsui_hovered_1tk3k_uajxe_193",
|
|
7
|
+
"content": "awsui_content_1tk3k_uajxe_198"
|
|
7
8
|
};
|
|
8
9
|
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A utility to determine whether or not a file is being currently dragged into the window.
|
|
3
|
+
*
|
|
4
|
+
* @returns An object with the following arguments:
|
|
5
|
+
* `areFilesDragging`: True if a file is being dragged over the current window, false otherwise.
|
|
6
|
+
*/
|
|
7
|
+
export declare function useFilesDragging(): {
|
|
8
|
+
areFilesDragging: boolean;
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=use-files-dragging.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-files-dragging.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/file-dropzone/use-files-dragging.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,wBAAgB,gBAAgB;;EAoD/B"}
|
package/{file-upload/dropzone/index.js → internal/components/file-dropzone/use-files-dragging.js}
RENAMED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* A utility to determine whether or not a file is being currently dragged into the window.
|
|
6
|
+
*
|
|
7
|
+
* @returns An object with the following arguments:
|
|
8
|
+
* `areFilesDragging`: True if a file is being dragged over the current window, false otherwise.
|
|
9
|
+
*/
|
|
10
|
+
export function useFilesDragging() {
|
|
11
|
+
const [areFilesDragging, setFilesDragging] = useState(false);
|
|
9
12
|
// Registering global drag events listeners.
|
|
10
13
|
useEffect(() => {
|
|
11
14
|
// The timer helps avoiding dropzone blinking.
|
|
@@ -20,20 +23,20 @@ export function useDropzoneVisible(multiple) {
|
|
|
20
23
|
files++;
|
|
21
24
|
}
|
|
22
25
|
}
|
|
23
|
-
if (files > 0
|
|
24
|
-
|
|
26
|
+
if (files > 0) {
|
|
27
|
+
setFilesDragging(true);
|
|
25
28
|
dragTimer && clearTimeout(dragTimer);
|
|
26
29
|
}
|
|
27
30
|
};
|
|
28
31
|
// When the files are no longer dragged over the browser the state must be reset.
|
|
29
32
|
const onDocumentDragLeave = (event) => {
|
|
30
33
|
event.preventDefault();
|
|
31
|
-
dragTimer = setTimeout(() =>
|
|
34
|
+
dragTimer = setTimeout(() => setFilesDragging(false), 25);
|
|
32
35
|
};
|
|
33
36
|
// If the files were dropped the state must be reset.
|
|
34
37
|
const onDocumentDrop = (event) => {
|
|
35
38
|
event.preventDefault();
|
|
36
|
-
dragTimer = setTimeout(() =>
|
|
39
|
+
dragTimer = setTimeout(() => setFilesDragging(false), 25);
|
|
37
40
|
};
|
|
38
41
|
document.addEventListener('dragover', onDocumentDragOver, false);
|
|
39
42
|
document.addEventListener('dragleave', onDocumentDragLeave, false);
|
|
@@ -44,32 +47,7 @@ export function useDropzoneVisible(multiple) {
|
|
|
44
47
|
document.removeEventListener('dragleave', onDocumentDragLeave);
|
|
45
48
|
document.removeEventListener('drop', onDocumentDrop);
|
|
46
49
|
};
|
|
47
|
-
}, [
|
|
48
|
-
return
|
|
50
|
+
}, []);
|
|
51
|
+
return { areFilesDragging };
|
|
49
52
|
}
|
|
50
|
-
|
|
51
|
-
const [isDropzoneHovered, setDropzoneHovered] = useState(false);
|
|
52
|
-
const onDragOver = (event) => {
|
|
53
|
-
event.preventDefault();
|
|
54
|
-
if (event.dataTransfer) {
|
|
55
|
-
setDropzoneHovered(true);
|
|
56
|
-
event.dataTransfer.dropEffect = 'copy';
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
const onDragLeave = (event) => {
|
|
60
|
-
event.preventDefault();
|
|
61
|
-
setDropzoneHovered(false);
|
|
62
|
-
if (event.dataTransfer) {
|
|
63
|
-
event.dataTransfer.dropEffect = 'none';
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
const onDrop = (event) => {
|
|
67
|
-
event.preventDefault();
|
|
68
|
-
setDropzoneHovered(false);
|
|
69
|
-
onChange(Array.from(event.dataTransfer.files));
|
|
70
|
-
};
|
|
71
|
-
return (React.createElement("div", { className: clsx(styles.dropzone, isDropzoneHovered && styles['dropzone-hovered']), onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop },
|
|
72
|
-
React.createElement(InternalIcon, { name: "upload" }),
|
|
73
|
-
React.createElement("span", null, children)));
|
|
74
|
-
}
|
|
75
|
-
//# sourceMappingURL=index.js.map
|
|
53
|
+
//# sourceMappingURL=use-files-dragging.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-files-dragging.js","sourceRoot":"","sources":["../../../../../src/internal/components/file-dropzone/use-files-dragging.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE7D,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,8CAA8C;QAC9C,IAAI,SAAS,GAAyC,IAAI,CAAC;QAE3D,mFAAmF;QACnF,MAAM,kBAAkB,GAAG,CAAC,KAAgB,EAAE,EAAE;;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,CAAC,MAAM,KAAI,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;gBACzE,IAAI,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,CAAC,IAAI,CAAC,MAAK,OAAO,EAAE;oBAC/C,KAAK,EAAE,CAAC;iBACT;aACF;YAED,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACvB,SAAS,IAAI,YAAY,CAAC,SAAS,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;QAEF,iFAAiF;QACjF,MAAM,mBAAmB,GAAG,CAAC,KAAgB,EAAE,EAAE;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEF,qDAAqD;QACrD,MAAM,cAAc,GAAG,CAAC,KAAgB,EAAE,EAAE;YAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACjE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACnE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;QAEzD,OAAO,GAAG,EAAE;YACV,SAAS,IAAI,YAAY,CAAC,SAAS,CAAC,CAAC;YACrC,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;YAC7D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAC;YAC/D,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC9B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\n\n/**\n * A utility to determine whether or not a file is being currently dragged into the window.\n *\n * @returns An object with the following arguments:\n * `areFilesDragging`: True if a file is being dragged over the current window, false otherwise.\n */\nexport function useFilesDragging() {\n const [areFilesDragging, setFilesDragging] = useState(false);\n\n // Registering global drag events listeners.\n useEffect(() => {\n // The timer helps avoiding dropzone blinking.\n let dragTimer: null | ReturnType<typeof setTimeout> = null;\n\n // The file-upload dropzone is shown when the user drags files over to the browser.\n const onDocumentDragOver = (event: DragEvent) => {\n event.preventDefault();\n\n let files = 0;\n for (let item = 0; item < (event.dataTransfer?.types.length || 0); item++) {\n if (event.dataTransfer?.types[item] === 'Files') {\n files++;\n }\n }\n\n if (files > 0) {\n setFilesDragging(true);\n dragTimer && clearTimeout(dragTimer);\n }\n };\n\n // When the files are no longer dragged over the browser the state must be reset.\n const onDocumentDragLeave = (event: DragEvent) => {\n event.preventDefault();\n\n dragTimer = setTimeout(() => setFilesDragging(false), 25);\n };\n\n // If the files were dropped the state must be reset.\n const onDocumentDrop = (event: DragEvent) => {\n event.preventDefault();\n\n dragTimer = setTimeout(() => setFilesDragging(false), 25);\n };\n\n document.addEventListener('dragover', onDocumentDragOver, false);\n document.addEventListener('dragleave', onDocumentDragLeave, false);\n document.addEventListener('drop', onDocumentDrop, false);\n\n return () => {\n dragTimer && clearTimeout(dragTimer);\n document.removeEventListener('dragover', onDocumentDragOver);\n document.removeEventListener('dragleave', onDocumentDragLeave);\n document.removeEventListener('drop', onDocumentDrop);\n };\n }, []);\n\n return { areFilesDragging };\n}\n"]}
|
package/internal/environment.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-table-interaction-metrics/index.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-table-interaction-metrics/index.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAWxD,MAAM,WAAW,+BAA+B;IAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjD,yBAAyB,EAAE,MAAM,UAAU,CAAC;IAC5C,mBAAmB,EAAE,MAAM,MAAM,CAAC;CACnC;AAED,wBAAgB,0BAA0B,CAAC,EACzC,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,sBAAsB,EACtB,yBAAyB,EACzB,OAAe,EACf,mBAAmB,GACpB,EAAE,+BAA+B;;;;8BAkEJ,MAAM;EAEnC"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { useEffect, useRef } from 'react';
|
|
4
4
|
import { ComponentMetrics, PerformanceMetrics } from '../../analytics';
|
|
5
|
+
import { useFunnel } from '../../analytics/hooks/use-funnel';
|
|
5
6
|
import { useDOMAttribute } from '../use-dom-attribute';
|
|
6
7
|
import { useEffectOnUpdate } from '../use-effect-on-update';
|
|
7
8
|
import { useRandomId } from '../use-unique-id';
|
|
@@ -13,18 +14,22 @@ const USER_ACTION_TIME_LIMIT = 1000;
|
|
|
13
14
|
export function useTableInteractionMetrics({ elementRef, itemCount, instanceIdentifier, getComponentIdentifier, getComponentConfiguration, loading = false, interactionMetadata, }) {
|
|
14
15
|
const taskInteractionId = useRandomId();
|
|
15
16
|
const tableInteractionAttributes = useDOMAttribute(elementRef, 'data-analytics-task-interaction-id', taskInteractionId);
|
|
17
|
+
const { isInFunnel } = useFunnel();
|
|
16
18
|
const lastUserAction = useRef(null);
|
|
17
19
|
const capturedUserAction = useRef(null);
|
|
18
20
|
const loadingStartTime = useRef(null);
|
|
19
21
|
const metadata = useRef({ itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata });
|
|
20
22
|
metadata.current = { itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata };
|
|
21
23
|
useEffect(() => {
|
|
24
|
+
if (isInFunnel) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
22
27
|
ComponentMetrics.componentMounted({
|
|
23
28
|
taskInteractionId,
|
|
24
29
|
componentName: 'table',
|
|
25
30
|
componentConfiguration: metadata.current.getComponentConfiguration(),
|
|
26
31
|
});
|
|
27
|
-
}, [taskInteractionId]);
|
|
32
|
+
}, [taskInteractionId, isInFunnel]);
|
|
28
33
|
useEffect(() => {
|
|
29
34
|
if (loading) {
|
|
30
35
|
loadingStartTime.current = performance.now();
|
|
@@ -49,14 +54,16 @@ export function useTableInteractionMetrics({ elementRef, itemCount, instanceIden
|
|
|
49
54
|
instanceIdentifier,
|
|
50
55
|
noOfResourcesInTable: metadata.current.itemCount,
|
|
51
56
|
});
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
if (!isInFunnel) {
|
|
58
|
+
ComponentMetrics.componentUpdated({
|
|
59
|
+
taskInteractionId,
|
|
60
|
+
componentName: 'table',
|
|
61
|
+
actionType: (_b = capturedUserAction.current) !== null && _b !== void 0 ? _b : '',
|
|
62
|
+
componentConfiguration: metadata.current.getComponentConfiguration(),
|
|
63
|
+
});
|
|
64
|
+
}
|
|
58
65
|
}
|
|
59
|
-
}, [instanceIdentifier, loading, taskInteractionId]);
|
|
66
|
+
}, [instanceIdentifier, loading, taskInteractionId, isInFunnel]);
|
|
60
67
|
return {
|
|
61
68
|
tableInteractionAttributes,
|
|
62
69
|
setLastUserAction: (name) => void (lastUserAction.current = { name, time: performance.now() }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-table-interaction-metrics/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-table-interaction-metrics/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useRef } from 'react';\n\nimport { ComponentMetrics, PerformanceMetrics } from '../../analytics';\nimport { useFunnel } from '../../analytics/hooks/use-funnel';\nimport { JSONObject } from '../../analytics/interfaces';\nimport { useDOMAttribute } from '../use-dom-attribute';\nimport { useEffectOnUpdate } from '../use-effect-on-update';\nimport { useRandomId } from '../use-unique-id';\n\n/*\nIf the last user interaction is more than this time ago, it is not considered\nto be the cause of the current loading state.\n*/\nconst USER_ACTION_TIME_LIMIT = 1_000;\n\nexport interface UseTableInteractionMetricsProps {\n elementRef: React.RefObject<HTMLElement>;\n instanceIdentifier: string | undefined;\n loading: boolean | undefined;\n itemCount: number;\n getComponentIdentifier: () => string | undefined;\n getComponentConfiguration: () => JSONObject;\n interactionMetadata: () => string;\n}\n\nexport function useTableInteractionMetrics({\n elementRef,\n itemCount,\n instanceIdentifier,\n getComponentIdentifier,\n getComponentConfiguration,\n loading = false,\n interactionMetadata,\n}: UseTableInteractionMetricsProps) {\n const taskInteractionId = useRandomId();\n const tableInteractionAttributes = useDOMAttribute(\n elementRef,\n 'data-analytics-task-interaction-id',\n taskInteractionId\n );\n const { isInFunnel } = useFunnel();\n const lastUserAction = useRef<{ name: string; time: number } | null>(null);\n const capturedUserAction = useRef<string | null>(null);\n const loadingStartTime = useRef<number | null>(null);\n\n const metadata = useRef({ itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata });\n metadata.current = { itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata };\n\n useEffect(() => {\n if (isInFunnel) {\n return;\n }\n\n ComponentMetrics.componentMounted({\n taskInteractionId,\n componentName: 'table',\n componentConfiguration: metadata.current.getComponentConfiguration(),\n });\n }, [taskInteractionId, isInFunnel]);\n\n useEffect(() => {\n if (loading) {\n loadingStartTime.current = performance.now();\n\n if (lastUserAction.current && lastUserAction.current.time > performance.now() - USER_ACTION_TIME_LIMIT) {\n capturedUserAction.current = lastUserAction.current.name;\n } else {\n capturedUserAction.current = null;\n }\n }\n }, [loading]);\n\n useEffectOnUpdate(() => {\n if (!loading && loadingStartTime.current !== null) {\n const loadingDuration = performance.now() - loadingStartTime.current;\n loadingStartTime.current = null;\n\n PerformanceMetrics.tableInteraction({\n userAction: capturedUserAction.current ?? '',\n interactionTime: Math.round(loadingDuration),\n interactionMetadata: metadata.current.interactionMetadata(),\n componentIdentifier: metadata.current.getComponentIdentifier(),\n instanceIdentifier,\n noOfResourcesInTable: metadata.current.itemCount,\n });\n\n if (!isInFunnel) {\n ComponentMetrics.componentUpdated({\n taskInteractionId,\n componentName: 'table',\n actionType: capturedUserAction.current ?? '',\n componentConfiguration: metadata.current.getComponentConfiguration(),\n });\n }\n }\n }, [instanceIdentifier, loading, taskInteractionId, isInFunnel]);\n\n return {\n tableInteractionAttributes,\n setLastUserAction: (name: string) => void (lastUserAction.current = { name, time: performance.now() }),\n };\n}\n"]}
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
4
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
const dom_1 = require("@cloudscape-design/test-utils-core/dom");
|
|
6
|
+
const styles_selectors_js_1 = require("../../../internal/components/file-dropzone/styles.selectors.js");
|
|
7
|
+
class FileDropzoneWrapper extends dom_1.ComponentWrapper {
|
|
8
|
+
findContent() {
|
|
9
|
+
return this.findByClassName(styles_selectors_js_1.default.content);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
exports.default = FileDropzoneWrapper;
|
|
13
|
+
FileDropzoneWrapper.rootSelector = styles_selectors_js_1.default.root;
|
|
14
|
+
//# sourceMappingURL=file-dropzone.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"file-dropzone.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/internal/file-dropzone.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0F;AAE1F,wGAAoF;AAEpF,MAAqB,mBAAoB,SAAQ,sBAAgB;IAG/D,WAAW;QACT,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,OAAO,CAAE,CAAC;IAC/C,CAAC;;AALH,sCAMC;AALQ,gCAAY,GAAW,6BAAM,CAAC,IAAI,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
4
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
const selectors_1 = require("@cloudscape-design/test-utils-core/selectors");
|
|
6
|
+
const styles_selectors_js_1 = require("../../../internal/components/file-dropzone/styles.selectors.js");
|
|
7
|
+
class FileDropzoneWrapper extends selectors_1.ComponentWrapper {
|
|
8
|
+
findContent() {
|
|
9
|
+
return this.findByClassName(styles_selectors_js_1.default.content);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
exports.default = FileDropzoneWrapper;
|
|
13
|
+
FileDropzoneWrapper.rootSelector = styles_selectors_js_1.default.root;
|
|
14
|
+
//# sourceMappingURL=file-dropzone.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"file-dropzone.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/internal/file-dropzone.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,wGAAoF;AACpF,MAAqB,mBAAoB,SAAQ,4BAAgB;IAE/D,WAAW;QACT,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,OAAO,CAAE,CAAC;IAC/C,CAAC;;AAJH,sCAKC;AAJQ,gCAAY,GAAW,6BAAM,CAAC,IAAI,CAAC"}
|