diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-25 04:05:52 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-25 04:05:52 +0800 |
commit | 2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259 (patch) | |
tree | bad1f3dc5a3b5ec8692f5707bacda1bcd002bf31 /packages/instant/src/components | |
parent | 11f7f2d29fb0a32cfb65e6206747a8ea35ad0744 (diff) | |
download | dexon-0x-contracts-2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259.tar dexon-0x-contracts-2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259.tar.gz dexon-0x-contracts-2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259.tar.bz2 dexon-0x-contracts-2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259.tar.lz dexon-0x-contracts-2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259.tar.xz dexon-0x-contracts-2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259.tar.zst dexon-0x-contracts-2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259.zip |
feat: change to increasing input width by a constant amount per additional character
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r-- | packages/instant/src/components/scaling_input.tsx | 9 |
1 files changed, 4 insertions, 5 deletions
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx index 6948c86c1..fd517def8 100644 --- a/packages/instant/src/components/scaling_input.tsx +++ b/packages/instant/src/components/scaling_input.tsx @@ -13,7 +13,7 @@ export enum ScalingInputPhase { export interface ScalingSettings { percentageToReduceFontSizePerCharacter: number; - percentageToIncreaseWidthPerCharacter: number; + constantPxToIncreaseWidthPerCharacter: number; } export interface ScalingInputProps { @@ -40,7 +40,7 @@ export interface ScalingInputSnapshot { // These are magic numbers that were determined experimentally. const defaultScalingSettings: ScalingSettings = { percentageToReduceFontSizePerCharacter: 0.125, - percentageToIncreaseWidthPerCharacter: 0.06, + constantPxToIncreaseWidthPerCharacter: 4, }; export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> { @@ -148,9 +148,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu const { inputWidthPxAtPhaseChange } = this.state; if (!_.isUndefined(inputWidthPxAtPhaseChange)) { const charactersOverMax = value.length - textLengthThreshold; - const scalingFactor = - (scalingSettings.percentageToIncreaseWidthPerCharacter + 1) ** charactersOverMax; - const width = scalingFactor * inputWidthPxAtPhaseChange; + const scalingAmount = scalingSettings.constantPxToIncreaseWidthPerCharacter * charactersOverMax; + const width = inputWidthPxAtPhaseChange + scalingAmount; return `${width}px`; } return `${textLengthThreshold}ch`; |