diff --git a/frontend/src/Editor/Components/Table/Pagination.jsx b/frontend/src/Editor/Components/Table/Pagination.jsx new file mode 100644 index 0000000000..ba5b5180f7 --- /dev/null +++ b/frontend/src/Editor/Components/Table/Pagination.jsx @@ -0,0 +1,70 @@ +import React, { useState, useEffect } from 'react'; + +export const Pagination = function Pagination({ + onPageIndexChanged, + serverSide, + autoGotoPage, + autoCanNextPage, + autoPageCount +}) { + const [pageIndex, setPageIndex] = useState(1); + const [pageCount, setPageCount] = useState(autoPageCount); + + useEffect(() => { + setPageCount(autoPageCount); + }, [autoPageCount]); + + function gotoPage(page) { + setPageIndex(page); + onPageIndexChanged(page); + if (!serverSide) { + autoGotoPage(page - 1); + } + } + + function goToNextPage() { + gotoPage(pageIndex + 1); + } + + function goToPreviousPage() { + gotoPage(pageIndex - 1); + } + + return ( +
+ {!serverSide + && + } + {' '} + + + {pageIndex} + + + {' '} + + {!serverSide + && + } +
+ ); +}; diff --git a/frontend/src/Editor/Inspector/Elements/Toggle.jsx b/frontend/src/Editor/Inspector/Elements/Toggle.jsx new file mode 100644 index 0000000000..66a31b1db7 --- /dev/null +++ b/frontend/src/Editor/Inspector/Elements/Toggle.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { getToolTipProps } from './utils'; + +export const Toggle = ({ + param, definition, onChange, paramType, componentMeta +}) => { + const value = definition ? definition.value : false; + const paramMeta = componentMeta[paramType][param.name]; + const displayName = paramMeta.displayName || param.name; + + return ( +
+ +
+ ); +}; diff --git a/frontend/src/Editor/Inspector/TypeMapping.js b/frontend/src/Editor/Inspector/TypeMapping.js index 76dfdb761a..949acbef78 100644 --- a/frontend/src/Editor/Inspector/TypeMapping.js +++ b/frontend/src/Editor/Inspector/TypeMapping.js @@ -3,5 +3,6 @@ export const TypeMapping = { string: 'Text', color: 'Color', json: 'Json', - code: 'Code' + code: 'Code', + toggle: 'Toggle' }; diff --git a/frontend/src/Editor/Inspector/Utils.js b/frontend/src/Editor/Inspector/Utils.js index 18e1e48ab3..236ec4e26d 100644 --- a/frontend/src/Editor/Inspector/Utils.js +++ b/frontend/src/Editor/Inspector/Utils.js @@ -3,6 +3,7 @@ import { Text } from './Elements/Text'; import { Color } from './Elements/Color'; import { Json } from './Elements/Json'; import { Code } from './Elements/Code'; +import { Toggle } from './Elements/Toggle'; import { TypeMapping } from './TypeMapping'; import { EventSelector } from './EventSelector'; @@ -10,7 +11,8 @@ const AllElements = { Color, Json, Text, - Code + Code, + Toggle }; export function renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, components = {}) {