@qsxy/element-plus-react 1.0.2 → 1.0.3
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/Alert/Alert.d.ts +7 -0
- package/dist/Alert/Alert.js +98 -0
- package/dist/Alert/index.d.ts +2 -0
- package/dist/Alert/index.js +1 -0
- package/dist/Alert/typings.d.ts +45 -0
- package/dist/Alert/typings.js +1 -0
- package/dist/Card/Card.js +5 -3
- package/dist/Cascader/useCascader.d.ts +0 -14
- package/dist/Cascader/useCascader.js +33 -32
- package/dist/Checkbox/Checkbox.js +3 -2
- package/dist/ConfigProvider/ConfigProvider.js +2 -24
- package/dist/ConfigProvider/ConfigProviderContext.js +1 -1
- package/dist/ConfigProvider/typings.d.ts +1 -1
- package/dist/Container/Main.d.ts +1 -1
- package/dist/Container/typings.d.ts +1 -1
- package/dist/Dialog/Dialog.js +5 -12
- package/dist/Input/Input.js +68 -43
- package/dist/Input/TextArea.js +1 -1
- package/dist/Input/typings.d.ts +42 -1
- package/dist/Input/utils.d.ts +1 -0
- package/dist/Input/utils.js +5 -1
- package/dist/InputNumber/InputNumber.js +351 -141
- package/dist/InputNumber/typings.d.ts +15 -1
- package/dist/Loading/Loading.js +5 -2
- package/dist/Menu/Menu.js +25 -1
- package/dist/Menu/MenuItem.js +4 -2
- package/dist/Menu/SubMenu.js +2 -2
- package/dist/Menu/SubMenuCollapseTransition.js +14 -9
- package/dist/Menu/typings.d.ts +2 -1
- package/dist/Message/Message.js +51 -23
- package/dist/Message/index.js +8 -10
- package/dist/Message/typings.d.ts +8 -5
- package/dist/MessageBox/MessageBox.js +52 -30
- package/dist/MessageBox/index.d.ts +2 -1
- package/dist/MessageBox/index.js +4 -2
- package/dist/MessageBox/typings.d.ts +3 -0
- package/dist/Notification/Notification.js +26 -19
- package/dist/Select/SelectContext.d.ts +2 -1
- package/dist/Select/SelectContext.js +2 -1
- package/dist/Select/SelectCore.js +13 -7
- package/dist/Select/SelectDropdown.js +23 -15
- package/dist/Select/index.d.ts +1 -1
- package/dist/Select/typings.d.ts +13 -9
- package/dist/Select/useSelect.d.ts +13 -10
- package/dist/Select/useSelect.js +34 -26
- package/dist/Space/Space.d.ts +4 -0
- package/dist/Space/Space.js +128 -0
- package/dist/Space/SpaceItem.d.ts +7 -0
- package/dist/Space/SpaceItem.js +14 -0
- package/dist/Space/index.d.ts +3 -0
- package/dist/Space/index.js +2 -0
- package/dist/Space/typings.d.ts +26 -0
- package/dist/Space/typings.js +1 -0
- package/dist/Space/useSpace.d.ts +7 -0
- package/dist/Space/useSpace.js +104 -0
- package/dist/Statistic/Statistic.d.ts +4 -0
- package/dist/Statistic/Statistic.js +92 -0
- package/dist/Statistic/index.d.ts +2 -0
- package/dist/Statistic/index.js +1 -0
- package/dist/Statistic/typings.d.ts +28 -0
- package/dist/Statistic/typings.js +1 -0
- package/dist/Switch/Switch.js +2 -2
- package/dist/Table/Table.js +3 -0
- package/dist/Table/typings.d.ts +2 -0
- package/dist/Tag/typings.d.ts +1 -1
- package/dist/Text/Text.d.ts +4 -0
- package/dist/Text/Text.js +84 -0
- package/dist/Text/index.d.ts +2 -0
- package/dist/Text/index.js +1 -0
- package/dist/Text/typings.d.ts +15 -0
- package/dist/Text/typings.js +1 -0
- package/dist/Tree/CollapseTransition.d.ts +7 -0
- package/dist/Tree/CollapseTransition.js +60 -0
- package/dist/Tree/Tree.d.ts +3 -140
- package/dist/Tree/Tree.js +350 -77
- package/dist/Tree/TreeContext.d.ts +9 -0
- package/dist/Tree/TreeContext.js +14 -0
- package/dist/Tree/TreeNode.d.ts +5 -3
- package/dist/Tree/TreeNode.js +321 -331
- package/dist/Tree/TreeNodeContent.d.ts +9 -0
- package/dist/Tree/TreeNodeContent.js +22 -0
- package/dist/Tree/index.d.ts +3 -8
- package/dist/Tree/index.js +1 -4
- package/dist/Tree/model/node.d.ts +62 -0
- package/dist/Tree/model/node.js +601 -0
- package/dist/Tree/model/tree-store.d.ts +52 -0
- package/dist/Tree/model/tree-store.js +510 -0
- package/dist/Tree/model/useDragNode.d.ts +30 -0
- package/dist/Tree/model/useDragNode.js +293 -0
- package/dist/Tree/model/useKeydown.d.ts +0 -0
- package/dist/Tree/model/useKeydown.js +104 -0
- package/dist/Tree/model/useNodeExpandEventBroadcast.d.ts +15 -0
- package/dist/Tree/model/useNodeExpandEventBroadcast.js +54 -0
- package/dist/Tree/model/util.d.ts +7 -0
- package/dist/Tree/model/util.js +24 -0
- package/dist/Tree/typings.d.ts +225 -114
- package/dist/TreeSelect/TreeSelect.d.ts +2 -10
- package/dist/TreeSelect/TreeSelect.js +90 -566
- package/dist/TreeSelect/TreeSelectOption.d.ts +6 -0
- package/dist/TreeSelect/TreeSelectOption.js +62 -0
- package/dist/TreeSelect/cacheOptions.d.ts +9 -0
- package/dist/TreeSelect/cacheOptions.js +22 -0
- package/dist/TreeSelect/index.d.ts +0 -1
- package/dist/TreeSelect/typings.d.ts +11 -63
- package/dist/TreeSelect/useSelect.d.ts +125 -0
- package/dist/TreeSelect/useSelect.js +104 -0
- package/dist/TreeSelect/useTree.d.ts +130 -0
- package/dist/TreeSelect/useTree.js +285 -0
- package/dist/TreeSelect/utils.d.ts +10 -0
- package/dist/TreeSelect/utils.js +38 -0
- package/dist/Upload/UploadContent.js +2 -0
- package/dist/Upload/ajax.js +3 -0
- package/dist/Upload/typings.d.ts +4 -0
- package/dist/Util/aria.js +12 -12
- package/dist/Util/base.d.ts +5 -0
- package/dist/Util/base.js +140 -1
- package/dist/config/Constants.d.ts +3 -0
- package/dist/config/Constants.js +8 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/popperPropsUtils.js +1 -1
- package/dist/hooks/treePropsUtils.d.ts +3 -3
- package/dist/hooks/treePropsUtils.js +2 -2
- package/dist/hooks/useConfigProvider.d.ts +27 -0
- package/dist/hooks/useConfigProvider.js +78 -0
- package/dist/hooks/useResizeObserver.js +6 -6
- package/dist/index.css +1 -1
- package/dist/index.d.ts +18 -11
- package/dist/index.js +11 -5
- package/package.json +1 -1
- package/theme-chalk/alert.scss +115 -0
- package/theme-chalk/aside.scss +8 -8
- package/theme-chalk/button-group.scss +80 -80
- package/theme-chalk/button.scss +304 -304
- package/theme-chalk/calendar/date-table.scss +164 -164
- package/theme-chalk/checkbox.scss +34 -0
- package/theme-chalk/color/index.scss +20 -20
- package/theme-chalk/common/transition.scss +142 -142
- package/theme-chalk/container.scss +14 -14
- package/theme-chalk/dark/css-vars.scss +39 -39
- package/theme-chalk/dark/var.scss +225 -225
- package/theme-chalk/date-picker.scss +12 -12
- package/theme-chalk/drawer.scss +1 -0
- package/theme-chalk/footer.scss +12 -12
- package/theme-chalk/header.scss +12 -12
- package/theme-chalk/index.scss +4 -0
- package/theme-chalk/input/input-range.scss +2 -1
- package/theme-chalk/input/input.scss +439 -424
- package/theme-chalk/input-number.bak +172 -0
- package/theme-chalk/input-number.scss +192 -172
- package/theme-chalk/link.scss +87 -87
- package/theme-chalk/main.scss +14 -14
- package/theme-chalk/menu.scss +353 -353
- package/theme-chalk/message.scss +104 -178
- package/theme-chalk/mixins/_button.scss +224 -224
- package/theme-chalk/mixins/_col.scss +33 -33
- package/theme-chalk/mixins/_var.scss +67 -67
- package/theme-chalk/mixins/config.scss +5 -5
- package/theme-chalk/mixins/function.scss +99 -99
- package/theme-chalk/mixins/mixins.scss +240 -240
- package/theme-chalk/mixins/utils.scss +39 -39
- package/theme-chalk/notification.bak +156 -0
- package/theme-chalk/notification.scss +109 -156
- package/theme-chalk/popper.scss +104 -104
- package/theme-chalk/radio-button.scss +169 -169
- package/theme-chalk/select/index.scss +278 -272
- package/theme-chalk/space.scss +20 -0
- package/theme-chalk/statistic.scss +35 -0
- package/theme-chalk/switch.scss +300 -300
- package/theme-chalk/tag.scss +181 -181
- package/theme-chalk/text.scss +48 -0
- package/theme-chalk/transition.scss +34 -4
- package/theme-chalk/tree-select.scss +41 -25
- package/theme-chalk/tree.scss +136 -0
- package/theme-chalk/var.scss +83 -83
- package/dist/Input/Input.1.d.ts +0 -16
- package/dist/Input/Input.1.js +0 -376
- package/dist/Tree/DirectoryTree.d.ts +0 -15
- package/dist/Tree/DirectoryTree.js +0 -183
- package/dist/Tree/DropIndicator.d.ts +0 -8
- package/dist/Tree/DropIndicator.js +0 -34
- package/dist/Tree/Indent.d.ts +0 -9
- package/dist/Tree/Indent.js +0 -25
- package/dist/Tree/MotionTreeNode.d.ts +0 -14
- package/dist/Tree/MotionTreeNode.js +0 -125
- package/dist/Tree/NodeList.d.ts +0 -50
- package/dist/Tree/NodeList.js +0 -301
- package/dist/Tree/RCTree.d.ts +0 -248
- package/dist/Tree/RCTree.js +0 -1216
- package/dist/Tree/contextTypes.d.ts +0 -69
- package/dist/Tree/contextTypes.js +0 -9
- package/dist/Tree/typings.tsx--bak +0 -245
- package/dist/Tree/useUnmount.d.ts +0 -5
- package/dist/Tree/useUnmount.js +0 -34
- package/dist/Tree/util.d.ts +0 -51
- package/dist/Tree/util.js +0 -303
- package/dist/Tree/utils/conductUtil.d.ts +0 -17
- package/dist/Tree/utils/conductUtil.js +0 -209
- package/dist/Tree/utils/dictUtil.d.ts +0 -13
- package/dist/Tree/utils/dictUtil.js +0 -75
- package/dist/Tree/utils/diffUtil.d.ts +0 -7
- package/dist/Tree/utils/diffUtil.js +0 -48
- package/dist/Tree/utils/dropIndicator.d.ts +0 -11
- package/dist/Tree/utils/dropIndicator.js +0 -36
- package/dist/Tree/utils/iconUtil.d.ts +0 -5
- package/dist/Tree/utils/iconUtil.js +0 -62
- package/dist/Tree/utils/keyUtil.d.ts +0 -2
- package/dist/Tree/utils/keyUtil.js +0 -3
- package/dist/Tree/utils/motion.d.ts +0 -10
- package/dist/Tree/utils/motion.js +0 -54
- package/dist/Tree/utils/pickAttrs.d.ts +0 -11
- package/dist/Tree/utils/pickAttrs.js +0 -51
- package/dist/Tree/utils/treeUtil.d.ts +0 -86
- package/dist/Tree/utils/treeUtil.js +0 -364
- package/dist/TreeSelect/Utils.d.ts +0 -3
- package/dist/TreeSelect/Utils.js +0 -20
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
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 classNames from 'classnames';
|
|
14
|
+
import { isArray } from 'lodash';
|
|
15
|
+
import React, { forwardRef, memo, useCallback, useMemo } from 'react';
|
|
16
|
+
import { mergeDefaultProps } from "../Util";
|
|
17
|
+
import SpaceItem from "./SpaceItem";
|
|
18
|
+
import { useSpace } from "./useSpace";
|
|
19
|
+
var Space = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
|
|
20
|
+
props = mergeDefaultProps({
|
|
21
|
+
direction: 'horizontal',
|
|
22
|
+
prefixCls: 'el-space',
|
|
23
|
+
alignment: 'center',
|
|
24
|
+
justify: '',
|
|
25
|
+
size: 'small',
|
|
26
|
+
fillRatio: 100
|
|
27
|
+
}, props);
|
|
28
|
+
var _props = props,
|
|
29
|
+
direction = _props.direction,
|
|
30
|
+
className = _props.className,
|
|
31
|
+
style = _props.style,
|
|
32
|
+
prefixCls = _props.prefixCls,
|
|
33
|
+
spacer = _props.spacer,
|
|
34
|
+
children = _props.children;
|
|
35
|
+
var _useSpace = useSpace(props),
|
|
36
|
+
classes = _useSpace.classes,
|
|
37
|
+
containerStyle = _useSpace.containerStyle,
|
|
38
|
+
itemStyle = _useSpace.itemStyle;
|
|
39
|
+
|
|
40
|
+
// Extract children and handle fragments
|
|
41
|
+
var extractChildren = useCallback(function (childrenArray) {
|
|
42
|
+
var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
43
|
+
var extractedChildren = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
44
|
+
childrenArray.forEach(function (child, loopKey) {
|
|
45
|
+
if ( /*#__PURE__*/React.isValidElement(child) && child.type === React.Fragment) {
|
|
46
|
+
var _props2;
|
|
47
|
+
// Handle React Fragment
|
|
48
|
+
var fragmentChildren = (_props2 = child.props) === null || _props2 === void 0 ? void 0 : _props2.children;
|
|
49
|
+
if (isArray(fragmentChildren)) {
|
|
50
|
+
fragmentChildren.forEach(function (nested, key) {
|
|
51
|
+
if ( /*#__PURE__*/React.isValidElement(nested) && nested.type === React.Fragment) {
|
|
52
|
+
var _props3;
|
|
53
|
+
var nestedChildren = (_props3 = nested.props) === null || _props3 === void 0 ? void 0 : _props3.children;
|
|
54
|
+
if (isArray(nestedChildren)) {
|
|
55
|
+
extractChildren(nestedChildren, "".concat(parentKey).concat(key, "-"), extractedChildren);
|
|
56
|
+
} else {
|
|
57
|
+
if ( /*#__PURE__*/React.isValidElement(nested) && nested.type === React.Fragment) {
|
|
58
|
+
extractedChildren.push(nested);
|
|
59
|
+
} else {
|
|
60
|
+
extractedChildren.push( /*#__PURE__*/React.createElement(SpaceItem, {
|
|
61
|
+
key: "nested-".concat(parentKey).concat(key),
|
|
62
|
+
style: itemStyle,
|
|
63
|
+
prefixCls: prefixCls
|
|
64
|
+
}, nested));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
} else {
|
|
68
|
+
extractedChildren.push( /*#__PURE__*/React.createElement(SpaceItem, {
|
|
69
|
+
key: "nested-".concat(parentKey).concat(key),
|
|
70
|
+
style: itemStyle,
|
|
71
|
+
prefixCls: prefixCls
|
|
72
|
+
}, nested));
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
} else if ( /*#__PURE__*/React.isValidElement(child)) {
|
|
77
|
+
// Handle valid React elements
|
|
78
|
+
extractedChildren.push( /*#__PURE__*/React.createElement(SpaceItem, {
|
|
79
|
+
key: "LoopKey".concat(parentKey).concat(loopKey),
|
|
80
|
+
style: itemStyle,
|
|
81
|
+
prefixCls: prefixCls
|
|
82
|
+
}, child));
|
|
83
|
+
}
|
|
84
|
+
// else if (child !== null && child !== undefined && child !== false) {
|
|
85
|
+
// // Handle text nodes and other valid content
|
|
86
|
+
// extractedChildren.push(
|
|
87
|
+
// <SpaceItem key={`LoopKey${parentKey}${loopKey}`} style={itemStyle} prefixCls={prefixCls}>
|
|
88
|
+
// {child}
|
|
89
|
+
// </SpaceItem>,
|
|
90
|
+
// );
|
|
91
|
+
// }
|
|
92
|
+
});
|
|
93
|
+
return extractedChildren;
|
|
94
|
+
}, [itemStyle, prefixCls]);
|
|
95
|
+
var childrenArray = React.Children.toArray(children);
|
|
96
|
+
var extractedChildren = useMemo(function () {
|
|
97
|
+
return extractChildren(childrenArray);
|
|
98
|
+
}, [childrenArray, extractChildren]);
|
|
99
|
+
|
|
100
|
+
// Process children
|
|
101
|
+
if (childrenArray.length === 0) {
|
|
102
|
+
return null;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Add spacers if provided
|
|
106
|
+
if (spacer) {
|
|
107
|
+
var len = extractedChildren.length - 1;
|
|
108
|
+
extractedChildren = extractedChildren.reduce(function (acc, child, idx) {
|
|
109
|
+
var childrenNodes = [].concat(_toConsumableArray(acc), [child]);
|
|
110
|
+
if (idx !== len) {
|
|
111
|
+
childrenNodes.push( /*#__PURE__*/React.createElement("span", {
|
|
112
|
+
key: "spacer-".concat(idx),
|
|
113
|
+
style: _objectSpread(_objectSpread({}, itemStyle), direction === 'vertical' ? {
|
|
114
|
+
width: '100%'
|
|
115
|
+
} : {})
|
|
116
|
+
}, /*#__PURE__*/React.isValidElement(spacer) ? spacer : String(spacer)));
|
|
117
|
+
}
|
|
118
|
+
return childrenNodes;
|
|
119
|
+
}, []);
|
|
120
|
+
}
|
|
121
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
122
|
+
ref: ref,
|
|
123
|
+
className: classNames(classes, className),
|
|
124
|
+
style: _objectSpread(_objectSpread({}, containerStyle), style)
|
|
125
|
+
}, extractedChildren);
|
|
126
|
+
}));
|
|
127
|
+
Space.displayName = 'ElSpace';
|
|
128
|
+
export default Space;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { useClassNames } from "../hooks";
|
|
3
|
+
var SpaceItem = function SpaceItem(props) {
|
|
4
|
+
var ns = useClassNames('space');
|
|
5
|
+
var classes = useMemo(function () {
|
|
6
|
+
return "".concat(props.prefixCls || ns.b(), "__item");
|
|
7
|
+
}, [props.prefixCls, ns]);
|
|
8
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
9
|
+
className: classes,
|
|
10
|
+
style: props.style
|
|
11
|
+
}, props.children);
|
|
12
|
+
};
|
|
13
|
+
SpaceItem.displayName = 'ElSpaceItem';
|
|
14
|
+
export default SpaceItem;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
import { BaseProps, NativeProps } from '../types/common';
|
|
3
|
+
export interface SpaceProps extends BaseProps, NativeProps {
|
|
4
|
+
/** 排列的方向 */
|
|
5
|
+
direction?: 'horizontal' | 'vertical';
|
|
6
|
+
/** 纵轴对齐方式 */
|
|
7
|
+
alignment?: CSSProperties['alignItems'];
|
|
8
|
+
/** 横轴对齐方式 */
|
|
9
|
+
justify?: CSSProperties['justifyContent'];
|
|
10
|
+
/** 间隔大小 */
|
|
11
|
+
size?: 'small' | 'medium' | 'large' | number | [number, number];
|
|
12
|
+
/** 是否自动折行 */
|
|
13
|
+
wrap?: boolean;
|
|
14
|
+
/** 子元素是否填充父容器 */
|
|
15
|
+
fill?: boolean;
|
|
16
|
+
/** 填充父容器的比例 */
|
|
17
|
+
fillRatio?: number;
|
|
18
|
+
/** 间隔符 */
|
|
19
|
+
spacer?: string | number | React.ReactNode;
|
|
20
|
+
/** 给 space-items 的类名前缀 */
|
|
21
|
+
prefixCls?: string;
|
|
22
|
+
}
|
|
23
|
+
export interface SpaceItemProps extends BaseProps, NativeProps {
|
|
24
|
+
/** 给 space-item 的类名前缀 */
|
|
25
|
+
prefixCls?: string;
|
|
26
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
+
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."); }
|
|
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 _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; }
|
|
11
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import classNames from 'classnames';
|
|
14
|
+
import { isArray, isNumber } from 'lodash';
|
|
15
|
+
import React, { useMemo } from 'react';
|
|
16
|
+
import { useClassNames } from "../hooks";
|
|
17
|
+
var SIZE_MAP = {
|
|
18
|
+
small: 8,
|
|
19
|
+
default: 12,
|
|
20
|
+
large: 16
|
|
21
|
+
};
|
|
22
|
+
export var useSpace = function useSpace(props) {
|
|
23
|
+
var ns = useClassNames('space');
|
|
24
|
+
var direction = props.direction,
|
|
25
|
+
alignment = props.alignment,
|
|
26
|
+
justify = props.justify,
|
|
27
|
+
wrap = props.wrap,
|
|
28
|
+
fill = props.fill,
|
|
29
|
+
fillRatio = props.fillRatio,
|
|
30
|
+
size = props.size;
|
|
31
|
+
var _React$useState = React.useState(0),
|
|
32
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
33
|
+
horizontalSize = _React$useState2[0],
|
|
34
|
+
setHorizontalSize = _React$useState2[1];
|
|
35
|
+
var _React$useState3 = React.useState(0),
|
|
36
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
37
|
+
verticalSize = _React$useState4[0],
|
|
38
|
+
setVerticalSize = _React$useState4[1];
|
|
39
|
+
|
|
40
|
+
// Container styles
|
|
41
|
+
var containerStyle = useMemo(function () {
|
|
42
|
+
var wrapKls = wrap || fill ? {
|
|
43
|
+
flexWrap: 'wrap'
|
|
44
|
+
} : {};
|
|
45
|
+
var alignmentKls = {
|
|
46
|
+
alignItems: alignment,
|
|
47
|
+
justifyContent: justify
|
|
48
|
+
};
|
|
49
|
+
var gap = {
|
|
50
|
+
rowGap: "".concat(verticalSize, "px"),
|
|
51
|
+
columnGap: "".concat(horizontalSize, "px")
|
|
52
|
+
};
|
|
53
|
+
return _objectSpread(_objectSpread(_objectSpread({}, wrapKls), alignmentKls), gap);
|
|
54
|
+
}, [wrap, fill, alignment, justify, verticalSize, horizontalSize]);
|
|
55
|
+
|
|
56
|
+
// Item styles
|
|
57
|
+
var itemStyle = useMemo(function () {
|
|
58
|
+
return fill ? {
|
|
59
|
+
flexGrow: 1,
|
|
60
|
+
minWidth: "".concat(fillRatio, "%")
|
|
61
|
+
} : {};
|
|
62
|
+
}, [fill, fillRatio]);
|
|
63
|
+
|
|
64
|
+
// Classes
|
|
65
|
+
var classes = useMemo(function () {
|
|
66
|
+
return classNames(ns.b(), ns.m(props.direction), props.className);
|
|
67
|
+
}, [ns, props.direction, props.className]);
|
|
68
|
+
React.useEffect(function () {
|
|
69
|
+
// when the specified size have been given
|
|
70
|
+
if (isArray(size)) {
|
|
71
|
+
var _size = _slicedToArray(size, 2),
|
|
72
|
+
_size$ = _size[0],
|
|
73
|
+
h = _size$ === void 0 ? 0 : _size$,
|
|
74
|
+
_size$2 = _size[1],
|
|
75
|
+
v = _size$2 === void 0 ? 0 : _size$2;
|
|
76
|
+
setHorizontalSize(h);
|
|
77
|
+
setVerticalSize(v);
|
|
78
|
+
} else {
|
|
79
|
+
var val;
|
|
80
|
+
if (isNumber(size)) {
|
|
81
|
+
val = size;
|
|
82
|
+
} else {
|
|
83
|
+
val = SIZE_MAP[size || 'small'] || SIZE_MAP.small;
|
|
84
|
+
}
|
|
85
|
+
if ((wrap || fill) && direction === 'horizontal') {
|
|
86
|
+
setHorizontalSize(val);
|
|
87
|
+
setVerticalSize(val);
|
|
88
|
+
} else {
|
|
89
|
+
if (direction === 'horizontal') {
|
|
90
|
+
setHorizontalSize(val);
|
|
91
|
+
setVerticalSize(0);
|
|
92
|
+
} else {
|
|
93
|
+
setVerticalSize(val);
|
|
94
|
+
setHorizontalSize(0);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}, [direction, fill, props, size, wrap]);
|
|
99
|
+
return {
|
|
100
|
+
classes: classes,
|
|
101
|
+
containerStyle: containerStyle,
|
|
102
|
+
itemStyle: itemStyle
|
|
103
|
+
};
|
|
104
|
+
};
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
2
|
+
var _excluded = ["title", "prefix", "suffix", "value", "formatter", "precision", "decimalSeparator", "groupSeparator", "valueStyle", "className", "style"];
|
|
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
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
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; }
|
|
12
|
+
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; }
|
|
13
|
+
import classNames from 'classnames';
|
|
14
|
+
import { isFunction, isNumber } from 'lodash';
|
|
15
|
+
import React, { forwardRef, memo, useMemo, useRef } from 'react';
|
|
16
|
+
import { mergeDefaultProps } from "../Util";
|
|
17
|
+
import { useClassNames } from "../hooks";
|
|
18
|
+
var Statistic = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
|
|
19
|
+
props = mergeDefaultProps({
|
|
20
|
+
value: 0,
|
|
21
|
+
decimalSeparator: '.',
|
|
22
|
+
groupSeparator: ',',
|
|
23
|
+
precision: 0
|
|
24
|
+
}, props);
|
|
25
|
+
var _props = props,
|
|
26
|
+
title = _props.title,
|
|
27
|
+
prefix = _props.prefix,
|
|
28
|
+
suffix = _props.suffix,
|
|
29
|
+
value = _props.value,
|
|
30
|
+
formatter = _props.formatter,
|
|
31
|
+
precision = _props.precision,
|
|
32
|
+
decimalSeparator = _props.decimalSeparator,
|
|
33
|
+
groupSeparator = _props.groupSeparator,
|
|
34
|
+
valueStyle = _props.valueStyle,
|
|
35
|
+
className = _props.className,
|
|
36
|
+
style = _props.style,
|
|
37
|
+
rest = _objectWithoutProperties(_props, _excluded);
|
|
38
|
+
var _useClassNames = useClassNames('statistic'),
|
|
39
|
+
b = _useClassNames.b,
|
|
40
|
+
e = _useClassNames.e;
|
|
41
|
+
var containerRef = useRef(null);
|
|
42
|
+
var displayValue = useMemo(function () {
|
|
43
|
+
if (isFunction(formatter)) {
|
|
44
|
+
return formatter(value);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Handle non-numeric values
|
|
48
|
+
if (!isNumber(value) || Number.isNaN(value)) {
|
|
49
|
+
return value;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Format numeric value
|
|
53
|
+
var _String$split = String(value).split('.'),
|
|
54
|
+
_String$split2 = _slicedToArray(_String$split, 2),
|
|
55
|
+
integer = _String$split2[0],
|
|
56
|
+
_String$split2$ = _String$split2[1],
|
|
57
|
+
decimal = _String$split2$ === void 0 ? '' : _String$split2$;
|
|
58
|
+
|
|
59
|
+
// Handle decimal precision
|
|
60
|
+
decimal = decimal.padEnd(precision, '0').slice(0, precision > 0 ? precision : 0);
|
|
61
|
+
|
|
62
|
+
// Add group separators
|
|
63
|
+
integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
|
|
64
|
+
|
|
65
|
+
// Join with decimal separator if needed
|
|
66
|
+
return [integer, decimal].join(decimal ? decimalSeparator : '');
|
|
67
|
+
}, [value, formatter, precision, decimalSeparator, groupSeparator]);
|
|
68
|
+
React.useImperativeHandle(ref, function () {
|
|
69
|
+
return {
|
|
70
|
+
ref: containerRef,
|
|
71
|
+
displayValue: displayValue
|
|
72
|
+
};
|
|
73
|
+
});
|
|
74
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
75
|
+
ref: containerRef,
|
|
76
|
+
className: classNames(b(), className),
|
|
77
|
+
style: style
|
|
78
|
+
}, rest), title && /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["head"])))
|
|
80
|
+
}, title), /*#__PURE__*/React.createElement("div", {
|
|
81
|
+
className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["content"])))
|
|
82
|
+
}, prefix && /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["prefix"])))
|
|
84
|
+
}, /*#__PURE__*/React.createElement("span", null, prefix)), /*#__PURE__*/React.createElement("span", {
|
|
85
|
+
className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["number"]))),
|
|
86
|
+
style: valueStyle
|
|
87
|
+
}, displayValue), suffix && /*#__PURE__*/React.createElement("div", {
|
|
88
|
+
className: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["suffix"])))
|
|
89
|
+
}, /*#__PURE__*/React.createElement("span", null, suffix))));
|
|
90
|
+
}));
|
|
91
|
+
Statistic.displayName = 'ElStatistic';
|
|
92
|
+
export default Statistic;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Statistic } from "./Statistic";
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode, RefObject } from 'react';
|
|
2
|
+
import { BaseProps, NativeProps } from '../types/common';
|
|
3
|
+
export interface StatisticProps extends NativeProps<'--el-statistic-title-font-weight' | '--el-statistic-title-font-size' | '--el-statistic-title-color' | '--el-statistic-content-font-weight' | '--el-statistic-content-font-size' | '--el-statistic-content-color'>, BaseProps {
|
|
4
|
+
/** 数字内容 */
|
|
5
|
+
value?: number | string;
|
|
6
|
+
/** 小数点符号 */
|
|
7
|
+
decimalSeparator?: string;
|
|
8
|
+
/** 自定义数字格式化 */
|
|
9
|
+
formatter?: (value: number | string) => ReactNode;
|
|
10
|
+
/** 千分位标识符 */
|
|
11
|
+
groupSeparator?: string;
|
|
12
|
+
/** 数字精度 */
|
|
13
|
+
precision?: number;
|
|
14
|
+
/** 前缀内容 */
|
|
15
|
+
prefix?: string | ReactNode;
|
|
16
|
+
/** 后缀内容 */
|
|
17
|
+
suffix?: string | ReactNode;
|
|
18
|
+
/** 数字标题 */
|
|
19
|
+
title?: string | ReactNode;
|
|
20
|
+
/** 数字样式 */
|
|
21
|
+
valueStyle?: CSSProperties;
|
|
22
|
+
}
|
|
23
|
+
export interface StatisticRef {
|
|
24
|
+
/** 数字统计 html 元素 */
|
|
25
|
+
ref: RefObject<HTMLDivElement>;
|
|
26
|
+
/** 当前显示值 */
|
|
27
|
+
displayValue: ReactNode;
|
|
28
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/Switch/Switch.js
CHANGED
|
@@ -189,7 +189,7 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
189
189
|
}
|
|
190
190
|
}, inlinePrompt && /*#__PURE__*/React.createElement("div", {
|
|
191
191
|
className: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["inner"])))
|
|
192
|
-
},
|
|
192
|
+
}, active ? function () {
|
|
193
193
|
if (activeText) {
|
|
194
194
|
return /*#__PURE__*/React.createElement("span", {
|
|
195
195
|
className: "is-text"
|
|
@@ -204,7 +204,7 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
204
204
|
return activeIcon;
|
|
205
205
|
}
|
|
206
206
|
}
|
|
207
|
-
}() : null, active ? function () {
|
|
207
|
+
}() : null, !active ? function () {
|
|
208
208
|
if (inactiveText) {
|
|
209
209
|
return /*#__PURE__*/React.createElement("span", {
|
|
210
210
|
className: "is-text"
|
package/dist/Table/Table.js
CHANGED
|
@@ -106,6 +106,9 @@ function InternalTable(props, ref) {
|
|
|
106
106
|
useImperativeHandle(ref, function () {
|
|
107
107
|
return {
|
|
108
108
|
refs: refs,
|
|
109
|
+
get columns() {
|
|
110
|
+
return columns;
|
|
111
|
+
},
|
|
109
112
|
clearSelection: clearSelection,
|
|
110
113
|
getSelectionRows: getSelectionRows,
|
|
111
114
|
toggleRowSelection: toggleRowSelection,
|
package/dist/Table/typings.d.ts
CHANGED
package/dist/Tag/typings.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BaseProps, NativeProps, TooltipBaseProps, TypeAttributes } from '../types/common';
|
|
3
|
-
export interface TagProps extends Omit<TooltipBaseProps<HTMLSpanElement>, 'onClick'>, BaseProps, NativeProps {
|
|
3
|
+
export interface TagProps extends Omit<TooltipBaseProps<HTMLSpanElement>, 'onClick'>, BaseProps, NativeProps<'--el-icon-size' | '--el-tag-bg-color' | '--el-tag-border-color' | '--el-tag-hover-color' | '--el-tag-text-color' | '--el-tag-font-size' | '--el-tag-border-radius' | '--el-tag-border-radius-rounded'> {
|
|
4
4
|
/** 类型 */
|
|
5
5
|
type?: TypeAttributes.Appearance;
|
|
6
6
|
/** 是否可关闭 */
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import classNames from 'classnames';
|
|
8
|
+
import React, { memo, useEffect, useMemo, useRef } from 'react';
|
|
9
|
+
import { isUndefined, mergeDefaultProps } from "../Util";
|
|
10
|
+
import { useClassNames, useSize } from "../hooks";
|
|
11
|
+
var Text = /*#__PURE__*/memo(function (props) {
|
|
12
|
+
props = mergeDefaultProps({
|
|
13
|
+
truncated: false,
|
|
14
|
+
tag: 'span'
|
|
15
|
+
}, props);
|
|
16
|
+
var _props = props,
|
|
17
|
+
type = _props.type,
|
|
18
|
+
size = _props.size,
|
|
19
|
+
truncated = _props.truncated,
|
|
20
|
+
lineClamp = _props.lineClamp,
|
|
21
|
+
tag = _props.tag,
|
|
22
|
+
title = _props.title,
|
|
23
|
+
children = _props.children,
|
|
24
|
+
className = _props.className,
|
|
25
|
+
style = _props.style;
|
|
26
|
+
var _useClassNames = useClassNames('text'),
|
|
27
|
+
b = _useClassNames.b,
|
|
28
|
+
m = _useClassNames.m,
|
|
29
|
+
is = _useClassNames.is;
|
|
30
|
+
var textSize = useSize(size);
|
|
31
|
+
var textRef = useRef(null);
|
|
32
|
+
var textKls = useMemo(function () {
|
|
33
|
+
return classNames([b(), m(type), m(textSize || size), is({
|
|
34
|
+
truncated: truncated,
|
|
35
|
+
'line-clamp': !isUndefined(lineClamp)
|
|
36
|
+
})], className);
|
|
37
|
+
}, [b, m, type, textSize, size, is, truncated, lineClamp, className]);
|
|
38
|
+
|
|
39
|
+
// 绑定 title 属性的逻辑
|
|
40
|
+
var bindTitle = function bindTitle() {
|
|
41
|
+
// 如果外部已经提供了 title,则不添加
|
|
42
|
+
if (title) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
var element = textRef.current;
|
|
46
|
+
if (!element) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
var shouldAddTitle = false;
|
|
50
|
+
var text = element.textContent || '';
|
|
51
|
+
if (truncated) {
|
|
52
|
+
var width = element.offsetWidth;
|
|
53
|
+
var scrollWidth = element.scrollWidth;
|
|
54
|
+
if (width && scrollWidth && scrollWidth > width) {
|
|
55
|
+
shouldAddTitle = true;
|
|
56
|
+
}
|
|
57
|
+
} else if (!isUndefined(lineClamp)) {
|
|
58
|
+
var height = element.offsetHeight;
|
|
59
|
+
var scrollHeight = element.scrollHeight;
|
|
60
|
+
if (height && scrollHeight && scrollHeight > height) {
|
|
61
|
+
shouldAddTitle = true;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
if (shouldAddTitle) {
|
|
65
|
+
element.setAttribute('title', text);
|
|
66
|
+
} else {
|
|
67
|
+
element.removeAttribute('title');
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
// 每次渲染后都执行 title 绑定
|
|
72
|
+
useEffect(function () {
|
|
73
|
+
bindTitle();
|
|
74
|
+
}, [children]);
|
|
75
|
+
return /*#__PURE__*/React.createElement(tag, {
|
|
76
|
+
ref: textRef,
|
|
77
|
+
className: textKls,
|
|
78
|
+
style: _objectSpread({
|
|
79
|
+
WebkitLineClamp: lineClamp
|
|
80
|
+
}, style)
|
|
81
|
+
}, children);
|
|
82
|
+
});
|
|
83
|
+
Text.displayName = 'ElText';
|
|
84
|
+
export default Text;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Text } from "./Text";
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { BaseProps, NativeProps, TypeAttributes } from '../types/common';
|
|
2
|
+
export interface TextProps extends BaseProps, NativeProps<'--el-text-font-size' | '--el-text-color'> {
|
|
3
|
+
/** 类型 */
|
|
4
|
+
type?: TypeAttributes.Appearance;
|
|
5
|
+
/** 大小 */
|
|
6
|
+
size?: TypeAttributes.Size;
|
|
7
|
+
/** 显示省略号 */
|
|
8
|
+
truncated?: boolean;
|
|
9
|
+
/** 最大行数 */
|
|
10
|
+
lineClamp?: string | number;
|
|
11
|
+
/** 自定义元素标签 */
|
|
12
|
+
tag?: string;
|
|
13
|
+
/** 标题 */
|
|
14
|
+
title?: string;
|
|
15
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
export declare const beforeEnter: (node: RefObject<HTMLElement>) => void;
|
|
3
|
+
export declare const onEnter: (node: RefObject<HTMLElement>) => void;
|
|
4
|
+
export declare const afterEnter: (node: RefObject<HTMLElement>) => void;
|
|
5
|
+
export declare const beforeLeave: (node: RefObject<any>) => void;
|
|
6
|
+
export declare const onLeave: (node: RefObject<any>) => void;
|
|
7
|
+
export declare const afterLeave: (node: RefObject<HTMLElement>) => void;
|