refactor: manual numeric replace of grids & inputs

damyanpetev · damyanpetev · commit 7628b9d8252b · 2025-04-02T14:05:20.000+03:00
diff --git a/samples/grids/grid/finjs/src/index.tsx b/samples/grids/grid/finjs/src/index.tsx
@@ -256,13 +256,13 @@ function openDialogForRow(e: any, rowData: any) {
           </div>
           <div className="control-item">
             <label id="recordsLabel">Records: <span>{recordsCount}</span></label>
-            <IgrSlider className="finjs-slider" value="1000" min="0" max="10000" step="100" change={x => {
+            <IgrSlider className="finjs-slider" value={1000} min={0} max={10000} step={100} change={x => {
               setRecordsCount(x.value);
             }}></IgrSlider>
           </div>
           <div className="control-item">
             <label id="frequencyLabel" >Frequency:<span id="slider-freq-value">{frequency}</span></label>
-            <IgrSlider className="finjs-slider" value="500" min="100" max="3000" step="10"  change={x => {
+            <IgrSlider className="finjs-slider" value={500} min={100} max={3000} step={10}  change={x => {
               setFrequency(x.value);
             }}></IgrSlider>
           </div>
diff --git a/samples/inputs/circular-progress-indicator/dynamic/src/index.tsx b/samples/inputs/circular-progress-indicator/dynamic/src/index.tsx
@@ -27,7 +27,7 @@ export default class DynamicCircularProgress extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div style={{width: "300px", display: "flex", alignItems: "center", marginTop: "30px"}}>
-                <IgrCircularProgress ref={this.circularProgressRef} style={{marginRight: "50px", marginLeft: "20px"}} max="100" value="100">
+                <IgrCircularProgress ref={this.circularProgressRef} style={{marginRight: "50px", marginLeft: "20px"}} max={100} value={100}>
                     <IgrCircularGradient offset="0%" color="#ff9a40">
                     </IgrCircularGradient>
                     <IgrCircularGradient offset="50%" color="#1eccd4">
diff --git a/samples/inputs/circular-progress-indicator/simple/src/index.tsx b/samples/inputs/circular-progress-indicator/simple/src/index.tsx
@@ -16,7 +16,7 @@ export default class SimpleCircularProgressIndicator extends React.Component<any
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrCircularProgress value="100" />
+                <IgrCircularProgress value={100} />
             </div>
         );
     }
diff --git a/samples/inputs/dropdown/position/src/index.tsx b/samples/inputs/dropdown/position/src/index.tsx
@@ -20,7 +20,7 @@ export default class DropDownPosition extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample center">
-                <IgrDropdown ref={this.onDropDownRef} distance="5" change={(e)=>this.onChange(e)} placement="bottom">
+                <IgrDropdown ref={this.onDropDownRef} distance={5} change={(e)=>this.onChange(e)} placement="bottom">
                     <div slot="target">
                         <IgrButton><span>Options</span></IgrButton>
                     </div>
diff --git a/samples/inputs/linear-progress-indicator/dynamic/src/index.tsx b/samples/inputs/linear-progress-indicator/dynamic/src/index.tsx
@@ -25,7 +25,7 @@ export default class DynamicLinearProgress extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrLinearProgress ref={this.linearProgressRef} style={{marginRight: "50px", marginLeft: "20px"}} max="100" value="100" labelAlign="BottomStart">
+                <IgrLinearProgress ref={this.linearProgressRef} style={{marginRight: "50px", marginLeft: "20px"}} max={100} value={100} labelAlign="BottomStart">
                 </IgrLinearProgress>
                 <div style={{display: "flex", justifyContent: "space-evenly", marginTop: "20px", marginLeft: "20px"}} onClick={this.onIconClick}>
                     <IgrIconButton ref={this.removeIconRef} className="removeIcon" name="remove" collection="material">
diff --git a/samples/inputs/linear-progress-indicator/simple/src/index.tsx b/samples/inputs/linear-progress-indicator/simple/src/index.tsx
@@ -15,7 +15,7 @@ export default class SimpleLinearProgressIndicator extends React.Component<any,
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrLinearProgress value="100" ></IgrLinearProgress>
+                <IgrLinearProgress value={100} ></IgrLinearProgress>
             </div>
         );
     }
diff --git a/samples/inputs/linear-progress-indicator/striped/src/index.tsx b/samples/inputs/linear-progress-indicator/striped/src/index.tsx
@@ -15,11 +15,11 @@ export default class StripedLinearProgress extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                 <IgrLinearProgress style={{marginBottom: "15px"}} value="100" variant="primary" />
-                 <IgrLinearProgress style={{marginBottom: "15px"}} value="100" variant="success" indeterminate={true} striped={true} />
-                 <IgrLinearProgress style={{marginBottom: "15px"}} value="100" variant="danger" />
-                 <IgrLinearProgress style={{marginBottom: "15px"}} value="100" variant="info" striped={true} />
-                 <IgrLinearProgress style={{marginBottom: "15px"}} value="100" variant="warning"/>
+                 <IgrLinearProgress style={{marginBottom: "15px"}} value={100} variant="primary" />
+                 <IgrLinearProgress style={{marginBottom: "15px"}} value={100} variant="success" indeterminate={true} striped={true} />
+                 <IgrLinearProgress style={{marginBottom: "15px"}} value={100} variant="danger" />
+                 <IgrLinearProgress style={{marginBottom: "15px"}} value={100} variant="info" striped={true} />
+                 <IgrLinearProgress style={{marginBottom: "15px"}} value={100} variant="warning"/>
             </div>
         );
     }
