Skip to content

Commit c2fb3d5

Browse files
mortalYoungmortalYoung
authored
feat(collapse): collapse panel content support to scroll (#185)
* feat(scrollable): scrollable support show shadow in top when overflow * feat(collapse): collapse panel content use custom scoller
1 parent eb70c6d commit c2fb3d5

File tree

6 files changed

+123
-84
lines changed

6 files changed

+123
-84
lines changed

‎src/components/collapse/index.tsx

+10-7
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
collapseExtraClassName,
1414
collapseContentClassName,
1515
} from './base';
16+
import { Scrollable } from '../scrollable';
1617

1718
type RenderFunctionProps = (data: DataBaseProps) => React.ReactNode;
1819

@@ -249,13 +250,15 @@ export function Collapse(props: ICollapseProps) {
249250
)}
250251
</div>
251252
</div>
252-
<div
253-
className={collapseContentClassName}
254-
data-content={panel.id}
255-
tabIndex={0}
256-
>
257-
{renderPanels(panel, panel.renderPanel)}
258-
</div>
253+
<Scrollable noScrollX isShowShadow>
254+
<div
255+
className={collapseContentClassName}
256+
data-content={panel.id}
257+
tabIndex={0}
258+
>
259+
{renderPanels(panel, panel.renderPanel)}
260+
</div>
261+
</Scrollable>
259262
</div>
260263
);
261264
})}

‎src/components/collapse/style.scss

