@tamagui/field 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/src/FieldContext.tsx

@@ -0,0 +1,61 @@
+import { createStyledContext } from '@tamagui/core'
+import * as React from 'react'
+import type { FieldControlContextValue, FieldState, FieldStyleState } from './types'
+import { createDefaultValidityState } from './validation'
+
+const noop = () => {}
+const unregister = () => {}
+
+export const defaultFieldState: FieldState = {
+  name: undefined,
+  value: undefined,
+  error: '',
+  errors: [],
+  validity: createDefaultValidityState(),
+  valid: null,
+  touched: false,
+  dirty: false,
+  filled: false,
+  focused: false,
+  disabled: false,
+}
+
+export const defaultFieldControl: FieldControlContextValue = {
+  name: undefined,
+  disabled: false,
+  ariaProps: {},
+  dataProps: {},
+  onFocus: noop,
+  onBlur: noop,
+  onChange: noop,
+  onDisabledChange: noop,
+  registerControl: () => unregister,
+}
+
+export const FieldControlContext =
+  React.createContext<FieldControlContextValue>(defaultFieldControl)
+
+export const FieldControlProvider = FieldControlContext.Provider
+
+export function useFieldControl() {
+  return React.useContext(FieldControlContext)
+}
+
+export const FieldStateContext = React.createContext<FieldState>(defaultFieldState)
+
+export function useFieldState() {
+  return React.useContext(FieldStateContext)
+}
+
+export const FieldStyledContext = createStyledContext<FieldStyleState>(
+  {
+    valid: false,
+    invalid: false,
+    touched: false,
+    dirty: false,
+    filled: false,
+    focused: false,
+    disabled: false,
+  },
+  'Field'
+)

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './Field'
+export * from './FieldContext'
+export * from './types'

package/src/types.ts

@@ -0,0 +1,125 @@
+import type { FormValidationMode, FormValues } from '@tamagui/form'
+import type * as React from 'react'
+
+export type FieldValidationResult = string | string[] | null
+
+export type StandardSchemaIssue = {
+  message: string
+  path?: ReadonlyArray<PropertyKey | { key: PropertyKey }>
+}
+
+export type StandardSchemaV1 = {
+  readonly '~standard': {
+    readonly version: 1
+    readonly vendor: string
+    readonly validate: (
+      value: unknown
+    ) =>
+      | { value: unknown; issues?: undefined }
+      | { issues: ReadonlyArray<StandardSchemaIssue> }
+      | Promise<
+          | { value: unknown; issues?: undefined }
+          | { issues: ReadonlyArray<StandardSchemaIssue> }
+        >
+  }
+}
+
+export type FieldValidator =
+  | ((
+      value: unknown,
+      formValues: FormValues
+    ) => FieldValidationResult | Promise<FieldValidationResult>)
+  | StandardSchemaV1
+
+export type FieldValidityState = {
+  badInput: boolean
+  customError: boolean
+  patternMismatch: boolean
+  rangeOverflow: boolean
+  rangeUnderflow: boolean
+  stepMismatch: boolean
+  tooLong: boolean
+  tooShort: boolean
+  typeMismatch: boolean
+  valueMissing: boolean
+  valid: boolean | null
+}
+
+export type FieldValidityData = {
+  state: FieldValidityState
+  error: string
+  errors: string[]
+  value: unknown
+  initialValue: unknown
+}
+
+export type FieldState = {
+  name?: string
+  value: unknown
+  error: string
+  errors: string[]
+  validity: FieldValidityState
+  valid: boolean | null
+  touched: boolean
+  dirty: boolean
+  filled: boolean
+  focused: boolean
+  disabled: boolean
+}
+
+export type FieldStyleState = {
+  valid: boolean
+  invalid: boolean
+  touched: boolean
+  dirty: boolean
+  filled: boolean
+  focused: boolean
+  disabled: boolean
+}
+
+export type FieldDataProps = {
+  'data-valid'?: ''
+  'data-invalid'?: ''
+  'data-touched'?: ''
+  'data-dirty'?: ''
+  'data-filled'?: ''
+  'data-focused'?: ''
+  'data-disabled'?: ''
+}
+
+export type FieldAriaProps = {
+  id?: string
+  'aria-labelledby'?: string
+  'aria-describedby'?: string
+  'aria-invalid'?: true
+  accessibilityLabel?: string
+  accessibilityHint?: string
+  accessibilityState?: {
+    disabled?: boolean
+  }
+}
+
+export type FieldControlRegistration = {
+  id?: string
+  name?: string
+  controlRef: React.RefObject<any>
+  inputRef?: React.RefObject<any>
+  getValue?: () => unknown
+  value?: unknown
+  disabled?: boolean
+  required?: boolean
+}
+
+export type FieldControlContextValue = {
+  name?: string
+  disabled: boolean
+  ariaProps: FieldAriaProps
+  dataProps: FieldDataProps
+  onFocus: () => void
+  onBlur: (value?: unknown) => void
+  onChange: (value: unknown) => void
+  onDisabledChange: (disabled: boolean) => void
+  registerControl: (registration: FieldControlRegistration) => () => void
+}
+
+export type FieldValidationMode = FormValidationMode

