@hi-ui/layout 4.0.0 → 5.0.0-canary.1

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 (7) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/lib/cjs/SearchTrigger.js +58 -5
  3. package/lib/cjs/Sider.js +10 -7
  4. package/lib/esm/SearchTrigger.js +57 -5
  5. package/lib/esm/Sider.js +10 -7
  6. package/lib/types/SearchTrigger.d.ts +2 -0
  7. package/package.json +9 -7
package/CHANGELOG.md ADDED
@@ -0,0 +1,20 @@
1
+ # @hi-ui/layout
2
+
3
+ ## 5.0.0-canary.1
4
+
5
+ ### Patch Changes
6
+
7
+ - ad5d98fff: style(layout): Sider 组件默认宽度改为 180px (5.0)
8
+
9
+ ## 4.1.0-canary.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 7839d421f: feat(layout): 新增 Layout 组件 (5.0)
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies [7bc790804]
18
+ - Updated dependencies [44c862279]
19
+ - @hi-ui/popper@5.0.0-canary.5
20
+ - @hi-ui/menu@5.0.0-canary.5
package/lib/cjs/SearchTrigger.js CHANGED
@@ -19,12 +19,15 @@ var classname = require('@hi-ui/classname');
19
19
  var env = require('@hi-ui/env');
20
20
  require('./packages/icons/lib/esm/styles/index.scss.js');
21
21
  var searchOutlined = require('./packages/icons/lib/esm/components/common/search-outlined.js');
22
+ var Popper = require('@hi-ui/popper');
23
+ var menu = require('@hi-ui/menu');
22
24
  function _interopDefaultCompat(e) {
23
25
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
24
26
  'default': e
25
27
  };
26
28
  }
27
29
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
30
+ var Popper__default = /*#__PURE__*/_interopDefaultCompat(Popper);
28
31
  var SEARCH_TRIGGER_PREFIX = classname.getPrefixCls('search-trigger');
29
32
  /**
30
33
  * 搜索触发器组件
@@ -39,15 +42,65 @@ var SearchTrigger = /*#__PURE__*/React.forwardRef(function (_a, ref) {
39
42
  mini = _a.mini,
40
43
  _a$placeholder = _a.placeholder,
41
44
  placeholder = _a$placeholder === void 0 ? '搜索' : _a$placeholder,
42
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "mini", "placeholder"]);
45
+ data = _a.data,
46
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "mini", "placeholder", "data"]);
47
+ var _React$useState = React__default["default"].useState(false),
48
+ visible = _React$useState[0],
49
+ setVisible = _React$useState[1];
50
+ var _React$useState2 = React__default["default"].useState(''),
51
+ value = _React$useState2[0],
52
+ setValue = _React$useState2[1];
53
+ var innerRef = React__default["default"].useRef(null);
54
+ var searchRef = React__default["default"].useRef(null);
43
55
  var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
44
- return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
45
- ref: ref,
56
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
57
+ ref: innerRef,
46
58
  role: role,
47
59
  className: cls
48
- }, rest), /*#__PURE__*/React__default["default"].createElement(searchOutlined.SearchOutlined, null), !mini && /*#__PURE__*/React__default["default"].createElement("span", {
60
+ }, rest, {
61
+ onClick: function onClick() {
62
+ return setVisible(!visible);
63
+ }
64
+ }), /*#__PURE__*/React__default["default"].createElement(searchOutlined.SearchOutlined, null), !mini && /*#__PURE__*/React__default["default"].createElement("span", {
49
65
  className: prefixCls + "__placeholder"
50
- }, placeholder));
66
+ }, placeholder)), /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
67
+ visible: visible,
68
+ attachEl: innerRef.current,
69
+ gutterGap: -32,
70
+ unmountOnClose: false,
71
+ onOutsideClick: function onOutsideClick() {
72
+ setVisible(false);
73
+ },
74
+ onEntered: function onEntered() {
75
+ var _a, _b;
76
+ if (visible) {
77
+ (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
78
+ if (value) {
79
+ (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.show();
80
+ }
81
+ }
82
+ }
83
+ }, /*#__PURE__*/React__default["default"].createElement(menu.MenuSearch, {
84
+ innerRef: searchRef,
85
+ width: 360,
86
+ value: value,
87
+ onChange: setValue,
88
+ data: data,
89
+ placeholder: "\u641C\u7D22",
90
+ onSelect: function onSelect(id, item) {
91
+ console.log('select', id, item);
92
+ setVisible(false);
93
+ },
94
+ onClear: function onClear() {
95
+ setValue('');
96
+ },
97
+ onClose: function onClose() {
98
+ setVisible(false);
99
+ },
100
+ onEsc: function onEsc() {
101
+ setVisible(false);
102
+ }
103
+ })));
51
104
  });
