@xyo-network/react-shared 4.4.5 → 4.4.7

package/src/components/bigint/TextField.tsx

@@ -0,0 +1,108 @@
+import type { FormControlProps, StandardTextFieldProps } from '@mui/material'
+import {
+  FormControl, FormHelperText, TextField,
+} from '@mui/material'
+import type { FocusEventHandler } from 'react'
+import React, {
+  useEffect, useMemo,
+  useState,
+} from 'react'
+
+import { FixedPointInputAdornment } from './InputAdornment.tsx'
+
+export interface BigIntTextFieldProps extends StandardTextFieldProps {
+  defaultFixedPoint?: number
+  hideAdornment?: boolean
+  onChangeFixedPoint?: (value: bigint) => void
+}
+
+export const BigIntTextField: React.FC<BigIntTextFieldProps> = ({
+  defaultFixedPoint = 18, helperText, hideAdornment, onChangeFixedPoint, onChange, ...props
+}) => {
+  const [value, setValue] = useState<number>(0)
+  const [rawValue, setRawValue] = useState<string>('')
+  const [fixedPoint, setFixedPoint] = useState(defaultFixedPoint)
+  const [error, setError] = useState<Error>()
+
+  const handleChange: FocusEventHandler<HTMLTextAreaElement> = (event) => {
+    // run standard callback
+    onChange?.(event)
+    // remove all alpha characters but allow decimals
+    const filteredValue = event.target.value.replaceAll(/[^\d.]/g, '')
+    // only allow one decimal point
+    if (filteredValue.split('.').length > 2) return
+    setRawValue(filteredValue)
+
+    // parse the raw filtered raw value
+    const value = Number.parseFloat(filteredValue || '0')
+    // if the value is NaN set it to 0
+    if (Number.isNaN(value)) setValue(0)
+    setValue(value)
+  }
+
+  const onFixedPointChange = (fixedPoint: number) => setFixedPoint(fixedPoint)
+
+  // on value or point changes, run the bigInt callback
+  const bigIntValue = useMemo(() => {
+    const fixedValue = value * (10 ** fixedPoint)
+    setError(undefined)
+    try {
+      return BigInt(fixedValue)
+    } catch (e) {
+      console.error(e)
+      setError(e as Error)
+    }
+    // run bigInt callback
+  }, [value, fixedPoint])
+
+  useEffect(() => {
+    if (bigIntValue) onChangeFixedPoint?.(bigIntValue)
+  }, [bigIntValue])
+
+  // prevent the fixed point from being less than the number of decimal places
+  const minFixedPoint = rawValue.split('.')[1]?.length
+
+  const resolvedHelperText = useMemo(() => {
+    if (error) return 'Cannot convert to BigInt'
+    return helperText ?? 'Enter a number'
+  }, [helperText, error])
+
+  return (
+    <>
+      <TextField
+        onChange={handleChange}
+        type="string"
+        error={Boolean(error)}
+        slotProps={{
+          htmlInput: { pattern: '[0-9]*[.]?[0-9]*' },
+          input: {
+            startAdornment: (hideAdornment
+              ? null
+              : (
+                  <FixedPointInputAdornment
+                    position="start"
+                    fixedPoint={fixedPoint}
+                    minFixedPoint={minFixedPoint}
+                    onFixedPointChange={onFixedPointChange}
+                  />
+                )
+            ),
+          },
+        }}
+        value={rawValue}
+        {...props}
+      />
+      <FormHelperText>{resolvedHelperText}</FormHelperText>
+    </>
+  )
+}
+
+export interface InputWithFormControlProps extends FormControlProps {
+  textFieldProps?: BigIntTextFieldProps
+}
+
+export const WithFormControl: React.FC<InputWithFormControlProps> = ({ textFieldProps, ...props }) => (
+  <FormControl {...props}>
+    <BigIntTextField {...textFieldProps} />
+  </FormControl>
+)

package/src/components/bigint/index.ts

@@ -0,0 +1,4 @@
+export * from './FixedPointPopover.tsx'
+export * from './Input.ts'
+export * from './InputAdornment.tsx'
+export * from './TextField.tsx'

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Ampersand.tsx'
 export * from './BasicHero/index.ts'
+export * from './bigint/index.ts'
 export * from './Ellipsize.tsx'
 export * from './LabeledTextFieldWrapper.tsx'
 export * from './ListItemButtonEx.tsx'