Skip to content

Commit

Permalink
feat(rn): 更新 ReactNative 支持的 PropTypes (#16405)
Browse files Browse the repository at this point in the history
Co-authored-by: ZEJIA LIU <[email protected]>
  • Loading branch information
koppthe and ZEJIA-LIU authored Aug 26, 2024
1 parent 7795c9d commit 7b7477f
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 48 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ const ImageStylePropTypes = {
borderColor: ColorPropType,
borderWidth: ReactPropTypes.number,
borderRadius: ReactPropTypes.number,
cursor: ReactPropTypes.oneOf(['auto', 'pointer']),
overflow: ReactPropTypes.oneOf(['visible', 'hidden']),
objectFit: ReactPropTypes.oneOf(['cover', 'contain', 'fill', 'scale-down']),

/**
* Changes the color of all the non-transparent pixels to the tintColor.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,7 @@ const LayoutPropTypes = {
* for more details on how `position` differs between React Native
* and CSS.
*/
position: ReactPropTypes.oneOf(['absolute', 'relative']),
position: ReactPropTypes.oneOf(['absolute', 'relative', 'static']),

/** `flexDirection` controls which directions children of a container go.
* `row` goes left to right, `column` goes top to bottom, and you may
Expand Down Expand Up @@ -476,7 +476,8 @@ const LayoutPropTypes = {
'center',
'stretch',
'space-between',
'space-around'
'space-around',
'space-evenly'
]),

/** `overflow` controls how children are measured and displayed.
Expand Down Expand Up @@ -553,7 +554,29 @@ const LayoutPropTypes = {
* for more details.
* @platform ios
*/
direction: ReactPropTypes.oneOf(['inherit', 'ltr', 'rtl'])
direction: ReactPropTypes.oneOf(['inherit', 'ltr', 'rtl']),

/**
* In React Native, gap works the same way it does in CSS.
* If there are two or more children in a container, they will be separated from each other
* by the value of the gap - but the children will not be separated from the edges of their parent container.
* For horizontal gaps, use columnGap, for vertical gaps, use rowGap, and to apply both at the same time, it's gap.
* When align-content or justify-content are set to space-between or space-around, the separation
* between children may be larger than the gap value.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details.
*/
rowGap: ReactPropTypes.oneOfType([
ReactPropTypes.number,
ReactPropTypes.string
]),
columnGap: ReactPropTypes.oneOfType([
ReactPropTypes.number,
ReactPropTypes.string
]),
gap: ReactPropTypes.oneOfType([
ReactPropTypes.number,
ReactPropTypes.string
]),
}

export default LayoutPropTypes
Original file line number Diff line number Diff line change
Expand Up @@ -38,87 +38,79 @@ const TextStylePropTypes = {
'600',
'700',
'800',
'900'
'900',
'ultralight',
'thin',
'light',
'medium',
'regular',
'semibold',
'condensedBold',
'condensed',
'heavy',
'black'
]),
/**
* @platform ios
*/
fontVariant: ReactPropTypes.arrayOf(
ReactPropTypes.oneOf([
'small-caps',
'oldstyle-nums',
'lining-nums',
'tabular-nums',
'proportional-nums'
])
),
textShadowOffset: ReactPropTypes.shape({
width: ReactPropTypes.number,
height: ReactPropTypes.number
}),
textShadowRadius: ReactPropTypes.number,
textShadowColor: ColorPropType,
/**
* @platform ios
*/
letterSpacing: ReactPropTypes.number,
lineHeight: ReactPropTypes.number,
/**
* Specifies text alignment. The value 'justify' is only supported on iOS and
* fallbacks to `left` on Android.
*/
textAlign: ReactPropTypes.oneOf([
'auto' /* default */,
'auto',
'left',
'right',
'center',
'justify'
]),
/**
* @platform android
*/
textAlignVertical: ReactPropTypes.oneOf([
'auto' /* default */,
'top',
'bottom',
'center'
]),
/**
* Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders.
* With some fonts, this padding can make text look slightly misaligned when centered vertically.
* For best results also set `textAlignVertical` to `center`. Default is true.
* @platform android
*/
includeFontPadding: ReactPropTypes.bool,
textDecorationLine: ReactPropTypes.oneOf([
'none' /* default */,
'none',
'underline',
'line-through',
'underline line-through'
]),
textTransform: ReactPropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
userSelect: ReactPropTypes.oneOf(['auto', 'none', 'text', 'contain', 'all']),

