Dpetev/v19 misc fixes (#799)

Author: damyanpetev

samples/grids/hierarchical-grid/cell-selection-mode/src/index.tsx

@@ -152,7 +152,8 @@ export default class Sample extends React.Component<any, any> {
     }
 
     public webRowIslandCellSelectionChange(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
-        this.hierarchicalGrid.contentChildLayoutList[0].cellSelection = args.newValue.toLocaleLowerCase();
+        const rowIsland = document.getElementsByTagName("igc-row-island")[0] as IgrRowIsland;
+        rowIsland.cellSelection = args.newValue.toLocaleLowerCase();
     }
 
 }

samples/grids/hierarchical-grid/row-pinning-extra-column/src/index.tsx

@@ -273,19 +273,17 @@ export default class Sample extends React.Component<any, any> {
     }
 
     public webHierarchicalGridChangePinningConfig(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
-        var newPinningPosition = args.newValue === "Top" ? RowPinningPosition.Top : RowPinningPosition.Bottom;
-        var grid = this.grid;
-        grid.pinning.rows = newPinningPosition;
-        var rowIsland1 = grid.contentChildLayoutList.filter(e => e.childDataKey == 'Albums');
-        rowIsland1[0].pinning.rows = newPinningPosition;
-    var rowIsland2 = rowIsland1[0].contentChildLayoutList.filter(e => e.childDataKey == 'Songs');
-    if(rowIsland2[0]) {
-            rowIsland2[0].pinning.rows = newPinningPosition;
+        const rows = args.newValue === "Top" ? RowPinningPosition.Top : RowPinningPosition.Bottom;
+        const columns = ColumnPinningPosition.End;
+        this._pinningConfig1 = { rows, columns };
+        this._pinningConfig2 = { rows, columns };
+        if ('_pinningConfig3' in this) {
+            this._pinningConfig3 = { rows, columns };
         }
-        var rowIsland3 = grid.contentChildLayoutList.filter(e => e.childDataKey == 'Tours');
-        if(rowIsland3[0]) {
-            rowIsland3[0].pinning.rows = newPinningPosition
+        if ('_pinningConfig4' in this) {
+            this._pinningConfig4 = { rows, columns };
         }
+        this.forceUpdate(); // due to not using state
     }
 
     public webHierarchicalGridRowPinCellTemplate = (e: {dataContext: IgrCellTemplateContext}) => {

samples/grids/hierarchical-grid/row-pinning-options/src/index.tsx

@@ -187,19 +187,17 @@ export default class Sample extends React.Component<any, any> {
     }
 
     public webHierarchicalGridChangePinningConfig(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
-        var newPinningPosition = args.newValue === "Top" ? RowPinningPosition.Top : RowPinningPosition.Bottom;
-        var grid = this.grid;
-        grid.pinning.rows = newPinningPosition;
-        var rowIsland1 = grid.contentChildLayoutList.filter(e => e.childDataKey == 'Albums');
-        rowIsland1[0].pinning.rows = newPinningPosition;
-    var rowIsland2 = rowIsland1[0].contentChildLayoutList.filter(e => e.childDataKey == 'Songs');
-    if(rowIsland2[0]) {
-            rowIsland2[0].pinning.rows = newPinningPosition;
+        const rows = args.newValue === "Top" ? RowPinningPosition.Top : RowPinningPosition.Bottom;
+        const columns = ColumnPinningPosition.End;
+        this._pinningConfig1 = { rows, columns };
+        this._pinningConfig2 = { rows, columns };
+        if ('_pinningConfig3' in this) {
+            this._pinningConfig3 = { rows, columns };
         }
-        var rowIsland3 = grid.contentChildLayoutList.filter(e => e.childDataKey == 'Tours');
-        if(rowIsland3[0]) {
-            rowIsland3[0].pinning.rows = newPinningPosition
+        if ('_pinningConfig4' in this) {
+            this._pinningConfig4 = { rows, columns };
         }
+        this.forceUpdate(); // due to not using state
     }
 
     public webHierarchicalGridPinRowOnRendered(): void {

samples/inputs/dropdown/target/src/index.tsx

@@ -41,7 +41,7 @@ export default class DropDownTarget extends React.Component<any, any> {
 
     public onClick(event: any) {
         if(this.dropdownRef){
-            this.dropdownRef.toggleTarget(event.i.nativeElement);
+            this.dropdownRef.toggle(event.i.nativeElement);
         }
     }
 }

samples/inputs/radio/label/src/index.tsx

@@ -24,7 +24,7 @@ export default class RadioLabel extends React.Component<any, any> {
                         <IgrRadio
                             name="fruit"
                             labelPosition="before"
-                            ariaLabelledby="radio-label"
+                            aria-labelledby="radio-label"
                             value="orange">
                         </IgrRadio>
                         </div>

samples/layouts/accordion/customization/src/index.tsx

@@ -101,7 +101,7 @@ export default class AccordionCustomization extends React.Component<any, any> {
                                         return (
                                             <IgrRadio key={`${rating}star`} name="rating" value={rating.toString()} onChange={this.ratingChange}>
                                                 <IgrRating label={`${rating} star${rating > 1 ? 's' : ''} or more`} max={5} value={rating + 0.5}
-                                                    className="size-small" readonly key={`{r-${rating}}`}>
+                                                    className="size-small" readOnly={true} key={`{r-${rating}}`}>
                                                 </IgrRating>
                                             </IgrRadio>
                                         );

samples/layouts/card/styling/src/index.tsx

@@ -27,7 +27,7 @@ export default class CardStyling extends React.Component<any, any> {
             <div className="container sample center">
                 <div className="card-wrapper">
                     <IgrCard>
-                        <IgrCardMedia key="media" height="180px">
+                        <IgrCardMedia key="media">
                             <img key="mediaImg" src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"></img>
                         </IgrCardMedia>