@pisell/materials 1.0.542 → 1.0.543
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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +2 -2
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +17 -17
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +9 -9
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +1 -1
- package/es/components/pisellAnchor/index.d.ts +10 -5
- package/es/components/pisellAnchor/index.js +103 -71
- package/es/components/pisellAnchor/index.less +84 -0
- package/es/components/table/Table/utils.d.ts +1 -1
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +1 -1
- package/lib/components/pisellAnchor/index.d.ts +10 -5
- package/lib/components/pisellAnchor/index.js +74 -55
- package/lib/components/pisellAnchor/index.less +84 -0
- package/lib/components/table/Table/utils.d.ts +1 -1
- package/lowcode/pisell-anchor/meta.ts +47 -56
- package/lowcode/pisell-anchor/snippets.ts +20 -14
- package/package.json +1 -1
|
@@ -65,7 +65,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
|
|
|
65
65
|
useCustomAction: boolean;
|
|
66
66
|
actionType: string;
|
|
67
67
|
openMode: "modal" | "drawer";
|
|
68
|
-
openContentSize: "small" | "
|
|
68
|
+
openContentSize: "small" | "large" | "middle";
|
|
69
69
|
openTitle: string;
|
|
70
70
|
key: string;
|
|
71
71
|
} | undefined;
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './index.less';
|
|
3
|
-
interface
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export interface Option {
|
|
4
|
+
id: string | number;
|
|
5
|
+
name: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export interface PisellAnchorProps {
|
|
8
|
+
options?: Option[];
|
|
9
|
+
tab?: string | number;
|
|
6
10
|
className?: string;
|
|
7
|
-
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
onChange?: (key: string | number) => void;
|
|
8
13
|
}
|
|
9
|
-
declare const PisellAnchor: React.
|
|
14
|
+
declare const PisellAnchor: React.ForwardRefExoticComponent<PisellAnchorProps & React.RefAttributes<any>>;
|
|
10
15
|
export default PisellAnchor;
|
|
@@ -1,94 +1,126 @@
|
|
|
1
|
-
var _excluded = ["items", "getContainer", "className"];
|
|
2
1
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
3
2
|
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."); }
|
|
4
3
|
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); }
|
|
5
4
|
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; }
|
|
6
5
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
7
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
-
|
|
9
|
-
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; }
|
|
10
|
-
import React, { useRef, useState, useEffect } from 'react';
|
|
11
|
-
import { Anchor } from 'antd';
|
|
7
|
+
import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react';
|
|
12
8
|
import classNames from 'classnames';
|
|
9
|
+
import { useDebounceFn } from 'ahooks';
|
|
10
|
+
import ChevronLeft from '@pisell/icon/es/ChevronLeft';
|
|
11
|
+
import ChevronRight from '@pisell/icon/es/ChevronRight';
|
|
13
12
|
import "./index.less";
|
|
14
|
-
var PisellAnchor = function
|
|
15
|
-
var _props$
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
14
|
+
var _props$options = props.options,
|
|
15
|
+
options = _props$options === void 0 ? [] : _props$options,
|
|
16
|
+
tab = props.tab,
|
|
18
17
|
className = props.className,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
var
|
|
18
|
+
style = props.style,
|
|
19
|
+
onChange = props.onChange;
|
|
20
|
+
var contentRef = useRef(null);
|
|
21
|
+
var _useState = useState(true),
|
|
22
22
|
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
var _useState3 = useState(
|
|
23
|
+
isShowButton = _useState2[0],
|
|
24
|
+
setIsShowButton = _useState2[1];
|
|
25
|
+
var _useState3 = useState(0),
|
|
26
26
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
var _scrollRef$current = scrollRef.current,
|
|
34
|
-
scrollLeft = _scrollRef$current.scrollLeft,
|
|
35
|
-
scrollWidth = _scrollRef$current.scrollWidth,
|
|
36
|
-
clientWidth = _scrollRef$current.clientWidth;
|
|
37
|
-
setCanScrollLeft(scrollLeft > 0);
|
|
38
|
-
setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
useEffect(function () {
|
|
42
|
-
var _scrollRef$current2;
|
|
43
|
-
document.body.id = 'body';
|
|
44
|
-
checkScroll();
|
|
45
|
-
// 监听滚动事件
|
|
46
|
-
(_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.addEventListener('scroll', checkScroll);
|
|
47
|
-
return function () {
|
|
48
|
-
var _scrollRef$current3;
|
|
49
|
-
(_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.removeEventListener('scroll', checkScroll);
|
|
50
|
-
};
|
|
51
|
-
}, []);
|
|
27
|
+
leftWidth = _useState4[0],
|
|
28
|
+
setLeftWidth = _useState4[1];
|
|
29
|
+
var _useState5 = useState(40),
|
|
30
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
31
|
+
rightWidth = _useState6[0],
|
|
32
|
+
setRightWidth = _useState6[1];
|
|
52
33
|
|
|
53
34
|
// 处理滚动
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
35
|
+
var _useDebounceFn = useDebounceFn(function (e) {
|
|
36
|
+
var _e$target = e.target,
|
|
37
|
+
scrollLeft = _e$target.scrollLeft,
|
|
38
|
+
scrollWidth = _e$target.scrollWidth,
|
|
39
|
+
clientWidth = _e$target.clientWidth;
|
|
40
|
+
setLeftWidth(scrollLeft > 0 ? 40 : 0);
|
|
41
|
+
setRightWidth(scrollLeft + clientWidth >= scrollWidth ? 0 : 40);
|
|
42
|
+
}, {
|
|
43
|
+
wait: 200
|
|
44
|
+
}),
|
|
45
|
+
onScroll = _useDebounceFn.run;
|
|
46
|
+
|
|
47
|
+
// 滚动到指定选项
|
|
48
|
+
var setTabScroll = function setTabScroll(offsetLeft) {
|
|
49
|
+
if (contentRef.current) {
|
|
50
|
+
contentRef.current.scrollTo({
|
|
51
|
+
left: offsetLeft,
|
|
60
52
|
behavior: 'smooth'
|
|
61
53
|
});
|
|
62
54
|
}
|
|
63
55
|
};
|
|
64
|
-
var smoothScroll = function smoothScroll(targetElement) {
|
|
65
|
-
var offsetTop = 40;
|
|
66
|
-
var startPosition = window.pageYOffset;
|
|
67
|
-
var targetPosition = targetElement.getBoundingClientRect().top + startPosition - offsetTop;
|
|
68
|
-
var distance = targetPosition - startPosition;
|
|
69
|
-
var duration = 800; // 动画持续时间(ms)
|
|
70
|
-
var start = null;
|
|
71
|
-
var animation = function animation(currentTime) {
|
|
72
|
-
if (start === null) start = currentTime;
|
|
73
|
-
var timeElapsed = currentTime - start;
|
|
74
|
-
var progress = Math.min(timeElapsed / duration, 1);
|
|
75
56
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
57
|
+
// 暴露滚动方法
|
|
58
|
+
useImperativeHandle(ref, function () {
|
|
59
|
+
return {
|
|
60
|
+
scroll: function scroll(tab) {
|
|
61
|
+
if (tab) {
|
|
62
|
+
var dom = document.querySelector("#tab-".concat(tab));
|
|
63
|
+
if (dom) {
|
|
64
|
+
setTabScroll(dom.offsetLeft);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
81
67
|
}
|
|
82
68
|
};
|
|
83
|
-
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
// 左右按钮点击处理
|
|
72
|
+
var onPageChange = function onPageChange(type) {
|
|
73
|
+
if (contentRef.current) {
|
|
74
|
+
var _contentRef$current = contentRef.current,
|
|
75
|
+
scrollLeft = _contentRef$current.scrollLeft,
|
|
76
|
+
clientWidth = _contentRef$current.clientWidth;
|
|
77
|
+
contentRef.current.scrollTo({
|
|
78
|
+
left: scrollLeft + (type === 'left' ? -clientWidth : clientWidth),
|
|
79
|
+
behavior: 'smooth'
|
|
80
|
+
});
|
|
81
|
+
}
|
|
84
82
|
};
|
|
85
83
|
return /*#__PURE__*/React.createElement("div", {
|
|
86
|
-
className: classNames('pisell-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
84
|
+
className: classNames('pisell-tabs', className),
|
|
85
|
+
style: style
|
|
86
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
87
|
+
className: "pisell-tabs-btn-left",
|
|
88
|
+
style: {
|
|
89
|
+
width: leftWidth
|
|
90
|
+
},
|
|
91
|
+
onClick: function onClick() {
|
|
92
|
+
return onPageChange('left');
|
|
93
|
+
}
|
|
94
|
+
}, /*#__PURE__*/React.createElement(ChevronLeft, {
|
|
95
|
+
className: "pisell-tabs-btn-icon"
|
|
96
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
97
|
+
ref: contentRef,
|
|
98
|
+
className: "pisell-tabs-content",
|
|
99
|
+
id: "tab-".concat(tab, "-content"),
|
|
100
|
+
onScroll: onScroll
|
|
101
|
+
}, options.map(function (item) {
|
|
102
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
103
|
+
key: item.id,
|
|
104
|
+
id: "tab-".concat(item.id),
|
|
105
|
+
className: classNames('pisell-tabs-tab', {
|
|
106
|
+
'pisell-tabs-tab-active': tab === item.id
|
|
107
|
+
}),
|
|
108
|
+
onClick: function onClick() {
|
|
109
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
|
|
110
|
+
}
|
|
111
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
112
|
+
className: "pisell-tabs-tab-content"
|
|
113
|
+
}, item.name));
|
|
114
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
115
|
+
className: "pisell-tabs-btn-right",
|
|
116
|
+
style: {
|
|
117
|
+
width: rightWidth
|
|
118
|
+
},
|
|
119
|
+
onClick: function onClick() {
|
|
120
|
+
return onPageChange('right');
|
|
121
|
+
}
|
|
122
|
+
}, /*#__PURE__*/React.createElement(ChevronRight, {
|
|
123
|
+
className: "pisell-tabs-btn-icon"
|
|
124
|
+
})));
|
|
125
|
+
});
|
|
94
126
|
export default PisellAnchor;
|
|
@@ -91,3 +91,87 @@
|
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
|
+
|
|
95
|
+
.pisell-tabs {
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 100%;
|
|
100
|
+
font-size: 17px;
|
|
101
|
+
font-weight: 400;
|
|
102
|
+
color: #0d1619;
|
|
103
|
+
cursor: default;
|
|
104
|
+
position: relative;
|
|
105
|
+
|
|
106
|
+
.pisell-tabs-btn-left,
|
|
107
|
+
.pisell-tabs-btn-right {
|
|
108
|
+
position: absolute;
|
|
109
|
+
top: 50%;
|
|
110
|
+
transform: translateY(-50%);
|
|
111
|
+
z-index: 1;
|
|
112
|
+
width: 40px;
|
|
113
|
+
height: 40px;
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0.8) 100%);
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
transition: width 300ms ease;
|
|
120
|
+
user-select: none;
|
|
121
|
+
|
|
122
|
+
.pisell-tabs-btn-icon {
|
|
123
|
+
width: 24px;
|
|
124
|
+
height: 24px;
|
|
125
|
+
background: #f1f1f1;
|
|
126
|
+
border-radius: 50%;
|
|
127
|
+
display: flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
color: #262626;
|
|
131
|
+
font-size: 20px;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.pisell-tabs-btn-left {
|
|
136
|
+
left: 0;
|
|
137
|
+
background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.pisell-tabs-btn-right {
|
|
141
|
+
right: 0;
|
|
142
|
+
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.pisell-tabs-content {
|
|
146
|
+
flex: 1;
|
|
147
|
+
display: flex;
|
|
148
|
+
overflow-x: auto;
|
|
149
|
+
overflow-y: hidden;
|
|
150
|
+
scroll-behavior: smooth;
|
|
151
|
+
-webkit-overflow-scrolling: touch;
|
|
152
|
+
scrollbar-width: none;
|
|
153
|
+
-ms-overflow-style: none;
|
|
154
|
+
padding: 0;
|
|
155
|
+
|
|
156
|
+
&::-webkit-scrollbar {
|
|
157
|
+
display: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.pisell-tabs-tab {
|
|
161
|
+
flex: 0 0 auto;
|
|
162
|
+
padding: 8px 16px;
|
|
163
|
+
cursor: pointer;
|
|
164
|
+
white-space: nowrap;
|
|
165
|
+
transition: all 0.3s;
|
|
166
|
+
|
|
167
|
+
&:hover {
|
|
168
|
+
color: #1677ff;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&.pisell-tabs-tab-active {
|
|
172
|
+
color: #1677ff;
|
|
173
|
+
font-weight: 600;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
@@ -167,7 +167,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
|
|
|
167
167
|
sort?: SortType | undefined;
|
|
168
168
|
mode: "" | "localStorage" | "remote";
|
|
169
169
|
currentViewMode: ModeType;
|
|
170
|
-
}) => ("
|
|
170
|
+
}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
|
|
171
171
|
export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
|
|
172
172
|
export declare const stringify: (obj: Record<string, any>) => string;
|
|
173
173
|
export {};
|
|
@@ -65,7 +65,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
|
|
|
65
65
|
useCustomAction: boolean;
|
|
66
66
|
actionType: string;
|
|
67
67
|
openMode: "modal" | "drawer";
|
|
68
|
-
openContentSize: "small" | "
|
|
68
|
+
openContentSize: "small" | "large" | "middle";
|
|
69
69
|
openTitle: string;
|
|
70
70
|
key: string;
|
|
71
71
|
} | undefined;
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './index.less';
|
|
3
|
-
interface
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export interface Option {
|
|
4
|
+
id: string | number;
|
|
5
|
+
name: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export interface PisellAnchorProps {
|
|
8
|
+
options?: Option[];
|
|
9
|
+
tab?: string | number;
|
|
6
10
|
className?: string;
|
|
7
|
-
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
onChange?: (key: string | number) => void;
|
|
8
13
|
}
|
|
9
|
-
declare const PisellAnchor: React.
|
|
14
|
+
declare const PisellAnchor: React.ForwardRefExoticComponent<PisellAnchorProps & React.RefAttributes<any>>;
|
|
10
15
|
export default PisellAnchor;
|
|
@@ -33,69 +33,88 @@ __export(pisellAnchor_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(pisellAnchor_exports);
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
|
-
var import_antd = require("antd");
|
|
37
36
|
var import_classnames = __toESM(require("classnames"));
|
|
37
|
+
var import_ahooks = require("ahooks");
|
|
38
|
+
var import_ChevronLeft = __toESM(require("@pisell/icon/es/ChevronLeft"));
|
|
39
|
+
var import_ChevronRight = __toESM(require("@pisell/icon/es/ChevronRight"));
|
|
38
40
|
var import_index = require("./index.less");
|
|
39
|
-
var PisellAnchor = (props) => {
|
|
40
|
-
const {
|
|
41
|
-
const
|
|
42
|
-
const [
|
|
43
|
-
const [
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
var _a2;
|
|
58
|
-
(_a2 = scrollRef.current) == null ? void 0 : _a2.removeEventListener("scroll", checkScroll);
|
|
59
|
-
};
|
|
60
|
-
}, []);
|
|
61
|
-
const handleScroll = (direction) => {
|
|
62
|
-
if (scrollRef.current) {
|
|
63
|
-
const scrollAmount = 50;
|
|
64
|
-
const newScrollLeft = scrollRef.current.scrollLeft + (direction === "left" ? -scrollAmount : scrollAmount);
|
|
65
|
-
scrollRef.current.scrollTo({
|
|
66
|
-
left: newScrollLeft,
|
|
41
|
+
var PisellAnchor = (0, import_react.forwardRef)((props, ref) => {
|
|
42
|
+
const { options = [], tab, className, style, onChange } = props;
|
|
43
|
+
const contentRef = (0, import_react.useRef)(null);
|
|
44
|
+
const [isShowButton, setIsShowButton] = (0, import_react.useState)(true);
|
|
45
|
+
const [leftWidth, setLeftWidth] = (0, import_react.useState)(0);
|
|
46
|
+
const [rightWidth, setRightWidth] = (0, import_react.useState)(40);
|
|
47
|
+
const { run: onScroll } = (0, import_ahooks.useDebounceFn)(
|
|
48
|
+
(e) => {
|
|
49
|
+
const { scrollLeft, scrollWidth, clientWidth } = e.target;
|
|
50
|
+
setLeftWidth(scrollLeft > 0 ? 40 : 0);
|
|
51
|
+
setRightWidth(scrollLeft + clientWidth >= scrollWidth ? 0 : 40);
|
|
52
|
+
},
|
|
53
|
+
{ wait: 200 }
|
|
54
|
+
);
|
|
55
|
+
const setTabScroll = (offsetLeft) => {
|
|
56
|
+
if (contentRef.current) {
|
|
57
|
+
contentRef.current.scrollTo({
|
|
58
|
+
left: offsetLeft,
|
|
67
59
|
behavior: "smooth"
|
|
68
60
|
});
|
|
69
61
|
}
|
|
70
62
|
};
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
const animation = (currentTime) => {
|
|
79
|
-
if (start === null)
|
|
80
|
-
start = currentTime;
|
|
81
|
-
const timeElapsed = currentTime - start;
|
|
82
|
-
const progress = Math.min(timeElapsed / duration, 1);
|
|
83
|
-
const ease = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
|
|
84
|
-
window.scrollTo(0, startPosition + distance * ease);
|
|
85
|
-
if (timeElapsed < duration) {
|
|
86
|
-
requestAnimationFrame(animation);
|
|
63
|
+
(0, import_react.useImperativeHandle)(ref, () => ({
|
|
64
|
+
scroll: (tab2) => {
|
|
65
|
+
if (tab2) {
|
|
66
|
+
const dom = document.querySelector(`#tab-${tab2}`);
|
|
67
|
+
if (dom) {
|
|
68
|
+
setTabScroll(dom.offsetLeft);
|
|
69
|
+
}
|
|
87
70
|
}
|
|
88
|
-
}
|
|
89
|
-
|
|
71
|
+
}
|
|
72
|
+
}));
|
|
73
|
+
const onPageChange = (type) => {
|
|
74
|
+
if (contentRef.current) {
|
|
75
|
+
const { scrollLeft, clientWidth } = contentRef.current;
|
|
76
|
+
contentRef.current.scrollTo({
|
|
77
|
+
left: scrollLeft + (type === "left" ? -clientWidth : clientWidth),
|
|
78
|
+
behavior: "smooth"
|
|
79
|
+
});
|
|
80
|
+
}
|
|
90
81
|
};
|
|
91
|
-
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-
|
|
92
|
-
|
|
82
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabs", className), style }, /* @__PURE__ */ import_react.default.createElement(
|
|
83
|
+
"div",
|
|
93
84
|
{
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
85
|
+
className: "pisell-tabs-btn-left",
|
|
86
|
+
style: { width: leftWidth },
|
|
87
|
+
onClick: () => onPageChange("left")
|
|
88
|
+
},
|
|
89
|
+
/* @__PURE__ */ import_react.default.createElement(import_ChevronLeft.default, { className: "pisell-tabs-btn-icon" })
|
|
90
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
91
|
+
"div",
|
|
92
|
+
{
|
|
93
|
+
ref: contentRef,
|
|
94
|
+
className: "pisell-tabs-content",
|
|
95
|
+
id: `tab-${tab}-content`,
|
|
96
|
+
onScroll
|
|
97
|
+
},
|
|
98
|
+
options.map((item) => /* @__PURE__ */ import_react.default.createElement(
|
|
99
|
+
"div",
|
|
100
|
+
{
|
|
101
|
+
key: item.id,
|
|
102
|
+
id: `tab-${item.id}`,
|
|
103
|
+
className: (0, import_classnames.default)("pisell-tabs-tab", {
|
|
104
|
+
"pisell-tabs-tab-active": tab === item.id
|
|
105
|
+
}),
|
|
106
|
+
onClick: () => onChange == null ? void 0 : onChange(item.id)
|
|
107
|
+
},
|
|
108
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-tabs-tab-content" }, item.name)
|
|
109
|
+
))
|
|
110
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
111
|
+
"div",
|
|
112
|
+
{
|
|
113
|
+
className: "pisell-tabs-btn-right",
|
|
114
|
+
style: { width: rightWidth },
|
|
115
|
+
onClick: () => onPageChange("right")
|
|
116
|
+
},
|
|
117
|
+
/* @__PURE__ */ import_react.default.createElement(import_ChevronRight.default, { className: "pisell-tabs-btn-icon" })
|
|
99
118
|
));
|
|
100
|
-
};
|
|
119
|
+
});
|
|
101
120
|
var pisellAnchor_default = PisellAnchor;
|
|
@@ -91,3 +91,87 @@
|
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
|
+
|
|
95
|
+
.pisell-tabs {
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 100%;
|
|
100
|
+
font-size: 17px;
|
|
101
|
+
font-weight: 400;
|
|
102
|
+
color: #0d1619;
|
|
103
|
+
cursor: default;
|
|
104
|
+
position: relative;
|
|
105
|
+
|
|
106
|
+
.pisell-tabs-btn-left,
|
|
107
|
+
.pisell-tabs-btn-right {
|
|
108
|
+
position: absolute;
|
|
109
|
+
top: 50%;
|
|
110
|
+
transform: translateY(-50%);
|
|
111
|
+
z-index: 1;
|
|
112
|
+
width: 40px;
|
|
113
|
+
height: 40px;
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0.8) 100%);
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
transition: width 300ms ease;
|
|
120
|
+
user-select: none;
|
|
121
|
+
|
|
122
|
+
.pisell-tabs-btn-icon {
|
|
123
|
+
width: 24px;
|
|
124
|
+
height: 24px;
|
|
125
|
+
background: #f1f1f1;
|
|
126
|
+
border-radius: 50%;
|
|
127
|
+
display: flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
color: #262626;
|
|
131
|
+
font-size: 20px;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.pisell-tabs-btn-left {
|
|
136
|
+
left: 0;
|
|
137
|
+
background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.pisell-tabs-btn-right {
|
|
141
|
+
right: 0;
|
|
142
|
+
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.pisell-tabs-content {
|
|
146
|
+
flex: 1;
|
|
147
|
+
display: flex;
|
|
148
|
+
overflow-x: auto;
|
|
149
|
+
overflow-y: hidden;
|
|
150
|
+
scroll-behavior: smooth;
|
|
151
|
+
-webkit-overflow-scrolling: touch;
|
|
152
|
+
scrollbar-width: none;
|
|
153
|
+
-ms-overflow-style: none;
|
|
154
|
+
padding: 0;
|
|
155
|
+
|
|
156
|
+
&::-webkit-scrollbar {
|
|
157
|
+
display: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.pisell-tabs-tab {
|
|
161
|
+
flex: 0 0 auto;
|
|
162
|
+
padding: 8px 16px;
|
|
163
|
+
cursor: pointer;
|
|
164
|
+
white-space: nowrap;
|
|
165
|
+
transition: all 0.3s;
|
|
166
|
+
|
|
167
|
+
&:hover {
|
|
168
|
+
color: #1677ff;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&.pisell-tabs-tab-active {
|
|
172
|
+
color: #1677ff;
|
|
173
|
+
font-weight: 600;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
@@ -167,7 +167,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
|
|
|
167
167
|
sort?: SortType | undefined;
|
|
168
168
|
mode: "" | "localStorage" | "remote";
|
|
169
169
|
currentViewMode: ModeType;
|
|
170
|
-
}) => ("
|
|
170
|
+
}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
|
|
171
171
|
export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
|
|
172
172
|
export declare const stringify: (obj: Record<string, any>) => string;
|
|
173
173
|
export {};
|