uiw
Version:
A high quality UI Toolkit, A Component Library for React 16+.
1,491 lines (1,312 loc) • 726 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["uiw"] = factory(require("react"), require("react-dom"));
else
root["uiw"] = factory(root["React"], root["ReactDOM"]);
})(self, (__WEBPACK_EXTERNAL_MODULE__787__, __WEBPACK_EXTERNAL_MODULE__156__) => {
return /******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ 535:
/***/ (function(module) {
/**!
* @uiw/copy-to-clipboard v1.0.16
* Copy to clipboard.
*
* Copyright (c) 2023 Kenny Wang
* https://github.com/uiwjs/copy-to-clipboard.git
*
* @website: https://uiwjs.github.io/copy-to-clipboard
* Licensed under the MIT license
*/
(function (global, factory) {
true ? module.exports = factory() :
0;
})(this, (function () { 'use strict';
/**
* *** This styling is an extra step which is likely not required. ***
* https://github.com/w3c/clipboard-apis/blob/master/explainer.adoc#writing-to-the-clipboard
*
* Why is it here? To ensure:
*
* 1. the element is able to have focus and selection.
* 2. if element was to flash render it has minimal visual impact.
* 3. less flakyness with selection and copying which **might** occur if
* the textarea element is not visible.
*
* The likelihood is the element won't even render, not even a flash,
* so some of these are just precautions. However in IE the element
* is visible whilst the popup box asking the user for permission for
* the web page to copy to the clipboard.
*
* Place in top-left corner of screen regardless of scroll position.
*
* @typedef CopyTextToClipboard
* @property {(text: string, method?: (isCopy: boolean) => void) => void} void
* @returns {void}
*
* @param {string} text
* @param {CopyTextToClipboard} cb
*/
function copyTextToClipboard(text, cb) {
if (typeof document === "undefined") return;
const el = document.createElement('textarea');
el.value = text;
el.setAttribute('readonly', '');
el.style = {
position: 'absolute',
left: '-9999px',
};
document.body.appendChild(el);
const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
el.select();
let isCopy = false;
try {
const successful = document.execCommand('copy');
isCopy = !!successful;
} catch (err) {
isCopy = false;
}
document.body.removeChild(el);
if (selected && document.getSelection) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
cb && cb(isCopy);
}
return copyTextToClipboard;
}));
//# sourceMappingURL=copy-to-clipboard.umd.js.map
/***/ }),
/***/ 837:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
"use strict";
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var f=__webpack_require__(787),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q;
/***/ }),
/***/ 322:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
if (true) {
module.exports = __webpack_require__(837);
} else {}
/***/ }),
/***/ 787:
/***/ ((module) => {
"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
/***/ }),
/***/ 156:
/***/ ((module) => {
"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE__156__;
/***/ })
/******/ });
/************************************************************************/
/******/ // 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] = {
/******/ // no module.id needed
/******/ // 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 });
/******/ };
/******/ })();
/******/
/************************************************************************/
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__, {
Affix: () => (/* reexport */ Affix),
Alert: () => (/* reexport */ react_alert_esm),
AutoLink: () => (/* reexport */ react_auto_link_esm),
Avatar: () => (/* reexport */ react_avatar_esm),
BackTop: () => (/* reexport */ react_back_top_esm),
Badge: () => (/* reexport */ react_badge_esm),
Breadcrumb: () => (/* reexport */ react_breadcrumb_esm),
Button: () => (/* reexport */ react_button_esm),
ButtonGroup: () => (/* reexport */ react_button_group_esm),
Calendar: () => (/* reexport */ Calendar),
Card: () => (/* reexport */ react_card_esm),
Carousel: () => (/* reexport */ react_carousel_esm),
Cascader: () => (/* reexport */ react_cascader_esm),
Checkbox: () => (/* reexport */ react_checkbox_esm),
CheckboxGroup: () => (/* reexport */ CheckboxGroup),
Circle: () => (/* reexport */ Circle),
Col: () => (/* reexport */ Col),
Collapse: () => (/* reexport */ react_collapse_esm),
CopyToClipboard: () => (/* reexport */ CopyToClipboard),
DateInput: () => (/* reexport */ DateInput),
DateInputRange: () => (/* reexport */ DateInputRange),
DatePicker: () => (/* reexport */ DatePicker),
DatePickerCaption: () => (/* reexport */ DatePickerCaption),
DatePickerDay: () => (/* reexport */ DatePickerDay),
DatePickerMonth: () => (/* reexport */ DatePickerMonth),
DatePickerYear: () => (/* reexport */ DatePickerYear),
DayRect: () => (/* reexport */ DayRect),
Descriptions: () => (/* reexport */ react_descriptions_esm),
Divider: () => (/* reexport */ react_divider_esm),
Drawer: () => (/* reexport */ react_drawer_esm),
Dropdown: () => (/* reexport */ Dropdown),
Empty: () => (/* reexport */ react_empty_esm),
FileInput: () => (/* reexport */ react_file_input_esm),
Form: () => (/* reexport */ react_form_esm),
FormItem: () => (/* reexport */ FormItem),
Icon: () => (/* reexport */ esm),
Input: () => (/* reexport */ react_input_esm),
InputNumber: () => (/* reexport */ InputNumber),
Layout: () => (/* reexport */ react_layout_esm),
LayoutContent: () => (/* reexport */ LayoutContent),
LayoutContext: () => (/* reexport */ LayoutContext),
LayoutFooter: () => (/* reexport */ LayoutFooter),
LayoutHeader: () => (/* reexport */ LayoutHeader),
LayoutSider: () => (/* reexport */ LayoutSider),
Line: () => (/* reexport */ Line),
List: () => (/* reexport */ react_list_esm),
ListItem: () => (/* reexport */ ListItem),
Loader: () => (/* reexport */ react_loader_esm),
Menu: () => (/* reexport */ react_menu_esm),
MenuDivider: () => (/* reexport */ MenuDivider),
MenuItem: () => (/* reexport */ MenuItem),
Message: () => (/* reexport */ Message),
Modal: () => (/* reexport */ react_modal_esm),
MonthPicker: () => (/* reexport */ MonthPicker),
Notify: () => (/* reexport */ react_notify_esm),
Overlay: () => (/* reexport */ Overlay),
OverlayTrigger: () => (/* reexport */ react_overlay_trigger_esm),
Pagination: () => (/* reexport */ Pagination),
PinCode: () => (/* reexport */ react_pin_code_esm),
Popover: () => (/* reexport */ Popover),
Portal: () => (/* reexport */ Portal),
Progress: () => (/* reexport */ react_progress_esm),
Radio: () => (/* reexport */ esm_Radio),
RadioAbstract: () => (/* reexport */ RadioAbstract),
RadioButton: () => (/* reexport */ esm_RadioButton),
RadioGroup: () => (/* reexport */ esm_RadioGroup),
Rate: () => (/* reexport */ Rate),
Row: () => (/* reexport */ Row_Row),
SearchSelect: () => (/* reexport */ SearchSelect),
SearchTree: () => (/* reexport */ react_search_tree_esm),
Select: () => (/* reexport */ react_select_esm),
Slider: () => (/* reexport */ Slider),
Split: () => (/* reexport */ Split),
Steps: () => (/* reexport */ react_steps_esm),
SubMenu: () => (/* reexport */ SubMenu),
Switch: () => (/* reexport */ react_switch_esm),
Table: () => (/* reexport */ Table),
Tabs: () => (/* reexport */ Tabs),
Tag: () => (/* reexport */ react_tag_esm),
Textarea: () => (/* reexport */ react_textarea_esm),
ThemeContext: () => (/* reexport */ ThemeContext),
TimePicker: () => (/* reexport */ TimePicker),
TimePickerTime: () => (/* reexport */ TimePickerTime),
Tooltip: () => (/* reexport */ react_tooltip_esm),
Transfer: () => (/* reexport */ react_transfer_esm),
Tree: () => (/* reexport */ Tree),
TreeChecked: () => (/* reexport */ TreeChecked),
canUseDOM: () => (/* reexport */ canUseDOM),
formatter: () => (/* reexport */ formatter),
getChildKeys: () => (/* reexport */ getChildKeys),
randomid: () => (/* reexport */ randomid)
});
;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/extends.js
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(787);
var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
;// CONCATENATED MODULE: ../utils/esm/noop.js
function noop() {}
;// CONCATENATED MODULE: ../utils/esm/getScroll.js
/**
* Gets the scroll value of the given element in the given side (top and left)
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @argument {String} top `true` or `false`
* @returns {number} amount of scrolled pixels
*/
function getScroll(target, top) {
if (typeof window === 'undefined') {
return 0;
}
var prop = top ? 'pageYOffset' : 'pageXOffset';
var method = top ? 'scrollTop' : 'scrollLeft';
var isWindow = target === window;
var ret = isWindow ? target[prop] : target[method];
if (isWindow && typeof ret !== 'number') {
ret = document.documentElement[method];
}
return ret;
}
;// CONCATENATED MODULE: ../react-affix/esm/utils.js
var getTargetRect = target => {
return target !== window ? target.getBoundingClientRect() : {
top: 0,
left: 0,
bottom: 0
};
};
var getOffset = (element, target) => {
var elemRect = element.getBoundingClientRect();
var targetRect = getTargetRect(target);
var scrollTop = getScroll(target, true);
var scrollLeft = getScroll(target);
var docElem = window.document.body;
var clientTop = docElem.clientTop || 0;
var clientLeft = docElem.clientLeft || 0;
return {
top: elemRect.top - targetRect.top + scrollTop - clientTop,
left: elemRect.left - targetRect.left + scrollLeft - clientLeft,
width: elemRect.width,
height: elemRect.height
};
};
var getDefaultTarget = () => typeof window !== 'undefined' ? window : null;
// EXTERNAL MODULE: ../../node_modules/react/jsx-runtime.js
var jsx_runtime = __webpack_require__(322);
;// CONCATENATED MODULE: ../react-affix/esm/index.js
var _excluded = ["prefixCls", "className", "children", "offsetTop", "offsetBottom", "target", "onChange"];
class Affix extends (external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Component {
constructor(props) {
super(props);
this.state = {
placeholderStyle: undefined,
affixStyle: undefined
};
this.box = void 0;
this.target = void 0;
this.events = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load'];
this.eventHandlers = {};
this.timeout = void 0;
this.getInstance = node => {
if (node) {
this.box = node;
}
};
this.updatePosition = this.updatePosition.bind(this);
}
componentDidMount() {
var target = this.props.target || getDefaultTarget;
// Wait for parent component ref has its value
this.timeout = window.setTimeout(() => {
this.target = target();
this.setTargetEventListeners();
});
}
componentWillUnmount() {
this.clearEventListeners();
clearTimeout(this.timeout);
}
updatePosition() {
var {
offsetTop
} = this.props;
var {
offsetBottom
} = this.props;
if (!this.box || !this.box.offsetParent) {
return;
}
var elemSize = {
width: this.box.clientWidth,
height: this.box.clientHeight
};
var offsetMode = {
top: true,
bottom: false
};
if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
offsetMode.top = true;
offsetTop = 0;
}
if (typeof offsetBottom === 'number') {
offsetMode.top = false;
offsetMode.bottom = true;
}
var elemOffset = getOffset(this.box, this.target);
var box = this.box.getBoundingClientRect();
var bottom = document.documentElement.clientHeight - box.y - elemOffset.height;
if (offsetMode.top && box.y < 0) {
this.setPlaceholderStyle(_extends({}, elemSize));
this.setAffixStyle({
position: 'fixed',
top: offsetTop || 0,
left: elemOffset.left,
width: elemOffset.width
});
} else if (offsetMode.bottom && bottom < 0) {
this.setPlaceholderStyle(_extends({}, elemSize));
this.setAffixStyle({
position: 'fixed',
bottom: offsetBottom || 0,
left: elemOffset.left,
width: elemOffset.width
});
} else {
this.setPlaceholderStyle();
this.setAffixStyle();
}
}
setAffixStyle(affixStyle) {
var {
onChange
} = this.props;
var affixed = !!this.state.affixStyle;
this.setState({
affixStyle
}, () => {
onChange && onChange(affixed);
});
}
setPlaceholderStyle(placeholderStyle) {
this.setState({
placeholderStyle
});
}
// 设置监听事件
setTargetEventListeners() {
this.clearEventListeners();
this.events.forEach(eventName => {
this.eventHandlers[eventName] = this.updatePosition;
this.target && this.target.addEventListener(eventName, this.updatePosition, false);
});
}
clearEventListeners() {
this.events.forEach(eventName => {
var handler = this.eventHandlers[eventName];
this.target && this.target.removeEventListener(eventName, handler, false);
});
}
render() {
var _this$props = this.props,
{
prefixCls,
className,
children
} = _this$props,
resetProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
var cls = [className, prefixCls].filter(Boolean).join(' ').trim();
return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({}, resetProps, {
ref: this.getInstance,
style: _extends({}, this.state.placeholderStyle, this.props.style),
children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
className: cls,
style: this.state.affixStyle,
children: children
})
}));
}
}
Affix.defaultProps = {
prefixCls: 'w-affix',
onChange: noop
};
;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
;// CONCATENATED MODULE: ../../node_modules/dom-helpers/esm/hasClass.js
/**
* Checks if a given element has a CSS class.
*
* @param element the element
* @param className the CSS class name
*/
function hasClass(element, className) {
if (element.classList) return !!className && element.classList.contains(className);
return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
}
;// CONCATENATED MODULE: ../../node_modules/dom-helpers/esm/addClass.js
/**
* Adds a CSS class to a given element.
*
* @param element the element
* @param className the CSS class name
*/
function addClass_addClass(element, className) {
if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + " " + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + " " + className);
}
;// CONCATENATED MODULE: ../../node_modules/dom-helpers/esm/removeClass.js
function replaceClassName(origClass, classToRemove) {
return origClass.replace(new RegExp("(^|\\s)" + classToRemove + "(?:\\s|$)", 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
}
/**
* Removes a CSS class from a given element.
*
* @param element the element
* @param className the CSS class name
*/
function removeClass_removeClass(element, className) {
if (element.classList) {
element.classList.remove(className);
} else if (typeof element.className === 'string') {
element.className = replaceClassName(element.className, className);
} else {
element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
}
}
// 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__(156);
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: ../../node_modules/react-transition-group/esm/config.js
/* harmony default export */ const config = ({
disabled: false
});
;// CONCATENATED MODULE: ../../node_modules/react-transition-group/esm/TransitionGroupContext.js
/* harmony default export */ const TransitionGroupContext = (external_root_React_commonjs2_react_commonjs_react_amd_react_default().createContext(null));
;// CONCATENATED MODULE: ../../node_modules/react-transition-group/esm/utils/reflow.js
var forceReflow = function forceReflow(node) {
return node.scrollTop;
};
;// CONCATENATED MODULE: ../../node_modules/react-transition-group/esm/Transition.js
var UNMOUNTED = 'unmounted';
var EXITED = 'exited';
var ENTERING = 'entering';
var ENTERED = 'entered';
var EXITING = 'exiting';
/**
* The Transition component lets you describe a transition from one component
* state to another _over time_ with a simple declarative API. Most commonly
* it's used to animate the mounting and unmounting of a component, but can also
* be used to describe in-place transition states as well.
*
* ---
*
* **Note**: `Transition` is a platform-agnostic base component. If you're using
* transitions in CSS, you'll probably want to use
* [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
* instead. It inherits all the features of `Transition`, but contains
* additional features necessary to play nice with CSS transitions (hence the
* name of the component).
*
* ---
*
* By default the `Transition` component does not alter the behavior of the
* component it renders, it only tracks "enter" and "exit" states for the
* components. It's up to you to give meaning and effect to those states. For
* example we can add styles to a component when it enters or exits:
*
* ```jsx
* import { Transition } from 'react-transition-group';
*
* const duration = 300;
*
* const defaultStyle = {
* transition: `opacity ${duration}ms ease-in-out`,
* opacity: 0,
* }
*
* const transitionStyles = {
* entering: { opacity: 1 },
* entered: { opacity: 1 },
* exiting: { opacity: 0 },
* exited: { opacity: 0 },
* };
*
* const Fade = ({ in: inProp }) => (
* <Transition in={inProp} timeout={duration}>
* {state => (
* <div style={{
* ...defaultStyle,
* ...transitionStyles[state]
* }}>
* I'm a fade Transition!
* </div>
* )}
* </Transition>
* );
* ```
*
* There are 4 main states a Transition can be in:
* - `'entering'`
* - `'entered'`
* - `'exiting'`
* - `'exited'`
*
* Transition state is toggled via the `in` prop. When `true` the component
* begins the "Enter" stage. During this stage, the component will shift from
* its current transition state, to `'entering'` for the duration of the
* transition and then to the `'entered'` stage once it's complete. Let's take
* the following example (we'll use the
* [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
*
* ```jsx
* function App() {
* const [inProp, setInProp] = useState(false);
* return (
* <div>
* <Transition in={inProp} timeout={500}>
* {state => (
* // ...
* )}
* </Transition>
* <button onClick={() => setInProp(true)}>
* Click to Enter
* </button>
* </div>
* );
* }
* ```
*
* When the button is clicked the component will shift to the `'entering'` state
* and stay there for 500ms (the value of `timeout`) before it finally switches
* to `'entered'`.
*
* When `in` is `false` the same thing happens except the state moves from
* `'exiting'` to `'exited'`.
*/
var Transition = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Transition, _React$Component);
function Transition(props, context) {
var _this;
_this = _React$Component.call(this, props, context) || this;
var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
var initialStatus;
_this.appearStatus = null;
if (props.in) {
if (appear) {
initialStatus = EXITED;
_this.appearStatus = ENTERING;
} else {
initialStatus = ENTERED;
}
} else {
if (props.unmountOnExit || props.mountOnEnter) {
initialStatus = UNMOUNTED;
} else {
initialStatus = EXITED;
}
}
_this.state = {
status: initialStatus
};
_this.nextCallback = null;
return _this;
}
Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
var nextIn = _ref.in;
if (nextIn && prevState.status === UNMOUNTED) {
return {
status: EXITED
};
}
return null;
} // getSnapshotBeforeUpdate(prevProps) {
// let nextStatus = null
// if (prevProps !== this.props) {
// const { status } = this.state
// if (this.props.in) {
// if (status !== ENTERING && status !== ENTERED) {
// nextStatus = ENTERING
// }
// } else {
// if (status === ENTERING || status === ENTERED) {
// nextStatus = EXITING
// }
// }
// }
// return { nextStatus }
// }
;
var _proto = Transition.prototype;
_proto.componentDidMount = function componentDidMount() {
this.updateStatus(true, this.appearStatus);
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var nextStatus = null;
if (prevProps !== this.props) {
var status = this.state.status;
if (this.props.in) {
if (status !== ENTERING && status !== ENTERED) {
nextStatus = ENTERING;
}
} else {
if (status === ENTERING || status === ENTERED) {
nextStatus = EXITING;
}
}
}
this.updateStatus(false, nextStatus);
};
_proto.componentWillUnmount = function componentWillUnmount() {
this.cancelNextCallback();
};
_proto.getTimeouts = function getTimeouts() {
var timeout = this.props.timeout;
var exit, enter, appear;
exit = enter = appear = timeout;
if (timeout != null && typeof timeout !== 'number') {
exit = timeout.exit;
enter = timeout.enter; // TODO: remove fallback for next major
appear = timeout.appear !== undefined ? timeout.appear : enter;
}
return {
exit: exit,
enter: enter,
appear: appear
};
};
_proto.updateStatus = function updateStatus(mounting, nextStatus) {
if (mounting === void 0) {
mounting = false;
}
if (nextStatus !== null) {
// nextStatus will always be ENTERING or EXITING.
this.cancelNextCallback();
if (nextStatus === ENTERING) {
if (this.props.unmountOnExit || this.props.mountOnEnter) {
var node = this.props.nodeRef ? this.props.nodeRef.current : external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
// With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
// To make the animation happen, we have to separate each rendering and avoid being processed as batched.
if (node) forceReflow(node);
}
this.performEnter(mounting);
} else {
this.performExit();
}
} else if (this.props.unmountOnExit && this.state.status === EXITED) {
this.setState({
status: UNMOUNTED
});
}
};
_proto.performEnter = function performEnter(mounting) {
var _this2 = this;
var enter = this.props.enter;
var appearing = this.context ? this.context.isMounting : mounting;
var _ref2 = this.props.nodeRef ? [appearing] : [external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().findDOMNode(this), appearing],
maybeNode = _ref2[0],
maybeAppearing = _ref2[1];
var timeouts = this.getTimeouts();
var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
// if we are mounting and running this it means appear _must_ be set
if (!mounting && !enter || config.disabled) {
this.safeSetState({
status: ENTERED
}, function () {
_this2.props.onEntered(maybeNode);
});
return;
}
this.props.onEnter(maybeNode, maybeAppearing);
this.safeSetState({
status: ENTERING
}, function () {
_this2.props.onEntering(maybeNode, maybeAppearing);
_this2.onTransitionEnd(enterTimeout, function () {
_this2.safeSetState({
status: ENTERED
}, function () {
_this2.props.onEntered(maybeNode, maybeAppearing);
});
});
});
};
_proto.performExit = function performExit() {
var _this3 = this;
var exit = this.props.exit;
var timeouts = this.getTimeouts();
var maybeNode = this.props.nodeRef ? undefined : external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().findDOMNode(this); // no exit animation skip right to EXITED
if (!exit || config.disabled) {
this.safeSetState({
status: EXITED
}, function () {
_this3.props.onExited(maybeNode);
});
return;
}
this.props.onExit(maybeNode);
this.safeSetState({
status: EXITING
}, function () {
_this3.props.onExiting(maybeNode);
_this3.onTransitionEnd(timeouts.exit, function () {
_this3.safeSetState({
status: EXITED
}, function () {
_this3.props.onExited(maybeNode);
});
});
});
};
_proto.cancelNextCallback = function cancelNextCallback() {
if (this.nextCallback !== null) {
this.nextCallback.cancel();
this.nextCallback = null;
}
};
_proto.safeSetState = function safeSetState(nextState, callback) {
// This shouldn't be necessary, but there are weird race conditions with
// setState callbacks and unmounting in testing, so always make sure that
// we can cancel any pending setState callbacks after we unmount.
callback = this.setNextCallback(callback);
this.setState(nextState, callback);
};
_proto.setNextCallback = function setNextCallback(callback) {
var _this4 = this;
var active = true;
this.nextCallback = function (event) {
if (active) {
active = false;
_this4.nextCallback = null;
callback(event);
}
};
this.nextCallback.cancel = function () {
active = false;
};
return this.nextCallback;
};
_proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
this.setNextCallback(handler);
var node = this.props.nodeRef ? this.props.nodeRef.current : external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().findDOMNode(this);
var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
if (!node || doesNotHaveTimeoutOrListener) {
setTimeout(this.nextCallback, 0);
return;
}
if (this.props.addEndListener) {
var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
maybeNode = _ref3[0],
maybeNextCallback = _ref3[1];
this.props.addEndListener(maybeNode, maybeNextCallback);
}
if (timeout != null) {
setTimeout(this.nextCallback, timeout);
}
};
_proto.render = function render() {
var status = this.state.status;
if (status === UNMOUNTED) {
return null;
}
var _this$props = this.props,
children = _this$props.children,
_in = _this$props.in,
_mountOnEnter = _this$props.mountOnEnter,
_unmountOnExit = _this$props.unmountOnExit,
_appear = _this$props.appear,
_enter = _this$props.enter,
_exit = _this$props.exit,
_timeout = _this$props.timeout,
_addEndListener = _this$props.addEndListener,
_onEnter = _this$props.onEnter,
_onEntering = _this$props.onEntering,
_onEntered = _this$props.onEntered,
_onExit = _this$props.onExit,
_onExiting = _this$props.onExiting,
_onExited = _this$props.onExited,
_nodeRef = _this$props.nodeRef,
childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
return (
/*#__PURE__*/
// allows for nested Transitions
external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(TransitionGroupContext.Provider, {
value: null
}, typeof children === 'function' ? children(status, childProps) : external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.only(children), childProps))
);
};
return Transition;
}((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Component);
Transition.contextType = TransitionGroupContext;
Transition.propTypes = false ? 0 : {}; // Name the function so it is clearer in the documentation
function Transition_noop() {}
Transition.defaultProps = {
in: false,
mountOnEnter: false,
unmountOnExit: false,
appear: false,
enter: true,
exit: true,
onEnter: Transition_noop,
onEntering: Transition_noop,
onEntered: Transition_noop,
onExit: Transition_noop,
onExiting: Transition_noop,
onExited: Transition_noop
};
Transition.UNMOUNTED = UNMOUNTED;
Transition.EXITED = EXITED;
Transition.ENTERING = ENTERING;
Transition.ENTERED = ENTERED;
Transition.EXITING = EXITING;
/* harmony default export */ const esm_Transition = (Transition);
;// CONCATENATED MODULE: ../../node_modules/react-transition-group/esm/CSSTransition.js
var _addClass = function addClass(node, classes) {
return node && classes && classes.split(' ').forEach(function (c) {
return addClass_addClass(node, c);
});
};
var removeClass = function removeClass(node, classes) {
return node && classes && classes.split(' ').forEach(function (c) {
return removeClass_removeClass(node, c);
});
};
/**
* A transition component inspired by the excellent
* [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
* use it if you're using CSS transitions or animations. It's built upon the
* [`Transition`](https://reactcommunity.org/react-transition-group/transition)
* component, so it inherits all of its props.
*
* `CSSTransition` applies a pair of class names during the `appear`, `enter`,
* and `exit` states of the transition. The first class is applied and then a
* second `*-active` class in order to activate the CSS transition. After the
* transition, matching `*-done` class names are applied to persist the
* transition state.
*
* ```jsx
* function App() {
* const [inProp, setInProp] = useState(false);
* return (
* <div>
* <CSSTransition in={inProp} timeout={200} classNames="my-node">
* <div>
* {"I'll receive my-node-* classes"}
* </div>
* </CSSTransition>
* <button type="button" onClick={() => setInProp(true)}>
* Click to Enter
* </button>
* </div>
* );
* }
* ```
*
* When the `in` prop is set to `true`, the child component will first receive
* the class `example-enter`, then the `example-enter-active` will be added in
* the next tick. `CSSTransition` [forces a
* reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
* between before adding the `example-enter-active`. This is an important trick
* because it allows us to transition between `example-enter` and
* `example-enter-active` even though they were added immediately one after
* another. Most notably, this is what makes it possible for us to animate
* _appearance_.
*
* ```css
* .my-node-enter {
* opacity: 0;
* }
* .my-node-enter-active {
* opacity: 1;
* transition: opacity 200ms;
* }
* .my-node-exit {
* opacity: 1;
* }
* .my-node-exit-active {
* opacity: 0;
* transition: opacity 200ms;
* }
* ```
*
* `*-active` classes represent which styles you want to animate **to**, so it's
* important to add `transition` declaration only to them, otherwise transitions
* might not behave as intended! This might not be obvious when the transitions
* are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
* the example above (minus `transition`), but it becomes apparent in more
* complex transitions.
*
* **Note**: If you're using the
* [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
* prop, make sure to define styles for `.appear-*` classes as well.
*/
var CSSTransition = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(CSSTransition, _React$Component);
function CSSTransition() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this.appliedClasses = {
appear: {},
enter: {},
exit: {}
};
_this.onEnter = function (maybeNode, maybeAppearing) {
var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
node = _this$resolveArgument[0],
appearing = _this$resolveArgument[1];
_this.removeClasses(node, 'exit');
_this.addClass(node, appearing ? 'appear' : 'enter', 'base');
if (_this.props.onEnter) {
_this.props.onEnter(maybeNode, maybeAppearing);
}
};
_this.onEntering = function (maybeNode, maybeAppearing) {
var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
node = _this$resolveArgument2[0],
appearing = _this$resolveArgument2[1];
var type = appearing ? 'appear' : 'enter';
_this.addClass(node, type, 'active');
if (_this.props.onEntering) {
_this.props.onEntering(maybeNode, maybeAppearing);
}
};
_this.onEntered = function (maybeNode, maybeAppearing) {
var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
node = _this$resolveArgument3[0],
appearing = _this$resolveArgument3[1];
var type = appearing ? 'appear' : 'enter';
_this.removeClasses(node, type);
_this.addClass(node, type, 'done');
if (_this.props.onEntered) {
_this.props.onEntered(maybeNode, maybeAppearing);
}
};
_this.onExit = function (maybeNode) {
var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
node = _this$resolveArgument4[0];
_this.removeClasses(node, 'appear');
_this.removeClasses(node, 'enter');
_this.addClass(node, 'exit', 'base');
if (_this.props.onExit) {
_this.props.onExit(maybeNode);
}
};
_this.onExiting = function (maybeNode) {
var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
node = _this$resolveArgument5[0];
_this.addClass(node, 'exit', 'active');
if (_this.props.onExiting) {
_this.props.onExiting(maybeNode);
}
};
_this.onExited = function (maybeNode) {
var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
node = _this$resolveArgument6[0];
_this.removeClasses(node, 'exit');
_this.addClass(node, 'exit', 'done');
if (_this.props.onExited) {
_this.props.onExited(maybeNode);
}
};
_this.resolveArguments = function (maybeNode, maybeAppearing) {
return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
: [maybeNode, maybeAppearing];
};
_this.getClassNames = function (type) {
var classNames = _this.props.classNames;
var isStringClassNames = typeof classNames === 'string';
var prefix = isStringClassNames && classNames ? classNames + "-" : '';
var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
return {
baseClassName: baseClassName,
activeClassName: activeClassName,
doneClassName: doneClassName
};
};
return _this;
}
var _proto = CSSTransition.prototype;
_proto.addClass = function addClass(node, type, phase) {
var className = this.getClassNames(type)[phase + "ClassName"];
var _this$getClassNames = this.getClassNames('enter'),
doneClassName = _this$getClassNames.doneClassName;
if (type === 'appear' && phase === 'done' && doneClassName) {
className += " " + doneClassName;
} // This is to force a repaint,
// which is necessary in order to transition styles when adding a class name.
if (phase === 'active') {
if (node) forceReflow(node);
}
if (className) {
this.appliedClasses[type][phase] = className;
_addClass(node, className);
}
};
_proto.removeClasses = function removeClasses(node, type) {
var _this$appliedClasses$ = this.appliedClasses[type],
baseClassName = _this$appliedClasses$.base,
activeClassName = _this$appliedClasses$.active,
doneClassName = _this$appliedClasses$.done;
this.appliedClasses[type] = {};
if (baseClassName) {
removeClass(node, baseClassName);
}
if (activeClassName) {
removeClass(node, activeClassName);
}
if (doneClassName) {
removeClass(node, doneClassName);
}
};
_proto.render = function render() {
var _this$props = this.props,
_ = _this$props.classNames,
props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(esm_Transition, _extends({}, props, {
onEnter: this.onEnter,
onEntered: this.onEntered,
onEntering: this.onEntering,
onExit: this.onExit,
onExiting: this.onExiting,
onExited: this.onExited
}));
};
return CSSTransition;
}((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Component);
CSSTransition.defaultProps = {
classNames: ''
};
CSSTransition.propTypes = false ? 0 : {};
/* harmony default export */ const esm_CSSTransition = (CSSTransition);
;// CONCATENATED MODULE: ../react-portal/esm/index.js
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
function Portal(props) {
var {
container
} = props;
var defaultNode = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)();
var containerRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(container);
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
return () => {
if (defaultNode.current && containerRef.current) {
containerRef.current.removeChild(defaultNode.current);
defaultNode.current = undefined;
}
};
}, []);
if (!canUseDOM) {
return null;
}
if (!containerRef.current) {
containerRef.current = document.body;
}
if (!defaultNode.current) {
defaultNode.current = document.createElement('div');
containerRef.current.appendChild(defaultNode.current);
}
return /*#__PURE__*/external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().createPortal(props.children, defaultNode.current);
}
;// CONCATENATED MODULE: ../react-overlay/esm/style/index.css
// extracted by mini-css-extract-plugin
/* harmony default export */ const style = ({});
;// CONCATENATED MODULE: ../react-overlay/esm/index.js
var esm_excluded = ["className", "style", "isOpen", "prefixCls", "usePortal", "maskClosable", "backdropProps", "portalProps", "hasBackdrop", "unmountOnExit", "timeout", "transitionName", "onOpening", "onOpened", "onClosing", "onClosed", "onClose", "onEnter", "onExiting", "onEntering", "onEntered", "onExit", "children", "dialogProps"];
/**
* Overlay 组件
* ---------------
* 动画库 react-transition-group 文档
* 老的文档
* https://facebook.github.io/react/docs/animation.html
* 新的文档
* https://reactcommunity.org/react-transition-group/
* 动画效果
* https://daneden.github.io/animate.css/
*/
function Overlay(props) {
var {
className,
style,
isOpen: _ = false,
prefixCls = 'w-overlay',
usePortal = true,
maskClosable = true,
backdropProps = {},
portalProps = {},
hasBackdrop = true,
unmountOnExit = true,
// 设置 true 销毁根节点
timeout = 300,
transitionName = 'w-overlay',
// onEnter = noop,
onOpening = noop,
onOpened = noop,
onClosing = noop,
onClosed = noop,
onClose = noop,
onEnter: _onEnter = noop,
onExiting: _onExiting = noop,
onEntering: _onEntering = noop,
onEntered: _onEntered = noop,
onExit = noop,
children,
dialogProps = {}
} = props,
otherProps = _objectWithoutPropertiesLoose(props, esm_excluded);
var [isOpen, setIsOpen] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)();
// const [isOpen, setIsOpen] = useState(props.isOpen || false);
var [visible, setVisible] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
var container = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
var overlay = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
if (isOpen !== props.isOpen && props.isOpen) {
setVisible(true);
}
if (isOpen !== props.isOpen && !props.isOpen) {
overlayWillClose();
setIsOpen(false);
}
}, [props.isOpen]);
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
if (visible) {
overlayWillOpen();
setIsOpen(true);
}
}, [visible]);
var decoratedChild = typeof children === 'object' ? ( /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.cloneElement)(children, _extends({}, dialogProps, {
style: _extends({}, children.props.style, dialogProps.style),
className: [children.props.className, prefixCls + "-content"].filter(Boolean).join(' ').trim(),
tabIndex: 0
}))) : /*#__PURE__*/(0,jsx_runtime.jsx)("span", _extends({}, dialogProps, {
className: prefixCls + "-content",
children: children
}));
function handleClosed(node) {
setVisible(false);
onClosed && onClosed(node);
}
function handleBackdropMouseDown(e) {
if (e.target !== container.current && usePortal) {
return;
}
if (maskClosable && hasBackdrop) {
overlayWillClose();
setIsOpen(false);
onClose && onClose(e);
}
backdropProps && backdropProps.onMouseDown && backdropProps.on