Spatelengg patch 1

components/doc/paginator/templatedoc.js

@@ -48,7 +48,23 @@ export function TemplateDoc(props) {
     const rightContent = <Button type="button" icon="pi pi-search" />;
 
     const template1 = {
-        layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
+        layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport MyButton',
+        MyButton: (op) => {
+            const p = op.props;
+            const firstPage = p.page === 0;
+            const lastPage = p.page === (p.totalPages - 1);
+
+            return (
+                <div>
+                    <Button type="button" disabled={!(firstPage || lastPage) && !(firstPage && lastPage)}
+                        icon="pi pi-sync" label="Go to middle Page"
+                        tooltip='Button only on First and Last page. On click go to middle page'
+                        onClick={() => {
+                            p.onChange(Math.floor(p.totalPages / 2) * p.rows, p.rows)
+                        }}
+                    />
+                </div>);
+        },
         PrevPageLink: (options) => {
             return (
                 <button type="button" className={classNames(options.className, 'border-round')} onClick={options.onClick} disabled={options.disabled}>

components/lib/paginator/CustomOption.JS

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { PrimeReactContext, localeOption } from '../api/Api';
+import { ariaLabel } from '../api/Locale';
+
+import { useMergeProps } from '../hooks/Hooks';
+import { ObjectUtils } from '../utils/Utils';
+import { RowsPerPageDropdownBase } from './PaginatorBase';
+
+export const CustomOption = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = RowsPerPageDropdownBase.getProps(inProps, context);
+
+    const value = props.totalPages > 0 ? props.page + 1 : 0;
+    const element = null;
+
+    if (props.template) {
+        const defaultOptions = {
+            value,
+            //onChange: onChange,
+            disabled: props.disabled,
+            className: 'p-paginator-page-input',
+
+            element,
+            props
+        };
+
+        return ObjectUtils.getJSXElement(props.template, defaultOptions);
+    }
+
+    return element;
+});
+
+CustomOption.displayName = 'CustomOption';

components/lib/paginator/Paginator.js

@@ -12,6 +12,7 @@ import { PageLinks } from './PageLinks';
 import { PaginatorBase } from './PaginatorBase';
 import { PrevPageLink } from './PrevPageLink';
 import { RowsPerPageDropdown } from './RowsPerPageDropdown';
+import { CustomOption } from './CustomOption';
 
 export const Paginator = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -251,7 +252,18 @@ export const Paginator = React.memo(
                     break;
 
                 default:
-                    element = null;
+                    element = (
+                        <CustomOption hostName="Paginator"
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            first={props.first}
+                            template={template}
+                            onChange={changePage} 
+                            ptm={ptm} />
+                    );
                     break;
             }