react-widgets

  • Version 5.5.1
  • Published
  • 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
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 onejsDocs.io badgeto 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>