@pisell/materials 1.0.541 → 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 +5 -5
- package/build/lowcode/preview.js +7 -7
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +21 -21
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +19 -19
- package/es/components/organizationTenantSwitcher/defaultLogo.png +0 -0
- package/es/components/organizationTenantSwitcher/index.d.ts +15 -0
- package/es/components/organizationTenantSwitcher/index.js +88 -0
- package/es/components/organizationTenantSwitcher/index.less +72 -0
- 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/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/lib/components/organizationTenantSwitcher/defaultLogo.png +0 -0
- package/lib/components/organizationTenantSwitcher/index.d.ts +15 -0
- package/lib/components/organizationTenantSwitcher/index.js +112 -0
- package/lib/components/organizationTenantSwitcher/index.less +72 -0
- 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/index.d.ts +1 -0
- package/lib/index.js +3 -0
- package/lowcode/organization-tenant-switch/meta.ts +117 -0
- package/lowcode/pisell-anchor/meta.ts +47 -56
- package/lowcode/pisell-anchor/snippets.ts +20 -14
- package/package.json +1 -1
|
Binary file
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.less';
|
|
3
|
+
interface OrganizationTenantSwitcherProps {
|
|
4
|
+
onChange?: (value: string, option: any) => void;
|
|
5
|
+
value: string;
|
|
6
|
+
options: {
|
|
7
|
+
label: string;
|
|
8
|
+
value: string;
|
|
9
|
+
logo?: string;
|
|
10
|
+
}[];
|
|
11
|
+
showLogo?: boolean;
|
|
12
|
+
showName?: boolean;
|
|
13
|
+
}
|
|
14
|
+
declare const OrganizationTenantSwitcher: React.FC<OrganizationTenantSwitcherProps>;
|
|
15
|
+
export default OrganizationTenantSwitcher;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
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); }
|
|
4
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
|
+
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; }
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { Dropdown } from 'antd';
|
|
9
|
+
import classNames from 'classnames';
|
|
10
|
+
import Check from '@pisell/icon/es/Check';
|
|
11
|
+
import ChevronDown from '@pisell/icon/es/ChevronDown';
|
|
12
|
+
import defaultLogo from "./defaultLogo.png";
|
|
13
|
+
import "./index.less";
|
|
14
|
+
var Logo = function Logo(_ref) {
|
|
15
|
+
var logo = _ref.logo,
|
|
16
|
+
className = _ref.className;
|
|
17
|
+
return /*#__PURE__*/React.createElement("img", {
|
|
18
|
+
src: logo || defaultLogo,
|
|
19
|
+
alt: "logo",
|
|
20
|
+
className: classNames('organization-tenant-switcher-item-logo', className)
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
var OrganizationTenantSwitcher = function OrganizationTenantSwitcher(_ref2) {
|
|
24
|
+
var onChange = _ref2.onChange,
|
|
25
|
+
value = _ref2.value,
|
|
26
|
+
options = _ref2.options,
|
|
27
|
+
_ref2$showLogo = _ref2.showLogo,
|
|
28
|
+
showLogo = _ref2$showLogo === void 0 ? true : _ref2$showLogo,
|
|
29
|
+
_ref2$showName = _ref2.showName,
|
|
30
|
+
showName = _ref2$showName === void 0 ? true : _ref2$showName;
|
|
31
|
+
var getCurrentOrg = function getCurrentOrg() {
|
|
32
|
+
return options.find(function (opt) {
|
|
33
|
+
return (opt === null || opt === void 0 ? void 0 : opt.value) === value;
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
var items = _toConsumableArray(options.map(function (opt) {
|
|
37
|
+
return {
|
|
38
|
+
key: opt === null || opt === void 0 ? void 0 : opt.value,
|
|
39
|
+
label: /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: "organization-tenant-switcher-item"
|
|
41
|
+
}, /*#__PURE__*/React.createElement(Logo, {
|
|
42
|
+
logo: opt === null || opt === void 0 ? void 0 : opt.logo
|
|
43
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
44
|
+
className: "organization-tenant-switcher-item-name",
|
|
45
|
+
title: opt === null || opt === void 0 ? void 0 : opt.label
|
|
46
|
+
}, opt === null || opt === void 0 ? void 0 : opt.label), (opt === null || opt === void 0 ? void 0 : opt.value) === value && /*#__PURE__*/React.createElement(Check, {
|
|
47
|
+
className: "organization-tenant-switcher-item-check"
|
|
48
|
+
}))
|
|
49
|
+
};
|
|
50
|
+
}));
|
|
51
|
+
var handleMenuClick = function handleMenuClick(e) {
|
|
52
|
+
if (e.key !== 'create') {
|
|
53
|
+
var selectedOption = options.find(function (opt) {
|
|
54
|
+
return opt.value === e.key;
|
|
55
|
+
});
|
|
56
|
+
if (selectedOption) {
|
|
57
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(selectedOption.value, selectedOption);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
var currentOrg = getCurrentOrg();
|
|
62
|
+
return /*#__PURE__*/React.createElement(Dropdown, {
|
|
63
|
+
menu: {
|
|
64
|
+
items: items,
|
|
65
|
+
onClick: handleMenuClick,
|
|
66
|
+
selectedKeys: [value]
|
|
67
|
+
},
|
|
68
|
+
trigger: ['click'],
|
|
69
|
+
overlayStyle: {
|
|
70
|
+
maxHeight: 370,
|
|
71
|
+
overflow: 'auto'
|
|
72
|
+
}
|
|
73
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
74
|
+
className: "organization-tenant-switcher-switch",
|
|
75
|
+
style: !showLogo ? {
|
|
76
|
+
paddingLeft: 16
|
|
77
|
+
} : {}
|
|
78
|
+
}, showLogo && /*#__PURE__*/React.createElement(Logo, {
|
|
79
|
+
logo: currentOrg === null || currentOrg === void 0 ? void 0 : currentOrg.logo,
|
|
80
|
+
className: "organization-tenant-switcher-switch-logo"
|
|
81
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
82
|
+
className: "organization-tenant-switcher-switch-name",
|
|
83
|
+
title: currentOrg === null || currentOrg === void 0 ? void 0 : currentOrg.label
|
|
84
|
+
}, showName && (currentOrg === null || currentOrg === void 0 ? void 0 : currentOrg.label)), /*#__PURE__*/React.createElement(ChevronDown, {
|
|
85
|
+
className: "organization-tenant-switcher-switch-chevron"
|
|
86
|
+
})));
|
|
87
|
+
};
|
|
88
|
+
export default OrganizationTenantSwitcher;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
.organization-tenant-switcher-switch {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
gap: 10px;
|
|
6
|
+
padding: 6px 16px 6px 6px;
|
|
7
|
+
height: 52px;
|
|
8
|
+
|
|
9
|
+
max-width: 220px;
|
|
10
|
+
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
border: 1px solid var(--Gray-100, #f2f4f7);
|
|
13
|
+
background: var(--Base-White, #fff);
|
|
14
|
+
transition: all 0.3s ease;
|
|
15
|
+
|
|
16
|
+
&:hover {
|
|
17
|
+
border-color: var(--Gray-200, #e5e7eb);
|
|
18
|
+
box-shadow: 0px 2px 4px 0px rgba(16, 24, 40, 0.15);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.organization-tenant-switcher-switch-name {
|
|
23
|
+
flex: 1;
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
text-overflow: ellipsis;
|
|
26
|
+
white-space: nowrap;
|
|
27
|
+
color: var(--Gray-700, #344054);
|
|
28
|
+
font-size: 14px;
|
|
29
|
+
font-style: normal;
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
line-height: 20px; /* 142.857% */
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.organization-tenant-switcher-switch-logo {
|
|
35
|
+
margin-right: 6px;
|
|
36
|
+
color: #344054;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.organization-tenant-switcher-item-check {
|
|
40
|
+
font-size: 16px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.organization-tenant-switcher-item-name {
|
|
44
|
+
flex: 1;
|
|
45
|
+
color: var(--Gray-700, #344054);
|
|
46
|
+
font-size: 14px;
|
|
47
|
+
font-style: normal;
|
|
48
|
+
font-weight: 500;
|
|
49
|
+
line-height: 20px; /* 142.857% */
|
|
50
|
+
overflow: hidden;
|
|
51
|
+
text-overflow: ellipsis;
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.organization-tenant-switcher-item {
|
|
56
|
+
width: 208px;
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
gap: 12px;
|
|
60
|
+
//padding: 9px 10px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.organization-tenant-switcher-item-logo {
|
|
64
|
+
width: 40px;
|
|
65
|
+
height: 40px;
|
|
66
|
+
border-radius: 6px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.organization-tenant-switcher-switch-chevron {
|
|
70
|
+
font-size: 16px;
|
|
71
|
+
color: #101828;
|
|
72
|
+
}
|
|
@@ -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
|
+
}
|
package/es/index.d.ts
CHANGED
|
@@ -152,3 +152,4 @@ export { default as PisellImageCarousels } from './components/pisellImageCarouse
|
|
|
152
152
|
export { default as PisellHeaderProgressBar } from './components/pisellHeaderProgressBar';
|
|
153
153
|
export { default as PisellList01 } from './components/pisellList01';
|
|
154
154
|
export { default as PageHeader } from './components/page-header';
|
|
155
|
+
export { default as OrganizationTenantSwitcher } from './components/organizationTenantSwitcher';
|
package/es/index.js
CHANGED
|
@@ -181,4 +181,5 @@ export { default as PisellSectionHeaders } from "./components/pisellSectionHeade
|
|
|
181
181
|
export { default as PisellImageCarousels } from "./components/pisellImageCarousels";
|
|
182
182
|
export { default as PisellHeaderProgressBar } from "./components/pisellHeaderProgressBar";
|
|
183
183
|
export { default as PisellList01 } from "./components/pisellList01";
|
|
184
|
-
export { default as PageHeader } from "./components/page-header";
|
|
184
|
+
export { default as PageHeader } from "./components/page-header";
|
|
185
|
+
export { default as OrganizationTenantSwitcher } from "./components/organizationTenantSwitcher";
|
|
Binary file
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.less';
|
|
3
|
+
interface OrganizationTenantSwitcherProps {
|
|
4
|
+
onChange?: (value: string, option: any) => void;
|
|
5
|
+
value: string;
|
|
6
|
+
options: {
|
|
7
|
+
label: string;
|
|
8
|
+
value: string;
|
|
9
|
+
logo?: string;
|
|
10
|
+
}[];
|
|
11
|
+
showLogo?: boolean;
|
|
12
|
+
showName?: boolean;
|
|
13
|
+
}
|
|
14
|
+
declare const OrganizationTenantSwitcher: React.FC<OrganizationTenantSwitcherProps>;
|
|
15
|
+
export default OrganizationTenantSwitcher;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/organizationTenantSwitcher/index.tsx
|
|
30
|
+
var organizationTenantSwitcher_exports = {};
|
|
31
|
+
__export(organizationTenantSwitcher_exports, {
|
|
32
|
+
default: () => organizationTenantSwitcher_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(organizationTenantSwitcher_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_antd = require("antd");
|
|
37
|
+
var import_classnames = __toESM(require("classnames"));
|
|
38
|
+
var import_Check = __toESM(require("@pisell/icon/es/Check"));
|
|
39
|
+
var import_ChevronDown = __toESM(require("@pisell/icon/es/ChevronDown"));
|
|
40
|
+
var import_defaultLogo = __toESM(require("./defaultLogo.png"));
|
|
41
|
+
var import_index = require("./index.less");
|
|
42
|
+
var Logo = ({ logo, className }) => {
|
|
43
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
44
|
+
"img",
|
|
45
|
+
{
|
|
46
|
+
src: logo || import_defaultLogo.default,
|
|
47
|
+
alt: "logo",
|
|
48
|
+
className: (0, import_classnames.default)(
|
|
49
|
+
"organization-tenant-switcher-item-logo",
|
|
50
|
+
className
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
};
|
|
55
|
+
var OrganizationTenantSwitcher = ({
|
|
56
|
+
onChange,
|
|
57
|
+
value,
|
|
58
|
+
options,
|
|
59
|
+
showLogo = true,
|
|
60
|
+
showName = true
|
|
61
|
+
}) => {
|
|
62
|
+
const getCurrentOrg = () => {
|
|
63
|
+
return options.find((opt) => (opt == null ? void 0 : opt.value) === value);
|
|
64
|
+
};
|
|
65
|
+
const items = [
|
|
66
|
+
...options.map((opt) => ({
|
|
67
|
+
key: opt == null ? void 0 : opt.value,
|
|
68
|
+
label: /* @__PURE__ */ import_react.default.createElement("div", { className: "organization-tenant-switcher-item" }, /* @__PURE__ */ import_react.default.createElement(Logo, { logo: opt == null ? void 0 : opt.logo }), /* @__PURE__ */ import_react.default.createElement("div", { className: "organization-tenant-switcher-item-name", title: opt == null ? void 0 : opt.label }, opt == null ? void 0 : opt.label), (opt == null ? void 0 : opt.value) === value && /* @__PURE__ */ import_react.default.createElement(import_Check.default, { className: "organization-tenant-switcher-item-check" }))
|
|
69
|
+
}))
|
|
70
|
+
];
|
|
71
|
+
const handleMenuClick = (e) => {
|
|
72
|
+
if (e.key !== "create") {
|
|
73
|
+
const selectedOption = options.find((opt) => opt.value === e.key);
|
|
74
|
+
if (selectedOption) {
|
|
75
|
+
onChange == null ? void 0 : onChange(selectedOption.value, selectedOption);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
const currentOrg = getCurrentOrg();
|
|
80
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
81
|
+
import_antd.Dropdown,
|
|
82
|
+
{
|
|
83
|
+
menu: {
|
|
84
|
+
items,
|
|
85
|
+
onClick: handleMenuClick,
|
|
86
|
+
selectedKeys: [value]
|
|
87
|
+
},
|
|
88
|
+
trigger: ["click"],
|
|
89
|
+
overlayStyle: {
|
|
90
|
+
maxHeight: 370,
|
|
91
|
+
overflow: "auto"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
95
|
+
"div",
|
|
96
|
+
{
|
|
97
|
+
className: "organization-tenant-switcher-switch",
|
|
98
|
+
style: !showLogo ? { paddingLeft: 16 } : {}
|
|
99
|
+
},
|
|
100
|
+
showLogo && /* @__PURE__ */ import_react.default.createElement(
|
|
101
|
+
Logo,
|
|
102
|
+
{
|
|
103
|
+
logo: currentOrg == null ? void 0 : currentOrg.logo,
|
|
104
|
+
className: "organization-tenant-switcher-switch-logo"
|
|
105
|
+
}
|
|
106
|
+
),
|
|
107
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "organization-tenant-switcher-switch-name", title: currentOrg == null ? void 0 : currentOrg.label }, showName && (currentOrg == null ? void 0 : currentOrg.label)),
|
|
108
|
+
/* @__PURE__ */ import_react.default.createElement(import_ChevronDown.default, { className: "organization-tenant-switcher-switch-chevron" })
|
|
109
|
+
)
|
|
110
|
+
);
|
|
111
|
+
};
|
|
112
|
+
var organizationTenantSwitcher_default = OrganizationTenantSwitcher;
|