react-native-system-ui 1.0.2 → 1.0.3

package/dist/es/components/dialog/Dialog.js

@@ -1,407 +1 @@
-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); }
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { ActivityIndicator, Animated, Easing, Pressable, StyleSheet, View } from 'react-native';
-import { useLocale } from '../config-provider/useLocale';
-import { nativeDriverEnabled } from '../../platform';
-import { useReducedMotion } from '../../hooks/animation';
-import { createHairlineView } from '../../utils/hairline';
-import { isPromiseLike } from '../../utils/promise';
-import { isNumber, isValidNode } from '../../utils/validate';
-import { renderTextOrNode } from '../../utils';
-import { Close } from 'react-native-system-icon';
-import Button from '../button';
-import Popup from '../popup';
-import { useDialogTokens } from './tokens';
-const ActionButton = props => {
-  const {
-    text,
-    color,
-    tokens,
-    dividerPosition = 'none',
-    loading,
-    disabled,
-    onPress
-  } = props;
-  const txtColor = color ?? tokens.colors.confirm;
-  const divStyle = dividerPosition === 'none' ? null : [S.btnDiv, {
-    width: 0
-  }, createHairlineView({
-    position: dividerPosition,
-    color: tokens.colors.divider,
-    top: 0,
-    bottom: 0,
-    [dividerPosition]: 0
-  })];
-  return /*#__PURE__*/React.createElement(Pressable, {
-    accessibilityRole: "button",
-    disabled: disabled || loading,
-    style: ({
-      pressed
-    }) => [S.btn, {
-      height: tokens.sizes.actionHeight,
-      opacity: pressed && !disabled && !loading ? 0.8 : 1
-    }],
-    onPress: disabled || loading ? undefined : onPress
-  }, divStyle && /*#__PURE__*/React.createElement(View, {
-    style: divStyle,
-    pointerEvents: "none"
-  }), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: "small",
-    color: txtColor
-  }) : renderTextOrNode(text ?? '', {
-    color: txtColor,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.actionSize,
-    fontWeight: tokens.typography.actionWeight
-  }));
-};
-const DialogImpl = props => {
-  const locale = useLocale();
-  const {
-    visible,
-    title,
-    message,
-    messageAlign = 'center',
-    theme = 'default',
-    width,
-    closeable = false,
-    closeIcon,
-    overlay = true,
-    overlayStyle,
-    overlayTestID = 'dialog-overlay',
-    closeOnBackPress = false,
-    closeOnPopstate = true,
-    closeOnOverlayPress = false,
-    closeOnClickOverlay = false,
-    onClickOverlay,
-    onClickCloseIcon,
-    beforeClose,
-    showCancelButton = false,
-    showConfirmButton = true,
-    cancelButtonText,
-    cancelButtonColor,
-    cancelProps,
-    confirmButtonText,
-    confirmButtonColor,
-    confirmProps,
-    footer,
-    contentStyle,
-    titleStyle,
-    messageStyle,
-    tokensOverride,
-    style,
-    children,
-    onCancel,
-    onConfirm,
-    onClose,
-    onClosed,
-    ...rest
-  } = props;
-  const tokens = useDialogTokens(tokensOverride);
-  const reducedMotion = useReducedMotion();
-  const hTitle = isValidNode(title);
-  const hMsg = isValidNode(message);
-  const hChildren = isValidNode(children);
-  const hContent = hMsg || hChildren;
-  const hFooterActions = showCancelButton || showConfirmButton;
-  const isRound = theme === 'round-button';
-  const cancelLoad = cancelProps?.loading;
-  const confirmLoad = confirmProps?.loading;
-  const cancelTxt = cancelButtonText ?? locale.cancel;
-  const confirmTxt = confirmButtonText ?? locale.confirm;
-  const seqRef = useRef(0);
-  const beforeCloseRef = useRef(beforeClose);
-  beforeCloseRef.current = beforeClose;
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  const onCancelRef = useRef(onCancel);
-  onCancelRef.current = onCancel;
-  const onConfirmRef = useRef(onConfirm);
-  onConfirmRef.current = onConfirm;
-  const onClickCloseIconRef = useRef(onClickCloseIcon);
-  onClickCloseIconRef.current = onClickCloseIcon;
-  const cancelLoadRef = useRef(cancelLoad);
-  cancelLoadRef.current = cancelLoad;
-  const confirmLoadRef = useRef(confirmLoad);
-  confirmLoadRef.current = confirmLoad;
-  const run = useCallback((action, handler) => {
-    seqRef.current += 1;
-    const seq = seqRef.current;
-    const bc = beforeCloseRef.current;
-    if (!bc) {
-      handler?.();
-      return;
-    }
-    ;
-    let result;
-    try {
-      result = bc(action);
-    } catch {
-      handler?.();
-      return;
-    }
-    ;
-    if (result === false) return;
-    if (isPromiseLike(result)) {
-      void result.then(resolved => {
-        if (resolved === false) return;
-        if (seqRef.current !== seq) return;
-        handler?.();
-      }).catch(() => {
-        if (seqRef.current !== seq) return;
-        handler?.();
-      });
-      return;
-    }
-    ;
-    handler?.();
-  }, []);
-  const handleCloseIcon = useCallback(() => {
-    onClickCloseIconRef.current?.();
-    run('close', () => onCloseRef.current?.());
-  }, [run]);
-  const handleCancel = useCallback(() => {
-    if (cancelLoadRef.current) return;
-    run('cancel', () => onCancelRef.current?.());
-  }, [run]);
-  const handleConfirm = useCallback(() => {
-    if (confirmLoadRef.current) return;
-    run('confirm', () => onConfirmRef.current?.());
-  }, [run]);
-  const scaleAnim = useRef(new Animated.Value(0.7)).current;
-  const scaleRef = useRef(null);
-  useEffect(() => {
-    scaleRef.current?.stop();
-    scaleAnim.setValue(visible ? 0.7 : 1);
-    const anim = Animated.timing(scaleAnim, {
-      toValue: visible ? 1 : 0.9,
-      duration: reducedMotion ? 0 : 300,
-      easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
-      useNativeDriver: nativeDriverEnabled,
-      isInteraction: false
-    });
-    scaleRef.current = anim;
-    anim.start();
-  }, [scaleAnim, visible, reducedMotion]);
-  useEffect(() => () => {
-    scaleRef.current?.stop();
-  }, []);
-  const widthStyle = useMemo(() => width ? isNumber(width) ? {
-    width
-  } : {
-    width: String(width)
-  } : {
-    width: '90%',
-    maxWidth: tokens.sizes.maxWidth
-  }, [tokens.sizes.maxWidth, width]);
-  const titleWrapStyle = useMemo(() => hTitle ? [S.titleWrap, {
-    paddingTop: hContent ? tokens.spacing.titlePaddingTop : tokens.spacing.titleIsolatedPadding,
-    paddingBottom: hContent ? 0 : tokens.spacing.titleIsolatedPadding,
-    paddingHorizontal: hContent ? tokens.spacing.paddingHorizontal : 0,
-    marginBottom: hContent ? tokens.spacing.titleGap : 0
-  }] : null, [hContent, hTitle, tokens.spacing.paddingHorizontal, tokens.spacing.titleGap, tokens.spacing.titleIsolatedPadding, tokens.spacing.titlePaddingTop]);
-  const titleTxtStyle = useMemo(() => hTitle ? [S.title, {
-    color: tokens.colors.title,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.titleSize,
-    lineHeight: tokens.typography.titleLineHeight,
-    fontWeight: tokens.typography.titleWeight
-  }, titleStyle] : null, [hTitle, titleStyle, tokens.colors.title, tokens.typography.fontFamily, tokens.typography.titleLineHeight, tokens.typography.titleSize, tokens.typography.titleWeight]);
-  const msgTxtStyle = useMemo(() => [S.msg, {
-    color: isRound ? tokens.colors.title : tokens.colors.message,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.messageSize,
-    lineHeight: tokens.typography.messageLineHeight,
-    textAlign: messageAlign
-  }, messageStyle], [isRound, messageAlign, messageStyle, tokens.colors.message, tokens.colors.title, tokens.typography.fontFamily, tokens.typography.messageLineHeight, tokens.typography.messageSize]);
-  const msgContentStyle = useMemo(() => !hChildren ? {
-    alignItems: messageAlign === 'center' ? 'center' : messageAlign === 'left' ? 'flex-start' : 'flex-end'
-  } : null, [hChildren, messageAlign]);
-  const msgWrapStyle = useMemo(() => [S.msgWrap, {
-    paddingTop: hTitle ? tokens.spacing.messagePaddingTop : tokens.spacing.messagePadding,
-    paddingBottom: isRound ? tokens.spacing.roundFooterPadding : tokens.spacing.messagePadding,
-    paddingHorizontal: tokens.spacing.messagePaddingHorizontal
-  }], [hTitle, isRound, tokens.spacing.messagePadding, tokens.spacing.messagePaddingHorizontal, tokens.spacing.messagePaddingTop, tokens.spacing.roundFooterPadding]);
-  const footerBorderStyle = useMemo(() => [S.footerBorder, createHairlineView({
-    position: 'top',
-    color: tokens.colors.divider,
-    left: 0,
-    right: 0,
-    top: 0
-  })], [tokens.colors.divider]);
-  const mergeOverlay = closeOnOverlayPress || closeOnClickOverlay;
-  const animStyle = useMemo(() => ({
-    transform: [{
-      scale: scaleAnim
-    }]
-  }), [scaleAnim]);
-  const roundFooterStyle = useMemo(() => [S.roundFooter, {
-    paddingTop: tokens.spacing.messagePaddingTop,
-    paddingHorizontal: tokens.spacing.messagePaddingHorizontal,
-    paddingBottom: tokens.spacing.roundFooterPadding
-  }], [tokens.spacing.messagePaddingHorizontal, tokens.spacing.messagePaddingTop, tokens.spacing.roundFooterPadding]);
-  const popupBc = useCallback(() => {
-    const bc = beforeCloseRef.current;
-    if (!bc) return true;
-    try {
-      return bc('close');
-    } catch {
-      return true;
-    }
-  }, []);
-  const roundFooterNode = useMemo(() => hFooterActions && /*#__PURE__*/React.createElement(View, {
-    style: roundFooterStyle
-  }, showCancelButton && /*#__PURE__*/React.createElement(View, {
-    style: [S.roundBtnWrap, showConfirmButton && {
-      marginRight: tokens.spacing.roundFooterGap
-    }]
-  }, /*#__PURE__*/React.createElement(Button, {
-    block: true,
-    round: true,
-    type: "warning",
-    text: cancelTxt,
-    color: cancelButtonColor,
-    loading: cancelLoad,
-    disabled: cancelProps?.disabled,
-    onPress: handleCancel,
-    style: {
-      minHeight: tokens.sizes.roundButtonHeight
-    }
-  })), showConfirmButton && /*#__PURE__*/React.createElement(View, {
-    style: [S.roundBtnWrap, showCancelButton && {
-      marginLeft: tokens.spacing.roundFooterGap
-    }]
-  }, /*#__PURE__*/React.createElement(Button, {
-    block: true,
-    round: true,
-    type: "danger",
-    text: confirmTxt,
-    color: confirmButtonColor,
-    loading: confirmLoad,
-    disabled: confirmProps?.disabled,
-    onPress: handleConfirm,
-    style: {
-      minHeight: tokens.sizes.roundButtonHeight
-    }
-  }))), [cancelButtonColor, cancelLoad, cancelProps?.disabled, cancelTxt, confirmButtonColor, confirmLoad, confirmProps?.disabled, confirmTxt, handleCancel, handleConfirm, hFooterActions, roundFooterStyle, showCancelButton, showConfirmButton, tokens.sizes.roundButtonHeight, tokens.spacing.roundFooterGap]);
-  const defaultFooterNode = useMemo(() => hFooterActions && /*#__PURE__*/React.createElement(View, {
-    style: S.footer
-  }, /*#__PURE__*/React.createElement(View, {
-    style: footerBorderStyle,
-    pointerEvents: "none"
-  }), showCancelButton && /*#__PURE__*/React.createElement(ActionButton, {
-    tokens: tokens,
-    text: cancelTxt,
-    color: cancelButtonColor ?? tokens.colors.cancel,
-    dividerPosition: "none",
-    loading: cancelLoad,
-    disabled: cancelProps?.disabled,
-    onPress: handleCancel
-  }), showConfirmButton && /*#__PURE__*/React.createElement(ActionButton, {
-    tokens: tokens,
-    text: confirmTxt,
-    color: confirmButtonColor ?? tokens.colors.confirm,
-    dividerPosition: showCancelButton ? 'left' : 'none',
-    loading: confirmLoad,
-    disabled: confirmProps?.disabled,
-    onPress: handleConfirm
-  })), [cancelButtonColor, cancelLoad, cancelProps?.disabled, cancelTxt, confirmButtonColor, confirmLoad, confirmProps?.disabled, confirmTxt, footerBorderStyle, handleCancel, handleConfirm, hFooterActions, showCancelButton, showConfirmButton, tokens]);
-  const footerNode = useMemo(() => footer ?? (isRound ? roundFooterNode : defaultFooterNode), [defaultFooterNode, footer, isRound, roundFooterNode]);
-  const popupStyle = useMemo(() => [{
-    backgroundColor: tokens.colors.background,
-    borderRadius: tokens.sizes.borderRadius,
-    padding: 0
-  }, widthStyle, style], [style, tokens.colors.background, tokens.sizes.borderRadius, widthStyle]);
-  return /*#__PURE__*/React.createElement(Popup, _extends({
-    visible: visible,
-    placement: "center",
-    round: true,
-    overlay: overlay,
-    overlayStyle: overlayStyle,
-    overlayTestID: overlayTestID,
-    closeOnBackPress: closeOnBackPress,
-    closeOnPopstate: closeOnPopstate,
-    closeOnClickOverlay: mergeOverlay,
-    onClickOverlay: onClickOverlay,
-    beforeClose: popupBc,
-    onClose: onClose,
-    onClosed: onClosed,
-    contentAnimationStyle: animStyle,
-    style: popupStyle,
-    accessibilityRole: 'alertdialog',
-    accessibilityLabel: typeof title === 'string' ? title : undefined
-  }, rest), closeable && /*#__PURE__*/React.createElement(Pressable, {
-    style: [S.closeIcon, {
-      top: tokens.spacing.paddingTop / 2,
-      right: tokens.spacing.paddingHorizontal / 2,
-      padding: tokens.spacing.closeIconPadding
-    }],
-    hitSlop: {
-      top: 8,
-      bottom: 8,
-      left: 8,
-      right: 8
-    },
-    onPress: handleCloseIcon
-  }, closeIcon ?? /*#__PURE__*/React.createElement(Close, {
-    size: tokens.sizes.closeSize,
-    fill: tokens.colors.closeIcon,
-    color: tokens.colors.closeIcon
-  })), hTitle && /*#__PURE__*/React.createElement(View, {
-    style: titleWrapStyle
-  }, renderTextOrNode(title, titleTxtStyle)), hContent && /*#__PURE__*/React.createElement(View, {
-    style: [S.content, msgContentStyle, contentStyle]
-  }, hChildren ? children : /*#__PURE__*/React.createElement(View, {
-    style: msgWrapStyle
-  }, renderTextOrNode(message, msgTxtStyle))), footerNode);
-};
-const S = StyleSheet.create({
-  titleWrap: {
-    alignItems: 'center'
-  },
-  title: {
-    textAlign: 'center'
-  },
-  content: {
-    width: '100%'
-  },
-  msg: {
-    textAlign: 'center'
-  },
-  footer: {
-    flexDirection: 'row',
-    position: 'relative'
-  },
-  footerBorder: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: 0
-  },
-  btn: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  btnDiv: {
-    position: 'absolute',
-    pointerEvents: 'none'
-  },
-  msgWrap: {
-    width: '100%'
-  },
-  roundFooter: {
-    width: '100%',
-    flexDirection: 'row'
-  },
-  roundBtnWrap: {
-    flex: 1
-  },
-  closeIcon: {
-    position: 'absolute',
-    zIndex: 1
-  }
-});
-export const Dialog = /*#__PURE__*/React.memo(DialogImpl);
-export default Dialog;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useMemo,useRef}from"react";import{ActivityIndicator,Animated,Easing,Pressable,StyleSheet,View}from"react-native";import{useLocale}from"../config-provider/useLocale";import{nativeDriverEnabled}from"../../platform";import{useReducedMotion}from"../../hooks/animation";import{createHairlineView}from"../../utils/hairline";import{isPromiseLike}from"../../utils/promise";import{isNumber,isValidNode}from"../../utils/validate";import{renderTextOrNode}from"../../utils";import{Close}from"react-native-system-icon";import Button from"../button";import Popup from"../popup";import{useDialogTokens}from"./tokens";const ActionButton=e=>{const{text:t,color:o,tokens:n,dividerPosition:i="none",loading:r,disabled:a,onPress:s}=e,l=o??n.colors.confirm,c="none"===i?null:[S.btnDiv,{width:0},createHairlineView({position:i,color:n.colors.divider,top:0,bottom:0,[i]:0})];return React.createElement(Pressable,{accessibilityRole:"button",disabled:a||r,style:({pressed:e})=>[S.btn,{height:n.sizes.actionHeight,opacity:!e||a||r?1:.8}],onPress:a||r?void 0:s},c&&React.createElement(View,{style:c,pointerEvents:"none"}),r?React.createElement(ActivityIndicator,{size:"small",color:l}):renderTextOrNode(t??"",{color:l,fontFamily:n.typography.fontFamily,fontSize:n.typography.actionSize,fontWeight:n.typography.actionWeight}))},DialogImpl=e=>{const t=useLocale(),{visible:o,title:n,message:i,messageAlign:r="center",theme:a="default",width:s,closeable:l=!1,closeIcon:c,overlay:d=!0,overlayStyle:g,overlayTestID:p="dialog-overlay",closeOnBackPress:m=!1,closeOnPopstate:u=!0,closeOnOverlayPress:f=!1,closeOnClickOverlay:y=!1,onClickOverlay:b,onClickCloseIcon:h,beforeClose:C,showCancelButton:v=!1,showConfirmButton:P=!0,cancelButtonText:x,cancelButtonColor:w,cancelProps:E,confirmButtonText:R,confirmButtonColor:k,confirmProps:B,footer:z,contentStyle:I,titleStyle:O,messageStyle:H,tokensOverride:V,style:D,children:T,onCancel:L,onConfirm:A,onClose:F,onClosed:W,...N}=e,M=useDialogTokens(V),q=useReducedMotion(),j=isValidNode(n),G=isValidNode(T),_=isValidNode(i)||G,J=v||P,K="round-button"===a,Q=E?.loading,U=B?.loading,X=x??t.cancel,Y=R??t.confirm,Z=useRef({seq:0,beforeClose:C,onClose:F,onCancel:L,onConfirm:A,onClickCloseIcon:h,cancelLoad:Q,confirmLoad:U});Object.assign(Z.current,{beforeClose:C,onClose:F,onCancel:L,onConfirm:A,onClickCloseIcon:h,cancelLoad:Q,confirmLoad:U});const $=useCallback((e,t)=>{const o=Z.current;o.seq+=1;const n=o.seq,i=o.beforeClose;if(!i)return void t?.();let r;try{r=i(e)}catch{return void t?.()}!1!==r&&(isPromiseLike(r)?r.then(e=>{!1!==e&&Z.current.seq===n&&t?.()}).catch(()=>{Z.current.seq===n&&t?.()}):t?.())},[]),ee=useCallback(()=>{Z.current.onClickCloseIcon?.(),$("close",()=>Z.current.onClose?.())},[$]),te=useCallback(()=>{Z.current.cancelLoad||$("cancel",()=>Z.current.onCancel?.())},[$]),oe=useCallback(()=>{Z.current.confirmLoad||$("confirm",()=>Z.current.onConfirm?.())},[$]),ne=useRef(new Animated.Value(.7)).current,ie=useRef(null);useEffect(()=>{ie.current?.stop(),ne.setValue(o?.7:1);const e=Animated.timing(ne,{toValue:o?1:.9,duration:q?0:300,easing:o?Easing.out(Easing.cubic):Easing.in(Easing.cubic),useNativeDriver:nativeDriverEnabled,isInteraction:!1});ie.current=e,e.start()},[ne,o,q]),useEffect(()=>()=>{ie.current?.stop()},[]);const re={transform:[{scale:ne}]},ae=useMemo(()=>j?{wrap:[S.titleWrap,{paddingTop:_?M.spacing.titlePaddingTop:M.spacing.titleIsolatedPadding,paddingBottom:_?0:M.spacing.titleIsolatedPadding,paddingHorizontal:_?M.spacing.paddingHorizontal:0,marginBottom:_?M.spacing.titleGap:0}],text:[S.title,{color:M.colors.title,fontFamily:M.typography.fontFamily,fontSize:M.typography.titleSize,lineHeight:M.typography.titleLineHeight,fontWeight:M.typography.titleWeight},O]}:null,[j,_,O,M]),se=useMemo(()=>({text:[S.msg,{color:K?M.colors.title:M.colors.message,fontFamily:M.typography.fontFamily,fontSize:M.typography.messageSize,lineHeight:M.typography.messageLineHeight,textAlign:r},H],content:G?null:{alignItems:"center"===r?"center":"left"===r?"flex-start":"flex-end"},wrap:[S.msgWrap,{paddingTop:j?M.spacing.messagePaddingTop:M.spacing.messagePadding,paddingBottom:K?M.spacing.roundFooterPadding:M.spacing.messagePadding,paddingHorizontal:M.spacing.messagePaddingHorizontal}]}),[K,r,H,G,j,M]),le=useMemo(()=>({border:[S.footerBorder,createHairlineView({position:"top",color:M.colors.divider,left:0,right:0,top:0})],round:[S.roundFooter,{paddingTop:M.spacing.messagePaddingTop,paddingHorizontal:M.spacing.messagePaddingHorizontal,paddingBottom:M.spacing.roundFooterPadding}]}),[M]),ce=useMemo(()=>{const e=s?isNumber(s)?{width:s}:{width:String(s)}:{width:"90%",maxWidth:M.sizes.maxWidth};return[{backgroundColor:M.colors.background,borderRadius:M.sizes.borderRadius,padding:0},e,D]},[s,D,M]),de=useCallback(()=>{const e=Z.current.beforeClose;if(!e)return!0;try{return e("close")}catch{return!0}},[]),ge=useMemo(()=>J&&React.createElement(View,{style:le.round},v&&React.createElement(View,{style:[S.roundBtnWrap,P&&{marginRight:M.spacing.roundFooterGap}]},React.createElement(Button,{block:!0,round:!0,type:"warning",text:X,color:w,loading:Q,disabled:E?.disabled,onPress:te,style:{minHeight:M.sizes.roundButtonHeight}})),P&&React.createElement(View,{style:[S.roundBtnWrap,v&&{marginLeft:M.spacing.roundFooterGap}]},React.createElement(Button,{block:!0,round:!0,type:"danger",text:Y,color:k,loading:U,disabled:B?.disabled,onPress:oe,style:{minHeight:M.sizes.roundButtonHeight}}))),[w,Q,E?.disabled,X,k,U,B?.disabled,Y,te,oe,J,le.round,v,P,M.sizes.roundButtonHeight,M.spacing.roundFooterGap]),pe=useMemo(()=>J&&React.createElement(View,{style:S.footer},React.createElement(View,{style:le.border,pointerEvents:"none"}),v&&React.createElement(ActionButton,{tokens:M,text:X,color:w??M.colors.cancel,dividerPosition:"none",loading:Q,disabled:E?.disabled,onPress:te}),P&&React.createElement(ActionButton,{tokens:M,text:Y,color:k??M.colors.confirm,dividerPosition:v?"left":"none",loading:U,disabled:B?.disabled,onPress:oe})),[w,Q,E?.disabled,X,k,U,B?.disabled,Y,le.border,te,oe,J,v,P,M]),me=z??(K?ge:pe);return React.createElement(Popup,_extends({visible:o,placement:"center",round:!0,overlay:d,overlayStyle:g,overlayTestID:p,closeOnBackPress:m,closeOnPopstate:u,closeOnClickOverlay:f||y,onClickOverlay:b,beforeClose:de,onClose:F,onClosed:W,contentAnimationStyle:re,style:ce,accessibilityRole:"alertdialog",accessibilityLabel:"string"==typeof n?n:void 0},N),l&&React.createElement(Pressable,{style:[S.closeIcon,{top:M.spacing.paddingTop/2,right:M.spacing.paddingHorizontal/2,padding:M.spacing.closeIconPadding}],hitSlop:{top:8,bottom:8,left:8,right:8},onPress:ee},c??React.createElement(Close,{size:M.sizes.closeSize,fill:M.colors.closeIcon,color:M.colors.closeIcon})),ae&&React.createElement(View,{style:ae.wrap},renderTextOrNode(n,ae.text)),_&&React.createElement(View,{style:[S.content,se.content,I]},G?T:React.createElement(View,{style:se.wrap},renderTextOrNode(i,se.text))),me)},S=StyleSheet.create({titleWrap:{alignItems:"center"},title:{textAlign:"center"},content:{width:"100%"},msg:{textAlign:"center"},footer:{flexDirection:"row",position:"relative"},footerBorder:{position:"absolute",top:0,left:0,right:0,height:0},btn:{flex:1,alignItems:"center",justifyContent:"center"},btnDiv:{position:"absolute",pointerEvents:"none"},msgWrap:{width:"100%"},roundFooter:{width:"100%",flexDirection:"row"},roundBtnWrap:{flex:1},closeIcon:{position:"absolute",zIndex:1}});export const Dialog=React.memo(DialogImpl);Dialog.displayName="Dialog";export default Dialog;

