@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.5
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/AutoBox/index.js +72 -85
- package/AutoTips/index.js +72 -95
- package/Badge/index.js +17 -16
- package/Breadcrumbs/index.js +57 -73
- package/Button/index.js +89 -117
- package/ButtonGroup/index.js +30 -33
- package/Carousel/index.js +29 -33
- package/Cascader/index.js +7 -9
- package/Checkbox/index.js +28 -35
- package/CheckboxGroup/index.js +43 -58
- package/Collapse/index.js +52 -49
- package/CollapseBox/index.js +65 -70
- package/CollapseLayout/index.js +106 -101
- package/ColorPicker/index.js +3 -3
- package/ComboSelect/index.js +242 -330
- package/Container/index.js +17 -21
- package/CopyText/index.js +50 -83
- package/DatePicker/index.js +22 -27
- package/Descriptions/index.js +50 -59
- package/Desktop/index.js +161 -180
- package/DragVerify/index.js +77 -113
- package/Drawer/index.js +80 -95
- package/Dropdown/index.js +3 -3
- package/DynamicMultiBox/index.js +219 -224
- package/DynamicMultiBox/interface.d.ts +7 -0
- package/Empty/index.js +26 -28
- package/Form/index.js +66 -74
- package/FormItem/index.js +14 -15
- package/FunctionModal/index.js +7 -14
- package/GlobalContext/index.js +17 -20
- package/Help/index.js +9 -12
- package/HelperText/index.js +11 -11
- package/InputLang/index.js +104 -124
- package/InputNumber/index.js +62 -81
- package/Label/index.js +19 -21
- package/Loading/index.js +11 -10
- package/Menu/index.js +302 -371
- package/Message/index.js +104 -113
- package/Modal/index.js +122 -148
- package/MultiBox/index.d.ts +5 -0
- package/MultiBox/index.js +111 -115
- package/Notification/index.js +105 -103
- package/OperateBtn/index.d.ts +3 -0
- package/OperateBtn/index.js +77 -107
- package/PageHeader/index.js +327 -406
- package/Pagination/index.js +107 -137
- package/ParauiProvider/index.js +20 -22
- package/PasswordRules/index.js +36 -40
- package/PopConfirm/index.js +60 -77
- package/Popover/index.js +12 -12
- package/Progress/index.js +72 -74
- package/Querying/index.js +22 -23
- package/README.md +2 -0
- package/Radio/index.js +27 -34
- package/RadioGroup/index.js +38 -52
- package/Search/index.js +34 -43
- package/Select/index.js +281 -345
- package/SelectInput/index.js +8 -13
- package/Selector/index.js +905 -796
- package/SelectorPicker/index.js +111 -133
- package/SingleBox/index.d.ts +5 -0
- package/SingleBox/index.js +92 -88
- package/Slider/index.js +46 -57
- package/Status/index.js +14 -13
- package/Stepper/index.js +25 -26
- package/Styles/theme.scss +9 -9
- package/Switch/index.js +32 -35
- package/Table/index.js +767 -963
- package/Tabs/index.js +102 -102
- package/Tag/index.js +115 -162
- package/TextEditor/index.js +81 -103
- package/TextField/index.js +142 -183
- package/TimePicker/index.js +27 -28
- package/Timeline/index.js +67 -58
- package/Title/index.js +32 -34
- package/ToggleButton/index.js +53 -52
- package/Tooltip/index.js +79 -82
- package/Transfer/index.js +159 -201
- package/Tree/index.js +7 -12
- package/Upload/index.js +523 -758
- package/Upload/interface.d.ts +2 -0
- package/_verture/{constant-0d9802f7.js → constant-5317fc89.js} +2 -2
- package/_verture/{index-5a7e2438.js → index-0ced30f7.js} +1127 -1079
- package/_verture/{index-024bbc9b.js → index-775ad32d.js} +29 -25
- package/_verture/{index-05f7bf11.js → index-c568f272.js} +2 -2
- package/_verture/index-da9097d3.js +239 -0
- package/_verture/{index-9331b116.js → index-ef1235fb.js} +125 -134
- package/_verture/{index-b1f80962.js → index-f186b5e8.js} +314 -398
- package/_verture/intl-f2f27722.js +69 -0
- package/_verture/{modalContext-736ff215.js → modalContext-5df08980.js} +36 -64
- package/_verture/{slicedToArray-a8206399.js → slicedToArray-8223a2ef.js} +15 -2
- package/_verture/{useFormatMessage-703f8b20.js → useFormatMessage-eb13cf56.js} +5 -4
- package/_verture/{useGlobalProps-1b846a65.js → useGlobalProps-1e416658.js} +4 -3
- package/_verture/{usePopupContainer-87febeb9.js → usePopupContainer-635f66f4.js} +16 -15
- package/_verture/{util-7e1fb1e2.js → util-82646c4f.js} +5 -4
- package/_verture/{utils-418da0a4.js → utils-46e99c9a.js} +34 -25
- package/index.js +21 -22
- package/locale/index.js +6 -6
- package/package.json +1 -1
- package/umd/AutoBox.js +9 -8
- package/umd/AutoTips.js +9 -8
- package/umd/Badge.js +1 -1
- package/umd/Breadcrumbs.js +9 -8
- package/umd/Button.js +9 -8
- package/umd/ButtonGroup.js +9 -8
- package/umd/Carousel.js +5 -5
- package/umd/Cascader.js +9 -8
- package/umd/Checkbox.js +9 -8
- package/umd/CheckboxGroup.js +9 -8
- package/umd/Collapse.js +8 -7
- package/umd/CollapseBox.js +1 -1
- package/umd/CollapseLayout.js +4 -4
- package/umd/ColorPicker.js +1 -1
- package/umd/ComboSelect.js +9 -8
- package/umd/Container.js +1 -1
- package/umd/CopyText.js +9 -8
- package/umd/DatePicker.js +9 -8
- package/umd/Descriptions.js +9 -8
- package/umd/Desktop.js +9 -8
- package/umd/DragVerify.js +4 -4
- package/umd/Drawer.js +9 -8
- package/umd/Dropdown.js +6 -5
- package/umd/DynamicMultiBox.js +11 -10
- package/umd/Empty.js +1 -1
- package/umd/Form.js +9 -8
- package/umd/FormItem.js +9 -8
- package/umd/FunctionModal.js +9 -8
- package/umd/GlobalContext.js +1 -1
- package/umd/Help.js +9 -8
- package/umd/HelperText.js +1 -1
- package/umd/InputLang.js +9 -8
- package/umd/InputNumber.js +9 -8
- package/umd/Label.js +9 -8
- package/umd/Loading.js +4 -4
- package/umd/Menu.js +4 -4
- package/umd/Message.js +4 -4
- package/umd/Modal.js +9 -8
- package/umd/MultiBox.js +9 -8
- package/umd/Notification.js +8 -7
- package/umd/OperateBtn.js +9 -8
- package/umd/PageHeader.js +9 -8
- package/umd/Pagination.js +9 -8
- package/umd/ParauiProvider.js +1 -1
- package/umd/PasswordRules.js +4 -4
- package/umd/PopConfirm.js +9 -8
- package/umd/Popover.js +9 -8
- package/umd/Progress.js +5 -5
- package/umd/Querying.js +1 -1
- package/umd/Radio.js +9 -8
- package/umd/RadioGroup.js +9 -8
- package/umd/Search.js +9 -8
- package/umd/Select.js +9 -8
- package/umd/SelectInput.js +9 -8
- package/umd/Selector.js +9 -8
- package/umd/SelectorPicker.js +9 -8
- package/umd/SingleBox.js +9 -8
- package/umd/Slider.js +6 -5
- package/umd/Status.js +4 -4
- package/umd/Stepper.js +9 -8
- package/umd/Switch.js +9 -8
- package/umd/Table.js +9 -8
- package/umd/Tabs.js +9 -8
- package/umd/Tag.js +9 -8
- package/umd/TextEditor.js +22 -21
- package/umd/TextField.js +9 -8
- package/umd/TimePicker.js +9 -8
- package/umd/Timeline.js +1 -1
- package/umd/Title.js +9 -8
- package/umd/ToggleButton.js +9 -8
- package/umd/Tooltip.js +9 -8
- package/umd/Transfer.js +10 -9
- package/umd/Tree.js +9 -8
- package/umd/Upload.js +10 -9
- package/umd/locale.js +1 -1
- package/_verture/index-232d890b.js +0 -327
- package/_verture/index-e9007d6a.js +0 -236
- package/_verture/intl-5c1ec055.js +0 -81
- package/_verture/toConsumableArray-8f4c9589.js +0 -19
- package/_verture/unsupportedIterableToArray-cb478f24.js +0 -16
package/Select/index.js
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
|
|
2
|
-
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
|
|
3
|
-
import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
|
|
4
|
-
import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
|
|
5
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
6
2
|
import React__default, { useRef, useState, useEffect, useMemo } from 'react';
|
|
7
3
|
import Empty from '../Empty/index.js';
|
|
8
4
|
import Label from '../Label/index.js';
|
|
9
|
-
import { D as Dropdown } from '../_verture/index-
|
|
5
|
+
import { D as Dropdown } from '../_verture/index-da9097d3.js';
|
|
10
6
|
import { UUID, DeepClone } from '@paraview/lib';
|
|
11
7
|
import GlobalContext from '@para-ui/core/GlobalContext';
|
|
12
8
|
import CloseIcon from '@para-ui/icons/Close';
|
|
@@ -14,16 +10,15 @@ import CloseCircleF from '@para-ui/icons/CloseCircleF';
|
|
|
14
10
|
import Down from '@para-ui/icons/Down';
|
|
15
11
|
import Check from '@para-ui/icons/Check';
|
|
16
12
|
import SearchIcon from '@para-ui/icons/Search';
|
|
17
|
-
import { u as useFormatMessage } from '../_verture/useFormatMessage-
|
|
13
|
+
import { u as useFormatMessage } from '../_verture/useFormatMessage-eb13cf56.js';
|
|
18
14
|
import AutoTips from '../AutoTips/index.js';
|
|
19
15
|
import { Loading } from '../Loading/index.js';
|
|
20
16
|
import { Popover } from '../Popover/index.js';
|
|
21
17
|
import { Tooltip } from '../Tooltip/index.js';
|
|
22
18
|
import HelperText from '../HelperText/index.js';
|
|
23
|
-
import { u as useGlobalProps } from '../_verture/useGlobalProps-
|
|
24
|
-
import { $ as $prefixCls } from '../_verture/constant-
|
|
19
|
+
import { u as useGlobalProps } from '../_verture/useGlobalProps-1e416658.js';
|
|
20
|
+
import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
|
|
25
21
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
26
|
-
import '../_verture/unsupportedIterableToArray-cb478f24.js';
|
|
27
22
|
import 'clsx';
|
|
28
23
|
import '../_verture/tslib.es6-55ed4bd2.js';
|
|
29
24
|
import '../Help/index.js';
|
|
@@ -32,7 +27,7 @@ import 'rc-tooltip';
|
|
|
32
27
|
import 'rc-tooltip/lib/placements';
|
|
33
28
|
import '@para-ui/icons/Forbid';
|
|
34
29
|
import 'rc-dropdown';
|
|
35
|
-
import '../_verture/usePopupContainer-
|
|
30
|
+
import '../_verture/usePopupContainer-635f66f4.js';
|
|
36
31
|
import 'dayjs';
|
|
37
32
|
import '@para-ui/icons/LoadingF';
|
|
38
33
|
|
|
@@ -47,8 +42,8 @@ var zh = {
|
|
|
47
42
|
};
|
|
48
43
|
|
|
49
44
|
var localeJson = {
|
|
50
|
-
zh
|
|
51
|
-
en
|
|
45
|
+
zh,
|
|
46
|
+
en
|
|
52
47
|
};
|
|
53
48
|
|
|
54
49
|
var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-select {\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n font-weight: 400;\n display: inline-block;\n vertical-align: top;\n width: 100%;\n}\n.paraui-v4-select > .select-content {\n line-height: 0;\n border: 1px solid;\n border-radius: 4px;\n border-color: rgb(212, 218, 227);\n padding-right: 10px;\n position: relative;\n cursor: pointer;\n background-color: rgb(255, 255, 255);\n}\n.paraui-v4-select > .select-content:hover {\n border-color: rgb(87, 131, 235);\n}\n.paraui-v4-select > .select-content:hover > .select-svg > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .select-label-placeholder {\n width: 100%;\n height: 100%;\n padding: 0 10px;\n color: rgb(161, 168, 179);\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n}\n.paraui-v4-select > .select-content > .select-label-placeholder > .select-required {\n margin-left: 2px;\n color: rgb(244, 66, 66);\n}\n.paraui-v4-select > .select-content > .select-svg {\n position: absolute;\n right: 10px;\n top: 0;\n z-index: 2;\n}\n.paraui-v4-select > .select-content > .select-svg > svg {\n font-size: 18px;\n transition: all 0.3s;\n color: rgb(92, 101, 115);\n opacity: 0;\n}\n.paraui-v4-select > .select-content > .select-svg > .clean-up-icon {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n}\n.paraui-v4-select > .select-content > .select-svg > .clean-up-icon > svg {\n font-size: 16px;\n transition: all 0.3s;\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select > .select-content > .select-svg > .clean-up-icon:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .radio-select-content {\n padding-left: 10px;\n font-size: 14px;\n line-height: 1.43;\n color: rgb(29, 33, 38);\n word-break: break-all;\n}\n.paraui-v4-select > .select-content > .radio-search-outside {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n line-height: 1.43;\n padding: 0 30px 0 10px;\n font-size: 14px;\n cursor: pointer;\n color: rgb(29, 33, 38);\n border: 0;\n border-radius: 4px;\n background: transparent;\n}\n.paraui-v4-select > .select-content > .check-select-content {\n padding-left: 10px;\n overflow: hidden;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item {\n display: inline-block;\n background-color: rgb(234, 236, 241);\n border-radius: 4px;\n padding: 0 10px;\n color: rgb(29, 33, 38);\n margin-right: 4px;\n vertical-align: top;\n max-width: 100%;\n white-space: nowrap;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more {\n cursor: pointer;\n color: rgb(29, 33, 38);\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more > span {\n max-width: none;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more:hover {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item > span {\n display: inline-block;\n height: 100%;\n vertical-align: top;\n max-width: calc(100% - 20px);\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item > svg {\n cursor: pointer;\n margin-left: 4px;\n color: rgb(29, 33, 38);\n font-size: 16px;\n position: relative;\n z-index: 10;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item > svg:hover {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-noclose > span {\n max-width: none;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-search-outside {\n width: 10px;\n max-width: 100% !important;\n display: none;\n border: 0;\n color: rgb(29, 33, 38);\n font-size: 14px;\n cursor: pointer;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear > .select-content {\n padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear > .select-content .select-label-placeholder {\n padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear.paraui-v4-select-value > .select-content:hover > .select-svg > svg {\n opacity: 0;\n transition: all 0s;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear.paraui-v4-select-value > .select-content:hover > .select-svg > .clean-up-icon {\n opacity: 1;\n transition: all 0.3s;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear.paraui-v4-select-value.paraui-v4-select-disabled > .select-content:hover > .select-svg > svg {\n opacity: 1;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-small > .select-content {\n height: inherit;\n min-height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-small > .select-content > .check-select-content {\n height: 100%;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-medium > .select-content {\n height: inherit;\n min-height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-medium > .select-content > .check-select-content {\n height: 100%;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-large > .select-content {\n height: inherit;\n min-height: 32px;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-large > .select-content > .check-select-content {\n height: 100%;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content {\n padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content .select-label-placeholder {\n padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content > .select-svg > svg {\n opacity: 1;\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content {\n background-color: rgb(247, 248, 250);\n cursor: not-allowed;\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content:hover {\n border-color: rgb(212, 218, 227);\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content:hover > .select-svg > svg {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content > .radio-select-content {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content > .check-select-content > .check-select-content-item > span {\n max-width: 100%;\n}\n.paraui-v4-select.paraui-v4-select-error > .select-content {\n border-color: rgb(244, 66, 66) !important;\n}\n.paraui-v4-select.paraui-v4-select-open > .select-content {\n border-color: rgb(46, 101, 230);\n}\n.paraui-v4-select.paraui-v4-select-open > .select-content > .select-svg > svg {\n transform: rotate(180deg);\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select.paraui-v4-select-open > .select-content > .check-select-content > .check-search-outside {\n display: inline-block;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content {\n height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .select-label-placeholder {\n line-height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .select-svg {\n top: 4px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .radio-select-content {\n padding-bottom: 3px;\n padding-top: 3px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content {\n padding-bottom: 3px;\n height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 3px;\n height: 20px;\n line-height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content > .check-search-outside {\n margin-top: 3px;\n height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content {\n height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .select-label-placeholder {\n line-height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .select-svg {\n top: 4px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .radio-select-content {\n padding-bottom: 3px;\n padding-top: 3px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content {\n padding-bottom: 3px;\n height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 3px;\n height: 20px;\n line-height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content > .check-search-outside {\n margin-top: 3px;\n height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content {\n height: 32px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .select-label-placeholder {\n line-height: 30px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .select-svg {\n top: 6px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .radio-select-content {\n padding-bottom: 5px;\n padding-top: 5px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content {\n padding-bottom: 3px;\n height: 30px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 3px;\n height: 24px;\n line-height: 24px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 3px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content > .check-search-outside {\n margin-top: 4px;\n height: 22px;\n}\n\n.paraui-v4-select-popover.component-dropdown {\n /*&.paraui-v4-select-popover-small {\n & > .select-popover-content {\n & > .select-popover-search {\n height: 30px;\n }\n\n & > .select-popover-list {\n & .select-popover-list-item {\n height: 30px;\n line-height: 30px;\n }\n\n & > .select-popover-list-group {\n & .select-popover-list-group-label {\n height: 30px;\n line-height: 30px;\n }\n }\n }\n }\n }\n\n // 中\n &.paraui-v4-select-popover-medium {\n & > .select-popover-content {\n & > .select-popover-search {\n height: 30px;\n }\n\n & > .select-popover-list {\n & .select-popover-list-item {\n height: 30px;\n line-height: 30px;\n }\n\n & > .select-popover-list-group {\n & .select-popover-list-group-label {\n height: 30px;\n line-height: 30px;\n }\n }\n }\n }\n }\n\n // 大\n &.paraui-v4-select-popover-large {\n & > .select-popover-content {\n & > .select-popover-search {\n height: 30px;\n }\n\n & > .select-popover-list {\n & .select-popover-list-item {\n height: 30px;\n line-height: 30px;\n }\n\n & > .select-popover-list-group {\n & .select-popover-list-group-label {\n height: 30px;\n line-height: 30px;\n }\n }\n }\n }\n }*/\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content {\n padding: 4px 0;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list {\n padding-top: 0px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list > .select-nodata {\n margin-top: 20px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search {\n display: flex;\n align-items: center;\n padding: 0 10px;\n border-bottom: 1px solid;\n border-color: rgb(234, 236, 241);\n height: 30px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input {\n border: 0;\n outline: none;\n font-size: 14px;\n color: rgb(29, 33, 38);\n width: 100%;\n height: 100%;\n line-height: 1.43;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::placeholder {\n font-size: 14px;\n opacity: 1;\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-ms-clear {\n display: none;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-ms-reveal {\n display: none;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input:-moz-placeholder {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-moz-placeholder {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input:-ms-input-placeholder { /* Internet Explorer 10-11 */\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-ms-input-placeholder { /* Microsoft Edge */\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > svg {\n color: rgb(92, 101, 115);\n font-size: 18px;\n cursor: pointer;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list {\n max-height: 320px;\n overflow: auto;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list.select-popover-list-loading {\n height: 100px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item {\n display: flex;\n cursor: pointer;\n padding: 0 10px;\n align-items: center;\n height: 30px;\n line-height: 30px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-label {\n flex: 1;\n overflow: hidden;\n color: rgb(29, 33, 38);\n font-size: 14px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-svg {\n line-height: 0;\n display: none;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-svg > svg {\n font-size: 18px;\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-select > .select-popover-list-item-label {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-select > .select-popover-list-item-svg {\n display: inline-block;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-keydown {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-disabled {\n cursor: not-allowed;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-disabled > .select-popover-list-item-label {\n color: rgb(161, 168, 179) !important;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-group-label {\n display: inline-block;\n width: 100%;\n padding: 0 10px;\n color: rgb(161, 168, 179);\n font-size: 12px;\n height: 30px;\n line-height: 30px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-nodata {\n text-align: center;\n font-size: 14px;\n color: rgb(29, 33, 38);\n margin-top: 16px;\n margin-bottom: 29px;\n}\n.paraui-v4-select-more-popover {\n /*// 小\n &.paraui-v4-select-more-popover-small {\n & .select-more {\n & > .select-more-title {\n line-height: 28px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 28px;\n }\n }\n }\n }\n\n // 中\n &.paraui-v4-select-more-popover-medium {\n & .select-more {\n & > .select-more-title {\n line-height: 32px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 32px;\n }\n }\n }\n }\n\n // 大\n &.paraui-v4-select-more-popover-large {\n & .select-more {\n & > .select-more-title {\n line-height: 36px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 36px;\n }\n }\n }\n }*/\n}\n.paraui-v4-select-more-popover .select-more {\n width: 290px;\n padding: 4px 0;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-title {\n font-size: 12px;\n padding: 0 10px;\n color: rgb(161, 168, 179);\n line-height: 30px;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content {\n max-height: 320px;\n overflow: auto;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item {\n padding: 0 10px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n line-height: 30px;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item:hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n flex: 1;\n overflow: hidden;\n display: inline-block;\n font-size: 14px;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n font-size: 18px;\n position: relative;\n cursor: pointer;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n color: rgb(46, 101, 230);\n border-radius: 2px;\n}";
|
|
@@ -60,17 +55,17 @@ styleInject(css_248z);
|
|
|
60
55
|
* @param fontFamily 字体类型
|
|
61
56
|
* @param text 文本
|
|
62
57
|
*/
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
const textSize = (fontSize, fontFamily, text) => {
|
|
59
|
+
const span = document.createElement('span');
|
|
65
60
|
span.id = 'referenceSpan';
|
|
66
|
-
|
|
61
|
+
const result = {};
|
|
67
62
|
result.width = span.offsetWidth;
|
|
68
63
|
result.height = span.offsetHeight;
|
|
69
64
|
span.style.visibility = 'hidden';
|
|
70
65
|
span.style.fontSize = fontSize;
|
|
71
66
|
span.style.fontFamily = fontFamily;
|
|
72
67
|
span.style.display = 'inline-block';
|
|
73
|
-
|
|
68
|
+
const isExists = document.getElementById('referenceSpan');
|
|
74
69
|
if (isExists) {
|
|
75
70
|
document.body.removeChild(isExists);
|
|
76
71
|
}
|
|
@@ -85,85 +80,67 @@ var textSize = function textSize(fontSize, fontFamily, text) {
|
|
|
85
80
|
document.body.removeChild(span);
|
|
86
81
|
return result;
|
|
87
82
|
};
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
React__default.useEffect(
|
|
83
|
+
const useDidMountEffect = (func, deps) => {
|
|
84
|
+
const didMount = React__default.useRef(false);
|
|
85
|
+
React__default.useEffect(() => {
|
|
91
86
|
if (didMount.current) func();else didMount.current = true;
|
|
92
87
|
// eslint-disable-next-line
|
|
93
88
|
}, deps);
|
|
94
89
|
};
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
className
|
|
98
|
-
style
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
onChange = _useGlobalProps.onChange,
|
|
138
|
-
_useGlobalProps$overL = _useGlobalProps.overLine,
|
|
139
|
-
overLine = _useGlobalProps$overL === void 0 ? false : _useGlobalProps$overL,
|
|
140
|
-
_useGlobalProps$searc = _useGlobalProps.search,
|
|
141
|
-
search = _useGlobalProps$searc === void 0 ? false : _useGlobalProps$searc,
|
|
142
|
-
_useGlobalProps$searc2 = _useGlobalProps.searchModel,
|
|
143
|
-
searchModel = _useGlobalProps$searc2 === void 0 ? 'inside' : _useGlobalProps$searc2,
|
|
144
|
-
selectPopoverClassName = _useGlobalProps.selectPopoverClassName,
|
|
145
|
-
morePopoverClassName = _useGlobalProps.morePopoverClassName;
|
|
146
|
-
_useGlobalProps.fetchSuggestions;
|
|
147
|
-
var searchInputProps = _useGlobalProps.searchInputProps,
|
|
148
|
-
onEnter = _useGlobalProps.onEnter,
|
|
149
|
-
onEnterInput = _useGlobalProps.onEnterInput,
|
|
150
|
-
onClear = _useGlobalProps.onClear,
|
|
151
|
-
getPopupContainer = _useGlobalProps.getPopupContainer,
|
|
152
|
-
renderContent = _useGlobalProps.renderContent,
|
|
153
|
-
_useGlobalProps$selec = _useGlobalProps.selectCheckIcon,
|
|
154
|
-
selectCheckIcon = _useGlobalProps$selec === void 0 ? true : _useGlobalProps$selec;
|
|
90
|
+
const Select = props => {
|
|
91
|
+
const {
|
|
92
|
+
className,
|
|
93
|
+
style,
|
|
94
|
+
showSelect = true,
|
|
95
|
+
allowClear = false,
|
|
96
|
+
emptyProps,
|
|
97
|
+
size = 'large',
|
|
98
|
+
labelMode = 'outside',
|
|
99
|
+
labelTooltip,
|
|
100
|
+
placeholder = '',
|
|
101
|
+
searchPlaceholder,
|
|
102
|
+
label = '',
|
|
103
|
+
input = false,
|
|
104
|
+
disabled = false,
|
|
105
|
+
disabledTooltip,
|
|
106
|
+
multiple = false,
|
|
107
|
+
required = false,
|
|
108
|
+
labelSign,
|
|
109
|
+
error = false,
|
|
110
|
+
hideErrorDom,
|
|
111
|
+
helperText = '',
|
|
112
|
+
list,
|
|
113
|
+
showName = 'label',
|
|
114
|
+
showValue = 'value',
|
|
115
|
+
childrenName = 'children',
|
|
116
|
+
value,
|
|
117
|
+
onChange,
|
|
118
|
+
overLine = false,
|
|
119
|
+
search = false,
|
|
120
|
+
searchModel = 'inside',
|
|
121
|
+
selectPopoverClassName,
|
|
122
|
+
morePopoverClassName,
|
|
123
|
+
fetchSuggestions,
|
|
124
|
+
searchInputProps,
|
|
125
|
+
onEnter,
|
|
126
|
+
onEnterInput,
|
|
127
|
+
onClear,
|
|
128
|
+
getPopupContainer,
|
|
129
|
+
renderContent,
|
|
130
|
+
selectCheckIcon = true
|
|
131
|
+
} = useGlobalProps(props, 'Select');
|
|
155
132
|
/**
|
|
156
133
|
* 处理初始化数据,让list支持传入字符串
|
|
157
134
|
* 把数组转换成,组件能接收的格式
|
|
158
135
|
* */
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
for (
|
|
162
|
-
|
|
163
|
-
if (
|
|
136
|
+
const handList = arr => {
|
|
137
|
+
const handArr = [];
|
|
138
|
+
for (let i = 0, l = arr.length; i < l; i++) {
|
|
139
|
+
const item = arr[i];
|
|
140
|
+
if (typeof item === 'object' && item !== null) {
|
|
164
141
|
handArr.push(item);
|
|
165
142
|
} else {
|
|
166
|
-
|
|
143
|
+
const obj = {};
|
|
167
144
|
obj[showName] = item;
|
|
168
145
|
obj[showValue] = item;
|
|
169
146
|
handArr.push(obj);
|
|
@@ -171,8 +148,8 @@ var Select = function Select(props) {
|
|
|
171
148
|
}
|
|
172
149
|
return handArr;
|
|
173
150
|
};
|
|
174
|
-
|
|
175
|
-
|
|
151
|
+
const handleInitValue = () => {
|
|
152
|
+
let valArr = [];
|
|
176
153
|
if (props.defaultValue !== undefined) {
|
|
177
154
|
if (props.multiple) {
|
|
178
155
|
// 多选
|
|
@@ -193,97 +170,59 @@ var Select = function Select(props) {
|
|
|
193
170
|
}
|
|
194
171
|
return valArr;
|
|
195
172
|
};
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
for (
|
|
200
|
-
|
|
173
|
+
const handleIntlList = () => {
|
|
174
|
+
const listHand = handList(list);
|
|
175
|
+
const json = {};
|
|
176
|
+
for (let i = 0, l = listHand.length; i < l; i++) {
|
|
177
|
+
const item = listHand[i];
|
|
201
178
|
if (item[childrenName] && item[childrenName].length > 0) {
|
|
202
|
-
|
|
203
|
-
for (
|
|
204
|
-
|
|
205
|
-
|
|
179
|
+
const childArr = item[childrenName];
|
|
180
|
+
for (let j = 0, k = childArr.length; j < k; j++) {
|
|
181
|
+
const childItem = childArr[j];
|
|
182
|
+
const key = childItem[showValue];
|
|
206
183
|
json[key] = childItem;
|
|
207
184
|
}
|
|
208
185
|
} else {
|
|
209
|
-
|
|
210
|
-
json[
|
|
186
|
+
const key = item[showValue];
|
|
187
|
+
json[key] = item;
|
|
211
188
|
}
|
|
212
189
|
}
|
|
213
190
|
return json;
|
|
214
191
|
};
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
setListCom = _useState12[1]; // 下拉框渲染
|
|
238
|
-
var _useState13 = useState(handleIntlList()),
|
|
239
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
240
|
-
listJson = _useState14[0],
|
|
241
|
-
setListJson = _useState14[1]; // 下拉选项对象
|
|
242
|
-
var _useState15 = useState(null),
|
|
243
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
244
|
-
morePos = _useState16[0],
|
|
245
|
-
setMorePos = _useState16[1]; // 超出在原始位置
|
|
246
|
-
var _useState17 = useState(false),
|
|
247
|
-
_useState18 = _slicedToArray(_useState17, 2),
|
|
248
|
-
openMore = _useState18[0],
|
|
249
|
-
setOpenMore = _useState18[1]; // 显示更多
|
|
250
|
-
var _useState19 = useState(''),
|
|
251
|
-
_useState20 = _slicedToArray(_useState19, 2),
|
|
252
|
-
searchValue = _useState20[0],
|
|
253
|
-
setSearchValue = _useState20[1]; // 搜索值
|
|
254
|
-
var _useState21 = useState(false),
|
|
255
|
-
_useState22 = _slicedToArray(_useState21, 2),
|
|
256
|
-
overLineCom = _useState22[0],
|
|
257
|
-
setOverLineCom = _useState22[1]; // 超出是否换行
|
|
258
|
-
var _useState23 = useState(false),
|
|
259
|
-
_useState24 = _slicedToArray(_useState23, 2),
|
|
260
|
-
loading = _useState24[0],
|
|
261
|
-
setLoading = _useState24[1]; // 下拉加载loading
|
|
262
|
-
var _useState25 = useState(false),
|
|
263
|
-
_useState26 = _slicedToArray(_useState25, 2),
|
|
264
|
-
emptyBol = _useState26[0],
|
|
265
|
-
setEmptyBol = _useState26[1]; // 延迟显示空状态
|
|
266
|
-
var textDom = useRef(null);
|
|
267
|
-
var _useState27 = useState({}),
|
|
268
|
-
_useState28 = _slicedToArray(_useState27, 1),
|
|
269
|
-
constData = _useState28[0]; // 不变的常量 多行 不换行定时器 搜索定时器
|
|
270
|
-
var _React$useContext = React__default.useContext(GlobalContext),
|
|
271
|
-
language = _React$useContext.language,
|
|
272
|
-
locale = _React$useContext.locale;
|
|
273
|
-
var intl = useFormatMessage('Select', localeJson);
|
|
274
|
-
constData.valueCom = _toConsumableArray(valueCom);
|
|
192
|
+
const posDom = useRef(null);
|
|
193
|
+
const [classOne] = useState("".concat($prefixCls, "-select-").concat(UUID())); // 唯一class
|
|
194
|
+
const [classOneSelect] = useState("select-popover-".concat(UUID())); // 唯一class
|
|
195
|
+
const [open, setOpen] = useState(false); // 是否打开下拉框
|
|
196
|
+
const [showText, setShowText] = useState(false); // 是否显示lable,placeholder, true不显示
|
|
197
|
+
const [valueCom, setValueCom] = useState(handleInitValue()); // 值
|
|
198
|
+
const [listCom, setListCom] = useState([]); // 下拉框渲染
|
|
199
|
+
const [listJson, setListJson] = useState(handleIntlList()); // 下拉选项对象
|
|
200
|
+
const [morePos, setMorePos] = useState(null); // 超出在原始位置
|
|
201
|
+
const [openMore, setOpenMore] = useState(false); // 显示更多
|
|
202
|
+
const [searchValue, setSearchValue] = useState(''); // 搜索值
|
|
203
|
+
const [overLineCom, setOverLineCom] = useState(false); // 超出是否换行
|
|
204
|
+
const [loading, setLoading] = useState(false); // 下拉加载loading
|
|
205
|
+
const [emptyBol, setEmptyBol] = useState(false); // 延迟显示空状态
|
|
206
|
+
const textDom = useRef(null);
|
|
207
|
+
const [constData] = useState({}); // 不变的常量 多行 不换行定时器 搜索定时器
|
|
208
|
+
const {
|
|
209
|
+
language,
|
|
210
|
+
locale
|
|
211
|
+
} = React__default.useContext(GlobalContext);
|
|
212
|
+
const intl = useFormatMessage('Select', localeJson);
|
|
213
|
+
constData.valueCom = [...valueCom];
|
|
275
214
|
constData.listCom = listCom;
|
|
276
215
|
constData.searchModel = searchModel;
|
|
277
216
|
constData.openMore = openMore;
|
|
278
|
-
useEffect(
|
|
279
|
-
return
|
|
217
|
+
useEffect(() => {
|
|
218
|
+
return () => {
|
|
280
219
|
clearTimeout(constData.searchTimer);
|
|
281
220
|
clearTimeout(constData.timer);
|
|
282
221
|
clearTimeout(constData.scrollTimer);
|
|
283
222
|
};
|
|
284
223
|
}, []);
|
|
285
224
|
// 赋值value
|
|
286
|
-
useDidMountEffect(
|
|
225
|
+
useDidMountEffect(() => {
|
|
287
226
|
if (value !== undefined) {
|
|
288
227
|
if (multiple) {
|
|
289
228
|
// 多选
|
|
@@ -294,24 +233,23 @@ var Select = function Select(props) {
|
|
|
294
233
|
}
|
|
295
234
|
}
|
|
296
235
|
}, [value, multiple]);
|
|
297
|
-
useEffect(
|
|
236
|
+
useEffect(() => {
|
|
298
237
|
changeSize();
|
|
299
238
|
}, [valueCom, value]);
|
|
300
239
|
// 判断组件超出是换行,还是不换行
|
|
301
|
-
useEffect(
|
|
240
|
+
useEffect(() => {
|
|
302
241
|
if (searchModel === 'outside') {
|
|
303
242
|
if (multiple) return setOverLineCom(true); // 多选,输入框在框里面,超出必须换行
|
|
304
243
|
//return setOverLineCom(false); // 单选不换行
|
|
305
244
|
}
|
|
306
|
-
|
|
307
245
|
setOverLineCom(overLine);
|
|
308
246
|
}, [overLine, searchModel, multiple, input]);
|
|
309
247
|
// 计算下拉选项,处理下拉选项json
|
|
310
|
-
useDidMountEffect(
|
|
248
|
+
useDidMountEffect(() => {
|
|
311
249
|
setListJson(handleIntlList());
|
|
312
250
|
}, [list]);
|
|
313
251
|
// 多行,不换行计算
|
|
314
|
-
useEffect(
|
|
252
|
+
useEffect(() => {
|
|
315
253
|
// 多行不换行计算
|
|
316
254
|
if (!overLineCom && multiple) {
|
|
317
255
|
window.addEventListener('resize', changeSize);
|
|
@@ -319,12 +257,12 @@ var Select = function Select(props) {
|
|
|
319
257
|
//setMorePos(constData.valueCom.length)
|
|
320
258
|
window.removeEventListener('resize', changeSize);
|
|
321
259
|
}
|
|
322
|
-
return
|
|
260
|
+
return () => {
|
|
323
261
|
window.removeEventListener('resize', changeSize);
|
|
324
262
|
};
|
|
325
263
|
}, [overLineCom, multiple]);
|
|
326
264
|
// 计算是否显示label,placehold
|
|
327
|
-
useEffect(
|
|
265
|
+
useEffect(() => {
|
|
328
266
|
if (valueCom && valueCom.length > 0) {
|
|
329
267
|
setShowText(true); // 有值不显示label,placehold
|
|
330
268
|
} else {
|
|
@@ -335,25 +273,25 @@ var Select = function Select(props) {
|
|
|
335
273
|
}
|
|
336
274
|
}, [search, searchValue, searchModel, valueCom, input]);
|
|
337
275
|
// 筛选下拉框数据
|
|
338
|
-
useEffect(
|
|
276
|
+
useEffect(() => {
|
|
339
277
|
if (!open) return;
|
|
340
278
|
setLoading(true);
|
|
341
279
|
if (props.fetchSuggestions) {
|
|
342
|
-
props.fetchSuggestions(searchValue,
|
|
343
|
-
|
|
280
|
+
props.fetchSuggestions(searchValue, data => {
|
|
281
|
+
const listHand = handList(data);
|
|
344
282
|
handSelectList(listHand, true);
|
|
345
283
|
setLoading(false);
|
|
346
284
|
});
|
|
347
285
|
} else {
|
|
348
|
-
|
|
286
|
+
const listHand = handList(list);
|
|
349
287
|
handSelectList(listHand);
|
|
350
288
|
setLoading(false);
|
|
351
289
|
}
|
|
352
290
|
}, [search, searchValue, list, open]);
|
|
353
|
-
useEffect(
|
|
291
|
+
useEffect(() => {
|
|
354
292
|
if (open) {
|
|
355
293
|
clearTimeout(constData.openTimer);
|
|
356
|
-
constData.openTimer = setTimeout(
|
|
294
|
+
constData.openTimer = setTimeout(() => {
|
|
357
295
|
inputFocus();
|
|
358
296
|
//window.addEventListener('click', clickCom);
|
|
359
297
|
window.addEventListener('keydown', keydownCom);
|
|
@@ -363,14 +301,14 @@ var Select = function Select(props) {
|
|
|
363
301
|
//window.removeEventListener('click', clickCom);
|
|
364
302
|
window.removeEventListener('keydown', keydownCom);
|
|
365
303
|
}
|
|
366
|
-
return
|
|
304
|
+
return () => {
|
|
367
305
|
clearTimeout(constData.openTimer);
|
|
368
306
|
//window.removeEventListener('click', clickCom);
|
|
369
307
|
window.removeEventListener('keydown', keydownCom);
|
|
370
308
|
};
|
|
371
309
|
}, [open]);
|
|
372
310
|
// 是否计算搜索框长度
|
|
373
|
-
useEffect(
|
|
311
|
+
useEffect(() => {
|
|
374
312
|
if (disabled === true) return;
|
|
375
313
|
if (multiple && searchModel === 'outside') handInputLength(searchValue);
|
|
376
314
|
}, [searchValue, multiple, disabled, searchModel, input]);
|
|
@@ -378,13 +316,13 @@ var Select = function Select(props) {
|
|
|
378
316
|
* 多选 不换行 计算
|
|
379
317
|
* @param index 数组下标
|
|
380
318
|
*/
|
|
381
|
-
|
|
319
|
+
const handMultiline = index => {
|
|
382
320
|
if (index === null || index === 0) return;
|
|
383
321
|
if (index === undefined) index = constData.valueCom.length;
|
|
384
|
-
|
|
322
|
+
const boxDom = document.querySelector(".".concat(classOne, " > .select-content > .check-select-content"));
|
|
385
323
|
if (!boxDom) return;
|
|
386
324
|
if (boxDom.scrollHeight > boxDom.clientHeight) {
|
|
387
|
-
|
|
325
|
+
const num = Number(index) - 1;
|
|
388
326
|
// 超出
|
|
389
327
|
setMorePos(num);
|
|
390
328
|
handMultiline(num);
|
|
@@ -394,10 +332,10 @@ var Select = function Select(props) {
|
|
|
394
332
|
}
|
|
395
333
|
};
|
|
396
334
|
// 多选 不换行
|
|
397
|
-
|
|
335
|
+
const changeSize = () => {
|
|
398
336
|
if (constData.valueCom.length === 0) return setMorePos(null);
|
|
399
337
|
clearTimeout(constData.timer);
|
|
400
|
-
constData.timer = setTimeout(
|
|
338
|
+
constData.timer = setTimeout(() => {
|
|
401
339
|
setMorePos(constData.valueCom.length);
|
|
402
340
|
handMultiline();
|
|
403
341
|
}, 50);
|
|
@@ -407,20 +345,20 @@ var Select = function Select(props) {
|
|
|
407
345
|
* @param listData 数据源
|
|
408
346
|
* @param customSearch 是否自定义搜索
|
|
409
347
|
* */
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
for (
|
|
414
|
-
|
|
348
|
+
const handSelectList = (listData, customSearch) => {
|
|
349
|
+
const arr = [];
|
|
350
|
+
const listDeep = [...listData];
|
|
351
|
+
for (let i = 0, l = listDeep.length; i < l; i++) {
|
|
352
|
+
const item = listDeep[i];
|
|
415
353
|
if (item[childrenName] && item[childrenName].length > 0) {
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
for (
|
|
419
|
-
|
|
354
|
+
const childArr = item[childrenName];
|
|
355
|
+
const handChildArr = [];
|
|
356
|
+
for (let j = 0, k = childArr.length; j < k; j++) {
|
|
357
|
+
const childItem = childArr[j];
|
|
420
358
|
if (customSearch) {
|
|
421
359
|
handChildArr.push(childItem);
|
|
422
360
|
} else {
|
|
423
|
-
|
|
361
|
+
const bol = handShowItem(childItem);
|
|
424
362
|
if (bol) handChildArr.push(childItem);
|
|
425
363
|
}
|
|
426
364
|
}
|
|
@@ -433,8 +371,8 @@ var Select = function Select(props) {
|
|
|
433
371
|
if (customSearch) {
|
|
434
372
|
arr.push(item);
|
|
435
373
|
} else {
|
|
436
|
-
|
|
437
|
-
if (
|
|
374
|
+
const bol = handShowItem(item);
|
|
375
|
+
if (bol) arr.push(item);
|
|
438
376
|
}
|
|
439
377
|
}
|
|
440
378
|
}
|
|
@@ -443,8 +381,8 @@ var Select = function Select(props) {
|
|
|
443
381
|
setEmptyBol(arr.length === 0);
|
|
444
382
|
};
|
|
445
383
|
// 输入框的到焦点
|
|
446
|
-
|
|
447
|
-
|
|
384
|
+
const inputFocus = () => {
|
|
385
|
+
const inputDom = textDom && textDom.current;
|
|
448
386
|
if (constData.searchModel === 'inside') return;
|
|
449
387
|
inputDom && inputDom.focus({
|
|
450
388
|
preventScroll: true
|
|
@@ -455,8 +393,8 @@ var Select = function Select(props) {
|
|
|
455
393
|
* @param el 当前元素
|
|
456
394
|
* @param selector 查找元素class
|
|
457
395
|
*/
|
|
458
|
-
|
|
459
|
-
|
|
396
|
+
const closest = (el, selector) => {
|
|
397
|
+
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
|
|
460
398
|
while (el) {
|
|
461
399
|
if (matchesSelector.call(el, selector)) {
|
|
462
400
|
break;
|
|
@@ -470,11 +408,11 @@ var Select = function Select(props) {
|
|
|
470
408
|
* @param item 详细信息
|
|
471
409
|
* @return boolean
|
|
472
410
|
*/
|
|
473
|
-
|
|
474
|
-
|
|
411
|
+
const handShowItem = item => {
|
|
412
|
+
let bol = true;
|
|
475
413
|
if (searchValue.trim() === '') return bol;
|
|
476
414
|
// 按显示名来
|
|
477
|
-
|
|
415
|
+
let name = item[showName];
|
|
478
416
|
if (name && (typeof name === 'number' || typeof name === 'string')) {
|
|
479
417
|
name = name.toString();
|
|
480
418
|
if (name.toLowerCase().indexOf(searchValue.trim().toLowerCase()) === -1) {
|
|
@@ -486,25 +424,25 @@ var Select = function Select(props) {
|
|
|
486
424
|
return bol;
|
|
487
425
|
};
|
|
488
426
|
// 显示下拉框
|
|
489
|
-
|
|
427
|
+
const clickSelect = () => {
|
|
490
428
|
if (disabled === true) return;
|
|
491
429
|
setOpen(true);
|
|
492
430
|
};
|
|
493
431
|
// 关闭下拉框
|
|
494
|
-
|
|
432
|
+
const handleClose = () => {
|
|
495
433
|
setOpen(false);
|
|
496
434
|
};
|
|
497
435
|
/**
|
|
498
436
|
* 点击显示更多
|
|
499
437
|
* @param e 点击元素
|
|
500
438
|
*/
|
|
501
|
-
|
|
439
|
+
const clickMore = e => {
|
|
502
440
|
setOpenMore(true);
|
|
503
441
|
setOpen(false);
|
|
504
442
|
e.stopPropagation();
|
|
505
443
|
};
|
|
506
444
|
// 关闭显示更多
|
|
507
|
-
|
|
445
|
+
const handleCloseMore = () => {
|
|
508
446
|
if (constData.openMore) setOpenMore(false);
|
|
509
447
|
};
|
|
510
448
|
/**
|
|
@@ -513,32 +451,30 @@ var Select = function Select(props) {
|
|
|
513
451
|
* @param enter 是否回车
|
|
514
452
|
* @param e 元素
|
|
515
453
|
*/
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
constData.valueCom.splice(index, 1);
|
|
526
|
-
} else {
|
|
527
|
-
constData.valueCom.push(val);
|
|
528
|
-
}
|
|
529
|
-
if (props.value === undefined) setValueCom(_toConsumableArray(constData.valueCom));
|
|
530
|
-
onChange && onChange(_toConsumableArray(constData.valueCom), e);
|
|
531
|
-
if (enter) onEnter && onEnter(_toConsumableArray(constData.valueCom));
|
|
532
|
-
inputFocus();
|
|
454
|
+
const clickItem = (item, enter) => e => {
|
|
455
|
+
const val = item[showValue];
|
|
456
|
+
if (typeof disabled === 'object' && disabled.indexOf(val) !== -1) return;
|
|
457
|
+
if (multiple) {
|
|
458
|
+
// 多选
|
|
459
|
+
const index = constData.valueCom.indexOf(val);
|
|
460
|
+
if (index !== -1) {
|
|
461
|
+
// 存在 去除
|
|
462
|
+
constData.valueCom.splice(index, 1);
|
|
533
463
|
} else {
|
|
534
|
-
|
|
535
|
-
if (props.value === undefined) setValueCom([val]);
|
|
536
|
-
onChange && onChange(val, e);
|
|
537
|
-
if (enter) onEnter && onEnter(val);
|
|
538
|
-
handleClose();
|
|
539
|
-
setSearchValue('');
|
|
464
|
+
constData.valueCom.push(val);
|
|
540
465
|
}
|
|
541
|
-
|
|
466
|
+
if (props.value === undefined) setValueCom([...constData.valueCom]);
|
|
467
|
+
onChange && onChange([...constData.valueCom], e);
|
|
468
|
+
if (enter) onEnter && onEnter([...constData.valueCom]);
|
|
469
|
+
inputFocus();
|
|
470
|
+
} else {
|
|
471
|
+
// 单选
|
|
472
|
+
if (props.value === undefined) setValueCom([val]);
|
|
473
|
+
onChange && onChange(val, e);
|
|
474
|
+
if (enter) onEnter && onEnter(val);
|
|
475
|
+
handleClose();
|
|
476
|
+
setSearchValue('');
|
|
477
|
+
}
|
|
542
478
|
};
|
|
543
479
|
/**
|
|
544
480
|
* 多选删除index
|
|
@@ -546,16 +482,16 @@ var Select = function Select(props) {
|
|
|
546
482
|
* @param val 值
|
|
547
483
|
* @param e 元素
|
|
548
484
|
*/
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
clickItem(item)(e);
|
|
553
|
-
e.stopPropagation();
|
|
485
|
+
const delItem = (item, val) => e => {
|
|
486
|
+
if (!item) item = {
|
|
487
|
+
[showValue]: val
|
|
554
488
|
};
|
|
489
|
+
clickItem(item)(e);
|
|
490
|
+
e.stopPropagation();
|
|
555
491
|
};
|
|
556
492
|
// 处理下拉框class
|
|
557
|
-
|
|
558
|
-
|
|
493
|
+
const handClass = () => {
|
|
494
|
+
let str = "".concat($prefixCls, "-select");
|
|
559
495
|
if (multiple && !overLineCom) str += " ".concat(classOne); // 多选 超出不换行
|
|
560
496
|
if (className) str += " ".concat(className);
|
|
561
497
|
if (size) str += " ".concat($prefixCls, "-select-").concat(size);
|
|
@@ -570,8 +506,8 @@ var Select = function Select(props) {
|
|
|
570
506
|
return str;
|
|
571
507
|
};
|
|
572
508
|
// 处理下拉弹框class
|
|
573
|
-
|
|
574
|
-
|
|
509
|
+
const handleClassPopover = () => {
|
|
510
|
+
let str = "".concat($prefixCls, "-select-popover ").concat($prefixCls, "-scrollbar-small");
|
|
575
511
|
if (size) str += " ".concat($prefixCls, "-select-popover-").concat(size);
|
|
576
512
|
if (multiple) {
|
|
577
513
|
str += " ".concat($prefixCls, "-select-popover-multiple");
|
|
@@ -582,8 +518,8 @@ var Select = function Select(props) {
|
|
|
582
518
|
return str;
|
|
583
519
|
};
|
|
584
520
|
// 处理下拉框更多class
|
|
585
|
-
|
|
586
|
-
|
|
521
|
+
const handleClassMorePopover = () => {
|
|
522
|
+
let str = "".concat($prefixCls, "-select-more-popover ").concat($prefixCls, "-scrollbar-small");
|
|
587
523
|
if (size) str += " ".concat($prefixCls, "-select-more-popover-").concat(size);
|
|
588
524
|
if (morePopoverClassName) str += " ".concat(morePopoverClassName);
|
|
589
525
|
return str;
|
|
@@ -592,7 +528,7 @@ var Select = function Select(props) {
|
|
|
592
528
|
* 改变搜索输入框
|
|
593
529
|
* @param e 搜索框元素
|
|
594
530
|
*/
|
|
595
|
-
|
|
531
|
+
const changeSearch = e => {
|
|
596
532
|
setSearchValue(e.target.value);
|
|
597
533
|
searchInputProps && searchInputProps.onChange && searchInputProps.onChange(e);
|
|
598
534
|
};
|
|
@@ -600,20 +536,20 @@ var Select = function Select(props) {
|
|
|
600
536
|
* 回车搜索输入框
|
|
601
537
|
* @param e 搜索框元素
|
|
602
538
|
*/
|
|
603
|
-
|
|
539
|
+
const onKeyDownSearch = e => {
|
|
604
540
|
if (e.keyCode === 13) {
|
|
605
541
|
onEnterInput && onEnterInput(searchValue);
|
|
606
|
-
|
|
542
|
+
const selectDom = document.querySelector(".".concat(classOneSelect, " .select-popover-list"));
|
|
607
543
|
if (selectDom) {
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
544
|
+
const hoverDom = selectDom.querySelector('.select-popover-list-item-hover');
|
|
545
|
+
const keydownDom = selectDom.querySelector('.select-popover-list-item-keydown');
|
|
546
|
+
const operateDom = keydownDom || hoverDom;
|
|
611
547
|
if (operateDom) return;
|
|
612
548
|
}
|
|
613
549
|
if (props.input && searchValue.trim() !== '') {
|
|
614
|
-
|
|
550
|
+
let arr = '';
|
|
615
551
|
if (multiple) {
|
|
616
|
-
arr = [
|
|
552
|
+
arr = [...valueCom, searchValue];
|
|
617
553
|
} else {
|
|
618
554
|
arr = searchValue;
|
|
619
555
|
}
|
|
@@ -628,14 +564,14 @@ var Select = function Select(props) {
|
|
|
628
564
|
* 多选框设置input框长度
|
|
629
565
|
* @param text 文本
|
|
630
566
|
*/
|
|
631
|
-
|
|
632
|
-
|
|
567
|
+
const handInputLength = text => {
|
|
568
|
+
const inputDom = textDom && textDom.current;
|
|
633
569
|
if (!inputDom) return null;
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
570
|
+
const style = window.getComputedStyle(inputDom);
|
|
571
|
+
const fontFamily = style.fontFamily;
|
|
572
|
+
const fontSize = style.fontSize;
|
|
573
|
+
const results = textSize(fontSize, fontFamily, text);
|
|
574
|
+
let width = results.width;
|
|
639
575
|
if (width < 10) width = 10;
|
|
640
576
|
inputDom.style.width = "".concat(width, "px");
|
|
641
577
|
};
|
|
@@ -649,14 +585,16 @@ var Select = function Select(props) {
|
|
|
649
585
|
* currentDom: 当前元素
|
|
650
586
|
* }
|
|
651
587
|
*/
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
588
|
+
const handKeydown = config => {
|
|
589
|
+
const {
|
|
590
|
+
selectDom,
|
|
591
|
+
keyCode,
|
|
592
|
+
currentKeydownDom
|
|
593
|
+
} = config;
|
|
594
|
+
let brotherDom = null;
|
|
595
|
+
let type = 'nextSibling';
|
|
596
|
+
let classSelectStr = '.select-popover-list > div';
|
|
597
|
+
let classGroupStr = '.select-popover-list-item';
|
|
660
598
|
if (keyCode === 38) {
|
|
661
599
|
// 上
|
|
662
600
|
type = 'previousSibling';
|
|
@@ -675,7 +613,7 @@ var Select = function Select(props) {
|
|
|
675
613
|
if (!brotherDom) brotherDom = selectDom.querySelector(classSelectStr);
|
|
676
614
|
}
|
|
677
615
|
} else {
|
|
678
|
-
|
|
616
|
+
const parentNode = currentKeydownDom.parentNode;
|
|
679
617
|
if (parentNode && parentNode.className && parentNode.className.indexOf('select-popover-list-group') !== -1) {
|
|
680
618
|
// 组元素最后元素, 设置父级兄弟节点, 没有父级,设置最后或者第一节点
|
|
681
619
|
brotherDom = currentKeydownDom.parentNode; // 组元素
|
|
@@ -690,7 +628,7 @@ var Select = function Select(props) {
|
|
|
690
628
|
if (brotherDom) {
|
|
691
629
|
// 兄弟是组列表
|
|
692
630
|
if (brotherDom.className.indexOf('select-popover-list-group') !== -1) {
|
|
693
|
-
|
|
631
|
+
const currentDom = brotherDom.querySelector(classGroupStr);
|
|
694
632
|
if (currentDom) {
|
|
695
633
|
currentDom.classList.add('select-popover-list-item-keydown');
|
|
696
634
|
domClientTop(currentDom, selectDom);
|
|
@@ -706,11 +644,11 @@ var Select = function Select(props) {
|
|
|
706
644
|
* @param currentDom 当前元素
|
|
707
645
|
* @param selectDom 可见页面
|
|
708
646
|
*/
|
|
709
|
-
|
|
647
|
+
const domClientTop = (currentDom, selectDom) => {
|
|
710
648
|
clearTimeout(constData.scrollTimer);
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
649
|
+
const clientHeight = selectDom.clientHeight; // 可见区域的高度
|
|
650
|
+
const top = currentDom.offsetTop + currentDom.clientHeight;
|
|
651
|
+
const difference = top - clientHeight;
|
|
714
652
|
constData.scroll = true;
|
|
715
653
|
if (difference > 0) {
|
|
716
654
|
selectDom.scrollTop = difference;
|
|
@@ -718,7 +656,7 @@ var Select = function Select(props) {
|
|
|
718
656
|
selectDom.scrollTop = 0;
|
|
719
657
|
}
|
|
720
658
|
// 防止滚动触发hover效果
|
|
721
|
-
constData.scrollTimer = setTimeout(
|
|
659
|
+
constData.scrollTimer = setTimeout(() => {
|
|
722
660
|
constData.scroll = false;
|
|
723
661
|
}, 100);
|
|
724
662
|
};
|
|
@@ -726,19 +664,19 @@ var Select = function Select(props) {
|
|
|
726
664
|
* 键盘事件
|
|
727
665
|
* @param e 键盘信息
|
|
728
666
|
*/
|
|
729
|
-
|
|
730
|
-
|
|
667
|
+
const keydownCom = e => {
|
|
668
|
+
const selectDom = document.querySelector(".".concat(classOneSelect, " .select-popover-list"));
|
|
731
669
|
if (!selectDom) return;
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
670
|
+
const selectItemDom = selectDom.querySelector('.select-popover-list-item-select');
|
|
671
|
+
const hoverDom = selectDom.querySelector('.select-popover-list-item-hover');
|
|
672
|
+
const keydownDom = selectDom.querySelector('.select-popover-list-item-keydown');
|
|
673
|
+
let currentKeydownDom = selectItemDom; // 选中,hover,keydown元素
|
|
736
674
|
if (hoverDom) currentKeydownDom = hoverDom;
|
|
737
675
|
// 回车
|
|
738
676
|
if (e.keyCode === 13) {
|
|
739
|
-
|
|
677
|
+
const operateDom = keydownDom || hoverDom;
|
|
740
678
|
if (operateDom) {
|
|
741
|
-
|
|
679
|
+
const val = operateDom.dataset.val;
|
|
742
680
|
clickItem(listJson[val], true)({
|
|
743
681
|
target: keydownDom
|
|
744
682
|
});
|
|
@@ -753,17 +691,17 @@ var Select = function Select(props) {
|
|
|
753
691
|
// 下
|
|
754
692
|
if (e.keyCode === 40) {
|
|
755
693
|
handKeydown({
|
|
756
|
-
selectDom
|
|
694
|
+
selectDom,
|
|
757
695
|
keyCode: e.keyCode,
|
|
758
|
-
currentKeydownDom
|
|
696
|
+
currentKeydownDom
|
|
759
697
|
});
|
|
760
698
|
}
|
|
761
699
|
// 上
|
|
762
700
|
if (e.keyCode === 38) {
|
|
763
701
|
handKeydown({
|
|
764
|
-
selectDom
|
|
702
|
+
selectDom,
|
|
765
703
|
keyCode: e.keyCode,
|
|
766
|
-
currentKeydownDom
|
|
704
|
+
currentKeydownDom
|
|
767
705
|
});
|
|
768
706
|
}
|
|
769
707
|
};
|
|
@@ -771,30 +709,30 @@ var Select = function Select(props) {
|
|
|
771
709
|
* 鼠标移入
|
|
772
710
|
* @param e 移入元素
|
|
773
711
|
*/
|
|
774
|
-
|
|
712
|
+
const mouseEnter = e => {
|
|
775
713
|
if (constData.scroll) return;
|
|
776
|
-
|
|
714
|
+
const target = closest(e.target, '.select-popover-list-item');
|
|
777
715
|
if (!target) return;
|
|
778
716
|
target.classList.add('select-popover-list-item-hover');
|
|
779
717
|
// 鼠标移入清除所有keydown
|
|
780
|
-
|
|
781
|
-
|
|
718
|
+
const selectDom = document.querySelector(".".concat(classOneSelect));
|
|
719
|
+
const keydownDom = selectDom.querySelector('.select-popover-list-item-keydown');
|
|
782
720
|
if (keydownDom) keydownDom.classList.remove('select-popover-list-item-keydown');
|
|
783
721
|
};
|
|
784
722
|
/**
|
|
785
723
|
* 鼠标移出
|
|
786
724
|
* @param e 移出元素
|
|
787
725
|
*/
|
|
788
|
-
|
|
789
|
-
|
|
726
|
+
const mouseLeave = e => {
|
|
727
|
+
const target = closest(e.target, '.select-popover-list-item');
|
|
790
728
|
if (!target) return;
|
|
791
729
|
target.classList.remove('select-popover-list-item-hover');
|
|
792
730
|
};
|
|
793
731
|
// 外标题memo
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
732
|
+
const OutLabelMemo = useMemo(() => {
|
|
733
|
+
const bol = Boolean(label || required || labelSign);
|
|
734
|
+
const handLabelClass = () => {
|
|
735
|
+
let str = 'select-label';
|
|
798
736
|
if (labelTooltip && labelTooltip.className) {
|
|
799
737
|
str += " ".concat(labelTooltip.className);
|
|
800
738
|
}
|
|
@@ -811,8 +749,8 @@ var Select = function Select(props) {
|
|
|
811
749
|
});
|
|
812
750
|
}, [labelMode, label, labelSign, required, labelTooltip]);
|
|
813
751
|
// 内标题memo
|
|
814
|
-
|
|
815
|
-
|
|
752
|
+
const InsideMemo = useMemo(() => {
|
|
753
|
+
const handInsideContent = () => {
|
|
816
754
|
if (labelMode === 'outside') return placeholder;
|
|
817
755
|
return jsxs(Fragment, {
|
|
818
756
|
children: [label || placeholder, required && jsx("span", Object.assign({
|
|
@@ -835,9 +773,9 @@ var Select = function Select(props) {
|
|
|
835
773
|
/**
|
|
836
774
|
* 处理搜索框
|
|
837
775
|
* */
|
|
838
|
-
|
|
776
|
+
const handInput = type => {
|
|
839
777
|
if (disabled === true) return null;
|
|
840
|
-
|
|
778
|
+
const str = "".concat(type, "-search-outside");
|
|
841
779
|
if (searchModel === 'outside') {
|
|
842
780
|
return jsx("input", Object.assign({}, searchInputProps, {
|
|
843
781
|
className: str,
|
|
@@ -850,12 +788,12 @@ var Select = function Select(props) {
|
|
|
850
788
|
return null;
|
|
851
789
|
};
|
|
852
790
|
// 单选内容
|
|
853
|
-
|
|
854
|
-
|
|
791
|
+
const RadioMemo = useMemo(() => {
|
|
792
|
+
const handContent = () => {
|
|
855
793
|
// 有搜索值且(输入框在内容里面或者有输入赋值)
|
|
856
794
|
if (searchValue !== '' && (searchModel === 'outside' || input)) return null;
|
|
857
|
-
|
|
858
|
-
|
|
795
|
+
const val = listJson[valueCom[0]] && listJson[valueCom[0]][showName] || valueCom[0];
|
|
796
|
+
const renderContentVal = renderContent && renderContent(listJson[valueCom[0]], false);
|
|
859
797
|
if (overLineCom) return renderContentVal || val;
|
|
860
798
|
return jsx(AutoTips, Object.assign({
|
|
861
799
|
placement: 'top-start'
|
|
@@ -874,24 +812,23 @@ var Select = function Select(props) {
|
|
|
874
812
|
});
|
|
875
813
|
}, [multiple, showText, overLineCom, listJson, valueCom, showName, search, searchModel, searchValue, disabled, input, searchInputProps, renderContent]);
|
|
876
814
|
// 多选内容
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
815
|
+
const CheckMemo = useMemo(() => {
|
|
816
|
+
const handContent = index => {
|
|
817
|
+
const val = listJson[valueCom[index]] && listJson[valueCom[index]][showName] || valueCom[index];
|
|
818
|
+
const renderContentVal = renderContent && renderContent(listJson[valueCom[index]], false);
|
|
881
819
|
return renderContentVal || val;
|
|
882
820
|
};
|
|
883
821
|
return jsx(Fragment, {
|
|
884
822
|
children: multiple && jsxs("div", Object.assign({
|
|
885
823
|
className: "check-select-content"
|
|
886
824
|
}, {
|
|
887
|
-
children: [valueCom && valueCom.map(
|
|
825
|
+
children: [valueCom && valueCom.map((item, index) => {
|
|
888
826
|
if (morePos !== null && morePos <= index) return null;
|
|
889
|
-
|
|
890
|
-
if (disabled === true ||
|
|
827
|
+
let isClose = true;
|
|
828
|
+
if (disabled === true || typeof disabled === 'object' && disabled.indexOf(valueCom[index]) !== -1) {
|
|
891
829
|
isClose = false; // 禁用不显示×
|
|
892
830
|
}
|
|
893
|
-
|
|
894
|
-
var str = 'check-select-content-item check-select-content-item-select';
|
|
831
|
+
let str = 'check-select-content-item check-select-content-item-select';
|
|
895
832
|
if (!isClose) str += ' check-select-content-item-noclose';
|
|
896
833
|
return jsxs("div", Object.assign({
|
|
897
834
|
className: str
|
|
@@ -906,7 +843,7 @@ var Select = function Select(props) {
|
|
|
906
843
|
onClick: delItem(listJson[valueCom[index]], valueCom[index])
|
|
907
844
|
})]
|
|
908
845
|
}), index);
|
|
909
|
-
}),
|
|
846
|
+
}), (() => {
|
|
910
847
|
if (morePos !== null && valueCom.length > morePos) {
|
|
911
848
|
return jsx("div", Object.assign({
|
|
912
849
|
className: "check-select-content-item check-select-content-item-more",
|
|
@@ -917,20 +854,20 @@ var Select = function Select(props) {
|
|
|
917
854
|
})
|
|
918
855
|
}));
|
|
919
856
|
}
|
|
920
|
-
}(), handInput('check')]
|
|
857
|
+
})(), handInput('check')]
|
|
921
858
|
}))
|
|
922
859
|
});
|
|
923
860
|
}, [multiple, showText, valueCom, morePos, listJson, disabled, onChange, searchValue, search, searchModel, input, searchInputProps, renderContent]);
|
|
924
|
-
|
|
861
|
+
const clickClean = e => {
|
|
925
862
|
e.stopPropagation();
|
|
926
|
-
|
|
927
|
-
|
|
863
|
+
let val = '';
|
|
864
|
+
const valCom = [];
|
|
928
865
|
if (multiple) {
|
|
929
866
|
val = [];
|
|
930
867
|
// 判断多选的时候,有部分数据被禁用,禁用的数据不可删除
|
|
931
868
|
if (disabled instanceof Array) {
|
|
932
|
-
for (
|
|
933
|
-
|
|
869
|
+
for (let i = 0, l = valueCom.length; i < l; i++) {
|
|
870
|
+
const valueComItem = valueCom[i];
|
|
934
871
|
if (disabled.indexOf(valueComItem) !== -1) {
|
|
935
872
|
val.push(valueComItem);
|
|
936
873
|
valCom.push(valueComItem);
|
|
@@ -946,7 +883,7 @@ var Select = function Select(props) {
|
|
|
946
883
|
onClear && onClear();
|
|
947
884
|
};
|
|
948
885
|
// 清空内容
|
|
949
|
-
|
|
886
|
+
const clearRender = () => {
|
|
950
887
|
if (valueCom.length > 0 && disabled !== true && allowClear) {
|
|
951
888
|
return jsx("span", Object.assign({
|
|
952
889
|
className: "clean-up-icon",
|
|
@@ -956,10 +893,10 @@ var Select = function Select(props) {
|
|
|
956
893
|
}));
|
|
957
894
|
}
|
|
958
895
|
};
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
896
|
+
const morePopoverContent = () => {
|
|
897
|
+
const handContent = index => {
|
|
898
|
+
const val = listJson[valueCom[index]] && listJson[valueCom[index]][showName] || valueCom[index];
|
|
899
|
+
const renderContentVal = renderContent && renderContent(listJson[valueCom[index]], 'more');
|
|
963
900
|
return renderContentVal || val;
|
|
964
901
|
};
|
|
965
902
|
return jsxs("div", Object.assign({
|
|
@@ -976,13 +913,12 @@ var Select = function Select(props) {
|
|
|
976
913
|
})), jsx("div", Object.assign({
|
|
977
914
|
className: "select-more-content"
|
|
978
915
|
}, {
|
|
979
|
-
children: valueCom && valueCom.map(
|
|
916
|
+
children: valueCom && valueCom.map((item, index) => {
|
|
980
917
|
if (morePos !== null && morePos > index) return null;
|
|
981
|
-
|
|
982
|
-
if (disabled === true ||
|
|
918
|
+
let isClose = true;
|
|
919
|
+
if (disabled === true || typeof disabled === 'object' && disabled.indexOf(valueCom[index]) !== -1) {
|
|
983
920
|
isClose = false; // 禁用不显示×
|
|
984
921
|
}
|
|
985
|
-
|
|
986
922
|
return jsxs("div", Object.assign({
|
|
987
923
|
className: "select-more-content-item"
|
|
988
924
|
}, {
|
|
@@ -1001,7 +937,7 @@ var Select = function Select(props) {
|
|
|
1001
937
|
}));
|
|
1002
938
|
};
|
|
1003
939
|
// 主体内容
|
|
1004
|
-
|
|
940
|
+
const ContentMemo = useMemo(() => {
|
|
1005
941
|
return jsx(Popover, Object.assign({
|
|
1006
942
|
placement: "rightTop",
|
|
1007
943
|
visible: openMore,
|
|
@@ -1023,15 +959,15 @@ var Select = function Select(props) {
|
|
|
1023
959
|
}));
|
|
1024
960
|
}, [posDom, showText, labelMode, placeholder, label, labelSign, required, overLineCom, listJson, valueCom, showName, multiple, morePos, disabled, onChange, searchValue, searchModel, input, showSelect, searchInputProps, allowClear, onClear, openMore, renderContent]);
|
|
1025
961
|
// 下拉框popover 列表
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
962
|
+
const SelectPopoverListMemo = useMemo(() => {
|
|
963
|
+
const handClass = () => {
|
|
964
|
+
let str = 'select-popover-list';
|
|
1029
965
|
if (loading) str += ' select-popover-list-loading';
|
|
1030
966
|
return str;
|
|
1031
967
|
};
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
968
|
+
const handContent = item => {
|
|
969
|
+
const val = item[showName] || item[showValue];
|
|
970
|
+
const renderContentVal = renderContent && renderContent(item, true);
|
|
1035
971
|
return jsxs(Fragment, {
|
|
1036
972
|
children: [jsx("span", Object.assign({
|
|
1037
973
|
className: "select-popover-list-item-label"
|
|
@@ -1055,9 +991,9 @@ var Select = function Select(props) {
|
|
|
1055
991
|
}
|
|
1056
992
|
}, {
|
|
1057
993
|
children: [listCom && listCom.length > 0 ? jsx(Fragment, {
|
|
1058
|
-
children: listCom.map(
|
|
994
|
+
children: listCom.map((item, index) => {
|
|
1059
995
|
if (item[childrenName] && item[childrenName].length > 0) {
|
|
1060
|
-
|
|
996
|
+
const childrenList = item[childrenName];
|
|
1061
997
|
return jsxs("div", Object.assign({
|
|
1062
998
|
className: "select-popover-list-group"
|
|
1063
999
|
}, {
|
|
@@ -1065,11 +1001,11 @@ var Select = function Select(props) {
|
|
|
1065
1001
|
className: "select-popover-list-group-label"
|
|
1066
1002
|
}, {
|
|
1067
1003
|
children: item[showName] || item[showValue]
|
|
1068
|
-
})), childrenList.map(
|
|
1069
|
-
|
|
1070
|
-
|
|
1004
|
+
})), childrenList.map((childItem, childIndex) => {
|
|
1005
|
+
const val = childItem[showValue];
|
|
1006
|
+
let classStrItem = 'select-popover-list-item';
|
|
1071
1007
|
if (valueCom.indexOf(val) !== -1) classStrItem += ' select-popover-list-item-select'; // 选中的样式
|
|
1072
|
-
if (
|
|
1008
|
+
if (typeof disabled === 'object' && disabled.indexOf(val) !== -1) {
|
|
1073
1009
|
// 禁用
|
|
1074
1010
|
classStrItem += ' select-popover-list-item-disabled';
|
|
1075
1011
|
}
|
|
@@ -1085,10 +1021,10 @@ var Select = function Select(props) {
|
|
|
1085
1021
|
})]
|
|
1086
1022
|
}), index);
|
|
1087
1023
|
}
|
|
1088
|
-
|
|
1089
|
-
|
|
1024
|
+
const val = item[showValue];
|
|
1025
|
+
let classStrItem = 'select-popover-list-item';
|
|
1090
1026
|
if (valueCom.indexOf(val) !== -1) classStrItem += ' select-popover-list-item-select'; // 选中的样式
|
|
1091
|
-
if (
|
|
1027
|
+
if (typeof disabled === 'object' && disabled.indexOf(val) !== -1) {
|
|
1092
1028
|
// 禁用
|
|
1093
1029
|
classStrItem += ' select-popover-list-item-disabled';
|
|
1094
1030
|
}
|
|
@@ -1112,10 +1048,10 @@ var Select = function Select(props) {
|
|
|
1112
1048
|
}));
|
|
1113
1049
|
}, [listCom, showName, showValue, valueCom, onChange, multiple, loading, language, locale, emptyProps, emptyBol, renderContent, selectCheckIcon]);
|
|
1114
1050
|
// 下拉框popover memo
|
|
1115
|
-
|
|
1051
|
+
const SelectPopoverMemo = useMemo(() => {
|
|
1116
1052
|
if (!showSelect) return '';
|
|
1117
|
-
|
|
1118
|
-
|
|
1053
|
+
const handSelectPopoverMemoClass = () => {
|
|
1054
|
+
let classStr = "select-popover-content ".concat(classOneSelect);
|
|
1119
1055
|
if (search && searchModel === 'inside') classStr += ' select-popover-content-search';
|
|
1120
1056
|
return classStr;
|
|
1121
1057
|
};
|
|
@@ -1141,7 +1077,7 @@ var Select = function Select(props) {
|
|
|
1141
1077
|
}));
|
|
1142
1078
|
}, [open, posDom, listCom, childrenName, showValue, showName, valueCom, searchValue, search, classOneSelect, searchModel, multiple, searchPlaceholder, showSelect, loading, searchInputProps, language, locale, emptyProps, emptyBol, renderContent, selectCheckIcon]);
|
|
1143
1079
|
/** 处理下拉内容 */
|
|
1144
|
-
|
|
1080
|
+
const handDropdown = () => {
|
|
1145
1081
|
return jsx(Dropdown, Object.assign({
|
|
1146
1082
|
visible: open,
|
|
1147
1083
|
placement: 'bottomLeft',
|
|
@@ -1151,7 +1087,7 @@ var Select = function Select(props) {
|
|
|
1151
1087
|
}),
|
|
1152
1088
|
overlayClassName: handleClassPopover(),
|
|
1153
1089
|
getPopupContainer: getPopupContainer,
|
|
1154
|
-
onVisibleChange:
|
|
1090
|
+
onVisibleChange: bol => {
|
|
1155
1091
|
if (!bol) setOpen(false);
|
|
1156
1092
|
}
|
|
1157
1093
|
}, {
|