Skip to content

Commit 886c55f

Browse files
SevereCloudSevereCloud
committed
feat: add CustomScrollView.Tint
1 parent 6e3da5e commit 886c55f

File tree

7 files changed

+485
-20
lines changed

7 files changed

+485
-20
lines changed

‎packages/vkui/src/components/CustomScrollView/CustomScrollView.stories.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
22
import type { PartialStoryFn } from 'storybook/internal/types';
33
import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
44
import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
5-
import { Div } from '../Div/Div';
5+
import { Box } from '../Box/Box';
66
import { CustomScrollView, type CustomScrollViewProps } from './CustomScrollView';
77

88
const Wrapper = (Story: PartialStoryFn<ReactRenderer>) => (
@@ -36,7 +36,9 @@ export const Playground: Story = {
3636
args: {
3737
enableHorizontalScroll: true,
3838
children: (
39-
<Div
39+
<Box
40+
paddingInline="var(--vkui--size_base_padding_horizontal--regular)"
41+
paddingBlock="var(--vkui--size_base_padding_vertical--regular)"
4042
style={{
4143
width: 1440,
4244
boxSizing: 'content-box',
@@ -89,7 +91,7 @@ export const Playground: Story = {
8991
in quam eget quam lacinia pharetra. Phasellus ipsum magna, aliquet id elit eget, cursus
9092
tincidunt ex. In rhoncus turpis turpis, et viverra ex malesuada vel. Donec nisi tellus,
9193
mollis et posuere vel, dictum eget neque.
92-
</Div>
94+
</Box>
9395
),
9496
},
9597
decorators: [Wrapper],

‎packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
'use client';
2-
31
import * as React from 'react';
42
import { classNames } from '@vkontakte/vkjs';
3+
import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
54
import type { HasRootRef } from '../../types';
5+
import { CustomScrollViewTint } from './Tint/CustomScrollViewTint';
66
import styles from './CustomScrollView.module.css';
77

88
const overscrollBehaviorClassNames = {
@@ -19,18 +19,6 @@ const scrollBehaviorClassNames = {
1919
export interface CustomScrollViewProps
2020
extends React.AllHTMLAttributes<HTMLDivElement>,
2121
HasRootRef<HTMLDivElement> {
22-
/**
23-
* `className` для компонента.
24-
*/
25-
className?: HTMLDivElement['className'];
26-
/**
27-
* Обработчик события `scroll`.
28-
*/
29-
onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
30-
/**
31-
* Содержимое.
32-
*/
33-
children: React.ReactNode;
3422
/**
3523
* Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior).
3624
*/
@@ -58,7 +46,6 @@ export const CustomScrollView = ({
5846
className,
5947
children,
6048
enableHorizontalScroll = false,
61-
onScroll,
6249
getRootRef,
6350
overscrollBehavior = 'auto',
6451
scrollBehavior = 'auto',
@@ -76,10 +63,15 @@ export const CustomScrollView = ({
7663
scrollbarHidden && styles.scrollbarHidden,
7764
)}
7865
ref={getRootRef}
79-
onScroll={onScroll}
8066
{...restProps}
8167
>
8268
{children}
8369
</div>
8470
);
8571
};
72+
73+
CustomScrollView.Tint = CustomScrollViewTint;
74+
75+
if (process.env.NODE_ENV !== 'production') {
76+
defineComponentDisplayNames(CustomScrollView.Tint, 'CustomScrollView.Tint');
77+
}

‎packages/vkui/src/components/CustomScrollView/Tint/CustomScrollViewTint.module.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.host {
2+
position: relative;
3+
inline-size: 100%;
4+
block-size: 100%;
5+
6+
--vkui_internal--CustomScrollView_tint_color: var(--vkui--color_background_content);
7+
}
8+
9+
.tint {
10+
position: absolute;
11+
}
12+
13+
/* stylelint-disable csstools/use-logical -- прокрутка рассчитывается по физическим величинам */
14+
.tintTop,
15+
.tintBottom {
16+
right: 0;
17+
left: 0;
18+
height: 40px;
19+
}
20+
21+
.tintTop {
22+
top: 0;
23+
background: linear-gradient(
24+
to bottom,
25+
var(--vkui_internal--CustomScrollView_tint_color),
26+
transparent
27+
);
28+
}
29+
30+
.tintBottom {
31+
bottom: 0;
32+
background: linear-gradient(
33+
to top,
34+
var(--vkui_internal--CustomScrollView_tint_color),
35+
transparent
36+
);
37+
}
38+
39+
.tintLeft,
40+
.tintRight {
41+
top: 0;
42+
bottom: 0;
43+
width: 40px;
44+
}
45+
46+
.tintLeft {
47+
left: 0;
48+
background: linear-gradient(
49+
to right,
50+
var(--vkui_internal--CustomScrollView_tint_color),
51+
transparent
52+
);
53+
}
54+
55+
.tintRight {
56+
right: 0;
57+
background: linear-gradient(
58+
to left,
59+
var(--vkui_internal--CustomScrollView_tint_color),
60+
transparent
61+
);
62+
}
63+
64+
/* stylelint-enable csstools/use-logical */

‎packages/vkui/src/components/CustomScrollView/Tint/CustomScrollViewTint.stories.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
2+
import type { PartialStoryFn } from 'storybook/internal/types';
3+
import { CanvasFullLayout, DisableCartesianParam } from '../../../storybook/constants';
4+
import { createStoryParameters } from '../../../testing/storybook/createStoryParameters';
5+
import { Box } from '../../Box/Box';
6+
import { CustomScrollView } from '../CustomScrollView';
7+
import { CustomScrollViewTint, type CustomScrollViewTintProps } from './CustomScrollViewTint';
8+
9+
const Wrapper = (Story: PartialStoryFn<ReactRenderer>) => (
10+
<div
11+
style={{
12+
borderRadius: 10,
13+
border: '1px solid #000',
14+
height: '100%',
15+
width: '100%',
16+
maxWidth: '600px',
17+
maxHeight: '300px',
18+
boxSizing: 'content-box',
19+
overflow: 'hidden',
20+
}}
21+
>
22+
<Story />
23+
</div>
24+
);
25+
26+
const story: Meta<CustomScrollViewTintProps> = {
27+
title: 'Utils/CustomScrollView/Tint',
28+
component: CustomScrollViewTint,
29+
parameters: createStoryParameters(
30+
'CustomScrollViewTint',
31+
CanvasFullLayout,
32+
DisableCartesianParam,
33+
),
34+
tags: ['Утилиты'],
35+
};
36+
37+
export default story;
38+
39+
type Story = StoryObj<CustomScrollViewTintProps>;
40+
41+
export const Playground: Story = {
42+
args: {
43+
tintColor: 'var(--vkui--color_background)',
44+
children: (props) => (
45+
<CustomScrollView {...props}>
46+
<Box
47+
paddingInline="var(--vkui--size_base_padding_horizontal--regular)"
48+
paddingBlock="var(--vkui--size_base_padding_vertical--regular)"
49+
>
50+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a
51+
commodo sapien. Vivamus a urna leo. Integer iaculis dignissim urna, sit amet vestibulum
52+
diam bibendum a. Donec eu arcu ut augue porttitor faucibus. Vestibulum nec pretium tortor,
53+
sit amet congue nunc. Aenean ullamcorper ex sem, sed interdum quam consequat et.
54+
Vestibulum a ex non diam fringilla feugiat. Nunc eu tellus sed leo elementum cursus.
55+
Mauris blandit porta egestas. Curabitur eget justo elementum, malesuada lacus ut, congue
56+
mauris. Integer orci nisi, convallis vitae dapibus sit amet, molestie a risus. Aenean
57+
ultricies lacus eros, sit amet condimentum urna malesuada et. Sed quis dolor tempus orci
58+
fringilla volutpat in sed velit. Aenean aliquet bibendum pretium.
59+
<br />
60+
<br />
61+
Cras pulvinar lobortis purus. Donec placerat suscipit leo vitae sodales. Phasellus
62+
convallis lorem vitae arcu finibus pellentesque. In imperdiet vel leo a euismod. Nam sed
63+
odio a neque venenatis suscipit a placerat magna. Mauris magna nisl, consequat nec augue
64+
vitae, ultricies scelerisque ante. Phasellus pharetra risus eget imperdiet sodales.
65+
Integer dignissim auctor semper. Nulla odio odio, euismod ut interdum in, bibendum sed
66+
massa. Proin rutrum molestie massa in ultrices. Donec eu euismod turpis, eget lobortis
67+
lorem. Nulla facilisi. Nam lacinia posuere turpis, sed laoreet turpis auctor nec.
68+
<br />
69+
<br />
70+
Curabitur eu fermentum mauris. Phasellus malesuada consectetur mollis. Pellentesque
71+
pulvinar mauris turpis. Integer neque dolor, semper quis neque et, gravida commodo eros.
72+
Duis efficitur ex a turpis blandit tincidunt. Mauris sem mi, imperdiet quis ligula sit
73+
amet, fermentum vulputate felis. Phasellus eu ullamcorper dolor, porttitor pulvinar diam.
74+
Aliquam euismod, mauris nec varius lacinia, ligula libero vulputate leo, ut tristique
75+
massa nisi vitae tortor. Phasellus purus elit, gravida sit amet neque id, aliquam rutrum
76+
dui. Maecenas luctus sem vitae molestie porttitor. Cras viverra mauris risus, at
77+
sollicitudin ipsum interdum eu. Sed sit amet tempor enim.
78+
<br />
79+
<br />
80+
In hac habitasse platea dictumst. Etiam luctus erat metus, quis efficitur quam vulputate
81+
quis. Duis ultricies non mauris condimentum molestie. Maecenas sollicitudin ex sem, quis
82+
ultrices libero blandit eu. Vivamus in turpis pulvinar, malesuada enim at, hendrerit
83+
magna. Proin eu nulla eget arcu pretium pharetra. Sed ullamcorper pulvinar est eu dapibus.
84+
Cras at varius justo. In ex odio, condimentum id pellentesque a, sodales ut diam.
85+
<br />
86+
<br />
87+
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
88+
Nam aliquet tempor laoreet. Maecenas eu pulvinar diam. Pellentesque habitant morbi
89+
tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas et elit eros.
90+
Quisque ullamcorper sodales nisi, eleifend aliquet metus venenatis in. Aliquam ornare a
91+
lacus in tincidunt. Cras vel tristique metus. Sed vitae nisl at nisl imperdiet
92+
sollicitudin. Sed sit amet enim in lectus imperdiet interdum condimentum et diam. Proin
93+
venenatis sit amet diam ac vulputate. Donec mauris orci, semper volutpat nunc ut,
94+
efficitur condimentum dolor. Vivamus in quam eget quam lacinia pharetra. Phasellus ipsum
95+
magna, aliquet id elit eget, cursus tincidunt ex. In rhoncus turpis turpis, et viverra ex
96+
malesuada vel. Donec nisi tellus, mollis et posuere vel, dictum eget neque.
97+
</Box>
98+
</CustomScrollView>
99+
),
100+
},
101+
decorators: [Wrapper],
102+
};

0 commit comments

Comments
 (0)