smh-rn-expo-json-ui-engine/lib/commonjs/render.js

A JSON-driven UI engine for React Native and Expo that enables dynamic, runtime-rendered interfaces without rebuilding the app.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_expoImage=require("expo-image"),_react=require("react"),_flashList=require("@shopify/flash-list"),_smhRnStylesCache=require("smh-rn-styles-cache"),_maskedView=_interopRequireDefault(require("@react-native-masked-view/masked-view")),_expoCheckbox=_interopRequireDefault(require("expo-checkbox")),_expoLinearGradient=require("expo-linear-gradient"),_expoGl=require("expo-gl"),_expoLivePhoto=require("expo-live-photo"),_expoMeshGradient=require("expo-mesh-gradient"),_expoStatusBar=require("expo-status-bar"),_expoVideo=require("expo-video"),_slider=_interopRequireDefault(require("@react-native-community/slider")),_segmentedControl=_interopRequireDefault(require("@react-native-segmented-control/segmented-control")),_lottieReactNative=_interopRequireDefault(require("lottie-react-native")),_reactNativeModalDatetimePicker=_interopRequireDefault(require("react-native-modal-datetime-picker")),_custom=require("./custom.js"),_expoBlur=require("expo-blur"),_expoCamera=require("expo-camera"),_reactNativePagerView=_interopRequireDefault(require("react-native-pager-view")),_picker=require("@react-native-picker/picker"),_types=require("./types.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const UseComponentWrapper=({ref:e,props:t,properties:r})=>{const n=(0,_custom.getComponentEntry)(e);if(!n)return null;const i=(0,_react.useMemo)(()=>{const e={...n.defaultProps,...t},i=(0,_custom.resolvePlaceholders)(n.json,e);return i.type===_types.JSONUIEnums.ContainerTypes.ViewContainer?{...i,properties:r??i.properties}:i},[n,t,r]);return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:renderUIComponent(i)})},ViewContainerWrappers={View:_reactNative.View,SafeAreaView:_reactNativeSafeAreaContext.SafeAreaView,KeyboardAvoidingView:_reactNative.KeyboardAvoidingView,Pressable:_reactNative.Pressable,TouchableHighlight:_reactNative.TouchableHighlight,TouchableOpacity:_reactNative.TouchableOpacity,TouchableWithoutFeedback:_reactNative.TouchableWithoutFeedback,BlurView:_expoBlur.BlurView,CameraView:_expoCamera.CameraView,PagerView:_reactNativePagerView.default},recursiveRenderUIComponent=e=>e?()=>renderUIComponent(e):void 0,cacheSingleStyle=e=>e?(0,_smhRnStylesCache.getCachedStyle)(e):{},renderFlashList=(e,t)=>{const{headerComponent:r,footerComponent:n,emptyComponent:i,itemSeparatorComponent:a,cellRendererComponent:o,stickyHeaderComponent:s}=t||{};return(0,_jsxRuntime.jsx)(_flashList.FlashList,{...e,ListHeaderComponent:recursiveRenderUIComponent(r),ListFooterComponent:recursiveRenderUIComponent(n),ListEmptyComponent:recursiveRenderUIComponent(i),ItemSeparatorComponent:recursiveRenderUIComponent(a),CellRendererComponent:recursiveRenderUIComponent(o),StickyHeaderComponent:recursiveRenderUIComponent(s),renderItem:({item:e})=>renderUIComponent(e)})},renderSectionList=(e,t)=>{const{headerComponent:r,footerComponent:n,emptyComponent:i,itemSeparatorComponent:a,sectionHeaderComponent:o,sectionSeparatorComponent:s,cellRendererComponent:c}=t;return(0,_jsxRuntime.jsx)(_reactNative.SectionList,{...e,renderItem:({item:e})=>renderUIComponent(e),renderSectionHeader:renderUIComponent(o),ListHeaderComponent:recursiveRenderUIComponent(r),ListFooterComponent:recursiveRenderUIComponent(n),ListEmptyComponent:recursiveRenderUIComponent(i),ItemSeparatorComponent:recursiveRenderUIComponent(a),SectionSeparatorComponent:recursiveRenderUIComponent(s),CellRendererComponent:recursiveRenderUIComponent(c)})},renderUIComponent=e=>{const{ContainerTypes:t,LeafTypes:r,ViewWrapperTypes:n,CustomTypes:i}=_types.JSONUIEnums,{type:a,showIf:o,props:s,value:c,wrapperComponent:l,components:u,listProps:p}=e;if(o&&"function"==typeof o&&!o(e))return null;if(!1===o)return null;switch(a){case r.Button:return(0,_jsxRuntime.jsx)(_reactNative.Button,{...s});case r.Text:return(0,_jsxRuntime.jsx)(_reactNative.Text,{style:cacheSingleStyle(s?.style),children:c});case r.Image:return(0,_jsxRuntime.jsx)(_expoImage.Image,{...s,style:cacheSingleStyle(s?.style)});case r.ImageBackground:return(0,_jsxRuntime.jsx)(_expoImage.ImageBackground,{...s,style:cacheSingleStyle(s?.style),imageStyle:cacheSingleStyle(s?.style)});case r.TextInput:return(0,_jsxRuntime.jsx)(_reactNative.TextInput,{...s,style:cacheSingleStyle(s?.style)});case r.SectionList:return renderSectionList(s,u);case r.Checkbox:return(0,_jsxRuntime.jsx)(_expoCheckbox.default,{...s,style:cacheSingleStyle(s?.style)});case r.LinearGradient:return(0,_jsxRuntime.jsx)(_expoLinearGradient.LinearGradient,{...s,style:cacheSingleStyle(s?.style),children:(e.children||[]).map((e,t)=>(0,_jsxRuntime.jsx)(_react.Fragment,{children:renderUIComponent(e)},t))});case r.GLView:return(0,_jsxRuntime.jsx)(_expoGl.GLView,{...s,style:cacheSingleStyle(s?.style)});case r.LivePhotoView:return(0,_jsxRuntime.jsx)(_expoLivePhoto.LivePhotoView,{...s,style:cacheSingleStyle(s?.style)});case r.MeshGradientView:return(0,_jsxRuntime.jsx)(_expoMeshGradient.MeshGradientView,{...s,style:cacheSingleStyle(s?.style)});case r.StatusBar:return(0,_jsxRuntime.jsx)(_expoStatusBar.StatusBar,{...s,style:cacheSingleStyle(s?.style)});case r.VideoView:return(0,_jsxRuntime.jsx)(_expoVideo.VideoView,{...s,style:cacheSingleStyle(s?.style)});case r.DateTimePicker:return(0,_jsxRuntime.jsx)(_reactNativeModalDatetimePicker.default,{...s,style:cacheSingleStyle(s?.style)});case r.Slider:return(0,_jsxRuntime.jsx)(_slider.default,{...s,style:cacheSingleStyle(s?.style)});case r.MaskedView:const o=renderUIComponent(e.maskElement);if(!o)throw new Error("MaskedView requires a valid maskElement.");return(0,_jsxRuntime.jsx)(_maskedView.default,{maskElement:o,children:(e.children||[]).map((e,t)=>(0,_jsxRuntime.jsx)(_react.Fragment,{children:renderUIComponent(e)},t))});case r.SegmentedControl:return(0,_jsxRuntime.jsx)(_segmentedControl.default,{...s,style:cacheSingleStyle(s?.style),tabStyle:cacheSingleStyle(s?.tabStyle),fontStyle:cacheSingleStyle(s?.fontStyle),sliderStyle:cacheSingleStyle(s?.sliderStyle),activeFontStyle:cacheSingleStyle(s?.activeFontStyle)});case r.Picker:return(0,_jsxRuntime.jsx)(_picker.Picker,{...s,style:cacheSingleStyle(s?.style),itemStyle:cacheSingleStyle(s?.itemStyle),children:e.items.map((e,t)=>(0,_react.createElement)(_picker.Picker.Item,{...e,key:t}))});case r.LottieView:return(0,_jsxRuntime.jsx)(_lottieReactNative.default,{...s,style:cacheSingleStyle(s?.style)});case t.ViewContainer:{const t=l||n.View,r=ViewContainerWrappers[t];return(0,_jsxRuntime.jsx)(r,{...s,style:cacheSingleStyle(s?.style),children:e.properties.map((e,t)=>(0,_jsxRuntime.jsx)(_react.Fragment,{children:renderUIComponent(e)},t))})}case t.ListContainer:return renderFlashList(s,u);case t.ViewListContainer:{const e=l||n.View,t=ViewContainerWrappers[e];return(0,_jsxRuntime.jsx)(t,{...s,style:cacheSingleStyle(s?.style),children:renderFlashList(p,u)})}case i.useComponent:return(0,_jsxRuntime.jsx)(UseComponentWrapper,{...e});default:return console.warn("Unknown UI component type",a),null}};var _default=exports.default=renderUIComponent;