@lofter-common-shared/react-components 0.2.1 → 0.2.3
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/dist/appear-in-viewport/index.d.ts +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -1
- package/dist/index.js.map +1 -1
- package/dist/lazy/index.d.ts +8 -0
- package/dist/lazy/index.d.ts.map +1 -0
- package/dist/lazy/index.js +51 -0
- package/dist/lazy/index.js.map +1 -0
- package/dist/loading/index.d.ts +14 -3
- package/dist/loading/index.d.ts.map +1 -1
- package/dist/loading/index.js +4 -1
- package/dist/loading/index.js.map +1 -1
- package/dist/pull-down-able/container.d.ts +8 -0
- package/dist/pull-down-able/container.d.ts.map +1 -0
- package/dist/pull-down-able/container.js +79 -0
- package/dist/pull-down-able/container.js.map +1 -0
- package/dist/pull-down-able/index.d.ts +34 -0
- package/dist/pull-down-able/index.d.ts.map +1 -0
- package/dist/pull-down-able/index.js +300 -0
- package/dist/pull-down-able/index.js.map +1 -0
- package/dist/sync-size-space/index.d.ts +13 -0
- package/dist/sync-size-space/index.d.ts.map +1 -0
- package/dist/sync-size-space/index.js +102 -0
- package/dist/sync-size-space/index.js.map +1 -0
- package/package.json +7 -2
|
@@ -17,5 +17,5 @@ export declare const useAppearInViewport: <BE extends HTMLElement = HTMLElement>
|
|
|
17
17
|
*
|
|
18
18
|
* @see AppearInViewportComponentProps
|
|
19
19
|
*/
|
|
20
|
-
export declare const AppearInViewport: React.ForwardRefExoticComponent<Pick<AppearInViewportComponentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement
|
|
20
|
+
export declare const AppearInViewport: React.ForwardRefExoticComponent<Pick<AppearInViewportComponentProps, "key" | keyof ObserveParams | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
|
|
21
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
export * as Loading from './loading';
|
|
2
2
|
export * as CreateRenderToBody from './create-render-to-body';
|
|
3
|
+
export * as Lazy from './lazy';
|
|
4
|
+
export * as SyncSizeSpace from './sync-size-space';
|
|
5
|
+
export * as PullDownAble from './pull-down-able';
|
|
3
6
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,kBAAkB,MAAM,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,kBAAkB,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,YAAY,MAAM,kBAAkB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -33,7 +33,10 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.CreateRenderToBody = exports.Loading = void 0;
|
|
36
|
+
exports.PullDownAble = exports.SyncSizeSpace = exports.Lazy = exports.CreateRenderToBody = exports.Loading = void 0;
|
|
37
37
|
exports.Loading = __importStar(require("./loading"));
|
|
38
38
|
exports.CreateRenderToBody = __importStar(require("./create-render-to-body"));
|
|
39
|
+
exports.Lazy = __importStar(require("./lazy"));
|
|
40
|
+
exports.SyncSizeSpace = __importStar(require("./sync-size-space"));
|
|
41
|
+
exports.PullDownAble = __importStar(require("./pull-down-able"));
|
|
39
42
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAAqC;AACrC,8EAA8D"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAAqC;AACrC,8EAA8D;AAC9D,+CAA+B;AAC/B,mEAAmD;AACnD,iEAAiD"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface LazyProps {
|
|
3
|
+
placeholder?: React.ReactNode;
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
advance?: number;
|
|
6
|
+
}
|
|
7
|
+
export declare const Lazy: ({ placeholder, children, advance }: LazyProps) => JSX.Element;
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lazy/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAEN,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,SAAS;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,IAAI,GAEb,oCAIG,SAAS,gBAwBf,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.Lazy = void 0;
|
|
37
|
+
var react_1 = __importStar(require("react"));
|
|
38
|
+
var appear_in_viewport_1 = require("../appear-in-viewport");
|
|
39
|
+
exports.Lazy = (function (_a) {
|
|
40
|
+
var placeholder = _a.placeholder, children = _a.children, _b = _a.advance, advance = _b === void 0 ? 100 : _b;
|
|
41
|
+
var _c = (0, react_1.useState)(false), visible = _c[0], setVisible = _c[1];
|
|
42
|
+
if (visible) {
|
|
43
|
+
return (
|
|
44
|
+
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
45
|
+
react_1.default.createElement(react_1.default.Fragment, null, children));
|
|
46
|
+
}
|
|
47
|
+
return (react_1.default.createElement(appear_in_viewport_1.AppearInViewport, { advance: advance, onAppear: function () {
|
|
48
|
+
setVisible(true);
|
|
49
|
+
} }, placeholder));
|
|
50
|
+
});
|
|
51
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lazy/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAEe;AAEf,4DAE+B;AAQlB,QAAA,IAAI,GAAG,CAClB,UACE,EAIY;QAHV,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,eAAa,EAAb,OAAO,mBAAG,GAAG,KAAA;IAGT,IAAA,KAGF,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAFjB,OAAO,QAAA,EACP,UAAU,QACO,CAAC;IAEpB,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO;QACL,yDAAyD;QACzD,8DAAG,QAAQ,CAAI,CAChB,CAAC;IACJ,CAAC;IACD,OAAO,CACL,8BAAC,qCAAgB,IACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE;YACR,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,IAEA,WAAW,CACK,CACpB,CAAA;AACH,CAAC,CACF,CAAC"}
|
package/dist/loading/index.d.ts
CHANGED
|
@@ -1,9 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import { Svg as LoadingIcon } from './loading_modal_circle.svg';
|
|
3
|
+
import { Svg as LoadingLogoIcon } from './loading_modal_logo_symbol.svg';
|
|
4
|
+
export interface LoadingProps {
|
|
3
5
|
className?: string;
|
|
4
6
|
rotatingIcon?: React.ReactNode;
|
|
5
7
|
logoIcon?: React.ReactNode;
|
|
6
|
-
}
|
|
8
|
+
}
|
|
9
|
+
export { LoadingIcon, LoadingLogoIcon };
|
|
10
|
+
export declare const loadingCls: {
|
|
11
|
+
loadingMask: string;
|
|
12
|
+
loadingBox: string;
|
|
13
|
+
centerLoading: string;
|
|
14
|
+
loading: string;
|
|
15
|
+
icon: string;
|
|
16
|
+
iconAnimation: string;
|
|
17
|
+
};
|
|
18
|
+
export declare const Loading: ({ className, rotatingIcon, logoIcon }: LoadingProps) => JSX.Element;
|
|
7
19
|
export interface CenterLoadingProps {
|
|
8
20
|
/**
|
|
9
21
|
* 蒙层样式
|
|
@@ -35,5 +47,4 @@ export declare const LoadingContext: React.Context<LoadingContextValue>;
|
|
|
35
47
|
export declare function LoadingProvider({ children, }: {
|
|
36
48
|
children: React.ReactNode;
|
|
37
49
|
}): JSX.Element;
|
|
38
|
-
export {};
|
|
39
50
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/loading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAGN,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/loading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAGN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,GAAG,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,GAAG,IAAI,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAQzE,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,OAAO,EACL,WAAW,EACX,eAAe,EAChB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;CAAM,CAAC;AAE9B,eAAO,MAAM,OAAO,GAAI,uCAQrB,YAAY,gBAad,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACvC;AAED,wBAAgB,aAAa,CAAE,EAC7B,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACpB,EAAE,kBAAkB,eAuBpB;AAoBD,eAAO,MAAM,WAAW,+DAEX,OAAO,YACP,kBAAkB,UAW1B,CAAC;AAEN,UAAU,mBAAmB;IAC3B,WAAW,EAAE,CACX,OAAO,CAAC,EAAE,OAAO,EACjB,OAAO,CAAC,EAAE,kBAAkB,KACzB,IAAI,CAAC;CACX;AAMD,eAAO,MAAM,cAAc,oCAAuE,CAAC;AAGnG,wBAAgB,eAAe,CAAE,EAC/B,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAuBA"}
|
package/dist/loading/index.js
CHANGED
|
@@ -36,16 +36,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
36
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
37
|
};
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.LoadingContext = exports.showLoading = exports.Loading = void 0;
|
|
39
|
+
exports.LoadingContext = exports.showLoading = exports.Loading = exports.loadingCls = exports.LoadingLogoIcon = exports.LoadingIcon = void 0;
|
|
40
40
|
exports.CenterLoading = CenterLoading;
|
|
41
41
|
exports.LoadingProvider = LoadingProvider;
|
|
42
42
|
var react_1 = __importStar(require("react"));
|
|
43
43
|
var merge_classnames_1 = require("@lofter-common-shared/utils/merge-classnames");
|
|
44
44
|
var throttle_1 = require("@lofter-common-shared/utils/throttle");
|
|
45
45
|
var loading_modal_circle_svg_1 = require("./loading_modal_circle.svg");
|
|
46
|
+
Object.defineProperty(exports, "LoadingIcon", { enumerable: true, get: function () { return loading_modal_circle_svg_1.Svg; } });
|
|
46
47
|
var loading_modal_logo_symbol_svg_1 = require("./loading_modal_logo_symbol.svg");
|
|
48
|
+
Object.defineProperty(exports, "LoadingLogoIcon", { enumerable: true, get: function () { return loading_modal_logo_symbol_svg_1.Svg; } });
|
|
47
49
|
var create_render_to_body_1 = require("../create-render-to-body");
|
|
48
50
|
var index_style_1 = __importDefault(require("./index.style"));
|
|
51
|
+
exports.loadingCls = index_style_1.default;
|
|
49
52
|
var Loading = function (_a) {
|
|
50
53
|
var className = _a.className, _b = _a.rotatingIcon, rotatingIcon = _b === void 0 ? (react_1.default.createElement(loading_modal_circle_svg_1.Svg, { className: index_style_1.default.iconAnimation })) : _b, _c = _a.logoIcon, logoIcon = _c === void 0 ? (react_1.default.createElement(loading_modal_logo_symbol_svg_1.Svg, { className: index_style_1.default.icon })) : _c;
|
|
51
54
|
return (react_1.default.createElement("div", { className: (0, merge_classnames_1.mergeClassNames)(index_style_1.default.loading, className) },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface PullDownAbleContextProps {
|
|
3
|
+
getContainerDom: () => null | HTMLElement;
|
|
4
|
+
}
|
|
5
|
+
export declare const PullDownAbleContext: React.Context<PullDownAbleContextProps>;
|
|
6
|
+
export declare const usePullDownAbleContext: () => PullDownAbleContextProps;
|
|
7
|
+
export declare const PullDownAbleContainerProvider: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
|
|
8
|
+
//# sourceMappingURL=container.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/pull-down-able/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,MAAM,IAAI,GAAG,WAAW,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,yCAE9B,CAAC;AAEH,eAAO,MAAM,sBAAsB,gCAElC,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,wBAAwB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,gBAmBzG,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
47
|
+
var t = {};
|
|
48
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
49
|
+
t[p] = s[p];
|
|
50
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
51
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
52
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
53
|
+
t[p[i]] = s[p[i]];
|
|
54
|
+
}
|
|
55
|
+
return t;
|
|
56
|
+
};
|
|
57
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
58
|
+
exports.PullDownAbleContainerProvider = exports.usePullDownAbleContext = exports.PullDownAbleContext = void 0;
|
|
59
|
+
var react_1 = __importStar(require("react"));
|
|
60
|
+
exports.PullDownAbleContext = (0, react_1.createContext)({
|
|
61
|
+
getContainerDom: function () { return document.documentElement; },
|
|
62
|
+
});
|
|
63
|
+
var usePullDownAbleContext = function () {
|
|
64
|
+
return (0, react_1.useContext)(exports.PullDownAbleContext);
|
|
65
|
+
};
|
|
66
|
+
exports.usePullDownAbleContext = usePullDownAbleContext;
|
|
67
|
+
var PullDownAbleContainerProvider = function (_a) {
|
|
68
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
69
|
+
var containerRef = (0, react_1.useRef)(null);
|
|
70
|
+
var value = (0, react_1.useMemo)(function () {
|
|
71
|
+
return {
|
|
72
|
+
getContainerDom: function () { return containerRef.current; },
|
|
73
|
+
};
|
|
74
|
+
}, []);
|
|
75
|
+
return (react_1.default.createElement(exports.PullDownAbleContext.Provider, { value: value },
|
|
76
|
+
react_1.default.createElement("div", __assign({ ref: containerRef }, props), children)));
|
|
77
|
+
};
|
|
78
|
+
exports.PullDownAbleContainerProvider = PullDownAbleContainerProvider;
|
|
79
|
+
//# sourceMappingURL=container.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/pull-down-able/container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0E;AAM7D,QAAA,mBAAmB,GAAG,IAAA,qBAAa,EAA2B;IACzE,eAAe,EAAE,cAAM,OAAA,QAAQ,CAAC,eAAe,EAAxB,CAAwB;CAChD,CAAC,CAAC;AAEI,IAAM,sBAAsB,GAAG;IACpC,OAAO,IAAA,kBAAU,EAAC,2BAAmB,CAAC,CAAC;AACzC,CAAC,CAAC;AAFW,QAAA,sBAAsB,0BAEjC;AAEK,IAAM,6BAA6B,GAAG,UAAC,EAA4D;IAA1D,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAChE,IAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAElD,IAAM,KAAK,GAAG,IAAA,eAAO,EAA2B;QAC9C,OAAO;YACL,eAAe,EAAE,cAAM,OAAA,YAAY,CAAC,OAAO,EAApB,CAAoB;SAC5C,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BAAC,2BAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACxC,gDACE,GAAG,EAAE,YAAY,IACb,KAAK,GAER,QAAQ,CACL,CACuB,CAChC,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,6BAA6B,iCAmBxC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { LoadingProps } from '../loading';
|
|
3
|
+
import { PullDownAbleContextProps } from './container';
|
|
4
|
+
export type LoadingComponentProps = {
|
|
5
|
+
/**
|
|
6
|
+
* 0-1的进度
|
|
7
|
+
*/
|
|
8
|
+
progress: number;
|
|
9
|
+
updateLoadingHeight: (newHeight: number) => void;
|
|
10
|
+
};
|
|
11
|
+
export type LoadingComponent<CS = any, P extends LoadingComponentProps = CS & LoadingComponentProps> = (props: P) => React.ReactElement;
|
|
12
|
+
export interface EnableEvent {
|
|
13
|
+
originalEvent: TouchEvent;
|
|
14
|
+
target: EventTarget | null;
|
|
15
|
+
currentTarget: HTMLElement;
|
|
16
|
+
}
|
|
17
|
+
export type GestureDivProps = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onTouchMove' | 'onTouchStart' | 'onMouseDown'>;
|
|
18
|
+
export type PullDownAbleProps = {
|
|
19
|
+
children?: React.ReactNode;
|
|
20
|
+
boxProps?: GestureDivProps;
|
|
21
|
+
LoadingComponent?: LoadingComponent;
|
|
22
|
+
allowPullDown?: (event: EnableEvent, pullDownAbleContext: PullDownAbleContextProps) => boolean;
|
|
23
|
+
onPullDown?: () => void | Promise<void>;
|
|
24
|
+
};
|
|
25
|
+
export interface PullDownAbleRef {
|
|
26
|
+
}
|
|
27
|
+
export declare const DefaultLoadingComponent: LoadingComponent<{
|
|
28
|
+
loadingProps?: LoadingProps;
|
|
29
|
+
}>;
|
|
30
|
+
export type PullDownState = 'prepare' | 'pullDowning' | 'finish';
|
|
31
|
+
export declare function calculateVisualDistance(d: number, maxD: number): number;
|
|
32
|
+
export declare const defaultAllowPullDown: (event: EnableEvent) => boolean;
|
|
33
|
+
export declare const PullDownAble: React.ForwardRefExoticComponent<PullDownAbleProps & React.RefAttributes<PullDownAbleRef>>;
|
|
34
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pull-down-able/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAKlH,OAAO,EAAW,YAAY,EAA2B,MAAM,YAAY,CAAC;AAE5E,OAAO,EAAE,wBAAwB,EAA0B,MAAM,aAAa,CAAC;AAE/E,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,SAAS,qBAAqB,GAAG,EAAE,GAAG,qBAAqB,IAAI,CACrG,KAAK,EAAE,CAAC,KACL,KAAK,CAAC,YAAY,CAAC;AAExB,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,UAAU,CAAC;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,WAAW,CAAC;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,EAC7E,aAAa,GAAG,cAAc,GAAG,aAAa,CAC/C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,wBAAwB,KAAK,OAAO,CAAC;IAC/F,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzC,CAAC;AAEF,MAAM,WAAW,eAAe;CAAG;AA8BnC,eAAO,MAAM,uBAAuB,EAAE,gBAAgB,CAAC;IACrD,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CA0CA,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAC;AAEjE,wBAAgB,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAO9D;AAID,eAAO,MAAM,oBAAoB,GAAI,OAAO,WAAW,YAEtD,CAAC;AAEF,eAAO,MAAM,YAAY,2FA4JxB,CAAC"}
|
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
47
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
48
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
49
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
50
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
51
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
52
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
56
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
57
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
58
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
59
|
+
function step(op) {
|
|
60
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
61
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
62
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
63
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
64
|
+
switch (op[0]) {
|
|
65
|
+
case 0: case 1: t = op; break;
|
|
66
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
67
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
68
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
69
|
+
default:
|
|
70
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
71
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
72
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
73
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
74
|
+
if (t[2]) _.ops.pop();
|
|
75
|
+
_.trys.pop(); continue;
|
|
76
|
+
}
|
|
77
|
+
op = body.call(thisArg, _);
|
|
78
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
79
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
83
|
+
exports.PullDownAble = exports.defaultAllowPullDown = exports.DefaultLoadingComponent = void 0;
|
|
84
|
+
exports.calculateVisualDistance = calculateVisualDistance;
|
|
85
|
+
var react_1 = __importStar(require("react"));
|
|
86
|
+
var gesture_1 = require("@lofter-common-shared/gesture");
|
|
87
|
+
var sleep_1 = require("@lofter-common-shared/utils/sleep");
|
|
88
|
+
var loading_1 = require("../loading");
|
|
89
|
+
var container_1 = require("./container");
|
|
90
|
+
var defaultStylesMap = new Map([
|
|
91
|
+
[
|
|
92
|
+
'prepare',
|
|
93
|
+
{
|
|
94
|
+
body: {
|
|
95
|
+
transform: 'translateY(0) translateZ(0)',
|
|
96
|
+
transition: 'transform 0.8s cubic-bezier(0.1,0.94,0,1)',
|
|
97
|
+
},
|
|
98
|
+
},
|
|
99
|
+
],
|
|
100
|
+
[
|
|
101
|
+
'finish',
|
|
102
|
+
{
|
|
103
|
+
body: {
|
|
104
|
+
transition: 'transform 0.8s cubic-bezier(0.1,0.94,0,1)',
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
],
|
|
108
|
+
[
|
|
109
|
+
'pullDowning',
|
|
110
|
+
{
|
|
111
|
+
body: {
|
|
112
|
+
transition: 'none',
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
],
|
|
116
|
+
]);
|
|
117
|
+
var DefaultLoadingComponent = function (_a) {
|
|
118
|
+
var progress = _a.progress, updateLoadingHeight = _a.updateLoadingHeight, loadingProps = _a.loadingProps;
|
|
119
|
+
var boxRef = (0, react_1.useRef)(null);
|
|
120
|
+
(0, react_1.useEffect)(function () {
|
|
121
|
+
if (boxRef.current) {
|
|
122
|
+
updateLoadingHeight(boxRef.current.scrollHeight);
|
|
123
|
+
}
|
|
124
|
+
}, [updateLoadingHeight]);
|
|
125
|
+
return (react_1.default.createElement("div", { style: {
|
|
126
|
+
position: 'relative',
|
|
127
|
+
height: 0,
|
|
128
|
+
pointerEvents: 'none',
|
|
129
|
+
} },
|
|
130
|
+
react_1.default.createElement("div", { style: {
|
|
131
|
+
position: 'absolute',
|
|
132
|
+
left: '50%',
|
|
133
|
+
bottom: 0,
|
|
134
|
+
transform: 'translateX(-50%) translateY(0) translateZ(0)',
|
|
135
|
+
padding: '12px',
|
|
136
|
+
opacity: progress > 0 ? 1 : 0,
|
|
137
|
+
}, ref: boxRef },
|
|
138
|
+
react_1.default.createElement(loading_1.Loading, __assign({ rotatingIcon: (react_1.default.createElement(loading_1.LoadingIcon, { className: loading_1.loadingCls.iconAnimation, style: {
|
|
139
|
+
animationPlayState: progress === 1 ? 'playing' : 'paused'
|
|
140
|
+
} })) }, loadingProps)))));
|
|
141
|
+
};
|
|
142
|
+
exports.DefaultLoadingComponent = DefaultLoadingComponent;
|
|
143
|
+
function calculateVisualDistance(d, maxD) {
|
|
144
|
+
/**
|
|
145
|
+
* 0 - 1.5倍max间
|
|
146
|
+
*/
|
|
147
|
+
var max = 1.5 * maxD;
|
|
148
|
+
d = Math.max(0, Math.min(d, max));
|
|
149
|
+
return d * (1.5 - 0.5 * (d / max));
|
|
150
|
+
}
|
|
151
|
+
var MIN_FINISH_TIME = 800;
|
|
152
|
+
var defaultAllowPullDown = function (event) {
|
|
153
|
+
return !event.originalEvent.defaultPrevented;
|
|
154
|
+
};
|
|
155
|
+
exports.defaultAllowPullDown = defaultAllowPullDown;
|
|
156
|
+
exports.PullDownAble = (0, react_1.forwardRef)(function (_a, ref) {
|
|
157
|
+
var children = _a.children, boxProps = _a.boxProps, _b = _a.LoadingComponent, LoadingComponent = _b === void 0 ? exports.DefaultLoadingComponent : _b, _c = _a.allowPullDown, allowPullDown = _c === void 0 ? exports.defaultAllowPullDown : _c, onPullDown = _a.onPullDown;
|
|
158
|
+
var boxRef = (0, react_1.useRef)(null);
|
|
159
|
+
var maxPullDownDiffRef = (0, react_1.useRef)(Infinity);
|
|
160
|
+
var pullDownAbleContext = (0, container_1.usePullDownAbleContext)();
|
|
161
|
+
var pullDownStateRef = (0, react_1.useRef)('prepare');
|
|
162
|
+
var nextMovingStateRef = (0, react_1.useRef)(false);
|
|
163
|
+
var enabledRef = (0, react_1.useRef)(false);
|
|
164
|
+
var _d = (0, react_1.useState)(0), progress = _d[0], setProgress = _d[1];
|
|
165
|
+
var onPullDownRef = (0, react_1.useRef)(onPullDown);
|
|
166
|
+
onPullDownRef.current = onPullDown;
|
|
167
|
+
var allowPullDownRef = (0, react_1.useRef)(allowPullDown);
|
|
168
|
+
allowPullDownRef.current = allowPullDown;
|
|
169
|
+
var pullDownAbleContextRef = (0, react_1.useRef)(pullDownAbleContext);
|
|
170
|
+
pullDownAbleContextRef.current = pullDownAbleContext;
|
|
171
|
+
var changePullDownState = (0, react_1.useCallback)(function (nextPullDownState) { return __awaiter(void 0, void 0, void 0, function () {
|
|
172
|
+
var body, styles, _a, _b, _c, e_1, styles;
|
|
173
|
+
var _d, _e, _f, _g;
|
|
174
|
+
return __generator(this, function (_h) {
|
|
175
|
+
switch (_h.label) {
|
|
176
|
+
case 0:
|
|
177
|
+
body = boxRef.current;
|
|
178
|
+
if (!(nextPullDownState === 'finish')) return [3 /*break*/, 7];
|
|
179
|
+
pullDownStateRef.current = 'finish';
|
|
180
|
+
styles = defaultStylesMap.get('finish');
|
|
181
|
+
if (body && ((_d = styles === null || styles === void 0 ? void 0 : styles.body) === null || _d === void 0 ? void 0 : _d.transition)) {
|
|
182
|
+
body.style.transition = styles.body.transition;
|
|
183
|
+
}
|
|
184
|
+
setProgress(1);
|
|
185
|
+
return [4 /*yield*/, (0, sleep_1.sleep)(0)];
|
|
186
|
+
case 1:
|
|
187
|
+
_h.sent();
|
|
188
|
+
if (body && maxPullDownDiffRef.current !== Infinity) {
|
|
189
|
+
body.style.transform = "translateY(".concat(maxPullDownDiffRef.current + 'px', ") translateZ(0)");
|
|
190
|
+
}
|
|
191
|
+
_h.label = 2;
|
|
192
|
+
case 2:
|
|
193
|
+
_h.trys.push([2, 5, , 6]);
|
|
194
|
+
_b = (_a = Promise).all;
|
|
195
|
+
_c = [(0, sleep_1.sleep)(MIN_FINISH_TIME)];
|
|
196
|
+
return [4 /*yield*/, ((_e = onPullDownRef.current) === null || _e === void 0 ? void 0 : _e.call(onPullDownRef))];
|
|
197
|
+
case 3: return [4 /*yield*/, _b.apply(_a, [_c.concat([_h.sent()])])];
|
|
198
|
+
case 4:
|
|
199
|
+
_h.sent();
|
|
200
|
+
return [3 /*break*/, 6];
|
|
201
|
+
case 5:
|
|
202
|
+
e_1 = _h.sent();
|
|
203
|
+
return [3 /*break*/, 6];
|
|
204
|
+
case 6:
|
|
205
|
+
changePullDownState('prepare');
|
|
206
|
+
_h.label = 7;
|
|
207
|
+
case 7:
|
|
208
|
+
if (!(nextPullDownState === 'prepare')) return [3 /*break*/, 9];
|
|
209
|
+
pullDownStateRef.current = 'prepare';
|
|
210
|
+
styles = defaultStylesMap.get('prepare');
|
|
211
|
+
if (body && ((_f = styles === null || styles === void 0 ? void 0 : styles.body) === null || _f === void 0 ? void 0 : _f.transition)) {
|
|
212
|
+
body.style.transition = styles.body.transition;
|
|
213
|
+
}
|
|
214
|
+
setProgress(0);
|
|
215
|
+
return [4 /*yield*/, (0, sleep_1.sleep)(0)];
|
|
216
|
+
case 8:
|
|
217
|
+
_h.sent();
|
|
218
|
+
if (body && ((_g = styles === null || styles === void 0 ? void 0 : styles.body) === null || _g === void 0 ? void 0 : _g.transform)) {
|
|
219
|
+
body.style.transform = styles.body.transform;
|
|
220
|
+
}
|
|
221
|
+
_h.label = 9;
|
|
222
|
+
case 9: return [2 /*return*/];
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
}); }, []);
|
|
226
|
+
var refValue = (0, react_1.useMemo)(function () {
|
|
227
|
+
return {
|
|
228
|
+
pullDown: function () { },
|
|
229
|
+
};
|
|
230
|
+
}, []);
|
|
231
|
+
(0, react_1.useImperativeHandle)(ref, function () {
|
|
232
|
+
return refValue;
|
|
233
|
+
}, [refValue]);
|
|
234
|
+
(0, react_1.useEffect)(function () {
|
|
235
|
+
var element = boxRef.current;
|
|
236
|
+
if (!element) {
|
|
237
|
+
return;
|
|
238
|
+
}
|
|
239
|
+
var dispose = (0, gesture_1.handleGesture)(element, {
|
|
240
|
+
onTouchStart: function (event) {
|
|
241
|
+
var _a, _b;
|
|
242
|
+
if (pullDownStateRef.current !== 'prepare') {
|
|
243
|
+
enabledRef.current = false;
|
|
244
|
+
return;
|
|
245
|
+
}
|
|
246
|
+
var allowed = (_a = allowPullDownRef.current) === null || _a === void 0 ? void 0 : _a.call(allowPullDownRef, {
|
|
247
|
+
originalEvent: event,
|
|
248
|
+
target: event.target,
|
|
249
|
+
currentTarget: element,
|
|
250
|
+
}, pullDownAbleContextRef.current);
|
|
251
|
+
if (allowed === false) {
|
|
252
|
+
enabledRef.current = false;
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
enabledRef.current = ((_b = pullDownAbleContextRef.current.getContainerDom()) === null || _b === void 0 ? void 0 : _b.scrollTop) === 0;
|
|
256
|
+
},
|
|
257
|
+
onMove: function (moveDiff) {
|
|
258
|
+
if (!enabledRef.current) {
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
nextMovingStateRef.current = true;
|
|
262
|
+
var body = boxRef.current;
|
|
263
|
+
var y = -moveDiff.y;
|
|
264
|
+
var diff = calculateVisualDistance(y, maxPullDownDiffRef.current);
|
|
265
|
+
setProgress(Math.max(0, Math.min(1, diff / maxPullDownDiffRef.current)));
|
|
266
|
+
if (body) {
|
|
267
|
+
body.style.transform = "translateY(".concat(Math.max(0, diff), "px) translateZ(0)");
|
|
268
|
+
body.style.transition = 'none';
|
|
269
|
+
}
|
|
270
|
+
pullDownStateRef.current = 'pullDowning';
|
|
271
|
+
},
|
|
272
|
+
onMoveEnd: function (moveDiff) {
|
|
273
|
+
if (pullDownStateRef.current !== 'pullDowning') {
|
|
274
|
+
return;
|
|
275
|
+
}
|
|
276
|
+
if (!nextMovingStateRef.current) {
|
|
277
|
+
changePullDownState('prepare');
|
|
278
|
+
return;
|
|
279
|
+
}
|
|
280
|
+
nextMovingStateRef.current = false;
|
|
281
|
+
var y = -moveDiff.y;
|
|
282
|
+
var diff = calculateVisualDistance(y, maxPullDownDiffRef.current);
|
|
283
|
+
console.log('onMoveEnd', diff, y, maxPullDownDiffRef.current);
|
|
284
|
+
if (diff >= maxPullDownDiffRef.current && moveDiff.direction === 'bottom') {
|
|
285
|
+
changePullDownState('finish');
|
|
286
|
+
}
|
|
287
|
+
else {
|
|
288
|
+
changePullDownState('prepare');
|
|
289
|
+
}
|
|
290
|
+
},
|
|
291
|
+
});
|
|
292
|
+
return dispose;
|
|
293
|
+
}, [changePullDownState]);
|
|
294
|
+
return (react_1.default.createElement("div", __assign({}, boxProps, { ref: boxRef }),
|
|
295
|
+
react_1.default.createElement(LoadingComponent, { progress: progress, updateLoadingHeight: function (newHeight) {
|
|
296
|
+
maxPullDownDiffRef.current = newHeight;
|
|
297
|
+
} }),
|
|
298
|
+
children));
|
|
299
|
+
});
|
|
300
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/pull-down-able/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface SyncSizeSpaceRef {
|
|
3
|
+
updateTargetElement: (targetElement: HTMLElement | null) => void;
|
|
4
|
+
getTargetElement: () => HTMLElement | null;
|
|
5
|
+
resizeSize: () => void;
|
|
6
|
+
}
|
|
7
|
+
export interface SyncSizeSpaceProps {
|
|
8
|
+
className?: string;
|
|
9
|
+
width?: string;
|
|
10
|
+
height?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const SyncSizeSpace: React.ForwardRefExoticComponent<SyncSizeSpaceProps & React.RefAttributes<SyncSizeSpaceRef>>;
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sync-size-space/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAI5F,MAAM,WAAW,gBAAgB;IAC/B,mBAAmB,EAAE,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,6FA4EzB,CAAC"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.SyncSizeSpace = void 0;
|
|
37
|
+
var react_1 = __importStar(require("react"));
|
|
38
|
+
var throttle_1 = require("@lofter-common-shared/utils/throttle");
|
|
39
|
+
exports.SyncSizeSpace = (0, react_1.forwardRef)(function (_a, syncSizeSpaceRef) {
|
|
40
|
+
var className = _a.className, width = _a.width, height = _a.height;
|
|
41
|
+
var removedRef = (0, react_1.useRef)(false);
|
|
42
|
+
var resizeObserverRef = (0, react_1.useRef)(null);
|
|
43
|
+
var _b = (0, react_1.useState)({
|
|
44
|
+
width: 0,
|
|
45
|
+
height: 0,
|
|
46
|
+
}), size = _b[0], setSize = _b[1];
|
|
47
|
+
(0, react_1.useImperativeHandle)(syncSizeSpaceRef, function () {
|
|
48
|
+
var targetElement = null;
|
|
49
|
+
var resizeSize = function () {
|
|
50
|
+
if (targetElement) {
|
|
51
|
+
var boxRect = targetElement.getBoundingClientRect();
|
|
52
|
+
setSize({
|
|
53
|
+
width: Math.round(boxRect.width),
|
|
54
|
+
height: Math.round(boxRect.height),
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
setSize({
|
|
59
|
+
width: 0,
|
|
60
|
+
height: 0,
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
return {
|
|
65
|
+
updateTargetElement: function (newTargetElement) {
|
|
66
|
+
var _a;
|
|
67
|
+
targetElement = newTargetElement;
|
|
68
|
+
(_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
69
|
+
resizeObserverRef.current = null;
|
|
70
|
+
var ro;
|
|
71
|
+
if (targetElement) {
|
|
72
|
+
ro = new ResizeObserver((0, throttle_1.throttle)(function (entries) {
|
|
73
|
+
if (!removedRef.current
|
|
74
|
+
&& entries.some(function (resizeObserverEntry) { return resizeObserverEntry.target === targetElement; })) {
|
|
75
|
+
resizeSize();
|
|
76
|
+
}
|
|
77
|
+
}).run);
|
|
78
|
+
ro.observe(targetElement);
|
|
79
|
+
resizeObserverRef.current = ro;
|
|
80
|
+
resizeSize();
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
getTargetElement: function () {
|
|
84
|
+
return targetElement;
|
|
85
|
+
},
|
|
86
|
+
resizeSize: resizeSize,
|
|
87
|
+
};
|
|
88
|
+
}, []);
|
|
89
|
+
(0, react_1.useEffect)(function () {
|
|
90
|
+
return function () {
|
|
91
|
+
var _a;
|
|
92
|
+
removedRef.current = true;
|
|
93
|
+
(_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
94
|
+
resizeObserverRef.current = null;
|
|
95
|
+
};
|
|
96
|
+
}, []);
|
|
97
|
+
return (react_1.default.createElement("div", { className: className, style: {
|
|
98
|
+
width: width || size.width,
|
|
99
|
+
height: height || size.height,
|
|
100
|
+
} }));
|
|
101
|
+
});
|
|
102
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/sync-size-space/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4F;AAE5F,iEAAgE;AAcnD,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,UAAC,EAA4B,EAAE,gBAAgB;QAA5C,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA;IACzB,IAAM,UAAU,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IACjC,IAAM,iBAAiB,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACxD,IAAA,KAAkB,IAAA,gBAAQ,EAAC;QAC/B,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV,CAAC,EAHK,IAAI,QAAA,EAAE,OAAO,QAGlB,CAAC;IAEH,IAAA,2BAAmB,EAAC,gBAAgB,EAAE;QACpC,IAAI,aAAa,GAAuB,IAAI,CAAC;QAC7C,IAAM,UAAU,GAAG;YACjB,IAAI,aAAa,EAAE,CAAC;gBAClB,IAAM,OAAO,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC;gBAEtD,OAAO,CAAC;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;oBAChC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;iBACnC,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC;oBACN,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;iBACV,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,OAAO;YACL,mBAAmB,YAAC,gBAAgB;;gBAClC,aAAa,GAAG,gBAAgB,CAAC;gBAEjC,MAAA,iBAAiB,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAC;gBACxC,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;gBAEjC,IAAI,EAAkB,CAAC;gBACvB,IAAI,aAAa,EAAE,CAAC;oBAClB,EAAE,GAAG,IAAI,cAAc,CACrB,IAAA,mBAAQ,EAAyB,UAAC,OAAO;wBACvC,IACE,CAAC,UAAU,CAAC,OAAO;+BAChB,OAAO,CAAC,IAAI,CAAC,UAAC,mBAAmB,IAAK,OAAA,mBAAmB,CAAC,MAAM,KAAK,aAAa,EAA5C,CAA4C,CAAC,EACtF,CAAC;4BACD,UAAU,EAAE,CAAC;wBACf,CAAC;oBACH,CAAC,CAAC,CAAC,GAAG,CACP,CAAC;oBACF,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;oBAC1B,iBAAiB,CAAC,OAAO,GAAG,EAAE,CAAC;oBAC/B,UAAU,EAAE,CAAC;gBACf,CAAC;YACH,CAAC;YACD,gBAAgB;gBACd,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,UAAU,YAAA;SACX,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC;QACR,OAAO;;YACL,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAC1B,MAAA,iBAAiB,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAC;YACxC,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;QACnC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uCACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK;YAC1B,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM;SAC9B,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lofter-common-shared/react-components",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -13,7 +13,11 @@
|
|
|
13
13
|
"./waterfall": "./dist/waterfall/index.js",
|
|
14
14
|
"./animation-size-view": "./dist/animation-size-view/index.js",
|
|
15
15
|
"./appear-in-viewport": "./dist/appear-in-viewport/index.js",
|
|
16
|
-
"./click-away-listener": "./dist/click-away-listener/index.js"
|
|
16
|
+
"./click-away-listener": "./dist/click-away-listener/index.js",
|
|
17
|
+
"./lazy": "./dist/lazy/index.js",
|
|
18
|
+
"./sync-size-space": "./dist/sync-size-space/index.js",
|
|
19
|
+
"./pull-down-able": "./dist/pull-down-able/index.js",
|
|
20
|
+
"./pull-down-able/container": "./dist/pull-down-able/container.js"
|
|
17
21
|
},
|
|
18
22
|
"publishConfig": {
|
|
19
23
|
"access": "public",
|
|
@@ -28,6 +32,7 @@
|
|
|
28
32
|
"dependencies": {
|
|
29
33
|
"@lofter-common-shared/utils": "0.1.7",
|
|
30
34
|
"@lofter-common-shared/css-in-js": "0.1.3",
|
|
35
|
+
"@lofter-common-shared/gesture": "0.1.1",
|
|
31
36
|
"react": "^16.12.0",
|
|
32
37
|
"react-dom": "^16.12.0"
|
|
33
38
|
},
|