a96cd3eb0a
close AF-2514 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced document explorer on mobile with live updates, responsive masonry layout, and improved empty state handling for all documents, collections, and tags. - Added customization for card height and masonry item width in document explorer views. - Extended layout components to support additional flexbox styling options for improved layout flexibility. - **Bug Fixes** - Improved flexibility in layout components by supporting additional flexbox styling options. - **Refactor** - Replaced older static document list and menu components with a unified, context-driven explorer for a more dynamic and interactive experience. - Removed obsolete CSS and component files related to the previous document list and menu implementations. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
125 lines
2.6 KiB
TypeScript
125 lines
2.6 KiB
TypeScript
import type { CSSProperties } from 'react';
|
|
|
|
import { styled } from '../../styles';
|
|
|
|
export type WrapperProps = {
|
|
display?: CSSProperties['display'];
|
|
width?: CSSProperties['width'];
|
|
height?: CSSProperties['height'];
|
|
padding?: CSSProperties['padding'];
|
|
paddingTop?: CSSProperties['paddingTop'];
|
|
paddingRight?: CSSProperties['paddingRight'];
|
|
paddingLeft?: CSSProperties['paddingLeft'];
|
|
paddingBottom?: CSSProperties['paddingBottom'];
|
|
margin?: CSSProperties['margin'];
|
|
marginTop?: CSSProperties['marginTop'];
|
|
marginLeft?: CSSProperties['marginLeft'];
|
|
marginRight?: CSSProperties['marginRight'];
|
|
marginBottom?: CSSProperties['marginBottom'];
|
|
flexGrow?: CSSProperties['flexGrow'];
|
|
flexShrink?: CSSProperties['flexShrink'];
|
|
};
|
|
|
|
export type FlexWrapperProps = {
|
|
display?: CSSProperties['display'];
|
|
flexDirection?: CSSProperties['flexDirection'];
|
|
justifyContent?: CSSProperties['justifyContent'];
|
|
alignItems?: CSSProperties['alignItems'];
|
|
wrap?: boolean;
|
|
flexShrink?: CSSProperties['flexShrink'];
|
|
flexGrow?: CSSProperties['flexGrow'];
|
|
gap?: CSSProperties['gap'];
|
|
};
|
|
|
|
// Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
|
|
export const Wrapper = styled('div', {
|
|
shouldForwardProp: prop => {
|
|
return ![
|
|
'display',
|
|
'width',
|
|
'height',
|
|
'padding',
|
|
'margin',
|
|
'paddingTop',
|
|
'paddingRight',
|
|
'paddingLeft',
|
|
'paddingBottom',
|
|
'marginTop',
|
|
'marginLeft',
|
|
'marginRight',
|
|
'marginBottom',
|
|
'flexGrow',
|
|
'flexShrink',
|
|
].includes(prop as string);
|
|
},
|
|
})<WrapperProps>(({
|
|
display,
|
|
width,
|
|
height,
|
|
padding,
|
|
margin,
|
|
paddingTop,
|
|
paddingRight,
|
|
paddingLeft,
|
|
paddingBottom,
|
|
marginTop,
|
|
marginLeft,
|
|
marginRight,
|
|
marginBottom,
|
|
flexGrow,
|
|
flexShrink,
|
|
}) => {
|
|
return {
|
|
display,
|
|
width,
|
|
height,
|
|
padding,
|
|
margin,
|
|
paddingTop,
|
|
paddingRight,
|
|
paddingLeft,
|
|
paddingBottom,
|
|
marginTop,
|
|
marginLeft,
|
|
marginRight,
|
|
marginBottom,
|
|
flexGrow,
|
|
flexShrink,
|
|
};
|
|
});
|
|
|
|
export const FlexWrapper = styled(Wrapper, {
|
|
shouldForwardProp: prop => {
|
|
return ![
|
|
'justifyContent',
|
|
'alignItems',
|
|
'wrap',
|
|
'flexDirection',
|
|
'flexShrink',
|
|
'flexGrow',
|
|
'gap',
|
|
].includes(prop as string);
|
|
},
|
|
})<FlexWrapperProps>(({
|
|
justifyContent,
|
|
alignItems,
|
|
wrap = false,
|
|
flexDirection,
|
|
flexShrink,
|
|
flexGrow,
|
|
gap,
|
|
}) => {
|
|
return {
|
|
display: 'flex',
|
|
justifyContent,
|
|
alignItems,
|
|
flexWrap: wrap ? 'wrap' : 'nowrap',
|
|
flexDirection,
|
|
flexShrink,
|
|
flexGrow,
|
|
gap,
|
|
};
|
|
});
|
|
|
|
export default Wrapper;
|