A pack of extensions for grommet 2
created:4/30/2021
updated:4/30/2021
loc
160
comments
5%
passed
10
failed
10
coverage
47%

DropInput

avatar of atanasster
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

avatar of atanasster
update stories titles and navigation
8/30/2020

atanasster

avatar of atanasster
update versions for publish
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/27/2019

atanasster

avatar of 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