@opexa/portal-components 0.0.744 → 0.0.745

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -22,7 +22,7 @@ import { User01Icon } from '../../../icons/User01Icon.js';
22
22
  import firstPlace from '../../../images/first-place.png';
23
23
  import leaderboard from '../../../images/leaderboard.png';
24
24
  import { formatNumber } from '../../../utils/formatNumber.js';
25
- import { mask } from '../../../utils/mask.js';
25
+ import { maskFirstLast } from '../../../utils/mask.js';
26
26
  import { parseDecimal } from '../../../utils/parseDecimal.js';
27
27
  import styles from '../Jackpots.module.css';
28
28
  import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
@@ -123,8 +123,9 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
123
123
  currency: localeInfo.currency.code,
124
124
  minDecimalPlaces: 2,
125
125
  maxDecimalPlaces: 2,
126
- })] })] })] }), _jsx("div", { className: "hidden min-w-25 lg:block" }), chestImages.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: chestImages.image, alt: "chest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }), _jsx("div", { className: twMerge('relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex', className?.latestPayoutRoot), children: latestJackpotPayout?.amount ? (_jsxs(_Fragment, { children: [_jsx(ProfileIcon, {}), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: mask(latestJackpotPayout.member.name, {
127
- totalCharsCount: 6,
126
+ })] })] })] }), _jsx("div", { className: "hidden min-w-25 lg:block" }), chestImages.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: chestImages.image, alt: "chest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }), _jsx("div", { className: twMerge('relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex', className?.latestPayoutRoot), children: latestJackpotPayout?.amount ? (_jsxs(_Fragment, { children: [_jsx(ProfileIcon, {}), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: maskFirstLast(latestJackpotPayout.member.name, {
127
+ firstCharsCount: 3,
128
+ midLength: 3,
128
129
  }) }), _jsx("div", { className: twMerge('text-2xl text-brand-400', className?.latestPayoutAmount), children: formatNumber(latestJackpotPayout.amount, {
129
130
  currency: localeInfo.currency.code,
130
131
  minDecimalPlaces: 2,
@@ -137,8 +138,9 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
137
138
  'Timestamp',
138
139
  ].map((header) => (_jsx("th", { className: "px-4", children: header }, header))) }) }), _jsx("tbody", { children: jackpot.stages
139
140
  ? jackpot.stages.map((j, i) => (_jsxs("tr", { className: twMerge('whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: [_jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: i + 1 }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: j.member?.name
140
- ? mask(j.member.name, {
141
- totalCharsCount: 6,
141
+ ? maskFirstLast(j.member.name, {
142
+ firstCharsCount: 3,
143
+ midLength: 3,
142
144
  })
143
145
  : '-' }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: formatNumber(j.targetTurnover, {
144
146
  currency: localeInfo.currency.code,
@@ -13,7 +13,7 @@ import { User01Icon } from '../../../icons/User01Icon.js';
13
13
  import firstPlace from '../../../images/first-place.png';
14
14
  import leaderboard from '../../../images/leaderboard.png';
15
15
  import { formatNumber } from '../../../utils/formatNumber.js';
16
- import { mask, maskFirstLast } from '../../../utils/mask.js';
16
+ import { maskFirstLast } from '../../../utils/mask.js';
17
17
  import { parseDecimal } from '../../../utils/parseDecimal.js';
18
18
  import styles from '../Jackpots.module.css';
19
19
  import { useJackpotsListItemContext } from './JackpotsListContext.js';
@@ -66,6 +66,7 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
66
66
  ? jackpot.stages.map((j, i) => (_jsxs("tr", { className: twMerge('whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: [_jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: i + 1 }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: j.member?.name
67
67
  ? maskFirstLast(j.member.name, {
68
68
  firstCharsCount: 3,
69
+ midLength: 3,
69
70
  })
70
71
  : '-' }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: formatNumber(j.targetTurnover, {
71
72
  currency: localeInfo.currency.code,
@@ -91,8 +92,9 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
91
92
  currency: localeInfo.currency.code,
92
93
  minDecimalPlaces: 2,
93
94
  maxDecimalPlaces: 2,
94
- })] })] })] }), _jsx("div", { className: "min-w-30" }), chestImages.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: chestImages.image, alt: "chest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }), _jsx("div", { className: twMerge('relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex', className?.latestPayoutRoot), children: topJackpotPayout?.amount ? (_jsxs(_Fragment, { children: [_jsx(ProfileIcon, {}), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name, {
95
- totalCharsCount: 6,
95
+ })] })] })] }), _jsx("div", { className: "min-w-30" }), chestImages.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: chestImages.image, alt: "chest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }), _jsx("div", { className: twMerge('relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex', className?.latestPayoutRoot), children: topJackpotPayout?.amount ? (_jsxs(_Fragment, { children: [_jsx(ProfileIcon, {}), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: maskFirstLast(topJackpotPayout.member.name, {
96
+ firstCharsCount: 3,
97
+ midLength: 3,
96
98
  }) }), _jsx("div", { className: twMerge('text-2xl text-brand-400', className?.latestPayoutAmount), children: formatNumber(topJackpotPayout.amount, {
97
99
  currency: localeInfo.currency.code,
98
100
  minDecimalPlaces: 2,
@@ -17,7 +17,7 @@ import firstPlace from '../../../images/first-place.png';
17
17
  import leaderboard from '../../../images/leaderboard.png';
18
18
  import { Button } from '../../../ui/Button/index.js';
19
19
  import { formatNumber } from '../../../utils/formatNumber.js';
20
- import { mask, maskFirstLast } from '../../../utils/mask.js';
20
+ import { maskFirstLast } from '../../../utils/mask.js';
21
21
  import { parseDecimal } from '../../../utils/parseDecimal.js';
22
22
  import styles from '../Jackpots.module.css';
23
23
  import { useJackpotsListItemContext } from './JackpotsListContext.js';
@@ -88,8 +88,9 @@ export function JackpotMultiStageMobile({ animate = true, customJackpotChestImag
88
88
  };
89
89
  const RecentPayoutsTable = () => (_jsx("div", { className: "overflow-x-auto border-gray-200", children: _jsxs("table", { className: "w-full min-w-[37.5rem]", children: [_jsx("thead", { children: _jsx("tr", { className: twMerge('h-8 whitespace-nowrap bg-bg-secondary text-left font-medium text-text-tertiary-600 text-xs', className?.recentPayoutsTableHeadRow), children: ['Stage', 'Player', 'Target Turnover', 'Prize', 'Timestamp'].map((header) => (_jsx("th", { className: "px-4", children: header }, header))) }) }), _jsx("tbody", { children: jackpot.stages
90
90
  ? jackpot.stages.map((j, i) => (_jsxs("tr", { className: twMerge('whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: [_jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: i + 1 }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: j.member?.name
91
- ? mask(j.member.name, {
92
- totalCharsCount: 6,
91
+ ? maskFirstLast(j.member.name, {
92
+ firstCharsCount: 3,
93
+ midLength: 3,
93
94
  })
94
95
  : '-' }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: formatNumber(j.targetTurnover, {
95
96
  currency: localeInfo.currency.code,
@@ -11,6 +11,7 @@ export interface MaskFirstLastOptions {
11
11
  firstCharsCount?: number;
12
12
  /** @default "*" */
13
13
  maskChar?: string;
14
+ midLength?: number;
14
15
  }
15
16
  /**
16
17
  * @example
@@ -39,6 +39,6 @@ export const maskFirstLast = cache((value, opts) => {
39
39
  const firstChars = value.slice(0, firstCharsCount);
40
40
  const lastChar = value.slice(-1);
41
41
  const middleLength = value.length - firstCharsCount - 1;
42
- const maskedChars = maskChar.repeat(middleLength);
42
+ const maskedChars = maskChar.repeat(opts?.midLength ?? middleLength);
43
43
  return firstChars + maskedChars + lastChar;
44
44
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.744",
3
+ "version": "0.0.745",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",