@redneckz/wildless-cms-uni-blocks 0.14.9 → 0.14.11

package/src/ui-kit/Pagination/PaginationContainer.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { Icon } from '../Icon/Icon';
+import { paginationBlockStyle } from './paginationBlockStyle';
+import { renderPages } from './renderPages';
+
+const ICON_SIZE = { width: '24', height: '24' };
+
+export interface PaginationContainerProps {
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  totalPages: number;
+}
+
+export const PaginationContainer = ({
+  currentPage,
+  onPageChange,
+  totalPages,
+}: PaginationContainerProps) => {
+  const pages = useMemo(
+    () =>
+      new Array(totalPages).fill({
+        currentPage,
+        onPageChange,
+        totalPages,
+      }),
+    [totalPages, currentPage],
+  );
+
+  const handlePrevPage = useCallback(() => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  }, [currentPage]);
+
+  const handleNextPage = useCallback(() => {
+    if (currentPage < totalPages - 1) {
+      onPageChange(currentPage + 1);
+    }
+  }, [currentPage, totalPages]);
+
+  const handleFirstPage = useCallback(() => onPageChange(1), []);
+  const handleLastPage = useCallback(() => onPageChange(totalPages), [totalPages]);
+
+  return (
+    <div className="flex gap-m items-center">
+      <div onClick={handlePrevPage}>
+        <Icon
+          name="ArrowLeftIcon"
+          iconVersion="black"
+          imageClassName={getIconStyle(currentPage === 1)}
+          {...ICON_SIZE}
+        />
+      </div>
+      <div className="flex gap-xs">
+        {currentPage > 1 ? (
+          <div onClick={handleFirstPage} className={paginationBlockStyle} aria-label="Страница 1">
+            1
+          </div>
+        ) : null}
+        {currentPage > 4 ? <div className="py-m px-s">...</div> : null}
+        {pages.map(renderPages)}
+        {currentPage < totalPages - 3 ? <div className="py-m px-s">...</div> : null}
+        {currentPage < totalPages ? (
+          <div
+            onClick={handleLastPage}
+            className={paginationBlockStyle}
+            aria-label={`Страница ${totalPages}}`}
+          >
+            {totalPages}
+          </div>
+        ) : null}
+      </div>
+      <div onClick={handleNextPage}>
+        <Icon
+          className="rotate-180"
+          name="ArrowLeftIcon"
+          iconVersion="black"
+          imageClassName={getIconStyle(currentPage === totalPages)}
+          {...ICON_SIZE}
+        />
+      </div>
+    </div>
+  );
+};
+
+const getIconStyle = (condition: boolean) =>
+  condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';

package/src/ui-kit/Pagination/paginationBlockStyle.ts

@@ -0,0 +1,2 @@
+export const paginationBlockStyle =
+  'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';

package/src/ui-kit/Pagination/renderPages.tsx

@@ -1,7 +1,8 @@
-import { paginationBlockStyle, PaginationProps } from './Pagination';
+import { paginationBlockStyle } from './paginationBlockStyle';
+import type { PaginationContainerProps } from './PaginationContainer';
 import { shouldRenderPage } from './shouldRenderPage';
 
