Skip to content

Commit

Permalink
Merge pull request #1650 from didi/feat-comps-common-style
Browse files Browse the repository at this point in the history 
Feat comps common style
  • Loading branch information
@yandadaFreedom
yandadaFreedom authored Oct 15, 2024
2 parents 6758be3 + 2db01c2 commit 810b09f
Show file tree
Hide file tree
Showing 9 changed files with 417 additions and 248 deletions.
107 changes: 60 additions & 47 deletions packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,22 +35,21 @@
* ✔ bindtap
*/
import { useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'

import {
View,
Text,
StyleSheet,
ViewStyle,
TextStyle,
Animated,
Easing,
NativeSyntheticEvent
NativeSyntheticEvent,
LayoutChangeEvent
} from 'react-native'
import { splitStyle, isText, every, splitProps, throwReactWarning } from './utils'
import { splitProps, splitStyle, throwReactWarning, useTransformStyle } from './utils'
import useInnerProps, { getCustomEvent } from './getInnerListeners'
import useNodesRef, { HandlerRef } from './useNodesRef'
import { FormContext } from './context'
import { isEmptyObject } from '@mpxjs/utils'
import { wrapChildren } from './common'

export type Type = 'default' | 'primary' | 'warn'

Expand All @@ -76,6 +75,8 @@ export interface ButtonProps {
'open-type'?: OpenType
'form-type'?: 'submit' | 'reset'
'enable-offset'?: boolean,
'enable-var'?: boolean
'external-var-context'?: Record<string, any>
style?: ViewStyle & TextStyle & Record<string, any>
children: ReactNode
bindgetuserinfo?: (userInfo: any) => void
Expand Down Expand Up @@ -180,7 +181,9 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }} />
}

const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, ref): JSX.Element => {
const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonProps, ref): JSX.Element => {
const { textProps, innerProps: props = {} } = splitProps(buttonProps)

const {
size = 'default',
type = 'default',
Expand All @@ -194,6 +197,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
'open-type': openType,
'enable-offset': enableOffset,
'form-type': formType,
'enable-var': enableVar,
'external-var-context': externalVarContext,
style = {},
children,
bindgetuserinfo,
Expand Down Expand Up @@ -228,14 +233,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re

const applyHoverEffect = isHover && hoverClass !== 'none'

const { textStyle, imageStyle, innerStyle } = splitStyle(style)

const { textStyle: hoverTextStyle, imageStyle: hoverImageStyle, innerStyle: hoverInnerStyle } = splitStyle(hoverStyle)

if (imageStyle || hoverImageStyle) {
throwReactWarning('[Mpx runtime warn]: Button does not support background image-related styles!')
}

const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]

const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color
Expand Down Expand Up @@ -278,6 +275,32 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
color: plain ? plainTextColor : normalTextColor
}

const defaultStyle = {
...defaultViewStyle,
...defaultTextStyle
}

const styleObj = {
...defaultStyle,
...style,
...(applyHoverEffect && hoverStyle)
}

const {
normalStyle,
hasPercent,
hasVarDec,
varContextRef,
setContainerWidth,
setContainerHeight
} = useTransformStyle(styleObj, { enableVar, externalVarContext })

const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)

if (backgroundStyle) {
throwReactWarning('[Mpx runtime warn]: Button does not support background image-related styles!')
}

const handleOpenTypeEvent = (evt: NativeSyntheticEvent<TouchEvent>) => {
if (!openType) return
const handleEvent = getOpenTypeEvent(openType)
Expand Down Expand Up @@ -334,39 +357,29 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
resetFn && resetFn()
}
}

const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
if (disabled) return
bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
handleOpenTypeEvent(evt)
handleFormTypeFn()
}

function wrapChildren (children: ReactNode, defaultTextStyle: Record<string, any>, textStyle: Record<string, any>) {
if (!children) return children
const hasTextStyle = !isEmptyObject(textStyle)
const { textProps } = splitProps(props)

if (every(children, (child) => isText(child))) {
children = <Text key='buttonTextWrap' style={{ ...defaultTextStyle, ...textStyle }} {...(textProps || {})}>{children}</Text>
} else {
if (hasTextStyle) throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Button is Text node!')
}

return children
}

const { nodeRef } = useNodesRef(props, ref, {
defaultStyle: {
...defaultViewStyle,
...defaultTextStyle,
...textStyle
}
defaultStyle
})

const onLayout = () => {
nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
})
const onLayout = (res: LayoutChangeEvent) => {
if (hasPercent) {
const { width, height } = res?.nativeEvent?.layout || {}
setContainerWidth(width || 0)
setContainerHeight(height || 0)
}
if (enableOffset) {
nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
})
}
}

const innerProps = useInnerProps(
Expand All @@ -376,7 +389,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
bindtouchstart: onTouchStart,
bindtouchend: onTouchEnd,
bindtap: onTap,
...(enableOffset ? { onLayout } : {})
...(enableOffset || hasPercent ? { onLayout } : {})
},
[
'enable-offset'
Expand All @@ -390,19 +403,19 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
return (
<View
{...innerProps}
style={{
...defaultViewStyle,
...innerStyle,
...(applyHoverEffect && hoverInnerStyle)
} as ViewStyle}>
style={innerStyle}
>
{loading && <Loading alone={!children} />}
{
wrapChildren(
children,
defaultTextStyle,
props,
{
hasVarDec,
varContext: varContextRef.current
},
{
...textStyle,
...(applyHoverEffect && hoverTextStyle)
textStyle,
textProps
}
)
}
Expand Down
29 changes: 24 additions & 5 deletions packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,15 @@ import {
import { FormContext, FormFieldValue, CheckboxGroupContext, GroupValue } from './context'
import useInnerProps, { getCustomEvent } from './getInnerListeners'
import useNodesRef, { HandlerRef } from './useNodesRef'
import { throwReactWarning } from './utils'
import { throwReactWarning, useTransformStyle } from './utils'
import { wrapChildren } from './common'

export interface CheckboxGroupProps {
name: string
style?: ViewStyle & Record<string, any>
'enable-offset'?: boolean
'enable-var'?: boolean
'external-var-context'?: Record<string, any>
children: ReactNode
bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
}
Expand All @@ -33,7 +36,8 @@ const CheckboxGroup = forwardRef<
const {
style = {},
'enable-offset': enableOffset,
children,
'enable-var': enableVar,
'external-var-context': externalVarContext,
bindchange
} = props

Expand All @@ -50,9 +54,16 @@ const CheckboxGroup = forwardRef<

const defaultStyle = {
flexDirection: 'row',
flexWrap: 'wrap',
flexWrap: 'wrap'
}

const styleObj = {
...defaultStyle,
...style
}

const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(styleObj, { enableVar, externalVarContext })

const { nodeRef } = useNodesRef(props, ref, {
defaultStyle
})
Expand Down Expand Up @@ -124,7 +135,7 @@ const CheckboxGroup = forwardRef<
props,
{
ref: nodeRef,
style: defaultStyle,
style: normalStyle,
...(enableOffset ? { onLayout } : {})
},
['enable-offset'],
Expand All @@ -136,7 +147,15 @@ const CheckboxGroup = forwardRef<
return (
<View {...innerProps}>
<CheckboxGroupContext.Provider value={{ groupValue, notifyChange }}>
{children}
{
wrapChildren(
props,
{
hasVarDec,
varContext: varContextRef.current
}
)
}
</CheckboxGroupContext.Provider>
</View>
)
Expand Down
Loading

0 comments on commit 810b09f

Please sign in to comment.