@hero-design/rn 8.2.3 → 8.3.0
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 +2 -2
- package/es/index.js +315 -53
- package/lib/index.js +314 -51
- package/package.json +5 -5
- package/src/components/Carousel/CarouselItem.tsx +49 -0
- package/src/components/Carousel/CarouselPaginator/StyledCarouselPaginator.tsx +19 -0
- package/src/components/Carousel/CarouselPaginator/index.tsx +58 -0
- package/src/components/Carousel/StyledCarousel.tsx +55 -0
- package/src/components/Carousel/__tests__/StyledCarousel.spec.tsx +13 -0
- package/src/components/Carousel/__tests__/__snapshots__/StyledCarousel.spec.tsx.snap +21 -0
- package/src/components/Carousel/__tests__/index.spec.tsx +86 -0
- package/src/components/Carousel/index.tsx +176 -0
- package/src/components/Carousel/types.ts +10 -0
- package/src/index.ts +2 -0
- package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +27 -0
- package/src/theme/components/carousel.ts +39 -0
- package/src/theme/getTheme.ts +3 -0
- package/types/components/Carousel/CarouselItem.d.ts +7 -0
- package/types/components/Carousel/CarouselPaginator/StyledCarouselPaginator.d.ts +16 -0
- package/types/components/Carousel/CarouselPaginator/index.d.ts +7 -0
- package/types/components/Carousel/StyledCarousel.d.ts +34 -0
- package/types/components/Carousel/index.d.ts +46 -0
- package/types/components/Carousel/types.d.ts +9 -0
- package/types/index.d.ts +2 -1
- package/types/theme/components/carousel.d.ts +29 -0
- package/types/theme/getTheme.d.ts +2 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
[35m@hero-design/rn:build[0m: cache hit, replaying output [
|
|
1
|
+
[35m@hero-design/rn:build[0m: cache hit, replaying output [2meb885563f0cea779[0m
|
|
2
2
|
[35m@hero-design/rn:build: [0m$ yarn build:js && yarn build:types
|
|
3
3
|
[35m@hero-design/rn:build: [0m$ rollup -c
|
|
4
4
|
[35m@hero-design/rn:build: [0m[36m
|
|
5
5
|
[35m@hero-design/rn:build: [0m[1msrc/index.ts[22m → [1mlib/index.js, es/index.js[22m...[39m
|
|
6
6
|
[35m@hero-design/rn:build: [0m[1m[33m(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.[39m[22m
|
|
7
7
|
[35m@hero-design/rn:build: [0m[1m[33m(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning[39m[22m
|
|
8
|
-
[35m@hero-design/rn:build: [0m[32mcreated [1mlib/index.js, es/index.js[22m in [
|
|
8
|
+
[35m@hero-design/rn:build: [0m[32mcreated [1mlib/index.js, es/index.js[22m in [1m25.7s[22m[39m
|
|
9
9
|
[35m@hero-design/rn:build: [0m$ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
|
package/es/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as reactNative from 'react-native';
|
|
2
|
-
import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, ScrollView, Modal, TextInput as TextInput$2, PanResponder, TouchableHighlight, InteractionManager,
|
|
2
|
+
import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, ScrollView, Modal, useWindowDimensions, FlatList, TextInput as TextInput$2, PanResponder, TouchableHighlight, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
|
|
3
3
|
import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
|
|
4
4
|
import { createIconSet } from 'react-native-vector-icons';
|
|
5
5
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
@@ -1797,6 +1797,43 @@ var getCardTheme = function getCardTheme(theme) {
|
|
|
1797
1797
|
};
|
|
1798
1798
|
};
|
|
1799
1799
|
|
|
1800
|
+
var getCarouselTheme = function getCarouselTheme(theme) {
|
|
1801
|
+
var colors = {
|
|
1802
|
+
paginatorBackgroundColor: theme.colors.primary
|
|
1803
|
+
};
|
|
1804
|
+
var space = {
|
|
1805
|
+
headingMarginTop: theme.space.small,
|
|
1806
|
+
headingMarginBottom: theme.space.medium,
|
|
1807
|
+
paginatorMarginHorizontal: theme.space.small
|
|
1808
|
+
};
|
|
1809
|
+
var sizes = {
|
|
1810
|
+
indicatorWidth: theme.sizes.medium,
|
|
1811
|
+
paginatorHeight: theme.sizes.small,
|
|
1812
|
+
paginatorWidth: theme.sizes.small
|
|
1813
|
+
};
|
|
1814
|
+
var radii = {
|
|
1815
|
+
paginatorBorderRadius: theme.radii.rounded
|
|
1816
|
+
};
|
|
1817
|
+
var fontSizes = {
|
|
1818
|
+
heading: theme.fontSizes.xxxxxlarge
|
|
1819
|
+
};
|
|
1820
|
+
var fonts = {
|
|
1821
|
+
heading: theme.fonts.playful.semiBold
|
|
1822
|
+
};
|
|
1823
|
+
var lineHeights = {
|
|
1824
|
+
heading: theme.lineHeights.xxxlarge
|
|
1825
|
+
};
|
|
1826
|
+
return {
|
|
1827
|
+
colors: colors,
|
|
1828
|
+
sizes: sizes,
|
|
1829
|
+
radii: radii,
|
|
1830
|
+
space: space,
|
|
1831
|
+
fonts: fonts,
|
|
1832
|
+
fontSizes: fontSizes,
|
|
1833
|
+
lineHeights: lineHeights
|
|
1834
|
+
};
|
|
1835
|
+
};
|
|
1836
|
+
|
|
1800
1837
|
var getCheckboxTheme = function getCheckboxTheme(theme) {
|
|
1801
1838
|
var colors = {
|
|
1802
1839
|
"default": theme.colors.primaryOutline,
|
|
@@ -2667,6 +2704,7 @@ var getTheme$1 = function getTheme() {
|
|
|
2667
2704
|
button: getButtonTheme(globalTheme),
|
|
2668
2705
|
calendar: getCalendarTheme(globalTheme),
|
|
2669
2706
|
card: getCardTheme(globalTheme),
|
|
2707
|
+
carousel: getCarouselTheme(globalTheme),
|
|
2670
2708
|
checkbox: getCheckboxTheme(globalTheme),
|
|
2671
2709
|
contentNavigator: getContentNavigatorTheme(globalTheme),
|
|
2672
2710
|
datePicker: getDatePickerTheme(globalTheme),
|
|
@@ -5701,7 +5739,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
|
|
|
5701
5739
|
});
|
|
5702
5740
|
});
|
|
5703
5741
|
|
|
5704
|
-
var _excluded$
|
|
5742
|
+
var _excluded$l = ["children", "fontSize", "fontWeight", "intent", "typeface"];
|
|
5705
5743
|
var Text = function Text(_ref) {
|
|
5706
5744
|
var children = _ref.children,
|
|
5707
5745
|
_ref$fontSize = _ref.fontSize,
|
|
@@ -5712,7 +5750,7 @@ var Text = function Text(_ref) {
|
|
|
5712
5750
|
intent = _ref$intent === void 0 ? 'body' : _ref$intent,
|
|
5713
5751
|
_ref$typeface = _ref.typeface,
|
|
5714
5752
|
typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
|
|
5715
|
-
nativeProps = _objectWithoutProperties(_ref, _excluded$
|
|
5753
|
+
nativeProps = _objectWithoutProperties(_ref, _excluded$l);
|
|
5716
5754
|
return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
|
|
5717
5755
|
themeFontSize: fontSize,
|
|
5718
5756
|
themeFontWeight: fontWeight,
|
|
@@ -6191,10 +6229,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
|
|
|
6191
6229
|
};
|
|
6192
6230
|
});
|
|
6193
6231
|
|
|
6194
|
-
var _excluded$
|
|
6232
|
+
var _excluded$k = ["style"];
|
|
6195
6233
|
var AnimatedIcon = function AnimatedIcon(_ref) {
|
|
6196
6234
|
var style = _ref.style,
|
|
6197
|
-
otherProps = _objectWithoutProperties(_ref, _excluded$
|
|
6235
|
+
otherProps = _objectWithoutProperties(_ref, _excluded$k);
|
|
6198
6236
|
var rotateAnimation = useRef(new Animated.Value(0));
|
|
6199
6237
|
useEffect(function () {
|
|
6200
6238
|
var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
|
|
@@ -6300,7 +6338,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
|
6300
6338
|
}, content));
|
|
6301
6339
|
};
|
|
6302
6340
|
|
|
6303
|
-
var _excluded$
|
|
6341
|
+
var _excluded$j = ["key"];
|
|
6304
6342
|
var Accordion = function Accordion(_ref) {
|
|
6305
6343
|
var items = _ref.items,
|
|
6306
6344
|
activeItemKey = _ref.activeItemKey,
|
|
@@ -6321,7 +6359,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
6321
6359
|
testID: testID
|
|
6322
6360
|
}, items.map(function (_ref2, index) {
|
|
6323
6361
|
var key = _ref2.key,
|
|
6324
|
-
props = _objectWithoutProperties(_ref2, _excluded$
|
|
6362
|
+
props = _objectWithoutProperties(_ref2, _excluded$j);
|
|
6325
6363
|
var open = _activeItemKey === key;
|
|
6326
6364
|
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
6327
6365
|
key: key
|
|
@@ -6703,7 +6741,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
|
|
|
6703
6741
|
};
|
|
6704
6742
|
});
|
|
6705
6743
|
|
|
6706
|
-
var _excluded$
|
|
6744
|
+
var _excluded$i = ["children", "visible", "intent", "style", "testID"];
|
|
6707
6745
|
var Status = function Status(_ref) {
|
|
6708
6746
|
var children = _ref.children,
|
|
6709
6747
|
_ref$visible = _ref.visible,
|
|
@@ -6712,7 +6750,7 @@ var Status = function Status(_ref) {
|
|
|
6712
6750
|
intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
|
|
6713
6751
|
style = _ref.style,
|
|
6714
6752
|
testID = _ref.testID,
|
|
6715
|
-
nativeProps = _objectWithoutProperties(_ref, _excluded$
|
|
6753
|
+
nativeProps = _objectWithoutProperties(_ref, _excluded$i);
|
|
6716
6754
|
var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
|
|
6717
6755
|
opacity = _React$useRef.current;
|
|
6718
6756
|
var isFirstRendering = React.useRef(true);
|
|
@@ -6745,7 +6783,7 @@ var Status = function Status(_ref) {
|
|
|
6745
6783
|
}));
|
|
6746
6784
|
};
|
|
6747
6785
|
|
|
6748
|
-
var _excluded$
|
|
6786
|
+
var _excluded$h = ["content", "visible", "max", "intent", "style", "testID"];
|
|
6749
6787
|
var DEFAULT_MAX_NUMBER = 99;
|
|
6750
6788
|
var getPaddingState = function getPaddingState(content) {
|
|
6751
6789
|
return content.length > 1 ? 'wideContent' : 'narrowContent';
|
|
@@ -6760,7 +6798,7 @@ var Badge = function Badge(_ref) {
|
|
|
6760
6798
|
intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
|
|
6761
6799
|
style = _ref.style,
|
|
6762
6800
|
testID = _ref.testID,
|
|
6763
|
-
nativeProps = _objectWithoutProperties(_ref, _excluded$
|
|
6801
|
+
nativeProps = _objectWithoutProperties(_ref, _excluded$h);
|
|
6764
6802
|
var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
|
|
6765
6803
|
opacity = _React$useRef.current;
|
|
6766
6804
|
var isFirstRendering = React.useRef(true);
|
|
@@ -6864,7 +6902,7 @@ function omit(keys, obj) {
|
|
|
6864
6902
|
return result;
|
|
6865
6903
|
}
|
|
6866
6904
|
|
|
6867
|
-
var _excluded$
|
|
6905
|
+
var _excluded$g = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
|
|
6868
6906
|
var getInactiveIcon = function getInactiveIcon(icon) {
|
|
6869
6907
|
var inactiveIcon = "".concat(icon, "-outlined");
|
|
6870
6908
|
return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
|
|
@@ -6875,7 +6913,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
|
|
|
6875
6913
|
renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
|
|
6876
6914
|
selectedTabKey = _ref.selectedTabKey,
|
|
6877
6915
|
tabs = _ref.tabs,
|
|
6878
|
-
nativeProps = _objectWithoutProperties(_ref, _excluded$
|
|
6916
|
+
nativeProps = _objectWithoutProperties(_ref, _excluded$g);
|
|
6879
6917
|
var insets = useSafeAreaInsets();
|
|
6880
6918
|
/**
|
|
6881
6919
|
* List of loaded tabs, tabs will be loaded when navigated to.
|
|
@@ -6962,13 +7000,13 @@ var StyledDivider = index$a(View)(function (_ref) {
|
|
|
6962
7000
|
}, horizontalMargin), verticalMargin);
|
|
6963
7001
|
});
|
|
6964
7002
|
|
|
6965
|
-
var _excluded$
|
|
7003
|
+
var _excluded$f = ["marginHorizontal", "marginVertical", "style", "testID"];
|
|
6966
7004
|
var Divider = function Divider(_ref) {
|
|
6967
7005
|
var marginHorizontal = _ref.marginHorizontal,
|
|
6968
7006
|
marginVertical = _ref.marginVertical,
|
|
6969
7007
|
style = _ref.style,
|
|
6970
7008
|
testID = _ref.testID,
|
|
6971
|
-
nativeProps = _objectWithoutProperties(_ref, _excluded$
|
|
7009
|
+
nativeProps = _objectWithoutProperties(_ref, _excluded$f);
|
|
6972
7010
|
return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({}, nativeProps, {
|
|
6973
7011
|
themeMarginHorizontal: marginHorizontal,
|
|
6974
7012
|
themeMarginVertical: marginVertical,
|
|
@@ -7098,7 +7136,7 @@ var StyledLoadingDot = index$a(View)(function (_ref2) {
|
|
|
7098
7136
|
}, themeStyling());
|
|
7099
7137
|
});
|
|
7100
7138
|
|
|
7101
|
-
var _excluded$
|
|
7139
|
+
var _excluded$e = ["count", "size", "testID", "themeVariant"];
|
|
7102
7140
|
var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
|
|
7103
7141
|
var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
|
|
7104
7142
|
var renderDotComponent = function renderDotComponent(_ref) {
|
|
@@ -7130,7 +7168,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
|
|
|
7130
7168
|
size = _ref2$size === void 0 ? 12 : _ref2$size,
|
|
7131
7169
|
testID = _ref2.testID,
|
|
7132
7170
|
themeVariant = _ref2.themeVariant,
|
|
7133
|
-
nativeProps = _objectWithoutProperties(_ref2, _excluded$
|
|
7171
|
+
nativeProps = _objectWithoutProperties(_ref2, _excluded$e);
|
|
7134
7172
|
var progressAnimation = useRef(new Animated.Value(0));
|
|
7135
7173
|
useEffect(function () {
|
|
7136
7174
|
var animation = Animated.loop(Animated.timing(progressAnimation.current, {
|
|
@@ -7526,11 +7564,11 @@ var Header = function Header(_ref) {
|
|
|
7526
7564
|
})) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
|
|
7527
7565
|
};
|
|
7528
7566
|
|
|
7529
|
-
var _excluded$
|
|
7567
|
+
var _excluded$d = ["scrollEventThrottle"];
|
|
7530
7568
|
var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
|
|
7531
7569
|
var _ref$scrollEventThrot = _ref.scrollEventThrottle,
|
|
7532
7570
|
scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
|
|
7533
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
7571
|
+
props = _objectWithoutProperties(_ref, _excluded$d);
|
|
7534
7572
|
var _useContext = useContext(BottomSheetContext),
|
|
7535
7573
|
setInternalShowDivider = _useContext.setInternalShowDivider;
|
|
7536
7574
|
var onScrollBeginDrag = useCallback(function (e) {
|
|
@@ -7845,7 +7883,7 @@ var borderWidths = {
|
|
|
7845
7883
|
var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
|
|
7846
7884
|
var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
|
|
7847
7885
|
|
|
7848
|
-
var _excluded$
|
|
7886
|
+
var _excluded$c = ["theme"];
|
|
7849
7887
|
var getThemeValue = function getThemeValue(theme, key, props) {
|
|
7850
7888
|
var propConfig = config[key];
|
|
7851
7889
|
var propValue = props[key];
|
|
@@ -7872,18 +7910,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
|
|
|
7872
7910
|
var configKeys = Object.keys(config);
|
|
7873
7911
|
var StyledBox = index$a(View)(function (_ref5) {
|
|
7874
7912
|
var theme = _ref5.theme,
|
|
7875
|
-
otherProps = _objectWithoutProperties(_ref5, _excluded$
|
|
7913
|
+
otherProps = _objectWithoutProperties(_ref5, _excluded$c);
|
|
7876
7914
|
var styleProps = pick(configKeys, otherProps);
|
|
7877
7915
|
var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
|
|
7878
7916
|
return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
|
|
7879
7917
|
});
|
|
7880
7918
|
|
|
7881
|
-
var _excluded$
|
|
7919
|
+
var _excluded$b = ["children", "style", "testID"];
|
|
7882
7920
|
var Box = function Box(_ref) {
|
|
7883
7921
|
var children = _ref.children,
|
|
7884
7922
|
style = _ref.style,
|
|
7885
7923
|
testID = _ref.testID,
|
|
7886
|
-
otherProps = _objectWithoutProperties(_ref, _excluded$
|
|
7924
|
+
otherProps = _objectWithoutProperties(_ref, _excluded$b);
|
|
7887
7925
|
return /*#__PURE__*/React.createElement(StyledBox, _extends$1({}, otherProps, {
|
|
7888
7926
|
style: style,
|
|
7889
7927
|
testID: testID
|
|
@@ -10448,6 +10486,251 @@ var Calendar = function Calendar(_ref) {
|
|
|
10448
10486
|
})));
|
|
10449
10487
|
};
|
|
10450
10488
|
|
|
10489
|
+
var StyledCarouselPaginator = index$a(View)(function () {
|
|
10490
|
+
return {
|
|
10491
|
+
flexDirection: 'row',
|
|
10492
|
+
alignItems: 'center'
|
|
10493
|
+
};
|
|
10494
|
+
});
|
|
10495
|
+
var StyledCarouselPaginatorAnimatedView = index$a(Animated.View)(function (_ref) {
|
|
10496
|
+
var theme = _ref.theme;
|
|
10497
|
+
return {
|
|
10498
|
+
height: theme.__hd__.carousel.sizes.paginatorHeight,
|
|
10499
|
+
width: theme.__hd__.carousel.sizes.paginatorWidth,
|
|
10500
|
+
borderRadius: theme.__hd__.carousel.radii.paginatorBorderRadius,
|
|
10501
|
+
backgroundColor: theme.__hd__.carousel.colors.paginatorBackgroundColor,
|
|
10502
|
+
marginHorizontal: theme.__hd__.carousel.space.paginatorMarginHorizontal
|
|
10503
|
+
};
|
|
10504
|
+
});
|
|
10505
|
+
|
|
10506
|
+
var CarouselPaginator = function CarouselPaginator(_ref) {
|
|
10507
|
+
var numberOfSlides = _ref.numberOfSlides,
|
|
10508
|
+
scrollX = _ref.scrollX;
|
|
10509
|
+
var _useWindowDimensions = useWindowDimensions(),
|
|
10510
|
+
width = _useWindowDimensions.width;
|
|
10511
|
+
var theme = useTheme();
|
|
10512
|
+
return /*#__PURE__*/React.createElement(StyledCarouselPaginator, null, new Array(numberOfSlides).fill('').map(function (_, index) {
|
|
10513
|
+
var inputRange = [(index - 1) * width, index * width, (index + 1) * width];
|
|
10514
|
+
var indicatorWidth = scrollX.interpolate({
|
|
10515
|
+
inputRange: inputRange,
|
|
10516
|
+
outputRange: [theme.space.small, theme.space.large, theme.space.small],
|
|
10517
|
+
extrapolate: 'clamp'
|
|
10518
|
+
});
|
|
10519
|
+
var opacity = scrollX.interpolate({
|
|
10520
|
+
inputRange: inputRange,
|
|
10521
|
+
outputRange: [0.5, 1, 0.5],
|
|
10522
|
+
extrapolate: 'clamp'
|
|
10523
|
+
});
|
|
10524
|
+
return /*#__PURE__*/React.createElement(StyledCarouselPaginatorAnimatedView, {
|
|
10525
|
+
indicatorWidth: indicatorWidth,
|
|
10526
|
+
style: [{
|
|
10527
|
+
width: indicatorWidth,
|
|
10528
|
+
opacity: opacity
|
|
10529
|
+
}],
|
|
10530
|
+
key: index.toString()
|
|
10531
|
+
});
|
|
10532
|
+
}));
|
|
10533
|
+
};
|
|
10534
|
+
|
|
10535
|
+
var _excluded$a = ["rounded", "size", "testID", "style"];
|
|
10536
|
+
var Image = function Image(_ref) {
|
|
10537
|
+
var _ref$rounded = _ref.rounded,
|
|
10538
|
+
rounded = _ref$rounded === void 0 ? false : _ref$rounded,
|
|
10539
|
+
_ref$size = _ref.size,
|
|
10540
|
+
size = _ref$size === void 0 ? '6xlarge' : _ref$size,
|
|
10541
|
+
testID = _ref.testID,
|
|
10542
|
+
style = _ref.style,
|
|
10543
|
+
imageNativeProps = _objectWithoutProperties(_ref, _excluded$a);
|
|
10544
|
+
var theme = useTheme();
|
|
10545
|
+
var imageSize = theme.__hd__.image.sizes[size];
|
|
10546
|
+
return /*#__PURE__*/React.createElement(Image$1, _extends$1({
|
|
10547
|
+
testID: testID,
|
|
10548
|
+
style: [{
|
|
10549
|
+
width: imageSize,
|
|
10550
|
+
height: imageSize,
|
|
10551
|
+
borderRadius: rounded ? imageSize / 2 : 0
|
|
10552
|
+
}, style]
|
|
10553
|
+
}, imageNativeProps));
|
|
10554
|
+
};
|
|
10555
|
+
|
|
10556
|
+
var StyledCarousel = index$a(View)(function (_ref) {
|
|
10557
|
+
var themeSlideBackground = _ref.themeSlideBackground;
|
|
10558
|
+
return {
|
|
10559
|
+
zIndex: 99999,
|
|
10560
|
+
position: 'absolute',
|
|
10561
|
+
backgroundColor: themeSlideBackground,
|
|
10562
|
+
top: 0,
|
|
10563
|
+
bottom: 0,
|
|
10564
|
+
right: 0,
|
|
10565
|
+
left: 0
|
|
10566
|
+
};
|
|
10567
|
+
});
|
|
10568
|
+
var StyledCarouselView = index$a(View)(function () {
|
|
10569
|
+
return {
|
|
10570
|
+
justifyContent: 'space-between',
|
|
10571
|
+
height: '100%'
|
|
10572
|
+
};
|
|
10573
|
+
});
|
|
10574
|
+
var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
|
|
10575
|
+
var theme = _ref2.theme;
|
|
10576
|
+
return {
|
|
10577
|
+
marginTop: theme.__hd__.carousel.space.headingMarginTop,
|
|
10578
|
+
marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
|
|
10579
|
+
fontFamily: theme.__hd__.carousel.fonts.heading,
|
|
10580
|
+
fontSize: theme.__hd__.carousel.fontSizes.heading,
|
|
10581
|
+
lineHeight: theme.__hd__.carousel.lineHeights.heading
|
|
10582
|
+
};
|
|
10583
|
+
});
|
|
10584
|
+
var StyledCarouselImage = index$a(Image)(function () {
|
|
10585
|
+
return {
|
|
10586
|
+
flex: 1,
|
|
10587
|
+
width: '100%',
|
|
10588
|
+
resizeMode: 'contain'
|
|
10589
|
+
};
|
|
10590
|
+
});
|
|
10591
|
+
var StyledCarouselContentWrapper = index$a(Box)(function (_ref3) {
|
|
10592
|
+
var width = _ref3.width;
|
|
10593
|
+
return {
|
|
10594
|
+
width: width
|
|
10595
|
+
};
|
|
10596
|
+
});
|
|
10597
|
+
var StyledCarouselFooterWrapper = index$a(Box)(function () {
|
|
10598
|
+
return {
|
|
10599
|
+
width: '100%'
|
|
10600
|
+
};
|
|
10601
|
+
});
|
|
10602
|
+
|
|
10603
|
+
var CarouselItem = function CarouselItem(_ref) {
|
|
10604
|
+
var width = _ref.width,
|
|
10605
|
+
image = _ref.image,
|
|
10606
|
+
content = _ref.content,
|
|
10607
|
+
heading = _ref.heading,
|
|
10608
|
+
body = _ref.body,
|
|
10609
|
+
minHeight = _ref.minHeight;
|
|
10610
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
10611
|
+
style: {
|
|
10612
|
+
width: width
|
|
10613
|
+
}
|
|
10614
|
+
}, image && /*#__PURE__*/React.createElement(StyledCarouselImage, {
|
|
10615
|
+
source: typeof image === 'string' ? {
|
|
10616
|
+
uri: image
|
|
10617
|
+
} : image
|
|
10618
|
+
}), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
|
|
10619
|
+
paddingHorizontal: "large",
|
|
10620
|
+
marginTop: "large",
|
|
10621
|
+
width: width,
|
|
10622
|
+
style: {
|
|
10623
|
+
minHeight: minHeight
|
|
10624
|
+
}
|
|
10625
|
+
}, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React.createElement(Typography.Text, {
|
|
10626
|
+
fontSize: "large"
|
|
10627
|
+
}, body) : null));
|
|
10628
|
+
};
|
|
10629
|
+
|
|
10630
|
+
var _excluded$9 = ["items", "onFinishPress", "onSkipPress", "onSlideChange", "finishButtonLabel", "skipButtonLabel", "footerHeight", "minContentHeight"];
|
|
10631
|
+
var Carousel = function Carousel(_ref) {
|
|
10632
|
+
var items = _ref.items,
|
|
10633
|
+
onFinishPress = _ref.onFinishPress,
|
|
10634
|
+
onSkipPress = _ref.onSkipPress,
|
|
10635
|
+
onSlideChange = _ref.onSlideChange,
|
|
10636
|
+
_ref$finishButtonLabe = _ref.finishButtonLabel,
|
|
10637
|
+
finishButtonLabel = _ref$finishButtonLabe === void 0 ? "Let's go!" : _ref$finishButtonLabe,
|
|
10638
|
+
_ref$skipButtonLabel = _ref.skipButtonLabel,
|
|
10639
|
+
skipButtonLabel = _ref$skipButtonLabel === void 0 ? 'Skip' : _ref$skipButtonLabel,
|
|
10640
|
+
_ref$footerHeight = _ref.footerHeight,
|
|
10641
|
+
footerHeight = _ref$footerHeight === void 0 ? 70 : _ref$footerHeight,
|
|
10642
|
+
_ref$minContentHeight = _ref.minContentHeight,
|
|
10643
|
+
minContentHeight = _ref$minContentHeight === void 0 ? 250 : _ref$minContentHeight,
|
|
10644
|
+
nativeProps = _objectWithoutProperties(_ref, _excluded$9);
|
|
10645
|
+
var carouselRef = useRef(null);
|
|
10646
|
+
var _useState = useState(0),
|
|
10647
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
10648
|
+
currentSlideIndex = _useState2[0],
|
|
10649
|
+
setCurrentSlideIndex = _useState2[1];
|
|
10650
|
+
var _useWindowDimensions = useWindowDimensions(),
|
|
10651
|
+
width = _useWindowDimensions.width;
|
|
10652
|
+
var scrollX = useRef(new Animated.Value(0)).current;
|
|
10653
|
+
var visibleSlideChanged = useCallback(function (_ref2) {
|
|
10654
|
+
var viewableItems = _ref2.viewableItems;
|
|
10655
|
+
if (!viewableItems || viewableItems && !viewableItems.length) return;
|
|
10656
|
+
var currentIndex = viewableItems[0].index;
|
|
10657
|
+
setCurrentSlideIndex(viewableItems[0].index);
|
|
10658
|
+
var currentSlide = items[currentIndex];
|
|
10659
|
+
if (onSlideChange) {
|
|
10660
|
+
onSlideChange(currentSlide);
|
|
10661
|
+
}
|
|
10662
|
+
}, [items, onSlideChange]);
|
|
10663
|
+
var skipCarousel = useCallback(function () {
|
|
10664
|
+
var currentSlide = items[currentSlideIndex];
|
|
10665
|
+
if (onSkipPress) {
|
|
10666
|
+
onSkipPress(currentSlide);
|
|
10667
|
+
}
|
|
10668
|
+
}, [currentSlideIndex, onSkipPress, items]);
|
|
10669
|
+
var finishCarousel = useCallback(function () {
|
|
10670
|
+
var currentSlide = items[currentSlideIndex];
|
|
10671
|
+
if (onFinishPress) {
|
|
10672
|
+
onFinishPress(currentSlide);
|
|
10673
|
+
}
|
|
10674
|
+
}, [onFinishPress, items, currentSlideIndex]);
|
|
10675
|
+
var viewConfig = useRef({
|
|
10676
|
+
viewAreaCoveragePercentThreshold: 50
|
|
10677
|
+
}).current;
|
|
10678
|
+
var isLastSlide = currentSlideIndex === items.length - 1;
|
|
10679
|
+
return /*#__PURE__*/React.createElement(StyledCarousel, _extends$1({
|
|
10680
|
+
themeSlideBackground: items[currentSlideIndex].background
|
|
10681
|
+
}, nativeProps), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
|
|
10682
|
+
horizontal: true,
|
|
10683
|
+
showsHorizontalScrollIndicator: false,
|
|
10684
|
+
pagingEnabled: true,
|
|
10685
|
+
bounces: false,
|
|
10686
|
+
data: items,
|
|
10687
|
+
onViewableItemsChanged: visibleSlideChanged,
|
|
10688
|
+
viewabilityConfig: viewConfig,
|
|
10689
|
+
scrollEventThrottle: 32,
|
|
10690
|
+
ref: carouselRef,
|
|
10691
|
+
onScroll: Animated.event([{
|
|
10692
|
+
nativeEvent: {
|
|
10693
|
+
contentOffset: {
|
|
10694
|
+
x: scrollX
|
|
10695
|
+
}
|
|
10696
|
+
}
|
|
10697
|
+
}], {
|
|
10698
|
+
useNativeDriver: false
|
|
10699
|
+
}),
|
|
10700
|
+
renderItem: function renderItem(_ref3) {
|
|
10701
|
+
var item = _ref3.item;
|
|
10702
|
+
if (!item) return null;
|
|
10703
|
+
var image = item.image,
|
|
10704
|
+
heading = item.heading,
|
|
10705
|
+
body = item.body,
|
|
10706
|
+
content = item.content;
|
|
10707
|
+
return /*#__PURE__*/React.createElement(CarouselItem, {
|
|
10708
|
+
image: image,
|
|
10709
|
+
heading: heading,
|
|
10710
|
+
body: body,
|
|
10711
|
+
content: content,
|
|
10712
|
+
minHeight: minContentHeight,
|
|
10713
|
+
width: width
|
|
10714
|
+
});
|
|
10715
|
+
}
|
|
10716
|
+
}), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, {
|
|
10717
|
+
paddingHorizontal: "large",
|
|
10718
|
+
flexDirection: "row",
|
|
10719
|
+
justifyContent: "space-between",
|
|
10720
|
+
style: {
|
|
10721
|
+
height: footerHeight
|
|
10722
|
+
}
|
|
10723
|
+
}, /*#__PURE__*/React.createElement(CompoundButton, {
|
|
10724
|
+
variant: isLastSlide ? 'filled' : 'text',
|
|
10725
|
+
intent: "primary",
|
|
10726
|
+
onPress: isLastSlide ? finishCarousel : skipCarousel,
|
|
10727
|
+
text: isLastSlide ? finishButtonLabel : skipButtonLabel
|
|
10728
|
+
}), /*#__PURE__*/React.createElement(CarouselPaginator, {
|
|
10729
|
+
numberOfSlides: items.length,
|
|
10730
|
+
scrollX: scrollX
|
|
10731
|
+
}))));
|
|
10732
|
+
};
|
|
10733
|
+
|
|
10451
10734
|
var StyledDataCard = index$a(View)(function (_ref) {
|
|
10452
10735
|
var theme = _ref.theme;
|
|
10453
10736
|
return {
|
|
@@ -10466,12 +10749,12 @@ var Indicator = index$a(View)(function (_ref2) {
|
|
|
10466
10749
|
};
|
|
10467
10750
|
});
|
|
10468
10751
|
|
|
10469
|
-
var _excluded$
|
|
10752
|
+
var _excluded$8 = ["intent", "children"];
|
|
10470
10753
|
var DataCard = function DataCard(_ref) {
|
|
10471
10754
|
var _ref$intent = _ref.intent,
|
|
10472
10755
|
intent = _ref$intent === void 0 ? 'info' : _ref$intent,
|
|
10473
10756
|
children = _ref.children,
|
|
10474
|
-
nativeProps = _objectWithoutProperties(_ref, _excluded$
|
|
10757
|
+
nativeProps = _objectWithoutProperties(_ref, _excluded$8);
|
|
10475
10758
|
return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
|
|
10476
10759
|
themeIntent: intent,
|
|
10477
10760
|
testID: "data-card-indicator"
|
|
@@ -10489,11 +10772,11 @@ var StyledCard = index$a(View)(function (_ref) {
|
|
|
10489
10772
|
});
|
|
10490
10773
|
});
|
|
10491
10774
|
|
|
10492
|
-
var _excluded$
|
|
10775
|
+
var _excluded$7 = ["intent", "children"];
|
|
10493
10776
|
var Card = function Card(_ref) {
|
|
10494
10777
|
var intent = _ref.intent,
|
|
10495
10778
|
children = _ref.children,
|
|
10496
|
-
nativeProps = _objectWithoutProperties(_ref, _excluded$
|
|
10779
|
+
nativeProps = _objectWithoutProperties(_ref, _excluded$7);
|
|
10497
10780
|
return /*#__PURE__*/React.createElement(StyledCard, _extends$1({}, nativeProps, {
|
|
10498
10781
|
themeIntent: intent
|
|
10499
10782
|
}), children);
|
|
@@ -10727,7 +11010,7 @@ var StyledErrorAndMaxLengthContainer = index$a(View)(function () {
|
|
|
10727
11010
|
};
|
|
10728
11011
|
});
|
|
10729
11012
|
|
|
10730
|
-
var _excluded$
|
|
11013
|
+
var _excluded$6 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
|
|
10731
11014
|
var getVariant$1 = function getVariant(_ref) {
|
|
10732
11015
|
var disabled = _ref.disabled,
|
|
10733
11016
|
error = _ref.error,
|
|
@@ -10773,7 +11056,7 @@ var TextInput = function TextInput(_ref2, ref) {
|
|
|
10773
11056
|
value = _ref2.value,
|
|
10774
11057
|
defaultValue = _ref2.defaultValue,
|
|
10775
11058
|
renderInputValue = _ref2.renderInputValue,
|
|
10776
|
-
nativeProps = _objectWithoutProperties(_ref2, _excluded$
|
|
11059
|
+
nativeProps = _objectWithoutProperties(_ref2, _excluded$6);
|
|
10777
11060
|
var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
|
|
10778
11061
|
var isEmptyValue = displayText.length === 0;
|
|
10779
11062
|
var actualSuffix = loading ? 'loading' : suffix;
|
|
@@ -11452,11 +11735,11 @@ var StyledFABText = index$a(Text$1)(function (_ref3) {
|
|
|
11452
11735
|
};
|
|
11453
11736
|
});
|
|
11454
11737
|
|
|
11455
|
-
var _excluded$
|
|
11738
|
+
var _excluded$5 = ["active"];
|
|
11456
11739
|
var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
|
|
11457
11740
|
var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
|
|
11458
11741
|
var active = _ref.active,
|
|
11459
|
-
iconProps = _objectWithoutProperties(_ref, _excluded$
|
|
11742
|
+
iconProps = _objectWithoutProperties(_ref, _excluded$5);
|
|
11460
11743
|
var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
|
|
11461
11744
|
useEffect(function () {
|
|
11462
11745
|
var animation = Animated.timing(rotateAnimation.current, {
|
|
@@ -11703,27 +11986,6 @@ var index$6 = Object.assign(FAB, {
|
|
|
11703
11986
|
ActionGroup: ActionGroup
|
|
11704
11987
|
});
|
|
11705
11988
|
|
|
11706
|
-
var _excluded$5 = ["rounded", "size", "testID", "style"];
|
|
11707
|
-
var Image = function Image(_ref) {
|
|
11708
|
-
var _ref$rounded = _ref.rounded,
|
|
11709
|
-
rounded = _ref$rounded === void 0 ? false : _ref$rounded,
|
|
11710
|
-
_ref$size = _ref.size,
|
|
11711
|
-
size = _ref$size === void 0 ? '6xlarge' : _ref$size,
|
|
11712
|
-
testID = _ref.testID,
|
|
11713
|
-
style = _ref.style,
|
|
11714
|
-
imageNativeProps = _objectWithoutProperties(_ref, _excluded$5);
|
|
11715
|
-
var theme = useTheme();
|
|
11716
|
-
var imageSize = theme.__hd__.image.sizes[size];
|
|
11717
|
-
return /*#__PURE__*/React.createElement(Image$1, _extends$1({
|
|
11718
|
-
testID: testID,
|
|
11719
|
-
style: [{
|
|
11720
|
-
width: imageSize,
|
|
11721
|
-
height: imageSize,
|
|
11722
|
-
borderRadius: rounded ? imageSize / 2 : 0
|
|
11723
|
-
}, style]
|
|
11724
|
-
}, imageNativeProps));
|
|
11725
|
-
};
|
|
11726
|
-
|
|
11727
11989
|
var StyledListItemContainer$1 = index$a(TouchableOpacity)(function (_ref) {
|
|
11728
11990
|
var theme = _ref.theme,
|
|
11729
11991
|
_ref$themeSelected = _ref.themeSelected,
|
|
@@ -30947,4 +31209,4 @@ var index = Object.assign(RichTextEditor$1, {
|
|
|
30947
31209
|
Toolbar: EditorToolbar
|
|
30948
31210
|
});
|
|
30949
31211
|
|
|
30950
|
-
export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput$1 as TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };
|
|
31212
|
+
export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput$1 as TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };
|