413 lines
10 KiB
JavaScript
413 lines
10 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
import { IconButton, TouchableRipple } from "react-native-paper";
|
|
import Animated, {
|
|
useAnimatedStyle,
|
|
useSharedValue,
|
|
} from "react-native-reanimated";
|
|
import { Icon, Incubator, Picker, Switch } from "react-native-ui-lib";
|
|
import ColorPicker, {
|
|
Swatches,
|
|
InputWidget,
|
|
HueCircular,
|
|
Panel1,
|
|
} from "reanimated-color-picker";
|
|
import { GetData } from "../../utils";
|
|
import Card from "../../Components/Card";
|
|
|
|
const dropdown = require("../../../assets/icons/chevronDown.png");
|
|
|
|
const options = [
|
|
{ label: "Pulse", value: "pulse" },
|
|
{ label: "Random", value: "random" },
|
|
{ label: "Rainbow", value: "rainbow" },
|
|
];
|
|
|
|
function ColorLayer({ layerNumber, sharedColor, selected, onPress }) {
|
|
const backgroundColorStyle = useAnimatedStyle(() => {
|
|
return {
|
|
backgroundColor: sharedColor.value,
|
|
};
|
|
});
|
|
|
|
const contrastColor = useAnimatedStyle(() => {
|
|
const getContrastRatio = (hexColor) => {
|
|
const hex = hexColor.replace("#", "");
|
|
const r = parseInt(hex.substr(0, 2), 16);
|
|
const g = parseInt(hex.substr(2, 2), 16);
|
|
const b = parseInt(hex.substr(4, 2), 16);
|
|
const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
|
|
return luminance > 0.5 ? "#000000" : "#ffffff";
|
|
};
|
|
|
|
let obj = {};
|
|
|
|
obj["color"] = getContrastRatio(sharedColor.value);
|
|
|
|
if (selected === true) {
|
|
obj.borderColor = obj.color;
|
|
obj.borderBottomWidth = 4;
|
|
} else {
|
|
obj.borderBottomWidth = 0;
|
|
}
|
|
|
|
return obj;
|
|
});
|
|
|
|
return (
|
|
<TouchableRipple
|
|
borderless
|
|
style={[{ width: 30, height: 30, borderRadius: 10, marginRight: 10 }]}
|
|
onPress={onPress}
|
|
rippleColor="rgba(0, 0, 0, .32)"
|
|
>
|
|
<Animated.View
|
|
style={[
|
|
{
|
|
width: "100%",
|
|
height: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
backgroundColorStyle,
|
|
]}
|
|
>
|
|
<Animated.Text
|
|
style={[{ fontSize: 16, fontWeight: "bold" }, contrastColor]}
|
|
>
|
|
{layerNumber}
|
|
</Animated.Text>
|
|
</Animated.View>
|
|
</TouchableRipple>
|
|
);
|
|
}
|
|
|
|
/*
|
|
function ColorSwatch({ color, onPress }) {
|
|
return (
|
|
<TouchableRipple
|
|
borderless
|
|
style={{
|
|
width: 25,
|
|
height: 25,
|
|
borderRadius: 16,
|
|
marginLeft: 5,
|
|
marginTop: 5,
|
|
}}
|
|
onPress={onPress}
|
|
rippleColor="rgba(0, 0, 0, .32)"
|
|
>
|
|
<View
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
backgroundColor: color,
|
|
}}
|
|
/>
|
|
</TouchableRipple>
|
|
);
|
|
} */
|
|
|
|
export default function LightView() {
|
|
const [pickerValue, setPickerValue] = useState("");
|
|
const [switchState, setSwitchState] = useState(false);
|
|
const [sliderValue, setSliderValue] = useState(0);
|
|
const [selectedGlasLayer, setSelectedGlasLayer] = useState(1);
|
|
const [colorSwatchesFavorites, setColorSwatchesFavorites] = useState([]);
|
|
const [isExpertModeEnabled, setSwitchExpertModeEnabled] = useState(false);
|
|
|
|
/*const customSwatches = new Array(12)
|
|
.fill("#fff")
|
|
.map(() => colorKit.randomRgbColor().hex()); */
|
|
|
|
const selectedColorPickerColor = useSharedValue("#fff");
|
|
const selectedColorLayer1 = useSharedValue(selectedColorPickerColor.value);
|
|
const selectedColorLayer2 = useSharedValue(selectedColorPickerColor.value);
|
|
const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value);
|
|
const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value);
|
|
|
|
useEffect(() => {
|
|
async function getModes() {
|
|
const data = await GetData("expertMode");
|
|
|
|
setSwitchExpertModeEnabled(data);
|
|
}
|
|
|
|
getModes();
|
|
}, []);
|
|
|
|
const onColorSelect = (color) => {
|
|
selectedColorPickerColor.value = color.hex;
|
|
|
|
switch (selectedGlasLayer) {
|
|
case 1:
|
|
selectedColorLayer1.value = color.hex;
|
|
break;
|
|
case 2:
|
|
selectedColorLayer2.value = color.hex;
|
|
break;
|
|
case 3:
|
|
selectedColorLayer3.value = color.hex;
|
|
break;
|
|
case 4:
|
|
selectedColorLayer4.value = color.hex;
|
|
break;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<Picker
|
|
label="Farbmodus"
|
|
placeholder="Pick a Language"
|
|
useWheelPicker
|
|
value={pickerValue}
|
|
onChange={(nativePickerValue) => setPickerValue(nativePickerValue)}
|
|
trailingAccessory={<Icon source={dropdown} />}
|
|
//containerStyle={{ marginTop: 20 }}
|
|
//renderPicker={() => {
|
|
//return (
|
|
//<View>
|
|
// <Text>Open Native Picker!</Text>
|
|
// </View>
|
|
// );
|
|
//}}
|
|
//topBarProps={{ doneLabel: "YES", cancelLabel: "NO" }}
|
|
>
|
|
{options.map((option) => (
|
|
<Picker.Item
|
|
key={option.value}
|
|
value={option.value}
|
|
label={option.label}
|
|
/>
|
|
))}
|
|
</Picker>
|
|
|
|
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
|
<Switch value={switchState} onValueChange={(e) => setSwitchState(e)} />
|
|
<IconButton icon="brightness-7" iconColor={"#fff"} size={20} />
|
|
<View style={{ flex: 1 }}>
|
|
<Incubator.Slider
|
|
value={sliderValue}
|
|
step={1}
|
|
initialMinimumValue={0}
|
|
minimumValue={0}
|
|
maximumValue={100}
|
|
onValueChange={(v) => setSliderValue(v)}
|
|
containerStyle={{
|
|
flex: 1,
|
|
marginHorizontal: 8,
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<Animated.View style={styles.animatedViewContainer}>
|
|
<ColorPicker
|
|
value={selectedColorPickerColor.value}
|
|
sliderThickness={25}
|
|
thumbSize={27}
|
|
onChange={onColorSelect}
|
|
>
|
|
<View
|
|
style={{
|
|
justifyContent: "center",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<ColorLayer
|
|
layerNumber={1}
|
|
sharedColor={selectedColorLayer1}
|
|
selected={selectedGlasLayer === 1}
|
|
onPress={() => {
|
|
setSelectedGlasLayer(1);
|
|
selectedColorPickerColor.value = selectedColorLayer1.value;
|
|
}}
|
|
/>
|
|
<ColorLayer
|
|
layerNumber={2}
|
|
sharedColor={selectedColorLayer2}
|
|
selected={selectedGlasLayer === 2}
|
|
onPress={() => {
|
|
setSelectedGlasLayer(2);
|
|
selectedColorPickerColor.value = selectedColorLayer2.value;
|
|
}}
|
|
/>
|
|
<ColorLayer
|
|
layerNumber={3}
|
|
sharedColor={selectedColorLayer3}
|
|
selected={selectedGlasLayer === 3}
|
|
onPress={() => {
|
|
setSelectedGlasLayer(3);
|
|
selectedColorPickerColor.value = selectedColorLayer3.value;
|
|
}}
|
|
/>
|
|
<ColorLayer
|
|
layerNumber={4}
|
|
sharedColor={selectedColorLayer4}
|
|
selected={selectedGlasLayer === 4}
|
|
onPress={() => {
|
|
setSelectedGlasLayer(4);
|
|
selectedColorPickerColor.value = selectedColorLayer4.value;
|
|
}}
|
|
/>
|
|
</View>
|
|
|
|
<IconButton
|
|
style={{ position: "absolute", top: 40, right: -5 }}
|
|
icon={"star-outline"}
|
|
size={20}
|
|
onPress={() => {
|
|
setColorSwatchesFavorites([
|
|
...colorSwatchesFavorites,
|
|
selectedColorPickerColor.value,
|
|
]);
|
|
}}
|
|
/>
|
|
|
|
<View style={{ marginLeft: 30, marginRight: 30 }}>
|
|
<HueCircular containerStyle={styles.hueContainer} thumbShape="pill">
|
|
<Panel1 style={styles.panelStyle} />
|
|
</HueCircular>
|
|
</View>
|
|
|
|
<Swatches
|
|
style={styles.swatchesContainer}
|
|
swatchStyle={styles.swatchStyle}
|
|
colors={colorSwatchesFavorites}
|
|
/>
|
|
|
|
{isExpertModeEnabled && (
|
|
<View style={styles.previewTxtContainer}>
|
|
<InputWidget
|
|
inputStyle={styles.inputWidget}
|
|
iconColor="#707070"
|
|
/>
|
|
</View>
|
|
)}
|
|
</ColorPicker>
|
|
</Animated.View>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
/*
|
|
<View row center style={{ flexWrap: "wrap", marginTop: 5 }}>
|
|
{colorSwatchesFavorites.map((color, i) => (
|
|
<ColorSwatch
|
|
key={i}
|
|
color={color}
|
|
onPress={() => {
|
|
console.log("press", color, renderKey);
|
|
selectedColorPickerColor.value = color;
|
|
setRenderKey((prevKey) => prevKey + 1);
|
|
}}
|
|
/>
|
|
))}
|
|
</View>
|
|
*/
|
|
|
|
// <BrightnessSlider style={styles.sliderStyle} /> <Panel3 style={styles.panelStyle} />
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "#2e2e30",
|
|
},
|
|
scrollView: {
|
|
width: "100%",
|
|
padding: 20,
|
|
},
|
|
listAccordion: {
|
|
borderRadius: 20,
|
|
backgroundColor: "#3f4042",
|
|
marginBottom: 20,
|
|
elevation: 5,
|
|
},
|
|
previewTxtContainer: {
|
|
paddingTop: 20,
|
|
marginTop: 20,
|
|
borderTopWidth: 1,
|
|
borderColor: "#bebdbe",
|
|
},
|
|
pickerContainer: {
|
|
alignSelf: "center",
|
|
width: "100%",
|
|
backgroundColor: "#3f4042",
|
|
padding: 20,
|
|
borderRadius: 20,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 5,
|
|
},
|
|
shadowOpacity: 0.34,
|
|
shadowRadius: 6.27,
|
|
elevation: 5,
|
|
},
|
|
hueContainer: {
|
|
justifyContent: "center",
|
|
backgroundColor: "#3f4042",
|
|
},
|
|
panelStyle: {
|
|
width: "60%",
|
|
height: "60%",
|
|
alignSelf: "center",
|
|
borderRadius: 16,
|
|
},
|
|
/*
|
|
panelStyle: {
|
|
margin: 10,
|
|
marginLeft: 20,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 5,
|
|
},*/
|
|
sliderStyle: {
|
|
borderRadius: 20,
|
|
marginTop: 20,
|
|
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 5,
|
|
},
|
|
swatchesContainer: {
|
|
borderTopWidth: 1,
|
|
borderColor: "#bebdbe",
|
|
marginTop: 20,
|
|
paddingTop: 20,
|
|
justifyContent: "center",
|
|
gap: 10,
|
|
},
|
|
swatchStyle: {
|
|
borderRadius: 20,
|
|
height: 25,
|
|
width: 25,
|
|
margin: 0,
|
|
marginBottom: 0,
|
|
marginHorizontal: 0,
|
|
marginVertical: 0,
|
|
},
|
|
inputWidget: {
|
|
color: "#fff",
|
|
paddingVertical: 2,
|
|
borderColor: "#707070",
|
|
fontSize: 12,
|
|
marginLeft: 5,
|
|
},
|
|
});
|