deepsea-components 5.12.7 → 5.13.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.
Files changed (14) hide show
  1. package/dist/components/ScrollMask.cjs +72 -0
  2. package/dist/components/ScrollMask.d.ts +12 -0
  3. package/dist/components/ScrollMask.js +28 -0
  4. package/dist/components/ScrollMask.module.cjs +58 -0
  5. package/dist/components/ScrollMask.module.js +24 -0
  6. package/dist/components/ScrollMask_module.css +72 -0
  7. package/dist/index.cjs +39 -30
  8. package/dist/index.d.ts +1 -0
  9. package/dist/index.js +1 -0
  10. package/package.json +1 -1
  11. package/src/components/ScrollMask.module.css +87 -0
  12. package/src/components/ScrollMask.tsx +68 -0
  13. package/src/index.ts +1 -0
  14. package/tsconfig.json +1 -1
package/dist/components/ScrollMask.cjs ADDED
@@ -0,0 +1,72 @@
1
+ "use strict";
2
+ var __webpack_require__ = {};
3
+ (()=>{
4
+ __webpack_require__.n = (module)=>{
5
+ var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
6
+ __webpack_require__.d(getter, {
7
+ a: getter
8
+ });
9
+ return getter;
10
+ };
11
+ })();
12
+ (()=>{
13
+ __webpack_require__.d = (exports1, definition)=>{
14
+ for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
15
+ enumerable: true,
16
+ get: definition[key]
17
+ });
18
+ };
19
+ })();
20
+ (()=>{
21
+ __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
22
+ })();
23
+ (()=>{
24
+ __webpack_require__.r = (exports1)=>{
25
+ if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
26
+ value: 'Module'
27
+ });
28
+ Object.defineProperty(exports1, '__esModule', {
29
+ value: true
30
+ });
31
+ };
32
+ })();
33
+ var __webpack_exports__ = {};
34
+ __webpack_require__.r(__webpack_exports__);
35
+ __webpack_require__.d(__webpack_exports__, {
36
+ ScrollMask: ()=>ScrollMask
37
+ });
38
+ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
39
+ const external_react_namespaceObject = require("react");
40
+ const external_deepsea_tools_namespaceObject = require("deepsea-tools");
41
+ const external_soda_hooks_namespaceObject = require("soda-hooks");
42
+ const external_ScrollMask_module_cjs_namespaceObject = require("./ScrollMask.module.cjs");
43
+ var external_ScrollMask_module_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_ScrollMask_module_cjs_namespaceObject);
44
+ const ScrollMask = ({ className, style, position = "top", size = 16, from = "rgba(0, 0, 0, 0.15)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{
45
+ const ref = (0, external_react_namespaceObject.useRef)(null);
46
+ const contentSize = (0, external_soda_hooks_namespaceObject.useSize)(ref);
47
+ const radius = (0, external_deepsea_tools_namespaceObject.isNonNullable)(contentSize) ? "top" === position || "bottom" === position ? (contentSize.width ** 2 / 4 + contentSize.height ** 2) / (2 * contentSize.height) : (contentSize.height ** 2 / 4 + contentSize.width ** 2) / (2 * contentSize.width) : void 0;
48
+ const clipPath = showRadian && (0, external_deepsea_tools_namespaceObject.isNonNullable)(radius) ? "top" === position ? `circle(${radius}px at 50% -${radius - contentSize.height}px)` : "bottom" === position ? `circle(${radius}px at 50% ${radius}px)` : "left" === position ? `circle(${radius}px at -${radius - contentSize.width} 50%)` : "right" === position ? `circle(${radius}px at ${radius}px 50%)` : "none" : "none";
49
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
50
+ className: (0, external_deepsea_tools_namespaceObject.clsx)(external_ScrollMask_module_cjs_default()["scroll-mask"], external_ScrollMask_module_cjs_default()[`${position}-scroll-mask`], className),
51
+ style: {
52
+ "--scroll-mask-size": `${size}px`,
53
+ "--scroll-mask-color-from": from,
54
+ "--scroll-mask-color-to": to,
55
+ "--scroll-mask-clip-path": clipPath,
56
+ ...style
57
+ },
58
+ ...rest,
59
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
60
+ ref: ref,
61
+ className: (0, external_deepsea_tools_namespaceObject.clsx)(external_ScrollMask_module_cjs_default()["scroll-mask-content"], external_ScrollMask_module_cjs_default()[`${position}-scroll-mask-content`], contentClassName),
62
+ style: contentStyle
63
+ })
64
+ });
65
+ };
66
+ exports.ScrollMask = __webpack_exports__.ScrollMask;
67
+ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
68
+ "ScrollMask"
69
+ ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
70
+ Object.defineProperty(exports, '__esModule', {
71
+ value: true
72
+ });
package/dist/components/ScrollMask.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { CSSProperties, ComponentProps, FC } from "react";
2
+ export type ScrollMaskPosition = "top" | "bottom" | "left" | "right";
3
+ export interface ScrollMaskProps extends Omit<ComponentProps<"div">, "children"> {
4
+ position?: ScrollMaskPosition;
5
+ size?: number;
6
+ from?: CSSProperties["color"];
7
+ to?: CSSProperties["color"];
8
+ contentClassName?: string;
9
+ contentStyle?: CSSProperties;
10
+ showRadian?: boolean;
11
+ }
12
+ export declare const ScrollMask: FC<ScrollMaskProps>;
package/dist/components/ScrollMask.js ADDED
@@ -0,0 +1,28 @@
1
+ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
+ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
3
+ import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
4
+ import * as __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__ from "soda-hooks";
5
+ import * as __WEBPACK_EXTERNAL_MODULE__ScrollMask_module_js_e15d4b28__ from "./ScrollMask.module.js";
6
+ const ScrollMask = ({ className, style, position = "top", size = 16, from = "rgba(0, 0, 0, 0.15)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{
7
+ const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
8
+ const contentSize = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(ref);
9
+ const radius = (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.isNonNullable)(contentSize) ? "top" === position || "bottom" === position ? (contentSize.width ** 2 / 4 + contentSize.height ** 2) / (2 * contentSize.height) : (contentSize.height ** 2 / 4 + contentSize.width ** 2) / (2 * contentSize.width) : void 0;
10
+ const clipPath = showRadian && (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.isNonNullable)(radius) ? "top" === position ? `circle(${radius}px at 50% -${radius - contentSize.height}px)` : "bottom" === position ? `circle(${radius}px at 50% ${radius}px)` : "left" === position ? `circle(${radius}px at -${radius - contentSize.width} 50%)` : "right" === position ? `circle(${radius}px at ${radius}px 50%)` : "none" : "none";
11
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
12
+ className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)(__WEBPACK_EXTERNAL_MODULE__ScrollMask_module_js_e15d4b28__["default"]["scroll-mask"], __WEBPACK_EXTERNAL_MODULE__ScrollMask_module_js_e15d4b28__["default"][`${position}-scroll-mask`], className),
13
+ style: {
14
+ "--scroll-mask-size": `${size}px`,
15
+ "--scroll-mask-color-from": from,
16
+ "--scroll-mask-color-to": to,
17
+ "--scroll-mask-clip-path": clipPath,
18
+ ...style
19
+ },
20
+ ...rest,
21
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
22
+ ref: ref,
23
+ className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)(__WEBPACK_EXTERNAL_MODULE__ScrollMask_module_js_e15d4b28__["default"]["scroll-mask-content"], __WEBPACK_EXTERNAL_MODULE__ScrollMask_module_js_e15d4b28__["default"][`${position}-scroll-mask-content`], contentClassName),
24
+ style: contentStyle
25
+ })
26
+ });
27
+ };
28
+ export { ScrollMask };
package/dist/components/ScrollMask.module.cjs ADDED
@@ -0,0 +1,58 @@
1
+ "use strict";
2
+ var __webpack_require__ = {};
3
+ (()=>{
4
+ __webpack_require__.d = (exports1, definition)=>{
5
+ for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
6
+ enumerable: true,
7
+ get: definition[key]
8
+ });
9
+ };
10
+ })();
11
+ (()=>{
12
+ __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
13
+ })();
14
+ (()=>{
15
+ __webpack_require__.r = (exports1)=>{
16
+ if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
17
+ value: 'Module'
18
+ });
19
+ Object.defineProperty(exports1, '__esModule', {
20
+ value: true
21
+ });
22
+ };
23
+ })();
24
+ var __webpack_exports__ = {};
25
+ __webpack_require__.r(__webpack_exports__);
26
+ __webpack_require__.d(__webpack_exports__, {
27
+ default: ()=>ScrollMask_module_rslib_entry_
28
+ });
29
+ require("./ScrollMask_module.css");
30
+ const ScrollMask_module_rslib_entry_ = {
31
+ "scroll-mask": "scroll-mask-t2NITS",
32
+ scrollMask: "scroll-mask-t2NITS",
33
+ "top-scroll-mask": "top-scroll-mask-Lk0R6A",
34
+ topScrollMask: "top-scroll-mask-Lk0R6A",
35
+ "scroll-mask-content": "scroll-mask-content-ThVLaU",
36
+ scrollMaskContent: "scroll-mask-content-ThVLaU",
37
+ "top-scroll-mask-content": "top-scroll-mask-content-xlQcwt",
38
+ topScrollMaskContent: "top-scroll-mask-content-xlQcwt",
39
+ "bottom-scroll-mask": "bottom-scroll-mask-Q8nwhW",
40
+ bottomScrollMask: "bottom-scroll-mask-Q8nwhW",
41
+ "bottom-scroll-mask-content": "bottom-scroll-mask-content-XkOPgR",
42
+ bottomScrollMaskContent: "bottom-scroll-mask-content-XkOPgR",
43
+ "left-scroll-mask": "left-scroll-mask-rM_Hlw",
44
+ leftScrollMask: "left-scroll-mask-rM_Hlw",
45
+ "left-scroll-mask-content": "left-scroll-mask-content-hUFxOv",
46
+ leftScrollMaskContent: "left-scroll-mask-content-hUFxOv",
47
+ "right-scroll-mask": "right-scroll-mask-qlV2jK",
48
+ rightScrollMask: "right-scroll-mask-qlV2jK",
49
+ "right-scroll-mask-content": "right-scroll-mask-content-mbgCn_",
50
+ rightScrollMaskContent: "right-scroll-mask-content-mbgCn_"
51
+ };
52
+ exports["default"] = __webpack_exports__["default"];
53
+ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
54
+ "default"
55
+ ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
56
+ Object.defineProperty(exports, '__esModule', {
57
+ value: true
58
+ });
package/dist/components/ScrollMask.module.js ADDED
@@ -0,0 +1,24 @@
1
+ import "./ScrollMask_module.css";
2
+ const ScrollMask_module_rslib_entry_ = {
3
+ "scroll-mask": "scroll-mask-t2NITS",
4
+ scrollMask: "scroll-mask-t2NITS",
5
+ "top-scroll-mask": "top-scroll-mask-Lk0R6A",
6
+ topScrollMask: "top-scroll-mask-Lk0R6A",
7
+ "scroll-mask-content": "scroll-mask-content-ThVLaU",
8
+ scrollMaskContent: "scroll-mask-content-ThVLaU",
9
+ "top-scroll-mask-content": "top-scroll-mask-content-xlQcwt",
10
+ topScrollMaskContent: "top-scroll-mask-content-xlQcwt",
11
+ "bottom-scroll-mask": "bottom-scroll-mask-Q8nwhW",
12
+ bottomScrollMask: "bottom-scroll-mask-Q8nwhW",
13
+ "bottom-scroll-mask-content": "bottom-scroll-mask-content-XkOPgR",
14
+ bottomScrollMaskContent: "bottom-scroll-mask-content-XkOPgR",
15
+ "left-scroll-mask": "left-scroll-mask-rM_Hlw",
16
+ leftScrollMask: "left-scroll-mask-rM_Hlw",
17
+ "left-scroll-mask-content": "left-scroll-mask-content-hUFxOv",
18
+ leftScrollMaskContent: "left-scroll-mask-content-hUFxOv",
19
+ "right-scroll-mask": "right-scroll-mask-qlV2jK",
20
+ rightScrollMask: "right-scroll-mask-qlV2jK",
21
+ "right-scroll-mask-content": "right-scroll-mask-content-mbgCn_",
22
+ rightScrollMaskContent: "right-scroll-mask-content-mbgCn_"
23
+ };
24
+ export { ScrollMask_module_rslib_entry_ as default };
package/dist/components/ScrollMask_module.css ADDED
@@ -0,0 +1,72 @@
1
+ .scroll-mask-t2NITS {
2
+ z-index: 10;
3
+ pointer-events: none;
4
+ position: sticky;
5
+ }
6
+
7
+ .top-scroll-mask-Lk0R6A {
8
+ width: 100%;
9
+ height: 0;
10
+ inset: 0 0 100%;
11
+ }
12
+
13
+ .scroll-mask-content-ThVLaU {
14
+ background-image: linear-gradient(to var(--scroll-mask-direction), var(--scroll-mask-color-from, #00000026), var(--scroll-mask-color-to, #0000));
15
+ clip-path: var(--scroll-mask-clip-path, none);
16
+ position: absolute;
17
+ }
18
+
19
+ .top-scroll-mask-content-xlQcwt {
20
+ width: 100%;
21
+ height: var(--scroll-mask-size, 16px);
22
+ --scroll-mask-direction: bottom;
23
+ top: 0;
24
+ right: 50%;
25
+ transform: translateX(50%);
26
+ }
27
+
28
+ .bottom-scroll-mask-Q8nwhW {
29
+ width: 100%;
30
+ height: 0;
31
+ inset: 100% 0 0;
32
+ }
33
+
34
+ .bottom-scroll-mask-content-XkOPgR {
35
+ width: 100%;
36
+ height: var(--scroll-mask-size, 16px);
37
+ --scroll-mask-direction: top;
38
+ bottom: 0;
39
+ left: 50%;
40
+ transform: translateX(-50%);
41
+ }
42
+
43
+ .left-scroll-mask-rM_Hlw {
44
+ width: 0;
45
+ height: 100%;
46
+ inset: 0 100% 0 0;
47
+ }
48
+
49
+ .left-scroll-mask-content-hUFxOv {
50
+ width: var(--scroll-mask-size, 16px);
51
+ --scroll-mask-direction: right;
52
+ height: 100%;
53
+ top: 50%;
54
+ left: 0;
55
+ transform: translateY(-50%);
56
+ }
57
+
58
+ .right-scroll-mask-qlV2jK {
59
+ width: 0;
60
+ height: 100%;
61
+ inset: 0 0 0 100%;
62
+ }
63
+
64
+ .right-scroll-mask-content-mbgCn_ {
65
+ width: var(--scroll-mask-size, 16px);
66
+ --scroll-mask-direction: left;
67
+ height: 100%;
68
+ bottom: 50%;
69
+ right: 0;
70
+ transform: translateY(50%);
71
+ }
72
+
package/dist/index.cjs CHANGED
@@ -48,6 +48,9 @@ var __webpack_modules__ = {
48
48
  "@/components/Scroll": function(module) {
49
49
  module.exports = require("./components/Scroll.cjs");
50
50
  },
51
+ "@/components/ScrollMask": function(module) {
52
+ module.exports = require("./components/ScrollMask.cjs");
53
+ },
51
54
  "@/components/SectionRing": function(module) {
52
55
  module.exports = require("./components/SectionRing.cjs");
53
56
  },
@@ -218,64 +221,70 @@ var __webpack_exports__ = {};
218
221
  return _components_Scroll__WEBPACK_IMPORTED_MODULE_15__[key];
219
222
  }).bind(0, __WEBPACK_IMPORT_KEY__);
220
223
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
221
- var _components_SectionRing__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__("@/components/SectionRing");
224
+ var _components_ScrollMask__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__("@/components/ScrollMask");
225
+ var __WEBPACK_REEXPORT_OBJECT__ = {};
226
+ for(var __WEBPACK_IMPORT_KEY__ in _components_ScrollMask__WEBPACK_IMPORTED_MODULE_16__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
227
+ return _components_ScrollMask__WEBPACK_IMPORTED_MODULE_16__[key];
228
+ }).bind(0, __WEBPACK_IMPORT_KEY__);
229
+ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
230
+ var _components_SectionRing__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__("@/components/SectionRing");
222
231
  var __WEBPACK_REEXPORT_OBJECT__ = {};
