Skip to content

Commit e728b14

Browse files
zhpenkovzhpenkov
committed
feat(html): add propertygrid spec
1 parent 1978675 commit e728b14

File tree

6 files changed

+167
-0
lines changed

6 files changed

+167
-0
lines changed

‎packages/html/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export * from './grid/index';
104104
export * from './listview/index';
105105
export * from './spreadsheet/index';
106106
export * from './pivotgrid/index';
107+
export * from './propertygrid/index';
107108
export * from './treelist/index';
108109
export * from './filter/index';
109110
export * from './filemanager/index';

‎packages/html/src/propertygrid/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './propertygrid.spec';
2+
export * from './templates/propertygrid-normal';
3+
export * from './templates/propertygrid-with-preview';

‎packages/html/src/propertygrid/propertygrid.spec.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { classNames } from '../misc';
2+
import { KendoGridProps } from '../grid';
3+
import { TreeList } from '../treelist';
4+
5+
const PROPERTYGRID_CLASSNAME = 'k-property-grid';
6+
7+
const states = [];
8+
9+
const options = {};
10+
11+
const defaultOptions = {};
12+
13+
export const PropertyGrid = (
14+
props: KendoGridProps &
15+
React.HTMLAttributes<HTMLDivElement>
16+
) => (
17+
<TreeList
18+
{...props}
19+
className={classNames(
20+
PROPERTYGRID_CLASSNAME,
21+
props.className
22+
)}
23+
>
24+
{props.children}
25+
</TreeList>
26+
);
27+
28+
PropertyGrid.states = states;
29+
PropertyGrid.options = options;
30+
PropertyGrid.className = PROPERTYGRID_CLASSNAME;
31+
PropertyGrid.defaultOptions = defaultOptions;
32+
33+
export default PropertyGrid;

‎packages/html/src/propertygrid/templates/propertygrid-normal.tsx

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { PropertyGrid } from "..";
2+
import { Button } from "../../button";
3+
import { DropdownList } from "../../dropdownlist";
4+
import { GridToolbar, GridContainer, GridContent, GridTable } from "../../grid";
5+
import { Icon } from "../../icon";
6+
import { TableTbody, TableRow, TableTd } from "../../table";
7+
import { Textbox } from "../../textbox";
8+
9+
export const PropertyGridNormal = ({ content, ...other }: any) => (
10+
<PropertyGrid
11+
style={{ height: "450px" }}
12+
toolbar={(
13+
<GridToolbar resizable>
14+
<Textbox prefix={<Icon icon="search" />} placeholder="Search..." />
15+
<DropdownList value="Default Sort" />
16+
<Button icon="categorize" />
17+
<Button icon="info-circle" />
18+
</GridToolbar>
19+
)}
20+
{...other}
21+
>
22+
<GridContainer>
23+
{content ||
24+
<GridContent className="k-auto-scrollable">
25+
<GridTable>
26+
<colgroup>
27+
<col style={{ width: "200px" }} />
28+
<col style={{ width: "250px" }} />
29+
</colgroup>
30+
<TableTbody>
31+
<TableRow>
32+
<TableTd>
33+
<Icon className="k-treelist-toggle" icon="none"></Icon>
34+
size
35+
</TableTd>
36+
<TableTd><b>medium</b></TableTd>
37+
</TableRow>
38+
<TableRow className="k-alt" alt>
39+
<TableTd>
40+
<Icon className="k-treelist-toggle" icon="none"></Icon>
41+
themeColor
42+
</TableTd>
43+
<TableTd><b>base</b></TableTd>
44+
</TableRow>
45+
<TableRow>
46+
<TableTd>
47+
<Icon className="k-treelist-toggle" icon="none"></Icon>
48+
fillMode
49+
</TableTd>
50+
<TableTd><b>solid</b></TableTd>
51+
</TableRow>
52+
<TableRow className="k-alt" alt>
53+
<TableTd>
54+
<Icon className="k-treelist-toggle" icon="none"></Icon>
55+
rounded
56+
</TableTd>
57+
<TableTd><b>medium</b></TableTd>
58+
</TableRow>
59+
<TableRow>
60+
<TableTd>
61+
<Icon className="k-treelist-toggle" icon="none"></Icon>
62+
icon
63+
</TableTd>
64+
<TableTd><Icon icon="star" /></TableTd>
65+
</TableRow>
66+
<TableRow className="k-alt" alt>
67+
<TableTd>
68+
<Icon className="k-treelist-toggle" icon="caret-alt-down"></Icon>
69+
font
70+
</TableTd>
71+
<TableTd>Roboto 400</TableTd>
72+
</TableRow>
73+
<TableRow>
74+
<TableTd>
75+
<Icon className="k-treelist-toggle" icon="none"></Icon>
76+
<Icon className="k-treelist-toggle" icon="none"></Icon>
77+
font-weight
78+
</TableTd>
79+
<TableTd><b>400</b></TableTd>
80+
</TableRow>
81+
<TableRow className="k-alt" alt>
82+
<TableTd>
83+
<Icon className="k-treelist-toggle" icon="none"></Icon>
84+
<Icon className="k-treelist-toggle" icon="none"></Icon>
85+
font-family
86+
</TableTd>
87+
<TableTd><b>Roboto</b></TableTd>
88+
</TableRow>
89+
<TableRow className="k-hidden k-bottom k-sticky k-footer-template">
90+
<TableTd colspan="2"><span>&nbsp;</span></TableTd>
91+
</TableRow>
92+
</TableTbody>
93+
</GridTable>
94+
</GridContent>
95+
}
96+
</GridContainer>
97+
</PropertyGrid>
98+
);

‎packages/html/src/propertygrid/templates/propertygrid-with-preview.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { PropertyGridNormal } from "..";
2+
import { Button } from "../../button";
3+
import { Splitter, SplitterPane } from "../../splitter";
4+
5+
export const PropertyGridWithPreview = ({ content, ...other }: any) => (
6+
<Splitter>
7+
<SplitterPane scrollable flexBasis="215px">
8+
<Button icon="star">Button</Button>
9+
</SplitterPane>
10+
<SplitterPane scrollable>
11+
<PropertyGridNormal {...other} content={content} />
12+
</SplitterPane>
13+
</Splitter>
14+
);

‎packages/html/src/propertygrid/tests/propertygrid.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { PropertyGridWithPreview } from "..";
2+
3+
const styles = `
4+
.k-pane:nth-child(1) {
5+
text-align: center;
6+
margin-top: 10%;
7+
}
8+
`;
9+
10+
11+
export default () => (
12+
<>
13+
<style>{styles}</style>
14+
<div id="test-area" className="k-d-grid">
15+
<PropertyGridWithPreview />
16+
</div>
17+
</>
18+
);

0 commit comments

Comments
 (0)