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

[Emotion] Convert EuiResizableContainer and EuiResizablePanel #6287

Merged
merged 9 commits into from
Oct 18, 2022
Merged

[Emotion] Convert EuiResizableContainer and EuiResizablePanel #6287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9bba9e3
[EuiResizableContainer] Convert styles
cee-chen Oct 3, 2022
f7cf6d8
[EuiResizablePanel] Emotion setup
cee-chen Oct 3, 2022
1b46414
[EuiResizablePanel] Convert & update padding CSS
cee-chen Oct 3, 2022
f0215ff
[EuiResizablePanel] Convert remaining collapse CSS to Emotion
cee-chen Oct 3, 2022
dfe6fab
[EuiResizablePanel] Remove remaining modifier classes in favor of dat…
cee-chen Oct 3, 2022
6d1076a
[EuiResizablePanel] Convert inline style dimensions to logical proper…
cee-chen Oct 3, 2022
3198757
[EuiResizablePanel] Remove Sass files
cee-chen Oct 3, 2022
5ebfea3
[docs] Convert all resizable examples to Typescript
cee-chen Oct 4, 2022
814baa4
Changelog
cee-chen Oct 4, 2022
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
1 change: 1 addition & 0 deletions ...le_container/resizable_container_basic.js → ...e_container/resizable_container_basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { EuiText, EuiResizableContainer } from '../../../../src/components';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO we should be using https://fakerjs.dev/. It has type declarations.


const text = (
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import {
EuiFlexItem,
EuiStat,
EuiPanel,
} from '../../../../src/components';
useGeneratedHtmlId,
} from '../../../../src';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';
import { useGeneratedHtmlId } from '../../../../src/services';

const text = (
<>
Expand Down
16 changes: 8 additions & 8 deletions src-docs/src/views/resizable_container/resizable_container_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizableContainerSource,
},
],
Expand Down Expand Up @@ -257,7 +257,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelsSource,
},
],
Expand Down Expand Up @@ -288,7 +288,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizableContainerResetValuesSource,
},
],
Expand Down Expand Up @@ -322,7 +322,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizableContainerVerticalSource,
},
],
Expand Down Expand Up @@ -365,7 +365,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelCollapsibleSource,
},
],
Expand Down Expand Up @@ -406,7 +406,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelCollapsibleResponsiveSource,
},
],
Expand All @@ -424,7 +424,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelCollapsibleOptsSource,
},
],
Expand Down Expand Up @@ -452,7 +452,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelCollapsibleExtSource,
},
],
Expand Down
9 changes: 4 additions & 5 deletions ...ainer/resizable_container_reset_values.js → ...iner/resizable_container_reset_values.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import React, { useCallback, useState } from 'react';

import {
EuiFlexGroup,
EuiFlexItem,
EuiText,
EuiResizableContainer,
EuiButton,
EuiSpacer,
} from '../../../../src/components';
htmlIdGenerator,
} from '../../../../src';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

import { htmlIdGenerator } from '../../../../src/services';

const text = (
<>
<p>{fake('{{lorem.paragraphs}}')}</p>
Expand All @@ -33,7 +32,7 @@ export default () => {
const [savedSizes, setSavedSizes] = useState(storedSizes);
const [sizes, setSizes] = useState(defaultSizes);
const onPanelWidthChange = useCallback((newSizes) => {
setSizes((prevSizes) => ({
setSizes((prevSizes: Record<string, number>) => ({
...prevSizes,
...newSizes,
}));
Expand Down
2 changes: 1 addition & 1 deletion ...container/resizable_container_vertical.js → ...ontainer/resizable_container_vertical.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import { EuiText, EuiResizableContainer } from '../../../../src/components';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

const text = (
Expand Down
15 changes: 5 additions & 10 deletions ..._container/resizable_panel_collapsible.js → ...container/resizable_panel_collapsible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,36 +9,31 @@ import {
EuiSpacer,
EuiPage,
} from '../../../../src/components';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

const texts = [];

for (let i = 0; i < 4; i++) {
texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
}

export default () => {
const items = [
{
id: 1,
label: 'First item',
text: texts[0],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
active: true,
},
{
id: 2,
label: 'Second item',
text: texts[1],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 3,
label: 'Third item',
text: texts[2],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 4,
label: 'Forth item',
text: texts[3],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
];

Expand Down
19 changes: 12 additions & 7 deletions ...r/resizable_panel_collapsible_external.js → .../resizable_panel_collapsible_external.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,21 @@ const toggleButtons = [
];

export default () => {
const collapseFn = useRef(() => {});
const collapseFn = useRef<Function>(() => {});

const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({});
const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState<
Record<string, boolean>
>({});

const onCollapse = (optionId) => {
const onCollapse = (optionId: string) => {
const newToggleIdToSelectedMap = {
...toggleIdToSelectedMap,
[optionId]: !toggleIdToSelectedMap[optionId],
};
setToggleIdToSelectedMap(newToggleIdToSelectedMap);
};

const onChange = (optionId) => {
const onChange = (optionId: string) => {
onCollapse(optionId);
collapseFn.current(`panel${optionId}`, optionId === '3' ? 'right' : 'left');
};
Expand All @@ -58,8 +60,11 @@ export default () => {
style={{ height: '250px' }}
>
{(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
collapseFn.current = (id, direction = 'left') =>
togglePanel(id, { direction });
collapseFn.current = (
id: string,
direction: 'left' | 'right' = 'left'
) => togglePanel?.(id, { direction });

return (
<>
<EuiResizablePanel id="panel1" initialSize={30} minSize="10%">
Expand Down Expand Up @@ -103,7 +108,7 @@ export default () => {
color="text"
aria-label={'Toggle panel 3'}
iconType="menuRight"
onClick={() => onChange(3)}
onClick={() => onChange('3')}
/>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
15 changes: 5 additions & 10 deletions ...er/resizable_panel_collapsible_options.js → ...r/resizable_panel_collapsible_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,30 @@ import {
EuiText,
EuiPage,
} from '../../../../src/components';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

const texts = [];

for (let i = 0; i < 4; i++) {
texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
}

export default () => {
const items = [
{
id: 1,
label: 'First item',
text: texts[0],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 2,
label: 'Second item',
text: texts[1],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 3,
label: 'Third item',
text: texts[2],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 4,
label: 'Forth item',
text: texts[3],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
];

Expand Down
15 changes: 5 additions & 10 deletions ...resizable_panel_collapsible_responsive.js → ...esizable_panel_collapsible_responsive.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,31 @@ import {
EuiPage,
useIsWithinBreakpoints,
} from '../../../../src';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

const texts = [];

for (let i = 0; i < 4; i++) {
texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
}

export default () => {
const items = [
{
id: 1,
label: 'First item',
text: texts[0],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
active: true,
},
{
id: 2,
label: 'Second item',
text: texts[1],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 3,
label: 'Third item',
text: texts[2],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 4,
label: 'Forth item',
text: texts[3],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
];

Expand Down
0 ...s/resizable_container/resizable_panels.js → .../resizable_container/resizable_panels.tsx
View file
Open in desktop
File renamed without changes.
Loading