223
- for(var __WEBPACK_IMPORT_KEY__ in _components_SectionRing__WEBPACK_IMPORTED_MODULE_16__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
224
- return _components_SectionRing__WEBPACK_IMPORTED_MODULE_16__[key];
232
+ for(var __WEBPACK_IMPORT_KEY__ in _components_SectionRing__WEBPACK_IMPORTED_MODULE_17__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
233
+ return _components_SectionRing__WEBPACK_IMPORTED_MODULE_17__[key];
225
234
  }).bind(0, __WEBPACK_IMPORT_KEY__);
226
235
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
227
- var _components_Skeleton__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__("@/components/Skeleton");
236
+ var _components_Skeleton__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__("@/components/Skeleton");
228
237
  var __WEBPACK_REEXPORT_OBJECT__ = {};
229
- for(var __WEBPACK_IMPORT_KEY__ in _components_Skeleton__WEBPACK_IMPORTED_MODULE_17__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
230
- return _components_Skeleton__WEBPACK_IMPORTED_MODULE_17__[key];
238
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Skeleton__WEBPACK_IMPORTED_MODULE_18__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
239
+ return _components_Skeleton__WEBPACK_IMPORTED_MODULE_18__[key];
231
240
  }).bind(0, __WEBPACK_IMPORT_KEY__);
