tycho-components 0.0.15-SNAPSHOT-13 → 0.0.15-SNAPSHOT-15

package/dist/AppDropzone/AppDropzone.d.ts

@@ -9,6 +9,10 @@ type Props = {
     onDrop?: () => void;
     keepName?: boolean;
     title?: string;
+    alternativeButton?: {
+        title: string;
+        action: () => void;
+    };
 };
-export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, alternativeButton, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppDropzone/AppDropzone.js

@@ -6,7 +6,7 @@ import './style.scss';
 import UploadService from './UploadService';
 import { useMessageUtils } from '../configs/useMessageUtils';
 import AppModal from '../AppModal';
-export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, }) {
+export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, alternativeButton, }) {
     const { t } = useTranslation('upload');
     const { dispatchError } = useMessageUtils();
     const [file, setFile] = useState();
@@ -37,7 +37,7 @@ export default function AppDropzone({ folder, onClose, onSuccess, onError, accep
             onError && onError(err);
         });
     };
-    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload", close: onClose, confirm: upload, children: _jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), file && preview && (_jsx("img", { className: "preview", src: preview, onLoad: () => {
+    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload", close: onClose, confirm: upload, alternativeButton: alternativeButton, children: _jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), file && preview && (_jsx("img", { className: "preview", src: preview, onLoad: () => {
                         URL.revokeObjectURL(preview);
                     } })), file && !preview && (_jsxs("div", { className: "uploaded-message", children: [_jsx("b", { children: t('label.uploaded.file') }), _jsx("span", { children: file.name }), _jsx("b", { children: t('label.confirm') })] }))] }) }));
 }

package/dist/AppModal/AppModal.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import './style.scss';
 type Props = {
     children: React.ReactNode;
@@ -15,6 +14,10 @@ type Props = {
     confirmLabel?: string;
     closeLabel?: string;
     onEntered?: () => void;
+    alternativeButton?: {
+        title: string;
+        action: () => void;
+    };
 };
-export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppModal/AppModal.js

@@ -4,10 +4,10 @@ import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, Icon } from 'tycho-storybook';
 import './style.scss';
-export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, }) {
+export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, }) {
     const { t } = useTranslation('common');
     const getClassNames = cx('modal-container', className);
-    return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, children: _jsx(Fade, { in: true, onEntered: () => onEntered && onEntered(), children: _jsxs(Box, { className: getClassNames, sx: style, children: [_jsxs("div", { className: "header", children: [_jsxs("div", { className: "titles", children: [_jsx("span", { className: "title", children: title }), subtitle && _jsx("span", { className: "subtitle", children: subtitle })] }), !disableClose && (_jsx(Icon, { name: "close", onClick: close, className: "pointer" }))] }), _jsx("div", { className: "body", children: children }), !hideFooter ? (_jsxs("div", { className: "footer", children: [!disableCancel && (_jsx(Button, { onClick: cancel || close, text: closeLabel || t('button.cancel'), color: "danger" })), confirm && (_jsx(Button, { onClick: confirm, disabled: disableConfirm, text: confirmLabel || t('button.confirm') }))] })) : null] }) }) }));
+    return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, children: _jsx(Fade, { in: true, onEntered: () => onEntered && onEntered(), children: _jsxs(Box, { className: getClassNames, sx: style, children: [_jsxs("div", { className: "header", children: [_jsxs("div", { className: "titles", children: [_jsx("span", { className: "title", children: title }), subtitle && _jsx("span", { className: "subtitle", children: subtitle })] }), !disableClose && (_jsx(Icon, { name: "close", onClick: close, className: "pointer" }))] }), _jsx("div", { className: "body", children: children }), !hideFooter ? (_jsxs("div", { className: "footer", children: [alternativeButton && (_jsx(Button, { className: "alternative", color: "white", onClick: alternativeButton.action, text: alternativeButton.title })), !disableCancel && (_jsx(Button, { onClick: cancel || close, text: closeLabel || t('button.cancel'), color: "danger" })), confirm && (_jsx(Button, { onClick: confirm, disabled: disableConfirm, text: confirmLabel || t('button.confirm') }))] })) : null] }) }) }));
 }
 const style = {
     position: 'absolute',

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/AppPlaceholder/style.scss

@@ -10,7 +10,7 @@
     @include subtitle-large-2;
     width: 100%;
     text-align: center;
-    background-color: var(--layer-layer-2);
+    background-color: var(--layer-layer-3);
     color: var(--text-placeholder);
     padding: 32px;
   }

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/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-13",
+  "version": "0.0.15-SNAPSHOT-15",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {