-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat!(component): replace table component in @iot-app-kit/components (#…
…147) * feat: Replace iot-table with new version. * Update autogenerated types * fix import * another fix for import * another fix for import * Remove unused property for Iot. * Fix a typo * Code cleanups. * Code cleanups. * update type of `ColumnDefinition.formatter` also added a few use cases in testing-ground.tsx * update type of `ColumnDefinition.formatter` also added a few use cases in testing-ground.tsx * Update asset/property IDs and table examples. * update: add formatter to filterOptions Property filtering options now has the same displayed value as table. * update formatPropertyFilterOptions function to better handle error & loading states. * update test examples for table component. * Disable Customized formatter for property filter options. * update test cases after disabled formatter for filter options * Remove unused dependency. * a few bug fixes - Split sorting and propertyFiltering - Remove formatting on property filtering options. * UI adjustment - center icon and string vertically. * Update styles and unit tests * Remove unused imports and statements. * Reformat css file * Restore testing ground
- Loading branch information
Showing
14 changed files
with
392 additions
and
268 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
packages/components/src/components/iot-table/iot-react-table.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { Component, Element, Host, Prop, State, h } from '@stencil/core'; | ||
| import React, { FunctionComponent } from 'react'; | ||
| import { createRoot, Root } from 'react-dom/client'; | ||
| import { Table, TableItem, TableProps } from '@iot-app-kit/table'; | ||
|
|
||
| @Component({ | ||
| tag: 'iot-react-table', | ||
| }) | ||
| export class IotReactTable { | ||
| @Prop() items!: TableItem[]; | ||
|
|
||
| @Prop() columnDefinitions!: TableProps['columnDefinitions']; | ||
|
|
||
| @Prop() sorting: TableProps['sorting']; | ||
|
|
||
| @Prop() propertyFiltering: TableProps['propertyFiltering']; | ||
|
|
||
| @Element() host: HTMLElement; | ||
|
|
||
| @State() root: Root; | ||
|
|
||
| componentWillLoad() { | ||
| this.root = createRoot(this.host); | ||
| } | ||
|
|
||
| componentDidLoad() { | ||
| this.componentDidUpdate(); | ||
| } | ||
|
|
||
| componentDidUpdate() { | ||
| const props: TableProps = { | ||
| items: this.items, | ||
| columnDefinitions: this.columnDefinitions, | ||
| sorting: this.sorting, | ||
| propertyFiltering: this.propertyFiltering, | ||
| }; | ||
| this.root.render(React.createElement<TableProps>(Table as FunctionComponent<TableProps>, props)); | ||
| } | ||
|
|
||
| render() { | ||
| return <Host />; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.