manifold/web/components/number-input.tsx
Forrest Wolf 1e0845f4b9
Replace some uses of any with more specific types (#344)
* Add tsconfig.json for common

* Prefer `const` over `let` over `var`

* Kill dead code

* Fix some trivial Typescript issues

* Turn on Typescript linting in common except for no-explicit-any

* Correctly specify tsconfig dir name in functions eslintrc

* Give react children explicit types

* Add explicit types to removeUndefinedProps

* Create StripeSession type

* Give event in Dropdown an explicit type

* Revert "Give event in Dropdown an explicit type"

This reverts commit 80604310f2.

* Give bids in NewBidTable an explicit type

* Cast results of removeUndefinedProps when neccessary

* Fix type of JoinSpans

* Revert "Cast results of removeUndefinedProps when neccessary"

This reverts commit 5541617bc8.

* Revert "Add explicit types to removeUndefinedProps"

This reverts commit ccf8ffb0b5.

* Give React children types everywhere

* Give event a type

* Give event correct type

* Lint

* Standardize React import

Co-authored-by: Marshall Polaris <marshall@pol.rs>
2022-05-26 15:22:44 -07:00

64 lines
1.4 KiB
TypeScript

import clsx from 'clsx'
import { ReactNode } from 'react'
import React from 'react'
import { Col } from './layout/col'
import { Spacer } from './layout/spacer'
export function NumberInput(props: {
numberString: string
onChange: (newNumberString: string) => void
error: string | undefined
label: string
disabled?: boolean
className?: string
inputClassName?: string
// Needed to focus the amount input
inputRef?: React.MutableRefObject<any>
children?: ReactNode
}) {
const {
numberString,
onChange,
error,
label,
disabled,
className,
inputClassName,
inputRef,
children,
} = props
return (
<Col className={className}>
<label className="input-group">
<span className="bg-gray-200 text-sm">{label}</span>
<input
className={clsx(
'input input-bordered max-w-[200px] text-lg',
error && 'input-error',
inputClassName
)}
ref={inputRef}
type="number"
placeholder="0"
maxLength={9}
value={numberString}
disabled={disabled}
onChange={(e) => onChange(e.target.value.substring(0, 9))}
/>
</label>
<Spacer h={4} />
{error && (
<div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
{error}
</div>
)}
{children}
</Col>
)
}