adou-ui
Version:
feat:修复了TagInput无法清空的问题
1,159 lines (1,048 loc) • 43.3 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === 'function' && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === 'object')
exports["RPB"] = factory(require("react"), require("react-dom"));
else
root["RPB"] = factory(root["React"], root["ReactDOM"]);
})(this, (__WEBPACK_EXTERNAL_MODULE__442__, __WEBPACK_EXTERNAL_MODULE__3__) => {
return /******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ 191:
/***/ ((module) => {
"use strict";
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
module.exports = function (cssWithMappingToString) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = "";
var needLayer = typeof item[5] !== "undefined";
if (item[4]) {
content += "@supports (".concat(item[4], ") {");
}
if (item[2]) {
content += "@media ".concat(item[2], " {");
}
if (needLayer) {
content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {");
}
content += cssWithMappingToString(item);
if (needLayer) {
content += "}";
}
if (item[2]) {
content += "}";
}
if (item[4]) {
content += "}";
}
return content;
}).join("");
};
// import a list of modules into the list
list.i = function i(modules, media, dedupe, supports, layer) {
if (typeof modules === "string") {
modules = [[null, modules, undefined]];
}
var alreadyImportedModules = {};
if (dedupe) {
for (var k = 0; k < this.length; k++) {
var id = this[k][0];
if (id != null) {
alreadyImportedModules[id] = true;
}
}
}
for (var _k = 0; _k < modules.length; _k++) {
var item = [].concat(modules[_k]);
if (dedupe && alreadyImportedModules[item[0]]) {
continue;
}
if (typeof layer !== "undefined") {
if (typeof item[5] === "undefined") {
item[5] = layer;
} else {
item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}");
item[5] = layer;
}
}
if (media) {
if (!item[2]) {
item[2] = media;
} else {
item[1] = "@media ".concat(item[2], " {").concat(item[1], "}");
item[2] = media;
}
}
if (supports) {
if (!item[4]) {
item[4] = "".concat(supports);
} else {
item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}");
item[4] = supports;
}
}
list.push(item);
}
};
return list;
};
/***/ }),
/***/ 73:
/***/ ((module) => {
"use strict";
module.exports = function (item) {
var content = item[1];
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (typeof btoa === "function") {
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping))));
var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
var sourceMapping = "/*# ".concat(data, " */");
return [content].concat([sourceMapping]).join("\n");
}
return [content].join("\n");
};
/***/ }),
/***/ 511:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
(function webpackUniversalModuleDefinition(root, factory) {
if (true) module.exports = factory(__webpack_require__(442));else {}
})(this, __WEBPACK_EXTERNAL_MODULE__442__ => {
return /******/(() => {
// webpackBootstrap
/******/
"use strict";
/******/
var __webpack_modules__ = {
/***/442: ( /***/module => {
module.exports = __WEBPACK_EXTERNAL_MODULE__442__;
/***/
})
/******/
};
/************************************************************************/
/******/ // The module cache
/******/
var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/
function __nested_webpack_require_918__(moduleId) {
/******/ // Check if module is in cache
/******/var cachedModule = __webpack_module_cache__[moduleId];
/******/
if (cachedModule !== undefined) {
/******/return cachedModule.exports;
/******/
}
/******/ // Create a new module (and put it into the cache)
/******/
var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/exports: {}
/******/
};
/******/
/******/ // Execute the module function
/******/
__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_918__);
/******/
/******/ // Return the exports of the module
/******/
return module.exports;
/******/
}
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/
(() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/__nested_webpack_require_918__.n = module => {
/******/var getter = module && module.__esModule ? /******/() => module['default'] : /******/() => module;
/******/
__nested_webpack_require_918__.d(getter, {
a: getter
});
/******/
return getter;
/******/
};
/******/
})();
/******/
/******/ /* webpack/runtime/define property getters */
/******/
(() => {
/******/ // define getter functions for harmony exports
/******/__nested_webpack_require_918__.d = (exports, definition) => {
/******/for (var key in definition) {
/******/if (__nested_webpack_require_918__.o(definition, key) && !__nested_webpack_require_918__.o(exports, key)) {
/******/Object.defineProperty(exports, key, {
enumerable: true,
get: definition[key]
});
/******/
}
/******/
}
/******/
};
/******/
})();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/
(() => {
/******/__nested_webpack_require_918__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
/******/
})();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/
(() => {
/******/ // define __esModule on exports
/******/__nested_webpack_require_918__.r = exports => {
/******/if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/Object.defineProperty(exports, Symbol.toStringTag, {
value: 'Module'
});
/******/
}
/******/
Object.defineProperty(exports, '__esModule', {
value: true
});
/******/
};
/******/
})();
/******/
/************************************************************************/
var __nested_webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
__nested_webpack_require_918__.r(__nested_webpack_exports__);
/* harmony export */
__nested_webpack_require_918__.d(__nested_webpack_exports__, {
/* harmony export */"default": () => __WEBPACK_DEFAULT_EXPORT__
/* harmony export */
});
/* harmony import */
var react__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_918__(442);
/* harmony import */
var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_918__.n(react__WEBPACK_IMPORTED_MODULE_0__);
const Button = props => {
const {
labelWrap,
fontSize,
spinerType = "border",
spinerColor,
loading,
suffixIcon,
prefixIcon,
children,
type = "primary",
size = "md",
externalClassName,
round,
textColor,
disabled,
outlineColor,
onClickOK
} = props;
const handleOnClick = e => {
onClickOK && onClickOK(e);
};
const renderPrefixIcon = () => {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "".concat(prefixIcon)
});
};
const rendersuffixIcon = () => {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "".concat(suffixIcon)
});
};
/* const renderLoading = () => {
return React.Children.map(children, (child: any) => {
if (!React.isValidElement(child)) {
child = <span className="m-1">{child}</span>
const enhancedChild = React.cloneElement(child!, {
style: {
}
} as React.Attributes);
return enhancedChild;
}
});
}; */
const renderLabel = () => {
return react__WEBPACK_IMPORTED_MODULE_0___default().Children.map(children, child => {
if (! /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().isValidElement(child)) {
child = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, child);
const enhancedChild = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(child, {
style: {
fontSize,
whiteSpace: labelWrap ? "normal" : "nowrap"
}
});
return enhancedChild;
}
});
};
const renderLoadingIcon = () => {
let hasLoader = false;
react__WEBPACK_IMPORTED_MODULE_0___default().Children.map(children, child => {
var _child$props;
if ((_child$props = child.props) !== null && _child$props !== void 0 && (_child$props = _child$props.className) !== null && _child$props !== void 0 && _child$props.includes("loader")) {
hasLoader = true;
}
});
if (hasLoader) {
return react__WEBPACK_IMPORTED_MODULE_0___default().Children.map(children, child => {
var _child$props2;
if ((_child$props2 = child.props) !== null && _child$props2 !== void 0 && _child$props2.className.includes("loader")) {
return child;
}
});
} else {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "me-2 spinner-".concat(spinerType, " spinner-").concat(spinerType, "-sm text-").concat(spinerColor),
role: "status"
}));
}
};
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "button-wrapper"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
style: {
cursor: "pointer",
height: "100%"
},
onClick: handleOnClick,
className: "btn btn-".concat(size, " ").concat(round ? "rounded-pill" : "", " ").concat(textColor ? "text-".concat(textColor) : "", " ").concat(outlineColor ? "btn-outline-".concat(outlineColor) : "btn-".concat(type), " ").concat(disabled ? "disabled" : "", " ").concat(externalClassName),
disabled: loading
}, loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "loading-btn"
}, renderLoadingIcon(), renderLabel()) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, prefixIcon && renderPrefixIcon(), renderLabel(), suffixIcon && rendersuffixIcon())));
};
/* harmony default export */
const __WEBPACK_DEFAULT_EXPORT__ = Button;
})();
/******/
return __nested_webpack_exports__;
/******/
})();
});
/***/ }),
/***/ 483:
/***/ ((module, __webpack_exports__, __webpack_require__) => {
"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(73);
/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(191);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, `.dialog-overlay {
position: fixed;
z-index: 1002;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.dialog-overlay.open {
opacity: 1;
visibility: visible;
}
.dialog {
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 400px;
max-width: 90%;
position: absolute;
transform: scale(0.9);
opacity: 0;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.dialog.open {
transform: scale(1);
opacity: 1;
}
.dialog:focus {
outline: none;
}
.dialog-header {
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.dialog-close {
color: #b0aaaa;
background: none;
border: none;
font-size: 36px;
cursor: pointer;
outline: none;
}
.dialog-content {
padding: 16px;
overflow: auto;
}
.dialog-footer {
border-top: 1px solid #e0e0e0;
}
.hover-scale {
transition: all 0.3s ease;
}
.hover-scale:hover {
color: red;
transform: scale(1.2);
}`, "",{"version":3,"sources":["webpack://./src/index.scss"],"names":[],"mappings":"AAAA;EACI,eAAA;EACA,aAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,iEAAA;AACJ;AACI;EACI,UAAA;EACA,mBAAA;AACR;;AAGA;EACI,uBAAA;EACA,kBAAA;EACA,yCAAA;EACA,YAAA;EACA,cAAA;EACA,kBAAA;EAEA,qBAAA;EACA,UAAA;EACA,gEAAA;AADJ;AAGI;EACI,mBAAA;EACA,UAAA;AADR;AAII;EACI,aAAA;AAFR;;AAMA;EACI,gCAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;AAHJ;;AAOA;EACI,cAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,eAAA;EACA,aAAA;AAJJ;;AAOA;EACI,aAAA;EACA,cAAA;AAJJ;;AAQA;EACI,6BAAA;AALJ;;AAQA;EACI,yBAAA;AALJ;AAOI;EACI,UAAA;EACA,qBAAA;AALR","sourcesContent":[".dialog-overlay {\r\n position: fixed;\r\n z-index: 1002; // z-index应该加在最外层的父级才有作用\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\r\n\r\n &.open {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n}\r\n\r\n.dialog {\r\n background-color: white;\r\n border-radius: 4px;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n width: 400px;\r\n max-width: 90%;\r\n position: absolute;\r\n // z-index: 999;\r\n transform: scale(0.9);\r\n opacity: 0;\r\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\r\n\r\n &.open {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n}\r\n\r\n.dialog-header {\r\n border-bottom: 1px solid #e0e0e0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n}\r\n\r\n.dialog-close {\r\n color: #b0aaaa;\r\n background: none;\r\n border: none;\r\n font-size: 36px;\r\n cursor: pointer;\r\n outline: none;\r\n}\r\n\r\n.dialog-content {\r\n padding: 16px;\r\n overflow: auto;\r\n\r\n}\r\n\r\n.dialog-footer {\r\n border-top: 1px solid #e0e0e0;\r\n}\r\n\r\n.hover-scale {\r\n transition: all 0.3s ease;\r\n\r\n &:hover {\r\n color: red;\r\n transform: scale(1.2);\r\n }\r\n}"],"sourceRoot":""}]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
/***/ }),
/***/ 591:
/***/ ((module) => {
"use strict";
var stylesInDOM = [];
function getIndexByIdentifier(identifier) {
var result = -1;
for (var i = 0; i < stylesInDOM.length; i++) {
if (stylesInDOM[i].identifier === identifier) {
result = i;
break;
}
}
return result;
}
function modulesToDom(list, options) {
var idCountMap = {};
var identifiers = [];
for (var i = 0; i < list.length; i++) {
var item = list[i];
var id = options.base ? item[0] + options.base : item[0];
var count = idCountMap[id] || 0;
var identifier = "".concat(id, " ").concat(count);
idCountMap[id] = count + 1;
var indexByIdentifier = getIndexByIdentifier(identifier);
var obj = {
css: item[1],
media: item[2],
sourceMap: item[3],
supports: item[4],
layer: item[5]
};
if (indexByIdentifier !== -1) {
stylesInDOM[indexByIdentifier].references++;
stylesInDOM[indexByIdentifier].updater(obj);
} else {
var updater = addElementStyle(obj, options);
options.byIndex = i;
stylesInDOM.splice(i, 0, {
identifier: identifier,
updater: updater,
references: 1
});
}
identifiers.push(identifier);
}
return identifiers;
}
function addElementStyle(obj, options) {
var api = options.domAPI(options);
api.update(obj);
var updater = function updater(newObj) {
if (newObj) {
if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {
return;
}
api.update(obj = newObj);
} else {
api.remove();
}
};
return updater;
}
module.exports = function (list, options) {
options = options || {};
list = list || [];
var lastIdentifiers = modulesToDom(list, options);
return function update(newList) {
newList = newList || [];
for (var i = 0; i < lastIdentifiers.length; i++) {
var identifier = lastIdentifiers[i];
var index = getIndexByIdentifier(identifier);
stylesInDOM[index].references--;
}
var newLastIdentifiers = modulesToDom(newList, options);
for (var _i = 0; _i < lastIdentifiers.length; _i++) {
var _identifier = lastIdentifiers[_i];
var _index = getIndexByIdentifier(_identifier);
if (stylesInDOM[_index].references === 0) {
stylesInDOM[_index].updater();
stylesInDOM.splice(_index, 1);
}
}
lastIdentifiers = newLastIdentifiers;
};
};
/***/ }),
/***/ 128:
/***/ ((module) => {
"use strict";
var memo = {};
/* istanbul ignore next */
function getTarget(target) {
if (typeof memo[target] === "undefined") {
var styleTarget = document.querySelector(target);
// Special case to return head of iframe instead of iframe itself
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
try {
// This will throw an exception if access to iframe is blocked
// due to cross-origin restrictions
styleTarget = styleTarget.contentDocument.head;
} catch (e) {
// istanbul ignore next
styleTarget = null;
}
}
memo[target] = styleTarget;
}
return memo[target];
}
/* istanbul ignore next */
function insertBySelector(insert, style) {
var target = getTarget(insert);
if (!target) {
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
}
target.appendChild(style);
}
module.exports = insertBySelector;
/***/ }),
/***/ 51:
/***/ ((module) => {
"use strict";
/* istanbul ignore next */
function insertStyleElement(options) {
var element = document.createElement("style");
options.setAttributes(element, options.attributes);
options.insert(element, options.options);
return element;
}
module.exports = insertStyleElement;
/***/ }),
/***/ 855:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
/* istanbul ignore next */
function setAttributesWithoutAttributes(styleElement) {
var nonce = true ? __webpack_require__.nc : 0;
if (nonce) {
styleElement.setAttribute("nonce", nonce);
}
}
module.exports = setAttributesWithoutAttributes;
/***/ }),
/***/ 740:
/***/ ((module) => {
"use strict";
/* istanbul ignore next */
function apply(styleElement, options, obj) {
var css = "";
if (obj.supports) {
css += "@supports (".concat(obj.supports, ") {");
}
if (obj.media) {
css += "@media ".concat(obj.media, " {");
}
var needLayer = typeof obj.layer !== "undefined";
if (needLayer) {
css += "@layer".concat(obj.layer.length > 0 ? " ".concat(obj.layer) : "", " {");
}
css += obj.css;
if (needLayer) {
css += "}";
}
if (obj.media) {
css += "}";
}
if (obj.supports) {
css += "}";
}
var sourceMap = obj.sourceMap;
if (sourceMap && typeof btoa !== "undefined") {
css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
}
// For old IE
/* istanbul ignore if */
options.styleTagTransform(css, styleElement, options.options);
}
function removeStyleElement(styleElement) {
// istanbul ignore if
if (styleElement.parentNode === null) {
return false;
}
styleElement.parentNode.removeChild(styleElement);
}
/* istanbul ignore next */
function domAPI(options) {
if (typeof document === "undefined") {
return {
update: function update() {},
remove: function remove() {}
};
}
var styleElement = options.insertStyleElement(options);
return {
update: function update(obj) {
apply(styleElement, options, obj);
},
remove: function remove() {
removeStyleElement(styleElement);
}
};
}
module.exports = domAPI;
/***/ }),
/***/ 656:
/***/ ((module) => {
"use strict";
/* istanbul ignore next */
function styleTagTransform(css, styleElement) {
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
while (styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild);
}
styleElement.appendChild(document.createTextNode(css));
}
}
module.exports = styleTagTransform;
/***/ }),
/***/ 442:
/***/ ((module) => {
"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE__442__;
/***/ }),
/***/ 3:
/***/ ((module) => {
"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE__3__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ id: moduleId,
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/nonce */
/******/ (() => {
/******/ __webpack_require__.nc = undefined;
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ src_0)
});
// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(442);
var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
// EXTERNAL MODULE: external {"root":"ReactDOM","commonjs2":"react-dom","commonjs":"react-dom","amd":"react-dom"}
var external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_ = __webpack_require__(3);
var external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_);
;// CONCATENATED MODULE: ../Utils/src/hooks/useDrag.js
const useDrag = function (triggerRef, elementRef) {
let isDialog = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
let autoStyle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
let initialPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
x: 0,
y: 0
};
const [isDragging, setIsDragging] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
const [dragOffset, setDragOffset] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
x: 0,
y: 0
});
const [position, setPosition] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(initialPosition);
const elementFirstPositionRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
const handleMouseMove = e => {
// 处于拖动状态
if (isDragging) {
if (!isDialog) {
var _elementFirstPosition, _elementFirstPosition2, _elementFirstPosition3;
console.log("e.clientX: ", e.clientX);
console.log("dragOffset.x: ", dragOffset.x);
console.log("window.scrollX: ", window.scrollX);
console.log("elementFirstPositionRef.current?.left: ", (_elementFirstPosition = elementFirstPositionRef.current) === null || _elementFirstPosition === void 0 ? void 0 : _elementFirstPosition.left);
// 如果不是弹窗，要减去元素一开始在浏览器中的位置(因为顶部和左部都会有别的元素占着)
// 解读：拿当前的鼠标位置(e.clientX) 减去鼠标最开始点击下的位置 与 元素最左边到浏览器距离的差值(dragOffset.x，点击之后就不变了)，再减去元素一开始在浏览器中的位置(elementFirstPositionRef.current?.left，不变)，再加上浏览器滚动的距离(window.scrollX)，得到差值的就是元素拖拽移动的距离
// Y轴也一样
setPosition({
x: e.clientX - dragOffset.x - ((_elementFirstPosition2 = elementFirstPositionRef.current) === null || _elementFirstPosition2 === void 0 ? void 0 : _elementFirstPosition2.left) + window.scrollX,
// 还要 加上浏览器滚动的距离
y: e.clientY - dragOffset.y - ((_elementFirstPosition3 = elementFirstPositionRef.current) === null || _elementFirstPosition3 === void 0 ? void 0 : _elementFirstPosition3.top) + window.scrollY
});
} else {
// 如果是弹窗，则不用减
setPosition({
x: e.clientX - dragOffset.x,
y: e.clientY - dragOffset.y
});
}
}
};
const handleMouseUp = () => {
setIsDragging(false);
};
// 绑定事件
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
if (isDragging) {
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
} else {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
}
return () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
}, [isDragging]);
// 如果需要自动设置样式的话，在这边处理，处理的是 triggerRef触发元素
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
if (autoStyle && elementRef.current) {
elementRef.current.style.position = "relative";
elementRef.current.style.top = position.y + "px";
elementRef.current.style.left = position.x + "px";
elementRef.current.style.cursor = "move";
}
}, [position]);
const handleMouseDown = e => {
// 点击的时候获取当前元素距离浏览器的位置，获取的是 要拖拽的整体元素
const dialogRect = elementRef.current.getBoundingClientRect();
setIsDragging(true);
// 因为弹窗一开始有 left和top，所以要减去 当前元素位置的left 和 top
// 而其他元素在哪就是在哪，不需要减，所以要判断是弹窗还是普通元素哦 ---- 这两句注释没用了
setDragOffset({
// 减去当前元素距离浏览器的位置
x: e.clientX - dialogRect.left,
// 鼠标最开始点击下的位置 与 元素最左边到浏览器距离的差值，点击之后就不变了
y: e.clientY - dialogRect.top
});
};
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
// 如果元素的定位是 relative的话，需要再元素挂载完之后，去记录一开始距离浏览器的位置
if (elementRef.current) {
elementFirstPositionRef.current = elementRef.current.getBoundingClientRect();
}
}, [elementRef]);
return {
position,
handleMouseDown
};
};
/* harmony default export */ const hooks_useDrag = (useDrag);
;// CONCATENATED MODULE: ../Utils/src/hooks/useClickOutside.js
const useClickOutside = function (refs, callback) {
let enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
const judge = event => {
return refs.some(ref => {
var _ref$current;
return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(event.target);
});
};
const handleClickOutside = event => {
if (enabled && refs.length && !judge(event)) {
callback && callback();
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [refs, callback, enabled]);
};
/* harmony default export */ const hooks_useClickOutside = (useClickOutside);
// EXTERNAL MODULE: ../components/Button/index.js
var Button = __webpack_require__(511);
var Button_default = /*#__PURE__*/__webpack_require__.n(Button);
// EXTERNAL MODULE: ../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
var injectStylesIntoStyleTag = __webpack_require__(591);
var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag);
// EXTERNAL MODULE: ../../node_modules/style-loader/dist/runtime/styleDomAPI.js
var styleDomAPI = __webpack_require__(740);
var styleDomAPI_default = /*#__PURE__*/__webpack_require__.n(styleDomAPI);
// EXTERNAL MODULE: ../../node_modules/style-loader/dist/runtime/insertBySelector.js
var insertBySelector = __webpack_require__(128);
var insertBySelector_default = /*#__PURE__*/__webpack_require__.n(insertBySelector);
// EXTERNAL MODULE: ../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js
var setAttributesWithoutAttributes = __webpack_require__(855);
var setAttributesWithoutAttributes_default = /*#__PURE__*/__webpack_require__.n(setAttributesWithoutAttributes);
// EXTERNAL MODULE: ../../node_modules/style-loader/dist/runtime/insertStyleElement.js
var insertStyleElement = __webpack_require__(51);
var insertStyleElement_default = /*#__PURE__*/__webpack_require__.n(insertStyleElement);
// EXTERNAL MODULE: ../../node_modules/style-loader/dist/runtime/styleTagTransform.js
var styleTagTransform = __webpack_require__(656);
var styleTagTransform_default = /*#__PURE__*/__webpack_require__.n(styleTagTransform);
// EXTERNAL MODULE: ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/index.scss
var cjs_ruleSet_1_rules_1_use_2_src = __webpack_require__(483);
;// CONCATENATED MODULE: ./src/index.scss
var options = {};
options.styleTagTransform = (styleTagTransform_default());
options.setAttributes = (setAttributesWithoutAttributes_default());
options.insert = insertBySelector_default().bind(null, "head");
options.domAPI = (styleDomAPI_default());
options.insertStyleElement = (insertStyleElement_default());
var update = injectStylesIntoStyleTag_default()(cjs_ruleSet_1_rules_1_use_2_src/* default */.A, options);
/* harmony default export */ const src = (cjs_ruleSet_1_rules_1_use_2_src/* default */.A && cjs_ruleSet_1_rules_1_use_2_src/* default */.A.locals ? cjs_ruleSet_1_rules_1_use_2_src/* default */.A.locals : undefined);
;// CONCATENATED MODULE: ./src/index.tsx
const Dialog = _ref => {
let {
draggble,
confirmBtnLoading,
needDestroy = false,
maxY,
maxX,
max,
showConfirm = true,
showCancel = true,
showClose = true,
canConfirm = true,
clickOutside = false,
confirmText = "确定",
cancelText = "取消",
confirmBtnClass = "primary",
cancelBtnClass = "secondary",
show: isOpen = false,
title = "提示",
children = null,
type = "",
maxHeight = "400px",
width = "600px",
height,
maxWidth,
onCancel,
onClose = () => {},
onConfirm = () => {}
} = _ref;
const dialogRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
const triggerRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
const [show, setShow] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
const [destroied, setDestroied] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
const [isAnimating, setIsAnimating] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
const [initialPosition, setInitialPosition] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
x: 0,
y: 0
});
const [firstOpen, setFirstOpen] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
const {
position,
handleMouseDown
} = hooks_useDrag(triggerRef, dialogRef, draggble && !max, false);
const handleKeyDown = event => {
if (event.key === "Enter") {
onConfirm && onConfirm();
} else if (event.key === "Escape") {
onClose && onClose();
}
};
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
if (show) {
if (dialogRef.current) {
const dialogWidth = dialogRef.current.offsetWidth;
const dialogHeight = dialogRef.current.offsetHeight;
const initialX = (window.innerWidth - dialogWidth) / 2;
const initialY = (window.innerHeight - dialogHeight) / 2;
// 如果对 Y轴 没有要求，则按 type 来定位
if (!maxY && !max) {
// 减去20是因为有个 transForm: translateY(20px);
dialogRef.current.style.top = "".concat(type === "tip" ? "".concat(initialY - 20, "px") : "2%");
} else {
// 如果是对 Y轴 有最大要求，则不仅是第一次，每次都要让 Y轴 在浏览器最上面，Y轴 占满整个屏幕
dialogRef.current.style.top = "-20px";
}
dialogRef.current.style.left = "".concat(initialX, "px");
// 注意，这边要给个 100ms 差不多的定时器来确保 dialogRef.current 已经渲染完成
setTimeout(() => {
dialogRef.current.focus(); // 将焦点设置到 modal
}, 100);
}
}
setTimeout(() => {
setFirstOpen(show);
}, 10);
}, [show]);
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
if (isOpen) {
setDestroied(false);
setTimeout(() => {
setShow(isOpen);
}, 100);
setTimeout(() => {
setIsAnimating(true);
}, 200);
} else {
setTimeout(() => {
setShow(isOpen);
}, 100);
// 需要销毁再执行该逻辑
if (needDestroy) {
setTimeout(() => {
setDestroied(true);
}, 300); // 注意，延迟时间要 300差不多
}
}
}, [isOpen, type]);
hooks_useClickOutside(dialogRef, clickOutside && onClose);
return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, (isOpen || isAnimating) && /*#__PURE__*/external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().createPortal( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
className: "dialog-overlay ".concat(show ? "open" : "")
}, !destroied && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
onKeyDown: handleKeyDown,
tabIndex: 0,
ref: dialogRef,
className: "dialog ".concat(show ? "open" : ""),
style: {
top: "".concat(position.y - 20, "px"),
left: "".concat(position.x, "px"),
transform: "translateY(".concat(firstOpen ? "20px" : "0", ")"),
maxWidth: max || maxX ? "100vw" : width || maxWidth,
width: max || maxX ? "100vw" : width || maxWidth
}
}, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
className: "dialog-header px-2 ps-3"
}, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
className: "dialog-header-title fs-5"
}, title), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
ref: triggerRef,
className: "header-placeholder flex-fill",
onMouseDown: draggble && !max ? handleMouseDown : undefined,
style: {
cursor: draggble && !max ? "move" : "default",
height: "56.8px"
}
}), showClose && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
className: "dialog-close hover-scale",
onClick: onClose
}, "\xD7")), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
className: "dialog-content",
style: {
maxHeight: max || maxY ? "calc(100vh - 8rem)" : height || maxHeight,
height: max || maxY ? "calc(100vh - 8rem)" : height
}
}, children), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
className: "dialog-footer d-flex justify-content-end p-3"
}, showCancel && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((Button_default()), {
externalClassName: "me-2 btn-".concat(cancelBtnClass),
size: "md",
onClickOK: onCancel !== null && onCancel !== void 0 ? onCancel : onClose
}, cancelText), showConfirm && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((Button_default()), {
loading: confirmBtnLoading,
disabled: !canConfirm,
externalClassName: "btn-".concat(confirmBtnClass),
size: "md",
onClickOK: onConfirm
}, confirmText)))), document.body));
};
/* harmony default export */ const src_0 = (Dialog);
})();
/******/ return __webpack_exports__;
/******/ })()
;
});