package/dist/es/components/dialog/imperative.js

@@ -1,185 +1 @@
-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); }
-import React, { useCallback, useEffect, useState } from 'react';
-import { Portal } from '../portal/Portal';
-import { deepMerge, isString, isUndefined } from '../../utils';
-import Dialog from './Dialog';
-const runHook = async handler => {
-  if (!handler) return true;
-  try {
-    const result = await handler();
-    return result !== false;
-  } catch (error) {
-    console.error(error);
-    return true;
-  }
-};
-const dialogRegistry = new Map();
-const defaultOptionsStore = {
-  default: {},
-  show: {},
-  alert: {},
-  confirm: {}
-};
-const registerEntry = (key, options, meta) => {
-  dialogRegistry.set(key, {
-    key,
-    options,
-    meta
-  });
-};
-const attachCloser = (key, close) => {
-  const entry = dialogRegistry.get(key);
-  if (entry) entry.close = close;
-};
-const unregisterEntry = key => {
-  dialogRegistry.delete(key);
-};
-const requestClose = key => {
-  const entry = dialogRegistry.get(key);
-  if (!entry) {
-    Portal.remove(key);
-    return;
-  }
-  ;
-  if (entry.close) {
-    entry.close();
-    return;
-  }
-  ;
-  Portal.remove(key);
-  unregisterEntry(key);
-};
-const DialogPortalInstance = ({
-  options,
-  meta,
-  portalKeyRef
-}) => {
-  const [visible, setVisible] = useState(true);
-  const close = useCallback(() => {
-    setVisible(false);
-  }, []);
-  useEffect(() => {
-    if (!portalKeyRef.current) return;
-    attachCloser(portalKeyRef.current, close);
-    return () => {
-      const e = dialogRegistry.get(portalKeyRef.current ?? -1);
-      if (e && e.close === close) e.close = undefined;
-    };
-  }, [close, portalKeyRef]);
-  useEffect(() => () => {
-    if (portalKeyRef.current) unregisterEntry(portalKeyRef.current);
-  }, [portalKeyRef]);
-  const handleCancel = useCallback(async () => {
-    if (!(await runHook(() => options.beforeClose?.('cancel')))) return;
-    if (!(await runHook(options.onCancel))) return;
-    if (meta.mode === 'confirm') meta.resolve?.(false);
-    close();
-  }, [close, meta, options.beforeClose, options.onCancel]);
-  const handleConfirm = useCallback(async () => {
-    if (!(await runHook(() => options.beforeClose?.('confirm')))) return;
-    if (!(await runHook(options.onConfirm))) return;
-    if (meta.mode === 'alert' || meta.mode === 'confirm') meta.resolve?.(true);
-    close();
-  }, [close, meta, options.beforeClose, options.onConfirm]);
-  const handleClose = useCallback(async () => {
-    if (!(await runHook(() => options.beforeClose?.('close')))) return;
-    if (!(await runHook(options.onClose))) return;
-    if (meta.mode === 'confirm') meta.resolve?.(false);
-    close();
-  }, [close, meta, options.beforeClose, options.onClose]);
-  const handleClosed = useCallback(() => {
-    options.onClosed?.();
-    if (portalKeyRef.current) {
-      Portal.remove(portalKeyRef.current);
-      unregisterEntry(portalKeyRef.current);
-    }
-  }, [options, portalKeyRef]);
-  return /*#__PURE__*/React.createElement(Dialog, _extends({}, options, {
-    visible: visible,
-    onCancel: options.showCancelButton ? handleCancel : options.onCancel,
-    onConfirm: handleConfirm,
-    onClose: handleClose,
-    onClosed: handleClosed
-  }));
-};
-const mountImperativeDialog = (options, meta) => {
-  const portalKeyRef = {
-    current: 0
-  };
-  const element = /*#__PURE__*/React.createElement(DialogPortalInstance, {
-    options: options,
-    meta: meta,
-    portalKeyRef: portalKeyRef
-  });
-  const key = Portal.add(element);
-  portalKeyRef.current = key;
-  registerEntry(key, options, meta);
-  return () => requestClose(key);
-};
-const mergeWithDefaults = (mode, options = {}) => deepMerge(deepMerge(defaultOptionsStore.default, defaultOptionsStore[mode]), options);
-const normalizeOptions = (mode, options = {}) => {
-  const merged = mergeWithDefaults(mode, options);
-  const normalized = {
-    ...merged,
-    visible: true
-  };
-  if (isUndefined(normalized.showConfirmButton)) normalized.showConfirmButton = true;
-  return normalized;
-};
-const setDefaultOptions = (targetOrOptions, maybeOptions) => {
-  if (isString(targetOrOptions)) {
-    defaultOptionsStore[targetOrOptions] = deepMerge(defaultOptionsStore[targetOrOptions], maybeOptions ?? {});
-    return;
-  }
-  ;
-  defaultOptionsStore.default = deepMerge(defaultOptionsStore.default, targetOrOptions);
-};
-const resetDefaultOptions = target => {
-  if (target) {
-    defaultOptionsStore[target] = {};
-    return;
-  }
-  ;
-  defaultOptionsStore.default = {};
-  defaultOptionsStore.show = {};
-  defaultOptionsStore.alert = {};
-  defaultOptionsStore.confirm = {};
-};
-export const DialogImperative = {
-  show: options => mountImperativeDialog(normalizeOptions('show', options), {
-    mode: 'show'
-  }),
-  alert: options => new Promise(resolve => {
-    mountImperativeDialog(normalizeOptions('alert', {
-      ...options,
-      showCancelButton: false
-    }), {
-      mode: 'alert',
-      resolve
-    });
-  }),
-  confirm: options => new Promise(resolve => {
-    mountImperativeDialog(normalizeOptions('confirm', {
-      showCancelButton: true,
-      ...options
-    }), {
-      mode: 'confirm',
-      resolve: result => resolve(result === undefined ? true : result)
-    });
-  }),
-  clear: () => {
-    Array.from(dialogRegistry.keys()).forEach(key => {
-      requestClose(key);
-    });
-  },
-  setDefaultOptions,
-  resetDefaultOptions
-};
-export const __DIALOG_STORE__ = {
-  getItems: () => Array.from(dialogRegistry.values()).map(item => ({
-    key: item.key,
-    options: item.options,
-    meta: item.meta
-  })),
-  close: key => requestClose(key)
-};
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useState}from"react";import{Portal}from"../portal/Portal";import{deepMerge,isString,isUndefined}from"../../utils";import Dialog from"./Dialog";const runHook=async e=>{if(!e)return!0;try{return!1!==await e()}catch(e){return console.error(e),!0}},registry=new Map,defaults={default:{},show:{},alert:{},confirm:{}},requestClose=e=>{const t=registry.get(e);t?t.close?t.close():(Portal.remove(e),registry.delete(e)):Portal.remove(e)},DialogPortalInstance=({options:e,meta:t,portalKeyRef:r})=>{const[o,n]=useState(!0),s=useCallback(()=>{n(!1)},[]);useEffect(()=>{if(!r.current)return;const e=registry.get(r.current);return e&&(e.close=s),()=>{const e=registry.get(r.current??-1);e&&e.close===s&&(e.close=void 0)}},[s,r]),useEffect(()=>()=>{r.current&&registry.delete(r.current)},[r]);const a=useCallback(async(r,o)=>{await runHook(()=>e.beforeClose?.(r))&&await runHook(o)&&(("confirm"===r&&"alert"===t.mode||"confirm"===t.mode)&&t.resolve?.("confirm"===r),s())},[s,t,e.beforeClose]),l=useCallback(()=>{e.onClosed?.(),r.current&&(Portal.remove(r.current),registry.delete(r.current))},[e,r]);return React.createElement(Dialog,_extends({},e,{visible:o,onCancel:e.showCancelButton?()=>a("cancel",e.onCancel):e.onCancel,onConfirm:()=>a("confirm",e.onConfirm),onClose:()=>a("close",e.onClose),onClosed:l}))},mount=(e,t)=>{const r={current:0},o=React.createElement(DialogPortalInstance,{options:e,meta:t,portalKeyRef:r}),n=Portal.add(o);return r.current=n,registry.set(n,{key:n,options:e,meta:t}),()=>requestClose(n)},normalize=(e,t={})=>{const r={...deepMerge(deepMerge(defaults.default,defaults[e]),t),visible:!0};return isUndefined(r.showConfirmButton)&&(r.showConfirmButton=!0),r},setDefaultOptions=(e,t)=>{isString(e)?defaults[e]=deepMerge(defaults[e],t??{}):defaults.default=deepMerge(defaults.default,e)},resetDefaultOptions=e=>{e?defaults[e]={}:(defaults.default={},defaults.show={},defaults.alert={},defaults.confirm={})};export const DialogImperative={show:e=>mount(normalize("show",e),{mode:"show"}),alert:e=>new Promise(t=>{mount(normalize("alert",{...e,showCancelButton:!1}),{mode:"alert",resolve:t})}),confirm:e=>new Promise(t=>{mount(normalize("confirm",{showCancelButton:!0,...e}),{mode:"confirm",resolve:e=>t(void 0===e||e)})}),clear:()=>{registry.forEach((e,t)=>requestClose(t))},setDefaultOptions:setDefaultOptions,resetDefaultOptions:resetDefaultOptions};export const __DIALOG_STORE__={getItems:()=>Array.from(registry.values()).map(({key:e,options:t,meta:r})=>({key:e,options:t,meta:r})),close:requestClose};

package/dist/es/components/dialog/index.js

@@ -1,17 +1 @@
-import { Dialog as DialogBase } from './Dialog';
-import { PortalHost } from '../portal';
-import { DialogImperative } from './imperative';
-export const Dialog = Object.assign(DialogBase, {
-  Host: PortalHost,
-  show: DialogImperative.show,
-  alert: DialogImperative.alert,
-  confirm: options => {
-    const promise = DialogImperative.confirm(options).then(result => result === false ? Promise.reject(false) : result);
-    promise.catch(() => {});
-    return promise;
-  },
-  clear: DialogImperative.clear,
-  setDefaultOptions: DialogImperative.setDefaultOptions,
-  resetDefaultOptions: DialogImperative.resetDefaultOptions
-});
-export default Dialog;
+import{Dialog as DialogBase}from"./Dialog";import{PortalHost}from"../portal";import{DialogImperative}from"./imperative";const confirmWrapper=e=>{const t=DialogImperative.confirm(e).then(e=>!1===e?Promise.reject(!1):e);return t.catch(()=>{}),t};export const Dialog=Object.assign(DialogBase,{Host:PortalHost,show:DialogImperative.show,alert:DialogImperative.alert,confirm:confirmWrapper,clear:DialogImperative.clear,setDefaultOptions:DialogImperative.setDefaultOptions,resetDefaultOptions:DialogImperative.resetDefaultOptions});export default Dialog;