@react-spectrum/card 3.0.0-alpha.53 → 3.0.0-alpha.55
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/import.mjs +6 -6
- package/dist/main.js +10 -10
- package/dist/main.js.map +1 -1
- package/dist/module.js +6 -6
- package/dist/module.js.map +1 -1
- package/dist/types/src/index.d.ts +9 -0
- package/package.json +22 -46
- package/src/index.ts +13 -9
- package/dist/BaseLayout.main.js +0 -213
- package/dist/BaseLayout.main.js.map +0 -1
- package/dist/BaseLayout.mjs +0 -208
- package/dist/BaseLayout.module.js +0 -208
- package/dist/BaseLayout.module.js.map +0 -1
- package/dist/Card.main.js +0 -52
- package/dist/Card.main.js.map +0 -1
- package/dist/Card.mjs +0 -43
- package/dist/Card.module.js +0 -43
- package/dist/Card.module.js.map +0 -1
- package/dist/CardBase.main.js +0 -205
- package/dist/CardBase.main.js.map +0 -1
- package/dist/CardBase.mjs +0 -200
- package/dist/CardBase.module.js +0 -200
- package/dist/CardBase.module.js.map +0 -1
- package/dist/CardView.main.js +0 -238
- package/dist/CardView.main.js.map +0 -1
- package/dist/CardView.mjs +0 -233
- package/dist/CardView.module.js +0 -233
- package/dist/CardView.module.js.map +0 -1
- package/dist/CardViewContext.main.js +0 -32
- package/dist/CardViewContext.main.js.map +0 -1
- package/dist/CardViewContext.mjs +0 -22
- package/dist/CardViewContext.module.js +0 -22
- package/dist/CardViewContext.module.js.map +0 -1
- package/dist/GalleryLayout.main.js +0 -230
- package/dist/GalleryLayout.main.js.map +0 -1
- package/dist/GalleryLayout.mjs +0 -225
- package/dist/GalleryLayout.module.js +0 -225
- package/dist/GalleryLayout.module.js.map +0 -1
- package/dist/GridLayout.main.js +0 -175
- package/dist/GridLayout.main.js.map +0 -1
- package/dist/GridLayout.mjs +0 -170
- package/dist/GridLayout.module.js +0 -170
- package/dist/GridLayout.module.js.map +0 -1
- package/dist/WaterfallLayout.main.js +0 -182
- package/dist/WaterfallLayout.main.js.map +0 -1
- package/dist/WaterfallLayout.mjs +0 -177
- package/dist/WaterfallLayout.module.js +0 -177
- package/dist/WaterfallLayout.module.js.map +0 -1
- package/dist/ar-AE.main.js +0 -7
- package/dist/ar-AE.main.js.map +0 -1
- package/dist/ar-AE.mjs +0 -9
- package/dist/ar-AE.module.js +0 -9
- package/dist/ar-AE.module.js.map +0 -1
- package/dist/bg-BG.main.js +0 -7
- package/dist/bg-BG.main.js.map +0 -1
- package/dist/bg-BG.mjs +0 -9
- package/dist/bg-BG.module.js +0 -9
- package/dist/bg-BG.module.js.map +0 -1
- package/dist/card.4d5d6544.css +0 -1671
- package/dist/card.4d5d6544.css.map +0 -1
- package/dist/card_vars_css.main.js +0 -116
- package/dist/card_vars_css.main.js.map +0 -1
- package/dist/card_vars_css.mjs +0 -118
- package/dist/card_vars_css.module.js +0 -118
- package/dist/card_vars_css.module.js.map +0 -1
- package/dist/cs-CZ.main.js +0 -7
- package/dist/cs-CZ.main.js.map +0 -1
- package/dist/cs-CZ.mjs +0 -9
- package/dist/cs-CZ.module.js +0 -9
- package/dist/cs-CZ.module.js.map +0 -1
- package/dist/da-DK.main.js +0 -7
- package/dist/da-DK.main.js.map +0 -1
- package/dist/da-DK.mjs +0 -9
- package/dist/da-DK.module.js +0 -9
- package/dist/da-DK.module.js.map +0 -1
- package/dist/de-DE.main.js +0 -7
- package/dist/de-DE.main.js.map +0 -1
- package/dist/de-DE.mjs +0 -9
- package/dist/de-DE.module.js +0 -9
- package/dist/de-DE.module.js.map +0 -1
- package/dist/el-GR.main.js +0 -7
- package/dist/el-GR.main.js.map +0 -1
- package/dist/el-GR.mjs +0 -9
- package/dist/el-GR.module.js +0 -9
- package/dist/el-GR.module.js.map +0 -1
- package/dist/en-US.main.js +0 -7
- package/dist/en-US.main.js.map +0 -1
- package/dist/en-US.mjs +0 -9
- package/dist/en-US.module.js +0 -9
- package/dist/en-US.module.js.map +0 -1
- package/dist/es-ES.main.js +0 -7
- package/dist/es-ES.main.js.map +0 -1
- package/dist/es-ES.mjs +0 -9
- package/dist/es-ES.module.js +0 -9
- package/dist/es-ES.module.js.map +0 -1
- package/dist/et-EE.main.js +0 -7
- package/dist/et-EE.main.js.map +0 -1
- package/dist/et-EE.mjs +0 -9
- package/dist/et-EE.module.js +0 -9
- package/dist/et-EE.module.js.map +0 -1
- package/dist/fi-FI.main.js +0 -7
- package/dist/fi-FI.main.js.map +0 -1
- package/dist/fi-FI.mjs +0 -9
- package/dist/fi-FI.module.js +0 -9
- package/dist/fi-FI.module.js.map +0 -1
- package/dist/fr-FR.main.js +0 -7
- package/dist/fr-FR.main.js.map +0 -1
- package/dist/fr-FR.mjs +0 -9
- package/dist/fr-FR.module.js +0 -9
- package/dist/fr-FR.module.js.map +0 -1
- package/dist/he-IL.main.js +0 -7
- package/dist/he-IL.main.js.map +0 -1
- package/dist/he-IL.mjs +0 -9
- package/dist/he-IL.module.js +0 -9
- package/dist/he-IL.module.js.map +0 -1
- package/dist/hr-HR.main.js +0 -7
- package/dist/hr-HR.main.js.map +0 -1
- package/dist/hr-HR.mjs +0 -9
- package/dist/hr-HR.module.js +0 -9
- package/dist/hr-HR.module.js.map +0 -1
- package/dist/hu-HU.main.js +0 -7
- package/dist/hu-HU.main.js.map +0 -1
- package/dist/hu-HU.mjs +0 -9
- package/dist/hu-HU.module.js +0 -9
- package/dist/hu-HU.module.js.map +0 -1
- package/dist/intlStrings.main.js +0 -108
- package/dist/intlStrings.main.js.map +0 -1
- package/dist/intlStrings.mjs +0 -110
- package/dist/intlStrings.module.js +0 -110
- package/dist/intlStrings.module.js.map +0 -1
- package/dist/it-IT.main.js +0 -7
- package/dist/it-IT.main.js.map +0 -1
- package/dist/it-IT.mjs +0 -9
- package/dist/it-IT.module.js +0 -9
- package/dist/it-IT.module.js.map +0 -1
- package/dist/ja-JP.main.js +0 -7
- package/dist/ja-JP.main.js.map +0 -1
- package/dist/ja-JP.mjs +0 -9
- package/dist/ja-JP.module.js +0 -9
- package/dist/ja-JP.module.js.map +0 -1
- package/dist/ko-KR.main.js +0 -7
- package/dist/ko-KR.main.js.map +0 -1
- package/dist/ko-KR.mjs +0 -9
- package/dist/ko-KR.module.js +0 -9
- package/dist/ko-KR.module.js.map +0 -1
- package/dist/lt-LT.main.js +0 -7
- package/dist/lt-LT.main.js.map +0 -1
- package/dist/lt-LT.mjs +0 -9
- package/dist/lt-LT.module.js +0 -9
- package/dist/lt-LT.module.js.map +0 -1
- package/dist/lv-LV.main.js +0 -7
- package/dist/lv-LV.main.js.map +0 -1
- package/dist/lv-LV.mjs +0 -9
- package/dist/lv-LV.module.js +0 -9
- package/dist/lv-LV.module.js.map +0 -1
- package/dist/nb-NO.main.js +0 -7
- package/dist/nb-NO.main.js.map +0 -1
- package/dist/nb-NO.mjs +0 -9
- package/dist/nb-NO.module.js +0 -9
- package/dist/nb-NO.module.js.map +0 -1
- package/dist/nl-NL.main.js +0 -7
- package/dist/nl-NL.main.js.map +0 -1
- package/dist/nl-NL.mjs +0 -9
- package/dist/nl-NL.module.js +0 -9
- package/dist/nl-NL.module.js.map +0 -1
- package/dist/pl-PL.main.js +0 -7
- package/dist/pl-PL.main.js.map +0 -1
- package/dist/pl-PL.mjs +0 -9
- package/dist/pl-PL.module.js +0 -9
- package/dist/pl-PL.module.js.map +0 -1
- package/dist/pt-BR.main.js +0 -7
- package/dist/pt-BR.main.js.map +0 -1
- package/dist/pt-BR.mjs +0 -9
- package/dist/pt-BR.module.js +0 -9
- package/dist/pt-BR.module.js.map +0 -1
- package/dist/pt-PT.main.js +0 -7
- package/dist/pt-PT.main.js.map +0 -1
- package/dist/pt-PT.mjs +0 -9
- package/dist/pt-PT.module.js +0 -9
- package/dist/pt-PT.module.js.map +0 -1
- package/dist/ro-RO.main.js +0 -7
- package/dist/ro-RO.main.js.map +0 -1
- package/dist/ro-RO.mjs +0 -9
- package/dist/ro-RO.module.js +0 -9
- package/dist/ro-RO.module.js.map +0 -1
- package/dist/ru-RU.main.js +0 -7
- package/dist/ru-RU.main.js.map +0 -1
- package/dist/ru-RU.mjs +0 -9
- package/dist/ru-RU.module.js +0 -9
- package/dist/ru-RU.module.js.map +0 -1
- package/dist/sk-SK.main.js +0 -7
- package/dist/sk-SK.main.js.map +0 -1
- package/dist/sk-SK.mjs +0 -9
- package/dist/sk-SK.module.js +0 -9
- package/dist/sk-SK.module.js.map +0 -1
- package/dist/sl-SI.main.js +0 -7
- package/dist/sl-SI.main.js.map +0 -1
- package/dist/sl-SI.mjs +0 -9
- package/dist/sl-SI.module.js +0 -9
- package/dist/sl-SI.module.js.map +0 -1
- package/dist/sr-SP.main.js +0 -7
- package/dist/sr-SP.main.js.map +0 -1
- package/dist/sr-SP.mjs +0 -9
- package/dist/sr-SP.module.js +0 -9
- package/dist/sr-SP.module.js.map +0 -1
- package/dist/sv-SE.main.js +0 -7
- package/dist/sv-SE.main.js.map +0 -1
- package/dist/sv-SE.mjs +0 -9
- package/dist/sv-SE.module.js +0 -9
- package/dist/sv-SE.module.js.map +0 -1
- package/dist/tr-TR.main.js +0 -7
- package/dist/tr-TR.main.js.map +0 -1
- package/dist/tr-TR.mjs +0 -9
- package/dist/tr-TR.module.js +0 -9
- package/dist/tr-TR.module.js.map +0 -1
- package/dist/types.d.ts +0 -194
- package/dist/types.d.ts.map +0 -1
- package/dist/uk-UA.main.js +0 -7
- package/dist/uk-UA.main.js.map +0 -1
- package/dist/uk-UA.mjs +0 -9
- package/dist/uk-UA.module.js +0 -9
- package/dist/uk-UA.module.js.map +0 -1
- package/dist/zh-CN.main.js +0 -7
- package/dist/zh-CN.main.js.map +0 -1
- package/dist/zh-CN.mjs +0 -9
- package/dist/zh-CN.module.js +0 -9
- package/dist/zh-CN.module.js.map +0 -1
- package/dist/zh-TW.main.js +0 -7
- package/dist/zh-TW.main.js.map +0 -1
- package/dist/zh-TW.mjs +0 -9
- package/dist/zh-TW.module.js +0 -9
- package/dist/zh-TW.module.js.map +0 -1
- package/src/BaseLayout.tsx +0 -290
- package/src/Card.tsx +0 -48
- package/src/CardBase.tsx +0 -188
- package/src/CardView.tsx +0 -250
- package/src/CardViewContext.tsx +0 -27
- package/src/GalleryLayout.tsx +0 -321
- package/src/GridLayout.tsx +0 -242
- package/src/WaterfallLayout.tsx +0 -241
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/card/src/CardBase.tsx"],"sourcesContent":["// @ts-nocheck\n/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCardProps, SpectrumCardProps} from '@react-types/card';\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, Node} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, nodeContains, useLayoutEffect, useResizeObserver, useSlotId} from '@react-aria/utils';\nimport {FocusRing, getFocusableTreeWalker} from '@react-aria/focus';\nimport React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/card/vars.css';\nimport {useCardViewContext} from './CardViewContext';\nimport {useFocusWithin, useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\n\ninterface CardBaseProps<T> extends SpectrumCardProps {\n articleProps?: HTMLAttributes<HTMLElement>,\n item?: Node<T>\n}\n\n/**\n * TODO: Add description of component here.\n */\nexport const CardBase = React.forwardRef(function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let context = useCardViewContext() || {}; // we can call again here, won't change from Card.tsx\n let {state} = context;\n let manager = state?.selectionManager;\n let {\n isQuiet,\n orientation = 'vertical',\n articleProps = {role: 'article'},\n item,\n layout,\n children\n } = props;\n\n let key = item?.key;\n let isSelected = manager?.isSelected(key);\n let isDisabled = state?.disabledKeys.has(key);\n let onChange = () => manager?.select(key);\n\n let {styleProps} = useStyleProps(props);\n let {cardProps, titleProps, contentProps} = useCard(props);\n let domRef = useDOMRef(ref);\n let gridRef = useRef<HTMLDivElement>(undefined);\n let checkboxRef = useRef(null);\n\n // cards are only interactive if there is a selection manager and it allows selection\n let {hoverProps, isHovered} = useHover({isDisabled: manager === undefined || manager?.selectionMode === 'none' || isDisabled});\n let [isFocused, setIsFocused] = useState(false);\n let {focusWithinProps} = useFocusWithin({\n onFocusWithinChange: setIsFocused,\n isDisabled\n });\n\n // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default\n let hasPreviewImage = useHasChild(`.${styles['spectrum-Card-image']}`, gridRef);\n let hasPreviewIllustration = useHasChild(`.${styles['spectrum-Card-illustration']}`, gridRef);\n let hasPreview = hasPreviewImage || hasPreviewIllustration;\n\n // this is for horizontal cards\n let [height, setHeight] = useState(NaN);\n let updateHeight = useCallback(() => {\n if (orientation !== 'horizontal') {\n return;\n }\n\n let cardHeight = gridRef.current.getBoundingClientRect().height;\n setHeight(cardHeight);\n }, [orientation, gridRef, setHeight]);\n useResizeObserver({ref: gridRef, onResize: updateHeight});\n\n let aspectRatioEnforce = undefined;\n if (orientation === 'horizontal' && !isNaN(height)) {\n aspectRatioEnforce = {\n height: `${height}px`,\n width: `${height}px`\n };\n }\n\n let slots = useMemo(() => ({\n image: {UNSAFE_className: classNames(styles, 'spectrum-Card-image'), objectFit: orientation === 'horizontal' ? 'cover' : 'contain', alt: '', ...aspectRatioEnforce},\n illustration: {UNSAFE_className: classNames(styles, 'spectrum-Card-illustration'), ...aspectRatioEnforce},\n avatar: {UNSAFE_className: classNames(styles, 'spectrum-Card-avatar'), size: 'avatar-size-400'},\n heading: {UNSAFE_className: classNames(styles, 'spectrum-Card-heading'), ...titleProps},\n content: {UNSAFE_className: classNames(styles, 'spectrum-Card-content'), ...contentProps},\n detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }), [titleProps, contentProps, height, isQuiet, orientation]);\n\n useLayoutEffect(() => {\n if (gridRef?.current) {\n let walker = getFocusableTreeWalker(gridRef.current);\n let nextNode = walker.nextNode();\n while (nextNode != null) {\n if (checkboxRef.current && !nodeContains(checkboxRef.current.UNSAFE_getDOMNode(), nextNode)) {\n console.warn('Card does not support focusable elements, please contact the team regarding your use case.');\n break;\n }\n nextNode = walker.nextNode();\n }\n }\n }, [children]);\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\n {...styleProps}\n {...mergeProps(cardProps, focusWithinProps, hoverProps, filterDOMProps(props), articleProps)}\n ref={domRef}\n className={classNames(styles, 'spectrum-Card', {\n 'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',\n 'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',\n 'spectrum-Card--horizontal': orientation === 'horizontal',\n 'spectrum-Card--noPreview': !hasPreview,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'is-selected': isSelected,\n 'spectrum-Card--waterfall': layout === 'waterfall',\n 'spectrum-Card--gallery': layout === 'gallery',\n 'spectrum-Card--grid': layout === 'grid',\n 'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'\n }, styleProps.className)}>\n <div ref={gridRef} className={classNames(styles, 'spectrum-Card-grid')}>\n {manager && manager.selectionMode !== 'none' && (\n <div className={classNames(styles, 'spectrum-Card-checkboxWrapper')}>\n <Checkbox\n ref={checkboxRef}\n isDisabled={isDisabled}\n excludeFromTabOrder\n isSelected={isSelected}\n onChange={onChange}\n UNSAFE_className={classNames(styles, 'spectrum-Card-checkbox')}\n isEmphasized\n aria-label=\"select\" />\n </div>\n )}\n <SlotProvider slots={slots}>\n {children}\n </SlotProvider>\n <div className={classNames(styles, 'spectrum-Card-decoration')} />\n </div>\n </div>\n </FocusRing>\n );\n});\n\ninterface AriaCardOptions extends AriaCardProps {\n}\n\ninterface CardAria {\n cardProps: HTMLAttributes<HTMLDivElement>,\n titleProps: HTMLAttributes<HTMLDivElement>,\n contentProps: HTMLAttributes<HTMLDivElement>\n}\n\nfunction useCard(props: AriaCardOptions): CardAria {\n let titleId = useSlotId();\n let descriptionId = useSlotId();\n let titleProps = useMemo(() => ({\n id: titleId\n }), [titleId]);\n let contentProps = useMemo(() => ({\n id: descriptionId\n }), [descriptionId]);\n\n return {\n cardProps: {\n ...filterDOMProps(props),\n 'aria-labelledby': titleId,\n 'aria-describedby': descriptionId,\n tabIndex: 0\n },\n titleProps,\n contentProps\n };\n}\n"],"names":[],"version":3,"file":"CardBase.module.js.map"}
|
package/dist/CardView.main.js
DELETED
|
@@ -1,238 +0,0 @@
|
|
|
1
|
-
var $7888205ff7de382f$exports = require("./CardBase.main.js");
|
|
2
|
-
var $e57ab98cef2f01a5$exports = require("./CardViewContext.main.js");
|
|
3
|
-
var $85c597beff94758b$exports = require("./intlStrings.main.js");
|
|
4
|
-
require("./card.4d5d6544.css");
|
|
5
|
-
var $71570f0038472fa2$exports = require("./card_vars_css.main.js");
|
|
6
|
-
var $kFdxB$reactspectrumutils = require("@react-spectrum/utils");
|
|
7
|
-
var $kFdxB$reactstatelygrid = require("@react-stately/grid");
|
|
8
|
-
var $kFdxB$reactariautils = require("@react-aria/utils");
|
|
9
|
-
var $kFdxB$reactspectrumprogress = require("@react-spectrum/progress");
|
|
10
|
-
var $kFdxB$react = require("react");
|
|
11
|
-
var $kFdxB$reactariai18n = require("@react-aria/i18n");
|
|
12
|
-
var $kFdxB$reactariagrid = require("@react-aria/grid");
|
|
13
|
-
var $kFdxB$reactstatelylist = require("@react-stately/list");
|
|
14
|
-
var $kFdxB$reactspectrumprovider = require("@react-spectrum/provider");
|
|
15
|
-
var $kFdxB$reactariavirtualizer = require("@react-aria/virtualizer");
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
function $parcel$interopDefault(a) {
|
|
19
|
-
return a && a.__esModule ? a.default : a;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function $parcel$export(e, n, v, s) {
|
|
23
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
$parcel$export(module.exports, "CardView", () => $514a55f6d91f25ef$export$7e52c821f7b6f422);
|
|
27
|
-
// @ts-nocheck
|
|
28
|
-
/*
|
|
29
|
-
* Copyright 2021 Adobe. All rights reserved.
|
|
30
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
31
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
32
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
33
|
-
*
|
|
34
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
35
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
36
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
37
|
-
* governing permissions and limitations under the License.
|
|
38
|
-
*/
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
const $514a55f6d91f25ef$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).forwardRef(function CardView(props, ref) {
|
|
53
|
-
let { scale: scale } = (0, $kFdxB$reactspectrumprovider.useProvider)();
|
|
54
|
-
let { styleProps: styleProps } = (0, $kFdxB$reactspectrumutils.useStyleProps)(props);
|
|
55
|
-
let domRef = (0, $kFdxB$reactspectrumutils.useDOMRef)(ref);
|
|
56
|
-
let { isQuiet: isQuiet, renderEmptyState: renderEmptyState, layout: layout, loadingState: loadingState, onLoadMore: onLoadMore, cardOrientation: cardOrientation = 'vertical' } = props;
|
|
57
|
-
let collator = (0, $kFdxB$reactariai18n.useCollator)({
|
|
58
|
-
usage: 'search',
|
|
59
|
-
sensitivity: 'base'
|
|
60
|
-
});
|
|
61
|
-
let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
|
|
62
|
-
let cardViewLayout = (0, $kFdxB$react.useMemo)(()=>typeof layout === 'function' ? new layout({
|
|
63
|
-
collator: collator,
|
|
64
|
-
cardOrientation: cardOrientation,
|
|
65
|
-
scale: scale
|
|
66
|
-
}) : layout, [
|
|
67
|
-
layout,
|
|
68
|
-
collator,
|
|
69
|
-
cardOrientation,
|
|
70
|
-
scale
|
|
71
|
-
]);
|
|
72
|
-
let layoutType = cardViewLayout.layoutType;
|
|
73
|
-
let { direction: direction } = (0, $kFdxB$reactariai18n.useLocale)();
|
|
74
|
-
let { collection: collection } = (0, $kFdxB$reactstatelylist.useListState)(props);
|
|
75
|
-
let gridCollection = (0, $kFdxB$react.useMemo)(()=>new (0, $kFdxB$reactstatelygrid.GridCollection)({
|
|
76
|
-
columnCount: 1,
|
|
77
|
-
items: [
|
|
78
|
-
...collection
|
|
79
|
-
].map((item)=>({
|
|
80
|
-
// Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys
|
|
81
|
-
...item,
|
|
82
|
-
hasChildNodes: true,
|
|
83
|
-
childNodes: [
|
|
84
|
-
{
|
|
85
|
-
key: `cell-${item.key}`,
|
|
86
|
-
type: 'cell',
|
|
87
|
-
value: null,
|
|
88
|
-
level: 0,
|
|
89
|
-
rendered: null,
|
|
90
|
-
textValue: item.textValue,
|
|
91
|
-
hasChildNodes: false,
|
|
92
|
-
childNodes: []
|
|
93
|
-
}
|
|
94
|
-
]
|
|
95
|
-
}))
|
|
96
|
-
}), [
|
|
97
|
-
collection
|
|
98
|
-
]);
|
|
99
|
-
let state = (0, $kFdxB$reactstatelygrid.useGridState)({
|
|
100
|
-
...props,
|
|
101
|
-
selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
|
|
102
|
-
collection: gridCollection,
|
|
103
|
-
focusMode: 'cell'
|
|
104
|
-
});
|
|
105
|
-
cardViewLayout.collection = gridCollection;
|
|
106
|
-
cardViewLayout.disabledKeys = state.disabledKeys;
|
|
107
|
-
let { gridProps: gridProps } = (0, $kFdxB$reactariagrid.useGrid)({
|
|
108
|
-
...props,
|
|
109
|
-
isVirtualized: true,
|
|
110
|
-
keyboardDelegate: cardViewLayout
|
|
111
|
-
}, state, domRef);
|
|
112
|
-
let renderWrapper = (0, $kFdxB$react.useCallback)((parent, reusableView)=>/*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $kFdxB$reactariavirtualizer.VirtualizerItem), {
|
|
113
|
-
key: reusableView.key,
|
|
114
|
-
layoutInfo: reusableView.layoutInfo,
|
|
115
|
-
virtualizer: reusableView.virtualizer,
|
|
116
|
-
parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
|
|
117
|
-
}, reusableView.rendered), []);
|
|
118
|
-
let focusedKey = state.selectionManager.focusedKey;
|
|
119
|
-
let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
|
|
120
|
-
if ((focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey) != null) focusedKey = focusedItem.parentKey;
|
|
121
|
-
let persistedKeys = (0, $kFdxB$react.useMemo)(()=>focusedKey != null ? new Set([
|
|
122
|
-
focusedKey
|
|
123
|
-
]) : null, [
|
|
124
|
-
focusedKey
|
|
125
|
-
]);
|
|
126
|
-
// TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
|
|
127
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $e57ab98cef2f01a5$exports.CardViewContext).Provider, {
|
|
128
|
-
value: {
|
|
129
|
-
state: state,
|
|
130
|
-
isQuiet: isQuiet,
|
|
131
|
-
layout: cardViewLayout,
|
|
132
|
-
cardOrientation: cardOrientation,
|
|
133
|
-
renderEmptyState: renderEmptyState
|
|
134
|
-
}
|
|
135
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $kFdxB$reactariavirtualizer.Virtualizer), {
|
|
136
|
-
...gridProps,
|
|
137
|
-
...styleProps,
|
|
138
|
-
className: (0, $kFdxB$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-CardView'),
|
|
139
|
-
ref: domRef,
|
|
140
|
-
persistedKeys: persistedKeys,
|
|
141
|
-
scrollDirection: "vertical",
|
|
142
|
-
layout: cardViewLayout,
|
|
143
|
-
collection: gridCollection,
|
|
144
|
-
isLoading: isLoading,
|
|
145
|
-
onLoadMore: onLoadMore,
|
|
146
|
-
layoutOptions: (0, $kFdxB$react.useMemo)(()=>({
|
|
147
|
-
isLoading: isLoading,
|
|
148
|
-
direction: direction
|
|
149
|
-
}), [
|
|
150
|
-
isLoading,
|
|
151
|
-
direction
|
|
152
|
-
]),
|
|
153
|
-
renderWrapper: renderWrapper,
|
|
154
|
-
style: {
|
|
155
|
-
...styleProps.style,
|
|
156
|
-
scrollPaddingTop: cardViewLayout.margin || 0
|
|
157
|
-
}
|
|
158
|
-
}, (0, $kFdxB$react.useCallback)((type, item)=>{
|
|
159
|
-
if (type === 'item') return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$InternalCard, {
|
|
160
|
-
item: item
|
|
161
|
-
});
|
|
162
|
-
else if (type === 'loader') return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$LoadingState, null);
|
|
163
|
-
else if (type === 'placeholder') return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$EmptyState, null);
|
|
164
|
-
}, [])));
|
|
165
|
-
});
|
|
166
|
-
function $514a55f6d91f25ef$var$LoadingState() {
|
|
167
|
-
let { state: state } = (0, $e57ab98cef2f01a5$exports.useCardViewContext)();
|
|
168
|
-
let stringFormatter = (0, $kFdxB$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($85c597beff94758b$exports))), '@react-spectrum/card');
|
|
169
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$CenteredWrapper, null, /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $kFdxB$reactspectrumprogress.ProgressCircle), {
|
|
170
|
-
isIndeterminate: true,
|
|
171
|
-
"aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
|
|
172
|
-
}));
|
|
173
|
-
}
|
|
174
|
-
function $514a55f6d91f25ef$var$EmptyState() {
|
|
175
|
-
let { renderEmptyState: renderEmptyState } = (0, $e57ab98cef2f01a5$exports.useCardViewContext)();
|
|
176
|
-
let emptyState = renderEmptyState ? renderEmptyState() : null;
|
|
177
|
-
if (emptyState == null) return null;
|
|
178
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$CenteredWrapper, null, emptyState);
|
|
179
|
-
}
|
|
180
|
-
function $514a55f6d91f25ef$var$CenteredWrapper({ children: children }) {
|
|
181
|
-
let { state: state } = (0, $e57ab98cef2f01a5$exports.useCardViewContext)();
|
|
182
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement("div", {
|
|
183
|
-
role: "row",
|
|
184
|
-
"aria-rowindex": state.collection.size + 1,
|
|
185
|
-
className: (0, $kFdxB$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-CardView-centeredWrapper')
|
|
186
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement("div", {
|
|
187
|
-
role: "gridcell"
|
|
188
|
-
}, children));
|
|
189
|
-
}
|
|
190
|
-
function $514a55f6d91f25ef$var$InternalCard(props) {
|
|
191
|
-
let { item: item } = props;
|
|
192
|
-
let cellNode = [
|
|
193
|
-
...item.childNodes
|
|
194
|
-
][0];
|
|
195
|
-
let { state: state, cardOrientation: cardOrientation, isQuiet: isQuiet, layout: layout } = (0, $e57ab98cef2f01a5$exports.useCardViewContext)();
|
|
196
|
-
let layoutType = layout.layoutType;
|
|
197
|
-
let rowRef = (0, $kFdxB$react.useRef)(undefined);
|
|
198
|
-
let cellRef = (0, $kFdxB$react.useRef)(undefined);
|
|
199
|
-
let unwrappedRef = (0, $kFdxB$reactspectrumutils.useUnwrapDOMRef)(cellRef);
|
|
200
|
-
let { rowProps: gridRowProps } = (0, $kFdxB$reactariagrid.useGridRow)({
|
|
201
|
-
node: item,
|
|
202
|
-
isVirtualized: true
|
|
203
|
-
}, state, rowRef);
|
|
204
|
-
let { gridCellProps: gridCellProps } = (0, $kFdxB$reactariagrid.useGridCell)({
|
|
205
|
-
node: cellNode,
|
|
206
|
-
focusMode: 'cell'
|
|
207
|
-
}, state, unwrappedRef);
|
|
208
|
-
// Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode="none" CardView.
|
|
209
|
-
let allowsInteraction = state.selectionManager.selectionMode !== 'none';
|
|
210
|
-
let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
|
|
211
|
-
let onKeyDown = (e)=>{
|
|
212
|
-
if (e.key === ' ' && isDisabled) e.preventDefault();
|
|
213
|
-
};
|
|
214
|
-
let rowProps = (0, $kFdxB$reactariautils.mergeProps)(gridRowProps, {
|
|
215
|
-
onKeyDown: onKeyDown
|
|
216
|
-
});
|
|
217
|
-
if (layoutType === 'grid' || layoutType === 'gallery') isQuiet = true;
|
|
218
|
-
if (layoutType !== 'grid') cardOrientation = 'vertical';
|
|
219
|
-
// We don't want to focus the checkbox (or any other focusable elements) within the Card
|
|
220
|
-
// when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
|
|
221
|
-
// the cards in the CardView is handled by useGrid => useSelectableCollection instead.
|
|
222
|
-
delete gridCellProps.onKeyDownCapture;
|
|
223
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement("div", {
|
|
224
|
-
...rowProps,
|
|
225
|
-
ref: rowRef,
|
|
226
|
-
className: (0, $kFdxB$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-CardView-row')
|
|
227
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $7888205ff7de382f$exports.CardBase), {
|
|
228
|
-
ref: cellRef,
|
|
229
|
-
articleProps: gridCellProps,
|
|
230
|
-
isQuiet: isQuiet,
|
|
231
|
-
orientation: cardOrientation,
|
|
232
|
-
item: item,
|
|
233
|
-
layout: layoutType
|
|
234
|
-
}, item.rendered));
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
//# sourceMappingURL=CardView.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/card/src/CardView.tsx"],"sourcesContent":["// @ts-nocheck\n/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CardBase} from './CardBase';\nimport {CardViewContext, useCardViewContext} from './CardViewContext';\nimport {classNames, useDOMRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';\nimport {DOMRef, DOMRefValue, Node} from '@react-types/shared';\nimport {GridCollection, useGridState} from '@react-stately/grid';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ReactElement, ReactNode, useCallback, useMemo, useRef} from 'react';\nimport {ReusableView} from '@react-stately/virtualizer';\nimport {SpectrumCardViewProps} from '@react-types/card';\nimport styles from '@adobe/spectrum-css-temp/components/card/vars.css';\nimport {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useGrid, useGridCell, useGridRow} from '@react-aria/grid';\nimport {useListState} from '@react-stately/list';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';\n\n/**\n * TODO: Add description of component here.\n */\nexport const CardView = React.forwardRef(function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {scale} = useProvider();\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n let {\n isQuiet,\n renderEmptyState,\n layout,\n loadingState,\n onLoadMore,\n cardOrientation = 'vertical'\n } = props;\n\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);\n let layoutType = cardViewLayout.layoutType;\n\n let {direction} = useLocale();\n let {collection} = useListState(props);\n\n let gridCollection = useMemo(() => new GridCollection<T>({\n columnCount: 1,\n items: [...collection].map(item => ({\n // Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys\n ...item,\n hasChildNodes: true,\n childNodes: [{\n key: `cell-${item.key}`,\n type: 'cell',\n value: null,\n level: 0,\n rendered: null,\n textValue: item.textValue,\n hasChildNodes: false,\n childNodes: []\n }]\n }))\n }), [collection]);\n\n let state = useGridState({\n ...props,\n selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,\n collection: gridCollection,\n focusMode: 'cell'\n });\n\n cardViewLayout.collection = gridCollection;\n cardViewLayout.disabledKeys = state.disabledKeys;\n\n let {gridProps} = useGrid({\n ...props,\n isVirtualized: true,\n keyboardDelegate: cardViewLayout\n }, state, domRef);\n\n type View = ReusableView<Node<T>, ReactNode>;\n let renderWrapper = useCallback((parent: View, reusableView: View) => (\n <VirtualizerItem\n key={reusableView.key}\n layoutInfo={reusableView.layoutInfo}\n virtualizer={reusableView.virtualizer}\n parent={parent?.layoutInfo}>\n {reusableView.rendered}\n </VirtualizerItem>\n ), []);\n\n let focusedKey = state.selectionManager.focusedKey;\n let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);\n if (focusedItem?.parentKey != null) {\n focusedKey = focusedItem.parentKey;\n }\n\n let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\n\n // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted\n return (\n <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation, renderEmptyState}}>\n <Virtualizer\n {...gridProps}\n {...styleProps}\n className={classNames(styles, 'spectrum-CardView')}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n layout={cardViewLayout}\n collection={gridCollection}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n layoutOptions={useMemo(() => ({isLoading, direction}), [isLoading, direction])}\n renderWrapper={renderWrapper}\n style={{\n ...styleProps.style,\n scrollPaddingTop: cardViewLayout.margin || 0\n }}>\n {useCallback((type, item) => {\n if (type === 'item') {\n return (\n <InternalCard item={item} />\n );\n } else if (type === 'loader') {\n return <LoadingState />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </CardViewContext.Provider>\n\n );\n}) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nfunction LoadingState() {\n let {state} = useCardViewContext();\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />\n </CenteredWrapper>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useCardViewContext();\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return (\n <CenteredWrapper>\n {emptyState}\n </CenteredWrapper>\n );\n}\n\nfunction CenteredWrapper({children}) {\n let {state} = useCardViewContext();\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(styles, 'spectrum-CardView-centeredWrapper')}>\n <div role=\"gridcell\">\n {children}\n </div>\n </div>\n );\n}\n\nfunction InternalCard(props) {\n let {\n item\n } = props;\n let cellNode = [...item.childNodes][0];\n let {state, cardOrientation, isQuiet, layout} = useCardViewContext();\n\n let layoutType = layout.layoutType;\n let rowRef = useRef(undefined);\n let cellRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);\n let unwrappedRef = useUnwrapDOMRef(cellRef);\n\n let {rowProps: gridRowProps} = useGridRow({\n node: item,\n isVirtualized: true\n }, state, rowRef);\n\n let {gridCellProps} = useGridCell({\n node: cellNode,\n focusMode: 'cell'\n }, state, unwrappedRef);\n\n // Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode=\"none\" CardView.\n let allowsInteraction = state.selectionManager.selectionMode !== 'none';\n let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);\n\n let onKeyDown = (e) => {\n if (e.key === ' ' && isDisabled) {\n e.preventDefault();\n }\n };\n\n let rowProps = mergeProps(\n gridRowProps,\n {onKeyDown}\n );\n\n if (layoutType === 'grid' || layoutType === 'gallery') {\n isQuiet = true;\n }\n\n if (layoutType !== 'grid') {\n cardOrientation = 'vertical';\n }\n\n // We don't want to focus the checkbox (or any other focusable elements) within the Card\n // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between\n // the cards in the CardView is handled by useGrid => useSelectableCollection instead.\n delete gridCellProps.onKeyDownCapture;\n return (\n <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>\n <CardBase\n ref={cellRef}\n articleProps={gridCellProps}\n isQuiet={isQuiet}\n orientation={cardOrientation}\n item={item}\n layout={layoutType}>\n {item.rendered}\n </CardBase>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"CardView.main.js.map"}
|
package/dist/CardView.mjs
DELETED
|
@@ -1,233 +0,0 @@
|
|
|
1
|
-
import {CardBase as $643dd8fa80926f94$export$7a6ccaf429ad93a8} from "./CardBase.mjs";
|
|
2
|
-
import {CardViewContext as $8d180a244893de14$export$64992ac69f286e5c, useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.mjs";
|
|
3
|
-
import $iOsT7$intlStringsmodulejs from "./intlStrings.mjs";
|
|
4
|
-
import "./card.4d5d6544.css";
|
|
5
|
-
import $iOsT7$card_vars_cssmodulejs from "./card_vars_css.mjs";
|
|
6
|
-
import {useStyleProps as $iOsT7$useStyleProps, useDOMRef as $iOsT7$useDOMRef, classNames as $iOsT7$classNames, useUnwrapDOMRef as $iOsT7$useUnwrapDOMRef} from "@react-spectrum/utils";
|
|
7
|
-
import {GridCollection as $iOsT7$GridCollection, useGridState as $iOsT7$useGridState} from "@react-stately/grid";
|
|
8
|
-
import {mergeProps as $iOsT7$mergeProps} from "@react-aria/utils";
|
|
9
|
-
import {ProgressCircle as $iOsT7$ProgressCircle} from "@react-spectrum/progress";
|
|
10
|
-
import $iOsT7$react, {useMemo as $iOsT7$useMemo, useCallback as $iOsT7$useCallback, useRef as $iOsT7$useRef} from "react";
|
|
11
|
-
import {useCollator as $iOsT7$useCollator, useLocale as $iOsT7$useLocale, useLocalizedStringFormatter as $iOsT7$useLocalizedStringFormatter} from "@react-aria/i18n";
|
|
12
|
-
import {useGrid as $iOsT7$useGrid, useGridRow as $iOsT7$useGridRow, useGridCell as $iOsT7$useGridCell} from "@react-aria/grid";
|
|
13
|
-
import {useListState as $iOsT7$useListState} from "@react-stately/list";
|
|
14
|
-
import {useProvider as $iOsT7$useProvider} from "@react-spectrum/provider";
|
|
15
|
-
import {VirtualizerItem as $iOsT7$VirtualizerItem, Virtualizer as $iOsT7$Virtualizer} from "@react-aria/virtualizer";
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
function $parcel$interopDefault(a) {
|
|
19
|
-
return a && a.__esModule ? a.default : a;
|
|
20
|
-
}
|
|
21
|
-
// @ts-nocheck
|
|
22
|
-
/*
|
|
23
|
-
* Copyright 2021 Adobe. All rights reserved.
|
|
24
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
25
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
26
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
27
|
-
*
|
|
28
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
29
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
30
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
31
|
-
* governing permissions and limitations under the License.
|
|
32
|
-
*/
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $iOsT7$react).forwardRef(function CardView(props, ref) {
|
|
47
|
-
let { scale: scale } = (0, $iOsT7$useProvider)();
|
|
48
|
-
let { styleProps: styleProps } = (0, $iOsT7$useStyleProps)(props);
|
|
49
|
-
let domRef = (0, $iOsT7$useDOMRef)(ref);
|
|
50
|
-
let { isQuiet: isQuiet, renderEmptyState: renderEmptyState, layout: layout, loadingState: loadingState, onLoadMore: onLoadMore, cardOrientation: cardOrientation = 'vertical' } = props;
|
|
51
|
-
let collator = (0, $iOsT7$useCollator)({
|
|
52
|
-
usage: 'search',
|
|
53
|
-
sensitivity: 'base'
|
|
54
|
-
});
|
|
55
|
-
let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
|
|
56
|
-
let cardViewLayout = (0, $iOsT7$useMemo)(()=>typeof layout === 'function' ? new layout({
|
|
57
|
-
collator: collator,
|
|
58
|
-
cardOrientation: cardOrientation,
|
|
59
|
-
scale: scale
|
|
60
|
-
}) : layout, [
|
|
61
|
-
layout,
|
|
62
|
-
collator,
|
|
63
|
-
cardOrientation,
|
|
64
|
-
scale
|
|
65
|
-
]);
|
|
66
|
-
let layoutType = cardViewLayout.layoutType;
|
|
67
|
-
let { direction: direction } = (0, $iOsT7$useLocale)();
|
|
68
|
-
let { collection: collection } = (0, $iOsT7$useListState)(props);
|
|
69
|
-
let gridCollection = (0, $iOsT7$useMemo)(()=>new (0, $iOsT7$GridCollection)({
|
|
70
|
-
columnCount: 1,
|
|
71
|
-
items: [
|
|
72
|
-
...collection
|
|
73
|
-
].map((item)=>({
|
|
74
|
-
// Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys
|
|
75
|
-
...item,
|
|
76
|
-
hasChildNodes: true,
|
|
77
|
-
childNodes: [
|
|
78
|
-
{
|
|
79
|
-
key: `cell-${item.key}`,
|
|
80
|
-
type: 'cell',
|
|
81
|
-
value: null,
|
|
82
|
-
level: 0,
|
|
83
|
-
rendered: null,
|
|
84
|
-
textValue: item.textValue,
|
|
85
|
-
hasChildNodes: false,
|
|
86
|
-
childNodes: []
|
|
87
|
-
}
|
|
88
|
-
]
|
|
89
|
-
}))
|
|
90
|
-
}), [
|
|
91
|
-
collection
|
|
92
|
-
]);
|
|
93
|
-
let state = (0, $iOsT7$useGridState)({
|
|
94
|
-
...props,
|
|
95
|
-
selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
|
|
96
|
-
collection: gridCollection,
|
|
97
|
-
focusMode: 'cell'
|
|
98
|
-
});
|
|
99
|
-
cardViewLayout.collection = gridCollection;
|
|
100
|
-
cardViewLayout.disabledKeys = state.disabledKeys;
|
|
101
|
-
let { gridProps: gridProps } = (0, $iOsT7$useGrid)({
|
|
102
|
-
...props,
|
|
103
|
-
isVirtualized: true,
|
|
104
|
-
keyboardDelegate: cardViewLayout
|
|
105
|
-
}, state, domRef);
|
|
106
|
-
let renderWrapper = (0, $iOsT7$useCallback)((parent, reusableView)=>/*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$VirtualizerItem), {
|
|
107
|
-
key: reusableView.key,
|
|
108
|
-
layoutInfo: reusableView.layoutInfo,
|
|
109
|
-
virtualizer: reusableView.virtualizer,
|
|
110
|
-
parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
|
|
111
|
-
}, reusableView.rendered), []);
|
|
112
|
-
let focusedKey = state.selectionManager.focusedKey;
|
|
113
|
-
let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
|
|
114
|
-
if ((focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey) != null) focusedKey = focusedItem.parentKey;
|
|
115
|
-
let persistedKeys = (0, $iOsT7$useMemo)(()=>focusedKey != null ? new Set([
|
|
116
|
-
focusedKey
|
|
117
|
-
]) : null, [
|
|
118
|
-
focusedKey
|
|
119
|
-
]);
|
|
120
|
-
// TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
|
|
121
|
-
return /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $8d180a244893de14$export$64992ac69f286e5c).Provider, {
|
|
122
|
-
value: {
|
|
123
|
-
state: state,
|
|
124
|
-
isQuiet: isQuiet,
|
|
125
|
-
layout: cardViewLayout,
|
|
126
|
-
cardOrientation: cardOrientation,
|
|
127
|
-
renderEmptyState: renderEmptyState
|
|
128
|
-
}
|
|
129
|
-
}, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$Virtualizer), {
|
|
130
|
-
...gridProps,
|
|
131
|
-
...styleProps,
|
|
132
|
-
className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), 'spectrum-CardView'),
|
|
133
|
-
ref: domRef,
|
|
134
|
-
persistedKeys: persistedKeys,
|
|
135
|
-
scrollDirection: "vertical",
|
|
136
|
-
layout: cardViewLayout,
|
|
137
|
-
collection: gridCollection,
|
|
138
|
-
isLoading: isLoading,
|
|
139
|
-
onLoadMore: onLoadMore,
|
|
140
|
-
layoutOptions: (0, $iOsT7$useMemo)(()=>({
|
|
141
|
-
isLoading: isLoading,
|
|
142
|
-
direction: direction
|
|
143
|
-
}), [
|
|
144
|
-
isLoading,
|
|
145
|
-
direction
|
|
146
|
-
]),
|
|
147
|
-
renderWrapper: renderWrapper,
|
|
148
|
-
style: {
|
|
149
|
-
...styleProps.style,
|
|
150
|
-
scrollPaddingTop: cardViewLayout.margin || 0
|
|
151
|
-
}
|
|
152
|
-
}, (0, $iOsT7$useCallback)((type, item)=>{
|
|
153
|
-
if (type === 'item') return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$InternalCard, {
|
|
154
|
-
item: item
|
|
155
|
-
});
|
|
156
|
-
else if (type === 'loader') return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$LoadingState, null);
|
|
157
|
-
else if (type === 'placeholder') return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$EmptyState, null);
|
|
158
|
-
}, [])));
|
|
159
|
-
});
|
|
160
|
-
function $81a52da995c19652$var$LoadingState() {
|
|
161
|
-
let { state: state } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
162
|
-
let stringFormatter = (0, $iOsT7$useLocalizedStringFormatter)((0, ($parcel$interopDefault($iOsT7$intlStringsmodulejs))), '@react-spectrum/card');
|
|
163
|
-
return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$CenteredWrapper, null, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$ProgressCircle), {
|
|
164
|
-
isIndeterminate: true,
|
|
165
|
-
"aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
|
|
166
|
-
}));
|
|
167
|
-
}
|
|
168
|
-
function $81a52da995c19652$var$EmptyState() {
|
|
169
|
-
let { renderEmptyState: renderEmptyState } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
170
|
-
let emptyState = renderEmptyState ? renderEmptyState() : null;
|
|
171
|
-
if (emptyState == null) return null;
|
|
172
|
-
return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$CenteredWrapper, null, emptyState);
|
|
173
|
-
}
|
|
174
|
-
function $81a52da995c19652$var$CenteredWrapper({ children: children }) {
|
|
175
|
-
let { state: state } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
176
|
-
return /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
|
|
177
|
-
role: "row",
|
|
178
|
-
"aria-rowindex": state.collection.size + 1,
|
|
179
|
-
className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), 'spectrum-CardView-centeredWrapper')
|
|
180
|
-
}, /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
|
|
181
|
-
role: "gridcell"
|
|
182
|
-
}, children));
|
|
183
|
-
}
|
|
184
|
-
function $81a52da995c19652$var$InternalCard(props) {
|
|
185
|
-
let { item: item } = props;
|
|
186
|
-
let cellNode = [
|
|
187
|
-
...item.childNodes
|
|
188
|
-
][0];
|
|
189
|
-
let { state: state, cardOrientation: cardOrientation, isQuiet: isQuiet, layout: layout } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
190
|
-
let layoutType = layout.layoutType;
|
|
191
|
-
let rowRef = (0, $iOsT7$useRef)(undefined);
|
|
192
|
-
let cellRef = (0, $iOsT7$useRef)(undefined);
|
|
193
|
-
let unwrappedRef = (0, $iOsT7$useUnwrapDOMRef)(cellRef);
|
|
194
|
-
let { rowProps: gridRowProps } = (0, $iOsT7$useGridRow)({
|
|
195
|
-
node: item,
|
|
196
|
-
isVirtualized: true
|
|
197
|
-
}, state, rowRef);
|
|
198
|
-
let { gridCellProps: gridCellProps } = (0, $iOsT7$useGridCell)({
|
|
199
|
-
node: cellNode,
|
|
200
|
-
focusMode: 'cell'
|
|
201
|
-
}, state, unwrappedRef);
|
|
202
|
-
// Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode="none" CardView.
|
|
203
|
-
let allowsInteraction = state.selectionManager.selectionMode !== 'none';
|
|
204
|
-
let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
|
|
205
|
-
let onKeyDown = (e)=>{
|
|
206
|
-
if (e.key === ' ' && isDisabled) e.preventDefault();
|
|
207
|
-
};
|
|
208
|
-
let rowProps = (0, $iOsT7$mergeProps)(gridRowProps, {
|
|
209
|
-
onKeyDown: onKeyDown
|
|
210
|
-
});
|
|
211
|
-
if (layoutType === 'grid' || layoutType === 'gallery') isQuiet = true;
|
|
212
|
-
if (layoutType !== 'grid') cardOrientation = 'vertical';
|
|
213
|
-
// We don't want to focus the checkbox (or any other focusable elements) within the Card
|
|
214
|
-
// when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
|
|
215
|
-
// the cards in the CardView is handled by useGrid => useSelectableCollection instead.
|
|
216
|
-
delete gridCellProps.onKeyDownCapture;
|
|
217
|
-
return /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
|
|
218
|
-
...rowProps,
|
|
219
|
-
ref: rowRef,
|
|
220
|
-
className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), 'spectrum-CardView-row')
|
|
221
|
-
}, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $643dd8fa80926f94$export$7a6ccaf429ad93a8), {
|
|
222
|
-
ref: cellRef,
|
|
223
|
-
articleProps: gridCellProps,
|
|
224
|
-
isQuiet: isQuiet,
|
|
225
|
-
orientation: cardOrientation,
|
|
226
|
-
item: item,
|
|
227
|
-
layout: layoutType
|
|
228
|
-
}, item.rendered));
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
export {$81a52da995c19652$export$7e52c821f7b6f422 as CardView};
|
|
233
|
-
//# sourceMappingURL=CardView.module.js.map
|