-
Notifications
You must be signed in to change notification settings - Fork 382
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(view): view hover style #1769
Conversation
…eat-hover-style
return enableAnimation | ||
? createElement(Animated.View, innerProps, childNode) | ||
const BaseComponent = enableAnimation | ||
? createElement(Animated.View, extendObject({}, innerProps, { style: finalStyle }), childNode) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里不需要extend
@@ -610,3 +612,66 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array | |||
return acc | |||
}, {}) | |||
} | |||
|
|||
export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disabled } : { hoverStyle?: ExtendedViewStyle, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
该钩子也需要应用到mpx-button中
8c3d8b9
to
698f805
Compare
…eat-hover-style
const enableHoverStyle = !!hoverStyle | ||
const enableHoverStyleRef = useRef(enableHoverStyle) | ||
if (enableHoverStyleRef.current !== enableHoverStyle) { | ||
throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
不要throw,而是调用error方法
throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.') | ||
} | ||
|
||
if (!enableHoverStyle) return { enableHoverStyle } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
用enableHoverStyleRef.current来判断
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
isHover需要稳定返回
error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.') | ||
} | ||
|
||
if (!enableStyleAnimation) return { enableStyleAnimation } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
用enableAnimationRef.current来判断
if (disabled) return | ||
runOnJS(setStayTimer)() | ||
}) | ||
}, [disabled]) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
disabled不需要作为依赖,
return Gesture.Pan() | ||
.onTouchesDown(() => { | ||
'worklet' | ||
if (disabled) return |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
disabled在js func中再访问进行判断
} = props | ||
|
||
const pageId = useContext(RouteContext) | ||
|
||
const formContext = useContext(FormContext) | ||
|
||
const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled }) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
enableHoverStyle可以在外部决定,对于button来说只要hoverClass不为none就是true,另外简写为enableHover就行
error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.') | ||
} | ||
|
||
if (!enableAnimationRef.current) return { animationStyle: false } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里应该返回enableStyleAnimation:false
@@ -642,3 +644,64 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array | |||
return acc | |||
}, {}) | |||
} | |||
|
|||
export function useHoverStyle ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
改名为useHover吧
No description provided.