From fbd11a4de7b0b41eaed064567dbebc7fd2c0d146 Mon Sep 17 00:00:00 2001 From: jumiao Date: Mon, 18 Mar 2024 14:26:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=A0=B7=E5=BC=8F=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BB=A5=E5=8F=8A=E9=94=99=E8=AF=AF=E6=8F=90?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-rn/src/lib/Popup.tsx | 37 ++++++----- .../src/lib/showActionSheet/ActionSheet.tsx | 64 ++++++++----------- packages/taro-rn/src/lib/showModal/Dialog.tsx | 60 ++++++++--------- packages/taro-rn/src/lib/showModal/toast.tsx | 6 +- 4 files changed, 78 insertions(+), 89 deletions(-) diff --git a/packages/taro-rn/src/lib/Popup.tsx b/packages/taro-rn/src/lib/Popup.tsx index 0b2328c84c59..153be868fc6c 100644 --- a/packages/taro-rn/src/lib/Popup.tsx +++ b/packages/taro-rn/src/lib/Popup.tsx @@ -32,14 +32,14 @@ class Popup extends Component { height popup - - constructor (props:Props) { + timer + constructor(props: Props) { super(props) this.state = { visible: props.visible ?? false, translateY: new Animated.Value(height) } this.handleLayout = this.handleLayout.bind(this) } - UNSAFE_componentWillReceiveProps (nextProp:Props):void { + UNSAFE_componentWillReceiveProps (nextProp: Props): void { if (this.props.visible !== nextProp.visible) { if (nextProp.visible) { this.setState({ visible: true }) @@ -53,21 +53,26 @@ class Popup extends Component { }).start(() => this.setState({ visible: false })) } } - - handleLayout ():void { - this.popup.measure((_x, _y, _w, h) => { - this.height = h - this.setState({ translateY: new Animated.Value(h) }) - Animated.timing(this.state.translateY, { - toValue: 0, - duration: 300, - easing: (Easing as any).easeInOut, - useNativeDriver: true - }).start() - }) + componentWillUnmount (): void { + this.timer && clearTimeout(this.timer); + } + handleLayout (): void { + this.timer = setTimeout(() => { + this.popup?.measure((_x, _y, _w, h) => { + this.height = h + this.setState({ translateY: new Animated.Value(h) }, () => { + Animated.timing(this.state.translateY, { + toValue: 0, + duration: 300, + easing: (Easing as any).easeInOut, + useNativeDriver: true + }).start() + }) + }) + },); // 处理鸿蒙系统handleLayout 回调 this.popup为空的情况 } - render ():JSX.Element { + render (): JSX.Element { const { style, maskStyle, diff --git a/packages/taro-rn/src/lib/showActionSheet/ActionSheet.tsx b/packages/taro-rn/src/lib/showActionSheet/ActionSheet.tsx index b4310241c91e..1f10de806249 100644 --- a/packages/taro-rn/src/lib/showActionSheet/ActionSheet.tsx +++ b/packages/taro-rn/src/lib/showActionSheet/ActionSheet.tsx @@ -13,7 +13,7 @@ import { Popup } from '../Popup' import V from '../variable' const styles = StyleSheet.create({ - iosActionsheet: { + actionsheet: { backgroundColor: V.weuiBgColorDefault }, androidActionsheetWrapper: { @@ -21,11 +21,6 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center' }, - androidActionsheet: { - width: 274, - backgroundColor: V.weuiBgColorDefault, - borderRadius: V.weuiActionSheetAndroidBorderRadius - }, actionsheetMenu: { backgroundColor: '#fff' }, @@ -36,29 +31,23 @@ const styles = StyleSheet.create({ actionsheetCell: { borderTopWidth: StyleSheet.hairlineWidth, borderColor: V.weuiCellBorderColor, - borderStyle: 'solid' - }, - iosActionsheetCell: { + borderStyle: 'solid', paddingTop: 10, - paddingBottom: 10 - }, - androidActionsheetCell: { - paddingTop: 13, - paddingBottom: 13, + paddingBottom: 10, paddingLeft: 24, paddingRight: 24 }, + firstActionsheetCell: { borderTopWidth: 0 }, - iosActionsheetCellText: { + actionSheetCellText: { textAlign: 'center', fontSize: 18, marginTop: ((18 * V.baseLineHeight) - 18) / 2, marginBottom: ((18 * V.baseLineHeight) - 18) / 2 }, androidActionsheetCellText: { - textAlign: 'center', fontSize: 16, marginTop: ((16 * 1.4) - 16) / 2, marginBottom: ((16 * 1.4) - 16) / 2 @@ -105,7 +94,6 @@ const Index: React.FC = ({ underlayColor={underlayColor} style={[ styles.actionsheetCell, - styles[`${_type}ActionsheetCell`], idx === 0 ? styles.firstActionsheetCell : {}, btnStyle ]} @@ -113,6 +101,8 @@ const Index: React.FC = ({ > = ({ underlayColor={underlayColor} style={[ styles.actionsheetCell, - styles[`${_type}ActionsheetCell`], idx === 0 ? styles.firstActionsheetCell : {}, btnStyle ]} @@ -136,6 +125,7 @@ const Index: React.FC = ({ > = ({ ) return - {menus.length - ? - {_renderMenuItems()} - - : false} - {actions.length - ? - {_renderActions()} - - : false} - - + visible={visible} + style={[styles.actionsheet, style]} + maskStyle={maskStyle} + onShow={onShow} + onClose={onClose} + > + {menus.length + ? + {_renderMenuItems()} + + : false} + {actions.length + ? + {_renderActions()} + + : false} + + } Index.propTypes = { autoDectect: PropTypes.bool, - type: PropTypes.oneOf(['ios', 'android']), + type: PropTypes.oneOf(['ios', 'android', 'harmony']), menus: PropTypes.any, actions: PropTypes.any, visible: PropTypes.bool, diff --git a/packages/taro-rn/src/lib/showModal/Dialog.tsx b/packages/taro-rn/src/lib/showModal/Dialog.tsx index edc0847ef8da..424df9ac013f 100644 --- a/packages/taro-rn/src/lib/showModal/Dialog.tsx +++ b/packages/taro-rn/src/lib/showModal/Dialog.tsx @@ -33,49 +33,42 @@ const styles = create({ paddingRight: V.weuiDialogGapWidth }, dialogTitle: { - fontWeight: '400' - }, - iosDialogTitle: { - fontSize: 18, + fontWeight: '700', + fontSize: 17, textAlign: 'center' }, + androidDialogTitle: { fontSize: 21, textAlign: 'left' }, + dialogBody: { paddingLeft: V.weuiDialogGapWidth, - paddingRight: V.weuiDialogGapWidth - }, - iosDialogBody: { - paddingBottom: (0.8 * 15) + 20 - }, - androidDialogBody: { - paddingTop: 0.25 * 17, - paddingBottom: (17 * 2) + 20 + paddingRight: V.weuiDialogGapWidth, + marginBottom: 32 }, + dialogBodyText: { color: V.weuiTextColorGray, - lineHeight: 15 * 1.3, + fontSize: 17, + textAlign: 'center', + lineHeight: 17 * 1.4, android: { - lineHeight: Math.round(15 * 1.3) + lineHeight: Math.round(17 * 1.4) } }, - iosDialogBodyText: { - fontSize: 15, - textAlign: 'center' - }, + androidDialogBodyText: { - fontSize: 17, textAlign: 'left' }, dialogFooter: { - flexDirection: 'row' - }, - iosDialogFooter: { + flexDirection: 'row', height: 48, alignItems: 'center', justifyContent: 'center', + }, + dialogFooterBorder: { borderTopWidth: StyleSheet.hairlineWidth, borderColor: V.weuiDialogLineColor, borderStyle: 'solid' @@ -90,17 +83,16 @@ const styles = create({ }, dialogFooterOpr: { alignItems: 'center', - justifyContent: 'center' - }, - iosDialogFooterOpr: { + justifyContent: 'center', height: 48, - flex: 1 + flex: 1, }, androidDialogFooterOpr: { height: 42, paddingLeft: 16 * 0.8, paddingRight: 16 * 0.8 }, + dialogFooterOprWithNegativeMarginRight: { marginRight: 0 - (16 * 0.8) }, @@ -109,12 +101,13 @@ const styles = create({ borderColor: V.weuiDialogLineColor, borderStyle: 'solid' }, - iosDialogFooterOprText: { + dialogFooterOprText: { fontSize: 18 }, androidDialogFooterOprText: { fontSize: 16 }, + defaultDialogFooterOprText: { color: '#353535' }, @@ -170,14 +163,15 @@ const Index: React.FC = ( style={[ styles.dialogFooterOpr, styles[`${_type}DialogFooterOpr`], - _type === 'ios' && idx > 0 ? styles.dialogFooterOprWithBorder : {}, - _type === 'android' && idx === buttons.length - 1 ? styles.dialogFooterOprWithNegativeMarginRight : {} + _type === 'android' && idx === buttons.length - 1 ? styles.dialogFooterOprWithNegativeMarginRight : ( + idx > 0 ? styles.dialogFooterOprWithBorder : {} + ), ]} underlayColor={underlayColor} {...others} > {label} ) @@ -200,10 +194,10 @@ const Index: React.FC = ( {title} - + {childrenWithProps} - + {_renderButtons()} @@ -214,7 +208,7 @@ const Index: React.FC = ( Index.propTypes = { autoDectect: PropTypes.bool, - type: PropTypes.oneOf(['ios', 'android']), + type: PropTypes.oneOf(['ios', 'android', 'harmony']), title: PropTypes.string, buttons: PropTypes.arrayOf(PropTypes.object), visible: PropTypes.bool, diff --git a/packages/taro-rn/src/lib/showModal/toast.tsx b/packages/taro-rn/src/lib/showModal/toast.tsx index 6c630177472c..a3fa8eee28aa 100644 --- a/packages/taro-rn/src/lib/showModal/toast.tsx +++ b/packages/taro-rn/src/lib/showModal/toast.tsx @@ -118,7 +118,7 @@ function showToast (options: Taro.showToast.Option): Promise } else if (isLoading) { - ToastView = + ToastView = } else if (icon === 'none') { ToastView = @@ -177,7 +177,7 @@ function showToast (options: Taro.showToast.Option): Promise { +function showLoading (options: Taro.showLoading.Option = { title: "加载中" }): Promise { const isObject = shouldBeObject(options) if (!isObject.res) { const res = { errMsg: `showLoading${isObject.msg}` }