@para-ui/core 3.0.22 → 3.0.24
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 +2 -2
- package/AutoTips/index.d.ts +2 -0
- package/AutoTips/index.js +10 -2
- package/Breadcrumbs/index.js +2 -2
- package/Button/index.js +5 -3
- package/ButtonGroup/index.js +5 -3
- package/Carousel/index.js +1 -1
- package/Cascader/index.js +1 -1
- package/Checkbox/index.js +1 -1
- package/CheckboxGroup/index.js +1 -1
- package/Collapse/index.js +1 -1
- package/CollapseBox/index.js +1 -1
- package/CollapseLayout/index.js +1 -1
- package/ComboSelect/index.js +10 -9
- package/Container/index.js +1 -1
- package/DatePicker/index.js +11 -178
- package/Desktop/index.js +4 -3
- package/Drawer/index.js +5 -3
- package/Dropdown/index.d.ts +2 -0
- package/Dropdown/index.js +10 -62
- package/Empty/index.js +1 -1
- package/Form/index.js +5 -4
- package/FormItem/index.js +5 -4
- package/FunctionModal/index.js +6 -5
- package/Help/index.js +1 -1
- package/HelperText/index.js +1 -1
- package/InputLang/index.js +4 -3
- package/InputNumber/index.js +1 -1
- package/Label/index.js +1 -1
- package/Loading/index.js +1 -1
- package/Menu/index.js +1 -1
- package/Message/index.js +1 -1
- package/Modal/index.js +5 -4
- package/MultiBox/index.js +4 -3
- package/Notification/index.js +1 -1
- package/OperateBtn/index.js +5 -3
- package/PageHeader/index.js +4 -3
- package/Pagination/index.js +4 -3
- package/ParauiProvider/index.js +1 -1
- package/PopConfirm/index.js +5 -3
- package/Popover/index.js +2 -2
- package/Progress/index.js +1 -1
- package/Querying/index.js +1 -1
- package/README.md +22 -0
- package/Radio/index.js +1 -1
- package/RadioGroup/index.js +1 -1
- package/Search/index.js +4 -3
- package/Select/index.d.ts +8 -0
- package/Select/index.js +45 -38
- package/SelectInput/index.js +3 -2
- package/Selector/index.js +17 -9
- package/SelectorPicker/index.d.ts +3 -1
- package/SelectorPicker/index.js +34 -16
- package/SingleBox/index.js +4 -3
- package/Slider/index.js +1 -1
- package/Split/index.js +1 -1
- package/Status/index.js +1 -1
- package/Stepper/index.js +1 -1
- package/Styles/form.scss +5 -0
- package/Styles/index.scss +37 -0
- package/Styles/normalize.scss +348 -0
- package/Styles/scrollbar.scss +223 -0
- package/Styles/theme.scss +74 -0
- package/Switch/index.js +1 -1
- package/Table/index.js +86 -10
- package/Table/interface.d.ts +29 -8
- package/Tabs/index.js +5 -3
- package/Tag/index.js +1 -1
- package/TextEditor/index.js +1 -1
- package/TextField/index.js +4 -3
- package/TimePicker/index.js +4 -4
- package/Timeline/index.js +1 -1
- package/Title/index.js +1 -1
- package/ToggleButton/index.js +4 -3
- package/Tooltip/index.js +11 -2
- package/Tooltip/interface.d.ts +2 -0
- package/Transfer/index.js +5 -4
- package/Tree/index.js +2 -2
- package/Upload/index.js +9 -8
- package/_verture/{index-6807c0e0.js → index-31ce5a11.js} +7 -41
- package/_verture/{index-6fd242a8.js → index-cef53318.js} +2 -2
- package/_verture/index-ffd2b2cb.js +250 -0
- package/_verture/{modalContext-fcdc497b.js → modalContext-ba1b0528.js} +0 -0
- package/_verture/{usePopupContainer-874d101b.js → usePopupContainer-7bbd7720.js} +2 -2
- package/index.js +6 -6
- package/package.json +1 -1
package/Select/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
|
6
6
|
import React__default, { useRef, useState, useEffect, useMemo } from 'react';
|
|
7
7
|
import Empty from '../Empty/index.js';
|
|
8
8
|
import Label from '../Label/index.js';
|
|
9
|
-
import { Dropdown } from '../
|
|
9
|
+
import { D as Dropdown } from '../_verture/index-ffd2b2cb.js';
|
|
10
10
|
import { UUID, DeepClone } from '@paraview/lib';
|
|
11
11
|
import GlobalContext from '@para-ui/core/GlobalContext';
|
|
12
12
|
import CloseIcon from '@para-ui/icons/Close';
|
|
@@ -30,7 +30,8 @@ import 'rc-tooltip';
|
|
|
30
30
|
import 'rc-tooltip/lib/placements';
|
|
31
31
|
import '@para-ui/icons/Help';
|
|
32
32
|
import 'rc-dropdown';
|
|
33
|
-
import '../_verture/usePopupContainer-
|
|
33
|
+
import '../_verture/usePopupContainer-7bbd7720.js';
|
|
34
|
+
import 'dayjs';
|
|
34
35
|
import '@para-ui/icons/LoadingF';
|
|
35
36
|
|
|
36
37
|
var en = {
|
|
@@ -48,7 +49,7 @@ var localeJson = {
|
|
|
48
49
|
en: en
|
|
49
50
|
};
|
|
50
51
|
|
|
51
|
-
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-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-v3-select > .select-content {\n line-height: 0;\n border: 1px solid;\n border-radius: 4px;\n border-color: rgba(171, 176, 185, 0.4);\n padding-right: 12px;\n position: relative;\n cursor: pointer;\n background-color: rgb(255, 255, 255);\n}\n.paraui-v3-select > .select-content:hover {\n border-color: rgb(54, 102, 214);\n}\n.paraui-v3-select > .select-content:hover > .select-svg > svg {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select > .select-content > .select-label-placeholder {\n width: 100%;\n height: 100%;\n padding: 0 12px;\n color: rgba(46, 55, 67, 0.4);\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-v3-select > .select-content > .select-label-placeholder > .select-required {\n margin-left: 2px;\n color: rgb(235, 96, 84);\n}\n.paraui-v3-select > .select-content > .select-svg {\n position: absolute;\n right: 12px;\n top: 0;\n z-index: 2;\n}\n.paraui-v3-select > .select-content > .select-svg > svg {\n font-size: 20px;\n transition: all 0.3s;\n color: rgba(46, 55, 67, 0.7);\n opacity: 0;\n}\n.paraui-v3-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-v3-select > .select-content > .select-svg > .clean-up-icon > svg {\n font-size: 16px;\n transition: all 0.3s;\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-select > .select-content > .select-svg > .clean-up-icon:hover > svg {\n color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-select > .select-content > .radio-select-content {\n padding-left: 12px;\n font-size: 14px;\n line-height: 1.43;\n color: rgb(46, 55, 67);\n word-break: break-all;\n}\n.paraui-v3-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(46, 55, 67);\n border: 0;\n border-radius: 4px;\n background: transparent;\n}\n.paraui-v3-select > .select-content > .check-select-content {\n padding-left: 12px;\n height: 100%;\n overflow: hidden;\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item {\n display: inline-block;\n background-color: rgba(171, 176, 185, 0.2);\n border-radius: 4px;\n padding: 0 12px 0 12px;\n color: rgb(46, 55, 67);\n margin-right: 8px;\n vertical-align: top;\n max-width: 100%;\n white-space: nowrap;\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more {\n cursor: pointer;\n color: rgb(46, 55, 67);\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more > span {\n max-width: none;\n}\n.paraui-v3-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-v3-select > .select-content > .check-select-content > .check-select-content-item > svg {\n cursor: pointer;\n margin-left: 8px;\n color: rgb(46, 55, 67);\n font-size: 16px;\n position: relative;\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item > svg:hover {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-noclose > span {\n max-width: none;\n}\n.paraui-v3-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(46, 55, 67);\n font-size: 14px;\n cursor: pointer;\n}\n.paraui-v3-select.paraui-v3-select-allow-clear > .select-content {\n padding-right: 40px;\n}\n.paraui-v3-select.paraui-v3-select-allow-clear.paraui-v3-select-value > .select-content:hover > .select-svg > svg {\n opacity: 0;\n transition: all 0s;\n}\n.paraui-v3-select.paraui-v3-select-allow-clear.paraui-v3-select-value > .select-content:hover > .select-svg > .clean-up-icon {\n opacity: 1;\n transition: all 0.3s;\n}\n.paraui-v3-select.paraui-v3-select-over-line.paraui-v3-select-small > .select-content {\n height: inherit;\n min-height: 28px;\n}\n.paraui-v3-select.paraui-v3-select-over-line.paraui-v3-select-medium > .select-content {\n height: inherit;\n min-height: 32px;\n}\n.paraui-v3-select.paraui-v3-select-over-line.paraui-v3-select-large > .select-content {\n height: inherit;\n min-height: 36px;\n}\n.paraui-v3-select.paraui-v3-select-show-select > .select-content {\n padding-right: 40px;\n}\n.paraui-v3-select.paraui-v3-select-show-select > .select-content > .select-svg > svg {\n opacity: 1;\n}\n.paraui-v3-select.paraui-v3-select-disabled > .select-content {\n background-color: rgba(171, 176, 185, 0.12);\n cursor: not-allowed;\n}\n.paraui-v3-select.paraui-v3-select-disabled > .select-content:hover {\n border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-select.paraui-v3-select-disabled > .select-content:hover > .select-svg > svg {\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-select.paraui-v3-select-disabled > .select-content > .check-select-content > .check-select-content-item > span {\n max-width: 100%;\n}\n.paraui-v3-select.paraui-v3-select-error > .select-content {\n border-color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-select.paraui-v3-select-open > .select-content {\n border-color: rgb(54, 102, 214);\n}\n.paraui-v3-select.paraui-v3-select-open > .select-content > .select-svg > svg {\n transform: rotate(180deg);\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select.paraui-v3-select-open > .select-content > .check-select-content > .check-search-outside {\n display: inline-block;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content {\n height: 28px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .select-label-placeholder {\n line-height: 26px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .select-svg {\n top: 3px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .radio-select-content {\n padding-bottom: 3px;\n padding-top: 3px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .check-select-content {\n padding-bottom: 3px;\n}\n.paraui-v3-select.paraui-v3-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-v3-select.paraui-v3-select-small > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .check-select-content > .check-search-outside {\n margin-top: 3px;\n height: 20px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content {\n height: 32px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .select-label-placeholder {\n line-height: 30px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .select-svg {\n top: 6px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .radio-select-content {\n padding-bottom: 5px;\n padding-top: 5px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .check-select-content {\n padding-bottom: 4px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 4px;\n height: 22px;\n line-height: 22px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 3px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .check-select-content > .check-search-outside {\n margin-top: 4px;\n height: 22px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content {\n height: 36px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .select-label-placeholder {\n line-height: 34px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .select-svg {\n top: 8px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .radio-select-content {\n padding-bottom: 7px;\n padding-top: 7px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .check-select-content {\n padding-bottom: 5px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 5px;\n height: 24px;\n line-height: 24px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 3px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .check-select-content > .check-search-outside {\n margin-top: 5px;\n height: 24px;\n}\n\n.paraui-v3-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list {\n padding-top: 0px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list > .select-nodata {\n margin-top: 58px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-search {\n display: flex;\n align-items: center;\n padding: 0 12px;\n border-bottom: 1px solid;\n border-color: rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-search > input {\n border: 0;\n outline: none;\n font-size: 14px;\n color: rgb(46, 55, 67);\n width: 100%;\n height: 100%;\n line-height: 1.43;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::placeholder {\n font-size: 14px;\n opacity: 1;\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-search > svg {\n color: rgba(46, 55, 67, 0.4);\n font-size: 20px;\n cursor: pointer;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list {\n padding: 8px 0;\n max-height: 300px;\n overflow: auto;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list.select-popover-list-loading {\n height: 100px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item {\n display: flex;\n cursor: pointer;\n padding: 0 12px;\n align-items: center;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-label {\n width: calc(100% - 25px);\n color: rgb(46, 55, 67);\n font-size: 14px;\n}\n.paraui-v3-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-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-svg > svg {\n font-size: 20px;\n color: rgb(54, 102, 214);\n}\n.paraui-v3-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(54, 102, 214);\n}\n.paraui-v3-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-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-hover {\n background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-hover > .select-popover-list-item-label {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-keydown {\n background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-keydown > .select-popover-list-item-label {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-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-v3-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: rgba(46, 55, 67, 0.4) !important;\n}\n.paraui-v3-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 12px;\n color: rgba(46, 55, 67, 0.4);\n font-size: 14px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-item {\n padding-left: 20px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-nodata {\n text-align: center;\n font-size: 14px;\n color: rgb(46, 55, 67);\n margin-top: 50px;\n margin-bottom: 72px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-radio > .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-label {\n width: 100%;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-small > .select-popover-content > .select-popover-search {\n height: 28px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-small > .select-popover-content > .select-popover-list .select-popover-list-item {\n height: 28px;\n line-height: 28px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-small > .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-group-label {\n height: 28px;\n line-height: 28px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-medium > .select-popover-content > .select-popover-search {\n height: 32px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-medium > .select-popover-content > .select-popover-list .select-popover-list-item {\n height: 32px;\n line-height: 32px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-medium > .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-group-label {\n line-height: 32px;\n height: 32px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-large > .select-popover-content > .select-popover-search {\n height: 36px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-large > .select-popover-content > .select-popover-list .select-popover-list-item {\n height: 36px;\n line-height: 36px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-large > .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-group-label {\n height: 36px;\n line-height: 36px;\n}\n\n.paraui-v3-select-more-popover {\n padding-left: 16px;\n}\n.paraui-v3-select-more-popover .select-more {\n width: 300px;\n}\n.paraui-v3-select-more-popover .select-more > .select-more-title {\n font-size: 14px;\n padding: 0 12px;\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content {\n max-height: 300px;\n overflow: auto;\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content > .select-more-content-item {\n padding: 0 12px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n width: calc(100% - 25px);\n display: inline-block;\n font-size: 14px;\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n font-size: 20px;\n position: relative;\n cursor: pointer;\n color: rgb(46, 55, 67);\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-small .select-more > .select-more-title {\n line-height: 28px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-small .select-more > .select-more-content > .select-more-content-item {\n line-height: 28px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-medium .select-more > .select-more-title {\n line-height: 32px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-medium .select-more > .select-more-content > .select-more-content-item {\n line-height: 32px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-large .select-more > .select-more-title {\n line-height: 36px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-large .select-more > .select-more-content > .select-more-content-item {\n line-height: 36px;\n}";
|
|
52
|
+
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-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-v3-select > .select-content {\n line-height: 0;\n border: 1px solid;\n border-radius: 4px;\n border-color: rgba(171, 176, 185, 0.4);\n padding-right: 12px;\n position: relative;\n cursor: pointer;\n background-color: rgb(255, 255, 255);\n}\n.paraui-v3-select > .select-content:hover {\n border-color: rgb(54, 102, 214);\n}\n.paraui-v3-select > .select-content:hover > .select-svg > svg {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select > .select-content > .select-label-placeholder {\n width: 100%;\n height: 100%;\n padding: 0 12px;\n color: rgba(46, 55, 67, 0.4);\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-v3-select > .select-content > .select-label-placeholder > .select-required {\n margin-left: 2px;\n color: rgb(235, 96, 84);\n}\n.paraui-v3-select > .select-content > .select-svg {\n position: absolute;\n right: 12px;\n top: 0;\n z-index: 2;\n}\n.paraui-v3-select > .select-content > .select-svg > svg {\n font-size: 20px;\n transition: all 0.3s;\n color: rgba(46, 55, 67, 0.7);\n opacity: 0;\n}\n.paraui-v3-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-v3-select > .select-content > .select-svg > .clean-up-icon > svg {\n font-size: 16px;\n transition: all 0.3s;\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-select > .select-content > .select-svg > .clean-up-icon:hover > svg {\n color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-select > .select-content > .radio-select-content {\n padding-left: 12px;\n font-size: 14px;\n line-height: 1.43;\n color: rgb(46, 55, 67);\n word-break: break-all;\n}\n.paraui-v3-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(46, 55, 67);\n border: 0;\n border-radius: 4px;\n background: transparent;\n}\n.paraui-v3-select > .select-content > .check-select-content {\n padding-left: 12px;\n height: 100%;\n overflow: hidden;\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item {\n display: inline-block;\n background-color: rgba(171, 176, 185, 0.2);\n border-radius: 4px;\n padding: 0 12px 0 12px;\n color: rgb(46, 55, 67);\n margin-right: 8px;\n vertical-align: top;\n max-width: 100%;\n white-space: nowrap;\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more {\n cursor: pointer;\n color: rgb(46, 55, 67);\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more > span {\n max-width: none;\n}\n.paraui-v3-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-v3-select > .select-content > .check-select-content > .check-select-content-item > svg {\n cursor: pointer;\n margin-left: 8px;\n color: rgb(46, 55, 67);\n font-size: 16px;\n position: relative;\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item > svg:hover {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-noclose > span {\n max-width: none;\n}\n.paraui-v3-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(46, 55, 67);\n font-size: 14px;\n cursor: pointer;\n}\n.paraui-v3-select.paraui-v3-select-allow-clear > .select-content {\n padding-right: 40px;\n}\n.paraui-v3-select.paraui-v3-select-allow-clear.paraui-v3-select-value > .select-content:hover > .select-svg > svg {\n opacity: 0;\n transition: all 0s;\n}\n.paraui-v3-select.paraui-v3-select-allow-clear.paraui-v3-select-value > .select-content:hover > .select-svg > .clean-up-icon {\n opacity: 1;\n transition: all 0.3s;\n}\n.paraui-v3-select.paraui-v3-select-over-line.paraui-v3-select-small > .select-content {\n height: inherit;\n min-height: 28px;\n}\n.paraui-v3-select.paraui-v3-select-over-line.paraui-v3-select-medium > .select-content {\n height: inherit;\n min-height: 32px;\n}\n.paraui-v3-select.paraui-v3-select-over-line.paraui-v3-select-large > .select-content {\n height: inherit;\n min-height: 36px;\n}\n.paraui-v3-select.paraui-v3-select-show-select > .select-content {\n padding-right: 40px;\n}\n.paraui-v3-select.paraui-v3-select-show-select > .select-content > .select-svg > svg {\n opacity: 1;\n}\n.paraui-v3-select.paraui-v3-select-disabled > .select-content {\n background-color: rgba(171, 176, 185, 0.12);\n cursor: not-allowed;\n}\n.paraui-v3-select.paraui-v3-select-disabled > .select-content:hover {\n border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-select.paraui-v3-select-disabled > .select-content:hover > .select-svg > svg {\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-select.paraui-v3-select-disabled > .select-content > .check-select-content > .check-select-content-item > span {\n max-width: 100%;\n}\n.paraui-v3-select.paraui-v3-select-error > .select-content {\n border-color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-select.paraui-v3-select-open > .select-content {\n border-color: rgb(54, 102, 214);\n}\n.paraui-v3-select.paraui-v3-select-open > .select-content > .select-svg > svg {\n transform: rotate(180deg);\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select.paraui-v3-select-open > .select-content > .check-select-content > .check-search-outside {\n display: inline-block;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content {\n height: 28px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .select-label-placeholder {\n line-height: 26px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .select-svg {\n top: 3px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .radio-select-content {\n padding-bottom: 3px;\n padding-top: 3px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .check-select-content {\n padding-bottom: 3px;\n}\n.paraui-v3-select.paraui-v3-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-v3-select.paraui-v3-select-small > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v3-select.paraui-v3-select-small > .select-content > .check-select-content > .check-search-outside {\n margin-top: 3px;\n height: 20px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content {\n height: 32px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .select-label-placeholder {\n line-height: 30px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .select-svg {\n top: 6px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .radio-select-content {\n padding-bottom: 5px;\n padding-top: 5px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .check-select-content {\n padding-bottom: 4px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 4px;\n height: 22px;\n line-height: 22px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 3px;\n}\n.paraui-v3-select.paraui-v3-select-medium > .select-content > .check-select-content > .check-search-outside {\n margin-top: 4px;\n height: 22px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content {\n height: 36px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .select-label-placeholder {\n line-height: 34px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .select-svg {\n top: 8px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .radio-select-content {\n padding-bottom: 7px;\n padding-top: 7px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .check-select-content {\n padding-bottom: 5px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 5px;\n height: 24px;\n line-height: 24px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 3px;\n}\n.paraui-v3-select.paraui-v3-select-large > .select-content > .check-select-content > .check-search-outside {\n margin-top: 5px;\n height: 24px;\n}\n\n.paraui-v3-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list {\n padding-top: 0px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list > .select-nodata {\n margin-top: 58px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-search {\n display: flex;\n align-items: center;\n padding: 0 12px;\n border-bottom: 1px solid;\n border-color: rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-search > input {\n border: 0;\n outline: none;\n font-size: 14px;\n color: rgb(46, 55, 67);\n width: 100%;\n height: 100%;\n line-height: 1.43;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::placeholder {\n font-size: 14px;\n opacity: 1;\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-search > svg {\n color: rgba(46, 55, 67, 0.4);\n font-size: 20px;\n cursor: pointer;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list {\n padding: 8px 0;\n max-height: 300px;\n overflow: auto;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list.select-popover-list-loading {\n height: 100px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item {\n display: flex;\n cursor: pointer;\n padding: 0 12px;\n align-items: center;\n}\n.paraui-v3-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(46, 55, 67);\n font-size: 14px;\n}\n.paraui-v3-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-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-svg > svg {\n font-size: 20px;\n color: rgb(54, 102, 214);\n}\n.paraui-v3-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(54, 102, 214);\n}\n.paraui-v3-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-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-hover {\n background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-hover > .select-popover-list-item-label {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-keydown {\n background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-keydown > .select-popover-list-item-label {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-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-v3-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: rgba(46, 55, 67, 0.4) !important;\n}\n.paraui-v3-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 12px;\n color: rgba(46, 55, 67, 0.4);\n font-size: 14px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-item {\n padding-left: 20px;\n}\n.paraui-v3-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-nodata {\n text-align: center;\n font-size: 14px;\n color: rgb(46, 55, 67);\n margin-top: 50px;\n margin-bottom: 72px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-small > .select-popover-content > .select-popover-search {\n height: 28px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-small > .select-popover-content > .select-popover-list .select-popover-list-item {\n height: 28px;\n line-height: 28px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-small > .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-group-label {\n height: 28px;\n line-height: 28px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-medium > .select-popover-content > .select-popover-search {\n height: 32px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-medium > .select-popover-content > .select-popover-list .select-popover-list-item {\n height: 32px;\n line-height: 32px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-medium > .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-group-label {\n line-height: 32px;\n height: 32px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-large > .select-popover-content > .select-popover-search {\n height: 36px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-large > .select-popover-content > .select-popover-list .select-popover-list-item {\n height: 36px;\n line-height: 36px;\n}\n.paraui-v3-select-popover.component-dropdown.paraui-v3-select-popover-large > .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-group-label {\n height: 36px;\n line-height: 36px;\n}\n\n.paraui-v3-select-more-popover {\n padding-left: 16px;\n}\n.paraui-v3-select-more-popover .select-more {\n width: 300px;\n}\n.paraui-v3-select-more-popover .select-more > .select-more-title {\n font-size: 14px;\n padding: 0 12px;\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content {\n max-height: 300px;\n overflow: auto;\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content > .select-more-content-item {\n padding: 0 12px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n width: calc(100% - 25px);\n display: inline-block;\n font-size: 14px;\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n font-size: 20px;\n position: relative;\n cursor: pointer;\n color: rgb(46, 55, 67);\n}\n.paraui-v3-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-small .select-more > .select-more-title {\n line-height: 28px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-small .select-more > .select-more-content > .select-more-content-item {\n line-height: 28px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-medium .select-more > .select-more-title {\n line-height: 32px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-medium .select-more > .select-more-content > .select-more-content-item {\n line-height: 32px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-large .select-more > .select-more-title {\n line-height: 36px;\n}\n.paraui-v3-select-more-popover.paraui-v3-select-more-popover-large .select-more > .select-more-content > .select-more-content-item {\n line-height: 36px;\n}";
|
|
52
53
|
styleInject(css_248z);
|
|
53
54
|
|
|
54
55
|
/**
|
|
@@ -143,7 +144,10 @@ var Select = function Select(props) {
|
|
|
143
144
|
onEnter = _useGlobalProps.onEnter,
|
|
144
145
|
onEnterInput = _useGlobalProps.onEnterInput,
|
|
145
146
|
onClear = _useGlobalProps.onClear,
|
|
146
|
-
getPopupContainer = _useGlobalProps.getPopupContainer
|
|
147
|
+
getPopupContainer = _useGlobalProps.getPopupContainer,
|
|
148
|
+
renderContent = _useGlobalProps.renderContent,
|
|
149
|
+
_useGlobalProps$selec = _useGlobalProps.selectCheckIcon,
|
|
150
|
+
selectCheckIcon = _useGlobalProps$selec === void 0 ? true : _useGlobalProps$selec;
|
|
147
151
|
|
|
148
152
|
var posDom = useRef(null);
|
|
149
153
|
|
|
@@ -969,9 +973,10 @@ var Select = function Select(props) {
|
|
|
969
973
|
// 有搜索值且(输入框在内容里面或者有输入赋值)
|
|
970
974
|
if (searchValue !== '' && (searchModel === 'outside' || input)) return null;
|
|
971
975
|
var val = listJson[valueCom[0]] && listJson[valueCom[0]][showName] || valueCom[0];
|
|
972
|
-
|
|
976
|
+
var renderContentVal = renderContent && renderContent(listJson[valueCom[0]], false);
|
|
977
|
+
if (overLineCom) return renderContentVal || val;
|
|
973
978
|
return jsx(AutoTips, {
|
|
974
|
-
children: val
|
|
979
|
+
children: renderContentVal || val
|
|
975
980
|
});
|
|
976
981
|
};
|
|
977
982
|
|
|
@@ -984,12 +989,13 @@ var Select = function Select(props) {
|
|
|
984
989
|
})), handInput('radio')]
|
|
985
990
|
})
|
|
986
991
|
});
|
|
987
|
-
}, [multiple, showText, overLineCom, listJson, valueCom, showName, search, searchModel, searchValue, disabled, input, searchInputProps]); // 多选内容
|
|
992
|
+
}, [multiple, showText, overLineCom, listJson, valueCom, showName, search, searchModel, searchValue, disabled, input, searchInputProps, renderContent]); // 多选内容
|
|
988
993
|
|
|
989
994
|
var CheckMemo = useMemo(function () {
|
|
990
995
|
var handContent = function handContent(index) {
|
|
991
996
|
var val = listJson[valueCom[index]] && listJson[valueCom[index]][showName] || valueCom[index];
|
|
992
|
-
|
|
997
|
+
var renderContentVal = renderContent && renderContent(listJson[valueCom[index]], false);
|
|
998
|
+
return renderContentVal || val;
|
|
993
999
|
};
|
|
994
1000
|
|
|
995
1001
|
return jsx(Fragment, {
|
|
@@ -1008,7 +1014,9 @@ var Select = function Select(props) {
|
|
|
1008
1014
|
className: isClose ? 'check-select-content-item' : 'check-select-content-item check-select-content-item-noclose'
|
|
1009
1015
|
}, {
|
|
1010
1016
|
children: [jsx("span", {
|
|
1011
|
-
children:
|
|
1017
|
+
children: jsx(AutoTips, {
|
|
1018
|
+
children: handContent(index)
|
|
1019
|
+
})
|
|
1012
1020
|
}), isClose && jsx(CloseIcon, {
|
|
1013
1021
|
onClick: delItem(listJson[valueCom[index]], valueCom[index])
|
|
1014
1022
|
})]
|
|
@@ -1027,7 +1035,7 @@ var Select = function Select(props) {
|
|
|
1027
1035
|
}(), handInput('check')]
|
|
1028
1036
|
}))
|
|
1029
1037
|
});
|
|
1030
|
-
}, [multiple, showText, valueCom, morePos, listJson, disabled, onChange, searchValue, search, searchModel, input, searchInputProps]);
|
|
1038
|
+
}, [multiple, showText, valueCom, morePos, listJson, disabled, onChange, searchValue, search, searchModel, input, searchInputProps, renderContent]);
|
|
1031
1039
|
|
|
1032
1040
|
var clickClean = function clickClean(e) {
|
|
1033
1041
|
e.stopPropagation();
|
|
@@ -1073,7 +1081,8 @@ var Select = function Select(props) {
|
|
|
1073
1081
|
var morePopoverContent = function morePopoverContent() {
|
|
1074
1082
|
var handContent = function handContent(index) {
|
|
1075
1083
|
var val = listJson[valueCom[index]] && listJson[valueCom[index]][showName] || valueCom[index];
|
|
1076
|
-
|
|
1084
|
+
var renderContentVal = renderContent && renderContent(listJson[valueCom[index]], false);
|
|
1085
|
+
return renderContentVal || val;
|
|
1077
1086
|
};
|
|
1078
1087
|
|
|
1079
1088
|
return jsxs("div", Object.assign({
|
|
@@ -1137,7 +1146,7 @@ var Select = function Select(props) {
|
|
|
1137
1146
|
})), RadioMemo, CheckMemo]
|
|
1138
1147
|
}))
|
|
1139
1148
|
}));
|
|
1140
|
-
}, [posDom, showText, labelMode, placeholder, label, labelSign, required, overLineCom, listJson, valueCom, showName, multiple, morePos, disabled, onChange, searchValue, searchModel, input, showSelect, searchInputProps, allowClear, onClear, openMore]); // 下拉框popover 列表
|
|
1149
|
+
}, [posDom, showText, labelMode, placeholder, label, labelSign, required, overLineCom, listJson, valueCom, showName, multiple, morePos, disabled, onChange, searchValue, searchModel, input, showSelect, searchInputProps, allowClear, onClear, openMore, renderContent]); // 下拉框popover 列表
|
|
1141
1150
|
|
|
1142
1151
|
var SelectPopoverListMemo = useMemo(function () {
|
|
1143
1152
|
var handClass = function handClass() {
|
|
@@ -1146,6 +1155,24 @@ var Select = function Select(props) {
|
|
|
1146
1155
|
return str;
|
|
1147
1156
|
};
|
|
1148
1157
|
|
|
1158
|
+
var handContent = function handContent(item) {
|
|
1159
|
+
var val = item[showName] || item[showValue];
|
|
1160
|
+
var renderContentVal = renderContent && renderContent(item, true);
|
|
1161
|
+
return jsxs(Fragment, {
|
|
1162
|
+
children: [jsx("span", Object.assign({
|
|
1163
|
+
className: "select-popover-list-item-label"
|
|
1164
|
+
}, {
|
|
1165
|
+
children: jsx(AutoTips, {
|
|
1166
|
+
children: renderContentVal || val
|
|
1167
|
+
})
|
|
1168
|
+
})), multiple && selectCheckIcon && jsx("span", Object.assign({
|
|
1169
|
+
className: "select-popover-list-item-svg"
|
|
1170
|
+
}, {
|
|
1171
|
+
children: jsx(Check, {})
|
|
1172
|
+
}))]
|
|
1173
|
+
});
|
|
1174
|
+
};
|
|
1175
|
+
|
|
1149
1176
|
return jsxs("div", Object.assign({
|
|
1150
1177
|
className: handClass()
|
|
1151
1178
|
}, {
|
|
@@ -1170,24 +1197,14 @@ var Select = function Select(props) {
|
|
|
1170
1197
|
classStrItem += ' select-popover-list-item-disabled';
|
|
1171
1198
|
}
|
|
1172
1199
|
|
|
1173
|
-
return
|
|
1200
|
+
return jsx("div", Object.assign({
|
|
1174
1201
|
onClick: clickItem(childItem),
|
|
1175
1202
|
className: classStrItem,
|
|
1176
1203
|
onMouseEnter: mouseEnter,
|
|
1177
1204
|
onMouseLeave: mouseLeave,
|
|
1178
1205
|
"data-val": val
|
|
1179
1206
|
}, {
|
|
1180
|
-
children:
|
|
1181
|
-
className: "select-popover-list-item-label"
|
|
1182
|
-
}, {
|
|
1183
|
-
children: jsx(AutoTips, {
|
|
1184
|
-
children: childItem[showName] || childItem[showValue]
|
|
1185
|
-
})
|
|
1186
|
-
})), multiple && jsx("span", Object.assign({
|
|
1187
|
-
className: "select-popover-list-item-svg"
|
|
1188
|
-
}, {
|
|
1189
|
-
children: jsx(Check, {})
|
|
1190
|
-
}))]
|
|
1207
|
+
children: handContent(childItem)
|
|
1191
1208
|
}), childIndex);
|
|
1192
1209
|
})]
|
|
1193
1210
|
}), index);
|
|
@@ -1202,24 +1219,14 @@ var Select = function Select(props) {
|
|
|
1202
1219
|
classStrItem += ' select-popover-list-item-disabled';
|
|
1203
1220
|
}
|
|
1204
1221
|
|
|
1205
|
-
return
|
|
1222
|
+
return jsx("div", Object.assign({
|
|
1206
1223
|
onClick: clickItem(item),
|
|
1207
1224
|
className: classStrItem,
|
|
1208
1225
|
onMouseEnter: mouseEnter,
|
|
1209
1226
|
onMouseLeave: mouseLeave,
|
|
1210
1227
|
"data-val": val
|
|
1211
1228
|
}, {
|
|
1212
|
-
children:
|
|
1213
|
-
className: "select-popover-list-item-label"
|
|
1214
|
-
}, {
|
|
1215
|
-
children: jsx(AutoTips, {
|
|
1216
|
-
children: item[showName] || item[showValue]
|
|
1217
|
-
})
|
|
1218
|
-
})), multiple && jsx("span", Object.assign({
|
|
1219
|
-
className: "select-popover-list-item-svg"
|
|
1220
|
-
}, {
|
|
1221
|
-
children: jsx(Check, {})
|
|
1222
|
-
}))]
|
|
1229
|
+
children: handContent(item)
|
|
1223
1230
|
}), index);
|
|
1224
1231
|
})
|
|
1225
1232
|
}) : !loading && emptyBol && jsx("div", Object.assign({
|
|
@@ -1230,7 +1237,7 @@ var Select = function Select(props) {
|
|
|
1230
1237
|
}))
|
|
1231
1238
|
})), loading && jsx(Loading, {})]
|
|
1232
1239
|
}));
|
|
1233
|
-
}, [listCom, showName, showValue, valueCom, onChange, multiple, loading, language, locale, emptyProps, emptyBol]); // 下拉框popover memo
|
|
1240
|
+
}, [listCom, showName, showValue, valueCom, onChange, multiple, loading, language, locale, emptyProps, emptyBol, renderContent, selectCheckIcon]); // 下拉框popover memo
|
|
1234
1241
|
|
|
1235
1242
|
var SelectPopoverMemo = useMemo(function () {
|
|
1236
1243
|
if (!showSelect) return '';
|
|
@@ -1261,7 +1268,7 @@ var Select = function Select(props) {
|
|
|
1261
1268
|
})), jsx(SearchIcon, {})]
|
|
1262
1269
|
})), SelectPopoverListMemo]
|
|
1263
1270
|
}));
|
|
1264
|
-
}, [open, posDom, listCom, childrenName, showValue, showName, valueCom, searchValue, search, classOneSelect, searchModel, multiple, searchPlaceholder, showSelect, loading, searchInputProps, language, locale, emptyProps, emptyBol]);
|
|
1271
|
+
}, [open, posDom, listCom, childrenName, showValue, showName, valueCom, searchValue, search, classOneSelect, searchModel, multiple, searchPlaceholder, showSelect, loading, searchInputProps, language, locale, emptyProps, emptyBol, renderContent, selectCheckIcon]);
|
|
1265
1272
|
/** 处理下拉内容 */
|
|
1266
1273
|
|
|
1267
1274
|
var handDropdown = function handDropdown() {
|
package/SelectInput/index.js
CHANGED
|
@@ -19,9 +19,10 @@ import '../Tooltip/index.js';
|
|
|
19
19
|
import 'rc-tooltip';
|
|
20
20
|
import 'rc-tooltip/lib/placements';
|
|
21
21
|
import '@para-ui/icons/Help';
|
|
22
|
-
import '../
|
|
22
|
+
import '../_verture/index-ffd2b2cb.js';
|
|
23
23
|
import 'rc-dropdown';
|
|
24
|
-
import '../_verture/usePopupContainer-
|
|
24
|
+
import '../_verture/usePopupContainer-7bbd7720.js';
|
|
25
|
+
import 'dayjs';
|
|
25
26
|
import '@paraview/lib';
|
|
26
27
|
import '@para-ui/icons/Close';
|
|
27
28
|
import '@para-ui/icons/CloseCircle';
|
package/Selector/index.js
CHANGED
|
@@ -27,7 +27,7 @@ import 'rc-tooltip';
|
|
|
27
27
|
import 'rc-tooltip/lib/placements';
|
|
28
28
|
import 'clsx';
|
|
29
29
|
import '@para-ui/icons/Help';
|
|
30
|
-
import '../_verture/usePopupContainer-
|
|
30
|
+
import '../_verture/usePopupContainer-7bbd7720.js';
|
|
31
31
|
import '@para-ui/icons/LoadingF';
|
|
32
32
|
import '@para-ui/core/GlobalContext';
|
|
33
33
|
import '../TextField/index.js';
|
|
@@ -36,8 +36,9 @@ import '@para-ui/icons/PreviewClose';
|
|
|
36
36
|
import '@para-ui/icons/PreviewOpen';
|
|
37
37
|
import '@para-ui/icons/CloseCircle';
|
|
38
38
|
import '../HelperText/index.js';
|
|
39
|
-
import '../
|
|
39
|
+
import '../_verture/index-ffd2b2cb.js';
|
|
40
40
|
import 'rc-dropdown';
|
|
41
|
+
import 'dayjs';
|
|
41
42
|
import '../Button/index.js';
|
|
42
43
|
import '@para-ui/icons/Forbid';
|
|
43
44
|
import '@para-ui/icons/Down';
|
|
@@ -71,7 +72,7 @@ var localeJson = {
|
|
|
71
72
|
en: en
|
|
72
73
|
};
|
|
73
74
|
|
|
74
|
-
var css_248z$3 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n
|
|
75
|
+
var css_248z$3 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-selector-node {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n}\n.paraui-v3-selector-node:hover {\n background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-selector-node > .selector-node-left {\n display: flex;\n align-items: center;\n flex: 1;\n overflow: hidden;\n padding-right: 16px;\n}\n.paraui-v3-selector-node > .selector-node-left > .selector-node-radio {\n margin-right: 8px;\n display: flex;\n align-items: center;\n padding: 0;\n}\n.paraui-v3-selector-node > .selector-node-left > .selector-node-radio .radio-box {\n top: 0;\n}\n.paraui-v3-selector-node > .selector-node-left > .selector-node-check {\n margin-right: 8px;\n display: flex;\n align-items: center;\n padding: 0;\n}\n.paraui-v3-selector-node > .selector-node-left > .selector-node-check .checkbox-box {\n top: 0;\n}\n.paraui-v3-selector-node > .selector-node-left > .node-img {\n display: inline-block;\n width: 30px;\n height: 30px;\n margin-right: 8px;\n}\n.paraui-v3-selector-node > .selector-node-left > .node-img img {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-branch {\n height: 36px;\n padding: 0 16px;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-branch > .selector-node-left > .main-title {\n font-size: 14px;\n color: rgb(46, 55, 67);\n white-space: nowrap;\n height: 20px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-branch > .selector-node-left > .sub-title {\n margin-left: 8px;\n font-size: 14px;\n color: rgba(46, 55, 67, 0.4);\n white-space: nowrap;\n height: 20px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-branch > .selector-node-left > .tag {\n margin-left: 8px;\n background-color: rgba(54, 102, 214, 0.05);\n color: rgb(54, 102, 214);\n border-radius: 2px;\n font-size: 12px;\n padding: 0px 6px;\n white-space: nowrap;\n height: 17px;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-leaf {\n padding: 6px 16px;\n height: 48px;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-leaf > .selector-node-left > .title-box {\n flex: 1;\n overflow: hidden;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-leaf > .selector-node-left > .title-box > .main-title-box {\n display: flex;\n white-space: nowrap;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-leaf > .selector-node-left > .title-box > .main-title-box > .main-title {\n font-size: 14px;\n color: rgb(46, 55, 67);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-leaf > .selector-node-left > .title-box > .main-title-box > .tag {\n margin-left: 8px;\n background-color: rgba(54, 102, 214, 0.05);\n color: rgb(54, 102, 214);\n border-radius: 2px;\n font-size: 12px;\n padding: 1px 6px;\n white-space: nowrap;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-leaf > .selector-node-left > .title-box > .sub-title {\n font-size: 12px;\n color: rgba(46, 55, 67, 0.4);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v3-selector-node > .selector-node-right {\n display: flex;\n align-items: center;\n height: 100%;\n}\n.paraui-v3-selector-node > .selector-node-right > .detail {\n font-size: 14px;\n color: rgb(54, 102, 214);\n white-space: nowrap;\n padding: 0 4px;\n cursor: pointer;\n height: 24px;\n line-height: 24px;\n border-radius: 2px;\n}\n.paraui-v3-selector-node > .selector-node-right > .detail:hover {\n background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-selector-node > .selector-node-right > .line {\n border-left: 1px solid rgba(171, 176, 185, 0.2);\n margin: 0 8px;\n content: \"\";\n display: inline-block;\n height: 12px;\n}\n.paraui-v3-selector-node > .selector-node-right > .lower-child {\n font-size: 14px;\n color: rgb(54, 102, 214);\n white-space: nowrap;\n padding: 0 4px;\n cursor: pointer;\n height: 24px;\n line-height: 24px;\n border-radius: 2px;\n}\n.paraui-v3-selector-node > .selector-node-right > .lower-child:hover {\n background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-selector-node > .selector-node-right > .close {\n display: flex;\n align-items: center;\n color: rgb(54, 102, 214);\n white-space: nowrap;\n padding: 0 4px;\n cursor: pointer;\n height: 24px;\n line-height: 24px;\n border-radius: 2px;\n}\n.paraui-v3-selector-node > .selector-node-right > .close:hover {\n background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-selector-node > .selector-node-right > .close:hover > svg {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-node > .selector-node-right > .close > svg {\n font-size: 16px;\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-edit > .selector-node-right > .detail, .paraui-v3-selector-node.paraui-v3-selector-node-edit > .selector-node-right > .lower-child {\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-edit > .selector-node-right > .detail:hover, .paraui-v3-selector-node.paraui-v3-selector-node-edit > .selector-node-right > .lower-child:hover {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-disabled {\n cursor: not-allowed;\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-disabled.paraui-v3-selector-node-branch > .selector-node-left > .main-title {\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-disabled.paraui-v3-selector-node-leaf > .selector-node-left > .title-box > .main-title-box > .main-title {\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-disabled > .selector-node-right > .lower-child {\n cursor: not-allowed;\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-selector-node.paraui-v3-selector-node-disabled-child > .selector-node-right > .lower-child {\n cursor: not-allowed;\n color: rgba(46, 55, 67, 0.4);\n}\n\n.paraui-v3-selector-detail .selector-detail-popover-content.selector-detail-popover-content-loading {\n min-width: 100px;\n min-height: 50px;\n}";
|
|
75
76
|
styleInject(css_248z$3);
|
|
76
77
|
|
|
77
78
|
var SelectorNode = function SelectorNode(props) {
|
|
@@ -355,7 +356,7 @@ var SelectorNode = function SelectorNode(props) {
|
|
|
355
356
|
}));
|
|
356
357
|
};
|
|
357
358
|
|
|
358
|
-
var css_248z$2 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n
|
|
359
|
+
var css_248z$2 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-selector-main {\n padding: 16px 0 0 0;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n.paraui-v3-selector-main > .selectot-main-search {\n padding: 0 16px;\n margin-bottom: 16px;\n}\n.paraui-v3-selector-main > .selector-main-box {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .nav-box {\n padding: 0 16px;\n margin-bottom: 12px;\n line-height: 0;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list-no-data {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-bottom: 16px;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list {\n flex: 1;\n overflow-y: hidden;\n padding-bottom: 16px;\n display: flex;\n flex-direction: column;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-all-check {\n position: relative;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-all-check + .selector-group-title.selector-group-title-first {\n margin-top: 4px;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content {\n overflow-y: hidden;\n position: relative;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content:before {\n content: \"\";\n position: absolute;\n height: 36px;\n width: 100%;\n pointer-events: none;\n top: 0;\n left: 0;\n z-index: 1;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content:after {\n content: \"\";\n position: absolute;\n height: 36px;\n width: 100%;\n pointer-events: none;\n bottom: 0;\n left: 0;\n z-index: 1;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content.selector-main-list-scroll-top:after {\n box-shadow: inset 0px -10px 10px -8px rgba(0, 0, 0, 0.05);\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content.selector-main-list-scroll-middle:before {\n box-shadow: inset 0px 10px 10px -8px rgba(0, 0, 0, 0.05);\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content.selector-main-list-scroll-middle:after {\n box-shadow: inset 0px -10px 10px -8px rgba(0, 0, 0, 0.05);\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content.selector-main-list-scroll-bottom:before {\n box-shadow: inset 0px 10px 10px -8px rgba(0, 0, 0, 0.05);\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content > .selector-main-list-content-box {\n height: 100%;\n overflow-y: auto;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content > .selector-main-list-content-box > .selector-group-title {\n padding: 0 12px;\n margin-top: 24px;\n margin-bottom: 12px;\n font-size: 14px;\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-content > .selector-main-list-content-box > .selector-group-title.selector-group-title-first {\n margin-top: 0;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-more {\n padding: 0 16px;\n cursor: pointer;\n font-size: 14px;\n color: rgb(54, 102, 214);\n line-height: 36px;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-more:hover {\n background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content.selector-main-search-content {\n /*position: absolute;\n left: 0;\n top: 0;*/\n width: 100%;\n height: 100%;\n background-color: white;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content.selector-main-search-content > .selector-main-list {\n padding-bottom: 16px;\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content.selector-main-content-all-check > .selector-main-list > .selector-main-list-content {\n max-height: calc(100% - 36px);\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content.selector-main-content-load-more > .selector-main-list > .selector-main-list-content {\n max-height: calc(100% - 36px);\n}\n.paraui-v3-selector-main > .selector-main-box > .selector-main-content.selector-main-content-all-check.selector-main-content-load-more > .selector-main-list > .selector-main-list-content {\n max-height: calc(100% - 36px - 36px);\n}\n.paraui-v3-selector-main.paraui-v3-selector-main-select > .selector-main-box > .selector-main-content > .selector-main-list > .selector-main-list-more {\n padding-left: 38px;\n}\n.paraui-v3-selector-main.paraui-v3-selector-main-show-search > .selector-main-box {\n height: calc(100% - 52px);\n}\n.paraui-v3-selector-main.paraui-v3-selector-main-show-search > .selector-main-box > .selector-main-content.selector-main-list-box {\n display: none;\n}\n.paraui-v3-selector-main.paraui-v3-selector-main-search > .selector-main-box {\n height: calc(100% - 52px);\n}";
|
|
359
360
|
styleInject(css_248z$2);
|
|
360
361
|
|
|
361
362
|
var SelectorMainContent = function SelectorMainContent(props) {
|
|
@@ -1023,7 +1024,7 @@ var SelectorMain = function SelectorMain(props) {
|
|
|
1023
1024
|
}));
|
|
1024
1025
|
};
|
|
1025
1026
|
|
|
1026
|
-
var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n
|
|
1027
|
+
var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box {\n padding: 24px 0 16px 0;\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box > .title {\n font-size: 14px;\n color: rgb(46, 55, 67);\n padding: 0 16px;\n margin-bottom: 16px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box > .title > .title-content {\n margin-left: 8px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box > .content {\n overflow-y: auto;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box {\n padding-top: 12px;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .title {\n font-size: 14px;\n color: rgb(46, 55, 67);\n padding: 0 16px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content {\n padding: 0 16px 12px 16px;\n overflow: auto;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content > .content-tag {\n display: inline-flex;\n height: 24px;\n align-items: center;\n padding: 0 8px;\n border-radius: 2px;\n background-color: rgba(171, 176, 185, 0.2);\n margin-right: 8px;\n margin-top: 6px;\n max-width: calc(100% - 8px);\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content > .content-tag > span {\n font-size: 12px;\n color: rgb(46, 55, 67);\n overflow: hidden;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content > .content-tag > svg {\n font-size: 16px;\n margin-left: 4px;\n color: rgba(46, 55, 67, 0.7);\n cursor: pointer;\n}";
|
|
1027
1028
|
styleInject(css_248z$1);
|
|
1028
1029
|
|
|
1029
1030
|
var SelectorData = function SelectorData(props) {
|
|
@@ -1298,7 +1299,7 @@ var reqFunc = function reqFunc(obj) {
|
|
|
1298
1299
|
}
|
|
1299
1300
|
};
|
|
1300
1301
|
|
|
1301
|
-
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n
|
|
1302
|
+
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-selector {\n border: 1px solid rgba(171, 176, 185, 0.4);\n border-radius: 4px;\n display: flex;\n height: 100%;\n width: 100%;\n}\n.paraui-v3-selector.paraui-v3-selector-lr > .paraui-v3-selector-main {\n width: 50%;\n}\n.paraui-v3-selector.paraui-v3-selector-lr > .paraui-v3-selector-data {\n width: 50%;\n border-left: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-selector.paraui-v3-selector-tb {\n flex-direction: column;\n}\n.paraui-v3-selector.paraui-v3-selector-tb > .paraui-v3-selector-data {\n border-bottom: 1px solid rgba(171, 176, 185, 0.4);\n max-height: 106px;\n}\n.paraui-v3-selector.paraui-v3-selector-tb > .paraui-v3-selector-main {\n overflow-y: auto;\n height: auto;\n flex: 1;\n}";
|
|
1302
1303
|
styleInject(css_248z);
|
|
1303
1304
|
|
|
1304
1305
|
var handFieldConfig = function handFieldConfig(fieldConfig, rowKey) {
|
|
@@ -1673,13 +1674,20 @@ var Selector = function Selector(props) {
|
|
|
1673
1674
|
|
|
1674
1675
|
|
|
1675
1676
|
var handParentId = function handParentId() {
|
|
1676
|
-
var parentId
|
|
1677
|
-
if (props.breadcrumbsHead) parentId = props.breadcrumbsHead.value;
|
|
1677
|
+
var parentId; // 面包屑最后一项做parent
|
|
1678
1678
|
|
|
1679
|
-
if (constData.current.breadcrumbsList.length >
|
|
1679
|
+
if (constData.current.breadcrumbsList.length > 0) {
|
|
1680
1680
|
// 包含了根,所以要多加1
|
|
1681
1681
|
var item = constData.current.breadcrumbsList[constData.current.breadcrumbsList.length - 1];
|
|
1682
1682
|
parentId = item.value;
|
|
1683
|
+
} else {
|
|
1684
|
+
if (props.breadcrumbsHead) parentId = props.breadcrumbsHead.value; // 根
|
|
1685
|
+
} // 显示首级, 面包屑只有一层, 拿首级
|
|
1686
|
+
|
|
1687
|
+
|
|
1688
|
+
if (showbreadcrumbsHead && constData.current.breadcrumbsList.length === 1) {
|
|
1689
|
+
parentId = undefined;
|
|
1690
|
+
if (props.breadcrumbsHead) parentId = props.breadcrumbsHead.value; // 根
|
|
1683
1691
|
}
|
|
1684
1692
|
|
|
1685
1693
|
return parentId;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* @date 2022/8/3 3:50 PM
|
|
4
4
|
* @description 选择器选择
|
|
5
5
|
*/
|
|
6
|
-
import React from 'react';
|
|
6
|
+
import React, { ReactNode } from 'react';
|
|
7
7
|
import { HelperTextDetailProps } from "../HelperText";
|
|
8
8
|
import { LabelTooltipProps } from "../Label";
|
|
9
9
|
import { SelectorProps } from "../Selector/interface";
|
|
@@ -35,6 +35,8 @@ export interface SelectorPickerProps extends HelperTextDetailProps {
|
|
|
35
35
|
value?: Record<string, any>[] | Record<string, any>;
|
|
36
36
|
/** 默认值 不受控 */
|
|
37
37
|
defaultValue?: Record<string, any>[] | Record<string, any>;
|
|
38
|
+
/** 自定义tag内容 */
|
|
39
|
+
tagRender?: (item: any) => ReactNode;
|
|
38
40
|
/** 清除回调 */
|
|
39
41
|
onClear?: () => void;
|
|
40
42
|
/** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */
|
package/SelectorPicker/index.js
CHANGED
|
@@ -2,17 +2,18 @@ import { _ as _defineProperty } from '../_verture/defineProperty-0590dc61.js';
|
|
|
2
2
|
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-f8047a75.js';
|
|
3
3
|
import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
|
|
4
4
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
|
-
import { useState, Fragment as Fragment$1 } from 'react';
|
|
5
|
+
import { useState, useRef, Fragment as Fragment$1 } from 'react';
|
|
6
|
+
import clsx from 'clsx';
|
|
6
7
|
import HelperText from '../HelperText/index.js';
|
|
7
8
|
import Label from '../Label/index.js';
|
|
8
|
-
import
|
|
9
|
-
import { Dropdown } from '../Dropdown/index.js';
|
|
9
|
+
import { D as Dropdown } from '../_verture/index-ffd2b2cb.js';
|
|
10
10
|
import Selector, { handFieldConfig } from '../Selector/index.js';
|
|
11
|
+
import AutoTips from '../AutoTips/index.js';
|
|
11
12
|
import CloseCircle from '@para-ui/icons/CloseCircle';
|
|
12
13
|
import Down from '@para-ui/icons/Down';
|
|
13
14
|
import CloseIcon from '@para-ui/icons/Close';
|
|
14
|
-
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
15
15
|
import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
|
|
16
|
+
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
16
17
|
import '../Help/index.js';
|
|
17
18
|
import '../_verture/tslib.es6-55ed4bd2.js';
|
|
18
19
|
import '../Tooltip/index.js';
|
|
@@ -20,7 +21,9 @@ import 'rc-tooltip';
|
|
|
20
21
|
import 'rc-tooltip/lib/placements';
|
|
21
22
|
import '@para-ui/icons/Help';
|
|
22
23
|
import 'rc-dropdown';
|
|
23
|
-
import '../_verture/usePopupContainer-
|
|
24
|
+
import '../_verture/usePopupContainer-7bbd7720.js';
|
|
25
|
+
import 'dayjs';
|
|
26
|
+
import '@paraview/lib';
|
|
24
27
|
import '../_verture/index-342379c6.js';
|
|
25
28
|
import '../Radio/index.js';
|
|
26
29
|
import '../Checkbox/index.js';
|
|
@@ -32,10 +35,8 @@ import '@para-ui/core/GlobalContext';
|
|
|
32
35
|
import '../Search/index.js';
|
|
33
36
|
import '../TextField/index.js';
|
|
34
37
|
import '../_verture/typeof-498dd2b1.js';
|
|
35
|
-
import '@paraview/lib';
|
|
36
38
|
import '@para-ui/icons/PreviewClose';
|
|
37
39
|
import '@para-ui/icons/PreviewOpen';
|
|
38
|
-
import '../AutoTips/index.js';
|
|
39
40
|
import '../_verture/useGlobalProps-af9a2af6.js';
|
|
40
41
|
import '../Button/index.js';
|
|
41
42
|
import '@para-ui/icons/Forbid';
|
|
@@ -46,7 +47,7 @@ import '@para-ui/icons/Return';
|
|
|
46
47
|
import '../Empty/index.js';
|
|
47
48
|
import '@para-ui/icons/Refresh';
|
|
48
49
|
|
|
49
|
-
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n
|
|
50
|
+
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-selector-picker > .selector-picker-wrapper {\n position: relative;\n display: flex;\n min-height: 36px;\n padding: 0 42px 0 12px;\n border: 1px solid rgba(171, 176, 185, 0.4);\n border-radius: 4px;\n background-color: rgb(255, 255, 255);\n cursor: pointer;\n transition: 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper:hover {\n border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n position: absolute;\n top: 50%;\n left: 12px;\n right: 42px;\n transform: translateY(-50%);\n font-size: 14px;\n color: rgba(46, 55, 67, 0.4);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n position: absolute;\n top: 7px;\n right: 12px;\n line-height: 0;\n transition: 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow svg {\n color: rgba(46, 55, 67, 0.7);\n font-size: 20px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n position: absolute;\n top: 9px;\n right: 12px;\n opacity: 0;\n line-height: 0;\n cursor: pointer;\n transition: 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear svg {\n color: rgba(46, 55, 67, 0.7);\n font-size: 16px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow {\n position: relative;\n display: flex;\n width: 100%;\n flex: auto;\n flex-wrap: wrap;\n padding-top: 5px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow.selector-picker-overflow-single {\n padding-top: 0;\n align-items: center;\n overflow: hidden;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow.selector-picker-overflow-single > .selector-picker-single-content {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 14px;\n color: rgb(46, 55, 67);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item {\n flex: none;\n max-width: 100%;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item {\n display: inline-flex;\n align-items: center;\n padding: 0 12px;\n height: 24px;\n margin: 0 8px 5px 0;\n max-width: 100%;\n color: rgb(46, 55, 67);\n line-height: 24px;\n background-color: rgba(171, 176, 185, 0.2);\n border-radius: 4px;\n user-select: none;\n transition: 0.3s;\n cursor: default;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item > .selector-picker-item-content {\n display: inline-block;\n margin-right: 4px;\n overflow: hidden;\n font-size: 12px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item > .selector-picker-item-remove {\n display: inline-flex;\n cursor: pointer;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item > .selector-picker-item-remove svg {\n font-size: 16px;\n color: inherit;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper {\n border-color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow {\n transform: rotate(180deg);\n color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled {\n cursor: not-allowed;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper {\n background-color: rgba(171, 176, 185, 0.12);\n border-color: rgba(171, 176, 185, 0.4);\n pointer-events: none;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-error > .selector-picker-wrapper {\n border-color: rgb(235, 96, 84);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-error > .selector-picker-wrapper:hover {\n border-color: rgb(235, 96, 84);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n opacity: 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n opacity: 1;\n}\n.paraui-v3-selector-picker-dropdown .paraui-v3-selector {\n border: 0;\n}\n.paraui-v3-selector-picker-dropdown .selector-picker-dropdown-content {\n max-height: 300px;\n overflow: auto;\n}";
|
|
50
51
|
styleInject(css_248z);
|
|
51
52
|
|
|
52
53
|
var SelectorPicker = function SelectorPicker(props) {
|
|
@@ -77,7 +78,8 @@ var SelectorPicker = function SelectorPicker(props) {
|
|
|
77
78
|
allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
|
|
78
79
|
selectorProps = props.selectorProps,
|
|
79
80
|
onChange = props.onChange,
|
|
80
|
-
onClear = props.onClear
|
|
81
|
+
onClear = props.onClear,
|
|
82
|
+
tagRender = props.tagRender;
|
|
81
83
|
var fieldConfigHand = handFieldConfig((_a = props.selectorProps) === null || _a === void 0 ? void 0 : _a.fieldConfig, ((_b = props.selectorProps) === null || _b === void 0 ? void 0 : _b.rowKey) || 'key'); // 字段配置,对应数据字段
|
|
82
84
|
|
|
83
85
|
var selectorFieldConfigHand = Object.assign(Object.assign({}, fieldConfigHand), (_c = props.selectorProps) === null || _c === void 0 ? void 0 : _c.backDataFieldConfig); // 选中值字段配置,对应数据字段
|
|
@@ -93,11 +95,13 @@ var SelectorPicker = function SelectorPicker(props) {
|
|
|
93
95
|
setOpen = _useState4[1]; // 显示下拉
|
|
94
96
|
|
|
95
97
|
|
|
98
|
+
var posDom = useRef(null);
|
|
96
99
|
var prefixCls = $prefixCls + '-selector-picker';
|
|
97
100
|
/** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */
|
|
98
101
|
|
|
99
102
|
var onChangeCom = function onChangeCom(val, node, rowData) {
|
|
100
103
|
onChange && onChange(val, node, rowData);
|
|
104
|
+
if (!multiple) setOpen(false);
|
|
101
105
|
|
|
102
106
|
if (value === undefined) {
|
|
103
107
|
setValueCom(!val ? [] : val);
|
|
@@ -169,7 +173,9 @@ var SelectorPicker = function SelectorPicker(props) {
|
|
|
169
173
|
|
|
170
174
|
var handTagDom = function handTagDom(item, index) {
|
|
171
175
|
var labelStr = selectorFieldConfigHand.mainTitle || '';
|
|
172
|
-
var
|
|
176
|
+
var valKey = selectorFieldConfigHand.key || '';
|
|
177
|
+
var val = item[labelStr] || item[valKey];
|
|
178
|
+
var renderVal = tagRender && tagRender(item);
|
|
173
179
|
return jsx("div", Object.assign({
|
|
174
180
|
className: "selector-picker-overflow-item"
|
|
175
181
|
}, {
|
|
@@ -179,7 +185,9 @@ var SelectorPicker = function SelectorPicker(props) {
|
|
|
179
185
|
children: [jsx("span", Object.assign({
|
|
180
186
|
className: "selector-picker-item-content"
|
|
181
187
|
}, {
|
|
182
|
-
children:
|
|
188
|
+
children: jsx(AutoTips, {
|
|
189
|
+
children: renderVal || val
|
|
190
|
+
})
|
|
183
191
|
})), jsx("span", Object.assign({
|
|
184
192
|
className: "selector-picker-item-remove",
|
|
185
193
|
onClick: function onClick(e) {
|
|
@@ -194,17 +202,21 @@ var SelectorPicker = function SelectorPicker(props) {
|
|
|
194
202
|
|
|
195
203
|
|
|
196
204
|
var tagMemo = function tagMemo() {
|
|
197
|
-
var _a;
|
|
205
|
+
var _a, _b;
|
|
198
206
|
|
|
199
207
|
var list = handComVal();
|
|
200
208
|
if (!list.length) return;
|
|
201
209
|
|
|
202
210
|
if (!multiple) {
|
|
203
211
|
//单选
|
|
212
|
+
var labelStr = selectorFieldConfigHand.mainTitle || '';
|
|
213
|
+
var valKey = selectorFieldConfigHand.key || '';
|
|
214
|
+
var val = ((_a = list[0]) === null || _a === void 0 ? void 0 : _a[labelStr]) || ((_b = list[0]) === null || _b === void 0 ? void 0 : _b[valKey]);
|
|
215
|
+
var renderVal = tagRender && tagRender(list[0]);
|
|
204
216
|
return jsx("span", Object.assign({
|
|
205
217
|
className: "selector-picker-single-content"
|
|
206
218
|
}, {
|
|
207
|
-
children:
|
|
219
|
+
children: renderVal || val
|
|
208
220
|
}));
|
|
209
221
|
}
|
|
210
222
|
|
|
@@ -258,9 +270,14 @@ var SelectorPicker = function SelectorPicker(props) {
|
|
|
258
270
|
return obj;
|
|
259
271
|
};
|
|
260
272
|
|
|
261
|
-
return jsx("div", {
|
|
273
|
+
return jsx("div", Object.assign({
|
|
274
|
+
className: 'selector-picker-dropdown-content',
|
|
275
|
+
style: {
|
|
276
|
+
width: (posDom && posDom.current ? posDom.current.offsetWidth : 0) + 'px'
|
|
277
|
+
}
|
|
278
|
+
}, {
|
|
262
279
|
children: jsx(Selector, Object.assign({}, handSelectorProps()))
|
|
263
|
-
});
|
|
280
|
+
}));
|
|
264
281
|
}; //dropdown anchor
|
|
265
282
|
|
|
266
283
|
|
|
@@ -296,7 +313,8 @@ var SelectorPicker = function SelectorPicker(props) {
|
|
|
296
313
|
|
|
297
314
|
return jsxs("div", Object.assign({
|
|
298
315
|
className: makeCls(),
|
|
299
|
-
style: style
|
|
316
|
+
style: style,
|
|
317
|
+
ref: posDom
|
|
300
318
|
}, {
|
|
301
319
|
children: [renderLabel(), jsx(Dropdown, Object.assign({
|
|
302
320
|
visible: open,
|