@xfe-repo/web-components 1.2.6 → 1.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +89 -78
- package/dist/index.mjs +86 -75
- package/package.json +6 -5
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import React__default, { PureComponent, RefObject, ReactNode } from 'react';
|
|
3
4
|
import { ThemeConfig } from 'antd/lib';
|
|
4
5
|
import { KeepAliveRef, useKeepAliveRef } from 'keepalive-for-react';
|
|
5
6
|
|
|
@@ -17,7 +18,7 @@ type MultiWindowContentsProps = {
|
|
|
17
18
|
children: ReactNode;
|
|
18
19
|
contentRef?: MultiWindowContentsRefType;
|
|
19
20
|
};
|
|
20
|
-
declare const MultiWindowContents:
|
|
21
|
+
declare const MultiWindowContents: React__default.MemoExoticComponent<(props: MultiWindowContentsProps) => react_jsx_runtime.JSX.Element>;
|
|
21
22
|
|
|
22
23
|
type PagePathType = {
|
|
23
24
|
label: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import React__default, { PureComponent, RefObject, ReactNode } from 'react';
|
|
3
4
|
import { ThemeConfig } from 'antd/lib';
|
|
4
5
|
import { KeepAliveRef, useKeepAliveRef } from 'keepalive-for-react';
|
|
5
6
|
|
|
@@ -17,7 +18,7 @@ type MultiWindowContentsProps = {
|
|
|
17
18
|
children: ReactNode;
|
|
18
19
|
contentRef?: MultiWindowContentsRefType;
|
|
19
20
|
};
|
|
20
|
-
declare const MultiWindowContents:
|
|
21
|
+
declare const MultiWindowContents: React__default.MemoExoticComponent<(props: MultiWindowContentsProps) => react_jsx_runtime.JSX.Element>;
|
|
21
22
|
|
|
22
23
|
type PagePathType = {
|
|
23
24
|
label: string;
|
package/dist/index.js
CHANGED
|
@@ -333,9 +333,14 @@ var Loading = /*#__PURE__*/ function(_import_react_PureComponent) {
|
|
|
333
333
|
}(import_react.PureComponent);
|
|
334
334
|
// src/MultiWindow/MultiWindow.tsx
|
|
335
335
|
var import_react5 = require("react");
|
|
336
|
+
var import_classnames = __toESM(require("classnames"));
|
|
337
|
+
var import_icons2 = require("@ant-design/icons");
|
|
338
|
+
var import_antd4 = require("antd");
|
|
336
339
|
var import_web_micro = require("@xfe-repo/web-micro");
|
|
340
|
+
var import_web_router = require("@xfe-repo/web-router");
|
|
337
341
|
var import_tools = require("@xfe-repo/web-utils/tools");
|
|
338
|
-
|
|
342
|
+
// src/MultiWindow/MultiWindowSearch.tsx
|
|
343
|
+
var import_react2 = require("react");
|
|
339
344
|
// src/MultiWindow/MultiWindow.module.less
|
|
340
345
|
var MultiWindow_module_default = {
|
|
341
346
|
multi_window: "MultiWindow_module_multi_window",
|
|
@@ -346,26 +351,74 @@ var MultiWindow_module_default = {
|
|
|
346
351
|
input: "MultiWindow_module_input",
|
|
347
352
|
collection: "MultiWindow_module_collection"
|
|
348
353
|
};
|
|
349
|
-
// src/MultiWindow/
|
|
350
|
-
var import_antd4 = require("antd");
|
|
351
|
-
var import_icons2 = require("@ant-design/icons");
|
|
352
|
-
// src/MultiWindow/MultiWindowTabs.tsx
|
|
353
|
-
var import_react2 = __toESM(require("react"));
|
|
354
|
+
// src/MultiWindow/MultiWindowSearch.tsx
|
|
354
355
|
var import_antd2 = require("antd");
|
|
356
|
+
var import_icons = require("@ant-design/icons");
|
|
357
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
358
|
+
var Search = import_antd2.Input.Search;
|
|
359
|
+
var MultiWindowSearch = (0, import_react2.memo)(function(props) {
|
|
360
|
+
var onSearch = props.onSearch;
|
|
361
|
+
var _ref = _sliced_to_array((0, import_react2.useState)(false), 2), showSearch = _ref[0], setShowSearch = _ref[1];
|
|
362
|
+
var _ref1 = _sliced_to_array((0, import_react2.useState)(""), 2), searchValue = _ref1[0], setSearchValue = _ref1[1];
|
|
363
|
+
var shouldShowSearch = (0, import_react2.useMemo)(function() {
|
|
364
|
+
return showSearch || searchValue;
|
|
365
|
+
}, [
|
|
366
|
+
showSearch,
|
|
367
|
+
searchValue
|
|
368
|
+
]);
|
|
369
|
+
var handleShowSearch = (0, import_react2.useCallback)(function() {
|
|
370
|
+
setShowSearch(true);
|
|
371
|
+
}, []);
|
|
372
|
+
var handleHideSearch = (0, import_react2.useCallback)(function() {
|
|
373
|
+
setShowSearch(false);
|
|
374
|
+
}, []);
|
|
375
|
+
var handleSearch = (0, import_react2.useCallback)(function(value) {
|
|
376
|
+
setSearchValue(value);
|
|
377
|
+
onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
|
|
378
|
+
}, [
|
|
379
|
+
onSearch
|
|
380
|
+
]);
|
|
381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
|
|
382
|
+
className: MultiWindow_module_default.search,
|
|
383
|
+
onMouseLeave: handleHideSearch,
|
|
384
|
+
onMouseEnter: handleShowSearch,
|
|
385
|
+
children: [
|
|
386
|
+
shouldShowSearch && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Search, {
|
|
387
|
+
className: MultiWindow_module_default.input,
|
|
388
|
+
placeholder: "标签/单号",
|
|
389
|
+
onSearch: handleSearch,
|
|
390
|
+
allowClear: true,
|
|
391
|
+
autoFocus: true
|
|
392
|
+
}),
|
|
393
|
+
!shouldShowSearch && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Tooltip, {
|
|
394
|
+
title: "搜索标签/单号",
|
|
395
|
+
color: "var(--ant-color-primary)",
|
|
396
|
+
mouseEnterDelay: 0.5,
|
|
397
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Button, {
|
|
398
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.SearchOutlined, {}),
|
|
399
|
+
type: "text"
|
|
400
|
+
})
|
|
401
|
+
})
|
|
402
|
+
]
|
|
403
|
+
});
|
|
404
|
+
});
|
|
405
|
+
// src/MultiWindow/MultiWindowTabs.tsx
|
|
406
|
+
var import_react3 = __toESM(require("react"));
|
|
407
|
+
var import_antd3 = require("antd");
|
|
355
408
|
var import_core = require("@dnd-kit/core");
|
|
356
409
|
var import_sortable = require("@dnd-kit/sortable");
|
|
357
410
|
var import_modifiers = require("@dnd-kit/modifiers");
|
|
358
411
|
var import_utilities = require("@dnd-kit/utilities");
|
|
359
|
-
var
|
|
360
|
-
var
|
|
361
|
-
var MultiWindowTabs = (0,
|
|
412
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
413
|
+
var import_react4 = require("react");
|
|
414
|
+
var MultiWindowTabs = (0, import_react3.memo)(function(props) {
|
|
362
415
|
var pathKey = props.pathKey, pagePaths = props.pagePaths, className = props.className, onChange = props.onChange, onClose = props.onClose, onSort = props.onSort, onCollectionChange = props.onCollectionChange, sortAutoActive = props.sortAutoActive;
|
|
363
416
|
var sensor = (0, import_core.useSensor)(import_core.PointerSensor, {
|
|
364
417
|
activationConstraint: {
|
|
365
418
|
distance: 10
|
|
366
419
|
}
|
|
367
420
|
});
|
|
368
|
-
var pagePathsHelperData = (0,
|
|
421
|
+
var pagePathsHelperData = (0, import_react3.useMemo)(function() {
|
|
369
422
|
var keys = [];
|
|
370
423
|
var map = /* @__PURE__ */ new Map();
|
|
371
424
|
pagePaths.forEach(function(item) {
|
|
@@ -379,26 +432,26 @@ var MultiWindowTabs = (0, import_react2.memo)(function(props) {
|
|
|
379
432
|
}, [
|
|
380
433
|
pagePaths
|
|
381
434
|
]);
|
|
382
|
-
var handleEdit = (0,
|
|
435
|
+
var handleEdit = (0, import_react3.useCallback)(function(targetKey, action) {
|
|
383
436
|
if (action === "add") {} else if (action === "remove") {
|
|
384
437
|
onClose === null || onClose === void 0 ? void 0 : onClose(String(targetKey));
|
|
385
438
|
}
|
|
386
439
|
}, [
|
|
387
440
|
onClose
|
|
388
441
|
]);
|
|
389
|
-
var handleTabChange = (0,
|
|
442
|
+
var handleTabChange = (0, import_react3.useCallback)(function(activeKey) {
|
|
390
443
|
onChange === null || onChange === void 0 ? void 0 : onChange(activeKey);
|
|
391
444
|
}, [
|
|
392
445
|
onChange
|
|
393
446
|
]);
|
|
394
|
-
var onDragStart = (0,
|
|
447
|
+
var onDragStart = (0, import_react3.useCallback)(function(event) {
|
|
395
448
|
var active = event.active;
|
|
396
449
|
sortAutoActive && (onChange === null || onChange === void 0 ? void 0 : onChange(String(active.id)));
|
|
397
450
|
}, [
|
|
398
451
|
onChange,
|
|
399
452
|
sortAutoActive
|
|
400
453
|
]);
|
|
401
|
-
var onDragEnd = (0,
|
|
454
|
+
var onDragEnd = (0, import_react3.useCallback)(function(event) {
|
|
402
455
|
var active = event.active, over = event.over;
|
|
403
456
|
if (active.id === (over === null || over === void 0 ? void 0 : over.id)) return;
|
|
404
457
|
var oldIndex = pagePaths.findIndex(function(i) {
|
|
@@ -413,8 +466,8 @@ var MultiWindowTabs = (0, import_react2.memo)(function(props) {
|
|
|
413
466
|
pagePaths,
|
|
414
467
|
onSort
|
|
415
468
|
]);
|
|
416
|
-
var renderTabBar = (0,
|
|
417
|
-
return /* @__PURE__ */ (0,
|
|
469
|
+
var renderTabBar = (0, import_react3.useCallback)(function(tabBarProps, DefaultTabBar) {
|
|
470
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core.DndContext, {
|
|
418
471
|
sensors: [
|
|
419
472
|
sensor
|
|
420
473
|
],
|
|
@@ -424,12 +477,12 @@ var MultiWindowTabs = (0, import_react2.memo)(function(props) {
|
|
|
424
477
|
modifiers: [
|
|
425
478
|
import_modifiers.restrictToHorizontalAxis
|
|
426
479
|
],
|
|
427
|
-
children: /* @__PURE__ */ (0,
|
|
480
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sortable.SortableContext, {
|
|
428
481
|
items: pagePathsHelperData.keys,
|
|
429
482
|
strategy: import_sortable.horizontalListSortingStrategy,
|
|
430
|
-
children: /* @__PURE__ */ (0,
|
|
483
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultTabBar, _object_spread_props(_object_spread({}, tabBarProps), {
|
|
431
484
|
children: function(node) {
|
|
432
|
-
return /* @__PURE__ */ (0,
|
|
485
|
+
return /* @__PURE__ */ (0, import_react4.createElement)(TabItem, _object_spread_props(_object_spread({}, node.props), {
|
|
433
486
|
key: node.key,
|
|
434
487
|
data: pagePathsHelperData.map.get(String(node.key)),
|
|
435
488
|
onCollectionChange: onCollectionChange,
|
|
@@ -446,7 +499,7 @@ var MultiWindowTabs = (0, import_react2.memo)(function(props) {
|
|
|
446
499
|
onCollectionChange,
|
|
447
500
|
sensor
|
|
448
501
|
]);
|
|
449
|
-
return /* @__PURE__ */ (0,
|
|
502
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Tabs, {
|
|
450
503
|
className: className,
|
|
451
504
|
activeKey: pathKey,
|
|
452
505
|
onChange: handleTabChange,
|
|
@@ -458,18 +511,18 @@ var MultiWindowTabs = (0, import_react2.memo)(function(props) {
|
|
|
458
511
|
hideAdd: true
|
|
459
512
|
});
|
|
460
513
|
});
|
|
461
|
-
var TabItem = (0,
|
|
514
|
+
var TabItem = (0, import_react3.memo)(function(props) {
|
|
462
515
|
var data = props.data, children = props.children, style = props.style, isActivated = props.isActivated, onCollectionChange = props.onCollectionChange;
|
|
463
516
|
var _ref = (0, import_sortable.useSortable)({
|
|
464
517
|
id: props["data-node-key"]
|
|
465
518
|
}), attributes = _ref.attributes, listeners = _ref.listeners, setNodeRef = _ref.setNodeRef, transform = _ref.transform, transition = _ref.transition, isDragging = _ref.isDragging;
|
|
466
|
-
var handleCollectionChange = (0,
|
|
519
|
+
var handleCollectionChange = (0, import_react3.useCallback)(function(collectionKey) {
|
|
467
520
|
if (!data) return;
|
|
468
521
|
onCollectionChange === null || onCollectionChange === void 0 ? void 0 : onCollectionChange(data.key, collectionKey);
|
|
469
522
|
}, [
|
|
470
523
|
data
|
|
471
524
|
]);
|
|
472
|
-
var collectionSelect = (0,
|
|
525
|
+
var collectionSelect = (0, import_react3.useMemo)(function() {
|
|
473
526
|
var _data_searchCollection;
|
|
474
527
|
if (!(data === null || data === void 0 ? void 0 : (_data_searchCollection = data.searchCollection) === null || _data_searchCollection === void 0 ? void 0 : _data_searchCollection.length)) return null;
|
|
475
528
|
if (!isActivated) return null;
|
|
@@ -480,7 +533,7 @@ var TabItem = (0, import_react2.memo)(function(props) {
|
|
|
480
533
|
};
|
|
481
534
|
});
|
|
482
535
|
var currentKey = data.searchCollection[0];
|
|
483
|
-
return /* @__PURE__ */ (0,
|
|
536
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Select, {
|
|
484
537
|
className: MultiWindow_module_default.collection,
|
|
485
538
|
options: options,
|
|
486
539
|
value: currentKey,
|
|
@@ -494,7 +547,7 @@ var TabItem = (0, import_react2.memo)(function(props) {
|
|
|
494
547
|
data,
|
|
495
548
|
isActivated
|
|
496
549
|
]);
|
|
497
|
-
var childrenWithCollectionSelect = (0,
|
|
550
|
+
var childrenWithCollectionSelect = (0, import_react3.useMemo)(function() {
|
|
498
551
|
var innerChildren = children.props.children;
|
|
499
552
|
if (!Array.isArray(innerChildren)) return innerChildren;
|
|
500
553
|
var newChildren = _to_consumable_array(innerChildren);
|
|
@@ -504,7 +557,7 @@ var TabItem = (0, import_react2.memo)(function(props) {
|
|
|
504
557
|
children,
|
|
505
558
|
collectionSelect
|
|
506
559
|
]);
|
|
507
|
-
return
|
|
560
|
+
return import_react3.default.cloneElement(children, _object_spread({
|
|
508
561
|
ref: setNodeRef,
|
|
509
562
|
style: _object_spread_props(_object_spread({}, style), {
|
|
510
563
|
transform: import_utilities.CSS.Translate.toString(transform && _object_spread_props(_object_spread({}, transform), {
|
|
@@ -517,58 +570,6 @@ var TabItem = (0, import_react2.memo)(function(props) {
|
|
|
517
570
|
children: childrenWithCollectionSelect
|
|
518
571
|
}, attributes, listeners));
|
|
519
572
|
});
|
|
520
|
-
// src/MultiWindow/MultiWindowSearch.tsx
|
|
521
|
-
var import_react4 = require("react");
|
|
522
|
-
var import_antd3 = require("antd");
|
|
523
|
-
var import_icons = require("@ant-design/icons");
|
|
524
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
525
|
-
var Search = import_antd3.Input.Search;
|
|
526
|
-
var MultiWindowSearch = (0, import_react4.memo)(function(props) {
|
|
527
|
-
var onSearch = props.onSearch;
|
|
528
|
-
var _ref = _sliced_to_array((0, import_react4.useState)(false), 2), showSearch = _ref[0], setShowSearch = _ref[1];
|
|
529
|
-
var _ref1 = _sliced_to_array((0, import_react4.useState)(""), 2), searchValue = _ref1[0], setSearchValue = _ref1[1];
|
|
530
|
-
var shouldShowSearch = (0, import_react4.useMemo)(function() {
|
|
531
|
-
return showSearch || searchValue;
|
|
532
|
-
}, [
|
|
533
|
-
showSearch,
|
|
534
|
-
searchValue
|
|
535
|
-
]);
|
|
536
|
-
var handleShowSearch = (0, import_react4.useCallback)(function() {
|
|
537
|
-
setShowSearch(true);
|
|
538
|
-
}, []);
|
|
539
|
-
var handleHideSearch = (0, import_react4.useCallback)(function() {
|
|
540
|
-
setShowSearch(false);
|
|
541
|
-
}, []);
|
|
542
|
-
var handleSearch = (0, import_react4.useCallback)(function(value) {
|
|
543
|
-
setSearchValue(value);
|
|
544
|
-
onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
|
|
545
|
-
}, [
|
|
546
|
-
onSearch
|
|
547
|
-
]);
|
|
548
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
|
|
549
|
-
className: MultiWindow_module_default.search,
|
|
550
|
-
onMouseLeave: handleHideSearch,
|
|
551
|
-
onMouseEnter: handleShowSearch,
|
|
552
|
-
children: [
|
|
553
|
-
shouldShowSearch && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Search, {
|
|
554
|
-
className: MultiWindow_module_default.input,
|
|
555
|
-
placeholder: "标签/单号",
|
|
556
|
-
onSearch: handleSearch,
|
|
557
|
-
allowClear: true,
|
|
558
|
-
autoFocus: true
|
|
559
|
-
}),
|
|
560
|
-
!shouldShowSearch && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Tooltip, {
|
|
561
|
-
title: "搜索标签/单号",
|
|
562
|
-
color: "var(--ant-color-primary)",
|
|
563
|
-
mouseEnterDelay: 0.5,
|
|
564
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Button, {
|
|
565
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.SearchOutlined, {}),
|
|
566
|
-
type: "text"
|
|
567
|
-
})
|
|
568
|
-
})
|
|
569
|
-
]
|
|
570
|
-
});
|
|
571
|
-
});
|
|
572
573
|
// src/MultiWindow/MultiWindow.tsx
|
|
573
574
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
574
575
|
var MultiWindow = (0, import_react5.memo)(function(props) {
|
|
@@ -699,6 +700,16 @@ var MultiWindow = (0, import_react5.memo)(function(props) {
|
|
|
699
700
|
cancelCallback();
|
|
700
701
|
};
|
|
701
702
|
}, []);
|
|
703
|
+
(0, import_react5.useEffect)(function() {
|
|
704
|
+
var unsubscribe = (0, import_web_router.onHistoryChange)(function(detail) {
|
|
705
|
+
handleRouterUpdate("".concat(detail.pathname).concat(detail.search));
|
|
706
|
+
});
|
|
707
|
+
return function() {
|
|
708
|
+
unsubscribe();
|
|
709
|
+
};
|
|
710
|
+
}, [
|
|
711
|
+
handleRouterUpdate
|
|
712
|
+
]);
|
|
702
713
|
(0, import_react5.useEffect)(function() {
|
|
703
714
|
var titleEl = document.querySelector("title");
|
|
704
715
|
if (!titleEl) return;
|
package/dist/index.mjs
CHANGED
|
@@ -258,9 +258,14 @@ var Loading = /*#__PURE__*/ function(PureComponent) {
|
|
|
258
258
|
}(PureComponent);
|
|
259
259
|
// src/MultiWindow/MultiWindow.tsx
|
|
260
260
|
import { memo as memo3, useCallback as useCallback3, useEffect, useMemo as useMemo3, useRef, useState as useState2 } from "react";
|
|
261
|
+
import classnames from "classnames";
|
|
262
|
+
import { CloseOutlined, QuestionCircleOutlined, RedoOutlined } from "@ant-design/icons";
|
|
263
|
+
import { Button as Button2, ConfigProvider, Popconfirm, Tooltip as Tooltip2 } from "antd";
|
|
261
264
|
import { microApp, navigateToWithMicroApp } from "@xfe-repo/web-micro";
|
|
265
|
+
import { onHistoryChange } from "@xfe-repo/web-router";
|
|
262
266
|
import { queryString } from "@xfe-repo/web-utils/tools";
|
|
263
|
-
|
|
267
|
+
// src/MultiWindow/MultiWindowSearch.tsx
|
|
268
|
+
import { memo, useCallback, useMemo, useState } from "react";
|
|
264
269
|
// src/MultiWindow/MultiWindow.module.less
|
|
265
270
|
var MultiWindow_module_default = {
|
|
266
271
|
multi_window: "MultiWindow_module_multi_window",
|
|
@@ -271,26 +276,74 @@ var MultiWindow_module_default = {
|
|
|
271
276
|
input: "MultiWindow_module_input",
|
|
272
277
|
collection: "MultiWindow_module_collection"
|
|
273
278
|
};
|
|
274
|
-
// src/MultiWindow/
|
|
275
|
-
import { Button
|
|
276
|
-
import {
|
|
279
|
+
// src/MultiWindow/MultiWindowSearch.tsx
|
|
280
|
+
import { Button, Input, Tooltip } from "antd";
|
|
281
|
+
import { SearchOutlined } from "@ant-design/icons";
|
|
282
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
283
|
+
var Search = Input.Search;
|
|
284
|
+
var MultiWindowSearch = memo(function(props) {
|
|
285
|
+
var onSearch = props.onSearch;
|
|
286
|
+
var _useState = _sliced_to_array(useState(false), 2), showSearch = _useState[0], setShowSearch = _useState[1];
|
|
287
|
+
var _useState1 = _sliced_to_array(useState(""), 2), searchValue = _useState1[0], setSearchValue = _useState1[1];
|
|
288
|
+
var shouldShowSearch = useMemo(function() {
|
|
289
|
+
return showSearch || searchValue;
|
|
290
|
+
}, [
|
|
291
|
+
showSearch,
|
|
292
|
+
searchValue
|
|
293
|
+
]);
|
|
294
|
+
var handleShowSearch = useCallback(function() {
|
|
295
|
+
setShowSearch(true);
|
|
296
|
+
}, []);
|
|
297
|
+
var handleHideSearch = useCallback(function() {
|
|
298
|
+
setShowSearch(false);
|
|
299
|
+
}, []);
|
|
300
|
+
var handleSearch = useCallback(function(value) {
|
|
301
|
+
setSearchValue(value);
|
|
302
|
+
onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
|
|
303
|
+
}, [
|
|
304
|
+
onSearch
|
|
305
|
+
]);
|
|
306
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
307
|
+
className: MultiWindow_module_default.search,
|
|
308
|
+
onMouseLeave: handleHideSearch,
|
|
309
|
+
onMouseEnter: handleShowSearch,
|
|
310
|
+
children: [
|
|
311
|
+
shouldShowSearch && /* @__PURE__ */ jsx2(Search, {
|
|
312
|
+
className: MultiWindow_module_default.input,
|
|
313
|
+
placeholder: "标签/单号",
|
|
314
|
+
onSearch: handleSearch,
|
|
315
|
+
allowClear: true,
|
|
316
|
+
autoFocus: true
|
|
317
|
+
}),
|
|
318
|
+
!shouldShowSearch && /* @__PURE__ */ jsx2(Tooltip, {
|
|
319
|
+
title: "搜索标签/单号",
|
|
320
|
+
color: "var(--ant-color-primary)",
|
|
321
|
+
mouseEnterDelay: 0.5,
|
|
322
|
+
children: /* @__PURE__ */ jsx2(Button, {
|
|
323
|
+
icon: /* @__PURE__ */ jsx2(SearchOutlined, {}),
|
|
324
|
+
type: "text"
|
|
325
|
+
})
|
|
326
|
+
})
|
|
327
|
+
]
|
|
328
|
+
});
|
|
329
|
+
});
|
|
277
330
|
// src/MultiWindow/MultiWindowTabs.tsx
|
|
278
|
-
import
|
|
331
|
+
import React3, { memo as memo2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
|
|
279
332
|
import { Tabs, Select } from "antd";
|
|
280
333
|
import { closestCenter, DndContext, PointerSensor, useSensor } from "@dnd-kit/core";
|
|
281
334
|
import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
|
|
282
335
|
import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
|
|
283
336
|
import { CSS } from "@dnd-kit/utilities";
|
|
284
|
-
import { jsx as
|
|
337
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
285
338
|
import { createElement } from "react";
|
|
286
|
-
var MultiWindowTabs =
|
|
339
|
+
var MultiWindowTabs = memo2(function(props) {
|
|
287
340
|
var pathKey = props.pathKey, pagePaths = props.pagePaths, className = props.className, onChange = props.onChange, onClose = props.onClose, onSort = props.onSort, onCollectionChange = props.onCollectionChange, sortAutoActive = props.sortAutoActive;
|
|
288
341
|
var sensor = useSensor(PointerSensor, {
|
|
289
342
|
activationConstraint: {
|
|
290
343
|
distance: 10
|
|
291
344
|
}
|
|
292
345
|
});
|
|
293
|
-
var pagePathsHelperData =
|
|
346
|
+
var pagePathsHelperData = useMemo2(function() {
|
|
294
347
|
var keys = [];
|
|
295
348
|
var map = /* @__PURE__ */ new Map();
|
|
296
349
|
pagePaths.forEach(function(item) {
|
|
@@ -304,26 +357,26 @@ var MultiWindowTabs = memo(function(props) {
|
|
|
304
357
|
}, [
|
|
305
358
|
pagePaths
|
|
306
359
|
]);
|
|
307
|
-
var handleEdit =
|
|
360
|
+
var handleEdit = useCallback2(function(targetKey, action) {
|
|
308
361
|
if (action === "add") {} else if (action === "remove") {
|
|
309
362
|
onClose === null || onClose === void 0 ? void 0 : onClose(String(targetKey));
|
|
310
363
|
}
|
|
311
364
|
}, [
|
|
312
365
|
onClose
|
|
313
366
|
]);
|
|
314
|
-
var handleTabChange =
|
|
367
|
+
var handleTabChange = useCallback2(function(activeKey) {
|
|
315
368
|
onChange === null || onChange === void 0 ? void 0 : onChange(activeKey);
|
|
316
369
|
}, [
|
|
317
370
|
onChange
|
|
318
371
|
]);
|
|
319
|
-
var onDragStart =
|
|
372
|
+
var onDragStart = useCallback2(function(event) {
|
|
320
373
|
var active = event.active;
|
|
321
374
|
sortAutoActive && (onChange === null || onChange === void 0 ? void 0 : onChange(String(active.id)));
|
|
322
375
|
}, [
|
|
323
376
|
onChange,
|
|
324
377
|
sortAutoActive
|
|
325
378
|
]);
|
|
326
|
-
var onDragEnd =
|
|
379
|
+
var onDragEnd = useCallback2(function(event) {
|
|
327
380
|
var active = event.active, over = event.over;
|
|
328
381
|
if (active.id === (over === null || over === void 0 ? void 0 : over.id)) return;
|
|
329
382
|
var oldIndex = pagePaths.findIndex(function(i) {
|
|
@@ -338,8 +391,8 @@ var MultiWindowTabs = memo(function(props) {
|
|
|
338
391
|
pagePaths,
|
|
339
392
|
onSort
|
|
340
393
|
]);
|
|
341
|
-
var renderTabBar =
|
|
342
|
-
return /* @__PURE__ */
|
|
394
|
+
var renderTabBar = useCallback2(function(tabBarProps, DefaultTabBar) {
|
|
395
|
+
return /* @__PURE__ */ jsx3(DndContext, {
|
|
343
396
|
sensors: [
|
|
344
397
|
sensor
|
|
345
398
|
],
|
|
@@ -349,10 +402,10 @@ var MultiWindowTabs = memo(function(props) {
|
|
|
349
402
|
modifiers: [
|
|
350
403
|
restrictToHorizontalAxis
|
|
351
404
|
],
|
|
352
|
-
children: /* @__PURE__ */
|
|
405
|
+
children: /* @__PURE__ */ jsx3(SortableContext, {
|
|
353
406
|
items: pagePathsHelperData.keys,
|
|
354
407
|
strategy: horizontalListSortingStrategy,
|
|
355
|
-
children: /* @__PURE__ */
|
|
408
|
+
children: /* @__PURE__ */ jsx3(DefaultTabBar, _object_spread_props(_object_spread({}, tabBarProps), {
|
|
356
409
|
children: function(node) {
|
|
357
410
|
return /* @__PURE__ */ createElement(TabItem, _object_spread_props(_object_spread({}, node.props), {
|
|
358
411
|
key: node.key,
|
|
@@ -371,7 +424,7 @@ var MultiWindowTabs = memo(function(props) {
|
|
|
371
424
|
onCollectionChange,
|
|
372
425
|
sensor
|
|
373
426
|
]);
|
|
374
|
-
return /* @__PURE__ */
|
|
427
|
+
return /* @__PURE__ */ jsx3(Tabs, {
|
|
375
428
|
className: className,
|
|
376
429
|
activeKey: pathKey,
|
|
377
430
|
onChange: handleTabChange,
|
|
@@ -383,18 +436,18 @@ var MultiWindowTabs = memo(function(props) {
|
|
|
383
436
|
hideAdd: true
|
|
384
437
|
});
|
|
385
438
|
});
|
|
386
|
-
var TabItem =
|
|
439
|
+
var TabItem = memo2(function(props) {
|
|
387
440
|
var data = props.data, children = props.children, style = props.style, isActivated = props.isActivated, onCollectionChange = props.onCollectionChange;
|
|
388
441
|
var _useSortable = useSortable({
|
|
389
442
|
id: props["data-node-key"]
|
|
390
443
|
}), attributes = _useSortable.attributes, listeners = _useSortable.listeners, setNodeRef = _useSortable.setNodeRef, transform = _useSortable.transform, transition = _useSortable.transition, isDragging = _useSortable.isDragging;
|
|
391
|
-
var handleCollectionChange =
|
|
444
|
+
var handleCollectionChange = useCallback2(function(collectionKey) {
|
|
392
445
|
if (!data) return;
|
|
393
446
|
onCollectionChange === null || onCollectionChange === void 0 ? void 0 : onCollectionChange(data.key, collectionKey);
|
|
394
447
|
}, [
|
|
395
448
|
data
|
|
396
449
|
]);
|
|
397
|
-
var collectionSelect =
|
|
450
|
+
var collectionSelect = useMemo2(function() {
|
|
398
451
|
var _data_searchCollection;
|
|
399
452
|
if (!(data === null || data === void 0 ? void 0 : (_data_searchCollection = data.searchCollection) === null || _data_searchCollection === void 0 ? void 0 : _data_searchCollection.length)) return null;
|
|
400
453
|
if (!isActivated) return null;
|
|
@@ -405,7 +458,7 @@ var TabItem = memo(function(props) {
|
|
|
405
458
|
};
|
|
406
459
|
});
|
|
407
460
|
var currentKey = data.searchCollection[0];
|
|
408
|
-
return /* @__PURE__ */
|
|
461
|
+
return /* @__PURE__ */ jsx3(Select, {
|
|
409
462
|
className: MultiWindow_module_default.collection,
|
|
410
463
|
options: options,
|
|
411
464
|
value: currentKey,
|
|
@@ -419,7 +472,7 @@ var TabItem = memo(function(props) {
|
|
|
419
472
|
data,
|
|
420
473
|
isActivated
|
|
421
474
|
]);
|
|
422
|
-
var childrenWithCollectionSelect =
|
|
475
|
+
var childrenWithCollectionSelect = useMemo2(function() {
|
|
423
476
|
var innerChildren = children.props.children;
|
|
424
477
|
if (!Array.isArray(innerChildren)) return innerChildren;
|
|
425
478
|
var newChildren = _to_consumable_array(innerChildren);
|
|
@@ -429,7 +482,7 @@ var TabItem = memo(function(props) {
|
|
|
429
482
|
children,
|
|
430
483
|
collectionSelect
|
|
431
484
|
]);
|
|
432
|
-
return
|
|
485
|
+
return React3.cloneElement(children, _object_spread({
|
|
433
486
|
ref: setNodeRef,
|
|
434
487
|
style: _object_spread_props(_object_spread({}, style), {
|
|
435
488
|
transform: CSS.Translate.toString(transform && _object_spread_props(_object_spread({}, transform), {
|
|
@@ -442,58 +495,6 @@ var TabItem = memo(function(props) {
|
|
|
442
495
|
children: childrenWithCollectionSelect
|
|
443
496
|
}, attributes, listeners));
|
|
444
497
|
});
|
|
445
|
-
// src/MultiWindow/MultiWindowSearch.tsx
|
|
446
|
-
import { memo as memo2, useCallback as useCallback2, useMemo as useMemo2, useState } from "react";
|
|
447
|
-
import { Button, Input, Tooltip } from "antd";
|
|
448
|
-
import { SearchOutlined } from "@ant-design/icons";
|
|
449
|
-
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
450
|
-
var Search = Input.Search;
|
|
451
|
-
var MultiWindowSearch = memo2(function(props) {
|
|
452
|
-
var onSearch = props.onSearch;
|
|
453
|
-
var _useState = _sliced_to_array(useState(false), 2), showSearch = _useState[0], setShowSearch = _useState[1];
|
|
454
|
-
var _useState1 = _sliced_to_array(useState(""), 2), searchValue = _useState1[0], setSearchValue = _useState1[1];
|
|
455
|
-
var shouldShowSearch = useMemo2(function() {
|
|
456
|
-
return showSearch || searchValue;
|
|
457
|
-
}, [
|
|
458
|
-
showSearch,
|
|
459
|
-
searchValue
|
|
460
|
-
]);
|
|
461
|
-
var handleShowSearch = useCallback2(function() {
|
|
462
|
-
setShowSearch(true);
|
|
463
|
-
}, []);
|
|
464
|
-
var handleHideSearch = useCallback2(function() {
|
|
465
|
-
setShowSearch(false);
|
|
466
|
-
}, []);
|
|
467
|
-
var handleSearch = useCallback2(function(value) {
|
|
468
|
-
setSearchValue(value);
|
|
469
|
-
onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
|
|
470
|
-
}, [
|
|
471
|
-
onSearch
|
|
472
|
-
]);
|
|
473
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
474
|
-
className: MultiWindow_module_default.search,
|
|
475
|
-
onMouseLeave: handleHideSearch,
|
|
476
|
-
onMouseEnter: handleShowSearch,
|
|
477
|
-
children: [
|
|
478
|
-
shouldShowSearch && /* @__PURE__ */ jsx3(Search, {
|
|
479
|
-
className: MultiWindow_module_default.input,
|
|
480
|
-
placeholder: "标签/单号",
|
|
481
|
-
onSearch: handleSearch,
|
|
482
|
-
allowClear: true,
|
|
483
|
-
autoFocus: true
|
|
484
|
-
}),
|
|
485
|
-
!shouldShowSearch && /* @__PURE__ */ jsx3(Tooltip, {
|
|
486
|
-
title: "搜索标签/单号",
|
|
487
|
-
color: "var(--ant-color-primary)",
|
|
488
|
-
mouseEnterDelay: 0.5,
|
|
489
|
-
children: /* @__PURE__ */ jsx3(Button, {
|
|
490
|
-
icon: /* @__PURE__ */ jsx3(SearchOutlined, {}),
|
|
491
|
-
type: "text"
|
|
492
|
-
})
|
|
493
|
-
})
|
|
494
|
-
]
|
|
495
|
-
});
|
|
496
|
-
});
|
|
497
498
|
// src/MultiWindow/MultiWindow.tsx
|
|
498
499
|
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
499
500
|
var MultiWindow = memo3(function(props) {
|
|
@@ -624,6 +625,16 @@ var MultiWindow = memo3(function(props) {
|
|
|
624
625
|
cancelCallback();
|
|
625
626
|
};
|
|
626
627
|
}, []);
|
|
628
|
+
useEffect(function() {
|
|
629
|
+
var unsubscribe = onHistoryChange(function(detail) {
|
|
630
|
+
handleRouterUpdate("".concat(detail.pathname).concat(detail.search));
|
|
631
|
+
});
|
|
632
|
+
return function() {
|
|
633
|
+
unsubscribe();
|
|
634
|
+
};
|
|
635
|
+
}, [
|
|
636
|
+
handleRouterUpdate
|
|
637
|
+
]);
|
|
627
638
|
useEffect(function() {
|
|
628
639
|
var titleEl = document.querySelector("title");
|
|
629
640
|
if (!titleEl) return;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xfe-repo/web-components",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.7",
|
|
4
4
|
"module": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -35,16 +35,17 @@
|
|
|
35
35
|
"@types/node": "^20.16.5",
|
|
36
36
|
"@types/react": "^18",
|
|
37
37
|
"esbuild-plugin-less": "^1.3.9",
|
|
38
|
-
"@xfe-repo/
|
|
39
|
-
"@xfe-repo/
|
|
38
|
+
"@xfe-repo/typescript-config": "0.0.6",
|
|
39
|
+
"@xfe-repo/eslint-config": "0.0.5"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@ant-design/icons": "^5.0.0",
|
|
43
43
|
"antd": "^5.24.5",
|
|
44
44
|
"react": "18.2.0",
|
|
45
45
|
"react-dom": "18.2.0",
|
|
46
|
-
"@xfe-repo/web-
|
|
47
|
-
"@xfe-repo/web-
|
|
46
|
+
"@xfe-repo/web-micro": "1.2.5",
|
|
47
|
+
"@xfe-repo/web-router": "1.2.6",
|
|
48
|
+
"@xfe-repo/web-utils": "1.3.8"
|
|
48
49
|
},
|
|
49
50
|
"publishConfig": {
|
|
50
51
|
"registry": "https://registry.npmjs.org/"
|