Skip to content

Commit

Permalink
Merge branch 'fix/components-fixes-3' into 'master'
Browse files Browse the repository at this point in the history 
Fix/components fixes 3

See merge request Frontend/synerise-design!2224
  • Loading branch information
Michał Osajda committed Jan 4, 2022
2 parents 7ddae11 + 6ae5ad4 commit dfce113
Show file tree
Hide file tree
Showing 24 changed files with 235 additions and 98 deletions.
39 changes: 20 additions & 19 deletions packages/components/context-selector/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,25 +84,26 @@ import ContextSelector from '@synerise/ds-context-selector'

## API

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| groups | Groups of items | ContextGroup[] | [] |
| items | Array of items | ContextItem[] | [] |
| onSelectItem | Callback called when user selects item | (item: ContextItem \ ContextGroup \ undefined) => void | - |
| opened | Whether if dropdown should opens from outside of component | boolean | false |
| texts | Translations object | ContextSelectorTexts | - |
| selectedItem | Selected item | ContextItem \ undefined | undefined |
| addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
| customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
| trigger | Add custom trigger to modal | 'click' \ 'hover' \ 'contextMenu' | 'click |
| menuItemHeight | Set component Menu.Item height | 'large' \ 'default' | - |
| dropdownWrapperStyles | Apply custom styles to dropdown wrapper | CSSProperties \ undefined | - |
| onClickOutsideEvents | Overwrite default events for document listener | HandledEventsType[] \ undefined | - |
| onClickOutside | Callback called when user click outside dropdown | () => void \ undefined | - |
| onSearch | Callback called when user enter any char in search input | (query: string) => void | - |
| onFetchData | Callback called when user scrolls to the end of dropdown list | () => void | - |
| hasMoreItems | Whether if onFetchData should be called | boolean | - |
| getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| groups | Groups of items | ContextGroup[] | [] |
| items | Array of items | ContextItem[] | [] |
| menuItemHeight | Size of single menu item | ItemSize.LARGE \ ItemSize.DEFAULT | ItemSize.DEFAULT |
| onSelectItem | Callback called when user selects item | (item: ContextItem \ ContextGroup \ undefined) => void | - |
| opened | Whether if dropdown should opens from outside of component | boolean | false |
| texts | Translations object | ContextSelectorTexts | - |
| selectedItem | Selected item | ContextItem \ undefined | undefined |
| addMode | If true trigger doesn't change style when value is set | ContextItem \ undefined | undefined |
| customTriggerComponent | Add custom trigger | React.ReactNode | undefined |
| trigger | Add custom trigger to modal | 'click' \ 'hover' \ 'contextMenu' | 'click |
| menuItemHeight | Set component Menu.Item height | 'large' \ 'default' | - |
| dropdownWrapperStyles | Apply custom styles to dropdown wrapper | CSSProperties \ undefined | - |
| onClickOutsideEvents | Overwrite default events for document listener | HandledEventsType[] \ undefined | - |
| onClickOutside | Callback called when user click outside dropdown | () => void \ undefined | - |
| onSearch | Callback called when user enter any char in search input | (query: string) => void | - |
| onFetchData | Callback called when user scrolls to the end of dropdown list | () => void | - |
| hasMoreItems | Whether if onFetchData should be called | boolean | - |
| getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |


### ContextGroup
Expand Down
7 changes: 4 additions & 3 deletions packages/components/context-selector/src/ContextSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,10 @@ const ContextSelector: React.FC<ContextProps> = ({
);
}, [addMode, handleClick, texts, triggerColor, triggerMode, selectedItem]);

const onDropdownVisibilityChange = React.useCallback((value: boolean) => value && onActivate && onActivate(), [
onActivate,
]);
const onDropdownVisibilityChange = React.useCallback(
(value: boolean) => value && onActivate && onActivate(),
[onActivate]
);

