UNPKG

uiw

Version:

A high quality UI Toolkit, A Component Library for React 16+.

1,491 lines (1,312 loc) 726 kB
(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