@pallasoft/ps-mobile-components 1.9.0 → 1.10.1

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.
@@ -0,0 +1,2 @@
1
+ export * from './ps-record-preview';
2
+ export * from './ps-record-preview-props';
@@ -0,0 +1,2 @@
1
+ export * from './ps-record-preview';
2
+ export * from './ps-record-preview-props';
@@ -0,0 +1,14 @@
1
+ import type { ReactNode } from 'react';
2
+ import type { PsAmountDirection } from '../../services/ps-amount-tone-service';
3
+ import type { PsListRowBadge } from '../ps-list/ps-list-props';
4
+ export interface PsRecordPreviewAmount {
5
+ direction?: PsAmountDirection;
6
+ formatted: string;
7
+ }
8
+ export interface PsRecordPreviewProps {
9
+ amount?: PsRecordPreviewAmount;
10
+ badge?: PsListRowBadge;
11
+ children?: ReactNode;
12
+ subtitle?: string;
13
+ title: string;
14
+ }
@@ -0,0 +1,2 @@
1
+ import type { PsRecordPreviewProps } from './ps-record-preview-props';
2
+ export declare const PsRecordPreview: ({ amount, badge, children, subtitle, title, }: PsRecordPreviewProps) => import("react").JSX.Element;
@@ -0,0 +1,21 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { View } from 'react-native';
3
+ import { PsRecordPreviewConfig } from '../../constants/ps-record-preview-config';
4
+ import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
5
+ import { PsAmountText } from '../ps-amount-text/ps-amount-text';
6
+ import { PsBadge } from '../ps-badge/ps-badge';
7
+ import { PsText } from '../ps-text/ps-text';
8
+ export const PsRecordPreview = ({ amount, badge, children, subtitle, title, }) => {
9
+ const theme = usePsMobileTheme();
10
+ return (_jsxs(View, { style: {
11
+ backgroundColor: theme.surface,
12
+ flex: 1,
13
+ gap: PsRecordPreviewConfig.gap,
14
+ padding: PsRecordPreviewConfig.padding,
15
+ }, children: [_jsxs(View, { style: {
16
+ alignItems: 'center',
17
+ flexDirection: 'row',
18
+ gap: PsRecordPreviewConfig.gap,
19
+ justifyContent: 'space-between',
20
+ }, children: [_jsx(View, { style: { flexShrink: 1 }, children: _jsx(PsText, { numberOfLines: PsRecordPreviewConfig.titleLines, variant: 'heading', children: title }) }), badge === undefined ? null : _jsx(PsBadge, { tone: badge.tone, children: badge.label })] }), amount === undefined ? null : (_jsx(PsAmountText, { direction: amount.direction, formatted: amount.formatted })), subtitle === undefined ? null : _jsx(PsText, { tone: 'muted', children: subtitle }), children] }));
21
+ };
@@ -9,12 +9,13 @@ import { usePsFocus } from '../../hooks/use-ps-focus';
9
9
  import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
10
10
  import { PsControlStyleService } from '../../services/ps-control-style-service';
11
11
  import { PsRippleService } from '../../services/ps-ripple-service';
12
+ import { PsSearchFieldService } from '../../services/ps-search-field-service';
12
13
  import { PsIcon } from '../ps-icon/ps-icon';
13
14
  import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
14
15
  export const PsSearchField = ({ clearLabel, isLoading = false, onChange, placeholder, value, }) => {
15
16
  const theme = usePsMobileTheme();
16
17
  const focus = usePsFocus();
17
- if (isLoading)
18
+ if (PsSearchFieldService.isSkeleton(isLoading, value, focus.isFocused))
18
19
  return _jsx(PsSkeleton, { shape: PsSkeletonShape.Control });
19
20
  return (_jsxs(View, { style: [
20
21
  PsControlStyleService.container(theme, {
@@ -0,0 +1,5 @@
1
+ export declare const PsRecordPreviewConfig: {
2
+ readonly gap: 8;
3
+ readonly padding: 20;
4
+ readonly titleLines: 1;
5
+ };
@@ -0,0 +1,5 @@
1
+ export const PsRecordPreviewConfig = {
2
+ gap: 8,
3
+ padding: 20,
4
+ titleLines: 1,
5
+ };
package/dist/index.d.ts CHANGED
@@ -28,6 +28,7 @@ export * from './components/ps-page-backdrop';
28
28
  export * from './components/ps-pallasoft-sign-in-button';
29
29
  export * from './components/ps-color-swatches';
30
30
  export * from './components/ps-count-badge';
31
+ export * from './components/ps-record-preview';
31
32
  export * from './components/ps-segmented-control';
32
33
  export * from './components/ps-selection-mode';
33
34
  export * from './components/ps-tab-bar-provider';
@@ -187,3 +188,4 @@ export * from './interfaces/ps-infinite-data-options';
187
188
  export * from './interfaces/ps-infinite-data-result';
188
189
  export * from './interfaces/ps-infinite-data-update';
189
190
  export * from './interfaces/ps-infinite-page';
191
+ export { usePsDebouncedValue } from '@pallasoft/ps-utilities/react';
package/dist/index.js CHANGED
@@ -28,6 +28,7 @@ export * from './components/ps-page-backdrop';
28
28
  export * from './components/ps-pallasoft-sign-in-button';
29
29
  export * from './components/ps-color-swatches';
30
30
  export * from './components/ps-count-badge';
31
+ export * from './components/ps-record-preview';
31
32
  export * from './components/ps-segmented-control';
32
33
  export * from './components/ps-selection-mode';
33
34
  export * from './components/ps-tab-bar-provider';
@@ -182,3 +183,4 @@ export * from './interfaces/ps-infinite-data-options';
182
183
  export * from './interfaces/ps-infinite-data-result';
183
184
  export * from './interfaces/ps-infinite-data-update';
184
185
  export * from './interfaces/ps-infinite-page';
186
+ export { usePsDebouncedValue } from '@pallasoft/ps-utilities/react';
@@ -0,0 +1,3 @@
1
+ export declare class PsSearchFieldService {
2
+ static isSkeleton(isLoading: boolean, value: string, isFocused: boolean): boolean;
3
+ }
@@ -0,0 +1,5 @@
1
+ export class PsSearchFieldService {
2
+ static isSkeleton(isLoading, value, isFocused) {
3
+ return isLoading && value === '' && !isFocused;
4
+ }
5
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pallasoft/ps-mobile-components",
3
- "version": "1.9.0",
3
+ "version": "1.10.1",
4
4
  "private": false,
5
5
  "description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
6
6
  "main": "./dist/index.js",
@@ -36,7 +36,7 @@
36
36
  "dependencies": {
37
37
  "@pallasoft/ps-design-system": "^1.19.0",
38
38
  "@pallasoft/ps-icons": "^1.12.0",
39
- "@pallasoft/ps-utilities": "^2.28.0"
39
+ "@pallasoft/ps-utilities": "^2.29.0"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@expo/ui": "~58.0.0",