A pack of extensions for grommet 2
created:4/21/2021
updated:4/21/2021
source lines:160
comments %:5

DropInput

grommet-controls
3.0.1

An Input control with an optional drop button with the specified 'dropContent' or widgets.

import { DropInput } from 'grommet-controls';

Main

Name
Description
Default
IDropInputOwnProps (14 properties)
a11yTitle

Custom title to be used by screen readers

string
-
a11yDropTitle

Custom drop button title to be used by screen readers

string
-
onChange

Function that will be called when the user enters a new value

((x: { target: HTMLInputElement; }) => void) & ((event: ChangeEvent<HTMLInputElement>) => void)
-
dropAlign
{ top?: "bottom" | "top"; bottom?: "bottom" | "top"; right?: "left" | "right"; left?: "left" | "right"; } & { top?: "bottom" | "top"; bottom?: "bottom" | "top"; right?: "left" | "right"; left?: "left" | "right"; }
{ top: 'bottom', right: 'left' }
dropTarget

Target where the drop will be aligned to. This should be a React reference. Typically, this is not required as the drop will be aligned to the DropButton itself by default

object
-
dropContent

Content to put inside the Drop

Element
-
dropIcon

Icon for drop content

Element
<FormDown />
widgets

Additional widgets to be placed next to the input

{ [x: string]: any; icon: Element; }[]
[]
onOpen

Callback for when the drop is opened

(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void
-
onClose

Callback for when the drop is closed

(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void
-
onKeyDown

Callback for when a key is pressed

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) & ((event: KeyboardEvent<HTMLInputElement>) => void)
-
onKeyUp

Callback for when a key is released

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) & ((event: KeyboardEvent<HTMLInputElement>) => void)
-
update

functio n to be called on update

(fn: (value: string) => void) => void
-
defaultValue

default value for uncontrolled mode

string | number | (string & readonly string[]) | (number & readonly string[])
-
TextInputProps (19 properties)
ClassAttributes (1 properties)
Attributes (1 properties)
InputHTMLAttributes (28 properties)
HTMLAttributes (41 properties)
AriaAttributes (48 properties)
DOMAttributes (157 properties)

Commits

Date
Author
Commit Message
8/31/2020

atanasster

update stories titles and navigation
8/30/2020

atanasster

update versions for publish
8/30/2020

atanasster

update eslint and add component-controls
8/27/2019

atanasster

initial commit 2.x alpha
4 commits

package
imports
peer
grommet
^2.15.0
KeyboardDropButtonButton
*
FormDown
*
react
^17.0.1
ReactComponent
*
react-dom
^17.0.1
findDOMNode
*
ThemeContext
*

file
imports
"./DropInputProps"
IDropInputProps
"./StyledDropInput"
StyledDropInputStyledDropInputContainerStyledWidgetsContainer

Stories

A 11 Y Title

Disabled

Drop Content

Drop Icon

Widgets

Plain

Focus Indicator

Placeholder

Name