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

DropInput

Component

import { DropInput } from 'grommet-controls';

Main

() => <DateInput />

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

External dependencies

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

Internal dependencies

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

Component JSX

<DropButton
a11yTitledisableddropAligndropTargetopentabIndexfocusIndicatoronOpenonClosedropContenticon
/>
grommet
^2.15.0
<StyledWidgetsContainer
aligndirection
>
StyledWidgetsContainer
from"./StyledDropInput"
<Button
disabledtabIndexkey
/>
grommet
^2.15.0
<Keyboard
onDownonUp
>
grommet
^2.15.0
<StyledDropInputContainer
>
StyledDropInputContainer
from"./StyledDropInput"

Stories

A 11 Y Title

() => <DateInput a11yTitle="Birthdy date" />

Disabled

() => <DateInput disabled={true} />

Drop Content

() => (
<DropInputTest
a11yDropTitle="Open calendar"
dropContent={
<Box pad="small">
<Calendar size="small" />
</Box>
}
defaultValue={smallDate(new Date('08/30/2020'))}
/>
)

Drop Icon

() => (
<DateInput dropIcon={<CalendarIcon />} />
)

Widgets

() => <NumberInput />

Plain

() => (
<DropInputTest plain={true} defaultValue="Plain no focus" />
)

Focus Indicator

() => (
<DropInputTest
plain={true}
focusIndicator={true}
defaultValue="Plain with focus"
/>
)

Placeholder

() => (
<DropInputTest placeholder="Enter phone..." />
)

Name

() => (
<DropInputTest id="date-id" name="date-name" />
)