@pinnacle0/web-ui 0.4.10 → 0.4.11

package/core/FlatList/Content/Footer/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import "./index.less";
+interface Props {
+    hasNextPage: boolean;
+    endOfListMessage?: string;
+    hasNextPageMessage?: string;
+    loading?: boolean;
+}
+export declare const Footer: ({ loading, hasNextPage, hasNextPageMessage, endOfListMessage }: Props) => JSX.Element;
+export {};

package/core/FlatList/Content/Footer/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Loader } from "../../Loader";
+import "./index.less";
+export var Footer = function (_a) {
+    var loading = _a.loading, hasNextPage = _a.hasNextPage, hasNextPageMessage = _a.hasNextPageMessage, endOfListMessage = _a.endOfListMessage;
+    var ref = React.useRef(null);
+    var end = endOfListMessage !== null && endOfListMessage !== void 0 ? endOfListMessage : "All data loaded";
+    var next = hasNextPageMessage !== null && hasNextPageMessage !== void 0 ? hasNextPageMessage : "Pull up to load more";
+    return (React.createElement("div", { ref: ref, className: "g-flat-list-footer" }, loading ? React.createElement(Loader, null) : hasNextPage ? next : end));
+};
+//# sourceMappingURL=index.js.map

package/core/FlatList/Content/Footer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/FlatList/Content/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,cAAc,CAAC;AAQtB,MAAM,CAAC,IAAM,MAAM,GAAG,UAAC,EAAmE;QAAlE,OAAO,aAAA,EAAE,WAAW,iBAAA,EAAE,kBAAkB,wBAAA,EAAE,gBAAgB,sBAAA;IAC9E,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IACtD,IAAM,GAAG,GAAG,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,iBAAiB,CAAC;IAClD,IAAM,IAAI,GAAG,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,sBAAsB,CAAC;IAE1D,OAAO,CACH,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,oBAAoB,IACxC,OAAO,CAAC,CAAC,CAAC,oBAAC,MAAM,OAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAC9C,CACT,CAAC;AACN,CAAC,CAAC"}

package/core/FlatList/{shared → Content}/Footer/index.less

@@ -1,8 +1,7 @@
 .g-flat-list-footer {
-    width: 100%;
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: column nowrap;
     justify-content: center;
     align-items: center;
-    padding: 5px;
+    padding: 15px 0;
 }

package/core/FlatList/Content/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FlatListProps } from "../type";
+import "../../../internal/polyfill/IntersectionObserver";
+interface Props<T> extends Pick<FlatListProps<T>, "data" | "renderItem" | "gap" | "emptyPlaceholder" | "rowKey" | "Footer" | "endOfListMessage" | "onPullUpLoading"> {
+    loading: boolean;
+    hasNextPageMessage?: string;
+}
+export declare function Content<T>({ data, emptyPlaceholder, renderItem, gap, rowKey, loading, Footer, endOfListMessage, onPullUpLoading, hasNextPageMessage }: Props<T>): JSX.Element;
+export {};

package/core/FlatList/Content/index.js

