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

Add support for scientific notation in number input components #1247 #3315

Closed
wants to merge 4 commits into from
Closed

Add support for scientific notation in number input components #1247 #3315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf9f7de
Added support for scientific notation in number input components and …
Nov 20, 2023
b96f3c9
pridanie testov
Dec 11, 2023
40e41a5
deleted all changed .py files, i added them by mistake
Dec 11, 2023
265f10e
deleted all changed .py files, i added them by mistake 2
Dec 11, 2023
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
2 changes: 1 addition & 1 deletion mathesar_ui/src/component-library/number-input/NumberInputTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export * from './number-formatter/types';
export interface NumberInputProps
extends Partial<NumberFormatterOptions>,
SimplifiedTextInputProps {
value?: number;
value?: number | string | null; // Allow both number and string values
element?: HTMLInputElement;
}

Expand Down
36 changes: 36 additions & 0 deletions mathesar_ui/src/component-library/number-input/StringifiedNumberInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,40 @@

$: formatter = new StringifiedNumberFormatter($$restProps);
$: inputmode = getInputMode($$restProps);

// Flag to toggle between regular and scientific notation
const useScientificNotation = false;

// Helper function to validate input
function isValidInput(inputValue) {
return inputValue.match(/^[-+]?(\d+(\.\d*)?|\.\d+)([eE][-+]?\d+)?$/);
}

// Helper function to check for scientific notation
function isScientificNotation(inputValue) {
return inputValue.match(/[eE][-+]?\d+/);
}

// Format the input based on the notation mode
function formatInput(inputValue) {
if (useScientificNotation && isScientificNotation(inputValue)) {
// Format as scientific notation
return inputValue;
}
// Format as regular decimal notation
return parseFloat(inputValue).toString();
}

// Event handler to handle user input
function handleInput(event) {
const inputValue = event.target.value;
if (isValidInput(inputValue)) {
// Handle valid input
element.value = formatInput(inputValue);
} else {
// Handle invalid input or show an error message
}
}
</script>

