@dropi/react-native-design-system 0.3.11 → 0.3.12

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 (5) hide show
  1. package/lib/molecules/RadioButtons/TitleDescription/TitleDescription.d.ts +1 -1
  2. package/lib/molecules/RadioButtons/TitleDescription/TitleDescription.js +50 -41
  3. package/lib/molecules/Select/Select.d.ts +2 -0
  4. package/lib/molecules/Select/Select.js +48 -34
  5. package/package.json +1 -1
package/lib/molecules/RadioButtons/TitleDescription/TitleDescription.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { TouchableOpacityProps } from 'react-native';
1
+ import { TouchableOpacityProps } from "react-native";
2
2
  interface TitleDescriptionProps extends TouchableOpacityProps {
3
3
  title: string;
4
4
  label?: string;
package/lib/molecules/RadioButtons/TitleDescription/TitleDescription.js CHANGED
@@ -34,63 +34,72 @@ const TitleDescription = ({
34
34
  }],
35
35
  disabled: isActive || isDisabled,
36
36
  ...rest,
37
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionSelector, {
38
- isActive: isActive
39
- }), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
40
- source: imageSource,
41
- style: styles.image
42
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
43
- style: styles.textContainer,
44
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
45
- type: "m-regular",
46
- style: styles.titleText,
47
- children: title
48
- }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
49
- type: "s-regular",
50
- style: styles.optionText,
51
- children: label
37
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
38
+ style: {
39
+ flexDirection: "row",
40
+ alignItems: "center"
41
+ },
42
+ children: [imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
43
+ style: styles.image,
44
+ source: imageSource,
45
+ contentFit: "contain"
46
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
47
+ style: styles.textContainer,
48
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
49
+ type: "m-regular",
50
+ style: styles.titleText,
51
+ children: title
52
+ }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
53
+ type: "s-regular",
54
+ style: styles.optionText,
55
+ children: label
56
+ })]
52
57
  })]
58
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionSelector, {
59
+ isActive: isActive
53
60
  })]
54
61
  });
55
62
  };
56
63
  exports.TitleDescription = TitleDescription;
