@pisell/materials 1.0.511 → 1.0.513

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 (41) 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 +3 -3
  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 +13 -13
  11. package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +1 -1
  12. package/es/components/pisellAnchor/index.js +6 -37
  13. package/es/components/pisellAnchor/index.less +36 -34
  14. package/es/components/pisellHeaderProgressBar/index.js +3 -4
  15. package/es/components/pisellHeaderProgressBar/index.less +0 -1
  16. package/es/components/pisellImageCarousels/index.d.ts +1 -0
  17. package/es/components/pisellImageCarousels/index.js +4 -2
  18. package/es/components/pisellList01/index.d.ts +1 -0
  19. package/es/components/pisellList01/index.js +11 -7
  20. package/es/components/profileMenu/index.d.ts +25 -0
  21. package/es/components/profileMenu/index.js +110 -0
  22. package/es/components/profileMenu/index.less +112 -0
  23. package/es/index.d.ts +1 -0
  24. package/es/index.js +1 -0
  25. package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +1 -1
  26. package/lib/components/pisellAnchor/index.js +8 -35
  27. package/lib/components/pisellAnchor/index.less +36 -34
  28. package/lib/components/pisellHeaderProgressBar/index.js +3 -2
  29. package/lib/components/pisellHeaderProgressBar/index.less +0 -1
  30. package/lib/components/pisellImageCarousels/index.d.ts +1 -0
  31. package/lib/components/pisellImageCarousels/index.js +3 -2
  32. package/lib/components/pisellList01/index.d.ts +1 -0
  33. package/lib/components/pisellList01/index.js +8 -3
  34. package/lib/components/profileMenu/index.d.ts +25 -0
  35. package/lib/components/profileMenu/index.js +118 -0
  36. package/lib/components/profileMenu/index.less +112 -0
  37. package/lib/index.d.ts +1 -0
  38. package/lib/index.js +3 -0
  39. package/lowcode/profile-menu/meta.ts +175 -0
  40. package/lowcode/profile-menu/snippets.ts +67 -0
  41. package/package.json +2 -2
@@ -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,5 +1,4 @@
1
1
  var _excluded = ["items", "getContainer", "className"];
2
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
2
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
3
  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."); }
5
4
  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); }
@@ -9,12 +8,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
9
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; }
10
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; }
11
10
  import React, { useRef, useState, useEffect } from 'react';
12
- import { Anchor, Button } from 'antd';
13
- import { LeftOutlined, RightOutlined } from '@ant-design/icons';
11
+ import { Anchor } from 'antd';
14
12
  import classNames from 'classnames';
15
13
  import "./index.less";
16
14
  var PisellAnchor = function PisellAnchor(props) {
17
- var _items$;
18
15
  var _props$items = props.items,
19
16
  items = _props$items === void 0 ? [] : _props$items,
20
17
  getContainer = props.getContainer,
@@ -86,40 +83,12 @@ var PisellAnchor = function PisellAnchor(props) {
86
83
  requestAnimationFrame(animation);
87
84
  };
88
85
  return /*#__PURE__*/React.createElement("div", {
89
- className: classNames('pisell-anchor-container', className)
90
- }, /*#__PURE__*/React.createElement("div", {
91
- className: "pisell-anchor-scroll",
92
- ref: scrollRef
93
- }, /*#__PURE__*/React.createElement(Anchor, _extends({
94
- className: "pisell-lowcode-anchor",
86
+ className: classNames('pisell-anchor-containers', className)
87
+ }, /*#__PURE__*/React.createElement(Anchor, {
88
+ direction: "horizontal",
95
89
  getContainer: getContainer,
96
90
  items: items,
97
- direction: "horizontal",
98
- replace: true,
99
- getCurrentAnchor: items === null || items === void 0 ? void 0 : (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.href,
100
- showInkInFixed: true
101
- // targetOffset={40}
102
- // bounds={40}
103
- ,
104
- affix: false
105
- }, rest))), (canScrollRight || canScrollLeft) && /*#__PURE__*/React.createElement("div", {
106
- className: "pisell-anchor-buttons"
107
- }, /*#__PURE__*/React.createElement(Button, {
108
- className: classNames('scroll-button', {
109
- disabled: !canScrollLeft
110
- }),
111
- onClick: function onClick() {
112
- return handleScroll('left');
113
- },
114
- disabled: !canScrollLeft
115
- }, /*#__PURE__*/React.createElement(LeftOutlined, null)), /*#__PURE__*/React.createElement(Button, {
116
- className: classNames('scroll-button', {
117
- disabled: !canScrollRight
118
- }),
119
- onClick: function onClick() {
120
- return handleScroll('right');
121
- },
122
- disabled: !canScrollRight
123
- }, /*#__PURE__*/React.createElement(RightOutlined, null))));
91
+ targetOffset: 39
92
+ }));
124
93
  };
