aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-24 06:54:18 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-24 06:54:18 +0800
commita5edb0b421afaaa34290dc3ada73da6bca3c556a (patch)
treeecbe9ecbc7ef9fbcd339c5424f8d79a13e1c66cf
parent053e147afc1b8471c480a8612cb6bae4c363b21b (diff)
downloaddexon-sol-tools-a5edb0b421afaaa34290dc3ada73da6bca3c556a.tar
dexon-sol-tools-a5edb0b421afaaa34290dc3ada73da6bca3c556a.tar.gz
dexon-sol-tools-a5edb0b421afaaa34290dc3ada73da6bca3c556a.tar.bz2
dexon-sol-tools-a5edb0b421afaaa34290dc3ada73da6bca3c556a.tar.lz
dexon-sol-tools-a5edb0b421afaaa34290dc3ada73da6bca3c556a.tar.xz
dexon-sol-tools-a5edb0b421afaaa34290dc3ada73da6bca3c556a.tar.zst
dexon-sol-tools-a5edb0b421afaaa34290dc3ada73da6bca3c556a.zip
polish: improve scaling significantly
-rw-r--r--packages/instant/src/components/asset_amount_input.tsx3
-rw-r--r--packages/instant/src/components/scaling_amount_input.tsx7
-rw-r--r--packages/instant/src/components/scaling_input.tsx68
3 files changed, 50 insertions, 28 deletions
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index bfa857f0e..8cbf2b37a 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -39,8 +39,7 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
<Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
<ScalingAmountInput
{...rest}
- startWidthCh={3.5}
- endWidthCh={4}
+ textLengthThreshold={4}
maxFontSizePx={this.props.startingFontSizePx}
onChange={this._handleChange}
onFontSizeChange={this._handleFontSizeChange}
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 2baff5621..db3062b57 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -9,8 +9,7 @@ import { ScalingInput } from './scaling_input';
export interface ScalingAmountInputProps {
maxFontSizePx: number;
- startWidthCh: number;
- endWidthCh: number;
+ textLengthThreshold: number;
fontColor?: ColorOption;
value?: BigNumber;
onChange: (value?: BigNumber, fontSize?: number) => void;
@@ -23,11 +22,11 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
onFontSizeChange: util.boundNoop,
};
public render(): React.ReactNode {
- const { startWidthCh, endWidthCh, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
+ const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
return (
<ScalingInput
- endWidthCh={endWidthCh}
maxFontSizePx={maxFontSizePx}
+ textLengthThreshold={textLengthThreshold}
onFontSizeChange={onFontSizeChange}
fontColor={fontColor}
onChange={this._handleChange}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 5db878c52..7f8e505de 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -11,8 +11,13 @@ export enum ScalingInputPhase {
ScalingFontSize,
}
+export interface ScalingSettings {
+ percentageToReduceFontSizePerCharacter: number;
+ percentageToIncreaseWidthPerCharacter: number;
+}
+
export interface ScalingInputProps {
- endWidthCh: number;
+ textLengthThreshold: number;
maxFontSizePx: number;
value: string;
emptyInputWidthCh: number;
@@ -21,54 +26,68 @@ export interface ScalingInputProps {
fontColor?: ColorOption;
placeholder?: string;
maxLength?: number;
+ scalingSettings: ScalingSettings;
}
export interface ScalingInputState {
- fixedWidthInPxIfExists?: number;
+ inputWidthPxAtPhaseChange?: number;
}
export interface ScalingInputSnapshot {
inputWidthPx: number;
}
-// This is a magic number that was determined experimentally.
-const percentageToReduceByPerCharacter = 0.18;
+
+// These are magic numbers that were determined experimentally.
+const defaultScalingSettings: ScalingSettings = {
+ percentageToReduceFontSizePerCharacter: 0.125,
+ percentageToIncreaseWidthPerCharacter: 0.06,
+};
+
export class ScalingInput extends React.Component<ScalingInputProps, ScalingInputState> {
public static defaultProps = {
onChange: util.boundNoop,
onFontSizeChange: util.boundNoop,
- maxLength: 9,
+ maxLength: 8,
+ scalingSettings: defaultScalingSettings,
};
public state = {
- fixedWidthInPxIfExists: undefined,
+ inputWidthPxAtPhaseChange: undefined,
};
private readonly _inputRef = React.createRef();
- public static getPhase(endWidthCh: number, value: string): ScalingInputPhase {
- if (value.length <= endWidthCh) {
+ public static getPhase(textLengthThreshold: number, value: string): ScalingInputPhase {
+ if (value.length <= textLengthThreshold) {
return ScalingInputPhase.FixedFontSize;
}
return ScalingInputPhase.ScalingFontSize;
}
public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase {
- const { value, endWidthCh } = props;
- return ScalingInput.getPhase(endWidthCh, value);
+ const { value, textLengthThreshold } = props;
+ return ScalingInput.getPhase(textLengthThreshold, value);
}
public static calculateFontSize(
- endWidthCh: number,
+ textLengthThreshold: number,
maxFontSizePx: number,
phase: ScalingInputPhase,
value: string,
+ percentageToReduceFontSizePerCharacter: number,
): number {
if (phase !== ScalingInputPhase.ScalingFontSize) {
return maxFontSizePx;
}
- const charactersOverMax = value.length - endWidthCh;
- const scalingFactor = (1 - percentageToReduceByPerCharacter) ** charactersOverMax;
+ const charactersOverMax = value.length - textLengthThreshold;
+ const scalingFactor = (1 - percentageToReduceFontSizePerCharacter) ** charactersOverMax;
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);
+ const { textLengthThreshold, value, maxFontSizePx, scalingSettings } = props;
+ return ScalingInput.calculateFontSize(
+ textLengthThreshold,
+ maxFontSizePx,
+ phase,
+ value,
+ scalingSettings.percentageToReduceFontSizePerCharacter,
+ );
}
public getSnapshotBeforeUpdate(): ScalingInputSnapshot {
return {
@@ -87,13 +106,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
// if we went from anything else to end, fix to the current width as it shouldn't change as we grow
if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) {
this.setState({
- fixedWidthInPxIfExists: snapshot.inputWidthPx,
+ inputWidthPxAtPhaseChange: snapshot.inputWidthPx,
});
}
// if we end from end to to anything else, un-fix the width
if (prevPhase === ScalingInputPhase.ScalingFontSize && curPhase !== ScalingInputPhase.ScalingFontSize) {
this.setState({
- fixedWidthInPxIfExists: undefined,
+ inputWidthPxAtPhaseChange: undefined,
});
}
// If font size has changed, notify.
@@ -118,18 +137,23 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
);
}
private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
- const { value, endWidthCh } = this.props;
+ const { value, textLengthThreshold, scalingSettings } = this.props;
if (_.isEmpty(value)) {
return `${this.props.emptyInputWidthCh}ch`;
}
- if (!_.isUndefined(this.state.fixedWidthInPxIfExists)) {
- return `${this.state.fixedWidthInPxIfExists}px`;
- }
switch (phase) {
case ScalingInputPhase.FixedFontSize:
return `${value.length}ch`;
case ScalingInputPhase.ScalingFontSize:
- return `${endWidthCh}ch`;
+ const { inputWidthPxAtPhaseChange } = this.state;
+ if (!_.isUndefined(inputWidthPxAtPhaseChange)) {
+ const charactersOverMax = value.length - textLengthThreshold;
+ const scalingFactor =
+ (scalingSettings.percentageToIncreaseWidthPerCharacter + 1) ** charactersOverMax;
+ const width = scalingFactor * inputWidthPxAtPhaseChange;
+ return `${width}px`;
+ }
+ return `${textLengthThreshold}ch`;
default:
return '1ch';
}