<FormattedInput
Expand All @@ -63,4 +97,6 @@
on:keydown
on:artificialInput
on:artificialChange
on:toggleScientificNotation
on:input={handleInput}
/>
160 changes: 84 additions & 76 deletions ..._ui/src/component-library/number-input/number-formatter/__tests__/NumberFormatter.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ function getFormatter(partialOpts: Partial<Options> = {}): NumberFormatter {
* don't have any unexpected behavior when running the tests across different
* machines which might be configured with different locales.
*/
const defaultsForTestRunning = { locale: 'en-US', useGrouping: true };
const defaultsForTestRunning = {
locale: 'en-US',
useGrouping: true,
allowScientificNotation: false,
};
const opts = { ...defaultsForTestRunning, ...partialOpts };
return new NumberFormatter(opts);
}
Expand All @@ -19,88 +23,90 @@ describe('parse and re-parse', () => {
string,
boolean,
boolean,
boolean,
number | undefined,
number | undefined,
string,
string,
number | null
][] = [
// locale | allowFloat
// | | allowNegative
// | | | minimumFractionDigits
// | | | | maximumFractionDigits
// | | | | | input | intermediateDisplay
// | | | | | | | value
['en-US', true , true , u, u, '' , '' , null ],
['en-US', true , true , u, u, ',' , '' , null ],
['en-US', true , true , u, u, 'a' , '' , null ],
['en-US', true , true , u, u, 'abc' , '' , null ],
['en-US', true , true , u, u, 'NaN' , '' , null ],
['en-US', true , true , u, u, 'Infinity' , '' , null ],
['en-US', true , true , u, u, ' ' , '' , null ],
['en-US', true , true , u, u, '-' , '-' , null ], // see 4
['en-US', true , false, u, u, '-' , '' , null ],
['en-US', true , true , u, u, '-a' , '-' , null ],
['en-US', true , true , u, u, 'a-' , '-' , null ],
['en-US', true , true , u, u, '-0' , '-0' , -0 ],
['en-US', true , true , u, u, '-.' , '-0.' , -0 ],
['en-US', true , true , u, u, '-0.' , '-0.' , -0 ],
['en-US', true , true , u, u, '-0.0' , '-0.0' , -0 ],
['en-US', true , true , u, u, '-0.0a' , '-0.0' , -0 ],
['en-US', true , true , u, u, '-0.0a0' , '-0.00' , -0 ],
['en-US', true , true , u, u, '-0.0a1' , '-0.01' , -0.01 ],
['en-US', true , true , u, u, '0' , '0' , 0 ],
['en-US', true , true , u, u, '0.' , '0.' , 0 ],
['en-US', false, true , u, u, '0.' , '0' , 0 ],
['en-US', true , true , u, u, '.-' , '0.' , 0 ],
['en-US', true , true , u, u, '0.0' , '0.0' , 0 ],
['en-US', true , true , u, u, '.00000' , '0.00000' , 0 ], // See 2
['en-US', true , true , u, u, '.' , '0.' , 0 ],
['en-US', true , true , u, u, '.0' , '0.0' , 0 ],
['en-US', true , true , u, u, '-.1' , '-0.1' , -0.1 ],
['en-US', true , true , u, u, '.1' , '0.1' , 0.1 ],
['en-US', true , true , u, u, '.1.' , '0.1' , 0.1 ],
['en-US', true , true , u, u, '.1.2' , '0.12' , 0.12 ],
['en-US', true , true , u, u, '1.2' , '1.2' , 1.2 ],
['en-US', true , true , u, u, '1.2.' , '1.2' , 1.2 ],
['en-US', true , true , u, u, '1..2' , '1.2' , 1.2 ],
['en-US', true , true , u, u, '1.2.3' , '1.23' , 1.23 ],
['en-US', true , true , u, u, '-1' , '-1' , -1 ],
['en-US', true , true , u, u, '-a1' , '-1' , -1 ],
['en-US', true , true , u, u, '-1-' , '-1' , -1 ],
['en-US', true , true , u, u, '--1' , '-1' , -1 ],
['en-US', true , true , u, u, '\u20121' , '-1' , -1 ], // See 3
['en-US', true , true , u, u, '1' , '1' , 1 ],
['en-US', true , true , u, u, '1,' , '1' , 1 ],
['en-US', true , true , u, u, '+1' , '1' , 1 ],
['en-US', true , true , u, u, ' 1 ' , '1' , 1 ],
['en-US', true , true , u, u, 'a1a' , '1' , 1 ],
['en-US', true , true , u, u, '1-' , '1' , 1 ],
['en-US', true , true , u, u, '12345' , '12,345' , 12345 ],
['en-US', true , true , u, u, '12,345' , '12,345' , 12345 ],
['en-US', true , true , u, u, '1,2345' , '12,345' , 12345 ],
['en-US', true , true , u, u, '1234567.89' , '1,234,567.89' , 1234567.89 ],
['en-US', true , true , u, u, '.123456789' , '0.123456789' , 0.123456789],
['en-US', true , true , u, u, '-1-2-' , '-12' , -12 ],
['en-US', true , true , u, u, '1e2' , '12' , 12 ], // See 1
['en-US', true , true , u, u, '1,,2' , '12' , 12 ],
['en-US', true , true , u, u, '1-2' , '12' , 12 ],
['en-US', true , true , u, u, '12-' , '12' , 12 ],
['en-US', true , true , u, u, '1-2-' , '12' , 12 ],
['de-DE', true , true , u, u, '2..3' , '23' , 23 ],
['de-DE', true , true , u, u, '2,,3' , '2,3' , 2.3 ],
['de-DE', true , true , u, u, '1.2.3.4' , '1.234' , 1234 ],
['de-DE', true , true , u, u, '1,2,3,4' , '1,234' , 1.234 ],
['li' , true , true , u, u, '-1' , '-1' , -1 ], // See 5
['en-US', true , true , 2, 2, '1' , '1' , 1 ],
['en-US', true , true , 2, 2, '1.2' , '1.2' , 1.2 ],
['en-US', true , true , 2, 2, '1.229' , '1.23' , 1.23 ],
['en-US', true , true , 2, 2, '-1.229' , '-1.23' , -1.23 ],
['en-US', true , true , u, 2, '1.229' , '1.23' , 1.23 ],
['en-US', true , true , u, 2, '1.00' , '1.00' , 1 ],
['en-US', true , true , 2, u, '1' , '1' , 1 ],
['en-US', true , true , 2, u, '1.0' , '1.0' , 1 ],
['en-US', true , true , 2, u, '1.229' , '1.229' , 1.229 ],
// | | allowNegative
// | | |allowScientificNotation
// | | | | minimumFractionDigits
// | | | | | maximumFractionDigits
// | | | | | | input | intermediateDisplay
// | | | | | | | | value
['en-US', true , true , false, u, u, '' , '' , null ],
['en-US', true , true , false, u, u, ',' , '' , null ],
['en-US', true , true , false, u, u, 'a' , '' , null ],
['en-US', true , true , false, u, u, 'abc' , '' , null ],
['en-US', true , true , false, u, u, 'NaN' , '' , null ],
['en-US', true , true , false, u, u, 'Infinity' , '' , null ],
['en-US', true , true , false, u, u, ' ' , '' , null ],
['en-US', true , true , false, u, u, '-' , '-' , null ], // see 4
['en-US', true , false, false, u, u, '-' , '' , null ],
['en-US', true , true , false, u, u, '-a' , '-' , null ],
['en-US', true , true , false, u, u, 'a-' , '-' , null ],
['en-US', true , true , false, u, u, '-0' , '-0' , -0 ],
['en-US', true , true , false, u, u, '-.' , '-0.' , -0 ],
['en-US', true , true , false, u, u, '-0.' , '-0.' , -0 ],
['en-US', true , true , false, u, u, '-0.0' , '-0.0' , -0 ],
['en-US', true , true , false, u, u, '-0.0a' , '-0.0' , -0 ],
['en-US', true , true , false, u, u, '-0.0a0' , '-0.00' , -0 ],
['en-US', true , true , false, u, u, '-0.0a1' , '-0.01' , -0.01 ],
['en-US', true , true , false, u, u, '0' , '0' , 0 ],
['en-US', true , true , false, u, u, '0.' , '0.' , 0 ],
['en-US', false, true , false, u, u, '0.' , '0' , 0 ],
['en-US', true , true , false, u, u, '.-' , '0.' , 0 ],
['en-US', true , true , false, u, u, '0.0' , '0.0' , 0 ],
['en-US', true , true , false, u, u, '.00000' , '0.00000' , 0 ], // See 2
['en-US', true , true , false, u, u, '.' , '0.' , 0 ],
['en-US', true , true , false, u, u, '.0' , '0.0' , 0 ],
['en-US', true , true , false, u, u, '-.1' , '-0.1' , -0.1 ],
['en-US', true , true , false, u, u, '.1' , '0.1' , 0.1 ],
['en-US', true , true , false, u, u, '.1.' , '0.1' , 0.1 ],
['en-US', true , true , false, u, u, '.1.2' , '0.12' , 0.12 ],
['en-US', true , true , false, u, u, '1.2' , '1.2' , 1.2 ],
['en-US', true , true , false, u, u, '1.2.' , '1.2' , 1.2 ],
['en-US', true , true , false, u, u, '1..2' , '1.2' , 1.2 ],
['en-US', true , true , false, u, u, '1.2.3' , '1.23' , 1.23 ],
['en-US', true , true , false, u, u, '-1' , '-1' , -1 ],
['en-US', true , true , false, u, u, '-a1' , '-1' , -1 ],
['en-US', true , true , false, u, u, '-1-' , '-1' , -1 ],
['en-US', true , true , false, u, u, '--1' , '-1' , -1 ],
['en-US', true , true , false, u, u, '\u20121' , '-1' , -1 ], // See 3
['en-US', true , true , false, u, u, '1' , '1' , 1 ],
['en-US', true , true , false, u, u, '1,' , '1' , 1 ],
['en-US', true , true , false, u, u, '+1' , '1' , 1 ],
['en-US', true , true , false, u, u, ' 1 ' , '1' , 1 ],
['en-US', true , true , false, u, u, 'a1a' , '1' , 1 ],
['en-US', true , true , false, u, u, '1-' , '1' , 1 ],
['en-US', true , true , false, u, u, '12345' , '12,345' , 12345 ],
['en-US', true , true , false, u, u, '12,345' , '12,345' , 12345 ],
['en-US', true , true , false, u, u, '1,2345' , '12,345' , 12345 ],
['en-US', true , true , false, u, u, '1234567.89' , '1,234,567.89' , 1234567.89 ],
['en-US', true , true , false, u, u, '.123456789' , '0.123456789' , 0.123456789],
['en-US', true , true , false, u, u, '-1-2-' , '-12' , -12 ],
['en-US', true , true , false, u, u, '1e2' , '12' , 12 ], // See 1
['en-US', true , true , false, u, u, '1,,2' , '12' , 12 ],
['en-US', true , true , false, u, u, '1-2' , '12' , 12 ],
['en-US', true , true , false, u, u, '12-' , '12' , 12 ],
['en-US', true , true , false, u, u, '1-2-' , '12' , 12 ],
['de-DE', true , true , false, u, u, '2..3' , '23' , 23 ],
['de-DE', true , true , false, u, u, '2,,3' , '2,3' , 2.3 ],
['de-DE', true , true , false, u, u, '1.2.3.4' , '1.234' , 1234 ],
['de-DE', true , true , false, u, u, '1,2,3,4' , '1,234' , 1.234 ],
['li' , true , true , false, u, u, '-1' , '-1' , -1 ], // See 5
['en-US', true , true , false, 2, 2, '1' , '1' , 1 ],
['en-US', true , true , false, 2, 2, '1.2' , '1.2' , 1.2 ],
['en-US', true , true , false, 2, 2, '1.229' , '1.23' , 1.23 ],
['en-US', true , true , false, 2, 2, '-1.229' , '-1.23' , -1.23 ],
['en-US', true , true , false, u, 2, '1.229' , '1.23' , 1.23 ],
['en-US', true , true , false, u, 2, '1.00' , '1.00' , 1 ],
['en-US', true , true , false, 2, u, '1' , '1' , 1 ],
['en-US', true , true , false, 2, u, '1.0' , '1.0' , 1 ],
['en-US', true , true , false, 2, u, '1.229' , '1.229' , 1.229 ],

// 1. Entering numbers in scientific notation is not yet supported. We could
// add this in the future.
Expand All @@ -121,6 +127,7 @@ describe('parse and re-parse', () => {
locale,
allowFloat,
allowNegative,
allowScientificNotation,
minimumFractionDigits,
maximumFractionDigits,
input,
Expand All @@ -131,6 +138,7 @@ describe('parse and re-parse', () => {
locale,
allowFloat,
allowNegative,
allowScientificNotation,
minimumFractionDigits,
maximumFractionDigits,
});
Expand Down
Loading
Loading