react-widgets

react-widgets

Version 5.5.1
Published 8 days ago
1.52 MB
10 dependencies
MIT license

Install

npm i react-widgets

yarn add react-widgets

pnpm add react-widgets

Overview

An à la carte set of polished, extensible, and accessible inputs built for React

Index

Variables

variable Combobox

const Combobox: Combobox;

--- shortcuts: - { key: alt + down arrow, label: open combobox } - { key: alt + up arrow, label: close combobox } - { key: down arrow, label: move focus to next item } - { key: up arrow, label: move focus to previous item } - { key: home, label: move focus to first item } - { key: end, label: move focus to last item } - { key: enter, label: select focused item } - { key: any key, label: search list for item starting with key } ---
Select an item from the list, or input a custom value. The Combobox can also make suggestions as you type.
Modifiers
- @public

variable DatePicker

const DatePicker: any;

--- subtitle: DatePicker, TimePicker localized: true shortcuts: - { key: alt + down arrow, label: open calendar or time } - { key: alt + up arrow, label: close calendar or time } - { key: down arrow, label: move focus to next item } - { key: up arrow, label: move focus to previous item } - { key: home, label: move focus to first item } - { key: end, label: move focus to last item } - { key: enter, label: select focused item } - { key: any key, label: search list for item starting with key } ---
Calendar
Modifiers
- @public

variable DateTimePicker

const DateTimePicker: any;

--- subtitle: DatePicker, TimePicker localized: true shortcuts: - { key: alt + down arrow, label: open calendar or time } - { key: alt + up arrow, label: close calendar or time } - { key: down arrow, label: move focus to next item } - { key: up arrow, label: move focus to previous item } - { key: home, label: move focus to first item } - { key: end, label: move focus to last item } - { key: enter, label: select focused item } - { key: any key, label: search list for item starting with key } ---
Calendar
Modifiers
- @public

variable DropdownList

const DropdownList: DropdownList;

A <select> replacement for single value lists.
Modifiers
- @public

variable Listbox

const Listbox: Listbox;

variable Localization

const Localization: {
    ({ date, number, messages, children }: ProviderProps): any;
    useLocalizer: (
        messages?: Partial<import('./messages').Messages> | undefined,
        formats?: FormatterOverrides<any, any> | undefined
    ) => Localizer<unknown, unknown>;
};

variable Multiselect

const Multiselect: Multiselect;

--- shortcuts: - { key: left arrow, label: move focus to previous tag } - { key: right arrow, label: move focus to next tag } - { key: delete, deselect focused tag } - { key: backspace, deselect next tag } - { key: alt + up arrow, label: close Multiselect } - { key: down arrow, label: open Multiselect, and move focus to next item } - { key: up arrow, label: move focus to previous item } - { key: home, label: move focus to first item } - { key: end, label: move focus to last item } - { key: enter, label: select focused item } - { key: ctrl + enter, label: create new tag from current searchTerm } - { key: any key, label: search list for item starting with key } ---
A select listbox alternative.
Modifiers
- @public

Functions

function Calendar

Calendar: typeof Calendar;

Modifiers
- @public

function NumberPicker

NumberPicker: (uncontrolledProps: NumberPickerProps) => any;

--- localized: true shortcuts: - { key: down arrow, label: decrement value } - { key: up arrow, label: increment value } - { key: home, label: set value to minimum value, if finite } - { key: end, label: set value to maximum value, if finite } ---
Modifiers
- @public

function TimeInput

TimeInput: typeof TimeInput;

Classes

class SlideDownTransition

class SlideDownTransition extends React.Component<SlideDownTransitionProps> {}

property clearContainerHeight

clearContainerHeight: (elem: HTMLElement) => void;

property handleEntered

handleEntered: (elem: HTMLElement) => void;

property handleEntering

handleEntering: () => void;

property handleExit

handleExit: (elem: HTMLElement) => void;

property handleExited

handleExited: (elem: HTMLElement) => void;

property handleTransitionEnd

handleTransitionEnd: (el: HTMLElement, done: () => void) => void;

property propTypes

static propTypes: {
    in: any;
    innerClassName: any;
    dropUp: any;
    onExit: any;
    onExited: any;
    onEntering: any;
    onEntered: any;
};

property setContainerHeight

setContainerHeight: (elem: HTMLElement) => void;

method getHeight

getHeight: (container: HTMLElement) => number;

method render

render: () => any;

class SlideTransitionGroup

class SlideTransitionGroup extends React.Component<
    SlideTransitionGroupProps,
    SlideTransitionGroupState
> {}

constructor

constructor(args: SlideTransitionGroupProps);

property container

container: any;

property current

current: any;

property defaultProps

static defaultProps: { direction: string };

property flush

flush?: boolean;

property handleTransitionEnd

handleTransitionEnd: (hadFocus: boolean | null) => void;

property isTransitioning

isTransitioning?: boolean;

property prev

prev?: any;

property propTypes

static propTypes: { direction: any; onTransitionEnd: any };

method componentDidUpdate

componentDidUpdate: () => void;

method render

render: () => any;

Interfaces

interface Listbox

interface Listbox {}

property displayName

displayName?: string;

property propTypes

propTypes?: any;

call signature

<TDataItem = DataItem>(
    props: ListboxProps<TDataItem> & React.RefAttributes<ListboxHandle>
): React.ReactElement | null;

