@lofter-common-shared/react-components 0.1.4 → 0.2.1
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/animation-size-view/index.d.ts +16 -0
- package/dist/animation-size-view/index.d.ts.map +1 -0
- package/dist/animation-size-view/index.js +94 -0
- package/dist/animation-size-view/index.js.map +1 -0
- package/dist/animation-size-view/index.style.d.ts +5 -0
- package/dist/animation-size-view/index.style.d.ts.map +1 -0
- package/dist/animation-size-view/index.style.js +16 -0
- package/dist/animation-size-view/index.style.js.map +1 -0
- package/dist/appear-in-viewport/index.d.ts +21 -0
- package/dist/appear-in-viewport/index.d.ts.map +1 -0
- package/dist/appear-in-viewport/index.js +125 -0
- package/dist/appear-in-viewport/index.js.map +1 -0
- package/dist/appear-in-viewport/observe.d.ts +51 -0
- package/dist/appear-in-viewport/observe.d.ts.map +1 -0
- package/dist/appear-in-viewport/observe.js +62 -0
- package/dist/appear-in-viewport/observe.js.map +1 -0
- package/dist/click-away-listener/index.d.ts +13 -0
- package/dist/click-away-listener/index.d.ts.map +1 -0
- package/dist/click-away-listener/index.js +108 -0
- package/dist/click-away-listener/index.js.map +1 -0
- package/dist/create-render-to-body/index.d.ts.map +1 -1
- package/dist/create-render-to-body/index.js +11 -8
- package/dist/create-render-to-body/index.js.map +1 -1
- package/dist/waterfall/index.d.ts +22 -0
- package/dist/waterfall/index.d.ts.map +1 -0
- package/dist/waterfall/index.js +318 -0
- package/dist/waterfall/index.js.map +1 -0
- package/dist/waterfall/index.style.d.ts +11 -0
- package/dist/waterfall/index.style.d.ts.map +1 -0
- package/dist/waterfall/index.style.js +50 -0
- package/dist/waterfall/index.style.js.map +1 -0
- package/package.json +6 -2
- package/src/index.ts +0 -2
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type AnimationSizeViewRef = {};
|
|
3
|
+
export type AnimationSizeViewProps = {
|
|
4
|
+
childProps?: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>;
|
|
5
|
+
parentProps?: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* 默认只会变化高度
|
|
9
|
+
*/
|
|
10
|
+
observerAttrs?: {
|
|
11
|
+
width?: boolean;
|
|
12
|
+
height?: boolean;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export declare const AnimationSizeView: React.ForwardRefExoticComponent<AnimationSizeViewProps & React.RefAttributes<AnimationSizeViewRef>>;
|
|
16
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation-size-view/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAMlF,MAAM,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEtC,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;IAC7G,WAAW,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;IAC9G,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE;QACd,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,iBAAiB,qGAkE7B,CAAC"}
|
|
@@ -0,0 +1,94 @@
|
|
|
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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
47
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
48
|
+
};
|
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
|
+
exports.AnimationSizeView = void 0;
|
|
51
|
+
var react_1 = __importStar(require("react"));
|
|
52
|
+
var throttle_1 = require("@lofter-common-shared/utils/throttle");
|
|
53
|
+
var index_style_1 = __importDefault(require("./index.style"));
|
|
54
|
+
exports.AnimationSizeView = (0, react_1.forwardRef)(function (_a, ref) {
|
|
55
|
+
var childProps = _a.childProps, parentProps = _a.parentProps, children = _a.children, _b = _a.observerAttrs, observerAttrs = _b === void 0 ? {
|
|
56
|
+
height: true,
|
|
57
|
+
} : _b;
|
|
58
|
+
var parentRef = (0, react_1.useRef)(null);
|
|
59
|
+
var childRef = (0, react_1.useRef)(null);
|
|
60
|
+
var observerAttrsRef = (0, react_1.useRef)(observerAttrs);
|
|
61
|
+
(0, react_1.useImperativeHandle)(ref, function () {
|
|
62
|
+
return {};
|
|
63
|
+
}, []);
|
|
64
|
+
(0, react_1.useEffect)(function () {
|
|
65
|
+
var resize = (0, throttle_1.throttle)(function () {
|
|
66
|
+
if (parentRef.current && childRef.current) {
|
|
67
|
+
if (observerAttrsRef.current.height) {
|
|
68
|
+
parentRef.current.style.height = "".concat(Math.ceil(childRef.current.getBoundingClientRect().height), "px");
|
|
69
|
+
}
|
|
70
|
+
if (observerAttrsRef.current.width) {
|
|
71
|
+
parentRef.current.style.width = "".concat(Math.ceil(childRef.current.getBoundingClientRect().width), "px");
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}, {
|
|
75
|
+
wait: 50,
|
|
76
|
+
leading: true,
|
|
77
|
+
trailing: true,
|
|
78
|
+
debounce: true,
|
|
79
|
+
}).run;
|
|
80
|
+
var resizeObserver = new ResizeObserver(function () {
|
|
81
|
+
resize();
|
|
82
|
+
});
|
|
83
|
+
if (childRef.current) {
|
|
84
|
+
resizeObserver.observe(childRef.current);
|
|
85
|
+
resize();
|
|
86
|
+
}
|
|
87
|
+
return function () {
|
|
88
|
+
resizeObserver.disconnect();
|
|
89
|
+
};
|
|
90
|
+
}, []);
|
|
91
|
+
return (react_1.default.createElement("div", __assign({}, parentProps, { className: index_style_1.default.box + ((parentProps === null || parentProps === void 0 ? void 0 : parentProps.className) ? " ".concat(parentProps.className) : ''), ref: parentRef }),
|
|
92
|
+
react_1.default.createElement("div", __assign({}, childProps, { ref: childRef }), children)));
|
|
93
|
+
});
|
|
94
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/animation-size-view/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkF;AAElF,iEAAgE;AAEhE,8DAAgC;AAiBnB,QAAA,iBAAiB,GAAG,IAAA,kBAAU,EACzC,UACE,EAOC,EACD,GAAG;QAPD,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,qBAEC,EAFD,aAAa,mBAAG;QACd,MAAM,EAAE,IAAI;KACb,KAAA;IAIH,IAAM,SAAS,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACtD,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACrD,IAAM,gBAAgB,GAAG,IAAA,cAAM,EAAuB,aAAa,CAAC,CAAC;IACrE,IAAA,2BAAmB,EAAC,GAAG,EAAE;QACvB,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC;QACR,IAAM,MAAM,GAAG,IAAA,mBAAQ,EACrB;YACE,IAAI,SAAS,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBAC1C,IAAI,gBAAgB,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;oBACpC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,OAAI,CAAC;gBACrG,CAAC;gBACD,IAAI,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;oBACnC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,UAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,OAAI,CAAC;gBACnG,CAAC;YACH,CAAC;QACH,CAAC,EACD;YACE,IAAI,EAAE,EAAE;YACR,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI;SACf,CACF,CAAC,GAAG,CAAC;QAEN,IAAM,cAAc,GAAG,IAAI,cAAc,CAAC;YACxC,MAAM,EAAE,CAAC;QACX,CAAC,CAAC,CAAC;QACH,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACzC,MAAM,EAAE,CAAC;QACX,CAAC;QAED,OAAO;YACL,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,kDACM,WAAW,IACf,SAAS,EAAE,qBAAG,CAAC,GAAG,GAAG,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,EAAC,CAAC,CAAC,WAAI,WAAW,CAAC,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAChF,GAAG,EAAE,SAAS;QAEd,kDACM,UAAU,IACd,GAAG,EAAE,QAAQ,KAEZ,QAAQ,CACL,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.style.d.ts","sourceRoot":"","sources":["../../src/animation-size-view/index.style.ts"],"names":[],"mappings":";;;AAOA,wBAOuB"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var css_in_js_1 = require("@lofter-common-shared/css-in-js");
|
|
4
|
+
var theme = new css_in_js_1.Theme({
|
|
5
|
+
name: 'animation-size',
|
|
6
|
+
namespace: 'lofter-animation-size',
|
|
7
|
+
});
|
|
8
|
+
exports.default = (0, css_in_js_1.createThemStyle)(theme)(function () { return ({
|
|
9
|
+
box: {
|
|
10
|
+
'transition-property': 'width, height',
|
|
11
|
+
'transition-timing-function': 'linear',
|
|
12
|
+
'transition-duration': '200ms',
|
|
13
|
+
overflow: 'hidden',
|
|
14
|
+
},
|
|
15
|
+
}); }).createClassNames();
|
|
16
|
+
//# sourceMappingURL=index.style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.style.js","sourceRoot":"","sources":["../../src/animation-size-view/index.style.ts"],"names":[],"mappings":";;AAAA,6DAAyE;AAEzE,IAAM,KAAK,GAAG,IAAI,iBAAK,CAAC;IACtB,IAAI,EAAE,gBAAgB;IACtB,SAAS,EAAE,uBAAuB;CACnC,CAAC,CAAC;AAEH,kBAAe,IAAA,2BAAe,EAAC,KAAK,CAAC,CAAC,cAAM,OAAA,CAAC;IAC3C,GAAG,EAAE;QACH,qBAAqB,EAAE,eAAe;QACtC,4BAA4B,EAAE,QAAQ;QACtC,qBAAqB,EAAE,OAAO;QAC9B,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,EAP0C,CAO1C,CAAC,CAAC,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ObserveParams } from './observe';
|
|
3
|
+
import { observe } from './observe';
|
|
4
|
+
export { observe, ObserveParams };
|
|
5
|
+
/**
|
|
6
|
+
* AppearInViewport 参数定义
|
|
7
|
+
*/
|
|
8
|
+
export type AppearInViewportProps = ObserveParams;
|
|
9
|
+
export type AppearInViewportComponentProps = AppearInViewportProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
10
|
+
export declare const useAppearInViewport: <BE extends HTMLElement = HTMLElement>({ onAppear, advance, threshold, repeat, onDisAppear, IntersectionObserverClass, }: AppearInViewportProps) => {
|
|
11
|
+
updateBox: React.Dispatch<React.SetStateAction<BE | null>>;
|
|
12
|
+
box: BE | null;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* @class AppearInViewport
|
|
16
|
+
* 出现在页面中会自动响应(仅一次)
|
|
17
|
+
*
|
|
18
|
+
* @see AppearInViewportComponentProps
|
|
19
|
+
*/
|
|
20
|
+
export declare const AppearInViewport: React.ForwardRefExoticComponent<Pick<AppearInViewportComponentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | keyof ObserveParams> & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/appear-in-viewport/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC;AAElC;;GAEG;AAEH,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC;AAElD,MAAM,MAAM,8BAA8B,GAAG,qBAAqB,GAC9D,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC;AAElF,eAAO,MAAM,mBAAmB,GAAI,EAAE,SAAS,WAAW,GAAG,WAAW,EAAE,mFAOvE,qBAAqB;;;CAsCvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,uLAyB5B,CAAC"}
|
|
@@ -0,0 +1,125 @@
|
|
|
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.AppearInViewport = exports.useAppearInViewport = exports.observe = void 0;
|
|
59
|
+
var react_1 = __importStar(require("react"));
|
|
60
|
+
var observe_1 = require("./observe");
|
|
61
|
+
Object.defineProperty(exports, "observe", { enumerable: true, get: function () { return observe_1.observe; } });
|
|
62
|
+
var useAppearInViewport = function (_a) {
|
|
63
|
+
var onAppear = _a.onAppear, _b = _a.advance, advance = _b === void 0 ? 0 : _b, _c = _a.threshold, threshold = _c === void 0 ? 0 : _c, _d = _a.repeat, repeat = _d === void 0 ? false : _d, onDisAppear = _a.onDisAppear, IntersectionObserverClass = _a.IntersectionObserverClass;
|
|
64
|
+
var _e = (0, react_1.useState)(null), box = _e[0], updateBox = _e[1];
|
|
65
|
+
var onAppearRef = (0, react_1.useRef)(onAppear);
|
|
66
|
+
var onDisAppearRef = (0, react_1.useRef)(onDisAppear);
|
|
67
|
+
onAppearRef.current = onAppear;
|
|
68
|
+
onDisAppearRef.current = onDisAppear;
|
|
69
|
+
var repeatRef = (0, react_1.useRef)(repeat);
|
|
70
|
+
var advanceRef = (0, react_1.useRef)(advance);
|
|
71
|
+
var thresholdRef = (0, react_1.useRef)(threshold);
|
|
72
|
+
(0, react_1.useEffect)(function () {
|
|
73
|
+
var unobserve = function () { };
|
|
74
|
+
if (box) {
|
|
75
|
+
unobserve = (0, observe_1.observe)(box, {
|
|
76
|
+
onAppear: function (params) {
|
|
77
|
+
var _a;
|
|
78
|
+
(_a = onAppearRef.current) === null || _a === void 0 ? void 0 : _a.call(onAppearRef, params);
|
|
79
|
+
},
|
|
80
|
+
advance: advanceRef.current,
|
|
81
|
+
threshold: thresholdRef.current,
|
|
82
|
+
repeat: repeatRef.current,
|
|
83
|
+
onDisAppear: function (params) {
|
|
84
|
+
var _a;
|
|
85
|
+
(_a = onDisAppearRef.current) === null || _a === void 0 ? void 0 : _a.call(onDisAppearRef, params);
|
|
86
|
+
},
|
|
87
|
+
IntersectionObserverClass: IntersectionObserverClass,
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
return function () {
|
|
91
|
+
if (unobserve) {
|
|
92
|
+
unobserve();
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
}, [box, IntersectionObserverClass]);
|
|
96
|
+
return {
|
|
97
|
+
updateBox: updateBox,
|
|
98
|
+
box: box,
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
exports.useAppearInViewport = useAppearInViewport;
|
|
102
|
+
/**
|
|
103
|
+
* @class AppearInViewport
|
|
104
|
+
* 出现在页面中会自动响应(仅一次)
|
|
105
|
+
*
|
|
106
|
+
* @see AppearInViewportComponentProps
|
|
107
|
+
*/
|
|
108
|
+
exports.AppearInViewport = (0, react_1.forwardRef)(function (_a, ref) {
|
|
109
|
+
var onAppear = _a.onAppear, advance = _a.advance, threshold = _a.threshold, repeat = _a.repeat, onDisAppear = _a.onDisAppear, IntersectionObserverClass = _a.IntersectionObserverClass, otherDivProps = __rest(_a, ["onAppear", "advance", "threshold", "repeat", "onDisAppear", "IntersectionObserverClass"]);
|
|
110
|
+
var boxRef = (0, react_1.useRef)(null);
|
|
111
|
+
var updateBox = (0, exports.useAppearInViewport)({
|
|
112
|
+
onAppear: onAppear,
|
|
113
|
+
advance: advance,
|
|
114
|
+
threshold: threshold,
|
|
115
|
+
repeat: repeat,
|
|
116
|
+
onDisAppear: onDisAppear,
|
|
117
|
+
IntersectionObserverClass: IntersectionObserverClass,
|
|
118
|
+
}).updateBox;
|
|
119
|
+
(0, react_1.useImperativeHandle)(ref, function () { return boxRef.current; }, []);
|
|
120
|
+
(0, react_1.useEffect)(function () {
|
|
121
|
+
updateBox(boxRef.current);
|
|
122
|
+
}, [updateBox]);
|
|
123
|
+
return (react_1.default.createElement("div", __assign({ ref: boxRef }, otherDivProps)));
|
|
124
|
+
});
|
|
125
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/appear-in-viewport/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
type Entries = {
|
|
2
|
+
boundingClientRect: DOMRect;
|
|
3
|
+
intersectionRatio: number;
|
|
4
|
+
isIntersecting: boolean;
|
|
5
|
+
}[];
|
|
6
|
+
export interface ObserveParams {
|
|
7
|
+
/**
|
|
8
|
+
* 出现在页面的回调
|
|
9
|
+
*/
|
|
10
|
+
onAppear?: (params: {
|
|
11
|
+
entries: Entries;
|
|
12
|
+
/**
|
|
13
|
+
* 出现的时间戳
|
|
14
|
+
*/
|
|
15
|
+
appearTimestamp: number;
|
|
16
|
+
}) => void;
|
|
17
|
+
/**
|
|
18
|
+
* 组件移出视窗区域的回调
|
|
19
|
+
*/
|
|
20
|
+
onDisAppear?: (params: {
|
|
21
|
+
entries: Entries;
|
|
22
|
+
/**
|
|
23
|
+
* 出现的时间戳
|
|
24
|
+
*/
|
|
25
|
+
appearTimestamp: number;
|
|
26
|
+
/**
|
|
27
|
+
* 消失的时间戳
|
|
28
|
+
*/
|
|
29
|
+
disAppearTimestamp: number;
|
|
30
|
+
}) => void;
|
|
31
|
+
/**
|
|
32
|
+
* advance
|
|
33
|
+
*/
|
|
34
|
+
advance?: number | string;
|
|
35
|
+
/**
|
|
36
|
+
* from 0.0 to 1.0
|
|
37
|
+
*/
|
|
38
|
+
threshold?: number;
|
|
39
|
+
/**
|
|
40
|
+
* 是否允许重复触发
|
|
41
|
+
*/
|
|
42
|
+
repeat?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* IntersectionObserver 允许自定义设置 observer 类
|
|
45
|
+
* 默认使用 window.IntersectionObserver
|
|
46
|
+
*/
|
|
47
|
+
IntersectionObserverClass?: typeof IntersectionObserver;
|
|
48
|
+
}
|
|
49
|
+
export declare const observe: (box: HTMLElement, params: ObserveParams) => () => void;
|
|
50
|
+
export {};
|
|
51
|
+
//# sourceMappingURL=observe.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"observe.d.ts","sourceRoot":"","sources":["../../src/appear-in-viewport/observe.ts"],"names":[],"mappings":"AAAA,KAAK,OAAO,GAAG;IACb,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;CACzB,EAAE,CAAC;AAEJ,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB;;WAEG;QACH,eAAe,EAAE,MAAM,CAAC;KACzB,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QACrB,OAAO,EAAE,OAAO,CAAC;QACjB;;WAEG;QACH,eAAe,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,kBAAkB,EAAE,MAAM,CAAC;KAC5B,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,oBAAoB,CAAC;CACzD;AAED,eAAO,MAAM,OAAO,GAAI,KAAK,WAAW,EAAE,QAAQ,aAAa,eA2D9D,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.observe = void 0;
|
|
4
|
+
var observe = function (box, params) {
|
|
5
|
+
var onAppear = params.onAppear, _a = params.advance, advance = _a === void 0 ? 0 : _a, _b = params.threshold, threshold = _b === void 0 ? 0 : _b, _c = params.repeat, repeat = _c === void 0 ? false : _c, onDisAppear = params.onDisAppear;
|
|
6
|
+
var ObserverClass;
|
|
7
|
+
if (params.IntersectionObserverClass) {
|
|
8
|
+
ObserverClass = params.IntersectionObserverClass;
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
ObserverClass = IntersectionObserver;
|
|
12
|
+
}
|
|
13
|
+
var responsed = false;
|
|
14
|
+
var disappearResponse = false;
|
|
15
|
+
var appearState = 'disAppear';
|
|
16
|
+
var prevAppearTimestamp = 0;
|
|
17
|
+
var observer = new ObserverClass(function (entries) {
|
|
18
|
+
var shouldAppear = entries.some(function (entry) {
|
|
19
|
+
return entry && entry.intersectionRatio >= threshold && entry.isIntersecting;
|
|
20
|
+
});
|
|
21
|
+
if (shouldAppear) {
|
|
22
|
+
if ((repeat || !responsed) && appearState === 'disAppear') {
|
|
23
|
+
responsed = true;
|
|
24
|
+
prevAppearTimestamp = Date.now();
|
|
25
|
+
onAppear === null || onAppear === void 0 ? void 0 : onAppear({
|
|
26
|
+
entries: entries,
|
|
27
|
+
appearTimestamp: prevAppearTimestamp,
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
appearState = 'appear';
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
if ((repeat || !disappearResponse) && appearState === 'appear') {
|
|
34
|
+
disappearResponse = true;
|
|
35
|
+
onDisAppear === null || onDisAppear === void 0 ? void 0 : onDisAppear({
|
|
36
|
+
entries: entries,
|
|
37
|
+
appearTimestamp: prevAppearTimestamp,
|
|
38
|
+
disAppearTimestamp: Date.now(),
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
appearState = 'disAppear';
|
|
42
|
+
prevAppearTimestamp = 0;
|
|
43
|
+
}
|
|
44
|
+
if (!repeat && disappearResponse && appearState && box) {
|
|
45
|
+
observer.unobserve(box);
|
|
46
|
+
}
|
|
47
|
+
}, {
|
|
48
|
+
rootMargin: typeof advance === 'number' ? advance + 'px' : advance,
|
|
49
|
+
threshold: threshold,
|
|
50
|
+
});
|
|
51
|
+
// console.log('AppearInViewport', boxRef.current);
|
|
52
|
+
if (box) {
|
|
53
|
+
observer.observe(box);
|
|
54
|
+
}
|
|
55
|
+
return function () {
|
|
56
|
+
if (box) {
|
|
57
|
+
observer.unobserve(box);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
exports.observe = observe;
|
|
62
|
+
//# sourceMappingURL=observe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"observe.js","sourceRoot":"","sources":["../../src/appear-in-viewport/observe.ts"],"names":[],"mappings":";;;AAmDO,IAAM,OAAO,GAAG,UAAC,GAAgB,EAAE,MAAqB;IACrD,IAAA,QAAQ,GAA8D,MAAM,SAApE,EAAE,KAA4D,MAAM,QAAvD,EAAX,OAAO,mBAAG,CAAC,KAAA,EAAE,KAA+C,MAAM,UAAxC,EAAb,SAAS,mBAAG,CAAC,KAAA,EAAE,KAAgC,MAAM,OAAxB,EAAd,MAAM,mBAAG,KAAK,KAAA,EAAE,WAAW,GAAK,MAAM,YAAX,CAAY;IACrF,IAAI,aAA0C,CAAC;IAC/C,IAAI,MAAM,CAAC,yBAAyB,EAAE,CAAC;QACrC,aAAa,GAAG,MAAM,CAAC,yBAAyB,CAAC;IACnD,CAAC;SAAM,CAAC;QACN,aAAa,GAAG,oBAAoB,CAAC;IACvC,CAAC;IACD,IAAI,SAAS,GAAG,KAAK,CAAC;IACtB,IAAI,iBAAiB,GAAG,KAAK,CAAC;IAC9B,IAAI,WAAW,GAA2B,WAAW,CAAC;IACtD,IAAI,mBAAmB,GAAG,CAAC,CAAC;IAC5B,IAAM,QAAQ,GAAG,IAAI,aAAa,CAChC,UAAC,OAAO;QACN,IAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,UAAC,KAAK;YACtC,OAAO,KAAK,IAAI,KAAK,CAAC,iBAAiB,IAAI,SAAS,IAAI,KAAK,CAAC,cAAc,CAAC;QAC/E,CAAC,CAAC,CAAC;QACH,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,WAAW,KAAK,WAAW,EAAE,CAAC;gBAC1D,SAAS,GAAG,IAAI,CAAC;gBACjB,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;gBACjC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG;oBACT,OAAO,SAAA;oBACP,eAAe,EAAE,mBAAmB;iBACrC,CAAC,CAAC;YACL,CAAC;YACD,WAAW,GAAG,QAAQ,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;gBAC/D,iBAAiB,GAAG,IAAI,CAAC;gBACzB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG;oBACZ,OAAO,SAAA;oBACP,eAAe,EAAE,mBAAmB;oBACpC,kBAAkB,EAAE,IAAI,CAAC,GAAG,EAAE;iBAC/B,CAAC,CAAC;YACL,CAAC;YACD,WAAW,GAAG,WAAW,CAAC;YAC1B,mBAAmB,GAAG,CAAC,CAAC;QAC1B,CAAC;QACD,IAAI,CAAC,MAAM,IAAI,iBAAiB,IAAI,WAAW,IAAI,GAAG,EAAE,CAAC;YACvD,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EACD;QACE,UAAU,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO;QAClE,SAAS,WAAA;KACV,CACF,CAAC;IAEF,mDAAmD;IACnD,IAAI,GAAG,EAAE,CAAC;QACR,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,OAAO;QACL,IAAI,GAAG,EAAE,CAAC;YACR,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;AACJ,CAAC,CAAC;AA3DW,QAAA,OAAO,WA2DlB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ClickAwayListenerProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
3
|
+
onClickAway: (event: MouseEvent | TouchEvent) => void;
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
trigger?: 'click' | 'touchstart';
|
|
6
|
+
}
|
|
7
|
+
export declare const checkInBox: (element: HTMLElement, box: HTMLElement, limitParent?: HTMLElement) => boolean;
|
|
8
|
+
/**
|
|
9
|
+
* 它处点击器,通过冒泡实现
|
|
10
|
+
* @param props.onClickAway - 点击其他地方时的回调
|
|
11
|
+
*/
|
|
12
|
+
export declare const ClickAwayListener: React.ForwardRefExoticComponent<Pick<ClickAwayListenerProps, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "title" | "slot" | "hidden" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "onClickAway" | "trigger"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-away-listener/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACrF,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GACrB,SAAS,WAAW,EACpB,KAAK,WAAW,EAChB,cAAa,WAA2B,KACvC,OAWF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,unJAuC7B,CAAC"}
|
|
@@ -0,0 +1,108 @@
|
|
|
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.ClickAwayListener = exports.checkInBox = void 0;
|
|
59
|
+
var react_1 = __importStar(require("react"));
|
|
60
|
+
var checkInBox = function (element, box, limitParent) {
|
|
61
|
+
if (limitParent === void 0) { limitParent = document.body; }
|
|
62
|
+
if (element === box) {
|
|
63
|
+
return true;
|
|
64
|
+
}
|
|
65
|
+
if (element === limitParent) {
|
|
66
|
+
return false;
|
|
67
|
+
}
|
|
68
|
+
if (element.parentElement) {
|
|
69
|
+
return (0, exports.checkInBox)(element.parentElement, box, limitParent);
|
|
70
|
+
}
|
|
71
|
+
return false;
|
|
72
|
+
};
|
|
73
|
+
exports.checkInBox = checkInBox;
|
|
74
|
+
/**
|
|
75
|
+
* 它处点击器,通过冒泡实现
|
|
76
|
+
* @param props.onClickAway - 点击其他地方时的回调
|
|
77
|
+
*/
|
|
78
|
+
exports.ClickAwayListener = (0, react_1.forwardRef)(function (_a, ref) {
|
|
79
|
+
var onClickAway = _a.onClickAway, children = _a.children, _b = _a.trigger, trigger = _b === void 0 ? 'click' : _b, divProps = __rest(_a, ["onClickAway", "children", "trigger"]);
|
|
80
|
+
var boxRef = (0, react_1.useRef)(null);
|
|
81
|
+
var onClickAwayRef = (0, react_1.useRef)(onClickAway);
|
|
82
|
+
onClickAwayRef.current = onClickAway;
|
|
83
|
+
(0, react_1.useEffect)(function () {
|
|
84
|
+
var listenedParent = document.documentElement;
|
|
85
|
+
var listener = function (event) {
|
|
86
|
+
var target = event.target;
|
|
87
|
+
if (boxRef.current && target && !(0, exports.checkInBox)(target, boxRef.current, listenedParent)) {
|
|
88
|
+
onClickAwayRef.current(event);
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
listenedParent.addEventListener(trigger, listener, false);
|
|
92
|
+
return function () {
|
|
93
|
+
listenedParent.removeEventListener(trigger, listener);
|
|
94
|
+
};
|
|
95
|
+
}, [trigger]);
|
|
96
|
+
return (react_1.default.createElement("div", __assign({}, divProps, { ref: function (divElement) {
|
|
97
|
+
boxRef.current = divElement;
|
|
98
|
+
if (ref) {
|
|
99
|
+
if (typeof ref === 'function') {
|
|
100
|
+
ref(divElement);
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
ref.current = divElement;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
} }), children));
|
|
107
|
+
});
|
|
108
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/click-away-listener/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6D;AAUtD,IAAM,UAAU,GAAG,UACxB,OAAoB,EACpB,GAAgB,EAChB,WAAwC;IAAxC,4BAAA,EAAA,cAA2B,QAAQ,CAAC,IAAI;IAExC,IAAI,OAAO,KAAK,GAAG,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,OAAO,KAAK,WAAW,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,OAAO,CAAC,aAAa,EAAE,CAAC;QAC1B,OAAO,IAAA,kBAAU,EAAC,OAAO,CAAC,aAAa,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC;IAC7D,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAfW,QAAA,UAAU,cAerB;AAEF;;;GAGG;AACU,QAAA,iBAAiB,GAAG,IAAA,kBAAU,EACzC,UAAC,EAAyD,EAAE,GAAG;IAA5D,IAAA,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,eAAiB,EAAjB,OAAO,mBAAG,OAAO,KAAA,EAAK,QAAQ,cAAvD,sCAAyD,CAAF;IACtD,IAAM,MAAM,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACnD,IAAM,cAAc,GAAG,IAAA,cAAM,EAAC,WAAW,CAAC,CAAC;IAC3C,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;IAErC,IAAA,iBAAS,EAAC;QACR,IAAM,cAAc,GAAG,QAAQ,CAAC,eAAe,CAAC;QAChD,IAAM,QAAQ,GAAG,UAAC,KAA8B;YAC9C,IAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC3C,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,IAAI,CAAC,IAAA,kBAAU,EAAC,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC;gBACpF,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QAEF,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC1D,OAAO;YACL,cAAc,CAAC,mBAAmB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,kDACM,QAAQ,IACZ,GAAG,EAAE,UAAC,UAAU;YACd,MAAM,CAAC,OAAO,GAAG,UAAU,CAAC;YAC5B,IAAI,GAAG,EAAE,CAAC;gBACR,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;oBAC9B,GAAG,CAAC,UAAU,CAAC,CAAC;gBAClB,CAAC;qBAAM,CAAC;oBACL,GAAW,CAAC,OAAO,GAAG,UAAU,CAAC;gBACpC,CAAC;YACH,CAAC;QACH,CAAC,KAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/create-render-to-body/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/create-render-to-body/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,UAAU,eAAe,CAAC,CAAC;IACzB,CACE,KAAK,EAAE,CAAC,EACR,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,GACA,KAAK,CAAC,YAAY,CAAC;CACvB;AAwBD,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,IAErE,iBAAiB,CAAC,EAClB,SAAQ;IACN,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;;4BAyByB,CAAC;EA0BnC;AAED,wBAAgB,4BAA4B,CAAC,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;;mBAIpE,WAAW,GAAG,IAAI;+BAEN,IAAI,GAAG,UAAU;8BA7DpB,WAAW;+BACX,IAAI;;;;UA4DwC;;;;;;;;;;;;;;;;;;;;;;;;;;mBAFrD,WAAW,GAAG,IAAI;+BAEN,IAAI,GAAG,UAAU;8BA7DpB,WAAW;+BACX,IAAI;;;;UA4DwC;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCnE"}
|
|
@@ -58,9 +58,9 @@ var ParentView = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
58
58
|
(0, react_1.useImperativeHandle)(ref, function () { return ({
|
|
59
59
|
updateProps: function (newProps) {
|
|
60
60
|
setComponentProps(newProps);
|
|
61
|
-
}
|
|
61
|
+
},
|
|
62
62
|
}); });
|
|
63
|
-
return
|
|
63
|
+
return react_1.default.createElement(react_1.default.Fragment, null, componentRender(componentProps, componentRenderOptions));
|
|
64
64
|
});
|
|
65
65
|
function createRenderToBody(componentRender) {
|
|
66
66
|
return function (initializeProps, params) {
|
|
@@ -73,6 +73,7 @@ function createRenderToBody(componentRender) {
|
|
|
73
73
|
else {
|
|
74
74
|
var parentContainer = document.body;
|
|
75
75
|
container = document.createElement('div');
|
|
76
|
+
container.classList.add('lofter-root-container');
|
|
76
77
|
parentContainer.appendChild(container);
|
|
77
78
|
}
|
|
78
79
|
var destroy = function () {
|
|
@@ -94,12 +95,14 @@ function createRenderToBody(componentRender) {
|
|
|
94
95
|
parentViewRef.updateProps(newProps);
|
|
95
96
|
}
|
|
96
97
|
};
|
|
97
|
-
(0, react_dom_1.render)(
|
|
98
|
-
|
|
99
|
-
}
|
|
98
|
+
(0, react_dom_1.render)(react_1.default.createElement(ParentView, { ref: function (ref) {
|
|
99
|
+
parentViewRef = ref;
|
|
100
|
+
}, componentRender: componentRender, initializeProps: initializeProps, componentRenderOptions: {
|
|
101
|
+
destroy: destroy,
|
|
102
|
+
} }), container);
|
|
100
103
|
return {
|
|
101
104
|
destroy: destroy,
|
|
102
|
-
updateProps: updateProps
|
|
105
|
+
updateProps: updateProps,
|
|
103
106
|
};
|
|
104
107
|
};
|
|
105
108
|
}
|
|
@@ -116,7 +119,7 @@ function createRenderToClassComponent(componentRender) {
|
|
|
116
119
|
ToFunctionComponent.prototype.componentDidMount = function () {
|
|
117
120
|
if (this.container) {
|
|
118
121
|
this.appendComponentResult = appendComponent(this.props, {
|
|
119
|
-
parentContainer: this.container
|
|
122
|
+
parentContainer: this.container,
|
|
120
123
|
});
|
|
121
124
|
}
|
|
122
125
|
};
|
|
@@ -137,7 +140,7 @@ function createRenderToClassComponent(componentRender) {
|
|
|
137
140
|
height: '100%',
|
|
138
141
|
display: 'flex',
|
|
139
142
|
flexDirection: 'column',
|
|
140
|
-
flex: '1 1 auto'
|
|
143
|
+
flex: '1 1 auto',
|
|
141
144
|
}, ref: function (container) {
|
|
142
145
|
_this.container = container;
|
|
143
146
|
} }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/create-render-to-body/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/create-render-to-body/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface WaterfallProps<T = any> {
|
|
3
|
+
/** 瀑布流数据列表 */
|
|
4
|
+
items: T[];
|
|
5
|
+
/** 自定义渲染每个item的函数 */
|
|
6
|
+
renderItem: (item: T, index: number) => React.ReactNode;
|
|
7
|
+
breakpointCols?: number;
|
|
8
|
+
/** 列间距 */
|
|
9
|
+
columnGap?: string;
|
|
10
|
+
/** 自定义容器className */
|
|
11
|
+
className?: string;
|
|
12
|
+
/** 自定义列className */
|
|
13
|
+
columnClassName?: string;
|
|
14
|
+
/** 获取item的唯一key,用于优化渲染性能 */
|
|
15
|
+
getItemKey?: (item: T, index: number) => string | number;
|
|
16
|
+
/** 是否启用虚拟滚动 */
|
|
17
|
+
enableVirtualScroll?: boolean;
|
|
18
|
+
/** 虚拟滚动缓冲区高度(屏幕高度的倍数,上下各一个缓冲区) */
|
|
19
|
+
overscanCount?: number;
|
|
20
|
+
}
|
|
21
|
+
export declare const Waterfall: ({ items, renderItem, breakpointCols, columnGap, className, columnClassName, enableVirtualScroll, overscanCount, }: WaterfallProps) => JSX.Element;
|
|
22
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/waterfall/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAM9E,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACrC,cAAc;IACd,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,qBAAqB;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACzD,eAAe;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuDD,eAAO,MAAM,SAAS,GAAI,mHASvB,cAAc,gBAwThB,CAAC"}
|
|
@@ -0,0 +1,318 @@
|
|
|
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
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
36
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
37
|
+
if (ar || !(i in from)) {
|
|
38
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
39
|
+
ar[i] = from[i];
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
43
|
+
};
|
|
44
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
45
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
46
|
+
};
|
|
47
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
48
|
+
exports.Waterfall = void 0;
|
|
49
|
+
var react_1 = __importStar(require("react"));
|
|
50
|
+
var merge_classnames_1 = require("@lofter-common-shared/utils/merge-classnames");
|
|
51
|
+
var index_style_1 = __importDefault(require("./index.style"));
|
|
52
|
+
// 瀑布流项组件 - 使用 memo 避免不必要的重新渲染
|
|
53
|
+
var WaterfallItem = (0, react_1.memo)(function (_a) {
|
|
54
|
+
var item = _a.item, index = _a.index, renderItem = _a.renderItem, _b = _a.isNew, isNew = _b === void 0 ? false : _b, onMount = _a.onMount, _c = _a.isVisible, isVisible = _c === void 0 ? true : _c, height = _a.height;
|
|
55
|
+
var itemRef = (0, react_1.useCallback)(function (el) {
|
|
56
|
+
if (el && onMount) {
|
|
57
|
+
onMount(index, el);
|
|
58
|
+
}
|
|
59
|
+
}, [index, onMount]);
|
|
60
|
+
// 如果不可见且有已知高度,渲染占位符
|
|
61
|
+
if (!isVisible && height) {
|
|
62
|
+
return (react_1.default.createElement("div", { className: index_style_1.default.waterfallItemPlaceholder, style: {
|
|
63
|
+
height: "".concat(height, "px"),
|
|
64
|
+
} }));
|
|
65
|
+
}
|
|
66
|
+
return (react_1.default.createElement("div", { ref: itemRef, className: (0, merge_classnames_1.mergeClassNames)(index_style_1.default.waterfallItem, isNew && index_style_1.default.waterfallItemNew) }, renderItem(item, index)));
|
|
67
|
+
}, function (prevProps, nextProps) {
|
|
68
|
+
// 只有在 item 引用改变或 isNew 状态改变或可见性改变时才重新渲染
|
|
69
|
+
return (prevProps.item === nextProps.item
|
|
70
|
+
&& prevProps.index === nextProps.index
|
|
71
|
+
&& prevProps.isNew === nextProps.isNew
|
|
72
|
+
&& prevProps.isVisible === nextProps.isVisible
|
|
73
|
+
&& prevProps.height === nextProps.height);
|
|
74
|
+
});
|
|
75
|
+
var Waterfall = function (_a) {
|
|
76
|
+
var items = _a.items, renderItem = _a.renderItem, _b = _a.breakpointCols, breakpointCols = _b === void 0 ? 2 : _b, _c = _a.columnGap, columnGap = _c === void 0 ? '0rem' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.columnClassName, columnClassName = _e === void 0 ? '' : _e, _f = _a.enableVirtualScroll, enableVirtualScroll = _f === void 0 ? false : _f, _g = _a.overscanCount, overscanCount = _g === void 0 ? 1 : _g;
|
|
77
|
+
var _h = (0, react_1.useState)(new Array(breakpointCols).fill(null).map(function () { return []; })), columnItems = _h[0], setColumnItems = _h[1];
|
|
78
|
+
var columnsHeightRef = (0, react_1.useRef)(new Array(breakpointCols).fill(0));
|
|
79
|
+
var prevItemsLengthRef = (0, react_1.useRef)(0);
|
|
80
|
+
var prevBreakpointColsRef = (0, react_1.useRef)(breakpointCols);
|
|
81
|
+
var newItemsSetRef = (0, react_1.useRef)(new Set());
|
|
82
|
+
var itemHeightsRef = (0, react_1.useRef)(new Map());
|
|
83
|
+
var itemPositionsRef = (0, react_1.useRef)(new Map());
|
|
84
|
+
var resizeObserverRef = (0, react_1.useRef)(null);
|
|
85
|
+
var prevItemsRef = (0, react_1.useRef)(items);
|
|
86
|
+
var containerRef = (0, react_1.useRef)(null);
|
|
87
|
+
var _j = (0, react_1.useState)(new Set()), visibleItems = _j[0], setVisibleItems = _j[1];
|
|
88
|
+
var scrollListenerRef = (0, react_1.useRef)(null);
|
|
89
|
+
// 重置列数变化
|
|
90
|
+
(0, react_1.useEffect)(function () {
|
|
91
|
+
if (prevBreakpointColsRef.current !== breakpointCols) {
|
|
92
|
+
columnsHeightRef.current = new Array(breakpointCols).fill(0);
|
|
93
|
+
setColumnItems(new Array(breakpointCols).fill(null).map(function () { return []; }));
|
|
94
|
+
prevItemsLengthRef.current = 0;
|
|
95
|
+
prevBreakpointColsRef.current = breakpointCols;
|
|
96
|
+
newItemsSetRef.current.clear();
|
|
97
|
+
itemHeightsRef.current.clear();
|
|
98
|
+
}
|
|
99
|
+
}, [breakpointCols]);
|
|
100
|
+
// 计算可见的item
|
|
101
|
+
var updateVisibleItems = (0, react_1.useCallback)(function () {
|
|
102
|
+
if (!enableVirtualScroll || !containerRef.current) {
|
|
103
|
+
// 如果未启用虚拟滚动,所有item都可见
|
|
104
|
+
setVisibleItems(new Set(items.map(function (_, idx) { return idx; })));
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
var container = containerRef.current;
|
|
108
|
+
var containerRect = container.getBoundingClientRect();
|
|
109
|
+
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
110
|
+
var containerTop = containerRect.top + scrollTop;
|
|
111
|
+
// 计算可视区域(带缓冲区)
|
|
112
|
+
var viewportHeight = window.innerHeight;
|
|
113
|
+
var bufferHeight = viewportHeight * overscanCount;
|
|
114
|
+
var visibleTop = scrollTop - bufferHeight;
|
|
115
|
+
var visibleBottom = scrollTop + viewportHeight + bufferHeight;
|
|
116
|
+
var visible = new Set();
|
|
117
|
+
// 遍历所有item,判断是否在可视区域内
|
|
118
|
+
itemPositionsRef.current.forEach(function (position, itemIndex) {
|
|
119
|
+
var itemTop = containerTop + position.top;
|
|
120
|
+
var itemBottom = itemTop + position.height;
|
|
121
|
+
// item的任意部分在可视区域内就渲染
|
|
122
|
+
if (itemBottom >= visibleTop && itemTop <= visibleBottom) {
|
|
123
|
+
visible.add(itemIndex);
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
setVisibleItems(visible);
|
|
127
|
+
}, [enableVirtualScroll, items, overscanCount]);
|
|
128
|
+
// 处理新元素挂载,使用 ResizeObserver 监听实际高度
|
|
129
|
+
var handleItemMount = (0, react_1.useCallback)(function (index, element) {
|
|
130
|
+
if (!resizeObserverRef.current) {
|
|
131
|
+
resizeObserverRef.current = new ResizeObserver(function (entries) {
|
|
132
|
+
var shouldUpdateVisible = false;
|
|
133
|
+
var _loop_1 = function (entry) {
|
|
134
|
+
var target = entry.target;
|
|
135
|
+
var itemIndex = parseInt(target.getAttribute('data-index') || '0', 10);
|
|
136
|
+
var height = entry.contentRect.height;
|
|
137
|
+
if (height === 0)
|
|
138
|
+
return "continue"; // 跳过高度为0的情况
|
|
139
|
+
var prevHeight = itemHeightsRef.current.get(itemIndex);
|
|
140
|
+
// 记录实际高度,用于后续新增item时更准确地估算
|
|
141
|
+
if (!prevHeight || Math.abs(prevHeight - height) > 5) {
|
|
142
|
+
itemHeightsRef.current.set(itemIndex, height);
|
|
143
|
+
// 更新对应列的实际高度
|
|
144
|
+
setColumnItems(function (prev) {
|
|
145
|
+
// 找到该item所在的列
|
|
146
|
+
var targetColIndex = -1;
|
|
147
|
+
for (var colIndex = 0; colIndex < prev.length; colIndex++) {
|
|
148
|
+
if (prev[colIndex].includes(itemIndex)) {
|
|
149
|
+
targetColIndex = colIndex;
|
|
150
|
+
break;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
if (targetColIndex !== -1) {
|
|
154
|
+
// 重新计算该列的总高度
|
|
155
|
+
var colHeight = 0;
|
|
156
|
+
for (var _i = 0, _a = prev[targetColIndex]; _i < _a.length; _i++) {
|
|
157
|
+
var idx = _a[_i];
|
|
158
|
+
var itemHeight = itemHeightsRef.current.get(idx) || 0;
|
|
159
|
+
colHeight += itemHeight;
|
|
160
|
+
}
|
|
161
|
+
columnsHeightRef.current[targetColIndex] = colHeight;
|
|
162
|
+
// 更新item位置信息
|
|
163
|
+
var currentTop = 0;
|
|
164
|
+
for (var _b = 0, _c = prev[targetColIndex]; _b < _c.length; _b++) {
|
|
165
|
+
var idx = _c[_b];
|
|
166
|
+
var itemHeight = itemHeightsRef.current.get(idx) || 0;
|
|
167
|
+
itemPositionsRef.current.set(idx, {
|
|
168
|
+
top: currentTop,
|
|
169
|
+
height: itemHeight,
|
|
170
|
+
columnIndex: targetColIndex,
|
|
171
|
+
});
|
|
172
|
+
currentTop += itemHeight;
|
|
173
|
+
}
|
|
174
|
+
shouldUpdateVisible = true;
|
|
175
|
+
}
|
|
176
|
+
return prev;
|
|
177
|
+
});
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
|
|
181
|
+
var entry = entries_1[_i];
|
|
182
|
+
_loop_1(entry);
|
|
183
|
+
}
|
|
184
|
+
// 如果有位置更新,重新计算可见项
|
|
185
|
+
if (shouldUpdateVisible && enableVirtualScroll) {
|
|
186
|
+
updateVisibleItems();
|
|
187
|
+
}
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
element.setAttribute('data-index', index.toString());
|
|
191
|
+
resizeObserverRef.current.observe(element);
|
|
192
|
+
}, [enableVirtualScroll, updateVisibleItems]);
|
|
193
|
+
// 处理新增元素或数据完全替换
|
|
194
|
+
(0, react_1.useEffect)(function () {
|
|
195
|
+
var prevLength = prevItemsLengthRef.current;
|
|
196
|
+
var prevItems = prevItemsRef.current;
|
|
197
|
+
// 检测数据是否完全变化(tab切换等场景)
|
|
198
|
+
// 如果长度减少,或者第一个元素变了,说明是数据替换而非追加
|
|
199
|
+
var isDataReplaced = items.length < prevLength || (items.length > 0 && prevItems.length > 0 && items[0] !== prevItems[0]);
|
|
200
|
+
// 如果是数据替换,重置所有状态
|
|
201
|
+
if (isDataReplaced) {
|
|
202
|
+
columnsHeightRef.current = new Array(breakpointCols).fill(0);
|
|
203
|
+
itemHeightsRef.current.clear();
|
|
204
|
+
newItemsSetRef.current.clear();
|
|
205
|
+
prevItemsLengthRef.current = 0;
|
|
206
|
+
prevItemsRef.current = items;
|
|
207
|
+
// 重新分配所有元素 - 轮询分配到各列
|
|
208
|
+
setColumnItems(function () {
|
|
209
|
+
var updated = Array.from({ length: breakpointCols }, function () { return []; });
|
|
210
|
+
for (var i = 0; i < items.length; i++) {
|
|
211
|
+
var colIndex = i % breakpointCols;
|
|
212
|
+
updated[colIndex].push(i);
|
|
213
|
+
}
|
|
214
|
+
columnsHeightRef.current = new Array(breakpointCols).fill(0);
|
|
215
|
+
prevItemsLengthRef.current = items.length;
|
|
216
|
+
return updated;
|
|
217
|
+
});
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
220
|
+
// 如果是追加数据(增量列表)
|
|
221
|
+
if (items.length <= prevLength)
|
|
222
|
+
return;
|
|
223
|
+
prevItemsRef.current = items;
|
|
224
|
+
// 标记新元素用于动画
|
|
225
|
+
var newItemsSet = new Set();
|
|
226
|
+
for (var i = prevLength; i < items.length; i++) {
|
|
227
|
+
newItemsSet.add(i);
|
|
228
|
+
}
|
|
229
|
+
newItemsSetRef.current = newItemsSet;
|
|
230
|
+
// 增量添加:只处理新增的item,加入到最短的列
|
|
231
|
+
setColumnItems(function (prev) {
|
|
232
|
+
var updated = prev.map(function (col) { return __spreadArray([], col, true); });
|
|
233
|
+
var columnHeights = __spreadArray([], columnsHeightRef.current, true);
|
|
234
|
+
for (var i = prevLength; i < items.length; i++) {
|
|
235
|
+
// 找到当前最短的列
|
|
236
|
+
var minHeight = Math.min.apply(Math, columnHeights);
|
|
237
|
+
var columnIndex = columnHeights.indexOf(minHeight);
|
|
238
|
+
// 分配到最短的列
|
|
239
|
+
updated[columnIndex].push(i);
|
|
240
|
+
// 使用已知高度或估算高度(取最近几个item的平均高度)
|
|
241
|
+
var estimatedHeight = 300; // 默认估算高度
|
|
242
|
+
if (itemHeightsRef.current.size > 0) {
|
|
243
|
+
// 取最近10个item的平均高度作为估算
|
|
244
|
+
var recentHeights = Array.from(itemHeightsRef.current.values()).slice(-10);
|
|
245
|
+
var avgHeight = recentHeights.reduce(function (sum, h) { return sum + h; }, 0) / recentHeights.length;
|
|
246
|
+
estimatedHeight = avgHeight;
|
|
247
|
+
}
|
|
248
|
+
var height = itemHeightsRef.current.get(i) || estimatedHeight;
|
|
249
|
+
columnHeights[columnIndex] += height;
|
|
250
|
+
}
|
|
251
|
+
columnsHeightRef.current = columnHeights;
|
|
252
|
+
return updated;
|
|
253
|
+
});
|
|
254
|
+
prevItemsLengthRef.current = items.length;
|
|
255
|
+
// 清除新元素标记(动画播放后)
|
|
256
|
+
var timer = setTimeout(function () {
|
|
257
|
+
newItemsSetRef.current.clear();
|
|
258
|
+
}, 400);
|
|
259
|
+
return function () { return clearTimeout(timer); };
|
|
260
|
+
}, [items, breakpointCols]);
|
|
261
|
+
// 设置滚动监听
|
|
262
|
+
(0, react_1.useEffect)(function () {
|
|
263
|
+
if (!enableVirtualScroll) {
|
|
264
|
+
// 如果未启用虚拟滚动,所有item都可见
|
|
265
|
+
setVisibleItems(new Set(items.map(function (_, idx) { return idx; })));
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
// 初始计算可见项
|
|
269
|
+
updateVisibleItems();
|
|
270
|
+
// 使用节流优化滚动性能
|
|
271
|
+
var rafId = null;
|
|
272
|
+
var isScheduled = false;
|
|
273
|
+
var handleScroll = function () {
|
|
274
|
+
if (!isScheduled) {
|
|
275
|
+
isScheduled = true;
|
|
276
|
+
rafId = requestAnimationFrame(function () {
|
|
277
|
+
updateVisibleItems();
|
|
278
|
+
isScheduled = false;
|
|
279
|
+
});
|
|
280
|
+
}
|
|
281
|
+
};
|
|
282
|
+
// 监听滚动事件
|
|
283
|
+
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
284
|
+
window.addEventListener('resize', handleScroll, { passive: true });
|
|
285
|
+
scrollListenerRef.current = handleScroll;
|
|
286
|
+
return function () {
|
|
287
|
+
window.removeEventListener('scroll', handleScroll);
|
|
288
|
+
window.removeEventListener('resize', handleScroll);
|
|
289
|
+
if (rafId !== null) {
|
|
290
|
+
cancelAnimationFrame(rafId);
|
|
291
|
+
}
|
|
292
|
+
scrollListenerRef.current = null;
|
|
293
|
+
};
|
|
294
|
+
}, [enableVirtualScroll, items, updateVisibleItems]);
|
|
295
|
+
// 清理 ResizeObserver
|
|
296
|
+
(0, react_1.useEffect)(function () {
|
|
297
|
+
return function () {
|
|
298
|
+
if (resizeObserverRef.current) {
|
|
299
|
+
resizeObserverRef.current.disconnect();
|
|
300
|
+
resizeObserverRef.current = null;
|
|
301
|
+
}
|
|
302
|
+
};
|
|
303
|
+
}, []);
|
|
304
|
+
return (react_1.default.createElement("div", { ref: containerRef, className: (0, merge_classnames_1.mergeClassNames)(index_style_1.default.waterfallContainer, className), style: {
|
|
305
|
+
'--column-gap': columnGap,
|
|
306
|
+
} },
|
|
307
|
+
react_1.default.createElement("div", { className: index_style_1.default.waterfallMasonry }, columnItems.map(function (columnItemIndices, columnIndex) { return (react_1.default.createElement("div", { key: columnIndex, className: (0, merge_classnames_1.mergeClassNames)(index_style_1.default.waterfallMasonryColumn, columnClassName) }, columnItemIndices.map(function (itemIndex) {
|
|
308
|
+
var item = items[itemIndex];
|
|
309
|
+
if (!item)
|
|
310
|
+
return null; // 防止访问不存在的item
|
|
311
|
+
var isNew = newItemsSetRef.current.has(itemIndex);
|
|
312
|
+
var isVisible = !enableVirtualScroll || visibleItems.has(itemIndex);
|
|
313
|
+
var height = itemHeightsRef.current.get(itemIndex);
|
|
314
|
+
return (react_1.default.createElement(WaterfallItem, { key: itemIndex, item: item, index: itemIndex, renderItem: renderItem, isNew: isNew, onMount: handleItemMount, isVisible: isVisible, height: height }));
|
|
315
|
+
}))); }))));
|
|
316
|
+
};
|
|
317
|
+
exports.Waterfall = Waterfall;
|
|
318
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/waterfall/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const waterfallItemNewKeyFrames: string;
|
|
2
|
+
declare const _default: {
|
|
3
|
+
waterfallContainer: string;
|
|
4
|
+
waterfallMasonry: string;
|
|
5
|
+
waterfallMasonryColumn: string;
|
|
6
|
+
waterfallItem: string;
|
|
7
|
+
waterfallItemNew: string;
|
|
8
|
+
waterfallItemPlaceholder: string;
|
|
9
|
+
};
|
|
10
|
+
export default _default;
|
|
11
|
+
//# sourceMappingURL=index.style.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.style.d.ts","sourceRoot":"","sources":["../../src/waterfall/index.style.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,yBAAyB,QAOpC,CAAC;;;;;;;;;AAEH,wBAgCuB"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.waterfallItemNewKeyFrames = void 0;
|
|
4
|
+
var css_in_js_1 = require("@lofter-common-shared/css-in-js");
|
|
5
|
+
var theme = new css_in_js_1.Theme({
|
|
6
|
+
name: 'waterfall',
|
|
7
|
+
namespace: 'lofter-waterfall',
|
|
8
|
+
});
|
|
9
|
+
exports.waterfallItemNewKeyFrames = (0, css_in_js_1.createKeyFrames)({
|
|
10
|
+
from: {
|
|
11
|
+
opacity: 0,
|
|
12
|
+
},
|
|
13
|
+
to: {
|
|
14
|
+
opacity: 1,
|
|
15
|
+
},
|
|
16
|
+
});
|
|
17
|
+
exports.default = (0, css_in_js_1.createThemStyle)(theme)(function () { return ({
|
|
18
|
+
waterfallContainer: {
|
|
19
|
+
width: '100%',
|
|
20
|
+
position: 'relative',
|
|
21
|
+
contain: 'content',
|
|
22
|
+
},
|
|
23
|
+
waterfallMasonry: {
|
|
24
|
+
display: 'flex',
|
|
25
|
+
width: '100%',
|
|
26
|
+
},
|
|
27
|
+
waterfallMasonryColumn: {
|
|
28
|
+
flex: 1,
|
|
29
|
+
display: 'flex',
|
|
30
|
+
flexDirection: 'column',
|
|
31
|
+
backgroundClip: 'padding-box',
|
|
32
|
+
paddingRight: 'var(--column-gap, 0rem)',
|
|
33
|
+
'&:last-child': {
|
|
34
|
+
paddingRight: 0,
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
waterfallItem: {
|
|
38
|
+
width: '100%',
|
|
39
|
+
breakInside: 'avoid',
|
|
40
|
+
pageBreakInside: 'avoid',
|
|
41
|
+
position: 'relative',
|
|
42
|
+
},
|
|
43
|
+
waterfallItemNew: {
|
|
44
|
+
animation: "".concat(exports.waterfallItemNewKeyFrames, " 0.3s ease-in-out"),
|
|
45
|
+
},
|
|
46
|
+
waterfallItemPlaceholder: {
|
|
47
|
+
width: '100%',
|
|
48
|
+
},
|
|
49
|
+
}); }).createClassNames();
|
|
50
|
+
//# sourceMappingURL=index.style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.style.js","sourceRoot":"","sources":["../../src/waterfall/index.style.ts"],"names":[],"mappings":";;;AAAA,6DAA0F;AAE1F,IAAM,KAAK,GAAG,IAAI,iBAAK,CAAC;IACtB,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,kBAAkB;CAC9B,CAAC,CAAC;AAEU,QAAA,yBAAyB,GAAG,IAAA,2BAAe,EAAC;IACvD,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC;AAEH,kBAAe,IAAA,2BAAe,EAAC,KAAK,CAAC,CAAC,cAAM,OAAA,CAAC;IAC3C,kBAAkB,EAAE;QAClB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,SAAS;KACnB;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;KACd;IACD,sBAAsB,EAAE;QACtB,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,aAAa;QAC7B,YAAY,EAAE,yBAAyB;QACvC,cAAc,EAAE;YACd,YAAY,EAAE,CAAC;SAChB;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,OAAO;QACpB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,UAAU;KACrB;IACD,gBAAgB,EAAE;QAChB,SAAS,EAAE,UAAG,iCAAyB,sBAAmB;KAC3D;IACD,wBAAwB,EAAE;QACxB,KAAK,EAAE,MAAM;KACd;CACF,CAAC,EAhC0C,CAgC1C,CAAC,CAAC,gBAAgB,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lofter-common-shared/react-components",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -9,7 +9,11 @@
|
|
|
9
9
|
"main": "./dist/index",
|
|
10
10
|
"exports": {
|
|
11
11
|
"./create-render-to-body": "./dist/create-render-to-body/index.js",
|
|
12
|
-
"./loading": "./dist/loading/index.js"
|
|
12
|
+
"./loading": "./dist/loading/index.js",
|
|
13
|
+
"./waterfall": "./dist/waterfall/index.js",
|
|
14
|
+
"./animation-size-view": "./dist/animation-size-view/index.js",
|
|
15
|
+
"./appear-in-viewport": "./dist/appear-in-viewport/index.js",
|
|
16
|
+
"./click-away-listener": "./dist/click-away-listener/index.js"
|
|
13
17
|
},
|
|
14
18
|
"publishConfig": {
|
|
15
19
|
"access": "public",
|
package/src/index.ts
DELETED