Skip to content

feat(collapse): collapse panel content support to scroll #185

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

Merged
wewoor merged 2 commits into from
Jun 19, 2021
Merged

feat(collapse): collapse panel content support to scroll #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c63b04
feat(scrollable): scrollable support show shadow in top when overflow
mortalYoung Jun 19, 2021
1af7534
feat(collapse): collapse panel content use custom scoller
mortalYoung Jun 19, 2021
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
17 changes: 10 additions & 7 deletions src/components/collapse/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
collapseExtraClassName,
collapseContentClassName,
} from './base';
import { Scrollable } from '../scrollable';

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

Expand Down Expand Up @@ -249,13 +250,15 @@ export function Collapse(props: ICollapseProps) {
)}
</div>
</div>
<div
className={collapseContentClassName}
data-content={panel.id}
tabIndex={0}
>
{renderPanels(panel, panel.renderPanel)}
</div>
<Scrollable noScrollX isShowShadow>
<div
className={collapseContentClassName}
data-content={panel.id}
tabIndex={0}
>
{renderPanels(panel, panel.renderPanel)}
</div>
</Scrollable>
</div>
);
})}
Expand Down
1 change: 1 addition & 0 deletions src/components/collapse/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ $collapse__extra: #{$collapse}__extra;
&__content {
border: 1px solid transparent;
flex: 1;
width: calc(100% - 3px);

&:focus {
border-color: var(--list-focusOutline);
Expand Down
33 changes: 24 additions & 9 deletions src/components/scrollable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,19 @@ import { prefixClaName, classNames } from 'mo/common/className';

export interface IScrollbarProps extends ScrollbarProps {
autoHideThumb?: boolean;
isShowShadow?: boolean;
}

const defaultSrollableClassName = prefixClaName('scrollable');
const defaultSrollableClassName = prefixClaName('scrollbar');

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

const [isScrolling, setIsScrolling] = useState(false);
const [isMouseOver, setIsMouseOver] = useState(false);
Expand Down Expand Up @@ -58,15 +60,28 @@ export function Scrollable(props: IScrollbarProps) {
return (
<Scrollbar
className={claNames}
ref={scroller}
{...(custom as any)}
wrapperProps={{
renderer: ({ elementRef, style, ...restProps }: any) => (
<div
{...restProps}
ref={elementRef}
style={{ ...style, right: 0 }}
/>
),
renderer: ({ elementRef, style, ...restProps }) => {
const currentTop = scroller.current?.scrollTop || 0;
return (
<>
<div
{...restProps}
ref={elementRef}
style={{ ...style, right: 0 }}
/>
<div
className={classNames(
'shadow',
'top',
isShowShadow && currentTop > 0 && 'active'
)}
/>
</>
);
},
}}
trackXProps={trackProps}
trackYProps={trackProps}
Expand Down
16 changes: 13 additions & 3 deletions src/components/scrollable/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
@import 'mo/style/common';

// #{prefix($scrollbar)} {
// pointer-events: none;
// }
#{$scrollbar} {
.shadow.top {
box-shadow: none;
height: 3px;
position: absolute;
top: 0;
width: 100%;

&.active {
box-shadow: #000 0 6px 6px -6px inset;
}
}
}
2 changes: 1 addition & 1 deletion src/style/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ $input: prefix('input');
$list: prefix('list');
$menu: prefix('menu');
$subMenu: prefix('sub-menu');
$scrollbar: 'scrollbar';
$scrollbar: prefix('scrollbar');
$select: prefix('select');
$tabSwitcher: 'tab-switcher';
$toolBar: prefix('tool-bar');
Expand Down
138 changes: 74 additions & 64 deletions stories/extensions/test/testPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { IColorTheme } from 'mo/model/colorTheme';
import { FileTypes, IEditorTab, TreeNodeModel } from 'mo/model';
import { ILocale } from 'mo/i18n/localization';
import { localize } from 'mo/i18n/localize';
import { Scrollable } from 'mo/components';

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

const addRootFolder = () => {
molecule.folderTree.addRootFolder?.(
new TreeNodeModel({
name: 'molecule_temp',
fileType: FileTypes.RootFolder,
children: [
new TreeNodeModel({
name: 'test_sql.txt',
fileType: FileTypes.File,
icon: molecule.folderTree.getFileIconByExtensionName(
'test_sql.txt',
FileTypes.File
),
content: `show tables;
const children = new Array(50).fill(1).map(
(_, index) =>
new TreeNodeModel({
id: index,
name: `test_sql_${index}.txt`,
fileType: FileTypes.File,
icon: molecule.folderTree.getFileIconByExtensionName(
'test_sql.txt',
FileTypes.File
),
content: `show tables;
SELECT 1;
DESC 6d_target_test;
create table if not exists ods_order_header1213 (
Expand All @@ -236,64 +235,75 @@ order_header_id string comment '订单头id'
)comment '销售订单明细表'
PARTITIONED BY (ds string) lifecycle 1000;
`,
}),
],
})
);
molecule.folderTree.addRootFolder?.(
new TreeNodeModel({
name: 'molecule_temp',
fileType: FileTypes.RootFolder,
children,
})
);
};

return (
<div>
<div style={{ margin: '50px 20px' }}>
<Button onClick={addABar}>Add Bar</Button>
<Button onClick={newEditor}>New Editor</Button>
<Button onClick={openCommand}>Command Palette</Button>
</div>
<div style={{ margin: '50px 20px' }}>
<h1>Select a ColorTheme:</h1>
{this.renderColorThemes()}
</div>
<div style={{ margin: '50px 20px' }}>
<h1>Select a localization language:</h1>
{this.renderLocales()}
{localize('test.id', 'aaaa')}
</div>
<div style={{ margin: '50px 20px' }}>
<h2>Add a new Panel:</h2>
<Button onClick={addPanel}>Add Panel</Button>
<Button onClick={showHidePanel}>Show/Hide Panel</Button>
<Button onClick={updateOutput}>Update Output</Button>
</div>
<div style={{ margin: '50px 20px' }}>
<h2>Notification:</h2>
<Button onClick={addANotification}>
Add A Notification
</Button>
<Button onClick={removeNotification}>
Remove A Notification
</Button>
</div>
<div style={{ margin: '50px 20px' }}>
<h2>MenuBar:</h2>
<Button onClick={appendMenu}>Add MenuBar</Button>
<Button onClick={removeMenu}>Remove MenuBar</Button>
<Button onClick={updateMenu}>Update MenuBar</Button>
<Button onClick={addSettingsItem}>
Append Settings Item
</Button>
</div>
<div style={{ margin: '50px 20px' }}>
<h2>Exploer:</h2>
<Button onClick={addExplorer}>Add Explorer Panel</Button>
<Button onClick={addRootFolder}>Add Root Folder</Button>
</div>
<Scrollable>
<div>
<molecule.component.Button>AAA</molecule.component.Button>
</div>
<div style={{ margin: '50px 20px' }}>
<molecule.MenuBar onClick={() => {}} />
<div style={{ margin: '50px 20px' }}>
<Button onClick={addABar}>Add Bar</Button>
<Button onClick={newEditor}>New Editor</Button>
<Button onClick={openCommand}>Command Palette</Button>
</div>
<div style={{ margin: '50px 20px' }}>
<h1>Select a ColorTheme:</h1>
{this.renderColorThemes()}
</div>
<div style={{ margin: '50px 20px' }}>
<h1>Select a localization language:</h1>
{this.renderLocales()}
{localize('test.id', 'aaaa')}
</div>
<div style={{ margin: '50px 20px' }}>
<h2>Add a new Panel:</h2>
<Button onClick={addPanel}>Add Panel</Button>
<Button onClick={showHidePanel}>Show/Hide Panel</Button>
<Button onClick={updateOutput}>Update Output</Button>
</div>
<div style={{ margin: '50px 20px' }}>
<h2>Notification:</h2>
<Button onClick={addANotification}>
Add A Notification
</Button>
<Button onClick={removeNotification}>
Remove A Notification
</Button>
</div>
<div style={{ margin: '50px 20px' }}>
<h2>MenuBar:</h2>
<Button onClick={appendMenu}>Add MenuBar</Button>
<Button onClick={removeMenu}>Remove MenuBar</Button>
<Button onClick={updateMenu}>Update MenuBar</Button>
<Button onClick={addSettingsItem}>
Append Settings Item
</Button>
</div>
<div style={{ margin: '50px 20px' }}>
<h2>Exploer:</h2>
<Button onClick={addExplorer}>
Add Explorer Panel
</Button>
<Button onClick={addRootFolder}>Add Root Folder</Button>
</div>
<div>
<molecule.component.Button>
AAA
</molecule.component.Button>
</div>
<div style={{ margin: '50px 20px' }}>
<molecule.MenuBar onClick={() => {}} />
</div>
</div>
</div>
</Scrollable>
);
}
}