@progress/kendo-themes-html 7.2.1-dev.0 → 7.2.1-dev.2

package/src/treelist/tests/treelist-react.tsx

@@ -4,6 +4,9 @@ import { DropdownList } from '../../dropdownlist';
 import { DatePicker } from '../../datepicker';
 import { NumericTextbox } from '../../numerictextbox';
 import { Textbox } from '../../textbox';
+import { TreeList } from '../../treelist';
+import { GridTable } from '../../grid';
+import { TableThead, TableTbody, TableRow, TableTd, TableTh } from '../../table';
 
 
 export default () =>(
@@ -11,8 +14,8 @@ export default () =>(
         <div id="test-area" className="k-d-grid">
             <section>
                 <span>React Treelist</span>
-                <div className="k-grid k-grid-md k-treelist-scrollable">
-                    <table className="k-table k-table-md k-grid-table">
+                <TreeList className="k-treelist-scrollable">
+                    <GridTable>
                         <colgroup>
                             <col style={{ width: "200px" }} />
                             <col style={{ width: "300px" }} />
@@ -20,27 +23,27 @@ export default () =>(
                             <col style={{ width: "400px" }} />
                             <col style={{ width: "100px" }} />
                         </colgroup>
-                        <thead className="k-table-thead k-grid-header">
-                            <tr className="k-table-row">
-                                <th className="k-table-th k-header">
+                        <TableThead className="k-grid-header">
+                            <TableRow>
+                                <TableTh className="k-header">
                                     <a className="k-link">id</a>
-                                </th>
-                                <th className="k-table-th k-header">
+                                </TableTh>
+                                <TableTh className="k-header">
                                     <a className="k-link">text</a>
-                                </th>
-                                <th className="k-table-th k-header">
+                                </TableTh>
+                                <TableTh className="k-header">
                                     <a className="k-link">price</a>
-                                </th>
-                                <th className="k-table-th k-header">
+                                </TableTh>
+                                <TableTh className="k-header">
                                     <a className="k-link">manufactured</a>
-                                </th>
-                                <th className="k-table-th k-header">
+                                </TableTh>
+                                <TableTh className="k-header">
                                     <a className="k-link">discontinued</a>
-                                </th>
-                            </tr>
-                            <tr className="k-table-row k-filter-row">
-                                <th className="k-table-th"></th>
-                                <th className="k-table-th">
+                                </TableTh>
+                            </TableRow>
+                            <TableRow className="k-filter-row">
+                                <TableTh></TableTh>
+                                <TableTh>
                                     <div className="k-filtercell">
                                         <span>
                                             <Textbox />
@@ -48,8 +51,8 @@ export default () =>(
                                             <Button icon="filter-clear" disabled></Button>
                                         </span>
                                     </div>
-                                </th>
-                                <th className="k-table-th">
+                                </TableTh>
+                                <TableTh>
                                     <div className="k-filtercell">
                                         <span>
                                             <NumericTextbox />
@@ -57,8 +60,8 @@ export default () =>(
                                             <Button icon="filter-clear" disabled></Button>
                                         </span>
                                     </div>
-                                </th>
-                                <th className="k-table-th">
+                                </TableTh>
+                                <TableTh>
                                     <div className="k-filtercell">
                                         <span>
                                             <DatePicker />
@@ -66,108 +69,108 @@ export default () =>(
                                             <Button icon="filter-clear" disabled></Button>
                                         </span>
                                     </div>
-                                </th>
-                                <th className="k-table-th">
+                                </TableTh>
+                                <TableTh>
                                     <div className="k-filtercell">
                                         <span>
                                             <DropdownList className="k-dropdown-operator" arrowIconName="filter" />
                                             <Button icon="filter-clear" disabled></Button>
                                         </span>
                                     </div>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody className="k-table-tbody">
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td">
+                                </TableTh>
+                            </TableRow>
+                        </TableThead>
+                        <TableTbody>
+                            <TableRow className="k-master-row">
+                                <TableTd>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                     1
-                                </td>
-                                <td className="k-table-td">Furniture</td>
-                                <td className="k-table-td">4</td>
-                                <td className="k-table-td">8/12/1996</td>
-                                <td className="k-table-td">false</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td">
+                                </TableTd>
+                                <TableTd>Furniture</TableTd>
+                                <TableTd>4</TableTd>
+                                <TableTd>8/12/1996</TableTd>
+                                <TableTd>false</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     1.1
-                                </td>
-                                <td className="k-table-td">Tables &amp; Chairs</td>
-                                <td className="k-table-td">123</td>
-                                <td className="k-table-td">8/12/1996</td>
-                                <td className="k-table-td">false</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td">
+                                </TableTd>
+                                <TableTd>Tables &amp; Chairs</TableTd>
+                                <TableTd>123</TableTd>
+                                <TableTd>8/12/1996</TableTd>
+                                <TableTd>false</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     1.2
-                                </td>
-                                <td className="k-table-td">Sofas</td>
-                                <td className="k-table-td">213</td>
-                                <td className="k-table-td">8/12/1996</td>
-                                <td className="k-table-td">true</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td">
+                                </TableTd>
+                                <TableTd>Sofas</TableTd>
+                                <TableTd>213</TableTd>
+                                <TableTd>8/12/1996</TableTd>
+                                <TableTd>true</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     1.3
-                                </td>
-                                <td className="k-table-td">Occasional Furniture</td>
-                                <td className="k-table-td">42</td>
-                                <td className="k-table-td">8/12/1996</td>
-                                <td className="k-table-td">false</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td">
+                                </TableTd>
+                                <TableTd>Occasional Furniture</TableTd>
+                                <TableTd>42</TableTd>
+                                <TableTd>8/12/1996</TableTd>
+                                <TableTd>false</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                     2
-                                </td>
-                                <td className="k-table-td">Decor</td>
-                                <td className="k-table-td">2</td>
-                                <td className="k-table-td">8/12/1996</td>
-                                <td className="k-table-td">false</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td">
+                                </TableTd>
+                                <TableTd>Decor</TableTd>
+                                <TableTd>2</TableTd>
+                                <TableTd>8/12/1996</TableTd>
+                                <TableTd>false</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     2.1
-                                </td>
-                                <td className="k-table-td">Bed Linen</td>
-                                <td className="k-table-td">12</td>
-                                <td className="k-table-td">8/12/1996</td>
-                                <td className="k-table-td">false</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td">
+                                </TableTd>
+                                <TableTd>Bed Linen</TableTd>
+                                <TableTd>12</TableTd>
+                                <TableTd>8/12/1996</TableTd>
+                                <TableTd>false</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                     2.2
-                                </td>
-                                <td className="k-table-td">Curtains &amp; Blinds</td>
-                                <td className="k-table-td">1</td>
-                                <td className="k-table-td">8/12/1996</td>
-                                <td className="k-table-td">true</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td">
+                                </TableTd>
+                                <TableTd>Curtains &amp; Blinds</TableTd>
+                                <TableTd>1</TableTd>
+                                <TableTd>8/12/1996</TableTd>
+                                <TableTd>true</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="none"></Icon>
                                     2.2.1
-                                </td>
-                                <td className="k-table-td">Carpets</td>
-                                <td className="k-table-td">54</td>
-                                <td className="k-table-td">8/12/1996</td>
-                                <td className="k-table-td">true</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+                                </TableTd>
+                                <TableTd>Carpets</TableTd>
+                                <TableTd>54</TableTd>
+                                <TableTd>8/12/1996</TableTd>
+                                <TableTd>true</TableTd>
+                            </TableRow>
+                        </TableTbody>
+                    </GridTable>
+                </TreeList>
             </section>
         </div>
     </>

package/src/treelist/tests/treelist-row-reordering.tsx

@@ -1,89 +1,110 @@
 import { Icon } from '../../icon';
+import { TreeList } from '../../treelist';
+import { GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
+import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
 
 export default () => (
     <>
         <div id="test-area">
-            <div id="treelist" className="k-treelist k-grid k-grid-md k-grid-no-scrollbar">
-                <div className="k-grid-header" style={{ paddingRight: '0px' }}>
+            <TreeList id="treelist" className="k-grid-no-scrollbar">
+                <GridHeader style={{ paddingRight: '0px' }}>
                     <div className="k-grid-header-wrap">
-                        <table className="k-table k-table-md k-grid-header-table">
+                        <GridHeaderTable>
                             <colgroup>
                                 <col className="k-drag-col"/>
                                 <col style={{ width: "250px" }}/>
                                 <col />
                             </colgroup>
-                            <thead className="k-table-thead">
-                                <tr className="k-table-row">
-                                    <th className="k-table-th k-header k-drag-cell"></th>
-                                    <th className="k-table-th k-header">
-                                        <span className="k-cell-inner">
-                                            <span className="k-link">
-                                                <span className="k-column-title">First Name</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">Last Name</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">Position</span>
-                                            </span>
-                                        </span>
-                                    </th>
-                                </tr>
-                            </thead>
-                        </table>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell className="k-drag-cell"></GridHeaderCell>
+                                    <GridHeaderCell columnTitle="First Name"></GridHeaderCell>
+                                    <GridHeaderCell columnTitle="Last Name"></GridHeaderCell>
+                                    <GridHeaderCell columnTitle="Position"></GridHeaderCell>
+                                </TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
                     </div>
-                </div>
-                <div className="k-grid-content k-auto-scrollable">
-                    <table className="k-table k-table-md k-grid-table">
-                        <colgroup>
-                            <col className="k-drag-col" />
-                            <col style={{ width: "250px" }}/>
-                            <col />
-                        </colgroup>
-                        <tbody className="k-table-tbody">
-                            <tr className="k-table-row">
-                                <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
-                                <td className="k-table-td"><Icon className="k-treelist-toggle" icon="caret-alt-right"/>Daryl</td>
-                                <td className="k-table-td">Sweeney</td>
-                                <td className="k-table-td">CEO</td>
-                            </tr>
-                            <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
-                                <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
-                                <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="caret-alt-down"></Icon>Guy</td>
-                                <td className="k-table-td">Wooten</td>
-                                <td className="k-table-td">Chief Technical Officer</td>
-                            </tr>
-                            <tr className="k-table-row k-treelist-group">
-                                <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
-                                <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="caret-alt-down"></Icon>Buffy</td>
-                                <td className="k-table-td">Weber</td>
-                                <td className="k-table-td">VP, Engineering</td>
-                            </tr>
-                            <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
-                                <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
-                                <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="caret-alt-down"></Icon>Hyacinth
-                                </td>
-                                <td className="k-table-td">Hood</td>
-                                <td className="k-table-td">Team Lead</td>
-                            </tr>
-                            <tr className="k-table-row">
-                                <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
-                                <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>Akeem</td>
-                                <td className="k-table-td">Carr</td>
-                                <td className="k-table-td">Junior Software Developer</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
+                </GridHeader>
+                <GridContainer>
+                    <GridContent className="k-auto-scrollable">
+                        <GridTable>
+                            <colgroup>
+                                <col className="k-drag-col" />
+                                <col style={{ width: "250px" }}/>
+                                <col />
+                            </colgroup>
+                            <TableTbody>
+                                <TableRow>
+                                    <TableTd className="k-drag-cell">
+                                        <Icon icon="reorder"/>
+                                    </TableTd>
+                                    <TableTd>
+                                        <Icon className="k-treelist-toggle" icon="caret-alt-right"/>
+                                        Daryl
+                                    </TableTd>
+                                    <TableTd>Sweeney</TableTd>
+                                    <TableTd>CEO</TableTd>
+                                </TableRow>
+                                <TableRow className="k-treelist-group k-alt" alt>
+                                    <TableTd className="k-drag-cell">
+                                        <Icon icon="reorder"/>
+                                    </TableTd>
+                                    <TableTd>
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="caret-alt-down" />
+                                        Guy
+                                    </TableTd>
+                                    <TableTd>Wooten</TableTd>
+                                    <TableTd>Chief Technical Officer</TableTd>
+                                </TableRow>
+                                <TableRow className="k-treelist-group">
+                                    <TableTd className="k-drag-cell">
+                                        <Icon icon="reorder"/>
+                                    </TableTd>
+                                    <TableTd>
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="caret-alt-down" />
+                                        Buffy
+                                    </TableTd>
+                                    <TableTd>Weber</TableTd>
+                                    <TableTd>VP, Engineering</TableTd>
+                                </TableRow>
+                                <TableRow className="k-treelist-group k-alt" alt>
+                                    <TableTd className="k-drag-cell">
+                                        <Icon icon="reorder"/>
+                                    </TableTd>
+                                    <TableTd>
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="caret-alt-down" />
+                                        Hyacinth
+                                    </TableTd>
+                                    <TableTd>Hood</TableTd>
+                                    <TableTd>Team Lead</TableTd>
+                                </TableRow>
+                                <TableRow>
+                                    <TableTd className="k-drag-cell">
+                                        <Icon icon="reorder"/>
+                                    </TableTd>
+                                    <TableTd>
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        <Icon className="k-treelist-toggle" icon="none" />
+                                        Akeem
+                                    </TableTd>
+                                    <TableTd>Carr</TableTd>
+                                    <TableTd>Junior Software Developer</TableTd>
+                                </TableRow>
+                            </TableTbody>
+                        </GridTable>
+                    </GridContent>
+                </GridContainer>
+            </TreeList>
         </div>
     </>
 );