deepsea-components 2.1.2 → 2.2.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.
- package/dist/cjs/index.js +1 -2
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/skeleton.css +18 -0
- package/dist/esm/index.js +522 -652
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/skeleton.css +18 -0
- package/package.json +4 -4
- package/src/index.tsx +1 -2
- package/src/skeleton.css +18 -0
package/dist/esm/index.js
CHANGED
|
@@ -1,421 +1,297 @@
|
|
|
1
|
-
var _templateObject;
|
|
2
|
-
var _excluded = ["multiple", "type", "onChange", "disabled", "clearAfterChange"],
|
|
3
|
-
_excluded2 = ["onChange"],
|
|
4
|
-
_excluded3 = ["data", "fileName", "onClick"],
|
|
5
|
-
_excluded4 = ["style", "containerClassName", "containerStyle", "children", "vertical", "horizontal", "time"],
|
|
6
|
-
_excluded5 = ["outerWidth", "innerWidth", "style"],
|
|
7
|
-
_excluded6 = ["itemWidth", "itemHeight", "columnGap", "rowGap", "maxRows", "data", "render", "keyExactor", "className", "style", "containerClassName", "containerStyle", "throttle", "transitionDuration", "onSizeChange"],
|
|
8
|
-
_excluded7 = ["top", "bottom", "height", "borderRadius", "style"],
|
|
9
|
-
_excluded8 = ["outerRadius", "innerRadius", "count", "angel", "style"],
|
|
10
|
-
_excluded9 = ["children", "period", "numToStr"],
|
|
11
|
-
_excluded10 = ["width", "height", "radius", "startAngel", "gapAngel", "align", "style", "direction", "reverse", "separator", "children"],
|
|
12
|
-
_excluded11 = ["children", "containerClassName", "containerStyle", "options", "className"],
|
|
13
|
-
_excluded12 = ["thumbWidth"];
|
|
14
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
16
|
-
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
17
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
20
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
21
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
22
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
23
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
24
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
25
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
26
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
27
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
28
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
29
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
30
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
31
|
-
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
32
1
|
import { css } from "@emotion/css";
|
|
33
|
-
import clsx from "
|
|
34
|
-
import { drawArc, setFrameInterval } from "deepsea-tools";
|
|
2
|
+
import { drawArc, setFrameInterval, clsx } from "deepsea-tools";
|
|
35
3
|
import { Fragment, forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
|
|
36
4
|
import SmoothScrollBar from "smooth-scrollbar";
|
|
37
5
|
import { read, utils, writeFile } from "xlsx";
|
|
38
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
39
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
40
|
-
export function getFileData(
|
|
41
|
-
|
|
8
|
+
export async function getFileData(file, type) {
|
|
9
|
+
const fileReader = new FileReader();
|
|
10
|
+
switch (type) {
|
|
11
|
+
case "arrayBuffer":
|
|
12
|
+
fileReader.readAsArrayBuffer(file);
|
|
13
|
+
break;
|
|
14
|
+
case "binary":
|
|
15
|
+
fileReader.readAsBinaryString(file);
|
|
16
|
+
break;
|
|
17
|
+
case "base64":
|
|
18
|
+
fileReader.readAsDataURL(file);
|
|
19
|
+
break;
|
|
20
|
+
case "text":
|
|
21
|
+
fileReader.readAsText(file);
|
|
22
|
+
break;
|
|
23
|
+
default:
|
|
24
|
+
return file;
|
|
25
|
+
}
|
|
26
|
+
return new Promise(resolve => {
|
|
27
|
+
fileReader.addEventListener("load", () => {
|
|
28
|
+
resolve(fileReader.result);
|
|
29
|
+
});
|
|
30
|
+
});
|
|
42
31
|
}
|
|
43
32
|
|
|
44
33
|
/** 专用于读取文件的组件 */
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
return _context2.abrupt("return", new Promise(function (resolve) {
|
|
71
|
-
fileReader.addEventListener("load", function () {
|
|
72
|
-
resolve(fileReader.result);
|
|
73
|
-
});
|
|
74
|
-
}));
|
|
75
|
-
case 14:
|
|
76
|
-
case "end":
|
|
77
|
-
return _context2.stop();
|
|
78
|
-
}
|
|
79
|
-
}, _callee2);
|
|
80
|
-
}));
|
|
81
|
-
return _getFileData.apply(this, arguments);
|
|
82
|
-
}
|
|
83
|
-
export var InputFile = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
84
|
-
var _props$multiple = props.multiple,
|
|
85
|
-
multiple = _props$multiple === void 0 ? false : _props$multiple,
|
|
86
|
-
_props$type = props.type,
|
|
87
|
-
type = _props$type === void 0 ? "file" : _props$type,
|
|
88
|
-
onChange = props.onChange,
|
|
89
|
-
inputDisabled = props.disabled,
|
|
90
|
-
clearAfterChange = props.clearAfterChange,
|
|
91
|
-
others = _objectWithoutProperties(props, _excluded);
|
|
92
|
-
var _useState = useState(false),
|
|
93
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
94
|
-
disabled = _useState2[0],
|
|
95
|
-
setDisabled = _useState2[1];
|
|
96
|
-
function onInputChange(_x3) {
|
|
97
|
-
return _onInputChange.apply(this, arguments);
|
|
98
|
-
}
|
|
99
|
-
function _onInputChange() {
|
|
100
|
-
_onInputChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
|
|
101
|
-
var input, files, result, _i, _Array$from, file;
|
|
102
|
-
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
103
|
-
while (1) switch (_context.prev = _context.next) {
|
|
104
|
-
case 0:
|
|
105
|
-
input = e.target;
|
|
106
|
-
files = input.files;
|
|
107
|
-
if (!(!files || files.length === 0)) {
|
|
108
|
-
_context.next = 4;
|
|
109
|
-
break;
|
|
110
|
-
}
|
|
111
|
-
return _context.abrupt("return");
|
|
112
|
-
case 4:
|
|
113
|
-
setDisabled(true);
|
|
114
|
-
_context.prev = 5;
|
|
115
|
-
if (!multiple) {
|
|
116
|
-
_context.next = 24;
|
|
117
|
-
break;
|
|
118
|
-
}
|
|
119
|
-
result = [];
|
|
120
|
-
_i = 0, _Array$from = Array.from(files);
|
|
121
|
-
case 9:
|
|
122
|
-
if (!(_i < _Array$from.length)) {
|
|
123
|
-
_context.next = 21;
|
|
124
|
-
break;
|
|
125
|
-
}
|
|
126
|
-
file = _Array$from[_i];
|
|
127
|
-
_context.t0 = result;
|
|
128
|
-
_context.next = 14;
|
|
129
|
-
return getFileData(file, type);
|
|
130
|
-
case 14:
|
|
131
|
-
_context.t1 = _context.sent;
|
|
132
|
-
_context.t2 = file;
|
|
133
|
-
_context.t3 = {
|
|
134
|
-
result: _context.t1,
|
|
135
|
-
file: _context.t2
|
|
136
|
-
};
|
|
137
|
-
_context.t0.push.call(_context.t0, _context.t3);
|
|
138
|
-
case 18:
|
|
139
|
-
_i++;
|
|
140
|
-
_context.next = 9;
|
|
141
|
-
break;
|
|
142
|
-
case 21:
|
|
143
|
-
onChange === null || onChange === void 0 || onChange(result);
|
|
144
|
-
_context.next = 33;
|
|
145
|
-
break;
|
|
146
|
-
case 24:
|
|
147
|
-
_context.t4 = onChange === null || onChange === void 0;
|
|
148
|
-
if (_context.t4) {
|
|
149
|
-
_context.next = 33;
|
|
150
|
-
break;
|
|
151
|
-
}
|
|
152
|
-
_context.t5 = onChange;
|
|
153
|
-
_context.next = 29;
|
|
154
|
-
return getFileData(files[0], type);
|
|
155
|
-
case 29:
|
|
156
|
-
_context.t6 = _context.sent;
|
|
157
|
-
_context.t7 = files[0];
|
|
158
|
-
_context.t8 = {
|
|
159
|
-
result: _context.t6,
|
|
160
|
-
file: _context.t7
|
|
161
|
-
};
|
|
162
|
-
(0, _context.t5)(_context.t8);
|
|
163
|
-
case 33:
|
|
164
|
-
setDisabled(false);
|
|
165
|
-
if (clearAfterChange) input.value = "";
|
|
166
|
-
_context.next = 42;
|
|
167
|
-
break;
|
|
168
|
-
case 37:
|
|
169
|
-
_context.prev = 37;
|
|
170
|
-
_context.t9 = _context["catch"](5);
|
|
171
|
-
setDisabled(false);
|
|
172
|
-
if (clearAfterChange) input.value = "";
|
|
173
|
-
throw _context.t9;
|
|
174
|
-
case 42:
|
|
175
|
-
case "end":
|
|
176
|
-
return _context.stop();
|
|
34
|
+
export const InputFile = /*#__PURE__*/forwardRef((props, ref) => {
|
|
35
|
+
const {
|
|
36
|
+
multiple = false,
|
|
37
|
+
type = "file",
|
|
38
|
+
onChange,
|
|
39
|
+
disabled: inputDisabled,
|
|
40
|
+
clearAfterChange,
|
|
41
|
+
...others
|
|
42
|
+
} = props;
|
|
43
|
+
const [disabled, setDisabled] = useState(false);
|
|
44
|
+
async function onInputChange(e) {
|
|
45
|
+
const input = e.target;
|
|
46
|
+
const {
|
|
47
|
+
files
|
|
48
|
+
} = input;
|
|
49
|
+
if (!files || files.length === 0) return;
|
|
50
|
+
setDisabled(true);
|
|
51
|
+
try {
|
|
52
|
+
if (multiple) {
|
|
53
|
+
const result = [];
|
|
54
|
+
for (const file of Array.from(files)) {
|
|
55
|
+
result.push({
|
|
56
|
+
result: await getFileData(file, type),
|
|
57
|
+
file
|
|
58
|
+
});
|
|
177
59
|
}
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
60
|
+
onChange?.(result);
|
|
61
|
+
} else {
|
|
62
|
+
onChange?.({
|
|
63
|
+
result: await getFileData(files[0], type),
|
|
64
|
+
file: files[0]
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
setDisabled(false);
|
|
68
|
+
if (clearAfterChange) input.value = "";
|
|
69
|
+
} catch (error) {
|
|
70
|
+
setDisabled(false);
|
|
71
|
+
if (clearAfterChange) input.value = "";
|
|
72
|
+
throw error;
|
|
73
|
+
}
|
|
181
74
|
}
|
|
182
|
-
return /*#__PURE__*/_jsx("input",
|
|
75
|
+
return /*#__PURE__*/_jsx("input", {
|
|
183
76
|
disabled: disabled && inputDisabled,
|
|
184
77
|
ref: ref,
|
|
185
78
|
type: "file",
|
|
186
79
|
multiple: multiple,
|
|
187
|
-
onChange: onInputChange
|
|
188
|
-
|
|
80
|
+
onChange: onInputChange,
|
|
81
|
+
...others
|
|
82
|
+
});
|
|
189
83
|
});
|
|
190
84
|
/** 专门用于读取 excel 的组件 */
|
|
191
|
-
export
|
|
192
|
-
|
|
193
|
-
|
|
85
|
+
export const ImportExcel = /*#__PURE__*/forwardRef((props, ref) => {
|
|
86
|
+
const {
|
|
87
|
+
onChange,
|
|
88
|
+
...others
|
|
89
|
+
} = props;
|
|
194
90
|
function onInputChange(data) {
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
if (
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
Object.keys(it).filter(
|
|
201
|
-
return key !== "__rowNum__";
|
|
202
|
-
}).forEach(function (key) {
|
|
203
|
-
return _[key] = String(it[key]);
|
|
204
|
-
});
|
|
91
|
+
const wb = read(data.result);
|
|
92
|
+
const result = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
|
93
|
+
if (typeof result === "object") {
|
|
94
|
+
const $ = result.map(it => {
|
|
95
|
+
const _ = {};
|
|
96
|
+
Object.keys(it).filter(key => key !== "__rowNum__").forEach(key => _[key] = String(it[key]));
|
|
205
97
|
return _;
|
|
206
98
|
});
|
|
207
|
-
onChange
|
|
99
|
+
onChange?.($);
|
|
208
100
|
}
|
|
209
101
|
}
|
|
210
|
-
return /*#__PURE__*/_jsx(InputFile,
|
|
102
|
+
return /*#__PURE__*/_jsx(InputFile, {
|
|
211
103
|
ref: ref,
|
|
212
104
|
accept: ".xlsx",
|
|
213
105
|
type: "arrayBuffer",
|
|
214
|
-
onChange: onInputChange
|
|
215
|
-
|
|
106
|
+
onChange: onInputChange,
|
|
107
|
+
...others
|
|
108
|
+
});
|
|
216
109
|
});
|
|
217
110
|
|
|
218
111
|
/** 手动导出 excel */
|
|
219
112
|
export function exportExcel(data, name) {
|
|
220
|
-
|
|
221
|
-
|
|
113
|
+
const workSheet = utils.json_to_sheet(data);
|
|
114
|
+
const workBook = utils.book_new();
|
|
222
115
|
utils.book_append_sheet(workBook, workSheet);
|
|
223
|
-
writeFile(workBook,
|
|
116
|
+
writeFile(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`);
|
|
224
117
|
}
|
|
225
118
|
/** 导出 excel 的 button 组件 */
|
|
226
|
-
export
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
119
|
+
export const ExportExcel = /*#__PURE__*/forwardRef((props, ref) => {
|
|
120
|
+
const {
|
|
121
|
+
data,
|
|
122
|
+
fileName,
|
|
123
|
+
onClick,
|
|
124
|
+
...others
|
|
125
|
+
} = props;
|
|
231
126
|
function onButtonClick(e) {
|
|
232
127
|
exportExcel(data, fileName);
|
|
233
|
-
onClick
|
|
128
|
+
onClick?.(e);
|
|
234
129
|
}
|
|
235
|
-
return /*#__PURE__*/_jsx("button",
|
|
130
|
+
return /*#__PURE__*/_jsx("button", {
|
|
236
131
|
ref: ref,
|
|
237
|
-
onClick: onButtonClick
|
|
238
|
-
|
|
132
|
+
onClick: onButtonClick,
|
|
133
|
+
...others
|
|
134
|
+
});
|
|
239
135
|
});
|
|
240
136
|
/** 尺寸渐变的组件 */
|
|
241
|
-
export
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
vertical =
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
var _useState7 = useState(0),
|
|
263
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
264
|
-
count = _useState8[0],
|
|
265
|
-
setCount = _useState8[1];
|
|
266
|
-
useEffect(function () {
|
|
267
|
-
var observer = new ResizeObserver(function (entries) {
|
|
268
|
-
var _entries$0$contentRec = entries[0].contentRect,
|
|
269
|
-
currentWidth = _entries$0$contentRec.width,
|
|
270
|
-
currentHeight = _entries$0$contentRec.height;
|
|
137
|
+
export const TransitionBox = props => {
|
|
138
|
+
const {
|
|
139
|
+
style,
|
|
140
|
+
containerClassName,
|
|
141
|
+
containerStyle,
|
|
142
|
+
children,
|
|
143
|
+
vertical = true,
|
|
144
|
+
horizontal = true,
|
|
145
|
+
time = 3000,
|
|
146
|
+
...others
|
|
147
|
+
} = props;
|
|
148
|
+
const box = useRef(null);
|
|
149
|
+
const [width, setWidth] = useState(0);
|
|
150
|
+
const [height, setHeight] = useState(0);
|
|
151
|
+
const [count, setCount] = useState(0);
|
|
152
|
+
useEffect(() => {
|
|
153
|
+
const observer = new ResizeObserver(entries => {
|
|
154
|
+
const {
|
|
155
|
+
width: currentWidth,
|
|
156
|
+
height: currentHeight
|
|
157
|
+
} = entries[0].contentRect;
|
|
271
158
|
setWidth(currentWidth);
|
|
272
159
|
setHeight(currentHeight);
|
|
273
160
|
});
|
|
274
161
|
observer.observe(box.current);
|
|
275
|
-
return
|
|
162
|
+
return () => {
|
|
276
163
|
observer.disconnect();
|
|
277
164
|
};
|
|
278
165
|
}, []);
|
|
279
|
-
useEffect(
|
|
280
|
-
setCount(
|
|
281
|
-
return Math.min(count + 1, 3);
|
|
282
|
-
});
|
|
166
|
+
useEffect(() => {
|
|
167
|
+
setCount(count => Math.min(count + 1, 3));
|
|
283
168
|
}, [width, height]);
|
|
284
|
-
|
|
169
|
+
const outerStyle = {
|
|
285
170
|
transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : undefined,
|
|
286
|
-
transitionDuration: count === 3 ?
|
|
287
|
-
width
|
|
288
|
-
height
|
|
171
|
+
transitionDuration: count === 3 ? `${time}ms` : undefined,
|
|
172
|
+
width,
|
|
173
|
+
height,
|
|
289
174
|
overflow: "hidden",
|
|
290
|
-
position: "relative"
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
175
|
+
position: "relative",
|
|
176
|
+
...style
|
|
177
|
+
};
|
|
178
|
+
return /*#__PURE__*/_jsx("div", {
|
|
179
|
+
style: outerStyle,
|
|
180
|
+
...others,
|
|
295
181
|
children: /*#__PURE__*/_jsx("div", {
|
|
296
182
|
className: containerClassName,
|
|
297
|
-
style:
|
|
298
|
-
position: "absolute"
|
|
299
|
-
|
|
183
|
+
style: {
|
|
184
|
+
position: "absolute",
|
|
185
|
+
...containerStyle
|
|
186
|
+
},
|
|
300
187
|
ref: box,
|
|
301
188
|
children: children
|
|
302
189
|
})
|
|
303
|
-
})
|
|
190
|
+
});
|
|
304
191
|
};
|
|
305
192
|
/** 雷达组件 */
|
|
306
|
-
export
|
|
307
|
-
|
|
308
|
-
unitRadius =
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
showGraduationText = props.showGraduationText,
|
|
328
|
-
showCircle = props.showCircle,
|
|
329
|
-
showDirection = props.showDirection;
|
|
330
|
-
var style = {
|
|
331
|
-
"--unit-radius": "".concat(unitRadius, "px"),
|
|
193
|
+
export const SeaRadar = props => {
|
|
194
|
+
const {
|
|
195
|
+
unitRadius = 50,
|
|
196
|
+
circleCount = 4,
|
|
197
|
+
circleWidth = 1,
|
|
198
|
+
circleColor,
|
|
199
|
+
directionCount = 36,
|
|
200
|
+
directionWidth = 1,
|
|
201
|
+
directionColor,
|
|
202
|
+
backgroundColor,
|
|
203
|
+
scanColor,
|
|
204
|
+
scanAngle = Math.PI / 6,
|
|
205
|
+
period = 8,
|
|
206
|
+
targets,
|
|
207
|
+
showGraduationLine,
|
|
208
|
+
showGraduationText,
|
|
209
|
+
showCircle,
|
|
210
|
+
showDirection
|
|
211
|
+
} = props;
|
|
212
|
+
const style = {
|
|
213
|
+
"--unit-radius": `${unitRadius}px`,
|
|
332
214
|
"--circle-count": circleCount,
|
|
333
|
-
"--circle-width":
|
|
215
|
+
"--circle-width": `${circleWidth}px`,
|
|
334
216
|
"--circle-color": circleColor,
|
|
335
217
|
"--direction-count": directionCount,
|
|
336
|
-
"--direction-width":
|
|
218
|
+
"--direction-width": `${directionWidth}px`,
|
|
337
219
|
"--direction-color": directionColor,
|
|
338
220
|
"--background-color": backgroundColor,
|
|
339
221
|
"--scan-color": scanColor,
|
|
340
|
-
"--period":
|
|
222
|
+
"--period": `${period}s`
|
|
341
223
|
};
|
|
342
224
|
return /*#__PURE__*/_jsxs("div", {
|
|
343
225
|
className: "sea-radar-wrapper",
|
|
344
226
|
style: style,
|
|
345
|
-
children: [Array(180).fill(0).map(
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
227
|
+
children: [Array(180).fill(0).map((_, index) => /*#__PURE__*/_jsx("div", {
|
|
228
|
+
className: "sea-radar-little-graduation",
|
|
229
|
+
style: {
|
|
230
|
+
transform: `rotateZ(${2 * index}deg)`,
|
|
231
|
+
display: showGraduationLine ? "block" : "none"
|
|
232
|
+
}
|
|
233
|
+
})), Array(36).fill(0).map((_, index) => /*#__PURE__*/_jsx("div", {
|
|
234
|
+
className: "sea-radar-graduation",
|
|
235
|
+
style: {
|
|
236
|
+
transform: `rotateZ(${10 * index}deg)`,
|
|
237
|
+
display: showGraduationLine ? "block" : "none"
|
|
238
|
+
},
|
|
239
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
240
|
+
className: "sea-radar-graduation-text",
|
|
356
241
|
style: {
|
|
357
|
-
|
|
358
|
-
display: showGraduationLine ? "block" : "none"
|
|
242
|
+
display: showGraduationText ? "block" : "none"
|
|
359
243
|
},
|
|
360
|
-
children:
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
display: showGraduationText ? "block" : "none"
|
|
364
|
-
},
|
|
365
|
-
children: String(index * 10).padStart(3, "0")
|
|
366
|
-
})
|
|
367
|
-
});
|
|
368
|
-
}), /*#__PURE__*/_jsxs("div", {
|
|
244
|
+
children: String(index * 10).padStart(3, "0")
|
|
245
|
+
})
|
|
246
|
+
})), /*#__PURE__*/_jsxs("div", {
|
|
369
247
|
className: "sea-radar",
|
|
370
248
|
children: [/*#__PURE__*/_jsx("div", {
|
|
371
249
|
className: "sea-radar-scan",
|
|
372
250
|
style: {
|
|
373
|
-
height:
|
|
374
|
-
clipPath:
|
|
251
|
+
height: `${unitRadius * circleCount * Math.tan(scanAngle)}px`,
|
|
252
|
+
clipPath: `polygon(0 0, 0 100%, 100% 100%)`
|
|
375
253
|
}
|
|
376
|
-
}), showCircle && Array(circleCount).fill(0).map(
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
left: "".concat(unitRadius * circleCount + it.radius * Math.cos(it.angle), "px"),
|
|
396
|
-
bottom: "".concat(unitRadius * circleCount + it.radius * Math.sin(it.angle), "px")
|
|
397
|
-
},
|
|
398
|
-
children: it.element
|
|
399
|
-
});
|
|
400
|
-
})]
|
|
254
|
+
}), showCircle && Array(circleCount).fill(0).map((_, index) => /*#__PURE__*/_jsx("div", {
|
|
255
|
+
className: "sea-radar-circle",
|
|
256
|
+
style: {
|
|
257
|
+
width: `${unitRadius * 2 * (index + 1)}px`,
|
|
258
|
+
height: `${unitRadius * 2 * (index + 1)}px`
|
|
259
|
+
}
|
|
260
|
+
})), showDirection && Array(directionCount).fill(0).map((_, index) => /*#__PURE__*/_jsx("div", {
|
|
261
|
+
className: "sea-radar-direction",
|
|
262
|
+
style: {
|
|
263
|
+
transform: `rotateZ(${360 / directionCount * index}deg)`
|
|
264
|
+
}
|
|
265
|
+
})), targets?.map(it => /*#__PURE__*/_jsx("div", {
|
|
266
|
+
className: "sea-radar-target",
|
|
267
|
+
style: {
|
|
268
|
+
left: `${unitRadius * circleCount + it.radius * Math.cos(it.angle)}px`,
|
|
269
|
+
bottom: `${unitRadius * circleCount + it.radius * Math.sin(it.angle)}px`
|
|
270
|
+
},
|
|
271
|
+
children: it.element
|
|
272
|
+
}))]
|
|
401
273
|
})]
|
|
402
274
|
});
|
|
403
275
|
};
|
|
404
276
|
/** 忘了什么组件 */
|
|
405
|
-
export
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
277
|
+
export const Ring = props => {
|
|
278
|
+
const {
|
|
279
|
+
outerWidth,
|
|
280
|
+
innerWidth,
|
|
281
|
+
style,
|
|
282
|
+
...leftProps
|
|
283
|
+
} = props;
|
|
284
|
+
const outerRadius = outerWidth / 2;
|
|
285
|
+
const innerRadius = innerWidth / 2;
|
|
286
|
+
return /*#__PURE__*/_jsx("div", {
|
|
287
|
+
style: {
|
|
288
|
+
...style,
|
|
289
|
+
width: `${outerWidth}px`,
|
|
290
|
+
height: `${outerWidth}px`,
|
|
291
|
+
clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")`
|
|
292
|
+
},
|
|
293
|
+
...leftProps
|
|
294
|
+
});
|
|
419
295
|
};
|
|
420
296
|
export function getGapRange(gap) {
|
|
421
297
|
if (typeof gap === "number") return [gap, gap];
|
|
@@ -423,9 +299,9 @@ export function getGapRange(gap) {
|
|
|
423
299
|
return [0, null];
|
|
424
300
|
}
|
|
425
301
|
export function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
|
|
426
|
-
|
|
302
|
+
const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1;
|
|
427
303
|
if (count === 1) return [count, 0];
|
|
428
|
-
|
|
304
|
+
const averageGap = (width - itemWidth * count) / (count - 1);
|
|
429
305
|
if (averageGap < minGap) return [count, minGap];
|
|
430
306
|
if (maxGap !== null && averageGap > maxGap) return [count, maxGap];
|
|
431
307
|
return [count, averageGap];
|
|
@@ -433,50 +309,36 @@ export function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
|
|
|
433
309
|
|
|
434
310
|
/** 自适应浮动组件 */
|
|
435
311
|
export function Flow(props) {
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
rowGap =
|
|
441
|
-
maxRows
|
|
442
|
-
data
|
|
443
|
-
render
|
|
444
|
-
keyExactor
|
|
445
|
-
className
|
|
446
|
-
style
|
|
447
|
-
containerClassName
|
|
448
|
-
containerStyle
|
|
449
|
-
throttle
|
|
450
|
-
transitionDuration
|
|
451
|
-
onSizeChange
|
|
452
|
-
others
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
columnCount = _useState12[0],
|
|
464
|
-
setColumnCount = _useState12[1];
|
|
465
|
-
var _useState13 = useState(minColumnGap),
|
|
466
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
467
|
-
columnGapSize = _useState14[0],
|
|
468
|
-
setColumnGapSize = _useState14[1];
|
|
469
|
-
var _useState15 = useState(false),
|
|
470
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
471
|
-
showItems = _useState16[0],
|
|
472
|
-
setShowItems = _useState16[1];
|
|
473
|
-
var ele = useRef(null);
|
|
474
|
-
var contentRows = Math.ceil(data.length / columnCount);
|
|
475
|
-
var contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows;
|
|
476
|
-
var height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0;
|
|
312
|
+
const {
|
|
313
|
+
itemWidth,
|
|
314
|
+
itemHeight,
|
|
315
|
+
columnGap,
|
|
316
|
+
rowGap = 0,
|
|
317
|
+
maxRows,
|
|
318
|
+
data,
|
|
319
|
+
render,
|
|
320
|
+
keyExactor,
|
|
321
|
+
className,
|
|
322
|
+
style,
|
|
323
|
+
containerClassName,
|
|
324
|
+
containerStyle,
|
|
325
|
+
throttle,
|
|
326
|
+
transitionDuration,
|
|
327
|
+
onSizeChange,
|
|
328
|
+
...others
|
|
329
|
+
} = props;
|
|
330
|
+
const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
|
|
331
|
+
const [width, setWidth] = useState(0);
|
|
332
|
+
const [columnCount, setColumnCount] = useState(1);
|
|
333
|
+
const [columnGapSize, setColumnGapSize] = useState(minColumnGap);
|
|
334
|
+
const [showItems, setShowItems] = useState(false);
|
|
335
|
+
const ele = useRef(null);
|
|
336
|
+
const contentRows = Math.ceil(data.length / columnCount);
|
|
337
|
+
const contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows;
|
|
338
|
+
const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0;
|
|
477
339
|
function getPosition(index) {
|
|
478
|
-
|
|
479
|
-
|
|
340
|
+
const y = Math.floor(index / columnCount);
|
|
341
|
+
const x = index - y * columnCount;
|
|
480
342
|
return {
|
|
481
343
|
left: x * (itemWidth + columnGapSize),
|
|
482
344
|
top: y * (itemHeight + rowGap)
|
|
@@ -486,16 +348,15 @@ export function Flow(props) {
|
|
|
486
348
|
if (typeof maxRows !== "number") return false;
|
|
487
349
|
return index >= maxRows * columnCount;
|
|
488
350
|
}
|
|
489
|
-
useEffect(
|
|
490
|
-
|
|
491
|
-
|
|
351
|
+
useEffect(() => {
|
|
352
|
+
let timeout;
|
|
353
|
+
const observer = new ResizeObserver(entries => {
|
|
492
354
|
clearTimeout(timeout);
|
|
493
355
|
function task() {
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
newColumnGapSize = _getGapCountAndSize2[1];
|
|
356
|
+
const {
|
|
357
|
+
inlineSize: width
|
|
358
|
+
} = entries[0].borderBoxSize[0];
|
|
359
|
+
const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap);
|
|
499
360
|
setShowItems(true);
|
|
500
361
|
setWidth(width);
|
|
501
362
|
setColumnCount(newColumnCount);
|
|
@@ -508,182 +369,178 @@ export function Flow(props) {
|
|
|
508
369
|
}
|
|
509
370
|
});
|
|
510
371
|
observer.observe(ele.current);
|
|
511
|
-
return
|
|
372
|
+
return () => {
|
|
512
373
|
observer.disconnect();
|
|
513
374
|
};
|
|
514
375
|
}, [itemWidth, throttle, columnGap]);
|
|
515
|
-
useEffect(
|
|
516
|
-
onSizeChange
|
|
517
|
-
width
|
|
518
|
-
height
|
|
519
|
-
itemWidth
|
|
520
|
-
itemHeight
|
|
376
|
+
useEffect(() => {
|
|
377
|
+
onSizeChange?.({
|
|
378
|
+
width,
|
|
379
|
+
height,
|
|
380
|
+
itemWidth,
|
|
381
|
+
itemHeight,
|
|
521
382
|
columnGap: columnGapSize,
|
|
522
|
-
columnCount
|
|
523
|
-
rowGap
|
|
383
|
+
columnCount,
|
|
384
|
+
rowGap,
|
|
524
385
|
rowCount: contentShownRows,
|
|
525
386
|
overflow: data.length > contentShownRows * columnCount,
|
|
526
387
|
itemCount: data.length,
|
|
527
|
-
maxRows: maxRows
|
|
388
|
+
maxRows: maxRows ?? null
|
|
528
389
|
});
|
|
529
390
|
}, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
|
|
530
|
-
return /*#__PURE__*/_jsx("div",
|
|
391
|
+
return /*#__PURE__*/_jsx("div", {
|
|
531
392
|
ref: ele,
|
|
532
393
|
className: className,
|
|
533
|
-
style:
|
|
394
|
+
style: {
|
|
534
395
|
position: "relative",
|
|
535
396
|
boxSizing: "border-box",
|
|
536
|
-
height
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
397
|
+
height,
|
|
398
|
+
...style
|
|
399
|
+
},
|
|
400
|
+
...others,
|
|
401
|
+
children: showItems && data.map((it, idx) => /*#__PURE__*/_jsx("div", {
|
|
402
|
+
className: containerClassName,
|
|
403
|
+
style: {
|
|
404
|
+
position: "absolute",
|
|
405
|
+
width: itemWidth,
|
|
406
|
+
height: itemHeight,
|
|
407
|
+
transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,
|
|
408
|
+
...getPosition(idx)
|
|
409
|
+
},
|
|
410
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
411
|
+
style: {
|
|
544
412
|
width: itemWidth,
|
|
545
413
|
height: itemHeight,
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
}, containerStyle),
|
|
554
|
-
children: render(it, idx, getHidden(idx))
|
|
555
|
-
})
|
|
556
|
-
}, (keyExactor === null || keyExactor === void 0 ? void 0 : keyExactor(it, idx)) || idx);
|
|
557
|
-
})
|
|
558
|
-
}));
|
|
414
|
+
display: maxRows && idx >= maxRows * columnCount ? "none" : "block",
|
|
415
|
+
...containerStyle
|
|
416
|
+
},
|
|
417
|
+
children: render(it, idx, getHidden(idx))
|
|
418
|
+
})
|
|
419
|
+
}, keyExactor?.(it, idx) || idx))
|
|
420
|
+
});
|
|
559
421
|
}
|
|
560
422
|
/** 梯形组件 */
|
|
561
|
-
export
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
423
|
+
export const Trapezium = /*#__PURE__*/forwardRef((props, ref) => {
|
|
424
|
+
const {
|
|
425
|
+
top,
|
|
426
|
+
bottom,
|
|
427
|
+
height,
|
|
428
|
+
borderRadius,
|
|
429
|
+
style,
|
|
430
|
+
...other
|
|
431
|
+
} = props;
|
|
432
|
+
const diff = (bottom - top) / 2;
|
|
433
|
+
const a = Math.atan(height / diff) / 2;
|
|
434
|
+
const b = borderRadius / Math.tan(a);
|
|
435
|
+
const c = b * Math.cos(a * 2);
|
|
436
|
+
const d = b * Math.sin(a * 2);
|
|
437
|
+
const e = Math.PI / 2 - a;
|
|
438
|
+
const f = borderRadius / Math.tan(e);
|
|
439
|
+
const g = f * Math.cos(a * 2);
|
|
440
|
+
const h = f * Math.sin(a * 2);
|
|
441
|
+
return /*#__PURE__*/_jsx("div", {
|
|
578
442
|
ref: ref,
|
|
579
|
-
style:
|
|
443
|
+
style: {
|
|
580
444
|
width: bottom,
|
|
581
|
-
height
|
|
582
|
-
clipPath:
|
|
583
|
-
|
|
584
|
-
|
|
445
|
+
height,
|
|
446
|
+
clipPath: `path("M ${diff + f} ${0} A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z")`,
|
|
447
|
+
...style
|
|
448
|
+
},
|
|
449
|
+
...other
|
|
450
|
+
});
|
|
585
451
|
});
|
|
586
452
|
/** 循环播放组件 */
|
|
587
453
|
export function LoopSwiper(props) {
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
gap =
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
className = _props$className === void 0 ? "" : _props$className,
|
|
601
|
-
_props$direction = props.direction,
|
|
602
|
-
direction = _props$direction === void 0 ? "x" : _props$direction;
|
|
454
|
+
const {
|
|
455
|
+
data,
|
|
456
|
+
render,
|
|
457
|
+
keyExactor,
|
|
458
|
+
size,
|
|
459
|
+
gap = 0,
|
|
460
|
+
start = 0,
|
|
461
|
+
speed,
|
|
462
|
+
paused = false,
|
|
463
|
+
className = "",
|
|
464
|
+
direction = "x"
|
|
465
|
+
} = props;
|
|
603
466
|
if (!(size > 0 && (speed > 0 || speed < 0))) {
|
|
604
467
|
throw new RangeError("size 必须是正数,speed 必须非0");
|
|
605
468
|
}
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
className: className,
|
|
617
|
-
direction: direction
|
|
469
|
+
const keys = data.map((it, idx, arr) => keyExactor ? keyExactor(it, idx, arr) : String(idx));
|
|
470
|
+
const keysRef = useRef(keys);
|
|
471
|
+
const cache = useRef({
|
|
472
|
+
size,
|
|
473
|
+
gap,
|
|
474
|
+
speed,
|
|
475
|
+
keys,
|
|
476
|
+
paused,
|
|
477
|
+
className,
|
|
478
|
+
direction
|
|
618
479
|
});
|
|
619
480
|
cache.current = {
|
|
620
|
-
size
|
|
621
|
-
gap
|
|
622
|
-
speed
|
|
623
|
-
keys
|
|
624
|
-
paused
|
|
625
|
-
className
|
|
626
|
-
direction
|
|
481
|
+
size,
|
|
482
|
+
gap,
|
|
483
|
+
speed,
|
|
484
|
+
keys,
|
|
485
|
+
paused,
|
|
486
|
+
className,
|
|
487
|
+
direction
|
|
627
488
|
};
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
489
|
+
const eles = useRef(keys.map((key, idx) => ({
|
|
490
|
+
key,
|
|
491
|
+
dom: null,
|
|
492
|
+
offset: idx * (size + gap) + start
|
|
493
|
+
})));
|
|
494
|
+
if (keysRef.current.length !== keys.length || keysRef.current.some((it, idx) => it !== keys[idx])) {
|
|
495
|
+
keysRef.current = keys;
|
|
496
|
+
eles.current = keys.map((key, idx) => ({
|
|
497
|
+
key,
|
|
631
498
|
dom: null,
|
|
632
499
|
offset: idx * (size + gap) + start
|
|
633
|
-
};
|
|
634
|
-
}));
|
|
635
|
-
if (keysRef.current.length !== keys.length || keysRef.current.some(function (it, idx) {
|
|
636
|
-
return it !== keys[idx];
|
|
637
|
-
})) {
|
|
638
|
-
keysRef.current = keys;
|
|
639
|
-
eles.current = keys.map(function (key, idx) {
|
|
640
|
-
return {
|
|
641
|
-
key: key,
|
|
642
|
-
dom: null,
|
|
643
|
-
offset: idx * (size + gap) + start
|
|
644
|
-
};
|
|
645
|
-
});
|
|
500
|
+
}));
|
|
646
501
|
}
|
|
647
502
|
function setStyles() {
|
|
648
|
-
|
|
649
|
-
size
|
|
650
|
-
speed
|
|
651
|
-
className
|
|
652
|
-
direction
|
|
653
|
-
|
|
503
|
+
const {
|
|
504
|
+
size,
|
|
505
|
+
speed,
|
|
506
|
+
className,
|
|
507
|
+
direction
|
|
508
|
+
} = cache.current;
|
|
509
|
+
eles.current.forEach(it => {
|
|
654
510
|
it.dom.className = className;
|
|
655
|
-
it.dom.style.setProperty("position",
|
|
656
|
-
it.dom.style.setProperty("width",
|
|
657
|
-
direction === "x" && speed < 0 ? it.dom.style.setProperty("right",
|
|
658
|
-
direction === "y" && speed < 0 ? it.dom.style.setProperty("bottom",
|
|
659
|
-
it.dom.style.setProperty("transform",
|
|
511
|
+
it.dom.style.setProperty("position", `absolute`);
|
|
512
|
+
it.dom.style.setProperty("width", `${size}px`);
|
|
513
|
+
direction === "x" && speed < 0 ? it.dom.style.setProperty("right", `0`) : it.dom.style.setProperty("left", `0`);
|
|
514
|
+
direction === "y" && speed < 0 ? it.dom.style.setProperty("bottom", `0`) : it.dom.style.setProperty("top", `0`);
|
|
515
|
+
it.dom.style.setProperty("transform", `translate${direction.toUpperCase()}(${it.offset * (speed > 0 ? 1 : -1)}px)`);
|
|
660
516
|
});
|
|
661
517
|
}
|
|
662
|
-
useEffect(
|
|
518
|
+
useEffect(() => {
|
|
663
519
|
setStyles();
|
|
664
520
|
}, []);
|
|
665
|
-
useEffect(
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
size
|
|
669
|
-
gap
|
|
670
|
-
speed
|
|
671
|
-
keys
|
|
672
|
-
paused
|
|
521
|
+
useEffect(() => {
|
|
522
|
+
const stop = setFrameInterval(() => {
|
|
523
|
+
const {
|
|
524
|
+
size,
|
|
525
|
+
gap,
|
|
526
|
+
speed,
|
|
527
|
+
keys,
|
|
528
|
+
paused
|
|
529
|
+
} = cache.current;
|
|
673
530
|
if (paused) return;
|
|
674
531
|
eles.current.length = keys.length;
|
|
675
|
-
|
|
676
|
-
eles.current.forEach(
|
|
532
|
+
let minIndex = 0;
|
|
533
|
+
eles.current.forEach((it, idx) => {
|
|
677
534
|
if (it.offset < eles.current[minIndex].offset) {
|
|
678
535
|
minIndex = idx;
|
|
679
536
|
}
|
|
680
537
|
});
|
|
681
|
-
|
|
682
|
-
eles.current.forEach(
|
|
683
|
-
|
|
538
|
+
const minOffset = eles.current[minIndex].offset;
|
|
539
|
+
eles.current.forEach((it, idx) => {
|
|
540
|
+
let index = idx;
|
|
684
541
|
if (idx < minIndex) index = eles.current.length + idx;
|
|
685
542
|
it.offset = minOffset + (index - minIndex) * (size + gap);
|
|
686
|
-
|
|
543
|
+
let newOffset = it.offset - Math.abs(speed);
|
|
687
544
|
if (newOffset + size + gap <= 0) {
|
|
688
545
|
newOffset += eles.current.length * (size + gap);
|
|
689
546
|
}
|
|
@@ -693,88 +550,86 @@ export function LoopSwiper(props) {
|
|
|
693
550
|
}, 1);
|
|
694
551
|
return stop;
|
|
695
552
|
}, []);
|
|
696
|
-
function
|
|
553
|
+
function ref(dom, index) {
|
|
697
554
|
if (!eles.current[index]) return;
|
|
698
555
|
eles.current[index].dom = dom;
|
|
699
556
|
}
|
|
700
557
|
return /*#__PURE__*/_jsx(Fragment, {
|
|
701
|
-
children: data.map(
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
},
|
|
706
|
-
children: render(it, idx, arr)
|
|
707
|
-
}, keys[idx]);
|
|
708
|
-
})
|
|
558
|
+
children: data.map((it, idx, arr) => /*#__PURE__*/_jsx("div", {
|
|
559
|
+
ref: dom => ref(dom, idx),
|
|
560
|
+
children: render(it, idx, arr)
|
|
561
|
+
}, keys[idx]))
|
|
709
562
|
});
|
|
710
563
|
}
|
|
711
|
-
export
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
564
|
+
export const SectionRing = props => {
|
|
565
|
+
const {
|
|
566
|
+
outerRadius: o,
|
|
567
|
+
innerRadius: i,
|
|
568
|
+
count: c,
|
|
569
|
+
angel: a,
|
|
570
|
+
style,
|
|
571
|
+
...others
|
|
572
|
+
} = props;
|
|
573
|
+
const s = Math.PI * 2 / c - a;
|
|
574
|
+
function arc(radius, startAngle, endAngle, options = {}) {
|
|
721
575
|
return drawArc(o, o, radius, startAngle, endAngle, options);
|
|
722
576
|
}
|
|
723
|
-
return /*#__PURE__*/_jsx("div",
|
|
724
|
-
style:
|
|
577
|
+
return /*#__PURE__*/_jsx("div", {
|
|
578
|
+
style: {
|
|
579
|
+
...style,
|
|
725
580
|
width: o * 2,
|
|
726
581
|
height: o * 2,
|
|
727
|
-
clipPath:
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
}, others));
|
|
582
|
+
clipPath: `path("${Array(c).fill(0).map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), {
|
|
583
|
+
line: true,
|
|
584
|
+
anticlockwise: true
|
|
585
|
+
})}`).join(" ")} Z")`
|
|
586
|
+
},
|
|
587
|
+
...others
|
|
588
|
+
});
|
|
735
589
|
};
|
|
736
590
|
/** 渐变数字组件 */
|
|
737
|
-
export
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
591
|
+
export const TransitionNum = /*#__PURE__*/forwardRef((props, ref) => {
|
|
592
|
+
const {
|
|
593
|
+
children: num,
|
|
594
|
+
period,
|
|
595
|
+
numToStr,
|
|
596
|
+
...others
|
|
597
|
+
} = props;
|
|
742
598
|
if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
|
|
743
599
|
throw new RangeError("目标数字必须是整数,周期必须是正整数");
|
|
744
600
|
}
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
num
|
|
748
|
-
period
|
|
749
|
-
numToStr
|
|
601
|
+
const ele = useRef(null);
|
|
602
|
+
const cache = useRef({
|
|
603
|
+
num,
|
|
604
|
+
period,
|
|
605
|
+
numToStr,
|
|
750
606
|
show: num
|
|
751
607
|
});
|
|
752
|
-
cache.current =
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
show = _cache$current3.show,
|
|
769
|
-
numToStr = _cache$current3.numToStr;
|
|
608
|
+
cache.current = {
|
|
609
|
+
...cache.current,
|
|
610
|
+
num,
|
|
611
|
+
period,
|
|
612
|
+
numToStr
|
|
613
|
+
};
|
|
614
|
+
useImperativeHandle(ref, () => ({
|
|
615
|
+
get: () => cache.current.show
|
|
616
|
+
}), []);
|
|
617
|
+
useEffect(() => {
|
|
618
|
+
const {
|
|
619
|
+
num,
|
|
620
|
+
period,
|
|
621
|
+
show,
|
|
622
|
+
numToStr
|
|
623
|
+
} = cache.current;
|
|
770
624
|
ele.current.innerText = (numToStr || String)(show);
|
|
771
625
|
if (num === show) return;
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
num
|
|
777
|
-
numToStr
|
|
626
|
+
const div = ele.current;
|
|
627
|
+
const speed = (num - show) / period;
|
|
628
|
+
const cancel = setFrameInterval(() => {
|
|
629
|
+
const {
|
|
630
|
+
num,
|
|
631
|
+
numToStr
|
|
632
|
+
} = cache.current;
|
|
778
633
|
cache.current.show += speed;
|
|
779
634
|
if (speed > 0 && cache.current.show > num || speed < 0 && cache.current.show < num) {
|
|
780
635
|
cancel();
|
|
@@ -784,87 +639,102 @@ export var TransitionNum = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
784
639
|
}, 1);
|
|
785
640
|
return cancel;
|
|
786
641
|
}, [num]);
|
|
787
|
-
return /*#__PURE__*/_jsx("div",
|
|
788
|
-
ref: ele
|
|
789
|
-
|
|
642
|
+
return /*#__PURE__*/_jsx("div", {
|
|
643
|
+
ref: ele,
|
|
644
|
+
...others
|
|
645
|
+
});
|
|
790
646
|
});
|
|
791
647
|
/** 环形文字 */
|
|
792
|
-
export
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
startAngel =
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
var unitAngle = Math.atan(width / 2 / radius) * 2;
|
|
811
|
-
var totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
|
|
812
|
-
var offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2;
|
|
648
|
+
export const CircleText = props => {
|
|
649
|
+
const {
|
|
650
|
+
width,
|
|
651
|
+
height,
|
|
652
|
+
radius,
|
|
653
|
+
startAngel = 0,
|
|
654
|
+
gapAngel = 0,
|
|
655
|
+
align = "center",
|
|
656
|
+
style,
|
|
657
|
+
direction = "outer",
|
|
658
|
+
reverse = false,
|
|
659
|
+
separator,
|
|
660
|
+
children,
|
|
661
|
+
...others
|
|
662
|
+
} = props;
|
|
663
|
+
const unitAngle = Math.atan(width / 2 / radius) * 2;
|
|
664
|
+
const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
|
|
665
|
+
const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2;
|
|
813
666
|
function getTransform(idx) {
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
return
|
|
667
|
+
const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2;
|
|
668
|
+
const x = (radius + height / 2) * Math.cos(angle) - width / 2;
|
|
669
|
+
const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2;
|
|
670
|
+
const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0);
|
|
671
|
+
return `translateX(${x}px) translateY(${y}px) rotateZ(${z / Math.PI * 180}deg)`;
|
|
819
672
|
}
|
|
820
|
-
|
|
673
|
+
const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "");
|
|
821
674
|
if (reverse) words.reverse();
|
|
822
675
|
return /*#__PURE__*/_jsx(Fragment, {
|
|
823
|
-
children: words.map(
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
}), idx);
|
|
837
|
-
})
|
|
676
|
+
children: words.map((w, idx) => /*#__PURE__*/_jsx("span", {
|
|
677
|
+
style: {
|
|
678
|
+
position: "absolute",
|
|
679
|
+
...style,
|
|
680
|
+
transform: getTransform(idx),
|
|
681
|
+
textAlign: "center",
|
|
682
|
+
width,
|
|
683
|
+
lineHeight: `${height}px`,
|
|
684
|
+
height: height
|
|
685
|
+
},
|
|
686
|
+
...others,
|
|
687
|
+
children: w
|
|
688
|
+
}, idx))
|
|
838
689
|
});
|
|
839
690
|
};
|
|
840
691
|
/**
|
|
841
692
|
* 滚动条组件
|
|
842
693
|
* @description 注意 children 不是直接渲染在组件上的,而是渲染在内部的容器上
|
|
843
694
|
*/
|
|
844
|
-
export
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
695
|
+
export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
696
|
+
const {
|
|
697
|
+
children,
|
|
698
|
+
containerClassName,
|
|
699
|
+
containerStyle,
|
|
700
|
+
options,
|
|
701
|
+
className,
|
|
702
|
+
...others
|
|
703
|
+
} = props;
|
|
704
|
+
const {
|
|
705
|
+
thumbWidth,
|
|
706
|
+
...scrollbarOptions
|
|
707
|
+
} = options || {};
|
|
708
|
+
const id = useId();
|
|
709
|
+
useEffect(() => {
|
|
710
|
+
SmoothScrollBar.init(document.querySelector(`[data-scroll-id="${id}"]`), scrollbarOptions);
|
|
857
711
|
}, []);
|
|
858
|
-
return /*#__PURE__*/_jsx("div",
|
|
712
|
+
return /*#__PURE__*/_jsx("div", {
|
|
859
713
|
ref: ref,
|
|
860
|
-
className: clsx(!!thumbWidth && css
|
|
861
|
-
|
|
862
|
-
|
|
714
|
+
className: clsx(!!thumbWidth && css`
|
|
715
|
+
.scrollbar-track.scrollbar-track-x {
|
|
716
|
+
height: ${thumbWidth}px;
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
.scrollbar-thumb.scrollbar-thumb-x {
|
|
720
|
+
height: ${thumbWidth}px;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.scrollbar-track.scrollbar-track-y {
|
|
724
|
+
width: ${thumbWidth}px;
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
.scrollbar-thumb.scrollbar-thumb-y {
|
|
728
|
+
width: ${thumbWidth}px;
|
|
729
|
+
}
|
|
730
|
+
`, className),
|
|
731
|
+
"data-scroll-id": id,
|
|
732
|
+
...others,
|
|
863
733
|
children: /*#__PURE__*/_jsx("div", {
|
|
864
734
|
className: containerClassName,
|
|
865
735
|
style: containerStyle,
|
|
866
736
|
children: children
|
|
867
737
|
})
|
|
868
|
-
})
|
|
738
|
+
});
|
|
869
739
|
});
|
|
870
740
|
//# sourceMappingURL=index.js.map
|