feature/carplay panel

apps/example/ios/Podfile

@@ -8,6 +8,9 @@ require Pod::Executable.execute_command('node', ['-p',
 platform :ios, min_ios_version_supported
 prepare_react_native_project!
 
+require 'json'
+podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
+
 linkage = ENV['USE_FRAMEWORKS']
 if linkage != nil
   Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
@@ -31,5 +34,16 @@ target 'example' do
       :mac_catalyst_enabled => false,
       # :ccache_enabled => true
     )
+
+    min_ios = podfile_properties['ios.deploymentTarget'] || '15.0'
+
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+        current = config.build_settings['IPHONEOS_DEPLOYMENT_TARGET']
+        if current && current.to_f < min_ios.to_f
+          config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = min_ios
+        end
+      end
+    end
   end
 end

apps/example/ios/Podfile.lock

@@ -2624,7 +2624,7 @@ PODS:
     - React-perflogger (= 0.83.5)
     - React-utils (= 0.83.5)
     - SocketRocket
-  - ReactNativeAutoPlay (0.5.4):
+  - ReactNativeAutoPlay (0.5.8):
     - boost
     - DoubleConversion
     - fast_float
@@ -2995,10 +2995,10 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: 105856c6da6fe71c545dec3c2466ae04f25f9a73
   ReactCodegen: 507d02fe6f19c44a3274adbefd38a1a252843d24
   ReactCommon: 506ceb24983c6b80e0075968be21aac74a367739
-  ReactNativeAutoPlay: 3b9861a5d5c31de1488b21616e8e21c0519b805b
+  ReactNativeAutoPlay: 75b714066e0f88147d2686ea198f7e78d44f2da5
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 897e8c1fb1fd80c3c01231ed4ec8c1ffa652c29f
 
-PODFILE CHECKSUM: a5de45e2350a9515567a6e18ca8ceea718b48523
+PODFILE CHECKSUM: 363150b1f5d8414931fc45ff869b81c648a10fe1
 
 COCOAPODS: 1.16.2

apps/example/src/AutoPlay.tsx

@@ -267,6 +267,94 @@ const registerRunnable = () => {
       onDidChangePanningInterface: (isPanningInterfaceVisible) => {
         console.log('onDidChangePanningInterface', isPanningInterfaceVisible);
       },
+      optionsPanel: {
+        title: { text: 'options' },
+        sections: [
+          {
+            type: 'grid',
+            buttons: [
+              { title: { text: '#1' }, image: { type: 'glyph', name: '123' }, onPress: () => {} },
+              { title: { text: '#2' }, image: { type: 'glyph', name: '123' }, onPress: () => {} },
+            ],
+            title: 'grid',
+          },
+          {
+            title: 'radio',
+            type: 'list',
+            items: [
+              { type: 'radio', selected: true, title: { text: '#1' }, onPress: () => {} },
+              { type: 'radio', title: { text: '#2' }, onPress: () => {} },
+            ],
+          },
+          {
+            title: 'mixed list',
+            type: 'list',
+            items: [
+              { type: 'default', title: { text: '#1' }, onPress: () => {} },
+              { type: 'default', title: { text: '#2' }, onPress: () => {} },
+              { type: 'text', title: { text: 'text only' } },
+              {
+                type: 'toggle',
+                title: { text: 'toggle' },
+                checked: false,
+                onPress: (_, checked) => {
+                  console.log('*** toggle checked', checked);
+                },
+              },
+            ],
+          },
+          {
+            type: 'charger',
+            location: {
+              coordinate: {
+                latitude: 0,
+                longitude: 0,
+              },
+              travelEstimates: {
+                distance: { unit: 'kilometers', value: 12 },
+                duration: { timezone: 'Europe/Vienna', seconds: 600 },
+                visible: true,
+              },
+              address: 'charger ave.',
+              name: 'Fast Network Inc.',
+            },
+            outlets: [
+              { connector: 'ccs2', powerKw: 300, voltage: 400, onPress: () => {} },
+              { connector: 'chaDeMo', powerKw: 50, voltage: 400, onPress: () => {} },
+              { connector: 'mennekes', powerKw: 3.7, voltage: 230, onPress: () => {} },
+            ],
+          },
+        ],
+        actions: [
+          {
+            type: 'text',
+            title: 'rm panel',
+            onPress: (t) => {
+              t.updateOptionsPanel();
+            },
+          },
+          {
+            type: 'image',
+            image: { type: 'glyph', name: 'rocket' },
+            onPress: (t) => {
+              t.updateOptionsPanel({
+                title: { text: 'options' },
+                sections: [
+                  {
+                    type: 'charger',
+                    outlets: [
+                      { connector: 'ccs2', powerKw: 1500, voltage: 800 },
+                      { connector: 'ccs2', powerKw: 1500, voltage: 800 },
+                      { connector: 'ccs2', powerKw: 1500, voltage: 800 },
+                    ],
+                    title: 'blazing fast charger',
+                  },
+                ],
+              });
+            },
+          },
+        ],
+      },
     });
     rootTemplate.setRootTemplate();
   };

