feat(html): add propertygrid spec

telerik · Nov 14, 2024 · 2e00d74 · 2e00d74
1 parent 1978675
commit 2e00d74
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 0 deletions.
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
@@ -104,6 +104,7 @@ export * from './grid/index';
 export * from './listview/index';
 export * from './spreadsheet/index';
 export * from './pivotgrid/index';
+export * from './propertygrid/index';
 export * from './treelist/index';
 export * from './filter/index';
 export * from './filemanager/index';

diff --git a/packages/html/src/propertygrid/index.ts b/packages/html/src/propertygrid/index.ts
@@ -0,0 +1,3 @@
+export * from './propertygrid.spec';
+export * from './templates/propertygrid-normal';
+export * from './templates/propertygrid-with-splitter';
diff --git a/packages/html/src/propertygrid/propertygrid.spec.tsx b/packages/html/src/propertygrid/propertygrid.spec.tsx
@@ -0,0 +1,33 @@
+import { classNames } from '../misc';
+import { KendoGridProps } from '../grid';
+import { TreeList } from '../treelist';
+
+const PROPERTYGRID_CLASSNAME = 'k-property-grid';
+
+const states = [];
+
+const options = {};
+
+const defaultOptions = {};
+
+export const PropertyGrid = (
+    props: KendoGridProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => (
+    <TreeList
+        {...props}
+        className={classNames(
+            PROPERTYGRID_CLASSNAME,
+            props.className
+        )}
+    >
+        {props.children}
+    </TreeList>
+);
+
+PropertyGrid.states = states;
+PropertyGrid.options = options;
+PropertyGrid.className = PROPERTYGRID_CLASSNAME;
+PropertyGrid.defaultOptions = defaultOptions;
+
+export default PropertyGrid;
diff --git a/packages/html/src/propertygrid/templates/propertygrid-normal.tsx b/packages/html/src/propertygrid/templates/propertygrid-normal.tsx
@@ -0,0 +1,98 @@
+import { PropertyGrid } from "..";
+import { Button } from "../../button";
+import { DropdownList } from "../../dropdownlist";
+import { GridToolbar, GridContainer, GridContent, GridTable } from "../../grid";
+import { Icon } from "../../icon";
+import { TableTbody, TableRow, TableTd } from "../../table";
+import { Textbox } from "../../textbox";
+
+export const PropertyGridNormal = ({ content, ...other }: any) => (
+    <PropertyGrid
+        style={{ height: "450px" }}
+        toolbar={(
+            <GridToolbar resizable>
+                <Textbox prefix={<Icon icon="search" />} placeholder="Search..." />
+                <DropdownList value="Default Sort" />
+                <Button icon="categorize" />
+                <Button icon="info-circle" />
+            </GridToolbar>
+        )}
+        {...other}
+    >
+        <GridContainer>
+            {content ||
+                <GridContent style={{ height: "401px" }} className="k-auto-scrollable">
+                    <GridTable>
+                        <colgroup>
+                            <col style={{ width: "200px" }} />
+                            <col style={{ width: "250px" }} />
+                        </colgroup>
+                        <TableTbody>
+                            <TableRow>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    size
+                                </TableTd>
+                                <TableTd><b>medium</b></TableTd>
+                            </TableRow>
+                            <TableRow className="k-alt" alt>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    themeColor
+                                </TableTd>
+                                <TableTd><b>base</b></TableTd>
+                            </TableRow>
+                            <TableRow>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    fillMode
+                                </TableTd>
+                                <TableTd><b>solid</b></TableTd>
+                            </TableRow>
+                            <TableRow className="k-alt" alt>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    rounded
+                                </TableTd>
+                                <TableTd><b>medium</b></TableTd>
+                            </TableRow>
+                            <TableRow>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    icon
+                                </TableTd>
+                                <TableTd><Icon icon="star" /></TableTd>
+                            </TableRow>
+                            <TableRow className="k-alt" alt>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="caret-alt-down"></Icon>
+                                    font
+                                </TableTd>
+                                <TableTd>Roboto 400</TableTd>
+                            </TableRow>
+                            <TableRow>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    font-weight
+                                </TableTd>
+                                <TableTd><b>400</b></TableTd>
+                            </TableRow>
+                            <TableRow className="k-alt" alt>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    font-family
+                                </TableTd>
+                                <TableTd><b>Roboto</b></TableTd>
+                            </TableRow>
+                            <TableRow className="k-hidden k-bottom k-sticky k-footer-template">
+                                <TableTd colspan="2"><span>&nbsp;</span></TableTd>
+                            </TableRow>
+                        </TableTbody>
+                    </GridTable>
+                </GridContent>
+            }
+        </GridContainer>
+    </PropertyGrid>
+);
diff --git a/packages/html/src/propertygrid/templates/propertygrid-with-splitter.tsx b/packages/html/src/propertygrid/templates/propertygrid-with-splitter.tsx
@@ -0,0 +1,14 @@
+import { PropertyGridNormal } from "..";
+import { Button } from "../../button";
+import { Splitter, SplitterPane } from "../../splitter";
+
+export const PropertyGridWithSplitter = ({ content, ...other }: any) => (
+    <Splitter>
+        <SplitterPane scrollable flexBasis="215px">
+            <Button icon="star">Button</Button>
+        </SplitterPane>
+        <SplitterPane scrollable>
+            <PropertyGridNormal {...other} content={content} />
+        </SplitterPane>
+    </Splitter>
+);
diff --git a/packages/html/src/propertygrid/tests/propertygrid.tsx b/packages/html/src/propertygrid/tests/propertygrid.tsx
@@ -0,0 +1,18 @@
+import { PropertyGridWithSplitter } from "..";
+
+const styles = `
+    .k-pane:nth-child(1) {
+        text-align: center;
+        margin-top: 10%;
+    }
+`;
+
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <PropertyGridWithSplitter />
+        </div>
+    </>
+);