@antv/l7-component 2.21.1 → 2.21.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/assets/iconfont/iconfont.js +6 -6
- package/es/constants/index.js +2 -2
- package/es/control/baseControl/buttonControl.js +109 -144
- package/es/control/baseControl/control.js +212 -258
- package/es/control/baseControl/popperControl.js +67 -95
- package/es/control/baseControl/selectControl.js +132 -178
- package/es/control/exportImage.js +59 -142
- package/es/control/fullscreen.js +69 -100
- package/es/control/geoLocate.js +37 -84
- package/es/control/layerSwitch.js +111 -154
- package/es/control/logo.js +43 -69
- package/es/control/mapTheme.js +57 -98
- package/es/control/mouseLocation.js +37 -69
- package/es/control/scale.js +107 -135
- package/es/control/swipe.js +297 -389
- package/es/control/zoom.js +80 -112
- package/es/css/index.css +10 -7
- package/es/index.js +675 -1
- package/es/marker-layer.js +275 -326
- package/es/marker.js +394 -446
- package/es/popup/layerPopup.js +277 -321
- package/es/popup/popup.js +422 -482
- package/es/utils/anchor.js +6 -6
- package/es/utils/icon.js +4 -4
- package/es/utils/popper.js +180 -196
- package/es/utils/screenfull.js +29 -51
- package/lib/assets/iconfont/iconfont.js +6 -6
- package/lib/constants/index.d.ts +60 -0
- package/lib/constants/index.js +2 -2
- package/lib/control/baseControl/buttonControl.d.ts +60 -0
- package/lib/control/baseControl/buttonControl.js +110 -143
- package/lib/control/baseControl/control.d.ts +112 -0
- package/lib/control/baseControl/control.js +213 -257
- package/lib/control/baseControl/index.d.ts +4 -0
- package/lib/control/baseControl/index.js +5 -5
- package/lib/control/baseControl/popperControl.d.ts +28 -0
- package/lib/control/baseControl/popperControl.js +68 -94
- package/lib/control/baseControl/selectControl.d.ts +53 -0
- package/lib/control/baseControl/selectControl.js +133 -177
- package/lib/control/exportImage.d.ts +19 -0
- package/lib/control/exportImage.js +60 -141
- package/lib/control/fullscreen.d.ts +20 -0
- package/lib/control/fullscreen.js +70 -99
- package/lib/control/geoLocate.d.ts +17 -0
- package/lib/control/geoLocate.js +38 -83
- package/lib/control/layerSwitch.d.ts +27 -0
- package/lib/control/layerSwitch.js +112 -153
- package/lib/control/logo.d.ts +14 -0
- package/lib/control/logo.js +44 -69
- package/lib/control/mapTheme.d.ts +11 -0
- package/lib/control/mapTheme.js +58 -97
- package/lib/control/mouseLocation.d.ts +16 -0
- package/lib/control/mouseLocation.js +38 -68
- package/lib/control/scale.d.ts +35 -0
- package/lib/control/scale.js +108 -134
- package/lib/control/swipe.d.ts +66 -0
- package/lib/control/swipe.js +298 -388
- package/lib/control/zoom.d.ts +39 -0
- package/lib/control/zoom.js +81 -111
- package/lib/css/index.css +10 -7
- package/lib/index.d.ts +19 -0
- package/lib/index.js +691 -17
- package/lib/interface.d.ts +18 -0
- package/lib/marker-layer.d.ts +55 -0
- package/lib/marker-layer.js +277 -324
- package/lib/marker.d.ts +58 -0
- package/lib/marker.js +395 -445
- package/lib/popup/layerPopup.d.ts +99 -0
- package/lib/popup/layerPopup.js +278 -320
- package/lib/popup/popup.d.ts +142 -0
- package/lib/popup/popup.js +423 -481
- package/lib/utils/anchor.d.ts +22 -0
- package/lib/utils/anchor.js +6 -6
- package/lib/utils/icon.d.ts +1 -0
- package/lib/utils/icon.js +6 -5
- package/lib/utils/popper.d.ts +76 -0
- package/lib/utils/popper.js +184 -196
- package/lib/utils/screenfull.d.ts +2 -0
- package/lib/utils/screenfull.js +29 -52
- package/package.json +16 -20
|
@@ -1,16 +1,9 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _get from "@babel/runtime/helpers/esm/get";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
7
|
-
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
8
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
9
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
3
|
import { Popper } from "../../utils/popper";
|
|
11
4
|
import ButtonControl from "./buttonControl";
|
|
12
5
|
export { PopperControl };
|
|
13
|
-
|
|
6
|
+
const PopperPlacementMap = {
|
|
14
7
|
topleft: 'right-start',
|
|
15
8
|
topcenter: 'bottom',
|
|
16
9
|
topright: 'left-start',
|
|
@@ -24,97 +17,76 @@ var PopperPlacementMap = {
|
|
|
24
17
|
rightcenter: 'left',
|
|
25
18
|
rightbottom: 'top-end'
|
|
26
19
|
};
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
function PopperControl() {
|
|
31
|
-
_classCallCheck(this, PopperControl);
|
|
32
|
-
return _super.apply(this, arguments);
|
|
33
|
-
}
|
|
34
|
-
_createClass(PopperControl, [{
|
|
35
|
-
key: "getPopper",
|
|
36
|
-
value:
|
|
20
|
+
export default class PopperControl extends ButtonControl {
|
|
21
|
+
constructor(...args) {
|
|
22
|
+
super(...args);
|
|
37
23
|
/**
|
|
38
24
|
* 气泡实例
|
|
39
25
|
* @protected
|
|
40
26
|
*/
|
|
27
|
+
_defineProperty(this, "popper", void 0);
|
|
28
|
+
}
|
|
29
|
+
getPopper() {
|
|
30
|
+
return this.popper;
|
|
31
|
+
}
|
|
32
|
+
hide() {
|
|
33
|
+
this.popper.hide();
|
|
34
|
+
super.hide();
|
|
35
|
+
}
|
|
41
36
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
/**
|
|
38
|
+
* 获取默认配置
|
|
39
|
+
* @param option
|
|
40
|
+
*/
|
|
41
|
+
getDefault(option) {
|
|
42
|
+
var _option$position;
|
|
43
|
+
const defaultOption = super.getDefault(option);
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
45
|
+
const position = (_option$position = option === null || option === void 0 ? void 0 : option.position) !== null && _option$position !== void 0 ? _option$position : defaultOption.position;
|
|
46
|
+
return _objectSpread(_objectSpread({}, super.getDefault(option)), {}, {
|
|
47
|
+
popperPlacement: position instanceof Element ? 'bottom' : PopperPlacementMap[position],
|
|
48
|
+
popperTrigger: 'click'
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
onAdd() {
|
|
52
|
+
const button = super.onAdd();
|
|
53
|
+
this.initPopper();
|
|
54
|
+
return button;
|
|
55
|
+
}
|
|
56
|
+
onRemove() {
|
|
57
|
+
this.popper.destroy();
|
|
58
|
+
}
|
|
59
|
+
initPopper() {
|
|
60
|
+
const {
|
|
61
|
+
popperClassName,
|
|
62
|
+
popperPlacement,
|
|
63
|
+
popperTrigger
|
|
64
|
+
} = this.controlOption;
|
|
65
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
66
|
+
const popperContainer = this.mapsService.getMapContainer();
|
|
51
67
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var button = _get(_getPrototypeOf(PopperControl.prototype), "onAdd", this).call(this);
|
|
72
|
-
this.initPopper();
|
|
73
|
-
return button;
|
|
74
|
-
}
|
|
75
|
-
}, {
|
|
76
|
-
key: "onRemove",
|
|
77
|
-
value: function onRemove() {
|
|
68
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
69
|
+
this.popper = new Popper(this.button, {
|
|
70
|
+
className: popperClassName,
|
|
71
|
+
placement: popperPlacement,
|
|
72
|
+
trigger: popperTrigger,
|
|
73
|
+
container: popperContainer,
|
|
74
|
+
unique: true
|
|
75
|
+
});
|
|
76
|
+
this.popper.on('show', () => {
|
|
77
|
+
this.emit('popperShow', this);
|
|
78
|
+
}).on('hide', () => {
|
|
79
|
+
this.emit('popperHide', this);
|
|
80
|
+
});
|
|
81
|
+
return this.popper;
|
|
82
|
+
}
|
|
83
|
+
setOptions(option) {
|
|
84
|
+
super.setOptions(option);
|
|
85
|
+
if (this.checkUpdateOption(option, ['popperPlacement', 'popperTrigger', 'popperClassName'])) {
|
|
86
|
+
const content = this.popper.getContent();
|
|
78
87
|
this.popper.destroy();
|
|
88
|
+
this.initPopper();
|
|
89
|
+
this.popper.setContent(content);
|
|
79
90
|
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
value: function initPopper() {
|
|
83
|
-
var _this = this;
|
|
84
|
-
var _this$controlOption = this.controlOption,
|
|
85
|
-
popperClassName = _this$controlOption.popperClassName,
|
|
86
|
-
popperPlacement = _this$controlOption.popperPlacement,
|
|
87
|
-
popperTrigger = _this$controlOption.popperTrigger;
|
|
88
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
89
|
-
var popperContainer = this.mapsService.getMapContainer();
|
|
90
|
-
|
|
91
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
92
|
-
this.popper = new Popper(this.button, {
|
|
93
|
-
className: popperClassName,
|
|
94
|
-
placement: popperPlacement,
|
|
95
|
-
trigger: popperTrigger,
|
|
96
|
-
container: popperContainer,
|
|
97
|
-
unique: true
|
|
98
|
-
});
|
|
99
|
-
this.popper.on('show', function () {
|
|
100
|
-
_this.emit('popperShow', _this);
|
|
101
|
-
}).on('hide', function () {
|
|
102
|
-
_this.emit('popperHide', _this);
|
|
103
|
-
});
|
|
104
|
-
return this.popper;
|
|
105
|
-
}
|
|
106
|
-
}, {
|
|
107
|
-
key: "setOptions",
|
|
108
|
-
value: function setOptions(option) {
|
|
109
|
-
_get(_getPrototypeOf(PopperControl.prototype), "setOptions", this).call(this, option);
|
|
110
|
-
if (this.checkUpdateOption(option, ['popperPlacement', 'popperTrigger', 'popperClassName'])) {
|
|
111
|
-
var content = this.popper.getContent();
|
|
112
|
-
this.popper.destroy();
|
|
113
|
-
this.initPopper();
|
|
114
|
-
this.popper.setContent(content);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}]);
|
|
118
|
-
return PopperControl;
|
|
119
|
-
}(ButtonControl);
|
|
120
|
-
export { PopperControl as default };
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
|
-
import _get from "@babel/runtime/helpers/esm/get";
|
|
6
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
7
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
8
|
-
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
9
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
11
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
12
2
|
import { DOM } from '@antv/l7-utils';
|
|
13
3
|
import { PopperControl } from "./popperControl";
|
|
14
4
|
export { SelectControl };
|
|
@@ -18,202 +8,166 @@ var SelectControlConstant = /*#__PURE__*/function (SelectControlConstant) {
|
|
|
18
8
|
SelectControlConstant["OptionIndexAttrKey"] = "data-option-index";
|
|
19
9
|
return SelectControlConstant;
|
|
20
10
|
}(SelectControlConstant || {});
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
function SelectControl() {
|
|
25
|
-
var _this;
|
|
26
|
-
_classCallCheck(this, SelectControl);
|
|
27
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
28
|
-
args[_key] = arguments[_key];
|
|
29
|
-
}
|
|
30
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
11
|
+
export default class SelectControl extends PopperControl {
|
|
12
|
+
constructor(...args) {
|
|
13
|
+
super(...args);
|
|
31
14
|
/**
|
|
32
15
|
* 当前选中的值
|
|
33
16
|
* @protected
|
|
34
17
|
*/
|
|
35
|
-
_defineProperty(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
18
|
+
_defineProperty(this, "selectValue", []);
|
|
19
|
+
/**
|
|
20
|
+
* 选项对应的 DOM 列表
|
|
21
|
+
* @protected
|
|
22
|
+
*/
|
|
23
|
+
_defineProperty(this, "optionDOMList", void 0);
|
|
24
|
+
_defineProperty(this, "createNormalOption", option => {
|
|
25
|
+
const isSelect = this.selectValue.includes(option.value);
|
|
26
|
+
const optionDOM = DOM.create('div', `l7-select-control-item ${isSelect ? SelectControlConstant.ActiveOptionClassName : ''}`);
|
|
27
|
+
if (this.getIsMultiple()) {
|
|
28
|
+
optionDOM.appendChild(this.createCheckbox(isSelect));
|
|
41
29
|
} else {
|
|
42
|
-
optionDOM.appendChild(
|
|
30
|
+
optionDOM.appendChild(this.createRadio(isSelect));
|
|
43
31
|
}
|
|
44
32
|
if (option.icon) {
|
|
45
33
|
optionDOM.appendChild(option.icon);
|
|
46
34
|
}
|
|
47
|
-
|
|
35
|
+
const textDOM = DOM.create('span');
|
|
48
36
|
textDOM.innerText = option.text;
|
|
49
37
|
optionDOM.appendChild(textDOM);
|
|
50
38
|
return optionDOM;
|
|
51
39
|
});
|
|
52
|
-
_defineProperty(
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
return value === item.value;
|
|
56
|
-
});
|
|
40
|
+
_defineProperty(this, "onItemClick", item => {
|
|
41
|
+
if (this.getIsMultiple()) {
|
|
42
|
+
const targetIndex = this.selectValue.findIndex(value => value === item.value);
|
|
57
43
|
if (targetIndex > -1) {
|
|
58
|
-
|
|
44
|
+
this.selectValue.splice(targetIndex, 1);
|
|
59
45
|
} else {
|
|
60
|
-
|
|
46
|
+
this.selectValue = [...this.selectValue, item.value];
|
|
61
47
|
}
|
|
62
48
|
} else {
|
|
63
|
-
|
|
49
|
+
this.selectValue = [item.value];
|
|
64
50
|
}
|
|
65
|
-
|
|
51
|
+
this.setSelectValue(this.selectValue);
|
|
66
52
|
});
|
|
67
|
-
return _this;
|
|
68
53
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
function setOptions(option) {
|
|
78
|
-
_get(_getPrototypeOf(SelectControl.prototype), "setOptions", this).call(this, option);
|
|
79
|
-
var options = option.options;
|
|
80
|
-
if (options) {
|
|
81
|
-
this.popper.setContent(this.getPopperContent(options));
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}, {
|
|
85
|
-
key: "onAdd",
|
|
86
|
-
value: function onAdd() {
|
|
87
|
-
var button = _get(_getPrototypeOf(SelectControl.prototype), "onAdd", this).call(this);
|
|
88
|
-
var defaultValue = this.controlOption.defaultValue;
|
|
89
|
-
if (defaultValue) {
|
|
90
|
-
this.selectValue = this.transSelectValue(defaultValue);
|
|
91
|
-
}
|
|
92
|
-
this.popper.setContent(this.getPopperContent(this.controlOption.options));
|
|
93
|
-
return button;
|
|
54
|
+
setOptions(option) {
|
|
55
|
+
super.setOptions(option);
|
|
56
|
+
const {
|
|
57
|
+
options
|
|
58
|
+
} = option;
|
|
59
|
+
if (options) {
|
|
60
|
+
this.popper.setContent(this.getPopperContent(options));
|
|
94
61
|
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
62
|
+
}
|
|
63
|
+
onAdd() {
|
|
64
|
+
const button = super.onAdd();
|
|
65
|
+
const {
|
|
66
|
+
defaultValue
|
|
67
|
+
} = this.controlOption;
|
|
68
|
+
if (defaultValue) {
|
|
69
|
+
this.selectValue = this.transSelectValue(defaultValue);
|
|
99
70
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
71
|
+
this.popper.setContent(this.getPopperContent(this.controlOption.options));
|
|
72
|
+
return button;
|
|
73
|
+
}
|
|
74
|
+
getSelectValue() {
|
|
75
|
+
return this.getIsMultiple() ? this.selectValue : this.selectValue[0];
|
|
76
|
+
}
|
|
77
|
+
setSelectValue(value, emitEvent = true) {
|
|
78
|
+
const finalValue = this.transSelectValue(value);
|
|
79
|
+
this.optionDOMList.forEach(optionDOM => {
|
|
80
|
+
const optionValue = optionDOM.getAttribute(SelectControlConstant.OptionValueAttrKey);
|
|
81
|
+
const checkboxDOM = optionDOM.querySelector('input[type=checkbox]');
|
|
82
|
+
const radioDOM = optionDOM.querySelector('input[type=radio]');
|
|
83
|
+
const isActive = finalValue.includes(optionValue);
|
|
110
84
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}
|
|
85
|
+
// 设置类名和选中状态的函数
|
|
86
|
+
const setDOMState = (dom, active) => {
|
|
87
|
+
DOM.toggleClass(optionDOM, SelectControlConstant.ActiveOptionClassName, active);
|
|
88
|
+
if (dom) {
|
|
89
|
+
DOM.setChecked(dom, active);
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
setDOMState(checkboxDOM, isActive);
|
|
93
|
+
setDOMState(radioDOM, isActive);
|
|
94
|
+
});
|
|
95
|
+
this.selectValue = finalValue;
|
|
96
|
+
if (emitEvent) {
|
|
97
|
+
this.emit('selectChange', this.getIsMultiple() ? finalValue : finalValue[0]);
|
|
125
98
|
}
|
|
99
|
+
}
|
|
126
100
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
return false;
|
|
135
|
-
}
|
|
101
|
+
/**
|
|
102
|
+
* 是否为多选
|
|
103
|
+
* @protected
|
|
104
|
+
*/
|
|
105
|
+
getIsMultiple() {
|
|
106
|
+
return false;
|
|
107
|
+
}
|
|
136
108
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
var content = DOM.create('div', isImageOptions ? 'l7-select-control--image' : 'l7-select-control--normal');
|
|
148
|
-
if (this.getIsMultiple()) {
|
|
149
|
-
DOM.addClass(content, 'l7-select-control--multiple');
|
|
150
|
-
}
|
|
151
|
-
var optionsDOMList = options.map(function (option, optionIndex) {
|
|
152
|
-
var optionDOM = isImageOptions ?
|
|
153
|
-
// @ts-ignore
|
|
154
|
-
_this2.createImageOption(option) : _this2.createNormalOption(option);
|
|
155
|
-
optionDOM.setAttribute(SelectControlConstant.OptionValueAttrKey, option.value);
|
|
156
|
-
optionDOM.setAttribute(SelectControlConstant.OptionIndexAttrKey, window.String(optionIndex));
|
|
157
|
-
optionDOM.addEventListener('click', _this2.onItemClick.bind(_this2, option));
|
|
158
|
-
return optionDOM;
|
|
159
|
-
});
|
|
160
|
-
content.append.apply(content, _toConsumableArray(optionsDOMList));
|
|
161
|
-
this.optionDOMList = optionsDOMList;
|
|
162
|
-
return content;
|
|
109
|
+
/**
|
|
110
|
+
* 渲染弹窗内容
|
|
111
|
+
* @param options
|
|
112
|
+
* @returns
|
|
113
|
+
*/
|
|
114
|
+
getPopperContent(options) {
|
|
115
|
+
const isImageOptions = this.isImageOptions();
|
|
116
|
+
const content = DOM.create('div', isImageOptions ? 'l7-select-control--image' : 'l7-select-control--normal');
|
|
117
|
+
if (this.getIsMultiple()) {
|
|
118
|
+
DOM.addClass(content, 'l7-select-control--multiple');
|
|
163
119
|
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
DOM.setUnDraggable(imgDOM);
|
|
172
|
-
optionDOM.appendChild(imgDOM);
|
|
173
|
-
var rowDOM = DOM.create('div', 'l7-select-control-item-row');
|
|
174
|
-
if (this.getIsMultiple()) {
|
|
175
|
-
optionDOM.appendChild(this.createCheckbox(isSelect));
|
|
176
|
-
}
|
|
177
|
-
var textDOM = DOM.create('span');
|
|
178
|
-
textDOM.innerText = option.text;
|
|
179
|
-
rowDOM.appendChild(textDOM);
|
|
180
|
-
optionDOM.appendChild(rowDOM);
|
|
120
|
+
const optionsDOMList = options.map((option, optionIndex) => {
|
|
121
|
+
const optionDOM = isImageOptions ?
|
|
122
|
+
// @ts-ignore
|
|
123
|
+
this.createImageOption(option) : this.createNormalOption(option);
|
|
124
|
+
optionDOM.setAttribute(SelectControlConstant.OptionValueAttrKey, option.value);
|
|
125
|
+
optionDOM.setAttribute(SelectControlConstant.OptionIndexAttrKey, window.String(optionIndex));
|
|
126
|
+
optionDOM.addEventListener('click', this.onItemClick.bind(this, option));
|
|
181
127
|
return optionDOM;
|
|
128
|
+
});
|
|
129
|
+
content.append(...optionsDOMList);
|
|
130
|
+
this.optionDOMList = optionsDOMList;
|
|
131
|
+
return content;
|
|
132
|
+
}
|
|
133
|
+
createImageOption(option) {
|
|
134
|
+
const isSelect = this.selectValue.includes(option.value);
|
|
135
|
+
const optionDOM = DOM.create('div', `l7-select-control-item ${isSelect ? SelectControlConstant.ActiveOptionClassName : ''}`);
|
|
136
|
+
const imgDOM = DOM.create('img');
|
|
137
|
+
imgDOM.setAttribute('src', option.img);
|
|
138
|
+
DOM.setUnDraggable(imgDOM);
|
|
139
|
+
optionDOM.appendChild(imgDOM);
|
|
140
|
+
const rowDOM = DOM.create('div', 'l7-select-control-item-row');
|
|
141
|
+
if (this.getIsMultiple()) {
|
|
142
|
+
optionDOM.appendChild(this.createCheckbox(isSelect));
|
|
182
143
|
}
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
key: "createRadio",
|
|
195
|
-
value: function createRadio(isSelect) {
|
|
196
|
-
var radioDOM = DOM.create('input');
|
|
197
|
-
radioDOM.setAttribute('type', 'radio');
|
|
198
|
-
if (isSelect) {
|
|
199
|
-
DOM.setChecked(radioDOM, true);
|
|
200
|
-
}
|
|
201
|
-
return radioDOM;
|
|
202
|
-
}
|
|
203
|
-
}, {
|
|
204
|
-
key: "isImageOptions",
|
|
205
|
-
value: function isImageOptions() {
|
|
206
|
-
// @ts-ignore
|
|
207
|
-
return !!this.controlOption.options.find(function (item) {
|
|
208
|
-
return item.img;
|
|
209
|
-
});
|
|
144
|
+
const textDOM = DOM.create('span');
|
|
145
|
+
textDOM.innerText = option.text;
|
|
146
|
+
rowDOM.appendChild(textDOM);
|
|
147
|
+
optionDOM.appendChild(rowDOM);
|
|
148
|
+
return optionDOM;
|
|
149
|
+
}
|
|
150
|
+
createCheckbox(isSelect) {
|
|
151
|
+
const checkboxDOM = DOM.create('input');
|
|
152
|
+
checkboxDOM.setAttribute('type', 'checkbox');
|
|
153
|
+
if (isSelect) {
|
|
154
|
+
DOM.setChecked(checkboxDOM, true);
|
|
210
155
|
}
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
156
|
+
return checkboxDOM;
|
|
157
|
+
}
|
|
158
|
+
createRadio(isSelect) {
|
|
159
|
+
const radioDOM = DOM.create('input');
|
|
160
|
+
radioDOM.setAttribute('type', 'radio');
|
|
161
|
+
if (isSelect) {
|
|
162
|
+
DOM.setChecked(radioDOM, true);
|
|
215
163
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
164
|
+
return radioDOM;
|
|
165
|
+
}
|
|
166
|
+
isImageOptions() {
|
|
167
|
+
// @ts-ignore
|
|
168
|
+
return !!this.controlOption.options.find(item => item.img);
|
|
169
|
+
}
|
|
170
|
+
transSelectValue(value) {
|
|
171
|
+
return Array.isArray(value) ? value : [value];
|
|
172
|
+
}
|
|
173
|
+
}
|