diff --git a/samples/inputs/linear-progress-indicator/styling/src/index.tsx b/samples/inputs/linear-progress-indicator/styling/src/index.tsx
@@ -16,7 +16,7 @@ export default class StylingLinearProgressIndicator extends React.Component<any,
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrLinearProgress value="100" ></IgrLinearProgress>
+                <IgrLinearProgress value={100} ></IgrLinearProgress>
             </div>
         );
     }
diff --git a/samples/inputs/linear-progress-indicator/types/src/index.tsx b/samples/inputs/linear-progress-indicator/types/src/index.tsx
@@ -15,11 +15,11 @@ export default class LinearProgressTypes extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                 <IgrLinearProgress value="100"variant="primary" />
-                 <IgrLinearProgress value="100"variant="success" striped={true} />
-                 <IgrLinearProgress value="100"variant="danger" />
-                 <IgrLinearProgress value="100"variant="info" striped={true} />
-                 <IgrLinearProgress value="100"variant="warning" />
+                 <IgrLinearProgress value={100}variant="primary" />
+                 <IgrLinearProgress value={100}variant="success" striped={true} />
+                 <IgrLinearProgress value={100}variant="danger" />
+                 <IgrLinearProgress value={100}variant="info" striped={true} />
+                 <IgrLinearProgress value={100}variant="warning" />
 
             </div>
         );
diff --git a/samples/inputs/rating/basic/src/index.tsx b/samples/inputs/rating/basic/src/index.tsx
@@ -15,7 +15,7 @@ export default class RatingOverview extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">                
-                    <IgrRating className="size-large" label="Rate Experience" max="5" step=".5" hoverPreview={true}></IgrRating>                                    
+                    <IgrRating className="size-large" label="Rate Experience" max={5} step={.5} hoverPreview={true}></IgrRating>                                    
             </div>
         );
     }  
diff --git a/samples/inputs/rating/custom/src/index.tsx b/samples/inputs/rating/custom/src/index.tsx
@@ -17,7 +17,7 @@ export default class RatingCustomSymbols extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">                
-                    <IgrRating className="size-large" label="Rate Experience" step=".5" value="3" hoverPreview={true}>
+                    <IgrRating className="size-large" label="Rate Experience" step={.5} value={3} hoverPreview={true}>
                          <IgrRatingSymbol key="0">
                             <div key="div0"><IgrIcon ref={this.iconRef} name='heart' collection="material" key="default0"></IgrIcon></div>
                             <div key="empty-div0" slot='empty'><IgrIcon ref={this.iconRef} name='emptyHeart' collection="material" key="empty0"></IgrIcon></div> 
diff --git a/samples/inputs/rating/styling/src/index.tsx b/samples/inputs/rating/styling/src/index.tsx
@@ -15,7 +15,7 @@ export default class RatingStyling extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">                
-                <IgrRating className="size-large" label="Styled Rating" value="2.5" step=".5" hoverPreview={true}></IgrRating>                                    
+                <IgrRating className="size-large" label="Styled Rating" value={2.5} step={.5} hoverPreview={true}></IgrRating>                                    
             </div>
         );
     }  
diff --git a/samples/inputs/slider/constraints/src/index.tsx b/samples/inputs/slider/constraints/src/index.tsx
@@ -16,7 +16,7 @@ export default class SliderConstraints extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrSlider max="1000" min="100" lowerBound="200" upperBound="800" value="400" primaryTicks="2"/>
+                <IgrSlider max={1000} min={100} lowerBound={200} upperBound={800} value={400} primaryTicks={2}/>
             </div>
         );
     }
