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

package/src/filemanager/file-info.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { classNames } from '../misc';
+import { FilePreview } from '.';
+
+const FILEINFO_CLASSNAME = 'k-file-info';
+
+const states = [];
+
+const options = {};
+
+export type KendoFileInfoProps = {
+    selection: "single" | "multiple" | "none";
+    name?: string;
+    icon?: string;
+    fileType?: string;
+    fileSize?: string;
+    fileDateCreated?: string;
+    fileDateModified?: string;
+};
+
+const defaultProps = {
+    name: "No File Selected",
+    icon: "file",
+};
+
+export const FileInfo = (
+    props:
+        KendoFileInfoProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        selection,
+        name = defaultProps.name,
+        icon = defaultProps.icon,
+        fileType,
+        fileSize,
+        fileDateCreated,
+        fileDateModified,
+    } = props;
+
+    return (
+        <div className={classNames(
+            props.className,
+            FILEINFO_CLASSNAME,
+        )}>
+
+            <FilePreview
+                className={classNames(
+                    {
+                        ["k-single-file-selected"]: selection === "single",
+                        ["k-multiple-files-selected"]: selection === "multiple",
+                        ["k-no-file-selected"]: selection === "none",
+                    }
+                )}
+                icon={ selection === "none" ? "none" : icon }
+                name={name}
+                size="xxxlarge"
+            />
+
+            {selection === "single" &&
+                <>
+                    <dl className="k-file-meta">
+                        {fileType &&
+                        <>
+                            <dt className="k-file-meta-label">Type: </dt>
+                            <dd className="k-file-meta-value k-file-type">{fileType}</dd>
+                            <dd className="k-line-break"></dd>
+                        </>
+                        }
+                        {fileSize &&
+                        <>
+                            <dt className="k-file-meta-label">Size: </dt>
+                            <dd className="k-file-meta-value k-file-size">{fileSize}</dd>
+                            <dd className="k-line-break"></dd>
+                        </>
+                        }
+                        {fileDateCreated &&
+                        <>
+                            <dt className="k-file-meta-label">Date Created: </dt>
+                            <dd className="k-file-meta-value k-file-created">{fileDateCreated}</dd>
+                            <dd className="k-line-break"></dd>
+                        </>
+                        }
+                        {fileDateModified &&
+                        <>
+                            <dt className="k-file-meta-label">Date Modified: </dt>
+                            <dd className="k-file-meta-value k-file-modified">{fileDateModified}</dd>
+                            <dd className="k-line-break"></dd>
+                        </>
+                        }
+                    </dl>
+                </>
+            }
+        </div>
+    );
+};
+
+FileInfo.states = states;
+FileInfo.options = options;
+FileInfo.className = FILEINFO_CLASSNAME;
+FileInfo.defaultProps = defaultProps;
+
+export default FileInfo;

package/src/filemanager/file-preview.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Size, classNames } from '../misc';
+import { Icon } from '../icon';
+
+const FILEPREVIEW_CLASSNAME = 'k-file-preview';
+
+const states = [];
+
+const options = {
+    size: [ Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge ],
+};
+
+export type KendoFilePreviewOptions = {
+    size?: (typeof options.size)[number];
+};
+
+export type KendoFilePreviewProps = KendoFilePreviewOptions & {
+    name?: string;
+    icon?: string;
+};
+
+const defaultProps = {};
+
+export const FilePreview = (
+    props:
+        KendoFilePreviewProps &
+        React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        size,
+        icon,
+        name,
+    } = props;
+
+    return (
+        <>
+            <span className={classNames(
+                FILEPREVIEW_CLASSNAME,
+            )}>
+                <Icon className="k-file-icon"
+                    icon={icon}
+                    size={size}
+                />
+            </span>
+            <span className={classNames(
+                props.className,
+                'k-file-name',
+            )}>{name}</span>
+        </>
+    );
+};
+
+FilePreview.states = states;
+FilePreview.options = options;
+FilePreview.className = FILEPREVIEW_CLASSNAME;
+FilePreview.defaultProps = defaultProps;
+
+export default FilePreview;

package/src/filemanager/filemanager-breadcrumb.spec.tsx

@@ -0,0 +1,39 @@
+import { Breadcrumb, KendoBreadcrumbProps } from '../breadcrumb';
+import { classNames } from '../misc';
+
+export const FILEMANAGERBREADCRUMB_CLASSNAME = `k-filemanager-breadcrumb`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const FileManagerBreadcrumb = (
+    props: KendoBreadcrumbProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <Breadcrumb
+            className={classNames(
+                props.className,
+                FILEMANAGERBREADCRUMB_CLASSNAME,
+            )}
+            {...other}
+        >
+            {children}
+        </Breadcrumb>
+    );
+};
+
+FileManagerBreadcrumb.states = states;
+FileManagerBreadcrumb.options = options;
+FileManagerBreadcrumb.className = FILEMANAGERBREADCRUMB_CLASSNAME;
+FileManagerBreadcrumb.defaultProps = defaultProps;
+
+export default FileManagerBreadcrumb;

