@codeleap/mobile 5.0.8 → 5.0.10
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/dist/components/Autocomplete/types.d.ts +1 -2
- package/dist/components/Backdrop/index.js +2 -2
- package/dist/components/Backdrop/index.js.map +1 -1
- package/dist/components/Checkbox/index.js +10 -12
- package/dist/components/Checkbox/index.js.map +1 -1
- package/dist/components/DatePickerModal/index.js +11 -13
- package/dist/components/DatePickerModal/index.js.map +1 -1
- package/dist/components/InputBase/useInputBase.d.ts +40 -2
- package/dist/components/InputBase/useInputBase.js +9 -6
- package/dist/components/InputBase/useInputBase.js.map +1 -1
- package/dist/components/Modal/index.d.ts +0 -1
- package/dist/components/Modal/index.js +25 -41
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/components/Modal/styles.d.ts +1 -1
- package/dist/components/Modal/types.d.ts +1 -2
- package/dist/components/NumberIncrement/index.js +5 -5
- package/dist/components/NumberIncrement/index.js.map +1 -1
- package/dist/components/NumberIncrement/useNumberIncrement.d.ts +36 -1
- package/dist/components/NumberIncrement/useNumberIncrement.js +23 -21
- package/dist/components/NumberIncrement/useNumberIncrement.js.map +1 -1
- package/dist/components/PlacesAutocomplete/index.js +5 -5
- package/dist/components/PlacesAutocomplete/index.js.map +1 -1
- package/dist/components/RadioInput/index.js +3 -3
- package/dist/components/RadioInput/index.js.map +1 -1
- package/dist/components/SearchInput/index.js +1 -1
- package/dist/components/SearchInput/index.js.map +1 -1
- package/dist/components/Select/index.js +20 -22
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/types.d.ts +1 -2
- package/dist/components/Slider/index.js +10 -10
- package/dist/components/Slider/index.js.map +1 -1
- package/dist/components/SortablePhotos/useSortablePhotos.js +2 -6
- package/dist/components/SortablePhotos/useSortablePhotos.js.map +1 -1
- package/dist/components/Switch/index.js +10 -12
- package/dist/components/Switch/index.js.map +1 -1
- package/dist/components/TextInput/index.js +4 -4
- package/dist/components/TextInput/index.js.map +1 -1
- package/dist/components/TextInput/useTextInput.d.ts +36 -1
- package/dist/components/TextInput/useTextInput.js +9 -7
- package/dist/components/TextInput/useTextInput.js.map +1 -1
- package/dist/deprecated/index.d.ts +1 -0
- package/dist/deprecated/index.js +2 -0
- package/dist/deprecated/index.js.map +1 -1
- package/dist/{utils/ModalManager/context.js → deprecated/modals/Context.js} +3 -6
- package/dist/deprecated/modals/Context.js.map +1 -0
- package/dist/{utils/ModalManager → deprecated/modals}/components.js +1 -1
- package/dist/deprecated/modals/components.js.map +1 -0
- package/dist/{utils/ModalManager → deprecated/modals}/index.d.ts +1 -1
- package/dist/{utils/ModalManager → deprecated/modals}/index.js +1 -1
- package/dist/deprecated/modals/index.js.map +1 -0
- package/dist/deprecated/permissions/Context.js +1 -1
- package/dist/deprecated/permissions/Context.js.map +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/dist/types/utility.d.ts +8 -0
- package/dist/utils/index.d.ts +0 -2
- package/dist/utils/index.js +0 -2
- package/dist/utils/index.js.map +1 -1
- package/package.json +17 -15
- package/package.json.bak +4 -2
- package/src/components/Autocomplete/types.ts +1 -2
- package/src/components/Backdrop/index.tsx +2 -2
- package/src/components/Checkbox/index.tsx +12 -13
- package/src/components/DatePickerModal/index.tsx +15 -17
- package/src/components/InputBase/useInputBase.ts +10 -8
- package/src/components/Modal/index.tsx +77 -96
- package/src/components/Modal/styles.ts +0 -1
- package/src/components/Modal/types.ts +1 -2
- package/src/components/NumberIncrement/index.tsx +7 -6
- package/src/components/NumberIncrement/useNumberIncrement.ts +25 -21
- package/src/components/PlacesAutocomplete/index.tsx +4 -4
- package/src/components/RadioInput/index.tsx +6 -5
- package/src/components/SearchInput/index.tsx +1 -1
- package/src/components/Select/index.tsx +28 -24
- package/src/components/Select/types.ts +1 -2
- package/src/components/Slider/index.tsx +12 -11
- package/src/components/SortablePhotos/useSortablePhotos.ts +2 -7
- package/src/components/Switch/index.tsx +12 -13
- package/src/components/TextInput/index.tsx +6 -5
- package/src/components/TextInput/useTextInput.ts +11 -7
- package/src/deprecated/index.ts +2 -1
- package/src/{utils/ModalManager/context.tsx → deprecated/modals/Context.tsx} +9 -11
- package/src/{utils/ModalManager → deprecated/modals}/components.tsx +5 -5
- package/src/{utils/ModalManager → deprecated/modals}/index.ts +2 -2
- package/src/deprecated/permissions/Context.tsx +1 -1
- package/src/index.ts +1 -2
- package/src/types/utility.ts +8 -0
- package/src/utils/index.ts +0 -2
- package/dist/utils/KeyboardAware/context.d.ts +0 -14
- package/dist/utils/KeyboardAware/context.js +0 -15
- package/dist/utils/KeyboardAware/context.js.map +0 -1
- package/dist/utils/KeyboardAware/index.d.ts +0 -2
- package/dist/utils/KeyboardAware/index.js +0 -3
- package/dist/utils/KeyboardAware/index.js.map +0 -1
- package/dist/utils/KeyboardAware/keyboardHooks.d.ts +0 -21
- package/dist/utils/KeyboardAware/keyboardHooks.js +0 -77
- package/dist/utils/KeyboardAware/keyboardHooks.js.map +0 -1
- package/dist/utils/ModalManager/components.js.map +0 -1
- package/dist/utils/ModalManager/context.js.map +0 -1
- package/dist/utils/ModalManager/index.js.map +0 -1
- package/src/utils/KeyboardAware/context.tsx +0 -21
- package/src/utils/KeyboardAware/index.ts +0 -4
- package/src/utils/KeyboardAware/keyboardHooks.ts +0 -110
- /package/dist/{utils/ModalManager/context.d.ts → deprecated/modals/Context.d.ts} +0 -0
- /package/dist/{utils/ModalManager → deprecated/modals}/components.d.ts +0 -0
|
@@ -96,18 +96,19 @@ export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>)
|
|
|
96
96
|
const styles = useStylesFor(RadioGroup.styleRegistryName, style)
|
|
97
97
|
|
|
98
98
|
const {
|
|
99
|
-
fieldHandle,
|
|
100
99
|
wrapperRef,
|
|
100
|
+
inputValue,
|
|
101
|
+
onInputValueChange,
|
|
101
102
|
} = useInputBase(
|
|
102
103
|
field as SelectableField<T, any>,
|
|
103
104
|
fields.selectable as () => SelectableField<T, any>,
|
|
104
|
-
|
|
105
|
+
{ value, onValueChange }
|
|
105
106
|
)
|
|
106
107
|
|
|
107
108
|
// @ts-expect-error icss type
|
|
108
109
|
const _radioOnRight = radioOnRight ?? styles?.__props?.radioOnRight
|
|
109
110
|
|
|
110
|
-
const hasValue = !TypeGuards.isNil(
|
|
111
|
+
const hasValue = !TypeGuards.isNil(inputValue)
|
|
111
112
|
|
|
112
113
|
return <InputBase
|
|
113
114
|
{...inputBaseProps}
|
|
@@ -124,8 +125,8 @@ export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>)
|
|
|
124
125
|
key={idx}
|
|
125
126
|
disabled={disabled}
|
|
126
127
|
styles={styles}
|
|
127
|
-
selected={
|
|
128
|
-
onSelect={() =>
|
|
128
|
+
selected={inputValue === item.value}
|
|
129
|
+
onSelect={() => onInputValueChange(item.value)}
|
|
129
130
|
separator={idx < options?.length - 1}
|
|
130
131
|
reverseOrder={_radioOnRight}
|
|
131
132
|
/>
|
|
@@ -11,10 +11,9 @@ import React, { useCallback, useMemo } from 'react'
|
|
|
11
11
|
import { List } from '../List'
|
|
12
12
|
import { TextInput } from '../TextInput'
|
|
13
13
|
import { SelectProps, ValueBoundSelectProps } from './types'
|
|
14
|
-
import { ModalManager } from '../../utils'
|
|
15
14
|
import { Button } from '../Button'
|
|
16
15
|
import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
|
|
17
|
-
import Modal from '../Modal'
|
|
16
|
+
import { Modal } from '../Modal'
|
|
18
17
|
import { MobileStyleRegistry } from '../../Registry'
|
|
19
18
|
import { SearchInput } from '../SearchInput'
|
|
20
19
|
import { useStylesFor } from '../../hooks'
|
|
@@ -62,6 +61,7 @@ const OuterInput: ValueBoundSelectProps<any, boolean>['outerInputComponent'] = (
|
|
|
62
61
|
|
|
63
62
|
return <TextInput
|
|
64
63
|
value={TypeGuards.isString(currentValueLabel) ? currentValueLabel : null}
|
|
64
|
+
onValueChange={() => currentValueLabel}
|
|
65
65
|
rightIcon={clearIcon}
|
|
66
66
|
onPress={disabled ? null : () => toggle()}
|
|
67
67
|
disabled={disabled}
|
|
@@ -117,17 +117,22 @@ export const Select = <T extends string | number = string, Multi extends boolean
|
|
|
117
117
|
outerInputComponent,
|
|
118
118
|
disabled,
|
|
119
119
|
field,
|
|
120
|
-
value
|
|
121
|
-
onValueChange
|
|
120
|
+
value,
|
|
121
|
+
onValueChange,
|
|
122
122
|
onSelect,
|
|
123
123
|
...modalProps
|
|
124
124
|
} = allProps
|
|
125
125
|
|
|
126
|
-
const {
|
|
127
|
-
|
|
128
|
-
|
|
126
|
+
const {
|
|
127
|
+
inputValue,
|
|
128
|
+
onInputValueChange,
|
|
129
|
+
} = useInputBase(
|
|
130
|
+
field,
|
|
131
|
+
fields.selectable as () => SelectableField<T, any>,
|
|
132
|
+
{ value, onValueChange }
|
|
133
|
+
)
|
|
129
134
|
|
|
130
|
-
const isValueArray = TypeGuards.isArray(
|
|
135
|
+
const isValueArray = TypeGuards.isArray(inputValue) && multiple
|
|
131
136
|
|
|
132
137
|
const {
|
|
133
138
|
loading,
|
|
@@ -138,7 +143,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
|
|
|
138
143
|
load,
|
|
139
144
|
onChangeSearch,
|
|
140
145
|
} = useSearch({
|
|
141
|
-
value,
|
|
146
|
+
value: inputValue,
|
|
142
147
|
multiple,
|
|
143
148
|
options,
|
|
144
149
|
filterItems,
|
|
@@ -186,25 +191,25 @@ export const Select = <T extends string | number = string, Multi extends boolean
|
|
|
186
191
|
let removedIndex = null
|
|
187
192
|
|
|
188
193
|
if (multiple && isValueArray) {
|
|
189
|
-
if (
|
|
190
|
-
removedIndex =
|
|
194
|
+
if (inputValue.includes(selectedValue)) {
|
|
195
|
+
removedIndex = inputValue.findIndex(v => v === selectedValue)
|
|
191
196
|
|
|
192
|
-
newValue =
|
|
197
|
+
newValue = inputValue.filter((v, i) => i !== removedIndex)
|
|
193
198
|
} else {
|
|
194
|
-
if (TypeGuards.isNumber(limit) &&
|
|
199
|
+
if (TypeGuards.isNumber(limit) && inputValue.length >= limit) {
|
|
195
200
|
return
|
|
196
201
|
}
|
|
197
202
|
|
|
198
203
|
newOption = currentOptions.find(o => o.value === selectedValue)
|
|
199
204
|
|
|
200
|
-
newValue = [...
|
|
205
|
+
newValue = [...inputValue, selectedValue]
|
|
201
206
|
}
|
|
202
207
|
} else {
|
|
203
208
|
newValue = selectedValue
|
|
204
209
|
newOption = currentOptions.find(o => o.value === selectedValue)
|
|
205
210
|
}
|
|
206
211
|
|
|
207
|
-
|
|
212
|
+
onInputValueChange(newValue)
|
|
208
213
|
|
|
209
214
|
onSelect?.(newValue)
|
|
210
215
|
|
|
@@ -224,15 +229,15 @@ export const Select = <T extends string | number = string, Multi extends boolean
|
|
|
224
229
|
if (closeOnSelect) {
|
|
225
230
|
close?.()
|
|
226
231
|
}
|
|
227
|
-
}, [isValueArray, (isValueArray ?
|
|
232
|
+
}, [isValueArray, (isValueArray ? inputValue : [inputValue]), limit, multiple, labelOptions, currentOptions])
|
|
228
233
|
|
|
229
234
|
const renderListItem = useCallback(({ item, index }) => {
|
|
230
235
|
let selected = false
|
|
231
236
|
|
|
232
237
|
if (multiple && isValueArray) {
|
|
233
|
-
selected =
|
|
238
|
+
selected = inputValue?.includes(item.value)
|
|
234
239
|
} else {
|
|
235
|
-
selected =
|
|
240
|
+
selected = inputValue === item.value
|
|
236
241
|
}
|
|
237
242
|
|
|
238
243
|
return (
|
|
@@ -251,20 +256,19 @@ export const Select = <T extends string | number = string, Multi extends boolean
|
|
|
251
256
|
{...itemProps}
|
|
252
257
|
/>
|
|
253
258
|
)
|
|
254
|
-
}, [
|
|
259
|
+
}, [inputValue, select, multiple])
|
|
255
260
|
|
|
256
|
-
const isEmpty = TypeGuards.isNil(
|
|
261
|
+
const isEmpty = TypeGuards.isNil(inputValue)
|
|
257
262
|
const showClearIcon = !isEmpty && clearable
|
|
258
263
|
|
|
259
264
|
const inputIcon = showClearIcon ? clearIconName : arrowIconName
|
|
260
265
|
|
|
261
266
|
const onPressInputIcon = () => {
|
|
262
267
|
if (showClearIcon) {
|
|
263
|
-
|
|
268
|
+
onInputValueChange(null)
|
|
264
269
|
} else {
|
|
265
270
|
close?.()
|
|
266
271
|
}
|
|
267
|
-
|
|
268
272
|
}
|
|
269
273
|
|
|
270
274
|
const searchHeader = searchable ? <SearchInput
|
|
@@ -313,7 +317,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
|
|
|
313
317
|
) : null
|
|
314
318
|
}
|
|
315
319
|
|
|
316
|
-
<
|
|
320
|
+
<Modal
|
|
317
321
|
title={label}
|
|
318
322
|
description={description}
|
|
319
323
|
{...modalProps}
|
|
@@ -339,7 +343,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
|
|
|
339
343
|
loading,
|
|
340
344
|
}}
|
|
341
345
|
/>
|
|
342
|
-
</
|
|
346
|
+
</Modal>
|
|
343
347
|
</>
|
|
344
348
|
}
|
|
345
349
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Option, Options, PropsOf } from '@codeleap/types'
|
|
2
2
|
import { AppIcon, StyledProp } from '@codeleap/styles'
|
|
3
|
-
import { StylesOf } from '../../types/utility'
|
|
4
|
-
import { GetKeyboardAwarePropsOptions } from '../../utils'
|
|
3
|
+
import { GetKeyboardAwarePropsOptions, StylesOf } from '../../types/utility'
|
|
5
4
|
import { ActionIconProps } from '../ActionIcon'
|
|
6
5
|
import { Icon } from '../Icon'
|
|
7
6
|
import { FlatListProps } from '../List'
|
|
@@ -64,18 +64,19 @@ export const Slider = (props: SliderProps) => {
|
|
|
64
64
|
} = others
|
|
65
65
|
|
|
66
66
|
const {
|
|
67
|
-
fieldHandle,
|
|
68
67
|
wrapperRef,
|
|
69
|
-
|
|
68
|
+
inputValue,
|
|
69
|
+
onInputValueChange,
|
|
70
|
+
} = useInputBase(field, fields.number, { value, onValueChange })
|
|
70
71
|
|
|
71
|
-
const [_value, _setValue] = updateImmediately ? [
|
|
72
|
+
const [_value, _setValue] = updateImmediately ? [inputValue, onInputValueChange] : React.useState<number | Array<number>>(0)
|
|
72
73
|
|
|
73
74
|
onUpdate(() => {
|
|
74
75
|
if (updateImmediately) return
|
|
75
|
-
if (
|
|
76
|
-
_setValue(
|
|
76
|
+
if (inputValue !== _value) {
|
|
77
|
+
_setValue(inputValue)
|
|
77
78
|
}
|
|
78
|
-
}, [
|
|
79
|
+
}, [inputValue])
|
|
79
80
|
|
|
80
81
|
const styles = useStylesFor(Slider.styleRegistryName, style)
|
|
81
82
|
|
|
@@ -106,7 +107,7 @@ export const Slider = (props: SliderProps) => {
|
|
|
106
107
|
<View style={styles.labelRow}>
|
|
107
108
|
{label ? (
|
|
108
109
|
<Touchable
|
|
109
|
-
onPress={() => labelClickable ?
|
|
110
|
+
onPress={() => labelClickable ? onInputValueChange(sliderProps?.minimumValue || minimumValue) : null}
|
|
110
111
|
style={styles.labelBtn}
|
|
111
112
|
debugName='slider title'
|
|
112
113
|
>
|
|
@@ -115,7 +116,7 @@ export const Slider = (props: SliderProps) => {
|
|
|
115
116
|
) : null}
|
|
116
117
|
{description ? (
|
|
117
118
|
<Touchable
|
|
118
|
-
onPress={() => labelClickable ?
|
|
119
|
+
onPress={() => labelClickable ? onInputValueChange(sliderProps?.maximumValue || maximumValue) : null}
|
|
119
120
|
style={styles?.descriptionBtn}
|
|
120
121
|
debugName='slider description'
|
|
121
122
|
>
|
|
@@ -137,7 +138,7 @@ export const Slider = (props: SliderProps) => {
|
|
|
137
138
|
maximumValue={maximumValue}
|
|
138
139
|
onSlidingComplete={() => {
|
|
139
140
|
if (updateImmediately) return
|
|
140
|
-
|
|
141
|
+
onInputValueChange(_value)
|
|
141
142
|
}}
|
|
142
143
|
disabled={disabled}
|
|
143
144
|
{...sliderProps}
|
|
@@ -163,7 +164,7 @@ export const Slider = (props: SliderProps) => {
|
|
|
163
164
|
index={idx}
|
|
164
165
|
style={style}
|
|
165
166
|
key={idx}
|
|
166
|
-
onPress={() => trackMarksClickable ?
|
|
167
|
+
onPress={() => trackMarksClickable ? onInputValueChange(trackMarksProp[idx]) : null}
|
|
167
168
|
/>
|
|
168
169
|
}
|
|
169
170
|
|
|
@@ -175,7 +176,7 @@ export const Slider = (props: SliderProps) => {
|
|
|
175
176
|
content={content}
|
|
176
177
|
style={style}
|
|
177
178
|
key={idx}
|
|
178
|
-
onPress={() => trackMarksClickable ?
|
|
179
|
+
onPress={() => trackMarksClickable ? onInputValueChange(trackMarksProp[idx]) : null}
|
|
179
180
|
/>
|
|
180
181
|
})
|
|
181
182
|
}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { alert } from '@codeleap/modals'
|
|
2
2
|
import { useEffect, useMemo, useState } from '@codeleap/hooks'
|
|
3
3
|
import { FileInputImageSource, useFileInput } from '../FileInput'
|
|
4
4
|
import { SortablePhoto, SortablePhotosProps, WithId } from './types'
|
|
5
5
|
|
|
6
|
-
const SortableAlert = CreateOSAlert()
|
|
7
|
-
|
|
8
6
|
export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotosProps<T>) => {
|
|
9
7
|
const {
|
|
10
8
|
onChangePhotos,
|
|
@@ -145,7 +143,7 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
|
|
|
145
143
|
}
|
|
146
144
|
|
|
147
145
|
const handlePressPhoto = (photo: T, order: number) => {
|
|
148
|
-
|
|
146
|
+
alert.ask({
|
|
149
147
|
title: modalTitle,
|
|
150
148
|
body: modalBody,
|
|
151
149
|
options: [
|
|
@@ -153,9 +151,6 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
|
|
|
153
151
|
{ text: modalCameraText, onPress: () => handleOpenPicker('camera', photo, order) },
|
|
154
152
|
!!photo?.filename && { text: modalDeleteText, onPress: () => handleDeletePhoto(photo, order) },
|
|
155
153
|
],
|
|
156
|
-
// @ts-expect-error
|
|
157
|
-
closable: true,
|
|
158
|
-
isRow: false,
|
|
159
154
|
})
|
|
160
155
|
|
|
161
156
|
onPressPhoto?.(data, photo, order)
|
|
@@ -38,10 +38,11 @@ export const Switch = (props: SwitchProps) => {
|
|
|
38
38
|
const styles = useStylesFor(Switch.styleRegistryName, style)
|
|
39
39
|
|
|
40
40
|
const {
|
|
41
|
-
fieldHandle,
|
|
42
41
|
validation,
|
|
43
42
|
wrapperRef,
|
|
44
|
-
|
|
43
|
+
inputValue,
|
|
44
|
+
onInputValueChange,
|
|
45
|
+
} = useInputBase<boolean>(field, fields.boolean, { value, onValueChange })
|
|
45
46
|
|
|
46
47
|
const trackAnimation = useAnimatedVariantStyles({
|
|
47
48
|
variantStyles: styles,
|
|
@@ -51,16 +52,16 @@ export const Switch = (props: SwitchProps) => {
|
|
|
51
52
|
'worklet'
|
|
52
53
|
let disabledStyle = {}
|
|
53
54
|
if (disabled) {
|
|
54
|
-
disabledStyle =
|
|
55
|
+
disabledStyle = inputValue ? styles['track:disabled-on'] : styles['track:disabled-off']
|
|
55
56
|
}
|
|
56
|
-
const style =
|
|
57
|
+
const style = inputValue ? styles['track:on'] : styles['track:off']
|
|
57
58
|
|
|
58
59
|
return {
|
|
59
60
|
...style,
|
|
60
61
|
...disabledStyle,
|
|
61
62
|
}
|
|
62
63
|
},
|
|
63
|
-
dependencies: [
|
|
64
|
+
dependencies: [inputValue, disabled],
|
|
64
65
|
})
|
|
65
66
|
|
|
66
67
|
const thumbAnimation = useAnimatedVariantStyles({
|
|
@@ -71,34 +72,32 @@ export const Switch = (props: SwitchProps) => {
|
|
|
71
72
|
'worklet'
|
|
72
73
|
let disabledStyle = {}
|
|
73
74
|
if (disabled) {
|
|
74
|
-
disabledStyle =
|
|
75
|
+
disabledStyle = inputValue ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
|
|
75
76
|
}
|
|
76
|
-
const style =
|
|
77
|
+
const style = inputValue ? styles['thumb:on'] : styles['thumb:off']
|
|
77
78
|
return {
|
|
78
79
|
...style,
|
|
79
80
|
...disabledStyle,
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
},
|
|
83
|
-
dependencies: [
|
|
84
|
+
dependencies: [inputValue, disabled],
|
|
84
85
|
})
|
|
85
86
|
|
|
86
87
|
// @ts-expect-error
|
|
87
88
|
const _switchOnLeft = switchOnLeft ?? styles?.__props?.switchOnLeft
|
|
88
89
|
|
|
89
|
-
const hasError = validation
|
|
90
|
+
const hasError = validation?.showError || forceError
|
|
90
91
|
|
|
91
92
|
return <InputBase
|
|
92
93
|
{...inputBaseProps}
|
|
93
94
|
ref={wrapperRef}
|
|
94
95
|
debugName={debugName}
|
|
95
96
|
wrapper={Touchable}
|
|
96
|
-
error={hasError ? validation
|
|
97
|
+
error={hasError ? validation?.message || forceError : null}
|
|
97
98
|
style={styles}
|
|
98
99
|
wrapperProps={{
|
|
99
|
-
onPress: () =>
|
|
100
|
-
fieldHandle.setValue(!fieldHandle?.value)
|
|
101
|
-
},
|
|
100
|
+
onPress: () => onInputValueChange(!inputValue),
|
|
102
101
|
disabled,
|
|
103
102
|
rippleDisabled: true,
|
|
104
103
|
}}
|
|
@@ -47,8 +47,9 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
|
|
|
47
47
|
const styles = useStylesFor(TextInput.styleRegistryName, style)
|
|
48
48
|
|
|
49
49
|
const {
|
|
50
|
-
fieldHandle,
|
|
51
50
|
validation,
|
|
51
|
+
inputValue,
|
|
52
|
+
onInputValueChange,
|
|
52
53
|
innerInputRef,
|
|
53
54
|
wrapperRef,
|
|
54
55
|
isFocused,
|
|
@@ -91,7 +92,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
|
|
|
91
92
|
},
|
|
92
93
|
...masking,
|
|
93
94
|
} : {
|
|
94
|
-
onChangeText:
|
|
95
|
+
onChangeText: onInputValueChange,
|
|
95
96
|
}
|
|
96
97
|
|
|
97
98
|
const buttonModeProps = isPressable ? {
|
|
@@ -104,7 +105,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
|
|
|
104
105
|
ref={wrapperRef}
|
|
105
106
|
innerWrapper={isPressable ? Touchable : undefined}
|
|
106
107
|
debugName={debugName}
|
|
107
|
-
error={hasError ? validation
|
|
108
|
+
error={hasError ? validation?.message || forceError : null}
|
|
108
109
|
style={{
|
|
109
110
|
...styles,
|
|
110
111
|
innerWrapper: [
|
|
@@ -134,8 +135,8 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
|
|
|
134
135
|
textAlignVertical={multiline ? 'top' : undefined}
|
|
135
136
|
multiline={multiline}
|
|
136
137
|
{...textInputProps}
|
|
137
|
-
value={
|
|
138
|
-
onChangeText={
|
|
138
|
+
value={inputValue}
|
|
139
|
+
onChangeText={onInputValueChange}
|
|
139
140
|
onBlur={handleBlur}
|
|
140
141
|
onFocus={handleFocus}
|
|
141
142
|
style={[
|
|
@@ -33,7 +33,9 @@ export function useTextInput(props: Partial<TextInputProps>) {
|
|
|
33
33
|
validation,
|
|
34
34
|
innerInputRef,
|
|
35
35
|
wrapperRef,
|
|
36
|
-
|
|
36
|
+
onInputValueChange,
|
|
37
|
+
inputValue,
|
|
38
|
+
} = useInputBase<string>(field, fields.text, { value, onValueChange }, {
|
|
37
39
|
revealValue() {
|
|
38
40
|
setSecureTextEntry(false)
|
|
39
41
|
},
|
|
@@ -46,11 +48,11 @@ export function useTextInput(props: Partial<TextInputProps>) {
|
|
|
46
48
|
}, [setSecureTextEntry])
|
|
47
49
|
|
|
48
50
|
const handleBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
|
|
49
|
-
validation
|
|
51
|
+
validation?.onInputBlurred?.()
|
|
50
52
|
setIsFocused(false)
|
|
51
53
|
if (autoAdjustSelection) setCurrentSelection({ start: selectionStart })
|
|
52
54
|
onBlur?.(e)
|
|
53
|
-
}, [validation
|
|
55
|
+
}, [validation?.onInputBlurred, onBlur])
|
|
54
56
|
|
|
55
57
|
const handleFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
|
|
56
58
|
setIsFocused(true)
|
|
@@ -59,15 +61,15 @@ export function useTextInput(props: Partial<TextInputProps>) {
|
|
|
59
61
|
}, [onFocus])
|
|
60
62
|
|
|
61
63
|
const handleMaskChange = useCallback((masked, unmasked) => {
|
|
62
|
-
|
|
64
|
+
onInputValueChange(masking?.saveFormatted ? masked : masked)
|
|
63
65
|
if (onChangeMask) onChangeMask(masked, unmasked)
|
|
64
66
|
}, [masking?.saveFormatted, onChangeMask])
|
|
65
67
|
|
|
66
|
-
const hasMultipleLines = multiline &&
|
|
68
|
+
const hasMultipleLines = multiline && inputValue?.includes('\n')
|
|
67
69
|
|
|
68
|
-
const hasValue =
|
|
70
|
+
const hasValue = inputValue?.length > 0
|
|
69
71
|
|
|
70
|
-
const hasError = validation
|
|
72
|
+
const hasError = validation?.showError || forceError
|
|
71
73
|
|
|
72
74
|
return {
|
|
73
75
|
isFocused,
|
|
@@ -84,5 +86,7 @@ export function useTextInput(props: Partial<TextInputProps>) {
|
|
|
84
86
|
hasMultipleLines,
|
|
85
87
|
hasValue,
|
|
86
88
|
hasError,
|
|
89
|
+
inputValue,
|
|
90
|
+
onInputValueChange,
|
|
87
91
|
}
|
|
88
92
|
}
|
package/src/deprecated/index.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * as Permissions from './permissions'
|
|
1
|
+
export * as Permissions from './permissions'
|
|
2
|
+
export * as Modals from './permissions'
|
|
@@ -2,7 +2,6 @@ import React from 'react'
|
|
|
2
2
|
import { AnyFunction, TypeGuards } from '@codeleap/types'
|
|
3
3
|
import { onUpdate, useState } from '@codeleap/hooks'
|
|
4
4
|
import { PortalProvider } from '@gorhom/portal'
|
|
5
|
-
import { KeyboardProvider } from '../KeyboardAware'
|
|
6
5
|
|
|
7
6
|
export type AppModalProps = {
|
|
8
7
|
visible: boolean
|
|
@@ -38,7 +37,7 @@ export function Provider({ children }) {
|
|
|
38
37
|
return !!modals[name]?.visible
|
|
39
38
|
}
|
|
40
39
|
|
|
41
|
-
const toggleModal:TModalContext['toggleModal'] = (name, set?: boolean, props?: any) => {
|
|
40
|
+
const toggleModal: TModalContext['toggleModal'] = (name, set?: boolean, props?: any) => {
|
|
42
41
|
const visible = isVisible(name)
|
|
43
42
|
|
|
44
43
|
const newVisible = typeof set === 'boolean' ? set : !visible
|
|
@@ -58,7 +57,7 @@ export function Provider({ children }) {
|
|
|
58
57
|
})
|
|
59
58
|
}
|
|
60
59
|
|
|
61
|
-
const setModal:TModalContext['setModal'] = (name, to) => {
|
|
60
|
+
const setModal: TModalContext['setModal'] = (name, to) => {
|
|
62
61
|
|
|
63
62
|
setModals((current) => ({
|
|
64
63
|
...current,
|
|
@@ -72,7 +71,7 @@ export function Provider({ children }) {
|
|
|
72
71
|
|
|
73
72
|
// const codeleapCtx = useCodeleapContext()
|
|
74
73
|
const defaultDuration = 300
|
|
75
|
-
const transition:TModalContext['transition'] = (from, to, options) => {
|
|
74
|
+
const transition: TModalContext['transition'] = (from, to, options) => {
|
|
76
75
|
return new Promise((resolve) => {
|
|
77
76
|
setTimeout(() => {
|
|
78
77
|
|
|
@@ -80,7 +79,7 @@ export function Provider({ children }) {
|
|
|
80
79
|
toggleModal(to, true, options?.props)
|
|
81
80
|
return
|
|
82
81
|
}
|
|
83
|
-
const _options:ModalTransitionOptions = {
|
|
82
|
+
const _options: ModalTransitionOptions = {
|
|
84
83
|
duration: defaultDuration,
|
|
85
84
|
...options,
|
|
86
85
|
}
|
|
@@ -137,7 +136,7 @@ export function Provider({ children }) {
|
|
|
137
136
|
setModals(newModals)
|
|
138
137
|
}
|
|
139
138
|
|
|
140
|
-
return
|
|
139
|
+
return (
|
|
141
140
|
<ModalContext.Provider value={{
|
|
142
141
|
state: modals,
|
|
143
142
|
toggleModal,
|
|
@@ -155,8 +154,7 @@ export function Provider({ children }) {
|
|
|
155
154
|
{children}
|
|
156
155
|
</PortalProvider>
|
|
157
156
|
</ModalContext.Provider>
|
|
158
|
-
|
|
159
|
-
|
|
157
|
+
)
|
|
160
158
|
}
|
|
161
159
|
|
|
162
160
|
export function useModalContext() {
|
|
@@ -175,9 +173,9 @@ export type UseModalSequenceOptions = {
|
|
|
175
173
|
|
|
176
174
|
export function useModalSequence(ids: string[], options?: UseModalSequenceOptions) {
|
|
177
175
|
|
|
178
|
-
const _options:UseModalSequenceOptions = {
|
|
176
|
+
const _options: UseModalSequenceOptions = {
|
|
179
177
|
closeLastOnFinish: true,
|
|
180
|
-
onFinish: () => {},
|
|
178
|
+
onFinish: () => { },
|
|
181
179
|
resetOnFinish: false,
|
|
182
180
|
waitForLastToCloseBeforeCallingFinish: true,
|
|
183
181
|
...options,
|
|
@@ -231,7 +229,7 @@ export function useModalSequence(ids: string[], options?: UseModalSequenceOption
|
|
|
231
229
|
}
|
|
232
230
|
|
|
233
231
|
function goto(idxOrId: string | number, props?: any) {
|
|
234
|
-
let newId:string = null
|
|
232
|
+
let newId: string = null
|
|
235
233
|
if (TypeGuards.isString(idxOrId)) {
|
|
236
234
|
newId = idxOrId
|
|
237
235
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { usePrevious, onMount, onUpdate } from '@codeleap/hooks'
|
|
3
3
|
import { PropsOf } from '@codeleap/types'
|
|
4
|
-
import { useModalContext } from './
|
|
4
|
+
import { useModalContext } from './Context'
|
|
5
5
|
import { Portal } from '@gorhom/portal'
|
|
6
6
|
import { Modal as _Modal } from '../../components/Modal'
|
|
7
7
|
|
|
8
8
|
type UseManagedModalArgs = {
|
|
9
9
|
id?: string
|
|
10
|
-
initialVisible
|
|
10
|
+
initialVisible?: boolean
|
|
11
11
|
parent?: string
|
|
12
12
|
visible?: boolean
|
|
13
13
|
toggle?: PropsOf<typeof _Modal>['toggle']
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
function useManagedModal(props:UseManagedModalArgs) {
|
|
16
|
+
function useManagedModal(props: UseManagedModalArgs) {
|
|
17
17
|
const {
|
|
18
18
|
initialVisible = false,
|
|
19
19
|
parent,
|
|
@@ -61,7 +61,7 @@ export type ManagedModalProps<T = PropsOf<typeof _Modal>> = Omit<T, 'visible' |
|
|
|
61
61
|
absolute?: boolean
|
|
62
62
|
|
|
63
63
|
}
|
|
64
|
-
export const Modal:React.FC<ManagedModalProps> = ({
|
|
64
|
+
export const Modal: React.FC<ManagedModalProps> = ({
|
|
65
65
|
children,
|
|
66
66
|
absolute = true,
|
|
67
67
|
...props
|
|
@@ -81,4 +81,4 @@ export const Modal:React.FC<ManagedModalProps> = ({
|
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
return content
|
|
84
|
-
}
|
|
84
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useModalContext, useModalSequence, Provider } from './
|
|
1
|
+
import { useModalContext, useModalSequence, Provider } from './Context'
|
|
2
2
|
import { Modal, ManagedModalProps } from './components'
|
|
3
3
|
|
|
4
4
|
export const ModalManager = {
|
|
@@ -10,4 +10,4 @@ export const ModalManager = {
|
|
|
10
10
|
|
|
11
11
|
export type {
|
|
12
12
|
ManagedModalProps,
|
|
13
|
-
}
|
|
13
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { useContext, useState } from 'react'
|
|
2
|
-
import { useModalContext } from '../../utils/ModalManager/context'
|
|
3
2
|
import { onMount, onUpdate, useDebounce, usePrevious } from '@codeleap/hooks'
|
|
4
3
|
import { deepEqual } from '@codeleap/utils'
|
|
5
4
|
import { AppState, Linking } from 'react-native'
|
|
6
5
|
import { PermissionConfig, PermissionModalsConfig } from './types'
|
|
7
6
|
import { PermissionManager, PermissionTypes } from './package'
|
|
7
|
+
import { useModalContext } from '../modals/Context'
|
|
8
8
|
|
|
9
9
|
type TPermissionContext = {
|
|
10
10
|
state: Record<string, PermissionTypes.PermissionStatus>
|
package/src/index.ts
CHANGED
|
@@ -6,8 +6,7 @@ export * from './deprecated'
|
|
|
6
6
|
|
|
7
7
|
export { Linking } from 'react-native'
|
|
8
8
|
import uuid from 'react-native-uuid'
|
|
9
|
-
|
|
10
|
-
export { uuid, RNKeyboardAwareScrollView }
|
|
9
|
+
export { uuid }
|
|
11
10
|
export { MobileStyleRegistry } from './Registry'
|
|
12
11
|
|
|
13
12
|
import './modules/formConfig'
|
package/src/types/utility.ts
CHANGED
|
@@ -17,3 +17,11 @@ export type ChildrenProp = ReactNode | ReactNode[] | undefined
|
|
|
17
17
|
export type ReanimatedExitingAnimation = (values: ExitAnimationsValues) => LayoutAnimation
|
|
18
18
|
export type ReanimatedEnteringAnimation = (values: EntryAnimationsValues) => LayoutAnimation
|
|
19
19
|
|
|
20
|
+
export type GetKeyboardAwarePropsOptions = {
|
|
21
|
+
baseStyleProp?: 'style' | 'contentContainerStyle'
|
|
22
|
+
adapt?: 'height' | 'maxHeight' | 'paddingBottom' | 'marginBottom' | 'bottom'
|
|
23
|
+
enabled?: boolean
|
|
24
|
+
animated?: boolean
|
|
25
|
+
transition?: TransitionConfig
|
|
26
|
+
enableOnAndroid?: boolean
|
|
27
|
+
}
|
package/src/utils/index.ts
CHANGED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
type TKeyboardCtx = {
|
|
3
|
-
isVisible: boolean;
|
|
4
|
-
height: number;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
*
|
|
8
|
-
* @deprecated useKeyboard does not need to be wrapped in a provider
|
|
9
|
-
*/
|
|
10
|
-
export declare const KeyboardProvider: ({ children }: {
|
|
11
|
-
children: any;
|
|
12
|
-
}) => JSX.Element;
|
|
13
|
-
export declare const useKeyboard: () => TKeyboardCtx;
|
|
14
|
-
export {};
|