Skip to content

Commit a90f96e

Browse files
KaganYrkKaganYrk
authored
Merge pull request #205 from TRA-Tech/fix/disable-theme-dropdown-textinput
fix disabled status for dropdown
2 parents 382236a + 7c98ef3 commit a90f96e

4 files changed

Lines changed: 27 additions & 23 deletions

File tree

‎src/components/Dropdown/Dropdown.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ const Dropdown: FCCWD<DrowdownProps> = (
3737
const { statusTheme, componentTheme } = useComponentTheme(
3838
theme,
3939
'dropdown',
40-
Object.keys(selectedObject).length ? 'selected' : (disabled ? 'disabled' : (visible ? 'active' : 'default')),
40+
disabled ? 'disabled' : (Object.keys(selectedObject).length ? 'selected' : (visible ? 'active' : 'default')),
41+
4142
);
4243
const sizes = {
4344
small: {
@@ -99,7 +100,7 @@ const Dropdown: FCCWD<DrowdownProps> = (
99100
disabled={disabled}
100101
onLayout={event => setCord(event.nativeEvent.layout)}
101102
onPress={() => { setVisible(!visible); }}
102-
style={[Style.button, { borderWidth: disabled ? 0 : 1, height: sizes[size].buttonHeight }, buttonStyle,
103+
style={[Style.button, { borderWidth: 1, height: sizes[size].buttonHeight }, buttonStyle,
103104
{ borderColor: statusTheme.border,
104105
backgroundColor: statusTheme.background }]}
105106
>
@@ -117,7 +118,7 @@ const Dropdown: FCCWD<DrowdownProps> = (
117118
paddingHorizontal: sizes[size].paddingHorizontal,
118119
},
119120
sizes[size].typography, buttonTextStyle, {
120-
color: componentTheme[isObjectSelected ? 'selected' : componentStatus]?.label,
121+
color: componentTheme[disabled ? componentStatus : isObjectSelected ? 'selected' : componentStatus]?.label,
121122
}]}
122123
>
123124
{isObjectSelected ? displayedButtonValue?.(selectedObject) : (buttonTitle || 'Please Select')}

‎src/components/Dropdown/MultipleSelectDropdown.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ const MultipleDropdown: FCCWD<MultipleDropdownProps> = (
4949
const { statusTheme, componentTheme } = useComponentTheme(
5050
theme,
5151
'multipleDropdown',
52-
selectedObjects.length ? 'selected' : (disabled ? 'disabled' : (visible ? 'active' : 'default')),
52+
disabled ? 'disabled' : (Object.keys(selectedObjects).length ? 'selected' : (visible ? 'active' : 'default')),
5353
);
5454

55-
const componenetStatus = disabled ? 'disabled' : (visible ? 'active' : 'default');
55+
const componentStatus = disabled ? 'disabled' : (visible ? 'active' : 'default');
5656
const dropdown = useRef<TouchableOpacity>(null);
5757
const dropdownAnimation = useAnimatedStyle(() => ({
5858
transform: [{ rotate: `${openAnimation.value * 180}deg` }],
@@ -134,11 +134,13 @@ const MultipleDropdown: FCCWD<MultipleDropdownProps> = (
134134
disabled={disabled}
135135
onPress={() => { setVisible(!visible); }}
136136
style={[Style.button,
137-
{ borderWidth: disabled ? 0 : 1, height: sizes[size].buttonHeight },
137+
{ borderWidth: 1, height: sizes[size].buttonHeight },
138138
buttonStyle,
139139
{
140-
backgroundColor: componentTheme[isObjectSelected ? 'selected' : componenetStatus]?.background,
141-
borderColor: componentTheme[isObjectSelected ? 'selected' : componenetStatus]?.border,
140+
backgroundColor: componentTheme[disabled ?
141+
componentStatus : isObjectSelected ? 'selected' : componentStatus]?.background,
142+
borderColor: componentTheme[disabled ?
143+
componentStatus : isObjectSelected ? 'selected' : componentStatus]?.border,
142144
}]}
143145
>
144146
{leftElement && (
@@ -153,7 +155,8 @@ const MultipleDropdown: FCCWD<MultipleDropdownProps> = (
153155
buttonTextStyle,
154156
{ flex: 1,
155157
marginLeft: 12,
156-
color: componentTheme[isObjectSelected ? 'selected' : componenetStatus]?.label }]}
158+
color: componentTheme[disabled ?
159+
componentStatus : isObjectSelected ? 'selected' : componentStatus]?.label }]}
157160
>
158161
{!isObjectSelected ?
159162
(buttonTitle || 'Please Select')
@@ -211,20 +214,20 @@ const MultipleDropdown: FCCWD<MultipleDropdownProps> = (
211214
: null,
212215
rowStyle,
213216
{
214-
backgroundColor: componentTheme[isSelected ? 'selected' : componenetStatus]?.background,
217+
backgroundColor: componentTheme[isSelected ? 'selected' : componentStatus]?.background,
215218
},
216219
]}
217220
>
218221
<TouchableOpacity
219222
disabled
220223
style={[Style.checkBox, {
221-
borderColor: componentTheme[isSelected ? 'selected' : componenetStatus]?.checkBorder,
222-
backgroundColor: componentTheme[isSelected ? 'selected' : componenetStatus]?.checkBackground,
224+
borderColor: componentTheme[isSelected ? 'selected' : componentStatus]?.checkBorder,
225+
backgroundColor: componentTheme[isSelected ? 'selected' : componentStatus]?.checkBackground,
223226
}]}
224227
>
225228
{isSelected && (
226229
<OcticonsIcon
227-
color={componentTheme[isSelected ? 'selected' : componenetStatus]?.checkIcon}
230+
color={componentTheme[isSelected ? 'selected' : componentStatus]?.checkIcon}
228231
name="check"
229232
size={12}
230233
/>
@@ -233,7 +236,7 @@ const MultipleDropdown: FCCWD<MultipleDropdownProps> = (
233236
<Text
234237
style={[sizes[size].typography,
235238
{ marginHorizontal: 10 },
236-
rowTextStyle, { color: componentTheme[isSelected ? 'selected' : componenetStatus]?.itemLabel }]}
239+
rowTextStyle, { color: componentTheme[isSelected ? 'selected' : componentStatus]?.itemLabel }]}
237240
>
238241
{displayedRowValue?.(item)}
239242
</Text>

‎src/components/TextInput/TextInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,9 +201,8 @@ const TextInput: FCCWD<TextInputProps & RNTextInputProps> = (
201201
return (
202202
<View style={[containerStyle]}>
203203
<Animated.View style={[{
204-
opacity: editable ? 1 : 0.5,
205204
borderRadius: 5,
206-
borderWidth: 1,
205+
borderWidth: editable ? 1 : 0,
207206
height: sizeStyles[size].height,
208207
maxHeight: sizeStyles[size].height,
209208
},
@@ -231,6 +230,7 @@ const TextInput: FCCWD<TextInputProps & RNTextInputProps> = (
231230
zIndex: 100 }, labelPositionAnimation, { backgroundColor: statusTheme.background }]}
232231
/>
233232
)}
233+
234234
<AnimatedTextInput
235235
ref={inputRef}
236236
editable={editable}

‎src/core/theme/colors.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -224,8 +224,8 @@ export const COLOR_COMPONENTS_LIGHT = (COLOR_SYSTEM:{colors:typeof COLOR_SYSTEM_
224224
},
225225
disabled: {
226226
collapseBackground: COLOR_SYSTEM.colors.system.background,
227-
border: COLOR_SYSTEM.colors.system.background,
228-
background: COLOR_SYSTEM.colors.neutral.lightGrey,
227+
border: COLOR_SYSTEM.colors.input.lightDefault,
228+
background: COLOR_SYSTEM.colors.input.lightDefault,
229229
label: COLOR_SYSTEM.colors.neutral.grey,
230230
collapseIcon: COLOR_SYSTEM.colors.neutral.grey,
231231
itemBackground: COLOR_SYSTEM.colors.neutral.lightGrey,
@@ -284,7 +284,7 @@ export const COLOR_COMPONENTS_LIGHT = (COLOR_SYSTEM:{colors:typeof COLOR_SYSTEM_
284284
disabled: {
285285
collapseBackground: COLOR_SYSTEM.colors.system.background,
286286
background: COLOR_SYSTEM.colors.input.lightDefault,
287-
border: COLOR_SYSTEM.colors.neutral.default,
287+
border: COLOR_SYSTEM.colors.input.lightDefault,
288288
label: COLOR_SYSTEM.colors.neutral.grey,
289289
collapseIcon: COLOR_SYSTEM.colors.neutral.grey,
290290
itemBackground: COLOR_SYSTEM.colors.system.background,
@@ -400,7 +400,7 @@ export const COLOR_COMPONENTS_LIGHT = (COLOR_SYSTEM:{colors:typeof COLOR_SYSTEM_
400400
background: COLOR_SYSTEM.colors.input.lightDefault,
401401
border: COLOR_SYSTEM.colors.input.lightDefault,
402402
label: COLOR_SYSTEM.colors.neutral.grey,
403-
value: COLOR_SYSTEM.colors.neutral.black,
403+
value: COLOR_SYSTEM.colors.neutral.grey,
404404
bottomLabel: COLOR_SYSTEM.colors.neutral.grey,
405405
countLabel: COLOR_SYSTEM.colors.neutral.grey,
406406
},
@@ -546,7 +546,7 @@ export const COLOR_COMPONENTS_DARK = (COLOR_SYSTEM:{colors:typeof COLOR_SYSTEM_D
546546
},
547547
disabled: {
548548
collapseBackground: COLOR_SYSTEM.colors.system.background,
549-
border: COLOR_SYSTEM.colors.system.background,
549+
border: COLOR_SYSTEM.colors.input.lightDefault,
550550
background: COLOR_SYSTEM.colors.input.lightDefault,
551551
label: COLOR_SYSTEM.colors.neutral.grey,
552552
collapseIcon: COLOR_SYSTEM.colors.neutral.grey,
@@ -604,7 +604,7 @@ export const COLOR_COMPONENTS_DARK = (COLOR_SYSTEM:{colors:typeof COLOR_SYSTEM_D
604604
},
605605
disabled: {
606606
background: COLOR_SYSTEM.colors.input.lightDefault,
607-
border: COLOR_SYSTEM.colors.neutral.default,
607+
border: COLOR_SYSTEM.colors.input.lightDefault,
608608
label: COLOR_SYSTEM.colors.neutral.grey,
609609
collapseIcon: COLOR_SYSTEM.colors.neutral.grey,
610610
collapseBackground: COLOR_SYSTEM.colors.system.background,
@@ -721,7 +721,7 @@ export const COLOR_COMPONENTS_DARK = (COLOR_SYSTEM:{colors:typeof COLOR_SYSTEM_D
721721
background: COLOR_SYSTEM.colors.input.lightDefault,
722722
border: COLOR_SYSTEM.colors.input.lightDefault,
723723
label: COLOR_SYSTEM.colors.neutral.grey,
724-
value: COLOR_SYSTEM.colors.neutral.black,
724+
value: COLOR_SYSTEM.colors.neutral.grey,
725725
bottomLabel: COLOR_SYSTEM.colors.neutral.grey,
726726
countLabel: COLOR_SYSTEM.colors.neutral.grey,
727727
},

0 commit comments

Comments
 (0)