@interactify-live/player-react-native
Version:
React Native library for Interactify player with media display, widgets, and MQTT integration
89 lines (88 loc) • 3.41 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const Widget_1 = __importDefault(require("../Widget"));
const types_1 = require("../types");
// Helper function to convert FontWeightType to React Native font weight
const convertFontWeight = (weight) => {
switch (weight) {
case "100":
return "100";
case "200":
return "200";
case "300":
return "300";
case "400":
return "400";
case "500":
return "500";
case "600":
return "600";
case "700":
return "700";
case "800":
return "800";
case "900":
return "900";
case types_1.FontWeight.NORMAL:
return "normal";
case types_1.FontWeight.BOLD:
return "bold";
case types_1.FontWeight.LIGHTER:
return "lighter";
case types_1.FontWeight.BOLDER:
return "bolder";
default:
return "normal";
}
};
const TextWidget = ({ text = "Sample Text", fontSize = 16, fontFamily, fontWeight = types_1.FontWeight.NORMAL, fontStyle = types_1.FontStyle.NORMAL, color = "#ffffff", backgroundColor = "transparent", textAlign = types_1.Alignment.LEFT, lineHeight, letterSpacing = 0, borderWidth = 0, borderColor = "transparent", borderRadius = 8, maxWidth, maxHeight, overflow = "visible", autoSize = false, minFontSize = 8, maxFontSize = 72, textShadowColor, textShadowOffset, textShadowRadius, padding = 10, paddingHorizontal, paddingVertical, style, ...widgetProps }) => {
const [currentFontSize, setCurrentFontSize] = (0, react_1.useState)(fontSize);
(0, react_1.useEffect)(() => {
setCurrentFontSize(fontSize);
}, [fontSize]);
const textStyle = {
fontSize: currentFontSize,
fontFamily,
fontWeight: convertFontWeight(fontWeight),
fontStyle: fontStyle === types_1.FontStyle.OBLIQUE ? "italic" : fontStyle,
color,
textAlign,
lineHeight,
letterSpacing,
textShadowColor,
textShadowOffset,
textShadowRadius,
};
const containerStyle = {
backgroundColor,
borderWidth,
borderColor,
borderRadius,
padding,
paddingHorizontal,
paddingVertical,
maxWidth,
maxHeight,
overflow,
justifyContent: "center",
alignItems: textAlign === types_1.Alignment.CENTER
? "center"
: textAlign === types_1.Alignment.RIGHT
? "flex-end"
: "flex-start",
};
const { onDragEnd: onDragEndProp, ...restWidgetProps } = widgetProps;
const handleDragEnd = (position) => {
if (onDragEndProp) {
onDragEndProp(position);
}
};
return ((0, jsx_runtime_1.jsx)(Widget_1.default, { ...restWidgetProps, style: [containerStyle, style], onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: textStyle, numberOfLines: autoSize ? undefined : 1, children: text }) }));
};
exports.default = TextWidget;