@react-spectrum/s2
Version:
Spectrum 2 UI components in React
305 lines (291 loc) • 14.1 kB
JavaScript
require("./CardView.css");
var $230078a1c4ce81d8$exports = require("./Card.cjs");
var $a4f1585b527b9b7a$exports = require("./ImageCoordinator.cjs");
var $85bf454149fe9ddc$exports = require("./ActionBar.cjs");
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
var $gDulG$reactjsxruntime = require("react/jsx-runtime");
var $gDulG$reactariacomponents = require("react-aria-components");
var $gDulG$react = require("react");
var $gDulG$reactspectrumutils = require("@react-spectrum/utils");
var $gDulG$reactariautils = require("@react-aria/utils");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "CardViewContext", () => $1aaf8931044a97bd$export$64992ac69f286e5c);
$parcel$export(module.exports, "CardView", () => $1aaf8931044a97bd$export$7e52c821f7b6f422);
/*
* 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 $1aaf8931044a97bd$var$layoutOptions = {
XS: {
compact: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(6, 6),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(100, 100),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(140, 140)
},
regular: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(8, 8),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(100, 100),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(140, 140)
},
spacious: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(12, 12),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(100, 100),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(140, 140)
}
},
S: {
compact: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(8, 8),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(150, 150),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(210, 210)
},
regular: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(12, 12),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(150, 150),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(210, 210)
},
spacious: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(16, 16),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(150, 150),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(210, 210)
}
},
M: {
compact: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(12, 12),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(200, 200),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(280, 280)
},
regular: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(16, 16),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(200, 200),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(280, 280)
},
spacious: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(20, 20),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(200, 200),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(280, 280)
}
},
L: {
compact: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(16, 16),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(270, 270),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(370, 370)
},
regular: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(20, 20),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(270, 270),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(370, 370)
},
spacious: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(24, 24),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(270, 270),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(370, 370)
}
},
XL: {
compact: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(20, 20),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(340, 340),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(460, 460)
},
regular: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(24, 24),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(340, 340),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(460, 460)
},
spacious: {
minSpace: new (0, $gDulG$reactariacomponents.Size)(28, 28),
minItemSize: new (0, $gDulG$reactariacomponents.Size)(340, 340),
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(460, 460)
}
}
};
const $1aaf8931044a97bd$var$SIZES = [
'XS',
'S',
'M',
'L',
'XL'
];
const $1aaf8931044a97bd$var$cardViewStyles = function anonymous(props, overrides) {
let rules = " ";
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|_6|Z|N|L|F|M|K)[^\s]+/g);
for (let p of matches){
if (p[1] === "F") height = true;
rules += p[0];
}
if (props.isLoading) rules += ' Pc1';
else rules += ' Pa1';
if (props.isEmpty) rules += ' sd1';
rules += ' _oa1';
rules += ' _ta1';
rules += ' eb1';
rules += ' _Ca1';
if (props.isEmpty) {
if (props.isFocusVisible) rules += ' _Lf1';
} else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kb1';
if (props.isActionBar) {
if (!height) rules += ' Fb1';
}
return rules;
};
const $1aaf8931044a97bd$var$wrapperStyles = function anonymous(props, overrides) {
let rules = " ";
let position = 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|_6|Z|N|L|F|M|K)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
rules += p[0];
}
if (!position) rules += ' _Pc1';
rules += ' _Nb1';
rules += ' Pb1';
return rules;
};
const $1aaf8931044a97bd$export$64992ac69f286e5c = /*#__PURE__*/ (0, $gDulG$react.createContext)(null);
const $1aaf8931044a97bd$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $gDulG$react.forwardRef)(function CardView(props, ref) {
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $1aaf8931044a97bd$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, loadingState: loadingState, onLoadMore: onLoadMore, items: items, renderEmptyState: renderEmptyStateProp, ...otherProps } = props;
let domRef = (0, $gDulG$reactspectrumutils.useDOMRef)(ref);
let innerRef = (0, $gDulG$react.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, $gDulG$react.useState)($1aaf8931044a97bd$var$SIZES.length - 1);
let updateSize = (0, $gDulG$react.useCallback)(()=>{
let w = scrollRef.current?.clientWidth ?? 0;
let i = $1aaf8931044a97bd$var$SIZES.length - 1;
while(i > 0){
let opts = $1aaf8931044a97bd$var$layoutOptions[$1aaf8931044a97bd$var$SIZES[i]][density];
if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) break;
i--;
}
setMaxSizeIndex(i);
}, [
scrollRef,
density
]);
let updateSizeEvent = (0, $gDulG$reactariautils.useEffectEvent)(updateSize);
(0, $gDulG$reactariautils.useResizeObserver)({
ref: scrollRef,
box: 'border-box',
onResize: updateSize
});
(0, $gDulG$reactariautils.useLayoutEffect)(()=>{
updateSizeEvent();
}, []);
// The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.
let size = $1aaf8931044a97bd$var$SIZES[Math.min(maxSizeIndex, $1aaf8931044a97bd$var$SIZES.indexOf(sizeProp))];
let layout = layoutName === 'waterfall' ? (0, $gDulG$reactariacomponents.WaterfallLayout) : (0, $gDulG$reactariacomponents.GridLayout);
let options = $1aaf8931044a97bd$var$layoutOptions[size][density];
let ctx = (0, $gDulG$react.useMemo)(()=>({
size: size,
variant: variant
}), [
size,
variant
]);
let { selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, actionBar: actionBar, actionBarHeight: actionBarHeight } = (0, $85bf454149fe9ddc$exports.useActionBarContainer)({
...props,
scrollRef: scrollRef
});
let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
let renderer;
let cardLoadingSentinel = /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.GridListLoadMoreItem), {
isLoading: isLoading,
onLoadMore: onLoadMore
});
if (typeof children === 'function' && items) renderer = /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsxs)((0, $gDulG$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.Collection), {
items: items,
dependencies: props.dependencies,
children: children
}),
cardLoadingSentinel
]
});
else renderer = /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsxs)((0, $gDulG$reactjsxruntime.Fragment), {
children: [
children,
cardLoadingSentinel
]
});
// Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.
let renderEmptyState = renderEmptyStateProp ? (renderProps)=>{
let collection = renderProps.state.collection;
let firstKey = collection.getFirstKey();
if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') return renderEmptyStateProp(renderProps);
} : undefined;
let cardViewCtx = (0, $gDulG$react.useMemo)(()=>({
layout: layoutName,
ElementType: (0, $gDulG$reactariacomponents.GridListItem)
}), [
layoutName
]);
let cardView = /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.Virtualizer), {
layout: layout,
layoutOptions: options,
children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $230078a1c4ce81d8$exports.InternalCardViewContext).Provider, {
value: cardViewCtx,
children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $230078a1c4ce81d8$exports.CardContext).Provider, {
value: ctx,
children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $a4f1585b527b9b7a$exports.ImageCoordinator), {
children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.GridList), {
ref: scrollRef,
...otherProps,
renderEmptyState: renderEmptyState,
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 : '') + $1aaf8931044a97bd$var$cardViewStyles({
...renderProps,
isLoading: props.loadingState === 'loading',
isActionBar: !!props.renderActionBar
}, !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, $gDulG$reactjsxruntime.jsxs)("div", {
ref: domRef,
className: UNSAFE_className + $1aaf8931044a97bd$var$wrapperStyles(null, styles),
style: UNSAFE_style,
children: [
cardView,
actionBar
]
});
return cardView;
});
//# sourceMappingURL=CardView.cjs.map