@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.
@@ -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" | "middle" | "large";
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 PisellAnchorProps {
4
- items?: any[];
5
- getContainer?: () => HTMLElement | Window;
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
- [key: string]: any;
11
+ style?: React.CSSProperties;
12
+ onChange?: (key: string | number) => void;
8
13
  }
9
- declare const PisellAnchor: React.FC<PisellAnchorProps>;
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
- 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; }
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 PisellAnchor(props) {
15
- var _props$items = props.items,
16
- items = _props$items === void 0 ? [] : _props$items,
17
- getContainer = props.getContainer,
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
- rest = _objectWithoutProperties(props, _excluded);
20
- var scrollRef = useRef(null);
21
- var _useState = useState(false),
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
- canScrollLeft = _useState2[0],
24
- setCanScrollLeft = _useState2[1];
25
- var _useState3 = useState(false),
23
+ isShowButton = _useState2[0],
24
+ setIsShowButton = _useState2[1];
25
+ var _useState3 = useState(0),
26
26
  _useState4 = _slicedToArray(_useState3, 2),
27
- canScrollRight = _useState4[0],
28
- setCanScrollRight = _useState4[1];
29
-
30
- // 检查是否可以滚动
31
- var checkScroll = function checkScroll() {
32
- if (scrollRef.current) {
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 handleScroll = function handleScroll(direction) {
55
- if (scrollRef.current) {
56
- var scrollAmount = 50;
57
- var newScrollLeft = scrollRef.current.scrollLeft + (direction === 'left' ? -scrollAmount : scrollAmount);
58
- scrollRef.current.scrollTo({
59
- left: newScrollLeft,
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
- // easeInOutCubic 缓动函数
77
- var ease = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
78
- window.scrollTo(0, startPosition + distance * ease);
79
- if (timeElapsed < duration) {
80
- requestAnimationFrame(animation);
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
- requestAnimationFrame(animation);
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-anchor-containers', className)
87
- }, /*#__PURE__*/React.createElement(Anchor, {
88
- direction: "horizontal",
89
- getContainer: getContainer,
90
- items: items,
91
- targetOffset: 39
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
- }) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
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" | "middle" | "large";
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 PisellAnchorProps {
4
- items?: any[];
5
- getContainer?: () => HTMLElement | Window;
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
- [key: string]: any;
11
+ style?: React.CSSProperties;
12
+ onChange?: (key: string | number) => void;
8
13
  }
9
- declare const PisellAnchor: React.FC<PisellAnchorProps>;
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 { items = [], getContainer, className, ...rest } = props;
41
- const scrollRef = (0, import_react.useRef)(null);
42
- const [canScrollLeft, setCanScrollLeft] = (0, import_react.useState)(false);
43
- const [canScrollRight, setCanScrollRight] = (0, import_react.useState)(false);
44
- const checkScroll = () => {
45
- if (scrollRef.current) {
46
- const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
47
- setCanScrollLeft(scrollLeft > 0);
48
- setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
49
- }
50
- };
51
- (0, import_react.useEffect)(() => {
52
- var _a;
53
- document.body.id = "body";
54
- checkScroll();
55
- (_a = scrollRef.current) == null ? void 0 : _a.addEventListener("scroll", checkScroll);
56
- return () => {
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
- const smoothScroll = (targetElement) => {
72
- const offsetTop = 40;
73
- const startPosition = window.pageYOffset;
74
- const targetPosition = targetElement.getBoundingClientRect().top + startPosition - offsetTop;
75
- const distance = targetPosition - startPosition;
76
- const duration = 800;
77
- let start = null;
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
- requestAnimationFrame(animation);
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-anchor-containers", className) }, /* @__PURE__ */ import_react.default.createElement(
92
- import_antd.Anchor,
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
- direction: "horizontal",
95
- getContainer,
96
- items,
97
- targetOffset: 39
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
- }) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
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 {};