diff --git a/samples/inputs/slider/disabled/src/index.tsx b/samples/inputs/slider/disabled/src/index.tsx
@@ -16,7 +16,7 @@ export default class SliderDisabled extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrSlider value="40" disabled={true}/>
+                <IgrSlider value={40} disabled={true}/>
             </div>
         );
     }
diff --git a/samples/inputs/slider/discrete/src/index.tsx b/samples/inputs/slider/discrete/src/index.tsx
@@ -16,7 +16,7 @@ export default class SliderDiscrete extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrSlider step="10" discreteTrack={true}/>
+                <IgrSlider step={10} discreteTrack={true}/>
             </div>
         );
     }
diff --git a/samples/inputs/slider/labels/src/index.tsx b/samples/inputs/slider/labels/src/index.tsx
@@ -17,7 +17,7 @@ export default class SliderLabels extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrSlider primaryTicks="3" >
+                <IgrSlider primaryTicks={3} >
                     <IgrSliderLabel><span>Low</span></IgrSliderLabel>
                     <IgrSliderLabel><span>Medium</span></IgrSliderLabel>
                     <IgrSliderLabel><span>High</span></IgrSliderLabel>
diff --git a/samples/inputs/slider/overview/src/index.tsx b/samples/inputs/slider/overview/src/index.tsx
@@ -19,9 +19,9 @@ export default class SliderOverview extends React.Component<any, any> {
             <div className="container sample">
                 <div className="slider-component">
                     <span className="slider-label">Slider</span>
-                    <IgrSlider value="40" />
+                    <IgrSlider value={40} />
                     <span className="slider-label">Range Slider</span>
-                    <IgrRangeSlider lower="20" upper="70"></IgrRangeSlider>
+                    <IgrRangeSlider lower={20} upper={70}></IgrRangeSlider>
                 </div>
             </div>
         );