232
241
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
233
- var _components_Title__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__("@/components/Title");
242
+ var _components_Title__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__("@/components/Title");
234
243
  var __WEBPACK_REEXPORT_OBJECT__ = {};
235
- for(var __WEBPACK_IMPORT_KEY__ in _components_Title__WEBPACK_IMPORTED_MODULE_18__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
236
- return _components_Title__WEBPACK_IMPORTED_MODULE_18__[key];
244
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Title__WEBPACK_IMPORTED_MODULE_19__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
245
+ return _components_Title__WEBPACK_IMPORTED_MODULE_19__[key];
237
246
  }).bind(0, __WEBPACK_IMPORT_KEY__);
238
247
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
239
- var _components_TransitionBox__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__("@/components/TransitionBox");
248
+ var _components_TransitionBox__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__("@/components/TransitionBox");
240
249
  var __WEBPACK_REEXPORT_OBJECT__ = {};
241
- for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionBox__WEBPACK_IMPORTED_MODULE_19__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
242
- return _components_TransitionBox__WEBPACK_IMPORTED_MODULE_19__[key];
250
+ for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionBox__WEBPACK_IMPORTED_MODULE_20__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
251
+ return _components_TransitionBox__WEBPACK_IMPORTED_MODULE_20__[key];
243
252
  }).bind(0, __WEBPACK_IMPORT_KEY__);
244
253
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
245
- var _components_TransitionNum__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__("@/components/TransitionNum");
254
+ var _components_TransitionNum__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__("@/components/TransitionNum");
246
255
  var __WEBPACK_REEXPORT_OBJECT__ = {};
247
- for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionNum__WEBPACK_IMPORTED_MODULE_20__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
248
- return _components_TransitionNum__WEBPACK_IMPORTED_MODULE_20__[key];
256
+ for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionNum__WEBPACK_IMPORTED_MODULE_21__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
257
+ return _components_TransitionNum__WEBPACK_IMPORTED_MODULE_21__[key];
249
258
  }).bind(0, __WEBPACK_IMPORT_KEY__);
250
259
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
251
- var _components_Trapezium__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__("@/components/Trapezium");
260
+ var _components_Trapezium__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__("@/components/Trapezium");
252
261
  var __WEBPACK_REEXPORT_OBJECT__ = {};
253
- for(var __WEBPACK_IMPORT_KEY__ in _components_Trapezium__WEBPACK_IMPORTED_MODULE_21__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
254
- return _components_Trapezium__WEBPACK_IMPORTED_MODULE_21__[key];
262
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Trapezium__WEBPACK_IMPORTED_MODULE_22__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
263
+ return _components_Trapezium__WEBPACK_IMPORTED_MODULE_22__[key];
255
264
  }).bind(0, __WEBPACK_IMPORT_KEY__);
256
265
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
257
- var _components_Unify__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__("@/components/Unify");
266
+ var _components_Unify__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__("@/components/Unify");
258
267
  var __WEBPACK_REEXPORT_OBJECT__ = {};
259
- for(var __WEBPACK_IMPORT_KEY__ in _components_Unify__WEBPACK_IMPORTED_MODULE_22__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
260
- return _components_Unify__WEBPACK_IMPORTED_MODULE_22__[key];
268
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Unify__WEBPACK_IMPORTED_MODULE_23__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
269
+ return _components_Unify__WEBPACK_IMPORTED_MODULE_23__[key];
261
270
  }).bind(0, __WEBPACK_IMPORT_KEY__);
262
271
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
263
- var _components_WriteExcel__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__("@/components/WriteExcel");
272
+ var _components_WriteExcel__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__("@/components/WriteExcel");
264
273
  var __WEBPACK_REEXPORT_OBJECT__ = {};
265
- for(var __WEBPACK_IMPORT_KEY__ in _components_WriteExcel__WEBPACK_IMPORTED_MODULE_23__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
266
- return _components_WriteExcel__WEBPACK_IMPORTED_MODULE_23__[key];
274
+ for(var __WEBPACK_IMPORT_KEY__ in _components_WriteExcel__WEBPACK_IMPORTED_MODULE_24__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
275
+ return _components_WriteExcel__WEBPACK_IMPORTED_MODULE_24__[key];
267
276
  }).bind(0, __WEBPACK_IMPORT_KEY__);