/**
* @platform ios
*/
fontVariant: ReactPropTypes.arrayOf(
ReactPropTypes.oneOf([
'small-caps',
'oldstyle-nums',
'lining-nums',
'tabular-nums',
'proportional-nums'
])
),
textDecorationColor: ColorPropType,
textDecorationStyle: ReactPropTypes.oneOf([
'solid' /* default */,
'double',
'dotted',
'dashed'
]),
writingDirection: ReactPropTypes.oneOf(['auto' /* default */, 'ltr', 'rtl']),

/**
* @platform ios
* @platform android
*/
textDecorationColor: ColorPropType,
textTransform: ReactPropTypes.oneOf([
'none' /* default */,
'capitalize',
'uppercase',
'lowercase'
]),
textAlignVertical: ReactPropTypes.oneOf(['auto', 'top', 'bottom', 'center']),
verticalAlign: ReactPropTypes.oneOf(['auto', 'top', 'bottom', 'middle']),
/**
* @platform ios
* Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders.
* With some fonts, this padding can make text look slightly misaligned when centered vertically.
* For best results also set `textAlignVertical` to `center`. Default is true.
* @platform android
*/
writingDirection: ReactPropTypes.oneOf(['auto' /* default */, 'ltr', 'rtl'])
includeFontPadding: ReactPropTypes.bool,
}

export default TextStylePropTypes
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,15 @@ const TransformPropTypes = {
ReactPropTypes.shape({ skewY: ReactPropTypes.string })
])
),
transformOrigin: ReactPropTypes.oneOfType([
ReactPropTypes.arrayOf(
ReactPropTypes.oneOfType([
ReactPropTypes.number,
ReactPropTypes.string
])
),
ReactPropTypes.string
]),

/**
* Deprecated. Use the transform prop instead.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ const ViewStylePropTypes = {
backfaceVisibility: ReactPropTypes.oneOf(['visible', 'hidden']),
backgroundColor: ColorPropType,
borderColor: ColorPropType,
borderBlockColor: ColorPropType,
borderBlockStartColor: ColorPropType,
borderBlockEndColor: ColorPropType,
borderTopColor: ColorPropType,
borderRightColor: ColorPropType,
borderBottomColor: ColorPropType,
Expand All @@ -42,21 +45,34 @@ const ViewStylePropTypes = {
borderBottomRightRadius: ReactPropTypes.number,
borderBottomStartRadius: ReactPropTypes.number,
borderBottomEndRadius: ReactPropTypes.number,
borderStartStartRadius: ReactPropTypes.number,
borderStartEndRadius: ReactPropTypes.number,
borderEndStartRadius: ReactPropTypes.number,
borderEndEndRadius: ReactPropTypes.number,
borderStyle: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']),
borderWidth: ReactPropTypes.number,
borderTopWidth: ReactPropTypes.number,
borderRightWidth: ReactPropTypes.number,
borderBottomWidth: ReactPropTypes.number,
borderLeftWidth: ReactPropTypes.number,
opacity: ReactPropTypes.number,
pointerEvents: ReactPropTypes.oneOf(['box-none', 'none', 'box-only', 'auto']),
cursor: ReactPropTypes.oneOf(['auto', 'pointer']),

/**
* (Android-only) Sets the elevation of a view, using Android's underlying
* [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).
* This adds a drop shadow to the item and affects z-order for overlapping views.
* Only supported on Android 5.0+, has no effect on earlier versions.
* @platform android
*/
elevation: ReactPropTypes.number
elevation: ReactPropTypes.number,

/**
* On iOS 13+, it is possible to change the corner curve of borders.
* @platform ios
*/
borderCurve: ReactPropTypes.oneOf(['circular', 'continuous'])
}

export default ViewStylePropTypes

0 comments on commit 7b7477f

Please sign in to comment.