chore: refactor ScalingInput

1 files changed, 18 insertions, 9 deletions

diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 7824c10f9..c1111cea9 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -58,9 +58,12 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         const { value, startWidthCh, endWidthCh } = props;
         return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
     }
-    public static calculateFontSize(props: ScalingInputProps): number {
-        const { startWidthCh, endWidthCh, value, maxFontSizePx } = props;
-        const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+    public static calculateFontSize(
+        endWidthCh: number,
+        maxFontSizePx: number,
+        phase: ScalingInputPhase,
+        value?: string,
+    ): number {
         if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
             return maxFontSizePx;
         }
@@ -69,6 +72,10 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         const fontSize = scalingFactor * maxFontSizePx;
         return fontSize;
     }
+    public static calculateFontSizeFromProps(props: ScalingInputProps, phase: ScalingInputPhase): number {
+        const { endWidthCh, value, maxFontSizePx } = props;
+        return ScalingInput.calculateFontSize(endWidthCh, maxFontSizePx, phase, value);
+    }
     public getSnapshotBeforeUpdate(): ScalingInputSnapshot {
         return {
             inputWidthPx: this._getInputWidthInPx(),
@@ -81,8 +88,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
     ): void {
         const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
         const curPhase = ScalingInput.getPhaseFromProps(this.props);
-        const prevFontSize = ScalingInput.calculateFontSize(prevProps);
-        const curFontSize = ScalingInput.calculateFontSize(this.props);
+        const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase);
+        const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase);
         // if we went from anything else to end, fix to the current width as it shouldn't change as we grow
         if (prevPhase !== ScalingInputPhase.End && curPhase === ScalingInputPhase.End) {
             this.setState({
@@ -110,14 +117,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 onChange={onChange}
                 value={value}
                 placeholder={placeholder}
-                fontSize={`${ScalingInput.calculateFontSize(this.props)}px`}
-                width={this._calculateWidth()}
+                fontSize={`${this._calculateFontSize(phase)}px`}
+                width={this._calculateWidth(phase)}
                 maxLength={maxLength}
             />
         );
     }
-    private readonly _calculateWidth = (): string => {
-        const phase = ScalingInput.getPhaseFromProps(this.props);
+    private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
         const { value, startWidthCh, endWidthCh } = this.props;
         if (_.isUndefined(value)) {
             return `${startWidthCh}ch`;
@@ -136,6 +142,9 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 return `${startWidthCh}ch`;
         }
     };
+    private readonly _calculateFontSize = (phase: ScalingInputPhase): number => {
+        return ScalingInput.calculateFontSizeFromProps(this.props, phase);
+    };
     private readonly _getInputWidthInPx = (): number => {
         const ref = this._inputRef.current;
         if (!ref) {