cdslibrary 1.2.30 → 1.2.32

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 (3) hide show
  1. package/components/CDSInput.jsx +6 -5
  2. package/components/CDSSelect.jsx +49 -55
  3. package/package.json +1 -1
package/components/CDSInput.jsx CHANGED
@@ -16,7 +16,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
16
16
  if (parts.length > 2) {
17
17
  cleaned = parts[0] + '.' + parts.slice(1).join('');
18
18
  }
19
-
19
+
20
20
  // Enviamos el valor limpio al padre (index.js)
21
21
  onChangeText && onChangeText(cleaned);
22
22
  } else {
@@ -33,20 +33,21 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
33
33
  )}
34
34
 
35
35
  <TextInput
36
+ pointerEvents={type === 'readOnly' && 'none'}
36
37
  style={[
37
38
  styles.textBox,
38
39
  theme.typography.inputText.value,
39
40
  {
40
- backgroundColor: theme.surface.neutral.primary,
41
- // Usamos 'value' (la prop) para decidir el color del borde
41
+ backgroundColor: type === 'readOnly' ? theme.surface.action.disabled : theme.surface.neutral.primary,
42
42
  borderColor: isFocused
43
- ? theme.outline.neutral.focus
43
+ ? theme.outline.neutral.focus
44
44
  : value ? theme.outline.neutral.tertiaryVariant // Cambiado 'text' por 'value'
45
- : theme.outline.neutral.primary,
45
+ : theme.outline.neutral.primary,
46
46
  borderRadius: theme.radius.sm,
47
47
  paddingHorizontal: theme.space.xs,
48
48
  color: theme.text.neutral.primary,
49
49
  outlineStyle: 'none',
50
+
50
51
  },
51
52
  ]}
52
53
  placeholder={placeholder}
