manifold/web/components/number-input.tsx
James Grugett 76f27d1a93
Numeric range markets!! (#146)
* Numeric contract type

* Create market numeric type

* Add numeric graph (coded without testing)

* Outline of numeric bet panel

* Update bet panel logic

* create numeric contracts

* remove batching for antes for numeric markets

* Remove focus

* numeric market range [1, 100]

* Zoom graph

* Hide bet panels

* getNumericBets

* Add numeric resolution panel

* Use getNumericBets in bet panel calc

* Switch bucket count to 100

* Parallelize ante creation

* placeBet for numeric markets

* halve std of numeric bets

* Update resolveMarket with numeric type

* Set min and max for contract

* lower std for numeric bets

* calculateNumericDpmShares: use sorted order

* Use min and max to map the input

* Fix probability calc

* normpdf variance mislabeled

* range input

* merge

* change numeric graph color

* fix getNewContract params

* bet panel labels

* validation

* number input

* fix bucketing

* bucket input, numeric resolution panel

* outcome label

* merge

* numeric bet panel on mobile

* Make text underneath filled green answer bar selectable

* Default to 'all' feed category when loading page.

* fix numeric resolution panel

* fix numeric bet panel calculations

* display numeric resolution

* don't render NumericBetPanel for non numeric markets

* numeric bets: store shares, bet amounts across buckets in each bet object

* restore your bets for numeric markets

* numeric pnl calculations

* remove hasUserHitManaLimit

* contrain contract type

* handle undefined allOutcomeShares

* numeric ante bet amount

* use correct amount for numeric dpm payouts

* change numeric graph/outcome color

* numeric constants

* hack to show correct numeric payout in calculateDpmPayoutAfterCorrectBet

* remove comment

* fix ante display in bet list

* halve bucket count

* cast to NumericContract

* fix merge imports

* OUTCOME_TYPES

* typo

* lower bucket count to 200

* store raw numeric value with bet

* store raw numeric resolution value

* number input max length

* create page: min, max to undefined if not numeric market

* numeric resolution formatting

* expected value for numeric markets

* expected value for numeric markets

* rearrange lines for readability

* move normalpdf to util/math

* show bets tab

* check if outcomeMode is undefined

* remove extraneous auto-merge cruft

* hide comment status for numeric markets

* import

Co-authored-by: mantikoros <sgrugett@gmail.com>
2022-05-19 12:42:03 -05:00

63 lines
1.4 KiB
TypeScript

import clsx from 'clsx'
import _ from 'lodash'
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?: any
}) {
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>
)
}