How to use the @blueprintjs/select.Select.ofType function in @blueprintjs/select

*
 *     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;

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>

items: T[];
  icon?: IconName;
  inputItem: T;
  intent?: Intent;
  loading?: boolean;
  onChange: any;
  popoverProps?: any;
  renderItem: ItemRenderer;
}

export default class TSelect extends React.Component, any> {
  constructor(props: ISelectProps) {
    super(props);
  }

  private CustomSelect = Select.ofType();

  private handleValueChange = (item: T) => {
    this.props.onChange(item);
  };

  public render() {
    const {
      disabled,
      displayItem,
      sortItems,
      filterItems,
      filterable,
      icon,
      inputItem,
      intent,
      items,

return elem;
};

const renderRarityOption: ItemRenderer = (option, params) => {
  let text = getRarityElem(option);
  return (
    <menuitem>
  );
};

const StarSelect = Select.ofType();
const StarOptions = [0, 6, 5, 4, 3, 2];
const renderStarOption: ItemRenderer = (option, params) =&gt; {
  let text;
  if (option === 0) {
    text = "全部";
  } else {
    text = `${option}星`;
  }
  return (
    <menuitem>
  );</menuitem></menuitem>

case step.type === 'start' && propName === 'device':
			{
				const { device: { wechat = false } = {} } = step as StartStep;
				const device = Devices.find(device => device.name === value);
				(step as StartStep).device = { ...device, wechat } as Device;
			}
			break;
		default:
			(step as any)[propName] = value;
			break;
	}
};

const isBooleanProperty = (propName: string): boolean =>
	['wechat', 'forceBlur', 'checked'].includes(propName);
const DeviceSelect = Select.ofType();
const DeviceSelectRenderer = (item: Device, props: any): JSX.Element | null => {
	const { handleClick, modifiers } = props;
	if (!modifiers.matchesPredicate) {
		return null;
	}
	return <menuitem>;
};
const DeviceSelectPredicator = (
	query: string,
	device: Device,
	index?: number,
	exactMatch?: boolean
): boolean =&gt; {
	const normalizedTitle = device.name.toLowerCase();
	const normalizedQuery = query.toLowerCase();
</menuitem>