Module controls

Example

import { useSearchParams } from 'react-router-dom';
import { useProjectData } from '@kvaser/canking-api/canking';
import { CanChannelSelectControl, FillBox } from '@kvaser/canking-api/controls';

// If any data should be stored in the project file then add it to this interface
interface IProjectViewData {
  // This is an example showing how to store the selected channel id to the project file
  channelId: string;
}

// Define any default values for the project data that will be used when the component is created
const defaultProjectViewData: IProjectViewData = {
  channelId: '',
};

function WorkspaceView() {
  // Get this view's unique id from search params
  const [searchParams] = useSearchParams();
  const idString = searchParams.get('id');
  const id = idString !== null ? Number.parseInt(idString, 10) : -1;

  // Use the useProjectData hook to serialize/deserialize your view data to the project
  const [projectData, setProjectData] = useProjectData<IProjectViewData>(id, defaultProjectViewData);

  // A callback that will get the new selected channel id and save it to the project data
  const onChannelIdentifierChange = (channelId: string) => {
    const data = { ...projectData };
    data.channelId = channelId;
    setProjectData(data);
  };

  return (
    <FillBox component="form">
      <div>Add your elements here!</div>
      <div>This is an example how to use the CanChannelSelectControl:</div>
      <CanChannelSelectControl
        channelIdentifier={projectData.channelId}
        onChannelIdentifierChange={onChannelIdentifierChange}
        hideSectionControl
      />
    </FillBox>
  );
}

export default WorkspaceView;
Copy