aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-23 07:54:08 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-23 07:54:08 +0800
commitbdf623dab54132f257057a6949d0a1e245d0b468 (patch)
tree618bf990da57e1182337b534f89b6b914fa7baed
parent921492e8186697e477c27d76bd7eb58ce2454765 (diff)
downloaddexon-0x-contracts-bdf623dab54132f257057a6949d0a1e245d0b468.tar.gz
dexon-0x-contracts-bdf623dab54132f257057a6949d0a1e245d0b468.tar.zst
dexon-0x-contracts-bdf623dab54132f257057a6949d0a1e245d0b468.zip
chore: refactor ScalingInput
-rw-r--r--packages/instant/src/components/scaling_input.tsx27
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) {