@ledgerhq/lumen-ui-rnative 0.1.39 → 0.1.41
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.
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js +28 -11
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js.map +1 -1
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.test.js +71 -0
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.test.js.map +1 -1
- package/dist/module/lib/Components/AmountInput/AmountInput.js +49 -154
- package/dist/module/lib/Components/AmountInput/AmountInput.js.map +1 -1
- package/dist/module/lib/Components/AmountInput/AmountInput.test.js +152 -0
- package/dist/module/lib/Components/AmountInput/AmountInput.test.js.map +1 -0
- package/dist/module/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.js +149 -0
- package/dist/module/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.js.map +1 -0
- package/dist/module/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.js +22 -0
- package/dist/module/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.js.map +1 -0
- package/dist/module/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.js +59 -0
- package/dist/module/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.js.map +1 -0
- package/dist/module/lib/Components/Avatar/Avatar.figma.js +5 -0
- package/dist/module/lib/Components/Avatar/Avatar.figma.js.map +1 -1
- package/dist/module/lib/Components/Avatar/Avatar.js +9 -2
- package/dist/module/lib/Components/Avatar/Avatar.js.map +1 -1
- package/dist/module/lib/Components/Avatar/Avatar.mdx +9 -0
- package/dist/module/lib/Components/Avatar/Avatar.stories.js +47 -0
- package/dist/module/lib/Components/Avatar/Avatar.stories.js.map +1 -1
- package/dist/module/lib/Components/Avatar/Avatar.test.js +23 -1
- package/dist/module/lib/Components/Avatar/Avatar.test.js.map +1 -1
- package/dist/module/lib/Components/BottomSheet/BottomSheetHeader.js +0 -3
- package/dist/module/lib/Components/BottomSheet/BottomSheetHeader.js.map +1 -1
- package/dist/module/lib/Components/Icon/Icon.test.js +1 -1
- package/dist/module/lib/Components/Switch/Switch.js +144 -8
- package/dist/module/lib/Components/Switch/Switch.js.map +1 -1
- package/dist/typescript/src/lib/Components/AmountDisplay/AmountDisplay.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/AmountInput/AmountInput.d.ts +1 -1
- package/dist/typescript/src/lib/Components/AmountInput/AmountInput.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.d.ts +16 -0
- package/dist/typescript/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.d.ts +18 -0
- package/dist/typescript/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/Avatar/Avatar.d.ts +1 -1
- package/dist/typescript/src/lib/Components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Avatar/types.d.ts +6 -0
- package/dist/typescript/src/lib/Components/Avatar/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts +1 -1
- package/dist/typescript/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Switch/Switch.d.ts +1 -1
- package/dist/typescript/src/lib/Components/Switch/Switch.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Switch/types.d.ts +2 -1
- package/dist/typescript/src/lib/Components/Switch/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/lib/Components/AmountDisplay/AmountDisplay.test.tsx +92 -0
- package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +37 -15
- package/src/lib/Components/AmountInput/AmountInput.test.tsx +166 -0
- package/src/lib/Components/AmountInput/AmountInput.tsx +55 -110
- package/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts +100 -0
- package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.ts +62 -0
- package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.ts +48 -0
- package/src/lib/Components/Avatar/Avatar.figma.tsx +5 -0
- package/src/lib/Components/Avatar/Avatar.mdx +9 -0
- package/src/lib/Components/Avatar/Avatar.stories.tsx +41 -0
- package/src/lib/Components/Avatar/Avatar.test.tsx +31 -1
- package/src/lib/Components/Avatar/Avatar.tsx +17 -4
- package/src/lib/Components/Avatar/types.ts +6 -0
- package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx +0 -4
- package/src/lib/Components/Icon/Icon.test.tsx +1 -1
- package/src/lib/Components/Switch/Switch.tsx +132 -11
- package/src/lib/Components/Switch/types.ts +3 -1
- package/dist/module/lib/Components/Switch/BaseSwitch.js +0 -221
- package/dist/module/lib/Components/Switch/BaseSwitch.js.map +0 -1
- package/dist/typescript/src/lib/Components/Switch/BaseSwitch.d.ts +0 -13
- package/dist/typescript/src/lib/Components/Switch/BaseSwitch.d.ts.map +0 -1
- package/src/lib/Components/Switch/BaseSwitch.tsx +0 -249
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { describe, expect, it, jest } from '@jest/globals';
|
|
4
|
+
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
|
|
5
|
+
import { fireEvent, render, screen } from '@testing-library/react-native';
|
|
6
|
+
import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
|
|
7
|
+
import { AmountInput } from "./AmountInput.js";
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
const hidden = {
|
|
10
|
+
includeHiddenElements: true
|
|
11
|
+
};
|
|
12
|
+
const renderWithProvider = component => render(/*#__PURE__*/_jsx(ThemeProvider, {
|
|
13
|
+
themes: ledgerLiveThemes,
|
|
14
|
+
colorScheme: "dark",
|
|
15
|
+
locale: "en",
|
|
16
|
+
children: component
|
|
17
|
+
}));
|
|
18
|
+
describe('AmountInput', () => {
|
|
19
|
+
describe('Rendering', () => {
|
|
20
|
+
it('renders with an empty value', () => {
|
|
21
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
22
|
+
value: "",
|
|
23
|
+
onChangeText: jest.fn(),
|
|
24
|
+
testID: "input"
|
|
25
|
+
}));
|
|
26
|
+
expect(screen.getByTestId('input')).toBeTruthy();
|
|
27
|
+
});
|
|
28
|
+
it('renders the currency text', () => {
|
|
29
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
30
|
+
value: "",
|
|
31
|
+
onChangeText: jest.fn(),
|
|
32
|
+
currencyText: "USD"
|
|
33
|
+
}));
|
|
34
|
+
expect(screen.getByText('USD', hidden)).toBeTruthy();
|
|
35
|
+
});
|
|
36
|
+
it('displays 0 when value is empty', () => {
|
|
37
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
38
|
+
value: "",
|
|
39
|
+
onChangeText: jest.fn()
|
|
40
|
+
}));
|
|
41
|
+
expect(screen.getByText('0', hidden)).toBeTruthy();
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
describe('Interactions', () => {
|
|
45
|
+
it('calls onChangeText with formatted text on change', () => {
|
|
46
|
+
const onChangeText = jest.fn();
|
|
47
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
48
|
+
value: "",
|
|
49
|
+
onChangeText: onChangeText,
|
|
50
|
+
testID: "input",
|
|
51
|
+
thousandsSeparator: false
|
|
52
|
+
}));
|
|
53
|
+
fireEvent.changeText(screen.getByTestId('input'), '123.45');
|
|
54
|
+
expect(onChangeText).toHaveBeenCalledWith('123.45');
|
|
55
|
+
});
|
|
56
|
+
it('formats with thousands separator on user input', () => {
|
|
57
|
+
const onChangeText = jest.fn();
|
|
58
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
59
|
+
value: "",
|
|
60
|
+
onChangeText: onChangeText,
|
|
61
|
+
testID: "input"
|
|
62
|
+
}));
|
|
63
|
+
fireEvent.changeText(screen.getByTestId('input'), '1000');
|
|
64
|
+
expect(onChangeText).toHaveBeenCalledWith('1 000');
|
|
65
|
+
});
|
|
66
|
+
it('strips decimal input when allowDecimals is false', () => {
|
|
67
|
+
const onChangeText = jest.fn();
|
|
68
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
69
|
+
value: "",
|
|
70
|
+
onChangeText: onChangeText,
|
|
71
|
+
allowDecimals: false,
|
|
72
|
+
thousandsSeparator: false,
|
|
73
|
+
testID: "input"
|
|
74
|
+
}));
|
|
75
|
+
fireEvent.changeText(screen.getByTestId('input'), '12.34');
|
|
76
|
+
expect(onChangeText).toHaveBeenCalledWith('1234');
|
|
77
|
+
});
|
|
78
|
+
it('truncates decimal part with maxDecimalLength on user input', () => {
|
|
79
|
+
const onChangeText = jest.fn();
|
|
80
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
81
|
+
value: "",
|
|
82
|
+
onChangeText: onChangeText,
|
|
83
|
+
maxDecimalLength: 2,
|
|
84
|
+
thousandsSeparator: false,
|
|
85
|
+
testID: "input"
|
|
86
|
+
}));
|
|
87
|
+
fireEvent.changeText(screen.getByTestId('input'), '1.2345');
|
|
88
|
+
expect(onChangeText).toHaveBeenCalledWith('1.23');
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
describe('programmatic value formatting', () => {
|
|
92
|
+
it('formats a raw unformatted string on initial render', () => {
|
|
93
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
94
|
+
value: "2433.123456789",
|
|
95
|
+
onChangeText: jest.fn()
|
|
96
|
+
}));
|
|
97
|
+
expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
|
|
98
|
+
});
|
|
99
|
+
it('formats a number value on initial render', () => {
|
|
100
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
101
|
+
value: 2433.123456789,
|
|
102
|
+
onChangeText: jest.fn()
|
|
103
|
+
}));
|
|
104
|
+
expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
|
|
105
|
+
});
|
|
106
|
+
it('adds thousands grouping for a large number value', () => {
|
|
107
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
108
|
+
value: 1000000,
|
|
109
|
+
onChangeText: jest.fn()
|
|
110
|
+
}));
|
|
111
|
+
expect(screen.getByText('1 000 000', hidden)).toBeTruthy();
|
|
112
|
+
});
|
|
113
|
+
it('applies maxDecimalLength to a programmatically set value', () => {
|
|
114
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
115
|
+
value: "2433.123456789",
|
|
116
|
+
maxDecimalLength: 2,
|
|
117
|
+
onChangeText: jest.fn()
|
|
118
|
+
}));
|
|
119
|
+
expect(screen.getByText('2 433.12', hidden)).toBeTruthy();
|
|
120
|
+
});
|
|
121
|
+
it('applies maxIntegerLength to a programmatically set value', () => {
|
|
122
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
123
|
+
value: "1234567890",
|
|
124
|
+
maxIntegerLength: 3,
|
|
125
|
+
allowDecimals: false,
|
|
126
|
+
thousandsSeparator: false,
|
|
127
|
+
onChangeText: jest.fn()
|
|
128
|
+
}));
|
|
129
|
+
expect(screen.getByText('123', hidden)).toBeTruthy();
|
|
130
|
+
});
|
|
131
|
+
it('omits thousands separator when thousandsSeparator is false', () => {
|
|
132
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
133
|
+
value: "2433.12",
|
|
134
|
+
thousandsSeparator: false,
|
|
135
|
+
onChangeText: jest.fn()
|
|
136
|
+
}));
|
|
137
|
+
expect(screen.getByText('2433.12', hidden)).toBeTruthy();
|
|
138
|
+
});
|
|
139
|
+
it('formats consistently with what typing the same digits produces', () => {
|
|
140
|
+
const onChangeText = jest.fn();
|
|
141
|
+
renderWithProvider(/*#__PURE__*/_jsx(AmountInput, {
|
|
142
|
+
value: "2433.123456789",
|
|
143
|
+
onChangeText: onChangeText,
|
|
144
|
+
testID: "input"
|
|
145
|
+
}));
|
|
146
|
+
expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
|
|
147
|
+
fireEvent.changeText(screen.getByTestId('input'), '2433.123456789');
|
|
148
|
+
expect(onChangeText).toHaveBeenCalledWith('2 433.123456789');
|
|
149
|
+
});
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
//# sourceMappingURL=AmountInput.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["describe","expect","it","jest","ledgerLiveThemes","fireEvent","render","screen","ThemeProvider","AmountInput","jsx","_jsx","hidden","includeHiddenElements","renderWithProvider","component","themes","colorScheme","locale","children","value","onChangeText","fn","testID","getByTestId","toBeTruthy","currencyText","getByText","thousandsSeparator","changeText","toHaveBeenCalledWith","allowDecimals","maxDecimalLength","maxIntegerLength"],"sourceRoot":"../../../../../src","sources":["lib/Components/AmountInput/AmountInput.test.tsx"],"mappings":"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","ignoreList":[]}
|
package/dist/module/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.js
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { getFontSize } from '@ledgerhq/lumen-utils-shared';
|
|
4
|
+
import { useEffect } from 'react';
|
|
5
|
+
import { Easing, useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
|
|
6
|
+
import { useTheme } from "../../../../styles/index.js";
|
|
7
|
+
const _worklet_2992714507236_init_data = {
|
|
8
|
+
code: "function useAmountInputAnimationsTs1(){const{translateX,animatedFontSize}=this.__closure;return{transform:[{translateX:translateX.value}],fontSize:animatedFontSize.value,letterSpacing:0};}",
|
|
9
|
+
location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts",
|
|
10
|
+
sourceMap: "{\"version\":3,\"names\":[\"useAmountInputAnimationsTs1\",\"translateX\",\"animatedFontSize\",\"__closure\",\"transform\",\"value\",\"fontSize\",\"letterSpacing\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts\"],\"mappings\":\"AAwCI,SAAAA,4BAAA,QAAAC,UAAA,CAAAC,gBAAA,OAAAC,SAAA,OAAO,CACLC,SAAS,CAAE,CAAC,CAAEH,UAAU,CAAEA,UAAU,CAACI,KAAM,CAAC,CAAC,CAC7CC,QAAQ,CAAEJ,gBAAgB,CAACG,KAAK,CAChCE,aAAa,CAAE,CACjB,CAAC\",\"ignoreList\":[]}"
|
|
11
|
+
};
|
|
12
|
+
const _worklet_14297416252336_init_data = {
|
|
13
|
+
code: "function useAmountInputAnimationsTs2(){const{animatedFontSize}=this.__closure;return{fontSize:animatedFontSize.value,letterSpacing:0};}",
|
|
14
|
+
location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts",
|
|
15
|
+
sourceMap: "{\"version\":3,\"names\":[\"useAmountInputAnimationsTs2\",\"animatedFontSize\",\"__closure\",\"fontSize\",\"value\",\"letterSpacing\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts\"],\"mappings\":\"AAiDI,SAAAA,4BAAA,QAAAC,gBAAA,OAAAC,SAAA,OAAO,CACLC,QAAQ,CAAEF,gBAAgB,CAACG,KAAK,CAChCC,aAAa,CAAE,CACjB,CAAC\",\"ignoreList\":[]}"
|
|
16
|
+
};
|
|
17
|
+
const _worklet_6630748204929_init_data = {
|
|
18
|
+
code: "function useAmountInputAnimationsTs3(){const{caretOpacity,size,caretFixedHeight,animatedFontSize}=this.__closure;return{opacity:caretOpacity.value,height:size==='sm'?caretFixedHeight:animatedFontSize.value};}",
|
|
19
|
+
location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts",
|
|
20
|
+
sourceMap: "{\"version\":3,\"names\":[\"useAmountInputAnimationsTs3\",\"caretOpacity\",\"size\",\"caretFixedHeight\",\"animatedFontSize\",\"__closure\",\"opacity\",\"value\",\"height\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts\"],\"mappings\":\"AAyDI,SAAAA,4BAAA,QAAAC,YAAA,CAAAC,IAAA,CAAAC,gBAAA,CAAAC,gBAAA,OAAAC,SAAA,OAAO,CACLC,OAAO,CAAEL,YAAY,CAACM,KAAK,CAC3BC,MAAM,CAAEN,IAAI,GAAK,IAAI,CAAGC,gBAAgB,CAAGC,gBAAgB,CAACG,KAC9D,CAAC\",\"ignoreList\":[]}"
|
|
21
|
+
};
|
|
22
|
+
export const useAmountInputAnimations = ({
|
|
23
|
+
formattedValue,
|
|
24
|
+
size,
|
|
25
|
+
isFocused,
|
|
26
|
+
disabled
|
|
27
|
+
}) => {
|
|
28
|
+
const {
|
|
29
|
+
theme
|
|
30
|
+
} = useTheme();
|
|
31
|
+
const caretFixedHeight = size === 'sm' ? theme.sizes.s28 : 0;
|
|
32
|
+
const translateX = useSharedValue(0);
|
|
33
|
+
const animatedFontSize = useSharedValue(getFontSize(formattedValue, size));
|
|
34
|
+
const caretOpacity = useSharedValue(0);
|
|
35
|
+
const animatedInputStyle = useAnimatedStyle(function useAmountInputAnimationsTs1Factory({
|
|
36
|
+
_worklet_2992714507236_init_data,
|
|
37
|
+
translateX,
|
|
38
|
+
animatedFontSize
|
|
39
|
+
}) {
|
|
40
|
+
const _e = [new global.Error(), -3, -27];
|
|
41
|
+
const useAmountInputAnimationsTs1 = () => ({
|
|
42
|
+
transform: [{
|
|
43
|
+
translateX: translateX.value
|
|
44
|
+
}],
|
|
45
|
+
fontSize: animatedFontSize.value,
|
|
46
|
+
letterSpacing: 0
|
|
47
|
+
});
|
|
48
|
+
useAmountInputAnimationsTs1.__closure = {
|
|
49
|
+
translateX,
|
|
50
|
+
animatedFontSize
|
|
51
|
+
};
|
|
52
|
+
useAmountInputAnimationsTs1.__workletHash = 2992714507236;
|
|
53
|
+
useAmountInputAnimationsTs1.__pluginVersion = "0.5.2";
|
|
54
|
+
useAmountInputAnimationsTs1.__initData = _worklet_2992714507236_init_data;
|
|
55
|
+
useAmountInputAnimationsTs1.__stackDetails = _e;
|
|
56
|
+
return useAmountInputAnimationsTs1;
|
|
57
|
+
}({
|
|
58
|
+
_worklet_2992714507236_init_data,
|
|
59
|
+
translateX,
|
|
60
|
+
animatedFontSize
|
|
61
|
+
}), [translateX, animatedFontSize]);
|
|
62
|
+
const animatedCurrencyStyle = useAnimatedStyle(function useAmountInputAnimationsTs2Factory({
|
|
63
|
+
_worklet_14297416252336_init_data,
|
|
64
|
+
animatedFontSize
|
|
65
|
+
}) {
|
|
66
|
+
const _e = [new global.Error(), -2, -27];
|
|
67
|
+
const useAmountInputAnimationsTs2 = () => ({
|
|
68
|
+
fontSize: animatedFontSize.value,
|
|
69
|
+
letterSpacing: 0
|
|
70
|
+
});
|
|
71
|
+
useAmountInputAnimationsTs2.__closure = {
|
|
72
|
+
animatedFontSize
|
|
73
|
+
};
|
|
74
|
+
useAmountInputAnimationsTs2.__workletHash = 14297416252336;
|
|
75
|
+
useAmountInputAnimationsTs2.__pluginVersion = "0.5.2";
|
|
76
|
+
useAmountInputAnimationsTs2.__initData = _worklet_14297416252336_init_data;
|
|
77
|
+
useAmountInputAnimationsTs2.__stackDetails = _e;
|
|
78
|
+
return useAmountInputAnimationsTs2;
|
|
79
|
+
}({
|
|
80
|
+
_worklet_14297416252336_init_data,
|
|
81
|
+
animatedFontSize
|
|
82
|
+
}), [animatedFontSize]);
|
|
83
|
+
const animatedCaretStyle = useAnimatedStyle(function useAmountInputAnimationsTs3Factory({
|
|
84
|
+
_worklet_6630748204929_init_data,
|
|
85
|
+
caretOpacity,
|
|
86
|
+
size,
|
|
87
|
+
caretFixedHeight,
|
|
88
|
+
animatedFontSize
|
|
89
|
+
}) {
|
|
90
|
+
const _e = [new global.Error(), -5, -27];
|
|
91
|
+
const useAmountInputAnimationsTs3 = () => ({
|
|
92
|
+
opacity: caretOpacity.value,
|
|
93
|
+
height: size === 'sm' ? caretFixedHeight : animatedFontSize.value
|
|
94
|
+
});
|
|
95
|
+
useAmountInputAnimationsTs3.__closure = {
|
|
96
|
+
caretOpacity,
|
|
97
|
+
size,
|
|
98
|
+
caretFixedHeight,
|
|
99
|
+
animatedFontSize
|
|
100
|
+
};
|
|
101
|
+
useAmountInputAnimationsTs3.__workletHash = 6630748204929;
|
|
102
|
+
useAmountInputAnimationsTs3.__pluginVersion = "0.5.2";
|
|
103
|
+
useAmountInputAnimationsTs3.__initData = _worklet_6630748204929_init_data;
|
|
104
|
+
useAmountInputAnimationsTs3.__stackDetails = _e;
|
|
105
|
+
return useAmountInputAnimationsTs3;
|
|
106
|
+
}({
|
|
107
|
+
_worklet_6630748204929_init_data,
|
|
108
|
+
caretOpacity,
|
|
109
|
+
size,
|
|
110
|
+
caretFixedHeight,
|
|
111
|
+
animatedFontSize
|
|
112
|
+
}), [caretOpacity, animatedFontSize, size, caretFixedHeight]);
|
|
113
|
+
useEffect(() => {
|
|
114
|
+
const newSize = getFontSize(formattedValue, size);
|
|
115
|
+
translateX.value = withSequence(withTiming(4, {
|
|
116
|
+
duration: 0
|
|
117
|
+
}), withTiming(0, {
|
|
118
|
+
duration: 250,
|
|
119
|
+
easing: Easing.bezier(0.4, 0, 0.2, 1)
|
|
120
|
+
}));
|
|
121
|
+
animatedFontSize.value = withTiming(newSize, {
|
|
122
|
+
duration: 250,
|
|
123
|
+
easing: Easing.bezier(0.4, 0, 0.2, 1)
|
|
124
|
+
});
|
|
125
|
+
}, [formattedValue, size, animatedFontSize, translateX]);
|
|
126
|
+
useEffect(() => {
|
|
127
|
+
if (isFocused && !disabled) {
|
|
128
|
+
caretOpacity.value = withRepeat(withSequence(withTiming(1, {
|
|
129
|
+
duration: 150,
|
|
130
|
+
easing: Easing.ease
|
|
131
|
+
}), withTiming(1, {
|
|
132
|
+
duration: 500
|
|
133
|
+
}), withTiming(0, {
|
|
134
|
+
duration: 150,
|
|
135
|
+
easing: Easing.ease
|
|
136
|
+
}), withTiming(0, {
|
|
137
|
+
duration: 500
|
|
138
|
+
})), -1, false);
|
|
139
|
+
} else {
|
|
140
|
+
caretOpacity.value = 0;
|
|
141
|
+
}
|
|
142
|
+
}, [isFocused, disabled, caretOpacity]);
|
|
143
|
+
return {
|
|
144
|
+
animatedInputStyle,
|
|
145
|
+
animatedCurrencyStyle,
|
|
146
|
+
animatedCaretStyle
|
|
147
|
+
};
|
|
148
|
+
};
|
|
149
|
+
//# sourceMappingURL=useAmountInputAnimations.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["getFontSize","useEffect","Easing","useAnimatedStyle","useSharedValue","withRepeat","withSequence","withTiming","useTheme","_worklet_2992714507236_init_data","code","location","sourceMap","_worklet_14297416252336_init_data","_worklet_6630748204929_init_data","useAmountInputAnimations","formattedValue","size","isFocused","disabled","theme","caretFixedHeight","sizes","s28","translateX","animatedFontSize","caretOpacity","animatedInputStyle","useAmountInputAnimationsTs1Factory","_e","global","Error","useAmountInputAnimationsTs1","transform","value","fontSize","letterSpacing","__closure","__workletHash","__pluginVersion","__initData","__stackDetails","animatedCurrencyStyle","useAmountInputAnimationsTs2Factory","useAmountInputAnimationsTs2","animatedCaretStyle","useAmountInputAnimationsTs3Factory","useAmountInputAnimationsTs3","opacity","height","newSize","duration","easing","bezier","ease"],"sourceRoot":"../../../../../../src","sources":["lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts"],"mappings":"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","ignoreList":[]}
|
package/dist/module/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { textFormatter } from '@ledgerhq/lumen-utils-shared';
|
|
4
|
+
import { useCallback, useMemo } from 'react';
|
|
5
|
+
export const useAmountInputFormatting = ({
|
|
6
|
+
value,
|
|
7
|
+
onChangeText,
|
|
8
|
+
formatOptions
|
|
9
|
+
}) => {
|
|
10
|
+
const format = useCallback(v => textFormatter(String(v), formatOptions),
|
|
11
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12
|
+
[formatOptions.allowDecimals, formatOptions.thousandsSeparator, formatOptions.maxIntegerLength, formatOptions.maxDecimalLength]);
|
|
13
|
+
const formattedValue = useMemo(() => format(value), [value, format]);
|
|
14
|
+
const handleChangeText = useCallback(text => {
|
|
15
|
+
onChangeText(format(text));
|
|
16
|
+
}, [format, onChangeText]);
|
|
17
|
+
return {
|
|
18
|
+
formattedValue,
|
|
19
|
+
handleChangeText
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=useAmountInputFormatting.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["textFormatter","useCallback","useMemo","useAmountInputFormatting","value","onChangeText","formatOptions","format","v","String","allowDecimals","thousandsSeparator","maxIntegerLength","maxDecimalLength","formattedValue","handleChangeText","text"],"sourceRoot":"../../../../../../src","sources":["lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAoB5C,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EACvCC,KAAK;EACLC,YAAY;EACZC;AAC4B,CAAC,KAAqC;EAClE,MAAMC,MAAM,GAAGN,WAAW,CACvBO,CAAkB,IAAaR,aAAa,CAACS,MAAM,CAACD,CAAC,CAAC,EAAEF,aAAa,CAAC;EACvE;EACA,CACEA,aAAa,CAACI,aAAa,EAC3BJ,aAAa,CAACK,kBAAkB,EAChCL,aAAa,CAACM,gBAAgB,EAC9BN,aAAa,CAACO,gBAAgB,CAElC,CAAC;EAED,MAAMC,cAAc,GAAGZ,OAAO,CAAC,MAAMK,MAAM,CAACH,KAAK,CAAC,EAAE,CAACA,KAAK,EAAEG,MAAM,CAAC,CAAC;EAEpE,MAAMQ,gBAAgB,GAAGd,WAAW,CACjCe,IAAY,IAAW;IACtBX,YAAY,CAACE,MAAM,CAACS,IAAI,CAAC,CAAC;EAC5B,CAAC,EACD,CAACT,MAAM,EAAEF,YAAY,CACvB,CAAC;EAED,OAAO;IAAES,cAAc;IAAEC;EAAiB,CAAC;AAC7C,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { describe, it, expect, jest } from '@jest/globals';
|
|
4
|
+
import { renderHook, act } from '@testing-library/react-native';
|
|
5
|
+
import { useAmountInputFormatting } from "./useAmountInputFormatting.js";
|
|
6
|
+
const defaultFormatOptions = {
|
|
7
|
+
allowDecimals: true,
|
|
8
|
+
thousandsSeparator: true,
|
|
9
|
+
maxIntegerLength: 9,
|
|
10
|
+
maxDecimalLength: 9
|
|
11
|
+
};
|
|
12
|
+
describe('useAmountInputFormatting', () => {
|
|
13
|
+
it('formats the value prop', () => {
|
|
14
|
+
const {
|
|
15
|
+
result
|
|
16
|
+
} = renderHook(() => useAmountInputFormatting({
|
|
17
|
+
value: '1000',
|
|
18
|
+
onChangeText: jest.fn(),
|
|
19
|
+
formatOptions: defaultFormatOptions
|
|
20
|
+
}));
|
|
21
|
+
expect(result.current.formattedValue).toBe('1 000');
|
|
22
|
+
});
|
|
23
|
+
it('updates formattedValue when the value prop changes', () => {
|
|
24
|
+
const {
|
|
25
|
+
result,
|
|
26
|
+
rerender
|
|
27
|
+
} = renderHook(({
|
|
28
|
+
value
|
|
29
|
+
}) => useAmountInputFormatting({
|
|
30
|
+
value,
|
|
31
|
+
onChangeText: jest.fn(),
|
|
32
|
+
formatOptions: defaultFormatOptions
|
|
33
|
+
}), {
|
|
34
|
+
initialProps: {
|
|
35
|
+
value: '100'
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
expect(result.current.formattedValue).toBe('100');
|
|
39
|
+
rerender({
|
|
40
|
+
value: '2000'
|
|
41
|
+
});
|
|
42
|
+
expect(result.current.formattedValue).toBe('2 000');
|
|
43
|
+
});
|
|
44
|
+
it('formats user input and calls onChangeText with the cleaned value', () => {
|
|
45
|
+
const onChangeText = jest.fn();
|
|
46
|
+
const {
|
|
47
|
+
result
|
|
48
|
+
} = renderHook(() => useAmountInputFormatting({
|
|
49
|
+
value: '',
|
|
50
|
+
onChangeText,
|
|
51
|
+
formatOptions: defaultFormatOptions
|
|
52
|
+
}));
|
|
53
|
+
act(() => {
|
|
54
|
+
result.current.handleChangeText('1000');
|
|
55
|
+
});
|
|
56
|
+
expect(onChangeText).toHaveBeenCalledWith('1 000');
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
//# sourceMappingURL=useAmountInputFormatting.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["describe","it","expect","jest","renderHook","act","useAmountInputFormatting","defaultFormatOptions","allowDecimals","thousandsSeparator","maxIntegerLength","maxDecimalLength","result","value","onChangeText","fn","formatOptions","current","formattedValue","toBe","rerender","initialProps","handleChangeText","toHaveBeenCalledWith"],"sourceRoot":"../../../../../../src","sources":["lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.ts"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,EAAEC,IAAI,QAAQ,eAAe;AAC1D,SAASC,UAAU,EAAEC,GAAG,QAAQ,+BAA+B;AAC/D,SAASC,wBAAwB,QAAQ,+BAA4B;AAErE,MAAMC,oBAAoB,GAAG;EAC3BC,aAAa,EAAE,IAAI;EACnBC,kBAAkB,EAAE,IAAI;EACxBC,gBAAgB,EAAE,CAAC;EACnBC,gBAAgB,EAAE;AACpB,CAAC;AAEDX,QAAQ,CAAC,0BAA0B,EAAE,MAAM;EACzCC,EAAE,CAAC,wBAAwB,EAAE,MAAM;IACjC,MAAM;MAAEW;IAAO,CAAC,GAAGR,UAAU,CAAC,MAC5BE,wBAAwB,CAAC;MACvBO,KAAK,EAAE,MAAM;MACbC,YAAY,EAAEX,IAAI,CAACY,EAAE,CAAC,CAAC;MACvBC,aAAa,EAAET;IACjB,CAAC,CACH,CAAC;IAEDL,MAAM,CAACU,MAAM,CAACK,OAAO,CAACC,cAAc,CAAC,CAACC,IAAI,CAAC,OAAO,CAAC;EACrD,CAAC,CAAC;EAEFlB,EAAE,CAAC,oDAAoD,EAAE,MAAM;IAC7D,MAAM;MAAEW,MAAM;MAAEQ;IAAS,CAAC,GAAGhB,UAAU,CAIrC,CAAC;MAAES;IAAM,CAAC,KACRP,wBAAwB,CAAC;MACvBO,KAAK;MACLC,YAAY,EAAEX,IAAI,CAACY,EAAE,CAAC,CAAC;MACvBC,aAAa,EAAET;IACjB,CAAC,CAAC,EACJ;MAAEc,YAAY,EAAE;QAAER,KAAK,EAAE;MAAM;IAAE,CACnC,CAAC;IAEDX,MAAM,CAACU,MAAM,CAACK,OAAO,CAACC,cAAc,CAAC,CAACC,IAAI,CAAC,KAAK,CAAC;IAEjDC,QAAQ,CAAC;MAAEP,KAAK,EAAE;IAAO,CAAC,CAAC;IAE3BX,MAAM,CAACU,MAAM,CAACK,OAAO,CAACC,cAAc,CAAC,CAACC,IAAI,CAAC,OAAO,CAAC;EACrD,CAAC,CAAC;EAEFlB,EAAE,CAAC,kEAAkE,EAAE,MAAM;IAC3E,MAAMa,YAAY,GAAGX,IAAI,CAACY,EAAE,CAAC,CAAC;IAC9B,MAAM;MAAEH;IAAO,CAAC,GAAGR,UAAU,CAAC,MAC5BE,wBAAwB,CAAC;MACvBO,KAAK,EAAE,EAAE;MACTC,YAAY;MACZE,aAAa,EAAET;IACjB,CAAC,CACH,CAAC;IAEDF,GAAG,CAAC,MAAM;MACRO,MAAM,CAACK,OAAO,CAACK,gBAAgB,CAAC,MAAM,CAAC;IACzC,CAAC,CAAC;IAEFpB,MAAM,CAACY,YAAY,CAAC,CAACS,oBAAoB,CAAC,OAAO,CAAC;EACpD,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
|
|
@@ -6,6 +6,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
6
6
|
figma.connect(Avatar, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11097-8', {
|
|
7
7
|
imports: ["import { Avatar } from '@ledgerhq/lumen-ui-rnative'"],
|
|
8
8
|
props: {
|
|
9
|
+
appearance: figma.enum('appearance', {
|
|
10
|
+
gray: 'gray',
|
|
11
|
+
transparent: 'transparent'
|
|
12
|
+
}),
|
|
9
13
|
size: figma.enum('size', {
|
|
10
14
|
sm: 'sm',
|
|
11
15
|
md: 'md',
|
|
@@ -19,6 +23,7 @@ figma.connect(Avatar, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-
|
|
|
19
23
|
},
|
|
20
24
|
example: props => /*#__PURE__*/_jsx(Avatar, {
|
|
21
25
|
src: "https://example-image.com",
|
|
26
|
+
appearance: props.appearance,
|
|
22
27
|
size: props.size,
|
|
23
28
|
alt: "John Doe's Avatar",
|
|
24
29
|
showNotification: props.showNotification
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["figma","Avatar","jsx","_jsx","connect","imports","props","
|
|
1
|
+
{"version":3,"names":["figma","Avatar","jsx","_jsx","connect","imports","props","appearance","enum","gray","transparent","size","sm","md","lg","xl","showNotification","boolean","true","false","example","src","alt"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,MAAM,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElCH,KAAK,CAACI,OAAO,CACXH,MAAM,EACN,qEAAqE,EACrE;EACEI,OAAO,EAAE,CAAC,qDAAqD,CAAC;EAChEC,KAAK,EAAE;IACLC,UAAU,EAAEP,KAAK,CAACQ,IAAI,CAAC,YAAY,EAAE;MACnCC,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE;IACf,CAAC,CAAC;IACFC,IAAI,EAAEX,KAAK,CAACQ,IAAI,CAAC,MAAM,EAAE;MACvBI,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE;IACN,CAAC,CAAC;IACFC,gBAAgB,EAAEhB,KAAK,CAACiB,OAAO,CAAC,mBAAmB,EAAE;MACnDC,IAAI,EAAE,IAAI;MACVC,KAAK,EAAE;IACT,CAAC;EACH,CAAC;EACDC,OAAO,EAAGd,KAAK,iBACbH,IAAA,CAACF,MAAM;IACLoB,GAAG,EAAC,2BAA2B;IAC/Bd,UAAU,EAAED,KAAK,CAACC,UAAW;IAC7BI,IAAI,EAAEL,KAAK,CAACK,IAAK;IACjBW,GAAG,EAAC,mBAAmB;IACvBN,gBAAgB,EAAEV,KAAK,CAACU;EAAiB,CAC1C;AAEL,CACF,CAAC","ignoreList":[]}
|
|
@@ -19,9 +19,14 @@ const dotSizeMap = {
|
|
|
19
19
|
md: 'xl'
|
|
20
20
|
};
|
|
21
21
|
const useStyles = ({
|
|
22
|
+
appearance,
|
|
22
23
|
size
|
|
23
24
|
}) => {
|
|
24
25
|
return useStyleSheet(t => {
|
|
26
|
+
const backgroundColors = {
|
|
27
|
+
gray: t.colors.bg.muted,
|
|
28
|
+
transparent: t.colors.bg.mutedTransparent
|
|
29
|
+
};
|
|
25
30
|
const sizeMap = {
|
|
26
31
|
sm: {
|
|
27
32
|
size: t.sizes.s40,
|
|
@@ -46,7 +51,7 @@ const useStyles = ({
|
|
|
46
51
|
width: sizeMap[size].size,
|
|
47
52
|
height: sizeMap[size].size,
|
|
48
53
|
borderRadius: 9999,
|
|
49
|
-
backgroundColor:
|
|
54
|
+
backgroundColor: backgroundColors[appearance],
|
|
50
55
|
alignItems: 'center',
|
|
51
56
|
justifyContent: 'center',
|
|
52
57
|
padding: sizeMap[size].padding
|
|
@@ -58,7 +63,7 @@ const useStyles = ({
|
|
|
58
63
|
borderRadius: 9999
|
|
59
64
|
}
|
|
60
65
|
};
|
|
61
|
-
}, [size]);
|
|
66
|
+
}, [appearance, size]);
|
|
62
67
|
};
|
|
63
68
|
|
|
64
69
|
/**
|
|
@@ -82,6 +87,7 @@ export const Avatar = ({
|
|
|
82
87
|
style,
|
|
83
88
|
src,
|
|
84
89
|
alt = 'avatar',
|
|
90
|
+
appearance = 'transparent',
|
|
85
91
|
size = 'md',
|
|
86
92
|
showNotification: showNotificationProp = false,
|
|
87
93
|
testID,
|
|
@@ -94,6 +100,7 @@ export const Avatar = ({
|
|
|
94
100
|
const [error, setError] = useState(false);
|
|
95
101
|
const shouldFallback = !src || error;
|
|
96
102
|
const styles = useStyles({
|
|
103
|
+
appearance,
|
|
97
104
|
size
|
|
98
105
|
});
|
|
99
106
|
const resolvedAlt = alt || t('components.avatar.defaultAlt');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useEffect","StyleSheet","Image","useCommonTranslation","useStyleSheet","User","DotIndicator","Box","jsx","_jsx","fallbackSizes","sm","md","lg","xl","dotSizeMap","useStyles","size","t","sizeMap","sizes","s40","padding","spacings","s4","s48","s56","s72","root","position","width","height","borderRadius","backgroundColor","
|
|
1
|
+
{"version":3,"names":["useState","useEffect","StyleSheet","Image","useCommonTranslation","useStyleSheet","User","DotIndicator","Box","jsx","_jsx","fallbackSizes","sm","md","lg","xl","dotSizeMap","useStyles","appearance","size","t","backgroundColors","gray","colors","bg","muted","transparent","mutedTransparent","sizeMap","sizes","s40","padding","spacings","s4","s48","s56","s72","root","position","width","height","borderRadius","backgroundColor","alignItems","justifyContent","image","overflow","Avatar","lx","style","src","alt","showNotification","showNotificationProp","testID","ref","props","error","setError","shouldFallback","styles","resolvedAlt","accessibilityLabel","avatarContent","flatten","accessibilityRole","undefined","children","accessible","source","uri","onError"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -40,6 +40,15 @@ Avatars come in four different sizes:
|
|
|
40
40
|
|
|
41
41
|
<Canvas of={AvatarStories.SizeShowcase} />
|
|
42
42
|
|
|
43
|
+
### Appearance
|
|
44
|
+
|
|
45
|
+
The `appearance` prop controls the background color of the avatar container.
|
|
46
|
+
|
|
47
|
+
- **`gray`**: Uses a muted gray background
|
|
48
|
+
- **`transparent`**: Uses a semi-transparent muted background — default
|
|
49
|
+
|
|
50
|
+
<Canvas of={AvatarStories.AppearanceShowcase} />
|
|
51
|
+
|
|
43
52
|
### States
|
|
44
53
|
|
|
45
54
|
The Avatar component handles two primary states automatically:
|
|
@@ -111,6 +111,53 @@ export const SizeShowcase = {
|
|
|
111
111
|
})]
|
|
112
112
|
})
|
|
113
113
|
};
|
|
114
|
+
const AppearanceShowcaseRender = () => {
|
|
115
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
116
|
+
lx: {
|
|
117
|
+
gap: 's8'
|
|
118
|
+
},
|
|
119
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
|
120
|
+
lx: {
|
|
121
|
+
flexDirection: 'row',
|
|
122
|
+
gap: 's16',
|
|
123
|
+
padding: 's8'
|
|
124
|
+
},
|
|
125
|
+
children: [/*#__PURE__*/_jsx(Avatar, {
|
|
126
|
+
alt: "gray fallback",
|
|
127
|
+
size: "md",
|
|
128
|
+
appearance: "gray",
|
|
129
|
+
showNotification: false
|
|
130
|
+
}), /*#__PURE__*/_jsx(Avatar, {
|
|
131
|
+
alt: "transparent fallback",
|
|
132
|
+
size: "md",
|
|
133
|
+
appearance: "transparent",
|
|
134
|
+
showNotification: false
|
|
135
|
+
})]
|
|
136
|
+
}), /*#__PURE__*/_jsxs(Box, {
|
|
137
|
+
lx: {
|
|
138
|
+
flexDirection: 'row',
|
|
139
|
+
gap: 's16',
|
|
140
|
+
padding: 's8'
|
|
141
|
+
},
|
|
142
|
+
children: [/*#__PURE__*/_jsx(Avatar, {
|
|
143
|
+
src: exampleSrc,
|
|
144
|
+
alt: "gray with image",
|
|
145
|
+
size: "md",
|
|
146
|
+
appearance: "gray",
|
|
147
|
+
showNotification: false
|
|
148
|
+
}), /*#__PURE__*/_jsx(Avatar, {
|
|
149
|
+
src: exampleSrc,
|
|
150
|
+
alt: "transparent with image",
|
|
151
|
+
size: "md",
|
|
152
|
+
appearance: "transparent",
|
|
153
|
+
showNotification: false
|
|
154
|
+
})]
|
|
155
|
+
})]
|
|
156
|
+
});
|
|
157
|
+
};
|
|
158
|
+
export const AppearanceShowcase = {
|
|
159
|
+
render: () => /*#__PURE__*/_jsx(AppearanceShowcaseRender, {})
|
|
160
|
+
};
|
|
114
161
|
export const FallbackShowcase = {
|
|
115
162
|
args: {
|
|
116
163
|
src: 'https://brokenLink.random',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["View","Text","Pressable","Linking","Box","Avatar","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","exampleSrc","Base","args","src","alt","size","showNotification","render","code","SizeShowcase","lx","alignItems","flexDirection","gap","children","style","justifyContent","marginTop","FallbackShowcase","NotificationShowcase","onPressRedirect","openURL","InteractiveShowcase","onPress","pressed","borderRadius","opacity","backgroundColor"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.stories.tsx"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["View","Text","Pressable","Linking","Box","Avatar","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","exampleSrc","Base","args","src","alt","size","showNotification","render","code","SizeShowcase","lx","alignItems","flexDirection","gap","children","style","justifyContent","marginTop","AppearanceShowcaseRender","padding","appearance","AppearanceShowcase","FallbackShowcase","NotificationShowcase","onPressRedirect","openURL","InteractiveShowcase","onPress","pressed","borderRadius","opacity","backgroundColor"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.stories.tsx"],"mappings":"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","ignoreList":[]}
|