125
94
  export default PisellAnchor;
@@ -1,47 +1,49 @@
1
- .pisell-anchor-container {
2
- position: sticky;
3
- top: 0;
4
- z-index: 999;
5
- display: flex;
6
- align-items: center;
7
- background-color: #fff;
8
- height: 40px;
9
-
10
- .pisell-lowcode-anchor {
11
- height: 40px;
12
- border-bottom: none !important;
13
-
14
- .pisell-lowcode-anchor-ink {
1
+ .pisell-anchor-containers {
2
+ // display: flex;
3
+ // align-items: center;
4
+ // background-color: #fff;
5
+ // height: 40px;
6
+ .pisell-lowcode-anchor-wrapper {
7
+ &::before {
8
+ content: '';
15
9
  display: none;
16
10
  }
11
+ .pisell-lowcode-anchor {
12
+ height: 40px;
13
+ border-bottom: none !important;
14
+ background-color: #fff;
17
15
 
18
- .pisell-lowcode-anchor-link {
19
- height: 100%;
20
- padding: 0 16px;
21
- display: flex;
22
- align-items: center;
16
+ .pisell-lowcode-anchor-ink {
17
+ display: none;
18
+ }
19
+
20
+ .pisell-lowcode-anchor-link {
21
+ height: 100%;
22
+ padding: 0 16px;
23
+ display: flex;
24
+ align-items: center;
23
25
 
24
- &-title {
25
- color: var(--Gray-900, #101828);
26
- font-family: Inter;
27
- font-size: 16px;
28
- font-weight: 600;
29
- line-height: 40px;
26
+ &-title {
27
+ color: var(--Gray-900, #101828);
28
+ font-family: Inter;
29
+ font-size: 16px;
30
+ font-weight: 600;
31
+ line-height: 40px;
32
+ }
30
33
  }
31
- }
32
34
 
33
- .pisell-lowcode-anchor-link-active {
34
- border-radius: 100px;
35
- background: var(--theme-color, #7f56d9);
36
- height: 40px;
35
+ .pisell-lowcode-anchor-link-active {
36
+ border-radius: 100px;
37
+ background: var(--theme-color, #7f56d9);
38
+ height: 40px;
37
39
 
38
- .pisell-lowcode-anchor-link-title {
39
- color: var(--White, #fff);
40
- line-height: 40px;
40
+ .pisell-lowcode-anchor-link-title {
41
+ color: var(--White, #fff);
42
+ line-height: 40px;
43
+ }
41
44
  }
42
45
  }
43
46
  }
44
-
45
47
  .pisell-anchor-scroll {
46
48
  height: 40px;
47
49
  flex: 1;
@@ -49,9 +49,7 @@ var PisellHeaderProgressBar = function PisellHeaderProgressBar(_ref) {
49
49
  boxShadow: enableShadow ? '0px 1px 2px 0px rgba(16, 24, 40, 0.05)' : 'none',
50
50
  borderBottom: enableBorder ? "".concat(borderWidth, "px solid ").concat(borderColor) : 'none'
51
51
  });
52
- return /*#__PURE__*/React.createElement("div", {
53
- className: classes
54
- }, /*#__PURE__*/React.createElement(PisellSectionHeaders, {
52
+ return /*#__PURE__*/React.createElement(PisellSectionHeaders, {
55
53
  backNode: /*#__PURE__*/React.createElement(Iconfont, {
56
54
  className: "".concat(prefixCls, "-back-icon"),
57
55
  type: "pisell2-chevron-left"
@@ -68,8 +66,9 @@ var PisellHeaderProgressBar = function PisellHeaderProgressBar(_ref) {
68
66
  className: "".concat(prefixCls, "-close-icon")
69
67
  }) : null,
70
68
  style: customStyle,
69
+ className: classes,
71
70
  onAction: onClose,
72
71
  onBack: onBack
73
- }));
72
+ });
74
73
  };
75
74
  export default PisellHeaderProgressBar;
@@ -1,5 +1,4 @@
1
1
  .pisell-header-progress-bar {
2
- position: relative;
3
2
  width: 100%;
4
3
 
5
4
  &-center {
@@ -13,6 +13,7 @@ export interface PisellImageCarouselsProps {
13
13
  autoplay?: boolean;
14
14
  interval?: number;
15
15
  borderRadius?: number;
16
+ loop?: boolean;
16
17
  className?: string;
17
18
  style?: React.CSSProperties;
18
19
  }
@@ -28,6 +28,8 @@ var PisellImageCarousels = function PisellImageCarousels(_ref) {
28
28
  interval = _ref$interval === void 0 ? 3000 : _ref$interval,
29
29
  _ref$borderRadius = _ref.borderRadius,
30
30
  borderRadius = _ref$borderRadius === void 0 ? 8 : _ref$borderRadius,
31
+ _ref$loop = _ref.loop,
32
+ loop = _ref$loop === void 0 ? true : _ref$loop,
31
33
  className = _ref.className,
32
34
  style = _ref.style;
33
35
  var swiperRef = useRef(null);
@@ -38,7 +40,7 @@ var PisellImageCarousels = function PisellImageCarousels(_ref) {
38
40
  modules: [Navigation, Pagination, Autoplay],
39
41
  slidesPerView: 1,
40
42
  spaceBetween: 0,
41
- loop: true,
43
+ loop: loop,
42
44
  // 导航箭头
43
45
  navigation: showArrows ? {
44
46
  nextEl: '.pisell-carousel-next',
@@ -61,7 +63,7 @@ var PisellImageCarousels = function PisellImageCarousels(_ref) {
61
63
  swiperInstance.current.destroy();
62
64
  }
63
65
  };
64
- }, [showArrows, showDots, autoplay, interval]);
66
+ }, [showArrows, showDots, autoplay, interval, loop]);
65
67
  return /*#__PURE__*/React.createElement("div", {
66
68
  className: classNames('pisell-image-carousel', className),
67
69
  style: _objectSpread({
@@ -8,6 +8,7 @@ export interface PisellList01Props {
8
8
  className?: string;
9
9
  style?: React.CSSProperties;
10
10
  onChange?: (anchor: string) => void;
11
+ onSearch?: (value: any) => void;
11
12
  }
12
13
  declare const PisellList01: React.FC<PisellList01Props>;
13
14
  export default PisellList01;
@@ -17,7 +17,8 @@ var PisellList01 = function PisellList01(_ref) {
17
17
  renderItem = _ref.renderItem,
18
18
  className = _ref.className,
19
19
  style = _ref.style,
20
- _onChange = _ref.onChange;
20
+ _onChange = _ref.onChange,
21
+ onSearch = _ref.onSearch;
21
22
  var _useState = useState(''),
22
23
  _useState2 = _slicedToArray(_useState, 2),
23
24
  currentAnchor = _useState2[0],
@@ -27,6 +28,10 @@ var PisellList01 = function PisellList01(_ref) {
27
28
  products = _useState4[0],
28
29
  setProducts = _useState4[1];
29
30
  useEffect(function () {
31
+ // 不显示分类时,默认展示所有数据
32
+ if (!showCategory) {
33
+ return setProducts(dataSource !== null && dataSource !== void 0 ? dataSource : []);
34
+ }
30
35
  if (currentAnchor) {
31
36
  var _currentData$children;
32
37
  var currentData = dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (item) {
@@ -34,7 +39,7 @@ var PisellList01 = function PisellList01(_ref) {
34
39
  });
35
40
  setProducts((_currentData$children = currentData === null || currentData === void 0 ? void 0 : currentData.children) !== null && _currentData$children !== void 0 ? _currentData$children : []);
36
41
  }
37
- }, [currentAnchor, dataSource]);
42
+ }, [currentAnchor, dataSource, showCategory]);
38
43
  useEffect(function () {
39
44
  var _dataSource$0$href, _dataSource$;
40
45
  setCurrentAnchor((_dataSource$0$href = dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.href) !== null && _dataSource$0$href !== void 0 ? _dataSource$0$href : '');
@@ -65,9 +70,8 @@ var PisellList01 = function PisellList01(_ref) {
65
70
  style: {
66
71
  color: '#667085'
67
72
  }
68
- })
69
- // onChange={handleSearch}
70
- ,
73
+ }),
74
+ onChange: onSearch,
71
75
  allowClear: true,
72
76
  size: "large",
73
77
  className: "pisell-list-01-search-input"
@@ -82,9 +86,9 @@ var PisellList01 = function PisellList01(_ref) {
82
86
  }
83
87
  })) : null, /*#__PURE__*/React.createElement("div", {
84
88
  className: "pisell-list-01-products"
85
- }, /*#__PURE__*/React.createElement("div", {
89
+ }, showCategory ? /*#__PURE__*/React.createElement("div", {
86
90
  className: "pisell-list-01-products-title"
87
- }, categoryTitle), /*#__PURE__*/React.createElement(PisellViewGrid, {
91
+ }, categoryTitle) : null, /*#__PURE__*/React.createElement(PisellViewGrid, {
88
92
  dataSource: products,
89
93
  columns: 1,
90
94
  verticalGap: 16,
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import type { MenuProps } from 'antd';
3
+ import './index.less';
4
+ interface ProfileMenuProps {
5
+ menuIcon?: React.ReactNode;
6
+ userName?: string;
7
+ email?: string;
8
+ isShowUserName?: boolean;
9
+ isShowEmail?: boolean;
10
+ isShowUserInfo?: boolean;
11
+ onClick?: () => void;
12
+ avatar?: {
13
+ src?: string;
14
+ alt?: string;
15
+ };
16
+ className?: string;
17
+ style?: React.CSSProperties;
18
+ menuItems?: MenuProps['items'];
19
+ placement?: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
20
+ trigger?: ('click' | 'hover')[];
21
+ showBadge?: boolean;
22
+ badgeCount?: number;
23
+ }
24
+ declare const ProfileMenu: React.FC<ProfileMenuProps>;
25
+ export default ProfileMenu;
@@ -0,0 +1,110 @@
1
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
2
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
3
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
6
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
7
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
8
+ 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."); }
9
+ 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); }
10
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
11
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
12
+ 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; }
13
+ import React, { useEffect, useMemo } from 'react';
14
+ import { Dropdown, Badge } from 'antd';
15
+ import classNames from 'classnames';
16
+ import PisellAvatar from "./../pisellAvatar";
17
+ import "./index.less";
18
+ var ProfileMenu = function ProfileMenu(_ref) {
19
+ var menuIcon = _ref.menuIcon,
20
+ _ref$userName = _ref.userName,
21
+ userName = _ref$userName === void 0 ? '' : _ref$userName,
22
+ _ref$email = _ref.email,
23
+ email = _ref$email === void 0 ? '' : _ref$email,
24
+ _ref$isShowUserName = _ref.isShowUserName,
25
+ isShowUserName = _ref$isShowUserName === void 0 ? false : _ref$isShowUserName,
26
+ _ref$isShowEmail = _ref.isShowEmail,
27
+ isShowEmail = _ref$isShowEmail === void 0 ? false : _ref$isShowEmail,
28
+ _ref$isShowUserInfo = _ref.isShowUserInfo,
29
+ isShowUserInfo = _ref$isShowUserInfo === void 0 ? false : _ref$isShowUserInfo,
30
+ onClick = _ref.onClick,
31
+ avatar = _ref.avatar,
32
+ className = _ref.className,
33
+ style = _ref.style,
34
+ _ref$menuItems = _ref.menuItems,
35
+ menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems,
36
+ _ref$placement = _ref.placement,
37
+ placement = _ref$placement === void 0 ? 'bottomRight' : _ref$placement,
38
+ _ref$trigger = _ref.trigger,
39
+ trigger = _ref$trigger === void 0 ? ['click'] : _ref$trigger,
40
+ _ref$showBadge = _ref.showBadge,
41
+ showBadge = _ref$showBadge === void 0 ? false : _ref$showBadge,
42
+ _ref$badgeCount = _ref.badgeCount,
43
+ badgeCount = _ref$badgeCount === void 0 ? 1 : _ref$badgeCount;
44
+ useEffect(function () {
45
+ document.body.id = 'body';
46
+ }, []);
47
+ var handleClick = function handleClick(e) {
48
+ e.preventDefault();
49
+ onClick === null || onClick === void 0 ? void 0 : onClick();
50
+ };
51
+
52
+ // 构建菜单项,如果显示用户信息,添加用户信息项
53
+ var finalMenuItems = useMemo(function () {
54
+ if (!isShowUserInfo) return menuItems;
55
+ var userInfoItem = {
56
+ key: 'user-info',
57
+ label: /*#__PURE__*/React.createElement("div", {
58
+ className: "profile-menu-user-info-item"
59
+ }, /*#__PURE__*/React.createElement(PisellAvatar, {
60
+ size: "md",
61
+ src: avatar === null || avatar === void 0 ? void 0 : avatar.src,
62
+ alt: avatar === null || avatar === void 0 ? void 0 : avatar.alt
63
+ }), /*#__PURE__*/React.createElement("div", {
64
+ className: "profile-menu-user-info"
65
+ }, userName && /*#__PURE__*/React.createElement("p", {
66
+ className: "profile-menu-user-info-name"
67
+ }, userName), email && /*#__PURE__*/React.createElement("p", {
68
+ className: "profile-menu-user-info-email"
69
+ }, email)))
70
+ };
71
+ return [userInfoItem, {
72
+ type: 'divider'
73
+ }].concat(_toConsumableArray(menuItems || []));
74
+ }, [isShowUserInfo, menuItems, userName, email, avatar]);
75
+ return /*#__PURE__*/React.createElement(Dropdown, {
76
+ menu: {
77
+ items: finalMenuItems
78
+ },
79
+ placement: placement,
80
+ trigger: trigger,
81
+ overlayClassName: "profile-menu-dropdown"
82
+ }, /*#__PURE__*/React.createElement("div", {
83
+ className: classNames('profile-menu-wrap', className),
84
+ style: _objectSpread(_objectSpread({}, style), {}, {
85
+ paddingRight: isShowUserName && userName || isShowEmail && email ? 16 : 0
86
+ }),
87
+ onClick: handleClick
88
+ }, menuIcon && /*#__PURE__*/React.createElement("div", {
89
+ className: "profile-menu-icon"
90
+ }, menuIcon), /*#__PURE__*/React.createElement(Badge, {
91
+ count: showBadge ? badgeCount : 0,
92
+ offset: [-6, 6]
93
+ }, /*#__PURE__*/React.createElement(PisellAvatar, {
94
+ size: "md",
95
+ style: {
96
+ margin: '0 6px'
97
+ },
98
+ src: avatar === null || avatar === void 0 ? void 0 : avatar.src,
99
+ alt: avatar === null || avatar === void 0 ? void 0 : avatar.alt
100
+ })), (isShowUserName && userName || isShowEmail && email) && /*#__PURE__*/React.createElement("div", {
101
+ className: "profile-menu-user-info"
102
+ }, isShowUserName && userName && /*#__PURE__*/React.createElement("p", {
103
+ className: "profile-menu-user-info-name",
104
+ title: userName
105
+ }, userName), isShowEmail && email && /*#__PURE__*/React.createElement("p", {
106
+ className: "profile-menu-user-info-email",
107
+ title: email
108
+ }, email))));
109
+ };
110
+ export default ProfileMenu;
@@ -0,0 +1,112 @@
1
+ .profile-menu-wrap {
2
+ display: flex;
3
+
4
+ gap: 10px;
5
+ width: fit-content;
6
+ align-items: center;
7
+ padding-top: 6px;
8
+ padding-bottom: 6px;
9
+ padding-left: 16px;
10
+
11
+ border-radius: 50px;
12
+ border: 1px solid var(--Gray-100, #f2f4f7);
13
+ background: var(--Base-White, #fff);
14
+ cursor: pointer;
15
+ transition: all 0.3s ease;
16
+
17
+ /* Shadow/sm */
18
+ box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
19
+ 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
20
+
21
+ &:hover {
22
+ border-color: var(--Gray-200, #e5e7eb);
23
+ box-shadow: 0px 2px 4px 0px rgba(16, 24, 40, 0.15);
24
+ }
25
+
26
+ .profile-menu-icon {
27
+ display: flex;
28
+ align-items: center;
29
+ }
30
+
31
+ }
32
+
33
+
34
+ .profile-menu-user-info {
35
+ display: flex;
36
+ flex-direction: column;
37
+ justify-content: center;
38
+ min-width: 0;
39
+ padding: 0;
40
+
41
+ &-item {
42
+ display: flex;
43
+ align-items: center;
44
+ gap: 12px;
45
+ width: 100%;
46
+ flex-wrap: nowrap;
47
+ }
48
+
49
+ &-name {
50
+ color: var(--Gray-700, #344054);
51
+ font-family: Inter;
52
+ font-size: 14px;
53
+ font-weight: 600;
54
+ line-height: 20px;
55
+ margin: 0;
56
+ white-space: nowrap;
57
+ overflow: hidden;
58
+ text-overflow: ellipsis;
59
+ }
60
+
61
+ &-email {
62
+ color: var(--Gray-600, #475467);
63
+ font-family: Inter;
64
+ font-size: 14px;
65
+ font-weight: 400;
66
+ line-height: 20px;
67
+ margin: 0;
68
+ white-space: nowrap;
69
+ overflow: hidden;
70
+ text-overflow: ellipsis;
71
+ }
72
+ }
73
+
74
+ .profile-menu-dropdown {
75
+ .ant-dropdown-menu {
76
+ padding: 8px;
77
+ border-radius: 8px;
78
+ border: 1px solid var(--Gray-100, #f2f4f7);
79
+ background: var(--Base-White, #fff);
80
+ box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
81
+ 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
82
+
83
+ .ant-dropdown-menu-item {
84
+ padding: 8px 12px;
85
+ border-radius: 6px;
86
+ min-height: 40px;
87
+ display: flex;
88
+ align-items: center;
89
+
90
+ &:hover {
91
+ background: var(--Gray-50, #f9fafb);
92
+ }
93
+
94
+ &:active {
95
+ background: var(--Gray-100, #f2f4f7);
96
+ }
97
+
98
+ .profile-menu-user-info-item {
99
+ display: flex;
100
+ align-items: center;
101
+ gap: 12px;
102
+ width: 100%;
103
+ flex-wrap: nowrap;
104
+ }
105
+ }
106
+
107
+ .ant-dropdown-menu-item-divider {
108
+ margin: 8px 0;
109
+ background-color: var(--Gray-100, #f2f4f7);
110
+ }
111
+ }
112
+ }
package/es/index.d.ts CHANGED
@@ -104,6 +104,7 @@ export { default as PisellToast } from './components/pisellToast';
104
104
  export { default as PisellWalletPassCard } from './components/pisellWalletPassCard';
105
105
  export { default as PisellScan } from './components/pisellScan';
106
106
  export { default as PisellAlert } from './components/pisellAlert';
107
+ export { default as ProfileMenu } from './components/profileMenu';
107
108
  export { default as PisellCard } from './components/pisellCard';
108
109
  export { default as CropPhoto } from './components/cropPhoto';
109
110
  export { default as PisellQrcode } from './components/pisellQrcode';
package/es/index.js CHANGED
@@ -134,6 +134,7 @@ export { default as PisellToast } from "./components/pisellToast";
134
134
  export { default as PisellWalletPassCard } from "./components/pisellWalletPassCard";
135
135
  export { default as PisellScan } from "./components/pisellScan";
136
136
  export { default as PisellAlert } from "./components/pisellAlert";
137
+ export { default as ProfileMenu } from "./components/profileMenu";
137
138
  export { default as PisellCard } from "./components/pisellCard";
138
139
  export { default as CropPhoto } from "./components/cropPhoto";
139
140
  export { default as PisellQrcode } from "./components/pisellQrcode";
@@ -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;
@@ -34,11 +34,9 @@ __export(pisellAnchor_exports, {
34
34
  module.exports = __toCommonJS(pisellAnchor_exports);
35
35
  var import_react = __toESM(require("react"));
36
36
  var import_antd = require("antd");
37
- var import_icons = require("@ant-design/icons");
38
37
  var import_classnames = __toESM(require("classnames"));
39
38
  var import_index = require("./index.less");
40
39
  var PisellAnchor = (props) => {
41
- var _a;
42
40
  const { items = [], getContainer, className, ...rest } = props;
43
41
  const scrollRef = (0, import_react.useRef)(null);
44
42
  const [canScrollLeft, setCanScrollLeft] = (0, import_react.useState)(false);
@@ -51,13 +49,13 @@ var PisellAnchor = (props) => {
51
49
  }
52
50
  };
53
51
  (0, import_react.useEffect)(() => {
54
- var _a2;
52
+ var _a;
55
53
  document.body.id = "body";
56
54
  checkScroll();
57
- (_a2 = scrollRef.current) == null ? void 0 : _a2.addEventListener("scroll", checkScroll);
55
+ (_a = scrollRef.current) == null ? void 0 : _a.addEventListener("scroll", checkScroll);
58
56
  return () => {
59
- var _a3;
60
- (_a3 = scrollRef.current) == null ? void 0 : _a3.removeEventListener("scroll", checkScroll);
57
+ var _a2;
58
+ (_a2 = scrollRef.current) == null ? void 0 : _a2.removeEventListener("scroll", checkScroll);
61
59
  };
62
60
  }, []);
63
61
  const handleScroll = (direction) => {
@@ -90,39 +88,14 @@ var PisellAnchor = (props) => {
90
88
  };
91
89
  requestAnimationFrame(animation);
92
90
  };
93
- return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-anchor-container", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-anchor-scroll", ref: scrollRef }, /* @__PURE__ */ import_react.default.createElement(
91
+ return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-anchor-containers", className) }, /* @__PURE__ */ import_react.default.createElement(
94
92
  import_antd.Anchor,
95
93
  {
96
- className: "pisell-lowcode-anchor",
94
+ direction: "horizontal",
97
95
  getContainer,
98
96
  items,
99
- direction: "horizontal",
100
- replace: true,
101
- getCurrentAnchor: (_a = items == null ? void 0 : items[0]) == null ? void 0 : _a.href,
102
- showInkInFixed: true,
103
- affix: false,
104
- ...rest
97
+ targetOffset: 39
105
98
  }
106
- )), (canScrollRight || canScrollLeft) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-anchor-buttons" }, /* @__PURE__ */ import_react.default.createElement(
107
- import_antd.Button,
108
- {
109
- className: (0, import_classnames.default)("scroll-button", {
110
- disabled: !canScrollLeft
111
- }),
112
- onClick: () => handleScroll("left"),
113
- disabled: !canScrollLeft
114
- },
115
- /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
116
- ), /* @__PURE__ */ import_react.default.createElement(
117
- import_antd.Button,
118
- {
119
- className: (0, import_classnames.default)("scroll-button", {
120
- disabled: !canScrollRight
121
- }),
122
- onClick: () => handleScroll("right"),
123
- disabled: !canScrollRight
124
- },
125
- /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
126
- )));
99
+ ));
127
100
  };
128
101
  var pisellAnchor_default = PisellAnchor;