+1
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ $collapse__extra: #{$collapse}__extra;
7272
&__content {
7373
border: 1px solid transparent;
7474
flex: 1;
75+
width: calc(100% - 3px);
7576

7677
&:focus {
7778
border-color: var(--list-focusOutline);

‎src/components/scrollable/index.tsx

+24-9
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@ import { prefixClaName, classNames } from 'mo/common/className';
55

66
export interface IScrollbarProps extends ScrollbarProps {
77
autoHideThumb?: boolean;
8+
isShowShadow?: boolean;
89
}
910

10-
const defaultSrollableClassName = prefixClaName('scrollable');
11+
const defaultSrollableClassName = prefixClaName('scrollbar');
1112

1213
/**
1314
* The react-scrollbars-custom component default not supports auto hide thumb option,
1415
* the below implementation from this issue:
1516
* https://github.com/xobotyi/react-scrollbars-custom/issues/46
1617
*/
1718
export function Scrollable(props: IScrollbarProps) {
18-
const { className, children, ...custom } = props;
19+
const { className, children, isShowShadow = false, ...custom } = props;
20+
const scroller = React.useRef<Scrollbar>(null);
1921

2022
const [isScrolling, setIsScrolling] = useState(false);
2123
const [isMouseOver, setIsMouseOver] = useState(false);
@@ -58,15 +60,28 @@ export function Scrollable(props: IScrollbarProps) {
5860
return (
5961
<Scrollbar
6062
className={claNames}
63+
ref={scroller}
6164
{...(custom as any)}
6265
wrapperProps={{
63-
renderer: ({ elementRef, style, ...restProps }: any) => (
64-
<div
65-
{...restProps}
66-
ref={elementRef}
67-
style={{ ...style, right: 0 }}
68-
/>
69-
),
66+
renderer: ({ elementRef, style, ...restProps }) => {
67+
const currentTop = scroller.current?.scrollTop || 0;
68+
return (
69+
<>
70+
<div
71+
{...restProps}
72+
ref={elementRef}
73+
style={{ ...style, right: 0 }}
74+
/>
75+
<div
76+
className={classNames(
77+
'shadow',
78+
'top',
79+
isShowShadow && currentTop > 0 && 'active'
80+
)}
81+
/>
82+
</>
83+
);
84+
},
7085
}}
7186
trackXProps={trackProps}
7287
trackYProps={trackProps}

‎src/components/scrollable/style.scss

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
@import 'mo/style/common';
22

3-
// #{prefix($scrollbar)} {
4-
// pointer-events: none;
5-
// }
3+
#{$scrollbar} {
4+
.shadow.top {
5+
box-shadow: none;
6+
height: 3px;
7+
position: absolute;
8+
top: 0;
9+
width: 100%;
10+
11+
&.active {
12+
box-shadow: #000 0 6px 6px -6px inset;
13+
}
14+
}
15+
}

‎src/style/common.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $input: prefix('input');
1616
$list: prefix('list');
1717
$menu: prefix('menu');
1818
$subMenu: prefix('sub-menu');
19-
$scrollbar: 'scrollbar';
19+
$scrollbar: prefix('scrollbar');
2020
$select: prefix('select');
2121
$tabSwitcher: 'tab-switcher';
2222
$toolBar: prefix('tool-bar');

‎stories/extensions/test/testPane.tsx

+74-64
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { IColorTheme } from 'mo/model/colorTheme';
77
import { FileTypes, IEditorTab, TreeNodeModel } from 'mo/model';
88
import { ILocale } from 'mo/i18n/localization';
99
import { localize } from 'mo/i18n/localize';
10+
import { Scrollable } from 'mo/components';
1011

1112
export default class TestPane extends React.Component {
1213
constructor(props) {
@@ -211,19 +212,17 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
211212
};
212213

213214
const addRootFolder = () => {
214-
molecule.folderTree.addRootFolder?.(
215-
new TreeNodeModel({
216-
name: 'molecule_temp',
217-
fileType: FileTypes.RootFolder,
218-
children: [
219-
new TreeNodeModel({
220-
name: 'test_sql.txt',
221-
fileType: FileTypes.File,
222-
icon: molecule.folderTree.getFileIconByExtensionName(
223-
'test_sql.txt',
224-
FileTypes.File
225-
),
226-
content: `show tables;
215+
const children = new Array(50).fill(1).map(
216+
(_, index) =>
217+
new TreeNodeModel({
218+
id: index,
219+
name: `test_sql_${index}.txt`,
220+
fileType: FileTypes.File,
221+
icon: molecule.folderTree.getFileIconByExtensionName(
222+
'test_sql.txt',
223+
FileTypes.File
224+
),
225+
content: `show tables;
227226
SELECT 1;
228227
DESC 6d_target_test;
229228
create table if not exists ods_order_header1213 (
@@ -236,64 +235,75 @@ order_header_id string comment '订单头id'
236235
)comment '销售订单明细表'
237236
PARTITIONED BY (ds string) lifecycle 1000;
238237
`,
239-
}),
240-
],
238+
})
239+
);
240+
molecule.folderTree.addRootFolder?.(
241+
new TreeNodeModel({
242+
name: 'molecule_temp',
243+
fileType: FileTypes.RootFolder,
244+
children,
241245
})
242246
);
243247
};
244248

245249
return (
246-
<div>
247-
<div style={{ margin: '50px 20px' }}>
248-
<Button onClick={addABar}>Add Bar</Button>
249-
<Button onClick={newEditor}>New Editor</Button>
250-
<Button onClick={openCommand}>Command Palette</Button>
251-
</div>
252-
<div style={{ margin: '50px 20px' }}>
253-
<h1>Select a ColorTheme:</h1>
254-
{this.renderColorThemes()}
255-
</div>
256-
<div style={{ margin: '50px 20px' }}>
257-
<h1>Select a localization language:</h1>
258-
{this.renderLocales()}
259-
{localize('test.id', 'aaaa')}
260-
</div>
261-
<div style={{ margin: '50px 20px' }}>
262-
<h2>Add a new Panel:</h2>
263-
<Button onClick={addPanel}>Add Panel</Button>
264-
<Button onClick={showHidePanel}>Show/Hide Panel</Button>
265-
<Button onClick={updateOutput}>Update Output</Button>
266-
</div>
267-
<div style={{ margin: '50px 20px' }}>
268-
<h2>Notification:</h2>
269-
<Button onClick={addANotification}>
270-
Add A Notification
271-
</Button>
272-
<Button onClick={removeNotification}>
273-
Remove A Notification
274-
</Button>
275-
</div>
276-
<div style={{ margin: '50px 20px' }}>
277-
<h2>MenuBar:</h2>
278-
<Button onClick={appendMenu}>Add MenuBar</Button>
279-
<Button onClick={removeMenu}>Remove MenuBar</Button>
280-
<Button onClick={updateMenu}>Update MenuBar</Button>
281-
<Button onClick={addSettingsItem}>
282-
Append Settings Item
283-
</Button>
284-
</div>
285-
<div style={{ margin: '50px 20px' }}>
286-
<h2>Exploer:</h2>
287-
<Button onClick={addExplorer}>Add Explorer Panel</Button>
288-
<Button onClick={addRootFolder}>Add Root Folder</Button>
289-
</div>
250+
<Scrollable>
290251
<div>
291-
<molecule.component.Button>AAA</molecule.component.Button>
292-
</div>
293-
<div style={{ margin: '50px 20px' }}>
294-
<molecule.MenuBar onClick={() => {}} />
252+
<div style={{ margin: '50px 20px' }}>
253+
<Button onClick={addABar}>Add Bar</Button>
254+
<Button onClick={newEditor}>New Editor</Button>
255+
<Button onClick={openCommand}>Command Palette</Button>
256+
</div>
257+
<div style={{ margin: '50px 20px' }}>
258+
<h1>Select a ColorTheme:</h1>
259+
{this.renderColorThemes()}
260+
</div>
261+
<div style={{ margin: '50px 20px' }}>
262+
<h1>Select a localization language:</h1>
263+
{this.renderLocales()}
264+
{localize('test.id', 'aaaa')}
265+
</div>
266+
<div style={{ margin: '50px 20px' }}>
267+
<h2>Add a new Panel:</h2>
268+
<Button onClick={addPanel}>Add Panel</Button>
269+
<Button onClick={showHidePanel}>Show/Hide Panel</Button>
270+
<Button onClick={updateOutput}>Update Output</Button>
271+
</div>
272+
<div style={{ margin: '50px 20px' }}>
273+
<h2>Notification:</h2>
274+
<Button onClick={addANotification}>
275+
Add A Notification
276+
</Button>
277+
<Button onClick={removeNotification}>
278+
Remove A Notification
279+
</Button>
280+
</div>
281+
<div style={{ margin: '50px 20px' }}>
282+
<h2>MenuBar:</h2>
283+
<Button onClick={appendMenu}>Add MenuBar</Button>
284+
<Button onClick={removeMenu}>Remove MenuBar</Button>
285+
<Button onClick={updateMenu}>Update MenuBar</Button>
286+
<Button onClick={addSettingsItem}>
287+
Append Settings Item
288+
</Button>
289+
</div>
290+
<div style={{ margin: '50px 20px' }}>
291+
<h2>Exploer:</h2>
292+
<Button onClick={addExplorer}>
293+
Add Explorer Panel
294+
</Button>
295+
<Button onClick={addRootFolder}>Add Root Folder</Button>
296+
</div>
297+
<div>
298+
<molecule.component.Button>
299+
AAA
300+
</molecule.component.Button>
301+
</div>
302+
<div style={{ margin: '50px 20px' }}>
303+
<molecule.MenuBar onClick={() => {}} />
304+
</div>
295305
</div>
296-
</div>
306+
</Scrollable>
297307
);
298308
}
299309
}

0 commit comments

Comments
 (0)