@draftbit/core 48.4.9 → 48.4.10-cec8cb.2

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.
Files changed (15) hide show
  1. package/lib/commonjs/components/PinInput/CustomPinInputCell.js +1 -1
  2. package/lib/commonjs/components/PinInput/PinInput.js +1 -1
  3. package/lib/typescript/src/components/PinInput/CustomPinInputCell.d.ts +2 -1
  4. package/lib/typescript/src/components/PinInput/CustomPinInputCell.js +2 -2
  5. package/lib/typescript/src/components/PinInput/CustomPinInputCell.js.map +1 -1
  6. package/lib/typescript/src/components/PinInput/PinInput.js +13 -3
  7. package/lib/typescript/src/components/PinInput/PinInput.js.map +1 -1
  8. package/lib/typescript/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +3 -3
  10. package/src/components/PinInput/CustomPinInputCell.js +2 -2
  11. package/src/components/PinInput/CustomPinInputCell.js.map +1 -1
  12. package/src/components/PinInput/CustomPinInputCell.tsx +4 -3
  13. package/src/components/PinInput/PinInput.js +13 -3
  14. package/src/components/PinInput/PinInput.js.map +1 -1
  15. package/src/components/PinInput/PinInput.tsx +53 -40
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "48.4.9",
3
+ "version": "48.4.10-cec8cb.2+cec8cb0",
4
4
  "description": "Core (non-native) Components",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "types": "lib/typescript/src/index.d.ts",
@@ -41,7 +41,7 @@
41
41
  "dependencies": {
42
42
  "@date-io/date-fns": "^1.3.13",
43
43
  "@draftbit/react-theme-provider": "^2.1.1",
44
- "@draftbit/types": "48.3.0",
44
+ "@draftbit/types": "^48.4.10-cec8cb.2+cec8cb0",
45
45
  "@expo/vector-icons": "^13.0.0",
46
46
  "@material-ui/core": "^4.11.0",
47
47
  "@material-ui/pickers": "^3.2.10",
@@ -100,5 +100,5 @@
100
100
  ],
101
101
  "testEnvironment": "node"
102
102
  },
103
- "gitHead": "7f76e4aa4b06abfaafcafd9f89ce7cdf4f3541ae"
103
+ "gitHead": "cec8cb0adf8b82721b1533f052c4c7112556a926"
104
104
  }
package/src/components/PinInput/CustomPinInputCell.js CHANGED
@@ -4,8 +4,8 @@ import { View } from "react-native";
4
4
  * Simple View wrapper component to create a custom pin input cell
5
5
  * Meant to be used in PinInput's renderItem
6
6
  */
