aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-25 04:05:52 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-25 04:05:52 +0800
commit2d9c961d4f0d03cfd2f3c15dd306fad47ad1f259 (patch)
treebad1f3dc5a3b5ec8692f5707bacda1bcd002bf31 /packages/instant
parent11f7f2d29fb0a32cfb65e6206747a8ea35ad0744 (diff)
downloaddexon-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')
-rw-r--r--packages/instant/src/components/scaling_input.tsx9
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`;