@fountain-ui/lab 1.11.0 → 1.12.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/CHANGELOG.md +8 -0
- package/build/commonjs/Carousel/CarouselWeb.js +52 -56
- package/build/commonjs/Carousel/CarouselWeb.js.map +1 -1
- package/build/commonjs/Carousel/utils.js +3 -1
- package/build/commonjs/Carousel/utils.js.map +1 -1
- package/build/module/Carousel/CarouselWeb.js +52 -57
- package/build/module/Carousel/CarouselWeb.js.map +1 -1
- package/build/module/Carousel/utils.js +1 -0
- package/build/module/Carousel/utils.js.map +1 -1
- package/build/typescript/Carousel/CarouselProps.d.ts +20 -0
- package/build/typescript/Carousel/utils.d.ts +1 -0
- package/package.json +4 -3
- package/src/Carousel/CarouselProps.ts +37 -13
- package/src/Carousel/CarouselWeb.tsx +53 -54
- package/src/Carousel/utils.ts +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.12.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.9.2...@fountain-ui/lab@1.12.0) (2021-09-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @fountain-ui/lab
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [1.11.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.9.2...@fountain-ui/lab@1.11.0) (2021-09-23)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @fountain-ui/lab
|
|
@@ -7,10 +7,14 @@ exports.default = Carousel;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
10
12
|
var _reactSlick = _interopRequireDefault(require("react-slick"));
|
|
11
13
|
|
|
12
14
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
13
15
|
|
|
16
|
+
var _icons = require("@fountain-ui/icons");
|
|
17
|
+
|
|
14
18
|
var _utils = require("@fountain-ui/utils");
|
|
15
19
|
|
|
16
20
|
var _utils2 = require("./utils");
|
|
@@ -20,7 +24,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
20
24
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
25
|
|
|
22
26
|
const baseSettings = {
|
|
23
|
-
arrows: false,
|
|
24
27
|
dots: false,
|
|
25
28
|
draggable: true,
|
|
26
29
|
lazyLoad: 'ondemand',
|
|
@@ -35,66 +38,41 @@ const baseSettings = {
|
|
|
35
38
|
const noop = () => void 0;
|
|
36
39
|
|
|
37
40
|
const StyledContainer = _styled.default.div(props => ({
|
|
38
|
-
['& .slick-slider']: {
|
|
39
|
-
display: 'block',
|
|
40
|
-
position: 'relative',
|
|
41
|
-
userSelect: 'none'
|
|
42
|
-
},
|
|
43
|
-
['& .slick-list']: {
|
|
44
|
-
display: 'block',
|
|
45
|
-
position: 'relative',
|
|
46
|
-
overflow: 'hidden',
|
|
47
|
-
margin: 0,
|
|
48
|
-
padding: 0,
|
|
49
|
-
['&:focus']: {
|
|
50
|
-
outline: 'none'
|
|
51
|
-
},
|
|
52
|
-
['&.dragging']: {
|
|
53
|
-
cursor: 'pointer'
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
['& .slick-slider .slick-track, &.slick-slider .slick-list']: {
|
|
57
|
-
transform: 'translate3d(0, 0, 0)'
|
|
58
|
-
},
|
|
59
41
|
['& .slick-track']: {
|
|
60
|
-
display: '
|
|
61
|
-
position: 'relative',
|
|
62
|
-
top: 0,
|
|
63
|
-
left: 0,
|
|
64
|
-
['&:before, &:after']: {
|
|
65
|
-
display: 'table',
|
|
66
|
-
content: '\'\''
|
|
67
|
-
},
|
|
68
|
-
['&:after']: {
|
|
69
|
-
clear: 'both'
|
|
70
|
-
}
|
|
42
|
+
display: 'flex'
|
|
71
43
|
},
|
|
72
|
-
['& .slick-slide']: {
|
|
73
|
-
display: '
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
['& > div']: {
|
|
78
|
-
display: 'flex',
|
|
79
|
-
transform: `scale(${props.inactiveSlideScale})`,
|
|
80
|
-
transition: 'transform .5s',
|
|
81
|
-
opacity: props.inactiveSlideOpacity
|
|
82
|
-
}
|
|
44
|
+
['& .slick-slide > div']: {
|
|
45
|
+
display: 'flex',
|
|
46
|
+
opacity: 0.2,
|
|
47
|
+
transform: `scale(${props.inactiveSlideScale})`,
|
|
48
|
+
transition: 'transform .5s'
|
|
83
49
|
},
|
|
84
|
-
[
|
|
85
|
-
transform:
|
|
50
|
+
[`& .slick-active.slick-current > div`]: {
|
|
51
|
+
transform: `scale(${props.activeSlideScale})`,
|
|
86
52
|
opacity: 1
|
|
87
53
|
},
|
|
88
|
-
|
|
89
|
-
display: 'block'
|
|
90
|
-
}
|
|
54
|
+
...props.arrowsStyle
|
|
91
55
|
}));
|
|
92
56
|
|
|
57
|
+
const ArrowContainer = ({
|
|
58
|
+
children
|
|
59
|
+
}) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
60
|
+
style: {
|
|
61
|
+
height: '100%',
|
|
62
|
+
justifyContent: 'center',
|
|
63
|
+
alignItems: 'center',
|
|
64
|
+
backgroundColor: 'white',
|
|
65
|
+
borderRadius: 16
|
|
66
|
+
}
|
|
67
|
+
}, children);
|
|
68
|
+
|
|
93
69
|
function Carousel(props) {
|
|
94
70
|
const {
|
|
71
|
+
activeSlideScale = _utils2.defaultActiveSlideScale,
|
|
95
72
|
autoplay = _utils2.defaultAutoplay,
|
|
96
73
|
autoplayInterval = _utils2.defaultAutoplayInterval,
|
|
97
|
-
|
|
74
|
+
centerMode = true,
|
|
75
|
+
centerSlidePadding = 0,
|
|
98
76
|
data,
|
|
99
77
|
inactiveSlideOpacity = _utils2.defaultInactiveSlideOpacity,
|
|
100
78
|
inactiveSlideScale = _utils2.defaultInactiveSlideScale,
|
|
@@ -103,7 +81,9 @@ function Carousel(props) {
|
|
|
103
81
|
onChange,
|
|
104
82
|
renderItem,
|
|
105
83
|
slidesToScroll = 1,
|
|
106
|
-
slidesToShow = 1
|
|
84
|
+
slidesToShow = 1,
|
|
85
|
+
arrows = false,
|
|
86
|
+
arrowsStyle = {}
|
|
107
87
|
} = props;
|
|
108
88
|
|
|
109
89
|
const slickRef = _react.default.useRef(null);
|
|
@@ -135,20 +115,36 @@ function Carousel(props) {
|
|
|
135
115
|
};
|
|
136
116
|
|
|
137
117
|
return /*#__PURE__*/_react.default.createElement(StyledContainer, {
|
|
118
|
+
activeSlideScale: activeSlideScale,
|
|
138
119
|
inactiveSlideOpacity: inactiveSlideOpacity,
|
|
139
|
-
inactiveSlideScale: inactiveSlideScale
|
|
120
|
+
inactiveSlideScale: inactiveSlideScale,
|
|
121
|
+
arrowsStyle: arrowsStyle
|
|
140
122
|
}, /*#__PURE__*/_react.default.createElement(_reactSlick.default, _extends({}, baseSettings, {
|
|
141
123
|
afterChange: handleAfterChange,
|
|
142
124
|
autoplay: autoplay,
|
|
143
125
|
autoplaySpeed: autoplayInterval,
|
|
144
126
|
beforeChange: handleBeforeChange,
|
|
145
|
-
centerMode:
|
|
146
|
-
centerPadding:
|
|
127
|
+
centerMode: centerMode,
|
|
128
|
+
centerPadding: `${centerSlidePadding}px`,
|
|
147
129
|
infinite: infinite,
|
|
148
130
|
initialSlide: index,
|
|
149
131
|
ref: slickRef,
|
|
150
|
-
slidesToScroll:
|
|
151
|
-
slidesToShow:
|
|
132
|
+
slidesToScroll: slidesToScroll,
|
|
133
|
+
slidesToShow: slidesToShow,
|
|
134
|
+
arrows: arrows,
|
|
135
|
+
prevArrow:
|
|
136
|
+
/*#__PURE__*/
|
|
137
|
+
// If root component is not a div, there's no arrow class.
|
|
138
|
+
_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ArrowContainer, {
|
|
139
|
+
children: /*#__PURE__*/_react.default.createElement(_icons.ChevronLeft, {
|
|
140
|
+
fill: '#767676'
|
|
141
|
+
})
|
|
142
|
+
})),
|
|
143
|
+
nextArrow: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ArrowContainer, {
|
|
144
|
+
children: /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
|
|
145
|
+
fill: '#767676'
|
|
146
|
+
})
|
|
147
|
+
}))
|
|
152
148
|
}), (0, _utils.mapIndexed)((item, index) => {
|
|
153
149
|
const child = renderItem({
|
|
154
150
|
item,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CarouselWeb.tsx"],"names":["baseSettings","
|
|
1
|
+
{"version":3,"sources":["CarouselWeb.tsx"],"names":["baseSettings","dots","draggable","lazyLoad","pauseOnFocus","pauseOnHover","rows","swipe","slidesPerRow","vertical","noop","StyledContainer","styled","div","props","display","opacity","transform","inactiveSlideScale","transition","activeSlideScale","arrowsStyle","ArrowContainer","children","height","justifyContent","alignItems","backgroundColor","borderRadius","Carousel","defaultActiveSlideScale","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerMode","centerSlidePadding","data","inactiveSlideOpacity","defaultInactiveSlideOpacity","defaultInactiveSlideScale","index","infinite","defaultInfinite","onChange","renderItem","slidesToScroll","slidesToShow","arrows","slickRef","React","useRef","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","item","child","cloneElement","key"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AASA,MAAMA,YAAsB,GAAG;AAC3BC,EAAAA,IAAI,EAAE,KADqB;AAE3BC,EAAAA,SAAS,EAAE,IAFgB;AAG3BC,EAAAA,QAAQ,EAAE,UAHiB;AAI3BC,EAAAA,YAAY,EAAE,IAJa;AAK3BC,EAAAA,YAAY,EAAE,IALa;AAM3BC,EAAAA,IAAI,EAAE,CANqB;AAO3BC,EAAAA,KAAK,EAAE,IAPoB;AAQ3BC,EAAAA,YAAY,EAAE,CARa;AAS3BC,EAAAA,QAAQ,EAAE;AATiB,CAA/B;;AAYA,MAAMC,IAAI,GAAG,MAAM,KAAK,CAAxB;;AAEA,MAAMC,eAAoB,GAAGC,gBAAOC,GAAP,CAAYC,KAAD,KAAiB;AACrD,GAAC,gBAAD,GAAoB;AAChBC,IAAAA,OAAO,EAAE;AADO,GADiC;AAIrD,GAAC,sBAAD,GAA0B;AACtBA,IAAAA,OAAO,EAAE,MADa;AAEtBC,IAAAA,OAAO,EAAE,GAFa;AAGtBC,IAAAA,SAAS,EAAG,SAAQH,KAAK,CAACI,kBAAmB,GAHvB;AAItBC,IAAAA,UAAU,EAAE;AAJU,GAJ2B;AAUrD,GAAE,qCAAF,GAAyC;AACrCF,IAAAA,SAAS,EAAG,SAAQH,KAAK,CAACM,gBAAiB,GADN;AAErCJ,IAAAA,OAAO,EAAE;AAF4B,GAVY;AAcrD,KAAGF,KAAK,CAACO;AAd4C,CAAjB,CAAX,CAA7B;;AAqBA,MAAMC,cAAc,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,kBACnB,6BAAC,iBAAD;AACI,EAAA,KAAK,EAAE;AACHC,IAAAA,MAAM,EAAE,MADL;AAEHC,IAAAA,cAAc,EAAE,QAFb;AAGHC,IAAAA,UAAU,EAAE,QAHT;AAIHC,IAAAA,eAAe,EAAE,OAJd;AAKHC,IAAAA,YAAY,EAAE;AALX;AADX,GASKL,QATL,CADJ;;AAce,SAASM,QAAT,CAAyBf,KAAzB,EAAsD;AACjE,QAAM;AACFM,IAAAA,gBAAgB,GAAGU,+BADjB;AAEFC,IAAAA,QAAQ,GAAGC,uBAFT;AAGFC,IAAAA,gBAAgB,GAAGC,+BAHjB;AAIFC,IAAAA,UAAU,GAAG,IAJX;AAKFC,IAAAA,kBAAkB,GAAG,CALnB;AAMFC,IAAAA,IANE;AAOFC,IAAAA,oBAAoB,GAAGC,mCAPrB;AAQFrB,IAAAA,kBAAkB,GAAGsB,iCARnB;AASFC,IAAAA,KATE;AAUFC,IAAAA,QAAQ,GAAGC,uBAVT;AAWFC,IAAAA,QAXE;AAYFC,IAAAA,UAZE;AAaFC,IAAAA,cAAc,GAAG,CAbf;AAcFC,IAAAA,YAAY,GAAG,CAdb;AAeFC,IAAAA,MAAM,GAAG,KAfP;AAgBF3B,IAAAA,WAAW,GAAG;AAhBZ,MAiBFP,KAjBJ;;AAmBA,QAAMmC,QAAQ,GAAGC,eAAMC,MAAN,CAA2B,IAA3B,CAAjB;;AAEAD,iBAAME,SAAN,CAAgB,MAAM;AAClB,QAAIH,QAAQ,CAACI,OAAb,EAAsB;AAClBJ,MAAAA,QAAQ,CAACI,OAAT,CAAiBC,SAAjB,CAA2Bb,KAA3B,EAAkC,KAAlC;AACH;AACJ,GAJD,EAIG,CAACA,KAAD,CAJH;;AAMA,QAAMc,oCAAoC,GAAG,MAAM;AAC/C;AACA,QAAIN,QAAQ,CAACI,OAAT,IAAoBJ,QAAQ,CAACI,OAAT,CAAiBG,WAAzC,EAAsD;AAClD;AACAP,MAAAA,QAAQ,CAACI,OAAT,CAAiBG,WAAjB,CAA6BC,YAA7B,GAA4C/C,IAA5C;AACH;AACJ,GAND;;AAQA,QAAMgD,iBAAiB,GAAIC,QAAD,IAAsB;AAC5CJ,IAAAA,oCAAoC;;AAEpC,QAAIX,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACe,QAAD,CAAR;AACH;AACJ,GAND;;AAQA,QAAMC,kBAAkB,GAAG,MAAM;AAC7BL,IAAAA,oCAAoC;AACvC,GAFD;;AAIA,sBACI,6BAAC,eAAD;AACI,IAAA,gBAAgB,EAAEnC,gBADtB;AAEI,IAAA,oBAAoB,EAAEkB,oBAF1B;AAGI,IAAA,kBAAkB,EAAEpB,kBAHxB;AAII,IAAA,WAAW,EAAEG;AAJjB,kBAMI,6BAAC,mBAAD,eACQrB,YADR;AAEI,IAAA,WAAW,EAAE0D,iBAFjB;AAGI,IAAA,QAAQ,EAAE3B,QAHd;AAII,IAAA,aAAa,EAAEE,gBAJnB;AAKI,IAAA,YAAY,EAAE2B,kBALlB;AAMI,IAAA,UAAU,EAAEzB,UANhB;AAOI,IAAA,aAAa,EAAG,GAAEC,kBAAmB,IAPzC;AAQI,IAAA,QAAQ,EAAEM,QARd;AASI,IAAA,YAAY,EAAED,KATlB;AAUI,IAAA,GAAG,EAAEQ,QAVT;AAWI,IAAA,cAAc,EAAEH,cAXpB;AAYI,IAAA,YAAY,EAAEC,YAZlB;AAaI,IAAA,MAAM,EAAEC,MAbZ;AAcI,IAAA,SAAS;AAAA;AACL;AACA,2DACI,6BAAC,cAAD;AAAgB,MAAA,QAAQ,eAAE,6BAAC,kBAAD;AAAa,QAAA,IAAI,EAAE;AAAnB;AAA1B,MADJ,CAhBR;AAoBI,IAAA,SAAS,eACL,uDACI,6BAAC,cAAD;AAAgB,MAAA,QAAQ,eAAE,6BAAC,mBAAD;AAAc,QAAA,IAAI,EAAE;AAApB;AAA1B,MADJ;AArBR,MA0BK,uBAAW,CAACa,IAAD,EAAOpB,KAAP,KAAiB;AACzB,UAAMqB,KAAK,GAAGjB,UAAU,CAAC;AAAEgB,MAAAA,IAAF;AAAQpB,MAAAA;AAAR,KAAD,CAAxB;;AAEA,QAAIqB,KAAJ,EAAW;AACP,0BAAOZ,eAAMa,YAAN,CAAmBD,KAAnB,EAA0B;AAAEE,QAAAA,GAAG,EAAEvB;AAAP,OAA1B,CAAP;AACH;;AACD,WAAOqB,KAAP;AACH,GAPA,EAOEzB,IAPF,CA1BL,CANJ,CADJ;AA4CH;;AAAA","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n defaultAutoplay,\n defaultAutoplayInterval,\n defaultInactiveSlideOpacity,\n defaultInactiveSlideScale,\n defaultActiveSlideScale,\n defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n dots: false,\n draggable: true,\n lazyLoad: 'ondemand',\n pauseOnFocus: true,\n pauseOnHover: true,\n rows: 1,\n swipe: true,\n slidesPerRow: 1,\n vertical: false,\n};\n\nconst noop = () => void 0;\n\nconst StyledContainer: any = styled.div((props: any) => ({\n ['& .slick-track']: {\n display: 'flex',\n },\n ['& .slick-slide > div']: {\n display: 'flex',\n opacity: 0.2,\n transform: `scale(${props.inactiveSlideScale})`,\n transition: 'transform .5s',\n },\n [`& .slick-active.slick-current > div`]: {\n transform: `scale(${props.activeSlideScale})`,\n opacity: 1,\n },\n ...props.arrowsStyle,\n}));\n\ninterface ArrowContainerProps {\n children: React.ReactElement;\n}\n\nconst ArrowContainer = ({ children }: ArrowContainerProps) => (\n <View\n style={{\n height: '100%',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: 'white',\n borderRadius: 16,\n }}\n >\n {children}\n </View>\n);\n\nexport default function Carousel<ItemT>(props: CarouselProps<ItemT>) {\n const {\n activeSlideScale = defaultActiveSlideScale,\n autoplay = defaultAutoplay,\n autoplayInterval = defaultAutoplayInterval,\n centerMode = true,\n centerSlidePadding = 0,\n data,\n inactiveSlideOpacity = defaultInactiveSlideOpacity,\n inactiveSlideScale = defaultInactiveSlideScale,\n index,\n infinite = defaultInfinite,\n onChange,\n renderItem,\n slidesToScroll = 1,\n slidesToShow = 1,\n arrows = false,\n arrowsStyle = {},\n } = props;\n\n const slickRef = React.useRef<Slick | null>(null);\n\n React.useEffect(() => {\n if (slickRef.current) {\n slickRef.current.slickGoTo(index, false);\n }\n }, [index]);\n\n const fixOnClickNotWorkingAfterMobileSwipe = () => {\n // @ts-ignore\n if (slickRef.current && slickRef.current.innerSlider) {\n // @ts-ignore\n slickRef.current.innerSlider.clickHandler = noop;\n }\n };\n\n const handleAfterChange = (newIndex: number) => {\n fixOnClickNotWorkingAfterMobileSwipe();\n\n if (onChange) {\n onChange(newIndex);\n }\n };\n\n const handleBeforeChange = () => {\n fixOnClickNotWorkingAfterMobileSwipe();\n };\n\n return (\n <StyledContainer\n activeSlideScale={activeSlideScale}\n inactiveSlideOpacity={inactiveSlideOpacity}\n inactiveSlideScale={inactiveSlideScale}\n arrowsStyle={arrowsStyle}\n >\n <Slick\n {...baseSettings}\n afterChange={handleAfterChange}\n autoplay={autoplay}\n autoplaySpeed={autoplayInterval}\n beforeChange={handleBeforeChange}\n centerMode={centerMode}\n centerPadding={`${centerSlidePadding}px`}\n infinite={infinite}\n initialSlide={index}\n ref={slickRef}\n slidesToScroll={slidesToScroll}\n slidesToShow={slidesToShow}\n arrows={arrows}\n prevArrow={(\n // If root component is not a div, there's no arrow class.\n <div>\n <ArrowContainer children={<ChevronLeft fill={'#767676'}/>}/>\n </div>\n )}\n nextArrow={(\n <div>\n <ArrowContainer children={<ChevronRight fill={'#767676'}/>}/>\n </div>\n )}\n >\n {mapIndexed((item, index) => {\n const child = renderItem({ item, index });\n\n if (child) {\n return React.cloneElement(child, { key: index });\n }\n return child;\n }, data)}\n </Slick>\n </StyledContainer>\n );\n};\n"]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.defaultInfinite = exports.defaultInactiveSlideScale = exports.defaultInactiveSlideOpacity = exports.defaultAutoplayInterval = exports.defaultAutoplay = void 0;
|
|
6
|
+
exports.defaultInfinite = exports.defaultActiveSlideScale = exports.defaultInactiveSlideScale = exports.defaultInactiveSlideOpacity = exports.defaultAutoplayInterval = exports.defaultAutoplay = void 0;
|
|
7
7
|
const defaultAutoplay = false;
|
|
8
8
|
exports.defaultAutoplay = defaultAutoplay;
|
|
9
9
|
const defaultAutoplayInterval = 3000;
|
|
@@ -12,6 +12,8 @@ const defaultInactiveSlideOpacity = 0.7;
|
|
|
12
12
|
exports.defaultInactiveSlideOpacity = defaultInactiveSlideOpacity;
|
|
13
13
|
const defaultInactiveSlideScale = 0.9;
|
|
14
14
|
exports.defaultInactiveSlideScale = defaultInactiveSlideScale;
|
|
15
|
+
const defaultActiveSlideScale = 0.990;
|
|
16
|
+
exports.defaultActiveSlideScale = defaultActiveSlideScale;
|
|
15
17
|
const defaultInfinite = false;
|
|
16
18
|
exports.defaultInfinite = defaultInfinite;
|
|
17
19
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utils.ts"],"names":["defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultInfinite"],"mappings":";;;;;;AAAO,MAAMA,eAAe,GAAG,KAAxB;;AAEA,MAAMC,uBAAuB,GAAG,IAAhC;;AAEA,MAAMC,2BAA2B,GAAG,GAApC;;AAEA,MAAMC,yBAAyB,GAAG,GAAlC;;AAEA,MAAMC,eAAe,GAAG,KAAxB","sourcesContent":["export const defaultAutoplay = false;\n\nexport const defaultAutoplayInterval = 3000;\n\nexport const defaultInactiveSlideOpacity = 0.7;\n\nexport const defaultInactiveSlideScale = 0.9;\n\nexport const defaultInfinite = false
|
|
1
|
+
{"version":3,"sources":["utils.ts"],"names":["defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultActiveSlideScale","defaultInfinite"],"mappings":";;;;;;AAAO,MAAMA,eAAe,GAAG,KAAxB;;AAEA,MAAMC,uBAAuB,GAAG,IAAhC;;AAEA,MAAMC,2BAA2B,GAAG,GAApC;;AAEA,MAAMC,yBAAyB,GAAG,GAAlC;;AAEA,MAAMC,uBAAuB,GAAG,KAAhC;;AAEA,MAAMC,eAAe,GAAG,KAAxB","sourcesContent":["export const defaultAutoplay = false;\n\nexport const defaultAutoplayInterval = 3000;\n\nexport const defaultInactiveSlideOpacity = 0.7;\n\nexport const defaultInactiveSlideScale = 0.9;\n\nexport const defaultActiveSlideScale = 0.990;\n\nexport const defaultInfinite = false;\n"]}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
4
5
|
import Slick from 'react-slick';
|
|
5
6
|
import styled from '@emotion/styled';
|
|
7
|
+
import { ChevronLeft, ChevronRight } from '@fountain-ui/icons';
|
|
6
8
|
import { mapIndexed } from '@fountain-ui/utils';
|
|
7
|
-
import { defaultAutoplay, defaultAutoplayInterval, defaultInactiveSlideOpacity, defaultInactiveSlideScale, defaultInfinite } from './utils';
|
|
9
|
+
import { defaultAutoplay, defaultAutoplayInterval, defaultInactiveSlideOpacity, defaultInactiveSlideScale, defaultActiveSlideScale, defaultInfinite } from './utils';
|
|
8
10
|
const baseSettings = {
|
|
9
|
-
arrows: false,
|
|
10
11
|
dots: false,
|
|
11
12
|
draggable: true,
|
|
12
13
|
lazyLoad: 'ondemand',
|
|
@@ -21,65 +22,41 @@ const baseSettings = {
|
|
|
21
22
|
const noop = () => void 0;
|
|
22
23
|
|
|
23
24
|
const StyledContainer = styled.div(props => ({
|
|
24
|
-
['& .slick-slider']: {
|
|
25
|
-
display: 'block',
|
|
26
|
-
position: 'relative',
|
|
27
|
-
userSelect: 'none'
|
|
28
|
-
},
|
|
29
|
-
['& .slick-list']: {
|
|
30
|
-
display: 'block',
|
|
31
|
-
position: 'relative',
|
|
32
|
-
overflow: 'hidden',
|
|
33
|
-
margin: 0,
|
|
34
|
-
padding: 0,
|
|
35
|
-
['&:focus']: {
|
|
36
|
-
outline: 'none'
|
|
37
|
-
},
|
|
38
|
-
['&.dragging']: {
|
|
39
|
-
cursor: 'pointer'
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
['& .slick-slider .slick-track, &.slick-slider .slick-list']: {
|
|
43
|
-
transform: 'translate3d(0, 0, 0)'
|
|
44
|
-
},
|
|
45
25
|
['& .slick-track']: {
|
|
46
|
-
display: '
|
|
47
|
-
position: 'relative',
|
|
48
|
-
top: 0,
|
|
49
|
-
left: 0,
|
|
50
|
-
['&:before, &:after']: {
|
|
51
|
-
display: 'table',
|
|
52
|
-
content: '\'\''
|
|
53
|
-
},
|
|
54
|
-
['&:after']: {
|
|
55
|
-
clear: 'both'
|
|
56
|
-
}
|
|
26
|
+
display: 'flex'
|
|
57
27
|
},
|
|
58
|
-
['& .slick-slide']: {
|
|
59
|
-
display: '
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
['& > div']: {
|
|
64
|
-
display: 'flex',
|
|
65
|
-
transform: `scale(${props.inactiveSlideScale})`,
|
|
66
|
-
transition: 'transform .5s',
|
|
67
|
-
opacity: props.inactiveSlideOpacity
|
|
68
|
-
}
|
|
28
|
+
['& .slick-slide > div']: {
|
|
29
|
+
display: 'flex',
|
|
30
|
+
opacity: 0.2,
|
|
31
|
+
transform: `scale(${props.inactiveSlideScale})`,
|
|
32
|
+
transition: 'transform .5s'
|
|
69
33
|
},
|
|
70
|
-
[
|
|
71
|
-
transform:
|
|
34
|
+
[`& .slick-active.slick-current > div`]: {
|
|
35
|
+
transform: `scale(${props.activeSlideScale})`,
|
|
72
36
|
opacity: 1
|
|
73
37
|
},
|
|
74
|
-
|
|
75
|
-
display: 'block'
|
|
76
|
-
}
|
|
38
|
+
...props.arrowsStyle
|
|
77
39
|
}));
|
|
40
|
+
|
|
41
|
+
const ArrowContainer = ({
|
|
42
|
+
children
|
|
43
|
+
}) => /*#__PURE__*/React.createElement(View, {
|
|
44
|
+
style: {
|
|
45
|
+
height: '100%',
|
|
46
|
+
justifyContent: 'center',
|
|
47
|
+
alignItems: 'center',
|
|
48
|
+
backgroundColor: 'white',
|
|
49
|
+
borderRadius: 16
|
|
50
|
+
}
|
|
51
|
+
}, children);
|
|
52
|
+
|
|
78
53
|
export default function Carousel(props) {
|
|
79
54
|
const {
|
|
55
|
+
activeSlideScale = defaultActiveSlideScale,
|
|
80
56
|
autoplay = defaultAutoplay,
|
|
81
57
|
autoplayInterval = defaultAutoplayInterval,
|
|
82
|
-
|
|
58
|
+
centerMode = true,
|
|
59
|
+
centerSlidePadding = 0,
|
|
83
60
|
data,
|
|
84
61
|
inactiveSlideOpacity = defaultInactiveSlideOpacity,
|
|
85
62
|
inactiveSlideScale = defaultInactiveSlideScale,
|
|
@@ -88,7 +65,9 @@ export default function Carousel(props) {
|
|
|
88
65
|
onChange,
|
|
89
66
|
renderItem,
|
|
90
67
|
slidesToScroll = 1,
|
|
91
|
-
slidesToShow = 1
|
|
68
|
+
slidesToShow = 1,
|
|
69
|
+
arrows = false,
|
|
70
|
+
arrowsStyle = {}
|
|
92
71
|
} = props;
|
|
93
72
|
const slickRef = React.useRef(null);
|
|
94
73
|
React.useEffect(() => {
|
|
@@ -118,20 +97,36 @@ export default function Carousel(props) {
|
|
|
118
97
|
};
|
|
119
98
|
|
|
120
99
|
return /*#__PURE__*/React.createElement(StyledContainer, {
|
|
100
|
+
activeSlideScale: activeSlideScale,
|
|
121
101
|
inactiveSlideOpacity: inactiveSlideOpacity,
|
|
122
|
-
inactiveSlideScale: inactiveSlideScale
|
|
102
|
+
inactiveSlideScale: inactiveSlideScale,
|
|
103
|
+
arrowsStyle: arrowsStyle
|
|
123
104
|
}, /*#__PURE__*/React.createElement(Slick, _extends({}, baseSettings, {
|
|
124
105
|
afterChange: handleAfterChange,
|
|
125
106
|
autoplay: autoplay,
|
|
126
107
|
autoplaySpeed: autoplayInterval,
|
|
127
108
|
beforeChange: handleBeforeChange,
|
|
128
|
-
centerMode:
|
|
129
|
-
centerPadding:
|
|
109
|
+
centerMode: centerMode,
|
|
110
|
+
centerPadding: `${centerSlidePadding}px`,
|
|
130
111
|
infinite: infinite,
|
|
131
112
|
initialSlide: index,
|
|
132
113
|
ref: slickRef,
|
|
133
|
-
slidesToScroll:
|
|
134
|
-
slidesToShow:
|
|
114
|
+
slidesToScroll: slidesToScroll,
|
|
115
|
+
slidesToShow: slidesToShow,
|
|
116
|
+
arrows: arrows,
|
|
117
|
+
prevArrow:
|
|
118
|
+
/*#__PURE__*/
|
|
119
|
+
// If root component is not a div, there's no arrow class.
|
|
120
|
+
React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowContainer, {
|
|
121
|
+
children: /*#__PURE__*/React.createElement(ChevronLeft, {
|
|
122
|
+
fill: '#767676'
|
|
123
|
+
})
|
|
124
|
+
})),
|
|
125
|
+
nextArrow: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowContainer, {
|
|
126
|
+
children: /*#__PURE__*/React.createElement(ChevronRight, {
|
|
127
|
+
fill: '#767676'
|
|
128
|
+
})
|
|
129
|
+
}))
|
|
135
130
|
}), mapIndexed((item, index) => {
|
|
136
131
|
const child = renderItem({
|
|
137
132
|
item,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CarouselWeb.tsx"],"names":["React","Slick","styled","mapIndexed","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","
|
|
1
|
+
{"version":3,"sources":["CarouselWeb.tsx"],"names":["React","View","Slick","styled","ChevronLeft","ChevronRight","mapIndexed","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultActiveSlideScale","defaultInfinite","baseSettings","dots","draggable","lazyLoad","pauseOnFocus","pauseOnHover","rows","swipe","slidesPerRow","vertical","noop","StyledContainer","div","props","display","opacity","transform","inactiveSlideScale","transition","activeSlideScale","arrowsStyle","ArrowContainer","children","height","justifyContent","alignItems","backgroundColor","borderRadius","Carousel","autoplay","autoplayInterval","centerMode","centerSlidePadding","data","inactiveSlideOpacity","index","infinite","onChange","renderItem","slidesToScroll","slidesToShow","arrows","slickRef","useRef","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","item","child","cloneElement","key"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n defaultAutoplay,\n defaultAutoplayInterval,\n defaultInactiveSlideOpacity,\n defaultInactiveSlideScale,\n defaultActiveSlideScale,\n defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n dots: false,\n draggable: true,\n lazyLoad: 'ondemand',\n pauseOnFocus: true,\n pauseOnHover: true,\n rows: 1,\n swipe: true,\n slidesPerRow: 1,\n vertical: false,\n};\n\nconst noop = () => void 0;\n\nconst StyledContainer: any = styled.div((props: any) => ({\n ['& .slick-track']: {\n display: 'flex',\n },\n ['& .slick-slide > div']: {\n display: 'flex',\n opacity: 0.2,\n transform: `scale(${props.inactiveSlideScale})`,\n transition: 'transform .5s',\n },\n [`& .slick-active.slick-current > div`]: {\n transform: `scale(${props.activeSlideScale})`,\n opacity: 1,\n },\n ...props.arrowsStyle,\n}));\n\ninterface ArrowContainerProps {\n children: React.ReactElement;\n}\n\nconst ArrowContainer = ({ children }: ArrowContainerProps) => (\n <View\n style={{\n height: '100%',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: 'white',\n borderRadius: 16,\n }}\n >\n {children}\n </View>\n);\n\nexport default function Carousel<ItemT>(props: CarouselProps<ItemT>) {\n const {\n activeSlideScale = defaultActiveSlideScale,\n autoplay = defaultAutoplay,\n autoplayInterval = defaultAutoplayInterval,\n centerMode = true,\n centerSlidePadding = 0,\n data,\n inactiveSlideOpacity = defaultInactiveSlideOpacity,\n inactiveSlideScale = defaultInactiveSlideScale,\n index,\n infinite = defaultInfinite,\n onChange,\n renderItem,\n slidesToScroll = 1,\n slidesToShow = 1,\n arrows = false,\n arrowsStyle = {},\n } = props;\n\n const slickRef = React.useRef<Slick | null>(null);\n\n React.useEffect(() => {\n if (slickRef.current) {\n slickRef.current.slickGoTo(index, false);\n }\n }, [index]);\n\n const fixOnClickNotWorkingAfterMobileSwipe = () => {\n // @ts-ignore\n if (slickRef.current && slickRef.current.innerSlider) {\n // @ts-ignore\n slickRef.current.innerSlider.clickHandler = noop;\n }\n };\n\n const handleAfterChange = (newIndex: number) => {\n fixOnClickNotWorkingAfterMobileSwipe();\n\n if (onChange) {\n onChange(newIndex);\n }\n };\n\n const handleBeforeChange = () => {\n fixOnClickNotWorkingAfterMobileSwipe();\n };\n\n return (\n <StyledContainer\n activeSlideScale={activeSlideScale}\n inactiveSlideOpacity={inactiveSlideOpacity}\n inactiveSlideScale={inactiveSlideScale}\n arrowsStyle={arrowsStyle}\n >\n <Slick\n {...baseSettings}\n afterChange={handleAfterChange}\n autoplay={autoplay}\n autoplaySpeed={autoplayInterval}\n beforeChange={handleBeforeChange}\n centerMode={centerMode}\n centerPadding={`${centerSlidePadding}px`}\n infinite={infinite}\n initialSlide={index}\n ref={slickRef}\n slidesToScroll={slidesToScroll}\n slidesToShow={slidesToShow}\n arrows={arrows}\n prevArrow={(\n // If root component is not a div, there's no arrow class.\n <div>\n <ArrowContainer children={<ChevronLeft fill={'#767676'}/>}/>\n </div>\n )}\n nextArrow={(\n <div>\n <ArrowContainer children={<ChevronRight fill={'#767676'}/>}/>\n </div>\n )}\n >\n {mapIndexed((item, index) => {\n const child = renderItem({ item, index });\n\n if (child) {\n return React.cloneElement(child, { key: index });\n }\n return child;\n }, data)}\n </Slick>\n </StyledContainer>\n );\n};\n"]}
|
|
@@ -2,5 +2,6 @@ export const defaultAutoplay = false;
|
|
|
2
2
|
export const defaultAutoplayInterval = 3000;
|
|
3
3
|
export const defaultInactiveSlideOpacity = 0.7;
|
|
4
4
|
export const defaultInactiveSlideScale = 0.9;
|
|
5
|
+
export const defaultActiveSlideScale = 0.990;
|
|
5
6
|
export const defaultInfinite = false;
|
|
6
7
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utils.ts"],"names":["defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultInfinite"],"mappings":"AAAA,OAAO,MAAMA,eAAe,GAAG,KAAxB;AAEP,OAAO,MAAMC,uBAAuB,GAAG,IAAhC;AAEP,OAAO,MAAMC,2BAA2B,GAAG,GAApC;AAEP,OAAO,MAAMC,yBAAyB,GAAG,GAAlC;AAEP,OAAO,MAAMC,eAAe,GAAG,KAAxB","sourcesContent":["export const defaultAutoplay = false;\n\nexport const defaultAutoplayInterval = 3000;\n\nexport const defaultInactiveSlideOpacity = 0.7;\n\nexport const defaultInactiveSlideScale = 0.9;\n\nexport const defaultInfinite = false
|
|
1
|
+
{"version":3,"sources":["utils.ts"],"names":["defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultActiveSlideScale","defaultInfinite"],"mappings":"AAAA,OAAO,MAAMA,eAAe,GAAG,KAAxB;AAEP,OAAO,MAAMC,uBAAuB,GAAG,IAAhC;AAEP,OAAO,MAAMC,2BAA2B,GAAG,GAApC;AAEP,OAAO,MAAMC,yBAAyB,GAAG,GAAlC;AAEP,OAAO,MAAMC,uBAAuB,GAAG,KAAhC;AAEP,OAAO,MAAMC,eAAe,GAAG,KAAxB","sourcesContent":["export const defaultAutoplay = false;\n\nexport const defaultAutoplayInterval = 3000;\n\nexport const defaultInactiveSlideOpacity = 0.7;\n\nexport const defaultInactiveSlideScale = 0.9;\n\nexport const defaultActiveSlideScale = 0.990;\n\nexport const defaultInfinite = false;\n"]}
|
|
@@ -30,6 +30,11 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
|
|
|
30
30
|
* @default 0.9
|
|
31
31
|
*/
|
|
32
32
|
inactiveSlideScale?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Web only. Value of the 'scale' transform applied to a active slide.
|
|
35
|
+
* @default 0.990
|
|
36
|
+
*/
|
|
37
|
+
activeSlideScale?: number;
|
|
33
38
|
/**
|
|
34
39
|
* A number representing the index of the active slide.
|
|
35
40
|
*/
|
|
@@ -57,5 +62,20 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
|
|
|
57
62
|
* @default 1
|
|
58
63
|
*/
|
|
59
64
|
slidesToShow?: number;
|
|
65
|
+
/**
|
|
66
|
+
* Web only. Enable items to display at the center.
|
|
67
|
+
* @default true
|
|
68
|
+
*/
|
|
69
|
+
centerMode?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Web only. Enable arrows to display.
|
|
72
|
+
* @default true
|
|
73
|
+
*/
|
|
74
|
+
arrows?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Web only. Style of arrows
|
|
77
|
+
* @default true
|
|
78
|
+
*/
|
|
79
|
+
arrowsStyle?: object;
|
|
60
80
|
}> {
|
|
61
81
|
}
|
|
@@ -2,4 +2,5 @@ export declare const defaultAutoplay = false;
|
|
|
2
2
|
export declare const defaultAutoplayInterval = 3000;
|
|
3
3
|
export declare const defaultInactiveSlideOpacity = 0.7;
|
|
4
4
|
export declare const defaultInactiveSlideScale = 0.9;
|
|
5
|
+
export declare const defaultActiveSlideScale = 0.99;
|
|
5
6
|
export declare const defaultInfinite = false;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/lab",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Fountain-UI Team",
|
|
6
6
|
"description": "Incubator for Fountain-UI React components.",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@emotion/react": "^11.4.1",
|
|
19
19
|
"@emotion/styled": "^11.0.0",
|
|
20
|
+
"@fountain-ui/icons": "^1.11.0",
|
|
20
21
|
"@fountain-ui/utils": "^1.1.0",
|
|
21
22
|
"react-native-calendars": "1.1249.0"
|
|
22
23
|
},
|
|
@@ -52,7 +53,7 @@
|
|
|
52
53
|
}
|
|
53
54
|
},
|
|
54
55
|
"devDependencies": {
|
|
55
|
-
"@fountain-ui/core": "^1.
|
|
56
|
+
"@fountain-ui/core": "^1.10.0",
|
|
56
57
|
"@gorhom/bottom-sheet": "3.6.6",
|
|
57
58
|
"@react-native-community/viewpager": "^4.2.2",
|
|
58
59
|
"@types/react-native-snap-carousel": "^3.8.4",
|
|
@@ -84,5 +85,5 @@
|
|
|
84
85
|
"publishConfig": {
|
|
85
86
|
"access": "public"
|
|
86
87
|
},
|
|
87
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "38c89201acebdf0642b1547b66af8e7f970f55e2"
|
|
88
89
|
}
|
|
@@ -7,66 +7,90 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
|
|
|
7
7
|
* If `true`, enable autoplay.
|
|
8
8
|
* @default false
|
|
9
9
|
*/
|
|
10
|
-
autoplay?: boolean
|
|
10
|
+
autoplay?: boolean;
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* Delay in ms until navigating to the next item.
|
|
14
14
|
* @default 3000
|
|
15
15
|
*/
|
|
16
|
-
autoplayInterval?: number
|
|
16
|
+
autoplayInterval?: number;
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
19
|
* Padding for center slide. If specified, `slidesToScroll` and `slidesToShow` set to 1.
|
|
20
20
|
*/
|
|
21
|
-
centerSlidePadding?: number
|
|
21
|
+
centerSlidePadding?: number;
|
|
22
22
|
|
|
23
23
|
/**
|
|
24
24
|
* Delay in ms until navigating to the next item.
|
|
25
25
|
*/
|
|
26
|
-
data: ReadonlyArray<ItemT
|
|
26
|
+
data: ReadonlyArray<ItemT>;
|
|
27
27
|
|
|
28
28
|
/**
|
|
29
29
|
* Value of the opacity effect applied to inactive slides.
|
|
30
30
|
* @default 0.7
|
|
31
31
|
*/
|
|
32
|
-
inactiveSlideOpacity?: number
|
|
32
|
+
inactiveSlideOpacity?: number;
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
35
|
* Value of the 'scale' transform applied to inactive slides.
|
|
36
36
|
* @default 0.9
|
|
37
37
|
*/
|
|
38
|
-
inactiveSlideScale?: number
|
|
38
|
+
inactiveSlideScale?: number;
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Web only. Value of the 'scale' transform applied to a active slide.
|
|
42
|
+
* @default 0.990
|
|
43
|
+
*/
|
|
44
|
+
activeSlideScale?: number;
|
|
39
45
|
|
|
40
46
|
/**
|
|
41
47
|
* A number representing the index of the active slide.
|
|
42
48
|
*/
|
|
43
|
-
index: number
|
|
49
|
+
index: number;
|
|
44
50
|
|
|
45
51
|
/**
|
|
46
52
|
* Enable infinite loop mode.
|
|
47
53
|
* @default false
|
|
48
54
|
*/
|
|
49
|
-
infinite?: boolean
|
|
55
|
+
infinite?: boolean;
|
|
50
56
|
|
|
51
57
|
/**
|
|
52
58
|
* Callback fired when an index is changed.
|
|
53
59
|
*/
|
|
54
|
-
onChange?: (newIndex: number) => void
|
|
60
|
+
onChange?: (newIndex: number) => void;
|
|
55
61
|
|
|
56
62
|
/**
|
|
57
63
|
* Takes an item from data and renders it into the list.
|
|
58
64
|
*/
|
|
59
|
-
renderItem: (info: Omit<ListRenderItemInfo<ItemT>, 'separators'>) => React.ReactElement | null
|
|
65
|
+
renderItem: (info: Omit<ListRenderItemInfo<ItemT>, 'separators'>) => React.ReactElement | null;
|
|
60
66
|
|
|
61
67
|
/**
|
|
62
68
|
* Web only. Number of slides to scroll at once.
|
|
63
69
|
* @default 1
|
|
64
70
|
*/
|
|
65
|
-
slidesToScroll?: number
|
|
71
|
+
slidesToScroll?: number;
|
|
66
72
|
|
|
67
73
|
/**
|
|
68
74
|
* Web only. Number of slides to display.
|
|
69
75
|
* @default 1
|
|
70
76
|
*/
|
|
71
|
-
slidesToShow?: number
|
|
72
|
-
|
|
77
|
+
slidesToShow?: number;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Web only. Enable items to display at the center.
|
|
81
|
+
* @default true
|
|
82
|
+
*/
|
|
83
|
+
centerMode?: boolean;
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Web only. Enable arrows to display.
|
|
87
|
+
* @default true
|
|
88
|
+
*/
|
|
89
|
+
arrows?: boolean;
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Web only. Style of arrows
|
|
93
|
+
* @default true
|
|
94
|
+
*/
|
|
95
|
+
arrowsStyle?: object;
|
|
96
|
+
}> {}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
2
3
|
import Slick, { Settings } from 'react-slick';
|
|
3
4
|
import styled from '@emotion/styled';
|
|
5
|
+
import { ChevronLeft, ChevronRight } from '@fountain-ui/icons';
|
|
4
6
|
import { mapIndexed } from '@fountain-ui/utils';
|
|
5
7
|
import type CarouselProps from './CarouselProps';
|
|
6
8
|
import {
|
|
@@ -8,11 +10,11 @@ import {
|
|
|
8
10
|
defaultAutoplayInterval,
|
|
9
11
|
defaultInactiveSlideOpacity,
|
|
10
12
|
defaultInactiveSlideScale,
|
|
13
|
+
defaultActiveSlideScale,
|
|
11
14
|
defaultInfinite,
|
|
12
15
|
} from './utils';
|
|
13
16
|
|
|
14
17
|
const baseSettings: Settings = {
|
|
15
|
-
arrows: false,
|
|
16
18
|
dots: false,
|
|
17
19
|
draggable: true,
|
|
18
20
|
lazyLoad: 'ondemand',
|
|
@@ -27,66 +29,47 @@ const baseSettings: Settings = {
|
|
|
27
29
|
const noop = () => void 0;
|
|
28
30
|
|
|
29
31
|
const StyledContainer: any = styled.div((props: any) => ({
|
|
30
|
-
['& .slick-slider']: {
|
|
31
|
-
display: 'block',
|
|
32
|
-
position: 'relative',
|
|
33
|
-
userSelect: 'none',
|
|
34
|
-
},
|
|
35
|
-
['& .slick-list']: {
|
|
36
|
-
display: 'block',
|
|
37
|
-
position: 'relative',
|
|
38
|
-
overflow: 'hidden',
|
|
39
|
-
margin: 0,
|
|
40
|
-
padding: 0,
|
|
41
|
-
['&:focus']: {
|
|
42
|
-
outline: 'none',
|
|
43
|
-
},
|
|
44
|
-
['&.dragging']: {
|
|
45
|
-
cursor: 'pointer',
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
['& .slick-slider .slick-track, &.slick-slider .slick-list']: {
|
|
49
|
-
transform: 'translate3d(0, 0, 0)',
|
|
50
|
-
},
|
|
51
32
|
['& .slick-track']: {
|
|
52
|
-
display: '
|
|
53
|
-
position: 'relative',
|
|
54
|
-
top: 0,
|
|
55
|
-
left: 0,
|
|
56
|
-
['&:before, &:after']: {
|
|
57
|
-
display: 'table',
|
|
58
|
-
content: '\'\'',
|
|
59
|
-
},
|
|
60
|
-
['&:after']: {
|
|
61
|
-
clear: 'both',
|
|
62
|
-
},
|
|
33
|
+
display: 'flex',
|
|
63
34
|
},
|
|
64
|
-
['& .slick-slide']: {
|
|
65
|
-
display: '
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
['& > div']: {
|
|
70
|
-
display: 'flex',
|
|
71
|
-
transform: `scale(${props.inactiveSlideScale})`,
|
|
72
|
-
transition: 'transform .5s',
|
|
73
|
-
opacity: props.inactiveSlideOpacity,
|
|
74
|
-
},
|
|
35
|
+
['& .slick-slide > div']: {
|
|
36
|
+
display: 'flex',
|
|
37
|
+
opacity: 0.2,
|
|
38
|
+
transform: `scale(${props.inactiveSlideScale})`,
|
|
39
|
+
transition: 'transform .5s',
|
|
75
40
|
},
|
|
76
|
-
[
|
|
77
|
-
transform:
|
|
41
|
+
[`& .slick-active.slick-current > div`]: {
|
|
42
|
+
transform: `scale(${props.activeSlideScale})`,
|
|
78
43
|
opacity: 1,
|
|
79
44
|
},
|
|
80
|
-
|
|
81
|
-
display: 'block',
|
|
82
|
-
},
|
|
45
|
+
...props.arrowsStyle,
|
|
83
46
|
}));
|
|
84
47
|
|
|
48
|
+
interface ArrowContainerProps {
|
|
49
|
+
children: React.ReactElement;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
const ArrowContainer = ({ children }: ArrowContainerProps) => (
|
|
53
|
+
<View
|
|
54
|
+
style={{
|
|
55
|
+
height: '100%',
|
|
56
|
+
justifyContent: 'center',
|
|
57
|
+
alignItems: 'center',
|
|
58
|
+
backgroundColor: 'white',
|
|
59
|
+
borderRadius: 16,
|
|
60
|
+
}}
|
|
61
|
+
>
|
|
62
|
+
{children}
|
|
63
|
+
</View>
|
|
64
|
+
);
|
|
65
|
+
|
|
85
66
|
export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
|
|
86
67
|
const {
|
|
68
|
+
activeSlideScale = defaultActiveSlideScale,
|
|
87
69
|
autoplay = defaultAutoplay,
|
|
88
70
|
autoplayInterval = defaultAutoplayInterval,
|
|
89
|
-
|
|
71
|
+
centerMode = true,
|
|
72
|
+
centerSlidePadding = 0,
|
|
90
73
|
data,
|
|
91
74
|
inactiveSlideOpacity = defaultInactiveSlideOpacity,
|
|
92
75
|
inactiveSlideScale = defaultInactiveSlideScale,
|
|
@@ -96,6 +79,8 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
|
|
|
96
79
|
renderItem,
|
|
97
80
|
slidesToScroll = 1,
|
|
98
81
|
slidesToShow = 1,
|
|
82
|
+
arrows = false,
|
|
83
|
+
arrowsStyle = {},
|
|
99
84
|
} = props;
|
|
100
85
|
|
|
101
86
|
const slickRef = React.useRef<Slick | null>(null);
|
|
@@ -128,8 +113,10 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
|
|
|
128
113
|
|
|
129
114
|
return (
|
|
130
115
|
<StyledContainer
|
|
116
|
+
activeSlideScale={activeSlideScale}
|
|
131
117
|
inactiveSlideOpacity={inactiveSlideOpacity}
|
|
132
118
|
inactiveSlideScale={inactiveSlideScale}
|
|
119
|
+
arrowsStyle={arrowsStyle}
|
|
133
120
|
>
|
|
134
121
|
<Slick
|
|
135
122
|
{...baseSettings}
|
|
@@ -137,13 +124,25 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
|
|
|
137
124
|
autoplay={autoplay}
|
|
138
125
|
autoplaySpeed={autoplayInterval}
|
|
139
126
|
beforeChange={handleBeforeChange}
|
|
140
|
-
centerMode={
|
|
141
|
-
centerPadding={
|
|
127
|
+
centerMode={centerMode}
|
|
128
|
+
centerPadding={`${centerSlidePadding}px`}
|
|
142
129
|
infinite={infinite}
|
|
143
130
|
initialSlide={index}
|
|
144
131
|
ref={slickRef}
|
|
145
|
-
slidesToScroll={
|
|
146
|
-
slidesToShow={
|
|
132
|
+
slidesToScroll={slidesToScroll}
|
|
133
|
+
slidesToShow={slidesToShow}
|
|
134
|
+
arrows={arrows}
|
|
135
|
+
prevArrow={(
|
|
136
|
+
// If root component is not a div, there's no arrow class.
|
|
137
|
+
<div>
|
|
138
|
+
<ArrowContainer children={<ChevronLeft fill={'#767676'}/>}/>
|
|
139
|
+
</div>
|
|
140
|
+
)}
|
|
141
|
+
nextArrow={(
|
|
142
|
+
<div>
|
|
143
|
+
<ArrowContainer children={<ChevronRight fill={'#767676'}/>}/>
|
|
144
|
+
</div>
|
|
145
|
+
)}
|
|
147
146
|
>
|
|
148
147
|
{mapIndexed((item, index) => {
|
|
149
148
|
const child = renderItem({ item, index });
|