Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] feat(NumericInput): support localization #4388

Merged
merged 20 commits into from
Nov 16, 2020
Merged

[core] feat(NumericInput): support localization #4388

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
c389c44
Add locale for NumericInput component
hunterxyz Jul 20, 2020
556b11b
Merge branch 'develop' into au/numeric-input-locale
hunterxyz Sep 14, 2020
9e828f9
made the parsing more consistent through the lifecycle
hunterxyz Sep 16, 2020
62f11e4
fixed input as string
hunterxyz Sep 16, 2020
de00a71
removed more parsing, adjusted the example
hunterxyz Sep 16, 2020
6e9a966
merged with develop
hunterxyz Oct 2, 2020
4177cb2
fixed locale interface
hunterxyz Oct 8, 2020
e3633eb
reverted getDerivedStateFromProps condition
hunterxyz Oct 8, 2020
1860be7
applied suggested adjustments
hunterxyz Oct 16, 2020
caaf353
applied suggested adjustments
hunterxyz Oct 19, 2020
ce93f93
fix locale can be `null`
hunterxyz Oct 26, 2020
14b6d32
applied prettier rules
hunterxyz Oct 26, 2020
3e95559
fix linting
hunterxyz Oct 26, 2020
09d762c
fix tests
hunterxyz Oct 26, 2020
21d7893
fix tests and code due to failing tests
hunterxyz Oct 26, 2020
ae03611
applied prettier rules
hunterxyz Oct 26, 2020
9119e33
applied suggested changes
hunterxyz Nov 16, 2020
4ee997f
prettier and lint
hunterxyz Nov 16, 2020
f602c9a
Merge branch 'develop' into au/numeric-input-locale
hunterxyz Nov 16, 2020
4a5dbb3
minor fixes
adidahiya Nov 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
applied suggested adjustments
  • Loading branch information
@hunterxyz
hunterxyz committed Oct 19, 2020
commit caaf353fbbeec2e57f60266d3c203fbf4e5bb934
12 changes: 6 additions & 6 deletions packages/core/src/components/forms/numericInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer
return NumericInput.VALUE_EMPTY;
}
const currentValue = parseStringToStringNumber(value, locale);
const nextValue = toMaxPrecision(parseFloat(currentValue) + delta, stepMaxPrecision);
const nextValue = toMaxPrecision(Number(currentValue) + delta, stepMaxPrecision);
const clampedValue = clampValue(nextValue, min, max);
return toLocaleString(clampedValue, locale);
}
Expand Down Expand Up @@ -336,7 +336,7 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer
if ((didBoundsChange && didValueChange) || didLocaleChange) {
// we clamped the value due to a bounds change, so we should fire the change callback
const valueAsString = parseStringToStringNumber(prevState.value, prevProps.locale);
const localizedValue = toLocaleString(parseFloat(valueAsString), this.props.locale);
const localizedValue = toLocaleString(+valueAsString, this.props.locale);

this.props.onValueChange?.(+valueAsString, localizedValue, this.inputElement);
}
Expand Down Expand Up @@ -374,9 +374,9 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer
0,
this.props.locale,
);
let valueDoesNotMatch = sanitizedValue !== value.toString();
let localizedValue = toLocaleString(Number(parseStringToStringNumber(value, this.props.locale)), this.props.locale);
let isNotLocalized = sanitizedValue !== localizedValue;
const valueDoesNotMatch = sanitizedValue !== value.toString();
const localizedValue = toLocaleString(Number(parseStringToStringNumber(value, this.props.locale)), this.props.locale);
const isNotLocalized = sanitizedValue !== localizedValue;

if (valueDoesNotMatch && isNotLocalized) {
console.warn(Errors.NUMERIC_INPUT_CONTROLLED_VALUE_INVALID);
Expand Down Expand Up @@ -495,7 +495,7 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer
if (this.props.min !== undefined || this.props.max !== undefined) {
const min = this.props.min ?? -Infinity;
const max = this.props.max ?? Infinity;
let valueAsNumber = Number(parseStringToStringNumber(this.state.value, this.props.locale));
const valueAsNumber = Number(parseStringToStringNumber(this.state.value, this.props.locale));
if (valueAsNumber <= min || valueAsNumber >= max) {
this.stopContinuousChange();
return;
Expand Down
13 changes: 6 additions & 7 deletions packages/core/src/components/forms/numericInputUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,18 @@ export function getValueOrEmptyValue(value: number | string = "") {
}

function transformLocalizedNumberToStringNumber(character: string, locale: string) {
adidahiya marked this conversation as resolved.
Show resolved Hide resolved
const jsNumber = new Array(10).fill("")
.map(value => value.toLocaleString(locale))
.indexOf(character);
const charactersMap = new Array(10).fill("").map((_value, index) => index.toLocaleString(locale));
adidahiya marked this conversation as resolved.
Show resolved Hide resolved
const jsNumber = charactersMap.indexOf(character);

if (jsNumber === -1) {
if (jsNumber !== -1) {
return jsNumber;
} else {
return character;
}

return jsNumber;
}

export function parseStringToStringNumber(value: number | string, locale: string | undefined): string {
adidahiya marked this conversation as resolved.
Show resolved Hide resolved
let valueAsString = "" + value;
const valueAsString = "" + value;
if (parseFloat(valueAsString).toString() === value.toString()) {
return value.toString();
}
Expand Down
7 changes: 4 additions & 3 deletions packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ export class NumericInputBasicExample extends React.PureComponent<IExampleProps,
minorStepSize: 0.1,
selectAllOnFocus: false,
selectAllOnIncrement: false,
stepSize: 1
stepSize: 1,
value: "",
};

private handleMaxChange = handleNumberChange(max => this.setState({ max }));
Expand All @@ -100,7 +101,7 @@ export class NumericInputBasicExample extends React.PureComponent<IExampleProps,
public render() {
return (
<Example options={this.renderOptions()} {...this.props}>
<NumericInput {...this.state} placeholder="Enter a number..." onValueChange={this.handleValueChange} />
<NumericInput {...this.state} placeholder="Enter a number..." onValueChange={this.handleValueChange}/>
</Example>
);
}
Expand Down Expand Up @@ -151,7 +152,7 @@ export class NumericInputBasicExample extends React.PureComponent<IExampleProps,
}

private renderSwitch(label: string, checked: boolean, onChange: React.FormEventHandler<HTMLElement>) {
return <Switch checked={checked} label={label} onChange={onChange} />;
return <Switch checked={checked} label={label} onChange={onChange}/>;
}

private renderSelectMenu(
Expand Down