package/src/filemanager/filemanager-drag-hint.tsx

@@ -0,0 +1,49 @@
+import { classNames } from '../misc';
+import { Icon } from '../icon';
+
+const FILEMANAGERDRAGHINT_CLASSNAME = 'k-filemanager-drag-hint';
+
+const states = [];
+
+const options = {};
+
+export type KendoFileManagerDragHintProps = {
+    hint: string;
+    icon?: string;
+};
+
+const defaultProps = {
+    icon: "file",
+};
+
+export const FileManagerDragHint = (
+    props:
+        KendoFileManagerDragHintProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        hint,
+        icon = defaultProps.icon,
+        ...other
+    } = props;
+
+    return (
+        <div className={classNames(
+            props.className,
+            FILEMANAGERDRAGHINT_CLASSNAME,
+            "k-drag-clue",
+        )}
+        {...other}
+        >
+            <Icon icon={icon} />
+            <span>{hint}</span>
+        </div>
+    );
+};
+
+FileManagerDragHint.states = states;
+FileManagerDragHint.options = options;
+FileManagerDragHint.className = FILEMANAGERDRAGHINT_CLASSNAME;
+FileManagerDragHint.defaultProps = defaultProps;
+
+export default FileManagerDragHint;

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

@@ -0,0 +1,42 @@
+import { KendoListViewProps, ListView } from '../listview';
+import { classNames } from '../misc';
+
+export const FILEMANAGERLISTVIEW_CLASSNAME = `k-filemanager-listview`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const FileManagerListView = (
+    props:
+        KendoListViewProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <ListView
+            className={classNames(
+                props.className,
+                FILEMANAGERLISTVIEW_CLASSNAME,
+                "k-selectable",
+            )}
+            flexWrap="wrap"
+            {...other}
+        >
+            {children}
+        </ListView>
+    );
+};
+
+FileManagerListView.states = states;
+FileManagerListView.options = options;
+FileManagerListView.className = FILEMANAGERLISTVIEW_CLASSNAME;
+FileManagerListView.defaultProps = defaultProps;
+
+export default FileManagerListView;

package/src/filemanager/filemanager-toolbar.spec.tsx

@@ -0,0 +1,39 @@
+import { KendoToolbarProps, Toolbar } from '../toolbar';
+import { classNames } from '../misc';
+
+export const FILEMANAGERTOOLBAR_CLASSNAME = `k-filemanager-toolbar`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const FileManagerToolbar = (
+    props: KendoToolbarProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <Toolbar
+            className={classNames(
+                props.className,
+                FILEMANAGERTOOLBAR_CLASSNAME,
+            )}
+            {...other}
+        >
+            {children}
+        </Toolbar>
+    );
+};
+
+FileManagerToolbar.states = states;
+FileManagerToolbar.options = options;
+FileManagerToolbar.className = FILEMANAGERTOOLBAR_CLASSNAME;
+FileManagerToolbar.defaultProps = defaultProps;
+
+export default FileManagerToolbar;

package/src/filemanager/filemanager-treeview.spec.tsx

@@ -0,0 +1,39 @@
+import { KendoTreeviewProps, Treeview } from '../treeview';
+import { classNames } from '../misc';
+
+export const FILEMANAGERTREEVIEW_CLASSNAME = `k-filemanager-treeview`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const FileManagerTreeview = (
+    props: KendoTreeviewProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <Treeview
+            className={classNames(
+                props.className,
+                FILEMANAGERTREEVIEW_CLASSNAME,
+            )}
+            {...other}
+        >
+            {children}
+        </Treeview>
+    );
+};
+
+FileManagerTreeview.states = states;
+FileManagerTreeview.options = options;
+FileManagerTreeview.className = FILEMANAGERTREEVIEW_CLASSNAME;
+FileManagerTreeview.defaultProps = defaultProps;
+
+export default FileManagerTreeview;

package/src/filemanager/filemanager.spec.tsx

