@hero-design/rn 8.0.0-4 → 8.0.0-5
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/.turbo/turbo-build.log +9 -9
- package/assets/fonts/hero-icons-mobile.ttf +0 -0
- package/es/index.js +378 -552
- package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
- package/lib/index.js +378 -552
- package/package.json +5 -5
- package/src/components/Alert/StyledAlert.tsx +2 -3
- package/src/components/Alert/__tests__/__snapshots__/index.spec.tsx.snap +6 -12
- package/src/components/Alert/index.tsx +3 -23
- package/src/components/Box/__tests__/__snapshots__/index.spec.tsx.snap +4 -26
- package/src/components/Button/Button.tsx +7 -16
- package/src/components/Button/StyledButton.tsx +0 -46
- package/src/components/Button/__tests__/Button.spec.tsx +10 -11
- package/src/components/Button/__tests__/StyledButton.spec.tsx +0 -3
- package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap +0 -91
- package/src/components/Card/StyledCard.tsx +2 -11
- package/src/components/Card/__tests__/StyledCard.spec.tsx +2 -14
- package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap +0 -32
- package/src/components/Card/__tests__/__snapshots__/index.spec.tsx.snap +0 -4
- package/src/components/Card/__tests__/index.spec.tsx +1 -13
- package/src/components/Card/index.tsx +5 -26
- package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
- package/src/components/Icon/IconList.ts +0 -8
- package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap +5 -7
- package/src/components/Select/MultiSelect/index.tsx +1 -20
- package/src/components/Select/SingleSelect/index.tsx +5 -24
- package/src/components/Select/types.ts +1 -11
- package/src/components/Switch/StyledSwitch.tsx +7 -12
- package/src/components/Switch/__tests__/StyledSwitch.spec.tsx +2 -2
- package/src/components/Switch/__tests__/__snapshots__/StyledSwitch.spec.tsx.snap +10 -15
- package/src/components/Switch/__tests__/__snapshots__/index.spec.tsx.snap +8 -12
- package/src/components/Switch/index.tsx +6 -22
- package/src/components/Tabs/ScrollableTabs.tsx +1 -6
- package/src/components/Tabs/TabWithBadge.tsx +1 -15
- package/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx +3 -1
- package/src/components/Tabs/__tests__/TabWithBadge.spec.tsx +4 -1
- package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap +4 -3
- package/src/components/Tabs/__tests__/__snapshots__/TabWithBadge.spec.tsx.snap +2 -32
- package/src/components/Tabs/__tests__/__snapshots__/index.spec.tsx.snap +1 -2
- package/src/components/Tabs/__tests__/index.spec.tsx +3 -1
- package/src/components/Tabs/index.tsx +12 -24
- package/src/components/Tag/StyledTag.tsx +0 -1
- package/src/components/Tag/__tests__/Tag.spec.tsx +0 -9
- package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap +0 -40
- package/src/components/Tag/index.tsx +3 -16
- package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +4 -63
- package/src/theme/components/switch.ts +4 -14
- package/src/theme/components/tag.ts +0 -2
- package/src/theme/global/colors/swag.ts +1 -20
- package/src/theme/global/colors/types.ts +1 -58
- package/src/utils/hooks.ts +1 -1
- package/types/components/Alert/StyledAlert.d.ts +0 -1
- package/types/components/Alert/index.d.ts +1 -6
- package/types/components/Button/Button.d.ts +2 -3
- package/types/components/Button/StyledButton.d.ts +1 -1
- package/types/components/Card/StyledCard.d.ts +1 -8
- package/types/components/Card/index.d.ts +2 -8
- package/types/components/Icon/IconList.d.ts +1 -1
- package/types/components/Icon/index.d.ts +1 -1
- package/types/components/Icon/utils.d.ts +1 -1
- package/types/components/Select/MultiSelect/index.d.ts +1 -1
- package/types/components/Select/SingleSelect/index.d.ts +1 -1
- package/types/components/Select/index.d.ts +1 -1
- package/types/components/Select/types.d.ts +1 -11
- package/types/components/Switch/StyledSwitch.d.ts +0 -4
- package/types/components/Switch/index.d.ts +1 -6
- package/types/components/Tabs/TabWithBadge.d.ts +1 -2
- package/types/components/Tabs/index.d.ts +2 -3
- package/types/components/Tag/StyledTag.d.ts +1 -1
- package/types/components/Tag/index.d.ts +2 -2
- package/types/theme/components/switch.d.ts +4 -14
- package/types/theme/components/tag.d.ts +0 -2
- package/types/theme/global/colors/types.d.ts +1 -52
- package/types/theme/global/index.d.ts +0 -47
- package/src/theme/__tests__/ensureCompatibleWithV7.spec.tsx +0 -13
- package/src/theme/global/colors/legacySystemPalette.ts +0 -53
|
@@ -13,7 +13,6 @@ exports[`Card renders correctly when intent is info 1`] = `
|
|
|
13
13
|
]
|
|
14
14
|
}
|
|
15
15
|
themeIntent="info"
|
|
16
|
-
themeVariant="basic"
|
|
17
16
|
>
|
|
18
17
|
<Text
|
|
19
18
|
style={
|
|
@@ -51,7 +50,6 @@ exports[`Card renders correctly when intent is primary 1`] = `
|
|
|
51
50
|
]
|
|
52
51
|
}
|
|
53
52
|
themeIntent="primary"
|
|
54
|
-
themeVariant="basic"
|
|
55
53
|
>
|
|
56
54
|
<Text
|
|
57
55
|
style={
|
|
@@ -89,7 +87,6 @@ exports[`Card renders correctly when intent is success 1`] = `
|
|
|
89
87
|
]
|
|
90
88
|
}
|
|
91
89
|
themeIntent="success"
|
|
92
|
-
themeVariant="basic"
|
|
93
90
|
>
|
|
94
91
|
<Text
|
|
95
92
|
style={
|
|
@@ -125,7 +122,6 @@ exports[`Card renders correctly when intent is undefined 1`] = `
|
|
|
125
122
|
undefined,
|
|
126
123
|
]
|
|
127
124
|
}
|
|
128
|
-
themeVariant="basic"
|
|
129
125
|
>
|
|
130
126
|
<Text
|
|
131
127
|
style={
|
|
@@ -7,7 +7,7 @@ import Typography from '../../Typography';
|
|
|
7
7
|
describe('Card', () => {
|
|
8
8
|
it('renders basic card', () => {
|
|
9
9
|
const { queryAllByTestId } = renderWithTheme(
|
|
10
|
-
<Card testID="card"
|
|
10
|
+
<Card testID="card">
|
|
11
11
|
<View testID="child-view" />
|
|
12
12
|
</Card>
|
|
13
13
|
);
|
|
@@ -17,18 +17,6 @@ describe('Card', () => {
|
|
|
17
17
|
expect(queryAllByTestId('data-card-indicator')).toHaveLength(0);
|
|
18
18
|
});
|
|
19
19
|
|
|
20
|
-
it('renders data card', () => {
|
|
21
|
-
const { queryAllByTestId } = renderWithTheme(
|
|
22
|
-
<Card testID="card" variant="data">
|
|
23
|
-
<View testID="child-view" />
|
|
24
|
-
</Card>
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
expect(queryAllByTestId('card')).toHaveLength(1);
|
|
28
|
-
expect(queryAllByTestId('child-view')).toHaveLength(1);
|
|
29
|
-
expect(queryAllByTestId('data-card-indicator')).toHaveLength(1);
|
|
30
|
-
});
|
|
31
|
-
|
|
32
20
|
it.each`
|
|
33
21
|
intent
|
|
34
22
|
${undefined}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { ReactNode } from 'react';
|
|
3
|
-
import
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
|
|
4
4
|
import DataCard from './DataCard';
|
|
5
|
-
import { StyledCard
|
|
6
|
-
import { useDeprecation } from '../../utils/hooks';
|
|
5
|
+
import { StyledCard } from './StyledCard';
|
|
7
6
|
|
|
8
7
|
interface CardProps extends ViewProps {
|
|
9
8
|
/**
|
|
@@ -14,12 +13,6 @@ interface CardProps extends ViewProps {
|
|
|
14
13
|
* Visual intent color to apply to card.
|
|
15
14
|
*/
|
|
16
15
|
intent?: 'primary' | 'success' | 'warning';
|
|
17
|
-
/**
|
|
18
|
-
* Card type.
|
|
19
|
-
* This is now deprecated. If you want to use "data" variant, please use Card.Data instead.
|
|
20
|
-
* @deprecated
|
|
21
|
-
*/
|
|
22
|
-
variant?: 'basic' | 'data';
|
|
23
16
|
/**
|
|
24
17
|
* Additional style.
|
|
25
18
|
*/
|
|
@@ -30,23 +23,9 @@ interface CardProps extends ViewProps {
|
|
|
30
23
|
testID?: string;
|
|
31
24
|
}
|
|
32
25
|
|
|
33
|
-
const Card = ({
|
|
34
|
-
variant: _variant,
|
|
35
|
-
intent,
|
|
36
|
-
children,
|
|
37
|
-
...nativeProps
|
|
38
|
-
}: CardProps): JSX.Element => {
|
|
39
|
-
const variant: CardProps['variant'] =
|
|
40
|
-
_variant === undefined ? 'basic' : _variant;
|
|
41
|
-
|
|
42
|
-
useDeprecation(
|
|
43
|
-
"Card's variant prop is deprecated and will be removed in the next major release.\nPlease remove it or use Card.Data instead.",
|
|
44
|
-
_variant !== undefined
|
|
45
|
-
);
|
|
46
|
-
|
|
26
|
+
const Card = ({ intent, children, ...nativeProps }: CardProps): JSX.Element => {
|
|
47
27
|
return (
|
|
48
|
-
<StyledCard {...nativeProps}
|
|
49
|
-
{variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
|
|
28
|
+
<StyledCard {...nativeProps} themeIntent={intent}>
|
|
50
29
|
{children}
|
|
51
30
|
</StyledCard>
|
|
52
31
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bookmark":59011,"box-check":59012,"box":59013,"buildings":59014,"cake":59015,"calendar-clock":59016,"calendar":59017,"candy-box-menu":59018,"
|
|
1
|
+
{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bookmark":59011,"box-check":59012,"box":59013,"buildings":59014,"cake":59015,"calendar-clock":59016,"calendar":59017,"candy-box-menu":59018,"caret-down-small":59019,"caret-down":59020,"caret-left-small":59021,"caret-left":59022,"caret-right-small":59023,"caret-right":59024,"caret-up-small":59025,"caret-up":59026,"check-radio":59027,"circle-add":59028,"circle-cancel":59029,"circle-check":59030,"circle-down":59031,"circle-info":59032,"circle-left":59033,"circle-ok":59034,"circle-pencil":59035,"circle-question":59036,"circle-remove":59037,"circle-right":59038,"circle-up":59039,"circle-warning":59040,"clock-3":59041,"clock":59042,"cloud-download":59043,"cloud-upload":59044,"cog":59045,"coin":59046,"contacts":59047,"credit-card":59048,"diamond":59049,"direction-arrows":59050,"directory":59051,"document":59052,"dollar-coin-shine":59053,"double-buildings":59054,"edit-template":59055,"envelope":59056,"expense":59057,"eye-circle":59058,"eye-invisible":59059,"eye":59060,"face-meh":59061,"face-sad":59062,"face-smiley":59063,"feed":59064,"feedbacks":59065,"file-certified":59066,"file-clone":59067,"file-copy":59068,"file-csv":59069,"file-dispose":59070,"file-doc":59071,"file-excel":59072,"file-export":59073,"file-lock":59074,"file-pdf":59075,"file-powerpoint":59076,"file-search":59077,"file-secured":59078,"file-sheets":59079,"file-slide":59080,"file-verified":59081,"file-word":59082,"file":59083,"filter":59084,"folder-user":59085,"folder":59086,"format-bold":59087,"format-heading1":59088,"format-heading2":59089,"format-italic":59090,"format-list-bulleted":59091,"format-list-numbered":59092,"format-underlined":59093,"funnel-filter":59094,"global-dollar":59095,"globe":59096,"graduation-cap":59097,"graph":59098,"happy-sun":59099,"health-bag":59100,"heart":59101,"home":59102,"image":59103,"import":59104,"incident-siren":59105,"instapay":59106,"list":59107,"loading-2":59108,"loading":59109,"location":59110,"lock":59111,"looks-one":59112,"looks-two":59113,"media-content":59114,"menu":59115,"moneybag":59116,"moon":59117,"multiple-stars":59118,"multiple-users":59119,"node":59120,"open-folder":59121,"paperclip":59122,"payment-summary":59123,"pencil":59124,"phone":59125,"piggy-bank":59126,"plane":59127,"play-circle":59128,"print":59129,"raising-hands":59130,"reply-arrow":59131,"reply":59132,"reschedule":59133,"rostering":59134,"save":59135,"schedule-send":59136,"schedule":59137,"search-person":59138,"send":59139,"speaker-active":59140,"speaker":59141,"star-award":59142,"star-badge":59143,"star-medal":59144,"star":59145,"steps-circle":59146,"stopwatch":59147,"suitcase":59148,"survey":59149,"swag":59150,"switch":59151,"tag":59152,"target":59153,"teams":59154,"timesheet":59155,"touch-id":59156,"trash-bin":59157,"unlock":59158,"user":59159,"video-1":59160,"video-2":59161,"wallet":59162,"warning":59163,"activate-outlined":59164,"add-credit-card-outlined":59165,"add-person-outlined":59166,"add-section-outlined":59167,"add-time-outlined":59168,"add":59169,"adjustment-outlined":59170,"alignment-2-outlined":59171,"alignment-outlined":59172,"all-caps":59173,"arrow-down":59174,"arrow-downwards":59175,"arrow-left":59176,"arrow-leftwards":59177,"arrow-right":59178,"arrow-rightwards":59179,"arrow-up":59180,"arrow-upwards":59181,"at-sign":59182,"bell-active-outlined":59183,"bell-outlined":59184,"bell-slash-outlined":59185,"billing-outlined":59186,"body-outlined":59187,"bold":59188,"bookmark-added-outlined":59189,"bookmark-outlined":59190,"box-check-outlined":59191,"box-outlined":59192,"bullet-points":59193,"cake-outlined":59194,"calendar-dates-outlined":59195,"calendar-star-outlined":59196,"camera-outlined":59197,"cancel":59198,"chat-bubble-outlined":59199,"chat-unread-outlined":59200,"checkmark":59201,"circle-add-outlined":59202,"circle-cancel-outlined":59203,"circle-down-outlined":59204,"circle-info-outlined":59205,"circle-left-outlined":59206,"circle-ok-outlined":59207,"circle-question-outlined":59208,"circle-remove-outlined":59209,"circle-right-outlined":59210,"circle-up-outlined":59211,"circle-warning-outlined":59212,"clock-2-outlined":59213,"clock-outlined":59214,"cog-outlined":59215,"coin-outlined":59216,"comment-outlined":59217,"contacts-outlined":59218,"credit-card-outlined":59219,"cup-outlined":59220,"direction-arrows-outlined":59221,"directory-outlined":59222,"document-outlined":59223,"dollar-card-outlined":59224,"dollar-coin-shine-outlined":59225,"dollar-sign":59226,"double-buildings-outlined":59227,"double-left-arrows":59228,"double-right-arrows":59229,"download-outlined":59230,"edit-template-outlined":59231,"email-outlined":59232,"enter-arrow":59233,"envelope-outlined":59234,"expense-outlined":59235,"explore-outlined":59236,"external-link":59237,"eye-invisible-outlined":59238,"eye-outlined":59239,"face-id":59240,"face-meh-outlined":59241,"face-open-smiley-outlined":59242,"face-sad-outlined":59243,"face-smiley-outlined":59244,"feed-outlined":59245,"file-certified-outlined":59246,"file-clone-outlined":59247,"file-copy-outlined":59248,"file-dispose-outlined":59249,"file-dollar-outlined":59250,"file-download-outlined":59251,"file-export-outlined":59252,"file-lock-outlined":59253,"file-outlined":59254,"file-search-outlined":59255,"file-secured-outlined":59256,"file-verified-outlined":59257,"filter-outlined":59258,"folder-outlined":59259,"folder-user-outlined":59260,"funnel-filter-outline":59261,"graph-outlined":59262,"hand-holding-user-outlined":59263,"happy-sun-outlined":59264,"health-bag-outlined":59265,"heart-outlined":59266,"home-active-outlined":59267,"home-outlined":59268,"id-card-outlined":59269,"image-outlined":59270,"import-outlined":59271,"instapay-outlined":59272,"italic":59273,"link-1":59274,"link-2":59275,"list-outlined":59276,"live-help-outlined":59277,"location-outlined":59278,"lock-outlined":59279,"locked-file-outlined":59280,"log-out":59281,"media-content-outlined":59282,"menu-close":59283,"menu-expand":59284,"menu-fold-outlined":59285,"menu-unfold-outlined":59286,"moneybag-outlined":59287,"moon-outlined":59288,"more-horizontal":59289,"more-vertical":59290,"multiple-folders-outlined":59291,"multiple-users-outlined":59292,"near-me-outlined":59293,"node-outlined":59294,"number-points":59295,"number":59296,"payment-summary-outlined":59297,"payslip-outlined":59298,"pencil-outlined":59299,"percentage":59300,"phone-outlined":59301,"piggy-bank-outlined":59302,"plane-outlined":59303,"play-circle-outlined":59304,"print-outlined":59305,"qr-code-outlined":59306,"re-assign":59307,"redeem":59308,"refresh":59309,"remove":59310,"reply-outlined":59311,"restart":59312,"return-arrow":59313,"rostering-outlined":59314,"save-outlined":59315,"schedule-outlined":59316,"search-outlined":59317,"search-secured-outlined":59318,"send-outlined":59319,"share-1":59320,"share-2":59321,"share-outlined":59322,"single-down-arrow":59323,"single-left-arrow":59324,"single-right-arrow":59325,"single-up-arrow":59326,"speaker-active-outlined":59327,"speaker-outlined":59328,"star-outlined":59329,"stopwatch-outlined":59330,"strikethrough":59331,"suitcase-clock-outlined":59332,"suitcase-outlined":59333,"survey-outlined":59334,"switch-outlined":59335,"sync":59336,"target-outlined":59337,"timesheet-outlined":59338,"transfer":59339,"trash-bin-outlined":59340,"umbrela-outlined":59341,"unavailable":59342,"underline":59343,"unlock-outlined":59344,"upload-outlined":59345,"user-circle-outlined":59346,"user-gear-outlined":59347,"user-outlined":59348,"user-rectangle-outlined":59349,"video-1-outlined":59350,"video-2-outlined":59351,"wallet-outlined":59352}
|
|
@@ -19,14 +19,6 @@ const IconList = [
|
|
|
19
19
|
'calendar-clock',
|
|
20
20
|
'calendar',
|
|
21
21
|
'candy-box-menu',
|
|
22
|
-
'carat-down-small',
|
|
23
|
-
'carat-down',
|
|
24
|
-
'carat-left-small',
|
|
25
|
-
'carat-left',
|
|
26
|
-
'carat-right-small',
|
|
27
|
-
'carat-right',
|
|
28
|
-
'carat-up-small',
|
|
29
|
-
'carat-up',
|
|
30
22
|
'caret-down-small',
|
|
31
23
|
'caret-down',
|
|
32
24
|
'caret-left-small',
|
|
@@ -735,16 +735,15 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
|
|
|
735
735
|
"backgroundColor": "#401960",
|
|
736
736
|
"borderRadius": 999,
|
|
737
737
|
"display": "flex",
|
|
738
|
-
"height":
|
|
738
|
+
"height": 24,
|
|
739
739
|
"justifyContent": "center",
|
|
740
740
|
"paddingHorizontal": 4,
|
|
741
|
-
"width":
|
|
741
|
+
"width": 48,
|
|
742
742
|
},
|
|
743
743
|
undefined,
|
|
744
744
|
]
|
|
745
745
|
}
|
|
746
746
|
testID="switch"
|
|
747
|
-
themeSize="medium"
|
|
748
747
|
themeVariant="checked"
|
|
749
748
|
>
|
|
750
749
|
<View
|
|
@@ -754,12 +753,11 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
|
|
|
754
753
|
Object {
|
|
755
754
|
"backgroundColor": "#ffffff",
|
|
756
755
|
"borderRadius": 999,
|
|
757
|
-
"height":
|
|
758
|
-
"left":
|
|
759
|
-
"width":
|
|
756
|
+
"height": 16,
|
|
757
|
+
"left": 24,
|
|
758
|
+
"width": 16,
|
|
760
759
|
}
|
|
761
760
|
}
|
|
762
|
-
themeSize="medium"
|
|
763
761
|
/>
|
|
764
762
|
</View>
|
|
765
763
|
</View>
|
|
@@ -4,7 +4,6 @@ import type {
|
|
|
4
4
|
TextInputProps as NativeTextInputProps,
|
|
5
5
|
} from 'react-native';
|
|
6
6
|
import { TouchableOpacity, View } from 'react-native';
|
|
7
|
-
import { useDeprecation } from '../../../utils/hooks';
|
|
8
7
|
import BottomSheet from '../../BottomSheet';
|
|
9
8
|
import Box from '../../Box';
|
|
10
9
|
import TextInput from '../../TextInput';
|
|
@@ -56,7 +55,6 @@ function MultiSelect<V, T extends OptionType<V>>({
|
|
|
56
55
|
loading = false,
|
|
57
56
|
inputProps,
|
|
58
57
|
onConfirm,
|
|
59
|
-
onDimiss,
|
|
60
58
|
onDismiss,
|
|
61
59
|
onEndReached,
|
|
62
60
|
onQueryChange,
|
|
@@ -68,7 +66,6 @@ function MultiSelect<V, T extends OptionType<V>>({
|
|
|
68
66
|
editable = true,
|
|
69
67
|
disabled = false,
|
|
70
68
|
required,
|
|
71
|
-
numberOfLines,
|
|
72
69
|
style,
|
|
73
70
|
testID,
|
|
74
71
|
value,
|
|
@@ -84,21 +81,6 @@ function MultiSelect<V, T extends OptionType<V>>({
|
|
|
84
81
|
.map((opt) => opt.text)
|
|
85
82
|
.join(', ');
|
|
86
83
|
|
|
87
|
-
useDeprecation(
|
|
88
|
-
"Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.",
|
|
89
|
-
onDimiss !== undefined
|
|
90
|
-
);
|
|
91
|
-
|
|
92
|
-
useDeprecation(
|
|
93
|
-
"Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.",
|
|
94
|
-
numberOfLines !== undefined
|
|
95
|
-
);
|
|
96
|
-
|
|
97
|
-
useDeprecation(
|
|
98
|
-
"Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.",
|
|
99
|
-
inputProps?.required !== undefined
|
|
100
|
-
);
|
|
101
|
-
|
|
102
84
|
useEffect(() => {
|
|
103
85
|
setSelectingValue(value);
|
|
104
86
|
}, [open]);
|
|
@@ -116,7 +98,6 @@ function MultiSelect<V, T extends OptionType<V>>({
|
|
|
116
98
|
}
|
|
117
99
|
<View pointerEvents="none">
|
|
118
100
|
<TextInput
|
|
119
|
-
numberOfLines={numberOfLines}
|
|
120
101
|
{...inputProps}
|
|
121
102
|
label={label}
|
|
122
103
|
value={displayedValue}
|
|
@@ -141,7 +122,7 @@ function MultiSelect<V, T extends OptionType<V>>({
|
|
|
141
122
|
<BottomSheet
|
|
142
123
|
open={open}
|
|
143
124
|
onRequestClose={() => setOpen(false)}
|
|
144
|
-
onDismiss={onDismiss
|
|
125
|
+
onDismiss={onDismiss}
|
|
145
126
|
header={label}
|
|
146
127
|
style={{
|
|
147
128
|
paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
|
|
@@ -1,21 +1,20 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { TouchableOpacity, View } from 'react-native';
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
|
3
2
|
import type {
|
|
4
3
|
SectionList,
|
|
5
4
|
TextInputProps as NativeTextInputProps,
|
|
6
5
|
} from 'react-native';
|
|
6
|
+
import { TouchableOpacity, View } from 'react-native';
|
|
7
7
|
import BottomSheet from '../../BottomSheet';
|
|
8
|
-
import OptionList from './OptionList';
|
|
9
8
|
import TextInput from '../../TextInput';
|
|
10
|
-
import { StyledSearchBar } from '../StyledSelect';
|
|
11
9
|
import {
|
|
12
10
|
getScrollParams,
|
|
13
11
|
toFlatOptions,
|
|
14
12
|
toSections,
|
|
15
13
|
useKeyboard,
|
|
16
14
|
} from '../helpers';
|
|
15
|
+
import { StyledSearchBar } from '../StyledSelect';
|
|
17
16
|
import type { OptionType, SectionType, SelectProps } from '../types';
|
|
18
|
-
import
|
|
17
|
+
import OptionList from './OptionList';
|
|
19
18
|
|
|
20
19
|
export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
|
|
21
20
|
extends SelectProps<V, T> {
|
|
@@ -41,7 +40,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
|
|
|
41
40
|
loading = false,
|
|
42
41
|
inputProps,
|
|
43
42
|
onConfirm,
|
|
44
|
-
onDimiss,
|
|
45
43
|
onDismiss,
|
|
46
44
|
onEndReached,
|
|
47
45
|
onQueryChange,
|
|
@@ -53,7 +51,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
|
|
|
53
51
|
editable = true,
|
|
54
52
|
disabled = false,
|
|
55
53
|
required,
|
|
56
|
-
numberOfLines,
|
|
57
54
|
style,
|
|
58
55
|
testID,
|
|
59
56
|
value,
|
|
@@ -65,21 +62,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
|
|
|
65
62
|
const flatOptions = toFlatOptions(options);
|
|
66
63
|
const displayedValue = flatOptions.find((opt) => value === opt.value)?.text;
|
|
67
64
|
|
|
68
|
-
useDeprecation(
|
|
69
|
-
"Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.",
|
|
70
|
-
onDimiss !== undefined
|
|
71
|
-
);
|
|
72
|
-
|
|
73
|
-
useDeprecation(
|
|
74
|
-
"Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.",
|
|
75
|
-
numberOfLines !== undefined
|
|
76
|
-
);
|
|
77
|
-
|
|
78
|
-
useDeprecation(
|
|
79
|
-
"Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.",
|
|
80
|
-
inputProps?.required !== undefined
|
|
81
|
-
);
|
|
82
|
-
|
|
83
65
|
return (
|
|
84
66
|
<>
|
|
85
67
|
<View
|
|
@@ -93,7 +75,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
|
|
|
93
75
|
}
|
|
94
76
|
<View pointerEvents="none">
|
|
95
77
|
<TextInput
|
|
96
|
-
numberOfLines={numberOfLines}
|
|
97
78
|
{...inputProps}
|
|
98
79
|
label={label}
|
|
99
80
|
value={displayedValue}
|
|
@@ -118,7 +99,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
|
|
|
118
99
|
<BottomSheet
|
|
119
100
|
open={open}
|
|
120
101
|
onRequestClose={() => setOpen(false)}
|
|
121
|
-
onDismiss={onDismiss
|
|
102
|
+
onDismiss={onDismiss}
|
|
122
103
|
header={label}
|
|
123
104
|
style={{
|
|
124
105
|
paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
|
|
@@ -64,11 +64,6 @@ export interface SelectProps<V, T extends OptionType<V>>
|
|
|
64
64
|
* Search bar onChangeText event handler
|
|
65
65
|
*/
|
|
66
66
|
onQueryChange?: (value: string) => void;
|
|
67
|
-
/**
|
|
68
|
-
* @deprecated due to typo.
|
|
69
|
-
* Please use onDismiss instead.
|
|
70
|
-
*/
|
|
71
|
-
onDimiss?: () => void;
|
|
72
67
|
/**
|
|
73
68
|
* Event handler when selection dismiss
|
|
74
69
|
*/
|
|
@@ -86,7 +81,7 @@ export interface SelectProps<V, T extends OptionType<V>>
|
|
|
86
81
|
* Required is deprecated and will be removed in the next major release.
|
|
87
82
|
* Please use the outer required instead.
|
|
88
83
|
*/
|
|
89
|
-
inputProps?: Pick<TextInputProps, 'loading' | '
|
|
84
|
+
inputProps?: Pick<TextInputProps, 'loading' | 'numberOfLines'>;
|
|
90
85
|
/**
|
|
91
86
|
* Field label.
|
|
92
87
|
*/
|
|
@@ -99,9 +94,4 @@ export interface SelectProps<V, T extends OptionType<V>>
|
|
|
99
94
|
* Testing id of the component.
|
|
100
95
|
*/
|
|
101
96
|
testID?: string;
|
|
102
|
-
/**
|
|
103
|
-
* @deprecated
|
|
104
|
-
* Please use inputProps.numberOfLines instead.
|
|
105
|
-
*/
|
|
106
|
-
numberOfLines?: number;
|
|
107
97
|
}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import styled from '@emotion/native';
|
|
2
2
|
import { Animated, View } from 'react-native';
|
|
3
3
|
|
|
4
|
-
type ThemeSize = 'small' | 'medium';
|
|
5
|
-
|
|
6
4
|
export type Variant =
|
|
7
5
|
| 'checked'
|
|
8
6
|
| 'unchecked'
|
|
@@ -11,22 +9,19 @@ export type Variant =
|
|
|
11
9
|
|
|
12
10
|
const StyledWrapper = styled(View)<{
|
|
13
11
|
themeVariant: Variant;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
paddingHorizontal: theme.__hd__.switch.spaces[themeSize],
|
|
12
|
+
}>(({ theme, themeVariant }) => ({
|
|
13
|
+
height: theme.__hd__.switch.sizes.height,
|
|
14
|
+
width: theme.__hd__.switch.sizes.width,
|
|
15
|
+
paddingHorizontal: theme.__hd__.switch.spaces.paddingHorizontal,
|
|
19
16
|
borderRadius: theme.__hd__.switch.radii.rounded,
|
|
20
17
|
backgroundColor: theme.__hd__.switch.colors.backgroundColors[themeVariant],
|
|
21
18
|
display: 'flex',
|
|
22
19
|
justifyContent: 'center',
|
|
23
20
|
}));
|
|
24
21
|
|
|
25
|
-
const StyledKnot = styled(Animated.View)
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
width: theme.__hd__.switch.sizes.thumbs[themeSize],
|
|
29
|
-
height: theme.__hd__.switch.sizes.thumbs[themeSize],
|
|
22
|
+
const StyledKnot = styled(Animated.View)(({ theme }) => ({
|
|
23
|
+
width: theme.__hd__.switch.sizes.thumb,
|
|
24
|
+
height: theme.__hd__.switch.sizes.thumb,
|
|
30
25
|
backgroundColor: theme.__hd__.switch.colors.thumb,
|
|
31
26
|
borderRadius: theme.__hd__.switch.radii.rounded,
|
|
32
27
|
}));
|
|
@@ -11,7 +11,7 @@ describe('StyledWrapper', () => {
|
|
|
11
11
|
${'disabled-checked'}
|
|
12
12
|
`('renders correct style with variant $variant', ({ variant }) => {
|
|
13
13
|
const { toJSON } = renderWithTheme(
|
|
14
|
-
<StyledWrapper themeVariant={variant}
|
|
14
|
+
<StyledWrapper themeVariant={variant} />
|
|
15
15
|
);
|
|
16
16
|
expect(toJSON()).toMatchSnapshot();
|
|
17
17
|
});
|
|
@@ -19,7 +19,7 @@ describe('StyledWrapper', () => {
|
|
|
19
19
|
|
|
20
20
|
describe('StyledKnot', () => {
|
|
21
21
|
it('renders correct style', () => {
|
|
22
|
-
const { toJSON } = renderWithTheme(<StyledKnot
|
|
22
|
+
const { toJSON } = renderWithTheme(<StyledKnot />);
|
|
23
23
|
expect(toJSON()).toMatchSnapshot();
|
|
24
24
|
});
|
|
25
25
|
});
|
|
@@ -8,11 +8,10 @@ exports[`StyledKnot renders correct style 1`] = `
|
|
|
8
8
|
Object {
|
|
9
9
|
"backgroundColor": "#ffffff",
|
|
10
10
|
"borderRadius": 999,
|
|
11
|
-
"height":
|
|
12
|
-
"width":
|
|
11
|
+
"height": 16,
|
|
12
|
+
"width": 16,
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
themeSize="medium"
|
|
16
15
|
/>
|
|
17
16
|
`;
|
|
18
17
|
|
|
@@ -24,15 +23,14 @@ exports[`StyledWrapper renders correct style with variant checked 1`] = `
|
|
|
24
23
|
"backgroundColor": "#401960",
|
|
25
24
|
"borderRadius": 999,
|
|
26
25
|
"display": "flex",
|
|
27
|
-
"height":
|
|
26
|
+
"height": 24,
|
|
28
27
|
"justifyContent": "center",
|
|
29
28
|
"paddingHorizontal": 4,
|
|
30
|
-
"width":
|
|
29
|
+
"width": 48,
|
|
31
30
|
},
|
|
32
31
|
undefined,
|
|
33
32
|
]
|
|
34
33
|
}
|
|
35
|
-
themeSize="medium"
|
|
36
34
|
themeVariant="checked"
|
|
37
35
|
/>
|
|
38
36
|
`;
|
|
@@ -45,15 +43,14 @@ exports[`StyledWrapper renders correct style with variant disabled-checked 1`] =
|
|
|
45
43
|
"backgroundColor": "#ece8ef",
|
|
46
44
|
"borderRadius": 999,
|
|
47
45
|
"display": "flex",
|
|
48
|
-
"height":
|
|
46
|
+
"height": 24,
|
|
49
47
|
"justifyContent": "center",
|
|
50
48
|
"paddingHorizontal": 4,
|
|
51
|
-
"width":
|
|
49
|
+
"width": 48,
|
|
52
50
|
},
|
|
53
51
|
undefined,
|
|
54
52
|
]
|
|
55
53
|
}
|
|
56
|
-
themeSize="medium"
|
|
57
54
|
themeVariant="disabled-checked"
|
|
58
55
|
/>
|
|
59
56
|
`;
|
|
@@ -66,15 +63,14 @@ exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`]
|
|
|
66
63
|
"backgroundColor": "#bfc1c5",
|
|
67
64
|
"borderRadius": 999,
|
|
68
65
|
"display": "flex",
|
|
69
|
-
"height":
|
|
66
|
+
"height": 24,
|
|
70
67
|
"justifyContent": "center",
|
|
71
68
|
"paddingHorizontal": 4,
|
|
72
|
-
"width":
|
|
69
|
+
"width": 48,
|
|
73
70
|
},
|
|
74
71
|
undefined,
|
|
75
72
|
]
|
|
76
73
|
}
|
|
77
|
-
themeSize="medium"
|
|
78
74
|
themeVariant="disabled-unchecked"
|
|
79
75
|
/>
|
|
80
76
|
`;
|
|
@@ -87,15 +83,14 @@ exports[`StyledWrapper renders correct style with variant unchecked 1`] = `
|
|
|
87
83
|
"backgroundColor": "#808f91",
|
|
88
84
|
"borderRadius": 999,
|
|
89
85
|
"display": "flex",
|
|
90
|
-
"height":
|
|
86
|
+
"height": 24,
|
|
91
87
|
"justifyContent": "center",
|
|
92
88
|
"paddingHorizontal": 4,
|
|
93
|
-
"width":
|
|
89
|
+
"width": 48,
|
|
94
90
|
},
|
|
95
91
|
undefined,
|
|
96
92
|
]
|
|
97
93
|
}
|
|
98
|
-
themeSize="medium"
|
|
99
94
|
themeVariant="unchecked"
|
|
100
95
|
/>
|
|
101
96
|
`;
|
|
@@ -22,16 +22,15 @@ exports[`Switch renders correctly 1`] = `
|
|
|
22
22
|
"backgroundColor": "#808f91",
|
|
23
23
|
"borderRadius": 999,
|
|
24
24
|
"display": "flex",
|
|
25
|
-
"height":
|
|
25
|
+
"height": 24,
|
|
26
26
|
"justifyContent": "center",
|
|
27
27
|
"paddingHorizontal": 4,
|
|
28
|
-
"width":
|
|
28
|
+
"width": 48,
|
|
29
29
|
},
|
|
30
30
|
undefined,
|
|
31
31
|
]
|
|
32
32
|
}
|
|
33
33
|
testID="switch"
|
|
34
|
-
themeSize="medium"
|
|
35
34
|
themeVariant="unchecked"
|
|
36
35
|
>
|
|
37
36
|
<View
|
|
@@ -41,12 +40,11 @@ exports[`Switch renders correctly 1`] = `
|
|
|
41
40
|
Object {
|
|
42
41
|
"backgroundColor": "#ffffff",
|
|
43
42
|
"borderRadius": 999,
|
|
44
|
-
"height":
|
|
43
|
+
"height": 16,
|
|
45
44
|
"left": 0,
|
|
46
|
-
"width":
|
|
45
|
+
"width": 16,
|
|
47
46
|
}
|
|
48
47
|
}
|
|
49
|
-
themeSize="medium"
|
|
50
48
|
/>
|
|
51
49
|
</View>
|
|
52
50
|
`;
|
|
@@ -73,16 +71,15 @@ exports[`Switch trigger press function correctly 1`] = `
|
|
|
73
71
|
"backgroundColor": "#808f91",
|
|
74
72
|
"borderRadius": 999,
|
|
75
73
|
"display": "flex",
|
|
76
|
-
"height":
|
|
74
|
+
"height": 24,
|
|
77
75
|
"justifyContent": "center",
|
|
78
76
|
"paddingHorizontal": 4,
|
|
79
|
-
"width":
|
|
77
|
+
"width": 48,
|
|
80
78
|
},
|
|
81
79
|
undefined,
|
|
82
80
|
]
|
|
83
81
|
}
|
|
84
82
|
testID="switch"
|
|
85
|
-
themeSize="medium"
|
|
86
83
|
themeVariant="unchecked"
|
|
87
84
|
>
|
|
88
85
|
<View
|
|
@@ -92,12 +89,11 @@ exports[`Switch trigger press function correctly 1`] = `
|
|
|
92
89
|
Object {
|
|
93
90
|
"backgroundColor": "#ffffff",
|
|
94
91
|
"borderRadius": 999,
|
|
95
|
-
"height":
|
|
92
|
+
"height": 16,
|
|
96
93
|
"left": 0,
|
|
97
|
-
"width":
|
|
94
|
+
"width": 16,
|
|
98
95
|
}
|
|
99
96
|
}
|
|
100
|
-
themeSize="medium"
|
|
101
97
|
/>
|
|
102
98
|
</View>
|
|
103
99
|
`;
|