@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.
Files changed (32) hide show
  1. package/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +5 -5
  6. package/build/lowcode/preview.js +7 -7
  7. package/build/lowcode/render/default/view.css +1 -1
  8. package/build/lowcode/render/default/view.js +21 -21
  9. package/build/lowcode/view.css +1 -1
  10. package/build/lowcode/view.js +19 -19
  11. package/es/components/organizationTenantSwitcher/defaultLogo.png +0 -0
  12. package/es/components/organizationTenantSwitcher/index.d.ts +15 -0
  13. package/es/components/organizationTenantSwitcher/index.js +88 -0
  14. package/es/components/organizationTenantSwitcher/index.less +72 -0
  15. package/es/components/pisellAnchor/index.d.ts +10 -5
  16. package/es/components/pisellAnchor/index.js +103 -71
  17. package/es/components/pisellAnchor/index.less +84 -0
  18. package/es/index.d.ts +1 -0
  19. package/es/index.js +2 -1
  20. package/lib/components/organizationTenantSwitcher/defaultLogo.png +0 -0
  21. package/lib/components/organizationTenantSwitcher/index.d.ts +15 -0
  22. package/lib/components/organizationTenantSwitcher/index.js +112 -0
  23. package/lib/components/organizationTenantSwitcher/index.less +72 -0
  24. package/lib/components/pisellAnchor/index.d.ts +10 -5
  25. package/lib/components/pisellAnchor/index.js +74 -55
  26. package/lib/components/pisellAnchor/index.less +84 -0
  27. package/lib/index.d.ts +1 -0
  28. package/lib/index.js +3 -0
  29. package/lowcode/organization-tenant-switch/meta.ts +117 -0
  30. package/lowcode/pisell-anchor/meta.ts +47 -56
  31. package/lowcode/pisell-anchor/snippets.ts +20 -14
  32. package/package.json +1 -1
@@ -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 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
+ }
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";
@@ -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;