@progress/kendo-themes-html 6.2.1-dev.0 → 6.2.1-dev.44

package/src/popup/tests/popup-dropdowngrid.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { DataTable, TableBody, TableFooter, TableGroupStickyHeader, TableHeader, TableList, TableListGroupRow, TableListRow, TableListTd, TableListTh, TableRow, TableTh, TableThead } from '../../table';
+import { Popup } from '..';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const style = `
+    .k-animation-container {
+        position: relative;
+        overflow: visible;
+    }
+`;
+
+root.render(
+    <>
+        <style>{style}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>LTR</span>
+            <span className="k-rtl">RTL</span>
+
+            <section>
+                <div className="k-animation-container k-animation-container-shown">
+                    <div className="k-child-animation-container">
+                        <Popup className="k-dropdowngrid-popup">
+                            <DataTable size="medium">
+                                <TableHeader>
+                                    <colgroup>
+                                        <col style={{ width: '50px' }} />
+                                        <col style={{ width: '160px' }} />
+                                        <col />
+                                    </colgroup>
+                                    <TableThead>
+                                        <TableRow>
+                                            <TableTh text="ID"></TableTh>
+                                            <TableTh text="Name"></TableTh>
+                                            <TableTh text="Job Title"></TableTh>
+                                        </TableRow>
+                                    </TableThead>
+                                </TableHeader>
+                                <TableGroupStickyHeader>
+                                    <TableListTh text="Initial group"></TableListTh>
+                                </TableGroupStickyHeader>
+                                <TableBody>
+                                    <TableList>
+                                        <TableListRow>
+                                            <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 1.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListRow alt>
+                                            <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 2.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListRow>
+                                            <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 3.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListGroupRow>
+                                            <TableListTh text="Group"></TableListTh>
+                                        </TableListGroupRow>
+                                        <TableListRow>
+                                            <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 4.2" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 4.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListRow alt>
+                                            <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 5.2 (alt)" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 5.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListRow>
+                                            <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 6.2" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 6.3"></TableListTd>
+                                        </TableListRow>
+                                    </TableList>
+                                </TableBody>
+                                <TableFooter>
+                                    <TableListTd text="30 records in total"></TableListTd>
+                                </TableFooter>
+                            </DataTable>
+                        </Popup>
+                    </div>
+                </div>
+            </section>
+
+            <section className="k-rtl">
+                <div className="k-animation-container k-animation-container-shown">
+                    <div className="k-child-animation-container">
+                        <Popup className="k-dropdowngrid-popup">
+                            <DataTable size="medium">
+                                <TableHeader>
+                                    <colgroup>
+                                        <col style={{ width: '50px' }} />
+                                        <col style={{ width: '160px' }} />
+                                        <col />
+                                    </colgroup>
+                                    <TableThead>
+                                        <TableRow>
+                                            <TableTh text="ID"></TableTh>
+                                            <TableTh text="Name"></TableTh>
+                                            <TableTh text="Job Title"></TableTh>
+                                        </TableRow>
+                                    </TableThead>
+                                </TableHeader>
+                                <TableGroupStickyHeader>
+                                    <TableListTh text="Initial group"></TableListTh>
+                                </TableGroupStickyHeader>
+                                <TableBody>
+                                    <TableList>
+                                        <TableListRow>
+                                            <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 1.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListRow alt>
+                                            <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 2.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListRow>
+                                            <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 3.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListGroupRow>
+                                            <TableListTh text="Group"></TableListTh>
+                                        </TableListGroupRow>
+                                        <TableListRow>
+                                            <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 4.2" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 4.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListRow alt>
+                                            <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 5.2 (alt)" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 5.3"></TableListTd>
+                                        </TableListRow>
+                                        <TableListRow>
+                                            <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
+                                            <TableListTd text="Data 6.2" style={{ width: '160px' }}></TableListTd>
+                                            <TableListTd text="Data 6.3"></TableListTd>
+                                        </TableListRow>
+                                    </TableList>
+                                </TableBody>
+                                <TableFooter>
+                                    <TableListTd text="30 records in total"></TableListTd>
+                                </TableFooter>
+                            </DataTable>
+                        </Popup>
+                    </div>
+                </div>
+            </section>
+
+        </div>
+    </>
+);

package/src/table/data-table.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { classNames, kendoThemeMaps } from '../utils';
+
+export interface DataTableProps {
+    children?: React.ReactNode;
+    className?: string;
+    size?: null | 'small' | 'medium' | 'large';
+}
+
+
+export class DataTable extends React.Component<DataTableProps> {
+
+    static defaultProps = {
+        size: 'medium',
+    };
+
+    render() {
+        const {
+            children,
+            className,
+            size,
+        } = this.props;
+
+        return (
+            <div
+                className={classNames(
+                    className,
+                    'k-data-table',
+                    {
+                        [`k-table-${kendoThemeMaps.sizeMap[size!] || size}`]: size,
+                    }
+                )}>
+                {children}
+            </div>
+        );
+    }
+}

package/src/table/index.ts

@@ -0,0 +1,19 @@
+export * from './data-table';
+export * from './table-header';
+export * from './table-body';
+export * from './table-footer';
+export * from './table';
+export * from './table-list';
+export * from './table-thead';
+export * from './table-tbody';
+export * from './table-tfoot';
+export * from './table-row';
+export * from './table-list-row';
+export * from './table-th';
+export * from './table-list-th';
+export * from './table-td';
+export * from './table-list-td';
+export * from './table-group-header';
+export * from './table-group-sticky-header';
+export * from './table-group-row';
+export * from './table-list-group-row';

package/src/table/table-body.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableBodyProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+
+export class TableBody extends React.Component<TableBodyProps> {
+
+    render() {
+        const {
+            children,
+            className,
+        } = this.props;
+
+        return (
+            <div
+                className={classNames(
+                    className,
+                    'k-table-body',
+                    'k-table-scroller'
+                )}>
+                {children}
+            </div>
+        );
+    }
+}

package/src/table/table-footer.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+
+export class TableFooter extends React.Component<TableFooterProps> {
+
+    render() {
+        const {
+            children,
+            className,
+        } = this.props;
+
+        return (
+            <div
+                className={classNames(
+                    className,
+                    'k-table-footer'
+                )}>
+                {children}
+            </div>
+        );
+    }
+}

package/src/table/table-group-header.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableGroupHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+
+export class TableGroupHeader extends React.Component<TableGroupHeaderProps> {
+
+    render() {
+        const {
+            children,
+            className,
+        } = this.props;
+
+        return (
+            <tr
+                className={classNames(
+                    className,
+                    'k-table-group-header'
+                )}>
+                {children}
+            </tr>
+        );
+    }
+}

package/src/table/table-group-row.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableGroupRowProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+
+export class TableGroupRow extends React.Component<TableGroupRowProps> {
+
+    render() {
+        const {
+            children,
+            className,
+        } = this.props;
+
+        return (
+            <tr
+                className={classNames(
+                    className,
+                    'k-table-group-row'
+                )}>
+                {children}
+            </tr>
+        );
+    }
+}

package/src/table/table-group-sticky-header.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableGroupStickyHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+
+export class TableGroupStickyHeader extends React.Component<TableGroupStickyHeaderProps> {
+
+    render() {
+        const {
+            children,
+            className,
+        } = this.props;
+
+        return (
+            <div
+                className={classNames(
+                    className,
+                    'k-table-group-sticky-header'
+                )}>
+                {children}
+            </div>
+        );
+    }
+}

package/src/table/table-header.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+import { Table } from './table';
+
+export interface TableHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+
+export class TableHeader extends React.Component<TableHeaderProps> {
+
+    render() {
+        const {
+            children,
+            className,
+        } = this.props;
+
+        return (
+            <div
+                className={classNames(
+                    className,
+                    'k-table-header'
+                )}>
+                <div className="k-table-header-wrap">
+                    <Table>{children}</Table>
+                </div>
+            </div>
+        );
+    }
+}

package/src/table/table-list-group-row.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableListGroupRowProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+
+export class TableListGroupRow extends React.Component<TableListGroupRowProps> {
+
+    render() {
+        const {
+            children,
+            className,
+        } = this.props;
+
+        return (
+            <li
+                className={classNames(
+                    className,
+                    'k-table-group-row'
+                )}>
+                {children}
+            </li>
+        );
+    }
+}

