aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-24 06:19:01 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-24 06:19:01 +0800
commit053e147afc1b8471c480a8612cb6bae4c363b21b (patch)
tree1559ed796585a1ed7bf806d2b7de7b45bec7dd1b /packages
parentf0c79473bdaeb87f49a9eb59fc88336f02e81546 (diff)
downloaddexon-0x-contracts-053e147afc1b8471c480a8612cb6bae4c363b21b.tar.gz
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')
-rw-r--r--packages/instant/src/components/scaling_amount_input.tsx2
-rw-r--r--packages/instant/src/components/scaling_input.tsx46
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 => {