{"version":3,"file":"TimeDisplay.CCono7g0.mjs","names":["useState","useMemo","React","_Fragment"],"sources":["https:/framerusercontent.com/modules/mHB8Cz8fZJcGsfs3502z/dwUWnI0aE4dQHen8QfjN/TimeDisplay.js"],"sourcesContent":["import{jsx as _jsx,Fragment as _Fragment}from\"react/jsx-runtime\";import React,{cloneElement,useEffect,useState,useMemo,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * TimeDisplay\n * @framerDisableUnlink\n *\n * This component takes a Framer component instance as a child, traverses its\n * element tree, finds the deepest text string that contains curly braces {},\n * and replaces the content within the braces with a new, dynamic string\n * based on the current time and a user-specified timezone.\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 50\n * @framerIntrinsicHeight 10\n */export default function TimeDisplay(props){const{textLayer,timeZone,style,showTime,showDate,formatTime,formatDate}=props;const[now,setNow]=useState(new Date);const[tzValid,setTzValid]=useState(true);// Add a state to track if the component has mounted on the client\nconst[isMounted,setIsMounted]=useState(false);// Set isMounted to true after the first render on the client\nuseEffect(()=>{setIsMounted(true);},[]);// Use a useEffect hook to update the time every second\nuseEffect(()=>{// This effect should also wait for the component to be mounted to avoid hydration errors\nif(!isMounted)return;const interval=setInterval(()=>{startTransition(()=>setNow(new Date));},1e3);return()=>clearInterval(interval);},[isMounted]);// Use a useEffect hook to validate the timezone when it changes\nuseEffect(()=>{// This validation must also wait until the client has mounted\nif(!isMounted)return;let tz=timeZone;if(!tz){// Default to user's timezone if not provided\ntz=Intl.DateTimeFormat().resolvedOptions().timeZone||\"UTC\";}try{Intl.DateTimeFormat(undefined,{timeZone:tz});setTzValid(true);}catch{setTzValid(false);}},[timeZone,isMounted]);// Memoize the formatted time to avoid unnecessary recalculations\nconst formattedTime=useMemo(()=>{// Return a stable value for server-side rendering\nif(!isMounted){// A simple, predictable placeholder that won't cause a mismatch\nreturn\" \";}let tz=timeZone;if(!tz){// Default to user's timezone if not provided\ntz=Intl.DateTimeFormat().resolvedOptions().timeZone||\"UTC\";}if(!tzValid)return\"Invalid TZ\";try{const options={};if(showDate){if(formatDate.showYear)options.year=formatDate.yearFormat;if(formatDate.showMonth)options.month=formatDate.monthFormat;if(formatDate.showDay)options.day=formatDate.dayFormat;}if(showTime){if(formatTime.showHours)options.hour=formatTime.hourFormat;if(formatTime.showMinutes)options.minute=formatTime.minuteFormat;if(formatTime.showSeconds)options.second=formatTime.secondFormat;if(formatTime.timeZoneName!==\"none\"){options.timeZoneName=formatTime.timeZoneName;}}options.timeZone=tz;return new Intl.DateTimeFormat(undefined,options).format(now);}catch{return\"Invalid TZ\";}},[now,timeZone,tzValid,showTime,showDate,formatTime,formatDate,isMounted]);/**\n     * Recursively traverses a React element tree to find a text string\n     * containing curly braces {} and replaces the content inside.\n     *\n     * @param children The current children to process (can be a string, array, or React element).\n     * @returns The modified children with the target string replaced.\n     */const processChildren=children=>{// Base Case 1: If the children is a string\nif(typeof children===\"string\"){// Check if the string contains the curly braces\nif(children.includes(\"{\")&&children.includes(\"}\")){// Use a regular expression to find the content inside the braces and replace it\nreturn children.replace(/\\{[^}]*\\}/g,`${formattedTime}`);}// If it's a string but doesn't match, return it unchanged\nreturn children;}// Base Case 2: If the children is an array of elements/strings\nif(Array.isArray(children)){// Recursively process each item in the array\nreturn children.map((child,index)=>/*#__PURE__*/_jsx(React.Fragment,{children:processChildren(child)},index));}// Recursive Step: If the children is a valid React element\nif(/*#__PURE__*/React.isValidElement(children)){// Check if the element has children of its own\nif(children.props.children){// Recursively process the nested children\nconst newChildren=processChildren(children.props.children);// Clone the element with the same props, but with the new children\nreturn /*#__PURE__*/cloneElement(children,{},newChildren);}}// Return the original children if no modification is needed\nreturn children;};// Call the recursive function on the main textLayer prop\nconst modifiedTextLayer=processChildren(textLayer);// Render the component with the newly processed children\nreturn /*#__PURE__*/_jsx(_Fragment,{children:modifiedTextLayer});}TimeDisplay.displayName=\"Dynamic Time\";// Use standard React defaultProps to handle missing props\nTimeDisplay.defaultProps={textLayer:null,timeZone:\"America/Los_Angeles\",showDate:false,showTime:true,formatTime:{showHours:true,showMinutes:true,showSeconds:true,timeZoneName:\"short\",hourFormat:\"2-digit\",minuteFormat:\"2-digit\",secondFormat:\"2-digit\"},formatDate:{showDay:true,showMonth:true,showYear:true,dayFormat:\"numeric\",monthFormat:\"short\",yearFormat:\"numeric\"}};// Add property controls for Framer to expose the \"Text Layer\" and \"Time Zone\"\naddPropertyControls(TimeDisplay,{textLayer:{type:ControlType.ComponentInstance,title:\"Time Layer\",description:\"This component dynamically modifies the content inside curly braces {}. Example: Cupertino, US - {11:24 GMT-7}\"},timeZone:{type:ControlType.String,title:\"Time Zone\",defaultValue:\"America/Los_Angeles\",placeholder:\"IANA Timezone (e.g. Europe/London)\",description:\"[List of TZ Identifiers](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)\"},showTime:{type:ControlType.Boolean,title:\"Show Time\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},formatTime:{type:ControlType.Object,title:\"Format\",buttonTitle:\"Time Format\",controls:{showHours:{type:ControlType.Boolean,title:\"Hours\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},hourFormat:{type:ControlType.Enum,title:\"Hour Format\",options:[\"numeric\",\"2-digit\"],defaultValue:\"2-digit\",hidden:({showHours})=>!showHours},showMinutes:{type:ControlType.Boolean,title:\"Minutes\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},minuteFormat:{type:ControlType.Enum,title:\"Minute Format\",options:[\"numeric\",\"2-digit\"],defaultValue:\"2-digit\",hidden:({showMinutes})=>!showMinutes},showSeconds:{type:ControlType.Boolean,title:\"Seconds\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},secondFormat:{type:ControlType.Enum,title:\"Seconds Format\",options:[\"numeric\",\"2-digit\"],defaultValue:\"2-digit\",hidden:({showSeconds})=>!showSeconds},timeZoneName:{type:ControlType.Enum,title:\"Timezone\",options:[\"none\",\"short\",\"long\",\"shortOffset\",\"longOffset\"],optionTitles:[\"Hide\",\"Short\",\"Long\",\"Short Offset\",\"Long Offset\"],defaultValue:\"short\"}},hidden:({showTime})=>!showTime},showDate:{type:ControlType.Boolean,title:\"Show Date\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},formatDate:{type:ControlType.Object,title:\"Date\",buttonTitle:\"Date Format\",controls:{showDay:{type:ControlType.Boolean,title:\"Day\",defaultValue:true},dayFormat:{type:ControlType.Enum,title:\"Day Format\",options:[\"numeric\",\"2-digit\"],defaultValue:\"numeric\",hidden:({showDay})=>!showDay},showMonth:{type:ControlType.Boolean,title:\"Month\",defaultValue:true},monthFormat:{type:ControlType.Enum,title:\"Month Format\",options:[\"numeric\",\"2-digit\",\"long\",\"short\",\"narrow\"],defaultValue:\"short\",hidden:({showMonth})=>!showMonth},showYear:{type:ControlType.Boolean,title:\"Year\",defaultValue:true},yearFormat:{type:ControlType.Enum,title:\"Year Format\",options:[\"numeric\",\"2-digit\"],defaultValue:\"numeric\",hidden:({showYear})=>!showYear}},hidden:({showDate})=>!showDate}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TimeDisplay\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"*\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TimeDisplay.map"],"mappings":"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"}