How to use @blueprintjs/select - 10 common examples

*
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


// Select options code copied and modified from:
// https://github.com/palantir/blueprint/blob/06a186c90758bbdca604ed6d7bf639c3d05b1fa0/packages/docs-app/src/examples/select-examples/films.tsx


const UserScriptSelect = Select.ofType();

const filterScripts: ItemPredicate = (query, script, _index, exactMatch) => {
  const normalisedName = script.name.toLowerCase();
  const normalisedQuery = query.toLowerCase();

  if (exactMatch) {
    return normalisedName === normalisedQuery;
  } else {
    return `${script.name}. ${normalisedName} ${script.description}`.indexOf(normalisedQuery) >= 0;
  }
};


export const renderScripts: ItemRenderer = (script, { handleClick, modifiers, query }) => {
  if (!modifiers.matchesPredicate) {
    return null;

itemExclude?: (node: IPageNode | IHeadingNode) => boolean;

    /**
     * Callback invoked when the navigator is closed. Navigation is performed by
     * updating browser `location` directly.
     */
    onClose: () => void;
}

export interface INavigationSection {
    path: string[];
    route: string;
    title: string;
}

const NavOmnibar = Omnibar.ofType();
const INPUT_PROPS: IInputGroupProps = { placeholder: "Fuzzy search headings..." };

export class Navigator extends React.PureComponent {
    private sections: INavigationSection[];

    public componentDidMount() {
        this.sections = [];
        eachLayoutNode(this.props.items, (node, parents) => {
            if (Utils.safeInvoke(this.props.itemExclude, node) === true) {
                // ignore excluded item
                return;
            }
            const { route, title } = node;
            const path = parents.map(p => p.title).reverse();
            this.sections.push({ path, route, title });
        });

interface ISearchBoxWithPopoverDispatchProps {
    onLoadMetadata: () => void;
    onSearchItem: (item: IMetadata) => void;
}

interface IMetadataByType {
    [x: string]: SearchBoxWithPopoverItem[];
}

interface ISearchHeader {
    text: string;
}

type SearchBoxWithPopoverItem = ISearchHeader | IMetadata;

const SuggestWrapper = Suggest.ofType();

@HotkeysTarget
class SearchBoxWithPopover
    extends React.Component {

    private noResults = (
        // TODO
        // } else if (this.props.searchHistory.length > 0) {
        //     return ([{text: "Recent Searches (No results)"}] as SearchBoxWithPopoverItem[])
        //         .concat(this.props.searchHistory);
        <menuitem for="" disabled="{true}">
    );
</menuitem>

/* tslint:disable */
// Sadly this library is not ES6 module compatible
const Fuse = require('fuse.js')

/* tslint:enable */

interface IProps {
  // The nodes to search
  nodes: ReflectionObject[]
  // Recently searched/selected nodes, to be shown as suggestions before the user starts searching
  recent: ReadonlyArray
  // Called when the user requests a type to be selected
  onSelected: (fullName: string) => void
}

const NodeSuggest = Suggest.ofType()

// A component that provides a search field for types.
class TypeSearch extends React.PureComponent {
  public render () {
    return (
      
    )
  }

import * as React from "react";
import { action } from "mobx";
import { observer } from "mobx-react";
import { autobind } from "core-decorators";

import { NumericInput, Button, MenuItem } from "@blueprintjs/core";
import { Select, IItemRendererProps } from "@blueprintjs/select";
const StringSelect = Select.ofType();

import { GameObjectModel } from "@/services/save-editor";
import { MinionResumeBehavior } from "oni-save-parser";

import "./style.scss";

export interface DuplicantJobsPageProps {
  duplicant: GameObjectModel;
}

type Props = DuplicantJobsPageProps;
@observer
class DuplicantRolesPage extends React.Component {
  render() {
    const { duplicant } = this.props;

: selectedPipelineName
                ? selectedPipelineName
                : "Select a pipeline..."
            }
            disabled={!selectedPipeline && !!selectedPipelineName}
            rightIcon="double-caret-vertical"
          />
        
      
    );
  }
}

const PipelineSelect = Select.ofType();

const SolidSelect = Select.ofType();

const BasicNamePredicate = (text: string, items: any) =>
  items
    .filter((i: any) => i.name.toLowerCase().includes(text.toLowerCase()))
    .slice(0, 20);

const BasicNameRenderer = (
  item: { name: string },
  options: { handleClick: any; modifiers: any }
) => (
  <menuitem></menuitem>

import * as React from "react";
import { action } from "mobx";
import { observer } from "mobx-react";
import { GeyserBehavior, GEYSER_TYPE_NAMES, getGeyserTypeName, getGeyserTypeHash } from "oni-save-parser";
import { Button, MenuItem, NumericInput, Slider } from "@blueprintjs/core";
import { Select, IItemRendererProps } from "@blueprintjs/select";
const StringSelect = Select.ofType();

import { GameObjectModel } from "@/services/save-editor";
import { typedKeys } from "@/utils";

import "./style.scss";

export interface GeyserEditorProps {
    className?: string;
    gameObject: GameObjectModel;
}
@observer
export default class GeyserEditor extends React.Component {
    render() {
        const {
            className,
            gameObject

* Props to spread to the filter `InputGroup`.
     * All props are supported except `ref` (use `inputRef` instead).
     * If you want to control the filter input, you can pass `value` and `onChange` here
     * to override `Select`'s own behavior.
     */
    inputProps?: IInputGroupProps & HTMLInputProps;

    /** Props to spread to `Popover`. Note that `content` cannot be changed. */
    popoverProps?: Partial;
}

export interface ITimezonePickerState {
    query: string;
}

const TypedSelect = Select.ofType();

@polyfill
export class TimezonePicker extends AbstractPureComponent2 {
    public static displayName = `${DISPLAYNAME_PREFIX}.TimezonePicker`;

    public static defaultProps: Partial = {
        date: new Date(),
        disabled: false,
        inputProps: {},
        placeholder: "Select timezone...",
        popoverProps: {},
        showLocalTimezone: true,
        valueDisplayFormat: TimezoneDisplayFormat.OFFSET,
    };

    private timezoneItems: ITimezoneItem[];

import { Button, ButtonGroup, MenuItem } from '@blueprintjs/core';
import { ItemPredicate, ItemRenderer, Select } from '@blueprintjs/select';
import { observer } from 'mobx-react';
import * as React from 'react';

import { ElectronVersion, ElectronVersionSource, ElectronVersionState } from '../../interfaces';
import { highlightText } from '../../utils/highlight-text';
import { sortedElectronMap } from '../../utils/sorted-electron-map';
import { AppState } from '../state';
import { getReleaseChannel } from '../versions';

const ElectronVersionSelect = Select.ofType();

/**
 * Helper method: Returns the <select> label for an Electron
 * version.
 *
 * @param {ElectronVersion} { source, state }
 * @returns {string}
 */
export function getItemLabel({ source, state, name }: ElectronVersion): string {
  let label = '';

  if (source === ElectronVersionSource.local) {
    label = name || 'Local';
  } else {
    if (state === ElectronVersionState.unknown) {
      label = `Not downloaded`;</select>

<button>
  
);

const ChapterSelectComponent = Select.ofType();

const chapterRenderer: ItemRenderer = (chap, { handleClick, modifiers, query }) =&gt; (
  <menuitem>
);

const iExternals = Array.from(externalLibraries.entries()).map((entry, index) =&gt; ({
  name: entry[0] as ExternalLibraryName,
  key: index,
  symbols: entry[1]
}));

const externalSelect = (
  currentExternal: string,
  handleSelect: (i: IExternal, e: React.ChangeEvent) =&gt; void
) =&gt; (
  </menuitem></button>