@aloudata/aloudata-design 0.2.6 → 0.2.7

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 (5) hide show
  1. package/es/Navigator/components/Menu/index.js +12 -55
  2. package/es/Navigator/style/index.less +28 -30
  3. package/lib/Navigator/components/Menu/index.js +12 -56
  4. package/lib/Navigator/style/index.less +28 -30
  5. package/package.json +1 -1
package/es/Navigator/components/Menu/index.js CHANGED
@@ -18,7 +18,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
18
18
 
19
19
  import React, { useCallback, useState, useEffect, useMemo } from 'react';
20
20
  import AntdMenu from 'antd/lib/menu';
21
- import Icon from '../../../Icon';
22
21
 
23
22
  function Menu(props) {
24
23
  var menuList = props.menuList,
@@ -28,36 +27,17 @@ function Menu(props) {
28
27
  var _useMemo = useMemo(function () {
29
28
  return getFlattenMenuByKey(menuList);
30
29
  }, [menuList]),
31
- flattenMenuByMenuKey = _useMemo.flattenMenuByMenuKey;
30
+ flattenMenuByMenuKey = _useMemo.flattenMenuByMenuKey,
31
+ parentKeys = _useMemo.parentKeys;
32
32
 
33
33
  var _useState = useState(''),
34
34
  _useState2 = _slicedToArray(_useState, 2),
35
- openKey = _useState2[0],
36
- setOpenKey = _useState2[1]; // 当前展开的菜单项
35
+ currentSelectedKey = _useState2[0],
36
+ setCurrentSelectedKey = _useState2[1]; // 当前选中的菜单项
37
37
 
38
38
 
39
- var _useState3 = useState(''),
40
- _useState4 = _slicedToArray(_useState3, 2),
41
- currentSelectedKey = _useState4[0],
42
- setCurrentSelectedKey = _useState4[1]; // 当前选中的菜单项
43
-
44
-
45
- var renderExpandIcon = useCallback(function (renderIconInfo) {
46
- var isOpen = renderIconInfo.isOpen;
47
-
48
- if (isOpen) {
49
- return /*#__PURE__*/React.createElement(Icon, {
50
- type: "arrow_drop_up",
51
- size: 20,
52
- className: "ald-nav-menu-icon-right"
53
- });
54
- }
55
-
56
- return /*#__PURE__*/React.createElement(Icon, {
57
- type: "arrow_drop_down",
58
- size: 20,
59
- className: "ald-nav-menu-icon-right"
60
- });
39
+ var renderExpandIcon = useCallback(function () {
40
+ return null;
61
41
  }, []);
62
42
  useEffect(function () {
63
43
  setCurrentSelectedKey(selectedKey);
@@ -76,29 +56,6 @@ function Menu(props) {
76
56
  onMenuSelect(menuInfo);
77
57
  }
78
58
  }, [flattenMenuByMenuKey, onMenuSelect]);
79
- /**
80
- * 根据当前选中的菜单项，设置展开的菜单项
81
- */
82
-
83
- useEffect(function () {
84
- var _flattenMenuByMenuKey;
85
-
86
- setOpenKey(((_flattenMenuByMenuKey = flattenMenuByMenuKey[currentSelectedKey]) === null || _flattenMenuByMenuKey === void 0 ? void 0 : _flattenMenuByMenuKey.openKey) || '');
87
- }, [currentSelectedKey, flattenMenuByMenuKey, onMenuSelect]);
88
- /**
89
- * 父级菜单点击
90
- */
91
-
92
- var onSupMenuClick = useCallback(function (key) {
93
- if (key === openKey) {
94
- return;
95
- }
96
-
97
- var FIRST_INDEX = 0;
98
- var firstChildrenKey = flattenMenuByMenuKey[key].children[FIRST_INDEX].key;
99
- setCurrentSelectedKey(firstChildrenKey);
100
- onMenuChange(firstChildrenKey);
101
- }, [flattenMenuByMenuKey, openKey, onMenuChange]);
102
59
  /**
103
60
  * 子级菜单项或者一级菜单点击
104
61
  */
@@ -116,7 +73,7 @@ function Menu(props) {
116
73
  }, /*#__PURE__*/React.createElement(AntdMenu, {
117
74
  selectedKeys: [currentSelectedKey],
118
75
  expandIcon: renderExpandIcon,
119
- openKeys: [openKey],
76
+ openKeys: parentKeys,
120
77
  mode: "inline",
121
78
  style: {
122
79
  padding: '0 12px'
@@ -126,10 +83,7 @@ function Menu(props) {
126
83
  return /*#__PURE__*/React.createElement(AntdMenu.SubMenu, {
127
84
  key: item.key,
128
85
  icon: item.icon,
129
- title: item.title,
130
- onTitleClick: function onTitleClick() {
131
- return onSupMenuClick(item.key);
132
- }
86
+ title: item.title
133
87
  }, item.children.map(function (subItem) {
134
88
  return /*#__PURE__*/React.createElement(AntdMenu.Item, {
135
89
  onClick: function onClick() {
@@ -152,6 +106,7 @@ function Menu(props) {
152
106
 
153
107
  function getFlattenMenuByKey(menuList) {
154
108
  var flattenMenuByMenuKey = {};
109
+ var parentKeys = [];
155
110
  var menuKeys = []; // 存储所有的key 用来判断是否有重复的key
156
111
 
157
112
  var menuInvalidFlag = true; // 传入的menuList是否有效
@@ -171,6 +126,7 @@ function getFlattenMenuByKey(menuList) {
171
126
  });
172
127
  menuKeys.push(childItem.key);
173
128
  });
129
+ parentKeys.push(item.key);
174
130
  } else {
175
131
  flattenMenuByMenuKey[item.key] = _objectSpread(_objectSpread({}, item), {}, {
176
132
  openKey: ''
@@ -180,7 +136,8 @@ function getFlattenMenuByKey(menuList) {
180
136
  });
181
137
  return {
182
138
  menuInvalidFlag: menuInvalidFlag,
183
- flattenMenuByMenuKey: flattenMenuByMenuKey
139
+ flattenMenuByMenuKey: flattenMenuByMenuKey,
140
+ parentKeys: parentKeys
184
141
  };
185
142
  }
186
143
 
package/es/Navigator/style/index.less CHANGED
@@ -3,37 +3,35 @@
3
3
 
4
4
  /* stylelint-disable */
5
5
 
6
- @ald-prefix:ant;
6
+ @ald-prefix: ant;
7
7
 
8
8
  .supTitle() {
9
- font-family: 'PingFang SC';
10
- font-style: normal;
11
9
  font-weight: 500;
12
10
  font-size: 14px;
11
+ font-style: normal;
13
12
  line-height: 20px;
14
13
  }
15
14
 
16
15
  .subTitle() {
17
- font-family: 'PingFang SC';
18
- font-style: normal;
19
16
  font-weight: 400;
20
17
  font-size: 12px;
18
+ font-style: normal;
21
19
  line-height: 16px;
22
20
  }
23
21
 
24
22
  .ald-nav {
25
- width: 216px;
26
- background-color: @BBG15;
27
- height: 100%;
28
23
  display: flex;
29
24
  flex-direction: column;
25
+ width: 216px;
26
+ height: 100%;
30
27
  overflow: hidden;
28
+ background-color: @BBG15;
31
29
  user-select: none;
32
30
 
33
31
  &-logo {
32
+ width: 100%;
34
33
  height: 72px;
35
34
  padding: 24px;
36
- width: 100%;
37
35
 
38
36
  &-able-click {
39
37
  cursor: pointer;
@@ -46,30 +44,30 @@
46
44
 
47
45
  &-menu {
48
46
  flex: 1;
49
- overflow-y: auto;
50
47
  overflow-x: hidden;
48
+ overflow-y: auto;
51
49
 
52
50
  .ant-menu-sub.ant-menu-inline {
53
51
  background-color: unset;
54
52
  }
55
53
 
56
54
  .anticon.ant-menu-item-icon {
57
- font-size: 20px !important;
58
55
  width: 20px !important;
59
56
  height: 20px !important;
57
+ font-size: 20px !important;
60
58
  }
61
59
 
62
60
  &::-webkit-scrollbar-thumb {
63
- border-radius: 6px;
64
61
  background: @ND90;
65
- border: 3px solid transparent;
66
62
  background-clip: padding-box;
63
+ border: 3px solid transparent;
64
+ border-radius: 6px;
67
65
  }
68
66
 
69
67
  &::-webkit-scrollbar {
70
- background-color: transparent;
71
68
  width: 12px;
72
69
  height: 12px;
70
+ background-color: transparent;
73
71
  }
74
72
 
75
73
  .ant-menu-inline,
@@ -79,11 +77,10 @@
79
77
  }
80
78
 
81
79
  .ant-menu {
82
- background: @BBG15;
83
80
  color: @ND0;
81
+ background: @BBG15;
84
82
 
85
83
  &.ant-menu-root {
86
-
87
84
  .ant-menu-item {
88
85
  margin-bottom: 16px;
89
86
  padding: 0 12px !important;
@@ -98,16 +95,16 @@
98
95
  .ant-menu-item {
99
96
  margin-top: 4px;
100
97
  margin-bottom: 0;
101
- padding: 0 12px 0 44px!important;
98
+ padding: 0 12px 0 44px !important;
102
99
  }
103
100
  }
104
101
 
105
102
  // 只有子级菜单相关颜色操作
106
103
  .ant-menu-item-only-child {
107
- color: @ND30;
108
104
  height: 32px !important;
109
- line-height: 32px !important;
105
+ color: @ND30;
110
106
  font-size: 12px !important;
107
+ line-height: 32px !important;
111
108
  .subTitle();
112
109
 
113
110
  &:hover {
@@ -124,28 +121,28 @@
124
121
  }
125
122
 
126
123
  .ant-menu-item {
127
- height: 40px;
128
124
  width: 100%;
125
+ height: 40px;
129
126
  border-radius: 8px;
130
127
  .supTitle();
131
128
 
132
129
  ::before {
133
- width: 4px;
134
- content: '';
135
- background: transparent;
136
- height: 100%;
137
130
  position: absolute;
138
131
  top: 0;
139
132
  left: -12px;
133
+ width: 4px;
134
+ height: 100%;
135
+ background: transparent;
140
136
  border-radius: 1px;
141
- transition: all .3s;
137
+ transition: all 0.3s;
138
+ content: '';
142
139
  }
143
140
 
144
141
  &-selected {
145
- background-color: @BBG20 !important;
146
- color: @ND0;
147
142
  position: relative;
148
143
  overflow: unset;
144
+ color: @ND0;
145
+ background-color: @BBG20 !important;
149
146
 
150
147
  ::before {
151
148
  background: @B40;
@@ -161,13 +158,14 @@
161
158
  margin-bottom: 16px;
162
159
 
163
160
  .ant-menu-submenu-title {
164
- padding: 0 12px !important;
165
161
  height: 40px;
162
+ padding: 0 12px !important;
166
163
  line-height: 40px;
167
164
  .supTitle();
168
165
 
169
166
  &:hover {
170
167
  color: @ND0;
168
+ cursor: default;
171
169
  }
172
170
  }
173
171
 
@@ -221,8 +219,8 @@
221
219
  height: 72px;
222
220
 
223
221
  &-wrap {
224
- color: @ND0;
225
222
  height: 100%;
223
+ color: @ND0;
226
224
  }
227
225
  }
228
- }
226
+ }
package/lib/Navigator/components/Menu/index.js CHANGED
@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _menu = _interopRequireDefault(require("antd/lib/menu"));
13
13
 
14
- var _Icon = _interopRequireDefault(require("../../../Icon"));
15
-
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
15
 
18
16
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -45,36 +43,17 @@ function Menu(props) {
45
43
  var _useMemo = (0, _react.useMemo)(function () {
46
44
  return getFlattenMenuByKey(menuList);
47
45
  }, [menuList]),
48
- flattenMenuByMenuKey = _useMemo.flattenMenuByMenuKey;
46
+ flattenMenuByMenuKey = _useMemo.flattenMenuByMenuKey,
47
+ parentKeys = _useMemo.parentKeys;
49
48
 
50
49
  var _useState = (0, _react.useState)(''),
51
50
  _useState2 = _slicedToArray(_useState, 2),
52
- openKey = _useState2[0],
53
- setOpenKey = _useState2[1]; // 当前展开的菜单项
54
-
55
-
56
- var _useState3 = (0, _react.useState)(''),
57
- _useState4 = _slicedToArray(_useState3, 2),
58
- currentSelectedKey = _useState4[0],
59
- setCurrentSelectedKey = _useState4[1]; // 当前选中的菜单项
51
+ currentSelectedKey = _useState2[0],
52
+ setCurrentSelectedKey = _useState2[1]; // 当前选中的菜单项
60
53
 
61
54
 
62
- var renderExpandIcon = (0, _react.useCallback)(function (renderIconInfo) {
63
- var isOpen = renderIconInfo.isOpen;
64
-
65
- if (isOpen) {
66
- return /*#__PURE__*/_react.default.createElement(_Icon.default, {
67
- type: "arrow_drop_up",
68
- size: 20,
69
- className: "ald-nav-menu-icon-right"
70
- });
71
- }
72
-
73
- return /*#__PURE__*/_react.default.createElement(_Icon.default, {
74
- type: "arrow_drop_down",
75
- size: 20,
76
- className: "ald-nav-menu-icon-right"
77
- });
55
+ var renderExpandIcon = (0, _react.useCallback)(function () {
56
+ return null;
78
57
  }, []);
79
58
  (0, _react.useEffect)(function () {
80
59
  setCurrentSelectedKey(selectedKey);
@@ -93,29 +72,6 @@ function Menu(props) {
93
72
  onMenuSelect(menuInfo);
94
73
  }
95
74
  }, [flattenMenuByMenuKey, onMenuSelect]);
96
- /**
97
- * 根据当前选中的菜单项，设置展开的菜单项
98
- */
99
-
100
- (0, _react.useEffect)(function () {
101
- var _flattenMenuByMenuKey;
102
-
103
- setOpenKey(((_flattenMenuByMenuKey = flattenMenuByMenuKey[currentSelectedKey]) === null || _flattenMenuByMenuKey === void 0 ? void 0 : _flattenMenuByMenuKey.openKey) || '');
104
- }, [currentSelectedKey, flattenMenuByMenuKey, onMenuSelect]);
105
- /**
106
- * 父级菜单点击
107
- */
108
-
109
- var onSupMenuClick = (0, _react.useCallback)(function (key) {
110
- if (key === openKey) {
111
- return;
112
- }
113
-
114
- var FIRST_INDEX = 0;
115
- var firstChildrenKey = flattenMenuByMenuKey[key].children[FIRST_INDEX].key;
116
- setCurrentSelectedKey(firstChildrenKey);
117
- onMenuChange(firstChildrenKey);
118
- }, [flattenMenuByMenuKey, openKey, onMenuChange]);
119
75
  /**
120
76
  * 子级菜单项或者一级菜单点击
121
77
  */
@@ -133,7 +89,7 @@ function Menu(props) {
133
89
  }, /*#__PURE__*/_react.default.createElement(_menu.default, {
134
90
  selectedKeys: [currentSelectedKey],
135
91
  expandIcon: renderExpandIcon,
136
- openKeys: [openKey],
92
+ openKeys: parentKeys,
137
93
  mode: "inline",
138
94
  style: {
139
95
  padding: '0 12px'
@@ -143,10 +99,7 @@ function Menu(props) {
143
99
  return /*#__PURE__*/_react.default.createElement(_menu.default.SubMenu, {
144
100
  key: item.key,
145
101
  icon: item.icon,
146
- title: item.title,
147
- onTitleClick: function onTitleClick() {
148
- return onSupMenuClick(item.key);
149
- }
102
+ title: item.title
150
103
  }, item.children.map(function (subItem) {
151
104
  return /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
152
105
  onClick: function onClick() {
@@ -169,6 +122,7 @@ function Menu(props) {
169
122
 
170
123
  function getFlattenMenuByKey(menuList) {
171
124
  var flattenMenuByMenuKey = {};
125
+ var parentKeys = [];
172
126
  var menuKeys = []; // 存储所有的key 用来判断是否有重复的key
173
127
 
174
128
  var menuInvalidFlag = true; // 传入的menuList是否有效
@@ -188,6 +142,7 @@ function getFlattenMenuByKey(menuList) {
188
142
  });
189
143
  menuKeys.push(childItem.key);
190
144
  });
145
+ parentKeys.push(item.key);
191
146
  } else {
192
147
  flattenMenuByMenuKey[item.key] = _objectSpread(_objectSpread({}, item), {}, {
193
148
  openKey: ''
@@ -197,7 +152,8 @@ function getFlattenMenuByKey(menuList) {
197
152
  });
198
153
  return {
199
154
  menuInvalidFlag: menuInvalidFlag,
200
- flattenMenuByMenuKey: flattenMenuByMenuKey
155
+ flattenMenuByMenuKey: flattenMenuByMenuKey,
156
+ parentKeys: parentKeys
201
157
  };
202
158
  }
203
159
 
package/lib/Navigator/style/index.less CHANGED
@@ -3,37 +3,35 @@
3
3
 
4
4
  /* stylelint-disable */
5
5
 
6
- @ald-prefix:ant;
6
+ @ald-prefix: ant;
7
7
 
8
8
  .supTitle() {
9
- font-family: 'PingFang SC';
10
- font-style: normal;
11
9
  font-weight: 500;
12
10
  font-size: 14px;
11
+ font-style: normal;
13
12
  line-height: 20px;
14
13
  }
15
14
 
16
15
  .subTitle() {
17
- font-family: 'PingFang SC';
18
- font-style: normal;
19
16
  font-weight: 400;
20
17
  font-size: 12px;
18
+ font-style: normal;
21
19
  line-height: 16px;
22
20
  }
23
21
 
24
22
  .ald-nav {
25
- width: 216px;
26
- background-color: @BBG15;
27
- height: 100%;
28
23
  display: flex;
29
24
  flex-direction: column;
25
+ width: 216px;
26
+ height: 100%;
30
27
  overflow: hidden;
28
+ background-color: @BBG15;
31
29
  user-select: none;
32
30
 
33
31
  &-logo {
32
+ width: 100%;
34
33
  height: 72px;
35
34
  padding: 24px;
36
- width: 100%;
37
35
 
38
36
  &-able-click {
39
37
  cursor: pointer;
@@ -46,30 +44,30 @@
46
44
 
47
45
  &-menu {
48
46
  flex: 1;
49
- overflow-y: auto;
50
47
  overflow-x: hidden;
48
+ overflow-y: auto;
51
49
 
52
50
  .ant-menu-sub.ant-menu-inline {
53
51
  background-color: unset;
54
52
  }
55
53
 
56
54
  .anticon.ant-menu-item-icon {
57
- font-size: 20px !important;
58
55
  width: 20px !important;
59
56
  height: 20px !important;
57
+ font-size: 20px !important;
60
58
  }
61
59
 
62
60
  &::-webkit-scrollbar-thumb {
63
- border-radius: 6px;
64
61
  background: @ND90;
65
- border: 3px solid transparent;
66
62
  background-clip: padding-box;
63
+ border: 3px solid transparent;
64
+ border-radius: 6px;
67
65
  }
68
66
 
69
67
  &::-webkit-scrollbar {
70
- background-color: transparent;
71
68
  width: 12px;
72
69
  height: 12px;
70
+ background-color: transparent;
73
71
  }
74
72
 
75
73
  .ant-menu-inline,
@@ -79,11 +77,10 @@
79
77
  }
80
78
 
81
79
  .ant-menu {
82
- background: @BBG15;
83
80
  color: @ND0;
81
+ background: @BBG15;
84
82
 
85
83
  &.ant-menu-root {
86
-
87
84
  .ant-menu-item {
88
85
  margin-bottom: 16px;
89
86
  padding: 0 12px !important;
@@ -98,16 +95,16 @@
98
95
  .ant-menu-item {
99
96
  margin-top: 4px;
100
97
  margin-bottom: 0;
101
- padding: 0 12px 0 44px!important;
98
+ padding: 0 12px 0 44px !important;
102
99
  }
103
100
  }
104
101
 
105
102
  // 只有子级菜单相关颜色操作
106
103
  .ant-menu-item-only-child {
107
- color: @ND30;
108
104
  height: 32px !important;
109
- line-height: 32px !important;
105
+ color: @ND30;
110
106
  font-size: 12px !important;
107
+ line-height: 32px !important;
111
108
  .subTitle();
112
109
 
113
110
  &:hover {
@@ -124,28 +121,28 @@
124
121
  }
125
122
 
126
123
  .ant-menu-item {
127
- height: 40px;
128
124
  width: 100%;
125
+ height: 40px;
129
126
  border-radius: 8px;
130
127
  .supTitle();
131
128
 
132
129
  ::before {
133
- width: 4px;
134
- content: '';
135
- background: transparent;
136
- height: 100%;
137
130
  position: absolute;
138
131
  top: 0;
139
132
  left: -12px;
133
+ width: 4px;
134
+ height: 100%;
135
+ background: transparent;
140
136
  border-radius: 1px;
141
- transition: all .3s;
137
+ transition: all 0.3s;
138
+ content: '';
142
139
  }
143
140
 
144
141
  &-selected {
145
- background-color: @BBG20 !important;
146
- color: @ND0;
147
142
  position: relative;
148
143
  overflow: unset;
144
+ color: @ND0;
145
+ background-color: @BBG20 !important;
149
146
 
150
147
  ::before {
151
148
  background: @B40;
@@ -161,13 +158,14 @@
161
158
  margin-bottom: 16px;
162
159
 
163
160
  .ant-menu-submenu-title {
164
- padding: 0 12px !important;
165
161
  height: 40px;
162
+ padding: 0 12px !important;
166
163
  line-height: 40px;
167
164
  .supTitle();
168
165
 
169
166
  &:hover {
170
167
  color: @ND0;
168
+ cursor: default;
171
169
  }
172
170
  }
173
171
 
@@ -221,8 +219,8 @@
221
219
  height: 72px;
222
220
 
223
221
  &-wrap {
224
- color: @ND0;
225
222
  height: 100%;
223
+ color: @ND0;
226
224
  }
227
225
  }
228
- }
226
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aloudata/aloudata-design",
3
- "version": "0.2.6",
3
+ "version": "0.2.7",
4
4
  "scripts": {
5
5
  "start": "dumi dev",
6
6
  "docs:build": "dumi build",