Remove deprecated modules for mask-input samples (#839)

Author: IMinchev64

samples/inputs/mask-input/applying-mask/src/index.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrMaskInput, IgrIcon, IgrMaskInputModule, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrMaskInput, IgrIcon, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrMaskInputModule.register();
-IgrIconModule.register();
-
 const phoneIconText = '<svg width="24px" height="24px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" id="Слой_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M6.2478638,8.4810181C6.1535645,8.5752563,6.0301514,8.6223755,5.9067383,8.6223755   S5.6599121,8.5752563,5.5656128,8.4810181L3.5189819,6.4343872C3.4247437,6.3400879,3.3775635,6.2166748,3.3775635,6.0932617   s0.0471802-0.2468872,0.1414185-0.3411255l1.0233154-1.0233154L1.8134766,2l-0.682251,0.6821899   c-1.5083008,1.5083618-1.5083008,3.9494019,0,5.4577026l2.7288818,2.7288208   c0.3770752,0.3770752,0.812439,0.6599121,1.2769775,0.8484497C5.6015625,11.9057007,6.0952759,12,6.5889282,12   c0.4937134,0,0.9873657-0.0942993,1.4519043-0.2828369s0.8999023-0.4713745,1.2769775-0.8484497L10,10.1865234L7.2711792,7.4577026   L6.2478638,8.4810181z" fill="#1D1D1B"/><path d="M6.5,1H6v1h0.5C8.4296875,2,10,3.5703125,10,5.5V6h1V5.5C11,3.0185547,8.9814453,1,6.5,1z" fill="#1D1D1B"/><path d="M8,5.5V6h1V5.5C9,4.121582,7.878418,3,6.5,3H6v1h0.5C7.3271484,4,8,4.6728516,8,5.5z" fill="#1D1D1B"/></g></svg>';
 
 export default class MaskInputApplyingMask extends React.Component<any, any> {

samples/inputs/mask-input/overview/src/index.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrMaskInput, IgrIcon, IgrMaskInputModule, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrMaskInput, IgrIcon, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrMaskInputModule.register();
-IgrIconModule.register();
-
 const locationIconText = '<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg" aria-labelledby="locationIconTitle" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#000000"> <title id="locationIconTitle">Location</title> <path d="M12,21 C16,16.8 18,12.8 18,9 C18,5.6862915 15.3137085,3 12,3 C8.6862915,3 6,5.6862915 6,9 C6,12.8 8,16.8 12,21 Z"/> <circle cx="12" cy="9" r="1"/> </svg>';
 
 export default class MaskInputOverview extends React.Component<any, any> {

samples/inputs/mask-input/value-modes/src/index.tsx

@@ -1,22 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrMaskInput, IgrIcon, IgrRadioGroup, IgrRadio, IgrMaskInputModule, IgrIconModule, IgrRadioGroupModule, IgrRadioModule, registerIconFromText } from 'igniteui-react';
+import { IgrMaskInput, IgrIcon, IgrRadioGroup, IgrRadio, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrMaskInputModule.register();
-IgrIconModule.register();
-IgrRadioGroupModule.register();
-IgrRadioModule.register();
-
 export default class MaskInputValueModes extends React.Component<any, any> {
 
     public maskRef: IgrMaskInput;
 
     constructor(props: any) {
         super(props);
         this.onMaskRef = this.onMaskRef.bind(this);
-        this.state = { value: "" };
+        this.state = { value: "", mode: "raw" };
 
         const fileIconText = '<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title/><g id="document"><polyline class="cls-1" points="25 9 25 29 7 29 7 3 16 3"/><line class="cls-1" x1="16" x2="25" y1="3" y2="9"/><line class="cls-1" x1="16" x2="16" y1="3" y2="9"/><line class="cls-1" x1="25" x2="16" y1="9" y2="9"/><line class="cls-1" x1="11" x2="16" y1="17" y2="17"/><line class="cls-1" x1="11" x2="20" y1="21" y2="21"/></g></svg>';
         registerIconFromText("file", fileIconText, "material");
@@ -25,40 +20,44 @@ export default class MaskInputValueModes extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample center">
-                <IgrMaskInput ref={this.onMaskRef} onInput={(e)=>this.onInputChange(e)}>
+                <IgrMaskInput ref={this.onMaskRef} onInput={(e) => this.onInputChange(e)}>
                     <span slot="prefix">
                         <IgrIcon name="file" collection="material"></IgrIcon>
                     </span>
                 </IgrMaskInput>
 
-                <div id="content" style={{width: "100%", height: "inherit"}}>
-                    <IgrRadioGroup alignment="horizontal" style={{marginBottom: "10px"}}>
-                        <IgrRadio name="position" value="raw" label-position="after" onChange={(e)=>this.onRadioChange(e)} checked><span>raw</span></IgrRadio>
-                        <IgrRadio name="position" value="withFormatting" label-position="after" onChange={(e)=>this.onRadioChange(e)}><span>withFormatting</span></IgrRadio>
+                <div id="content" style={{ width: "100%", height: "inherit" }}>
+                    <IgrRadioGroup alignment="horizontal" style={{ marginBottom: "10px" }}>
+                        <IgrRadio name="position" value="raw" label-position="after" onChange={(e) => this.onRadioChange(e)} checked={this.state.mode === "raw"}><span>raw</span></IgrRadio>
+                        <IgrRadio name="position" value="withFormatting" label-position="after" onChange={(e) => this.onRadioChange(e)} checked={this.state.mode === "withFormatting"}><span>withFormatting</span></IgrRadio>
                     </IgrRadioGroup>
-                    
+
                     <span id="value-span">Value: {this.state.value}</span>
                 </div>
             </div>
         );
     }
 
-    public onMaskRef(mask: IgrMaskInput){
+    public onMaskRef(mask: IgrMaskInput) {
         if (!mask) { return; }
         this.maskRef = mask;
     }
 
     public onInputChange(event: any) {
         console.log(event)
         if (this.maskRef) {
-            this.setState({value: this.maskRef.value})
+            this.setState({ value: this.maskRef.value })
         }
     }
 
     public onRadioChange(event: any) {
         if (this.maskRef) {
-            this.maskRef.valueMode = event.detail.value;
-            this.setState({value: this.maskRef.value});
+            const mode = event.detail.value;
+            this.maskRef.valueMode = mode;
+            this.setState({
+                mode: mode,
+                value: this.maskRef.value
+            });
         }
     }
 }