@fruits-chain/react-native-xiaoshu
Version:
🌈 React Native UI library
172 lines (169 loc) • 7.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _iconsReactNative = require("@fruits-chain/icons-react-native");
var _isNil = _interopRequireDefault(require("lodash/isNil"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _index = _interopRequireDefault(require("../button/index.js"));
var _index2 = require("../helpers/index.js");
var _index3 = require("../hooks/index.js");
var _index4 = _interopRequireDefault(require("../locale/index.js"));
var _popup = _interopRequireDefault(require("../popup/popup.js"));
var _index5 = _interopRequireDefault(require("../theme/index.js"));
var _style = require("./style.js");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const defaultOnRequestClose = () => {
return true;
};
/**
* Dialog 弹出框
* @description 弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。
* @description 弹出框组件支持函数调用和组件调用两种方式。
*/
const Dialog = ({
children,
style,
theme,
title,
message,
width,
messageAlign = 'center',
showConfirmButton = true,
showCancelButton = false,
confirmButtonText,
cancelButtonText,
confirmButtonColor,
confirmButtonTextBold = true,
cancelButtonColor,
cancelButtonTextBold = false,
confirmButtonLoading = false,
cancelButtonLoading = false,
showClose = false,
onPressClose,
buttonReverse = false,
onPressCancel,
onPressConfirm,
duration,
onOpen: onOpenFn,
onClose: onCloseFn,
onRequestClose = defaultOnRequestClose,
...resetProps
}) => {
const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
const fadeInstance = (0, _react.useRef)(null);
const locale = _index4.default.useLocale().Dialog;
const [CV, STYLES] = _index5.default.useStyle({
varCreator: _style.varCreator,
styleCreator: _style.styleCreator,
theme
});
width = (0, _index2.getDefaultValue)(width, CV.dialog_width);
duration = (0, _index2.getDefaultValue)(duration, CV.dialog_transition);
const showDialog = (0, _react.useCallback)(show => {
if (fadeInstance.current) {
fadeInstance.current.stop();
fadeInstance.current = null;
}
fadeInstance.current = _reactNative.Animated.timing(fadeAnim,
// 动画中的变量值
{
toValue: show ? 1 : 0,
duration: duration,
useNativeDriver: true,
easing: show ? _index2.easing.easeOutCirc : _index2.easing.easeInCubic
});
fadeInstance.current.start();
}, [duration, fadeAnim]);
const onOpenPersistFn = (0, _index3.usePersistFn)(() => {
showDialog(true);
onOpenFn?.();
});
const onClosePersistFn = (0, _index3.usePersistFn)(() => {
showDialog(false);
onCloseFn?.();
});
const titleJSX = (0, _index2.renderTextLikeJSX)(title, [STYLES.title_text, (0, _isNil.default)(message) ? STYLES.title_isolated : null]);
const messageJSX = !(0, _isNil.default)(message) ? /*#__PURE__*/(0, _react.isValidElement)(message) ? message : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [STYLES.message_text, {
textAlign: messageAlign
}],
children: message
}) : null;
const cancelButtonProps = {
color: cancelButtonColor || CV.dialog_cancel_button_text_color,
text: cancelButtonText ?? locale.cancelButtonText,
loading: cancelButtonLoading,
onPress: onPressCancel
};
const confirmButtonProps = {
color: confirmButtonColor || CV.dialog_confirm_button_text_color,
text: confirmButtonText ?? locale.confirmButtonText,
loading: confirmButtonLoading,
onPress: onPressConfirm
};
// TODO 优化逆转按钮变量变换
const _showCancelButton = buttonReverse ? showConfirmButton : showCancelButton;
const _showConfirmButton = buttonReverse ? showCancelButton : showConfirmButton;
const _cancelButtonTextBold = buttonReverse ? confirmButtonTextBold : cancelButtonTextBold;
const _confirmButtonTextBold = buttonReverse ? cancelButtonTextBold : confirmButtonTextBold;
const _cancelButtonProps = buttonReverse ? confirmButtonProps : cancelButtonProps;
const _confirmButtonProps = buttonReverse ? cancelButtonProps : confirmButtonProps;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popup.default, {
...resetProps,
duration: duration,
onOpen: onOpenPersistFn,
onClose: onClosePersistFn,
onRequestClose: onRequestClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
style: [STYLES.dialog, style, {
width,
transform: [{
scale: fadeAnim.interpolate({
inputRange: [0, 0.01, 0.98, 1],
outputRange: [0, 0.9, 1.02, 1]
})
}]
}],
children: [showClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsReactNative.CrossOutline, {
style: STYLES.close,
onPress: onPressClose,
color: CV.dialog_close_color,
size: CV.dialog_close_size
}) : null, titleJSX, titleJSX ? messageJSX : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: STYLES.content_isolated,
children: messageJSX
}), children, _showCancelButton || _showConfirmButton ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: STYLES.footer,
children: [_showCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
..._cancelButtonProps,
type: "link",
size: "xl",
square: true,
style: STYLES.btn,
textStyle: _cancelButtonTextBold ? STYLES.btn_text_bold : null
}) : null, _showConfirmButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
..._confirmButtonProps,
type: "link",
size: "xl",
square: true,
style: [STYLES.btn, _showCancelButton ?
// eslint-disable-next-line react-native/no-inline-styles
{
// react-native-web 覆盖原 button 样式
borderLeftWidth: 1,
borderColor: CV.dialog_footer_divider_color
} : null],
textStyle: _confirmButtonTextBold ? STYLES.btn_text_bold : null
}) : null]
}) : null]
})
});
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Dialog);
//# sourceMappingURL=dialog.js.map