From 4066de1bb00fdc151a5545326d4444656aacb54c Mon Sep 17 00:00:00 2001
From: Florian BOUILLON <f.bouillon@aptatio.com>
Date: Fri, 23 Jun 2023 11:14:24 +0200
Subject: [PATCH] feat: handle number input better

Signed-off-by: Florian BOUILLON <f.bouillon@aptatio.com>
---
 src/Input/Input.stories.tsx |  5 +++--
 src/Input/index.tsx         | 26 +++++++++++++++-----------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/Input/Input.stories.tsx b/src/Input/Input.stories.tsx
index ffb48fb..a503e76 100644
--- a/src/Input/Input.stories.tsx
+++ b/src/Input/Input.stories.tsx
@@ -1,8 +1,8 @@
-import { Meta } from '@storybook/react/types-6-0'
 import { Story } from "@storybook/react"
+import { Meta } from '@storybook/react/types-6-0'
+import { X } from 'lucide-react'
 import React from 'react'
 import Component from '.'
-import { X } from 'lucide-react'
 
 export default {
 	title: 'DZEIO/Input',
@@ -20,6 +20,7 @@ tmp.args = {
 	// 	icon: X,
 	// 	transformer: (v: string) => v + 1
 	// },
+	min: 0,
 	id: 'pouet',
 	type: 'number',
 	step: 10,
diff --git a/src/Input/index.tsx b/src/Input/index.tsx
index 455eb55..94535c6 100644
--- a/src/Input/index.tsx
+++ b/src/Input/index.tsx
@@ -2,10 +2,10 @@ import React, { FocusEvent } from 'react'
 
 import { objectEqual, objectOmit } from '@dzeio/object-util'
 import { ChevronDown, MinusSquare, PlusSquare } from 'lucide-react'
-import { Icon } from '../interfaces'
 import Menu from '../Menu'
 import Text from '../Text'
 import { buildClassName } from '../Util'
+import { Icon } from '../interfaces'
 import css from './Input.module.styl'
 
 interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
@@ -129,15 +129,10 @@ export default class Input extends React.Component<Props, States> {
 			if (this.props.choices) {
 				const choice = this.props.choices.find((it) => typeof it === 'string' ? it : it.value === this.props.value?.toString())
 				if (choice) {
-					this.setState({
-						displayedValue: typeof choice === 'string' ? choice : choice.display,
-						value: typeof choice === 'string' ? choice : choice.value,
-						valueUpdate: true
-					})
+					this.onChange(typeof choice === 'string' ? choice : choice.value)
 				}
 			} else {
-				this.setState({ displayedValue: this.props.value?.toString(), value : this.props.value?.toString(), valueUpdate: true })
-
+				this.onChange(this.props.value?.toString() ?? '')
 			}
 		}
 		if (prevStates.value !== this.state.value) {
@@ -354,7 +349,7 @@ export default class Input extends React.Component<Props, States> {
 			return <Icon.icon size={16*2+18} className={buildClassName(css[position], css.iconClickable)} onClick={async () => {
 				if (this.props.disabled) {return}
 				const value = Icon.transformer(this.state.value ?? this.state.displayedValue ?? '')
-				this.setState({ value: value, displayedValue: value, valueUpdate: true })
+				this.onChange(value)
 			}} />
 		}
 
@@ -377,14 +372,23 @@ export default class Input extends React.Component<Props, States> {
 	 */
 	private onChange = async (event: React.ChangeEvent<HTMLInputElement>|string) => {
 		// get the input
-		const value = typeof event === 'string' ? event : event.currentTarget.value
-		// console.log("onChange", value)
+		let value = typeof event === 'string' ? event : event.currentTarget.value
 
 		if (typeof value !== 'string') {
 			return
 		}
 
+		if (this.props.type === 'number') {
+			const val = parseFloat(value)
+			const min = typeof this.props.min !== 'undefined' ? typeof this.props.min === 'string' ? parseFloat(this.props.min) : this.props.min : -Infinity
+			const max = typeof this.props.max !== 'undefined' ? typeof this.props.max === 'string' ? parseFloat(this.props.max) : this.props.max : Infinity
+			console.log('pouet', val, this.props.min, min, this.props.max, max)
+			value = Math.min(max, Math.max(min, val)).toString()
+		}
+		console.log("onChange", value, this.props.type)
+
 		if (this.props.onChange && typeof event !== 'string') {
+			event.currentTarget.value = value
 			this.props.onChange(event)
 		}