How to use the downshift.propTypes function in downshift

To help you get started, we’ve selected a few downshift examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github segmentio / evergreen / src / autocomplete / src / Autocomplete.js View on Github external
* True: Enables Filtering
     * False: Disables Filtering
     */
    isFilterDisabled: PropTypes.bool,

    /**
     * Defines the minimum height the results container will be
     */
    popoverMinWidth: PropTypes.number,

    /**
     * Defines the maximum height the results container will be
     */
    popoverMaxHeight: PropTypes.number,

    ...Downshift.propTypes
  }

  state = {
    targetWidth: 0
  }

  static defaultProps = {
    itemToString: i => (i ? String(i) : ''),
    itemSize: 32,
    isFilterDisabled: false,
    popoverMinWidth: 240,
    popoverMaxHeight: 240,
    renderItem: autocompleteItemRenderer
  }

  componentDidMount() {
github carbon-design-system / carbon / packages / react / src / components / Dropdown / Dropdown.js View on Github external
/**
     * Provide the title text that will be read by a screen reader when
     * visiting this control
     */
    titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

    /**
     * Provide helper text that is used alongside the control label for
     * additional help
     */
    helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

    /**
     * Additional props passed to Downshift
     */
    downshiftProps: PropTypes.shape(Downshift.propTypes),
  };

  static defaultProps = {
    disabled: false,
    type: 'default',
    itemToString: defaultItemToString,
    itemToElement: null,
    light: false,
    titleText: '',
    helperText: '',
  };

  constructor(props) {
    super(props);
    this.dropdownInstanceId = getInstanceId();
  }
github carbon-design-system / carbon / packages / react / src / components / MultiSelect / FilterableMultiSelect.js View on Github external
* Specify feedback (mode) of the selection.
     * `top`: selected item jumps to top
     * `fixed`: selected item stays at it's position
     * `top-after-reopen`: selected item jump to top after reopen dropdown
     */
    selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),

    /**
     * Callback function for translating ListBoxMenuIcon SVG title
     */
    translateWithId: PropTypes.func,

    /**
     * Additional props passed to Downshift
     */
    downshiftProps: PropTypes.shape(Downshift.propTypes),
  };

  static getDerivedStateFromProps({ open }, state) {
    /**
     * programmatically control this `open` prop
     */
    const { prevOpen } = state;
    return prevOpen === open
      ? null
      : {
          isOpen: open,
          prevOpen: open,
        };
  }

  static defaultProps = {
github carbon-design-system / carbon / packages / react / src / components / ComboBox / ComboBox.js View on Github external
/**
     * Callback function to notify consumer when the text input changes.
     * This provides support to change available items based on the text.
     * @param {string} inputText
     */
    onInputChange: PropTypes.func,

    /**
     * should use "light theme" (white background)?
     */
    light: PropTypes.bool,

    /**
     * Additional props passed to Downshift
     */
    downshiftProps: PropTypes.shape(Downshift.propTypes),
  };

  static defaultProps = {
    disabled: false,
    itemToString: defaultItemToString,
    itemToElement: null,
    shouldFilterItem: defaultShouldFilterItem,
    type: 'default',
    ariaLabel: 'Choose an item',
    light: false,
  };

  constructor(props) {
    super(props);

    this.textInput = React.createRef();
github carbon-design-system / carbon / packages / react / src / components / MultiSelect / MultiSelect.js View on Github external
* Callback function for translating ListBoxMenuIcon SVG title
     */
    translateWithId: PropTypes.func,

    /**
     * Specify feedback (mode) of the selection.
     * `top`: selected item jumps to top
     * `fixed`: selected item stays at it's position
     * `top-after-reopen`: selected item jump to top after reopen dropdown
     */
    selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),

    /**
     * Additional props passed to Downshift
     */
    downshiftProps: PropTypes.shape(Downshift.propTypes),
  };

  static getDerivedStateFromProps({ open }, state) {
    /**
     * programmatically control this `open` prop
     */
    const { prevOpen } = state;
    return prevOpen === open
      ? null
      : {
          isOpen: open,
          prevOpen: open,
        };
  }

  static defaultProps = {
github segmentio / evergreen / src / autocomplete / src / Autocomplete.js View on Github external
popoverMinWidth: PropTypes.number,

    /**
     * Defines the maximum height the results container will be
     */
    popoverMaxHeight: PropTypes.number,

    /**
     * The selected item to be selected & shown by default on the autocomplete (deprecated)
     */
    getButtonProps: deprecated(
      PropTypes.func,
      'Use "getToggleButtonProps" instead.'
    ),

    ...Downshift.propTypes
  }

  state = {
    targetWidth: 0
  }

  static defaultProps = {
    itemToString: i => (i ? String(i) : ''),
    itemSize: 32,
    isFilterDisabled: false,
    popoverMinWidth: 240,
    popoverMaxHeight: 240,
    renderItem: autocompleteItemRenderer
  }

  componentDidMount() {
github qantasairways / runway / src / components / Typeahead / index.js View on Github external
*
   * @param {Node} inputRef The input element */
  setRef: PropTypes.func,
  /** Optional maxLength value for the html input */
  maxLength: PropTypes.number,
  /** Optional specify height for the menu */
  menuHeight: PropTypes.string,
  /** Optional specify selectedItemValue to manage selectedItem state externally */
  selectedItemValue: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.objectOf(PropTypes.any)
  ])
};

Typeahead.defaultProps = {
  ...Downshift.propTypes,
  disabled: false,
  fetchListOnInput: undefined,
  id: null,
  initialSelectedItem: null,
  isFetchingList: false,
  itemToString: item => (item ? String(item) : ''),
  badgeToString: () => null,
  items: [],
  label: '',
  onBlur: noop,
  onFocus: noop,
  onChange: noop,
  onKeyDown: noop,
  onInputValueChange: null,
  setRef: noop,
  message: '',
github Autodesk / hig / packages / multi-downshift / src / MultiDownshift.js View on Github external
/**
 * @typedef {Object} GetRemoveButtonPropsOptions
 * @property {function(MouseEvent)} onClick
 * @property {any} item
 */

/**
 * @typedef {import("downshift").ControllerStateAndHelpers} ControllerStateAndHelpers
 * @property {function(GetRemoveButtonPropsOptions): any} getRemoveButtonProps
 * @property {any[]} selectedItems
 */

export default class MultiDownshift extends React.Component {
  static propTypes = {
    ...Downshift.propTypes,
    /** Controlled: the currently selected items */
    selectedItems: PropTypes.arrayOf(PropTypes.any),
    /** Items selected by default */
    defaultSelectedItems: PropTypes.arrayOf(PropTypes.any),
    /** Alias of `defaultSelectedItems` for consistency with Downshift */
    initialSelectedItems: PropTypes.arrayOf(PropTypes.any)
  };

  static defaultProps = {
    defaultSelectedItems: []
  };

  state = {
    selectedItems: this.getDefaultSelectedItem()
  };

downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

MIT
Latest version published 1 month ago

Package Health Score

100 / 100
Full package analysis