rn-inkpad
Version:
<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />
61 lines (60 loc) • 2.27 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Triangle = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const Triangle = ({ color = 'rgba(0,0,0,0.7)', direction = 'up', height = 12, style, width = 20, }) => {
const getBorderStyle = () => {
switch (direction) {
case 'up':
return {
borderBottomWidth: height,
borderBottomColor: color,
borderLeftWidth: width / 2,
borderLeftColor: 'transparent',
borderRightWidth: width / 2,
borderRightColor: 'transparent',
};
case 'down':
return {
borderTopWidth: height,
borderTopColor: color,
borderLeftWidth: width / 2,
borderLeftColor: 'transparent',
borderRightWidth: width / 2,
borderRightColor: 'transparent',
};
case 'left':
return {
borderRightWidth: height,
borderRightColor: color,
borderTopWidth: width / 2,
borderTopColor: 'transparent',
borderBottomWidth: width / 2,
borderBottomColor: 'transparent',
};
case 'right':
return {
borderLeftWidth: height,
borderLeftColor: color,
borderTopWidth: width / 2,
borderTopColor: 'transparent',
borderBottomWidth: width / 2,
borderBottomColor: 'transparent',
};
}
};
return <react_native_1.View style={[styles.triangle, getBorderStyle(), style]}/>;
};
exports.Triangle = Triangle;
const styles = react_native_1.StyleSheet.create({
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
},
});