tycho-components 0.0.15-SNAPSHOT-14 → 0.0.16-SNAPSHOT

package/dist/AppPagination/AppPagination.d.ts

@@ -0,0 +1,17 @@
+import './style.scss';
+type Props = {
+    gotoPage: (p: number) => void;
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+    previousPage: () => void;
+    nextPage: () => void;
+    pageIndex: number;
+    pageOptions: number[];
+    setPageSize: (p: number) => void;
+    pageSize: number;
+    multiple?: number;
+    total: number;
+    hideTotal?: boolean;
+};
+export default function AppPagination({ gotoPage, canPreviousPage, canNextPage, previousPage, nextPage, pageIndex, pageOptions, setPageSize, pageSize, multiple, total, hideTotal, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppPagination/AppPagination.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { faChevronLeft, faChevronRight, } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppSelect from '../AppSelect';
+import './style.scss';
+const minPages = 5;
+export default function AppPagination({ gotoPage, canPreviousPage, canNextPage, previousPage, nextPage, pageIndex, pageOptions, setPageSize, pageSize, multiple, total, hideTotal, }) {
+    const { t } = useTranslation('common');
+    const getPageSizeOptions = () => {
+        const arrayPagination = [];
+        if (multiple) {
+            for (let i = 0; i < 5; i += 1)
+                arrayPagination.push({
+                    label: `${t('pagination.label.showing')} ${(i + 1) * multiple} ${t('pagination.label.results')}`,
+                    value: (i + 1) * multiple,
+                });
+        }
+        return arrayPagination;
+    };
+    const alterColorPageSelected = (pageOption) => pageOption === pageIndex ? 'page-item selected' : 'page-item';
+    const [buttons, setButtons] = useState([]);
+    const renderButton = (pageOption) => {
+        if (pageOption === undefined)
+            return null;
+        if (pageOption === -1 || pageOption === -2) {
+            return (_jsx("button", { type: "button", className: "page-ellipsis", children: "..." }, pageOption.valueOf()));
+        }
+        return (_jsx("button", { type: "button", onClick: () => {
+                gotoPage(pageOption);
+            }, className: alterColorPageSelected(pageOption), children: pageOption + 1 }, pageOption.valueOf()));
+    };
+    useEffect(() => {
+        if (pageOptions && pageOptions.length > minPages) {
+            const arr = [];
+            // add first and check for need of ...
+            arr.push(0);
+            if (pageIndex > 1)
+                arr.push(-1);
+            if (pageIndex >= pageOptions.length - 3) {
+                for (let i = pageOptions.length - 3; i < pageOptions.length; i += 1) {
+                    if (i !== pageOptions.length - 1) {
+                        arr.push(i);
+                    }
+                }
+            }
+            else {
+                for (let i = 0; i < 3; i += 1) {
+                    if (pageIndex + i !== 0) {
+                        arr.push(pageIndex + i);
+                    }
+                }
+            }
+            // check for need of ... and add last
+            if (pageIndex < pageOptions.length - 3)
+                arr.push(-2);
+            arr.push(pageOptions[pageOptions.length - 1]);
+            setButtons(arr);
+        }
+        else {
+            setButtons(pageOptions.slice());
+        }
+    }, [pageIndex]);
+    return (_jsxs("div", { className: "pagination-container", children: [_jsxs("div", { className: "select", children: [multiple && (_jsx(AppSelect, { options: getPageSizeOptions(), value: getPageSizeOptions().find((p) => p.value === pageSize), emptyValue: false, onChange: (e) => {
+                            setPageSize(e);
+                        } })), !hideTotal && (_jsxs("span", { className: "total", children: [t('pagination.label.total'), ": ", total] }))] }), _jsxs("div", { className: "pages", children: [_jsx("button", { type: "button", onClick: () => previousPage(), disabled: !canPreviousPage, className: "page-item-chevron", children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }), buttons?.map((pageOption, idx) => renderButton(pageOption)), _jsx("button", { type: "button", onClick: () => nextPage(), disabled: !canNextPage, className: "page-item-chevron", children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) })] })] }));
+}

package/dist/AppPagination/index.d.ts

@@ -0,0 +1,2 @@
+import AppPagination from './AppPagination';
+export default AppPagination;

package/dist/AppPagination/index.js

@@ -0,0 +1,2 @@
+import AppPagination from './AppPagination';
+export default AppPagination;

package/dist/AppPagination/style.scss

@@ -0,0 +1,59 @@
+.pagination-container {
+  display: flex;
+  align-items: center;
+
+  > .pages {
+    display: flex;
+    margin-left: auto;
+
+    .page-item,
+    .page-item-chevron,
+    .page-ellipsis {
+      height: 30px;
+      width: 35px;
+      margin-left: 4px;
+      border-radius: var(--radius-100);
+      background-color: var(--background-default);
+    }
+
+    .page-item-chevron {
+      border: none;
+    }
+
+    .page-ellipsis {
+      cursor: default;
+    }
+
+    .page-item,
+    .page-ellipsis {
+      @include button-small;
+      border: 1px solid var(--border-subtle-3);
+      background-color: var(--button-secondary-default);
+      color: var(--text-secondary);
+      align-items: center;
+
+      &.selected {
+        background: var(--button-primary-default);
+        color: var(--text-on-color-light);
+      }
+
+      &:hover {
+        background: var(--button-secondary-hover);
+      }
+    }
+  }
+
+  .select {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .form-select {
+      width: auto;
+    }
+
+    .total {
+      @include label-medium-2;
+    }
+  }
+}

package/dist/AppSelect/AppSelect.d.ts

@@ -0,0 +1,9 @@
+import './style.scss';
+type Props = {
+    options: any[];
+    value: any;
+    onChange: (value: any) => void;
+    emptyValue?: boolean;
+};
+export default function AppSelect({ options, onChange, emptyValue, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppSelect/AppSelect.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Form } from 'react-bootstrap';
+import './style.scss';
+import { useTranslation } from 'react-i18next';
+export default function AppSelect({ options, onChange, emptyValue = true, }) {
+    const { t } = useTranslation('common');
+    const getValues = () => {
+        if (Array.isArray(options))
+            return options;
+        const arr = [];
+        Object.keys(options).forEach((key) => {
+            arr.push({
+                label: options[key],
+                value: key,
+            });
+        });
+        return arr;
+    };
+    return (_jsxs(Form.Select, { onChange: (e) => onChange(e.target.value), children: [emptyValue && _jsx("option", { value: "", children: t('select.empty') }), getValues().map((option, idx) => (_jsx("option", { value: option.value, children: option.label }, idx.valueOf())))] }));
+}

package/dist/AppSelect/index.d.ts

@@ -0,0 +1,2 @@
+import AppSelect from './AppSelect';
+export default AppSelect;

package/dist/AppSelect/index.js

@@ -0,0 +1,2 @@
+import AppSelect from './AppSelect';
+export default AppSelect;

package/dist/Header/Header.d.ts

@@ -9,6 +9,8 @@ type Props = {
     freeAccess?: boolean;
     hideKeyboard?: boolean;
     hideReplaceAll?: boolean;
+    parser?: boolean;
+    customHeader?: React.ReactNode;
 };
-export default function Header({ tool, navigateHome, navigateCorpora, navigateLogout, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Header({ tool, navigateHome, navigateCorpora, navigateLogout, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, customHeader, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Header/Header.js

@@ -12,7 +12,7 @@ import HeaderReplaceAll from './HeaderReplaceAll';
 import HeaderUser from './HeaderUser';
 import './styles.scss';
 const linkTurorials = 'https://www.tycho.iel.unicamp.br/home/tutorials';
-export default function Header({ tool, navigateHome, navigateCorpora, navigateLogout, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, }) {
+export default function Header({ tool, navigateHome, navigateCorpora, navigateLogout, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, customHeader, }) {
     const { t } = useTranslation('header');
     const { getCorpus, hasCorpus } = useCorpusUtils();
     const [openKeyboard, setOpenKeyboard] = useState(false);
@@ -22,5 +22,5 @@ export default function Header({ tool, navigateHome, navigateCorpora, navigateLo
     const homeTextsClass = cx('texts', {
         pointer: navigateHome !== undefined,
     });
-    return (_jsxs("div", { className: "ds-header", children: [_jsx(HeaderApps, { freeAccess: freeAccess }), _jsxs("div", { className: homeTextsClass, onClick: () => navigateHome && navigateHome(), children: [_jsx("span", { className: "title", children: t('label.platform') }), _jsx("span", { className: "subtitle", children: tool })] }), _jsx(HeaderCorpora, { redirect: redirect, autoload: autoload, freeAccess: freeAccess, navigateCorpora: navigateCorpora }), _jsxs("div", { className: profileClass, children: [!hideReplaceAll && _jsx(HeaderReplaceAll, {}), !hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard') })), _jsx(IconButton, { name: "live_help", size: "medium", title: t('tooltip.tutorials'), onClick: () => window.open(linkTurorials, '_blank') }), _jsx(LanguageSelector, {}), !freeAccess && _jsx(HeaderUser, { navigateLogout: navigateLogout })] }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: getCorpus().keyboardLayout || 'english' }))] }));
+    return (_jsxs("div", { className: "ds-header", children: [_jsx(HeaderApps, { freeAccess: freeAccess }), _jsxs("div", { className: homeTextsClass, onClick: () => navigateHome && navigateHome(), children: [_jsx("span", { className: "title", children: t('label.platform') }), _jsx("span", { className: "subtitle", children: tool })] }), customHeader, !customHeader && (_jsx(HeaderCorpora, { redirect: redirect, autoload: autoload, freeAccess: freeAccess, navigateCorpora: navigateCorpora })), _jsxs("div", { className: profileClass, children: [!hideReplaceAll && _jsx(HeaderReplaceAll, {}), !hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard') })), _jsx(IconButton, { name: "live_help", size: "medium", title: t('tooltip.tutorials'), onClick: () => window.open(linkTurorials, '_blank') }), _jsx(LanguageSelector, {}), !freeAccess && _jsx(HeaderUser, { navigateLogout: navigateLogout })] }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: getCorpus().keyboardLayout || 'english' }))] }));
 }

package/dist/configs/Localization.d.ts

@@ -4,6 +4,7 @@ export declare const commonResources: {
             'button.confirm': string;
             'button.cancel': string;
             'button.remove': string;
+            'select.empty': string;
             'pagination.label.showing': string;
             'pagination.label.results': string;
             'pagination.label.total': string;
@@ -133,6 +134,8 @@ export declare const commonResources: {
         common: {
             'button.confirm': string;
             'button.cancel': string;
+            'button.remove': string;
+            'select.empty': string;
             'pagination.label.showing': string;
             'pagination.label.results': string;
             'pagination.label.total': string;

package/dist/configs/localization/CommonTexts.d.ts

@@ -3,6 +3,7 @@ export declare const CommonTexts: {
         'button.confirm': string;
         'button.cancel': string;
         'button.remove': string;
+        'select.empty': string;
         'pagination.label.showing': string;
         'pagination.label.results': string;
         'pagination.label.total': string;
@@ -21,6 +22,8 @@ export declare const CommonTexts: {
     'pt-BR': {
         'button.confirm': string;
         'button.cancel': string;
+        'button.remove': string;
+        'select.empty': string;
         'pagination.label.showing': string;
         'pagination.label.results': string;
         'pagination.label.total': string;
@@ -40,6 +43,7 @@ export declare const CommonTexts: {
         'button.confirm': string;
         'button.cancel': string;
         'button.remove': string;
+        'select.empty': string;
         'pagination.label.showing': string;
         'pagination.label.results': string;
         'pagination.label.total': string;

package/dist/configs/localization/CommonTexts.js

@@ -3,6 +3,7 @@ export const CommonTexts = {
         'button.confirm': 'Confirm',
         'button.cancel': 'Cancel',
         'button.remove': 'Remove',
+        'select.empty': 'Select',
         'pagination.label.showing': 'Showing',
         'pagination.label.results': 'results per page',
         'pagination.label.total': 'Total',
@@ -21,6 +22,8 @@ export const CommonTexts = {
     'pt-BR': {
         'button.confirm': 'Confirmar',
         'button.cancel': 'Cancelar',
+        'button.remove': 'Remover',
+        'select.empty': 'Selecionar',
         'pagination.label.showing': 'Exibindo',
         'pagination.label.results': 'resultados por página',
         'pagination.label.total': 'Total',
@@ -40,6 +43,7 @@ export const CommonTexts = {
         'button.confirm': 'Conferma',
         'button.cancel': 'Annulla',
         'button.remove': 'Rimuovi',
+        'select.empty': 'Seleziona',
         'pagination.label.showing': 'Mostrando',
         'pagination.label.results': 'risultati per pagina',
         'pagination.label.total': 'Totale',

package/dist/index.d.ts

@@ -6,8 +6,10 @@ export { default as AppLoading } from './AppLoading';
 export { default as AppModal } from './AppModal';
 export { default as AppModalConfirm } from './AppModal/AppModalConfirm';
 export { default as AppModalRemove } from './AppModal/AppModalRemove';
+export { default as AppPagination } from './AppPagination';
 export { default as AppPicture } from './AppPicture';
 export { default as AppPlaceholder } from './AppPlaceholder';
+export { default as AppSelect } from './AppSelect';
 export { default as AppToast } from './AppToast';
 export { default as CommentComponent } from './Comments';
 export { default as Header } from './Header';

package/dist/index.js

@@ -6,8 +6,10 @@ export { default as AppLoading } from './AppLoading';
 export { default as AppModal } from './AppModal';
 export { default as AppModalConfirm } from './AppModal/AppModalConfirm';
 export { default as AppModalRemove } from './AppModal/AppModalRemove';
+export { default as AppPagination } from './AppPagination';
 export { default as AppPicture } from './AppPicture';
 export { default as AppPlaceholder } from './AppPlaceholder';
+export { default as AppSelect } from './AppSelect';
 export { default as AppToast } from './AppToast';
 export { default as CommentComponent } from './Comments';
 export { default as Header } from './Header';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.15-SNAPSHOT-14",
+  "version": "0.0.16-SNAPSHOT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {