react-native-system-ui 0.0.1-beta0 → 0.0.2

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

@@ -0,0 +1,329 @@
+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, useState } from 'react';
+import Picker from '../picker';
+import { Popup } from '../popup/Popup';
+import { useControllableValue } from '../../hooks';
+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);
+const DatetimePicker = props => {
+  const [popupVisible, setPopupVisible] = useControllableValue(props, {
+    defaultValue: false,
+    valuePropName: 'popupVisible',
+    defaultValuePropName: 'defaultPopupVisible',
+    trigger: 'onPopupVisibleChange'
+  });
+  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,
+      popupVisible: _popupVisible,
+      defaultPopupVisible: _defaultPopupVisible,
+      popupProps,
+      onPopupVisibleChange: _onPopupVisibleChange,
+      onConfirm,
+      onCancel,
+      ...pickerProps
+    } = props;
+    const handleConfirm = useCallback(value => {
+      onConfirm?.(value);
+      if (popup) close();
+    }, [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
+    }));
+    return renderPopup(pickerNode, popup, popupProps);
+  }
+  const {
+    popup,
+    popupVisible: _popupVisible,
+    defaultPopupVisible: _defaultPopupVisible,
+    popupProps,
+    onPopupVisibleChange: _onPopupVisibleChange,
+    onConfirm,
+    onCancel,
+    ...pickerProps
+  } = props;
+  const handleConfirm = useCallback(value => {
+    onConfirm?.(value);
+    if (popup) close();
+  }, [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
+  }));
+  return renderPopup(pickerNode, popup, popupProps);
+};
+const DatePicker = props => {
+  const {
+    type = 'datetime',
+    minDate = DEFAULT_MIN_DATE,
+    maxDate = DEFAULT_MAX_DATE,
+    formatter = (_type, value) => value,
+    filter,
+    columnsOrder,
+    interactionMode = 'freeze',
+    value,
+    defaultValue,
+    onChange,
+    onConfirm,
+    ...pickerProps
+  } = props;
+  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);
+    if (type === 'year-month') {
+      date.setDate(1);
+      date.setHours(0, 0, 0, 0);
+    } else if (type === 'date' || type === 'month-day') {
+      date.setHours(0, 0, 0, 0);
+    } else if (type === 'datehour') {
+      date.setMinutes(0, 0, 0);
+    }
+    return date;
+  }, [maxDate, minDate, type]);
+  const [currentDate, setCurrentDate] = useState(() => formatValue(value ?? defaultValue));
+  useEffect(() => {
+    setCurrentDate(prev => value && isValidDate(value) ? formatValue(value) : formatValue(prev));
+  }, [formatValue, value]);
+  const {
+    originColumns,
+    columns,
+    pickerValue
+  } = useMemo(() => {
+    const getBoundary = (boundaryType, date) => {
+      const boundaryDate = boundaryType === 'min' ? minDate : maxDate;
+      const boundary = {
+        year: boundaryDate.getFullYear(),
+        month: boundaryType === 'min' ? 1 : 12,
+        day: boundaryType === 'min' ? 1 : getMonthEndDay(date.getFullYear(), date.getMonth() + 1),
+        hour: boundaryType === 'min' ? 0 : 23,
+        minute: boundaryType === 'min' ? 0 : 59
+      };
+      if (date.getFullYear() === boundary.year) {
+        boundary.month = boundaryDate.getMonth() + 1;
+        if (date.getMonth() + 1 === boundary.month) {
+          boundary.day = boundaryDate.getDate();
+          if (date.getDate() === boundary.day) {
+            boundary.hour = boundaryDate.getHours();
+            if (date.getHours() === boundary.hour) {
+              boundary.minute = boundaryDate.getMinutes();
+            }
+          }
+        }
+      }
+      return boundary;
+    };
+    const maxBoundary = getBoundary('max', currentDate);
+    const minBoundary = getBoundary('min', currentDate);
+    const baseColumns = [{
+      type: 'year',
+      range: [minBoundary.year, maxBoundary.year]
+    }, {
+      type: 'month',
+      range: [minBoundary.month, maxBoundary.month]
+    }, {
+      type: 'day',
+      range: [minBoundary.day, maxBoundary.day]
+    }, {
+      type: 'hour',
+      range: [minBoundary.hour, maxBoundary.hour]
+    }, {
+      type: 'minute',
+      range: [minBoundary.minute, maxBoundary.minute]
+    }];
+    let result = baseColumns;
+    switch (type) {
+      case 'date':
+        result = baseColumns.slice(0, 3);
+        break;
+      case 'year-month':
+        result = baseColumns.slice(0, 2);
+        break;
+      case 'month-day':
+        result = baseColumns.slice(1, 3);
+        break;
+      case 'datehour':
+        result = baseColumns.slice(0, 4);
+        break;
+      default:
+        break;
+    }
+    if (columnsOrder?.length) {
+      const order = columnsOrder.concat(result.map(col => col.type));
+      result = [...result].sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type));
+    }
+    const originColumns = result.map(column => {
+      let values = times(column.range[1] - column.range[0] + 1, index => {
+        const value = column.range[0] + index;
+        return column.type === 'year' ? String(value) : padZero(value);
+      });
+      if (filter) {
+        values = filter(column.type, values);
+      }
+      return {
+        type: column.type,
+        values
+      };
+    });
+    const columns = originColumns.map(column => column.values.map(value => ({
+      label: formatter(column.type, value),
+      value
+    })));
+    const pickerValue = originColumns.map(column => {
+      switch (column.type) {
+        case 'year':
+          return String(currentDate.getFullYear());
+        case 'month':
+          return padZero(currentDate.getMonth() + 1);
+        case 'day':
+          return padZero(currentDate.getDate());
+        case 'hour':
+          return padZero(currentDate.getHours());
+        case 'minute':
+          return padZero(currentDate.getMinutes());
+        default:
+          return column.values[0] ?? '';
+      }
+    });
+    return {
+      originColumns,
+      columns,
+      pickerValue
+    };
+  }, [columnsOrder, currentDate, filter, formatter, maxDate, minDate, type]);
+  const buildDateFromValues = useCallback(values => {
+    const getValue = columnType => {
+      const index = originColumns.findIndex(column => column.type === columnType);
+      if (index === -1) return undefined;
+      return getTrueValue(values[index] ?? originColumns[index].values[0]);
+    };
+    let year = currentDate.getFullYear();
+    let month = currentDate.getMonth() + 1;
+    let day = currentDate.getDate();
+    if (type === 'month-day') {
+      month = getValue('month') || month;
+      day = getValue('day') || day;
+    } else {
+      year = getValue('year') || year;
+      month = getValue('month') || month;
+      day = type === 'year-month' ? 1 : getValue('day') || day;
+    }
+    const maxDay = getMonthEndDay(year, month);
+    day = Math.min(day, maxDay);
+    let hour = 0;
+    let minute = 0;
+    if (type === 'datehour' || type === 'datetime') {
+      hour = getValue('hour') || 0;
+    }
+    if (type === 'datetime') {
+      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: handleChange,
+    onConfirm: handleConfirm
+  }));
+};
+const TimePicker = props => {
+  const {
+    type: _type,
+    formatter = (_type, value) => value,
+    filter,
+    columnsOrder: _columnsOrder,
+    minHour = 0,
+    maxHour = 23,
+    minMinute = 0,
+    maxMinute = 59,
+    interactionMode = 'freeze',
+    value,
+    defaultValue,
+    onChange,
+    onConfirm,
+    ...pickerProps
+  } = props;
+  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)}`;
+  }, [maxHour, maxMinute, minHour, minMinute]);
+  const [currentTime, setCurrentTime] = useState(() => {
+    const initial = formatTime(value ?? defaultValue);
+    timeRef.current = initial;
+    return initial;
+  });
+  useEffect(() => {
+    const next = isString(value) ? formatTime(value) : formatTime(timeRef.current);
+    if (next !== timeRef.current) {
+      timeRef.current = next;
+      setCurrentTime(next);
+    }
+  }, [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) {
+      hours = filter('hour', hours);
+      minutes = filter('minute', minutes);
+    }
+    return [hours, minutes];
+  }, [filter, maxHour, maxMinute, minHour, minMinute]);
+  const columns = useMemo(() => [hourValues.map(value => ({
+    label: formatter('hour', value),
+    value
+  })), minuteValues.map(value => ({
+    label: formatter('minute', value),
+    value
+  }))], [formatter, hourValues, minuteValues]);
+  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,
+    interactionMode: interactionMode,
+    value: pickerValue,
+    onChange: handleChange,
+    onConfirm: handleConfirm
+  }));
+};
+export default DatetimePicker;

package/dist/es/datetime-picker/index.js

@@ -0,0 +1,2 @@
+import DatetimePicker from './DatetimePicker';
+export default DatetimePicker;

package/dist/es/dialog/Dialog.js

@@ -0,0 +1,365 @@
+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, { 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';
+import { createHairlineView } from '../../utils/hairline';
+import { isPromiseLike } from '../../utils/promise';
+import { isNumber, isValidNode } from '../../utils/validate';
+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 textColor = color ?? tokens.colors.confirm;
+  const dividerStyle = dividerPosition === 'none' ? null : [styles.actionButtonDivider, {
+    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
+    }) => [styles.actionButton, {
+      height: tokens.sizes.actionHeight,
+      opacity: pressed && !disabled && !loading ? 0.8 : 1
+    }],
+    onPress: disabled || loading ? undefined : onPress
+  }, dividerStyle && /*#__PURE__*/React.createElement(View, {
+    style: dividerStyle,
+    pointerEvents: "none"
+  }), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "small",
+    color: textColor
+  }) : /*#__PURE__*/React.isValidElement(text) ? text : /*#__PURE__*/React.createElement(Text, {
+    style: {
+      color: textColor,
+      fontSize: tokens.typography.actionSize,
+      fontWeight: tokens.typography.actionWeight
+    }
+  }, text ?? ''));
+};
+export const Dialog = props => {
+  const locale = useLocale();
+  const {
+    visible,
+    title,
+    message,
+    messageAlign = 'center',
+    theme = 'default',
+    width,
+    closeable = false,
+    closeIcon,
+    overlay = true,
+    overlayStyle,
+    overlayTestID = 'dialog-overlay',
+    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 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) {
+      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 => {
+        if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+        if (actionSeqRef.current !== seq) return;
+        handler?.();
+      });
+      return;
+    }
+    handler?.();
+  };
+  const handleCloseIcon = () => {
+    onClickCloseIcon?.();
+    runAction('close', onClose);
+  };
+  const handleCancel = () => {
+    if (cancelLoading) return;
+    runAction('cancel', onCancel);
+  };
+  const handleConfirm = () => {
+    if (confirmLoading) return;
+    runAction('confirm', onConfirm);
+  };
+  const scaleAnim = useRef(new Animated.Value(0.7)).current;
+  useEffect(() => {
+    scaleAnim.setValue(visible ? 0.7 : 1);
+    Animated.timing(scaleAnim, {
+      toValue: visible ? 1 : 0.9,
+      duration: 300,
+      easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
+      useNativeDriver: nativeDriverEnabled
+    }).start();
+  }, [scaleAnim, visible]);
+  const widthStyle = width ? isNumber(width) ? {
+    width
+  } : {
+    width: String(width)
+  } : {
+    width: '90%',
+    maxWidth: tokens.sizes.maxWidth
+  };
+  const titleWrapperStyle = hasTitle ? [styles.titleWrapper, {
+    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,
+    fontSize: tokens.typography.titleSize,
+    lineHeight: tokens.typography.titleLineHeight,
+    fontWeight: tokens.typography.titleWeight
+  }, titleStyle] : null;
+  const messageTextStyle = [styles.message, {
+    color: isRoundTheme ? tokens.colors.title : tokens.colors.message,
+    fontSize: tokens.typography.messageSize,
+    lineHeight: tokens.typography.messageLineHeight,
+    textAlign: messageAlign
+  }, messageStyle];
+  const messageContentStyle = !hasChildren ? {
+    alignItems: messageAlign === 'center' ? 'center' : messageAlign === 'left' ? 'flex-start' : 'flex-end'
+  } : null;
+  const messageWrapperStyle = [styles.messageWrapper, {
+    paddingTop: hasTitle ? tokens.spacing.messagePaddingTop : tokens.spacing.messagePadding,
+    paddingBottom: isRoundTheme ? tokens.spacing.roundFooterPadding : tokens.spacing.messagePadding,
+    paddingHorizontal: tokens.spacing.messagePaddingHorizontal
+  }];
+  const footerBorderTopStyle = [styles.footerBorderTop, createHairlineView({
+    position: 'top',
+    color: tokens.colors.divider,
+    left: 0,
+    right: 0,
+    top: 0
+  })];
+  const mergedCloseOnOverlayPress = closeOnOverlayPress || closeOnClickOverlay;
+  const animatedStyle = {
+    transform: [{
+      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",
+    round: true,
+    overlay: overlay,
+    overlayStyle: overlayStyle,
+    overlayTestID: overlayTestID,
+    closeOnClickOverlay: mergedCloseOnOverlayPress,
+    onClickOverlay: onClickOverlay,
+    beforeClose: () => runBeforeClose('close'),
+    onClose: onClose,
+    onClosed: onClosed,
+    contentAnimationStyle: animatedStyle,
+    style: [{
+      backgroundColor: tokens.colors.background,
+      borderRadius: tokens.sizes.borderRadius,
+      padding: 0
+    }, widthStyle, style]
+  }, rest), closeable ? /*#__PURE__*/React.createElement(Pressable, {
+    style: [styles.closeIcon, {
+      top: tokens.spacing.paddingTop / 2,
+      right: tokens.spacing.paddingHorizontal / 2
+    }],
+    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
+  })) : null, hasTitle ? /*#__PURE__*/React.createElement(View, {
+    style: titleWrapperStyle
+  }, /*#__PURE__*/React.isValidElement(title) ? title : /*#__PURE__*/React.createElement(Text, {
+    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, footerNode);
+};
+const styles = StyleSheet.create({
+  titleWrapper: {
+    alignItems: 'center'
+  },
+  title: {
+    textAlign: 'center'
+  },
+  content: {
+    width: '100%'
+  },
+  message: {
+    textAlign: 'center'
+  },
+  footer: {
+    flexDirection: 'row',
+    position: 'relative'
+  },
+  footerBorderTop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 0
+  },
+  actionButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  actionButtonDivider: {
+    position: 'absolute',
+    pointerEvents: 'none'
+  },
+  messageWrapper: {
+    width: '100%'
+  },
+  roundFooter: {
+    width: '100%',
+    flexDirection: 'row'
+  },
+  roundButtonWrapper: {
+    flex: 1
+  },
+  closeIcon: {
+    position: 'absolute',
+    padding: 4,
+    zIndex: 1
+  }
+});
+Dialog.displayName = 'Dialog';
+export default Dialog;