deepsea-components 2.1.1 → 2.1.3
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.d.ts +5 -2
- package/dist/cjs/index.js +6 -5
- package/dist/cjs/index.js.map +3 -3
- package/dist/esm/index.d.ts +5 -2
- package/dist/esm/index.js +523 -652
- package/dist/esm/index.js.map +1 -1
- package/package.json +4 -4
- package/src/index.tsx +9 -7
package/dist/esm/index.js
CHANGED
|
@@ -1,420 +1,297 @@
|
|
|
1
|
-
var _templateObject;
|
|
2
|
-
var _excluded = ["multiple", "type", "onChange", "disabled"],
|
|
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
|
-
/**
|
|
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
|
-
others = _objectWithoutProperties(props, _excluded);
|
|
91
|
-
var _useState = useState(false),
|
|
92
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
93
|
-
disabled = _useState2[0],
|
|
94
|
-
setDisabled = _useState2[1];
|
|
95
|
-
function onInputChange(_x3) {
|
|
96
|
-
return _onInputChange.apply(this, arguments);
|
|
97
|
-
}
|
|
98
|
-
function _onInputChange() {
|
|
99
|
-
_onInputChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
|
|
100
|
-
var input, files, result, _i, _Array$from, file;
|
|
101
|
-
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
102
|
-
while (1) switch (_context.prev = _context.next) {
|
|
103
|
-
case 0:
|
|
104
|
-
input = e.target;
|
|
105
|
-
files = input.files;
|
|
106
|
-
if (!(!files || files.length === 0)) {
|
|
107
|
-
_context.next = 4;
|
|
108
|
-
break;
|
|
109
|
-
}
|
|
110
|
-
return _context.abrupt("return");
|
|
111
|
-
case 4:
|
|
112
|
-
setDisabled(true);
|
|
113
|
-
_context.prev = 5;
|
|
114
|
-
if (!multiple) {
|
|
115
|
-
_context.next = 24;
|
|
116
|
-
break;
|
|
117
|
-
}
|
|
118
|
-
result = [];
|
|
119
|
-
_i = 0, _Array$from = Array.from(files);
|
|
120
|
-
case 9:
|
|
121
|
-
if (!(_i < _Array$from.length)) {
|
|
122
|
-
_context.next = 21;
|
|
123
|
-
break;
|
|
124
|
-
}
|
|
125
|
-
file = _Array$from[_i];
|
|
126
|
-
_context.t0 = result;
|
|
127
|
-
_context.next = 14;
|
|
128
|
-
return getFileData(file, type);
|
|
129
|
-
case 14:
|
|
130
|
-
_context.t1 = _context.sent;
|
|
131
|
-
_context.t2 = file;
|
|
132
|
-
_context.t3 = {
|
|
133
|
-
result: _context.t1,
|
|
134
|
-
file: _context.t2
|
|
135
|
-
};
|
|
136
|
-
_context.t0.push.call(_context.t0, _context.t3);
|
|
137
|
-
case 18:
|
|
138
|
-
_i++;
|
|
139
|
-
_context.next = 9;
|
|
140
|
-
break;
|
|
141
|
-
case 21:
|
|
142
|
-
onChange === null || onChange === void 0 || onChange(result);
|
|
143
|
-
_context.next = 33;
|
|
144
|
-
break;
|
|
145
|
-
case 24:
|
|
146
|
-
_context.t4 = onChange === null || onChange === void 0;
|
|
147
|
-
if (_context.t4) {
|
|
148
|
-
_context.next = 33;
|
|
149
|
-
break;
|
|
150
|
-
}
|
|
151
|
-
_context.t5 = onChange;
|
|
152
|
-
_context.next = 29;
|
|
153
|
-
return getFileData(files[0], type);
|
|
154
|
-
case 29:
|
|
155
|
-
_context.t6 = _context.sent;
|
|
156
|
-
_context.t7 = files[0];
|
|
157
|
-
_context.t8 = {
|
|
158
|
-
result: _context.t6,
|
|
159
|
-
file: _context.t7
|
|
160
|
-
};
|
|
161
|
-
(0, _context.t5)(_context.t8);
|
|
162
|
-
case 33:
|
|
163
|
-
setDisabled(false);
|
|
164
|
-
input.value = "";
|
|
165
|
-
_context.next = 42;
|
|
166
|
-
break;
|
|
167
|
-
case 37:
|
|
168
|
-
_context.prev = 37;
|
|
169
|
-
_context.t9 = _context["catch"](5);
|
|
170
|
-
setDisabled(false);
|
|
171
|
-
input.value = "";
|
|
172
|
-
throw _context.t9;
|
|
173
|
-
case 42:
|
|
174
|
-
case "end":
|
|
175
|
-
return _context.stop();
|
|
33
|
+
/** 专用于读取文件的组件 */
|
|
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
|
+
});
|
|
176
59
|
}
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
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
|
+
}
|
|
180
74
|
}
|
|
181
|
-
return /*#__PURE__*/_jsx("input",
|
|
75
|
+
return /*#__PURE__*/_jsx("input", {
|
|
182
76
|
disabled: disabled && inputDisabled,
|
|
183
77
|
ref: ref,
|
|
184
78
|
type: "file",
|
|
185
79
|
multiple: multiple,
|
|
186
|
-
onChange: onInputChange
|
|
187
|
-
|
|
80
|
+
onChange: onInputChange,
|
|
81
|
+
...others
|
|
82
|
+
});
|
|
188
83
|
});
|
|
189
84
|
/** 专门用于读取 excel 的组件 */
|
|
190
|
-
export
|
|
191
|
-
|
|
192
|
-
|
|
85
|
+
export const ImportExcel = /*#__PURE__*/forwardRef((props, ref) => {
|
|
86
|
+
const {
|
|
87
|
+
onChange,
|
|
88
|
+
...others
|
|
89
|
+
} = props;
|
|
193
90
|
function onInputChange(data) {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
if (
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
Object.keys(it).filter(
|
|
200
|
-
return key !== "__rowNum__";
|
|
201
|
-
}).forEach(function (key) {
|
|
202
|
-
return _[key] = String(it[key]);
|
|
203
|
-
});
|
|
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]));
|
|
204
97
|
return _;
|
|
205
98
|
});
|
|
206
|
-
onChange
|
|
99
|
+
onChange?.($);
|
|
207
100
|
}
|
|
208
101
|
}
|
|
209
|
-
return /*#__PURE__*/_jsx(InputFile,
|
|
102
|
+
return /*#__PURE__*/_jsx(InputFile, {
|
|
210
103
|
ref: ref,
|
|
211
104
|
accept: ".xlsx",
|
|
212
105
|
type: "arrayBuffer",
|
|
213
|
-
onChange: onInputChange
|
|
214
|
-
|
|
106
|
+
onChange: onInputChange,
|
|
107
|
+
...others
|
|
108
|
+
});
|
|
215
109
|
});
|
|
216
110
|
|
|
217
111
|
/** 手动导出 excel */
|
|
218
112
|
export function exportExcel(data, name) {
|
|
219
|
-
|
|
220
|
-
|
|
113
|
+
const workSheet = utils.json_to_sheet(data);
|
|
114
|
+
const workBook = utils.book_new();
|
|
221
115
|
utils.book_append_sheet(workBook, workSheet);
|
|
222
|
-
writeFile(workBook,
|
|
116
|
+
writeFile(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`);
|
|
223
117
|
}
|
|
224
118
|
/** 导出 excel 的 button 组件 */
|
|
225
|
-
export
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
119
|
+
export const ExportExcel = /*#__PURE__*/forwardRef((props, ref) => {
|
|
120
|
+
const {
|
|
121
|
+
data,
|
|
122
|
+
fileName,
|
|
123
|
+
onClick,
|
|
124
|
+
...others
|
|
125
|
+
} = props;
|
|
230
126
|
function onButtonClick(e) {
|
|
231
127
|
exportExcel(data, fileName);
|
|
232
|
-
onClick
|
|
128
|
+
onClick?.(e);
|
|
233
129
|
}
|
|
234
|
-
return /*#__PURE__*/_jsx("button",
|
|
130
|
+
return /*#__PURE__*/_jsx("button", {
|
|
235
131
|
ref: ref,
|
|
236
|
-
onClick: onButtonClick
|
|
237
|
-
|
|
132
|
+
onClick: onButtonClick,
|
|
133
|
+
...others
|
|
134
|
+
});
|
|
238
135
|
});
|
|
239
136
|
/** 尺寸渐变的组件 */
|
|
240
|
-
export
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
vertical =
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
var _useState7 = useState(0),
|
|
262
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
263
|
-
count = _useState8[0],
|
|
264
|
-
setCount = _useState8[1];
|
|
265
|
-
useEffect(function () {
|
|
266
|
-
var observer = new ResizeObserver(function (entries) {
|
|
267
|
-
var _entries$0$contentRec = entries[0].contentRect,
|
|
268
|
-
currentWidth = _entries$0$contentRec.width,
|
|
269
|
-
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;
|
|
270
158
|
setWidth(currentWidth);
|
|
271
159
|
setHeight(currentHeight);
|
|
272
160
|
});
|
|
273
161
|
observer.observe(box.current);
|
|
274
|
-
return
|
|
162
|
+
return () => {
|
|
275
163
|
observer.disconnect();
|
|
276
164
|
};
|
|
277
165
|
}, []);
|
|
278
|
-
useEffect(
|
|
279
|
-
setCount(
|
|
280
|
-
return Math.min(count + 1, 3);
|
|
281
|
-
});
|
|
166
|
+
useEffect(() => {
|
|
167
|
+
setCount(count => Math.min(count + 1, 3));
|
|
282
168
|
}, [width, height]);
|
|
283
|
-
|
|
169
|
+
const outerStyle = {
|
|
284
170
|
transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : undefined,
|
|
285
|
-
transitionDuration: count === 3 ?
|
|
286
|
-
width
|
|
287
|
-
height
|
|
171
|
+
transitionDuration: count === 3 ? `${time}ms` : undefined,
|
|
172
|
+
width,
|
|
173
|
+
height,
|
|
288
174
|
overflow: "hidden",
|
|
289
|
-
position: "relative"
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
175
|
+
position: "relative",
|
|
176
|
+
...style
|
|
177
|
+
};
|
|
178
|
+
return /*#__PURE__*/_jsx("div", {
|
|
179
|
+
style: outerStyle,
|
|
180
|
+
...others,
|
|
294
181
|
children: /*#__PURE__*/_jsx("div", {
|
|
295
182
|
className: containerClassName,
|
|
296
|
-
style:
|
|
297
|
-
position: "absolute"
|
|
298
|
-
|
|
183
|
+
style: {
|
|
184
|
+
position: "absolute",
|
|
185
|
+
...containerStyle
|
|
186
|
+
},
|
|
299
187
|
ref: box,
|
|
300
188
|
children: children
|
|
301
189
|
})
|
|
302
|
-
})
|
|
190
|
+
});
|
|
303
191
|
};
|
|
304
192
|
/** 雷达组件 */
|
|
305
|
-
export
|
|
306
|
-
|
|
307
|
-
unitRadius =
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
showGraduationText = props.showGraduationText,
|
|
327
|
-
showCircle = props.showCircle,
|
|
328
|
-
showDirection = props.showDirection;
|
|
329
|
-
var style = {
|
|
330
|
-
"--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`,
|
|
331
214
|
"--circle-count": circleCount,
|
|
332
|
-
"--circle-width":
|
|
215
|
+
"--circle-width": `${circleWidth}px`,
|
|
333
216
|
"--circle-color": circleColor,
|
|
334
217
|
"--direction-count": directionCount,
|
|
335
|
-
"--direction-width":
|
|
218
|
+
"--direction-width": `${directionWidth}px`,
|
|
336
219
|
"--direction-color": directionColor,
|
|
337
220
|
"--background-color": backgroundColor,
|
|
338
221
|
"--scan-color": scanColor,
|
|
339
|
-
"--period":
|
|
222
|
+
"--period": `${period}s`
|
|
340
223
|
};
|
|
341
224
|
return /*#__PURE__*/_jsxs("div", {
|
|
342
225
|
className: "sea-radar-wrapper",
|
|
343
226
|
style: style,
|
|
344
|
-
children: [Array(180).fill(0).map(
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
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",
|
|
355
241
|
style: {
|
|
356
|
-
|
|
357
|
-
display: showGraduationLine ? "block" : "none"
|
|
242
|
+
display: showGraduationText ? "block" : "none"
|
|
358
243
|
},
|
|
359
|
-
children:
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
display: showGraduationText ? "block" : "none"
|
|
363
|
-
},
|
|
364
|
-
children: String(index * 10).padStart(3, "0")
|
|
365
|
-
})
|
|
366
|
-
});
|
|
367
|
-
}), /*#__PURE__*/_jsxs("div", {
|
|
244
|
+
children: String(index * 10).padStart(3, "0")
|
|
245
|
+
})
|
|
246
|
+
})), /*#__PURE__*/_jsxs("div", {
|
|
368
247
|
className: "sea-radar",
|
|
369
248
|
children: [/*#__PURE__*/_jsx("div", {
|
|
370
249
|
className: "sea-radar-scan",
|
|
371
250
|
style: {
|
|
372
|
-
height:
|
|
373
|
-
clipPath:
|
|
251
|
+
height: `${unitRadius * circleCount * Math.tan(scanAngle)}px`,
|
|
252
|
+
clipPath: `polygon(0 0, 0 100%, 100% 100%)`
|
|
374
253
|
}
|
|
375
|
-
}), showCircle && Array(circleCount).fill(0).map(
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
left: "".concat(unitRadius * circleCount + it.radius * Math.cos(it.angle), "px"),
|
|
395
|
-
bottom: "".concat(unitRadius * circleCount + it.radius * Math.sin(it.angle), "px")
|
|
396
|
-
},
|
|
397
|
-
children: it.element
|
|
398
|
-
});
|
|
399
|
-
})]
|
|
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
|
+
}))]
|
|
400
273
|
})]
|
|
401
274
|
});
|
|
402
275
|
};
|
|
403
276
|
/** 忘了什么组件 */
|
|
404
|
-
export
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
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
|
+
});
|
|
418
295
|
};
|
|
419
296
|
export function getGapRange(gap) {
|
|
420
297
|
if (typeof gap === "number") return [gap, gap];
|
|
@@ -422,9 +299,9 @@ export function getGapRange(gap) {
|
|
|
422
299
|
return [0, null];
|
|
423
300
|
}
|
|
424
301
|
export function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
|
|
425
|
-
|
|
302
|
+
const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1;
|
|
426
303
|
if (count === 1) return [count, 0];
|
|
427
|
-
|
|
304
|
+
const averageGap = (width - itemWidth * count) / (count - 1);
|
|
428
305
|
if (averageGap < minGap) return [count, minGap];
|
|
429
306
|
if (maxGap !== null && averageGap > maxGap) return [count, maxGap];
|
|
430
307
|
return [count, averageGap];
|
|
@@ -432,50 +309,36 @@ export function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
|
|
|
432
309
|
|
|
433
310
|
/** 自适应浮动组件 */
|
|
434
311
|
export function Flow(props) {
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
rowGap =
|
|
440
|
-
maxRows
|
|
441
|
-
data
|
|
442
|
-
render
|
|
443
|
-
keyExactor
|
|
444
|
-
className
|
|
445
|
-
style
|
|
446
|
-
containerClassName
|
|
447
|
-
containerStyle
|
|
448
|
-
throttle
|
|
449
|
-
transitionDuration
|
|
450
|
-
onSizeChange
|
|
451
|
-
others
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
columnCount = _useState12[0],
|
|
463
|
-
setColumnCount = _useState12[1];
|
|
464
|
-
var _useState13 = useState(minColumnGap),
|
|
465
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
466
|
-
columnGapSize = _useState14[0],
|
|
467
|
-
setColumnGapSize = _useState14[1];
|
|
468
|
-
var _useState15 = useState(false),
|
|
469
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
470
|
-
showItems = _useState16[0],
|
|
471
|
-
setShowItems = _useState16[1];
|
|
472
|
-
var ele = useRef(null);
|
|
473
|
-
var contentRows = Math.ceil(data.length / columnCount);
|
|
474
|
-
var contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows;
|
|
475
|
-
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;
|
|
476
339
|
function getPosition(index) {
|
|
477
|
-
|
|
478
|
-
|
|
340
|
+
const y = Math.floor(index / columnCount);
|
|
341
|
+
const x = index - y * columnCount;
|
|
479
342
|
return {
|
|
480
343
|
left: x * (itemWidth + columnGapSize),
|
|
481
344
|
top: y * (itemHeight + rowGap)
|
|
@@ -485,16 +348,15 @@ export function Flow(props) {
|
|
|
485
348
|
if (typeof maxRows !== "number") return false;
|
|
486
349
|
return index >= maxRows * columnCount;
|
|
487
350
|
}
|
|
488
|
-
useEffect(
|
|
489
|
-
|
|
490
|
-
|
|
351
|
+
useEffect(() => {
|
|
352
|
+
let timeout;
|
|
353
|
+
const observer = new ResizeObserver(entries => {
|
|
491
354
|
clearTimeout(timeout);
|
|
492
355
|
function task() {
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
newColumnGapSize = _getGapCountAndSize2[1];
|
|
356
|
+
const {
|
|
357
|
+
inlineSize: width
|
|
358
|
+
} = entries[0].borderBoxSize[0];
|
|
359
|
+
const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap);
|
|
498
360
|
setShowItems(true);
|
|
499
361
|
setWidth(width);
|
|
500
362
|
setColumnCount(newColumnCount);
|
|
@@ -507,182 +369,178 @@ export function Flow(props) {
|
|
|
507
369
|
}
|
|
508
370
|
});
|
|
509
371
|
observer.observe(ele.current);
|
|
510
|
-
return
|
|
372
|
+
return () => {
|
|
511
373
|
observer.disconnect();
|
|
512
374
|
};
|
|
513
375
|
}, [itemWidth, throttle, columnGap]);
|
|
514
|
-
useEffect(
|
|
515
|
-
onSizeChange
|
|
516
|
-
width
|
|
517
|
-
height
|
|
518
|
-
itemWidth
|
|
519
|
-
itemHeight
|
|
376
|
+
useEffect(() => {
|
|
377
|
+
onSizeChange?.({
|
|
378
|
+
width,
|
|
379
|
+
height,
|
|
380
|
+
itemWidth,
|
|
381
|
+
itemHeight,
|
|
520
382
|
columnGap: columnGapSize,
|
|
521
|
-
columnCount
|
|
522
|
-
rowGap
|
|
383
|
+
columnCount,
|
|
384
|
+
rowGap,
|
|
523
385
|
rowCount: contentShownRows,
|
|
524
386
|
overflow: data.length > contentShownRows * columnCount,
|
|
525
387
|
itemCount: data.length,
|
|
526
|
-
maxRows: maxRows
|
|
388
|
+
maxRows: maxRows ?? null
|
|
527
389
|
});
|
|
528
390
|
}, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
|
|
529
|
-
return /*#__PURE__*/_jsx("div",
|
|
391
|
+
return /*#__PURE__*/_jsx("div", {
|
|
530
392
|
ref: ele,
|
|
531
393
|
className: className,
|
|
532
|
-
style:
|
|
394
|
+
style: {
|
|
533
395
|
position: "relative",
|
|
534
396
|
boxSizing: "border-box",
|
|
535
|
-
height
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
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: {
|
|
543
412
|
width: itemWidth,
|
|
544
413
|
height: itemHeight,
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
}, containerStyle),
|
|
553
|
-
children: render(it, idx, getHidden(idx))
|
|
554
|
-
})
|
|
555
|
-
}, (keyExactor === null || keyExactor === void 0 ? void 0 : keyExactor(it, idx)) || idx);
|
|
556
|
-
})
|
|
557
|
-
}));
|
|
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
|
+
});
|
|
558
421
|
}
|
|
559
422
|
/** 梯形组件 */
|
|
560
|
-
export
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
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", {
|
|
577
442
|
ref: ref,
|
|
578
|
-
style:
|
|
443
|
+
style: {
|
|
579
444
|
width: bottom,
|
|
580
|
-
height
|
|
581
|
-
clipPath:
|
|
582
|
-
|
|
583
|
-
|
|
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
|
+
});
|
|
584
451
|
});
|
|
585
452
|
/** 循环播放组件 */
|
|
586
453
|
export function LoopSwiper(props) {
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
gap =
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
className = _props$className === void 0 ? "" : _props$className,
|
|
600
|
-
_props$direction = props.direction,
|
|
601
|
-
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;
|
|
602
466
|
if (!(size > 0 && (speed > 0 || speed < 0))) {
|
|
603
467
|
throw new RangeError("size 必须是正数,speed 必须非0");
|
|
604
468
|
}
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
className: className,
|
|
616
|
-
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
|
|
617
479
|
});
|
|
618
480
|
cache.current = {
|
|
619
|
-
size
|
|
620
|
-
gap
|
|
621
|
-
speed
|
|
622
|
-
keys
|
|
623
|
-
paused
|
|
624
|
-
className
|
|
625
|
-
direction
|
|
481
|
+
size,
|
|
482
|
+
gap,
|
|
483
|
+
speed,
|
|
484
|
+
keys,
|
|
485
|
+
paused,
|
|
486
|
+
className,
|
|
487
|
+
direction
|
|
626
488
|
};
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
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,
|
|
630
498
|
dom: null,
|
|
631
499
|
offset: idx * (size + gap) + start
|
|
632
|
-
};
|
|
633
|
-
}));
|
|
634
|
-
if (keysRef.current.length !== keys.length || keysRef.current.some(function (it, idx) {
|
|
635
|
-
return it !== keys[idx];
|
|
636
|
-
})) {
|
|
637
|
-
keysRef.current = keys;
|
|
638
|
-
eles.current = keys.map(function (key, idx) {
|
|
639
|
-
return {
|
|
640
|
-
key: key,
|
|
641
|
-
dom: null,
|
|
642
|
-
offset: idx * (size + gap) + start
|
|
643
|
-
};
|
|
644
|
-
});
|
|
500
|
+
}));
|
|
645
501
|
}
|
|
646
502
|
function setStyles() {
|
|
647
|
-
|
|
648
|
-
size
|
|
649
|
-
speed
|
|
650
|
-
className
|
|
651
|
-
direction
|
|
652
|
-
|
|
503
|
+
const {
|
|
504
|
+
size,
|
|
505
|
+
speed,
|
|
506
|
+
className,
|
|
507
|
+
direction
|
|
508
|
+
} = cache.current;
|
|
509
|
+
eles.current.forEach(it => {
|
|
653
510
|
it.dom.className = className;
|
|
654
|
-
it.dom.style.setProperty("position",
|
|
655
|
-
it.dom.style.setProperty("width",
|
|
656
|
-
direction === "x" && speed < 0 ? it.dom.style.setProperty("right",
|
|
657
|
-
direction === "y" && speed < 0 ? it.dom.style.setProperty("bottom",
|
|
658
|
-
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)`);
|
|
659
516
|
});
|
|
660
517
|
}
|
|
661
|
-
useEffect(
|
|
518
|
+
useEffect(() => {
|
|
662
519
|
setStyles();
|
|
663
520
|
}, []);
|
|
664
|
-
useEffect(
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
size
|
|
668
|
-
gap
|
|
669
|
-
speed
|
|
670
|
-
keys
|
|
671
|
-
paused
|
|
521
|
+
useEffect(() => {
|
|
522
|
+
const stop = setFrameInterval(() => {
|
|
523
|
+
const {
|
|
524
|
+
size,
|
|
525
|
+
gap,
|
|
526
|
+
speed,
|
|
527
|
+
keys,
|
|
528
|
+
paused
|
|
529
|
+
} = cache.current;
|
|
672
530
|
if (paused) return;
|
|
673
531
|
eles.current.length = keys.length;
|
|
674
|
-
|
|
675
|
-
eles.current.forEach(
|
|
532
|
+
let minIndex = 0;
|
|
533
|
+
eles.current.forEach((it, idx) => {
|
|
676
534
|
if (it.offset < eles.current[minIndex].offset) {
|
|
677
535
|
minIndex = idx;
|
|
678
536
|
}
|
|
679
537
|
});
|
|
680
|
-
|
|
681
|
-
eles.current.forEach(
|
|
682
|
-
|
|
538
|
+
const minOffset = eles.current[minIndex].offset;
|
|
539
|
+
eles.current.forEach((it, idx) => {
|
|
540
|
+
let index = idx;
|
|
683
541
|
if (idx < minIndex) index = eles.current.length + idx;
|
|
684
542
|
it.offset = minOffset + (index - minIndex) * (size + gap);
|
|
685
|
-
|
|
543
|
+
let newOffset = it.offset - Math.abs(speed);
|
|
686
544
|
if (newOffset + size + gap <= 0) {
|
|
687
545
|
newOffset += eles.current.length * (size + gap);
|
|
688
546
|
}
|
|
@@ -692,88 +550,86 @@ export function LoopSwiper(props) {
|
|
|
692
550
|
}, 1);
|
|
693
551
|
return stop;
|
|
694
552
|
}, []);
|
|
695
|
-
function
|
|
553
|
+
function ref(dom, index) {
|
|
696
554
|
if (!eles.current[index]) return;
|
|
697
555
|
eles.current[index].dom = dom;
|
|
698
556
|
}
|
|
699
557
|
return /*#__PURE__*/_jsx(Fragment, {
|
|
700
|
-
children: data.map(
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
},
|
|
705
|
-
children: render(it, idx, arr)
|
|
706
|
-
}, keys[idx]);
|
|
707
|
-
})
|
|
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]))
|
|
708
562
|
});
|
|
709
563
|
}
|
|
710
|
-
export
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
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 = {}) {
|
|
720
575
|
return drawArc(o, o, radius, startAngle, endAngle, options);
|
|
721
576
|
}
|
|
722
|
-
return /*#__PURE__*/_jsx("div",
|
|
723
|
-
style:
|
|
577
|
+
return /*#__PURE__*/_jsx("div", {
|
|
578
|
+
style: {
|
|
579
|
+
...style,
|
|
724
580
|
width: o * 2,
|
|
725
581
|
height: o * 2,
|
|
726
|
-
clipPath:
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
}, 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
|
+
});
|
|
734
589
|
};
|
|
735
590
|
/** 渐变数字组件 */
|
|
736
|
-
export
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
591
|
+
export const TransitionNum = /*#__PURE__*/forwardRef((props, ref) => {
|
|
592
|
+
const {
|
|
593
|
+
children: num,
|
|
594
|
+
period,
|
|
595
|
+
numToStr,
|
|
596
|
+
...others
|
|
597
|
+
} = props;
|
|
741
598
|
if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
|
|
742
599
|
throw new RangeError("目标数字必须是整数,周期必须是正整数");
|
|
743
600
|
}
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
num
|
|
747
|
-
period
|
|
748
|
-
numToStr
|
|
601
|
+
const ele = useRef(null);
|
|
602
|
+
const cache = useRef({
|
|
603
|
+
num,
|
|
604
|
+
period,
|
|
605
|
+
numToStr,
|
|
749
606
|
show: num
|
|
750
607
|
});
|
|
751
|
-
cache.current =
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
show = _cache$current3.show,
|
|
768
|
-
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;
|
|
769
624
|
ele.current.innerText = (numToStr || String)(show);
|
|
770
625
|
if (num === show) return;
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
num
|
|
776
|
-
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;
|
|
777
633
|
cache.current.show += speed;
|
|
778
634
|
if (speed > 0 && cache.current.show > num || speed < 0 && cache.current.show < num) {
|
|
779
635
|
cancel();
|
|
@@ -783,87 +639,102 @@ export var TransitionNum = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
783
639
|
}, 1);
|
|
784
640
|
return cancel;
|
|
785
641
|
}, [num]);
|
|
786
|
-
return /*#__PURE__*/_jsx("div",
|
|
787
|
-
ref: ele
|
|
788
|
-
|
|
642
|
+
return /*#__PURE__*/_jsx("div", {
|
|
643
|
+
ref: ele,
|
|
644
|
+
...others
|
|
645
|
+
});
|
|
789
646
|
});
|
|
790
647
|
/** 环形文字 */
|
|
791
|
-
export
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
startAngel =
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
var unitAngle = Math.atan(width / 2 / radius) * 2;
|
|
810
|
-
var totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
|
|
811
|
-
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;
|
|
812
666
|
function getTransform(idx) {
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
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)`;
|
|
818
672
|
}
|
|
819
|
-
|
|
673
|
+
const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "");
|
|
820
674
|
if (reverse) words.reverse();
|
|
821
675
|
return /*#__PURE__*/_jsx(Fragment, {
|
|
822
|
-
children: words.map(
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
}), idx);
|
|
836
|
-
})
|
|
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))
|
|
837
689
|
});
|
|
838
690
|
};
|
|
839
691
|
/**
|
|
840
692
|
* 滚动条组件
|
|
841
693
|
* @description 注意 children 不是直接渲染在组件上的,而是渲染在内部的容器上
|
|
842
694
|
*/
|
|
843
|
-
export
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
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);
|
|
856
711
|
}, []);
|
|
857
|
-
return /*#__PURE__*/_jsx("div",
|
|
712
|
+
return /*#__PURE__*/_jsx("div", {
|
|
858
713
|
ref: ref,
|
|
859
|
-
className: clsx(!!thumbWidth && css
|
|
860
|
-
|
|
861
|
-
|
|
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,
|
|
862
733
|
children: /*#__PURE__*/_jsx("div", {
|
|
863
734
|
className: containerClassName,
|
|
864
735
|
style: containerStyle,
|
|
865
736
|
children: children
|
|
866
737
|
})
|
|
867
|
-
})
|
|
738
|
+
});
|
|
868
739
|
});
|
|
869
740
|
//# sourceMappingURL=index.js.map
|