@bacon-pos/ui 0.3.0 → 0.5.0
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/lib/commonjs/components/CodeField/CodeField.js +95 -65
- package/lib/commonjs/components/CodeField/CodeField.js.map +1 -1
- package/lib/commonjs/components/CodeField/CodeField.stories.js +24 -1
- package/lib/commonjs/components/CodeField/CodeField.stories.js.map +1 -1
- package/lib/commonjs/components/CodeField/CodeField.test.js +28 -0
- package/lib/commonjs/components/CodeField/CodeField.test.js.map +1 -1
- package/lib/commonjs/components/Dialog/Dialog.js +23 -4
- package/lib/commonjs/components/Dialog/Dialog.js.map +1 -1
- package/lib/commonjs/components/Dialog/Dialog.stories.js +49 -1
- package/lib/commonjs/components/Dialog/Dialog.stories.js.map +1 -1
- package/lib/commonjs/components/Keypad/Keypad.js +162 -0
- package/lib/commonjs/components/Keypad/Keypad.js.map +1 -0
- package/lib/commonjs/components/Keypad/Keypad.stories.js +210 -0
- package/lib/commonjs/components/Keypad/Keypad.stories.js.map +1 -0
- package/lib/commonjs/components/Keypad/Keypad.test.js +119 -0
- package/lib/commonjs/components/Keypad/Keypad.test.js.map +1 -0
- package/lib/commonjs/components/Keypad/index.js +13 -0
- package/lib/commonjs/components/Keypad/index.js.map +1 -0
- package/lib/commonjs/components/Toast/Toast.js +184 -0
- package/lib/commonjs/components/Toast/Toast.js.map +1 -0
- package/lib/commonjs/components/Toast/Toast.stories.js +109 -0
- package/lib/commonjs/components/Toast/Toast.stories.js.map +1 -0
- package/lib/commonjs/components/Toast/Toast.test.js +70 -0
- package/lib/commonjs/components/Toast/Toast.test.js.map +1 -0
- package/lib/commonjs/components/Toast/ToastProvider.js +95 -0
- package/lib/commonjs/components/Toast/ToastProvider.js.map +1 -0
- package/lib/commonjs/components/Toast/index.js +26 -0
- package/lib/commonjs/components/Toast/index.js.map +1 -0
- package/lib/commonjs/components/index.js +30 -8
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/module/components/CodeField/CodeField.js +95 -65
- package/lib/module/components/CodeField/CodeField.js.map +1 -1
- package/lib/module/components/CodeField/CodeField.stories.js +23 -0
- package/lib/module/components/CodeField/CodeField.stories.js.map +1 -1
- package/lib/module/components/CodeField/CodeField.test.js +28 -0
- package/lib/module/components/CodeField/CodeField.test.js.map +1 -1
- package/lib/module/components/Dialog/Dialog.js +23 -4
- package/lib/module/components/Dialog/Dialog.js.map +1 -1
- package/lib/module/components/Dialog/Dialog.stories.js +48 -0
- package/lib/module/components/Dialog/Dialog.stories.js.map +1 -1
- package/lib/module/components/Keypad/Keypad.js +158 -0
- package/lib/module/components/Keypad/Keypad.js.map +1 -0
- package/lib/module/components/Keypad/Keypad.stories.js +206 -0
- package/lib/module/components/Keypad/Keypad.stories.js.map +1 -0
- package/lib/module/components/Keypad/Keypad.test.js +119 -0
- package/lib/module/components/Keypad/Keypad.test.js.map +1 -0
- package/lib/module/components/Keypad/index.js +4 -0
- package/lib/module/components/Keypad/index.js.map +1 -0
- package/lib/module/components/Toast/Toast.js +180 -0
- package/lib/module/components/Toast/Toast.js.map +1 -0
- package/lib/module/components/Toast/Toast.stories.js +105 -0
- package/lib/module/components/Toast/Toast.stories.js.map +1 -0
- package/lib/module/components/Toast/Toast.test.js +69 -0
- package/lib/module/components/Toast/Toast.test.js.map +1 -0
- package/lib/module/components/Toast/ToastProvider.js +90 -0
- package/lib/module/components/Toast/ToastProvider.js.map +1 -0
- package/lib/module/components/Toast/index.js +5 -0
- package/lib/module/components/Toast/index.js.map +1 -0
- package/lib/module/components/index.js +2 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/typescript/commonjs/components/CodeField/CodeField.d.ts +5 -1
- package/lib/typescript/commonjs/components/CodeField/CodeField.d.ts.map +1 -1
- package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts +5 -1
- package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts.map +1 -1
- package/lib/typescript/commonjs/components/Keypad/Keypad.d.ts +54 -0
- package/lib/typescript/commonjs/components/Keypad/Keypad.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Keypad/index.d.ts +3 -0
- package/lib/typescript/commonjs/components/Keypad/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Toast/Toast.d.ts +40 -0
- package/lib/typescript/commonjs/components/Toast/Toast.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Toast/ToastProvider.d.ts +34 -0
- package/lib/typescript/commonjs/components/Toast/ToastProvider.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Toast/index.d.ts +3 -0
- package/lib/typescript/commonjs/components/Toast/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/index.d.ts +2 -0
- package/lib/typescript/commonjs/components/index.d.ts.map +1 -1
- package/lib/typescript/module/components/CodeField/CodeField.d.ts +5 -1
- package/lib/typescript/module/components/CodeField/CodeField.d.ts.map +1 -1
- package/lib/typescript/module/components/Dialog/Dialog.d.ts +5 -1
- package/lib/typescript/module/components/Dialog/Dialog.d.ts.map +1 -1
- package/lib/typescript/module/components/Keypad/Keypad.d.ts +54 -0
- package/lib/typescript/module/components/Keypad/Keypad.d.ts.map +1 -0
- package/lib/typescript/module/components/Keypad/index.d.ts +3 -0
- package/lib/typescript/module/components/Keypad/index.d.ts.map +1 -0
- package/lib/typescript/module/components/Toast/Toast.d.ts +40 -0
- package/lib/typescript/module/components/Toast/Toast.d.ts.map +1 -0
- package/lib/typescript/module/components/Toast/ToastProvider.d.ts +34 -0
- package/lib/typescript/module/components/Toast/ToastProvider.d.ts.map +1 -0
- package/lib/typescript/module/components/Toast/index.d.ts +3 -0
- package/lib/typescript/module/components/Toast/index.d.ts.map +1 -0
- package/lib/typescript/module/components/index.d.ts +2 -0
- package/lib/typescript/module/components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/CodeField/CodeField.tsx +104 -64
- package/src/components/Dialog/Dialog.tsx +40 -10
- package/src/components/Keypad/Keypad.tsx +191 -0
- package/src/components/Keypad/index.ts +2 -0
- package/src/components/Toast/Toast.tsx +173 -0
- package/src/components/Toast/ToastProvider.tsx +126 -0
- package/src/components/Toast/index.ts +7 -0
- package/src/components/index.ts +2 -0
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Pressable, View } from 'react-native';
|
|
4
|
+
import { useTheme } from "../../theme/index.js";
|
|
5
|
+
import { Icon } from "../Icon/Icon.js";
|
|
6
|
+
import { Text } from "../Text/Text.js";
|
|
7
|
+
|
|
8
|
+
/** The optional key to the left of 0. Hidden unless provided. */
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
const ROWS = [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9']];
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Numeric keypad — a 3-column pad decoupled from what it drives (bind it to a
|
|
14
|
+
* PIN display, an amount, etc. via `value`/`onChangeText`, and put that display
|
|
15
|
+
* in `header`). Backspace is fixed to the right of 0; the key left of 0 is hidden
|
|
16
|
+
* unless you pass `extraKey` (custom symbol/icon, action and colors). Width,
|
|
17
|
+
* key height, gap and digit size are all configurable.
|
|
18
|
+
*/
|
|
19
|
+
export function Keypad({
|
|
20
|
+
value = '',
|
|
21
|
+
onChangeText,
|
|
22
|
+
onKeyPress,
|
|
23
|
+
maxLength,
|
|
24
|
+
header,
|
|
25
|
+
extraKey,
|
|
26
|
+
keyHeight = 83,
|
|
27
|
+
gap = 8,
|
|
28
|
+
width,
|
|
29
|
+
digitSize = 24,
|
|
30
|
+
headerGap = 24,
|
|
31
|
+
disabled = false,
|
|
32
|
+
style
|
|
33
|
+
}) {
|
|
34
|
+
const theme = useTheme();
|
|
35
|
+
const keyStyle = bg => ({
|
|
36
|
+
flex: 1,
|
|
37
|
+
height: keyHeight,
|
|
38
|
+
borderRadius: theme.radii.xl,
|
|
39
|
+
borderWidth: 1,
|
|
40
|
+
borderColor: theme.colors.border.strong,
|
|
41
|
+
backgroundColor: bg ?? theme.colors.action.secondary,
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
justifyContent: 'center'
|
|
44
|
+
});
|
|
45
|
+
const pressDigit = digit => {
|
|
46
|
+
onKeyPress?.(digit);
|
|
47
|
+
if (maxLength != null && value.length >= maxLength) return;
|
|
48
|
+
onChangeText?.(value + digit);
|
|
49
|
+
};
|
|
50
|
+
const pressBackspace = () => {
|
|
51
|
+
onKeyPress?.('backspace');
|
|
52
|
+
onChangeText?.(value.slice(0, -1));
|
|
53
|
+
};
|
|
54
|
+
const pressExtra = () => {
|
|
55
|
+
onKeyPress?.('extra');
|
|
56
|
+
if (extraKey?.onPress) {
|
|
57
|
+
extraKey.onPress();
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
if (extraKey?.value != null) {
|
|
61
|
+
if (maxLength != null && value.length >= maxLength) return;
|
|
62
|
+
onChangeText?.(value + extraKey.value);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
const DigitKey = ({
|
|
66
|
+
digit
|
|
67
|
+
}) => /*#__PURE__*/_jsx(Pressable, {
|
|
68
|
+
onPress: () => pressDigit(digit),
|
|
69
|
+
disabled: disabled,
|
|
70
|
+
accessibilityRole: "button",
|
|
71
|
+
accessibilityLabel: digit,
|
|
72
|
+
style: ({
|
|
73
|
+
pressed
|
|
74
|
+
}) => [keyStyle(), {
|
|
75
|
+
opacity: disabled ? 0.5 : pressed ? 0.85 : 1
|
|
76
|
+
}],
|
|
77
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
78
|
+
variant: "h2",
|
|
79
|
+
color: theme.colors.action.secondaryForeground,
|
|
80
|
+
style: {
|
|
81
|
+
fontSize: digitSize,
|
|
82
|
+
lineHeight: Math.round(digitSize * 1.35)
|
|
83
|
+
},
|
|
84
|
+
children: digit
|
|
85
|
+
})
|
|
86
|
+
});
|
|
87
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
88
|
+
style: [{
|
|
89
|
+
width: width ?? '100%',
|
|
90
|
+
gap
|
|
91
|
+
}, style],
|
|
92
|
+
children: [header != null ? /*#__PURE__*/_jsx(View, {
|
|
93
|
+
style: {
|
|
94
|
+
marginBottom: headerGap - gap
|
|
95
|
+
},
|
|
96
|
+
children: header
|
|
97
|
+
}) : null, ROWS.map(row => /*#__PURE__*/_jsx(View, {
|
|
98
|
+
style: {
|
|
99
|
+
flexDirection: 'row',
|
|
100
|
+
gap
|
|
101
|
+
},
|
|
102
|
+
children: row.map(digit => /*#__PURE__*/_jsx(DigitKey, {
|
|
103
|
+
digit: digit
|
|
104
|
+
}, digit))
|
|
105
|
+
}, row[0])), /*#__PURE__*/_jsxs(View, {
|
|
106
|
+
style: {
|
|
107
|
+
flexDirection: 'row',
|
|
108
|
+
gap
|
|
109
|
+
},
|
|
110
|
+
children: [extraKey ? /*#__PURE__*/_jsx(Pressable, {
|
|
111
|
+
onPress: pressExtra,
|
|
112
|
+
disabled: disabled,
|
|
113
|
+
accessibilityRole: "button",
|
|
114
|
+
accessibilityLabel: extraKey.label ?? 'action',
|
|
115
|
+
style: ({
|
|
116
|
+
pressed
|
|
117
|
+
}) => [keyStyle(extraKey.backgroundColor), {
|
|
118
|
+
opacity: disabled ? 0.5 : pressed ? 0.85 : 1
|
|
119
|
+
}],
|
|
120
|
+
children: extraKey.icon ? /*#__PURE__*/_jsx(Icon, {
|
|
121
|
+
name: extraKey.icon,
|
|
122
|
+
size: 24,
|
|
123
|
+
color: extraKey.color ?? theme.colors.action.secondaryForeground
|
|
124
|
+
}) : /*#__PURE__*/_jsx(Text, {
|
|
125
|
+
variant: "h2",
|
|
126
|
+
color: extraKey.color ?? theme.colors.action.secondaryForeground,
|
|
127
|
+
style: {
|
|
128
|
+
fontSize: digitSize,
|
|
129
|
+
lineHeight: Math.round(digitSize * 1.35)
|
|
130
|
+
},
|
|
131
|
+
children: extraKey.label ?? ''
|
|
132
|
+
})
|
|
133
|
+
}) : /*#__PURE__*/_jsx(View, {
|
|
134
|
+
style: {
|
|
135
|
+
flex: 1
|
|
136
|
+
}
|
|
137
|
+
}), /*#__PURE__*/_jsx(DigitKey, {
|
|
138
|
+
digit: "0"
|
|
139
|
+
}), /*#__PURE__*/_jsx(Pressable, {
|
|
140
|
+
onPress: pressBackspace,
|
|
141
|
+
disabled: disabled,
|
|
142
|
+
accessibilityRole: "button",
|
|
143
|
+
accessibilityLabel: "Backspace",
|
|
144
|
+
style: ({
|
|
145
|
+
pressed
|
|
146
|
+
}) => [keyStyle(), {
|
|
147
|
+
opacity: disabled ? 0.5 : pressed ? 0.85 : 1
|
|
148
|
+
}],
|
|
149
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
150
|
+
name: "arrow-left",
|
|
151
|
+
size: 24,
|
|
152
|
+
color: theme.colors.action.secondaryForeground
|
|
153
|
+
})
|
|
154
|
+
})]
|
|
155
|
+
})]
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
//# sourceMappingURL=Keypad.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Pressable","View","useTheme","Icon","Text","jsx","_jsx","jsxs","_jsxs","ROWS","Keypad","value","onChangeText","onKeyPress","maxLength","header","extraKey","keyHeight","gap","width","digitSize","headerGap","disabled","style","theme","keyStyle","bg","flex","height","borderRadius","radii","xl","borderWidth","borderColor","colors","border","strong","backgroundColor","action","secondary","alignItems","justifyContent","pressDigit","digit","length","pressBackspace","slice","pressExtra","onPress","DigitKey","accessibilityRole","accessibilityLabel","pressed","opacity","children","variant","color","secondaryForeground","fontSize","lineHeight","Math","round","marginBottom","map","row","flexDirection","label","icon","name","size"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Keypad/Keypad.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import { Keypad } from "./Keypad.js";
|
|
6
|
+
import { CodeInput } from "../CodeInput/CodeInput.js";
|
|
7
|
+
import { Text } from "../Text/Text.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
const meta = {
|
|
10
|
+
title: 'Components/Keypad',
|
|
11
|
+
component: Keypad
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
/** Login PIN: the keypad drives a dots display above it. */
|
|
15
|
+
export const LoginCode = {
|
|
16
|
+
render: () => {
|
|
17
|
+
const [pin, setPin] = useState('');
|
|
18
|
+
return /*#__PURE__*/_jsx(View, {
|
|
19
|
+
style: {
|
|
20
|
+
padding: 24,
|
|
21
|
+
maxWidth: 360,
|
|
22
|
+
alignItems: 'center',
|
|
23
|
+
gap: 24
|
|
24
|
+
},
|
|
25
|
+
children: /*#__PURE__*/_jsx(Keypad, {
|
|
26
|
+
value: pin,
|
|
27
|
+
onChangeText: setPin,
|
|
28
|
+
maxLength: 4,
|
|
29
|
+
header: /*#__PURE__*/_jsx(View, {
|
|
30
|
+
style: {
|
|
31
|
+
alignItems: 'center'
|
|
32
|
+
},
|
|
33
|
+
children: /*#__PURE__*/_jsx(CodeInput, {
|
|
34
|
+
value: pin,
|
|
35
|
+
onChangeText: setPin,
|
|
36
|
+
length: 4
|
|
37
|
+
})
|
|
38
|
+
})
|
|
39
|
+
})
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Login PIN with reveal — the eye toggle swaps the dots for the entered digits,
|
|
46
|
+
* in the same positions (see CodeInput › RevealPositions).
|
|
47
|
+
*/
|
|
48
|
+
export const LoginCodeRevealable = {
|
|
49
|
+
render: () => {
|
|
50
|
+
const [pin, setPin] = useState('');
|
|
51
|
+
return /*#__PURE__*/_jsx(View, {
|
|
52
|
+
style: {
|
|
53
|
+
padding: 24,
|
|
54
|
+
maxWidth: 360,
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
gap: 24
|
|
57
|
+
},
|
|
58
|
+
children: /*#__PURE__*/_jsx(Keypad, {
|
|
59
|
+
value: pin,
|
|
60
|
+
onChangeText: setPin,
|
|
61
|
+
maxLength: 4,
|
|
62
|
+
header: /*#__PURE__*/_jsx(View, {
|
|
63
|
+
style: {
|
|
64
|
+
alignItems: 'center'
|
|
65
|
+
},
|
|
66
|
+
children: /*#__PURE__*/_jsx(CodeInput, {
|
|
67
|
+
value: pin,
|
|
68
|
+
onChangeText: setPin,
|
|
69
|
+
length: 4,
|
|
70
|
+
revealable: true,
|
|
71
|
+
revealPosition: "right"
|
|
72
|
+
})
|
|
73
|
+
})
|
|
74
|
+
})
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
/** Amount entry: big number header + a "." extra key for decimals. */
|
|
80
|
+
export const AmountEntry = {
|
|
81
|
+
render: () => {
|
|
82
|
+
const [amount, setAmount] = useState('');
|
|
83
|
+
return /*#__PURE__*/_jsx(View, {
|
|
84
|
+
style: {
|
|
85
|
+
padding: 24,
|
|
86
|
+
maxWidth: 360
|
|
87
|
+
},
|
|
88
|
+
children: /*#__PURE__*/_jsx(Keypad, {
|
|
89
|
+
value: amount,
|
|
90
|
+
onChangeText: setAmount,
|
|
91
|
+
extraKey: {
|
|
92
|
+
label: '.',
|
|
93
|
+
value: '.'
|
|
94
|
+
},
|
|
95
|
+
header: /*#__PURE__*/_jsx(View, {
|
|
96
|
+
style: {
|
|
97
|
+
alignItems: 'center',
|
|
98
|
+
paddingVertical: 8
|
|
99
|
+
},
|
|
100
|
+
children: /*#__PURE__*/_jsxs(Text, {
|
|
101
|
+
variant: "h1",
|
|
102
|
+
color: amount ? 'primary' : 'tertiary',
|
|
103
|
+
style: {
|
|
104
|
+
fontSize: 40
|
|
105
|
+
},
|
|
106
|
+
children: ["$", amount || '0.00']
|
|
107
|
+
})
|
|
108
|
+
})
|
|
109
|
+
})
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
/** Extra key as a custom action (e.g. open a modal / redirect). */
|
|
115
|
+
export const ExtraKeyAction = {
|
|
116
|
+
render: () => {
|
|
117
|
+
const [value, setValue] = useState('');
|
|
118
|
+
return /*#__PURE__*/_jsx(View, {
|
|
119
|
+
style: {
|
|
120
|
+
padding: 24,
|
|
121
|
+
maxWidth: 360
|
|
122
|
+
},
|
|
123
|
+
children: /*#__PURE__*/_jsx(Keypad, {
|
|
124
|
+
value: value,
|
|
125
|
+
onChangeText: setValue,
|
|
126
|
+
extraKey: {
|
|
127
|
+
icon: 'user',
|
|
128
|
+
onPress: () => {}
|
|
129
|
+
}
|
|
130
|
+
})
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
/** Fixed width — the pad keeps `width` regardless of the container. */
|
|
136
|
+
export const FixedWidth = {
|
|
137
|
+
render: () => {
|
|
138
|
+
const [value, setValue] = useState('');
|
|
139
|
+
return /*#__PURE__*/_jsx(View, {
|
|
140
|
+
style: {
|
|
141
|
+
padding: 24,
|
|
142
|
+
alignItems: 'center'
|
|
143
|
+
},
|
|
144
|
+
children: /*#__PURE__*/_jsx(Keypad, {
|
|
145
|
+
value: value,
|
|
146
|
+
onChangeText: setValue,
|
|
147
|
+
width: 260
|
|
148
|
+
})
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
/** Full width — with no `width`, the pad fills its parent container (here 480px). */
|
|
154
|
+
export const FullWidthContainer = {
|
|
155
|
+
render: () => {
|
|
156
|
+
const [value, setValue] = useState('');
|
|
157
|
+
return /*#__PURE__*/_jsx(View, {
|
|
158
|
+
style: {
|
|
159
|
+
padding: 24,
|
|
160
|
+
width: 480
|
|
161
|
+
},
|
|
162
|
+
children: /*#__PURE__*/_jsx(Keypad, {
|
|
163
|
+
value: value,
|
|
164
|
+
onChangeText: setValue
|
|
165
|
+
})
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
|
|
170
|
+
/** Standalone: no header, no extra key (backspace only in the bottom row). */
|
|
171
|
+
export const Bare = {
|
|
172
|
+
render: () => {
|
|
173
|
+
const [value, setValue] = useState('');
|
|
174
|
+
return /*#__PURE__*/_jsx(View, {
|
|
175
|
+
style: {
|
|
176
|
+
padding: 24,
|
|
177
|
+
maxWidth: 360
|
|
178
|
+
},
|
|
179
|
+
children: /*#__PURE__*/_jsx(Keypad, {
|
|
180
|
+
value: value,
|
|
181
|
+
onChangeText: setValue
|
|
182
|
+
})
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
/** Custom sizing: taller keys, wider gap, larger digits. */
|
|
188
|
+
export const CustomSizing = {
|
|
189
|
+
render: () => {
|
|
190
|
+
const [value, setValue] = useState('');
|
|
191
|
+
return /*#__PURE__*/_jsx(View, {
|
|
192
|
+
style: {
|
|
193
|
+
padding: 24,
|
|
194
|
+
maxWidth: 360
|
|
195
|
+
},
|
|
196
|
+
children: /*#__PURE__*/_jsx(Keypad, {
|
|
197
|
+
value: value,
|
|
198
|
+
onChangeText: setValue,
|
|
199
|
+
keyHeight: 96,
|
|
200
|
+
gap: 12,
|
|
201
|
+
digitSize: 28
|
|
202
|
+
})
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
};
|
|
206
|
+
//# sourceMappingURL=Keypad.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useState","View","Keypad","CodeInput","Text","jsx","_jsx","jsxs","_jsxs","meta","title","component","LoginCode","render","pin","setPin","style","padding","maxWidth","alignItems","gap","children","value","onChangeText","maxLength","header","length","LoginCodeRevealable","revealable","revealPosition","AmountEntry","amount","setAmount","extraKey","label","paddingVertical","variant","color","fontSize","ExtraKeyAction","setValue","icon","onPress","FixedWidth","width","FullWidthContainer","Bare","CustomSizing","keyHeight","digitSize"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Keypad/Keypad.stories.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { Text } from 'react-native';
|
|
5
|
+
import { render, fireEvent, screen } from '@testing-library/react-native';
|
|
6
|
+
import { ThemeProvider } from "../../theme/index.js";
|
|
7
|
+
import { Keypad } from "./Keypad.js";
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
function wrap(ui) {
|
|
10
|
+
return render(/*#__PURE__*/_jsx(ThemeProvider, {
|
|
11
|
+
children: ui
|
|
12
|
+
}));
|
|
13
|
+
}
|
|
14
|
+
function Controlled(props) {
|
|
15
|
+
const [value, setValue] = useState('');
|
|
16
|
+
return /*#__PURE__*/_jsx(Keypad, {
|
|
17
|
+
...props,
|
|
18
|
+
value: value,
|
|
19
|
+
onChangeText: setValue,
|
|
20
|
+
header: /*#__PURE__*/_jsx(Text, {
|
|
21
|
+
testID: "value",
|
|
22
|
+
children: value
|
|
23
|
+
})
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
describe('Keypad', () => {
|
|
27
|
+
it('renders digits 0–9 and a backspace, no extra key by default', () => {
|
|
28
|
+
wrap(/*#__PURE__*/_jsx(Keypad, {}));
|
|
29
|
+
for (let i = 0; i <= 9; i++) {
|
|
30
|
+
expect(screen.getByLabelText(String(i))).toBeTruthy();
|
|
31
|
+
}
|
|
32
|
+
expect(screen.getByLabelText('Backspace')).toBeTruthy();
|
|
33
|
+
expect(screen.queryByLabelText('action')).toBeNull();
|
|
34
|
+
});
|
|
35
|
+
it('appends the pressed digit to the value', () => {
|
|
36
|
+
const onChangeText = jest.fn();
|
|
37
|
+
wrap(/*#__PURE__*/_jsx(Keypad, {
|
|
38
|
+
value: "12",
|
|
39
|
+
onChangeText: onChangeText
|
|
40
|
+
}));
|
|
41
|
+
fireEvent.press(screen.getByLabelText('3'));
|
|
42
|
+
expect(onChangeText).toHaveBeenCalledWith('123');
|
|
43
|
+
});
|
|
44
|
+
it('backspace removes the last character', () => {
|
|
45
|
+
const onChangeText = jest.fn();
|
|
46
|
+
wrap(/*#__PURE__*/_jsx(Keypad, {
|
|
47
|
+
value: "123",
|
|
48
|
+
onChangeText: onChangeText
|
|
49
|
+
}));
|
|
50
|
+
fireEvent.press(screen.getByLabelText('Backspace'));
|
|
51
|
+
expect(onChangeText).toHaveBeenCalledWith('12');
|
|
52
|
+
});
|
|
53
|
+
it('respects maxLength', () => {
|
|
54
|
+
const onChangeText = jest.fn();
|
|
55
|
+
wrap(/*#__PURE__*/_jsx(Keypad, {
|
|
56
|
+
value: "1234",
|
|
57
|
+
onChangeText: onChangeText,
|
|
58
|
+
maxLength: 4
|
|
59
|
+
}));
|
|
60
|
+
fireEvent.press(screen.getByLabelText('5'));
|
|
61
|
+
expect(onChangeText).not.toHaveBeenCalled();
|
|
62
|
+
});
|
|
63
|
+
it('fires onKeyPress with the raw key even at maxLength', () => {
|
|
64
|
+
const onKeyPress = jest.fn();
|
|
65
|
+
wrap(/*#__PURE__*/_jsx(Keypad, {
|
|
66
|
+
value: "1234",
|
|
67
|
+
onKeyPress: onKeyPress,
|
|
68
|
+
maxLength: 4
|
|
69
|
+
}));
|
|
70
|
+
fireEvent.press(screen.getByLabelText('5'));
|
|
71
|
+
expect(onKeyPress).toHaveBeenCalledWith('5');
|
|
72
|
+
});
|
|
73
|
+
it('extra key with a value appends it', () => {
|
|
74
|
+
const onChangeText = jest.fn();
|
|
75
|
+
wrap(/*#__PURE__*/_jsx(Keypad, {
|
|
76
|
+
value: "1",
|
|
77
|
+
onChangeText: onChangeText,
|
|
78
|
+
extraKey: {
|
|
79
|
+
label: '.',
|
|
80
|
+
value: '.'
|
|
81
|
+
}
|
|
82
|
+
}));
|
|
83
|
+
fireEvent.press(screen.getByLabelText('.'));
|
|
84
|
+
expect(onChangeText).toHaveBeenCalledWith('1.');
|
|
85
|
+
});
|
|
86
|
+
it('extra key with onPress runs the action and does not change the value', () => {
|
|
87
|
+
const onPress = jest.fn();
|
|
88
|
+
const onChangeText = jest.fn();
|
|
89
|
+
wrap(/*#__PURE__*/_jsx(Keypad, {
|
|
90
|
+
value: "1",
|
|
91
|
+
onChangeText: onChangeText,
|
|
92
|
+
extraKey: {
|
|
93
|
+
label: 'x',
|
|
94
|
+
value: '.',
|
|
95
|
+
onPress
|
|
96
|
+
}
|
|
97
|
+
}));
|
|
98
|
+
fireEvent.press(screen.getByLabelText('x'));
|
|
99
|
+
expect(onPress).toHaveBeenCalledTimes(1);
|
|
100
|
+
expect(onChangeText).not.toHaveBeenCalled();
|
|
101
|
+
});
|
|
102
|
+
it('is controllable end-to-end', () => {
|
|
103
|
+
wrap(/*#__PURE__*/_jsx(Controlled, {}));
|
|
104
|
+
fireEvent.press(screen.getByLabelText('9'));
|
|
105
|
+
fireEvent.press(screen.getByLabelText('1'));
|
|
106
|
+
expect(screen.getByTestId('value').props.children).toBe('91');
|
|
107
|
+
});
|
|
108
|
+
it('does not fire callbacks when disabled', () => {
|
|
109
|
+
const onChangeText = jest.fn();
|
|
110
|
+
wrap(/*#__PURE__*/_jsx(Keypad, {
|
|
111
|
+
value: "",
|
|
112
|
+
onChangeText: onChangeText,
|
|
113
|
+
disabled: true
|
|
114
|
+
}));
|
|
115
|
+
fireEvent.press(screen.getByLabelText('1'));
|
|
116
|
+
expect(onChangeText).not.toHaveBeenCalled();
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
//# sourceMappingURL=Keypad.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useState","Text","render","fireEvent","screen","ThemeProvider","Keypad","jsx","_jsx","wrap","ui","children","Controlled","props","value","setValue","onChangeText","header","testID","describe","it","i","expect","getByLabelText","String","toBeTruthy","queryByLabelText","toBeNull","jest","fn","press","toHaveBeenCalledWith","maxLength","not","toHaveBeenCalled","onKeyPress","extraKey","label","onPress","toHaveBeenCalledTimes","getByTestId","toBe","disabled"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Keypad/Keypad.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Keypad"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Keypad/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,aAAU","ignoreList":[]}
|