Skip to content

Commit

Permalink
[frontend]Separate breadcrumbs from Pathbrowser component (#3431)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nidhibhatg
nidhibhatg authored Aug 21, 2023
1 parent bb1b216 commit a7db927
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 99 deletions.
20 changes: 15 additions & 5 deletions ...top/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FileChooserModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import React, { useState, useEffect } from 'react';
import Modal from 'antd/lib/modal/Modal';
import { Col, Menu, Row, Spin } from 'antd';
import { Col, Menu, Row, Spin, Button } from 'antd';

import HdfsIcon from '../../../components/icons/HdfsIcon';
import S3Icon from '../../../components/icons/S3Icon';
Expand Down Expand Up @@ -124,10 +124,20 @@ const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }
</Col>
<Col span={19}>
<Spin spinning={loadingFiles}>
<PathBrowser
handleFilePathChange={setFilePath}
breadcrumbs={filesData?.breadcrumbs}
></PathBrowser>
<Row className="hue-path-browser-panel" onClick={e => e.stopPropagation()}>
<Col span={18}>
<PathBrowser
handleFilePathChange={setFilePath}
breadcrumbs={filesData?.breadcrumbs}
></PathBrowser>
</Col>
<Col span={3}>
<Button className="hue-path-browser-panel__button">New Folder</Button>
</Col>
<Col span={3}>
<Button className="hue-path-browser-panel__button">Upload</Button>
</Col>
</Row>
</Spin>
</Col>
</Row>
Expand Down
180 changes: 86 additions & 94 deletions desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,102 +92,94 @@ const PathBrowser: React.FC<PathBrowserProps> = ({ breadcrumbs, handleFilePathCh

if (breadcrumbs) {
return (
<Row className="hue-path-browser-panel" onClick={e => e.stopPropagation()}>
<Col span={18}>
{!isEditMode ? (
<div className="hue-path-browser">
<div className="hue-filesystem__icon">
{icons[extractFileSystem(breadcrumbs[0].label)]}
</div>
<div className="hue-path-browser__breadcrumb">
{breadcrumbs.length <= 3 ? (
breadcrumbs.map((item: BreadcrumbData, index: number) => {
return (
<>
<OverflowingItem
key={item.url}
label={index === 0 ? extractFileSystem(item.label) : item.label}
url={item.url}
handleFilePathChange={handleFilePathChange}
componentType="breadcrumb"
/>
{index != breadcrumbs.length - 1 ? (
<RightOutlined className="hue-path-browser__breadcrumb-seperator" />
) : (
<></>
)}
</>
);
})
) : (
<>
<OverflowingItem
label={extractFileSystem(breadcrumbs[0].label)}
url={breadcrumbs[0].url}
handleFilePathChange={handleFilePathChange}
componentType="breadcrumb"
key={breadcrumbs[0].url}
/>
<RightOutlined className="hue-path-browser__breadcrumb-seperator" />
<Dropdown
overlayClassName="hue-path-browser__dropdown"
menu={{
items: extractMenuItems(breadcrumbs.slice(1, breadcrumbs.length - 2)),
className: 'hue-path-browser__dropdown-menu'
}}
trigger={['hover', 'click']}
autoFocus
>
<Button className="hue-path-browser__dropdown-button">..</Button>
</Dropdown>
<RightOutlined className="hue-path-browser__breadcrumb-seperator" />
<OverflowingItem
key={breadcrumbs[breadcrumbs.length - 2].url}
label={breadcrumbs[breadcrumbs.length - 2].label}
url={breadcrumbs[breadcrumbs.length - 2].url}
handleFilePathChange={handleFilePathChange}
componentType="breadcrumb"
/>
<RightOutlined className="hue-path-browser__breadcrumb-seperator" />
<OverflowingItem
key={breadcrumbs[breadcrumbs.length - 1].url}
label={breadcrumbs[breadcrumbs.length - 1].label}
url={breadcrumbs[breadcrumbs.length - 1].url}
handleFilePathChange={handleFilePathChange}
componentType="breadcrumb"
/>
</>
)}
</div>
<Button
className="hue-toggle-breadcrumb-input"
title="Edit path"
onClick={() => {
setIsEditMode(true);
}}
></Button>
<>
{!isEditMode ? (
<div className="hue-path-browser">
<div className="hue-filesystem__icon">
{icons[extractFileSystem(breadcrumbs[0].label)]}
</div>
) : (
<div ref={wrapperRef}>
<Input
prefix={icons[extractFileSystem(breadcrumbs[0].label)]}
defaultValue={decodeURIComponent(breadcrumbs[breadcrumbs.length - 1].url)}
onPressEnter={customPath => {
handleFilePathChange((customPath.target as HTMLInputElement).value);
}}
className="hue-path-browser__input"
autoFocus
></Input>
<div className="hue-path-browser__breadcrumb">
{breadcrumbs.length <= 3 ? (
breadcrumbs.map((item: BreadcrumbData, index: number) => {
return (
<>
<OverflowingItem
key={item.url}
label={index === 0 ? extractFileSystem(item.label) : item.label}
url={item.url}
handleFilePathChange={handleFilePathChange}
componentType="breadcrumb"
/>
{index != breadcrumbs.length - 1 ? (
<RightOutlined className="hue-path-browser__breadcrumb-seperator" />
) : (
<></>
)}
</>
);
})
) : (
<>
<OverflowingItem
label={extractFileSystem(breadcrumbs[0].label)}
url={breadcrumbs[0].url}
handleFilePathChange={handleFilePathChange}
componentType="breadcrumb"
key={breadcrumbs[0].url}
/>
<RightOutlined className="hue-path-browser__breadcrumb-seperator" />
<Dropdown
overlayClassName="hue-path-browser__dropdown"
menu={{
items: extractMenuItems(breadcrumbs.slice(1, breadcrumbs.length - 2)),
className: 'hue-path-browser__dropdown-menu'
}}
trigger={['hover', 'click']}
autoFocus
>
<Button className="hue-path-browser__dropdown-button">..</Button>
</Dropdown>
<RightOutlined className="hue-path-browser__breadcrumb-seperator" />
<OverflowingItem
key={breadcrumbs[breadcrumbs.length - 2].url}
label={breadcrumbs[breadcrumbs.length - 2].label}
url={breadcrumbs[breadcrumbs.length - 2].url}
handleFilePathChange={handleFilePathChange}
componentType="breadcrumb"
/>
<RightOutlined className="hue-path-browser__breadcrumb-seperator" />
<OverflowingItem
key={breadcrumbs[breadcrumbs.length - 1].url}
label={breadcrumbs[breadcrumbs.length - 1].label}
url={breadcrumbs[breadcrumbs.length - 1].url}
handleFilePathChange={handleFilePathChange}
componentType="breadcrumb"
/>
</>
)}
</div>
)}
</Col>
<Col span={3}>
<Button className="hue-path-browser-panel__button">New Folder</Button>
</Col>
<Col span={3}>
<Button className="hue-path-browser-panel__button">Upload</Button>
</Col>
</Row>
<Button
className="hue-toggle-breadcrumb-input"
title="Edit path"
onClick={() => {
setIsEditMode(true);
}}
></Button>
</div>
) : (
<div ref={wrapperRef}>
<Input
prefix={icons[extractFileSystem(breadcrumbs[0].label)]}
defaultValue={decodeURIComponent(breadcrumbs[breadcrumbs.length - 1].url)}
onPressEnter={customPath => {
handleFilePathChange((customPath.target as HTMLInputElement).value);
}}
className="hue-path-browser__input"
autoFocus
></Input>
</div>
)}
</>
);
}
};
Expand Down

0 comments on commit a7db927

Please sign in to comment.