apps/example/src/templates/AutoInformationTemplate.ts

@@ -12,50 +12,92 @@ const defaultColor =
 const getTemplate = (props?: {
   mapConfig?: InformationTemplateConfig['mapConfig'];
 }): InformationTemplate => {
-  return new InformationTemplate({
-    title: {
-      text: `${TextPlaceholders.Distance} - ${TextPlaceholders.Duration}`,
-      distance: { unit: 'meters', value: 1234 },
-      duration: 4711,
+  const title = {
+    text: `${TextPlaceholders.Distance} - ${TextPlaceholders.Duration}`,
+    distance: { unit: 'meters' as const, value: 1234 },
+    duration: 4711,
+  };
+
+  const items: InformationTemplateConfig['items'] = [
+    {
+      type: 'text',
+      title,
+      detailedText: title,
+      image: { name: 'text_ad', color: defaultColor, type: 'glyph' },
     },
-    mapConfig: props?.mapConfig,
-    headerActions: AutoTemplate.headerActions,
-    items: [
-      {
-        type: 'text',
-        title: {
-          text: `${TextPlaceholders.Distance} - ${TextPlaceholders.Duration}`,
-          distance: { unit: 'meters', value: 1234 },
-          duration: 4711,
-        },
-        detailedText: {
-          text: `${TextPlaceholders.Distance} - ${TextPlaceholders.Duration}`,
-          distance: { unit: 'meters', value: 1234 },
-          duration: 4711,
-        },
-        image: { name: 'text_ad', color: defaultColor, type: 'glyph' },
-      },
-      {
-        type: 'text',
-        title: { text: 'Title 2' },
-        detailedText: { text: 'Text2' },
-        image: { name: 'text_ad', color: defaultColor, type: 'glyph' },
+    {
+      type: 'text',
+      title: { text: 'Title 2' },
+      detailedText: { text: 'Text2' },
+      image: { name: 'text_ad', color: defaultColor, type: 'glyph' },
+    },
+    {
+      type: 'text',
+      title: { text: 'Title 3\nwith 2 rows\nCan i add one more? - oh no it truncates me :(' },
+      detailedText: {
+        text: [
+          'some longer text',
+          'with two rows',
+          'do three work?',
+          'oh yes they do!',
+          'and another one? - nope, this one is cut off',
+        ].join('\n'),
       },
-      {
-        type: 'text',
-        title: { text: 'Title 3\nwith 2 rows\nCan i add one more? - oh no it truncates me :(' },
-        detailedText: {
-          text: [
-            'some longer text',
-            'with two rows',
-            'do three work?',
-            'oh yes they do!',
-            'and another one? - nope, this one is cut off',
-          ].join('\n'),
-        },
-        image: { name: 'text_ad', color: defaultColor, type: 'glyph' },
+      image: { name: 'text_ad', color: defaultColor, type: 'glyph' },
+    },
+  ];
+
+  const commonConfig = {
+    title,
+    headerActions: AutoTemplate.headerActions,
+    items,
+    onPopped: () => console.log('InformationTemplate onPopped'),
+  };
+
+  if (props?.mapConfig) {
+    return new InformationTemplate({
+      ...commonConfig,
+      mapConfig: props.mapConfig,
+      actions: {
+        android: [
+          {
+            type: 'textImage',
+            image: { name: 'alarm', type: 'glyph' },
+            title: 'Confirm',
+            style: 'confirm',
+            onPress: (template) => {
+              console.log('*** Action 1');
+              template.updateItems([
+                {
+                  title: { text: 'title' },
+                  type: 'text',
+                  detailedText: { text: 'detailedText' },
+                  enabled: false,
+                  image: { type: 'glyph', name: 'thumb_up', color: defaultColor },
+                },
+              ]);
+            },
+          },
+          {
+            type: 'text',
+            title: 'Default',
+            style: 'normal',
+            onPress: () => {
+              console.log('*** Action 2');
+            },
+          },
+        ],
+        ios: [
+          { type: 'text', title: 'Normal', onPress: () => {} },
+          { type: 'image', image: { type: 'glyph', name: 'airlines' }, onPress: () => {} },
+        ],
       },
-    ],
+    });
+  }
+
+  return new InformationTemplate({
+    ...commonConfig,
+    mapConfig: undefined,
     actions: {
       android: [
         {
@@ -121,7 +163,6 @@ const getTemplate = (props?: {
         },
       ],
     },
-    onPopped: () => console.log('InformationTemplate onPopped'),
   });
 };