@progress/kendo-themes-html 7.1.0-dev.8 → 7.1.0-dev.9

package/src/filemanager/tests/filemanager-gridview.tsx

@@ -1,40 +1,26 @@
-import { BreadcrumbRoot, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
-import { Button } from '../../button';
-import { ButtonGroup } from '../../button-group';
+import { FileManagerBreadcrumb, FileManagerGrid, FileManagerTreeview, FilePreview } from '..';
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Icon } from '../../icon';
-import { Toolbar } from '../../toolbar';
-import { Treeview, TreeviewItem } from '../../treeview';
+import { Splitter, SplitterPane } from '../../splitter';
+import { Table, TableRow, TableTbody, TableTd, TableTh, TableThead } from '../../table';
+import { TreeviewItem } from '../../treeview';
 
 
 export default () =>(
     <>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
-            <span>File Manager Grid View</span>
-            <div className="k-widget k-filemanager">
-                {/* Header */}
-                <div className="k-filemanager-header">
-                    <Toolbar className="k-filemanager-toolbar" resizable>
-                        <Button>New Folder</Button>
-                        <Button>Upload</Button>
-                        <ButtonGroup>
-                            <Button icon="grid-layout"></Button>
-                            <Button icon="grid" selected></Button>
-                        </ButtonGroup>
-                    </Toolbar>
-                </div>
-
-                <div className="k-filemanager-content-container">
-                    {/* Navigation */}
-                    <div className="k-filemanager-navigation">
-                        <Treeview className="k-filemanager-treeview">
+            <span>Grid View</span>
+            <FileManagerGrid>
+                <Splitter className="k-filemanager-splitter">
+                    <SplitterPane className="k-filemanager-navigation" resizable={false} scrollable flexBasis="20%">
+                        <FileManagerTreeview>
                             <TreeviewItem text="Folder" />
-                        </Treeview>
-                    </div>
+                        </FileManagerTreeview>
+                    </SplitterPane>
 
-                    {/* Content */}
-                    <div className="k-filemanager-content">
-                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
+                    <SplitterPane className="k-filemanager-content" scrollable>
+                        <FileManagerBreadcrumb>
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -42,21 +28,20 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </BreadcrumbRoot>
+                        </FileManagerBreadcrumb>
 
-                        {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
                             <div className="k-grid-header">
                                 <div className="k-grid-header-wrap k-auto-scrollable">
-                                    <table className="k-table k-table-md k-grid-header-table">
+                                    <Table className="k-table-md k-grid-header-table">
                                         <colgroup>
                                             <col />
                                             <col />
                                             <col />
                                         </colgroup>
-                                        <thead className="k-table-thead">
-                                            <tr className="k-table-row">
-                                                <th className="k-table-th k-header k-sorted">
+                                        <TableThead>
+                                            <TableRow>
+                                                <TableTh className="k-header k-sorted">
                                                     <span className="k-cell-inner">
                                                         <span className="k-link">
                                                             <span className="k-column-title">Name</span>
@@ -65,182 +50,59 @@ export default () =>(
                                                             </span>
                                                         </span>
                                                     </span>
-                                                </th>
-                                                <th className="k-table-th k-header">
+                                                </TableTh>
+                                                <TableTh className="k-header">
                                                     <span className="k-cell-inner">
                                                         <span className="k-link">
                                                             <span className="k-column-title">Date Created</span>
                                                         </span>
                                                     </span>
-                                                </th>
-                                                <th className="k-table-th k-header">
+                                                </TableTh>
+                                                <TableTh className="k-header">
                                                     <span className="k-cell-inner">
                                                         <span className="k-link">
                                                             <span className="k-column-title">File Size</span>
                                                         </span>
                                                     </span>
-                                                </th>
-                                            </tr>
-                                        </thead>
-                                    </table>
+                                                </TableTh>
+                                            </TableRow>
+                                        </TableThead>
+                                    </Table>
+
                                 </div>
                             </div>
                             <div className="k-grid-content k-auto-scrollable">
-                                <table className="k-table k-table-md k-grid-table k-selectable">
+                                <Table className="k-table-md k-grid-table k-selectable">
                                     <colgroup>
                                         <col className="k-sorted" />
                                         <col />
                                         <col />
                                     </colgroup>
-                                    <tbody className="k-table-tbody">
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td">
-                                                <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" /></span>
-                                                <span className="k-file-name">Folder</span>
-                                            </td>
-                                            <td className="k-table-td">13/12/2019 at 12:22:04 PM</td>
-                                            <td className="k-table-td">0</td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td">
-                                                <span className="k-file-preview"><Icon className="k-file-icon" icon="file" /></span>
-                                                <span className="k-file-name">file.png</span>
-                                            </td>
-                                            <td className="k-table-td">13/12/2019 at 12:22:04 PM</td>
-                                            <td className="k-table-td">73289</td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    {/* Preview */}
-                    <div className="k-filemanager-preview" hidden></div>
-                </div>
-            </div>
-
-            <span>File Manager Grid View Resizing</span>
-            <div className="k-widget k-filemanager">
-                {/* Header */}
-                <div className="k-filemanager-header">
-                    <Toolbar className="k-filemanager-toolbar" resizable>
-                        <Button>New Folder</Button>
-                        <Button>Upload</Button>
-                        <ButtonGroup>
-                            <Button icon="grid-layout"></Button>
-                            <Button icon="grid" selected></Button>
-                        </ButtonGroup>
-                    </Toolbar>
-                </div>
-
-                <div className="k-filemanager-content-container">
-                    {/* Navigation */}
-                    <div className="k-filemanager-navigation" style={{ width: "234px" }}>
-                        <div className="k-filemanager-navigation-container">
-                            <Treeview className="k-filemanager-treeview">
-                                <TreeviewItem text="Folder" />
-                            </Treeview>
-                        </div>
-                    </div>
-
-                    {/* Resizing Handle */}
-                    <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal k-filemanager-splitbar-navigation k-focus">
-                        <span className="k-resize-handle"></span>
-                    </div>
-
-                    {/* Content */}
-                    <div className="k-filemanager-content">
-                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
-                            <BreadcrumbContainer>
-                                <BreadcrumbItem root>
-                                    <BreadcrumbLink root icon>
-                                        <Icon icon="home" />
-                                    </BreadcrumbLink>
-                                </BreadcrumbItem>
-                            </BreadcrumbContainer>
-                        </BreadcrumbRoot>
-
-                        {/* View */}
-                        <div className="k-filemanager-view k-filemanager-view-grid">
-                            <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
-                                <div className="k-grid-header">
-                                    <div className="k-grid-header-wrap k-auto-scrollable">
-                                        <table className="k-table k-table-md k-grid-header-table">
-                                            <colgroup>
-                                                <col />
-                                                <col />
-                                                <col />
-                                            </colgroup>
-                                            <thead className="k-table-thead">
-                                                <tr className="k-table-row">
-                                                    <th className="k-table-th k-header k-sorted">
-                                                        <span className="k-cell-inner">
-                                                            <span className="k-link">
-                                                                <span className="k-column-title">Name</span>
-                                                                <span className="k-sort-icon">
-                                                                    <Icon icon="sort-asc-small" />
-                                                                </span>
-                                                            </span>
-                                                        </span>
-                                                    </th>
-                                                    <th className="k-table-th k-header">
-                                                        <span className="k-cell-inner">
-                                                            <span className="k-link">
-                                                                <span className="k-column-title">Date Created</span>
-                                                            </span>
-                                                        </span>
-                                                    </th>
-                                                    <th className="k-table-th k-header">
-                                                        <span className="k-cell-inner">
-                                                            <span className="k-link">
-                                                                <span className="k-column-title">File Size</span>
-                                                            </span>
-                                                        </span>
-                                                    </th>
-                                                </tr>
-                                            </thead>
-                                        </table>
-                                    </div>
-                                </div>
-                                <div className="k-grid-content k-auto-scrollable">
-                                    <table className="k-table k-table-md k-grid-table k-selectable">
-                                        <colgroup>
-                                            <col className="k-sorted" />
-                                            <col />
-                                            <col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" /></span>
-                                                    <span className="k-file-name">Folder</span>
-                                                </td>
-                                                <td className="k-table-td">13/12/2019 at 12:22:04 PM</td>
-                                                <td className="k-table-td">0</td>
-                                            </tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt">
-                                                <td className="k-table-td">
-                                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file" /></span>
-                                                    <span className="k-file-name">file.png</span>
-                                                </td>
-                                                <td className="k-table-td">13/12/2019 at 12:22:04 PM</td>
-                                                <td className="k-table-td">73289</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
+                                    <TableTbody>
+                                        <TableRow>
+                                            <TableTd>
+                                                <FilePreview name="Folder" icon="folder" />
+                                            </TableTd>
+                                            <TableTd>13/12/2019 at 12:22:04 PM</TableTd>
+                                            <TableTd>0</TableTd>
+                                        </TableRow>
+                                        <TableRow alt selected>
+                                            <TableTd>
+                                                <FilePreview name="file.png" icon="file" />
+                                            </TableTd>
+                                            <TableTd>13/12/2019 at 12:22:04 PM</TableTd>
+                                            <TableTd>73289</TableTd>
+                                        </TableRow>
+                                    </TableTbody>
+                                </Table>
                             </div>
                         </div>
-                    </div>
-
+                    </SplitterPane>
+                </Splitter>
+            </FileManagerGrid>
 
-                    {/* Preview */}
-                    <div className="k-filemanager-preview" hidden>
-                    </div>
-                </div>
-            </div>
+            <span>Grid View Resizing</span>
+            <FileManagerGrid />
 
         </div>
     </>

package/src/filemanager/tests/filemanager-listview-preview.tsx

@@ -0,0 +1,92 @@
+import { FilePreview, FileManagerBreadcrumb, FileManagerTreeview, FileInfo, FileManagerListView, FileManagerPreview } from '..';
+import { ListViewItem } from '../..';
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
+import { Icon } from '../../icon';
+import { Splitter, SplitterPane } from '../../splitter';
+import { TreeviewItem } from '../../treeview';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <span>Preview - File info</span>
+            <FileManagerPreview>
+                <Splitter className="k-filemanager-splitter">
+                    <SplitterPane className="k-filemanager-navigation" collapsible scrollable flexBasis="25%">
+                        <FileManagerTreeview>
+                            <TreeviewItem text="Folder" />
+                        </FileManagerTreeview>
+                    </SplitterPane>
+
+                    <SplitterPane className="k-filemanager-content" scrollable>
+                        <FileManagerBreadcrumb>
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
+                                        <Icon icon="home" />
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </FileManagerBreadcrumb>
+
+                        <FileManagerListView>
+                            <ListViewItem>
+                                <FilePreview name="Folder" icon="folder" size="xxxlarge"/>
+                            </ListViewItem>
+                            <ListViewItem selected>
+                                <FilePreview name="file.png" icon="file-image" size="xxxlarge"/>
+                            </ListViewItem>
+                        </FileManagerListView>
+                    </SplitterPane>
+
+                    <SplitterPane className="k-filemanager-preview" collapsible scrollable flexBasis="25%">
+                        <FileInfo selection="single" icon="file-image" name="file.png" fileType="Image" fileSize="72 KB" fileDateCreated="13/12/2019 12:22:04 PM" fileDateModified="13/12/2019 12:36:04 PM">
+                        </FileInfo>
+                    </SplitterPane>
+                </Splitter>
+            </FileManagerPreview>
+
+            <span>Preview - No file selected</span>
+            <FileManagerPreview />
+
+            <span>Preview - Multiple files selected</span>
+            <FileManagerPreview>
+                <Splitter className="k-filemanager-splitter">
+                    <SplitterPane className="k-filemanager-navigation" collapsible scrollable flexBasis="25%">
+                        <FileManagerTreeview>
+                            <TreeviewItem text="Folder" />
+                        </FileManagerTreeview>
+                    </SplitterPane>
+
+                    <SplitterPane className="k-filemanager-content" scrollable>
+                        <FileManagerBreadcrumb>
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
+                                        <Icon icon="home" />
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </FileManagerBreadcrumb>
+
+                        <FileManagerListView>
+                            <ListViewItem selected>
+                                <FilePreview name="Folder" icon="folder" size="xxxlarge"/>
+                            </ListViewItem>
+                            <ListViewItem selected>
+                                <FilePreview name="file.png" icon="file-image" size="xxxlarge"/>
+                            </ListViewItem>
+                        </FileManagerListView>
+                    </SplitterPane>
+
+                    <SplitterPane className="k-filemanager-preview" collapsible scrollable flexBasis="25%">
+                        <FileInfo selection="multiple" name="2 items">
+                        </FileInfo>
+                    </SplitterPane>
+                </Splitter>
+            </FileManagerPreview>
+
+        </div>
+    </>
+);

package/src/filemanager/tests/filemanager-listview.tsx

@@ -1,40 +1,26 @@
-import { BreadcrumbRoot, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
-import { Button } from '../../button';
-import { ButtonGroup } from '../../button-group';
+import { FileManagerBreadcrumb, FileManagerListView, FileManagerNormal, FileManagerTreeview, FilePreview } from '../../filemanager';
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Icon } from '../../icon';
-import { Toolbar } from '../../toolbar';
-import { Treeview, TreeviewItem } from '../../treeview';
+import { ListViewItem } from '../../listview';
+import { TreeviewItem } from '../../treeview';
+import { Splitter, SplitterPane } from '../../splitter';
 
 
 export default () =>(
     <>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
-            <span>File Manager List View</span>
-            <div className="k-widget k-filemanager">
-                {/* Header */}
-                <div className="k-filemanager-header">
-                    <Toolbar className="k-filemanager-toolbar">
-                        <Button>New Folder</Button>
-                        <Button>Upload</Button>
-                        <ButtonGroup>
-                            <Button icon="grid-layout" selected></Button>
-                            <Button icon="grid"></Button>
-                        </ButtonGroup>
-                    </Toolbar>
-                </div>
-
-                <div className="k-filemanager-content-container">
-                    {/* Navigation */}
-                    <div className="k-filemanager-navigation">
-                        <Treeview className="k-filemanager-treeview">
+            <span>List View</span>
+            <FileManagerNormal>
+                <Splitter className="k-filemanager-splitter">
+                    <SplitterPane className="k-filemanager-navigation" resizable={false} scrollable flexBasis="20%">
+                        <FileManagerTreeview>
                             <TreeviewItem text="Folder" />
-                        </Treeview>
-                    </div>
+                        </FileManagerTreeview>
+                    </SplitterPane>
 
-                    {/* Content */}
-                    <div className="k-filemanager-content">
-                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
+                    <SplitterPane className="k-filemanager-content" scrollable>
+                        <FileManagerBreadcrumb>
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -42,88 +28,22 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </BreadcrumbRoot>
-
-                        {/* View */}
-                        <div className="k-widget k-listview k-selectable k-filemanager-listview">
-                            <div className="k-listview-content k-d-flex k-flex-row k-flex-wrap">
-                                <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" size="xxxlarge" /></span>
-                                    <span className="k-file-name">Folder</span>
-                                </div>
-                                <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" size="xxxlarge" /></span>
-                                    <span className="k-file-name">file.png</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    {/* Preview */}
-                    <div className="k-filemanager-preview" hidden></div>
-                </div>
-            </div>
+                        </FileManagerBreadcrumb>
+
+                        <FileManagerListView>
+                            <ListViewItem>
+                                <FilePreview name="Folder" icon="folder" size="xxxlarge"/>
+                            </ListViewItem>
+                            <ListViewItem selected>
+                                <FilePreview name="file.png" icon="file-image" size="xxxlarge"/>
+                            </ListViewItem>
+                        </FileManagerListView>
+                    </SplitterPane>
+                </Splitter>
+            </FileManagerNormal>
 
             <span>ListView View Resizing</span>
-            <div className="k-widget k-filemanager">
-                {/* Header */}
-                <div className="k-filemanager-header">
-                    <Toolbar className="k-filemanager-toolbar">
-                        <Button>New Folder</Button>
-                        <Button>Upload</Button>
-                        <ButtonGroup>
-                            <Button icon="grid-layout" selected></Button>
-                            <Button icon="grid"></Button>
-                        </ButtonGroup>
-                    </Toolbar>
-                </div>
-
-                <div className="k-filemanager-content-container">
-                    {/* Navigation */}
-                    <div className="k-filemanager-navigation" style={{ width: "234px" }}>
-                        <Treeview className="k-filemanager-treeview">
-                            <TreeviewItem text="Folder" />
-                        </Treeview>
-                    </div>
-
-                    {/* Resizing Handle */}
-                    <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal k-filemanager-splitbar-navigation k-focus">
-                        <span className="k-resize-handle"></span>
-                    </div>
-
-                    {/* Content */}
-                    <div className="k-filemanager-content">
-                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
-                            <BreadcrumbContainer>
-                                <BreadcrumbItem root>
-                                    <BreadcrumbLink root icon>
-                                        <Icon icon="home" />
-                                    </BreadcrumbLink>
-                                </BreadcrumbItem>
-                            </BreadcrumbContainer>
-                        </BreadcrumbRoot>
-
-                        {/* View */}
-                        <div className="k-widget k-listview k-selectable k-filemanager-listview">
-                            <div className="k-listview-content k-d-flex k-flex-row k-flex-wrap">
-                                <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" size="xxxlarge" /></span>
-                                    <span className="k-file-name">Folder</span>
-                                </div>
-                                <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" size="xxxlarge" /></span>
-                                    <span className="k-file-name">file.png</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    {/* Preview */}
-                    <div className="k-filemanager-preview" hidden></div>
-                </div>
-            </div>
+            <FileManagerNormal />
 
         </div>
     </>