deepsea-components 5.13.1 → 5.14.0

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/IconFileType.cjs +116 -0
  2. package/dist/components/IconFileType.d.ts +64 -0
  3. package/dist/components/IconFileType.js +70 -0
  4. package/dist/components/ScrollMask.cjs +2 -2
  5. package/dist/components/ScrollMask.js +2 -2
  6. package/dist/components/ScrollMask_module.css +5 -5
  7. package/dist/index.cjs +63 -54
  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/IconFileType.tsx +153 -0
  12. package/src/components/ScrollMask.module.css +87 -87
  13. package/src/components/ScrollMask.tsx +68 -68
  14. package/src/index.ts +1 -0
package/dist/components/IconFileType.cjs ADDED
@@ -0,0 +1,116 @@
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
+ IconFileTypeText: ()=>IconFileTypeText,
28
+ IconFileTypeBase: ()=>IconFileTypeBase,
29
+ IconFileTypePage: ()=>IconFileTypePage,
30
+ IconFileType: ()=>IconFileType,
31
+ IconFileTypeDogEar: ()=>IconFileTypeDogEar
32
+ });
33
+ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
34
+ const GOLD = (Math.sqrt(5) - 1) / 2;
35
+ const GOLD_T = Math.sqrt(1 - GOLD * GOLD);
36
+ const HANDLE_LENGTH = (1 - GOLD) * GOLD_T;
37
+ const FileTypeSize = 512;
38
+ const IconFileTypeBase = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
39
+ viewBox: `${-(FileTypeSize / 2)} ${-(FileTypeSize / 2)} ${FileTypeSize} ${FileTypeSize}`,
40
+ ...props
41
+ });
42
+ const IconFileTypePage = ({ pageColor = "#f31260", pageWidth = 0.75 * FileTypeSize, pageBessel = 0.75 * FileTypeSize * GOLD, ...rest })=>{
43
+ const radius = pageBessel * (1 - GOLD);
44
+ const offset = pageBessel * HANDLE_LENGTH;
45
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
46
+ d: `M ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
47
+ L ${pageWidth * GOLD - pageWidth / 2} ${-(FileTypeSize / 2)}
48
+ L ${pageWidth / 2} ${-(FileTypeSize / 2 - pageWidth * (1 - GOLD))}
49
+ L ${pageWidth / 2} ${FileTypeSize / 2 - radius}
50
+ C ${pageWidth / 2} ${FileTypeSize / 2 - radius + offset} ${pageWidth / 2 - radius + offset} ${FileTypeSize / 2} ${pageWidth / 2 - radius} ${FileTypeSize / 2}
51
+ L ${-(pageWidth / 2 - radius)} ${FileTypeSize / 2}
52
+ C ${-(pageWidth / 2 - radius) - offset} ${FileTypeSize / 2} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius + offset} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius}
53
+ L ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius)}
54
+ C ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius) - offset} ${-(pageWidth / 2 - radius) - offset} ${-(FileTypeSize / 2)} ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
55
+ Z
56
+ `,
57
+ fill: pageColor,
58
+ ...rest
59
+ });
60
+ };
61
+ const IconFileTypeDogEar = ({ pageWidth, dogEarColor = "#c20e4d", dogEarSize = pageWidth * (1 - GOLD), ...rest })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
62
+ d: `M ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2)}
63
+ L ${pageWidth / 2} ${-(FileTypeSize / 2 - dogEarSize)}
64
+ L ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2 - dogEarSize)}`,
65
+ fill: dogEarColor,
66
+ ...rest
67
+ });
68
+ const IconFileTypeText = ({ textColor = "#ffffff", textFontSize = 0.25 * FileTypeSize, textFontWeight = "bold", textFontFamily, textX = 0, textY = 0.25 * FileTypeSize, ...rest })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("text", {
69
+ textAnchor: "middle",
70
+ fill: textColor,
71
+ x: textX,
72
+ y: textY,
73
+ fontSize: textFontSize,
74
+ fontWeight: textFontWeight,
75
+ fontFamily: textFontFamily,
76
+ ...rest
77
+ });
78
+ const IconFileType = ({ pageColor, pageWidth = 0.75 * FileTypeSize, pageBessel, dogEarColor, dogEarSize, textColor, textFontSize, textFontWeight, textFontFamily, textX, textY, children, ...rest })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(IconFileTypeBase, {
79
+ ...rest,
80
+ children: [
81
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconFileTypePage, {
82
+ pageColor: pageColor,
83
+ pageWidth: pageWidth,
84
+ pageBessel: pageBessel
85
+ }),
86
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconFileTypeDogEar, {
87
+ pageWidth: pageWidth,
88
+ dogEarColor: dogEarColor,
89
+ dogEarSize: dogEarSize
90
+ }),
91
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconFileTypeText, {
92
+ textColor: textColor,
93
+ textFontSize: textFontSize,
94
+ textFontWeight: textFontWeight,
95
+ textFontFamily: textFontFamily,
96
+ textX: textX,
97
+ textY: textY,
98
+ children: children
99
+ })
100
+ ]
101
+ });
102
+ exports.IconFileType = __webpack_exports__.IconFileType;
103
+ exports.IconFileTypeBase = __webpack_exports__.IconFileTypeBase;
104
+ exports.IconFileTypeDogEar = __webpack_exports__.IconFileTypeDogEar;
105
+ exports.IconFileTypePage = __webpack_exports__.IconFileTypePage;
106
+ exports.IconFileTypeText = __webpack_exports__.IconFileTypeText;
107
+ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
108
+ "IconFileType",
109
+ "IconFileTypeBase",
110
+ "IconFileTypeDogEar",
111
+ "IconFileTypePage",
112
+ "IconFileTypeText"
113
+ ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
114
+ Object.defineProperty(exports, '__esModule', {
115
+ value: true
116
+ });
package/dist/components/IconFileType.d.ts ADDED
@@ -0,0 +1,64 @@
1
+ import { ComponentProps, FC } from "react";
2
+ export declare const IconFileTypeBase: FC<ComponentProps<"svg">>;
3
+ export interface IconFileTypePagePropsBase {
4
+ /**
5
+ * 书页颜色，默认为 #f31260
6
+ */
7
+ pageColor?: string;
8
+ /**
9
+ * 书页宽度，默认为 512 * 0.75
10
+ */
11
+ pageWidth?: number;
12
+ /**
13
+ * 书页贝塞尔曲线尺寸，尺寸越大，圆角越大，默认为 512 * 0.75 * 0.618
14
+ */
15
+ pageBessel?: number;
16
+ }
17
+ export interface IconFileTypePageProps extends IconFileTypePagePropsBase, ComponentProps<"path"> {
18
+ }
19
+ export declare const IconFileTypePage: FC<IconFileTypePageProps>;
20
+ export interface IconFileTypeDogEarPropsBase extends Required<Pick<IconFileTypePagePropsBase, "pageWidth">> {
21
+ /**
22
+ * 折角颜色，默认为 #c20e4d
23
+ */
24
+ dogEarColor?: string;
25
+ /**
26
+ * 折角大小，默认为 页面宽度 * (1 - 0.618)
27
+ */
28
+ dogEarSize?: number;
29
+ }
30
+ export interface IconFileTypeDogEarProps extends IconFileTypeDogEarPropsBase, ComponentProps<"path"> {
31
+ }
32
+ export declare const IconFileTypeDogEar: FC<IconFileTypeDogEarProps>;
33
+ export interface IconFileTypeTextPropsBase {
34
+ /**
35
+ * 文字颜色，默认为 白色
36
+ */
37
+ textColor?: string;
38
+ /**
39
+ * 文字大小，默认为 512 * 0.25
40
+ */
41
+ textFontSize?: number;
42
+ /**
43
+ * 文字字重，默认为 bold
44
+ */
45
+ textFontWeight?: string;
46
+ /**
47
+ * 文字字体
48
+ */
49
+ textFontFamily?: string;
50
+ /**
51
+ * 文字 x 轴远点，默认为 0
52
+ */
53
+ textX?: number;
54
+ /**
55
+ * 文字 y 轴远点，默认为 512 * 0.25
56
+ */
57
+ textY?: number;
58
+ }
59
+ export interface IconFileTypeTextProps extends IconFileTypeTextPropsBase, ComponentProps<"text"> {
60
+ }
61
+ export declare const IconFileTypeText: FC<IconFileTypeTextProps>;
62
+ export interface IconFileTypeProps extends IconFileTypePagePropsBase, Omit<IconFileTypeDogEarPropsBase, "pageWidth">, IconFileTypeTextPropsBase, ComponentProps<"svg"> {
63
+ }
64
+ export declare const IconFileType: FC<IconFileTypeProps>;
package/dist/components/IconFileType.js ADDED
@@ -0,0 +1,70 @@
1
+ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
+ const GOLD = (Math.sqrt(5) - 1) / 2;
3
+ const GOLD_T = Math.sqrt(1 - GOLD * GOLD);
4
+ const HANDLE_LENGTH = (1 - GOLD) * GOLD_T;
5
+ const FileTypeSize = 512;
6
+ const IconFileTypeBase = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
7
+ viewBox: `${-(FileTypeSize / 2)} ${-(FileTypeSize / 2)} ${FileTypeSize} ${FileTypeSize}`,
8
+ ...props
9
+ });
10
+ const IconFileTypePage = ({ pageColor = "#f31260", pageWidth = 0.75 * FileTypeSize, pageBessel = 0.75 * FileTypeSize * GOLD, ...rest })=>{
11
+ const radius = pageBessel * (1 - GOLD);
12
+ const offset = pageBessel * HANDLE_LENGTH;
13
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
14
+ d: `M ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
15
+ L ${pageWidth * GOLD - pageWidth / 2} ${-(FileTypeSize / 2)}
16
+ L ${pageWidth / 2} ${-(FileTypeSize / 2 - pageWidth * (1 - GOLD))}
17
+ L ${pageWidth / 2} ${FileTypeSize / 2 - radius}
18
+ C ${pageWidth / 2} ${FileTypeSize / 2 - radius + offset} ${pageWidth / 2 - radius + offset} ${FileTypeSize / 2} ${pageWidth / 2 - radius} ${FileTypeSize / 2}
19
+ L ${-(pageWidth / 2 - radius)} ${FileTypeSize / 2}
20
+ C ${-(pageWidth / 2 - radius) - offset} ${FileTypeSize / 2} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius + offset} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius}
21
+ L ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius)}
22
+ C ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius) - offset} ${-(pageWidth / 2 - radius) - offset} ${-(FileTypeSize / 2)} ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
23
+ Z
24
+ `,
25
+ fill: pageColor,
26
+ ...rest
27
+ });
28
+ };
29
+ const IconFileTypeDogEar = ({ pageWidth, dogEarColor = "#c20e4d", dogEarSize = pageWidth * (1 - GOLD), ...rest })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
30
+ d: `M ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2)}
31
+ L ${pageWidth / 2} ${-(FileTypeSize / 2 - dogEarSize)}
32
+ L ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2 - dogEarSize)}`,
33
+ fill: dogEarColor,
34
+ ...rest
35
+ });
36
+ const IconFileTypeText = ({ textColor = "#ffffff", textFontSize = 0.25 * FileTypeSize, textFontWeight = "bold", textFontFamily, textX = 0, textY = 0.25 * FileTypeSize, ...rest })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("text", {
37
+ textAnchor: "middle",
38
+ fill: textColor,
39
+ x: textX,
40
+ y: textY,
41
+ fontSize: textFontSize,
42
+ fontWeight: textFontWeight,
43
+ fontFamily: textFontFamily,
44
+ ...rest
45
+ });
46
+ const IconFileType = ({ pageColor, pageWidth = 0.75 * FileTypeSize, pageBessel, dogEarColor, dogEarSize, textColor, textFontSize, textFontWeight, textFontFamily, textX, textY, children, ...rest })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(IconFileTypeBase, {
47
+ ...rest,
48
+ children: [
49
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconFileTypePage, {
50
+ pageColor: pageColor,
51
+ pageWidth: pageWidth,
52
+ pageBessel: pageBessel
53
+ }),
54
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconFileTypeDogEar, {
55
+ pageWidth: pageWidth,
56
+ dogEarColor: dogEarColor,
57
+ dogEarSize: dogEarSize
58
+ }),
59
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconFileTypeText, {
60
+ textColor: textColor,
61
+ textFontSize: textFontSize,
62
+ textFontWeight: textFontWeight,
63
+ textFontFamily: textFontFamily,
64
+ textX: textX,
65
+ textY: textY,
66
+ children: children
67
+ })
68
+ ]
69
+ });
70
+ export { IconFileType, IconFileTypeBase, IconFileTypeDogEar, IconFileTypePage, IconFileTypeText };
package/dist/components/ScrollMask.cjs CHANGED
@@ -41,11 +41,11 @@ const external_deepsea_tools_namespaceObject = require("deepsea-tools");
41
41
  const external_soda_hooks_namespaceObject = require("soda-hooks");
