@oerlikon/topology-select

@oerlikon/topology-select

Provides a simple react components for selecting topology nodes

props

minSearchCharacters: Minimum search term length to initialize a search request. Defaults to 3.

zone: Topology zone. Used in all api requests (e.g. in topo://ZONE/node/...). Defaults to local.

Inherits the following properties from material-ui TextField:

• name
• onBlur
• error
• helperText
• className
• label

usage

Single mode

import React, { useState } from 'react';
import { TopologySelect } from '@oerlikon/topology-select';

const BASE_URL = 'http://API_BASE_URL';
const ACCESS_TOKEN = 'my-access-token';

export const MyForm = () => {
  const [value, setValue] = useState<string>();

  const handleChange = (event: ChangeEvent<{ value: string }>) => {
    setValue(event.target.value);
  };

  return (
    <TopologySelect
      multiple={false}
      value={value}
      onChange={handleChange}
      label="Select a node"
      baseUrl={BASE_URL}
      accessToken={ACCESS_TOKEN}
    />
  );
};

Multiple mode

import React, { useState } from 'react';
import { TopologySelect } from '@oerlikon/topology-select';

const BASE_URL = 'http://API_BASE_URL';
const ACCESS_TOKEN = 'my-access-token';

export const MyForm = () => {
  const [values, setValues] = useState<string[]>([]);

  const handleChange = (event: ChangeEvent<{ value: string[] }>) => {
    setValues(event.target.value);
  };

  return (
    <TopologySelect
      multiple
      value={values}
      onChange={handleChange}
      label="Select multiple nodes"
      baseUrl={BASE_URL}
      accessToken={ACCESS_TOKEN}
    />
  );
};