@@ -0,0 +1,71 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+import { useGap } from "../useGap";
+import { Footer as DefaultFooter } from "./Footer";
+import "../../../internal/polyfill/IntersectionObserver";
+export function Content(_a) {
+    var data = _a.data, emptyPlaceholder = _a.emptyPlaceholder, renderItem = _a.renderItem, gap = _a.gap, rowKey = _a.rowKey, loading = _a.loading, Footer = _a.Footer, endOfListMessage = _a.endOfListMessage, onPullUpLoading = _a.onPullUpLoading, hasNextPageMessage = _a.hasNextPageMessage;
+    var Item = renderItem;
+    var itemStyle = useGap(gap);
+    var markerId = React.useRef(createKey());
+    var loadedDataKey = React.useRef(null);
+    var _b = React.useMemo(function () { return splitByLast(data, 2); }, [data]), first = _b.first, second = _b.second;
+    var _c = __read(React.useState(createKey()), 2), dataKey = _c[0], setDataKey = _c[1];
+    var onPullUpLoadingRef = React.useRef(onPullUpLoading);
+    onPullUpLoadingRef.current = onPullUpLoading;
+    React.useEffect(function () { return setDataKey(createKey()); }, [data]);
+    React.useEffect(function () {
+        var marker = document.getElementById(markerId.current);
+        if (!marker)
+            return;
+        var observer = new IntersectionObserver(function (mutations) {
+            var _a;
+            var mutation = mutations[0];
+            if (!mutation.isIntersecting)
+                return;
+            var currentDataKey = mutation.target.getAttribute("data-key");
+            if (loadedDataKey.current === currentDataKey)
+                return;
+            loadedDataKey.current = currentDataKey;
+            (_a = onPullUpLoadingRef.current) === null || _a === void 0 ? void 0 : _a.call(onPullUpLoadingRef);
+        });
+        observer.observe(marker);
+        return function () { return observer.disconnect(); };
+    }, []);
+    var createItem = function (source) {
+        return source.map(function (_a) {
+            var d = _a.d, i = _a.i;
+            return (React.createElement("div", { className: "g-flat-list-item", key: rowKey === "index" ? i : String(d[rowKey]), style: itemStyle },
+                React.createElement(Item, { data: d, index: i })));
+        });
+    };
+    return (React.createElement("div", { className: "g-flat-list-content" }, data.length === 0 && emptyPlaceholder ? (emptyPlaceholder) : (React.createElement(React.Fragment, null,
+        createItem(first),
+        React.createElement("div", { id: markerId.current, "data-key": dataKey }),
+        createItem(second),
+        Footer && data.length > 0 ? (React.createElement(Footer, { loading: loading })) : (React.createElement(DefaultFooter, { loading: loading, hasNextPage: onPullUpLoading !== undefined, endOfListMessage: endOfListMessage, hasNextPageMessage: hasNextPageMessage }))))));
+}
+function splitByLast(data, last) {
+    var pair = data.map(function (d, i) { return ({ d: d, i: i }); });
+    var from = Math.max(0, data.length - last);
+    return { first: pair.slice(0, from), second: pair.slice(from) };
+}
+function createKey() {
+    return Date.now().toString(36) + Math.random().toString(36).substring(2);
+}
+//# sourceMappingURL=index.js.map

package/core/FlatList/Content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/FlatList/Content/index.tsx"],"names":[],"mappings":"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"}

package/core/FlatList/Loader/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import "./index.less";
+export declare const Loader: () => JSX.Element;

package/core/FlatList/Loader/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+import "./index.less";
+export var Loader = function () {
+    return (React.createElement("div", { className: "g-flat-list-loader" },
+        React.createElement("div", { className: "dot" }),
+        React.createElement("div", { className: "dot" }),
+        React.createElement("div", { className: "dot" })));
+};
+//# sourceMappingURL=index.js.map

package/core/FlatList/Loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/FlatList/Loader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,IAAM,MAAM,GAAG;IAClB,OAAO,CACH,6BAAK,SAAS,EAAC,oBAAoB;QAC/B,6BAAK,SAAS,EAAC,KAAK,GAAG;QACvB,6BAAK,SAAS,EAAC,KAAK,GAAG;QACvB,6BAAK,SAAS,EAAC,KAAK,GAAG,CACrB,CACT,CAAC;AACN,CAAC,CAAC"}

package/core/FlatList/Loader/index.less

@@ -0,0 +1,39 @@
+.g-flat-list-loader {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 10px;
+
+    .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #c2c2c2;
+        animation-name: jumping;
+        animation-duration: 750ms;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: infinite;
+
+        .delay(@count) when (@count > 0) {
+            &:nth-of-type(@{count}) {
+                animation-delay: @count * 250ms;
+            }
+            .delay(@count - 1);
+        }
+
+        .delay(4);
+    }
+
+    @keyframes jumping {
+        0% {
+            opacity: 1;
+        }
+
+        50% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}

package/core/FlatList/{shared/Spinner → Refresh}/index.d.ts

@@ -4,5 +4,5 @@ interface Props {
     loading: boolean;
     message?: string;
 }
-export declare const Spinner: (props: Props) => JSX.Element;
+export declare const Refresh: ({ loading, message }: Props) => JSX.Element;
 export {};

package/core/FlatList/Refresh/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { Loader } from "../Loader";
+import "./index.less";
+export var Refresh = function (_a) {
+    var loading = _a.loading, message = _a.message;
+    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"));
+};
+//# sourceMappingURL=index.js.map

package/core/FlatList/Refresh/index.js.map

@@ -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"}

package/core/FlatList/Refresh/index.less