57
64
  const styles = _reactNative.StyleSheet.create({
58
65
  option: {
59
- padding: _constants.spacing['size-4'],
60
- borderRadius: _constants.radius['border-2'],
66
+ padding: _constants.spacing["size-4"],
67
+ borderRadius: _constants.radius["border-2"],
61
68
  borderWidth: 1,
62
- borderColor: _constants.colors['Gray-200'].light,
63
- marginBottom: _constants.spacing['size-5'],
64
- flexDirection: 'row',
65
- alignItems: 'center'
69
+ borderColor: _constants.colors["Gray-200"].light,
70
+ marginBottom: _constants.spacing["size-5"],
71
+ flexDirection: "row",
72
+ alignItems: "center",
73
+ justifyContent: "space-between"
66
74
  },
67
75
  selectedOption: {
68
- padding: _constants.spacing['size-4'],
69
- borderRadius: _constants.radius['border-2'],
76
+ padding: _constants.spacing["size-4"],
77
+ borderRadius: _constants.radius["border-2"],
70
78
  borderWidth: 1,
71
79
  borderColor: _constants.colors["Primary-500"].light,
72
- marginBottom: _constants.spacing['size-5'],
73
- flexDirection: 'row',
74
- alignItems: 'center',
75
- backgroundColor: _constants.colors['Primary-50'].light
80
+ marginBottom: _constants.spacing["size-5"],
81
+ flexDirection: "row",
82
+ alignItems: "center",
83
+ backgroundColor: _constants.colors["Primary-50"].light,
84
+ justifyContent: "space-between"
76
85
  },
77
86
  optionSelector: {
78
87
  width: !_utils.isTablet ? 20 : 20 * 1.5,
79
88
  height: !_utils.isTablet ? 20 : 20 * 1.5,
80
89
  borderRadius: _constants.radius.circle,
81
- marginRight: _constants.spacing['size-3'],
90
+ marginRight: _constants.spacing["size-3"],
82
91
  borderWidth: 2,
83
- borderColor: _constants.colors['Gray-200'].light
92
+ borderColor: _constants.colors["Gray-200"].light
84
93
  },
85
94
  selectedOptionSelector: {
86
95
  width: !_utils.isTablet ? 20 : 20 * 1.5,
87
96
  height: !_utils.isTablet ? 20 : 20 * 1.5,
88
97
  borderRadius: _constants.radius.circle,
89
- marginRight: _constants.spacing['size-3'],
98
+ marginRight: _constants.spacing["size-3"],
90
99
  borderWidth: 2,
91
100
  borderColor: _constants.colors["Primary-500"].light,
92
- justifyContent: 'center',
93
- alignItems: 'center'
101
+ justifyContent: "center",
102
+ alignItems: "center"
94
103
  },
95
104
  innerSelector: {
96
105
  width: !_utils.isTablet ? 12 : 12 * 1.5,
@@ -98,19 +107,19 @@ const styles = _reactNative.StyleSheet.create({
98
107
  borderRadius: _constants.radius.circle,
99
108
  backgroundColor: _constants.colors["Primary-500"].light
100
109
  },
101
- image: {
102
- width: !_utils.isTablet ? 32 : 32 * 1.5,
103
- height: !_utils.isTablet ? 32 : 32 * 1.5,
104
- marginRight: _constants.spacing['size-3'],
105
- borderRadius: _constants.radius.circle
106
- },
107
110
  textContainer: {
108
- flexDirection: 'column'
111
+ flexDirection: "column"
109
112
  },
110
113
  titleText: {
111
- color: _constants.colors['Gray-700'].light
114
+ color: _constants.colors["Gray-700"].light
112
115
  },
113
116
  optionText: {
114
- color: _constants.colors['Gray-600'].light
117
+ color: _constants.colors["Gray-600"].light
118
+ },
119
+ image: {
120
+ width: !_utils.isTablet ? 32 : 32 * 1.5,
121
+ height: !_utils.isTablet ? 32 : 32 * 1.5,
122
+ marginRight: _constants.spacing["size-3"],
123
+ borderRadius: _constants.radius.circle
115
124
  }
116
125
  });
package/lib/molecules/Select/Select.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  export type SelectOption = {
2
2
  label: string;
3
3
  value: string | number;
4
+ image?: string | number;
5
+ message?: string;
4
6
  };
5
7
  type SelectProps = {
6
8
  options: SelectOption[];
package/lib/molecules/Select/Select.js CHANGED
@@ -7,10 +7,11 @@ exports.Select = void 0;
7
7
  var _react = require("react");
8
8
  var _reactNative = require("react-native");
9
9
  var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
10
- var _atoms = require("../../atoms");
11
10
  var _BottomSheet = require("../BottomSheet");
12
- var _constants = require("../../constants/");
11
+ var _atoms = require("../../atoms");
12
+ var _constants = require("../../constants");
13
13
  var _RadioButtons = require("../RadioButtons");
14
+ var _expoImage = require("expo-image");
14
15
  var _jsxRuntime = require("react/jsx-runtime");
15
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
17
  const Select = ({
@@ -18,7 +19,7 @@ const Select = ({
18
19
  value = null,
19
20
  onChange,
20
21
  label,
21
- placeholder = 'Seleccionar',
22
+ placeholder = "Seleccionar",
22
23
  helper,
23
24
  hasError = false,
24
25
  errorMessage,
@@ -31,9 +32,9 @@ const Select = ({
31
32
  const [draftSelection, setDraftSelection] = (0, _react.useState)(null);
32
33
  const currentValue = value;
33
34
  const getBorderColor = () => {
34
- if (hasError) return _constants.colors['Error-500'].light;
35
- if (isFocus) return _constants.colors['Info-500'].light;
36
- return _constants.colors['Gray-200'].light;
35
+ if (hasError) return _constants.colors["Error-500"].light;
36
+ if (isFocus) return _constants.colors["Info-500"].light;
37
+ return _constants.colors["Gray-200"].light;
37
38
  };
38
39
  const hasChanges = (0, _react.useMemo)(() => {
39
40
  if (!draftSelection) return false;
@@ -73,7 +74,9 @@ const Select = ({
73
74
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtons.TitleDescription, {
74
75
  title: item.label,
75
76
  isActive: isSelected,
76
- onPress: () => handleDraftSelect(item)
77
+ onPress: () => handleDraftSelect(item),
78
+ imageSource: item.image,
79
+ label: item.message
77
80
  });
78
81
  }, [draftSelection, handleDraftSelect]);
79
82
  const footer = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -98,7 +101,7 @@ const Select = ({
98
101
  children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
99
102
  type: "m-regular",
100
103
  style: {
101
- color: _constants.colors['Gray-600'].light
104
+ color: _constants.colors["Gray-600"].light
102
105
  },
103
106
  children: label
104
107
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
@@ -107,10 +110,14 @@ const Select = ({
107
110
  }, disabled && styles.disabled],
108
111
  onPress: handleOpen,
109
112
  activeOpacity: 0.7,
110
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
113
+ children: [currentValue?.image && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
114
+ style: styles.image,
115
+ source: currentValue.image,
116
+ contentFit: "contain"
117
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
111
118
  type: "m-regular",
112
119
  style: {
113
- color: currentValue ? _constants.colors['Gray-600'].light : _constants.colors['Gray-400'].light,
120
+ color: currentValue ? _constants.colors["Gray-600"].light : _constants.colors["Gray-400"].light,
114
121
  flex: 1
115
122
  },
116
123
  numberOfLines: 1,
@@ -119,16 +126,16 @@ const Select = ({
119
126
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
120
127
  name: "dropdown-down",
121
128
  size: _constants.sizes.xl,
122
- color: _constants.colors['Gray-400'].light
129
+ color: _constants.colors["Gray-400"].light
123
130
  })]
124
131
  }), helper && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
125
132
  style: {
126
- marginTop: _constants.spacing['size-2']
133
+ marginTop: _constants.spacing["size-2"]
127
134
  },
128
135
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
129
136
  type: "s-regular",
130
137
  style: {
131
- color: _constants.colors['Gray-600'].light
138
+ color: _constants.colors["Gray-600"].light
132
139
  },
133
140
  children: helper
134
141
  })
@@ -139,7 +146,7 @@ const Select = ({
139
146
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
140
147
  name: "warning-circle",
141
148
  size: _constants.sizes.s,
142
- color: _constants.colors['Error-500'].light
149
+ color: _constants.colors["Error-500"].light
143
150
  })
144
151
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
145
152
  type: "s-regular",
@@ -148,8 +155,8 @@ const Select = ({
148
155
  })]
149
156
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomSheet.BottomSheetComponent, {
150
157
  ref: bottomSheetRef,
151
- title: title ?? label ?? 'Seleccionar',
152
- snapPoints: ['70%', '90%'],
158
+ title: title ?? label ?? "Seleccionar",
159
+ snapPoints: ["90%"],
153
160
  onDismiss: handleDismiss,
154
161
  footer: footer,
155
162
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
@@ -165,41 +172,48 @@ const Select = ({
165
172
  exports.Select = Select;
166
173
  const styles = _reactNative.StyleSheet.create({
167
174
  fieldContainer: {
168
- marginBottom: _constants.spacing['size-4'],
169
- width: '100%'
175
+ marginBottom: _constants.spacing["size-4"],
176
+ width: "100%"
170
177
  },
171
178
  selectButton: {
172
- width: '100%',
173
- borderRadius: _constants.radius['border-2'],
179
+ width: "100%",
180
+ borderRadius: _constants.radius["border-2"],
174
181
  borderWidth: 1,
175
- flexDirection: 'row',
176
- alignItems: 'center',
177
- justifyContent: 'space-between',
178
- marginTop: _constants.spacing['size-2'],
182
+ flexDirection: "row",
183
+ alignItems: "center",
184
+ justifyContent: "space-between",
185
+ marginTop: _constants.spacing["size-2"],
179
186
  height: 48,
180
- paddingHorizontal: _constants.spacing['size-3']
187
+ paddingHorizontal: _constants.spacing["size-3"]
181
188
  },
182
189
  disabled: {
183
190
  opacity: 0.5
184
191
  },
185
192
  errorContainer: {
186
- marginTop: _constants.spacing['size-2'],
187
- flexDirection: 'row',
188
- width: '100%'
193
+ marginTop: _constants.spacing["size-2"],
194
+ flexDirection: "row",
195
+ width: "100%"
189
196
  },
190
197
  errorIcon: {
191
- alignItems: 'center',
192
- paddingTop: _constants.spacing['size-1']
198
+ alignItems: "center",
199
+ paddingTop: _constants.spacing["size-1"]
193
200
  },
194
201
  errorText: {
195
- color: _constants.colors['Error-500'].light,
196
- marginLeft: _constants.spacing['size-1'],
202
+ color: _constants.colors["Error-500"].light,
203
+ marginLeft: _constants.spacing["size-1"],
197
204
  flex: 1
198
205
  },
199
206
  optionsList: {
200
- paddingHorizontal: _constants.spacing['size-5']
207
+ paddingHorizontal: _constants.spacing["size-5"],
208
+ paddingBottom: _constants.spacing["size-8"]
201
209
  },
202
210
  footerSecondaryButton: {
203
- marginTop: _constants.spacing['size-4']
211
+ marginTop: _constants.spacing["size-4"]
212
+ },
213
+ image: {
214
+ width: _constants.sizes.l,
215
+ height: _constants.sizes.l,
216
+ marginRight: _constants.spacing["size-3"],
217
+ borderRadius: _constants.radius.circle
204
218
  }
205
219
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dropi/react-native-design-system",
3
- "version": "0.3.11",
3
+ "version": "0.3.12",
4
4
  "description": "A React Native package built from scratch",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",