1 files changed, 73 insertions, 0 deletions
diff --git a/components/CameraSettings.js b/components/CameraSettings.js
new file mode 100644
index 0000000..741da28
--- /dev/null
+++ b/components/CameraSettings.js
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Animated, StyleSheet, View, Text, Button } from "react-native";
+
+import RadioGroup from "./RadioGroup"
+
+export default function CameraSettings(props) {
+  const [pos, _setPos] = React.useState(new Animated.Value(800))
+  const [cs, setCs] = React.useState({ whiteBalance: 0, flashMode: 0, ratio: 0, pictureSize: 0 })
+  const [ps, setPs] = React.useState(props.settings.si[props.settings.ra[0]] ?? "a")
+  React.useEffect(() => {
+    if (ps === "a") setPs(props.settings.si[props.settings.ra[0]] ?? "a")
+  })
+  let toPos = 100;
+  console.log("props.settings", props.settings)
+  // console.log("props.settings.si[props.settings.ra[0]]", props.settings.si[props.settings.ra[0]])
+  if (props.show) toPos = 0; else toPos = 800
+  // console.log("props@CameraSettings", props)
+  // console.log("state@CameraSettings", { pos, cs, ps })
+
+  //animacja
+  Animated.spring(pos, {
+    toValue: toPos,
+    velocity: 1,
+    tension: 0,
+    friction: 10,
+    useNativeDriver: true,
+  }).start();
+
+  function onChange(n, v, i) {
+    if (n === "ratio") setPs(props.settings.si[v])
+    const ncs = {}
+    ncs[n] = i
+    setCs({ ...cs, ...ncs })
+    props.onChange(n, v)
+  }
+
+  // console.log(`CameraSettings: bef_render: chosen={${cs['pictureSize']}} labels={${ps}}`)
+  return (
+    <Animated.ScrollView style={[styles.animatedView, { transform: [{ translateY: pos }] }]}>
+      <Text style={styles.h1}>SETTINGS</Text>
+      <RadioGroup onChange={(v, i) => onChange('whiteBalance', v, i)} chosen={cs['whiteBalance']} header={"WHITE BALANCE"} labels={props.settings.wb} key={Math.random() * 10e16} />
+      <RadioGroup onChange={(v, i) => onChange('flashMode', v, i)} chosen={cs['flashMode']} header={"FLASH MODE"} labels={props.settings.fm} key={Math.random() * 10e16} />
+      <RadioGroup onChange={(v, i) => onChange('ratio', v, i)} chosen={cs['ratio']} header={"RATIOS"} labels={props.settings.ra} key={Math.random() * 10e16} />
+      <RadioGroup onChange={(v, i) => onChange('pictureSize', v, i)} chosen={cs['pictureSize']} header={"PICTURE SIZE"} labels={ps} key={Math.random() * 10e16} />
+    </Animated.ScrollView>
+  );
+}
+
+
+
+const styles = StyleSheet.create({
+  animatedView: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    padding: 20,
+    height: 765,
+    width: 220,
+    overflow: "scroll",
+    paddingBottom: 150,
+    // marginBottom: 30,
+  },
+  h1: {
+    fontSize: 30,
+    color: "white",
+    fontWeight: "bold",
+    marginBottom: 10,
+    textAlign: "left",
+  },
+});
+