@react-spectrum/s2
Version:
Spectrum 2 UI components in React
284 lines (270 loc) • 13.2 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 = " ";
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 $1aaf8931044a97bd$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 $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, onLoadMore: onLoadMore, items: items, ...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$reactariautils.useEffectEvent)(()=>{
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);
});
(0, $gDulG$reactariautils.useResizeObserver)({
ref: scrollRef,
box: 'border-box',
onResize: updateSize
});
(0, $gDulG$reactariautils.useLayoutEffect)(()=>{
updateSize();
}, [
updateSize
]);
// 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 renderer;
let cardLoadingSentinel = /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.UNSTABLE_GridListLoadingSentinel), {
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
]
});
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: (0, $gDulG$reactariacomponents.GridListItem),
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,
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'
}, !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