Skip to content

Commit afe88dd

Browse files
committed
feature. Modify TPage panel
- Resizing panel width - Add infoPanelTitle prop
1 parent 0868298 commit afe88dd

File tree

4 files changed

+36
-21
lines changed

4 files changed

+36
-21
lines changed

src/components/screen/page/TPage.interface.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ export interface TPageProps extends TBaseProps {
1212
children: ReactNode,
1313

1414
title?: string,
15+
16+
infoPanelTitle?: string,
1517
infoPanelContent?: ReactNode,
1618

1719
contentDirection?: contentDirection,

src/components/screen/page/TPage.tsx

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {MouseEvent, MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState} from 'react';
22
import TIcon from '../../icon/TIcon';
3-
import {contentDirection, TPageProps} from './TPage.interface';
3+
import {TPageProps} from '@/components';
44

5-
const defaultPanelWidth = '360px';
5+
const defaultPanelWidth = '280px';
66

77
const TPage = (props: TPageProps) => {
88

9+
910
// region [Hooks]
1011

1112
const [isInfoPanelOpened, setIsInfoPanelOpened] = useState<boolean>(false);
@@ -14,7 +15,6 @@ const TPage = (props: TPageProps) => {
1415
const [panelWidth, setPanelWidth] = useState<string>(defaultPanelWidth);
1516
const rootRef = useRef<HTMLDivElement>(null);
1617

17-
1818
// endregion
1919

2020

@@ -54,7 +54,6 @@ const TPage = (props: TPageProps) => {
5454
document.addEventListener('mouseup', mouseUpHandler, {once: true});
5555
}) as MouseEventHandler;
5656

57-
5857
// endregion
5958

6059

@@ -84,12 +83,18 @@ const TPage = (props: TPageProps) => {
8483
return clazz.join(' ');
8584
}, [isInfoPanelOpened, isInfoPanelResizing]);
8685

86+
8787
const contentAreaClass = useMemo(() : string => {
8888

8989
return `t-page__content-area--direction-${props.contentDirection}`;
90-
9190
}, [props.contentDirection]);
9291

92+
93+
const containerWidth = useMemo(() => {
94+
95+
return isInfoPanelOpened ? `calc(100% - ${panelWidth})` : '100%';
96+
}, [isInfoPanelOpened, panelWidth]);
97+
9398
// endregion
9499

95100

@@ -111,7 +116,7 @@ const TPage = (props: TPageProps) => {
111116
ref={rootRef}
112117
id={props.id}
113118
data-testid={'t-page-root'}>
114-
<div className={'t-page__content-container'}>
119+
<div className={'t-page__content-container'} style={{width: containerWidth}}>
115120
<div className={'t-page__title-area'}>
116121
<h3 className={'t-page__title-area__title'}>{props.title}</h3>
117122

@@ -148,6 +153,13 @@ const TPage = (props: TPageProps) => {
148153
clickable
149154
onClick={onClickInfoClose}>close</TIcon>
150155
</div>
156+
{
157+
props.infoPanelTitle && (
158+
<div className={'t-page__information-area__title'}>
159+
{props.infoPanelTitle}
160+
</div>
161+
)
162+
}
151163
<div className={'t-page__information-area__content'}>
152164
{props.infoPanelContent}
153165
</div>

src/styles/component/screen/page/TPage.scss

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@
3737
}
3838

3939
.t-page__information-area {
40-
$information-header-height: 68px;
4140

4241
transition: flex 0.3s;
4342
position: relative;
44-
flex: 0 0 360px;
43+
flex: 0 0 280px;
4544

4645
.t-page__information-area__container {
4746
width: 100%;
4847
height: 100%;
48+
padding: $t-spacing-56 $t-spacing-24 0 $t-spacing-24;
4949
border-left: 1px solid $t-grid-border-color--01;
5050
position: absolute;
5151
transition: width 0.3s, right 0.3s;
@@ -62,22 +62,17 @@
6262
flex: 0 0 0;
6363
transition: all 0.3s;
6464
.t-page__information-area__container {
65-
width: 360px;
66-
right: -360px;
65+
width: 280px;
66+
right: -280px;
6767
}
6868
}
6969

7070

7171
.t-page__information-area__header {
72-
height: $information-header-height;
7372
display: flex;
7473
align-items: center;
7574
flex-direction: row-reverse;
76-
77-
.t-page__information-area__header__close {
78-
font-size: 28px;
79-
margin-right: 32px;
80-
}
75+
margin-bottom: $t-spacing-20;
8176
}
8277

8378
.t-page__information-area__resizer {
@@ -96,16 +91,20 @@
9691
}
9792
}
9893

94+
.t-page__information-area__title {
95+
@include typo-subtitle-2;
96+
margin-bottom: $t-spacing-10;
97+
}
9998

10099
.t-page__information-area__content {
101100
position: absolute;
102-
padding: 20px $t-spacing-32;
103101
line-height: $t-line-height-body;
104-
width: 100%;
105-
height: calc(100% - $information-header-height);
102+
width: calc(100% - $t-spacing-24 * 2);
103+
white-space: pre-line;
106104
overflow-y: auto;
107-
}
108105

106+
@include typo-body-3;
107+
}
109108

110109
}
111110

stories/components/screen/page/TPage.stories.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ export default meta;
1212

1313
type Story = StoryObj<typeof TPage>;
1414

15+
const infoPanelTitle = 'Lorem ipsum dolor sit amet';
16+
1517
const infoContent = `
1618
Lorem ipsum dolor sit amet, consec
1719
tetur adipiscing elit. In nec consecte
@@ -77,7 +79,7 @@ const Template = (args: TPageProps) => {
7779

7880
export const TopBottom: Story = {
7981
render: Template,
80-
args: {infoPanelContent: infoContent},
82+
args: {infoPanelTitle, infoPanelContent: infoContent},
8183
};
8284

8385
export const LeftRight: Story = {

0 commit comments

Comments
 (0)