diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-24 06:19:01 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-24 06:19:01 +0800 |
commit | 053e147afc1b8471c480a8612cb6bae4c363b21b (patch) | |
tree | 1559ed796585a1ed7bf806d2b7de7b45bec7dd1b /packages/instant/src/components | |
parent | f0c79473bdaeb87f49a9eb59fc88336f02e81546 (diff) | |
download | dexon-0x-contracts-053e147afc1b8471c480a8612cb6bae4c363b21b.tar dexon-0x-contracts-053e147afc1b8471c480a8612cb6bae4c363b21b.tar.gz dexon-0x-contracts-053e147afc1b8471c480a8612cb6bae4c363b21b.tar.bz2 dexon-0x-contracts-053e147afc1b8471c480a8612cb6bae4c363b21b.tar.lz dexon-0x-contracts-053e147afc1b8471c480a8612cb6bae4c363b21b.tar.xz dexon-0x-contracts-053e147afc1b8471c480a8612cb6bae4c363b21b.tar.zst dexon-0x-contracts-053e147afc1b8471c480a8612cb6bae4c363b21b.zip |
fix: remove the concept of initial with from scaling input and remove phase
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r-- | packages/instant/src/components/scaling_amount_input.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/components/scaling_input.tsx | 46 |
2 files changed, 21 insertions, 27 deletions
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index 9539bfd94..2baff5621 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -26,7 +26,6 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> const { startWidthCh, endWidthCh, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props; return ( <ScalingInput - startWidthCh={startWidthCh} endWidthCh={endWidthCh} maxFontSizePx={maxFontSizePx} onFontSizeChange={onFontSizeChange} @@ -34,6 +33,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> onChange={this._handleChange} value={!_.isUndefined(value) ? value.toString() : ''} placeholder="0.00" + emptyInputWidthCh={3.5} /> ); } diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx index 10243787a..5db878c52 100644 --- a/packages/instant/src/components/scaling_input.tsx +++ b/packages/instant/src/components/scaling_input.tsx @@ -7,16 +7,15 @@ import { util } from '../util/util'; import { Input } from './ui'; export enum ScalingInputPhase { - Start, - Scaling, - End, + FixedFontSize, + ScalingFontSize, } export interface ScalingInputProps { - startWidthCh: number; endWidthCh: number; maxFontSizePx: number; - value?: string; + value: string; + emptyInputWidthCh: number; onChange: (event: React.ChangeEvent<HTMLInputElement>) => void; onFontSizeChange: (fontSizePx: number) => void; fontColor?: ColorOption; @@ -43,26 +42,23 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu fixedWidthInPxIfExists: undefined, }; private readonly _inputRef = React.createRef(); - public static getPhase(startWidthCh: number, endWidthCh: number, value?: string): ScalingInputPhase { - if (_.isUndefined(value) || value.length <= startWidthCh) { - return ScalingInputPhase.Start; + public static getPhase(endWidthCh: number, value: string): ScalingInputPhase { + if (value.length <= endWidthCh) { + return ScalingInputPhase.FixedFontSize; } - if (value.length > startWidthCh && value.length <= endWidthCh) { - return ScalingInputPhase.Scaling; - } - return ScalingInputPhase.End; + return ScalingInputPhase.ScalingFontSize; } public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase { - const { value, startWidthCh, endWidthCh } = props; - return ScalingInput.getPhase(startWidthCh, endWidthCh, value); + const { value, endWidthCh } = props; + return ScalingInput.getPhase(endWidthCh, value); } public static calculateFontSize( endWidthCh: number, maxFontSizePx: number, phase: ScalingInputPhase, - value?: string, + value: string, ): number { - if (_.isUndefined(value) || phase !== ScalingInputPhase.End) { + if (phase !== ScalingInputPhase.ScalingFontSize) { return maxFontSizePx; } const charactersOverMax = value.length - endWidthCh; @@ -89,13 +85,13 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu 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) { + if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) { this.setState({ fixedWidthInPxIfExists: snapshot.inputWidthPx, }); } // if we end from end to to anything else, un-fix the width - if (prevPhase === ScalingInputPhase.End && curPhase !== ScalingInputPhase.End) { + if (prevPhase === ScalingInputPhase.ScalingFontSize && curPhase !== ScalingInputPhase.ScalingFontSize) { this.setState({ fixedWidthInPxIfExists: undefined, }); @@ -122,22 +118,20 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu ); } private readonly _calculateWidth = (phase: ScalingInputPhase): string => { - const { value, startWidthCh, endWidthCh } = this.props; - if (_.isUndefined(value)) { - return `${startWidthCh}ch`; + const { value, endWidthCh } = this.props; + if (_.isEmpty(value)) { + return `${this.props.emptyInputWidthCh}ch`; } if (!_.isUndefined(this.state.fixedWidthInPxIfExists)) { return `${this.state.fixedWidthInPxIfExists}px`; } switch (phase) { - case ScalingInputPhase.Start: - return `${startWidthCh}ch`; - case ScalingInputPhase.Scaling: + case ScalingInputPhase.FixedFontSize: return `${value.length}ch`; - case ScalingInputPhase.End: + case ScalingInputPhase.ScalingFontSize: return `${endWidthCh}ch`; default: - return `${startWidthCh}ch`; + return '1ch'; } }; private readonly _calculateFontSize = (phase: ScalingInputPhase): number => { |