@@ -0,0 +1,22 @@
+.g-flat-list-default-refresh {
+    width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 0;
+
+    > span {
+        animation: fade-in 200ms ease-in;
+    }
+
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+}

package/core/FlatList/index.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import type { FlatListProps } from "./type";
-export declare const FlatList: <T>(props: FlatListProps<T>) => JSX.Element;
+import "./index.less";
+export * from "./type";
+export declare const FlatList: <T>({ renderItem, data, rowKey, id, className, gap, refreshing, loading, onPullDownRefresh, onPullUpLoading, emptyPlaceholder, Refresh, Footer, pullDownMessage, pullUpMessage, endOfListMessage, }: FlatListProps<T>) => JSX.Element;

package/core/FlatList/index.js

@@ -26,35 +26,85 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import React from "react";
-import { Wrapper } from "./shared/Wrapper";
-import { Footer } from "./shared/Footer";
-import { useLoadingWithDelay } from "./shared/hooks/useLoadingWithDelay";
 import { classNames } from "../../util/ClassNames";
-import { GetRowKey } from "./shared/GetRowKey";
-export var FlatList = function (props) {
-    var data = props.data, ItemRenderer = props.renderItem, rowKey = props.rowKey, loading = props.loading, _a = props.bounceEffect, bounceEffect = _a === void 0 ? true : _a, className = props.className, style = props.style, gap = props.gap, onPullDownRefresh = props.onPullDownRefresh, onPullUpLoading = props.onPullUpLoading, contentStyle = props.contentStyle, emptyPlaceholder = props.emptyPlaceholder, pullDownRefreshingMessage = props.pullDownRefreshingMessage, pullUpLoadMoreMessage = props.pullUpLoadMoreMessage, pullDownRefreshMessage = props.pullDownRefreshMessage, pullUpLoadingMessage = props.pullUpLoadingMessage, endOfListMessage = props.endOfListMessage, hideFooter = props.hideFooter;
-    var listWrapperRef = React.useRef(null);
-    var _b = __read(React.useState(null), 2), loadingType = _b[0], setLoadingType = _b[1];
-    var loadingWithDelay = useLoadingWithDelay(loading !== null && loading !== void 0 ? loading : false, 250);
-    React.useEffect(function () {
-        if ((loading === undefined || loading === null) && (onPullDownRefresh || onPullUpLoading)) {
-            throw new Error("Loading must be specify when given either onPullDownRefresh or onPullUpLoading");
+import { Direction } from "../../hooks/useSwipe";
+import { useSwipe, useTransform } from "../../hooks";
+import { getBounaryFromStartDirection, isExceededBounary, isScrollBottom, isScrollTop } from "./util";
+import { Refresh as DefaultRefresh } from "./Refresh";
+import { Content } from "./Content";
+import "./index.less";
+export * from "./type";
+var PULL_DOWN_REFRESH_THRESHOLD = 50;
+export var FlatList = function (_a) {
+    var renderItem = _a.renderItem, data = _a.data, rowKey = _a.rowKey, id = _a.id, className = _a.className, gap = _a.gap, refreshing = _a.refreshing, _b = _a.loading, loading = _b === void 0 ? false : _b, onPullDownRefresh = _a.onPullDownRefresh, onPullUpLoading = _a.onPullUpLoading, emptyPlaceholder = _a.emptyPlaceholder, Refresh = _a.Refresh, Footer = _a.Footer, pullDownMessage = _a.pullDownMessage, pullUpMessage = _a.pullUpMessage, endOfListMessage = _a.endOfListMessage;
+    var scrollRef = React.useRef(null);
+    var animtedRef = React.useRef(null);
+    var refreshHeight = React.useRef(0);
+    var previousBoundary = React.useRef(null);
+    var _c = __read(React.useState(null), 2), startDelta = _c[0], setStartDelta = _c[1];
+    var transit = useTransform(animtedRef, {
+        timingFunction: "cubic-bezier(0, 0.89, 0.26, 1.02)",
+        duration: 800,
+    });
+    var transitRef = React.useRef(transit);
+    transitRef.current = transit;
+    var threshold = function (_a) {
+        var direction = _a.direction;
+        var element = scrollRef.current;
+        if (!element)
+            return false;
+        if (direction === Direction.DOWN && isScrollTop(element)) {
+            return true;
         }
-    }, [onPullDownRefresh, onPullUpLoading, loading]);
-    // Automatically loading new data when scroll near the bottom
-    var onScroll = function (e) {
-        if (!loadingWithDelay && onPullUpLoading) {
-            var _a = e.currentTarget, scrollHeight = _a.scrollHeight, scrollTop = _a.scrollTop, clientHeight = _a.clientHeight;
-            if (scrollHeight * 0.8 < clientHeight + scrollTop) {
-                setLoadingType("loading");
-                onPullUpLoading === null || onPullUpLoading === void 0 ? void 0 : onPullUpLoading();
-            }
+        else if (direction === Direction.UP && isScrollBottom(element)) {
+            return true;
         }
+        return false;
     };
-    var margin = React.useMemo(function () { return (gap ? (typeof gap === "number" ? { margin: gap } : { marginLeft: gap.left, marginRight: gap.right, marginBottom: gap.bottom, marginTop: gap.top }) : {}); }, [gap]);
-    return (React.createElement(Wrapper, { className: classNames("g-flat-list", className), listWrapperRef: listWrapperRef, bounceEffect: bounceEffect, innerStyle: contentStyle, loadingType: loadingType, onLoadingTypeChange: setLoadingType, loading: loadingWithDelay, style: style, onPullDownRefresh: onPullDownRefresh, onPullUpLoading: onPullUpLoading, pullDownRefreshMessage: pullDownRefreshMessage, pullDownRefreshingMessage: pullDownRefreshingMessage, onScroll: onScroll }, data.length === 0 ? (emptyPlaceholder) : (React.createElement("div", { className: "list" },
-        data.map(function (d, i) { return (React.createElement("div", { className: "g-flat-list-item", key: GetRowKey(rowKey, d, i), style: __assign({}, margin) },
-            React.createElement(ItemRenderer, { data: d, index: i }))); }),
-        !hideFooter && (React.createElement(Footer, { loading: loadingWithDelay && loadingType === "loading", ended: !onPullUpLoading, loadMoreMessage: pullUpLoadMoreMessage, loadingMessage: pullUpLoadingMessage, endMessage: endOfListMessage }))))));
+    var clear = function () {
+        transit.clear();
+        setStartDelta(null);
+    };
+    var bind = useSwipe({
+        onStart: function (_a) {
+            var _b = __read(_a.delta, 2), y = _b[1], direction = _a.direction;
+            setStartDelta(y);
+            previousBoundary.current = getBounaryFromStartDirection(direction);
+        },
+        onMove: function (_a) {
+            var _b = __read(_a.delta, 2), y = _b[1], cancel = _a.cancel;
+            if (!startDelta || !previousBoundary.current)
+                return;
+            var transform = y - startDelta;
+            transit.to({ y: transform, immediate: true });
+            isExceededBounary(transform, previousBoundary.current) && cancel();
+        },
+        onEnd: function (_a) {
+            var _b = __read(_a.delta, 2), y = _b[1];
+            if (!startDelta)
+                return;
+            if (previousBoundary.current === "top" && onPullDownRefresh && y - startDelta >= PULL_DOWN_REFRESH_THRESHOLD && !refreshing) {
+                onPullDownRefresh();
+            }
+            clear();
+        },
+        onCancel: clear,
+    }, { threshold: threshold, preventDefault: true, stopPropagation: true });
+    var onScroll = function () { return transit.clear(); };
+    var updateRefreshHeight = function (node) { return node && (refreshHeight.current = node.getBoundingClientRect().height); };
+    React.useEffect(function () {
+        if (refreshing && previousBoundary.current === "top") {
+            previousBoundary.current === null;
+            transitRef.current.to({ y: refreshHeight.current });
+        }
+        else {
+            transitRef.current.clear();
+        }
+    }, [refreshing]);
+    return (React.createElement("div", __assign({ id: id, className: classNames("g-flat-list", className) }, bind),
+        React.createElement("div", { className: "g-flat-list-inner-wrapper", ref: animtedRef },
+            onPullDownRefresh && refreshing !== undefined && (React.createElement("div", { className: "g-flat-list-refresh", ref: updateRefreshHeight }, Refresh ? React.createElement(Refresh, { loading: refreshing }) : React.createElement(DefaultRefresh, { loading: refreshing, message: pullDownMessage }))),
+            React.createElement("div", { className: "g-flat-list-scrollable", ref: scrollRef, style: { overflow: startDelta ? "hidden" : undefined }, onScroll: onScroll },
+                React.createElement(Content, { data: data, rowKey: rowKey, renderItem: renderItem, gap: gap, emptyPlaceholder: emptyPlaceholder, Footer: Footer, loading: loading, endOfListMessage: endOfListMessage, hasNextPageMessage: pullUpMessage, onPullUpLoading: onPullUpLoading })))));
 };
 //# sourceMappingURL=index.js.map

package/core/FlatList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/FlatList/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/FlatList/index.tsx"],"names":[],"mappings":"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"}

package/core/FlatList/index.less

@@ -0,0 +1,40 @@
+.g-flat-list {
+    position: relative;
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+
+    .g-flat-list-inner-wrapper {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1;
+        max-height: 100%;
+        will-change: transform;
+        transition-timing-function: cubic-bezier(0, 0.89, 0.26, 1.02);
+        transition-duration: 800ms;
+
+        .g-flat-list-refresh {
+            position: absolute;
+            width: 100%;
+            height: auto;
+            transform: translateY(-100%);
+        }
+
+        .g-flat-list-scrollable {
+            display: flex;
+            height: 100%;
+            overflow: auto;
+            overscroll-behavior: none;
+            flex-flow: column nowrap;
+
+            .g-flat-list-content {
+                display: flex;
+                flex-flow: column nowrap;
+                height: 100%;
+            }
+        }
+    }
+}

package/core/FlatList/type.d.ts

@@ -1,48 +1,82 @@
-/// <reference types="react" />
-export declare const PULL_DOWN_REFRESH_THRESHOLD = 50;
-export type LoadingType = "refresh" | "loading" | null;
-export interface FlatListItemProps<T> {
-    data: T;
-    index: number;
-}
-export type Gap = {
+import type React from "react";
+export type Boundary = "top" | "bottom";
+export type Gap = number | {
     top?: number;
     bottom?: number;
     left?: number;
     right?: number;
-} | number;
-export type ItemRenderer<T> = React.FunctionComponent<FlatListItemProps<T>>;
-export type RowKey<T> = (keyof T & string) | ((data: T, index: number) => string) | "index";
+};
+export interface FlatListItemProps<T> {
+    data: T;
+    index: number;
+}
 export interface FlatListProps<T> {
+    /**
+     * List of data to show in the list
+     */
     data: T[];
-    renderItem: ItemRenderer<T>;
-    rowKey: RowKey<T>;
+    /**
+     * Specify key for each `item` using Object key of type `T`
+     */
+    rowKey: keyof T | "index";
+    /**
+     * A component render for each item
+     */
+    renderItem: React.ComponentType<FlatListItemProps<T>>;
+    /**
+     * Set this to true when waiting for new data by pull down refresh
+     */
+    refreshing?: boolean;
+    /**
+     * Set this to true when waiting for new data by pull down refresh
+     */
     loading?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    /** When either onPullUpLoading or onPullDownRefresh is given, loading must be given too */
-    onPullUpLoading?: () => void;
+    /**
+     * If Provided, `Refresh` component will be loaded into the FlatList, you can also specify your own Refresh component using `refresh` props
+     */
     onPullDownRefresh?: () => void;
+    /**
+     * If Provided, `Footer` component will be loaded into the FlatList, you can also specify your own Refresh component using `footer` props
+     */
+    onPullUpLoading?: () => void;
+    /**
+     * If Provided, Element will be shown when `data` is a empty array
+     */
     emptyPlaceholder?: string | React.ReactElement;
-    contentStyle?: React.CSSProperties;
-    bounceEffect?: boolean;
-    hideFooter?: boolean;
+    /**
+     * if Provided, default `Footer` component will be replaced
+     */
+    Footer?: React.ComponentType<{
+        loading: boolean;
+    }>;
+    /**
+     * `refresh` component will be shown when `refreshing` is equal `true`
+     * if Provided, default `Refresh` component will be replaced
+     */
+    Refresh?: React.ComponentType<{
+        loading: boolean;
+    }>;
+    /**
+     * `pullUpMessage` will be show in `Refresh` only if `onPullDownRefresh` is defined
+     * if Provided, this message will replace the pull down message in default `Refresh`
+     * if `Refresh` is provided, this props will be ignored
+     */
+    pullDownMessage?: string;
+    /**
+     * `pullUpMessage` will be show in `Footer` only if `onPullUpLoading` is defined
+     * if Provided, this message will replace end of list message in default `Footer`
+     * if `Footer` is provided, this props will be ignored
+     */
+    pullUpMessage?: string;
+    /**
+     * if Provided, this message will replace end of list message in default `Footer`
+     * if `Footer` is provided, this props will be ignored
+     */
+    endOfListMessage?: string;
+    /**
+     * Set margin for each item
+     */
     gap?: Gap;
-    pullDownRefreshMessage?: React.ReactElement | string;
-    pullDownRefreshingMessage?: React.ReactElement | string;
-    pullUpLoadMoreMessage?: React.ReactElement | string;
-    pullUpLoadingMessage?: React.ReactElement | string;
-    endOfListMessage?: React.ReactElement | string;
-}
-export interface FlatListItemProps<T> {
-    data: T;
-    index: number;
-}
-export interface FooterData {
-    __markedAsFooterData: true;
-    loading: boolean;
-    ended: boolean;
-    loadMoreMessage?: React.ReactElement | string;
-    loadingMessage?: React.ReactElement | string;
-    endMessage?: React.ReactElement | string;
+    className?: string;
+    id?: string;
 }

package/core/FlatList/type.js

@@ -1,2 +1,2 @@
-export var PULL_DOWN_REFRESH_THRESHOLD = 50;
+export {};
 //# sourceMappingURL=type.js.map

package/core/FlatList/type.js.map

@@ -1 +1 @@
-{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../src/core/FlatList/type.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,2BAA2B,GAAG,EAAE,CAAC"}
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../src/core/FlatList/type.ts"],"names":[],"mappings":""}

package/core/FlatList/useGap.d.ts

@@ -0,0 +1,2 @@
+import type { Gap } from "./type";
+export declare const useGap: (gap?: Gap) => React.CSSProperties;

package/core/FlatList/useGap.js

@@ -0,0 +1,12 @@
+export var useGap = function (gap) {
+    if (!gap)
+        return {};
+    if (typeof gap === "number") {
+        return { paddingTop: gap, paddingBottom: gap, paddingLeft: gap, paddingRight: gap };
+    }
+    else {
+        var top_1 = gap.top, bottom = gap.bottom, left = gap.left, right = gap.right;
+        return { paddingTop: top_1, paddingBottom: bottom, paddingLeft: left, paddingRight: right };
+    }
+};
+//# sourceMappingURL=useGap.js.map

package/core/FlatList/useGap.js.map

@@ -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"}

package/core/FlatList/util.d.ts

@@ -0,0 +1,8 @@
+import { Direction } from "../../hooks/useSwipe";
+import type { Boundary } from "./type";
+export declare function isExceededBounary(delta: number, boundary: Boundary): boolean;
+export declare function getBounaryFromStartDirection(direction: Direction): Boundary | null;
+export declare function isScrollTop(element: HTMLElement): boolean;
+export declare function isScrollBottom(element: HTMLElement): boolean;
+export declare function isScrollLeft(element: HTMLElement): boolean;
+export declare function isScrollRight(element: HTMLElement): boolean;

package/core/FlatList/util.js

@@ -0,0 +1,35 @@
+import { Direction } from "../../hooks/useSwipe";
+var OVER_BOUNDARY_LIMIT = 40;
+export function isExceededBounary(delta, boundary) {
+    switch (boundary) {
+        case "top":
+            return delta < -OVER_BOUNDARY_LIMIT;
+        case "bottom":
+            return delta > OVER_BOUNDARY_LIMIT;
+    }
+}
+export function getBounaryFromStartDirection(direction) {
+    switch (direction) {
+        case Direction.DOWN:
+            return "top";
+        case Direction.UP:
+            return "bottom";
+        default:
+            return null;
+    }
+}
+export function isScrollTop(element) {
+    return element.scrollTop === 0;
+}
+export function isScrollBottom(element) {
+    var scrollTop = element.scrollTop, clientHeight = element.clientHeight, scrollHeight = element.scrollHeight;
+    return Math.ceil(scrollTop) + clientHeight >= scrollHeight;
+}
+export function isScrollLeft(element) {
+    return element.scrollLeft === 0;
+}
+export function isScrollRight(element) {
+    var scrollWidth = element.scrollWidth, scrollLeft = element.scrollLeft, clientWidth = element.clientWidth;
+    return Math.ceil(scrollLeft) + clientWidth >= scrollWidth;
+}
+//# sourceMappingURL=util.js.map