sapo-components-ui-rn 1.1.60 → 1.1.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/View/index.d.ts +60 -3
- package/dist/index.esm.js +80 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +80 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/View/index.tsx +200 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
interface ViewProps {
|
|
2
|
+
import { StyleProp, ViewStyle, ViewProps as RNViewProps, AccessibilityProps, LayoutChangeEvent } from "react-native";
|
|
3
|
+
interface ViewProps extends RNViewProps, AccessibilityProps {
|
|
4
4
|
row?: boolean;
|
|
5
5
|
full?: boolean;
|
|
6
6
|
justifyCenter?: boolean;
|
|
@@ -45,6 +45,63 @@ interface ViewProps {
|
|
|
45
45
|
borderColor?: string;
|
|
46
46
|
pointerEvents?: "box-none" | "box-only" | "none" | "auto";
|
|
47
47
|
gap?: number;
|
|
48
|
+
flex?: number;
|
|
49
|
+
flexGrow?: number;
|
|
50
|
+
flexShrink?: number;
|
|
51
|
+
flexBasis?: number | string;
|
|
52
|
+
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
|
|
53
|
+
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
|
|
54
|
+
alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
|
|
55
|
+
alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
|
|
56
|
+
flexWrap?: "wrap" | "nowrap" | "wrap-reverse";
|
|
57
|
+
position?: "absolute" | "relative";
|
|
58
|
+
top?: number;
|
|
59
|
+
left?: number;
|
|
60
|
+
right?: number;
|
|
61
|
+
bottom?: number;
|
|
62
|
+
zIndex?: number;
|
|
63
|
+
elevation?: number;
|
|
64
|
+
shadowColor?: string;
|
|
65
|
+
shadowOffset?: {
|
|
66
|
+
width: number;
|
|
67
|
+
height: number;
|
|
68
|
+
};
|
|
69
|
+
shadowOpacity?: number;
|
|
70
|
+
shadowRadius?: number;
|
|
71
|
+
transform?: Array<{
|
|
72
|
+
perspective?: number;
|
|
73
|
+
rotate?: string;
|
|
74
|
+
rotateX?: string;
|
|
75
|
+
rotateY?: string;
|
|
76
|
+
rotateZ?: string;
|
|
77
|
+
scale?: number;
|
|
78
|
+
scaleX?: number;
|
|
79
|
+
scaleY?: number;
|
|
80
|
+
scaleZ?: number;
|
|
81
|
+
translateX?: number;
|
|
82
|
+
translateY?: number;
|
|
83
|
+
translateZ?: number;
|
|
84
|
+
skewX?: string;
|
|
85
|
+
skewY?: string;
|
|
86
|
+
}>;
|
|
87
|
+
onLayout?: (event: LayoutChangeEvent) => void;
|
|
88
|
+
onMagicTap?: () => void;
|
|
89
|
+
onMoveShouldSetResponder?: () => boolean;
|
|
90
|
+
onMoveShouldSetResponderCapture?: () => boolean;
|
|
91
|
+
onResponderGrant?: () => void;
|
|
92
|
+
onResponderMove?: () => void;
|
|
93
|
+
onResponderReject?: () => void;
|
|
94
|
+
onResponderRelease?: () => void;
|
|
95
|
+
onResponderTerminate?: () => void;
|
|
96
|
+
onResponderTerminationRequest?: () => boolean;
|
|
97
|
+
onStartShouldSetResponder?: () => boolean;
|
|
98
|
+
onStartShouldSetResponderCapture?: () => boolean;
|
|
99
|
+
testID?: string;
|
|
100
|
+
nativeID?: string;
|
|
101
|
+
collapsable?: boolean;
|
|
102
|
+
needsOffscreenAlphaCompositing?: boolean;
|
|
103
|
+
renderToHardwareTextureAndroid?: boolean;
|
|
104
|
+
shouldRasterizeIOS?: boolean;
|
|
48
105
|
}
|
|
49
|
-
declare const _default: React.MemoExoticComponent<({ row, full, justifyCenter, justifyBetween, alignCenter, center, color, backgroundColor, width, height, padding, paddingHorizontal, paddingVertical, marginHorizontal, marginVertical, paddingLeft, paddingRight, paddingTop, alignEnd, wrap, borderBottomWidth, borderBottomColor, borderRadius, borderWidth, borderColor, style, onPress, activeOpacity, children, disabled, paddingBottom, marginTop, marginBottom, marginLeft, marginRight, margin, borderTopWidth, borderTopColor, borderLeftWidth, borderLeftColor, borderRightWidth, borderRightColor, pointerEvents, gap, }: ViewProps) => React.JSX.Element>;
|
|
106
|
+
declare const _default: React.MemoExoticComponent<({ row, full, justifyCenter, justifyBetween, alignCenter, center, color, backgroundColor, width, height, padding, paddingHorizontal, paddingVertical, marginHorizontal, marginVertical, paddingLeft, paddingRight, paddingTop, alignEnd, wrap, borderBottomWidth, borderBottomColor, borderRadius, borderWidth, borderColor, style, onPress, activeOpacity, children, disabled, paddingBottom, marginTop, marginBottom, marginLeft, marginRight, margin, borderTopWidth, borderTopColor, borderLeftWidth, borderLeftColor, borderRightWidth, borderRightColor, pointerEvents, gap, flex, flexGrow, flexShrink, flexBasis, flexDirection, justifyContent, alignItems, alignSelf, flexWrap, position, top, left, right, bottom, zIndex, elevation, shadowColor, shadowOffset, shadowOpacity, shadowRadius, transform, onLayout, onMagicTap, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderGrant, onResponderMove, onResponderReject, onResponderRelease, onResponderTerminate, onResponderTerminationRequest, onStartShouldSetResponder, onStartShouldSetResponderCapture, testID, nativeID, collapsable, needsOffscreenAlphaCompositing, renderToHardwareTextureAndroid, shouldRasterizeIOS, ...restProps }: ViewProps) => React.JSX.Element>;
|
|
50
107
|
export default _default;
|
package/dist/index.esm.js
CHANGED
|
@@ -1386,15 +1386,37 @@ function adaptNavigationTheme(themes) {
|
|
|
1386
1386
|
}
|
|
1387
1387
|
|
|
1388
1388
|
var ViewCustom = function (_a) {
|
|
1389
|
-
var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight, margin = _a.margin, borderTopWidth = _a.borderTopWidth, borderTopColor = _a.borderTopColor, borderLeftWidth = _a.borderLeftWidth, borderLeftColor = _a.borderLeftColor, borderRightWidth = _a.borderRightWidth, borderRightColor = _a.borderRightColor, pointerEvents = _a.pointerEvents, gap = _a.gap
|
|
1389
|
+
var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight, margin = _a.margin, borderTopWidth = _a.borderTopWidth, borderTopColor = _a.borderTopColor, borderLeftWidth = _a.borderLeftWidth, borderLeftColor = _a.borderLeftColor, borderRightWidth = _a.borderRightWidth, borderRightColor = _a.borderRightColor, pointerEvents = _a.pointerEvents, gap = _a.gap,
|
|
1390
|
+
// Additional layout props
|
|
1391
|
+
flex = _a.flex, flexGrow = _a.flexGrow, flexShrink = _a.flexShrink, flexBasis = _a.flexBasis, flexDirection = _a.flexDirection, justifyContent = _a.justifyContent, alignItems = _a.alignItems, alignSelf = _a.alignSelf, flexWrap = _a.flexWrap, position = _a.position, top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom, zIndex = _a.zIndex, elevation = _a.elevation,
|
|
1392
|
+
// Shadow props
|
|
1393
|
+
shadowColor = _a.shadowColor, shadowOffset = _a.shadowOffset, shadowOpacity = _a.shadowOpacity, shadowRadius = _a.shadowRadius,
|
|
1394
|
+
// Transform props
|
|
1395
|
+
transform = _a.transform,
|
|
1396
|
+
// Event handlers
|
|
1397
|
+
onLayout = _a.onLayout, onMagicTap = _a.onMagicTap, onMoveShouldSetResponder = _a.onMoveShouldSetResponder, onMoveShouldSetResponderCapture = _a.onMoveShouldSetResponderCapture, onResponderGrant = _a.onResponderGrant, onResponderMove = _a.onResponderMove, onResponderReject = _a.onResponderReject, onResponderRelease = _a.onResponderRelease, onResponderTerminate = _a.onResponderTerminate, onResponderTerminationRequest = _a.onResponderTerminationRequest, onStartShouldSetResponder = _a.onStartShouldSetResponder, onStartShouldSetResponderCapture = _a.onStartShouldSetResponderCapture,
|
|
1398
|
+
// Test props
|
|
1399
|
+
testID = _a.testID, nativeID = _a.nativeID,
|
|
1400
|
+
// Platform specific
|
|
1401
|
+
collapsable = _a.collapsable, needsOffscreenAlphaCompositing = _a.needsOffscreenAlphaCompositing, renderToHardwareTextureAndroid = _a.renderToHardwareTextureAndroid, shouldRasterizeIOS = _a.shouldRasterizeIOS,
|
|
1402
|
+
// Spread remaining RN View props
|
|
1403
|
+
restProps = __rest(_a, ["row", "full", "justifyCenter", "justifyBetween", "alignCenter", "center", "color", "backgroundColor", "width", "height", "padding", "paddingHorizontal", "paddingVertical", "marginHorizontal", "marginVertical", "paddingLeft", "paddingRight", "paddingTop", "alignEnd", "wrap", "borderBottomWidth", "borderBottomColor", "borderRadius", "borderWidth", "borderColor", "style", "onPress", "activeOpacity", "children", "disabled", "paddingBottom", "marginTop", "marginBottom", "marginLeft", "marginRight", "margin", "borderTopWidth", "borderTopColor", "borderLeftWidth", "borderLeftColor", "borderRightWidth", "borderRightColor", "pointerEvents", "gap", "flex", "flexGrow", "flexShrink", "flexBasis", "flexDirection", "justifyContent", "alignItems", "alignSelf", "flexWrap", "position", "top", "left", "right", "bottom", "zIndex", "elevation", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "transform", "onLayout", "onMagicTap", "onMoveShouldSetResponder", "onMoveShouldSetResponderCapture", "onResponderGrant", "onResponderMove", "onResponderReject", "onResponderRelease", "onResponderTerminate", "onResponderTerminationRequest", "onStartShouldSetResponder", "onStartShouldSetResponderCapture", "testID", "nativeID", "collapsable", "needsOffscreenAlphaCompositing", "renderToHardwareTextureAndroid", "shouldRasterizeIOS"]);
|
|
1390
1404
|
var getStyle = function () {
|
|
1391
1405
|
var styleCustom = {};
|
|
1392
1406
|
if (row) {
|
|
1393
1407
|
styleCustom.flexDirection = "row";
|
|
1394
1408
|
}
|
|
1409
|
+
// Override with explicit prop if provided
|
|
1410
|
+
if (flexDirection !== undefined) {
|
|
1411
|
+
styleCustom.flexDirection = flexDirection;
|
|
1412
|
+
}
|
|
1395
1413
|
if (full) {
|
|
1396
1414
|
styleCustom.flex = 1;
|
|
1397
1415
|
}
|
|
1416
|
+
// Override with explicit prop if provided
|
|
1417
|
+
if (flex !== undefined) {
|
|
1418
|
+
styleCustom.flex = flex;
|
|
1419
|
+
}
|
|
1398
1420
|
if (justifyCenter) {
|
|
1399
1421
|
styleCustom.justifyContent = "center";
|
|
1400
1422
|
}
|
|
@@ -1408,6 +1430,13 @@ var ViewCustom = function (_a) {
|
|
|
1408
1430
|
styleCustom.justifyContent = "center";
|
|
1409
1431
|
styleCustom.alignItems = "center";
|
|
1410
1432
|
}
|
|
1433
|
+
// Override with explicit props if provided
|
|
1434
|
+
if (justifyContent !== undefined) {
|
|
1435
|
+
styleCustom.justifyContent = justifyContent;
|
|
1436
|
+
}
|
|
1437
|
+
if (alignItems !== undefined) {
|
|
1438
|
+
styleCustom.alignItems = alignItems;
|
|
1439
|
+
}
|
|
1411
1440
|
if (color) {
|
|
1412
1441
|
styleCustom.color = color;
|
|
1413
1442
|
}
|
|
@@ -1468,6 +1497,10 @@ var ViewCustom = function (_a) {
|
|
|
1468
1497
|
if (wrap) {
|
|
1469
1498
|
styleCustom.flexWrap = "wrap";
|
|
1470
1499
|
}
|
|
1500
|
+
// Override with explicit prop if provided
|
|
1501
|
+
if (flexWrap !== undefined) {
|
|
1502
|
+
styleCustom.flexWrap = flexWrap;
|
|
1503
|
+
}
|
|
1471
1504
|
if (borderBottomWidth) {
|
|
1472
1505
|
styleCustom.borderBottomWidth = borderBottomWidth;
|
|
1473
1506
|
}
|
|
@@ -1507,11 +1540,56 @@ var ViewCustom = function (_a) {
|
|
|
1507
1540
|
if (gap) {
|
|
1508
1541
|
styleCustom.gap = gap;
|
|
1509
1542
|
}
|
|
1543
|
+
// Additional layout props
|
|
1544
|
+
if (flex !== undefined)
|
|
1545
|
+
styleCustom.flex = flex;
|
|
1546
|
+
if (flexGrow !== undefined)
|
|
1547
|
+
styleCustom.flexGrow = flexGrow;
|
|
1548
|
+
if (flexShrink !== undefined)
|
|
1549
|
+
styleCustom.flexShrink = flexShrink;
|
|
1550
|
+
if (flexBasis !== undefined)
|
|
1551
|
+
styleCustom.flexBasis = flexBasis;
|
|
1552
|
+
if (flexDirection !== undefined)
|
|
1553
|
+
styleCustom.flexDirection = flexDirection;
|
|
1554
|
+
if (justifyContent !== undefined)
|
|
1555
|
+
styleCustom.justifyContent = justifyContent;
|
|
1556
|
+
if (alignItems !== undefined)
|
|
1557
|
+
styleCustom.alignItems = alignItems;
|
|
1558
|
+
if (alignSelf !== undefined)
|
|
1559
|
+
styleCustom.alignSelf = alignSelf;
|
|
1560
|
+
if (flexWrap !== undefined)
|
|
1561
|
+
styleCustom.flexWrap = flexWrap;
|
|
1562
|
+
if (position !== undefined)
|
|
1563
|
+
styleCustom.position = position;
|
|
1564
|
+
if (top !== undefined)
|
|
1565
|
+
styleCustom.top = top;
|
|
1566
|
+
if (left !== undefined)
|
|
1567
|
+
styleCustom.left = left;
|
|
1568
|
+
if (right !== undefined)
|
|
1569
|
+
styleCustom.right = right;
|
|
1570
|
+
if (bottom !== undefined)
|
|
1571
|
+
styleCustom.bottom = bottom;
|
|
1572
|
+
if (zIndex !== undefined)
|
|
1573
|
+
styleCustom.zIndex = zIndex;
|
|
1574
|
+
if (elevation !== undefined)
|
|
1575
|
+
styleCustom.elevation = elevation;
|
|
1576
|
+
// Shadow props
|
|
1577
|
+
if (shadowColor !== undefined)
|
|
1578
|
+
styleCustom.shadowColor = shadowColor;
|
|
1579
|
+
if (shadowOffset !== undefined)
|
|
1580
|
+
styleCustom.shadowOffset = shadowOffset;
|
|
1581
|
+
if (shadowOpacity !== undefined)
|
|
1582
|
+
styleCustom.shadowOpacity = shadowOpacity;
|
|
1583
|
+
if (shadowRadius !== undefined)
|
|
1584
|
+
styleCustom.shadowRadius = shadowRadius;
|
|
1585
|
+
// Transform props
|
|
1586
|
+
if (transform !== undefined)
|
|
1587
|
+
styleCustom.transform = transform;
|
|
1510
1588
|
return StyleSheet.create({ styleCustom: styleCustom }).styleCustom;
|
|
1511
1589
|
};
|
|
1512
1590
|
var defaultStyle = getStyle();
|
|
1513
1591
|
var Component = onPress ? TouchableOpacity : View$1;
|
|
1514
|
-
return (React__default.createElement(Component, { activeOpacity: activeOpacity, onPress: onPress, disabled: disabled, style: [defaultStyle, style] }, children));
|
|
1592
|
+
return (React__default.createElement(Component, __assign({ activeOpacity: activeOpacity, onPress: onPress, disabled: disabled, style: [defaultStyle, style], onLayout: onLayout, onMagicTap: onMagicTap, onMoveShouldSetResponder: onMoveShouldSetResponder, onMoveShouldSetResponderCapture: onMoveShouldSetResponderCapture, onResponderGrant: onResponderGrant, onResponderMove: onResponderMove, onResponderReject: onResponderReject, onResponderRelease: onResponderRelease, onResponderTerminate: onResponderTerminate, onResponderTerminationRequest: onResponderTerminationRequest, onStartShouldSetResponder: onStartShouldSetResponder, onStartShouldSetResponderCapture: onStartShouldSetResponderCapture, testID: testID, nativeID: nativeID, collapsable: collapsable, needsOffscreenAlphaCompositing: needsOffscreenAlphaCompositing, renderToHardwareTextureAndroid: renderToHardwareTextureAndroid, shouldRasterizeIOS: shouldRasterizeIOS }, restProps), children));
|
|
1515
1593
|
};
|
|
1516
1594
|
var View = React__default.memo(ViewCustom);
|
|
1517
1595
|
|