Display List
To reach a list of high performance, we usually need some three-party libraries to implement it. However, we have established a number of common components in @opensumi/ide-components
under OpenSumi, and we will show how to render our TodoList list with these components.
Data Structure
In panels registered by IMainLayoutService
service, components render with a default viewState
property, from which you can get the width and height of the entire panel.
export interface ITodo {
description: string;
isChecked: boolean;
}
export const Todo = ({
viewState
}: React.PropsWithChildren<{ viewState: ViewState }>) => {
const { width, height } = viewState;
const [todos, setTodos] = React.useState<ITodo[]>([
{
description: 'First Todo',
isChecked: true
}
]);
};
Rendering List
We introduce RecycleList
and CheckBox
from @opensumi/ide-components
.The following is the complete code after combination:
import * as React from 'react';
import { ViewState } from '@opensumi/ide-core-browser';
import * as styles from './todo.module.less';
import { RecycleList, CheckBox } from '@opensumi/ide-components';
export interface ITodo {
description: string;
isChecked: boolean;
}
export const Todo = ({
viewState
}: React.PropsWithChildren<{ viewState: ViewState }>) => {
const { width, height } = viewState;
const [todos, setTodos] = React.useState<ITodo[]>([
{
description: 'First Todo',
isChecked: true
}
]);
const template = ({ data, index }: { data: ITodo; index: number }) => {
const handlerChange = () => {
const newTodos = todos.slice(0);
newTodos.splice(index, 1, {
description: data.description,
isChecked: !data.isChecked
});
setTodos(newTodos);
};
return (
<div className={styles.todo_item} key={`${data.description + index}`}>
<CheckBox
checked={data.isChecked}
onChange={handlerChange}
label={data.description}
/>
</div>
);
};
return (
<RecycleList
height={height}
width={width}
itemHeight={24}
data={todos}
template={template}
/>
);
};
Results Show
In the next section, we will further learn how to use DI to work with rich framework services.