@react-spectrum/s2
Version:
Spectrum 2 UI components in React
278 lines (266 loc) • 12.4 kB
JavaScript
import "./CardView.css";
import {CardContext as $68e4e6fe083e22fd$export$d0b2ee33ebf7d64, InternalCardViewContext as $68e4e6fe083e22fd$export$cb658fed5fefe1d} from "./Card.mjs";
import {ImageCoordinator as $4b5e069e9e001e8b$export$1b926c015f09611d} from "./ImageCoordinator.mjs";
import {useActionBarContainer as $f21f2186348fbc5b$export$13f32e21845e01d0} from "./ActionBar.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $aG2ym$jsx, jsxs as $aG2ym$jsxs, Fragment as $aG2ym$Fragment} from "react/jsx-runtime";
import {Size as $aG2ym$Size, WaterfallLayout as $aG2ym$WaterfallLayout, GridLayout as $aG2ym$GridLayout, UNSTABLE_GridListLoadingSentinel as $aG2ym$UNSTABLE_GridListLoadingSentinel, Collection as $aG2ym$Collection, Virtualizer as $aG2ym$Virtualizer, GridListItem as $aG2ym$GridListItem, GridList as $aG2ym$GridList} from "react-aria-components";
import {createContext as $aG2ym$createContext, forwardRef as $aG2ym$forwardRef, useRef as $aG2ym$useRef, useState as $aG2ym$useState, useMemo as $aG2ym$useMemo} from "react";
import {useDOMRef as $aG2ym$useDOMRef} from "@react-spectrum/utils";
import {useEffectEvent as $aG2ym$useEffectEvent, useResizeObserver as $aG2ym$useResizeObserver, useLayoutEffect as $aG2ym$useLayoutEffect} from "@react-aria/utils";
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $bbcff092fe610ff3$var$layoutOptions = {
XS: {
compact: {
minSpace: new (0, $aG2ym$Size)(6, 6),
minItemSize: new (0, $aG2ym$Size)(100, 100),
maxItemSize: new (0, $aG2ym$Size)(140, 140)
},
regular: {
minSpace: new (0, $aG2ym$Size)(8, 8),
minItemSize: new (0, $aG2ym$Size)(100, 100),
maxItemSize: new (0, $aG2ym$Size)(140, 140)
},
spacious: {
minSpace: new (0, $aG2ym$Size)(12, 12),
minItemSize: new (0, $aG2ym$Size)(100, 100),
maxItemSize: new (0, $aG2ym$Size)(140, 140)
}
},
S: {
compact: {
minSpace: new (0, $aG2ym$Size)(8, 8),
minItemSize: new (0, $aG2ym$Size)(150, 150),
maxItemSize: new (0, $aG2ym$Size)(210, 210)
},
regular: {
minSpace: new (0, $aG2ym$Size)(12, 12),
minItemSize: new (0, $aG2ym$Size)(150, 150),
maxItemSize: new (0, $aG2ym$Size)(210, 210)
},
spacious: {
minSpace: new (0, $aG2ym$Size)(16, 16),
minItemSize: new (0, $aG2ym$Size)(150, 150),
maxItemSize: new (0, $aG2ym$Size)(210, 210)
}
},
M: {
compact: {
minSpace: new (0, $aG2ym$Size)(12, 12),
minItemSize: new (0, $aG2ym$Size)(200, 200),
maxItemSize: new (0, $aG2ym$Size)(280, 280)
},
regular: {
minSpace: new (0, $aG2ym$Size)(16, 16),
minItemSize: new (0, $aG2ym$Size)(200, 200),
maxItemSize: new (0, $aG2ym$Size)(280, 280)
},
spacious: {
minSpace: new (0, $aG2ym$Size)(20, 20),
minItemSize: new (0, $aG2ym$Size)(200, 200),
maxItemSize: new (0, $aG2ym$Size)(280, 280)
}
},
L: {
compact: {
minSpace: new (0, $aG2ym$Size)(16, 16),
minItemSize: new (0, $aG2ym$Size)(270, 270),
maxItemSize: new (0, $aG2ym$Size)(370, 370)
},
regular: {
minSpace: new (0, $aG2ym$Size)(20, 20),
minItemSize: new (0, $aG2ym$Size)(270, 270),
maxItemSize: new (0, $aG2ym$Size)(370, 370)
},
spacious: {
minSpace: new (0, $aG2ym$Size)(24, 24),
minItemSize: new (0, $aG2ym$Size)(270, 270),
maxItemSize: new (0, $aG2ym$Size)(370, 370)
}
},
XL: {
compact: {
minSpace: new (0, $aG2ym$Size)(20, 20),
minItemSize: new (0, $aG2ym$Size)(340, 340),
maxItemSize: new (0, $aG2ym$Size)(460, 460)
},
regular: {
minSpace: new (0, $aG2ym$Size)(24, 24),
minItemSize: new (0, $aG2ym$Size)(340, 340),
maxItemSize: new (0, $aG2ym$Size)(460, 460)
},
spacious: {
minSpace: new (0, $aG2ym$Size)(28, 28),
minItemSize: new (0, $aG2ym$Size)(340, 340),
maxItemSize: new (0, $aG2ym$Size)(460, 460)
}
}
};
const $bbcff092fe610ff3$var$SIZES = [
'XS',
'S',
'M',
'L',
'XL'
];
const $bbcff092fe610ff3$var$cardViewStyles = function anonymous(props, overrides) {
let rules = " ";
rules += ((overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g) || []).join('');
if (props.isLoading) rules += ' Pc91';
else rules += ' Pa91';
if (props.isEmpty) rules += ' sd91';
rules += ' _oa91';
rules += ' _ta91';
rules += ' eb91';
rules += ' _Ca91';
if (props.isEmpty) {
if (props.isFocusVisible) rules += ' _Lf91';
} else rules += ' _Le91';
rules += ' Oh91';
rules += ' _Mc91';
rules += ' _Kb91';
return rules;
};
const $bbcff092fe610ff3$var$wrapperStyles = function anonymous(props, overrides) {
let rules = " ";
let position = false;
let width = false;
let height = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
if (p[1] === "Z") width = true;
if (p[1] === "F") height = true;
rules += p[0];
}
if (!position) rules += ' _Pc91';
rules += ' _Nb91';
rules += ' Pb91';
if (!width) rules += ' ZJ91';
if (!height) rules += ' FD91';
return rules;
};
const $bbcff092fe610ff3$export$64992ac69f286e5c = /*#__PURE__*/ (0, $aG2ym$createContext)(null);
const $bbcff092fe610ff3$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $aG2ym$forwardRef)(function CardView(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $bbcff092fe610ff3$export$64992ac69f286e5c);
let { children: children, layout: layoutName = 'grid', size: sizeProp = 'M', density: density = 'regular', variant: variant = 'primary', selectionStyle: selectionStyle = 'checkbox', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, onLoadMore: onLoadMore, items: items, ...otherProps } = props;
let domRef = (0, $aG2ym$useDOMRef)(ref);
let innerRef = (0, $aG2ym$useRef)(null);
let scrollRef = props.renderActionBar ? innerRef : domRef;
// This calculates the maximum t-shirt size where at least two columns fit in the available width.
let [maxSizeIndex, setMaxSizeIndex] = (0, $aG2ym$useState)($bbcff092fe610ff3$var$SIZES.length - 1);
let updateSize = (0, $aG2ym$useEffectEvent)(()=>{
let w = scrollRef.current?.clientWidth ?? 0;
let i = $bbcff092fe610ff3$var$SIZES.length - 1;
while(i > 0){
let opts = $bbcff092fe610ff3$var$layoutOptions[$bbcff092fe610ff3$var$SIZES[i]][density];
if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) break;
i--;
}
setMaxSizeIndex(i);
});
(0, $aG2ym$useResizeObserver)({
ref: scrollRef,
box: 'border-box',
onResize: updateSize
});
(0, $aG2ym$useLayoutEffect)(()=>{
updateSize();
}, [
updateSize
]);
// The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.
let size = $bbcff092fe610ff3$var$SIZES[Math.min(maxSizeIndex, $bbcff092fe610ff3$var$SIZES.indexOf(sizeProp))];
let layout = layoutName === 'waterfall' ? (0, $aG2ym$WaterfallLayout) : (0, $aG2ym$GridLayout);
let options = $bbcff092fe610ff3$var$layoutOptions[size][density];
let ctx = (0, $aG2ym$useMemo)(()=>({
size: size,
variant: variant
}), [
size,
variant
]);
let { selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, actionBar: actionBar, actionBarHeight: actionBarHeight } = (0, $f21f2186348fbc5b$export$13f32e21845e01d0)({
...props,
scrollRef: scrollRef
});
let renderer;
let cardLoadingSentinel = /*#__PURE__*/ (0, $aG2ym$jsx)((0, $aG2ym$UNSTABLE_GridListLoadingSentinel), {
onLoadMore: onLoadMore
});
if (typeof children === 'function' && items) renderer = /*#__PURE__*/ (0, $aG2ym$jsxs)((0, $aG2ym$Fragment), {
children: [
/*#__PURE__*/ (0, $aG2ym$jsx)((0, $aG2ym$Collection), {
items: items,
dependencies: props.dependencies,
children: children
}),
cardLoadingSentinel
]
});
else renderer = /*#__PURE__*/ (0, $aG2ym$jsxs)((0, $aG2ym$Fragment), {
children: [
children,
cardLoadingSentinel
]
});
let cardView = /*#__PURE__*/ (0, $aG2ym$jsx)((0, $aG2ym$Virtualizer), {
layout: layout,
layoutOptions: options,
children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $68e4e6fe083e22fd$export$cb658fed5fefe1d).Provider, {
value: (0, $aG2ym$GridListItem),
children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $68e4e6fe083e22fd$export$d0b2ee33ebf7d64).Provider, {
value: ctx,
children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $4b5e069e9e001e8b$export$1b926c015f09611d), {
children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $aG2ym$GridList), {
ref: scrollRef,
...otherProps,
items: items,
layout: "grid",
selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle',
selectedKeys: selectedKeys,
defaultSelectedKeys: undefined,
onSelectionChange: onSelectionChange,
style: {
...!props.renderActionBar ? UNSAFE_style : {},
// Add padding at the bottom when the action bar is visible so users can scroll to the last items.
// Also add scroll padding so keyboard navigating preserves the padding.
paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,
scrollPadding: options.minSpace.height,
scrollPaddingBottom: actionBarHeight + options.minSpace.height
},
className: (renderProps)=>(!props.renderActionBar ? UNSAFE_className : '') + $bbcff092fe610ff3$var$cardViewStyles({
...renderProps,
isLoading: props.loadingState === 'loading'
}, !props.renderActionBar ? styles : undefined),
children: renderer
})
})
})
})
});
// Add extra wrapper if there is an action bar so we can position relative to it.
// ActionBar cannot be inside the GridList due to ARIA and focus management requirements.
if (props.renderActionBar) return /*#__PURE__*/ (0, $aG2ym$jsxs)("div", {
ref: domRef,
className: UNSAFE_className + $bbcff092fe610ff3$var$wrapperStyles(null, styles),
style: UNSAFE_style,
children: [
cardView,
actionBar
]
});
return cardView;
});
export {$bbcff092fe610ff3$export$64992ac69f286e5c as CardViewContext, $bbcff092fe610ff3$export$7e52c821f7b6f422 as CardView};
//# sourceMappingURL=CardView.mjs.map