7
- const CustomPinInputCell = ({ style, children }) => {
8
- return React.createElement(View, { style: style, children: children });
7
+ const CustomPinInputCell = (props) => {
8
+ return React.createElement(View, { ...props });
9
9
  };
10
10
  export default CustomPinInputCell;
11
11
  //# sourceMappingURL=CustomPinInputCell.js.map
package/src/components/PinInput/CustomPinInputCell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CustomPinInputCell.js","sourceRoot":"","sources":["CustomPinInputCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwB,IAAI,EAAE,MAAM,cAAc,CAAC;AAM1D;;;GAGG;AACH,MAAM,kBAAkB,GAEpB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1B,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACpD,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
1
+ {"version":3,"file":"CustomPinInputCell.js","sourceRoot":"","sources":["CustomPinInputCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwB,IAAI,EAAqB,MAAM,cAAc,CAAC;AAO7E;;;GAGG;AACH,MAAM,kBAAkB,GAEpB,CAAC,KAAK,EAAE,EAAE;IACZ,OAAO,oBAAC,IAAI,OAAK,KAAK,GAAI,CAAC;AAC7B,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
package/src/components/PinInput/CustomPinInputCell.tsx CHANGED
@@ -1,8 +1,9 @@
1
1
  import React from "react";
2
- import { StyleProp, ViewStyle, View } from "react-native";
2
+ import { StyleProp, ViewStyle, View, LayoutChangeEvent } from "react-native";
3
3
 
4
4
  interface CustomPinInputCellProps {
5
5
  style?: StyleProp<ViewStyle>;
6
+ onLayout: (event: LayoutChangeEvent) => void;
6
7
  }
7
8
 
8
9
  /**
@@ -11,8 +12,8 @@ interface CustomPinInputCellProps {
11
12
  */
12
13
  const CustomPinInputCell: React.FC<
13
14
  React.PropsWithChildren<CustomPinInputCellProps>
14
- > = ({ style, children }) => {
15
- return <View style={style} children={children} />;
15
+ > = (props) => {
16
+ return <View {...props} />;
16
17
  };
17
18
 
18
19
  export default CustomPinInputCell;
package/src/components/PinInput/PinInput.js CHANGED
@@ -5,7 +5,7 @@ import { CodeField, useClearByFocusCell, } from "react-native-confirmation-code-
5
5
  import { withTheme } from "../../theming";
6
6
  import PinInputText from "./PinInputText";
7
7
  import { extractStyles } from "../../utilities";
8
- const PinInput = React.forwardRef(({ theme, onInputFull, cellCount = 4, clearOnCellFocus = true, blurOnFull = true, renderItem, value, onChangeText, focusedBorderColor, focusedBackgroundColor, focusedBorderWidth, focusedTextColor, style, ...rest }, ref) => {
8
+ const PinInput = React.forwardRef(({ theme, onInputFull, cellCount = 4, clearOnCellFocus = true, blurOnFull = true, renderItem, value, onChangeText, focusedBorderColor = theme.colors.primary, focusedBackgroundColor, focusedBorderWidth, focusedTextColor, style, ...rest }, ref) => {
9
9
  const newPinInputRef = React.useRef(null);
10
10
  // Use the provided ref or default to new ref when not provided
11
11
  const pinInputRef = ref
@@ -27,7 +27,8 @@ const PinInput = React.forwardRef(({ theme, onInputFull, cellCount = 4, clearOnC
27
27
  }
28
28
  // eslint-disable-next-line react-hooks/exhaustive-deps
29
29
  }, [value, cellCount, blurOnFull, pinInputRef]);
30
- return (React.createElement(CodeField, { ref: pinInputRef, ...(clearOnCellFocus ? codeFieldProps : {}), value: value, onChangeText: onChangeText, textInputStyle: { height: "100%" }, InputComponent: TextInput, cellCount: cellCount, renderCell: ({ symbol: cellValue, index, isFocused }) => (React.createElement(View, { key: index, onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined, style: { flex: 1 } }, (renderItem === null || renderItem === void 0 ? void 0 : renderItem({ cellValue, index, isFocused })) || (React.createElement(View, { testID: "default-code-input-cell", style: [
30
+ const renderCell = (cellValue, index, isFocused) => {
31
+ const cell = (renderItem === null || renderItem === void 0 ? void 0 : renderItem({ cellValue, index, isFocused })) || (React.createElement(View, { testID: "default-code-input-cell", style: [
31
32
  styles.cell,
32
33
  { borderColor: theme.colors.disabled },
33
34
  viewStyles,
@@ -48,9 +49,17 @@ const PinInput = React.forwardRef(({ theme, onInputFull, cellCount = 4, clearOnC
48
49
  isFocused && focusedTextColor
49
50
  ? { color: focusedTextColor }
50
51
  : undefined,
51
- ], isFocused: isFocused }, cellValue))))), ...rest }));
52
+ ], isFocused: isFocused }, cellValue)));
53
+ return React.cloneElement(cell, {
54
+ onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined,
55
+ });
56
+ };
57
+ return (React.createElement(CodeField, { ref: pinInputRef, ...(clearOnCellFocus ? codeFieldProps : {}), value: value, onChangeText: onChangeText, rootStyle: styles.rootContainer, textInputStyle: { height: "100%" }, InputComponent: TextInput, cellCount: cellCount, renderCell: ({ symbol: cellValue, index, isFocused }) => (React.createElement(React.Fragment, { key: index }, renderCell(cellValue, index, isFocused))), ...rest }));
52
58
  });
53
59
  const styles = StyleSheet.create({
60
+ rootContainer: {
61
+ justifyContent: "center",
62
+ },
54
63
  cell: {
55
64
  marginStart: 5,
56
65
  marginEnd: 5,
@@ -62,6 +71,7 @@ const styles = StyleSheet.create({
62
71
  maxWidth: 70,
63
72
  maxHeight: 70,
64
73
  borderWidth: 1,
74
+ flex: 1,
65
75
  },
66
76
  cellText: {
67
77
  fontSize: 25,
package/src/components/PinInput/PinInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PinInput.js","sourceRoot":"","sources":["PinInput.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"PinInput.js","sourceRoot":"","sources":["PinInput.tsx"],"names":[],"mappings":"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"}
package/src/components/PinInput/PinInput.tsx CHANGED
@@ -48,7 +48,7 @@ const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
48
48
  renderItem,
49
49
  value,
50
50
  onChangeText,
51
- focusedBorderColor,
51
+ focusedBorderColor = theme.colors.primary,
52
52
  focusedBackgroundColor,
53
53
  focusedBorderWidth,
54
54
  focusedTextColor,
@@ -82,55 +82,64 @@ const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
82
82
  // eslint-disable-next-line react-hooks/exhaustive-deps
83
83
  }, [value, cellCount, blurOnFull, pinInputRef]);
84
84
 
85
+ const renderCell = (
86
+ cellValue: string,
87
+ index: number,
88
+ isFocused: boolean
89
+ ) => {
90
+ const cell = renderItem?.({ cellValue, index, isFocused }) || (
91
+ <View
92
+ testID="default-code-input-cell"
93
+ style={[
94
+ styles.cell,
95
+ { borderColor: theme.colors.disabled },
96
+ viewStyles,
97
+ isFocused && focusedBorderWidth
98
+ ? { borderWidth: focusedBorderWidth }
99
+ : undefined,
100
+ isFocused && focusedBorderColor
101
+ ? { borderColor: focusedBorderColor }
102
+ : undefined,
103
+ isFocused && focusedBackgroundColor
104
+ ? { backgroundColor: focusedBackgroundColor }
105
+ : undefined,
106
+ ]}
107
+ >
108
+ <PinInputText
109
+ style={[
110
+ styles.cellText,
111
+ { color: theme.colors.strong },
112
+ textStyles,
113
+ isFocused && focusedTextColor
114
+ ? { color: focusedTextColor }
115
+ : undefined,
116
+ ]}
117
+ isFocused={isFocused}
118
+ >
119
+ {cellValue}
120
+ </PinInputText>
121
+ </View>
122
+ );
123
+
124
+ return React.cloneElement(cell, {
125
+ onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined,
126
+ });
127
+ };
128
+
85
129
  return (
86
130
  <CodeField
87
131
  ref={pinInputRef}
88
132
  {...(clearOnCellFocus ? codeFieldProps : {})}
89
133
  value={value}
90
134
  onChangeText={onChangeText}
135
+ rootStyle={styles.rootContainer}
91
136
  textInputStyle={{ height: "100%" }} // addresses issue on firefox where the hidden input did not fill the height
92
137
  InputComponent={TextInput}
93
138
  cellCount={cellCount}
94
139
  renderCell={({ symbol: cellValue, index, isFocused }) => (
95
- <View
96
- key={index}
97
- onLayout={clearOnCellFocus ? getCellOnLayout(index) : undefined}
98
- style={{ flex: 1 }}
99
- >
100
- {renderItem?.({ cellValue, index, isFocused }) || (
101
- <View
102
- testID="default-code-input-cell"
103
- style={[
104
- styles.cell,
105
- { borderColor: theme.colors.disabled },
106
- viewStyles,
107
- isFocused && focusedBorderWidth
108
- ? { borderWidth: focusedBorderWidth }
109
- : undefined,
110
- isFocused && focusedBorderColor
111
- ? { borderColor: focusedBorderColor }
112
- : undefined,
113
- isFocused && focusedBackgroundColor
114
- ? { backgroundColor: focusedBackgroundColor }
115
- : undefined,
116
- ]}
117
- >
118
- <PinInputText
119
- style={[
120
- styles.cellText,
121
- { color: theme.colors.strong },
122
- textStyles,
123
- isFocused && focusedTextColor
124
- ? { color: focusedTextColor }
125
- : undefined,
126
- ]}
127
- isFocused={isFocused}
128
- >
129
- {cellValue}
130
- </PinInputText>
131
- </View>
132
- )}
133
- </View>
140
+ <React.Fragment key={index}>
141
+ {renderCell(cellValue, index, isFocused)}
142
+ </React.Fragment>
134
143
  )}
135
144
  {...rest}
136
145
  />
@@ -139,6 +148,9 @@ const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
139
148
  );
140
149
 
141
150
  const styles = StyleSheet.create({
151
+ rootContainer: {
152
+ justifyContent: "center",
153
+ },
142
154
  cell: {
143
155
  marginStart: 5,
144
156
  marginEnd: 5,
@@ -150,6 +162,7 @@ const styles = StyleSheet.create({
150
162
  maxWidth: 70,
151
163
  maxHeight: 70,
152
164
  borderWidth: 1,
165
+ flex: 1,
153
166
  },
154
167
  cellText: {
155
168
  fontSize: 25,