package/src/validation.ts

@@ -0,0 +1,136 @@
+import type { FormValues } from '@tamagui/form'
+import type {
+  FieldValidationMode,
+  FieldValidationResult,
+  FieldValidator,
+  FieldValidityState,
+  StandardSchemaIssue,
+} from './types'
+
+export function createDefaultValidityState(
+  valid: boolean | null = null
+): FieldValidityState {
+  return {
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valueMissing: false,
+    valid,
+  }
+}
+
+export function normalizeNativeValidity(
+  state: FieldValidityState,
+  showValueMissing: boolean
+) {
+  if (showValueMissing || !state.valueMissing) {
+    return { ...state }
+  }
+
+  const hasAnotherError = Object.entries(state).some(
+    ([key, value]) => key !== 'valid' && key !== 'valueMissing' && value
+  )
+
+  if (hasAnotherError) {
+    return { ...state }
+  }
+
+  return {
+    ...state,
+    valueMissing: false,
+    valid: true,
+  }
+}
+
+export function isFilled(value: unknown) {
+  if (value === null || value === undefined || value === false) {
+    return false
+  }
+  if (typeof value === 'string' || Array.isArray(value)) {
+    return value.length > 0
+  }
+  return true
+}
+
+export function shouldValidateOnChange(
+  mode: FieldValidationMode,
+  submitAttempted: boolean
+) {
+  return mode === 'onChange' || (mode === 'onSubmit' && submitAttempted)
+}
+
+function isPromiseLike<Value>(value: unknown): value is PromiseLike<Value> {
+  return Boolean(
+    value &&
+    (typeof value === 'object' || typeof value === 'function') &&
+    'then' in value &&
+    typeof value.then === 'function'
+  )
+}
+
+function normalizeFunctionResult(result: FieldValidationResult) {
+  if (result === null || result === '') {
+    return []
+  }
+  return Array.isArray(result) ? result.filter(Boolean) : [result]
+}
+
+function normalizeSchemaResult(
+  result:
+    | { value: unknown; issues?: undefined }
+    | { issues: ReadonlyArray<StandardSchemaIssue> }
+) {
+  return 'issues' in result && result.issues
+    ? result.issues.map((issue) => issue.message).filter(Boolean)
+    : []
+}
+
+export function getValidationResult(
+  validator: FieldValidator,
+  value: unknown,
+  formValues: FormValues
+): string[] | Promise<string[]> {
+  if ('~standard' in validator) {
+    const result = validator['~standard'].validate(value)
+    return isPromiseLike(result)
+      ? Promise.resolve(result).then(normalizeSchemaResult)
+      : normalizeSchemaResult(result)
+  }
+
+  const result = validator(value, formValues)
+  return isPromiseLike(result)
+    ? Promise.resolve(result).then(normalizeFunctionResult)
+    : normalizeFunctionResult(result)
+}
+
+export function createValidationCommitter<Value>(commit: (value: Value) => void) {
+  let commitId = 0
+
+  return {
+    invalidate() {
+      commitId += 1
+    },
+    run(value: Value | PromiseLike<Value>): Value | Promise<Value> {
+      commitId += 1
+      const nextCommitId = commitId
+
+      if (isPromiseLike<Value>(value)) {
+        return Promise.resolve(value).then((nextValue) => {
+          if (nextCommitId === commitId) {
+            commit(nextValue)
+          }
+          return nextValue
+        })
+      }
+
+      commit(value)
+      return value
+    },
+  }
+}