42
42
  const external_ScrollMask_module_cjs_namespaceObject = require("./ScrollMask.module.cjs");
43
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 })=>{
44
+ const ScrollMask = ({ className, style, position = "top", size = 8, from = "rgba(0, 0, 0, 0.1)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{
45
45
  const ref = (0, external_react_namespaceObject.useRef)(null);
46
46
  const contentSize = (0, external_soda_hooks_namespaceObject.useSize)(ref);
47
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";
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}px 50%)` : "right" === position ? `circle(${radius}px at ${radius}px 50%)` : "none" : "none";
49
49
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
50
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
51
  style: {
package/dist/components/ScrollMask.js CHANGED
@@ -3,11 +3,11 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
3
3
  import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
4
4
  import * as __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__ from "soda-hooks";
5
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 })=>{
6
+ const ScrollMask = ({ className, style, position = "top", size = 8, from = "rgba(0, 0, 0, 0.1)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{
7
7
  const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
8
8
  const contentSize = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(ref);
9
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";
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}px 50%)` : "right" === position ? `circle(${radius}px at ${radius}px 50%)` : "none" : "none";
11
11
  return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
12
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
13
  style: {
package/dist/components/ScrollMask_module.css CHANGED
@@ -11,14 +11,14 @@
11
11
  }
12
12
 
13
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));
14
+ background-image: linear-gradient(to var(--scroll-mask-direction), var(--scroll-mask-color-from, #0000001a), var(--scroll-mask-color-to, #0000));
15
15
  clip-path: var(--scroll-mask-clip-path, none);
16
16
  position: absolute;
17
17
  }
18
18
 
19
19
  .top-scroll-mask-content-xlQcwt {
20
20
  width: 100%;
21
- height: var(--scroll-mask-size, 16px);
21
+ height: var(--scroll-mask-size, 8px);
22
22
  --scroll-mask-direction: bottom;
23
23
  top: 0;
24
24
  right: 50%;
@@ -33,7 +33,7 @@
33
33
 
34
34
  .bottom-scroll-mask-content-XkOPgR {
35
35
  width: 100%;
36
- height: var(--scroll-mask-size, 16px);
36
+ height: var(--scroll-mask-size, 8px);
37
37
  --scroll-mask-direction: top;
38
38
  bottom: 0;
39
39
  left: 50%;
@@ -47,7 +47,7 @@
47
47
  }
48
48
 
49
49
  .left-scroll-mask-content-hUFxOv {
50
- width: var(--scroll-mask-size, 16px);
50
+ width: var(--scroll-mask-size, 8px);
51
51
  --scroll-mask-direction: right;
52
52
  height: 100%;
53
53
  top: 50%;
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  .right-scroll-mask-content-mbgCn_ {
65
- width: var(--scroll-mask-size, 16px);
65
+ width: var(--scroll-mask-size, 8px);
66
66
  --scroll-mask-direction: left;
67
67
  height: 100%;
68
68
  bottom: 50%;
package/dist/index.cjs CHANGED
@@ -27,6 +27,9 @@ var __webpack_modules__ = {
27
27
  "@/components/HlsPlayer": function(module) {
28
28
  module.exports = require("./components/HlsPlayer.cjs");
29
29
  },
30
+ "@/components/IconFileType": function(module) {
31
+ module.exports = require("./components/IconFileType.cjs");
32
+ },
30
33
  "@/components/InfiniteScroll": function(module) {
31
34
  module.exports = require("./components/InfiniteScroll.cjs");
32
35
  },
@@ -179,112 +182,118 @@ var __webpack_exports__ = {};
179
182
  return _components_HlsPlayer__WEBPACK_IMPORTED_MODULE_8__[key];
180
183
  }).bind(0, __WEBPACK_IMPORT_KEY__);
181
184
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
182
- var _components_InfiniteScroll__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__("@/components/InfiniteScroll");
185
+ var _components_IconFileType__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__("@/components/IconFileType");
186
+ var __WEBPACK_REEXPORT_OBJECT__ = {};
187
+ for(var __WEBPACK_IMPORT_KEY__ in _components_IconFileType__WEBPACK_IMPORTED_MODULE_9__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
188
+ return _components_IconFileType__WEBPACK_IMPORTED_MODULE_9__[key];
189
+ }).bind(0, __WEBPACK_IMPORT_KEY__);
190
+ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
191
+ var _components_InfiniteScroll__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__("@/components/InfiniteScroll");
183
192
  var __WEBPACK_REEXPORT_OBJECT__ = {};
184
- for(var __WEBPACK_IMPORT_KEY__ in _components_InfiniteScroll__WEBPACK_IMPORTED_MODULE_9__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
185
- return _components_InfiniteScroll__WEBPACK_IMPORTED_MODULE_9__[key];
193
+ for(var __WEBPACK_IMPORT_KEY__ in _components_InfiniteScroll__WEBPACK_IMPORTED_MODULE_10__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
194
+ return _components_InfiniteScroll__WEBPACK_IMPORTED_MODULE_10__[key];
186
195
  }).bind(0, __WEBPACK_IMPORT_KEY__);
187
196
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
188
- var _components_InputFile__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__("@/components/InputFile");
197
+ var _components_InputFile__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__("@/components/InputFile");
189
198
  var __WEBPACK_REEXPORT_OBJECT__ = {};
190
- for(var __WEBPACK_IMPORT_KEY__ in _components_InputFile__WEBPACK_IMPORTED_MODULE_10__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
191
- return _components_InputFile__WEBPACK_IMPORTED_MODULE_10__[key];
199
+ for(var __WEBPACK_IMPORT_KEY__ in _components_InputFile__WEBPACK_IMPORTED_MODULE_11__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
200
+ return _components_InputFile__WEBPACK_IMPORTED_MODULE_11__[key];
192
201
  }).bind(0, __WEBPACK_IMPORT_KEY__);
193
202
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
194
- var _components_InputFileButton__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__("@/components/InputFileButton");
203
+ var _components_InputFileButton__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__("@/components/InputFileButton");
195
204
  var __WEBPACK_REEXPORT_OBJECT__ = {};
196
- for(var __WEBPACK_IMPORT_KEY__ in _components_InputFileButton__WEBPACK_IMPORTED_MODULE_11__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
197
- return _components_InputFileButton__WEBPACK_IMPORTED_MODULE_11__[key];
205
+ for(var __WEBPACK_IMPORT_KEY__ in _components_InputFileButton__WEBPACK_IMPORTED_MODULE_12__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
206
+ return _components_InputFileButton__WEBPACK_IMPORTED_MODULE_12__[key];
198
207
  }).bind(0, __WEBPACK_IMPORT_KEY__);
199
208
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
200
- var _components_LoopSwiper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__("@/components/LoopSwiper");
209
+ var _components_LoopSwiper__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__("@/components/LoopSwiper");
201
210
  var __WEBPACK_REEXPORT_OBJECT__ = {};
202
- for(var __WEBPACK_IMPORT_KEY__ in _components_LoopSwiper__WEBPACK_IMPORTED_MODULE_12__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
203
- return _components_LoopSwiper__WEBPACK_IMPORTED_MODULE_12__[key];
211
+ for(var __WEBPACK_IMPORT_KEY__ in _components_LoopSwiper__WEBPACK_IMPORTED_MODULE_13__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
212
+ return _components_LoopSwiper__WEBPACK_IMPORTED_MODULE_13__[key];
204
213
  }).bind(0, __WEBPACK_IMPORT_KEY__);
205
214
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
206
- var _components_ReadExcel__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__("@/components/ReadExcel");
215
+ var _components_ReadExcel__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__("@/components/ReadExcel");
207
216
  var __WEBPACK_REEXPORT_OBJECT__ = {};
208
- for(var __WEBPACK_IMPORT_KEY__ in _components_ReadExcel__WEBPACK_IMPORTED_MODULE_13__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
209
- return _components_ReadExcel__WEBPACK_IMPORTED_MODULE_13__[key];
217
+ for(var __WEBPACK_IMPORT_KEY__ in _components_ReadExcel__WEBPACK_IMPORTED_MODULE_14__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
218
+ return _components_ReadExcel__WEBPACK_IMPORTED_MODULE_14__[key];
210
219
  }).bind(0, __WEBPACK_IMPORT_KEY__);
211
220
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
212
- var _components_Ring__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__("@/components/Ring");
221
+ var _components_Ring__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__("@/components/Ring");
213
222
  var __WEBPACK_REEXPORT_OBJECT__ = {};
214
- for(var __WEBPACK_IMPORT_KEY__ in _components_Ring__WEBPACK_IMPORTED_MODULE_14__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
215
- return _components_Ring__WEBPACK_IMPORTED_MODULE_14__[key];
223
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Ring__WEBPACK_IMPORTED_MODULE_15__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
224
+ return _components_Ring__WEBPACK_IMPORTED_MODULE_15__[key];
216
225
  }).bind(0, __WEBPACK_IMPORT_KEY__);
217
226
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
218
- var _components_Scroll__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__("@/components/Scroll");
227
+ var _components_Scroll__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__("@/components/Scroll");
219
228
  var __WEBPACK_REEXPORT_OBJECT__ = {};
220
- for(var __WEBPACK_IMPORT_KEY__ in _components_Scroll__WEBPACK_IMPORTED_MODULE_15__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
221
- return _components_Scroll__WEBPACK_IMPORTED_MODULE_15__[key];
229
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Scroll__WEBPACK_IMPORTED_MODULE_16__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
230
+ return _components_Scroll__WEBPACK_IMPORTED_MODULE_16__[key];
222
231
  }).bind(0, __WEBPACK_IMPORT_KEY__);
223
232
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
224
- var _components_ScrollMask__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__("@/components/ScrollMask");
233
+ var _components_ScrollMask__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__("@/components/ScrollMask");
225
234
  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];
235
+ for(var __WEBPACK_IMPORT_KEY__ in _components_ScrollMask__WEBPACK_IMPORTED_MODULE_17__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
236
+ return _components_ScrollMask__WEBPACK_IMPORTED_MODULE_17__[key];
228
237
  }).bind(0, __WEBPACK_IMPORT_KEY__);
229
238
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
230
- var _components_SectionRing__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__("@/components/SectionRing");
239
+ var _components_SectionRing__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__("@/components/SectionRing");
231
240
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
241
+ for(var __WEBPACK_IMPORT_KEY__ in _components_SectionRing__WEBPACK_IMPORTED_MODULE_18__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
242
+ return _components_SectionRing__WEBPACK_IMPORTED_MODULE_18__[key];
234
243
  }).bind(0, __WEBPACK_IMPORT_KEY__);
235
244
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
236
- var _components_Skeleton__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__("@/components/Skeleton");
245
+ var _components_Skeleton__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__("@/components/Skeleton");
237
246
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
247
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Skeleton__WEBPACK_IMPORTED_MODULE_19__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
248
+ return _components_Skeleton__WEBPACK_IMPORTED_MODULE_19__[key];
240
249
  }).bind(0, __WEBPACK_IMPORT_KEY__);
241
250
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
242
- var _components_Title__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__("@/components/Title");
251
+ var _components_Title__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__("@/components/Title");
243
252
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
253
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Title__WEBPACK_IMPORTED_MODULE_20__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
254
+ return _components_Title__WEBPACK_IMPORTED_MODULE_20__[key];
246
255
  }).bind(0, __WEBPACK_IMPORT_KEY__);
247
256
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
248
- var _components_TransitionBox__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__("@/components/TransitionBox");
257
+ var _components_TransitionBox__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__("@/components/TransitionBox");
249
258
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
259
+ for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionBox__WEBPACK_IMPORTED_MODULE_21__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
260
+ return _components_TransitionBox__WEBPACK_IMPORTED_MODULE_21__[key];
252
261
  }).bind(0, __WEBPACK_IMPORT_KEY__);
253
262
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
254
- var _components_TransitionNum__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__("@/components/TransitionNum");
263
+ var _components_TransitionNum__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__("@/components/TransitionNum");
255
264
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
265
+ for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionNum__WEBPACK_IMPORTED_MODULE_22__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
266
+ return _components_TransitionNum__WEBPACK_IMPORTED_MODULE_22__[key];
258
267
  }).bind(0, __WEBPACK_IMPORT_KEY__);
259
268
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
260
- var _components_Trapezium__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__("@/components/Trapezium");
269
+ var _components_Trapezium__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__("@/components/Trapezium");
261
270
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
271
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Trapezium__WEBPACK_IMPORTED_MODULE_23__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
272
+ return _components_Trapezium__WEBPACK_IMPORTED_MODULE_23__[key];
264
273
  }).bind(0, __WEBPACK_IMPORT_KEY__);
265
274
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
266
- var _components_Unify__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__("@/components/Unify");
275
+ var _components_Unify__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__("@/components/Unify");
267
276
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
277
+ for(var __WEBPACK_IMPORT_KEY__ in _components_Unify__WEBPACK_IMPORTED_MODULE_24__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
278
+ return _components_Unify__WEBPACK_IMPORTED_MODULE_24__[key];
270
279
  }).bind(0, __WEBPACK_IMPORT_KEY__);
271
280
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
272
- var _components_WriteExcel__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__("@/components/WriteExcel");
281
+ var _components_WriteExcel__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__("@/components/WriteExcel");
273
282
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
283
+ for(var __WEBPACK_IMPORT_KEY__ in _components_WriteExcel__WEBPACK_IMPORTED_MODULE_25__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
284
+ return _components_WriteExcel__WEBPACK_IMPORTED_MODULE_25__[key];
276
285
  }).bind(0, __WEBPACK_IMPORT_KEY__);
277
286
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
278
- var _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__("@/utils/getReactVersion");
287
+ var _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__("@/utils/getReactVersion");
279
288
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
289
+ for(var __WEBPACK_IMPORT_KEY__ in _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_26__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
290
+ return _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_26__[key];
282
291
  }).bind(0, __WEBPACK_IMPORT_KEY__);