package/src/table/table-list-row.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableListRowProps {
+    children?: React.ReactNode;
+    className?: string;
+    alt?: boolean;
+    hover?: boolean;
+    focus?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+}
+
+
+export class TableListRow extends React.Component<TableListRowProps> {
+
+    render() {
+        const {
+            children,
+            className,
+            alt,
+            hover,
+            focus,
+            selected,
+            disabled,
+        } = this.props;
+
+        return (
+            <li
+                className={classNames(
+                    className,
+                    'k-table-row',
+                    {
+                        'k-table-alt-row': alt,
+                        'k-hover': hover,
+                        'k-focus': focus,
+                        'k-selected': selected,
+                        'k-disabled': disabled
+                    }
+                )}>
+                {children}
+            </li>
+        );
+    }
+}

package/src/table/table-list-td.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableListTdProps {
+    children?: React.ReactNode;
+    className?: string;
+    text?: string;
+    style?: React.CSSProperties;
+}
+
+
+export class TableListTd extends React.Component<TableListTdProps> {
+
+    render() {
+        const {
+            children,
+            className,
+            text,
+            ...htmlAttributes
+        } = this.props;
+
+        const textOrChildren = text
+            ? text
+            : children;
+
+        return (
+            <span
+                style={this.props.style}
+                {...htmlAttributes}
+                className={classNames(
+                    className,
+                    'k-table-td'
+                )}>
+                {textOrChildren}
+            </span>
+        );
+    }
+}

package/src/table/table-list-th.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableListThProps {
+    children?: React.ReactNode;
+    className?: string;
+    text?: string;
+    style?: React.CSSProperties;
+}
+
+
+export class TableListTh extends React.Component<TableListThProps> {
+
+    render() {
+        const {
+            children,
+            className,
+            text,
+            ...htmlAttributes
+        } = this.props;
+
+        const textOrChildren = text
+            ? text
+            : children;
+
+        return (
+            <span
+                style={this.props.style}
+                {...htmlAttributes}
+                className={classNames(
+                    className,
+                    'k-table-th'
+                )}>
+                {textOrChildren}
+            </span>
+        );
+    }
+}

package/src/table/table-list.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { classNames, kendoThemeMaps } from '../utils';
+
+export interface TableListProps {
+    children?: React.ReactNode;
+    className?: string;
+    size?: null | 'small' | 'medium' | 'large';
+    virtualization?: boolean;
+}
+
+
+export class TableList extends React.Component<TableListProps> {
+
+    render() {
+        const {
+            children,
+            className,
+            size,
+            virtualization,
+        } = this.props;
+
+        return (
+            <ul
+                className={classNames(
+                    className,
+                    'k-table',
+                    'k-table-list',
+                    {
+                        [`k-table-${kendoThemeMaps.sizeMap[size!]}`]: size,
+                        'k-virtual-table': virtualization,
+                    }
+                )}>
+                {children}
+            </ul>
+        );
+    }
+}

package/src/table/table-row.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableRowProps {
+    children?: React.ReactNode;
+    className?: string;
+    alt?: boolean;
+    hover?: boolean;
+    focus?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+}
+
+
+export class TableRow extends React.Component<TableRowProps> {
+
+    render() {
+        const {
+            children,
+            className,
+            alt,
+            hover,
+            focus,
+            selected,
+            disabled,
+        } = this.props;
+
+        return (
+            <tr
+                className={classNames(
+                    className,
+                    'k-table-row',
+                    {
+                        'k-table-alt-row': alt,
+                        'k-hover': hover,
+                        'k-focus': focus,
+                        'k-selected': selected,
+                        'k-disabled': disabled
+                    }
+                )}>
+                {children}
+            </tr>
+        );
+    }
+}

package/src/table/table-tbody.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface TableTbodyProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+
+export class TableTbody extends React.Component<TableTbodyProps> {
+
+    render() {
+        const {
+            children,
+            className,
+        } = this.props;
+
+        return (
+            <tbody
+                className={classNames(
+                    className,
+                    'k-table-tbody'
+                )}>
+                {children}
+            </tbody>
+        );
+    }
+}