@bbki.ng/components 1.5.25 → 1.5.28
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/index.d.ts +17 -6
- package/dist/index.js +171 -18
- package/dist/index.mjs +170 -17
- package/package.json +6 -3
package/dist/index.d.ts
CHANGED
|
@@ -263,12 +263,23 @@ interface GalleryProps extends Omit<RandomRowsLayoutProps, "classNames" | "cells
|
|
|
263
263
|
}
|
|
264
264
|
declare const Gallery: (props: GalleryProps) => JSX.Element;
|
|
265
265
|
|
|
266
|
-
interface
|
|
267
|
-
|
|
268
|
-
|
|
266
|
+
interface ISettings {
|
|
267
|
+
canvas?: HTMLCanvasElement;
|
|
268
|
+
step?: number;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
interface IOpt {
|
|
272
|
+
multiplier: number;
|
|
273
|
+
color: number[];
|
|
274
|
+
spiralConstA: number;
|
|
275
|
+
spiralConstB: number;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
interface LoadingSpiralProps extends IOpt, ISettings {
|
|
269
279
|
className?: string;
|
|
270
|
-
|
|
280
|
+
maxWidth?: number;
|
|
281
|
+
offset?: number;
|
|
271
282
|
}
|
|
272
|
-
declare const
|
|
283
|
+
declare const LoadingSpiral: (props?: LoadingSpiralProps | undefined) => JSX.Element;
|
|
273
284
|
|
|
274
|
-
export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, Gallery, GalleryProps, ImageDropProps, ImagePreviewerProps, ImageRenderer, Img, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps,
|
|
285
|
+
export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, Gallery, GalleryProps, ImageDropProps, ImagePreviewerProps, ImageRenderer, Img, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, LoadingSpiral, LoadingSpiralProps, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };
|
package/dist/index.js
CHANGED
|
@@ -74,6 +74,7 @@ __export(src_exports, {
|
|
|
74
74
|
LinkList: () => LinkList,
|
|
75
75
|
LinkListSkeleton: () => LinkListSkeleton,
|
|
76
76
|
List: () => List,
|
|
77
|
+
LoadingSpiral: () => LoadingSpiral,
|
|
77
78
|
Logo: () => Logo,
|
|
78
79
|
Nav: () => Nav,
|
|
79
80
|
NoiseCover: () => NoiseCover,
|
|
@@ -83,7 +84,6 @@ __export(src_exports, {
|
|
|
83
84
|
PopConfirm: () => PopConfirm,
|
|
84
85
|
Skeleton: () => Skeleton,
|
|
85
86
|
SkeletonColor: () => SkeletonColor,
|
|
86
|
-
Spinner: () => Spinner,
|
|
87
87
|
Table: () => Table,
|
|
88
88
|
Tag: () => Tag,
|
|
89
89
|
Tags: () => Tags,
|
|
@@ -1039,23 +1039,176 @@ var Gallery = (props) => {
|
|
|
1039
1039
|
}, rest)), children);
|
|
1040
1040
|
};
|
|
1041
1041
|
|
|
1042
|
-
// src/
|
|
1042
|
+
// src/loading-spiral/LoadingSpiral.tsx
|
|
1043
|
+
var import_phenomenon = __toESM(require("phenomenon"));
|
|
1043
1044
|
var import_classnames13 = __toESM(require("classnames"));
|
|
1044
|
-
var
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
}
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1045
|
+
var import_react23 = __toESM(require("react"));
|
|
1046
|
+
|
|
1047
|
+
// src/loading-spiral/createSettings.ts
|
|
1048
|
+
var createSettings = (settings) => {
|
|
1049
|
+
const { canvas, step = 0.1 } = settings;
|
|
1050
|
+
const uniforms = {
|
|
1051
|
+
uProgress: {
|
|
1052
|
+
type: "float",
|
|
1053
|
+
value: 0
|
|
1054
|
+
}
|
|
1055
|
+
};
|
|
1056
|
+
return {
|
|
1057
|
+
uniforms,
|
|
1058
|
+
shouldRender: true,
|
|
1059
|
+
canvas,
|
|
1060
|
+
onRender: (r) => {
|
|
1061
|
+
const { uProgress } = r.uniforms;
|
|
1062
|
+
uProgress.value += step;
|
|
1063
|
+
}
|
|
1064
|
+
};
|
|
1065
|
+
};
|
|
1066
|
+
|
|
1067
|
+
// src/loading-spiral/constants.ts
|
|
1068
|
+
var VERTEX_SHADER = `
|
|
1069
|
+
attribute vec3 ${"aPositionStart" /* POSITION_START */};
|
|
1070
|
+
attribute vec3 ${"aColor" /* COLOR */};
|
|
1071
|
+
uniform mat4 uProjectionMatrix;
|
|
1072
|
+
uniform mat4 uModelMatrix;
|
|
1073
|
+
uniform mat4 uViewMatrix;
|
|
1074
|
+
uniform float uProgress;
|
|
1075
|
+
varying vec3 vColor;
|
|
1076
|
+
mat4 rotate(float _angle){
|
|
1077
|
+
return mat4(
|
|
1078
|
+
cos(_angle),-sin(_angle), 0.0, 0.0,
|
|
1079
|
+
sin(_angle),cos(_angle), 0.0, 0.0,
|
|
1080
|
+
0.0, 0.0, 0.0, 0.0,
|
|
1081
|
+
0.0, 0.0, 0.0, 1.0
|
|
1082
|
+
);
|
|
1083
|
+
}
|
|
1084
|
+
mat4 translate(float _angle){
|
|
1085
|
+
return mat4(
|
|
1086
|
+
1.0, 0.0, 0.0, sin(_angle) * 0.04,
|
|
1087
|
+
0.0, 1.0, 0.0, cos(_angle) * 0.04,
|
|
1088
|
+
0.0, 0.0, 1.0, 0.0,
|
|
1089
|
+
0.0, 0.0, 0.0, 1.0
|
|
1090
|
+
);
|
|
1091
|
+
}
|
|
1092
|
+
void main(){
|
|
1093
|
+
gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
|
|
1094
|
+
gl_PointSize = 2.0;
|
|
1095
|
+
vColor = ${"aColor" /* COLOR */};
|
|
1096
|
+
}
|
|
1097
|
+
`;
|
|
1098
|
+
var FRAGMENT_SHADER = `
|
|
1099
|
+
precision mediump float;
|
|
1100
|
+
uniform float uProgress;
|
|
1101
|
+
|
|
1102
|
+
varying vec3 vColor;
|
|
1103
|
+
void main(){
|
|
1104
|
+
gl_FragColor = vec4(vColor, 1.0);
|
|
1105
|
+
}
|
|
1106
|
+
`;
|
|
1107
|
+
|
|
1108
|
+
// src/loading-spiral/utils.ts
|
|
1109
|
+
var scaleIndex = (multiplier, max) => (index) => {
|
|
1110
|
+
return index / (multiplier / max);
|
|
1111
|
+
};
|
|
1112
|
+
var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
|
|
1113
|
+
var rgba = (val) => {
|
|
1114
|
+
const [r, g, b, a] = val;
|
|
1115
|
+
return [r / 255, g / 255, b / 255, a];
|
|
1116
|
+
};
|
|
1117
|
+
var randOpacityRgb = (val) => {
|
|
1118
|
+
const [r, g, b] = val;
|
|
1119
|
+
return rgba([r, g, b, Math.random()]);
|
|
1120
|
+
};
|
|
1121
|
+
|
|
1122
|
+
// src/loading-spiral/createOptions.ts
|
|
1123
|
+
var DEFAULT_OPT = {
|
|
1124
|
+
multiplier: 3e4,
|
|
1125
|
+
color: [209, 213, 219, 1],
|
|
1126
|
+
spiralConstA: 0.04,
|
|
1127
|
+
spiralConstB: 0.16
|
|
1128
|
+
};
|
|
1129
|
+
var createOptions = (opt = DEFAULT_OPT) => {
|
|
1130
|
+
const { multiplier, spiralConstA, spiralConstB, color } = opt;
|
|
1131
|
+
const attributes = [
|
|
1132
|
+
{
|
|
1133
|
+
name: "aPositionStart" /* POSITION_START */,
|
|
1134
|
+
data: (index) => {
|
|
1135
|
+
const ang = scaleIndex2ang(multiplier)(index);
|
|
1136
|
+
const A = spiralConstA;
|
|
1137
|
+
const B = spiralConstB;
|
|
1138
|
+
const xPos = A * Math.pow(Math.E, B * ang) * Math.cos(ang);
|
|
1139
|
+
const yPos = A * Math.pow(Math.E, B * ang) * Math.sin(ang);
|
|
1140
|
+
return [xPos, yPos, 1];
|
|
1141
|
+
},
|
|
1142
|
+
size: 3
|
|
1143
|
+
},
|
|
1144
|
+
{
|
|
1145
|
+
name: "aColor" /* COLOR */,
|
|
1146
|
+
data: () => randOpacityRgb(color),
|
|
1147
|
+
size: 3
|
|
1148
|
+
}
|
|
1149
|
+
];
|
|
1150
|
+
return {
|
|
1151
|
+
attributes,
|
|
1152
|
+
multiplier,
|
|
1153
|
+
vertex: VERTEX_SHADER,
|
|
1154
|
+
fragment: FRAGMENT_SHADER
|
|
1155
|
+
};
|
|
1156
|
+
};
|
|
1157
|
+
|
|
1158
|
+
// src/loading-spiral/useCanvasRef.ts
|
|
1159
|
+
var import_react22 = require("react");
|
|
1160
|
+
var useResizedCanvasRef = (maxSize, offset) => {
|
|
1161
|
+
const canvasRef = (0, import_react22.useRef)(null);
|
|
1162
|
+
const containerRef = (0, import_react22.useRef)(null);
|
|
1163
|
+
(0, import_react22.useEffect)(() => {
|
|
1164
|
+
const canvas = canvasRef.current;
|
|
1165
|
+
const container = containerRef.current;
|
|
1166
|
+
if (!canvas || !container)
|
|
1167
|
+
return;
|
|
1168
|
+
const { width, height } = container.getBoundingClientRect();
|
|
1169
|
+
const canvasSize = Math.max(width, height);
|
|
1170
|
+
const size = Math.min(canvasSize, maxSize);
|
|
1171
|
+
canvas.style.top = `${offset}px`;
|
|
1172
|
+
canvas.setAttribute("width", `${size}`);
|
|
1173
|
+
canvas.setAttribute("height", `${size}`);
|
|
1174
|
+
}, []);
|
|
1175
|
+
return {
|
|
1176
|
+
canvasRef,
|
|
1177
|
+
containerRef
|
|
1178
|
+
};
|
|
1179
|
+
};
|
|
1180
|
+
|
|
1181
|
+
// src/loading-spiral/LoadingSpiral.tsx
|
|
1182
|
+
var LoadingSpiral = (props) => {
|
|
1183
|
+
const _a = props || {}, {
|
|
1184
|
+
className,
|
|
1185
|
+
canvas,
|
|
1186
|
+
step,
|
|
1187
|
+
maxWidth = 1e3,
|
|
1188
|
+
offset = -100
|
|
1189
|
+
} = _a, rest = __objRest(_a, [
|
|
1190
|
+
"className",
|
|
1191
|
+
"canvas",
|
|
1192
|
+
"step",
|
|
1193
|
+
"maxWidth",
|
|
1194
|
+
"offset"
|
|
1195
|
+
]);
|
|
1196
|
+
const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth, offset);
|
|
1197
|
+
(0, import_react23.useEffect)(() => {
|
|
1198
|
+
if (!canvasRef.current) {
|
|
1199
|
+
return;
|
|
1200
|
+
}
|
|
1201
|
+
const phenomenon = new import_phenomenon.default({
|
|
1202
|
+
settings: createSettings({ canvas: canvasRef.current, step })
|
|
1203
|
+
});
|
|
1204
|
+
phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
|
|
1205
|
+
}, []);
|
|
1206
|
+
return /* @__PURE__ */ import_react23.default.createElement("div", {
|
|
1207
|
+
className: (0, import_classnames13.default)("fixed h-full w-full overflow-hidden flex justify-center items-center", className),
|
|
1208
|
+
ref: containerRef
|
|
1209
|
+
}, /* @__PURE__ */ import_react23.default.createElement("canvas", {
|
|
1210
|
+
ref: canvasRef,
|
|
1211
|
+
className: "relative"
|
|
1059
1212
|
}));
|
|
1060
1213
|
};
|
|
1061
1214
|
module.exports = __toCommonJS(src_exports);
|
|
@@ -1077,6 +1230,7 @@ module.exports = __toCommonJS(src_exports);
|
|
|
1077
1230
|
LinkList,
|
|
1078
1231
|
LinkListSkeleton,
|
|
1079
1232
|
List,
|
|
1233
|
+
LoadingSpiral,
|
|
1080
1234
|
Logo,
|
|
1081
1235
|
Nav,
|
|
1082
1236
|
NoiseCover,
|
|
@@ -1086,7 +1240,6 @@ module.exports = __toCommonJS(src_exports);
|
|
|
1086
1240
|
PopConfirm,
|
|
1087
1241
|
Skeleton,
|
|
1088
1242
|
SkeletonColor,
|
|
1089
|
-
Spinner,
|
|
1090
1243
|
Table,
|
|
1091
1244
|
Tag,
|
|
1092
1245
|
Tags,
|
package/dist/index.mjs
CHANGED
|
@@ -981,23 +981,176 @@ var Gallery = (props) => {
|
|
|
981
981
|
}, rest)), children);
|
|
982
982
|
};
|
|
983
983
|
|
|
984
|
-
// src/
|
|
984
|
+
// src/loading-spiral/LoadingSpiral.tsx
|
|
985
|
+
import Phenomenon from "phenomenon";
|
|
985
986
|
import classNames7 from "classnames";
|
|
986
|
-
import React21 from "react";
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
}
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
987
|
+
import React21, { useEffect as useEffect4 } from "react";
|
|
988
|
+
|
|
989
|
+
// src/loading-spiral/createSettings.ts
|
|
990
|
+
var createSettings = (settings) => {
|
|
991
|
+
const { canvas, step = 0.1 } = settings;
|
|
992
|
+
const uniforms = {
|
|
993
|
+
uProgress: {
|
|
994
|
+
type: "float",
|
|
995
|
+
value: 0
|
|
996
|
+
}
|
|
997
|
+
};
|
|
998
|
+
return {
|
|
999
|
+
uniforms,
|
|
1000
|
+
shouldRender: true,
|
|
1001
|
+
canvas,
|
|
1002
|
+
onRender: (r) => {
|
|
1003
|
+
const { uProgress } = r.uniforms;
|
|
1004
|
+
uProgress.value += step;
|
|
1005
|
+
}
|
|
1006
|
+
};
|
|
1007
|
+
};
|
|
1008
|
+
|
|
1009
|
+
// src/loading-spiral/constants.ts
|
|
1010
|
+
var VERTEX_SHADER = `
|
|
1011
|
+
attribute vec3 ${"aPositionStart" /* POSITION_START */};
|
|
1012
|
+
attribute vec3 ${"aColor" /* COLOR */};
|
|
1013
|
+
uniform mat4 uProjectionMatrix;
|
|
1014
|
+
uniform mat4 uModelMatrix;
|
|
1015
|
+
uniform mat4 uViewMatrix;
|
|
1016
|
+
uniform float uProgress;
|
|
1017
|
+
varying vec3 vColor;
|
|
1018
|
+
mat4 rotate(float _angle){
|
|
1019
|
+
return mat4(
|
|
1020
|
+
cos(_angle),-sin(_angle), 0.0, 0.0,
|
|
1021
|
+
sin(_angle),cos(_angle), 0.0, 0.0,
|
|
1022
|
+
0.0, 0.0, 0.0, 0.0,
|
|
1023
|
+
0.0, 0.0, 0.0, 1.0
|
|
1024
|
+
);
|
|
1025
|
+
}
|
|
1026
|
+
mat4 translate(float _angle){
|
|
1027
|
+
return mat4(
|
|
1028
|
+
1.0, 0.0, 0.0, sin(_angle) * 0.04,
|
|
1029
|
+
0.0, 1.0, 0.0, cos(_angle) * 0.04,
|
|
1030
|
+
0.0, 0.0, 1.0, 0.0,
|
|
1031
|
+
0.0, 0.0, 0.0, 1.0
|
|
1032
|
+
);
|
|
1033
|
+
}
|
|
1034
|
+
void main(){
|
|
1035
|
+
gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
|
|
1036
|
+
gl_PointSize = 2.0;
|
|
1037
|
+
vColor = ${"aColor" /* COLOR */};
|
|
1038
|
+
}
|
|
1039
|
+
`;
|
|
1040
|
+
var FRAGMENT_SHADER = `
|
|
1041
|
+
precision mediump float;
|
|
1042
|
+
uniform float uProgress;
|
|
1043
|
+
|
|
1044
|
+
varying vec3 vColor;
|
|
1045
|
+
void main(){
|
|
1046
|
+
gl_FragColor = vec4(vColor, 1.0);
|
|
1047
|
+
}
|
|
1048
|
+
`;
|
|
1049
|
+
|
|
1050
|
+
// src/loading-spiral/utils.ts
|
|
1051
|
+
var scaleIndex = (multiplier, max) => (index) => {
|
|
1052
|
+
return index / (multiplier / max);
|
|
1053
|
+
};
|
|
1054
|
+
var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
|
|
1055
|
+
var rgba = (val) => {
|
|
1056
|
+
const [r, g, b, a] = val;
|
|
1057
|
+
return [r / 255, g / 255, b / 255, a];
|
|
1058
|
+
};
|
|
1059
|
+
var randOpacityRgb = (val) => {
|
|
1060
|
+
const [r, g, b] = val;
|
|
1061
|
+
return rgba([r, g, b, Math.random()]);
|
|
1062
|
+
};
|
|
1063
|
+
|
|
1064
|
+
// src/loading-spiral/createOptions.ts
|
|
1065
|
+
var DEFAULT_OPT = {
|
|
1066
|
+
multiplier: 3e4,
|
|
1067
|
+
color: [209, 213, 219, 1],
|
|
1068
|
+
spiralConstA: 0.04,
|
|
1069
|
+
spiralConstB: 0.16
|
|
1070
|
+
};
|
|
1071
|
+
var createOptions = (opt = DEFAULT_OPT) => {
|
|
1072
|
+
const { multiplier, spiralConstA, spiralConstB, color } = opt;
|
|
1073
|
+
const attributes = [
|
|
1074
|
+
{
|
|
1075
|
+
name: "aPositionStart" /* POSITION_START */,
|
|
1076
|
+
data: (index) => {
|
|
1077
|
+
const ang = scaleIndex2ang(multiplier)(index);
|
|
1078
|
+
const A = spiralConstA;
|
|
1079
|
+
const B = spiralConstB;
|
|
1080
|
+
const xPos = A * Math.pow(Math.E, B * ang) * Math.cos(ang);
|
|
1081
|
+
const yPos = A * Math.pow(Math.E, B * ang) * Math.sin(ang);
|
|
1082
|
+
return [xPos, yPos, 1];
|
|
1083
|
+
},
|
|
1084
|
+
size: 3
|
|
1085
|
+
},
|
|
1086
|
+
{
|
|
1087
|
+
name: "aColor" /* COLOR */,
|
|
1088
|
+
data: () => randOpacityRgb(color),
|
|
1089
|
+
size: 3
|
|
1090
|
+
}
|
|
1091
|
+
];
|
|
1092
|
+
return {
|
|
1093
|
+
attributes,
|
|
1094
|
+
multiplier,
|
|
1095
|
+
vertex: VERTEX_SHADER,
|
|
1096
|
+
fragment: FRAGMENT_SHADER
|
|
1097
|
+
};
|
|
1098
|
+
};
|
|
1099
|
+
|
|
1100
|
+
// src/loading-spiral/useCanvasRef.ts
|
|
1101
|
+
import { useEffect as useEffect3, useRef as useRef2 } from "react";
|
|
1102
|
+
var useResizedCanvasRef = (maxSize, offset) => {
|
|
1103
|
+
const canvasRef = useRef2(null);
|
|
1104
|
+
const containerRef = useRef2(null);
|
|
1105
|
+
useEffect3(() => {
|
|
1106
|
+
const canvas = canvasRef.current;
|
|
1107
|
+
const container = containerRef.current;
|
|
1108
|
+
if (!canvas || !container)
|
|
1109
|
+
return;
|
|
1110
|
+
const { width, height } = container.getBoundingClientRect();
|
|
1111
|
+
const canvasSize = Math.max(width, height);
|
|
1112
|
+
const size = Math.min(canvasSize, maxSize);
|
|
1113
|
+
canvas.style.top = `${offset}px`;
|
|
1114
|
+
canvas.setAttribute("width", `${size}`);
|
|
1115
|
+
canvas.setAttribute("height", `${size}`);
|
|
1116
|
+
}, []);
|
|
1117
|
+
return {
|
|
1118
|
+
canvasRef,
|
|
1119
|
+
containerRef
|
|
1120
|
+
};
|
|
1121
|
+
};
|
|
1122
|
+
|
|
1123
|
+
// src/loading-spiral/LoadingSpiral.tsx
|
|
1124
|
+
var LoadingSpiral = (props) => {
|
|
1125
|
+
const _a = props || {}, {
|
|
1126
|
+
className,
|
|
1127
|
+
canvas,
|
|
1128
|
+
step,
|
|
1129
|
+
maxWidth = 1e3,
|
|
1130
|
+
offset = -100
|
|
1131
|
+
} = _a, rest = __objRest(_a, [
|
|
1132
|
+
"className",
|
|
1133
|
+
"canvas",
|
|
1134
|
+
"step",
|
|
1135
|
+
"maxWidth",
|
|
1136
|
+
"offset"
|
|
1137
|
+
]);
|
|
1138
|
+
const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth, offset);
|
|
1139
|
+
useEffect4(() => {
|
|
1140
|
+
if (!canvasRef.current) {
|
|
1141
|
+
return;
|
|
1142
|
+
}
|
|
1143
|
+
const phenomenon = new Phenomenon({
|
|
1144
|
+
settings: createSettings({ canvas: canvasRef.current, step })
|
|
1145
|
+
});
|
|
1146
|
+
phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
|
|
1147
|
+
}, []);
|
|
1148
|
+
return /* @__PURE__ */ React21.createElement("div", {
|
|
1149
|
+
className: classNames7("fixed h-full w-full overflow-hidden flex justify-center items-center", className),
|
|
1150
|
+
ref: containerRef
|
|
1151
|
+
}, /* @__PURE__ */ React21.createElement("canvas", {
|
|
1152
|
+
ref: canvasRef,
|
|
1153
|
+
className: "relative"
|
|
1001
1154
|
}));
|
|
1002
1155
|
};
|
|
1003
1156
|
export {
|
|
@@ -1017,6 +1170,7 @@ export {
|
|
|
1017
1170
|
LinkList,
|
|
1018
1171
|
LinkListSkeleton,
|
|
1019
1172
|
List,
|
|
1173
|
+
LoadingSpiral,
|
|
1020
1174
|
Logo,
|
|
1021
1175
|
Nav,
|
|
1022
1176
|
NoiseCover,
|
|
@@ -1026,7 +1180,6 @@ export {
|
|
|
1026
1180
|
PopConfirm,
|
|
1027
1181
|
Skeleton,
|
|
1028
1182
|
SkeletonColor,
|
|
1029
|
-
Spinner,
|
|
1030
1183
|
Table,
|
|
1031
1184
|
Tag,
|
|
1032
1185
|
Tags,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bbki.ng/components",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.28",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -33,8 +33,11 @@
|
|
|
33
33
|
"access": "public"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
+
"@tailwindcss/typography": "^0.5.0",
|
|
36
37
|
"classnames": "^2.3.1",
|
|
37
|
-
"react-router-dom": "5.3.0"
|
|
38
|
-
|
|
38
|
+
"react-router-dom": "5.3.0"
|
|
39
|
+
},
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"phenomenon": "^1.6.0"
|
|
39
42
|
}
|
|
40
43
|
}
|