@cloudscape-design/components 3.0.792 → 3.0.793
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/collection-preferences/content-display/index.d.ts.map +1 -1
- package/collection-preferences/content-display/index.js +15 -8
- package/collection-preferences/content-display/index.js.map +1 -1
- package/collection-preferences/content-display/utils.d.ts +2 -2
- package/collection-preferences/content-display/utils.d.ts.map +1 -1
- package/collection-preferences/content-display/utils.js +13 -4
- package/collection-preferences/content-display/utils.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAa3D,UAAU,6BAA8B,SAAQ,0BAA0B,CAAC,wBAAwB;IACjG,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CACtE;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAGG,EACH,QAAQ,EACR,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,qBAA6B,EAC7B,WAAW,GACZ,EAAE,6BAA6B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAa3D,UAAU,6BAA8B,SAAQ,0BAA0B,CAAC,wBAAwB;IACjG,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CACtE;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAGG,EACH,QAAQ,EACR,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,qBAA6B,EAC7B,WAAW,GACZ,EAAE,6BAA6B,eA2L/B"}
|
|
@@ -26,12 +26,18 @@ export default function ContentDisplayPreference({ title, description, options,
|
|
|
26
26
|
const idPrefix = useUniqueId(componentPrefix);
|
|
27
27
|
const i18n = useInternalI18n('collection-preferences');
|
|
28
28
|
const [columnFilteringText, setColumnFilteringText] = useState('');
|
|
29
|
-
const onToggle = (option) => {
|
|
30
|
-
onChange(value.map(item => (item.id === option.id ? Object.assign(Object.assign({}, item), { visible: !option.visible }) : item)));
|
|
31
|
-
};
|
|
32
29
|
const titleId = `${idPrefix}-title`;
|
|
33
30
|
const descriptionId = `${idPrefix}-description`;
|
|
34
|
-
const sortedAndFilteredOptions = useMemo(() =>
|
|
31
|
+
const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {
|
|
32
|
+
const sorted = getSortedOptions({ options, contentDisplay: value });
|
|
33
|
+
const filtered = getFilteredOptions(sorted, columnFilteringText);
|
|
34
|
+
return [sorted, filtered];
|
|
35
|
+
}, [columnFilteringText, options, value]);
|
|
36
|
+
const onToggle = (option) => {
|
|
37
|
+
// We use sortedOptions as base and not value because there might be options that
|
|
38
|
+
// are not in the value yet, so they're added as non-visible after the known ones.
|
|
39
|
+
onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));
|
|
40
|
+
};
|
|
35
41
|
const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({
|
|
36
42
|
sortedOptions: sortedAndFilteredOptions,
|
|
37
43
|
});
|
|
@@ -42,7 +48,7 @@ export default function ContentDisplayPreference({ title, description, options,
|
|
|
42
48
|
liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, format => (initialPosition, currentPosition, total) => format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })),
|
|
43
49
|
liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', liveAnnouncementDndItemCommitted, format => (initialPosition, finalPosition, total) => format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })),
|
|
44
50
|
liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', liveAnnouncementDndDiscarded),
|
|
45
|
-
sortedOptions:
|
|
51
|
+
sortedOptions: sortedAndFilteredOptions,
|
|
46
52
|
});
|
|
47
53
|
const renderedDragHandleAriaDescription = i18n('contentDisplayPreference.dragHandleAriaDescription', dragHandleAriaDescription);
|
|
48
54
|
return (React.createElement("div", Object.assign({ className: styles[componentPrefix] }, getAnalyticsInnerContextAttribute('contentDisplay')),
|
|
@@ -66,9 +72,10 @@ export default function ContentDisplayPreference({ title, description, options,
|
|
|
66
72
|
setActiveItem(null);
|
|
67
73
|
const { active, over } = event;
|
|
68
74
|
if (over && active.id !== over.id) {
|
|
69
|
-
const oldIndex =
|
|
70
|
-
const newIndex =
|
|
71
|
-
|
|
75
|
+
const oldIndex = sortedOptions.findIndex(({ id }) => id === active.id);
|
|
76
|
+
const newIndex = sortedOptions.findIndex(({ id }) => id === over.id);
|
|
77
|
+
// We need to remember to trim the options down to id and visible to emit changes.
|
|
78
|
+
onChange(arrayMove([...sortedOptions], oldIndex, newIndex).map(({ id, visible }) => ({ id, visible })));
|
|
72
79
|
}
|
|
73
80
|
}, onDragCancel: () => setActiveItem(null) },
|
|
74
81
|
React.createElement("ul", { className: getClassName('option-list'), "aria-describedby": descriptionId, "aria-labelledby": titleId, role: "list" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.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\nimport React, { useMemo, useState } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport Portal from '../../internal/components/portal';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalTextFilter from '../../text-filter/internal';\nimport { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport ContentDisplayOption from './content-display-option';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\nimport { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n title,\n description,\n options,\n value = options.map(({ id }) => ({\n id,\n visible: true,\n })),\n onChange,\n liveAnnouncementDndStarted,\n liveAnnouncementDndItemReordered,\n liveAnnouncementDndItemCommitted,\n liveAnnouncementDndDiscarded,\n dragHandleAriaDescription,\n dragHandleAriaLabel,\n enableColumnFiltering = false,\n i18nStrings,\n}: ContentDisplayPreferenceProps) {\n const idPrefix = useUniqueId(componentPrefix);\n const i18n = useInternalI18n('collection-preferences');\n const [columnFilteringText, setColumnFilteringText] = useState('');\n\n const onToggle = (option: OptionWithVisibility) => {\n onChange(value.map(item => (item.id === option.id ? { ...item, visible: !option.visible } : item)));\n };\n\n const titleId = `${idPrefix}-title`;\n const descriptionId = `${idPrefix}-description`;\n\n const sortedAndFilteredOptions = useMemo(\n () => getFilteredOptions(getSortedOptions({ options, contentDisplay: value }), columnFilteringText),\n [columnFilteringText, options, value]\n );\n\n const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n sortedOptions: sortedAndFilteredOptions,\n });\n\n const activeOption = activeItem ? sortedAndFilteredOptions.find(({ id }) => id === activeItem) : null;\n\n const announcements = useLiveAnnouncements({\n isDragging: activeItem !== null,\n liveAnnouncementDndStarted: i18n(\n 'contentDisplayPreference.liveAnnouncementDndStarted',\n liveAnnouncementDndStarted,\n format => (position, total) => format({ position, total })\n ),\n liveAnnouncementDndItemReordered: i18n(\n 'contentDisplayPreference.liveAnnouncementDndItemReordered',\n liveAnnouncementDndItemReordered,\n format => (initialPosition, currentPosition, total) =>\n format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n ),\n liveAnnouncementDndItemCommitted: i18n(\n 'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n liveAnnouncementDndItemCommitted,\n format => (initialPosition, finalPosition, total) =>\n format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })\n ),\n liveAnnouncementDndDiscarded: i18n(\n 'contentDisplayPreference.liveAnnouncementDndDiscarded',\n liveAnnouncementDndDiscarded\n ),\n sortedOptions: value,\n });\n\n const renderedDragHandleAriaDescription = i18n(\n 'contentDisplayPreference.dragHandleAriaDescription',\n dragHandleAriaDescription\n );\n\n return (\n <div className={styles[componentPrefix]} {...getAnalyticsInnerContextAttribute('contentDisplay')}>\n <h3 className={getClassName('title')} id={titleId}>\n {i18n('contentDisplayPreference.title', title)}\n </h3>\n <p className={getClassName('description')} id={descriptionId}>\n {i18n('contentDisplayPreference.description', description)}\n </p>\n\n {/* Filter input */}\n {enableColumnFiltering && (\n <div className={getClassName('text-filter')}>\n <InternalTextFilter\n filteringText={columnFilteringText}\n filteringPlaceholder={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringPlaceholder',\n i18nStrings?.columnFilteringPlaceholder\n )}\n filteringAriaLabel={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringAriaLabel',\n i18nStrings?.columnFilteringAriaLabel\n )}\n filteringClearAriaLabel={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n i18nStrings?.columnFilteringClearFilterText\n )}\n onChange={({ detail }) => setColumnFilteringText(detail.filteringText)}\n countText={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringCountText',\n i18nStrings?.columnFilteringCountText\n ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length)\n : undefined,\n format => format({ count: sortedAndFilteredOptions.length })\n )}\n />\n </div>\n )}\n\n {/* No match */}\n {sortedAndFilteredOptions.length === 0 && (\n <div className={getClassName('no-match')}>\n <InternalSpaceBetween size=\"s\" alignItems=\"center\">\n <InternalBox margin={{ top: 'm' }}>\n {i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText',\n i18nStrings?.columnFilteringNoMatchText\n )}\n </InternalBox>\n <InternalButton onClick={() => setColumnFilteringText('')}>\n {i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n i18nStrings?.columnFilteringClearFilterText\n )}\n </InternalButton>\n </InternalSpaceBetween>\n </div>\n )}\n\n {/* Drag and drop */}\n <DndContext\n sensors={sensors}\n collisionDetection={collisionDetection}\n accessibility={{\n announcements,\n restoreFocus: false,\n screenReaderInstructions: renderedDragHandleAriaDescription\n ? { draggable: renderedDragHandleAriaDescription }\n : undefined,\n }}\n onDragStart={({ active }) => setActiveItem(active.id)}\n onDragEnd={event => {\n setActiveItem(null);\n const { active, over } = event;\n\n if (over && active.id !== over.id) {\n const oldIndex = value.findIndex(({ id }) => id === active.id);\n const newIndex = value.findIndex(({ id }) => id === over.id);\n onChange(arrayMove([...value], oldIndex, newIndex));\n }\n }}\n onDragCancel={() => setActiveItem(null)}\n >\n {/* Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n <ul\n className={getClassName('option-list')}\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n role=\"list\"\n >\n <SortableContext\n disabled={columnFilteringText.trim().length > 0}\n items={sortedAndFilteredOptions.map(({ id }) => id)}\n strategy={verticalListSortingStrategy}\n >\n {sortedAndFilteredOptions.map(option => {\n return (\n <DraggableOption\n dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n key={option.id}\n onKeyDown={handleKeyDown}\n onToggle={onToggle}\n option={option}\n />\n );\n })}\n </SortableContext>\n </ul>\n <Portal>\n {/* Make sure that the drag overlay is above the modal\n by assigning the z-index as inline style\n so that it prevails over dnd-kit's inline z-index of 999 */}\n {/* className is a documented prop of the DragOverlay component:\n https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n /* eslint-disable-next-line react/forbid-component-props */}\n <DragOverlay className={styles['drag-overlay']} dropAnimation={null} style={{ zIndex: 5000 }}>\n {activeOption && (\n <ContentDisplayOption\n listeners={{ onKeyDown: handleKeyDown }}\n dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n onToggle={onToggle}\n option={activeOption}\n />\n )}\n </DragOverlay>\n </Portal>\n </DndContext>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.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\nimport React, { useMemo, useState } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport Portal from '../../internal/components/portal';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalTextFilter from '../../text-filter/internal';\nimport { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport ContentDisplayOption from './content-display-option';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\nimport { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n title,\n description,\n options,\n value = options.map(({ id }) => ({\n id,\n visible: true,\n })),\n onChange,\n liveAnnouncementDndStarted,\n liveAnnouncementDndItemReordered,\n liveAnnouncementDndItemCommitted,\n liveAnnouncementDndDiscarded,\n dragHandleAriaDescription,\n dragHandleAriaLabel,\n enableColumnFiltering = false,\n i18nStrings,\n}: ContentDisplayPreferenceProps) {\n const idPrefix = useUniqueId(componentPrefix);\n const i18n = useInternalI18n('collection-preferences');\n const [columnFilteringText, setColumnFilteringText] = useState('');\n\n const titleId = `${idPrefix}-title`;\n const descriptionId = `${idPrefix}-description`;\n\n const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {\n const sorted = getSortedOptions({ options, contentDisplay: value });\n const filtered = getFilteredOptions(sorted, columnFilteringText);\n return [sorted, filtered];\n }, [columnFilteringText, options, value]);\n\n const onToggle = (option: OptionWithVisibility) => {\n // We use sortedOptions as base and not value because there might be options that\n // are not in the value yet, so they're added as non-visible after the known ones.\n onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));\n };\n\n const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n sortedOptions: sortedAndFilteredOptions,\n });\n\n const activeOption = activeItem ? sortedAndFilteredOptions.find(({ id }) => id === activeItem) : null;\n\n const announcements = useLiveAnnouncements({\n isDragging: activeItem !== null,\n liveAnnouncementDndStarted: i18n(\n 'contentDisplayPreference.liveAnnouncementDndStarted',\n liveAnnouncementDndStarted,\n format => (position, total) => format({ position, total })\n ),\n liveAnnouncementDndItemReordered: i18n(\n 'contentDisplayPreference.liveAnnouncementDndItemReordered',\n liveAnnouncementDndItemReordered,\n format => (initialPosition, currentPosition, total) =>\n format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n ),\n liveAnnouncementDndItemCommitted: i18n(\n 'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n liveAnnouncementDndItemCommitted,\n format => (initialPosition, finalPosition, total) =>\n format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })\n ),\n liveAnnouncementDndDiscarded: i18n(\n 'contentDisplayPreference.liveAnnouncementDndDiscarded',\n liveAnnouncementDndDiscarded\n ),\n sortedOptions: sortedAndFilteredOptions,\n });\n\n const renderedDragHandleAriaDescription = i18n(\n 'contentDisplayPreference.dragHandleAriaDescription',\n dragHandleAriaDescription\n );\n\n return (\n <div className={styles[componentPrefix]} {...getAnalyticsInnerContextAttribute('contentDisplay')}>\n <h3 className={getClassName('title')} id={titleId}>\n {i18n('contentDisplayPreference.title', title)}\n </h3>\n <p className={getClassName('description')} id={descriptionId}>\n {i18n('contentDisplayPreference.description', description)}\n </p>\n\n {/* Filter input */}\n {enableColumnFiltering && (\n <div className={getClassName('text-filter')}>\n <InternalTextFilter\n filteringText={columnFilteringText}\n filteringPlaceholder={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringPlaceholder',\n i18nStrings?.columnFilteringPlaceholder\n )}\n filteringAriaLabel={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringAriaLabel',\n i18nStrings?.columnFilteringAriaLabel\n )}\n filteringClearAriaLabel={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n i18nStrings?.columnFilteringClearFilterText\n )}\n onChange={({ detail }) => setColumnFilteringText(detail.filteringText)}\n countText={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringCountText',\n i18nStrings?.columnFilteringCountText\n ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length)\n : undefined,\n format => format({ count: sortedAndFilteredOptions.length })\n )}\n />\n </div>\n )}\n\n {/* No match */}\n {sortedAndFilteredOptions.length === 0 && (\n <div className={getClassName('no-match')}>\n <InternalSpaceBetween size=\"s\" alignItems=\"center\">\n <InternalBox margin={{ top: 'm' }}>\n {i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText',\n i18nStrings?.columnFilteringNoMatchText\n )}\n </InternalBox>\n <InternalButton onClick={() => setColumnFilteringText('')}>\n {i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n i18nStrings?.columnFilteringClearFilterText\n )}\n </InternalButton>\n </InternalSpaceBetween>\n </div>\n )}\n\n {/* Drag and drop */}\n <DndContext\n sensors={sensors}\n collisionDetection={collisionDetection}\n accessibility={{\n announcements,\n restoreFocus: false,\n screenReaderInstructions: renderedDragHandleAriaDescription\n ? { draggable: renderedDragHandleAriaDescription }\n : undefined,\n }}\n onDragStart={({ active }) => setActiveItem(active.id)}\n onDragEnd={event => {\n setActiveItem(null);\n const { active, over } = event;\n\n if (over && active.id !== over.id) {\n const oldIndex = sortedOptions.findIndex(({ id }) => id === active.id);\n const newIndex = sortedOptions.findIndex(({ id }) => id === over.id);\n // We need to remember to trim the options down to id and visible to emit changes.\n onChange(arrayMove([...sortedOptions], oldIndex, newIndex).map(({ id, visible }) => ({ id, visible })));\n }\n }}\n onDragCancel={() => setActiveItem(null)}\n >\n {/* Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n <ul\n className={getClassName('option-list')}\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n role=\"list\"\n >\n <SortableContext\n disabled={columnFilteringText.trim().length > 0}\n items={sortedAndFilteredOptions.map(({ id }) => id)}\n strategy={verticalListSortingStrategy}\n >\n {sortedAndFilteredOptions.map(option => {\n return (\n <DraggableOption\n dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n key={option.id}\n onKeyDown={handleKeyDown}\n onToggle={onToggle}\n option={option}\n />\n );\n })}\n </SortableContext>\n </ul>\n <Portal>\n {/* Make sure that the drag overlay is above the modal\n by assigning the z-index as inline style\n so that it prevails over dnd-kit's inline z-index of 999 */}\n {/* className is a documented prop of the DragOverlay component:\n https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n /* eslint-disable-next-line react/forbid-component-props */}\n <DragOverlay className={styles['drag-overlay']} dropAnimation={null} style={{ zIndex: 5000 }}>\n {activeOption && (\n <ContentDisplayOption\n listeners={{ onKeyDown: handleKeyDown }}\n dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n onToggle={onToggle}\n option={activeOption}\n />\n )}\n </DragOverlay>\n </Portal>\n </DndContext>\n </div>\n );\n}\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { CollectionPreferencesProps } from '../interfaces';
|
|
2
2
|
export interface OptionWithVisibility extends CollectionPreferencesProps.ContentDisplayOption {
|
|
3
|
-
visible
|
|
3
|
+
visible: boolean;
|
|
4
4
|
}
|
|
5
5
|
export declare function getSortedOptions({ options, contentDisplay, }: {
|
|
6
6
|
options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;
|
|
7
7
|
contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;
|
|
8
8
|
}): ReadonlyArray<OptionWithVisibility>;
|
|
9
|
-
export declare function getFilteredOptions(options: ReadonlyArray<
|
|
9
|
+
export declare function getFilteredOptions(options: ReadonlyArray<OptionWithVisibility>, filterText: string): readonly OptionWithVisibility[];
|
|
10
10
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,WAAW,oBAAqB,SAAQ,0BAA0B,CAAC,oBAAoB;IAC3F,OAAO,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,WAAW,oBAAqB,SAAQ,0BAA0B,CAAC,oBAAoB;IAC3F,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GACf,EAAE;IACD,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;IACxE,cAAc,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CAC9E,GAAG,aAAa,CAAC,oBAAoB,CAAC,CActC;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,aAAa,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAE,MAAM,mCAQlG"}
|
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
export function getSortedOptions({ options, contentDisplay, }) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
// By using a Map, we are guaranteed to preserve insertion order on future iteration.
|
|
3
|
+
const optionsById = new Map();
|
|
4
|
+
// We insert contentDisplay first so we respect the currently selected order
|
|
5
|
+
for (const { id, visible } of contentDisplay) {
|
|
6
|
+
// If an option is provided in contentDisplay and not options, we default the label to the id
|
|
7
|
+
optionsById.set(id, { id, label: id, visible });
|
|
8
|
+
}
|
|
9
|
+
// We merge options data, and insert any that were not in contentDisplay as non-visible
|
|
10
|
+
for (const option of options) {
|
|
11
|
+
const existing = optionsById.get(option.id);
|
|
12
|
+
optionsById.set(option.id, Object.assign(Object.assign({}, option), { visible: !!(existing === null || existing === void 0 ? void 0 : existing.visible) }));
|
|
13
|
+
}
|
|
14
|
+
return Array.from(optionsById.values());
|
|
6
15
|
}
|
|
7
16
|
export function getFilteredOptions(options, filterText) {
|
|
8
17
|
filterText = filterText.trim().toLowerCase();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GAIf;IACC,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GAIf;IACC,qFAAqF;IACrF,MAAM,WAAW,GAAG,IAAI,GAAG,EAAgC,CAAC;IAC5D,4EAA4E;IAC5E,KAAK,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,cAAc,EAAE;QAC5C,6FAA6F;QAC7F,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;KACjD;IACD,uFAAuF;IACvF,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;QAC5B,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAC5C,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,kCAAO,MAAM,KAAE,OAAO,EAAE,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,CAAA,IAAG,CAAC;KACzE;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,OAA4C,EAAE,UAAkB;IACjG,UAAU,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAE7C,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,OAAO,CAAC;KAChB;IAED,OAAO,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;AAC1F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CollectionPreferencesProps } from '../interfaces';\n\nexport interface OptionWithVisibility extends CollectionPreferencesProps.ContentDisplayOption {\n visible: boolean;\n}\n\nexport function getSortedOptions({\n options,\n contentDisplay,\n}: {\n options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;\n contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}): ReadonlyArray<OptionWithVisibility> {\n // By using a Map, we are guaranteed to preserve insertion order on future iteration.\n const optionsById = new Map<string, OptionWithVisibility>();\n // We insert contentDisplay first so we respect the currently selected order\n for (const { id, visible } of contentDisplay) {\n // If an option is provided in contentDisplay and not options, we default the label to the id\n optionsById.set(id, { id, label: id, visible });\n }\n // We merge options data, and insert any that were not in contentDisplay as non-visible\n for (const option of options) {\n const existing = optionsById.get(option.id);\n optionsById.set(option.id, { ...option, visible: !!existing?.visible });\n }\n return Array.from(optionsById.values());\n}\n\nexport function getFilteredOptions(options: ReadonlyArray<OptionWithVisibility>, filterText: string) {\n filterText = filterText.trim().toLowerCase();\n\n if (!filterText) {\n return options;\n }\n\n return options.filter(option => option.label.toLowerCase().trim().includes(filterText));\n}\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED