@aloudata/aloudata-design 2.0.5 → 2.2.0
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/dist/Checkbox/type.d.ts +1 -0
- package/dist/DataPreviewTable/components/Body/index.js +1 -0
- package/dist/DataPreviewTable/style/index.less +4 -0
- package/dist/Dropdown/index.d.ts +1 -1
- package/dist/Dropdown/index.js +58 -18
- package/dist/Dropdown/style/index.less +12 -101
- package/dist/IconButton/index.js +1 -2
- package/dist/InputSearch/index.d.ts +12 -0
- package/dist/InputSearch/index.js +67 -0
- package/dist/InputSearch/style/index.d.ts +2 -0
- package/dist/InputSearch/style/index.js +2 -0
- package/dist/InputSearch/style/index.less +60 -0
- package/dist/Menu/index.d.ts +36 -20
- package/dist/Menu/index.js +110 -49
- package/dist/Menu/style/index.less +116 -73
- package/dist/RenameInput/index.d.ts +15 -0
- package/dist/RenameInput/index.js +98 -0
- package/dist/RenameInput/style/index.d.ts +2 -0
- package/dist/RenameInput/style/index.js +2 -0
- package/dist/RenameInput/style/index.less +54 -0
- package/dist/Select/index.js +0 -3
- package/dist/User/index.d.ts +9 -0
- package/dist/User/index.js +26 -0
- package/dist/User/style/index.d.ts +2 -0
- package/dist/User/style/index.js +2 -0
- package/dist/User/style/index.less +37 -0
- package/dist/ald.min.css +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +3 -0
- package/dist/index.less +3 -0
- package/dist/notification/index.d.ts +8 -4
- package/package.json +2 -1
- package/dist/Menu/Divider.d.ts +0 -4
- package/dist/Menu/Divider.js +0 -6
- package/dist/Menu/MenuItem.d.ts +0 -30
- package/dist/Menu/MenuItem.js +0 -6
- package/dist/Menu/SubMenu.d.ts +0 -26
- package/dist/Menu/SubMenu.js +0 -18
package/dist/Checkbox/type.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CheckboxChangeEvent, CheckboxGroupProps, CheckboxProps } from 'antd/lib/checkbox';
|
|
2
2
|
import { CheckboxOptionType, CheckboxValueType } from 'antd/lib/checkbox/Group';
|
|
3
3
|
export type TSize = 'middle' | 'small';
|
|
4
|
+
export type { CheckboxChangeEvent, CheckboxGroupProps, CheckboxProps };
|
|
4
5
|
export declare enum EDirection {
|
|
5
6
|
VERTICAL = "vertical",
|
|
6
7
|
HORIZONTAL = "horizontal"
|
|
@@ -36,6 +36,7 @@ function Body(props) {
|
|
|
36
36
|
var render = columns[columnIndex].render;
|
|
37
37
|
if (render) {
|
|
38
38
|
return /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: "ald-data-preview-body-cell ald-data-preview-body-cell-custom",
|
|
39
40
|
style: style,
|
|
40
41
|
key: columnIndex
|
|
41
42
|
}, render(cell));
|
package/dist/Dropdown/index.d.ts
CHANGED
package/dist/Dropdown/index.js
CHANGED
|
@@ -1,18 +1,24 @@
|
|
|
1
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
|
-
var _excluded = ["children", "open", "overlayClassName", "menu", "align", "placement", "trigger"];
|
|
2
|
+
var _excluded = ["children", "open", "overlayClassName", "menu", "align", "placement", "trigger", "dropdownRender", "destroyPopupOnHide", "onOpenChange"];
|
|
3
3
|
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); }
|
|
4
4
|
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; }
|
|
5
5
|
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; }
|
|
6
6
|
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; }
|
|
7
7
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
8
8
|
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); }
|
|
9
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
10
|
+
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."); }
|
|
11
|
+
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); }
|
|
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
|
+
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; } }
|
|
14
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
9
15
|
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
16
|
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
17
|
import { Dropdown as AntdDropdown } from 'antd';
|
|
12
18
|
import getPlacements from 'antd/lib/_util/placements';
|
|
13
19
|
import classNames from 'classnames';
|
|
14
|
-
import React, { useMemo } from 'react';
|
|
15
|
-
import
|
|
20
|
+
import React, { useCallback, useMemo, useState } from 'react';
|
|
21
|
+
import Menu from "../Menu";
|
|
16
22
|
import DropdownButton from "./Button";
|
|
17
23
|
export default function Dropdown(props) {
|
|
18
24
|
var children = props.children,
|
|
@@ -23,20 +29,13 @@ export default function Dropdown(props) {
|
|
|
23
29
|
placement = props.placement,
|
|
24
30
|
_props$trigger = props.trigger,
|
|
25
31
|
trigger = _props$trigger === void 0 ? ['click'] : _props$trigger,
|
|
32
|
+
dropdownRender = props.dropdownRender,
|
|
33
|
+
_props$destroyPopupOn = props.destroyPopupOnHide,
|
|
34
|
+
destroyPopupOnHide = _props$destroyPopupOn === void 0 ? true : _props$destroyPopupOn,
|
|
35
|
+
onOpenChange = props.onOpenChange,
|
|
26
36
|
otherProps = _objectWithoutProperties(props, _excluded);
|
|
27
37
|
// antd 根据 open 字段是否存在来判断 open 是否是可控模式
|
|
28
38
|
var antdDropdownProps = otherProps;
|
|
29
|
-
if (open !== undefined) {
|
|
30
|
-
antdDropdownProps.open = open;
|
|
31
|
-
}
|
|
32
|
-
var menus = useMemo(function () {
|
|
33
|
-
if (menu) {
|
|
34
|
-
return _objectSpread(_objectSpread({}, menu), {}, {
|
|
35
|
-
items: addPopupOffset(menu.items)
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
return undefined;
|
|
39
|
-
}, [menu]);
|
|
40
39
|
var defaultAlign = useMemo(function () {
|
|
41
40
|
var _getPlacements;
|
|
42
41
|
if (align) {
|
|
@@ -45,17 +44,58 @@ export default function Dropdown(props) {
|
|
|
45
44
|
return {
|
|
46
45
|
offset: ((_getPlacements = getPlacements({
|
|
47
46
|
arrowWidth: 0,
|
|
48
|
-
offset:
|
|
47
|
+
offset: 4,
|
|
49
48
|
borderRadius: 0
|
|
50
|
-
})[placement || 'bottomLeft']) === null || _getPlacements === void 0 ? void 0 : _getPlacements['offset']) || [0,
|
|
49
|
+
})[placement || 'bottomLeft']) === null || _getPlacements === void 0 ? void 0 : _getPlacements['offset']) || [0, 4]
|
|
51
50
|
};
|
|
52
51
|
}, [align, placement]);
|
|
52
|
+
var isOpenControlled = open !== undefined;
|
|
53
|
+
var _useState = useState(open),
|
|
54
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
55
|
+
dropdownOpen = _useState2[0],
|
|
56
|
+
setDropdownOpen = _useState2[1];
|
|
57
|
+
var onMenuItemClick = useCallback(function (info) {
|
|
58
|
+
if (menu !== null && menu !== void 0 && menu.onClick) {
|
|
59
|
+
menu.onClick(info);
|
|
60
|
+
}
|
|
61
|
+
if (!isOpenControlled) {
|
|
62
|
+
setDropdownOpen(false);
|
|
63
|
+
}
|
|
64
|
+
}, [isOpenControlled, menu]);
|
|
65
|
+
var onDropdownOpenChange = useCallback(function (isDropdownOpen) {
|
|
66
|
+
if (onOpenChange) {
|
|
67
|
+
onOpenChange(isDropdownOpen);
|
|
68
|
+
}
|
|
69
|
+
if (!isOpenControlled) {
|
|
70
|
+
setDropdownOpen(isDropdownOpen);
|
|
71
|
+
}
|
|
72
|
+
}, [isOpenControlled, onOpenChange]);
|
|
73
|
+
var menuInstance = useMemo(function () {
|
|
74
|
+
var menuProps = _objectSpread(_objectSpread({}, menu), {}, {
|
|
75
|
+
items: (menu === null || menu === void 0 ? void 0 : menu.items) || []
|
|
76
|
+
});
|
|
77
|
+
return /*#__PURE__*/React.createElement(Menu, _extends({}, menuProps, {
|
|
78
|
+
onClick: onMenuItemClick
|
|
79
|
+
}));
|
|
80
|
+
}, [menu, onMenuItemClick]);
|
|
81
|
+
var menuRender = useCallback(function () {
|
|
82
|
+
if (dropdownRender) {
|
|
83
|
+
return dropdownRender(menuInstance);
|
|
84
|
+
}
|
|
85
|
+
if (menu) {
|
|
86
|
+
return menuInstance;
|
|
87
|
+
}
|
|
88
|
+
return undefined;
|
|
89
|
+
}, [menuInstance, dropdownRender, menu]);
|
|
53
90
|
return /*#__PURE__*/React.createElement(AntdDropdown, _extends({
|
|
54
91
|
overlayClassName: classNames('ald-dropdown-overlay', overlayClassName),
|
|
55
|
-
menu: menus,
|
|
56
92
|
align: defaultAlign,
|
|
57
93
|
trigger: trigger,
|
|
58
|
-
placement: placement
|
|
94
|
+
placement: placement,
|
|
95
|
+
dropdownRender: menuRender,
|
|
96
|
+
destroyPopupOnHide: destroyPopupOnHide,
|
|
97
|
+
open: isOpenControlled ? open : dropdownOpen,
|
|
98
|
+
onOpenChange: onDropdownOpenChange
|
|
59
99
|
}, antdDropdownProps), children);
|
|
60
100
|
}
|
|
61
101
|
Dropdown.Button = DropdownButton;
|
|
@@ -1,109 +1,20 @@
|
|
|
1
1
|
@import '../../style/index.less';
|
|
2
2
|
@import '../../Button/style/index.less';
|
|
3
|
-
|
|
4
|
-
.dropdown-menu-content {
|
|
5
|
-
background: var(--alias-colors-bg-skeleton-subtler, #fff);
|
|
6
|
-
border-radius: 0;
|
|
7
|
-
box-shadow: none;
|
|
8
|
-
padding: 0;
|
|
3
|
+
@import '../../Menu/style/index.less';
|
|
9
4
|
|
|
10
|
-
|
|
11
|
-
.
|
|
12
|
-
background-color: var(--alias-colors-border-subtle, #f3f4f6);
|
|
13
|
-
margin: 0;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
|
17
|
-
background-color: unset;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.ant-dropdown-menu-item-danger {
|
|
21
|
-
color: #b91c1c !important;
|
|
22
|
-
|
|
23
|
-
&:hover {
|
|
24
|
-
background: var(
|
|
25
|
-
--alias-colors-bg-interaction-hover,
|
|
26
|
-
rgba(0, 0, 0, 0.05)
|
|
27
|
-
) !important;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
5
|
+
.ald-dropdown-overlay {
|
|
6
|
+
.menuContainerStyle();
|
|
30
7
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
align-items: center;
|
|
35
|
-
justify-content: space-between;
|
|
36
|
-
padding: var(--alias-padding-100, 8px) var(--alias-padding-150, 12px);
|
|
37
|
-
border-radius: 0;
|
|
38
|
-
color: var(--alias-colors-text-default, #1f2937);
|
|
39
|
-
font-size: 14px;
|
|
40
|
-
font-style: normal;
|
|
41
|
-
font-weight: 400;
|
|
42
|
-
line-height: 20px;
|
|
43
|
-
min-width: 140px;
|
|
44
|
-
gap: var(--alias-spacing-50, 4px);
|
|
45
|
-
|
|
46
|
-
&:hover {
|
|
47
|
-
background-color: unset;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.ant-dropdown-menu-item-icon {
|
|
51
|
-
font-size: 20px;
|
|
52
|
-
margin: 0;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.ant-dropdown-menu-title-content {
|
|
56
|
-
text-overflow: ellipsis;
|
|
57
|
-
overflow: hidden;
|
|
58
|
-
white-space: nowrap;
|
|
59
|
-
}
|
|
8
|
+
padding: 4px 0 !important;
|
|
9
|
+
animation-duration: 0s !important;
|
|
10
|
+
max-width: none;
|
|
60
11
|
|
|
61
|
-
|
|
62
|
-
|
|
12
|
+
.ald-menu {
|
|
13
|
+
& > .szh-menu {
|
|
14
|
+
border: 0;
|
|
15
|
+
padding-top: 0;
|
|
16
|
+
padding-bottom: 0;
|
|
17
|
+
box-shadow: none;
|
|
63
18
|
}
|
|
64
19
|
}
|
|
65
|
-
|
|
66
|
-
.ant-dropdown-menu-item.ant-dropdown-menu-item-disabled {
|
|
67
|
-
cursor: default;
|
|
68
|
-
color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
|
|
69
|
-
|
|
70
|
-
&:hover {
|
|
71
|
-
background-color: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.ant-dropdown-menu-item:hover,
|
|
76
|
-
.ant-dropdown-menu-submenu:hover,
|
|
77
|
-
.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-active {
|
|
78
|
-
background-color: var(
|
|
79
|
-
--alias-colors-bg-interaction-hover,
|
|
80
|
-
rgba(0, 0, 0, 0.05)
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
// 容器样式
|
|
86
|
-
.dropdown-wrap {
|
|
87
|
-
border: 1px solid var(--alias-colors-border-strong, #d1d5db);
|
|
88
|
-
border-radius: var(--alias-radius-75, 6px);
|
|
89
|
-
box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
|
|
90
|
-
overflow: hidden;
|
|
91
|
-
padding: 4px 0;
|
|
92
|
-
background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
|
|
93
|
-
}
|
|
94
|
-
// dropdown的容器
|
|
95
|
-
.ant-dropdown.ant-dropdown {
|
|
96
|
-
.dropdown-wrap();
|
|
97
|
-
// dropdown内的ul
|
|
98
|
-
.ant-dropdown-menu-root.ant-dropdown-menu {
|
|
99
|
-
.dropdown-menu-content();
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
// 子级menu菜单
|
|
103
|
-
.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-popup {
|
|
104
|
-
.dropdown-wrap();
|
|
105
|
-
// dropdown 二级菜单中的ul
|
|
106
|
-
.ant-dropdown-menu-sub {
|
|
107
|
-
.dropdown-menu-content();
|
|
108
|
-
}
|
|
109
20
|
}
|
package/dist/IconButton/index.js
CHANGED
|
@@ -59,8 +59,7 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
59
59
|
id = props.id,
|
|
60
60
|
_props$trigger = props.trigger,
|
|
61
61
|
trigger = _props$trigger === void 0 ? ['click'] : _props$trigger,
|
|
62
|
-
|
|
63
|
-
showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
|
|
62
|
+
showArrow = props.showArrow,
|
|
64
63
|
_props$mode2 = props.mode,
|
|
65
64
|
mode = _props$mode2 === void 0 ? 'light' : _props$mode2,
|
|
66
65
|
restDropdownProps = _objectWithoutProperties(props, _excluded);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export default function InputSearch(props: IProps): React.JSX.Element;
|
|
3
|
+
interface IProps {
|
|
4
|
+
onSearch: (value: string) => void;
|
|
5
|
+
className?: string;
|
|
6
|
+
debounce?: boolean;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
size?: 'small' | 'middle' | 'large';
|
|
9
|
+
initWidth?: number;
|
|
10
|
+
defaultValue?: string;
|
|
11
|
+
}
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
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 _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; }
|
|
3
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
4
|
+
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); }
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
+
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."); }
|
|
7
|
+
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); }
|
|
8
|
+
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; }
|
|
9
|
+
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; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
import { useDebounceFn } from 'ahooks';
|
|
12
|
+
import classnames from 'classnames';
|
|
13
|
+
import _ from 'lodash';
|
|
14
|
+
import React, { useCallback, useState } from 'react';
|
|
15
|
+
import { SearchLine } from "../Icon";
|
|
16
|
+
import Input from "../Input";
|
|
17
|
+
var DEFAULT_WIDTH = 68;
|
|
18
|
+
export default function InputSearch(props) {
|
|
19
|
+
var onSearch = props.onSearch,
|
|
20
|
+
className = props.className,
|
|
21
|
+
_props$debounce = props.debounce,
|
|
22
|
+
debounce = _props$debounce === void 0 ? true : _props$debounce,
|
|
23
|
+
placeholder = props.placeholder,
|
|
24
|
+
_props$size = props.size,
|
|
25
|
+
size = _props$size === void 0 ? 'small' : _props$size,
|
|
26
|
+
_props$initWidth = props.initWidth,
|
|
27
|
+
initWidth = _props$initWidth === void 0 ? DEFAULT_WIDTH : _props$initWidth,
|
|
28
|
+
defaultValue = props.defaultValue;
|
|
29
|
+
var _useState = useState(defaultValue || ''),
|
|
30
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
31
|
+
searchValue = _useState2[0],
|
|
32
|
+
setSearchValue = _useState2[1];
|
|
33
|
+
var onPressEnter = useCallback(function (e) {
|
|
34
|
+
onSearch(_.trim(e.target.value));
|
|
35
|
+
}, [onSearch]);
|
|
36
|
+
var DEFAULT_DEBOUNCE_TIME = 500;
|
|
37
|
+
var _useDebounceFn = useDebounceFn(function (val) {
|
|
38
|
+
onSearch(val);
|
|
39
|
+
}, {
|
|
40
|
+
wait: DEFAULT_DEBOUNCE_TIME
|
|
41
|
+
}),
|
|
42
|
+
debounceSearch = _useDebounceFn.run;
|
|
43
|
+
var onChangeValue = useCallback(function (e) {
|
|
44
|
+
var newValue = e.target.value;
|
|
45
|
+
if (debounce) {
|
|
46
|
+
debounceSearch(newValue);
|
|
47
|
+
}
|
|
48
|
+
setSearchValue(newValue);
|
|
49
|
+
}, [debounceSearch, debounce]);
|
|
50
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
51
|
+
className: 'ald-input-search',
|
|
52
|
+
style: {
|
|
53
|
+
'--init-width': initWidth + 'px'
|
|
54
|
+
}
|
|
55
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
56
|
+
className: classnames(className, _defineProperty({}, 'input-search-has-value', searchValue.length !== 0)),
|
|
57
|
+
size: size,
|
|
58
|
+
onChange: onChangeValue,
|
|
59
|
+
onPressEnter: onPressEnter,
|
|
60
|
+
prefix: /*#__PURE__*/React.createElement(SearchLine, {
|
|
61
|
+
size: 16
|
|
62
|
+
}),
|
|
63
|
+
placeholder: placeholder || '搜索',
|
|
64
|
+
allowClear: true,
|
|
65
|
+
defaultValue: defaultValue
|
|
66
|
+
}));
|
|
67
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
@import '../../style/index.less';
|
|
2
|
+
@import '../../Input/style/index.less';
|
|
3
|
+
|
|
4
|
+
.ald-input-search {
|
|
5
|
+
.ald-input.ald-input.ant-input-affix-wrapper {
|
|
6
|
+
width: var(--init-width) !important;
|
|
7
|
+
background-color: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
|
|
10
|
+
input {
|
|
11
|
+
background-color: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ant-input-suffix {
|
|
15
|
+
display: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
::placeholder {
|
|
19
|
+
color: var(--alias-colors-text-default, #1f2937);
|
|
20
|
+
font-size: 12px;
|
|
21
|
+
font-style: normal;
|
|
22
|
+
font-weight: 500;
|
|
23
|
+
background-color: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
|
|
24
|
+
line-height: 16px; /* 133.333% */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&.ant-input-affix-wrapper-focused,
|
|
28
|
+
&:hover,
|
|
29
|
+
&.input-search-has-value {
|
|
30
|
+
width: 200px !important;
|
|
31
|
+
transition: all 0.2s ease 0.1s !important;
|
|
32
|
+
background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
|
|
33
|
+
|
|
34
|
+
input {
|
|
35
|
+
background-color: #fff;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
::placeholder {
|
|
39
|
+
color: var(--alias-colors-text-subtlest, #9ca3af);
|
|
40
|
+
background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
|
|
41
|
+
font-size: 12px;
|
|
42
|
+
font-style: normal;
|
|
43
|
+
font-weight: 400;
|
|
44
|
+
line-height: 16px; /* 133.333% */
|
|
45
|
+
transition: all 0.2s ease 0.1s !important;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.ant-input-affix-wrapper-focused,
|
|
50
|
+
&.inputSearchHasValue {
|
|
51
|
+
.ant-input-suffix {
|
|
52
|
+
display: inline-block;
|
|
53
|
+
|
|
54
|
+
.ant-input-clear-icon {
|
|
55
|
+
font-size: 16px !important;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
package/dist/Menu/index.d.ts
CHANGED
|
@@ -1,24 +1,40 @@
|
|
|
1
|
-
import { MenuProps } from 'antd';
|
|
2
|
-
import { ItemType as antdItemType } from 'antd/lib/menu/hooks/useItems';
|
|
3
|
-
import type { MenuClickEventHandler } from 'rc-menu/lib/interface';
|
|
4
1
|
import React from 'react';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* @description 点击 MenuItem 调用此函数
|
|
9
|
-
* @type Function
|
|
10
|
-
* @default -
|
|
11
|
-
*/
|
|
12
|
-
onClick?: MenuClickEventHandler;
|
|
2
|
+
export interface MenuProps {
|
|
3
|
+
onClick?: (info: MenuInfo) => void;
|
|
13
4
|
className?: string;
|
|
14
|
-
|
|
5
|
+
items: MenuItemType[];
|
|
6
|
+
selectedKeys?: string[];
|
|
15
7
|
}
|
|
16
|
-
export
|
|
17
|
-
export
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
8
|
+
export default function Menu(props: MenuProps): React.JSX.Element;
|
|
9
|
+
export type MenuItemType = ItemType | MenuDividerType | SubMenuType | MenuHeaderType;
|
|
10
|
+
export interface ItemType {
|
|
11
|
+
key: string;
|
|
12
|
+
label: React.ReactNode;
|
|
13
|
+
icon?: React.ReactNode;
|
|
14
|
+
onClick?: (info: MenuInfo) => void;
|
|
15
|
+
danger?: boolean;
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
className?: string;
|
|
18
|
+
}
|
|
19
|
+
export interface MenuDividerType {
|
|
20
|
+
key?: string;
|
|
21
|
+
type: 'divider';
|
|
22
|
+
}
|
|
23
|
+
export interface MenuHeaderType {
|
|
24
|
+
key?: string;
|
|
25
|
+
type: 'header';
|
|
26
|
+
label: string;
|
|
27
|
+
}
|
|
28
|
+
export interface SubMenuType {
|
|
29
|
+
children: MenuItemType[];
|
|
30
|
+
key: string;
|
|
31
|
+
label: React.ReactNode;
|
|
32
|
+
icon?: React.ReactNode;
|
|
33
|
+
popupClassName?: string;
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
}
|
|
36
|
+
export interface MenuInfo {
|
|
37
|
+
key: string;
|
|
38
|
+
keyPath: string[];
|
|
39
|
+
domEvent: MouseEvent | KeyboardEvent;
|
|
23
40
|
}
|
|
24
|
-
export default Menu;
|