wssf-kage-ui 0.1.1 → 0.1.2
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/cjs/Avatar/index.d.ts +47 -0
- package/dist/cjs/Avatar/index.js +147 -0
- package/dist/cjs/Avatar/style.less +193 -0
- package/dist/cjs/Badge/index.d.ts +48 -0
- package/dist/cjs/Badge/index.js +141 -0
- package/dist/cjs/Badge/style.less +237 -0
- package/dist/cjs/Calendar/index.d.ts +33 -0
- package/dist/cjs/Calendar/index.js +296 -0
- package/dist/cjs/Calendar/style.less +384 -0
- package/dist/cjs/Card/index.d.ts +68 -0
- package/dist/cjs/Card/index.js +155 -0
- package/dist/cjs/Card/style.less +356 -0
- package/dist/cjs/Carousel/index.d.ts +33 -0
- package/dist/cjs/Carousel/index.js +169 -0
- package/dist/cjs/Carousel/style.less +232 -0
- package/dist/cjs/Collapse/index.d.ts +55 -0
- package/dist/cjs/Collapse/index.js +191 -0
- package/dist/cjs/Collapse/style.less +217 -0
- package/dist/cjs/Descriptions/index.d.ts +54 -0
- package/dist/cjs/Descriptions/index.js +181 -0
- package/dist/cjs/Descriptions/style.less +259 -0
- package/dist/cjs/Empty/index.d.ts +21 -0
- package/dist/cjs/Empty/index.js +115 -0
- package/dist/cjs/Empty/style.less +103 -0
- package/dist/cjs/Image/index.d.ts +30 -0
- package/dist/cjs/Image/index.js +153 -0
- package/dist/cjs/Image/style.less +156 -0
- package/dist/cjs/Input/index.d.ts +24 -0
- package/dist/cjs/Input/index.js +158 -0
- package/dist/cjs/Input/style.less +276 -0
- package/dist/cjs/InputNumber/index.d.ts +47 -0
- package/dist/cjs/InputNumber/index.js +323 -0
- package/dist/cjs/InputNumber/style.less +392 -0
- package/dist/cjs/Mentions/index.d.ts +57 -0
- package/dist/cjs/Mentions/index.js +378 -0
- package/dist/cjs/Mentions/style.less +297 -0
- package/dist/cjs/Popover/index.d.ts +30 -0
- package/dist/cjs/Popover/index.js +131 -0
- package/dist/cjs/Popover/style.less +279 -0
- package/dist/cjs/QRCode/index.d.ts +30 -0
- package/dist/cjs/QRCode/index.js +167 -0
- package/dist/cjs/QRCode/style.less +201 -0
- package/dist/cjs/Radio/index.d.ts +70 -0
- package/dist/cjs/Radio/index.js +199 -0
- package/dist/cjs/Radio/style.less +326 -0
- package/dist/cjs/Rate/index.d.ts +37 -0
- package/dist/cjs/Rate/index.js +151 -0
- package/dist/cjs/Rate/style.less +170 -0
- package/dist/cjs/Segmented/index.d.ts +31 -0
- package/dist/cjs/Segmented/index.js +121 -0
- package/dist/cjs/Segmented/style.less +167 -0
- package/dist/cjs/Select/index.d.ts +67 -0
- package/dist/cjs/Select/index.js +403 -0
- package/dist/cjs/Select/style.less +523 -0
- package/dist/cjs/Slider/index.d.ts +41 -0
- package/dist/cjs/Slider/index.js +325 -0
- package/dist/cjs/Slider/style.less +287 -0
- package/dist/cjs/Statistic/index.d.ts +26 -0
- package/dist/cjs/Statistic/index.js +71 -0
- package/dist/cjs/Statistic/style.less +94 -0
- package/dist/cjs/Switch/index.d.ts +28 -0
- package/dist/cjs/Switch/index.js +71 -0
- package/dist/cjs/Switch/style.less +212 -0
- package/dist/cjs/Table/index.d.ts +188 -0
- package/dist/cjs/Table/index.js +787 -0
- package/dist/cjs/Table/style.less +663 -0
- package/dist/cjs/Tag/index.d.ts +51 -0
- package/dist/cjs/Tag/index.js +142 -0
- package/dist/cjs/Tag/style.less +356 -0
- package/dist/cjs/TimePicker/index.d.ts +51 -0
- package/dist/cjs/TimePicker/index.js +332 -0
- package/dist/cjs/TimePicker/style.less +384 -0
- package/dist/cjs/Timeline/index.d.ts +47 -0
- package/dist/cjs/Timeline/index.js +127 -0
- package/dist/cjs/Timeline/style.less +265 -0
- package/dist/cjs/Tooltip/index.d.ts +53 -0
- package/dist/cjs/Tooltip/index.js +468 -0
- package/dist/cjs/Tooltip/style.less +237 -0
- package/dist/cjs/Transfer/index.d.ts +52 -0
- package/dist/cjs/Transfer/index.js +344 -0
- package/dist/cjs/Transfer/style.less +331 -0
- package/dist/cjs/TreeSelect/index.d.ts +54 -0
- package/dist/cjs/TreeSelect/index.js +373 -0
- package/dist/cjs/TreeSelect/style.less +471 -0
- package/dist/cjs/Upload/index.d.ts +65 -0
- package/dist/cjs/Upload/index.js +517 -0
- package/dist/cjs/Upload/style.less +424 -0
- package/dist/cjs/index.d.ts +58 -0
- package/dist/cjs/index.js +227 -0
- package/dist/esm/Avatar/index.d.ts +47 -0
- package/dist/esm/Avatar/index.js +142 -0
- package/dist/esm/Avatar/style.less +193 -0
- package/dist/esm/Badge/index.d.ts +48 -0
- package/dist/esm/Badge/index.js +137 -0
- package/dist/esm/Badge/style.less +237 -0
- package/dist/esm/Calendar/index.d.ts +33 -0
- package/dist/esm/Calendar/index.js +291 -0
- package/dist/esm/Calendar/style.less +384 -0
- package/dist/esm/Card/index.d.ts +68 -0
- package/dist/esm/Card/index.js +149 -0
- package/dist/esm/Card/style.less +356 -0
- package/dist/esm/Carousel/index.d.ts +33 -0
- package/dist/esm/Carousel/index.js +163 -0
- package/dist/esm/Carousel/style.less +232 -0
- package/dist/esm/Collapse/index.d.ts +55 -0
- package/dist/esm/Collapse/index.js +187 -0
- package/dist/esm/Collapse/style.less +217 -0
- package/dist/esm/Descriptions/index.d.ts +54 -0
- package/dist/esm/Descriptions/index.js +179 -0
- package/dist/esm/Descriptions/style.less +259 -0
- package/dist/esm/Empty/index.d.ts +21 -0
- package/dist/esm/Empty/index.js +109 -0
- package/dist/esm/Empty/style.less +103 -0
- package/dist/esm/Image/index.d.ts +30 -0
- package/dist/esm/Image/index.js +149 -0
- package/dist/esm/Image/style.less +156 -0
- package/dist/esm/Input/index.d.ts +24 -0
- package/dist/esm/Input/index.js +151 -0
- package/dist/esm/Input/style.less +276 -0
- package/dist/esm/InputNumber/index.d.ts +47 -0
- package/dist/esm/InputNumber/index.js +316 -0
- package/dist/esm/InputNumber/style.less +392 -0
- package/dist/esm/Mentions/index.d.ts +57 -0
- package/dist/esm/Mentions/index.js +374 -0
- package/dist/esm/Mentions/style.less +297 -0
- package/dist/esm/Popover/index.d.ts +30 -0
- package/dist/esm/Popover/index.js +126 -0
- package/dist/esm/Popover/style.less +279 -0
- package/dist/esm/QRCode/index.d.ts +30 -0
- package/dist/esm/QRCode/index.js +158 -0
- package/dist/esm/QRCode/style.less +201 -0
- package/dist/esm/Radio/index.d.ts +70 -0
- package/dist/esm/Radio/index.js +193 -0
- package/dist/esm/Radio/style.less +326 -0
- package/dist/esm/Rate/index.d.ts +37 -0
- package/dist/esm/Rate/index.js +143 -0
- package/dist/esm/Rate/style.less +170 -0
- package/dist/esm/Segmented/index.d.ts +31 -0
- package/dist/esm/Segmented/index.js +113 -0
- package/dist/esm/Segmented/style.less +167 -0
- package/dist/esm/Select/index.d.ts +67 -0
- package/dist/esm/Select/index.js +398 -0
- package/dist/esm/Select/style.less +523 -0
- package/dist/esm/Slider/index.d.ts +41 -0
- package/dist/esm/Slider/index.js +318 -0
- package/dist/esm/Slider/style.less +287 -0
- package/dist/esm/Statistic/index.d.ts +26 -0
- package/dist/esm/Statistic/index.js +65 -0
- package/dist/esm/Statistic/style.less +94 -0
- package/dist/esm/Switch/index.d.ts +28 -0
- package/dist/esm/Switch/index.js +63 -0
- package/dist/esm/Switch/style.less +212 -0
- package/dist/esm/Table/index.d.ts +188 -0
- package/dist/esm/Table/index.js +797 -0
- package/dist/esm/Table/style.less +663 -0
- package/dist/esm/Tag/index.d.ts +51 -0
- package/dist/esm/Tag/index.js +144 -0
- package/dist/esm/Tag/style.less +356 -0
- package/dist/esm/TimePicker/index.d.ts +51 -0
- package/dist/esm/TimePicker/index.js +327 -0
- package/dist/esm/TimePicker/style.less +384 -0
- package/dist/esm/Timeline/index.d.ts +47 -0
- package/dist/esm/Timeline/index.js +130 -0
- package/dist/esm/Timeline/style.less +265 -0
- package/dist/esm/Tooltip/index.d.ts +53 -0
- package/dist/esm/Tooltip/index.js +471 -0
- package/dist/esm/Tooltip/style.less +237 -0
- package/dist/esm/Transfer/index.d.ts +52 -0
- package/dist/esm/Transfer/index.js +340 -0
- package/dist/esm/Transfer/style.less +331 -0
- package/dist/esm/TreeSelect/index.d.ts +54 -0
- package/dist/esm/TreeSelect/index.js +369 -0
- package/dist/esm/TreeSelect/style.less +471 -0
- package/dist/esm/Upload/index.d.ts +65 -0
- package/dist/esm/Upload/index.js +513 -0
- package/dist/esm/Upload/style.less +424 -0
- package/dist/esm/index.d.ts +58 -0
- package/dist/esm/index.js +30 -1
- package/package.json +6 -3
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import React, { useState, useCallback, useMemo } from 'react';
|
|
8
|
+
import "./style.less";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
export var Rate = function Rate(_ref) {
|
|
12
|
+
var controlledValue = _ref.value,
|
|
13
|
+
_ref$defaultValue = _ref.defaultValue,
|
|
14
|
+
defaultValue = _ref$defaultValue === void 0 ? 0 : _ref$defaultValue,
|
|
15
|
+
_ref$count = _ref.count,
|
|
16
|
+
count = _ref$count === void 0 ? 5 : _ref$count,
|
|
17
|
+
_ref$allowHalf = _ref.allowHalf,
|
|
18
|
+
allowHalf = _ref$allowHalf === void 0 ? false : _ref$allowHalf,
|
|
19
|
+
_ref$allowClear = _ref.allowClear,
|
|
20
|
+
allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
|
|
21
|
+
_ref$disabled = _ref.disabled,
|
|
22
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
23
|
+
_ref$readOnly = _ref.readOnly,
|
|
24
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
25
|
+
_ref$character = _ref.character,
|
|
26
|
+
character = _ref$character === void 0 ? '★' : _ref$character,
|
|
27
|
+
characterRender = _ref.characterRender,
|
|
28
|
+
tooltips = _ref.tooltips,
|
|
29
|
+
onChange = _ref.onChange,
|
|
30
|
+
onHoverChange = _ref.onHoverChange,
|
|
31
|
+
_ref$className = _ref.className,
|
|
32
|
+
className = _ref$className === void 0 ? '' : _ref$className,
|
|
33
|
+
style = _ref.style;
|
|
34
|
+
var _useState = useState(defaultValue),
|
|
35
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
36
|
+
internalValue = _useState2[0],
|
|
37
|
+
setInternalValue = _useState2[1];
|
|
38
|
+
var _useState3 = useState(null),
|
|
39
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
40
|
+
hoverValue = _useState4[0],
|
|
41
|
+
setHoverValue = _useState4[1];
|
|
42
|
+
var value = controlledValue !== undefined ? controlledValue : internalValue;
|
|
43
|
+
var displayValue = hoverValue !== null ? hoverValue : value;
|
|
44
|
+
|
|
45
|
+
// 处理点击
|
|
46
|
+
var handleClick = useCallback(function (starValue) {
|
|
47
|
+
if (disabled || readOnly) return;
|
|
48
|
+
var newValue = starValue;
|
|
49
|
+
|
|
50
|
+
// 如果允许清除且点击的是当前值,则清除
|
|
51
|
+
if (allowClear && starValue === value) {
|
|
52
|
+
newValue = 0;
|
|
53
|
+
}
|
|
54
|
+
if (controlledValue === undefined) {
|
|
55
|
+
setInternalValue(newValue);
|
|
56
|
+
}
|
|
57
|
+
onChange === null || onChange === void 0 || onChange(newValue);
|
|
58
|
+
}, [disabled, readOnly, allowClear, value, controlledValue, onChange]);
|
|
59
|
+
|
|
60
|
+
// 处理 hover
|
|
61
|
+
var handleMouseEnter = useCallback(function (starValue) {
|
|
62
|
+
if (disabled || readOnly) return;
|
|
63
|
+
setHoverValue(starValue);
|
|
64
|
+
onHoverChange === null || onHoverChange === void 0 || onHoverChange(starValue);
|
|
65
|
+
}, [disabled, readOnly, onHoverChange]);
|
|
66
|
+
var handleMouseLeave = useCallback(function () {
|
|
67
|
+
if (disabled || readOnly) return;
|
|
68
|
+
setHoverValue(null);
|
|
69
|
+
onHoverChange === null || onHoverChange === void 0 || onHoverChange(value);
|
|
70
|
+
}, [disabled, readOnly, value, onHoverChange]);
|
|
71
|
+
|
|
72
|
+
// 渲染星星
|
|
73
|
+
var stars = useMemo(function () {
|
|
74
|
+
var result = [];
|
|
75
|
+
var _loop = function _loop(i) {
|
|
76
|
+
var starValue = i;
|
|
77
|
+
var isFull = displayValue >= starValue;
|
|
78
|
+
var isHalf = allowHalf && displayValue >= starValue - 0.5 && displayValue < starValue;
|
|
79
|
+
var starClass = ['kage-rate-star', isFull && 'kage-rate-star-full', isHalf && 'kage-rate-star-half', !isFull && !isHalf && 'kage-rate-star-zero'].filter(Boolean).join(' ');
|
|
80
|
+
|
|
81
|
+
// 渲染字符
|
|
82
|
+
var renderCharacter = function renderCharacter() {
|
|
83
|
+
var origin = character;
|
|
84
|
+
if (characterRender) {
|
|
85
|
+
return characterRender(origin, {
|
|
86
|
+
index: i - 1,
|
|
87
|
+
value: displayValue
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
return origin;
|
|
91
|
+
};
|
|
92
|
+
result.push( /*#__PURE__*/_jsxs("div", {
|
|
93
|
+
className: starClass,
|
|
94
|
+
onClick: function onClick() {
|
|
95
|
+
return handleClick(starValue);
|
|
96
|
+
},
|
|
97
|
+
onMouseEnter: function onMouseEnter() {
|
|
98
|
+
return handleMouseEnter(starValue);
|
|
99
|
+
},
|
|
100
|
+
title: tooltips === null || tooltips === void 0 ? void 0 : tooltips[i - 1],
|
|
101
|
+
children: [allowHalf && /*#__PURE__*/_jsx("div", {
|
|
102
|
+
className: "kage-rate-star-first",
|
|
103
|
+
onClick: function onClick(e) {
|
|
104
|
+
e.stopPropagation();
|
|
105
|
+
handleClick(starValue - 0.5);
|
|
106
|
+
},
|
|
107
|
+
onMouseEnter: function onMouseEnter(e) {
|
|
108
|
+
e.stopPropagation();
|
|
109
|
+
handleMouseEnter(starValue - 0.5);
|
|
110
|
+
}
|
|
111
|
+
}), allowHalf && /*#__PURE__*/_jsx("div", {
|
|
112
|
+
className: "kage-rate-star-second",
|
|
113
|
+
onClick: function onClick(e) {
|
|
114
|
+
e.stopPropagation();
|
|
115
|
+
handleClick(starValue);
|
|
116
|
+
},
|
|
117
|
+
onMouseEnter: function onMouseEnter(e) {
|
|
118
|
+
e.stopPropagation();
|
|
119
|
+
handleMouseEnter(starValue);
|
|
120
|
+
}
|
|
121
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
122
|
+
className: "kage-rate-star-character",
|
|
123
|
+
children: renderCharacter()
|
|
124
|
+
})]
|
|
125
|
+
}, i));
|
|
126
|
+
};
|
|
127
|
+
for (var i = 1; i <= count; i++) {
|
|
128
|
+
_loop(i);
|
|
129
|
+
}
|
|
130
|
+
return result;
|
|
131
|
+
}, [count, displayValue, allowHalf, character, characterRender, tooltips, handleClick, handleMouseEnter]);
|
|
132
|
+
var classNames = ['kage-rate', disabled && 'kage-rate-disabled', readOnly && 'kage-rate-readonly', className].filter(Boolean).join(' ');
|
|
133
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
134
|
+
className: classNames,
|
|
135
|
+
style: style,
|
|
136
|
+
onMouseLeave: handleMouseLeave,
|
|
137
|
+
children: [stars, tooltips && hoverValue !== null && /*#__PURE__*/_jsx("span", {
|
|
138
|
+
className: "kage-rate-text",
|
|
139
|
+
children: tooltips[Math.ceil(hoverValue) - 1]
|
|
140
|
+
})]
|
|
141
|
+
});
|
|
142
|
+
};
|
|
143
|
+
export default Rate;
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
// Rate 评分组件样式
|
|
2
|
+
|
|
3
|
+
@prefix: kage-rate;
|
|
4
|
+
|
|
5
|
+
// 颜色变量
|
|
6
|
+
@rate-star-color: #fadb14;
|
|
7
|
+
@rate-star-bg: rgba(0, 0, 0, 0.06);
|
|
8
|
+
@rate-star-size: 20px;
|
|
9
|
+
@rate-star-hover-scale: 1.1;
|
|
10
|
+
|
|
11
|
+
// ============ 基础样式 ============
|
|
12
|
+
.@{prefix} {
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
gap: 8px;
|
|
16
|
+
font-size: @rate-star-size;
|
|
17
|
+
line-height: 1;
|
|
18
|
+
color: @rate-star-bg;
|
|
19
|
+
outline: none;
|
|
20
|
+
|
|
21
|
+
* {
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// ============ 星星 ============
|
|
27
|
+
.@{prefix}-star {
|
|
28
|
+
position: relative;
|
|
29
|
+
display: inline-block;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
transition: transform 0.2s ease;
|
|
32
|
+
user-select: none;
|
|
33
|
+
|
|
34
|
+
&:hover {
|
|
35
|
+
transform: scale(@rate-star-hover-scale);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// 字符
|
|
39
|
+
&-character {
|
|
40
|
+
font-size: @rate-star-size;
|
|
41
|
+
line-height: 1;
|
|
42
|
+
transition: color 0.2s ease;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// 零星(未选中)
|
|
46
|
+
&-zero {
|
|
47
|
+
.@{prefix}-star-character {
|
|
48
|
+
color: @rate-star-bg;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// 半星
|
|
53
|
+
&-half {
|
|
54
|
+
.@{prefix}-star-character {
|
|
55
|
+
background: linear-gradient(
|
|
56
|
+
to right,
|
|
57
|
+
@rate-star-color 0%,
|
|
58
|
+
@rate-star-color 50%,
|
|
59
|
+
@rate-star-bg 50%,
|
|
60
|
+
@rate-star-bg 100%
|
|
61
|
+
);
|
|
62
|
+
-webkit-background-clip: text;
|
|
63
|
+
-webkit-text-fill-color: transparent;
|
|
64
|
+
background-clip: text;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// 满星
|
|
69
|
+
&-full {
|
|
70
|
+
.@{prefix}-star-character {
|
|
71
|
+
color: @rate-star-color;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// 半星交互区域
|
|
76
|
+
&-first,
|
|
77
|
+
&-second {
|
|
78
|
+
position: absolute;
|
|
79
|
+
top: 0;
|
|
80
|
+
width: 50%;
|
|
81
|
+
height: 100%;
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
z-index: 1;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&-first {
|
|
87
|
+
left: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&-second {
|
|
91
|
+
right: 0;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// ============ 辅助文字 ============
|
|
96
|
+
.@{prefix}-text {
|
|
97
|
+
display: inline-block;
|
|
98
|
+
margin-left: 8px;
|
|
99
|
+
font-size: 14px;
|
|
100
|
+
color: rgba(0, 0, 0, 0.45);
|
|
101
|
+
line-height: 1;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// ============ 禁用状态 ============
|
|
105
|
+
.@{prefix}-disabled {
|
|
106
|
+
cursor: not-allowed;
|
|
107
|
+
opacity: 0.5;
|
|
108
|
+
|
|
109
|
+
.@{prefix}-star {
|
|
110
|
+
cursor: not-allowed;
|
|
111
|
+
|
|
112
|
+
&:hover {
|
|
113
|
+
transform: none;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// ============ 只读状态 ============
|
|
119
|
+
.@{prefix}-readonly {
|
|
120
|
+
.@{prefix}-star {
|
|
121
|
+
cursor: default;
|
|
122
|
+
|
|
123
|
+
&:hover {
|
|
124
|
+
transform: none;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// ============ 暗色模式适配 ============
|
|
130
|
+
[data-theme='dark'],
|
|
131
|
+
[data-prefers-color-scheme='dark'],
|
|
132
|
+
[data-prefers-color='dark'] {
|
|
133
|
+
.@{prefix} {
|
|
134
|
+
color: rgba(255, 255, 255, 0.15);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.@{prefix}-star {
|
|
138
|
+
&-zero {
|
|
139
|
+
.@{prefix}-star-character {
|
|
140
|
+
color: rgba(255, 255, 255, 0.15);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&-half {
|
|
145
|
+
.@{prefix}-star-character {
|
|
146
|
+
background: linear-gradient(
|
|
147
|
+
to right,
|
|
148
|
+
@rate-star-color 0%,
|
|
149
|
+
@rate-star-color 50%,
|
|
150
|
+
rgba(255, 255, 255, 0.15) 50%,
|
|
151
|
+
rgba(255, 255, 255, 0.15) 100%
|
|
152
|
+
);
|
|
153
|
+
-webkit-background-clip: text;
|
|
154
|
+
-webkit-text-fill-color: transparent;
|
|
155
|
+
background-clip: text;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&-full {
|
|
160
|
+
.@{prefix}-star-character {
|
|
161
|
+
color: @rate-star-color;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.@{prefix}-text {
|
|
167
|
+
color: rgba(255, 255, 255, 0.45);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './style.less';
|
|
3
|
+
export type SegmentedValue = string | number;
|
|
4
|
+
export interface SegmentedOption {
|
|
5
|
+
label: React.ReactNode;
|
|
6
|
+
value: SegmentedValue;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface SegmentedProps {
|
|
11
|
+
/** 选项数据 */
|
|
12
|
+
options: (SegmentedValue | SegmentedOption)[];
|
|
13
|
+
/** 当前选中的值 */
|
|
14
|
+
value?: SegmentedValue;
|
|
15
|
+
/** 默认选中的值 */
|
|
16
|
+
defaultValue?: SegmentedValue;
|
|
17
|
+
/** 变化时的回调函数 */
|
|
18
|
+
onChange?: (value: SegmentedValue) => void;
|
|
19
|
+
/** 是否禁用 */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** 是否块级显示 */
|
|
22
|
+
block?: boolean;
|
|
23
|
+
/** 大小 */
|
|
24
|
+
size?: 'large' | 'middle' | 'small';
|
|
25
|
+
/** 自定义类名 */
|
|
26
|
+
className?: string;
|
|
27
|
+
/** 自定义样式 */
|
|
28
|
+
style?: React.CSSProperties;
|
|
29
|
+
}
|
|
30
|
+
export declare const Segmented: React.FC<SegmentedProps>;
|
|
31
|
+
export default Segmented;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
|
8
|
+
import "./style.less";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
var normalizeOptions = function normalizeOptions(options) {
|
|
12
|
+
return options.map(function (option) {
|
|
13
|
+
if (typeof option === 'string' || typeof option === 'number') {
|
|
14
|
+
return {
|
|
15
|
+
label: option,
|
|
16
|
+
value: option
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
return option;
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
export var Segmented = function Segmented(_ref) {
|
|
23
|
+
var options = _ref.options,
|
|
24
|
+
controlledValue = _ref.value,
|
|
25
|
+
defaultValue = _ref.defaultValue,
|
|
26
|
+
onChange = _ref.onChange,
|
|
27
|
+
_ref$disabled = _ref.disabled,
|
|
28
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
29
|
+
_ref$block = _ref.block,
|
|
30
|
+
block = _ref$block === void 0 ? false : _ref$block,
|
|
31
|
+
_ref$size = _ref.size,
|
|
32
|
+
size = _ref$size === void 0 ? 'middle' : _ref$size,
|
|
33
|
+
className = _ref.className,
|
|
34
|
+
style = _ref.style;
|
|
35
|
+
var normalizedOptions = useMemo(function () {
|
|
36
|
+
return normalizeOptions(options);
|
|
37
|
+
}, [options]);
|
|
38
|
+
var _useState = useState(function () {
|
|
39
|
+
var _ref2, _normalizedOptions$;
|
|
40
|
+
return (_ref2 = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : (_normalizedOptions$ = normalizedOptions[0]) === null || _normalizedOptions$ === void 0 ? void 0 : _normalizedOptions$.value;
|
|
41
|
+
}),
|
|
42
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
43
|
+
internalValue = _useState2[0],
|
|
44
|
+
setInternalValue = _useState2[1];
|
|
45
|
+
var value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
|
|
46
|
+
var containerRef = useRef(null);
|
|
47
|
+
var itemRefs = useRef([]);
|
|
48
|
+
var _useState3 = useState({}),
|
|
49
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
50
|
+
thumbStyle = _useState4[0],
|
|
51
|
+
setThumbStyle = _useState4[1];
|
|
52
|
+
|
|
53
|
+
// 更新滑块位置
|
|
54
|
+
useEffect(function () {
|
|
55
|
+
var activeIndex = normalizedOptions.findIndex(function (option) {
|
|
56
|
+
return option.value === value;
|
|
57
|
+
});
|
|
58
|
+
if (activeIndex !== -1 && itemRefs.current[activeIndex]) {
|
|
59
|
+
var activeItem = itemRefs.current[activeIndex];
|
|
60
|
+
var container = containerRef.current;
|
|
61
|
+
if (activeItem && container) {
|
|
62
|
+
var containerRect = container.getBoundingClientRect();
|
|
63
|
+
var itemRect = activeItem.getBoundingClientRect();
|
|
64
|
+
setThumbStyle({
|
|
65
|
+
width: "".concat(itemRect.width, "px"),
|
|
66
|
+
height: "".concat(itemRect.height, "px"),
|
|
67
|
+
transform: "translateX(".concat(itemRect.left - containerRect.left, "px)")
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}, [value, normalizedOptions]);
|
|
72
|
+
var handleClick = function handleClick(option) {
|
|
73
|
+
if (disabled || option.disabled) return;
|
|
74
|
+
var newValue = option.value;
|
|
75
|
+
if (controlledValue === undefined) {
|
|
76
|
+
setInternalValue(newValue);
|
|
77
|
+
}
|
|
78
|
+
onChange === null || onChange === void 0 || onChange(newValue);
|
|
79
|
+
};
|
|
80
|
+
var prefixCls = 'kage-segmented';
|
|
81
|
+
return /*#__PURE__*/_jsx("div", {
|
|
82
|
+
ref: containerRef,
|
|
83
|
+
className: "".concat(prefixCls, " ").concat(prefixCls, "-").concat(size, " ").concat(block ? "".concat(prefixCls, "-block") : '', " ").concat(disabled ? "".concat(prefixCls, "-disabled") : '', " ").concat(className || ''),
|
|
84
|
+
style: style,
|
|
85
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
86
|
+
className: "".concat(prefixCls, "-group"),
|
|
87
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
88
|
+
className: "".concat(prefixCls, "-thumb"),
|
|
89
|
+
style: thumbStyle
|
|
90
|
+
}), normalizedOptions.map(function (option, index) {
|
|
91
|
+
var isActive = option.value === value;
|
|
92
|
+
var isDisabled = disabled || option.disabled;
|
|
93
|
+
return /*#__PURE__*/_jsx("div", {
|
|
94
|
+
ref: function ref(el) {
|
|
95
|
+
return itemRefs.current[index] = el;
|
|
96
|
+
},
|
|
97
|
+
className: "".concat(prefixCls, "-item ").concat(isActive ? "".concat(prefixCls, "-item-selected") : '', " ").concat(isDisabled ? "".concat(prefixCls, "-item-disabled") : ''),
|
|
98
|
+
onClick: function onClick() {
|
|
99
|
+
return handleClick(option);
|
|
100
|
+
},
|
|
101
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
102
|
+
className: "".concat(prefixCls, "-item-label"),
|
|
103
|
+
children: [option.icon && /*#__PURE__*/_jsx("span", {
|
|
104
|
+
className: "".concat(prefixCls, "-item-icon"),
|
|
105
|
+
children: option.icon
|
|
106
|
+
}), option.label]
|
|
107
|
+
})
|
|
108
|
+
}, option.value);
|
|
109
|
+
})]
|
|
110
|
+
})
|
|
111
|
+
});
|
|
112
|
+
};
|
|
113
|
+
export default Segmented;
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
@prefix: kage-segmented;
|
|
2
|
+
|
|
3
|
+
// 颜色变量
|
|
4
|
+
@primary-color: #1890ff;
|
|
5
|
+
@text-color: rgba(0, 0, 0, 0.88);
|
|
6
|
+
@text-color-secondary: rgba(0, 0, 0, 0.65);
|
|
7
|
+
@disabled-color: rgba(0, 0, 0, 0.25);
|
|
8
|
+
@border-color-base: #d9d9d9;
|
|
9
|
+
@component-background: #ffffff;
|
|
10
|
+
@bg-color: rgba(0, 0, 0, 0.04);
|
|
11
|
+
|
|
12
|
+
// 深色模式变量
|
|
13
|
+
@dark-bg: #141414;
|
|
14
|
+
@dark-border-color: #424242;
|
|
15
|
+
@dark-bg-color: rgba(255, 255, 255, 0.04);
|
|
16
|
+
|
|
17
|
+
.@{prefix} {
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
padding: 2px;
|
|
20
|
+
background-color: @bg-color;
|
|
21
|
+
border-radius: 8px;
|
|
22
|
+
font-size: 14px;
|
|
23
|
+
transition: all 0.3s;
|
|
24
|
+
|
|
25
|
+
&-block {
|
|
26
|
+
display: flex;
|
|
27
|
+
width: 100%;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&-disabled {
|
|
31
|
+
cursor: not-allowed;
|
|
32
|
+
opacity: 0.6;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// ========== 选项组 ==========
|
|
36
|
+
&-group {
|
|
37
|
+
position: relative;
|
|
38
|
+
display: flex;
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// ========== 滑动背景 ==========
|
|
43
|
+
&-thumb {
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 0;
|
|
46
|
+
left: 0;
|
|
47
|
+
background-color: @component-background;
|
|
48
|
+
border-radius: 6px;
|
|
49
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
50
|
+
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
51
|
+
pointer-events: none;
|
|
52
|
+
z-index: 1;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// ========== 选项 ==========
|
|
56
|
+
&-item {
|
|
57
|
+
position: relative;
|
|
58
|
+
flex: 1;
|
|
59
|
+
min-width: 0;
|
|
60
|
+
padding: 5px 11px;
|
|
61
|
+
color: @text-color;
|
|
62
|
+
text-align: center;
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
user-select: none;
|
|
65
|
+
transition: color 0.3s;
|
|
66
|
+
z-index: 2;
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
color: @text-color;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&-selected {
|
|
73
|
+
color: @text-color;
|
|
74
|
+
font-weight: 500;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&-disabled {
|
|
78
|
+
color: @disabled-color;
|
|
79
|
+
cursor: not-allowed;
|
|
80
|
+
|
|
81
|
+
&:hover {
|
|
82
|
+
color: @disabled-color;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&-item-label {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
gap: 4px;
|
|
92
|
+
white-space: nowrap;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&-item-icon {
|
|
96
|
+
display: inline-flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
font-size: 16px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// ========== 尺寸变体 ==========
|
|
102
|
+
&-large {
|
|
103
|
+
font-size: 16px;
|
|
104
|
+
|
|
105
|
+
.@{prefix}-item {
|
|
106
|
+
padding: 7px 15px;
|
|
107
|
+
line-height: 24px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.@{prefix}-item-icon {
|
|
111
|
+
font-size: 18px;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&-small {
|
|
116
|
+
font-size: 12px;
|
|
117
|
+
|
|
118
|
+
.@{prefix}-item {
|
|
119
|
+
padding: 3px 7px;
|
|
120
|
+
line-height: 16px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.@{prefix}-item-icon {
|
|
124
|
+
font-size: 14px;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// ========== 深色模式 ==========
|
|
130
|
+
[data-theme='dark'],
|
|
131
|
+
[data-prefers-color-scheme='dark'],
|
|
132
|
+
[data-prefers-color='dark'] {
|
|
133
|
+
.@{prefix} {
|
|
134
|
+
background-color: rgba(255, 255, 255, 0.08);
|
|
135
|
+
|
|
136
|
+
&-thumb {
|
|
137
|
+
background-color: #434343;
|
|
138
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&-item {
|
|
142
|
+
color: rgba(255, 255, 255, 0.65);
|
|
143
|
+
|
|
144
|
+
&:hover {
|
|
145
|
+
color: rgba(255, 255, 255, 0.85);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&-selected {
|
|
149
|
+
color: rgba(0, 0, 0, 0.88);
|
|
150
|
+
font-weight: 600;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
&-disabled {
|
|
154
|
+
color: rgba(255, 255, 255, 0.25);
|
|
155
|
+
|
|
156
|
+
&:hover {
|
|
157
|
+
color: rgba(255, 255, 255, 0.25);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&-item-label {
|
|
163
|
+
color: inherit;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './style.less';
|
|
3
|
+
export interface SelectOption {
|
|
4
|
+
/** 选项值 */
|
|
5
|
+
value: string | number;
|
|
6
|
+
/** 显示文本 */
|
|
7
|
+
label?: React.ReactNode;
|
|
8
|
+
/** 是否禁用 */
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export type SelectValue = string | number | (string | number)[];
|
|
12
|
+
export interface SelectProps {
|
|
13
|
+
/** 当前值 */
|
|
14
|
+
value?: SelectValue;
|
|
15
|
+
/** 默认值 */
|
|
16
|
+
defaultValue?: SelectValue;
|
|
17
|
+
/** 选项数据 */
|
|
18
|
+
options?: (SelectOption | string | number)[];
|
|
19
|
+
/** 占位符 */
|
|
20
|
+
placeholder?: string;
|
|
21
|
+
/** 是否禁用 */
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
/** 是否允许清除 */
|
|
24
|
+
allowClear?: boolean;
|
|
25
|
+
/** 是否支持搜索 */
|
|
26
|
+
showSearch?: boolean;
|
|
27
|
+
/** 是否多选 */
|
|
28
|
+
mode?: 'multiple' | 'tags';
|
|
29
|
+
/** 尺寸 */
|
|
30
|
+
size?: 'large' | 'middle' | 'small';
|
|
31
|
+
/** 状态 */
|
|
32
|
+
status?: 'error' | 'warning';
|
|
33
|
+
/** 下拉菜单是否与选择器同宽 */
|
|
34
|
+
popupMatchSelectWidth?: boolean | number;
|
|
35
|
+
/** 过滤选项 */
|
|
36
|
+
filterOption?: boolean | ((input: string, option: SelectOption) => boolean);
|
|
37
|
+
/** 无匹配时的内容 */
|
|
38
|
+
notFoundContent?: React.ReactNode;
|
|
39
|
+
/** 获取选项时的加载状态 */
|
|
40
|
+
loading?: boolean;
|
|
41
|
+
/** 最多显示多少个 tag */
|
|
42
|
+
maxTagCount?: number;
|
|
43
|
+
/** 隐藏 tag 时显示的内容 */
|
|
44
|
+
maxTagPlaceholder?: React.ReactNode | ((omittedValues: SelectValue[]) => React.ReactNode);
|
|
45
|
+
/** 最多显示多少个 tag 的文本长度 */
|
|
46
|
+
maxTagTextLength?: number;
|
|
47
|
+
/** 值变化回调 */
|
|
48
|
+
onChange?: (value: SelectValue, option: SelectOption | SelectOption[]) => void;
|
|
49
|
+
/** 选中回调 */
|
|
50
|
+
onSelect?: (value: string | number, option: SelectOption) => void;
|
|
51
|
+
/** 取消选中回调 */
|
|
52
|
+
onDeselect?: (value: string | number, option: SelectOption) => void;
|
|
53
|
+
/** 搜索回调 */
|
|
54
|
+
onSearch?: (value: string) => void;
|
|
55
|
+
/** 下拉菜单打开/关闭回调 */
|
|
56
|
+
onDropdownVisibleChange?: (open: boolean) => void;
|
|
57
|
+
/** 失焦回调 */
|
|
58
|
+
onBlur?: (e: React.FocusEvent) => void;
|
|
59
|
+
/** 聚焦回调 */
|
|
60
|
+
onFocus?: (e: React.FocusEvent) => void;
|
|
61
|
+
/** 自定义类名 */
|
|
62
|
+
className?: string;
|
|
63
|
+
/** 自定义样式 */
|
|
64
|
+
style?: React.CSSProperties;
|
|
65
|
+
}
|
|
66
|
+
export declare const Select: React.FC<SelectProps>;
|
|
67
|
+
export default Select;
|