Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/forms / src / new-forms / inputs / typings.ts
Size: Mime:
export * from '../typings'

import { ReactNode, ChangeEvent, ReactElement } from 'react'
import { Value, ValidatorFunction, Type } from '../typings'
import { InputState } from './InputState'

export type ReactDivProps = React.HTMLProps<HTMLDivElement>
export type ReactInputProps = React.HTMLProps<HTMLInputElement>

export type InputRenderInputProp = (
  props: InputRenderProps
) => ReactElement<HTMLInputElement>
export type InputRenderWrapProp = (props: InputRenderProps) => ReactNode
export type InputRenderExtraProp = (props: InputRenderProps) => ReactNode

export interface InputPropsBase extends ReactInputProps {
  state: InputState
}

// @private
export interface InputPropsRenderPropsOnly {
  renderInput: InputRenderInputProp
  renderWrap: InputRenderWrapProp
  renderAfterInput: InputRenderExtraProp
  renderError: InputRenderExtraProp
  renderLabelText: InputRenderExtraProp
}
export type InputPropsAndRenderProps = InputPropsBase &
  InputPropsRenderPropsOnly

export type InputProps = InputPropsAndRenderProps

export type InputRenderProps = InputPropsBase &
  BaseInputConfig &
  StyledInputProps & {
    // @note - now not needed with split out `InputPropsAndRenderProps`
    // renderInput: never
    // renderWrap: never
    // validator: never

    // @note same as Value, but not boolean
    value: string | number

    children?: ReactNode
  }

/**
 * @todo `extends` on HTMLElementHere
 * @example HTMLElementHere = HTMLDivElement extends HTMLOrSVGElement
 */
export type InputRenderWrapElementProps<
  HTMLElementHere = HTMLDivElement
> = React.HTMLProps<HTMLElementHere> & {
  className?: string
  isActive: boolean
  isValid: boolean
  children: ReactNode
}

/** split this from InputConfig for the reusable parts */
export interface BaseInputConfig {
  identifier?: string
  // name?: string
  propertyName?: string
  label?: string
  value?: Value
  // any reason this was not there before?
  type: Type | string
}

/**
 * @todo generic & use `extends 'select' ? ...
 */
export interface InputConfig extends BaseInputConfig {
  validator?: ValidatorFunction
  renderInput?: InputRenderInputProp
  renderWrap?: InputRenderWrapProp
}

export interface AnyObj {
  [key: string]: any
}

export interface InputStateStore extends Map<string, any> {
  get(key: 'isDirty'): boolean
  set(key: 'isDirty', value: boolean): this

  /** would like to do this another way... */
  get(key: 'isValid'): boolean
  set(key: 'isValid', value: boolean): this
}

export interface StyledInputProps {
  className?: string
  onChange?: (event?: ChangeEvent<any>) => void

  isDirty?: boolean
  isActive: boolean
  isValid: boolean
  isDisabled?: boolean
  isVisible?: boolean
  propertyName?: string
  hasValue?: boolean
}

import { StylehComponent, ThemedOuterStyledProps } from '../typings'

export interface StyledInputWrapPropsOverrides {
  isValid: boolean
  className?: string
}

// ReactInputProps &
export type StyledInputWrapProps = ReactDivProps & StyledInputWrapPropsOverrides
export type StyledInputWrapType = StylehComponent<StyledInputWrapProps>
export type StyledInputWrapThemedProps = ThemedOuterStyledProps<
  StyledInputWrapProps,
  any
>

// === complex ===

// export type RenderWrapRemainingProps = StyledInputWrapProps & {
//   // some issue merging...
//   // instance?: any
//   // ref?: any
//   onChange: never
//   onFocus: never
//   onBlur: never
//   identifier: never
//   value: never
//   label: never
//   tooltip: never
//   type: never
//   isActive: never
//   'aria-label': never
//   'data-qa': never
// }

// adding it as optional as any
export type Anyify<Typing, Keys extends keyof Typing> = Pick<
  Typing,
  Exclude<keyof Typing, Keys>
> &
  { [Property in Keys]?: any }

export type Omit<Typing, Keys extends keyof Typing> = Pick<
  Typing,
  Exclude<keyof Typing, Keys>
>

type RenderWrapRemainingPropsAnyRef = Anyify<StyledInputWrapProps, 'ref'>
export type RenderWrapRemainingProps = Omit<
  RenderWrapRemainingPropsAnyRef,
  RenderWrapIgnoredProps
>

// @note changed this because renderProp is optional...
export type ObserverInputProps = InputPropsBase &
  Partial<InputPropsRenderPropsOnly>

export type RenderWrapIgnoredProps =
  | 'onChange'
  | 'onFocus'
  | 'onBlur'
  | 'identifier'
  | 'value'
  | 'label'
  | 'isActive'
  | 'tooltip'
  | 'type'
  | 'aria-label'
  | 'data-qa'
  | 'maxLength'
  | 'minLength'
  | 'placeholder'
  | 'pattern'
  | 'required'
// | 'isRequired'