268
277
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
269
- var _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__("@/utils/getReactVersion");
278
+ var _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__("@/utils/getReactVersion");
270
279
  var __WEBPACK_REEXPORT_OBJECT__ = {};
271
- for(var __WEBPACK_IMPORT_KEY__ in _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_24__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
272
- return _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_24__[key];
280
+ for(var __WEBPACK_IMPORT_KEY__ in _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_25__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
281
+ return _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_25__[key];
273
282
  }).bind(0, __WEBPACK_IMPORT_KEY__);
274
283
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
275
- var _utils_index__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__("@/utils/index");
284
+ var _utils_index__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__("@/utils/index");
276
285
  var __WEBPACK_REEXPORT_OBJECT__ = {};
277
- for(var __WEBPACK_IMPORT_KEY__ in _utils_index__WEBPACK_IMPORTED_MODULE_25__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
278
- return _utils_index__WEBPACK_IMPORTED_MODULE_25__[key];
286
+ for(var __WEBPACK_IMPORT_KEY__ in _utils_index__WEBPACK_IMPORTED_MODULE_26__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
287
+ return _utils_index__WEBPACK_IMPORTED_MODULE_26__[key];
279
288
  }).bind(0, __WEBPACK_IMPORT_KEY__);
280
289
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
281
290
  })();
