@hero-design/rn 8.84.0 → 8.84.1

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.
@@ -667,3 +667,672 @@ exports[`DatePickerIOS renders correctly 1`] = `
667
667
  />
668
668
  </View>
669
669
  `;
670
+
671
+ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
672
+ <View
673
+ style={
674
+ {
675
+ "flex": 1,
676
+ }
677
+ }
678
+ >
679
+ <View
680
+ accessibilityState={
681
+ {
682
+ "busy": undefined,
683
+ "checked": undefined,
684
+ "disabled": false,
685
+ "expanded": undefined,
686
+ "selected": undefined,
687
+ }
688
+ }
689
+ accessibilityValue={
690
+ {
691
+ "max": undefined,
692
+ "min": undefined,
693
+ "now": undefined,
694
+ "text": undefined,
695
+ }
696
+ }
697
+ accessible={true}
698
+ collapsable={false}
699
+ focusable={true}
700
+ onClick={[Function]}
701
+ onResponderGrant={[Function]}
702
+ onResponderMove={[Function]}
703
+ onResponderRelease={[Function]}
704
+ onResponderTerminate={[Function]}
705
+ onResponderTerminationRequest={[Function]}
706
+ onStartShouldSetResponder={[Function]}
707
+ style={
708
+ {
709
+ "opacity": 1,
710
+ }
711
+ }
712
+ >
713
+ <View
714
+ pointerEvents="none"
715
+ testID="datePickerInputIOS"
716
+ >
717
+ <View
718
+ pointerEvents="auto"
719
+ style={
720
+ [
721
+ {
722
+ "marginTop": 8,
723
+ "width": "100%",
724
+ },
725
+ undefined,
726
+ ]
727
+ }
728
+ >
729
+ <View
730
+ onLayout={[Function]}
731
+ style={
732
+ [
733
+ {
734
+ "alignItems": "center",
735
+ "backgroundColor": "#ffffff",
736
+ "borderRadius": 8,
737
+ "flexDirection": "row",
738
+ "padding": 16,
739
+ },
740
+ undefined,
741
+ ]
742
+ }
743
+ >
744
+ <View
745
+ style={
746
+ [
747
+ {
748
+ "borderColor": "#001f23",
749
+ "borderRadius": 8,
750
+ "borderWidth": 1,
751
+ "bottom": 0,
752
+ "left": 0,
753
+ "position": "absolute",
754
+ "right": 0,
755
+ "top": 0,
756
+ },
757
+ [
758
+ {
759
+ "backgroundColor": "#ffffff",
760
+ },
761
+ undefined,
762
+ ],
763
+ ]
764
+ }
765
+ testID="text-input-border"
766
+ themeFocused={false}
767
+ themeState="filled"
768
+ />
769
+ <View
770
+ onLayout={[Function]}
771
+ />
772
+ <View
773
+ collapsable={false}
774
+ pointerEvents="none"
775
+ style={
776
+ {
777
+ "alignItems": "center",
778
+ "flexDirection": "row",
779
+ "justifyContent": "center",
780
+ "left": 0,
781
+ "position": "absolute",
782
+ "right": 0,
783
+ "top": -10.666666666666666,
784
+ "transform": [
785
+ {
786
+ "translateY": 0,
787
+ },
788
+ {
789
+ "translateX": 24,
790
+ },
791
+ {
792
+ "scale": 1,
793
+ },
794
+ ],
795
+ "zIndex": 1,
796
+ }
797
+ }
798
+ themeVariant="text"
799
+ >
800
+ <Text
801
+ allowFontScaling={false}
802
+ onLayout={[Function]}
803
+ style={
804
+ [
805
+ {
806
+ "color": "#001f23",
807
+ "fontFamily": "BeVietnamPro-Regular",
808
+ "fontSize": 16,
809
+ "letterSpacing": 0.48,
810
+ "lineHeight": 24,
811
+ },
812
+ [
813
+ {
814
+ "alignContent": "center",
815
+ "alignItems": "center",
816
+ "color": "#001f23",
817
+ "marginTop": -2,
818
+ "textAlignVertical": "center",
819
+ },
820
+ {
821
+ "backgroundColor": "#ffffff",
822
+ },
823
+ ],
824
+ ]
825
+ }
826
+ testID="input-label"
827
+ themeIntent="body"
828
+ themeState="filled"
829
+ themeTypeface="neutral"
830
+ themeVariant="regular"
831
+ >
832
+ Start date
833
+ </Text>
834
+ </View>
835
+ <View
836
+ style={
837
+ [
838
+ {
839
+ "alignItems": "center",
840
+ "alignSelf": "stretch",
841
+ "flexDirection": "row",
842
+ "flexGrow": 2,
843
+ "flexShrink": 1,
844
+ },
845
+ undefined,
846
+ ]
847
+ }
848
+ >
849
+ <TextInput
850
+ accessibilityState={
851
+ {
852
+ "disabled": false,
853
+ }
854
+ }
855
+ allowFontScaling={false}
856
+ editable={true}
857
+ onBlur={[Function]}
858
+ onChangeText={[Function]}
859
+ onFocus={[Function]}
860
+ placeholder=" "
861
+ style={
862
+ [
863
+ {
864
+ "alignSelf": "stretch",
865
+ "flexGrow": 2,
866
+ "fontFamily": "BeVietnamPro-Regular",
867
+ "fontSize": 16,
868
+ "height": undefined,
869
+ "marginHorizontal": 8,
870
+ "maxHeight": 144,
871
+ "paddingVertical": 0,
872
+ "textAlignVertical": "center",
873
+ },
874
+ {
875
+ "backgroundColor": "#ffffff",
876
+ "color": "#001f23",
877
+ },
878
+ ]
879
+ }
880
+ testID="text-input"
881
+ themeVariant="text"
882
+ value="21/12/1995"
883
+ />
884
+ </View>
885
+ <HeroIcon
886
+ name="calendar-dates-outlined"
887
+ style={
888
+ [
889
+ {
890
+ "color": "#001f23",
891
+ "fontSize": 24,
892
+ },
893
+ undefined,
894
+ ]
895
+ }
896
+ testID="input-suffix"
897
+ themeIntent="text"
898
+ themeSize="medium"
899
+ />
900
+ </View>
901
+ <View
902
+ style={
903
+ [
904
+ {
905
+ "minHeight": 16,
906
+ "paddingHorizontal": 16,
907
+ "paddingTop": 2,
908
+ },
909
+ undefined,
910
+ ]
911
+ }
912
+ >
913
+ <View
914
+ style={
915
+ [
916
+ {
917
+ "alignItems": "flex-start",
918
+ "flexDirection": "row",
919
+ "justifyContent": "space-between",
920
+ },
921
+ undefined,
922
+ ]
923
+ }
924
+ />
925
+ </View>
926
+ </View>
927
+ </View>
928
+ <RCTModalHostView
929
+ animationType="none"
930
+ hardwareAccelerated={false}
931
+ identifier={2}
932
+ onDismiss={[Function]}
933
+ onRequestClose={[Function]}
934
+ onStartShouldSetResponder={[Function]}
935
+ presentationStyle="overFullScreen"
936
+ style={
937
+ {
938
+ "position": "absolute",
939
+ }
940
+ }
941
+ supportedOrientations={
942
+ [
943
+ "portrait",
944
+ ]
945
+ }
946
+ transparent={true}
947
+ visible={true}
948
+ >
949
+ <View
950
+ collapsable={false}
951
+ style={
952
+ [
953
+ {
954
+ "flex": 1,
955
+ "left": 0,
956
+ "top": 0,
957
+ },
958
+ {
959
+ "backgroundColor": "transparent",
960
+ },
961
+ ]
962
+ }
963
+ >
964
+ <View
965
+ pointerEvents="box-none"
966
+ style={
967
+ {
968
+ "flex": 1,
969
+ }
970
+ }
971
+ >
972
+ <View
973
+ collapsable={true}
974
+ pointerEvents="box-none"
975
+ style={
976
+ {
977
+ "flex": 1,
978
+ }
979
+ }
980
+ >
981
+ <View
982
+ pointerEvents="box-none"
983
+ style={
984
+ [
985
+ {
986
+ "bottom": 0,
987
+ "flexDirection": "column-reverse",
988
+ "left": 0,
989
+ "position": "absolute",
990
+ "right": 0,
991
+ "top": 0,
992
+ },
993
+ undefined,
994
+ ]
995
+ }
996
+ >
997
+ <View
998
+ onLayout={[Function]}
999
+ style={
1000
+ [
1001
+ [
1002
+ {
1003
+ "flex": 1,
1004
+ "flexDirection": "column-reverse",
1005
+ },
1006
+ undefined,
1007
+ ],
1008
+ {
1009
+ "paddingBottom": 0,
1010
+ },
1011
+ ]
1012
+ }
1013
+ >
1014
+ <View
1015
+ accessibilityState={
1016
+ {
1017
+ "busy": undefined,
1018
+ "checked": undefined,
1019
+ "disabled": undefined,
1020
+ "expanded": undefined,
1021
+ "selected": undefined,
1022
+ }
1023
+ }
1024
+ accessibilityValue={
1025
+ {
1026
+ "max": undefined,
1027
+ "min": undefined,
1028
+ "now": undefined,
1029
+ "text": undefined,
1030
+ }
1031
+ }
1032
+ accessible={true}
1033
+ collapsable={false}
1034
+ focusable={true}
1035
+ onBlur={[Function]}
1036
+ onClick={[Function]}
1037
+ onFocus={[Function]}
1038
+ onResponderGrant={[Function]}
1039
+ onResponderMove={[Function]}
1040
+ onResponderRelease={[Function]}
1041
+ onResponderTerminate={[Function]}
1042
+ onResponderTerminationRequest={[Function]}
1043
+ onStartShouldSetResponder={[Function]}
1044
+ style={
1045
+ {
1046
+ "backgroundColor": "#000000",
1047
+ "bottom": 0,
1048
+ "left": 0,
1049
+ "opacity": 0.48,
1050
+ "position": "absolute",
1051
+ "right": 0,
1052
+ "top": 0,
1053
+ }
1054
+ }
1055
+ />
1056
+ <RCTSafeAreaView
1057
+ collapsable={false}
1058
+ style={
1059
+ {
1060
+ "backgroundColor": "#ffffff",
1061
+ "borderTopLeftRadius": 16,
1062
+ "borderTopRightRadius": 16,
1063
+ "elevation": 10,
1064
+ "maxHeight": "94%",
1065
+ "shadowColor": "#001f23",
1066
+ "shadowOffset": {
1067
+ "height": 3,
1068
+ "width": 0,
1069
+ },
1070
+ "shadowOpacity": 0.4,
1071
+ "shadowRadius": 16,
1072
+ "transform": [
1073
+ {
1074
+ "scaleY": 1,
1075
+ },
1076
+ {
1077
+ "translateY": 0,
1078
+ },
1079
+ ],
1080
+ "width": "100%",
1081
+ }
1082
+ }
1083
+ >
1084
+ <View
1085
+ style={
1086
+ [
1087
+ {
1088
+ "flexDirection": "row",
1089
+ "paddingHorizontal": 16,
1090
+ "paddingVertical": 8,
1091
+ },
1092
+ undefined,
1093
+ ]
1094
+ }
1095
+ >
1096
+ <View
1097
+ style={
1098
+ [
1099
+ {
1100
+ "flex": 1,
1101
+ "justifyContent": "center",
1102
+ },
1103
+ undefined,
1104
+ ]
1105
+ }
1106
+ >
1107
+ <Text
1108
+ allowFontScaling={false}
1109
+ style={
1110
+ [
1111
+ {
1112
+ "color": "#001f23",
1113
+ "fontFamily": "BeVietnamPro-SemiBold",
1114
+ "fontSize": 16,
1115
+ "letterSpacing": 0.24,
1116
+ "lineHeight": 24,
1117
+ },
1118
+ undefined,
1119
+ ]
1120
+ }
1121
+ themeIntent="body"
1122
+ themeTypeface="neutral"
1123
+ themeVariant="regular-bold"
1124
+ >
1125
+ Start date
1126
+ </Text>
1127
+ </View>
1128
+ <View
1129
+ style={
1130
+ [
1131
+ {
1132
+ "alignItems": "flex-end",
1133
+ "height": 48,
1134
+ "justifyContent": "center",
1135
+ "marginLeft": 12,
1136
+ "width": 48,
1137
+ },
1138
+ undefined,
1139
+ ]
1140
+ }
1141
+ >
1142
+ <View
1143
+ accessibilityState={
1144
+ {
1145
+ "busy": undefined,
1146
+ "checked": undefined,
1147
+ "disabled": undefined,
1148
+ "expanded": undefined,
1149
+ "selected": undefined,
1150
+ }
1151
+ }
1152
+ accessibilityValue={
1153
+ {
1154
+ "max": undefined,
1155
+ "min": undefined,
1156
+ "now": undefined,
1157
+ "text": undefined,
1158
+ }
1159
+ }
1160
+ accessible={true}
1161
+ collapsable={false}
1162
+ focusable={true}
1163
+ onClick={[Function]}
1164
+ onResponderGrant={[Function]}
1165
+ onResponderMove={[Function]}
1166
+ onResponderRelease={[Function]}
1167
+ onResponderTerminate={[Function]}
1168
+ onResponderTerminationRequest={[Function]}
1169
+ onStartShouldSetResponder={[Function]}
1170
+ style={
1171
+ {
1172
+ "opacity": 1,
1173
+ }
1174
+ }
1175
+ testID="bottom-sheet-close-icon"
1176
+ >
1177
+ <HeroIcon
1178
+ name="cancel"
1179
+ style={
1180
+ [
1181
+ {
1182
+ "color": "#001f23",
1183
+ "fontSize": 16,
1184
+ },
1185
+ undefined,
1186
+ ]
1187
+ }
1188
+ themeIntent="text"
1189
+ themeSize="xsmall"
1190
+ />
1191
+ </View>
1192
+ </View>
1193
+ </View>
1194
+ <View
1195
+ style={
1196
+ [
1197
+ {
1198
+ "height": 176,
1199
+ },
1200
+ undefined,
1201
+ ]
1202
+ }
1203
+ >
1204
+ <Picker
1205
+ display="spinner"
1206
+ locale="zh-CN"
1207
+ mode="date"
1208
+ onChange={[Function]}
1209
+ style={
1210
+ {
1211
+ "flex": 1,
1212
+ }
1213
+ }
1214
+ testID="datePickerIOS"
1215
+ textColor="#001f23"
1216
+ value={1995-12-21T00:00:00.000Z}
1217
+ />
1218
+ </View>
1219
+ <View>
1220
+ <View
1221
+ style={
1222
+ [
1223
+ {
1224
+ "alignItems": "center",
1225
+ "flexDirection": "row",
1226
+ "justifyContent": "flex-end",
1227
+ "paddingHorizontal": 12,
1228
+ "paddingVertical": 2,
1229
+ },
1230
+ undefined,
1231
+ ]
1232
+ }
1233
+ >
1234
+ <View
1235
+ accessibilityState={
1236
+ {
1237
+ "disabled": false,
1238
+ }
1239
+ }
1240
+ accessibilityValue={
1241
+ {
1242
+ "max": undefined,
1243
+ "min": undefined,
1244
+ "now": undefined,
1245
+ "text": undefined,
1246
+ }
1247
+ }
1248
+ accessible={true}
1249
+ focusable={true}
1250
+ onClick={[Function]}
1251
+ onResponderGrant={[Function]}
1252
+ onResponderMove={[Function]}
1253
+ onResponderRelease={[Function]}
1254
+ onResponderTerminate={[Function]}
1255
+ onResponderTerminationRequest={[Function]}
1256
+ onStartShouldSetResponder={[Function]}
1257
+ style={
1258
+ [
1259
+ {
1260
+ "alignItems": "center",
1261
+ "backgroundColor": "transparent",
1262
+ "borderRadius": 4,
1263
+ "borderWidth": 0,
1264
+ "flexDirection": "row",
1265
+ "height": 60,
1266
+ "justifyContent": "center",
1267
+ "padding": 12,
1268
+ },
1269
+ undefined,
1270
+ ]
1271
+ }
1272
+ >
1273
+ <Text
1274
+ allowFontScaling={false}
1275
+ disabled={false}
1276
+ ellipsizeMode="tail"
1277
+ numberOfLines={1}
1278
+ style={
1279
+ [
1280
+ {
1281
+ "color": "#001f23",
1282
+ "fontFamily": "BeVietnamPro-SemiBold",
1283
+ "fontSize": 16,
1284
+ "letterSpacing": 0.24,
1285
+ "lineHeight": 24,
1286
+ },
1287
+ [
1288
+ {
1289
+ "color": "#401960",
1290
+ "flexShrink": 1,
1291
+ "lineHeight": 22,
1292
+ "textAlign": "center",
1293
+ },
1294
+ undefined,
1295
+ ],
1296
+ ]
1297
+ }
1298
+ themeButtonVariant="text-primary"
1299
+ themeIntent="body"
1300
+ themeIsPressed={false}
1301
+ themeTypeface="neutral"
1302
+ themeVariant="regular-bold"
1303
+ >
1304
+ Confirm
1305
+ </Text>
1306
+ </View>
1307
+ </View>
1308
+ </View>
1309
+ </RCTSafeAreaView>
1310
+ </View>
1311
+ </View>
1312
+ </View>
1313
+ </View>
1314
+ </View>
1315
+ </RCTModalHostView>
1316
+ </View>
1317
+ <View
1318
+ pointerEvents="box-none"
1319
+ position="bottom"
1320
+ style={
1321
+ [
1322
+ {
1323
+ "bottom": 0,
1324
+ "elevation": 9999,
1325
+ "flexDirection": "column-reverse",
1326
+ "left": 0,
1327
+ "paddingHorizontal": 24,
1328
+ "paddingVertical": 16,
1329
+ "position": "absolute",
1330
+ "right": 0,
1331
+ "top": 0,
1332
+ },
1333
+ undefined,
1334
+ ]
1335
+ }
1336
+ />
1337
+ </View>
1338
+ `;
@@ -77,4 +77,8 @@ export interface DatePickerProps {
77
77
  * Supported orientations for the DatePicker modal, iOS only.
78
78
  */
79
79
  supportedOrientations?: ('portrait' | 'landscape')[];
80
+ /**
81
+ * Locale for the date picker, iOS only.
82
+ */
83
+ locale?: string;
80
84
  }