DDUI Pagination component and example

ExampleUI.ts

function paginate<T>(
  form: FancyCustomForm,
  data: T[],
  render: (value: T) => void,
  per_page: number,
  options?: GeneralOptions,
) {
  form.view(() => {
    const pages = Math.ceil(data.length / per_page);
    let visibilities: Observable<boolean>[] = [];
    const usr_page_index = Observable.create<number>(1, {
      clientWritable: true,
    });
    for (let page = 0; page < pages; page++) {
      const visibility = derive(usr_page_index, (v) => v - 1 === page);
      visibilities.push(visibility);
      form.view(
        () => {
          for (let item of data.slice(page * per_page, (page + 1) * per_page)) {
            render(item);
          }
        },
        { visible: visibility },
      );
    }
    form.slider(
      derive(usr_page_index, (v) => `Page ${v}/${pages}` as string),
      usr_page_index,
      1,
      pages,
    );
  }, options);
}
function showForm(p: Player) {
  const form = FancyCustomForm.create(p, "Test form");
  form.label("Pagination");

  const data = Array.from(Array(99), (_, i) => i);
  const disabled = Observable.create<boolean>(false, { clientWritable: true });
  const visible = Observable.create<boolean>(true, { clientWritable: true });
  form.toggle("Disabled", disabled, {
    description: "Disable the pagination element",
  });
  form.toggle("Visible", visible, {
    description: "Visibility of the pagination element",
  });
  form.label(derive(disabled, (v) => `disabled: ${v}` as string));
  form.label(derive(visible, (v) => `visibility: ${v}` as string));
  paginate(
    form,
    data,
    (v) => form.label(`${v} - 0x${v.toString(16)} - 0b${v.toString(2)}`),
    10,
    { disabled, visible },
  );
  form.show();
}