Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(AsideHeader)!: add ref prop for popup-anchor #123

Merged
merged 4 commits into from
Oct 5, 2023
Merged

feat(AsideHeader)!: add ref prop for popup-anchor #123

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f6c2942
feat(AsideHeader)!: add ref prop for popup-anchor
Lunory Oct 4, 2023
c67bed4
chore: add ref to AsideHeader story
Lunory Oct 4, 2023
0e78a24
chore: fix lint
Lunory Oct 5, 2023
be2c7d9
chore: add AsideHeader readme
Lunory Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/components/AsideHeader/AsideHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ import './AsideHeader.scss';
import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../constants';
import {useAsideHeaderInnerContextValue} from './useAsideHeaderInnerContextValue';

export const AsideHeader = (props: AsideHeaderProps) => {
export const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>((props, ref) => {
const {className, compact} = props;

const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]);
const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({...props, size});
Expand All @@ -23,7 +24,7 @@ export const AsideHeader = (props: AsideHeaderProps) => {
<div className={b({compact}, className)}>
<div className={b('pane-container')}>
{/* First Panel */}
<FirstPanel />
<FirstPanel ref={ref} />
{/* Second Panel */}
<Content
size={size}
Expand All @@ -35,4 +36,4 @@ export const AsideHeader = (props: AsideHeaderProps) => {
</AsideHeaderInnerContextProvider>
</AsideHeaderContextProvider>
);
};
});
6 changes: 5 additions & 1 deletion src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,14 @@ body {
}
}

&__settings-ul {
&__settings {
padding-right: 30px;
}

&__settings-ul {
margin: 0;
}

&__panel {
width: 300px;
height: 100%;
Expand Down
9 changes: 7 additions & 2 deletions src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
multipleTooltip = false,
initialCompact = false,
}) => {
const ref = React.useRef<HTMLDivElement>(null);
const [popupVisible, setPopupVisible] = React.useState(false);
const [subheaderPopupVisible, setSubheaderPopupVisible] = React.useState(false);
const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
Expand All @@ -49,7 +50,7 @@
const openModalCount = data?.meta?.layers?.filter(
({type}) => type === 'modal',
).length;
callback(openModalCount !== 0);

Check warning on line 53 in src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

View workflow job for this annotation

GitHub Actions / Verify Files 

Expected return with your callback function
}
});
};
Expand All @@ -73,6 +74,7 @@
</div>
</Modal>
<AsideHeader
ref={ref}
logo={{
text: 'Service',
icon: logoIcon,
Expand All @@ -93,12 +95,15 @@
setSubheaderPopupVisible(!subheaderPopupVisible);
},
},
popupAnchor: ref,
popupPlacement: ['right-start'],
popupOffset: [10, 10],
popupVisible: subheaderPopupVisible,
onClosePopup: () => setSubheaderPopupVisible(false),
renderPopupContent: () => {
return (
<div className={b('settings-ul')}>
<ul>
<div className={b('settings')}>
<ul className={b('settings-ul')}>
<li>Set 1</li>
<li>Set 2</li>
<li>Set 3</li>
Expand All @@ -124,7 +129,7 @@
compact={compact}
multipleTooltip={multipleTooltip}
openModalSubscriber={openModalSubscriber}
renderFooter={({compact}) => (

Check warning on line 132 in src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

View workflow job for this annotation

GitHub Actions / Verify Files 

'compact' is already declared in the upper scope
<React.Fragment>
<FooterItem
compact={compact}
Expand Down
6 changes: 3 additions & 3 deletions src/components/AsideHeader/components/FirstPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import {CollapseButton} from './CollapseButton';
import {Panels} from './Panels';

export const FirstPanel = () => {
export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
const {
size,
onItemClick,
Expand All @@ -21,7 +21,7 @@
} = useAsideHeaderInnerContext();
const visibleMenuItems = useVisibleMenuItems();

const asideRef = useRef<HTMLDivElement>(null);
const asideRef = ref || useRef<HTMLDivElement>(null);

Check failure on line 24 in src/components/AsideHeader/components/FirstPanel.tsx

View workflow job for this annotation

GitHub Actions / Verify Files 

React Hook "useRef" is called conditionally. React Hooks must be called in the exact same order in every component render

return (
<>
Expand Down Expand Up @@ -53,4 +53,4 @@
<Panels />
</>
);
};
});
2 changes: 1 addition & 1 deletion src/components/AsideHeader/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export interface AsideHeaderGeneralProps {
renderFooter?: (data: {
size: number;
compact: boolean;
asideRef: React.RefObject<HTMLDivElement>;
asideRef: React.ForwardedRef<HTMLDivElement>;
}) => React.ReactNode;
onClosePanel?: () => void;
onChangeCompact?: (compact: boolean) => void;
Expand Down
Loading