codeBox height

Author: alexanderkirtzel

website/docs/destinations/event_mapping.mdx

@@ -153,7 +153,7 @@ to a `WalkerOS.Property`.
 Loops over the first parameter and maps the second to the current value. It is
 used for creating an array of dynamic length.
 
-<DestinationPush event={{ nested: event.nested }}>
+<DestinationPush event={{ nested: event.nested }} height={'256px'}>
   {`{
     data: {
       loop: ['nested', 'data.name']

website/src/components/molecules/codeBox.tsx

@@ -39,6 +39,7 @@ interface CodeBoxProps {
   language?: string;
   inline?: boolean;
   className?: string;
+  height?: number;
 }
 
 const CodeBox: React.FC<CodeBoxProps> = ({
@@ -48,6 +49,7 @@ const CodeBox: React.FC<CodeBoxProps> = ({
   disabled = false,
   language = 'javascript',
   className = '',
+  height,
 }) => {
   const highlightCode = (code: string) => (
     <Highlight theme={prismThemes.palenight} code={code} language={language}>
@@ -68,6 +70,7 @@ const CodeBox: React.FC<CodeBoxProps> = ({
   return (
     <div
       className={`border border-base-300 rounded-lg overflow-hidden bg-gray-800 text-sm ${className}`}
+      style={height && { height: `${height}` }}
     >
       {label && (
         <div className="font-bold px-2 py-1 bg-base-100 text-base">{label}</div>

website/src/components/organisms/mapping.tsx

@@ -20,6 +20,7 @@ interface MappingProps {
   labelMiddle?: string;
   labelRight?: string;
   showMiddle?: boolean;
+  height?: number;
 }
 
 const Mapping: React.FC<MappingProps> = memo(
@@ -34,6 +35,7 @@ const Mapping: React.FC<MappingProps> = memo(
     labelMiddle = 'Custom Config',
     labelRight = 'Result',
     showMiddle = true,
+    height,
   }) => {
     const [left, setLeft] = useState(initLeft);
     const [middle, setMiddle] = useState(initMiddle);
@@ -80,6 +82,7 @@ const Mapping: React.FC<MappingProps> = memo(
             value={left}
             onChange={setLeft}
             className={boxClassNames}
+            height={height}
           />
 
           {showMiddle && (
@@ -88,6 +91,7 @@ const Mapping: React.FC<MappingProps> = memo(
               value={middle}
               onChange={setMiddle}
               className={boxClassNames}
+              height={height}
             />
           )}
 
@@ -96,6 +100,7 @@ const Mapping: React.FC<MappingProps> = memo(
             disabled
             value={right[0] || 'No event yet.'}
             className={boxClassNames}
+            height={height}
           />
         </div>
       </div>

website/src/components/templates/destination.tsx

@@ -102,12 +102,14 @@ interface DestinationPushProps {
   event: WalkerOS.PartialEvent;
   mapping?: Mapping.EventConfig | string;
   children?: React.ReactNode;
+  height?: number;
 }
 
 export const DestinationPush: React.FC<DestinationPushProps> = ({
   event,
   mapping = {},
   children,
+  height,
 }) => {
   const { customConfig, destination, fnName } = useDestinationContext();
   const middleValue = children ?? mapping;
@@ -152,6 +154,7 @@ export const DestinationPush: React.FC<DestinationPushProps> = ({
       middle={formatValue(middleValue)}
       fn={mappingFn}
       options={customConfig}
+      height={height}
     />
   );
 };