@pinnacle0/web-ui 0.4.12 → 0.4.13
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/core/FlatList/Content/index.d.ts +2 -3
- package/core/FlatList/Content/index.js +20 -10
- package/core/FlatList/Content/index.js.map +1 -1
- package/core/FlatList/Loader/index.less +5 -5
- package/core/FlatList/index.d.ts +1 -1
- package/core/FlatList/index.js +41 -9
- package/core/FlatList/index.js.map +1 -1
- package/core/FlatList/index.less +19 -0
- package/core/FlatList/type.d.ts +8 -19
- package/package.json +3 -3
- package/core/FlatList/Refresh/index.d.ts +0 -8
- package/core/FlatList/Refresh/index.js +0 -8
- package/core/FlatList/Refresh/index.js.map +0 -1
- package/core/FlatList/Refresh/index.less +0 -22
- package/core/FlatList/useGap.d.ts +0 -2
- package/core/FlatList/useGap.js +0 -12
- package/core/FlatList/useGap.js.map +0 -1
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { FlatListProps } from "../type";
|
|
3
3
|
import "../../../internal/polyfill/IntersectionObserver";
|
|
4
|
-
interface Props<T> extends Pick<FlatListProps<T>, "data" | "renderItem" | "gap" | "emptyPlaceholder" | "rowKey" | "
|
|
5
|
-
loading: boolean;
|
|
4
|
+
interface Props<T> extends Pick<FlatListProps<T>, "data" | "renderItem" | "gap" | "emptyPlaceholder" | "rowKey" | "endOfListMessage" | "onPullUpLoading" | "endReachThreshold" | "loading"> {
|
|
6
5
|
hasNextPageMessage?: string;
|
|
7
6
|
}
|
|
8
|
-
export declare function Content<T>({ data, emptyPlaceholder, renderItem, gap, rowKey, loading,
|
|
7
|
+
export declare function Content<T>({ data, emptyPlaceholder, renderItem, gap, rowKey, loading, endOfListMessage, onPullUpLoading, hasNextPageMessage, endReachThreshold }: Props<T>): JSX.Element;
|
|
9
8
|
export {};
|
|
@@ -15,17 +15,16 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
15
15
|
return ar;
|
|
16
16
|
};
|
|
17
17
|
import React from "react";
|
|
18
|
-
import {
|
|
19
|
-
import { Footer as DefaultFooter } from "./Footer";
|
|
18
|
+
import { Footer } from "./Footer";
|
|
20
19
|
import "../../../internal/polyfill/IntersectionObserver";
|
|
21
20
|
export function Content(_a) {
|
|
22
|
-
var data = _a.data, emptyPlaceholder = _a.emptyPlaceholder, renderItem = _a.renderItem, gap = _a.gap, rowKey = _a.rowKey,
|
|
21
|
+
var data = _a.data, emptyPlaceholder = _a.emptyPlaceholder, renderItem = _a.renderItem, gap = _a.gap, rowKey = _a.rowKey, _b = _a.loading, loading = _b === void 0 ? false : _b, endOfListMessage = _a.endOfListMessage, onPullUpLoading = _a.onPullUpLoading, hasNextPageMessage = _a.hasNextPageMessage, _c = _a.endReachThreshold, endReachThreshold = _c === void 0 ? 4 : _c;
|
|
23
22
|
var Item = renderItem;
|
|
24
23
|
var itemStyle = useGap(gap);
|
|
25
24
|
var markerId = React.useRef(createKey());
|
|
26
25
|
var loadedDataKey = React.useRef(null);
|
|
27
|
-
var
|
|
28
|
-
var
|
|
26
|
+
var _d = React.useMemo(function () { return splitByLast(data, endReachThreshold); }, [data, endReachThreshold]), first = _d.first, second = _d.second;
|
|
27
|
+
var _e = __read(React.useState(createKey()), 2), dataKey = _e[0], setDataKey = _e[1];
|
|
29
28
|
var previousMarker = React.useRef(null);
|
|
30
29
|
var onPullUpLoadingRef = React.useRef(onPullUpLoading);
|
|
31
30
|
onPullUpLoadingRef.current = onPullUpLoading;
|
|
@@ -52,19 +51,30 @@ export function Content(_a) {
|
|
|
52
51
|
React.useEffect(function () { return setDataKey(createKey()); }, [data]);
|
|
53
52
|
var createItem = function (source) {
|
|
54
53
|
return source.map(function (_a) {
|
|
55
|
-
var
|
|
56
|
-
return (React.createElement("div", { className: "g-flat-list-item", key: rowKey === "index" ?
|
|
57
|
-
React.createElement(Item, { data:
|
|
54
|
+
var data = _a.data, index = _a.index;
|
|
55
|
+
return (React.createElement("div", { className: "g-flat-list-item", key: rowKey === "index" ? index : String(data[rowKey]), style: itemStyle },
|
|
56
|
+
React.createElement(Item, { data: data, index: index })));
|
|
58
57
|
});
|
|
59
58
|
};
|
|
60
59
|
return (React.createElement("div", { className: "g-flat-list-content" }, data.length === 0 && emptyPlaceholder ? (emptyPlaceholder) : (React.createElement(React.Fragment, null,
|
|
61
60
|
createItem(first),
|
|
62
61
|
React.createElement("div", { ref: markerRef, id: markerId.current, "data-key": dataKey }),
|
|
63
62
|
createItem(second),
|
|
64
|
-
|
|
63
|
+
data.length > 0 && React.createElement(Footer, { loading: loading, hasNextPage: onPullUpLoading !== undefined, endOfListMessage: endOfListMessage, hasNextPageMessage: hasNextPageMessage })))));
|
|
64
|
+
}
|
|
65
|
+
function useGap(gap) {
|
|
66
|
+
if (!gap)
|
|
67
|
+
return {};
|
|
68
|
+
if (typeof gap === "number") {
|
|
69
|
+
return { paddingTop: gap, paddingBottom: gap, paddingLeft: gap, paddingRight: gap };
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
var top_1 = gap.top, bottom = gap.bottom, left = gap.left, right = gap.right;
|
|
73
|
+
return { paddingTop: top_1, paddingBottom: bottom, paddingLeft: left, paddingRight: right };
|
|
74
|
+
}
|
|
65
75
|
}
|
|
66
76
|
function splitByLast(data, last) {
|
|
67
|
-
var pair = data.map(function (
|
|
77
|
+
var pair = data.map(function (data, index) { return ({ data: data, index: index }); });
|
|
68
78
|
var from = Math.max(0, data.length - last);
|
|
69
79
|
return { first: pair.slice(0, from), second: pair.slice(from) };
|
|
70
80
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/FlatList/Content/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/FlatList/Content/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
.g-flat-list-loader {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-flow: row nowrap;
|
|
4
|
-
gap:
|
|
4
|
+
gap: 8px;
|
|
5
5
|
|
|
6
6
|
.dot {
|
|
7
|
-
width:
|
|
8
|
-
height:
|
|
7
|
+
width: 6px;
|
|
8
|
+
height: 6px;
|
|
9
9
|
border-radius: 50%;
|
|
10
10
|
background-color: #c2c2c2;
|
|
11
11
|
animation-name: jumping;
|
|
12
|
-
animation-duration:
|
|
12
|
+
animation-duration: 600ms;
|
|
13
13
|
animation-timing-function: ease-in-out;
|
|
14
14
|
animation-iteration-count: infinite;
|
|
15
15
|
|
|
16
16
|
.delay(@count) when (@count > 0) {
|
|
17
17
|
&:nth-of-type(@{count}) {
|
|
18
|
-
animation-delay: @count *
|
|
18
|
+
animation-delay: @count * 200ms;
|
|
19
19
|
}
|
|
20
20
|
.delay(@count - 1);
|
|
21
21
|
}
|
package/core/FlatList/index.d.ts
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
import type { FlatListProps } from "./type";
|
|
3
3
|
import "./index.less";
|
|
4
4
|
export * from "./type";
|
|
5
|
-
export declare const FlatList: <T>({ renderItem, data, rowKey, id, className, gap, refreshing, loading, onPullDownRefresh, onPullUpLoading,
|
|
5
|
+
export declare const FlatList: <T>({ renderItem, data, rowKey, id, className, gap, refreshing: exactRefreshing, loading, onPullDownRefresh, onPullUpLoading, endReachThreshold, emptyPlaceholder, pullDownMessage, pullUpMessage, endOfListMessage, }: FlatListProps<T>) => JSX.Element;
|
package/core/FlatList/index.js
CHANGED
|
@@ -30,18 +30,19 @@ import { classNames } from "../../util/ClassNames";
|
|
|
30
30
|
import { Direction } from "../../hooks/useSwipe";
|
|
31
31
|
import { useSwipe, useTransform } from "../../hooks";
|
|
32
32
|
import { getBounaryFromStartDirection, isExceededBounary, isScrollBottom, isScrollTop } from "./util";
|
|
33
|
-
import { Refresh as DefaultRefresh } from "./Refresh";
|
|
34
33
|
import { Content } from "./Content";
|
|
35
34
|
import "./index.less";
|
|
35
|
+
import { Loader } from "./Loader";
|
|
36
36
|
export * from "./type";
|
|
37
37
|
var PULL_DOWN_REFRESH_THRESHOLD = 50;
|
|
38
38
|
export var FlatList = function (_a) {
|
|
39
|
-
var renderItem = _a.renderItem, data = _a.data, rowKey = _a.rowKey, id = _a.id, className = _a.className, gap = _a.gap,
|
|
39
|
+
var renderItem = _a.renderItem, data = _a.data, rowKey = _a.rowKey, id = _a.id, className = _a.className, gap = _a.gap, exactRefreshing = _a.refreshing, loading = _a.loading, onPullDownRefresh = _a.onPullDownRefresh, onPullUpLoading = _a.onPullUpLoading, endReachThreshold = _a.endReachThreshold, emptyPlaceholder = _a.emptyPlaceholder, pullDownMessage = _a.pullDownMessage, pullUpMessage = _a.pullUpMessage, endOfListMessage = _a.endOfListMessage;
|
|
40
40
|
var scrollRef = React.useRef(null);
|
|
41
41
|
var animtedRef = React.useRef(null);
|
|
42
42
|
var refreshHeight = React.useRef(0);
|
|
43
43
|
var previousBoundary = React.useRef(null);
|
|
44
|
-
var
|
|
44
|
+
var _b = __read(React.useState(null), 2), startDelta = _b[0], setStartDelta = _b[1];
|
|
45
|
+
var delayedRefreshing = useRefreshing(exactRefreshing !== null && exactRefreshing !== void 0 ? exactRefreshing : false, 1000);
|
|
45
46
|
var transit = useTransform(animtedRef, {
|
|
46
47
|
timingFunction: "cubic-bezier(0, 0.89, 0.26, 1.02)",
|
|
47
48
|
duration: 800,
|
|
@@ -83,28 +84,59 @@ export var FlatList = function (_a) {
|
|
|
83
84
|
var _b = __read(_a.delta, 2), y = _b[1];
|
|
84
85
|
if (!startDelta)
|
|
85
86
|
return;
|
|
86
|
-
if (previousBoundary.current === "top" && onPullDownRefresh && y - startDelta >= PULL_DOWN_REFRESH_THRESHOLD && !
|
|
87
|
+
if (previousBoundary.current === "top" && onPullDownRefresh && y - startDelta >= PULL_DOWN_REFRESH_THRESHOLD && !delayedRefreshing) {
|
|
87
88
|
onPullDownRefresh();
|
|
88
89
|
}
|
|
89
90
|
clear();
|
|
91
|
+
if (delayedRefreshing) {
|
|
92
|
+
transit.to({ y: refreshHeight.current });
|
|
93
|
+
}
|
|
90
94
|
},
|
|
91
95
|
onCancel: clear,
|
|
92
96
|
}, { threshold: threshold, preventDefault: true, stopPropagation: true });
|
|
93
97
|
var onScroll = function () { return transit.clear(); };
|
|
94
98
|
var updateRefreshHeight = function (node) { return node && (refreshHeight.current = node.getBoundingClientRect().height); };
|
|
99
|
+
var showRefresh = onPullDownRefresh && exactRefreshing !== undefined;
|
|
95
100
|
React.useEffect(function () {
|
|
96
|
-
if (
|
|
97
|
-
previousBoundary.current === null;
|
|
101
|
+
if (delayedRefreshing && previousBoundary.current === "top") {
|
|
98
102
|
transitRef.current.to({ y: refreshHeight.current });
|
|
99
103
|
}
|
|
100
104
|
else {
|
|
101
105
|
transitRef.current.clear();
|
|
102
106
|
}
|
|
103
|
-
}, [
|
|
107
|
+
}, [delayedRefreshing]);
|
|
104
108
|
return (React.createElement("div", __assign({ id: id, className: classNames("g-flat-list", className) }, bind),
|
|
105
109
|
React.createElement("div", { className: "g-flat-list-inner-wrapper", ref: animtedRef },
|
|
106
|
-
|
|
110
|
+
showRefresh && (React.createElement("div", { ref: updateRefreshHeight, className: "g-flat-list-refresh" }, delayedRefreshing ? React.createElement(Loader, null) : React.createElement("span", null, pullDownMessage !== null && pullDownMessage !== void 0 ? pullDownMessage : "release to refresh"))),
|
|
107
111
|
React.createElement("div", { className: "g-flat-list-scrollable", ref: scrollRef, style: { overflow: startDelta ? "hidden" : undefined }, onScroll: onScroll },
|
|
108
|
-
React.createElement(Content, { data: data, rowKey: rowKey, renderItem: renderItem, gap: gap, emptyPlaceholder: emptyPlaceholder,
|
|
112
|
+
React.createElement(Content, { data: data, rowKey: rowKey, renderItem: renderItem, gap: gap, emptyPlaceholder: emptyPlaceholder, loading: loading, endOfListMessage: endOfListMessage, hasNextPageMessage: pullUpMessage, onPullUpLoading: onPullUpLoading, endReachThreshold: endReachThreshold })))));
|
|
109
113
|
};
|
|
114
|
+
/**
|
|
115
|
+
* Prevent flickering refreshing
|
|
116
|
+
* `PS`: This is totally different from prevent flickering loading, the hook make sure refreshing must remain `true` in a certain period of time
|
|
117
|
+
*/
|
|
118
|
+
function useRefreshing(refreshing, duration) {
|
|
119
|
+
var _a = __read(React.useState(refreshing), 2), guarantee = _a[0], setGuarantee = _a[1];
|
|
120
|
+
var timerId = React.useRef();
|
|
121
|
+
var lastLoadingTime = React.useRef(Date.now());
|
|
122
|
+
var durationRef = React.useRef(duration);
|
|
123
|
+
durationRef.current = duration;
|
|
124
|
+
React.useEffect(function () {
|
|
125
|
+
if (refreshing) {
|
|
126
|
+
lastLoadingTime.current = Date.now();
|
|
127
|
+
clearTimeout(timerId.current);
|
|
128
|
+
setGuarantee(true);
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
var remain = durationRef.current - (Date.now() - lastLoadingTime.current);
|
|
132
|
+
if (remain > 0) {
|
|
133
|
+
timerId.current = window.setTimeout(function () { return setGuarantee(false); }, remain);
|
|
134
|
+
}
|
|
135
|
+
else {
|
|
136
|
+
setGuarantee(false);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}, [refreshing]);
|
|
140
|
+
return guarantee;
|
|
141
|
+
}
|
|
110
142
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/FlatList/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AACnD,OAAO,EAAC,4BAA4B,EAAE,iBAAiB,EAAE,cAAc,EAAE,WAAW,EAAC,MAAM,QAAQ,CAAC;AACpG,OAAO,EAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/FlatList/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AACnD,OAAO,EAAC,4BAA4B,EAAE,iBAAiB,EAAE,cAAc,EAAE,WAAW,EAAC,MAAM,QAAQ,CAAC;AACpG,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAGlC,OAAO,cAAc,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAEhC,cAAc,QAAQ,CAAC;AAEvB,IAAM,2BAA2B,GAAG,EAAE,CAAC;AAEvC,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAa,EAgBlB;QAff,UAAU,gBAAA,EACV,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,EAAE,QAAA,EACF,SAAS,eAAA,EACT,GAAG,SAAA,EACS,eAAe,gBAAA,EAC3B,OAAO,aAAA,EACP,iBAAiB,uBAAA,EACjB,eAAe,qBAAA,EACf,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,eAAe,qBAAA,EACf,aAAa,mBAAA,EACb,gBAAgB,sBAAA;IAEhB,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC5D,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAE7D,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAS,CAAC,CAAC,CAAC;IAC9C,IAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IACvD,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,IAAA,EAAhE,UAAU,QAAA,EAAE,aAAa,QAAuC,CAAC;IACxE,IAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,KAAK,EAAE,IAAI,CAAC,CAAC;IAExE,IAAM,OAAO,GAAG,YAAY,CAAC,UAAU,EAAE;QACrC,cAAc,EAAE,mCAAmC;QACnD,QAAQ,EAAE,GAAG;KAChB,CAAC,CAAC;IAEH,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,IAAM,SAAS,GAAG,UAAC,EAAuB;YAAtB,SAAS,eAAA;QACzB,IAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAC3B,IAAI,SAAS,KAAK,SAAS,CAAC,IAAI,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE;YACtD,OAAO,IAAI,CAAC;SACf;aAAM,IAAI,SAAS,KAAK,SAAS,CAAC,EAAE,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAC9D,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC;IAEF,IAAM,KAAK,GAAG;QACV,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,IAAM,IAAI,GAAG,QAAQ,CACjB;QACI,OAAO,EAAE,UAAC,EAAyB;gBAAxB,KAAA,mBAAY,EAAF,CAAC,QAAA,EAAG,SAAS,eAAA;YAC9B,aAAa,CAAC,CAAC,CAAC,CAAC;YACjB,gBAAgB,CAAC,OAAO,GAAG,4BAA4B,CAAC,SAAS,CAAC,CAAC;QACvE,CAAC;QACD,MAAM,EAAE,UAAC,EAAsB;gBAArB,KAAA,mBAAY,EAAF,CAAC,QAAA,EAAG,MAAM,YAAA;YAC1B,IAAI,CAAC,UAAU,IAAI,CAAC,gBAAgB,CAAC,OAAO;gBAAE,OAAO;YACrD,IAAM,SAAS,GAAG,CAAC,GAAG,UAAU,CAAC;YACjC,OAAO,CAAC,EAAE,CAAC,EAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC,CAAC;YAC5C,iBAAiB,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,IAAI,MAAM,EAAE,CAAC;QACvE,CAAC;QACD,KAAK,EAAE,UAAC,EAA0B;gBAAzB,KAAA,mBAAY,EAAF,CAAC,QAAA;YAChB,IAAI,CAAC,UAAU;gBAAE,OAAO;YACxB,IAAI,gBAAgB,CAAC,OAAO,KAAK,KAAK,IAAI,iBAAiB,IAAI,CAAC,GAAG,UAAU,IAAI,2BAA2B,IAAI,CAAC,iBAAiB,EAAE;gBAChI,iBAAiB,EAAE,CAAC;aACvB;YACD,KAAK,EAAE,CAAC;YACR,IAAI,iBAAiB,EAAE;gBACnB,OAAO,CAAC,EAAE,CAAC,EAAC,CAAC,EAAE,aAAa,CAAC,OAAO,EAAC,CAAC,CAAC;aAC1C;QACL,CAAC;QACD,QAAQ,EAAE,KAAK;KAClB,EACD,EAAC,SAAS,WAAA,EAAE,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAC,CAC3D,CAAC;IAEF,IAAM,QAAQ,GAAG,cAAM,OAAA,OAAO,CAAC,KAAK,EAAE,EAAf,CAAe,CAAC;IAEvC,IAAM,mBAAmB,GAAG,UAAC,IAA2B,IAAK,OAAA,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,EAArE,CAAqE,CAAC;IAEnI,IAAM,WAAW,GAAG,iBAAiB,IAAI,eAAe,KAAK,SAAS,CAAC;IAEvE,KAAK,CAAC,SAAS,CAAC;QACZ,IAAI,iBAAiB,IAAI,gBAAgB,CAAC,OAAO,KAAK,KAAK,EAAE;YACzD,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAC,CAAC,EAAE,aAAa,CAAC,OAAO,EAAC,CAAC,CAAC;SACrD;aAAM;YACH,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC9B;IACL,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,OAAO,CACH,sCAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,IAAM,IAAI;QAClE,6BAAK,SAAS,EAAC,2BAA2B,EAAC,GAAG,EAAE,UAAU;YACrD,WAAW,IAAI,CACZ,6BAAK,GAAG,EAAE,mBAAmB,EAAE,SAAS,EAAC,qBAAqB,IACzD,iBAAiB,CAAC,CAAC,CAAC,oBAAC,MAAM,OAAG,CAAC,CAAC,CAAC,kCAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,oBAAoB,CAAQ,CACtF,CACT;YACD,6BAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAC,EAAE,QAAQ,EAAE,QAAQ;gBAC5H,oBAAC,OAAO,IACJ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,aAAa,EACjC,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,GACtC,CACA,CACJ,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF;;;GAGG;AACH,SAAS,aAAa,CAAC,UAAmB,EAAE,QAAgB;IAClD,IAAA,KAAA,OAA4B,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAA,EAArD,SAAS,QAAA,EAAE,YAAY,QAA8B,CAAC;IAC7D,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAAU,CAAC;IACvC,IAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAS,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAEzD,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,KAAK,CAAC,SAAS,CAAC;QACZ,IAAI,UAAU,EAAE;YACZ,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACrC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC9B,YAAY,CAAC,IAAI,CAAC,CAAC;SACtB;aAAM;YACH,IAAM,MAAM,GAAG,WAAW,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;YAC5E,IAAI,MAAM,GAAG,CAAC,EAAE;gBACZ,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,EAAnB,CAAmB,EAAE,MAAM,CAAC,CAAC;aAC1E;iBAAM;gBACH,YAAY,CAAC,KAAK,CAAC,CAAC;aACvB;SACJ;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,SAAS,CAAC;AACrB,CAAC"}
|
package/core/FlatList/index.less
CHANGED
|
@@ -20,7 +20,26 @@
|
|
|
20
20
|
position: absolute;
|
|
21
21
|
width: 100%;
|
|
22
22
|
height: auto;
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-flow: column nowrap;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
align-items: center;
|
|
27
|
+
padding: 30px 0;
|
|
23
28
|
transform: translateY(-100%);
|
|
29
|
+
|
|
30
|
+
> span {
|
|
31
|
+
animation: fade-in 200ms ease-in;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@keyframes fade-in {
|
|
35
|
+
from {
|
|
36
|
+
opacity: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
to {
|
|
40
|
+
opacity: 1;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
24
43
|
}
|
|
25
44
|
|
|
26
45
|
.g-flat-list-scrollable {
|
package/core/FlatList/type.d.ts
CHANGED
|
@@ -43,34 +43,18 @@ export interface FlatListProps<T> {
|
|
|
43
43
|
* If Provided, Element will be shown when `data` is a empty array
|
|
44
44
|
*/
|
|
45
45
|
emptyPlaceholder?: string | React.ReactElement;
|
|
46
|
-
/**
|
|
47
|
-
* if Provided, default `Footer` component will be replaced
|
|
48
|
-
*/
|
|
49
|
-
Footer?: React.ComponentType<{
|
|
50
|
-
loading: boolean;
|
|
51
|
-
}>;
|
|
52
|
-
/**
|
|
53
|
-
* `refresh` component will be shown when `refreshing` is equal `true`
|
|
54
|
-
* if Provided, default `Refresh` component will be replaced
|
|
55
|
-
*/
|
|
56
|
-
Refresh?: React.ComponentType<{
|
|
57
|
-
loading: boolean;
|
|
58
|
-
}>;
|
|
59
46
|
/**
|
|
60
47
|
* `pullUpMessage` will be show in `Refresh` only if `onPullDownRefresh` is defined
|
|
61
|
-
* if Provided, this message will replace the pull down message in
|
|
62
|
-
* if `Refresh` is provided, this props will be ignored
|
|
48
|
+
* if Provided, this message will replace the pull down message in `Refresh`
|
|
63
49
|
*/
|
|
64
50
|
pullDownMessage?: string;
|
|
65
51
|
/**
|
|
66
52
|
* `pullUpMessage` will be show in `Footer` only if `onPullUpLoading` is defined
|
|
67
|
-
* if Provided, this message will replace end of list message in
|
|
68
|
-
* if `Footer` is provided, this props will be ignored
|
|
53
|
+
* if Provided, this message will replace end of list message in `Footer`
|
|
69
54
|
*/
|
|
70
55
|
pullUpMessage?: string;
|
|
71
56
|
/**
|
|
72
|
-
* if Provided, this message will replace end of list message in
|
|
73
|
-
* if `Footer` is provided, this props will be ignored
|
|
57
|
+
* if Provided, this message will replace end of list message in `Footer`
|
|
74
58
|
*/
|
|
75
59
|
endOfListMessage?: string;
|
|
76
60
|
/**
|
|
@@ -79,4 +63,9 @@ export interface FlatListProps<T> {
|
|
|
79
63
|
gap?: Gap;
|
|
80
64
|
className?: string;
|
|
81
65
|
id?: string;
|
|
66
|
+
/**
|
|
67
|
+
* Determine number of items left outside of viewport of the list to trigger onPullUpLoading
|
|
68
|
+
* Default: 4
|
|
69
|
+
*/
|
|
70
|
+
endReachThreshold?: number;
|
|
82
71
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pinnacle0/web-ui",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.13",
|
|
4
4
|
"author": "Pinnacle",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"sideEffects": [
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
"react-dom": "18.2.0",
|
|
53
53
|
"react-router-dom": "5.3.0",
|
|
54
54
|
"typescript": "4.9.4",
|
|
55
|
-
"@pinnacle0/
|
|
56
|
-
"@pinnacle0/
|
|
55
|
+
"@pinnacle0/webpack-util": "0.3.42",
|
|
56
|
+
"@pinnacle0/devtool-util": "1.1.5"
|
|
57
57
|
},
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"directory": "build"
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Loader } from "../Loader";
|
|
3
|
-
import "./index.less";
|
|
4
|
-
export var Refresh = function (_a) {
|
|
5
|
-
var loading = _a.loading, message = _a.message;
|
|
6
|
-
return React.createElement("div", { className: "g-flat-list-default-refresh" }, loading ? React.createElement(Loader, null) : React.createElement("span", null, message !== null && message !== void 0 ? message : "release to refresh"));
|
|
7
|
-
};
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/FlatList/Refresh/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AACjC,OAAO,cAAc,CAAC;AAOtB,MAAM,CAAC,IAAM,OAAO,GAAG,UAAC,EAAyB;QAAxB,OAAO,aAAA,EAAE,OAAO,aAAA;IACrC,OAAO,6BAAK,SAAS,EAAC,6BAA6B,IAAE,OAAO,CAAC,CAAC,CAAC,oBAAC,MAAM,OAAG,CAAC,CAAC,CAAC,kCAAO,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,oBAAoB,CAAQ,CAAO,CAAC;AACtI,CAAC,CAAC"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
.g-flat-list-default-refresh {
|
|
2
|
-
width: 100%;
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-flow: column nowrap;
|
|
5
|
-
justify-content: center;
|
|
6
|
-
align-items: center;
|
|
7
|
-
padding: 20px 0;
|
|
8
|
-
|
|
9
|
-
> span {
|
|
10
|
-
animation: fade-in 200ms ease-in;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@keyframes fade-in {
|
|
14
|
-
from {
|
|
15
|
-
opacity: 0;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
to {
|
|
19
|
-
opacity: 1;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
package/core/FlatList/useGap.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export var useGap = function (gap) {
|
|
2
|
-
if (!gap)
|
|
3
|
-
return {};
|
|
4
|
-
if (typeof gap === "number") {
|
|
5
|
-
return { paddingTop: gap, paddingBottom: gap, paddingLeft: gap, paddingRight: gap };
|
|
6
|
-
}
|
|
7
|
-
else {
|
|
8
|
-
var top_1 = gap.top, bottom = gap.bottom, left = gap.left, right = gap.right;
|
|
9
|
-
return { paddingTop: top_1, paddingBottom: bottom, paddingLeft: left, paddingRight: right };
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=useGap.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useGap.js","sourceRoot":"","sources":["../../../src/core/FlatList/useGap.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,MAAM,GAAG,UAAC,GAAS;IAC5B,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC;IACpB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QACzB,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAC,CAAC;KACrF;SAAM;QACI,IAAA,KAAG,GAAyB,GAAG,IAA5B,EAAE,MAAM,GAAiB,GAAG,OAApB,EAAE,IAAI,GAAW,GAAG,KAAd,EAAE,KAAK,GAAI,GAAG,MAAP,CAAQ;QACvC,OAAO,EAAC,UAAU,EAAE,KAAG,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAC,CAAC;KAC3F;AACL,CAAC,CAAC"}
|