52
105
  if (env.__DEV__) {
53
106
  SearchTrigger.displayName = 'SearchTrigger';
package/lib/cjs/Sider.js CHANGED
@@ -26,6 +26,9 @@ function _interopDefaultCompat(e) {
26
26
  }
27
27
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
28
28
  var SIDER_PREFIX = classname.getPrefixCls('sider');
29
+ var SIDER_WIDTH = 180;
30
+ var SIDER_WIDTH_MIN = 68;
31
+ var SIDER_WIDTH_MIN_COLLAPSED = 150;
29
32
  /**
30
33
  * 侧边栏组件
31
34
  */
@@ -43,24 +46,24 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
43
46
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(false, collapsedProp, onCollapse),
44
47
  collapsed = _useUncontrolledState[0],
45
48
  setCollapsed = _useUncontrolledState[1];
46
- var _useState = React.useState(collapsedProp ? 68 : 200),
49
+ var _useState = React.useState(collapsedProp ? SIDER_WIDTH_MIN : SIDER_WIDTH),
47
50
  width = _useState[0],
48
51
  setWidth = _useState[1];
49
52
  var handleResize = function handleResize(evt, options) {
50
53
  var _a;
51
54
  var width = (_a = options === null || options === void 0 ? void 0 : options.size) === null || _a === void 0 ? void 0 : _a.width;
52
- if (!collapsed && width < 150) {
53
- width = 68;
55
+ if (!collapsed && width < SIDER_WIDTH_MIN_COLLAPSED) {
56
+ width = SIDER_WIDTH_MIN;
54
57
  setCollapsed(true);
55
58
  }
56
- if (collapsed && width > 68) {
57
- width = 200;
59
+ if (collapsed && width > SIDER_WIDTH_MIN) {
60
+ width = SIDER_WIDTH;
58
61
  setTimeout(function () {
59
62
  setCollapsed(false);
60
63
  }, 300);
61
64
  }
62
- if (width < 68) {
63
- width = 68;
65
+ if (width < SIDER_WIDTH_MIN) {
66
+ width = SIDER_WIDTH_MIN;
64
67
  }
65
68
  setWidth(width);
66
69
  };
package/lib/esm/SearchTrigger.js CHANGED
@@ -13,6 +13,8 @@ import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
14
  import './packages/icons/lib/esm/styles/index.scss.js';
15
15
  import { SearchOutlined } from './packages/icons/lib/esm/components/common/search-outlined.js';
16
+ import Popper from '@hi-ui/popper';
17
+ import { MenuSearch } from '@hi-ui/menu';
16
18
  var SEARCH_TRIGGER_PREFIX = getPrefixCls('search-trigger');
17
19
  /**
18
20
  * 搜索触发器组件
@@ -27,15 +29,65 @@ var SearchTrigger = /*#__PURE__*/forwardRef(function (_a, ref) {
27
29
  mini = _a.mini,
28
30
  _a$placeholder = _a.placeholder,
29
31
  placeholder = _a$placeholder === void 0 ? '搜索' : _a$placeholder,
30
- rest = __rest(_a, ["prefixCls", "role", "className", "mini", "placeholder"]);
32
+ data = _a.data,
33
+ rest = __rest(_a, ["prefixCls", "role", "className", "mini", "placeholder", "data"]);
34
+ var _React$useState = React.useState(false),
35
+ visible = _React$useState[0],
36
+ setVisible = _React$useState[1];
37
+ var _React$useState2 = React.useState(''),
38
+ value = _React$useState2[0],
39
+ setValue = _React$useState2[1];
40
+ var innerRef = React.useRef(null);
41
+ var searchRef = React.useRef(null);
31
42
  var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
32
- return /*#__PURE__*/React.createElement("div", Object.assign({
33
- ref: ref,
43
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
44
+ ref: innerRef,
34
45
  role: role,
35
46
  className: cls
36
- }, rest), /*#__PURE__*/React.createElement(SearchOutlined, null), !mini && /*#__PURE__*/React.createElement("span", {
47
+ }, rest, {
48
+ onClick: function onClick() {
49
+ return setVisible(!visible);
50
+ }
51
+ }), /*#__PURE__*/React.createElement(SearchOutlined, null), !mini && /*#__PURE__*/React.createElement("span", {
37
52
  className: prefixCls + "__placeholder"
38
- }, placeholder));
53
+ }, placeholder)), /*#__PURE__*/React.createElement(Popper, {
54
+ visible: visible,
55
+ attachEl: innerRef.current,
56
+ gutterGap: -32,
57
+ unmountOnClose: false,
58
+ onOutsideClick: function onOutsideClick() {
59
+ setVisible(false);
60
+ },
61
+ onEntered: function onEntered() {
62
+ var _a, _b;
63
+ if (visible) {
64
+ (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
65
+ if (value) {
66
+ (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.show();
67
+ }
68
+ }
69
+ }
70
+ }, /*#__PURE__*/React.createElement(MenuSearch, {
71
+ innerRef: searchRef,
72
+ width: 360,
73
+ value: value,
74
+ onChange: setValue,
75
+ data: data,
76
+ placeholder: "\u641C\u7D22",
77
+ onSelect: function onSelect(id, item) {
78
+ console.log('select', id, item);
79
+ setVisible(false);
80
+ },
81
+ onClear: function onClear() {
82
+ setValue('');
83
+ },
84
+ onClose: function onClose() {
85
+ setVisible(false);
86
+ },
87
+ onEsc: function onEsc() {
88
+ setVisible(false);
89
+ }
90
+ })));
39
91
  });
40
92
  if (__DEV__) {
41
93
  SearchTrigger.displayName = 'SearchTrigger';
package/lib/esm/Sider.js CHANGED
@@ -14,6 +14,9 @@ import { __DEV__ } from '@hi-ui/env';
14
14
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
15
15
  import { Resizable } from './node_modules/react-resizable/index.js';
16
16
  var SIDER_PREFIX = getPrefixCls('sider');
17
+ var SIDER_WIDTH = 180;
18
+ var SIDER_WIDTH_MIN = 68;
19
+ var SIDER_WIDTH_MIN_COLLAPSED = 150;
17
20
  /**
18
21
  * 侧边栏组件
19
22
  */
@@ -31,24 +34,24 @@ var Sider = /*#__PURE__*/forwardRef(function (_a, ref) {
31
34
  var _useUncontrolledState = useUncontrolledState(false, collapsedProp, onCollapse),
32
35
  collapsed = _useUncontrolledState[0],
33
36
  setCollapsed = _useUncontrolledState[1];
34
- var _useState = useState(collapsedProp ? 68 : 200),
37
+ var _useState = useState(collapsedProp ? SIDER_WIDTH_MIN : SIDER_WIDTH),
35
38
  width = _useState[0],
36
39
  setWidth = _useState[1];
37
40
  var handleResize = function handleResize(evt, options) {
38
41
  var _a;
39
42
  var width = (_a = options === null || options === void 0 ? void 0 : options.size) === null || _a === void 0 ? void 0 : _a.width;
40
- if (!collapsed && width < 150) {
41
- width = 68;
43
+ if (!collapsed && width < SIDER_WIDTH_MIN_COLLAPSED) {
44
+ width = SIDER_WIDTH_MIN;
42
45
  setCollapsed(true);
43
46
  }
44
- if (collapsed && width > 68) {
45
- width = 200;
47
+ if (collapsed && width > SIDER_WIDTH_MIN) {
48
+ width = SIDER_WIDTH;
46
49
  setTimeout(function () {
47
50
  setCollapsed(false);
48
51
  }, 300);
49
52
  }
50
- if (width < 68) {
51
- width = 68;
53
+ if (width < SIDER_WIDTH_MIN) {
54
+ width = SIDER_WIDTH_MIN;
52
55
  }
53
56
  setWidth(width);
54
57
  };
package/lib/types/SearchTrigger.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
+ import { MenuDataItem } from '@hi-ui/menu';
3
4
  /**
4
5
  * 搜索触发器组件
5
6
  */
@@ -7,4 +8,5 @@ export declare const SearchTrigger: React.ForwardRefExoticComponent<SearchTrigge
7
8
  export interface SearchTriggerProps extends HiBaseHTMLProps<'div'> {
8
9
  mini?: boolean;
9
10
  placeholder?: string;
11
+ data?: MenuDataItem[];
10
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/layout",
3
- "version": "4.0.0",
3
+ "version": "5.0.0-canary.1",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -43,18 +43,20 @@
43
43
  "url": "https://github.com/XiaoMi/hiui/issues"
44
44
  },
45
45
  "dependencies": {
46
- "@hi-ui/classname": "^4.0.0",
47
- "@hi-ui/env": "^4.0.0",
48
- "@hi-ui/use-uncontrolled-state": "^4.0.4"
46
+ "@hi-ui/classname": "^5.0.0-canary.2",
47
+ "@hi-ui/env": "^5.0.0-canary.2",
48
+ "@hi-ui/menu": "^5.0.0-canary.5",
49
+ "@hi-ui/popper": "^5.0.0-canary.5",
50
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-canary.2"
49
51
  },
50
52
  "peerDependencies": {
51
- "@hi-ui/core": ">=4.0.0",
53
+ "@hi-ui/core": ">=5.0.0-canary.2",
52
54
  "react": ">=16.8.6",
53
55
  "react-dom": ">=16.8.6"
54
56
  },
55
57
  "devDependencies": {
56
- "@hi-ui/core": "^4.0.0",
57
- "@hi-ui/core-css": "^4.0.0",
58
+ "@hi-ui/core": "^5.0.0-canary.2",
59
+ "@hi-ui/core-css": "^5.0.0-canary.6",
58
60
  "react": "^17.0.1",
59
61
  "react-dom": "^17.0.1"
60
62
  }