@@ -0,0 +1,84 @@
+import { classNames, stateClassNames, States } from '../misc';
+import { Button } from '../button';
+import { ButtonGroup } from '../button-group';
+import { SplitButton } from '../split-button';
+import { Switch } from '../switch';
+import { Searchbox } from '../searchbox';
+import FileManagerToolbar from './filemanager-toolbar.spec';
+
+const FILEMANAGER_CLASSNAME = 'k-filemanager';
+
+const states = [
+    States.disabled
+];
+
+const options = {};
+
+export type KendoFileManagerProps = {
+    toolbar?: JSX.Element;
+};
+
+export type KendoFileManagerState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultToolbar =
+    <>
+        <FileManagerToolbar>
+            <Button>New Folder</Button>
+            <Button>Upload</Button>
+            <ButtonGroup>
+                <Button icon="sort-asc-small"></Button>
+                <Button icon="sort-desc-small"></Button>
+            </ButtonGroup>
+            <SplitButton text="Sort By" />
+            <ButtonGroup>
+                <Button icon="grid-layout"></Button>
+                <Button icon="grid"></Button>
+            </ButtonGroup>
+            <div className="k-spacer"></div>
+            <div className="k-filemanager-details-toggle">
+                <label>View Details</label>
+                <Switch />
+            </div>
+            <Searchbox className="k-filemanager-search-tool" placeholder="Search..." />
+        </FileManagerToolbar>
+    </>;
+
+const defaultProps = {
+    toolbar: defaultToolbar,
+};
+
+export const FileManager = (
+    props: KendoFileManagerProps &
+        KendoFileManagerState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        disabled,
+        toolbar,
+    } = props;
+
+    return (
+        <div className={classNames(
+            props.className,
+            FILEMANAGER_CLASSNAME,
+            stateClassNames(FILEMANAGER_CLASSNAME, {
+                disabled
+            }),
+        )}>
+            <div className="k-filemanager-header">
+                {toolbar}
+            </div>
+
+            <div className="k-filemanager-content-container" >
+                {props.children}
+            </div>
+        </div>
+    );
+};
+
+FileManager.states = states;
+FileManager.options = options;
+FileManager.className = FILEMANAGER_CLASSNAME;
+FileManager.defaultProps = defaultProps;
+
+export default FileManager;

package/src/filemanager/index.ts

@@ -0,0 +1,12 @@
+export * from './filemanager.spec';
+export * from './filemanager-breadcrumb.spec';
+export * from './filemanager-listview.spec';
+export * from './filemanager-treeview.spec';
+export * from './filemanager-toolbar.spec';
+export * from './filemanager-drag-hint';
+export * from './file-info';
+export * from './file-preview';
+export * from './templates/filemanager-normal';
+export * from './templates/filemanager-preview';
+export * from './templates/filemanager-grid';
+export * from './templates/filemanager-grid-preview';

package/src/filemanager/templates/filemanager-grid-preview.tsx

@@ -0,0 +1,133 @@
+import { FileInfo, FileManager, FileManagerBreadcrumb, FileManagerToolbar, FileManagerTreeview, FilePreview } from "..";
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from "../../breadcrumb";
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import { Icon } from "../../icon";
+import { Searchbox } from "../../searchbox";
+import { SplitButton } from "../../split-button";
+import { Splitter, SplitterPane } from "../../splitter";
+import { Switch } from "../../switch";
+import { Table, TableThead, TableRow, TableTh, TableTbody, TableTd } from "../../table";
+import { TreeviewItem } from "../../treeview";
+
+export const FileManagerGridPreview = (props) => (
+    <FileManager toolbar={
+        <FileManagerToolbar>
+            <Button>New Folder</Button>
+            <Button>Upload</Button>
+            <ButtonGroup>
+                <Button icon="sort-asc-small"></Button>
+                <Button icon="sort-desc-small"></Button>
+            </ButtonGroup>
+            <SplitButton text="Sort By" />
+            <ButtonGroup>
+                <Button icon="grid-layout" selected></Button>
+                <Button icon="grid"></Button>
+            </ButtonGroup>
+            <div className="k-spacer"></div>
+            <div className="k-filemanager-details-toggle">
+                <label>View Details</label>
+                <Switch checked />
+            </div>
+            <Searchbox className="k-filemanager-search-tool" placeholder="Search..." />
+        </FileManagerToolbar>
+    }
+    children={
+        <>
+            <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>
+
+                    <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-md k-grid-header-table">
+                                    <colgroup>
+                                        <col />
+                                        <col />
+                                        <col />
+                                    </colgroup>
+                                    <TableThead>
+                                        <TableRow>
+                                            <TableTh className="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>
+                                            </TableTh>
+                                            <TableTh className="k-header">
+                                                <span className="k-cell-inner">
+                                                    <span className="k-link">
+                                                        <span className="k-column-title">Date Created</span>
+                                                    </span>
+                                                </span>
+                                            </TableTh>
+                                            <TableTh className="k-header">
+                                                <span className="k-cell-inner">
+                                                    <span className="k-link">
+                                                        <span className="k-column-title">File Size</span>
+                                                    </span>
+                                                </span>
+                                            </TableTh>
+                                        </TableRow>
+                                    </TableThead>
+                                </Table>
+
+                            </div>
+                        </div>
+                        <div className="k-grid-content k-auto-scrollable">
+                            <Table className="k-table-md k-grid-table k-selectable">
+                                <colgroup>
+                                    <col className="k-sorted" />
+                                    <col />
+                                    <col />
+                                </colgroup>
+                                <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>
+                                        <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>
+                </SplitterPane>
+
+                <SplitterPane className="k-filemanager-preview" collapsible scrollable flexBasis="25%">
+                    <FileInfo selection="none" name="No File Selected">
+                    </FileInfo>
+                </SplitterPane>
+            </Splitter>
+        </>
+    }
+    {...props}>
+    </FileManager>
+);