diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts index 6fdc6b07a279..a4aa8e4b3d5b 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts @@ -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. diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts index 17a25237c262..76c444e4ff5a 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts @@ -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 @@ -476,7 +476,8 @@ const LayoutPropTypes = { 'center', 'stretch', 'space-between', - 'space-around' + 'space-around', + 'space-evenly' ]), /** `overflow` controls how children are measured and displayed. @@ -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 diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts index a162b368e868..3ac07e4f1f53 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts @@ -38,29 +38,24 @@ 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, /** @@ -68,57 +63,54 @@ const TextStylePropTypes = { * 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 diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts index f9277f6b51cc..eecf88713ce1 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts @@ -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. diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts index 977835c89195..0452f908ebce 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts @@ -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, @@ -42,6 +45,10 @@ 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, @@ -49,6 +56,9 @@ const ViewStylePropTypes = { 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). @@ -56,7 +66,13 @@ const ViewStylePropTypes = { * 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