react-native-system-ui 0.0.1 → 0.0.3

package/dist/es/components/datetime-picker/DatetimePicker.js

@@ -1,11 +1,9 @@
 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 from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Picker from '../picker';
 import { Popup } from '../popup/Popup';
 import { useControllableValue } from '../../hooks';
-import { clamp } from '../../utils/number';
-import { getMonthEndDay, getTrueValue, isValidDate, padZero, times } from '../../utils/date';
-import { isString } from '../../utils/validate';
+import { clamp, getMonthEndDay, getTrueValue, isValidDate, padZero, times, isString } from '../../utils';
 const currentYear = new Date().getFullYear();
 const DEFAULT_MIN_DATE = new Date(currentYear - 10, 0, 1);
 const DEFAULT_MAX_DATE = new Date(currentYear + 10, 11, 31);
@@ -16,7 +14,17 @@ const DatetimePicker = props => {
     defaultValuePropName: 'defaultPopupVisible',
     trigger: 'onPopupVisibleChange'
   });
-  const close = () => setPopupVisible(false);
+  const close = useCallback(() => setPopupVisible(false), [setPopupVisible]);
+  const renderPopup = useCallback((node, popup, popupProps) => {
+    if (!popup) return node;
+    return /*#__PURE__*/React.createElement(Popup, _extends({
+      visible: popupVisible,
+      onClose: close,
+      placement: "bottom",
+      round: true,
+      safeAreaInsetBottom: true
+    }, popupProps), node);
+  }, [close, popupVisible]);
   if (props.type === 'time') {
     const {
       popup,
@@ -28,25 +36,19 @@ const DatetimePicker = props => {
       onCancel,
       ...pickerProps
     } = props;
-    const handleConfirm = value => {
+    const handleConfirm = useCallback(value => {
       onConfirm?.(value);
       if (popup) close();
-    };
-    const handleCancel = () => {
+    }, [close, onConfirm, popup]);
+    const handleCancel = useCallback(() => {
       onCancel?.();
       if (popup) close();
-    };
+    }, [close, onCancel, popup]);
     const pickerNode = /*#__PURE__*/React.createElement(TimePicker, _extends({}, pickerProps, {
       onConfirm: handleConfirm,
       onCancel: handleCancel
     }));
-    if (!popup) return pickerNode;
-    return /*#__PURE__*/React.createElement(Popup, _extends({
-      visible: popupVisible,
-      onClose: close,
-      placement: "bottom",
-      round: true
-    }, popupProps), pickerNode);
+    return renderPopup(pickerNode, popup, popupProps);
   }
   const {
     popup,
@@ -58,25 +60,19 @@ const DatetimePicker = props => {
     onCancel,
     ...pickerProps
   } = props;
-  const handleConfirm = value => {
+  const handleConfirm = useCallback(value => {
     onConfirm?.(value);
     if (popup) close();
-  };
-  const handleCancel = () => {
+  }, [close, onConfirm, popup]);
+  const handleCancel = useCallback(() => {
     onCancel?.();
     if (popup) close();
-  };
+  }, [close, onCancel, popup]);
   const pickerNode = /*#__PURE__*/React.createElement(DatePicker, _extends({}, pickerProps, {
     onConfirm: handleConfirm,
     onCancel: handleCancel
   }));
-  if (!popup) return pickerNode;
-  return /*#__PURE__*/React.createElement(Popup, _extends({
-    visible: popupVisible,
-    onClose: close,
-    placement: "bottom",
-    round: true
-  }, popupProps), pickerNode);
+  return renderPopup(pickerNode, popup, popupProps);
 };
 const DatePicker = props => {
   const {
@@ -86,13 +82,14 @@ const DatePicker = props => {
     formatter = (_type, value) => value,
     filter,
     columnsOrder,
+    interactionMode = 'freeze',
     value,
     defaultValue,
     onChange,
     onConfirm,
     ...pickerProps
   } = props;
-  const formatValue = dateValue => {
+  const formatValue = useCallback(dateValue => {
     const fallback = isValidDate(dateValue) ? dateValue : new Date();
     const time = clamp(fallback.getTime(), minDate.getTime(), maxDate.getTime());
     const date = new Date(time);
@@ -105,16 +102,16 @@ const DatePicker = props => {
       date.setMinutes(0, 0, 0);
     }
     return date;
-  };
-  const [currentDate, setCurrentDate] = React.useState(() => formatValue(value ?? defaultValue));
-  React.useEffect(() => {
+  }, [maxDate, minDate, type]);
+  const [currentDate, setCurrentDate] = useState(() => formatValue(value ?? defaultValue));
+  useEffect(() => {
     setCurrentDate(prev => value && isValidDate(value) ? formatValue(value) : formatValue(prev));
-  }, [maxDate, minDate, type, value]);
+  }, [formatValue, value]);
   const {
     originColumns,
     columns,
     pickerValue
-  } = React.useMemo(() => {
+  } = useMemo(() => {
     const getBoundary = (boundaryType, date) => {
       const boundaryDate = boundaryType === 'min' ? minDate : maxDate;
       const boundary = {
@@ -216,7 +213,7 @@ const DatePicker = props => {
       pickerValue
     };
   }, [columnsOrder, currentDate, filter, formatter, maxDate, minDate, type]);
-  const buildDateFromValues = values => {
+  const buildDateFromValues = useCallback(values => {
     const getValue = columnType => {
       const index = originColumns.findIndex(column => column.type === columnType);
       if (index === -1) return undefined;
@@ -244,16 +241,19 @@ const DatePicker = props => {
       minute = getValue('minute') || 0;
     }
     return formatValue(new Date(year, month - 1, day, hour, minute));
-  };
+  }, [currentDate, formatValue, originColumns, type]);
+  const handleChange = useCallback(values => {
+    const next = buildDateFromValues(values.map(String));
+    setCurrentDate(next);
+    onChange?.(next);
+  }, [buildDateFromValues, onChange]);
+  const handleConfirm = useCallback(() => onConfirm?.(currentDate), [currentDate, onConfirm]);
   return /*#__PURE__*/React.createElement(Picker, _extends({}, pickerProps, {
     columns: columns,
+    interactionMode: interactionMode,
     value: pickerValue,
-    onChange: val => {
-      const next = buildDateFromValues(val);
-      setCurrentDate(next);
-      onChange?.(next);
-    },
-    onConfirm: () => onConfirm?.(currentDate)
+    onChange: handleChange,
+    onConfirm: handleConfirm
   }));
 };
 const TimePicker = props => {
@@ -266,32 +266,33 @@ const TimePicker = props => {
     maxHour = 23,
     minMinute = 0,
     maxMinute = 59,
+    interactionMode = 'freeze',
     value,
     defaultValue,
     onChange,
     onConfirm,
     ...pickerProps
   } = props;
-  const timeRef = React.useRef('');
-  const formatTime = timeValue => {
+  const timeRef = useRef('');
+  const formatTime = useCallback(timeValue => {
     const [hour = 0, minute = 0] = (timeValue ?? '').split(':').map(num => parseInt(num, 10));
     const nextHour = clamp(Number.isNaN(hour) ? minHour : hour, minHour, maxHour);
     const nextMinute = clamp(Number.isNaN(minute) ? minMinute : minute, minMinute, maxMinute);
     return `${padZero(nextHour)}:${padZero(nextMinute)}`;
-  };
-  const [currentTime, setCurrentTime] = React.useState(() => {
+  }, [maxHour, maxMinute, minHour, minMinute]);
+  const [currentTime, setCurrentTime] = useState(() => {
     const initial = formatTime(value ?? defaultValue);
     timeRef.current = initial;
     return initial;
   });
-  React.useEffect(() => {
+  useEffect(() => {
     const next = isString(value) ? formatTime(value) : formatTime(timeRef.current);
     if (next !== timeRef.current) {
       timeRef.current = next;
       setCurrentTime(next);
     }
-  }, [maxHour, maxMinute, minHour, minMinute, value]);
-  const [hourValues, minuteValues] = React.useMemo(() => {
+  }, [formatTime, value]);
+  const [hourValues, minuteValues] = useMemo(() => {
     let hours = times(maxHour - minHour + 1, index => padZero(minHour + index));
     let minutes = times(maxMinute - minMinute + 1, index => padZero(minMinute + index));
     if (filter) {
@@ -300,24 +301,29 @@ const TimePicker = props => {
     }
     return [hours, minutes];
   }, [filter, maxHour, maxMinute, minHour, minMinute]);
-  const columns = React.useMemo(() => [hourValues.map(value => ({
+  const columns = useMemo(() => [hourValues.map(value => ({
     label: formatter('hour', value),
     value
   })), minuteValues.map(value => ({
     label: formatter('minute', value),
     value
   }))], [formatter, hourValues, minuteValues]);
-  const handleChange = values => {
-    const next = `${values[0] ?? hourValues[0]}:${values[1] ?? minuteValues[0]}`;
+  const handleChange = useCallback(values => {
+    const nextHour = values[0] ?? hourValues[0];
+    const nextMinute = values[1] ?? minuteValues[0];
+    const next = `${String(nextHour)}:${String(nextMinute)}`;
     timeRef.current = next;
     setCurrentTime(next);
     onChange?.(next);
-  };
+  }, [hourValues, minuteValues, onChange]);
+  const handleConfirm = useCallback(() => onConfirm?.(timeRef.current), [onConfirm]);
+  const pickerValue = useMemo(() => currentTime.split(':'), [currentTime]);
   return /*#__PURE__*/React.createElement(Picker, _extends({}, pickerProps, {
     columns: columns,
-    value: currentTime.split(':'),
-    onChange: val => handleChange(val),
-    onConfirm: () => onConfirm?.(timeRef.current)
+    interactionMode: interactionMode,
+    value: pickerValue,
+    onChange: handleChange,
+    onConfirm: handleConfirm
   }));
 };
 export default DatetimePicker;

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

@@ -1,5 +1,5 @@
 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 from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ActivityIndicator, Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useLocale } from '../config-provider/useLocale';
 import { nativeDriverEnabled } from '../../platform';
@@ -40,10 +40,10 @@ const ActionButton = props => {
       opacity: pressed && !disabled && !loading ? 0.8 : 1
     }],
     onPress: disabled || loading ? undefined : onPress
-  }, dividerStyle ? /*#__PURE__*/React.createElement(View, {
+  }, dividerStyle && /*#__PURE__*/React.createElement(View, {
     style: dividerStyle,
     pointerEvents: "none"
-  }) : null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+  }), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
     size: "small",
     color: textColor
   }) : /*#__PURE__*/React.isValidElement(text) ? text : /*#__PURE__*/React.createElement(Text, {
@@ -98,24 +98,36 @@ export const Dialog = props => {
   const hasTitle = isValidNode(title);
   const hasMessage = isValidNode(message);
   const hasChildren = isValidNode(children);
+  const hasContent = hasMessage || hasChildren;
+  const hasFooterActions = showCancelButton || showConfirmButton;
+  const isRoundTheme = theme === 'round-button';
+  const cancelLoading = cancelProps?.loading;
+  const confirmLoading = confirmProps?.loading;
+  const cancelText = cancelButtonText ?? locale.cancel;
+  const confirmText = confirmButtonText ?? locale.confirm;
+  const actionSeqRef = useRef(0);
   const runBeforeClose = action => {
     if (!beforeClose) return true;
     try {
       return beforeClose(action);
     } catch (error) {
-      console.error(error);
+      if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
       return true;
     }
   };
   const runAction = (action, handler) => {
+    actionSeqRef.current += 1;
+    const seq = actionSeqRef.current;
     const result = runBeforeClose(action);
     if (result === false) return;
     if (isPromiseLike(result)) {
       void result.then(resolved => {
         if (resolved === false) return;
+        if (actionSeqRef.current !== seq) return;
         handler?.();
       }).catch(error => {
-        console.error(error);
+        if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+        if (actionSeqRef.current !== seq) return;
         handler?.();
       });
       return;
@@ -127,15 +139,15 @@ export const Dialog = props => {
     runAction('close', onClose);
   };
   const handleCancel = () => {
-    if (cancelProps?.loading) return;
+    if (cancelLoading) return;
     runAction('cancel', onCancel);
   };
   const handleConfirm = () => {
-    if (confirmProps?.loading) return;
+    if (confirmLoading) return;
     runAction('confirm', onConfirm);
   };
-  const scaleAnim = React.useRef(new Animated.Value(0.7)).current;
-  React.useEffect(() => {
+  const scaleAnim = useRef(new Animated.Value(0.7)).current;
+  useEffect(() => {
     scaleAnim.setValue(visible ? 0.7 : 1);
     Animated.timing(scaleAnim, {
       toValue: visible ? 1 : 0.9,
@@ -153,10 +165,10 @@ export const Dialog = props => {
     maxWidth: tokens.sizes.maxWidth
   };
   const titleWrapperStyle = hasTitle ? [styles.titleWrapper, {
-    paddingTop: hasMessage || hasChildren ? tokens.spacing.titlePaddingTop : tokens.spacing.titleIsolatedPadding,
-    paddingBottom: hasMessage || hasChildren ? 0 : tokens.spacing.titleIsolatedPadding,
-    paddingHorizontal: hasMessage || hasChildren ? tokens.spacing.paddingHorizontal : 0,
-    marginBottom: hasMessage || hasChildren ? tokens.spacing.titleGap : 0
+    paddingTop: hasContent ? tokens.spacing.titlePaddingTop : tokens.spacing.titleIsolatedPadding,
+    paddingBottom: hasContent ? 0 : tokens.spacing.titleIsolatedPadding,
+    paddingHorizontal: hasContent ? tokens.spacing.paddingHorizontal : 0,
+    marginBottom: hasContent ? tokens.spacing.titleGap : 0
   }] : null;
   const titleTextStyle = hasTitle ? [styles.title, {
     color: tokens.colors.title,
@@ -165,7 +177,7 @@ export const Dialog = props => {
     fontWeight: tokens.typography.titleWeight
   }, titleStyle] : null;
   const messageTextStyle = [styles.message, {
-    color: theme === 'round-button' ? tokens.colors.title : tokens.colors.message,
+    color: isRoundTheme ? tokens.colors.title : tokens.colors.message,
     fontSize: tokens.typography.messageSize,
     lineHeight: tokens.typography.messageLineHeight,
     textAlign: messageAlign
@@ -175,7 +187,7 @@ export const Dialog = props => {
   } : null;
   const messageWrapperStyle = [styles.messageWrapper, {
     paddingTop: hasTitle ? tokens.spacing.messagePaddingTop : tokens.spacing.messagePadding,
-    paddingBottom: theme === 'round-button' ? tokens.spacing.roundFooterPadding : tokens.spacing.messagePadding,
+    paddingBottom: isRoundTheme ? tokens.spacing.roundFooterPadding : tokens.spacing.messagePadding,
     paddingHorizontal: tokens.spacing.messagePaddingHorizontal
   }];
   const footerBorderTopStyle = [styles.footerBorderTop, createHairlineView({
@@ -191,6 +203,69 @@ export const Dialog = props => {
       scale: scaleAnim
     }]
   };
+  const roundFooterStyle = [styles.roundFooter, {
+    paddingTop: tokens.spacing.messagePaddingTop,
+    paddingHorizontal: tokens.spacing.messagePaddingHorizontal,
+    paddingBottom: tokens.spacing.roundFooterPadding
+  }];
+  const roundFooterNode = hasFooterActions ? /*#__PURE__*/React.createElement(View, {
+    style: roundFooterStyle
+  }, showCancelButton ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.roundButtonWrapper, showConfirmButton && {
+      marginRight: tokens.spacing.roundFooterGap
+    }]
+  }, /*#__PURE__*/React.createElement(Button, {
+    block: true,
+    round: true,
+    type: "warning",
+    text: cancelText,
+    color: cancelButtonColor,
+    loading: cancelLoading,
+    disabled: cancelProps?.disabled,
+    onPress: handleCancel,
+    style: {
+      minHeight: tokens.sizes.roundButtonHeight
+    }
+  })) : null, showConfirmButton ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.roundButtonWrapper, showCancelButton && {
+      marginLeft: tokens.spacing.roundFooterGap
+    }]
+  }, /*#__PURE__*/React.createElement(Button, {
+    block: true,
+    round: true,
+    type: "danger",
+    text: confirmText,
+    color: confirmButtonColor,
+    loading: confirmLoading,
+    disabled: confirmProps?.disabled,
+    onPress: handleConfirm,
+    style: {
+      minHeight: tokens.sizes.roundButtonHeight
+    }
+  })) : null) : null;
+  const defaultFooterNode = hasFooterActions ? /*#__PURE__*/React.createElement(View, {
+    style: styles.footer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: footerBorderTopStyle,
+    pointerEvents: "none"
+  }), showCancelButton ? /*#__PURE__*/React.createElement(ActionButton, {
+    tokens: tokens,
+    text: cancelText,
+    color: cancelButtonColor ?? tokens.colors.cancel,
+    dividerPosition: "none",
+    loading: cancelLoading,
+    disabled: cancelProps?.disabled,
+    onPress: handleCancel
+  }) : null, showConfirmButton ? /*#__PURE__*/React.createElement(ActionButton, {
+    tokens: tokens,
+    text: confirmText,
+    color: confirmButtonColor ?? tokens.colors.confirm,
+    dividerPosition: showCancelButton ? 'left' : 'none',
+    loading: confirmLoading,
+    disabled: confirmProps?.disabled,
+    onPress: handleConfirm
+  }) : null) : null;
+  const footerNode = footer ?? (isRoundTheme ? roundFooterNode : defaultFooterNode);
   return /*#__PURE__*/React.createElement(Popup, _extends({
     visible: visible,
     placement: "center",
@@ -226,75 +301,16 @@ export const Dialog = props => {
     fill: tokens.colors.closeIcon,
     color: tokens.colors.closeIcon
   })) : null, hasTitle ? /*#__PURE__*/React.createElement(View, {
-    style: titleWrapperStyle ?? undefined
+    style: titleWrapperStyle
   }, /*#__PURE__*/React.isValidElement(title) ? title : /*#__PURE__*/React.createElement(Text, {
-    style: titleTextStyle ?? undefined
-  }, title)) : null, hasMessage || hasChildren ? /*#__PURE__*/React.createElement(View, {
+    style: titleTextStyle
+  }, title)) : null, hasContent ? /*#__PURE__*/React.createElement(View, {
     style: [styles.content, messageContentStyle, contentStyle]
   }, hasChildren ? children : /*#__PURE__*/React.createElement(View, {
     style: messageWrapperStyle
   }, /*#__PURE__*/React.isValidElement(message) ? message : /*#__PURE__*/React.createElement(Text, {
     style: messageTextStyle
-  }, message))) : null, footer ? footer : theme === 'round-button' ? showCancelButton || showConfirmButton ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.roundFooter, {
-      paddingTop: tokens.spacing.messagePaddingTop,
-      paddingHorizontal: tokens.spacing.messagePaddingHorizontal,
-      paddingBottom: tokens.spacing.roundFooterPadding
-    }]
-  }, showCancelButton ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.roundButtonWrapper, showConfirmButton ? {
-      marginRight: tokens.spacing.roundFooterGap
-    } : null]
-  }, /*#__PURE__*/React.createElement(Button, {
-    block: true,
-    round: true,
-    type: "warning",
-    text: cancelButtonText ?? locale.cancel,
-    color: cancelButtonColor,
-    loading: cancelProps?.loading,
-    disabled: cancelProps?.disabled,
-    onPress: handleCancel,
-    style: {
-      minHeight: tokens.sizes.roundButtonHeight
-    }
-  })) : null, showConfirmButton ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.roundButtonWrapper, showCancelButton ? {
-      marginLeft: tokens.spacing.roundFooterGap
-    } : null]
-  }, /*#__PURE__*/React.createElement(Button, {
-    block: true,
-    round: true,
-    type: "danger",
-    text: confirmButtonText ?? locale.confirm,
-    color: confirmButtonColor,
-    loading: confirmProps?.loading,
-    disabled: confirmProps?.disabled,
-    onPress: handleConfirm,
-    style: {
-      minHeight: tokens.sizes.roundButtonHeight
-    }
-  })) : null) : null : showCancelButton || showConfirmButton ? /*#__PURE__*/React.createElement(View, {
-    style: styles.footer
-  }, /*#__PURE__*/React.createElement(View, {
-    style: footerBorderTopStyle,
-    pointerEvents: "none"
-  }), showCancelButton ? /*#__PURE__*/React.createElement(ActionButton, {
-    tokens: tokens,
-    text: cancelButtonText ?? locale.cancel,
-    color: cancelButtonColor ?? tokens.colors.cancel,
-    dividerPosition: "none",
-    loading: cancelProps?.loading,
-    disabled: cancelProps?.disabled,
-    onPress: handleCancel
-  }) : null, showConfirmButton ? /*#__PURE__*/React.createElement(ActionButton, {
-    tokens: tokens,
-    text: confirmButtonText ?? locale.confirm,
-    color: confirmButtonColor ?? tokens.colors.confirm,
-    dividerPosition: showCancelButton ? 'left' : 'none',
-    loading: confirmProps?.loading,
-    disabled: confirmProps?.disabled,
-    onPress: handleConfirm
-  }) : null) : null);
+  }, message))) : null, footerNode);
 };
 const styles = StyleSheet.create({
   titleWrapper: {

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

@@ -1,8 +1,7 @@
 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 from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Portal } from '../portal/Portal';
-import { deepMerge } from '../../utils/deepMerge';
-import { isString, isUndefined } from '../../utils/validate';
+import { deepMerge, isString, isUndefined } from '../../utils';
 import Dialog from './Dialog';
 const runHook = async handler => {
   if (!handler) return true;
@@ -58,11 +57,11 @@ const DialogPortalInstance = ({
   meta,
   portalKeyRef
 }) => {
-  const [visible, setVisible] = React.useState(true);
-  const close = React.useCallback(() => {
+  const [visible, setVisible] = useState(true);
+  const close = useCallback(() => {
     setVisible(false);
   }, []);
-  React.useEffect(() => {
+  useEffect(() => {
     if (!portalKeyRef.current) return;
     attachCloser(portalKeyRef.current, close);
     return () => {
@@ -72,24 +71,24 @@ const DialogPortalInstance = ({
       }
     };
   }, [close, portalKeyRef]);
-  React.useEffect(() => {
+  useEffect(() => {
     return () => {
       if (portalKeyRef.current) {
         unregisterEntry(portalKeyRef.current);
       }
     };
   }, [portalKeyRef]);
-  const handleCancel = React.useCallback(async () => {
+  const handleCancel = useCallback(async () => {
     const allowed = await runHook(() => options.beforeClose?.('cancel'));
     if (!allowed) return;
     const shouldClose = await runHook(options.onCancel);
     if (!shouldClose) return;
     if (meta.mode === 'confirm') {
-      meta.reject?.(false);
+      meta.resolve?.(false);
     }
     close();
   }, [close, meta, options.beforeClose, options.onCancel]);
-  const handleConfirm = React.useCallback(async () => {
+  const handleConfirm = useCallback(async () => {
     const allowed = await runHook(() => options.beforeClose?.('confirm'));
     if (!allowed) return;
     const shouldClose = await runHook(options.onConfirm);
@@ -99,17 +98,17 @@ const DialogPortalInstance = ({
     }
     close();
   }, [close, meta, options.beforeClose, options.onConfirm]);
-  const handleClose = React.useCallback(async () => {
+  const handleClose = useCallback(async () => {
     const allowed = await runHook(() => options.beforeClose?.('close'));
     if (!allowed) return;
     const shouldClose = await runHook(options.onClose);
     if (!shouldClose) return;
     if (meta.mode === 'confirm') {
-      meta.reject?.(false);
+      meta.resolve?.(false);
     }
     close();
   }, [close, meta, options.beforeClose, options.onClose]);
-  const handleClosed = React.useCallback(() => {
+  const handleClosed = useCallback(() => {
     options.onClosed?.();
     if (portalKeyRef.current) {
       Portal.remove(portalKeyRef.current);
@@ -182,14 +181,13 @@ export const DialogImperative = {
       resolve
     });
   }),
-  confirm: options => new Promise((resolve, reject) => {
+  confirm: options => new Promise(resolve => {
     mountImperativeDialog(normalizeOptions('confirm', {
       showCancelButton: true,
       ...options
     }), {
       mode: 'confirm',
-      resolve: () => resolve(true),
-      reject: () => reject(false)
+      resolve: result => resolve(result === undefined ? true : result)
     });
   }),
   clear: () => {

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

@@ -5,7 +5,11 @@ export const Dialog = Object.assign(DialogBase, {
   Host: PortalHost,
   show: DialogImperative.show,
   alert: DialogImperative.alert,
-  confirm: DialogImperative.confirm,
+  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

package/dist/es/components/divider/Divider.js

@@ -1,8 +1,7 @@
 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 from 'react';
 import { Text, View } from 'react-native';
-import { createHairlineView } from '../../utils/hairline';
-import { isRenderable, isText } from '../../utils/validate';
+import { createHairlineView, isRenderable, isText } from '../../utils';
 import { useDividerTokens } from './tokens';
 export const Divider = props => {
   const {
@@ -68,10 +67,10 @@ export const Divider = props => {
     style: [tokens.layout.container, {
       marginVertical: tokens.spacing.vertical
     }, style]
-  }, rest), renderLine(hasContent ? leftGrow : 1), hasContent ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+  }, rest), renderLine(hasContent ? leftGrow : 1), hasContent && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.contentWrapper, {
       paddingHorizontal: tokens.spacing.contentPadding
     }, contentStyle]
-  }, content), renderLine(rightGrow)) : null);
+  }, content), renderLine(rightGrow)));
 };
 Divider.displayName = 'Divider';