@kne/react-modal 0.1.1

package/dist/index.modern.js

@@ -0,0 +1,602 @@
+import { useRef, useEffect, Children } from 'react';
+import { Modal as Modal$1, App, Button, Tabs } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import classnames from 'classnames';
+import { useMobilePopupMount, useScrollElement } from '@kne/responsive-utils';
+import { createWithIntlProvider, useIntl } from '@kne/react-intl';
+import ButtonGroup from '@kne/button-group';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
+
+var styles = {"modal-tabs-layout":"kne-react-modal_nfGH7","modal-columns-layout":"kne-react-modal_ZjINn","modal-columns-layout__col":"kne-react-modal_KJmX4","modal-scroll-region":"kne-react-modal_86VYa","modal-scroll-region-inner":"kne-react-modal_K9DGN","is-inset":"kne-react-modal_HTvLy"};
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+const locale$1 = {
+  Cancel: '取消',
+  Confirm: '确定'
+};
+
+const locale = {
+  Cancel: 'Cancel',
+  Confirm: 'Confirm'
+};
+
+const withLocale = createWithIntlProvider({
+  defaultLocale: 'zh-CN',
+  messages: {
+    'zh-CN': locale$1,
+    'en-US': locale
+  },
+  namespace: 'react-modal'
+});
+
+var style = {"kne-responsive-boundary":"kne-react-modal_gh14z","kne-responsive-scroll":"kne-react-modal_Kfn6L","modal":"kne-react-modal_Bk7-B","small":"kne-react-modal_DZGD6","large":"kne-react-modal_9sz-n","modal-body-inner":"kne-react-modal_fFnva","is-mobile":"kne-react-modal_LtgJz","modal-container":"kne-react-modal_aEoZq","modal-antd-header":"kne-react-modal_54n8W","modal-antd-footer":"kne-react-modal_AJ9pV","modal-antd-body":"kne-react-modal_u2IjN","modal-outer":"kne-react-modal_kkILR","no-title":"kne-react-modal_8Iysr","no-footer":"kne-react-modal_VMxik","no-padding":"kne-react-modal_Fof-N","modal-title":"kne-react-modal_tG9MF","modal-body":"kne-react-modal_W-QFz","modal-footer":"kne-react-modal_meVfy","body-scroll-off":"kne-react-modal_l627I","is-embedded-footer":"kne-react-modal_17Eih","modal-footer-extra":"kne-react-modal_Fx8Z-","modal-footer-actions":"kne-react-modal_V3ZrX","modal-close":"kne-react-modal_-EK8N","modal-host":"kne-react-modal_eNb-h","modal-wrap":"kne-react-modal_3Sju5","modal-wrap-centered":"kne-react-modal_-qCIk","modal-wrap-fullscreen":"kne-react-modal_8lS2G","modal-mask-fullscreen":"kne-react-modal_XfLOC"};
+
+const _excluded$4 = ["ButtonComponent", "onClick", "autoClose", "display"];
+const Footer = ({
+  footer,
+  footerButtons,
+  onConfirm,
+  onCancel,
+  cancelText,
+  confirmText,
+  onClose,
+  targetProps,
+  isMobile
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const defaultButtons = [{
+    children: cancelText || formatMessage({
+      id: 'Cancel'
+    }),
+    onClick: onCancel
+  }, {
+    type: 'primary',
+    children: confirmText || formatMessage({
+      id: 'Confirm'
+    }),
+    onClick: onConfirm
+  }];
+  const rawList = footerButtons === undefined ? defaultButtons : footerButtons;
+  const list = (Array.isArray(rawList) ? rawList : []).filter(item => {
+    if (typeof (item == null ? void 0 : item.display) === 'function') {
+      return item.display();
+    }
+    return (item == null ? void 0 : item.display) !== false;
+  }).map(_ref => {
+    let {
+        ButtonComponent,
+        onClick,
+        autoClose = true
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    return _extends({}, props, {
+      buttonComponent: ButtonComponent,
+      onClick: async (...args) => {
+        const res = await Promise.resolve(onClick && onClick(...args, targetProps));
+        autoClose && res !== false && onClose && onClose();
+        return res;
+      }
+    });
+  });
+  const showButtons = !(Array.isArray(footerButtons) && footerButtons.length === 0) && list.length > 0;
+  const embeddedFooterOnly = Array.isArray(footerButtons) && footerButtons.length === 0 && footer != null;
+  const showFooterSlot = !isMobile || footer;
+  if (!showFooterSlot && !showButtons) {
+    return null;
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(style['modal-footer'], 'modal-footer', {
+      [style['is-mobile']]: isMobile,
+      [style['is-embedded-footer']]: embeddedFooterOnly
+    }),
+    children: [showFooterSlot ? /*#__PURE__*/jsx("div", {
+      className: style['modal-footer-extra'],
+      children: footer
+    }) : null, showButtons ? /*#__PURE__*/jsx("div", {
+      className: style['modal-footer-actions'],
+      children: /*#__PURE__*/jsx(ButtonGroup, {
+        list: list,
+        showLength: list.length,
+        place: isMobile ? 'center' : 'end'
+      })
+    }) : null]
+  });
+};
+
+const _excluded$3 = ["children", "footer", "footerButtons", "className", "size", "title", "onClose", "onConfirm", "confirmText", "onCancel", "cancelText", "closable", "noPadding", "bodyScroll", "isMobile", "mobileFullscreen", "fixedModeClass", "wrapClassName", "classNames", "styles", "style"],
+  _excluded2 = ["width"],
+  _excluded3 = ["size", "getContainer", "open", "mobileFullscreen", "bodyScroll"],
+  _excluded4 = ["afterClose", "getContainer"],
+  _excluded5 = ["children", "getContainer", "afterClose"];
+const ModalLocaleRoot = withLocale(({
+  children
+}) => children);
+const renderWithOptions = (value, options) => {
+  if (typeof value === 'function') {
+    return value(options);
+  }
+  return value;
+};
+const wrapCustomGetContainer = customGetContainer => {
+  if (!customGetContainer) {
+    return undefined;
+  }
+  if (typeof customGetContainer === 'function') {
+    return triggerNode => customGetContainer(triggerNode) || null;
+  }
+  return () => customGetContainer;
+};
+const VIEWPORT_EXAMPLE_SELECTORS = ['.example-driver-device-scroll'];
+const viewportPopupMountOptions = {
+  cover: 'viewport',
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS
+};
+const findParentModalMountHost = node => {
+  if (!node || typeof node.closest !== 'function') {
+    return null;
+  }
+  const parentRoot = node.closest('.ant-modal-root');
+  if (!parentRoot) {
+    return null;
+  }
+  return parentRoot.parentElement || (typeof document !== 'undefined' ? document.body : null);
+};
+const resolveModalGetContainer = ({
+  customGetContainer,
+  getPopupContainer,
+  getHostNode
+}) => {
+  const wrappedCustom = wrapCustomGetContainer(customGetContainer);
+  return triggerNode => {
+    if (wrappedCustom) {
+      const custom = wrappedCustom(triggerNode);
+      if (custom) {
+        return custom;
+      }
+    }
+    const from = triggerNode || (typeof getHostNode === 'function' ? getHostNode() : null);
+    const nestedHost = findParentModalMountHost(from);
+    if (nestedHost) {
+      return nestedHost;
+    }
+    return getPopupContainer(triggerNode);
+  };
+};
+let parentScrollLockCount = 0;
+let parentScrollLocked = [];
+const lockParentScroll = getScrollElement => {
+  parentScrollLockCount += 1;
+  if (parentScrollLockCount === 1) {
+    const targets = [document.body];
+    const scrollEl = typeof getScrollElement === 'function' ? getScrollElement() : null;
+    if (scrollEl && scrollEl !== document.body && !targets.includes(scrollEl)) {
+      targets.push(scrollEl);
+    }
+    parentScrollLocked = targets.map(el => {
+      const prev = {
+        overflow: el.style.overflow,
+        overscrollBehavior: el.style.overscrollBehavior
+      };
+      el.style.overflow = 'hidden';
+      el.style.overscrollBehavior = 'none';
+      return {
+        el,
+        prev
+      };
+    });
+  }
+  return () => {
+    parentScrollLockCount = Math.max(0, parentScrollLockCount - 1);
+    if (parentScrollLockCount === 0) {
+      parentScrollLocked.forEach(({
+        el,
+        prev
+      }) => {
+        el.style.overflow = prev.overflow;
+        el.style.overscrollBehavior = prev.overscrollBehavior;
+      });
+      parentScrollLocked = [];
+    }
+  };
+};
+const useLockParentScroll = (enabled, getScrollElement) => {
+  useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    return lockParentScroll(getScrollElement);
+  }, [enabled, getScrollElement]);
+};
+const sizeStyleVars = (size, hasFooter) => {
+  const minBase = size === 'small' ? 300 : 500;
+  const chrome = 48 + (hasFooter ? 58 : 0);
+  const minHeight = `${Math.max(0, minBase - chrome)}px`;
+  if (size === 'large') {
+    return {
+      width: typeof window !== 'undefined' ? `${Math.min(window.innerWidth - 64, 1500)}px` : '1500px',
+      '--kne-modal-body-min-height': minHeight
+    };
+  }
+  if (size === 'small') {
+    return {
+      width: '600px',
+      '--kne-modal-body-min-height': minHeight
+    };
+  }
+  return {
+    width: '1000px',
+    '--kne-modal-body-min-height': minHeight
+  };
+};
+const ModalOuter = ({
+  title,
+  footer,
+  footerButtons,
+  noPadding,
+  onClose,
+  closable,
+  onConfirm,
+  onCancel,
+  children,
+  targetProps,
+  cancelText,
+  confirmText,
+  isMobile,
+  bodyScroll
+}) => {
+  const effectiveNoPadding = noPadding != null ? noPadding : bodyScroll === false;
+  const bodyInner = /*#__PURE__*/jsx("div", {
+    className: classnames(style['modal-body-inner'], 'modal-body-inner', {
+      [style['no-padding']]: effectiveNoPadding
+    }),
+    children: children
+  });
+  const bodyClassName = classnames(style['modal-body'], 'modal-body');
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(style['modal-outer'], 'modal-container', {
+      [style['is-mobile']]: isMobile,
+      [style['no-title']]: !title,
+      [style['no-footer']]: footer === null && footerButtons === undefined,
+      [style['no-padding']]: effectiveNoPadding
+    }),
+    "data-testid": "react-modal",
+    children: [closable === false ? null : /*#__PURE__*/jsx(Button, {
+      "data-testid": "react-modal-close-btn",
+      className: classnames(style['modal-close'], 'modal-close'),
+      type: "text",
+      icon: /*#__PURE__*/jsx(CloseOutlined, {}),
+      onClick: e => {
+        e.stopPropagation();
+        onClose && onClose();
+      }
+    }), title ? /*#__PURE__*/jsx("div", {
+      className: classnames(style['modal-title'], 'modal-title'),
+      children: title
+    }) : null, bodyScroll !== false ? /*#__PURE__*/jsx(SimpleBar, {
+      className: bodyClassName,
+      style: {
+        height: 'var(--kne-modal-body-height)'
+      },
+      children: bodyInner
+    }) : /*#__PURE__*/jsx("div", {
+      className: classnames(bodyClassName, style['body-scroll-off']),
+      children: bodyInner
+    }), footer === null && footerButtons === undefined ? null : /*#__PURE__*/jsx(Footer, {
+      footer: footer,
+      footerButtons: footerButtons,
+      onConfirm: onConfirm,
+      confirmText: confirmText,
+      onCancel: onCancel,
+      cancelText: cancelText,
+      onClose: onClose,
+      targetProps: targetProps,
+      isMobile: isMobile
+    })]
+  });
+};
+const computedCommonProps = _ref => {
+  var _props$width;
+  let {
+      children,
+      footer,
+      footerButtons,
+      className,
+      size = 'default',
+      title,
+      onClose,
+      onConfirm,
+      confirmText,
+      onCancel,
+      cancelText,
+      closable,
+      noPadding,
+      bodyScroll = true,
+      isMobile,
+      mobileFullscreen = true,
+      fixedModeClass,
+      wrapClassName,
+      classNames: propsClassNames,
+      styles: propsStyles,
+      style: propsStyle
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  const useMobileLayout = isMobile && mobileFullscreen !== false;
+  const hasFooter = !(footer === null && footerButtons === undefined);
+  const sizeVars = sizeStyleVars(size, hasFooter);
+  const {
+      width
+    } = sizeVars,
+    cssVars = _objectWithoutPropertiesLoose(sizeVars, _excluded2);
+  const runChildren = options => {
+    const opts = Object.assign({}, options, {
+      close: onClose
+    });
+    return /*#__PURE__*/jsx(ModalOuter, {
+      title: renderWithOptions(title, opts),
+      closable: closable,
+      onClose: onClose,
+      onConfirm: onConfirm,
+      confirmText: confirmText,
+      onCancel: onCancel,
+      cancelText: cancelText,
+      footerButtons: renderWithOptions(footerButtons, opts),
+      noPadding: noPadding,
+      footer: renderWithOptions(footer, opts),
+      targetProps: opts,
+      isMobile: useMobileLayout,
+      bodyScroll: bodyScroll,
+      children: renderWithOptions(children, opts)
+    });
+  };
+  return _extends({}, props, {
+    icon: null,
+    centered: !useMobileLayout,
+    width: (_props$width = props.width) != null ? _props$width : useMobileLayout ? 'var(--kne-modal-viewport-width, 100vw)' : width,
+    wrapClassName: classnames(wrapClassName, style['modal-wrap'], useMobileLayout ? style['modal-wrap-fullscreen'] : style['modal-wrap-centered'], useMobileLayout && fixedModeClass),
+    classNames: Object.assign({}, propsClassNames, {
+      mask: classnames(propsClassNames == null ? void 0 : propsClassNames.mask, useMobileLayout && style['modal-mask-fullscreen'], useMobileLayout && fixedModeClass),
+      container: classnames(style['modal-container'], useMobileLayout && style['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.container),
+      body: classnames(style['modal-antd-body'], useMobileLayout && style['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.body),
+      footer: classnames(style['modal-antd-footer'], propsClassNames == null ? void 0 : propsClassNames.footer),
+      header: classnames(style['modal-antd-header'], propsClassNames == null ? void 0 : propsClassNames.header),
+      content: classnames(style['modal-container'], useMobileLayout && style['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.content)
+    }),
+    title: null,
+    maskClosable: Object.prototype.hasOwnProperty.call(props, 'maskClosable') ? props.maskClosable : false,
+    destroyOnHidden: true,
+    footer: null,
+    closable: false,
+    onCancel: onClose,
+    className: classnames(className, style['modal'], style[size], {
+      [style['is-mobile']]: useMobileLayout
+    }),
+    style: Object.assign({}, cssVars, propsStyle, useMobileLayout ? {
+      '--kne-modal-viewport-gutter': '0px',
+      maxWidth: '100%',
+      width: '100%',
+      height: 'var(--kne-modal-viewport-height, 100vh)',
+      maxHeight: 'var(--kne-modal-viewport-height, 100vh)',
+      top: 0,
+      margin: 0,
+      paddingBottom: 0
+    } : null),
+    styles: _extends({}, propsStyles, {
+      container: _extends({
+        padding: 0
+      }, propsStyles == null ? void 0 : propsStyles.container, useMobileLayout ? {
+        borderRadius: 0,
+        height: '100%',
+        maxHeight: '100%',
+        overflow: 'hidden'
+      } : null),
+      content: _extends({
+        padding: 0
+      }, propsStyles == null ? void 0 : propsStyles.content),
+      body: _extends({
+        padding: 0
+      }, propsStyles == null ? void 0 : propsStyles.body, useMobileLayout ? {
+        height: '100%',
+        maxHeight: '100%',
+        overflow: 'hidden'
+      } : null)
+    }),
+    children: /*#__PURE__*/jsx(ModalLocaleRoot, {
+      children: runChildren({})
+    })
+  });
+};
+const Modal = withLocale(_ref2 => {
+  let {
+      size = 'default',
+      getContainer,
+      open,
+      mobileFullscreen = true,
+      bodyScroll = true
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+  const hostRef = useRef(null);
+  const {
+    isMobile,
+    fixedModeClass,
+    getPopupContainer,
+    anchorRef
+  } = useMobilePopupMount(_extends({}, viewportPopupMountOptions, {
+    getPopupContainer: wrapCustomGetContainer(getContainer)
+  }));
+  const getScrollElement = useScrollElement();
+  useLockParentScroll(!!open, getScrollElement);
+  const setAnchorRef = node => {
+    hostRef.current = node;
+    anchorRef(node);
+  };
+  const getModalContainer = resolveModalGetContainer({
+    customGetContainer: getContainer,
+    getPopupContainer,
+    getHostNode: () => hostRef.current
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("span", {
+      ref: setAnchorRef,
+      className: style['modal-host'],
+      "aria-hidden": "true"
+    }), /*#__PURE__*/jsx(Modal$1, _extends({}, computedCommonProps(Object.assign({}, props, {
+      size,
+      isMobile,
+      open,
+      fixedModeClass,
+      mobileFullscreen,
+      bodyScroll
+    })), {
+      open: open,
+      getContainer: getModalContainer
+    }))]
+  });
+});
+const useModal = () => {
+  const {
+    modal
+  } = App.useApp();
+  const {
+    resolveMount,
+    getPopupContainer
+  } = useMobilePopupMount(viewportPopupMountOptions);
+  const getScrollElement = useScrollElement();
+  return props => {
+    const anchor = typeof document !== 'undefined' ? document.activeElement : null;
+    const {
+      isMobile,
+      fixedModeClass
+    } = resolveMount(anchor);
+    const unlock = lockParentScroll(getScrollElement);
+    const api = {};
+    const {
+        afterClose: userAfterClose,
+        getContainer: customGetContainer
+      } = props,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded4);
+    const _computedCommonProps = computedCommonProps(_extends({
+        onClose: () => api.close(),
+        isMobile,
+        fixedModeClass,
+        afterClose: (...args) => {
+          unlock();
+          userAfterClose && userAfterClose(...args);
+        }
+      }, restProps)),
+      {
+        children,
+        getContainer,
+        afterClose
+      } = _computedCommonProps,
+      otherProps = _objectWithoutPropertiesLoose(_computedCommonProps, _excluded5);
+    const {
+      destroy
+    } = modal.info(_extends({}, otherProps, {
+      afterClose,
+      content: children,
+      getContainer: resolveModalGetContainer({
+        customGetContainer: customGetContainer != null ? customGetContainer : getContainer,
+        getPopupContainer,
+        getHostNode: () => anchor
+      })
+    }));
+    api.close = destroy;
+    return api;
+  };
+};
+
+const _excluded$2 = ["className", "inset", "children"];
+const ModalScrollRegion = _ref => {
+  let {
+      className,
+      inset = false,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return /*#__PURE__*/jsx(SimpleBar, _extends({
+    className: classnames(styles['modal-scroll-region'], 'modal-scroll-region', inset && styles['is-inset'], className)
+  }, props, {
+    children: /*#__PURE__*/jsx("div", {
+      className: styles['modal-scroll-region-inner'],
+      children: children
+    })
+  }));
+};
+
+const _excluded$1 = ["className", "destroyOnHidden"];
+const ModalTabsLayout = _ref => {
+  let {
+      className,
+      destroyOnHidden = true
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return /*#__PURE__*/jsx(Tabs, _extends({
+    className: classnames(styles['modal-tabs-layout'], className),
+    destroyOnHidden: destroyOnHidden
+  }, props));
+};
+
+const _excluded = ["widths", "className", "children"];
+const resolveColStyle = width => {
+  if (width == null || width === '1fr') {
+    return {
+      flex: '1 1 0%',
+      minWidth: 0
+    };
+  }
+  return {
+    flex: 'none',
+    width,
+    minWidth: 0
+  };
+};
+const ModalColumnsLayout = _ref => {
+  let {
+      widths,
+      className,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const cols = Children.toArray(children);
+  return /*#__PURE__*/jsx("div", _extends({
+    className: classnames(styles['modal-columns-layout'], className)
+  }, props, {
+    children: cols.map((child, index) => /*#__PURE__*/jsx("div", {
+      className: styles['modal-columns-layout__col'],
+      style: widths ? resolveColStyle(widths[index]) : undefined,
+      children: child
+    }, index))
+  }));
+};
+
+const createModalRender = modalDefaults => hostProps => /*#__PURE__*/jsx(Modal, _extends({}, modalDefaults, hostProps));
+
+const modalClassNames = {
+  stepsForm: 'react-modal-steps-form',
+  splitter: 'react-modal-splitter'
+};
+
+export { ModalColumnsLayout, ModalScrollRegion, ModalTabsLayout, createModalRender, Modal as default, modalClassNames, useModal };
+//# sourceMappingURL=index.modern.js.map