Toggle element for inspector

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 (
+        <div className="pagination">
+            {!serverSide
+                && <button className="btn btn-sm btn-light mx-2" onClick={() => gotoPage(1)}>
+                {'<<'}
+                </button>
+            }
+            <button
+                className="btn btn-light btn-sm"
+                onClick={() => goToPreviousPage()}
+                disabled={pageIndex === 1}
+            >
+              {'<'}
+            </button>{' '}
+            <small className="p-1 mx-2">
+              <strong>
+                {pageIndex}
+              </strong>
+            </small>
+            <button
+                className="btn btn-light btn-sm"
+                onClick={() => goToNextPage()}
+                disabled={!autoCanNextPage}
+            >
+              {'>'}
+            </button>{' '}
+
+            {!serverSide
+                && <button
+                className="btn btn-light btn-sm mx-2"
+                onClick={() => gotoPage(pageCount)}
+                >
+                {'>>'}
+                </button>
+            }
+        </div>
+  );
+};

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 (
+    <div className="field mb-3">
+      <label className="form-check form-switch my-2">
+            <input
+              className="form-check-input"
+              type="checkbox"
+              onClick={() => onChange(param, 'value', !value, paramType)}
+              checked={value}
+            />
+            <span {...getToolTipProps(paramMeta)} className="form-check-label">
+                {displayName}
+            </span>
+        </label>
+    </div>
+  );
+};

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'
 };

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 = {}) {