package/dist/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export * from "./components/LoopSwiper";
14
14
  export * from "./components/ReadExcel";
15
15
  export * from "./components/Ring";
16
16
  export * from "./components/Scroll";
17
+ export * from "./components/ScrollMask";
17
18
  export * from "./components/SectionRing";
18
19
  export * from "./components/Skeleton";
19
20
  export * from "./components/Title";
package/dist/index.js CHANGED
@@ -14,6 +14,7 @@ export * from "./components/LoopSwiper.js";
14
14
  export * from "./components/ReadExcel.js";
15
15
  export * from "./components/Ring.js";
16
16
  export * from "./components/Scroll.js";
17
+ export * from "./components/ScrollMask.js";
17
18
  export * from "./components/SectionRing.js";
18
19
  export * from "./components/Skeleton.js";
19
20
  export * from "./components/Title.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "deepsea-components",
3
- "version": "5.12.7",
3
+ "version": "5.13.1",
4
4
  "description": "格数科技自用组件库",
5
5
  "type": "module",
6
6
  "exports": {
package/src/components/ScrollMask.module.css ADDED
@@ -0,0 +1,87 @@
1
+ .scroll-mask {
2
+ position: sticky;
3
+ z-index: 10;
4
+ pointer-events: none;
5
+ }
6
+
7
+ .top-scroll-mask {
8
+ width: 100%;
9
+ height: 0;
10
+ top: 0;
11
+ right: 0;
12
+ bottom: 100%;
13
+ left: 0;
14
+ }
15
+
16
+ .scroll-mask-content {
17
+ position: absolute;
18
+ background-image: linear-gradient(
19
+ to var(--scroll-mask-direction),
20
+ var(--scroll-mask-color-from, rgba(0, 0, 0, 0.15)),
21
+ var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
22
+ );
23
+ clip-path: var(--scroll-mask-clip-path, none);
24
+ }
25
+
26
+ .top-scroll-mask-content {
27
+ width: 100%;
28
+ height: var(--scroll-mask-size, 16px);
29
+ top: 0;
30
+ right: 50%;
31
+ transform: translateX(50%);
32
+ --scroll-mask-direction: bottom;
33
+ }
34
+
35
+ .bottom-scroll-mask {
36
+ width: 100%;
37
+ height: 0;
38
+ top: 100%;
39
+ right: 0;
40
+ bottom: 0;
41
+ left: 0;
42
+ }
43
+
44
+ .bottom-scroll-mask-content {
45
+ width: 100%;
46
+ height: var(--scroll-mask-size, 16px);
47
+ bottom: 0;
48
+ left: 50%;
49
+ transform: translateX(-50%);
50
+ --scroll-mask-direction: top;
51
+ }
52
+
53
+ .left-scroll-mask {
54
+ width: 0;
55
+ height: 100%;
56
+ top: 0;
57
+ right: 100%;
58
+ bottom: 0;
59
+ left: 0;
60
+ }
61
+
62
+ .left-scroll-mask-content {
63
+ width: var(--scroll-mask-size, 16px);
64
+ height: 100%;
65
+ left: 0;
66
+ top: 50%;
67
+ transform: translateY(-50%);
68
+ --scroll-mask-direction: right;
69
+ }
70
+
71
+ .right-scroll-mask {
72
+ width: 0;
73
+ height: 100%;
74
+ top: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ left: 100%;
78
+ }
79
+
80
+ .right-scroll-mask-content {
81
+ width: var(--scroll-mask-size, 16px);
82
+ height: 100%;
83
+ right: 0;
84
+ bottom: 50%;
85
+ transform: translateY(50%);
86
+ --scroll-mask-direction: left;
87
+ }
package/src/components/ScrollMask.tsx ADDED
@@ -0,0 +1,68 @@
1
+ import { CSSProperties, ComponentProps, FC, useRef } from "react"
2
+ import { clsx, isNonNullable } from "deepsea-tools"
3
+ import { useSize } from "soda-hooks"
4
+
5
+ import styles from "./ScrollMask.module.css"
6
+
7
+ export type ScrollMaskPosition = "top" | "bottom" | "left" | "right"
8
+
9
+ export interface ScrollMaskProps extends Omit<ComponentProps<"div">, "children"> {
10
+ position?: ScrollMaskPosition
11
+ size?: number
12
+ from?: CSSProperties["color"]
13
+ to?: CSSProperties["color"]
14
+ contentClassName?: string
15
+ contentStyle?: CSSProperties
16
+ showRadian?: boolean
17
+ }
18
+
19
+ export const ScrollMask: FC<ScrollMaskProps> = ({
20
+ className,
21
+ style,
22
+ position = "top",
23
+ size = 16,
24
+ from = "rgba(0, 0, 0, 0.15)",
25
+ to = "rgba(0, 0, 0, 0)",
26
+ contentClassName,
27
+ contentStyle,
28
+ showRadian = false,
29
+ ...rest
30
+ }) => {
31
+ const ref = useRef<HTMLDivElement>(null)
32
+ const contentSize = useSize(ref)
33
+ const radius = isNonNullable(contentSize)
34
+ ? position === "top" || position === "bottom"
35
+ ? (contentSize.width ** 2 / 4 + contentSize.height ** 2) / (contentSize.height * 2)
36
+ : (contentSize.height ** 2 / 4 + contentSize.width ** 2) / (contentSize.width * 2)
37
+ : undefined
38
+ const clipPath =
39
+ showRadian && isNonNullable(radius)
40
+ ? position === "top"
41
+ ? `circle(${radius}px at 50% -${radius - contentSize!.height}px)`
42
+ : position === "bottom"
43
+ ? `circle(${radius}px at 50% ${radius}px)`
44
+ : position === "left"
45
+ ? `circle(${radius}px at -${radius - contentSize!.width} 50%)`
46
+ : position === "right"
47
+ ? `circle(${radius}px at ${radius}px 50%)`
48
+ : "none"
49
+ : "none"
50
+
51
+ return (
52
+ <div
53
+ className={clsx(styles["scroll-mask"], styles[`${position}-scroll-mask`], className)}
54
+ style={
55
+ {
56
+ "--scroll-mask-size": `${size}px`,
57
+ "--scroll-mask-color-from": from,
58
+ "--scroll-mask-color-to": to,
59
+ "--scroll-mask-clip-path": clipPath,
60
+ ...style,
61
+ } as CSSProperties
62
+ }
63
+ {...rest}
64
+ >
65
+ <div ref={ref} className={clsx(styles["scroll-mask-content"], styles[`${position}-scroll-mask-content`], contentClassName)} style={contentStyle} />
66
+ </div>
67
+ )
68
+ }
package/src/index.ts CHANGED
@@ -14,6 +14,7 @@ export * from "@/components/LoopSwiper"
14
14
  export * from "@/components/ReadExcel"
15
15
  export * from "@/components/Ring"
16
16
  export * from "@/components/Scroll"
17
+ export * from "@/components/ScrollMask"
17
18
  export * from "@/components/SectionRing"
18
19
  export * from "@/components/Skeleton"
19
20
  export * from "@/components/Title"
package/tsconfig.json CHANGED
@@ -12,5 +12,5 @@
12
12
  "@/*": ["src/*"]
13
13
  }
14
14
  },
15
- "include": ["src"]
15
+ "include": ["src", "types.d.ts"]
16
16
  }