@r0b0t3d/react-native-collapsible 1.3.5-beta.5 → 1.3.5-beta.6
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/lib/commonjs/components/scrollable/CollapsibleSectionList.js +124 -0
- package/lib/commonjs/components/scrollable/CollapsibleSectionList.js.map +1 -0
- package/lib/commonjs/index.js +8 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/components/scrollable/CollapsibleSectionList.js +115 -0
- package/lib/module/components/scrollable/CollapsibleSectionList.js.map +1 -0
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/components/scrollable/CollapsibleSectionList.d.ts +7 -0
- package/lib/typescript/components/scrollable/CollapsibleSectionList.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +1 -0
- package/lib/typescript/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/scrollable/CollapsibleSectionList.tsx +155 -0
- package/src/index.tsx +1 -0
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = CollapsibleSectionList;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
10
|
+
var _useAnimatedScroll = _interopRequireDefault(require("./useAnimatedScroll"));
|
|
11
|
+
var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
|
|
12
|
+
var _AnimatedTopView = _interopRequireDefault(require("../header/AnimatedTopView"));
|
|
13
|
+
var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
18
|
+
const AnimatedSectionList = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.SectionList);
|
|
19
|
+
function CollapsibleSectionList(_ref) {
|
|
20
|
+
let {
|
|
21
|
+
headerSnappable = true,
|
|
22
|
+
...props
|
|
23
|
+
} = _ref;
|
|
24
|
+
const {
|
|
25
|
+
headerHeight
|
|
26
|
+
} = (0, _useCollapsibleContext.default)();
|
|
27
|
+
const {
|
|
28
|
+
contentMinHeight,
|
|
29
|
+
scrollViewRef,
|
|
30
|
+
fixedHeaderHeight
|
|
31
|
+
} = (0, _useInternalCollapsibleContext.default)();
|
|
32
|
+
const mounted = (0, _react.useRef)(true);
|
|
33
|
+
const contentHeight = (0, _react.useRef)(0);
|
|
34
|
+
const [internalContentMinHeight, setInternalContentMinHeight] = (0, _react.useState)(contentMinHeight.value);
|
|
35
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] = (0, _react.useState)(0);
|
|
36
|
+
(0, _react.useEffect)(() => {
|
|
37
|
+
return () => {
|
|
38
|
+
mounted.current = false;
|
|
39
|
+
};
|
|
40
|
+
}, []);
|
|
41
|
+
const scrollTo = (0, _react.useCallback)(() => {
|
|
42
|
+
console.warn('Not supported');
|
|
43
|
+
}, []);
|
|
44
|
+
const scrollToIndex = (0, _react.useCallback)(() => {
|
|
45
|
+
console.warn('Not supported');
|
|
46
|
+
}, []);
|
|
47
|
+
const {
|
|
48
|
+
scrollHandler
|
|
49
|
+
} = (0, _useAnimatedScroll.default)({
|
|
50
|
+
headerSnappable,
|
|
51
|
+
scrollTo,
|
|
52
|
+
scrollToIndex
|
|
53
|
+
});
|
|
54
|
+
const handleInternalContentHeight = (0, _react.useCallback)(value => {
|
|
55
|
+
if (mounted.current) {
|
|
56
|
+
setInternalContentMinHeight(value);
|
|
57
|
+
}
|
|
58
|
+
}, []);
|
|
59
|
+
const handleInternalProgressViewOffset = (0, _react.useCallback)(value => {
|
|
60
|
+
if (mounted.current) {
|
|
61
|
+
setInternalProgressViewOffset(value);
|
|
62
|
+
}
|
|
63
|
+
}, []);
|
|
64
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
|
|
65
|
+
return contentMinHeight.value;
|
|
66
|
+
}, (result, previous) => {
|
|
67
|
+
if (result !== previous) {
|
|
68
|
+
if (contentHeight.current < result && internalContentMinHeight !== result) {
|
|
69
|
+
(0, _reactNativeReanimated.runOnJS)(handleInternalContentHeight)(result);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
|
|
74
|
+
return fixedHeaderHeight.value;
|
|
75
|
+
}, (result, previous) => {
|
|
76
|
+
if (result !== previous) {
|
|
77
|
+
(0, _reactNativeReanimated.runOnJS)(handleInternalProgressViewOffset)(result);
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
const contentContainerStyle = (0, _react.useMemo)(() => [styles.contentContainer, {
|
|
81
|
+
minHeight: internalContentMinHeight
|
|
82
|
+
}, props.contentContainerStyle], [props.contentContainerStyle, internalContentMinHeight]);
|
|
83
|
+
const handleContentSizeChange = (0, _react.useCallback)((_, height) => {
|
|
84
|
+
contentHeight.current = height;
|
|
85
|
+
}, []);
|
|
86
|
+
const handleScrollToIndexFailed = (0, _react.useCallback)(() => {}, []);
|
|
87
|
+
function renderListHeader() {
|
|
88
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_AnimatedTopView.default, {
|
|
89
|
+
height: headerHeight
|
|
90
|
+
}), props.ListHeaderComponent);
|
|
91
|
+
}
|
|
92
|
+
return /*#__PURE__*/_react.default.createElement(AnimatedSectionList, _extends({
|
|
93
|
+
ref: scrollViewRef,
|
|
94
|
+
keyboardDismissMode: "on-drag",
|
|
95
|
+
keyboardShouldPersistTaps: "handled",
|
|
96
|
+
scrollEventThrottle: 1,
|
|
97
|
+
onScrollToIndexFailed: handleScrollToIndexFailed
|
|
98
|
+
}, props, {
|
|
99
|
+
style: [styles.container, props.style],
|
|
100
|
+
contentContainerStyle: contentContainerStyle,
|
|
101
|
+
onScroll: scrollHandler,
|
|
102
|
+
ListHeaderComponent: renderListHeader(),
|
|
103
|
+
onContentSizeChange: handleContentSizeChange
|
|
104
|
+
//@ts-ignore
|
|
105
|
+
,
|
|
106
|
+
simultaneousHandlers: [],
|
|
107
|
+
progressViewOffset: internalProgressViewOffset
|
|
108
|
+
}));
|
|
109
|
+
}
|
|
110
|
+
const styles = _reactNative.StyleSheet.create({
|
|
111
|
+
container: {
|
|
112
|
+
..._reactNative.StyleSheet.absoluteFillObject
|
|
113
|
+
},
|
|
114
|
+
contentContainer: {
|
|
115
|
+
flexGrow: 1
|
|
116
|
+
},
|
|
117
|
+
topView: {
|
|
118
|
+
position: 'absolute',
|
|
119
|
+
top: 0,
|
|
120
|
+
left: 0,
|
|
121
|
+
right: 0
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
//# sourceMappingURL=CollapsibleSectionList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_useAnimatedScroll","_interopRequireDefault","_useInternalCollapsibleContext","_AnimatedTopView","_useCollapsibleContext","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","AnimatedSectionList","Animated","createAnimatedComponent","SectionList","CollapsibleSectionList","_ref","headerSnappable","props","headerHeight","useCollapsibleContext","contentMinHeight","scrollViewRef","fixedHeaderHeight","useInternalCollapsibleContext","mounted","useRef","contentHeight","internalContentMinHeight","setInternalContentMinHeight","useState","value","internalProgressViewOffset","setInternalProgressViewOffset","useEffect","current","scrollTo","useCallback","console","warn","scrollToIndex","scrollHandler","useAnimatedScroll","handleInternalContentHeight","handleInternalProgressViewOffset","useAnimatedReaction","result","previous","runOnJS","contentContainerStyle","useMemo","styles","contentContainer","minHeight","handleContentSizeChange","_","height","handleScrollToIndexFailed","renderListHeader","createElement","View","ListHeaderComponent","ref","keyboardDismissMode","keyboardShouldPersistTaps","scrollEventThrottle","onScrollToIndexFailed","style","container","onScroll","onContentSizeChange","simultaneousHandlers","progressViewOffset","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"sourceRoot":"../../../../src","sources":["components/scrollable/CollapsibleSectionList.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAOA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAH,uBAAA,CAAAC,OAAA;AAIA,IAAAG,kBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,8BAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAEA,IAAAM,gBAAA,GAAAF,sBAAA,CAAAJ,OAAA;AACA,IAAAO,sBAAA,GAAAH,sBAAA,CAAAJ,OAAA;AAAsE,SAAAI,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAb,wBAAAS,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAAA,SAAAW,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAEtE,MAAMI,mBAAmB,GAAGC,8BAAQ,CAACC,uBAAuB,CAACC,wBAAW,CAAC;AAK1D,SAASC,sBAAsBA,CAAAC,IAAA,EAG9B;EAAA,IAHqC;IACnDC,eAAe,GAAG,IAAI;IACtB,GAAGC;EACQ,CAAC,GAAAF,IAAA;EACZ,MAAM;IAAEG;EAAa,CAAC,GAAG,IAAAC,8BAAqB,EAAC,CAAC;EAChD,MAAM;IAAEC,gBAAgB;IAAEC,aAAa;IAAEC;EAAkB,CAAC,GAC1D,IAAAC,sCAA6B,EAAC,CAAC;EACjC,MAAMC,OAAO,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAC5B,MAAMC,aAAa,GAAG,IAAAD,aAAM,EAAC,CAAC,CAAC;EAC/B,MAAM,CAACE,wBAAwB,EAAEC,2BAA2B,CAAC,GAAG,IAAAC,eAAQ,EACtET,gBAAgB,CAACU,KACnB,CAAC;EACD,MAAM,CAACC,0BAA0B,EAAEC,6BAA6B,CAAC,GAC/D,IAAAH,eAAQ,EAAC,CAAC,CAAC;EAEb,IAAAI,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACXT,OAAO,CAACU,OAAO,GAAG,KAAK;IACzB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjCC,OAAO,CAACC,IAAI,CAAC,eAAe,CAAC;EAC/B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,aAAa,GAAG,IAAAH,kBAAW,EAAC,MAAM;IACtCC,OAAO,CAACC,IAAI,CAAC,eAAe,CAAC;EAC/B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEE;EAAc,CAAC,GAAG,IAAAC,0BAAiB,EAAC;IAC1CzB,eAAe;IACfmB,QAAQ;IACRI;EACF,CAAC,CAAC;EAEF,MAAMG,2BAA2B,GAAG,IAAAN,kBAAW,EAAEN,KAAa,IAAK;IACjE,IAAIN,OAAO,CAACU,OAAO,EAAE;MACnBN,2BAA2B,CAACE,KAAK,CAAC;IACpC;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMa,gCAAgC,GAAG,IAAAP,kBAAW,EAAEN,KAAa,IAAK;IACtE,IAAIN,OAAO,CAACU,OAAO,EAAE;MACnBF,6BAA6B,CAACF,KAAK,CAAC;IACtC;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAc,0CAAmB,EACjB,MAAM;IACJ,OAAOxB,gBAAgB,CAACU,KAAK;EAC/B,CAAC,EACD,CAACe,MAAM,EAAEC,QAAQ,KAAK;IACpB,IAAID,MAAM,KAAKC,QAAQ,EAAE;MACvB,IACEpB,aAAa,CAACQ,OAAO,GAAGW,MAAM,IAC9BlB,wBAAwB,KAAKkB,MAAM,EACnC;QACA,IAAAE,8BAAO,EAACL,2BAA2B,CAAC,CAACG,MAAM,CAAC;MAC9C;IACF;EACF,CACF,CAAC;EAED,IAAAD,0CAAmB,EACjB,MAAM;IACJ,OAAOtB,iBAAiB,CAACQ,KAAK;EAChC,CAAC,EACD,CAACe,MAAM,EAAEC,QAAQ,KAAK;IACpB,IAAID,MAAM,KAAKC,QAAQ,EAAE;MACvB,IAAAC,8BAAO,EAACJ,gCAAgC,CAAC,CAACE,MAAM,CAAC;IACnD;EACF,CACF,CAAC;EAED,MAAMG,qBAAqB,GAAG,IAAAC,cAAO,EACnC,MAAM,CACJC,MAAM,CAACC,gBAAgB,EACvB;IAAEC,SAAS,EAAEzB;EAAyB,CAAC,EACvCV,KAAK,CAAC+B,qBAAqB,CAC5B,EACD,CAAC/B,KAAK,CAAC+B,qBAAqB,EAAErB,wBAAwB,CACxD,CAAC;EAED,MAAM0B,uBAAuB,GAAG,IAAAjB,kBAAW,EAAC,CAACkB,CAAC,EAAEC,MAAM,KAAK;IACzD7B,aAAa,CAACQ,OAAO,GAAGqB,MAAM;EAChC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,yBAAyB,GAAG,IAAApB,kBAAW,EAAC,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;EAE3D,SAASqB,gBAAgBA,CAAA,EAAG;IAC1B,oBACExF,MAAA,CAAAY,OAAA,CAAA6E,aAAA,CAACtF,YAAA,CAAAuF,IAAI,qBACH1F,MAAA,CAAAY,OAAA,CAAA6E,aAAA,CAACjF,gBAAA,CAAAI,OAAe;MAAC0E,MAAM,EAAErC;IAAa,CAAE,CAAC,EACxCD,KAAK,CAAC2C,mBACH,CAAC;EAEX;EAEA,oBACE3F,MAAA,CAAAY,OAAA,CAAA6E,aAAA,CAAChD,mBAAmB,EAAAT,QAAA;IAClB4D,GAAG,EAAExC,aAAc;IACnByC,mBAAmB,EAAC,SAAS;IAC7BC,yBAAyB,EAAC,SAAS;IACnCC,mBAAmB,EAAE,CAAE;IACvBC,qBAAqB,EAAET;EAA0B,GAC7CvC,KAAK;IACTiD,KAAK,EAAE,CAAChB,MAAM,CAACiB,SAAS,EAAElD,KAAK,CAACiD,KAAK,CAAE;IACvClB,qBAAqB,EAAEA,qBAAsB;IAC7CoB,QAAQ,EAAE5B,aAAc;IACxBoB,mBAAmB,EAAEH,gBAAgB,CAAC,CAAE;IACxCY,mBAAmB,EAAEhB;IACrB;IAAA;IACAiB,oBAAoB,EAAE,EAAG;IACzBC,kBAAkB,EAAExC;EAA2B,EAChD,CAAC;AAEN;AAEA,MAAMmB,MAAM,GAAGsB,uBAAU,CAACC,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACT,GAAGK,uBAAU,CAACE;EAChB,CAAC;EACDvB,gBAAgB,EAAE;IAChBwB,QAAQ,EAAE;EACZ,CAAC;EACDC,OAAO,EAAE;IACPC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE;EACT;AACF,CAAC,CAAC"}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -9,6 +9,7 @@ var _exportNames = {
|
|
|
9
9
|
CollapsibleContainer: true,
|
|
10
10
|
CollapsibleFlatList: true,
|
|
11
11
|
CollapsibleScrollView: true,
|
|
12
|
+
CollapsibleSectionList: true,
|
|
12
13
|
CollapsibleHeaderContainer: true,
|
|
13
14
|
StickyView: true,
|
|
14
15
|
CollapsibleView: true
|
|
@@ -37,6 +38,12 @@ Object.defineProperty(exports, "CollapsibleScrollView", {
|
|
|
37
38
|
return _CollapsibleScrollView.default;
|
|
38
39
|
}
|
|
39
40
|
});
|
|
41
|
+
Object.defineProperty(exports, "CollapsibleSectionList", {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () {
|
|
44
|
+
return _CollapsibleSectionList.default;
|
|
45
|
+
}
|
|
46
|
+
});
|
|
40
47
|
Object.defineProperty(exports, "CollapsibleView", {
|
|
41
48
|
enumerable: true,
|
|
42
49
|
get: function () {
|
|
@@ -66,6 +73,7 @@ var _useCollapsibleContext = _interopRequireDefault(require("./hooks/useCollapsi
|
|
|
66
73
|
var _CollapsibleContainer = _interopRequireDefault(require("./components/CollapsibleContainer"));
|
|
67
74
|
var _CollapsibleFlatList = _interopRequireDefault(require("./components/scrollable/CollapsibleFlatList"));
|
|
68
75
|
var _CollapsibleScrollView = _interopRequireDefault(require("./components/scrollable/CollapsibleScrollView"));
|
|
76
|
+
var _CollapsibleSectionList = _interopRequireDefault(require("./components/scrollable/CollapsibleSectionList"));
|
|
69
77
|
var _CollapsibleHeaderContainer = _interopRequireDefault(require("./components/header/CollapsibleHeaderContainer"));
|
|
70
78
|
var _StickyView = _interopRequireDefault(require("./components/header/StickyView"));
|
|
71
79
|
var _CollapsibleView = _interopRequireWildcard(require("./components/CollapsibleView"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_withCollapsibleContext","_interopRequireDefault","require","_useCollapsibleContext","_CollapsibleContainer","_CollapsibleFlatList","_CollapsibleScrollView","_CollapsibleHeaderContainer","_StickyView","_CollapsibleView","_interopRequireWildcard","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_withCollapsibleContext","_interopRequireDefault","require","_useCollapsibleContext","_CollapsibleContainer","_CollapsibleFlatList","_CollapsibleScrollView","_CollapsibleSectionList","_CollapsibleHeaderContainer","_StickyView","_CollapsibleView","_interopRequireWildcard","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,qBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,oBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,sBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,uBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,2BAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,WAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,gBAAA,GAAAC,uBAAA,CAAAT,OAAA;AACAU,MAAA,CAAAC,IAAA,CAAAH,gBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,gBAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAb,gBAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AAA6C,SAAAS,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAd,wBAAAkB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAT,GAAA,CAAAM,GAAA,SAAAK,MAAA,WAAAC,qBAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAArB,GAAA,IAAAc,GAAA,QAAAd,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAW,GAAA,EAAAd,GAAA,SAAAsB,IAAA,GAAAF,qBAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAP,GAAA,EAAAd,GAAA,cAAAsB,IAAA,KAAAA,IAAA,CAAAd,GAAA,IAAAc,IAAA,CAAAC,GAAA,KAAA1B,MAAA,CAAAS,cAAA,CAAAa,MAAA,EAAAnB,GAAA,EAAAsB,IAAA,YAAAH,MAAA,CAAAnB,GAAA,IAAAc,GAAA,CAAAd,GAAA,SAAAmB,MAAA,CAAAH,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAM,GAAA,CAAAT,GAAA,EAAAK,MAAA,YAAAA,MAAA;AAAA,SAAAjC,uBAAA4B,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
+
import { View, StyleSheet, SectionList } from 'react-native';
|
|
4
|
+
import Animated, { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
|
|
5
|
+
import useAnimatedScroll from './useAnimatedScroll';
|
|
6
|
+
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
7
|
+
import AnimatedTopView from '../header/AnimatedTopView';
|
|
8
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
9
|
+
const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);
|
|
10
|
+
export default function CollapsibleSectionList(_ref) {
|
|
11
|
+
let {
|
|
12
|
+
headerSnappable = true,
|
|
13
|
+
...props
|
|
14
|
+
} = _ref;
|
|
15
|
+
const {
|
|
16
|
+
headerHeight
|
|
17
|
+
} = useCollapsibleContext();
|
|
18
|
+
const {
|
|
19
|
+
contentMinHeight,
|
|
20
|
+
scrollViewRef,
|
|
21
|
+
fixedHeaderHeight
|
|
22
|
+
} = useInternalCollapsibleContext();
|
|
23
|
+
const mounted = useRef(true);
|
|
24
|
+
const contentHeight = useRef(0);
|
|
25
|
+
const [internalContentMinHeight, setInternalContentMinHeight] = useState(contentMinHeight.value);
|
|
26
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] = useState(0);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
return () => {
|
|
29
|
+
mounted.current = false;
|
|
30
|
+
};
|
|
31
|
+
}, []);
|
|
32
|
+
const scrollTo = useCallback(() => {
|
|
33
|
+
console.warn('Not supported');
|
|
34
|
+
}, []);
|
|
35
|
+
const scrollToIndex = useCallback(() => {
|
|
36
|
+
console.warn('Not supported');
|
|
37
|
+
}, []);
|
|
38
|
+
const {
|
|
39
|
+
scrollHandler
|
|
40
|
+
} = useAnimatedScroll({
|
|
41
|
+
headerSnappable,
|
|
42
|
+
scrollTo,
|
|
43
|
+
scrollToIndex
|
|
44
|
+
});
|
|
45
|
+
const handleInternalContentHeight = useCallback(value => {
|
|
46
|
+
if (mounted.current) {
|
|
47
|
+
setInternalContentMinHeight(value);
|
|
48
|
+
}
|
|
49
|
+
}, []);
|
|
50
|
+
const handleInternalProgressViewOffset = useCallback(value => {
|
|
51
|
+
if (mounted.current) {
|
|
52
|
+
setInternalProgressViewOffset(value);
|
|
53
|
+
}
|
|
54
|
+
}, []);
|
|
55
|
+
useAnimatedReaction(() => {
|
|
56
|
+
return contentMinHeight.value;
|
|
57
|
+
}, (result, previous) => {
|
|
58
|
+
if (result !== previous) {
|
|
59
|
+
if (contentHeight.current < result && internalContentMinHeight !== result) {
|
|
60
|
+
runOnJS(handleInternalContentHeight)(result);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
useAnimatedReaction(() => {
|
|
65
|
+
return fixedHeaderHeight.value;
|
|
66
|
+
}, (result, previous) => {
|
|
67
|
+
if (result !== previous) {
|
|
68
|
+
runOnJS(handleInternalProgressViewOffset)(result);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
const contentContainerStyle = useMemo(() => [styles.contentContainer, {
|
|
72
|
+
minHeight: internalContentMinHeight
|
|
73
|
+
}, props.contentContainerStyle], [props.contentContainerStyle, internalContentMinHeight]);
|
|
74
|
+
const handleContentSizeChange = useCallback((_, height) => {
|
|
75
|
+
contentHeight.current = height;
|
|
76
|
+
}, []);
|
|
77
|
+
const handleScrollToIndexFailed = useCallback(() => {}, []);
|
|
78
|
+
function renderListHeader() {
|
|
79
|
+
return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(AnimatedTopView, {
|
|
80
|
+
height: headerHeight
|
|
81
|
+
}), props.ListHeaderComponent);
|
|
82
|
+
}
|
|
83
|
+
return /*#__PURE__*/React.createElement(AnimatedSectionList, _extends({
|
|
84
|
+
ref: scrollViewRef,
|
|
85
|
+
keyboardDismissMode: "on-drag",
|
|
86
|
+
keyboardShouldPersistTaps: "handled",
|
|
87
|
+
scrollEventThrottle: 1,
|
|
88
|
+
onScrollToIndexFailed: handleScrollToIndexFailed
|
|
89
|
+
}, props, {
|
|
90
|
+
style: [styles.container, props.style],
|
|
91
|
+
contentContainerStyle: contentContainerStyle,
|
|
92
|
+
onScroll: scrollHandler,
|
|
93
|
+
ListHeaderComponent: renderListHeader(),
|
|
94
|
+
onContentSizeChange: handleContentSizeChange
|
|
95
|
+
//@ts-ignore
|
|
96
|
+
,
|
|
97
|
+
simultaneousHandlers: [],
|
|
98
|
+
progressViewOffset: internalProgressViewOffset
|
|
99
|
+
}));
|
|
100
|
+
}
|
|
101
|
+
const styles = StyleSheet.create({
|
|
102
|
+
container: {
|
|
103
|
+
...StyleSheet.absoluteFillObject
|
|
104
|
+
},
|
|
105
|
+
contentContainer: {
|
|
106
|
+
flexGrow: 1
|
|
107
|
+
},
|
|
108
|
+
topView: {
|
|
109
|
+
position: 'absolute',
|
|
110
|
+
top: 0,
|
|
111
|
+
left: 0,
|
|
112
|
+
right: 0
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
//# sourceMappingURL=CollapsibleSectionList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","View","StyleSheet","SectionList","Animated","runOnJS","useAnimatedReaction","useAnimatedScroll","useInternalCollapsibleContext","AnimatedTopView","useCollapsibleContext","AnimatedSectionList","createAnimatedComponent","CollapsibleSectionList","_ref","headerSnappable","props","headerHeight","contentMinHeight","scrollViewRef","fixedHeaderHeight","mounted","contentHeight","internalContentMinHeight","setInternalContentMinHeight","value","internalProgressViewOffset","setInternalProgressViewOffset","current","scrollTo","console","warn","scrollToIndex","scrollHandler","handleInternalContentHeight","handleInternalProgressViewOffset","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","handleScrollToIndexFailed","renderListHeader","createElement","ListHeaderComponent","_extends","ref","keyboardDismissMode","keyboardShouldPersistTaps","scrollEventThrottle","onScrollToIndexFailed","style","container","onScroll","onContentSizeChange","simultaneousHandlers","progressViewOffset","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"sourceRoot":"../../../../src","sources":["components/scrollable/CollapsibleSectionList.tsx"],"mappings":"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"}
|
package/lib/module/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { default as useCollapsibleContext } from './hooks/useCollapsibleContext'
|
|
|
3
3
|
export { default as CollapsibleContainer } from './components/CollapsibleContainer';
|
|
4
4
|
export { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';
|
|
5
5
|
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
6
|
+
export { default as CollapsibleSectionList } from './components/scrollable/CollapsibleSectionList';
|
|
6
7
|
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
7
8
|
export { default as StickyView } from './components/header/StickyView';
|
|
8
9
|
export { default as CollapsibleView } from './components/CollapsibleView';
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","withCollapsibleContext","useCollapsibleContext","CollapsibleContainer","CollapsibleFlatList","CollapsibleScrollView","CollapsibleHeaderContainer","StickyView","CollapsibleView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,OAAO,IAAIC,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASD,OAAO,IAAIE,qBAAqB,QAAQ,+BAA+B;AAEhF,SAASF,OAAO,IAAIG,oBAAoB,QAAQ,mCAAmC;AACnF,SAASH,OAAO,IAAII,mBAAmB,QAAQ,6CAA6C;AAC5F,SAASJ,OAAO,IAAIK,qBAAqB,QAAQ,+CAA+C;AAChG,SAASL,OAAO,IAAIM,
|
|
1
|
+
{"version":3,"names":["default","withCollapsibleContext","useCollapsibleContext","CollapsibleContainer","CollapsibleFlatList","CollapsibleScrollView","CollapsibleSectionList","CollapsibleHeaderContainer","StickyView","CollapsibleView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,OAAO,IAAIC,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASD,OAAO,IAAIE,qBAAqB,QAAQ,+BAA+B;AAEhF,SAASF,OAAO,IAAIG,oBAAoB,QAAQ,mCAAmC;AACnF,SAASH,OAAO,IAAII,mBAAmB,QAAQ,6CAA6C;AAC5F,SAASJ,OAAO,IAAIK,qBAAqB,QAAQ,+CAA+C;AAChG,SAASL,OAAO,IAAIM,sBAAsB,QAAQ,gDAAgD;AAClG,SAASN,OAAO,IAAIO,0BAA0B,QAAQ,gDAAgD;AACtG,SAASP,OAAO,IAAIQ,UAAU,QAAQ,gCAAgC;AACtE,SAASR,OAAO,IAAIS,eAAe,QAAQ,8BAA8B;AACzE,cAAc,8BAA8B"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SectionListProps } from 'react-native';
|
|
3
|
+
import type { CollapsibleProps } from '../../types';
|
|
4
|
+
type Props<Data> = Omit<SectionListProps<Data>, 'scrollEnabled'> & CollapsibleProps;
|
|
5
|
+
export default function CollapsibleSectionList<Data>({ headerSnappable, ...props }: Props<Data>): React.JSX.Element;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=CollapsibleSectionList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleSectionList.d.ts","sourceRoot":"","sources":["../../../../src/components/scrollable/CollapsibleSectionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAiC,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAO/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAMpD,KAAK,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,eAAe,CAAC,GAC9D,gBAAgB,CAAC;AAEnB,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,IAAI,EAAE,EACnD,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,IAAI,CAAC,qBAiHb"}
|
|
@@ -3,6 +3,7 @@ export { default as useCollapsibleContext } from './hooks/useCollapsibleContext'
|
|
|
3
3
|
export { default as CollapsibleContainer } from './components/CollapsibleContainer';
|
|
4
4
|
export { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';
|
|
5
5
|
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
6
|
+
export { default as CollapsibleSectionList } from './components/scrollable/CollapsibleSectionList';
|
|
6
7
|
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
7
8
|
export { default as StickyView } from './components/header/StickyView';
|
|
8
9
|
export { default as CollapsibleView } from './components/CollapsibleView';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEjF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,gDAAgD,CAAC;AACvG,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEjF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACnG,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,gDAAgD,CAAC;AACvG,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import React, {
|
|
2
|
+
useCallback,
|
|
3
|
+
useEffect,
|
|
4
|
+
useMemo,
|
|
5
|
+
useRef,
|
|
6
|
+
useState,
|
|
7
|
+
} from 'react';
|
|
8
|
+
import { View, StyleSheet, SectionList, SectionListProps } from 'react-native';
|
|
9
|
+
import Animated, {
|
|
10
|
+
runOnJS,
|
|
11
|
+
useAnimatedReaction,
|
|
12
|
+
} from 'react-native-reanimated';
|
|
13
|
+
import useAnimatedScroll from './useAnimatedScroll';
|
|
14
|
+
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
15
|
+
import type { CollapsibleProps } from '../../types';
|
|
16
|
+
import AnimatedTopView from '../header/AnimatedTopView';
|
|
17
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
18
|
+
|
|
19
|
+
const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);
|
|
20
|
+
|
|
21
|
+
type Props<Data> = Omit<SectionListProps<Data>, 'scrollEnabled'> &
|
|
22
|
+
CollapsibleProps;
|
|
23
|
+
|
|
24
|
+
export default function CollapsibleSectionList<Data>({
|
|
25
|
+
headerSnappable = true,
|
|
26
|
+
...props
|
|
27
|
+
}: Props<Data>) {
|
|
28
|
+
const { headerHeight } = useCollapsibleContext();
|
|
29
|
+
const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =
|
|
30
|
+
useInternalCollapsibleContext();
|
|
31
|
+
const mounted = useRef(true);
|
|
32
|
+
const contentHeight = useRef(0);
|
|
33
|
+
const [internalContentMinHeight, setInternalContentMinHeight] = useState(
|
|
34
|
+
contentMinHeight.value
|
|
35
|
+
);
|
|
36
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] =
|
|
37
|
+
useState(0);
|
|
38
|
+
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
return () => {
|
|
41
|
+
mounted.current = false;
|
|
42
|
+
};
|
|
43
|
+
}, []);
|
|
44
|
+
|
|
45
|
+
const scrollTo = useCallback(() => {
|
|
46
|
+
console.warn('Not supported');
|
|
47
|
+
}, []);
|
|
48
|
+
|
|
49
|
+
const scrollToIndex = useCallback(() => {
|
|
50
|
+
console.warn('Not supported');
|
|
51
|
+
}, []);
|
|
52
|
+
|
|
53
|
+
const { scrollHandler } = useAnimatedScroll({
|
|
54
|
+
headerSnappable,
|
|
55
|
+
scrollTo,
|
|
56
|
+
scrollToIndex,
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
const handleInternalContentHeight = useCallback((value: number) => {
|
|
60
|
+
if (mounted.current) {
|
|
61
|
+
setInternalContentMinHeight(value);
|
|
62
|
+
}
|
|
63
|
+
}, []);
|
|
64
|
+
|
|
65
|
+
const handleInternalProgressViewOffset = useCallback((value: number) => {
|
|
66
|
+
if (mounted.current) {
|
|
67
|
+
setInternalProgressViewOffset(value);
|
|
68
|
+
}
|
|
69
|
+
}, []);
|
|
70
|
+
|
|
71
|
+
useAnimatedReaction(
|
|
72
|
+
() => {
|
|
73
|
+
return contentMinHeight.value;
|
|
74
|
+
},
|
|
75
|
+
(result, previous) => {
|
|
76
|
+
if (result !== previous) {
|
|
77
|
+
if (
|
|
78
|
+
contentHeight.current < result &&
|
|
79
|
+
internalContentMinHeight !== result
|
|
80
|
+
) {
|
|
81
|
+
runOnJS(handleInternalContentHeight)(result);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
|
|
87
|
+
useAnimatedReaction(
|
|
88
|
+
() => {
|
|
89
|
+
return fixedHeaderHeight.value;
|
|
90
|
+
},
|
|
91
|
+
(result, previous) => {
|
|
92
|
+
if (result !== previous) {
|
|
93
|
+
runOnJS(handleInternalProgressViewOffset)(result);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
const contentContainerStyle = useMemo(
|
|
99
|
+
() => [
|
|
100
|
+
styles.contentContainer,
|
|
101
|
+
{ minHeight: internalContentMinHeight },
|
|
102
|
+
props.contentContainerStyle,
|
|
103
|
+
],
|
|
104
|
+
[props.contentContainerStyle, internalContentMinHeight]
|
|
105
|
+
);
|
|
106
|
+
|
|
107
|
+
const handleContentSizeChange = useCallback((_, height) => {
|
|
108
|
+
contentHeight.current = height;
|
|
109
|
+
}, []);
|
|
110
|
+
|
|
111
|
+
const handleScrollToIndexFailed = useCallback(() => {}, []);
|
|
112
|
+
|
|
113
|
+
function renderListHeader() {
|
|
114
|
+
return (
|
|
115
|
+
<View>
|
|
116
|
+
<AnimatedTopView height={headerHeight} />
|
|
117
|
+
{props.ListHeaderComponent}
|
|
118
|
+
</View>
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
return (
|
|
123
|
+
<AnimatedSectionList
|
|
124
|
+
ref={scrollViewRef}
|
|
125
|
+
keyboardDismissMode="on-drag"
|
|
126
|
+
keyboardShouldPersistTaps="handled"
|
|
127
|
+
scrollEventThrottle={1}
|
|
128
|
+
onScrollToIndexFailed={handleScrollToIndexFailed}
|
|
129
|
+
{...props}
|
|
130
|
+
style={[styles.container, props.style]}
|
|
131
|
+
contentContainerStyle={contentContainerStyle}
|
|
132
|
+
onScroll={scrollHandler}
|
|
133
|
+
ListHeaderComponent={renderListHeader()}
|
|
134
|
+
onContentSizeChange={handleContentSizeChange}
|
|
135
|
+
//@ts-ignore
|
|
136
|
+
simultaneousHandlers={[]}
|
|
137
|
+
progressViewOffset={internalProgressViewOffset}
|
|
138
|
+
/>
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
const styles = StyleSheet.create({
|
|
143
|
+
container: {
|
|
144
|
+
...StyleSheet.absoluteFillObject,
|
|
145
|
+
},
|
|
146
|
+
contentContainer: {
|
|
147
|
+
flexGrow: 1,
|
|
148
|
+
},
|
|
149
|
+
topView: {
|
|
150
|
+
position: 'absolute',
|
|
151
|
+
top: 0,
|
|
152
|
+
left: 0,
|
|
153
|
+
right: 0,
|
|
154
|
+
},
|
|
155
|
+
});
|
package/src/index.tsx
CHANGED
|
@@ -4,6 +4,7 @@ export { default as useCollapsibleContext } from './hooks/useCollapsibleContext'
|
|
|
4
4
|
export { default as CollapsibleContainer } from './components/CollapsibleContainer';
|
|
5
5
|
export { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';
|
|
6
6
|
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
7
|
+
export { default as CollapsibleSectionList } from './components/scrollable/CollapsibleSectionList';
|
|
7
8
|
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
8
9
|
export { default as StickyView } from './components/header/StickyView';
|
|
9
10
|
export { default as CollapsibleView } from './components/CollapsibleView';
|