Class KeypadInput

_container

_containerBounds

_handleScroll

_hideCursorHandle

_isMounted

_mathContainer

_root

_updateCursorHandle

_updateInputPadding

blur

blurOnClickOutside

blurOnTouchEndOutside

context

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
Copy

didScroll

didTouchOutside

domKeyToMathQuillKey

dragListener

focus

getBorderWidthPx

getInputInnerPadding

handleKeyUp

handleTouchEnd

handleTouchMove

inputRef

mathField

onCursorHandleTouchCancel

onCursorHandleTouchEnd

onCursorHandleTouchMove

onCursorHandleTouchStart

recordTouchStartOutside

state

StaticcontextType

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
  static contextType = Ctx
  context!: React.ContextType<typeof Ctx>
  render () {
    return <>My context's value: {this.context}</>;
  }
}
Copy

StaticdefaultProps

_constrainToBound

• _constrainToBound(
      value: number,
      min: number,
      max: number,
      friction: number,
  ): number

  Parameters

  • value: number
  • min: number
  • max: number
  • friction: number

  Returns number

_findHitNode

• _findHitNode(
      containerBounds: ClientRect,
      x: number,
      y: number,
      dx: number,
      dy: number,
  ): boolean

  Tries to determine which DOM node to place the cursor next to based on where the user drags the cursor handle. If it finds a node it will place the cursor next to it, update the handle to be under the cursor, and return true. If it doesn't find a node, it returns false.

  It searches for nodes by doing it tests at the following points:

  (x - dx, y), (x, y), (x + dx, y)

  If it doesn't find any nodes from the rendered math it will update y by adding dy.

  The algorithm ends its search when y goes outside the bounds of containerBounds.

  Parameters

  • containerBounds: ClientRect

    bounds of the container node

  • x: number

    the initial x coordinate in the viewport

  • y: number

    the initial y coordinate in the viewport

  • dx: number

    horizontal spacing between elementFromPoint calls

  • dy: number

    vertical spacing between elementFromPoint calls, sign determines direction.

  Returns boolean

  • true if a node was hit, false otherwise.

_getKeypadBounds

• _getKeypadBounds(): DOMRect | null

  Returns the current bounds of the keypadElement

  Returns DOMRect | null

_insertCursorAtClosestNode

• _insertCursorAtClosestNode(x: number, y: number): void

  Inserts the cursor at the DOM node closest to the given coordinates, based on hit-tests conducted using #_findHitNode.

  Parameters

  • x: number

    the x coordinate in the viewport

  • y: number

    the y coordinate in the viewport

  Returns void

componentDidMount

• componentDidMount(): void

  Called immediately after a component is mounted. Setting state here will trigger re-rendering.

  Returns void

componentDidUpdate

• componentDidUpdate(prevProps: Props, prevState: State): void

  Called immediately after updating occurs. Not called for the initial render.

  The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

  Parameters

  • prevProps: Props
  • prevState: State

  Returns void

componentWillUnmount

• componentWillUnmount(): void

  Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

  Returns void

handleClick

• handleClick(
      e: MouseEvent,
      keypadActive: boolean,
      setKeypadActive: (keypadActive: boolean) => void,
  ): void

  Parameters

  • e: MouseEvent
  • keypadActive: boolean
  • setKeypadActive: (keypadActive: boolean) => void

  Returns void

handleTouchStart

• handleTouchStart(
      e: TouchEvent<Element>,
      keypadActive: boolean,
      setKeypadActive: (keypadActive: boolean) => void,
  ): void

  Parameters

  • e: TouchEvent<Element>
  • keypadActive: boolean
  • setKeypadActive: (keypadActive: boolean) => void

  Returns void

render

• render(): ReactNode

  Returns ReactNode