283
292
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
284
- var _utils_index__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__("@/utils/index");
293
+ var _utils_index__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__("@/utils/index");
285
294
  var __WEBPACK_REEXPORT_OBJECT__ = {};
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];
295
+ for(var __WEBPACK_IMPORT_KEY__ in _utils_index__WEBPACK_IMPORTED_MODULE_27__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
296
+ return _utils_index__WEBPACK_IMPORTED_MODULE_27__[key];
288
297
  }).bind(0, __WEBPACK_IMPORT_KEY__);
289
298
  __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
290
299
  })();
package/dist/index.d.ts CHANGED
@@ -7,6 +7,7 @@ export * from "./components/Echart";
7
7
  export * from "./components/Flow";
8
8
  export * from "./components/FormLabel";
9
9
  export * from "./components/HlsPlayer";
10
+ export * from "./components/IconFileType";
10
11
  export * from "./components/InfiniteScroll";
11
12
  export * from "./components/InputFile";
12
13
  export * from "./components/InputFileButton";
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ export * from "./components/Echart.js";
7
7
  export * from "./components/Flow.js";
8
8
  export * from "./components/FormLabel.js";
9
9
  export * from "./components/HlsPlayer.js";
10
+ export * from "./components/IconFileType.js";
10
11
  export * from "./components/InfiniteScroll.js";