package/components/CDSSelect.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useState, useRef, useEffect } from "react";
2
- import {
3
- View, Text, TouchableOpacity, StyleSheet, FlatList,
4
- Animated, Modal, Pressable, Dimensions, Platform
2
+ import {
3
+ View, Text, TouchableOpacity, StyleSheet, FlatList,
4
+ Animated, Pressable, Platform
5
5
  } from "react-native";
6
6
  import { MaterialIcons } from "@expo/vector-icons";
7
7
  import { useTheme } from "../context/CDSThemeContext";
@@ -18,20 +18,20 @@ const SelectOption = ({ item, isSelected, onSelect, theme }) => {
18
18
  onMouseLeave={() => Platform.OS === 'web' && setIsHovered(false)}
19
19
  style={({ pressed }) => [
20
20
  styles.optionItem,
21
- {
21
+ {
22
22
  paddingHorizontal: theme.space.xs,
23
- backgroundColor: (pressed || isHovered)
24
- ? theme.surface.neutral.secondary
25
- : isSelected ? theme.surface.neutral.tertiary : 'transparent'
23
+ backgroundColor: (pressed || isHovered)
24
+ ? theme.surface.neutral.secondary
25
+ : isSelected ? theme.surface.neutral.tertiary : 'transparent'
26
26
  }
27
27
  ]}
28
28
  >
29
29
  <View style={styles.optionContent}>
30
30
  <Text style={[
31
- theme.typography.regular.sm,
32
- {
33
- color: theme.text.neutral.primary,
34
- fontWeight: isSelected ? '700' : '400'
31
+ theme.typography.regular.sm,
32
+ {
33
+ color: theme.text.neutral.primary,
34
+ fontWeight: isSelected ? '700' : '400'
35
35
  }
36
36
  ]}>
37
37
  {item.label}
@@ -42,13 +42,13 @@ const SelectOption = ({ item, isSelected, onSelect, theme }) => {
42
42
  );
43
43
  };
44
44
 
45
- export const CDSSelect = ({ label, options = [], onSelect, placeholder, selectedValue = null }) => {
45
+ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null }) => {
46
46
  const { theme } = useTheme();
47
47
  const [isOpen, setIsOpen] = useState(false);
48
48
  const [dropdownTop, setDropdownTop] = useState(0);
49
49
  const [dropdownWidth, setDropdownWidth] = useState(0);
50
50
  const [dropdownLeft, setDropdownLeft] = useState(0);
51
-
51
+
52
52
  const containerRef = useRef(null);
53
53
  const animatedValue = useRef(new Animated.Value(0)).current;
54
54
 
@@ -90,55 +90,50 @@ export const CDSSelect = ({ label, options = [], onSelect, placeholder, selected
90
90
  activeOpacity={0.8}
91
91
  style={[
92
92
  styles.inputContainer,
93
- {
94
- backgroundColor: theme.surface.neutral.primary,
95
- borderColor: selectedItem ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary,
96
- borderRadius: theme.radius.sm,
97
- paddingHorizontal: theme.space.xs
93
+ {
94
+ backgroundColor: theme.surface.neutral.primary,
95
+ borderColor: selectedItem ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary,
96
+ borderRadius: theme.radius.sm,
97
+ paddingHorizontal: theme.space.xs
98
98
  }
99
99
  ]}
100
100
  onPress={toggleDropdown}
101
101
  >
102
102
  <Text style={selectedItem ? theme.typography.inputText.value : theme.typography.inputText.placeholder}>
103
- {selectedItem ? selectedItem.label : placeholder}
103
+ {selectedItem ? selectedItem.label : 'Selecciona una opción'}
104
104
  </Text>
105
105
  <MaterialIcons name={isOpen ? "expand-less" : "expand-more"} size={24} color={theme.text.neutral.primary} />
106
106
  </TouchableOpacity>
107
107
 
108
- <Modal transparent visible={isOpen} animationType="none" onRequestClose={toggleDropdown}>
109
- <Pressable style={styles.modalOverlay} onPress={toggleDropdown}>
110
- <Animated.View
111
- style={[
112
- styles.dropdown,
113
- {
114
- opacity: animatedValue,
115
- transform: [{ translateY: animatedValue.interpolate({ inputRange: [0, 1], outputRange: [-10, 0] }) }],
116
- backgroundColor: theme.surface.neutral.primary,
117
- borderRadius: theme.radius.sm,
118
- borderColor: theme.outline.neutral.primary,
119
- top: dropdownTop,
120
- width: dropdownWidth,
121
- left: dropdownLeft,
122
- elevation: 8,
123
- maxHeight: 240,
124
- }
125
- ]}
126
- >
127
- <FlatList
128
- data={options}
129
- keyExtractor={(item) => item.value.toString()}
130
- renderItem={({ item }) => (
131
- <SelectOption
132
- item={item}
133
- isSelected={item.value === selectedValue}
134
- onSelect={handleSelect}
135
- theme={theme}
136
- />
137
- )}
138
- />
139
- </Animated.View>
140
- </Pressable>
141
- </Modal>
108
+ {isOpen && (
109
+ <View
110
+ style={[
111
+ styles.dropdownInline,
112
+ {
113
+ marginTop: theme.space.xs,
114
+ backgroundColor: theme.surface.neutral.primary,
115
+ borderRadius: theme.radius.sm,
116
+ borderColor: theme.outline.neutral.primary,
117
+ maxHeight: 240,
118
+ }
119
+ ]}
120
+ >
121
+ <FlatList
122
+ data={options}
123
+ keyExtractor={(item) => item.value.toString()}
124
+ renderItem={({ item }) => (
125
+ <SelectOption
126
+ item={item}
127
+ isSelected={item.value === selectedValue}
128
+ onSelect={handleSelect}
129
+ theme={theme}
130
+ />
131
+ )}
132
+ // Importante para que el scroll funcione dentro de la lista expandida
133
+ nestedScrollEnabled={true}
134
+ />
135
+ </View>
136
+ )}
142
137
  </View>
143
138
  );
144
139
  };
@@ -146,8 +141,7 @@ export const CDSSelect = ({ label, options = [], onSelect, placeholder, selected
146
141
  const styles = StyleSheet.create({
147
142
  mainContainer: { width: '100%' },
148
143
  inputContainer: { height: 48, borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
149
- modalOverlay: { flex: 1, backgroundColor: 'transparent' },
150
- dropdown: { position: 'absolute', borderWidth: 1, overflow: 'hidden' },
144
+ dropdownInline: { borderWidth: 1},
151
145
  optionItem: { height: 48, justifyContent: 'center' },
152
146
  optionContent: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
153
147
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "cdslibrary",
3
3
  "license": "0BSD",
4
- "version": "1.2.30",
4
+ "version": "1.2.32",
5
5
  "main": "index.js",
6
6
  "author": "Nat Viramontes",
7
7
  "description": "A library of components for the CDS project",