aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/scaling_input.tsx
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-23 01:50:25 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-23 01:50:25 +0800
commit77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9 (patch)
tree729943322c55f05e50246d5e01e884a89a3e4c21 /packages/instant/src/components/scaling_input.tsx
parent6510454337dd5add86522c0eb5621a3f55ac062d (diff)
downloaddexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar
dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.gz
dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.bz2
dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.lz
dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.xz
dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.zst
dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.zip
feat: have basic scaling amount input working
Diffstat (limited to 'packages/instant/src/components/scaling_input.tsx')
-rw-r--r--packages/instant/src/components/scaling_input.tsx101
1 files changed, 75 insertions, 26 deletions
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index ea0a925d2..a2c4ba342 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -17,47 +17,79 @@ export enum ScalingInputPhase {
export interface ScalingInputProps {
startWidthCh: number;
endWidthCh: number;
- startFontSizePx: number;
+ fontSizePx: number;
value?: string;
- onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+ onChange: (event: React.ChangeEvent<HTMLInputElement>, fontSize: number) => void;
fontColor?: ColorOption;
placeholder?: string;
}
-// Magic value obtained via trial-and-error
-const scalingRateToMaintainSameWidth = 0.1;
+
+export interface ScalingInputProps {
+ fixedWidthInPxIfExists?: number;
+}
+
export class ScalingInput extends React.Component<ScalingInputProps> {
public static defaultProps = {
onChange: util.boundNoop,
+ onFontSizeChange: util.boundNoop,
};
+ public state = {
+ fixedWidthInPxIfExists: undefined,
+ };
+ private _inputRef = React.createRef();
+ public static getPhase(startWidthCh: number, endWidthCh: number, value?: string): ScalingInputPhase {
+ if (_.isUndefined(value) || value.length <= startWidthCh) {
+ return ScalingInputPhase.Start;
+ }
+ if (value.length > startWidthCh && value.length <= endWidthCh) {
+ return ScalingInputPhase.Scaling;
+ }
+ return ScalingInputPhase.End;
+ }
+ public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase {
+ const { value, startWidthCh, endWidthCh } = props;
+ return ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+ }
+ public componentDidUpdate(prevProps: ScalingInputProps): void {
+ const prevPhase = ScalingInput.getPhaseFromProps(prevProps);
+ const curPhase = ScalingInput.getPhaseFromProps(this.props);
+ // 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) {
+ this.setState({
+ fixedWidthInPxIfExists: this._getInputWidthInPx(),
+ });
+ }
+ // if we end from end to to anything else, un-fix the width
+ if (prevPhase === ScalingInputPhase.End && curPhase !== ScalingInputPhase.End) {
+ this.setState({
+ fixedWidthInPxIfExists: undefined,
+ });
+ }
+ }
public render(): React.ReactNode {
const { fontColor, onChange, placeholder, value } = this.props;
- const phase = this._getPhase();
+ const phase = ScalingInput.getPhaseFromProps(this.props);
return (
<Input
+ ref={this._inputRef as any}
fontColor={fontColor}
- onChange={onChange}
+ onChange={this._handleChange}
value={value}
placeholder={placeholder}
- fontSize={this._calculateFontSize(phase)}
- width={this._calculateWidth(phase)}
+ fontSize={`${this.props.fontSizePx}px`}
+ width={this._calculateWidth()}
/>
);
}
- private readonly _calculateFontSize = (phase: ScalingInputPhase): string => {
- const { value, endWidthCh, startFontSizePx } = this.props;
- if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
- return `${startFontSizePx}px`;
- }
- const charactersOverMax = value.length - endWidthCh;
- const pixelsToReduceFontSizeBy = charactersOverMax * 2;
- const newFontSizePx = startFontSizePx - pixelsToReduceFontSizeBy;
- return `${newFontSizePx}px`;
- };
- private readonly _calculateWidth = (phase: ScalingInputPhase): string => {
+ private readonly _calculateWidth = (): string => {
+ const phase = ScalingInput.getPhaseFromProps(this.props);
const { value, startWidthCh, endWidthCh } = this.props;
if (_.isUndefined(value)) {
return `${startWidthCh}ch`;
}
+ if (!_.isUndefined(this.state.fixedWidthInPxIfExists)) {
+ return `${this.state.fixedWidthInPxIfExists}px`;
+ }
switch (phase) {
case ScalingInputPhase.Start:
return `${startWidthCh}ch`;
@@ -69,14 +101,31 @@ export class ScalingInput extends React.Component<ScalingInputProps> {
return `${startWidthCh}ch`;
}
};
- private readonly _getPhase = (): ScalingInputPhase => {
- const { value, startWidthCh, endWidthCh } = this.props;
- if (_.isUndefined(value) || value.length <= this.props.startWidthCh) {
- return ScalingInputPhase.Start;
+ private readonly _getInputWidthInPx = (): number => {
+ const ref = this._inputRef.current;
+ if (!ref) {
+ return 0;
}
- if (value.length > startWidthCh && value.length <= endWidthCh) {
- return ScalingInputPhase.Scaling;
+ return (ref as any).getBoundingClientRect().width;
+ };
+ private readonly _calculateNextFontSize = (
+ currentFontSizePx: number,
+ value: string,
+ startWidthCh: number,
+ endWidthCh: number,
+ ): number => {
+ const phase = ScalingInput.getPhase(startWidthCh, endWidthCh, value);
+ if (_.isUndefined(value) || phase !== ScalingInputPhase.End) {
+ return currentFontSizePx;
}
- return ScalingInputPhase.End;
+ const charactersOverMax = value.length - endWidthCh;
+ const pixelsToReduceFontSizeBy = charactersOverMax * 5;
+ const fontSize = currentFontSizePx - pixelsToReduceFontSizeBy;
+ return fontSize;
+ };
+ private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = event.target.value;
+ const { fontSizePx, startWidthCh, endWidthCh } = this.props;
+ this.props.onChange(event, this._calculateNextFontSize(fontSizePx, value, startWidthCh, endWidthCh));
};
}