@kdcloudjs/kdesign 1.7.37 → 1.7.40
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/CHANGELOG.md +55 -0
- package/README.md +2 -1
- package/dist/kdesign-complete.less +107 -11
- package/dist/kdesign.css +186 -5
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +1485 -240
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +13 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/alert/style/index.css +4 -2
- package/es/alert/style/index.less +3 -1
- package/es/cascader/cascader.js +8 -4
- package/es/cascader/style/index.css +5 -2
- package/es/cascader/style/index.less +4 -2
- package/es/config-provider/compDefaultProps.d.ts +9 -0
- package/es/config-provider/compDefaultProps.js +10 -1
- package/es/date-picker/context.d.ts +4 -2
- package/es/date-picker/date-picker.d.ts +9 -0
- package/es/date-picker/date-picker.js +4 -2
- package/es/date-picker/panel/month/month.js +14 -9
- package/es/date-picker/panel/quarter/quarter.js +12 -4
- package/es/date-picker/panel/time/time-column.d.ts +2 -0
- package/es/date-picker/panel/time/time-column.js +14 -5
- package/es/date-picker/panel/time/time.js +8 -4
- package/es/date-picker/panel/week/week.js +20 -10
- package/es/date-picker/panel/year/year.js +12 -4
- package/es/date-picker/range-picker.js +11 -4
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/es/input-number/inputNumber.js +20 -14
- package/es/input-number/useSelectionRange.d.ts +2 -1
- package/es/input-number/useSelectionRange.js +3 -2
- package/es/modal/modal.d.ts +1 -0
- package/es/modal/modal.js +31 -5
- package/es/modal/style/index.css +21 -0
- package/es/modal/style/index.less +25 -9
- package/es/qr-code/index.d.ts +3 -0
- package/es/qr-code/index.js +3 -0
- package/es/qr-code/qr-code.d.ts +42 -0
- package/es/qr-code/qr-code.js +80 -0
- package/es/qr-code/style/css.js +2 -0
- package/es/qr-code/style/index.css +154 -0
- package/es/qr-code/style/index.d.ts +2 -0
- package/es/qr-code/style/index.js +2 -0
- package/es/qr-code/style/index.less +42 -0
- package/es/qr-code/style/mixin.less +6 -0
- package/es/qr-code/style/token.less +24 -0
- package/es/tree/tree.js +2 -2
- package/es/tree/treeHooks.d.ts +1 -1
- package/es/tree/treeHooks.js +2 -2
- package/es/tree-select/tree-select.js +2 -2
- package/lib/alert/style/index.css +4 -2
- package/lib/alert/style/index.less +3 -1
- package/lib/cascader/cascader.js +8 -4
- package/lib/cascader/style/index.css +5 -2
- package/lib/cascader/style/index.less +4 -2
- package/lib/config-provider/compDefaultProps.d.ts +9 -0
- package/lib/config-provider/compDefaultProps.js +10 -1
- package/lib/date-picker/context.d.ts +4 -2
- package/lib/date-picker/date-picker.d.ts +9 -0
- package/lib/date-picker/date-picker.js +4 -2
- package/lib/date-picker/panel/month/month.js +14 -9
- package/lib/date-picker/panel/quarter/quarter.js +12 -4
- package/lib/date-picker/panel/time/time-column.d.ts +2 -0
- package/lib/date-picker/panel/time/time-column.js +14 -5
- package/lib/date-picker/panel/time/time.js +8 -4
- package/lib/date-picker/panel/week/week.js +20 -10
- package/lib/date-picker/panel/year/year.js +12 -4
- package/lib/date-picker/range-picker.js +11 -4
- package/lib/index.d.ts +1 -0
- package/lib/index.js +7 -0
- package/lib/input-number/inputNumber.js +20 -14
- package/lib/input-number/useSelectionRange.d.ts +2 -1
- package/lib/input-number/useSelectionRange.js +3 -2
- package/lib/modal/modal.d.ts +1 -0
- package/lib/modal/modal.js +31 -5
- package/lib/modal/style/index.css +21 -0
- package/lib/modal/style/index.less +25 -9
- package/lib/qr-code/index.d.ts +3 -0
- package/lib/qr-code/index.js +27 -0
- package/lib/qr-code/qr-code.d.ts +42 -0
- package/lib/qr-code/qr-code.js +96 -0
- package/lib/qr-code/style/css.js +4 -0
- package/lib/qr-code/style/index.css +154 -0
- package/lib/qr-code/style/index.d.ts +2 -0
- package/lib/qr-code/style/index.js +4 -0
- package/lib/qr-code/style/index.less +42 -0
- package/lib/qr-code/style/mixin.less +6 -0
- package/lib/qr-code/style/token.less +24 -0
- package/lib/style/components.less +1 -0
- package/lib/tree/tree.js +2 -2
- package/lib/tree/treeHooks.d.ts +1 -1
- package/lib/tree/treeHooks.js +2 -2
- package/lib/tree-select/tree-select.js +4 -4
- package/package.json +4 -2
|
@@ -122,7 +122,8 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
122
122
|
onBlur = datePickerProps.onBlur,
|
|
123
123
|
_onOk = datePickerProps.onOk,
|
|
124
124
|
getPopupContainer = datePickerProps.getPopupContainer,
|
|
125
|
-
status = datePickerProps.status
|
|
125
|
+
status = datePickerProps.status,
|
|
126
|
+
cellRender = datePickerProps.cellRender;
|
|
126
127
|
var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
|
|
127
128
|
var datePickerLang = (0, _extends2.default)({}, globalLocale.getCompLangMsg({
|
|
128
129
|
componentName: 'DatePicker'
|
|
@@ -532,7 +533,9 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
532
533
|
onDateMouseEnter: onDateMouseEnter,
|
|
533
534
|
onDateMouseLeave: onDateMouseLeave,
|
|
534
535
|
innerPicker: innerPicker,
|
|
535
|
-
setInnerPicker: setInnerPicker
|
|
536
|
+
setInnerPicker: setInnerPicker,
|
|
537
|
+
cellRender: cellRender,
|
|
538
|
+
range: mergedActivePickerIndex === 0 ? 'start' : 'end'
|
|
536
539
|
}
|
|
537
540
|
}, renderPanel());
|
|
538
541
|
var rightPanel = /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
|
|
@@ -549,7 +552,9 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
549
552
|
onDateMouseEnter: onDateMouseEnter,
|
|
550
553
|
onDateMouseLeave: onDateMouseLeave,
|
|
551
554
|
innerPicker: innerPicker,
|
|
552
|
-
setInnerPicker: setInnerPicker
|
|
555
|
+
setInnerPicker: setInnerPicker,
|
|
556
|
+
cellRender: cellRender,
|
|
557
|
+
range: mergedActivePickerIndex === 0 ? 'start' : 'end'
|
|
553
558
|
}
|
|
554
559
|
}, renderPanel());
|
|
555
560
|
panels = /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -576,7 +581,9 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
576
581
|
onDateMouseEnter: onDateMouseEnter,
|
|
577
582
|
onDateMouseLeave: onDateMouseLeave,
|
|
578
583
|
innerPicker: innerPicker,
|
|
579
|
-
setInnerPicker: setInnerPicker
|
|
584
|
+
setInnerPicker: setInnerPicker,
|
|
585
|
+
cellRender: cellRender,
|
|
586
|
+
range: mergedActivePickerIndex === 0 ? 'start' : 'end'
|
|
580
587
|
}
|
|
581
588
|
}, renderPanel());
|
|
582
589
|
}
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -223,6 +223,12 @@ Object.defineProperty(exports, "Progress", {
|
|
|
223
223
|
return _progress.default;
|
|
224
224
|
}
|
|
225
225
|
});
|
|
226
|
+
Object.defineProperty(exports, "QRCode", {
|
|
227
|
+
enumerable: true,
|
|
228
|
+
get: function get() {
|
|
229
|
+
return _qrCode.default;
|
|
230
|
+
}
|
|
231
|
+
});
|
|
226
232
|
Object.defineProperty(exports, "Radio", {
|
|
227
233
|
enumerable: true,
|
|
228
234
|
get: function get() {
|
|
@@ -437,6 +443,7 @@ var _link = _interopRequireDefault(require("./link"));
|
|
|
437
443
|
var _treeSelect = _interopRequireDefault(require("./tree-select"));
|
|
438
444
|
var _colorPicker = _interopRequireDefault(require("./color-picker"));
|
|
439
445
|
var _clipboard = _interopRequireDefault(require("./clipboard"));
|
|
446
|
+
var _qrCode = _interopRequireDefault(require("./qr-code"));
|
|
440
447
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
441
448
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
442
449
|
/* @remove-on-es-build-begin */
|
|
@@ -70,6 +70,10 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
70
70
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
71
71
|
inputValue = _useState2[0],
|
|
72
72
|
setInputValue = _useState2[1];
|
|
73
|
+
var _useState3 = (0, _react.useState)(1),
|
|
74
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
75
|
+
forceUpdate = _useState4[0],
|
|
76
|
+
setForceUpdate = _useState4[1];
|
|
73
77
|
var inputStatus = (0, _react.useRef)({
|
|
74
78
|
isHandleChange: false,
|
|
75
79
|
inputFocused: false
|
|
@@ -121,10 +125,11 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
121
125
|
var handleChange = function handleChange(event) {
|
|
122
126
|
inputStatus.current.isHandleChange = true;
|
|
123
127
|
var legalNumber = verifiValue(event.target.value);
|
|
128
|
+
updateSelectionRangePosition(event);
|
|
124
129
|
if (legalNumber === false) {
|
|
130
|
+
setForceUpdate(forceUpdate + 1);
|
|
125
131
|
return false;
|
|
126
132
|
}
|
|
127
|
-
updateSelectionRangePosition(event);
|
|
128
133
|
value === undefined && setInputValue(legalNumber);
|
|
129
134
|
onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
|
|
130
135
|
};
|
|
@@ -163,23 +168,23 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
163
168
|
if (decimalValueLength <= decimalLength && integerValueLength <= digitLength - decimalLength) {
|
|
164
169
|
resultNumerical = numerical;
|
|
165
170
|
} else if (integerValueLength > digitLength - decimalLength) {
|
|
166
|
-
var _context;
|
|
167
|
-
resultNumerical = (0, _concat.default)(_context = "".concat(sign)).call(
|
|
171
|
+
var _context, _context2;
|
|
172
|
+
resultNumerical = mustInPrecisionScope ? inputValue : (0, _concat.default)(_context = (0, _concat.default)(_context2 = "".concat(sign)).call(_context2, integerValue.substr(0, digitLength - decimalLength))).call(_context, decimalValue ? '.' + decimalValue : '');
|
|
168
173
|
} else if (decimalValueLength > decimalLength) {
|
|
169
|
-
var
|
|
170
|
-
resultNumerical = (0, _concat.default)(
|
|
174
|
+
var _context3, _context4;
|
|
175
|
+
resultNumerical = mustInPrecisionScope ? inputValue : (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = "".concat(sign)).call(_context4, integerValue, ".")).call(_context3, decimalValue.substr(0, decimalLength));
|
|
171
176
|
}
|
|
172
177
|
} else if (typeof decimalLength !== 'number' && typeof digitLength === 'number') {
|
|
173
178
|
if (integerValueLength >= digitLength) {
|
|
174
|
-
var
|
|
175
|
-
resultNumerical = (0, _concat.default)(
|
|
179
|
+
var _context5;
|
|
180
|
+
resultNumerical = (0, _concat.default)(_context5 = "".concat(sign)).call(_context5, integerValue.substr(0, digitLength));
|
|
176
181
|
} else {
|
|
177
|
-
var
|
|
178
|
-
resultNumerical = decimalValueLength ? (0, _concat.default)(
|
|
182
|
+
var _context6, _context7, _context8;
|
|
183
|
+
resultNumerical = decimalValueLength ? (0, _concat.default)(_context6 = (0, _concat.default)(_context7 = "".concat(sign)).call(_context7, integerValue, ".")).call(_context6, decimalValue.substr(0, digitLength - integerValueLength)) : (0, _concat.default)(_context8 = "".concat(sign)).call(_context8, integerValue);
|
|
179
184
|
}
|
|
180
185
|
} else if (typeof decimalLength === 'number' && typeof digitLength !== 'number') {
|
|
181
|
-
var
|
|
182
|
-
resultNumerical = decimalValueLength ? (0, _concat.default)(
|
|
186
|
+
var _context9, _context10, _context11;
|
|
187
|
+
resultNumerical = decimalValueLength ? (0, _concat.default)(_context9 = (0, _concat.default)(_context10 = "".concat(sign)).call(_context10, integerValue, ".")).call(_context9, decimalValue.substr(0, decimalLength)) : (0, _concat.default)(_context11 = "".concat(sign)).call(_context11, integerValue);
|
|
183
188
|
} else {
|
|
184
189
|
resultNumerical = numerical;
|
|
185
190
|
}
|
|
@@ -209,13 +214,13 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
209
214
|
});
|
|
210
215
|
};
|
|
211
216
|
var handleKeyDown = function handleKeyDown(event) {
|
|
212
|
-
var
|
|
217
|
+
var _context12;
|
|
213
218
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
214
219
|
if (!stepOption || props.disabled || props.readOnly) {
|
|
215
220
|
return;
|
|
216
221
|
}
|
|
217
222
|
var keyCode = event.keyCode;
|
|
218
|
-
if ((0, _includes.default)(
|
|
223
|
+
if ((0, _includes.default)(_context12 = [38, 40]).call(_context12, keyCode)) {
|
|
219
224
|
event.preventDefault();
|
|
220
225
|
handleStepChang(keyCode === 38 ? 'plus' : 'minus');
|
|
221
226
|
}
|
|
@@ -322,7 +327,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
322
327
|
}, [inputValue, formatter]);
|
|
323
328
|
var updateSelectionRangePosition = (0, _useSelectionRange.default)({
|
|
324
329
|
inputElement: (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input,
|
|
325
|
-
inputValue: displayedInputValue
|
|
330
|
+
inputValue: displayedInputValue,
|
|
331
|
+
forceUpdate: forceUpdate
|
|
326
332
|
});
|
|
327
333
|
return /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({}, others, {
|
|
328
334
|
ref: inputNumberRef,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export default function useSelectionRange({ inputElement, inputValue, }: {
|
|
1
|
+
export default function useSelectionRange({ inputElement, inputValue, forceUpdate, }: {
|
|
2
2
|
inputElement: HTMLInputElement;
|
|
3
3
|
inputValue: string;
|
|
4
|
+
forceUpdate: number;
|
|
4
5
|
}): (event: any) => void;
|
|
@@ -9,7 +9,8 @@ var _react = require("react");
|
|
|
9
9
|
var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
|
|
10
10
|
function useSelectionRange(_ref) {
|
|
11
11
|
var inputElement = _ref.inputElement,
|
|
12
|
-
inputValue = _ref.inputValue
|
|
12
|
+
inputValue = _ref.inputValue,
|
|
13
|
+
forceUpdate = _ref.forceUpdate;
|
|
13
14
|
var refSelectionPosition = (0, _react.useRef)();
|
|
14
15
|
(0, _react.useLayoutEffect)(function () {
|
|
15
16
|
var position = refSelectionPosition.current;
|
|
@@ -17,7 +18,7 @@ function useSelectionRange(_ref) {
|
|
|
17
18
|
var start = Math.max(0, inputValue.length - position);
|
|
18
19
|
inputElement.setSelectionRange(start, start);
|
|
19
20
|
}
|
|
20
|
-
}, [inputValue]);
|
|
21
|
+
}, [inputValue, forceUpdate]);
|
|
21
22
|
return function (event) {
|
|
22
23
|
var _event$target = event.target,
|
|
23
24
|
end = _event$target.selectionEnd,
|
package/lib/modal/modal.d.ts
CHANGED
package/lib/modal/modal.js
CHANGED
|
@@ -41,7 +41,7 @@ exports.ConfirmModalTypes = ConfirmModalTypes;
|
|
|
41
41
|
var ModalTypes = (0, _type.tuple)('confirm', 'warning', 'error', 'normal');
|
|
42
42
|
exports.ModalTypes = ModalTypes;
|
|
43
43
|
var InternalModal = function InternalModal(props, ref) {
|
|
44
|
-
var _classNames3, _classNames4, _context2, _context3;
|
|
44
|
+
var _classNames3, _classNames4, _context2, _context3, _context4;
|
|
45
45
|
var _useContext = (0, _react.useContext)(_ConfigContext.default),
|
|
46
46
|
getPrefixCls = _useContext.getPrefixCls,
|
|
47
47
|
prefixCls = _useContext.prefixCls,
|
|
@@ -84,7 +84,8 @@ var InternalModal = function InternalModal(props, ref) {
|
|
|
84
84
|
onDrag = modalProps.onDrag,
|
|
85
85
|
onDragStop = modalProps.onDragStop,
|
|
86
86
|
bounds = modalProps.bounds,
|
|
87
|
-
|
|
87
|
+
overroll = modalProps.overroll,
|
|
88
|
+
others = __rest(modalProps, ["body", "bodyClassName", "bodyStyle", "cancelButtonProps", "cancelText", "className", "closable", "closeIcon", "destroyOnClose", "draggable", "focusTriggerAfterClose", "footer", "footerClassName", "footerStyle", "footerBtnOrder", "getContainer", "height", "keyboard", "mask", "maskClosable", "maskStyle", "maskClassName", "okButtonProps", "okText", "onCancel", "onOk", "prefixCls", "title", "titleIcon", "type", "visible", "width", "showline", "onDragStart", "onDrag", "onDragStop", "bounds", "overroll"]);
|
|
88
89
|
var isForceController = visible !== undefined;
|
|
89
90
|
var _useState = (0, _react.useState)(isForceController ? visible : true),
|
|
90
91
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -92,6 +93,7 @@ var InternalModal = function InternalModal(props, ref) {
|
|
|
92
93
|
setInnerVisible = _useState2[1]; // 需要根据visible来判断,不能一开始为true再去设置false
|
|
93
94
|
var previousActiveElement = (0, _react.useRef)(null);
|
|
94
95
|
var innerRef = (0, _react.useRef)(null);
|
|
96
|
+
var wrapperRef = (0, _react.useRef)(null);
|
|
95
97
|
var containerRef = ref || innerRef;
|
|
96
98
|
var modalPrefixCls = getPrefixCls(prefixCls, 'modal', customPrefixcls);
|
|
97
99
|
(0, _devwarning.default)(ModalTypes.indexOf(type) === -1, 'modal', "cannot found modal type '".concat(type, "'"));
|
|
@@ -199,11 +201,16 @@ var InternalModal = function InternalModal(props, ref) {
|
|
|
199
201
|
proxyCloseModal(onCancel);
|
|
200
202
|
}
|
|
201
203
|
}, [proxyCloseModal, onCancel, maskClosable]);
|
|
204
|
+
var handleWrapperClick = function handleWrapperClick(e) {
|
|
205
|
+
if (wrapperRef.current === e.target) {
|
|
206
|
+
handleMaskClick();
|
|
207
|
+
}
|
|
208
|
+
};
|
|
202
209
|
var isHidden = !destroyOnClose && !(isForceController ? visible : innerVisible);
|
|
203
210
|
var modalClasses = (0, _classnames.default)(modalPrefixCls, className, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container"), true), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-hidden"), isHidden), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-show"), !isHidden), _classNames3));
|
|
204
211
|
var headerClass = "".concat(modalPrefixCls, "-header");
|
|
205
212
|
var container = /*#__PURE__*/_react.default.createElement("div", {
|
|
206
|
-
className: (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(modalPrefixCls, "-container-box"), true), (0, _defineProperty2.default)(_classNames4, "".concat(modalPrefixCls, "-has-container-box"), modalContainer), (0, _defineProperty2.default)(_classNames4, "".concat(modalPrefixCls, "-showline"), showline), _classNames4)),
|
|
213
|
+
className: (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(modalPrefixCls, "-container-box"), true), (0, _defineProperty2.default)(_classNames4, "".concat(modalPrefixCls, "-has-container-box"), modalContainer && !overroll), (0, _defineProperty2.default)(_classNames4, "".concat(modalPrefixCls, "-showline"), showline), _classNames4)),
|
|
207
214
|
style: {
|
|
208
215
|
width: width,
|
|
209
216
|
height: height
|
|
@@ -253,8 +260,18 @@ var InternalModal = function InternalModal(props, ref) {
|
|
|
253
260
|
onClick: handleMaskClick,
|
|
254
261
|
className: (0, _classnames.default)(maskClassName, (0, _defineProperty2.default)({}, "".concat(modalPrefixCls, "-mask"), true)),
|
|
255
262
|
style: maskStyle
|
|
256
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
257
|
-
|
|
263
|
+
}), overroll ? /*#__PURE__*/_react.default.createElement("div", {
|
|
264
|
+
tabIndex: -1,
|
|
265
|
+
className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(modalPrefixCls, "-wrapper"), modalContainer && ((isForceController ? visible : innerVisible) || !destroyOnClose))),
|
|
266
|
+
ref: wrapperRef,
|
|
267
|
+
onClick: handleWrapperClick
|
|
268
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
269
|
+
className: "".concat(modalPrefixCls, "-dialog")
|
|
270
|
+
}, /*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
|
|
271
|
+
defaultPosition: {
|
|
272
|
+
x: 0,
|
|
273
|
+
y: 0
|
|
274
|
+
},
|
|
258
275
|
handle: ".".concat(headerClass),
|
|
259
276
|
disabled: !draggable,
|
|
260
277
|
onStart: handleDragStart,
|
|
@@ -262,6 +279,15 @@ var InternalModal = function InternalModal(props, ref) {
|
|
|
262
279
|
onStop: onDragStop,
|
|
263
280
|
bounds: bounds,
|
|
264
281
|
cancel: (0, _concat.default)(_context3 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context3, modalPrefixCls, "-close-icon")
|
|
282
|
+
}, container))) : /*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
|
|
283
|
+
defaultPosition: defaultPosition,
|
|
284
|
+
handle: ".".concat(headerClass),
|
|
285
|
+
disabled: !draggable,
|
|
286
|
+
onStart: handleDragStart,
|
|
287
|
+
onDrag: onDrag,
|
|
288
|
+
onStop: onDragStop,
|
|
289
|
+
bounds: bounds,
|
|
290
|
+
cancel: (0, _concat.default)(_context4 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context4, modalPrefixCls, "-close-icon")
|
|
265
291
|
}, container));
|
|
266
292
|
var renderComp = ((isForceController ? visible : innerVisible) || !destroyOnClose) && comp;
|
|
267
293
|
if (modalContainer && renderComp) return /*#__PURE__*/_reactDom.default.createPortal(renderComp, modalContainer);
|
|
@@ -252,6 +252,27 @@
|
|
|
252
252
|
.kd-modal-margin-btn {
|
|
253
253
|
margin-right: var(--kd-c-modal-footer-button-spacing, 12px);
|
|
254
254
|
}
|
|
255
|
+
.kd-modal-wrapper {
|
|
256
|
+
position: fixed;
|
|
257
|
+
top: 0;
|
|
258
|
+
right: 0;
|
|
259
|
+
bottom: 0;
|
|
260
|
+
left: 0;
|
|
261
|
+
overflow: auto;
|
|
262
|
+
text-align: center;
|
|
263
|
+
}
|
|
264
|
+
.kd-modal-wrapper::before {
|
|
265
|
+
display: inline-block;
|
|
266
|
+
width: 0;
|
|
267
|
+
height: 100%;
|
|
268
|
+
vertical-align: middle;
|
|
269
|
+
content: '';
|
|
270
|
+
}
|
|
271
|
+
.kd-modal-dialog {
|
|
272
|
+
display: inline-block;
|
|
273
|
+
vertical-align: middle;
|
|
274
|
+
max-width: calc(100vw);
|
|
275
|
+
}
|
|
255
276
|
.kd-modal-showline .kd-modal-header {
|
|
256
277
|
border-bottom: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
|
|
257
278
|
}
|
|
@@ -29,15 +29,13 @@
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
&-hidden {
|
|
32
|
-
display: none
|
|
32
|
+
display: none;
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
&-mask {
|
|
36
36
|
.overlay(@modal-mask-color-background, 0);
|
|
37
37
|
}
|
|
38
|
-
// &-mask + &-container-box {
|
|
39
38
|
|
|
40
|
-
// }
|
|
41
39
|
&-has-container-box {
|
|
42
40
|
position: fixed;
|
|
43
41
|
left: 50%;
|
|
@@ -116,16 +114,34 @@
|
|
|
116
114
|
color: @modal-footer-font-color;
|
|
117
115
|
flex-shrink: 0;
|
|
118
116
|
}
|
|
119
|
-
// each(@modal-footer-type-set, {
|
|
120
|
-
// .@{modal-prefix-cls}-@{key}-footer {
|
|
121
|
-
// justify-content: @value;
|
|
122
|
-
// }
|
|
123
|
-
// });
|
|
124
117
|
}
|
|
125
118
|
|
|
126
119
|
&-margin-btn {
|
|
127
120
|
margin-right: @modal-footer-button-spacing;
|
|
128
121
|
}
|
|
122
|
+
|
|
123
|
+
&-wrapper {
|
|
124
|
+
position: fixed;
|
|
125
|
+
top: 0;
|
|
126
|
+
right: 0;
|
|
127
|
+
bottom: 0;
|
|
128
|
+
left: 0;
|
|
129
|
+
overflow: auto;
|
|
130
|
+
text-align: center;
|
|
131
|
+
|
|
132
|
+
&::before {
|
|
133
|
+
display: inline-block;
|
|
134
|
+
width: 0;
|
|
135
|
+
height: 100%;
|
|
136
|
+
vertical-align: middle;
|
|
137
|
+
content: '';
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
&-dialog {
|
|
141
|
+
display: inline-block;
|
|
142
|
+
vertical-align: middle;
|
|
143
|
+
max-width: calc(100vw);
|
|
144
|
+
}
|
|
129
145
|
}
|
|
130
146
|
|
|
131
147
|
.@{modal-prefix-cls}-showline {
|
|
@@ -135,4 +151,4 @@
|
|
|
135
151
|
.@{modal-prefix-cls}-footer {
|
|
136
152
|
border-top: @modal-border-width solid @modal-border-color;
|
|
137
153
|
}
|
|
138
|
-
}
|
|
154
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
5
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
6
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
var _exportNames = {};
|
|
11
|
+
exports.default = void 0;
|
|
12
|
+
var _qrCode = _interopRequireWildcard(require("./qr-code"));
|
|
13
|
+
_Object$keys(_qrCode).forEach(function (key) {
|
|
14
|
+
if (key === "default" || key === "__esModule") return;
|
|
15
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
16
|
+
if (key in exports && exports[key] === _qrCode[key]) return;
|
|
17
|
+
Object.defineProperty(exports, key, {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function get() {
|
|
20
|
+
return _qrCode[key];
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
});
|
|
24
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
26
|
+
var _default = _qrCode.default;
|
|
27
|
+
exports.default = _default;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React, { CSSProperties, FunctionComponentElement } from 'react';
|
|
2
|
+
export declare type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
|
|
3
|
+
export declare type QRPropsSvg = QRProps & React.SVGAttributes<SVGSVGElement>;
|
|
4
|
+
export declare const QRCodeTypes: ["canvas", "svg"];
|
|
5
|
+
export declare type QRCodeType = typeof QRCodeTypes[number];
|
|
6
|
+
export declare const QRCodeStatus: ["active", "expired", "loading"];
|
|
7
|
+
export declare type QRCodeStatus = typeof QRCodeStatus[number];
|
|
8
|
+
export declare const QRCodeErrorLevels: ["L", "M", "Q", "H"];
|
|
9
|
+
export declare type QRCodeErrorLevel = typeof QRCodeErrorLevels[number];
|
|
10
|
+
interface ImageSettings {
|
|
11
|
+
src: string;
|
|
12
|
+
height: number;
|
|
13
|
+
width: number;
|
|
14
|
+
excavate: boolean;
|
|
15
|
+
x?: number;
|
|
16
|
+
y?: number;
|
|
17
|
+
}
|
|
18
|
+
export interface QRProps {
|
|
19
|
+
value: string;
|
|
20
|
+
type?: QRCodeType;
|
|
21
|
+
size?: number;
|
|
22
|
+
style?: CSSProperties;
|
|
23
|
+
color?: string;
|
|
24
|
+
bgColor?: string;
|
|
25
|
+
bordered?: boolean;
|
|
26
|
+
imageSettings?: ImageSettings;
|
|
27
|
+
}
|
|
28
|
+
export interface QRCodeProps extends QRProps {
|
|
29
|
+
className?: string;
|
|
30
|
+
prefixCls?: string;
|
|
31
|
+
icon?: string;
|
|
32
|
+
iconSize?: number;
|
|
33
|
+
status?: QRCodeStatus;
|
|
34
|
+
errorLevel?: QRCodeErrorLevel;
|
|
35
|
+
children?: React.ReactNode;
|
|
36
|
+
onRefresh?: () => void;
|
|
37
|
+
}
|
|
38
|
+
declare const QRCode: {
|
|
39
|
+
(props: QRCodeProps): FunctionComponentElement<QRCodeProps>;
|
|
40
|
+
displayName: string;
|
|
41
|
+
};
|
|
42
|
+
export default QRCode;
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
5
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
6
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = exports.QRCodeTypes = exports.QRCodeStatus = exports.QRCodeErrorLevels = void 0;
|
|
11
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
13
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
|
|
16
|
+
var _utils = require("../_utils");
|
|
17
|
+
var _qrcode = require("qrcode.react");
|
|
18
|
+
var _spin = _interopRequireDefault(require("../spin"));
|
|
19
|
+
var _button = _interopRequireDefault(require("../button"));
|
|
20
|
+
var _icon = _interopRequireDefault(require("../icon"));
|
|
21
|
+
var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
|
|
22
|
+
var _type = require("../_utils/type");
|
|
23
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
var QRCodeTypes = (0, _type.tuple)('canvas', 'svg');
|
|
26
|
+
exports.QRCodeTypes = QRCodeTypes;
|
|
27
|
+
var QRCodeStatus = (0, _type.tuple)('active', 'expired', 'loading');
|
|
28
|
+
exports.QRCodeStatus = QRCodeStatus;
|
|
29
|
+
var QRCodeErrorLevels = (0, _type.tuple)('L', 'M', 'Q', 'H');
|
|
30
|
+
exports.QRCodeErrorLevels = QRCodeErrorLevels;
|
|
31
|
+
var QRCode = function QRCode(props) {
|
|
32
|
+
var _useContext = (0, _react.useContext)(_ConfigContext.default),
|
|
33
|
+
getPrefixCls = _useContext.getPrefixCls,
|
|
34
|
+
prefixCls = _useContext.prefixCls,
|
|
35
|
+
userDefaultProps = _useContext.compDefaultProps;
|
|
36
|
+
var qrCodeProps = (0, _utils.getCompProps)('QRCode', userDefaultProps, props);
|
|
37
|
+
var value = qrCodeProps.value,
|
|
38
|
+
size = qrCodeProps.size,
|
|
39
|
+
status = qrCodeProps.status,
|
|
40
|
+
style = qrCodeProps.style,
|
|
41
|
+
type = qrCodeProps.type,
|
|
42
|
+
errorLevel = qrCodeProps.errorLevel,
|
|
43
|
+
color = qrCodeProps.color,
|
|
44
|
+
onRefresh = qrCodeProps.onRefresh,
|
|
45
|
+
icon = qrCodeProps.icon,
|
|
46
|
+
_qrCodeProps$iconSize = qrCodeProps.iconSize,
|
|
47
|
+
iconSize = _qrCodeProps$iconSize === void 0 ? 24 : _qrCodeProps$iconSize,
|
|
48
|
+
bgColor = qrCodeProps.bgColor,
|
|
49
|
+
_qrCodeProps$bordered = qrCodeProps.bordered,
|
|
50
|
+
bordered = _qrCodeProps$bordered === void 0 ? true : _qrCodeProps$bordered;
|
|
51
|
+
var className = qrCodeProps.className,
|
|
52
|
+
customPrefixcls = qrCodeProps.prefixCls;
|
|
53
|
+
var qrCodePrefixCls = getPrefixCls(prefixCls, 'qrcode', customPrefixcls);
|
|
54
|
+
var qrCodeClass = (0, _classnames.default)(qrCodePrefixCls, className, (0, _defineProperty2.default)({}, "".concat(qrCodePrefixCls, "-borderless"), !bordered));
|
|
55
|
+
var gap = 8;
|
|
56
|
+
var containerSize = size + gap * 2 + 2;
|
|
57
|
+
(0, _devwarning.default)(!value === false, 'QRCode', 'need to receive `value` props');
|
|
58
|
+
(0, _devwarning.default)(icon && errorLevel === 'L', 'QRCode', 'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.');
|
|
59
|
+
var imageSettings = {
|
|
60
|
+
src: icon,
|
|
61
|
+
x: undefined,
|
|
62
|
+
y: undefined,
|
|
63
|
+
height: iconSize,
|
|
64
|
+
width: iconSize,
|
|
65
|
+
excavate: true
|
|
66
|
+
};
|
|
67
|
+
var codeProps = {
|
|
68
|
+
value: value,
|
|
69
|
+
size: size,
|
|
70
|
+
level: errorLevel,
|
|
71
|
+
fgColor: color,
|
|
72
|
+
imageSettings: icon ? imageSettings : undefined
|
|
73
|
+
};
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
75
|
+
className: qrCodeClass,
|
|
76
|
+
style: (0, _extends2.default)((0, _extends2.default)({}, style), {
|
|
77
|
+
width: "".concat(containerSize, "px"),
|
|
78
|
+
height: "".concat(containerSize, "px"),
|
|
79
|
+
backgroundColor: bgColor
|
|
80
|
+
})
|
|
81
|
+
}, status !== 'active' && /*#__PURE__*/_react.default.createElement("div", {
|
|
82
|
+
className: "".concat(qrCodePrefixCls, "-mask")
|
|
83
|
+
}, status === 'loading' && /*#__PURE__*/_react.default.createElement(_spin.default, null), status === 'expired' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
|
|
84
|
+
className: "".concat(qrCodePrefixCls, "-expired")
|
|
85
|
+
}, "\u4E8C\u7EF4\u7801\u8FC7\u671F"), onRefresh && /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
86
|
+
icon: /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
87
|
+
type: "refresh"
|
|
88
|
+
}),
|
|
89
|
+
type: "text",
|
|
90
|
+
onClick: onRefresh,
|
|
91
|
+
size: "middle"
|
|
92
|
+
}, "\u70B9\u51FB\u5237\u65B0"))), type === 'canvas' ? /*#__PURE__*/_react.default.createElement(_qrcode.QRCodeCanvas, (0, _extends2.default)({}, codeProps)) : /*#__PURE__*/_react.default.createElement(_qrcode.QRCodeSVG, (0, _extends2.default)({}, codeProps)));
|
|
93
|
+
};
|
|
94
|
+
QRCode.displayName = 'QRCode';
|
|
95
|
+
var _default = QRCode;
|
|
96
|
+
exports.default = _default;
|