interface Localizer

interface Localizer<TD = unknown, TN = unknown> {}

property formatOverrides

formatOverrides: FormatterOverrides<TD, TN>;

property messages

messages: ProcessedMessages;

method decimalCharacter

decimalCharacter: () => string;

method firstOfWeek

firstOfWeek: () => number;

method formatDate

formatDate: (
    value: Date,
    formatter: RequiredDateMethods,
    userFormat?: TD
) => string;

method formatNumber

formatNumber: (value: number, userFormat?: TN) => string;

method parseDate

parseDate: (dateString: string, format?: TD) => Date | null;

method parseNumber

parseNumber: (numberString: string, format?: TN) => number | null;

interface Multiselect

interface Multiselect {}

property displayName

displayName?: string;

property propTypes

propTypes?: any;

call signature

<TDataItem = DataItem>(
    props: MultiselectProps<TDataItem> & React.RefAttributes<MultiselectHandle>
): React.ReactElement | null;

interface NumberLocalizer

interface NumberLocalizer<TN> {}

method decimalCharacter

decimalCharacter: () => string;

method format

format: (value: number, format?: TN) => string;

method parse

parse: (numberString: string, format?: TN) => number | null;

interface WidgetHandle

interface WidgetHandle {}

method focus

focus: (opts?: FocusOptions) => void;

Type Aliases

type DataItem

type DataItem = unknown;

type DateFormats

type DateFormats<TFormat> = {
    [Key in RequiredDateMethods]?: TFormat;
};

type DateLocalizer

type DateLocalizer<TD> = {
    parse(dateString: string, format?: TD): Date | null;
    firstOfWeek(): number;
} & {
    [Key in RequiredDateMethods]: (date: Date, format?: TD) => string;
};

type FormatterOverrides

type FormatterOverrides<TD, TN> = DateFormats<TD> & {
    number?: TN;
};

type RenderProp

type RenderProp<TArg> = (arg: TArg) => React.ReactNode;

type RequiredDateMethods

type RequiredDateMethods =
    | 'date'
    | 'time'
    | 'datetime'
    | 'header'
    | 'weekday'
    | 'dayOfMonth'
    | 'month'
    | 'year'
    | 'decade'
    | 'century';

type SearchMetadata

type SearchMetadata = {
    action: 'clear' | 'input';
    lastSearchTerm?: string;
    originalEvent?: React.SyntheticEvent;
};

type Value

type Value = unknown;

Namespaces

namespace Calendar

namespace Calendar {}

variable displayName

var displayName: string;

variable propTypes

var propTypes: {
    disabled: any;
    readOnly: any;
    onChange: any;
    value: any;
    min: any;
    max: any;
    currentDate: any;
    onCurrentDateChange: any;
    navigatePrevIcon: any;
    navigateNextIcon: any;
    view(props: any, ...args: any[]): Error | null;
    views: any;
    onViewChange: any;
    onNavigate: any;
    culture: any;
    autoFocus: any;
    footer: any;
    renderDay: any;
    formats: any;
    messages: any;
    onKeyDown: any;
    tabIndex: any;
};

variable Transition

var Transition: typeof SlideTransitionGroup;

function move

move: (
    date: Date,
    min: Date,
    max: Date,
    view: 'month' | 'year' | 'decade' | 'century',
    direction: Direction
) => Date;

namespace TimeInput

namespace TimeInput {}

variable defaultProps

var defaultProps: {
    hoursAddon: string;
    padValues: boolean;
    precision: string;
    emptyCharacter: string;
};

variable propTypes

var propTypes: {
    value: any;
    onChange: any;
    datePart: any;
    use12HourClock: any;
    padValues: any;
    emptyCharacter: any;
    noClearButton: any;
    disabled: any;
    readOnly: any;
    precision: any;
    hoursAddon: any;
    minutesAddon: any;
    secondsAddon: any;
    millisecondsAddon: any;
};

Package Files (13)

Dependencies (10)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-widgets.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-widgets)

HTML

<a href="https://www.jsdocs.io/package/react-widgets"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 day ago.
Package analyzed in 5150 ms.
Missing or incorrect documentation? Open an issue for this package.

react-widgets

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable Combobox

Modifiers

variable DatePicker

Modifiers

variable DateTimePicker

Modifiers

variable DropdownList

Modifiers

variable Listbox

variable Localization

variable Multiselect

Modifiers

Functions

function Calendar

Modifiers

function NumberPicker

Modifiers

function TimeInput

Classes

class SlideDownTransition

property clearContainerHeight

property handleEntered

property handleEntering

property handleExit

property handleExited

property handleTransitionEnd

property propTypes

property setContainerHeight

method getHeight

method render

class SlideTransitionGroup

constructor

property container

property current

property defaultProps

property flush

property handleTransitionEnd

property isTransitioning

property prev

property propTypes

method componentDidUpdate

method render

Interfaces

interface Listbox

property displayName

property propTypes

call signature

interface Localizer

property formatOverrides

property messages

method decimalCharacter

method firstOfWeek

method formatDate

method formatNumber

method parseDate

method parseNumber

interface Multiselect

property displayName

property propTypes

call signature

interface NumberLocalizer

method decimalCharacter

method format

method parse

interface WidgetHandle

method focus

Type Aliases

type DataItem

type DateFormats