diff --git a/example/src/NumberSelector/NumberSelectorPage.tsx b/example/src/NumberSelector/NumberSelectorPage.tsx index b8222575..37672978 100644 --- a/example/src/NumberSelector/NumberSelectorPage.tsx +++ b/example/src/NumberSelector/NumberSelectorPage.tsx @@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'; import { NumberSelector, Screen } from 'smartway-react-native-ui'; export const NumberSelectorPage = () => { - const [value, setValue] = useState(0); + const [value, setValue] = useState(10); const [otherValue, setOtherValue] = useState(0); const styles = StyleSheet.create({ @@ -23,7 +23,7 @@ export const NumberSelectorPage = () => { showSoftInputOnFocus={true} value={value} minValue={0} - maxValue={998} + maxValue={999} minusIcon="arrow-back" plusIcon="arrow-forward" /> @@ -35,7 +35,7 @@ export const NumberSelectorPage = () => { value={otherValue} size="s" minValue={0} - maxValue={998} + maxValue={999} /> diff --git a/src/components/numberField/NumberField.tsx b/src/components/numberField/NumberField.tsx index 8826e964..f4048028 100644 --- a/src/components/numberField/NumberField.tsx +++ b/src/components/numberField/NumberField.tsx @@ -21,6 +21,7 @@ export const NumberField = React.forwardRef( const [focused, setFocused] = useState(false); const [forcedState, setForcedState] = useState(true); const [firstContentChange, setFirstContentChange] = useState(true); + const [firstValue, setFirstValue] = useState(); useEffect(() => { if (forcedState) { @@ -32,10 +33,11 @@ export const NumberField = React.forwardRef( useEffect(() => { if (firstContentChange) { + setFirstValue(props.value); setFirstContentChange(false); return; } - setFilled(true); + setFilled(props.value !== firstValue); checkContent(props.value); }, [props.value]); @@ -116,12 +118,22 @@ export const NumberField = React.forwardRef( } } }; + let cleanContent = (text: string | undefined) => { + if (text !== undefined && text !== '') { + const cleanNumber = text.replace(/[^0-9]/g, ''); + const parsedValue = parseInt(cleanNumber); + console.log('>>>', parsedValue.toString()); + return parsedValue.toString(); + } + return ''; + }; let onChangeText = (e: any) => { if (props?.onChangeText !== undefined) { props.onChangeText(e); - checkContent(props.value); - if (props.value !== '') setLastValue(props.value); } + checkContent(props.value); + if (props.value !== '') setLastValue(props.value); + props.value = e; }; let onFocus = (e: any) => { setFocused(true); @@ -129,8 +141,8 @@ export const NumberField = React.forwardRef( }; let onBlur = (e: any) => { setFocused(false); - if (props?.onChangeText !== undefined && props.value === '' && lastValue !== undefined) - props.onChangeText(lastValue); + if (props.value === '' && firstValue !== undefined) onChangeText(firstValue); + else if (props.value === '' && lastValue !== undefined) onChangeText(lastValue); if (props?.onBlur !== undefined) props.onBlur(e); }; @@ -139,11 +151,12 @@ export const NumberField = React.forwardRef( {...props} ref={ref ?? undefined} style={[stateStyle(), props.style]} - selectTextOnFocus={true} + selectTextOnFocus={false} onChangeText={(e) => onChangeText(e)} onBlur={(e) => onBlur(e)} onFocus={(e) => onFocus(e)} selectionColor={theme.sw.colors.primary.main + theme.sw.transparency[16]} + cursorColor={theme.sw.colors.primary.main} keyboardType="number-pad" editable={state !== 'readonly'} textAlign={'center'} diff --git a/src/components/numberSelector/NumberSelector.tsx b/src/components/numberSelector/NumberSelector.tsx index 3f4df34e..a83f866c 100644 --- a/src/components/numberSelector/NumberSelector.tsx +++ b/src/components/numberSelector/NumberSelector.tsx @@ -26,7 +26,7 @@ export const NumberSelector = ({ minusIcon = 'minus', plusIcon = 'add', showSoftInputOnFocus = false, - variant = 'filled', + variant = 'outlined', size = 'm', }: Props) => { let refInput = useRef(); @@ -40,8 +40,8 @@ export const NumberSelector = ({ if (!minusDisabled) onChangeText((value - 1).toString()); }; const onChangeText = (text: string) => { - refInput?.current?.focus(); const cleanNumber = text.replace(/[^0-9]/g, ''); + if (tempValue !== '') refInput?.current?.focus(); if (cleanNumber !== '') { const parsedValue = parseInt(cleanNumber); if (parsedValue !== undefined && parsedValue >= minValue && parsedValue <= maxValue) {