@trilogy-ds/react 0.0.1-alpha-prompt

package/lib/components/otp/Otp.js

@@ -0,0 +1,133 @@
+import { __assign, __read, __rest } from "tslib";
+import { Text, TextMarkup } from '../../components/text';
+import { useTrilogyContext } from '../../context/index';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { TypographyColor } from '../../objects/Typography';
+import { is } from '../../services/classify';
+import translation from '@trilogy-ds/locales/lib/otp';
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+import { ComponentName } from '../enumsComponentsName';
+var stringToCode = function (str, codeSize) {
+    if (!str)
+        return new Array(codeSize).fill(null);
+    return str.split('').map(function (char) { return (char === '' ? null : Number(char)); });
+};
+var codeToString = function (code) {
+    return code.map(function (char) { return (char === null ? '_' : char); }).join('');
+};
+var isCompleted = function (myCode) {
+    return myCode.every(function (code) { return code !== null; });
+};
+var focusToNextInput = function (target, value) {
+    var nextElementSibling = target.nextElementSibling;
+    if (nextElementSibling) {
+        if (value)
+            nextElementSibling.value = value;
+        if (target.value.length)
+            nextElementSibling.focus();
+    }
+    else {
+        target.focus();
+    }
+};
+var focusToPrevInput = function (target) {
+    var previousElementSibling = target.previousElementSibling;
+    if (previousElementSibling) {
+        previousElementSibling.focus();
+    }
+    else {
+        target.focus();
+    }
+};
+var updateCodeInput = function (value, index, code) {
+    var numberValue = Number(value);
+    if (isNaN(numberValue) || value.length < 1) {
+        return code;
+    }
+    var newCodeInput = code.map(function (code, idx) {
+        return idx === index ? Number(value.slice(0, 1)) : code;
+    });
+    return updateCodeInput(value.slice(1), index + 1, newCodeInput);
+};
+var inputOnKeyUp = function (e) {
+    var key = e.key;
+    var target = e.target;
+    if (key === 'ArrowRight' || key === 'ArrowDown') {
+        return focusToNextInput(target);
+    }
+    if (key === 'ArrowLeft' || key === 'ArrowUp') {
+        return focusToPrevInput(target);
+    }
+    if (key === 'Backspace') {
+        return target.value === '' && focusToPrevInput(target);
+    }
+    if (key >= '0' && key <= '9') {
+        focusToNextInput(target);
+    }
+};
+var formatTranslation = function (translation, x, y) {
+    return translation.replace(/:x/g, x).replace(/:y/g, y);
+};
+/**
+ * OTP Code Component
+ * @param value {string} Code Text Input
+ * @param length {number} Code Size Number
+ * @param disabled {boolean} Disabled OTP Code Input
+ * @param error {boolean} OTP Code Input has error | Display error icon
+ * @param onCompleted {Function} Return code input string
+ * @param onChange {Function} onChange Input return current code
+ * @param onFocus {Function} onFocus return if focused opt
+ * @param autoFocus {boolean} Should auto focus otp
+ * @param label {string} Label for OTP
+ * @param help {string} error message to display
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional css classes
+ */
+var Otp = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, value = _a.value, _b = _a.length, length = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, onCompleted = _a.onCompleted, onChange = _a.onChange, onFocus = _a.onFocus, label = _a.label, help = _a.help, autoFocus = _a.autoFocus, others = __rest(_a, ["className", "id", "value", "length", "disabled", "error", "onCompleted", "onChange", "onFocus", "label", "help", "autoFocus"]);
+    var _c = __read(useState(stringToCode(value, length) || new Array(length).fill(null)), 2), codeInput = _c[0], setCodeInput = _c[1];
+    var hasChanged = useRef(false);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('otp-list', error && is('error'), className));
+    useEffect(function () {
+        if (!disabled) {
+            isCompleted(codeInput) && (onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeToString(codeInput)));
+        }
+    }, [length, codeInput, onCompleted, disabled]);
+    useEffect(function () {
+        hasChanged.current = codeInput.find(function (code) { return code !== null; }) !== undefined;
+        if (hasChanged.current) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(codeToString(codeInput));
+        }
+    }, [codeInput]);
+    var inputOnChange = function (e, idx) {
+        var target = e.target;
+        var targetValue = target.value.trim();
+        if (targetValue.length > 0) {
+            setCodeInput(updateCodeInput(targetValue, idx, codeInput));
+        }
+        else {
+            setCodeInput(codeInput.map(function (code, index) {
+                return index === idx ? null : code;
+            }));
+        }
+    };
+    var inputOnFocus = function (e) {
+        var target = e.target;
+        target.setSelectionRange(0, target.value.length);
+    };
+    return (React.createElement(React.Fragment, null,
+        label && (React.createElement(Text, { markup: TextMarkup.P, typo: (disabled && TypographyColor.TEXT_NEUTRAL) ||
+                (error && TypographyColor.TEXT_ERROR) ||
+                TypographyColor.TEXT_MAIN }, label)),
+        React.createElement("div", { ref: ref, id: id, className: classes, onClick: function () {
+                if (!disabled) {
+                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
+                }
+            } }, codeInput.map(function (digit, idx) { return (React.createElement("input", __assign({ "aria-disabled": disabled, key: idx, type: 'tel', inputMode: 'numeric', autoComplete: 'one-time-code', autoFocus: idx === 0 && autoFocus, pattern: '\\d{1}', maxLength: length, className: hashClass(styled, clsx('otp')), value: "".concat(digit !== null && digit !== void 0 ? digit : ''), onKeyUp: inputOnKeyUp, onFocus: inputOnFocus, onChange: function (e) { return inputOnChange(e, idx); }, disabled: disabled, title: formatTranslation(translation.inputTitle, String(idx + 1), String(length)) }, others))); })),
+        help && (React.createElement(Text, { className: hashClass(styled, clsx('help')), markup: TextMarkup.P, typo: (error && TypographyColor.TEXT_ERROR) || TypographyColor.TEXT_MAIN }, help))));
+});
+Otp.displayName = ComponentName.Otp;
+export default Otp;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLFdBQVcsTUFBTSw2QkFBNkIsQ0FBQTtBQUNyRCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFLdEQsSUFBTSxZQUFZLEdBQUcsVUFBQyxHQUF1QixFQUFFLFFBQWdCO0lBQzdELElBQUksQ0FBQyxHQUFHO1FBQUUsT0FBTyxJQUFJLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUE7SUFDL0MsT0FBTyxHQUFHLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxVQUFDLElBQUksSUFBSyxPQUFBLENBQUMsSUFBSSxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBbkMsQ0FBbUMsQ0FBQyxDQUFBO0FBQ3pFLENBQUMsQ0FBQTtBQUVELElBQU0sWUFBWSxHQUFHLFVBQUMsSUFBb0I7SUFDeEMsT0FBTyxJQUFJLENBQUMsR0FBRyxD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

package/lib/components/otp/Otp.native.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import { OtpProps } from './OtpProps';
+/**
+ * OTP Code Component
+ * @param value {string} Code Text Input
+ * @param length {number} Code Size Number
+ * @param disabled {boolean} Disabled OTP Code Input
+ * @param error {boolean} OTP Code Input has error | Display error icon
+ * @param onCompleted {Function} Return code input string
+ * @param onFocus {Function} onFocus return if focused opt
+ * @param activated {boolean} Activated OTP
+ * @param onChange {Function} onChange Input return current code
+ * @param label {string} Label for OTP
+ */
+declare const Otp: React.ForwardRefExoticComponent<OtpProps & React.RefAttributes<SafeAreaView>>;
+export default Otp;

package/lib/components/otp/Otp.native.js

@@ -0,0 +1,140 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon, IconColor, IconName, IconSize } from '../../components/icon';
+import { Text, TextLevels } from '../../components/text';
+import { Title, TitleLevels } from '../../components/title';
+import { TypographyAlign } from '../../objects';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
+import React, { useEffect, useRef, useState } from 'react';
+import { Pressable, SafeAreaView, StyleSheet, TextInput, View } from 'react-native';
+/**
+ * OTP Code Component
+ * @param value {string} Code Text Input
+ * @param length {number} Code Size Number
+ * @param disabled {boolean} Disabled OTP Code Input
+ * @param error {boolean} OTP Code Input has error | Display error icon
+ * @param onCompleted {Function} Return code input string
+ * @param onFocus {Function} onFocus return if focused opt
+ * @param activated {boolean} Activated OTP
+ * @param onChange {Function} onChange Input return current code
+ * @param label {string} Label for OTP
+ */
+var Otp = React.forwardRef(function (_a, ref) {
+    var value = _a.value, _b = _a.length, length = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, onCompleted = _a.onCompleted, onFocus = _a.onFocus, activated = _a.activated, onChange = _a.onChange, label = _a.label, others = __rest(_a, ["value", "length", "disabled", "error", "onCompleted", "onFocus", "activated", "onChange", "label"]);
+    var _c = __read(useState(value || ''), 2), codeInput = _c[0], setCodeInput = _c[1];
+    // eslint-disable-next-line prefer-spread
+    var _d = __read(useState(__spreadArray([], __read(Array(length).keys()), false)), 1), codeDigitsArray = _d[0];
+    var _e = __read(useState(false), 2), focused = _e[0], setFocused = _e[1];
+    var color = getColorStyle(disabled ? TrilogyColor.DISABLED : error ? TrilogyColor.ERROR : TrilogyColor.MAIN);
+    useEffect(function () {
+        if (/^-?\d*\.?\d*$/.test(codeInput) && !disabled) {
+            setCodeInput(value || '');
+        }
+    }, [value]);
+    useEffect(function () {
+        if (!disabled && codeInput && codeInput.length >= length) {
+            onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeInput);
+        }
+    }, [value, length, codeInput]);
+    var refInput = useRef(null);
+    var handleOnPress = function () {
+        var _a;
+        (_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var style = StyleSheet.create({
+        container: {
+            flex: 1,
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            alignSelf: 'center',
+        },
+        inputsContainer: {
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        inputContainer: {
+            borderColor: getColorStyle(disabled
+                ? TrilogyColor.DISABLED
+                : activated
+                    ? TrilogyColor.MAIN
+                    : error
+                        ? TrilogyColor.ERROR
+                        : TrilogyColor.NEUTRAL),
+            borderWidth: 1,
+            borderRadius: 4,
+            marginHorizontal: 5,
+            justifyContent: 'center',
+            alignContent: 'center',
+            alignItems: 'center',
+            width: 28,
+            height: 35,
+        },
+        inputSelectedContainer: {
+            borderColor: color,
+            borderWidth: 1,
+            borderRadius: 4,
+            marginHorizontal: 5,
+            justifyContent: 'center',
+            alignContent: 'center',
+            alignItems: 'center',
+            width: 28,
+            height: 35,
+        },
+        hiddenCodeInput: {
+            position: 'absolute',
+            height: 1,
+            width: 1,
+            opacity: 0,
+        },
+        icon: {
+            marginHorizontal: 8,
+            marginBottom: 8,
+        },
+        currentInput: {
+            width: 15,
+            height: 1,
+            backgroundColor: getColorStyle(focused ? TrilogyColor.MAIN : 'transparent'),
+        },
+        text: {
+            paddingLeft: 5,
+            color: color,
+        },
+    });
+    var toDigitInput = function (_value, idx) {
+        var emptyInputChar = ' ';
+        var digit = codeInput[idx] || emptyInputChar;
+        if (idx <= codeInput.length) {
+            return (React.createElement(View, { key: idx, style: style.inputSelectedContainer },
+                React.createElement(Text, { typo: TypographyAlign.TEXT_CENTERED, level: TextLevels.TWO }, digit),
+                Boolean(idx === codeInput.length) && React.createElement(View, { style: style.currentInput })));
+        }
+        return (React.createElement(View, { key: idx, style: style.inputContainer },
+            React.createElement(Title, { level: TitleLevels.FOUR }, digit)));
+    };
+    return (React.createElement(SafeAreaView, __assign({ ref: ref, style: style.container }, others),
+        React.createElement(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 4, marginBottom: label ? 8 : undefined } },
+            Boolean(label) && (React.createElement(View, null,
+                React.createElement(Text, { style: style.text, level: TextLevels.FOUR }, label))),
+            error && React.createElement(Icon, { name: IconName.EXCLAMATION_CIRCLE, color: IconColor.ERROR, size: IconSize.SMALLER })),
+        React.createElement(Pressable, { style: style.inputsContainer, onPress: handleOnPress }, codeDigitsArray.map(function (_item, index) { return (React.createElement(View, { key: index }, toDigitInput(index, index))); })),
+        React.createElement(TextInput, { ref: refInput, value: codeInput, onChangeText: function (code) {
+                if (/^-?\d*\.?\d*$/.test(code) && !disabled) {
+                    if (onChange) {
+                        onChange(code);
+                    }
+                    setCodeInput(code);
+                }
+            }, keyboardType: 'numeric', returnKeyType: 'send', textContentType: 'oneTimeCode', maxLength: length, onFocus: function () {
+                if (!disabled) {
+                    setFocused(true);
+                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
+                }
+            }, onBlur: function () {
+                setFocused(false);
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(false);
+            }, editable: !disabled, style: style.hiddenCodeInput, testID: 'input-id' })));
+});
+Otp.displayName = ComponentName.Otp;
+export default Otp;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvb3RwL090cC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3ZFLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUN2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzNDLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUduRjs7Ozs7Ozs7Ozs7R0FXRztBQUNILElBQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzFCLFVBQ0UsRUFBbUcsRUFDbkcsR0FBRztJQURELElBQUEsS0FBSyxXQUFBLEVBQUUsY0FBVSxFQUFWLE1BQU0sbUJBQUcsQ0FBQyxLQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLEtBQUssV0FBQSxFQUFLLE1BQU0sY0FBakcsb0dBQW1HLENBQUY7SUFHM0YsSUFBQSxLQUFBLE9BQTRCLFFBQVEsQ0FB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

package/lib/components/otp/OtpProps.d.ts

@@ -0,0 +1,20 @@
+import { SafeAreaView } from 'react-native';
+import { CommonProps } from '../../objects/facets/CommonProps';
+/**
+ * Otp Interface
+ */
+export interface OtpProps extends CommonProps {
+    value?: string;
+    length?: number;
+    disabled?: boolean;
+    error?: boolean;
+    help?: string;
+    onCompleted?: (code?: string) => void;
+    onFocus?: (focused: boolean) => void;
+    onChange?: (code?: string) => void;
+    activated?: boolean;
+    label?: string;
+    autoFocus?: boolean;
+}
+export type OtpRef = HTMLDivElement;
+export type OtpNativeRef = SafeAreaView;

package/lib/components/otp/OtpProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwUHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL290cC9PdHBQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=

package/lib/components/otp/OtpPropsDefaults.js

@@ -0,0 +1,97 @@
+export default {
+  "value": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "length": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "number"
+    ]
+  },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "error": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "help": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "onCompleted": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "(code?: string | undefined) => void"
+    ]
+  },
+  "onFocus": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "(focused: boolean) => void"
+    ]
+  },
+  "onChange": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "(code?: string | undefined) => void"
+    ]
+  },
+  "activated": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "autoFocus": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/otp/index.d.ts

@@ -0,0 +1,2 @@
+import Otp from './Otp';
+export { Otp };

package/lib/components/otp/index.js

@@ -0,0 +1,3 @@
+import Otp from './Otp';
+export { Otp };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL290cC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxPQUFPLENBQUE7QUFFdkIsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFBIn0=

package/lib/components/pagination/Pagination.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PaginationProps } from './PaginationProps';
+/**
+ * Pagination Component
+ * @param length {number} Number of pages
+ * @param defaultPage {number} Current default active page (default is 1)
+ * @param onClick {Function} Return pagination object
+ * * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional css classes
+ * @param href {Function} Function that generates a link for seo bots
+ * @param testId {string} Test Id for Test Integration
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+export default Pagination;

package/lib/components/pagination/Pagination.js

@@ -0,0 +1,93 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import React, { useEffect, useRef, useState } from 'react';
+import { Icon, IconName } from '../../components/icon';
+import { hashClass } from '../../helpers';
+import clsx from 'clsx';
+import { useTrilogyContext } from '../../context';
+import { ComponentName } from '../enumsComponentsName';
+/**
+ * Pagination Component
+ * @param length {number} Number of pages
+ * @param defaultPage {number} Current default active page (default is 1)
+ * @param onClick {Function} Return pagination object
+ * * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional css classes
+ * @param href {Function} Function that generates a link for seo bots
+ * @param testId {string} Test Id for Test Integration
+ */
+var Pagination = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, length = _a.length, _b = _a.defaultPage, defaultPage = _b === void 0 ? 1 : _b, onClick = _a.onClick, href = _a.href, others = __rest(_a, ["className", "id", "length", "defaultPage", "onClick", "href"]);
+    var _c = __read(useState(defaultPage), 2), currentPage = _c[0], setCurrentPage = _c[1];
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('pagination', className));
+    var prevCurrentPage = useRef(currentPage);
+    var pager = React.useMemo(function () {
+        // Calculate total pages
+        var startPage = 1;
+        var endPage = 5;
+        if (length <= 5) {
+            // less than pageSize(default is 5) total pages so show all
+            startPage = 1;
+            endPage = length;
+        }
+        else {
+            // more than 3 total pages so calculate start and end pages
+            if (currentPage <= 3) {
+                startPage = 1;
+                endPage = 4;
+            }
+            else if (currentPage + 3 >= length) {
+                startPage = length - 3;
+                endPage = length;
+            }
+            else {
+                startPage = currentPage - 1;
+                endPage = currentPage + 1;
+            }
+        }
+        // Create an array of pages
+        var pages = __spreadArray([], __read(Array(endPage + 1 - startPage).keys()), false).map(function (i) { return startPage + i; });
+        // Set pager object
+        return {
+            currentPage: currentPage,
+            length: length,
+            endPage: endPage,
+            pages: pages,
+        };
+    }, [currentPage, length]);
+    useEffect(function () {
+        if (onClick && prevCurrentPage.current !== pager.currentPage) {
+            onClick(pager);
+        }
+        setCurrentPage(pager.currentPage);
+        prevCurrentPage.current = pager.currentPage;
+    }, [pager.currentPage]);
+    useEffect(function () {
+        setCurrentPage(defaultPage);
+    }, [defaultPage]);
+    return (React.createElement("nav", __assign({ ref: ref, id: id, className: classes }, others),
+        React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-previous')) }, (currentPage === 1 ? { 'aria-disabled': true } : {}), { onClick: function () {
+                if (currentPage !== 1) {
+                    setCurrentPage(currentPage - 1);
+                }
+            }, href: href === null || href === void 0 ? void 0 : href(currentPage - 1) }),
+            React.createElement(Icon, { name: IconName.ARROW_LEFT })),
+        React.createElement("ul", { className: hashClass(styled, clsx('pagination-list')) },
+            !pager.pages.includes(1) && (React.createElement("li", null,
+                React.createElement("span", { className: hashClass(styled, clsx('pagination-ellipsis')) }, "\u2026"))),
+            pager.pages.map(function (pageNumber) { return (React.createElement("li", { key: pageNumber },
+                React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-link')) }, (currentPage === pageNumber ? { 'aria-current': true } : {}), { "aria-label": "Aller \u00E0 la page ".concat(pageNumber), onClick: function () {
+                        setCurrentPage(pageNumber);
+                    }, href: href === null || href === void 0 ? void 0 : href(pageNumber) }), pageNumber))); }),
+            !pager.pages.includes(length) && (React.createElement("li", null,
+                React.createElement("span", { className: hashClass(styled, clsx('pagination-ellipsis')) }, "\u2026")))),
+        React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-next')) }, (currentPage === Math.max(length) ? { 'aria-disabled': true } : {}), { onClick: function () {
+                if (currentPage !== Math.max(length)) {
+                    setCurrentPage(currentPage + 1);
+                }
+            }, href: href === null || href === void 0 ? void 0 : href(currentPage + 1) }),
+            React.createElement(Icon, { name: IconName.ARROW_RIGHT }))));
+});
+Pagination.displayName = ComponentName.Pagination;
+export default Pagination;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9QYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRWxELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFdEQ7Ozs7Ozs7OztHQVNHO0FBQ0gsSUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBaUMsVUFBQyxFQVFwRSxFQUFFLEdBQUc7SUFQSixJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLE1BQU0sWUFBQSxFQUNOLG1CQUFlLEVBQWYsV0FBVyxtQkFBRyxDQUFDLEtBQUEsRUFDZixPQUFPLGFBQUEsRUFDUCxJQUFJLFVBQUEsRUFDRCxNQUFNLGNBUDBELCtEQVFwRSxDQURVO0lBRUgsSUFBQSxLQUFBLE9BQWdDLFFBQVEsQ0FBUyxXQUFXLENBQUMsSUFBQSxFQUE1RCxXQUFXLFFBQUEsRUFBRSxjQUFjLFFBQWlDLENBQUE7SUFDM0QsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFaEUsSUFBTSxlQUFlLEdBQUcsTUFBTSxDQUFTLFdBQVcsQ0FBQyxDQUFBO0lB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

package/lib/components/pagination/Pagination.native.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View } from 'react-native';
+import { PaginationProps } from './PaginationProps';
+/**
+ * Pagination Component
+ * @param length {number} Number of pages
+ * @param defaultPage {number} Current default active page (default is 1)
+ * @param pageSize {number} Element per page (default is 10)
+ * @param onClick {Function} Return pagination object
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<View>>;
+export default Pagination;