-export const renderPages = (pagesParams: PaginationProps, index: number) => {
+export const renderPages = (pagesParams: PaginationContainerProps, index: number) => {
   const { currentPage, onPageChange, totalPages } = pagesParams;
   const page = index + 1;
   if (page === currentPage) {

package/src/ui-kit/Select/Select.tsx

@@ -2,12 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { LabelProps } from '../../model/HeadlineType';
-import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
-import type { Option } from './Option';
+import { Text } from '../Text/Text';
 import { formatOption } from './formatOption';
+import type { Option } from './Option';
 import { useSelectPopup } from './useSelectPopup';
 
 export type SelectProps = LabelProps & {

package/src/utils/formatDate.ts

@@ -0,0 +1 @@
+export const formatDate = (date: string) => date.split('-').reverse().join('.');

package/tailwind.config.cjs

@@ -64,6 +64,7 @@ module.exports = {
           'linear-gradient(90deg, rgba(var(--color-primary-main), 1) 0%, rgba(var(--color-primary-main), 0) 80%);',
         'green-to-yellow': 'linear-gradient(180deg, #42AB44 0%, #F6DB7D 100%)',
       },
+      flexShrink: { '1/2': '0.5'},
       fontFamily: {
         sans: ['Ubuntu', ...defaultTheme.fontFamily.sans],
         mohave: ['Mohave', ...defaultTheme.fontFamily.sans],
@@ -266,6 +267,24 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/container-queries')],
+  plugins: [require('@tailwindcss/container-queries'), function ({ addComponents }) {
+    addComponents({
+      '.container': {
+        maxWidth: '100%',
+        '@screen sm': {
+          maxWidth: 'none',
+        },
+        '@screen md': {
+          maxWidth: 'none',
+        },
+        '@screen lg': {
+          maxWidth: '1024px',
+        },
+        '@screen xl': {
+          maxWidth: '1280px',
+        },
+      }
+    })
+  }],
   safelist: [],
 };

package/bundle/utils/convertTimestampToDate.d.ts

@@ -1 +0,0 @@
-export declare const convertTimestampToDate: (timestamp: number) => string;

package/dist/utils/convertTimestampToDate.d.ts

@@ -1 +0,0 @@
-export declare const convertTimestampToDate: (timestamp: number) => string;

package/dist/utils/convertTimestampToDate.js

@@ -1,16 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertTimestampToDate = void 0;
-const convertTimestampToDate = (timestamp) => {
-    const date = new Date(timestamp * 1000);
-    let dd = date.getDate();
-    if (dd < 10) {
-        dd = '0' + dd;
-    }
-    let mm = date.getMonth() + 1;
-    if (mm < 10) {
-        mm = '0' + mm;
-    }
-    return dd + '.' + mm + '.' + date.getFullYear();
-};
-exports.convertTimestampToDate = convertTimestampToDate;
-//# sourceMappingURL=convertTimestampToDate.js.map

package/dist/utils/convertTimestampToDate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"convertTimestampToDate.js","sourceRoot":"","sources":["../../src/utils/convertTimestampToDate.ts"],"names":[],"mappings":";;AAAO,MAAM,sBAAsB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAExC,IAAI,EAAE,GAAoB,IAAI,CAAC,OAAO,EAAE,CAAC;IACzC,IAAI,EAAE,GAAG,EAAE,EAAE;QACX,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;KACf;IAED,IAAI,EAAE,GAAoB,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAC9C,IAAI,EAAE,GAAG,EAAE,EAAE;QACX,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;KACf;IAED,OAAO,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;AAClD,CAAC,CAAC;AAdW,QAAA,sBAAsB,0BAcjC"}

package/lib/utils/convertTimestampToDate.d.ts

@@ -1 +0,0 @@
-export declare const convertTimestampToDate: (timestamp: number) => string;

package/lib/utils/convertTimestampToDate.js

@@ -1,13 +0,0 @@
-export const convertTimestampToDate = (timestamp) => {
-    const date = new Date(timestamp * 1000);
-    let dd = date.getDate();
-    if (dd < 10) {
-        dd = '0' + dd;
-    }
-    let mm = date.getMonth() + 1;
-    if (mm < 10) {
-        mm = '0' + mm;
-    }
-    return dd + '.' + mm + '.' + date.getFullYear();
-};
-//# sourceMappingURL=convertTimestampToDate.js.map

package/lib/utils/convertTimestampToDate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"convertTimestampToDate.js","sourceRoot":"","sources":["../../src/utils/convertTimestampToDate.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAExC,IAAI,EAAE,GAAoB,IAAI,CAAC,OAAO,EAAE,CAAC;IACzC,IAAI,EAAE,GAAG,EAAE,EAAE;QACX,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;KACf;IAED,IAAI,EAAE,GAAoB,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAC9C,IAAI,EAAE,GAAG,EAAE,EAAE;QACX,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;KACf;IAED,OAAO,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;AAClD,CAAC,CAAC"}

package/mobile/bundle/utils/convertTimestampToDate.d.ts

@@ -1 +0,0 @@
-export declare const convertTimestampToDate: (timestamp: number) => string;

package/mobile/dist/utils/convertTimestampToDate.d.ts

@@ -1 +0,0 @@
-export declare const convertTimestampToDate: (timestamp: number) => string;

package/mobile/dist/utils/convertTimestampToDate.js

@@ -1,16 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertTimestampToDate = void 0;
-const convertTimestampToDate = (timestamp) => {
-    const date = new Date(timestamp * 1000);
-    let dd = date.getDate();
-    if (dd < 10) {
-        dd = '0' + dd;
-    }
-    let mm = date.getMonth() + 1;
-    if (mm < 10) {
-        mm = '0' + mm;
-    }
-    return dd + '.' + mm + '.' + date.getFullYear();
-};
-exports.convertTimestampToDate = convertTimestampToDate;
-//# sourceMappingURL=convertTimestampToDate.js.map

package/mobile/dist/utils/convertTimestampToDate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"convertTimestampToDate.js","sourceRoot":"","sources":["../../src/utils/convertTimestampToDate.ts"],"names":[],"mappings":";;AAAO,MAAM,sBAAsB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAExC,IAAI,EAAE,GAAoB,IAAI,CAAC,OAAO,EAAE,CAAC;IACzC,IAAI,EAAE,GAAG,EAAE,EAAE;QACX,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;KACf;IAED,IAAI,EAAE,GAAoB,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAC9C,IAAI,EAAE,GAAG,EAAE,EAAE;QACX,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;KACf;IAED,OAAO,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;AAClD,CAAC,CAAC;AAdW,QAAA,sBAAsB,0BAcjC"}

package/mobile/lib/utils/convertTimestampToDate.d.ts

@@ -1 +0,0 @@
-export declare const convertTimestampToDate: (timestamp: number) => string;

package/mobile/lib/utils/convertTimestampToDate.js

@@ -1,13 +0,0 @@
-export const convertTimestampToDate = (timestamp) => {
-    const date = new Date(timestamp * 1000);
-    let dd = date.getDate();
-    if (dd < 10) {
-        dd = '0' + dd;
-    }
-    let mm = date.getMonth() + 1;
-    if (mm < 10) {
-        mm = '0' + mm;
-    }
-    return dd + '.' + mm + '.' + date.getFullYear();
-};
-//# sourceMappingURL=convertTimestampToDate.js.map

package/mobile/lib/utils/convertTimestampToDate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"convertTimestampToDate.js","sourceRoot":"","sources":["../../src/utils/convertTimestampToDate.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAExC,IAAI,EAAE,GAAoB,IAAI,CAAC,OAAO,EAAE,CAAC;IACzC,IAAI,EAAE,GAAG,EAAE,EAAE;QACX,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;KACf;IAED,IAAI,EAAE,GAAoB,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAC9C,IAAI,EAAE,GAAG,EAAE,EAAE;QACX,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;KACf;IAED,OAAO,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;AAClD,CAAC,CAAC"}

package/mobile/src/utils/convertTimestampToDate.ts

@@ -1,15 +0,0 @@
-export const convertTimestampToDate = (timestamp: number) => {
-  const date = new Date(timestamp * 1000);
-
-  let dd: string | number = date.getDate();
-  if (dd < 10) {
-    dd = '0' + dd;
-  }
-
-  let mm: string | number = date.getMonth() + 1;
-  if (mm < 10) {
-    mm = '0' + mm;
-  }
-
-  return dd + '.' + mm + '.' + date.getFullYear();
-};

package/src/utils/convertTimestampToDate.ts

@@ -1,15 +0,0 @@
-export const convertTimestampToDate = (timestamp: number) => {
-  const date = new Date(timestamp * 1000);
-
-  let dd: string | number = date.getDate();
-  if (dd < 10) {
-    dd = '0' + dd;
-  }
-
-  let mm: string | number = date.getMonth() + 1;
-  if (mm < 10) {
-    mm = '0' + mm;
-  }
-
-  return dd + '.' + mm + '.' + date.getFullYear();
-};