react-native-boxes 1.4.28 → 1.4.30
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/package.json +1 -1
- package/src/Modal.tsx +120 -63
- package/src/utils.ts +11 -0
package/package.json
CHANGED
package/src/Modal.tsx
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useContext, useEffect, useRef, useState } from 'react';
|
|
3
|
-
import { Animated, Button, Easing, LayoutChangeEvent, Linking, Modal, Platform, Pressable, ScrollView, StyleProp, StyleSheet, TextStyle, TouchableHighlight, TouchableOpacity, View, ViewProps, ViewStyle } from 'react-native';
|
|
3
|
+
import { Animated, Button, Easing, FlatList, LayoutChangeEvent, Linking, Modal, Platform, Pressable, ScrollView, StyleProp, StyleSheet, TextStyle, TouchableHighlight, TouchableOpacity, View, ViewProps, ViewStyle } from 'react-native';
|
|
4
4
|
import { getIcon, Icon, IconProps } from './Image';
|
|
5
5
|
import { getNavParamsFromDeeplink, isDesktop, isWeb } from './utils';
|
|
6
6
|
import { ThemeContext } from './ThemeContext';
|
|
7
7
|
import { Center, HBox, VBox, VPage } from './Box';
|
|
8
|
-
import { Subtitle, TextView, Title } from './Text';
|
|
8
|
+
import { Caption, Subtitle, TextView, Title } from './Text';
|
|
9
9
|
import { ButtonView, ButtonViewProps, LoadingButton, PressableView, TertiaryButtonView } from './Button';
|
|
10
10
|
import { CompositeTextInputView, CompositeTextInputViewProps } from './Input';
|
|
11
11
|
import * as WebBrowser from 'expo-web-browser';
|
|
@@ -369,6 +369,7 @@ export type DropDownViewOption = {
|
|
|
369
369
|
value: any
|
|
370
370
|
title?: string
|
|
371
371
|
}
|
|
372
|
+
|
|
372
373
|
export type DropDownViewProps = {
|
|
373
374
|
options: DropDownViewOption[]
|
|
374
375
|
selectedId: string,
|
|
@@ -376,6 +377,7 @@ export type DropDownViewProps = {
|
|
|
376
377
|
|
|
377
378
|
initialVisile?: Boolean,
|
|
378
379
|
title?: string,
|
|
380
|
+
listType?: 'sheet' | 'horizontal-list'
|
|
379
381
|
displayType?: 'button' | 'input',
|
|
380
382
|
onRenderOption?: (opt: DropDownViewOption) => any,
|
|
381
383
|
forceDialogSelectOnWeb?: Boolean
|
|
@@ -396,7 +398,7 @@ export const DropDownView = (props: DropDownViewProps) => {
|
|
|
396
398
|
let se = props.options.find(op => op.id == props.selectedId)
|
|
397
399
|
return se
|
|
398
400
|
};
|
|
399
|
-
|
|
401
|
+
const shouldShowLabel = props.listType == 'horizontal-list' ? !visible : true
|
|
400
402
|
if (Platform.OS == 'web' && !props.forceDialogSelectOnWeb) {
|
|
401
403
|
return (
|
|
402
404
|
<select
|
|
@@ -428,78 +430,132 @@ export const DropDownView = (props: DropDownViewProps) => {
|
|
|
428
430
|
</select>
|
|
429
431
|
)
|
|
430
432
|
}
|
|
431
|
-
|
|
432
433
|
else {
|
|
433
434
|
return (
|
|
434
435
|
<VBox style={props.style}>
|
|
435
|
-
<BottomSheet
|
|
436
|
-
swipeToCloseDisabled={props.swipeToCloseDisabled}
|
|
437
|
-
visible={visible as boolean}
|
|
438
|
-
onDismiss={() => {
|
|
439
|
-
setVisible(false)
|
|
440
|
-
}}
|
|
441
|
-
title={props.title || ''} >
|
|
442
|
-
{
|
|
443
|
-
props.options.map((opt, idx) => {
|
|
444
|
-
if (props.onRenderOption) {
|
|
445
|
-
return props.onRenderOption(opt)
|
|
446
|
-
}
|
|
447
|
-
return (
|
|
448
|
-
<TertiaryButtonView
|
|
449
|
-
onPress={() => {
|
|
450
|
-
setVisible(false)
|
|
451
|
-
props.onSelect(opt.id, opt)
|
|
452
|
-
}}
|
|
453
|
-
style={{
|
|
454
|
-
padding: 0,
|
|
455
|
-
paddingBottom: idx == props.options.length - 1 ? theme.dimens.space.md : 0,
|
|
456
|
-
paddingTop: idx == 0 ? theme.dimens.space.md : 0,
|
|
457
|
-
}}
|
|
458
|
-
key={opt.id} >{opt.title || opt.value}</TertiaryButtonView>
|
|
459
|
-
)
|
|
460
|
-
})
|
|
461
|
-
}
|
|
462
|
-
</BottomSheet>
|
|
463
436
|
|
|
464
437
|
{
|
|
465
|
-
|
|
438
|
+
(visible && props.listType == 'horizontal-list') ? (
|
|
439
|
+
<FlatList
|
|
440
|
+
ItemSeparatorComponent={() => {
|
|
441
|
+
return (
|
|
442
|
+
<View
|
|
443
|
+
style={{
|
|
444
|
+
height: "100%",
|
|
445
|
+
width: theme.dimens.space.sm,
|
|
446
|
+
backgroundColor: theme.colors.forground,
|
|
466
447
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
onPress={() => {
|
|
471
|
-
setVisible(true)
|
|
448
|
+
}}
|
|
449
|
+
/>
|
|
450
|
+
);
|
|
472
451
|
}}
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
452
|
+
horizontal={true}
|
|
453
|
+
data={props.options}
|
|
454
|
+
renderItem={(item) => {
|
|
455
|
+
const opt = item.item
|
|
456
|
+
if (props.onRenderOption) {
|
|
457
|
+
return props.onRenderOption(opt)
|
|
458
|
+
}
|
|
459
|
+
return (
|
|
460
|
+
<PressableView
|
|
461
|
+
onPress={() => {
|
|
462
|
+
props.onSelect(opt.id, opt)
|
|
463
|
+
}}>
|
|
464
|
+
<Center style={{
|
|
465
|
+
borderRadius: theme.dimens.space.md,
|
|
466
|
+
width: theme.dimens.space.xl * 1.5,
|
|
467
|
+
height: theme.dimens.space.xl * 1.5,
|
|
468
|
+
backgroundColor: props.selectedId == opt?.id ?
|
|
469
|
+
theme.colors.accent : theme.colors.background,
|
|
470
|
+
padding: theme.dimens.space.md
|
|
471
|
+
}}>
|
|
472
|
+
<Caption style={{
|
|
473
|
+
color: theme.colors.text,
|
|
474
|
+
}}>{opt?.title || opt.id}</Caption>
|
|
475
|
+
|
|
476
|
+
</Center>
|
|
477
|
+
</PressableView>
|
|
478
|
+
)
|
|
481
479
|
}}
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
480
|
+
keyExtractor={(item) => item?.id || `${Date.now()}`}
|
|
481
|
+
extraData={props.selectedId}
|
|
482
|
+
/>
|
|
483
|
+
) :
|
|
484
|
+
|
|
485
|
+
(
|
|
486
|
+
<BottomSheet
|
|
487
|
+
swipeToCloseDisabled={props.swipeToCloseDisabled}
|
|
488
|
+
visible={visible as boolean}
|
|
489
|
+
onDismiss={() => {
|
|
490
|
+
setVisible(false)
|
|
491
|
+
}}
|
|
492
|
+
title={props.title || ''} >
|
|
493
|
+
{
|
|
494
|
+
props.options.map((opt, idx) => {
|
|
495
|
+
if (props.onRenderOption) {
|
|
496
|
+
return props.onRenderOption(opt)
|
|
497
|
+
}
|
|
498
|
+
return (
|
|
499
|
+
<TertiaryButtonView
|
|
500
|
+
onPress={() => {
|
|
501
|
+
setVisible(false)
|
|
502
|
+
props.onSelect(opt.id, opt)
|
|
503
|
+
}}
|
|
504
|
+
style={{
|
|
505
|
+
padding: 0,
|
|
506
|
+
paddingBottom: idx == props.options.length - 1 ? theme.dimens.space.md : 0,
|
|
507
|
+
paddingTop: idx == 0 ? theme.dimens.space.md : 0,
|
|
508
|
+
}}
|
|
509
|
+
key={opt.id} >{opt.title || opt.value}</TertiaryButtonView>
|
|
510
|
+
)
|
|
511
|
+
})
|
|
512
|
+
}
|
|
513
|
+
</BottomSheet>
|
|
514
|
+
)
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
{
|
|
518
|
+
shouldShowLabel && (
|
|
519
|
+
displayType == 'button' ? (
|
|
520
|
+
|
|
521
|
+
//@ts-ignore
|
|
522
|
+
<ButtonView
|
|
486
523
|
{...props}
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
icon={"caret-down"}
|
|
490
|
-
pointerEvents="none"
|
|
491
|
-
//@ts-ignore
|
|
492
|
-
_textInputProps={{
|
|
493
|
-
caretHidden: true,
|
|
494
|
-
placeholder: props.title || 'select',
|
|
495
|
-
editable: false,
|
|
496
|
-
selectTextOnFocus: false
|
|
524
|
+
onPress={() => {
|
|
525
|
+
setVisible(true)
|
|
497
526
|
}}
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
527
|
+
text={getSelected()?.title || getSelected()?.id || 'select'} style={props.style}>
|
|
528
|
+
</ButtonView>
|
|
529
|
+
) : (
|
|
530
|
+
//@ts-ignore
|
|
531
|
+
<PressableView
|
|
532
|
+
{...props}
|
|
533
|
+
onPress={() => {
|
|
534
|
+
setVisible(true)
|
|
535
|
+
}}
|
|
536
|
+
>
|
|
537
|
+
<CompositeTextInputView
|
|
538
|
+
readOnly={true}
|
|
539
|
+
placeholder={props.title}
|
|
540
|
+
{...props}
|
|
541
|
+
value={getSelected()?.title || getSelected()?.id || props.title}
|
|
542
|
+
onIconPress={() => { setVisible(true) }}
|
|
543
|
+
icon={"caret-down"}
|
|
544
|
+
pointerEvents="none"
|
|
545
|
+
//@ts-ignore
|
|
546
|
+
_textInputProps={{
|
|
547
|
+
caretHidden: true,
|
|
548
|
+
placeholder: props.title || 'select',
|
|
549
|
+
editable: false,
|
|
550
|
+
selectTextOnFocus: false
|
|
551
|
+
}}
|
|
552
|
+
hint={props.title || 'select'}
|
|
553
|
+
initialText={getSelected()?.title || getSelected()?.id} />
|
|
554
|
+
</PressableView>
|
|
555
|
+
)
|
|
501
556
|
)
|
|
502
557
|
}
|
|
558
|
+
|
|
503
559
|
</VBox>
|
|
504
560
|
|
|
505
561
|
)
|
|
@@ -507,6 +563,7 @@ export const DropDownView = (props: DropDownViewProps) => {
|
|
|
507
563
|
}
|
|
508
564
|
|
|
509
565
|
|
|
566
|
+
|
|
510
567
|
export type ConfirmationDialogProps = {
|
|
511
568
|
visible: boolean,
|
|
512
569
|
title?: string | React.Component,
|
package/src/utils.ts
CHANGED
|
@@ -96,6 +96,17 @@ export function isWeb() {
|
|
|
96
96
|
return Platform.OS == 'web'
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
+
export function isNative() {
|
|
100
|
+
return Platform.OS !== 'web'
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export function isAndroid() {
|
|
104
|
+
return Platform.OS == 'android'
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export function isIOS() {
|
|
108
|
+
return Platform.OS == 'ios'
|
|
109
|
+
}
|
|
99
110
|
|
|
100
111
|
export function isDesktop() {
|
|
101
112
|
const windowWidth = Dimensions.get('window').width;
|