11
12
  export * from "./components/InputFile.js";
12
13
  export * from "./components/InputFileButton.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "deepsea-components",
3
- "version": "5.13.1",
3
+ "version": "5.14.0",
4
4
  "description": "格数科技自用组件库",
5
5
  "type": "module",
6
6
  "exports": {
package/src/components/IconFileType.tsx ADDED
@@ -0,0 +1,153 @@
1
+ import { ComponentProps, FC } from "react"
2
+
3
+ const GOLD = (Math.sqrt(5) - 1) / 2
4
+ const GOLD_T = Math.sqrt(1 - GOLD * GOLD)
5
+ const HANDLE_LENGTH = (1 - GOLD) * GOLD_T
6
+
7
+ const FileTypeSize = 512
8
+
9
+ export const IconFileTypeBase: FC<ComponentProps<"svg">> = props => (
10
+ <svg viewBox={`${-(FileTypeSize / 2)} ${-(FileTypeSize / 2)} ${FileTypeSize} ${FileTypeSize}`} {...props} />
11
+ )
12
+
13
+ export interface IconFileTypePagePropsBase {
14
+ /**
15
+ * 书页颜色，默认为 #f31260
16
+ */
17
+ pageColor?: string
18
+ /**
19
+ * 书页宽度，默认为 512 * 0.75
20
+ */
21
+ pageWidth?: number
22
+ /**
23
+ * 书页贝塞尔曲线尺寸，尺寸越大，圆角越大，默认为 512 * 0.75 * 0.618
24
+ */
25
+ pageBessel?: number
26
+ }
27
+
28
+ export interface IconFileTypePageProps extends IconFileTypePagePropsBase, ComponentProps<"path"> {}
29
+
30
+ export const IconFileTypePage: FC<IconFileTypePageProps> = ({
31
+ pageColor = "#f31260",
32
+ pageWidth = FileTypeSize * 0.75,
33
+ pageBessel = FileTypeSize * 0.75 * GOLD,
34
+ ...rest
35
+ }) => {
36
+ const radius = pageBessel * (1 - GOLD)
37
+ const offset = pageBessel * HANDLE_LENGTH
38
+
39
+ return (
40
+ <path
41
+ d={`M ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
42
+ L ${pageWidth * GOLD - pageWidth / 2} ${-(FileTypeSize / 2)}
43
+ L ${pageWidth / 2} ${-(FileTypeSize / 2 - pageWidth * (1 - GOLD))}
44
+ L ${pageWidth / 2} ${FileTypeSize / 2 - radius}
45
+ C ${pageWidth / 2} ${FileTypeSize / 2 - radius + offset} ${pageWidth / 2 - radius + offset} ${FileTypeSize / 2} ${pageWidth / 2 - radius} ${FileTypeSize / 2}
46
+ L ${-(pageWidth / 2 - radius)} ${FileTypeSize / 2}
47
+ C ${-(pageWidth / 2 - radius) - offset} ${FileTypeSize / 2} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius + offset} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius}
48
+ L ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius)}
49
+ C ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius) - offset} ${-(pageWidth / 2 - radius) - offset} ${-(FileTypeSize / 2)} ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
50
+ Z
51
+ `}
52
+ fill={pageColor}
53
+ {...rest}
54
+ />
55
+ )
56
+ }
57
+
58
+ export interface IconFileTypeDogEarPropsBase extends Required<Pick<IconFileTypePagePropsBase, "pageWidth">> {
59
+ /**
60
+ * 折角颜色，默认为 #c20e4d
61
+ */
62
+ dogEarColor?: string
63
+ /**
64
+ * 折角大小，默认为 页面宽度 * (1 - 0.618)
65
+ */
66
+ dogEarSize?: number
67
+ }
68
+
69
+ export interface IconFileTypeDogEarProps extends IconFileTypeDogEarPropsBase, ComponentProps<"path"> {}
70
+
71
+ export const IconFileTypeDogEar: FC<IconFileTypeDogEarProps> = ({ pageWidth, dogEarColor = "#c20e4d", dogEarSize = pageWidth * (1 - GOLD), ...rest }) => (
72
+ <path
73
+ d={`M ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2)}
74
+ L ${pageWidth / 2} ${-(FileTypeSize / 2 - dogEarSize)}
75
+ L ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2 - dogEarSize)}`}
76
+ fill={dogEarColor}
77
+ {...rest}
78
+ />
79
+ )
80
+
81
+ export interface IconFileTypeTextPropsBase {
82
+ /**
83
+ * 文字颜色，默认为 白色
84
+ */
85
+ textColor?: string
86
+ /**
87
+ * 文字大小，默认为 512 * 0.25
88
+ */
89
+ textFontSize?: number
90
+ /**
91
+ * 文字字重，默认为 bold
92
+ */
93
+ textFontWeight?: string
94
+ /**
95
+ * 文字字体
96
+ */
97
+ textFontFamily?: string
98
+ /**
99
+ * 文字 x 轴远点，默认为 0
100
+ */
101
+ textX?: number
102
+ /**
103
+ * 文字 y 轴远点，默认为 512 * 0.25
104
+ */
105
+ textY?: number
106
+ }
107
+
108
+ export interface IconFileTypeTextProps extends IconFileTypeTextPropsBase, ComponentProps<"text"> {}
109
+
110
+ export const IconFileTypeText: FC<IconFileTypeTextProps> = ({
111
+ textColor = "#ffffff",
112
+ textFontSize = FileTypeSize * 0.25,
113
+ textFontWeight = "bold",
114
+ textFontFamily,
115
+ textX = 0,
116
+ textY = FileTypeSize * 0.25,
117
+ ...rest
118
+ }) => (
119
+ <text textAnchor="middle" fill={textColor} x={textX} y={textY} fontSize={textFontSize} fontWeight={textFontWeight} fontFamily={textFontFamily} {...rest} />
120
+ )
121
+
122
+ export interface IconFileTypeProps extends IconFileTypePagePropsBase, Omit<IconFileTypeDogEarPropsBase, "pageWidth">, IconFileTypeTextPropsBase, ComponentProps<"svg"> {}
123
+
124
+ export const IconFileType: FC<IconFileTypeProps> = ({
125
+ pageColor,
126
+ pageWidth = FileTypeSize * 0.75,
127
+ pageBessel,
128
+ dogEarColor,
129
+ dogEarSize,
130
+ textColor,
131
+ textFontSize,
132
+ textFontWeight,
133
+ textFontFamily,
134
+ textX,
135
+ textY,
136
+ children,
137
+ ...rest
138
+ }) => (
139
+ <IconFileTypeBase {...rest}>
140
+ <IconFileTypePage pageColor={pageColor} pageWidth={pageWidth} pageBessel={pageBessel} />
141
+ <IconFileTypeDogEar pageWidth={pageWidth} dogEarColor={dogEarColor} dogEarSize={dogEarSize} />
142
+ <IconFileTypeText
143
+ textColor={textColor}
144
+ textFontSize={textFontSize}
145
+ textFontWeight={textFontWeight}
146
+ textFontFamily={textFontFamily}
147
+ textX={textX}
148
+ textY={textY}
149
+ >
150
+ {children}
151
+ </IconFileTypeText>
152
+ </IconFileTypeBase>
153
+ )
package/src/components/ScrollMask.module.css CHANGED
@@ -1,87 +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
- }
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.1)),
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, 8px);
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, 8px);
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, 8px);
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, 8px);
82
+ height: 100%;
83
+ right: 0;
84
+ bottom: 50%;
85
+ transform: translateY(50%);
86
+ --scroll-mask-direction: left;
87
+ }
package/src/components/ScrollMask.tsx CHANGED
@@ -1,68 +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
- }
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 = 8,
24
+ from = "rgba(0, 0, 0, 0.1)",
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}px 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
@@ -7,6 +7,7 @@ export * from "@/components/Echart"
7
7
  export * from "@/components/Flow"
8
8
  export * from "@/components/FormLabel"
9
9
  export * from "@/components/HlsPlayer"
10
+ export * from "@/components/IconFileType"
10
11
  export * from "@/components/InfiniteScroll"
11
12
  export * from "@/components/InputFile"
12
13
  export * from "@/components/InputFileButton"