diff --git a/samples/inputs/slider/styling/src/index.tsx b/samples/inputs/slider/styling/src/index.tsx
@@ -18,11 +18,11 @@ export default class SliderStyling extends React.Component<any, any> {
             <div className="container sample">
                 <div className="slider-container">
                     <span className="slider-label"> Slider</span>
-                    <IgrSlider value="40"/>
+                    <IgrSlider value={40}/>
                 </div>
                 <div className="slider-container">
                     <span className="slider-label"> Range Slider</span>
-                    <IgrRangeSlider lower="20" upper="70">
+                    <IgrRangeSlider lower={20} upper={70}>
                     </IgrRangeSlider>
                 </div>
             </div>
diff --git a/samples/inputs/slider/tick-labels/src/index.tsx b/samples/inputs/slider/tick-labels/src/index.tsx
@@ -16,8 +16,8 @@ export default class SliderTickLabels extends React.Component<any, any> {
         return (
             <div className="container sample">
                 <IgrSlider style={{padding: "30px 30px  0px 30px"}}
-                    primaryTicks="6" 
-                    secondaryTicks="1"
+                    primaryTicks={6} 
+                    secondaryTicks={1}
                     tickOrientation="Mirror" 
                     tickLabelRotation={-90} 
                     hideSecondaryLabels={true}>
diff --git a/samples/inputs/slider/ticks/src/index.tsx b/samples/inputs/slider/ticks/src/index.tsx
@@ -16,8 +16,8 @@ export default class SliderTicks extends React.Component<any, any> {
         return (
             <div className="container sample">
                 <IgrSlider style={{padding: "30px 30px  0px 30px"}}
-                    primaryTicks="3" 
-                    secondaryTicks="4" />
+                    primaryTicks={3} 
+                    secondaryTicks={4} />
             </div>
         );
     }
diff --git a/samples/inputs/slider/value-format/src/index.tsx b/samples/inputs/slider/value-format/src/index.tsx
@@ -21,8 +21,8 @@ export default class SliderValueFormat extends React.Component<any, any> {
         return (
             <div className="container sample">
                 <IgrSlider ref={this.sliderRef} style={{padding: "30px 50px"}}
-                    primaryTicks="2"
-                    secondaryTicks="4"></IgrSlider>
+                    primaryTicks={2}
+                    secondaryTicks={4}></IgrSlider>
 
                 <IgrSlider ref={this.sliderRef2} style={{padding: "30px 50px"}}
                     valueFormat="Storage {0} GB"></IgrSlider>
diff --git a/samples/inputs/slider/value/src/index.tsx b/samples/inputs/slider/value/src/index.tsx
@@ -32,13 +32,13 @@ export default class SliderValue extends React.Component<any, any> {
         return (
             <div className="container sample">
                 <div className="slider-component">
-                    <IgrSlider style={{padding: "30px 30px  0px 30px"}} ref={this.sliderRef} input={this.onInput} value="40" />
+                    <IgrSlider style={{padding: "30px 30px  0px 30px"}} ref={this.sliderRef} input={this.onInput} value={40} />
                     <div style={{paddingLeft: "30px", display: "flex"}}>
                         <span style={{whiteSpace: "pre"}}>Value:</span>
                         <span id="slider-value"></span>
                     </div>
 
-                    <IgrRangeSlider style={{padding: "30px 30px  0px 30px"}} ref={this.rangeSliderRef} input={this.onRangeInput} lower="20" upper="70"></IgrRangeSlider>
+                    <IgrRangeSlider style={{padding: "30px 30px  0px 30px"}} ref={this.rangeSliderRef} input={this.onRangeInput} lower={20} upper={70}></IgrRangeSlider>
                     <div style={{paddingLeft: "30px", display: "flex"}}>
                         <span style={{whiteSpace: "pre"}}>Lower:</span>
                         <span id="slider-lower">20</span>
diff --git a/samples/inputs/textarea/form-integration/src/index.tsx b/samples/inputs/textarea/form-integration/src/index.tsx
@@ -22,7 +22,7 @@ export default class TextAreaFormIntegration extends React.Component<any, any> {
         return (
             <div className="sample">               
                 <form id="form" onSubmit={this.onSubmitButtonClicked}>
-                <IgrTextarea rows="3"  name="user_feedback" label="Your review" required>
+                <IgrTextarea rows={3}  name="user_feedback" label="Your review" required>
                 </IgrTextarea>                
                 <div className="controls">
                     <IgrButton type="submit"><span>Submit review</span></IgrButton>
diff --git a/samples/inputs/textarea/overview/src/index.tsx b/samples/inputs/textarea/overview/src/index.tsx
@@ -15,7 +15,7 @@ export default class TextAreaOverview extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="sample">
-                <IgrTextarea rows="3" label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
+                <IgrTextarea rows={3} label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
             </div>
         );
     }
diff --git a/samples/layouts/accordion/customization/src/index.tsx b/samples/layouts/accordion/customization/src/index.tsx
@@ -84,7 +84,7 @@ export default class AccordionCustomization extends React.Component<any, any> {
                                 Cost: $<span id="lowerCost">{this.state.cost.lower}</span> to $<span id="upperCost">{this.state.cost.upper}</span>
                             </h1>
                             <span key="ep2Span">
-                                <IgrRangeSlider key="rangeSlider" min="0" max="1000" lower={this.state.cost.lower} upper={this.state.cost.upper}
+                                <IgrRangeSlider key="rangeSlider" min={0} max={1000} lower={this.state.cost.lower} upper={this.state.cost.upper}
                                     change={this.costRangeChange}>
                                 </IgrRangeSlider>
                             </span>
@@ -96,7 +96,7 @@ export default class AccordionCustomization extends React.Component<any, any> {
                                     {[1, 2, 3, 4].map(rating => {
                                         return (
                                             <IgrRadio key={`${rating}star`} name="rating" value={rating.toString()} change={this.ratingChange}>
-                                                <IgrRating label={`${rating} star${rating > 1 ? 's' : ''} or more`} max="5" value={rating + 0.5}
+                                                <IgrRating label={`${rating} star${rating > 1 ? 's' : ''} or more`} max={5} value={rating + 0.5}
                                                     className="size-small" readonly key={`{r-${rating}}`}>
                                                 </IgrRating>
                                             </IgrRadio>

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export default class SimpleCircularProgressIndicator extends React.Component<any`
`16`	`16`	`public render(): JSX.Element {`
`17`	`17`	`return (`
`18`	`18`	`<div className="container sample">`
`19`		`- <IgrCircularProgress value="100" />`
	`19`	`+ <IgrCircularProgress value={100} />`
`20`	`20`	`</div>`
`21`	`21`	`);`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export default class SimpleLinearProgressIndicator extends React.Component<any,`
`15`	`15`	`public render(): JSX.Element {`
`16`	`16`	`return (`
`17`	`17`	`<div className="container sample">`
`18`		`- <IgrLinearProgress value="100" ></IgrLinearProgress>`
	`18`	`+ <IgrLinearProgress value={100} ></IgrLinearProgress>`
`19`	`19`	`</div>`
`20`	`20`	`);`
`21`	`21`	`}`