return (
<div data-popup-container>
Expand Down
9 changes: 5 additions & 4 deletions packages/components/context-selector/src/ContextSelector.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { CSSProperties } from 'react';
import { HandledEventsType } from '@synerise/ds-utils';
import { ItemSize } from '@synerise/ds-menu';

export type ContextTexts = {
buttonLabel: string;
Expand Down Expand Up @@ -49,7 +50,7 @@ export type ContextProps = {
loading?: boolean;
customTriggerComponent?: React.ReactNode;
trigger?: ('click' | 'hover' | 'contextMenu')[];
menuItemHeight?: 'large' | 'default';
menuItemHeight?: ItemSize;
dropdownWrapperStyles?: CSSProperties;
onClickOutsideEvents?: HandledEventsType[];
onClickOutside?: () => void;
Expand All @@ -70,7 +71,7 @@ export type ContextDropdownProps = {
onSetGroup?: (val: ContextItem | ContextGroup) => void;
visible?: boolean;
loading?: boolean;
menuItemHeight?: 'large' | 'default';
menuItemHeight?: ItemSize;
dropdownWrapperStyles?: CSSProperties;
onClickOutsideEvents?: HandledEventsType[];
onClickOutside?: () => void;
Expand All @@ -88,7 +89,7 @@ export type ContextSelectorDropdownItemProps = {
select: (item: ContextItem | ContextGroup) => void;
selected?: boolean;
className: string;
menuItemHeight?: 'large' | 'default';
menuItemHeight?: ItemSize;
style?: React.CSSProperties;
};

Expand All @@ -97,7 +98,7 @@ export type ListItem = {
item: ContextItem | ContextGroup;
searchQuery: string;
select: (item: ContextItem | ContextGroup) => void;
menuItemHeight?: 'large' | 'default';
menuItemHeight?: ItemSize;
selected?: boolean;
clearSearch?: () => void;
hideDropdown?: () => void;
Expand Down
24 changes: 21 additions & 3 deletions packages/components/context-selector/src/ContextSelectorDropdown/ContextSelectorDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ import Scrollbar from '@synerise/ds-scrollbar';
import Loader from '@synerise/ds-loader';
import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
import { v4 as uuid } from 'uuid';
import { FixedSizeList, FixedSizeList as List } from 'react-window';
import { VariableSizeList, VariableSizeList as List } from 'react-window';

import { ItemSize } from '@synerise/ds-menu';
import * as S from '../ContextSelector.styles';
import {
ContextDropdownProps,
Expand All @@ -22,6 +24,11 @@ import {
import ContextSelectorDropdownItem from './ContextSelectorDropdownItem';

const NO_GROUP_NAME = 'NO_GROUP_NAME';
const ITEM_SIZE = {
[ItemSize.LARGE]: 50,
[ItemSize.DEFAULT]: 32,
title: 32,
};

function isListTitle(element: DropdownItemProps): element is ListTitle {
return (element as ListTitle).title !== undefined;
Expand All @@ -45,7 +52,7 @@ const ContextSelectorDropdown: React.FC<ContextDropdownProps> = ({
onFetchData,
hasMoreItems,
}) => {
const listRef = React.createRef<FixedSizeList>();
const listRef = React.createRef<VariableSizeList>();
const listStyle: React.CSSProperties = { overflowX: 'unset', overflowY: 'unset' };
const defaultTab = React.useMemo(() => {
const defaultIndex = groups?.findIndex((group: ContextGroup) => group.defaultGroup);
Expand Down Expand Up @@ -211,6 +218,11 @@ const ContextSelectorDropdown: React.FC<ContextDropdownProps> = ({
searchResults,
]);

React.useEffect(() => {
// eslint-disable-next-line no-unused-expressions
listRef.current?.resetAfterIndex(0, false);
}, [activeItems, listRef]);

const handleSearch = React.useCallback(
val => {
setSearchQuery(val);
Expand Down Expand Up @@ -239,6 +251,12 @@ const ContextSelectorDropdown: React.FC<ContextDropdownProps> = ({
}
};

const getItemSize = (index: number): number => {
const item = activeItems[index];
if (isListTitle(item)) return ITEM_SIZE.title;
return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[ItemSize.DEFAULT];
};

return (
<Dropdown.Wrapper
style={{ width: '300px', ...dropdownWrapperStyles }}
Expand Down Expand Up @@ -302,7 +320,7 @@ const ContextSelectorDropdown: React.FC<ContextDropdownProps> = ({
width="100%"
height={300}
itemCount={activeItems.length}
itemSize={32}
itemSize={getItemSize}
style={listStyle}
ref={listRef}
>
Expand Down
23 changes: 14 additions & 9 deletions packages/components/layout/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,20 @@ import Layout from '@synerise/ds-layout'

## API

| Property | Description | Type | Default |
| --------- | ---------------------------------------- | --------------- | ------- |
| header | Set top header content page | React.ReactNode | |
| subheader | Set subheader content page | React.ReactNode | |
| left | Set left content page | React.ReactNode | |
| right | Set right content page | React.ReactNode | |
| children | The layout elements passed to the parent | React.ReactNode | |
| className | Layout's className | string | |
| styles | Custom layout styles | LayoutStyles | |
| Property | Description | Type | Default |
| --------- | ---------------------------------------- | --------------- | ------- |
| header | Set top header content page | React.ReactNode | |
| subheader | Set subheader content page | React.ReactNode | |
| left | Set left content page | React.ReactNode | |
| right | Set right content page | React.ReactNode | |
| children | The layout elements passed to the parent | React.ReactNode | |
| className | Layout's className | string | |
| styles | Custom layout styles | LayoutStyles | |
| leftOpened | Whether left sidebar is opened | boolean | false |
| rightOpened | Whether right sidebar is opened | boolean | false |
| leftOpenedWidth | Width of opened left sidebar | number | 320 |
| rightOpenedWidth | Width of opened right sidebar | number | 320 |


### LayoutStyles

Expand Down
2 changes: 1 addition & 1 deletion packages/components/layout/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"dependencies": {
"@synerise/ds-icon": "^0.46.2",
"@synerise/ds-scrollbar": "^0.4.2",
"@synerise/ds-utils": "^0.19.0"
"@synerise/ds-utils": "^0.21.5"
},
"peerDependencies": {
"@synerise/ds-core": "*",
Expand Down
28 changes: 16 additions & 12 deletions packages/components/layout/src/Layout.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ export const SidebarButton = styled.button<SidebarButtonProps>`

type LayoutSidebarProps = {
opened: boolean;
openedWidth: number;
};

export const LayoutSidebar = styled.div<LayoutSidebarProps>`
Expand All @@ -139,20 +140,23 @@ export const LayoutSidebar = styled.div<LayoutSidebarProps>`
height: 100%;
box-shadow: 0 4px 12px 0 rgba(35, 41, 54, 0.04);
transition: all 0.3s ease-in-out;
width: 320px;
width: ${(props): string => `${props.openedWidth}px`};
max-width: 100%;
${mediaQuery.to.medium`flex: 0 0 auto;`};
${mediaQuery.from.medium`flex: 0 1 320px; width: 320px;`};
${mediaQuery.from.medium`max-width: ${(props: LayoutSidebarProps): string => (props.opened ? '320px' : '0px')};`}
${mediaQuery.from.medium`flex: 0 1 ${(props: LayoutSidebarProps): string => `${props.openedWidth}px`}; width: ${(
props: LayoutSidebarProps
): string => `${props.openedWidth}px;`}`};
${mediaQuery.from.medium`max-width: ${(props: LayoutSidebarProps): string =>
props.opened ? `${props.openedWidth}px` : '0px'};`};
${mediaQuery.from.medium`
&.slide-enter {
max-width: 0;
}
&.slide-enter.slide-enter-active {
max-width: 320px;
max-width: ${(props: LayoutSidebarProps): string => `${props.openedWidth}px`};
}
&.slide-leave {
max-width: 320px;
max-width: ${(props: LayoutSidebarProps): string => `${props.openedWidth}px`};
}
&.slide-leave.slide-leave-active {
max-width: 0;
Expand All @@ -162,12 +166,12 @@ export const LayoutSidebar = styled.div<LayoutSidebarProps>`
position: absolute;
top: 0;
left: 0;
width: 320px
width: ${(props: LayoutSidebarProps): string => `${props.openedWidth}px`};
`}
}
`;

type LayoutSidebarWrapperProps = { opened: boolean; right?: boolean };
type LayoutSidebarWrapperProps = { opened: boolean; right?: boolean; openedWidth: number };

export const LayoutSidebarWrapper = styled.div<LayoutSidebarWrapperProps>`
position: relative;
Expand All @@ -177,7 +181,7 @@ export const LayoutSidebarWrapper = styled.div<LayoutSidebarWrapperProps>`
left: ${(props): string => (props.right ? 'auto' : '0')};
right: ${(props): string => (props.right ? '0' : 'auto')};
z-index: 10;
&:hover {
${SidebarButton} {
background-color: ${(props): string => props.theme.palette['grey-600']};
Expand All @@ -190,12 +194,12 @@ export const LayoutSidebarWrapper = styled.div<LayoutSidebarWrapperProps>`
}
}
${mediaQuery.to.medium`position: absolute;`};
${mediaQuery.to.medium`width: 320px;`};
${mediaQuery.to.medium`width: ${(props: LayoutSidebarWrapperProps): string => `${props.openedWidth}px`};`};
${mediaQuery.to.medium`transform: ${(props: LayoutSidebarWrapperProps): string =>
props.right ? 'translateX(320px)' : 'translateX(-320px)'}`};
props.right ? `translateX(${props.openedWidth}px)` : `translateX(-${props.openedWidth}px)`}`};
${(props): FlattenSimpleInterpolation | false =>
props.opened &&
css`
Expand Down
21 changes: 19 additions & 2 deletions packages/components/layout/src/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import Scrollbar from '@synerise/ds-scrollbar';
import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
import { usePrevious } from '@synerise/ds-utils';
import * as S from './Layout.styles';
import { LayoutProps } from './Layout.types';

Expand All @@ -16,21 +17,36 @@ const Layout: React.FC<LayoutProps> = ({
leftOpened,
rightOpened,
fullPage = false,
leftOpenedWidth = 320,
rightOpenedWidth = 320,
}) => {
const previousLeftOpened = usePrevious(leftOpened);
const previousRightOpened = usePrevious(rightOpened);
const [leftSidebarOpened, setLeftSidebarOpened] = React.useState(Boolean(leftOpened));
const [rightSidebarOpened, setRightSidebarOpened] = React.useState(Boolean(rightOpened));

React.useEffect(() => {
if (leftOpened !== previousLeftOpened) {
setLeftSidebarOpened(Boolean(leftOpened));
}
if (rightOpened !== previousRightOpened) {
setRightSidebarOpened(Boolean(rightOpened));
}
}, [leftOpened, rightOpened, previousLeftOpened, previousRightOpened]);

return (
<S.LayoutContainer className={`ds-layout ${className || ''}`}>
{header ? <S.LayoutHeader className="ds-layout__header">{header}</S.LayoutHeader> : null}
<S.LayoutContent>
<S.LayoutBody>
<>
{left ? (
<S.LayoutSidebarWrapper opened={leftSidebarOpened}>
<S.LayoutSidebarWrapper opened={leftSidebarOpened} openedWidth={leftOpenedWidth}>
<S.LayoutSidebar
className="ds-layout__sidebar"
style={styles && styles.left}
opened={leftSidebarOpened}
openedWidth={leftOpenedWidth}
>
<Scrollbar absolute>
<S.LayoutSidebarInner style={styles && styles.leftInner}>{left}</S.LayoutSidebarInner>
Expand Down Expand Up @@ -58,11 +74,12 @@ const Layout: React.FC<LayoutProps> = ({
</S.LayoutMain>
<>
{right ? (
<S.LayoutSidebarWrapper opened={rightSidebarOpened} right>
<S.LayoutSidebarWrapper opened={rightSidebarOpened} right openedWidth={leftOpenedWidth}>
<S.LayoutSidebar
className="ds-layout__sidebar ds-layout__sidebar--right"
style={styles && styles.right}
opened={rightSidebarOpened}
openedWidth={rightOpenedWidth}
>
<Scrollbar absolute>
<S.LayoutSidebarInner style={styles && styles.rightInner}>{right}</S.LayoutSidebarInner>
Expand Down
2 changes: 2 additions & 0 deletions packages/components/layout/src/Layout.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,6 @@ export type LayoutProps = {
leftOpened?: boolean;
rightOpened?: boolean;
fullPage?: boolean;
leftOpenedWidth?: number;
rightOpenedWidth?: number;
};
Loading

0 comments on commit dfce113

Please sign in to comment.