Jannex
/
expo-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slider

main
alex 2023-07-14 09:31:30 +00:00
parent 5ec0f4510c
commit 497ef29d93
9 changed files with 273 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
App.js
View File

@ -65,7 +65,7 @@ export function MyApp() {
screenOptions={{ screenOptions={{
// headerShown: false, // headerShown: false,
headerStyle: { headerStyle: {
backgroundColor: appContext.appTheme.drawer.backgroundColor, backgroundColor: appContext.appTheme.backgroundColor,
}, },
headerTintColor: appContext.appTheme.text, headerTintColor: appContext.appTheme.text,
drawerStyle: { drawerStyle: {

4
README.md
View File

@ -6,10 +6,6 @@ npx expo start -c
https://pictogrammers.com/library/mdi/ https://pictogrammers.com/library/mdi/
# RNUILib
https://wix.github.io/react-native-ui-lib/docs/getting-started/setup
https://stackoverflow.com/questions/68243384/dark-mode-usecolorscheme-always-returns-light-on-android https://stackoverflow.com/questions/68243384/dark-mode-usecolorscheme-always-returns-light-on-android
https://stackoverflow.com/questions/70493788/i18nextpluralresolver-your-environment-seems-not-to-be-intl-api-compatible-u https://stackoverflow.com/questions/70493788/i18nextpluralresolver-your-environment-seems-not-to-be-intl-api-compatible-u

BIN
assets/icons/chevronDown.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 175 B

4
locales/de.json
View File

@ -10,7 +10,9 @@
"device": { "device": {
"light": { "light": {
"pickerColorModeText": "Farbauswahl", "pickerColorModeText": "Farbauswahl",
"pickerColorModePlaceholder": "Wählen Sie einen Farbmodus" "pickerColorModePlaceholder": "Wählen Sie einen Farbmodus",
"minimumBrightnessText": "Minimale Helligkeit",
"maximumBrightnessText": "Maximale Helligkeit"
}, },
"settings": { "settings": {
"settingsTitle": "Einstellungen", "settingsTitle": "Einstellungen",

4
locales/en.json
View File

@ -10,7 +10,9 @@
"device": { "device": {
"light": { "light": {
"pickerColorModeText": "Color selection", "pickerColorModeText": "Color selection",
"pickerColorModePlaceholder": "Select a color mode" "pickerColorModePlaceholder": "Select a color mode",
"minimumBrightnessText": "Minimum brightness",
"maximumBrightnessText": "Maximum brightness"
}, },
"settings": { "settings": {
"settingsTitle": "Settings", "settingsTitle": "Settings",

2
src/Components/Slider/index.js
View File

@ -8,6 +8,7 @@ export default function MySlider({
onValueChange, onValueChange,
minimumValue, minimumValue,
maximumValue, maximumValue,
inverted,
}) { }) {
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
@ -17,6 +18,7 @@ export default function MySlider({
minimumValue={minimumValue} minimumValue={minimumValue}
maximumValue={maximumValue} maximumValue={maximumValue}
value={value} value={value}
inverted={inverted}
onValueChange={onValueChange} onValueChange={onValueChange}
minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor} minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor}
maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor} maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor}

3
src/Components/Switch/index.js
View File

@ -2,11 +2,12 @@ import { useContext } from "react";
import { Switch } from "react-native"; import { Switch } from "react-native";
import { AppContext } from "../../utils"; import { AppContext } from "../../utils";
export default function MySwitch({ value, onValueChange }) { export default function MySwitch({ style, value, onValueChange }) {
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
return ( return (
<Switch <Switch
style={style}
value={value} value={value}
onValueChange={onValueChange} onValueChange={onValueChange}
trackColor={{ trackColor={{

433
src/Screens/Device/light.js
View File

@ -16,7 +16,7 @@ import ColorPicker, {
HueCircular, HueCircular,
Panel1, Panel1,
} from "reanimated-color-picker"; } from "reanimated-color-picker";
import { AppContext } from "../../utils"; import { AppContext, AppStyles } from "../../utils";
import Card from "../../Components/Card"; import Card from "../../Components/Card";
import MySwitch from "../../Components/Switch"; import MySwitch from "../../Components/Switch";
import MyIcon from "../../Components/Icon"; import MyIcon from "../../Components/Icon";
@ -113,6 +113,10 @@ export default function LightView() {
const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value); const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value);
const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value); const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value);
const [sliderBrightness, setSliderBrightness] = useState(10);
const [sliderMinimumBrightness, setSliderMinimumBrightness] = useState(25);
const [sliderMaximumBrightness, setSliderMaximumBrightness] = useState(75);
const onColorSelect = (color) => { const onColorSelect = (color) => {
selectedColorPickerColor.value = color.hex; selectedColorPickerColor.value = color.hex;
@ -133,191 +137,268 @@ export default function LightView() {
}; };
return ( return (
<Card> <>
<TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}> <Card>
<View <TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}>
style={{ <View
flexDirection: "row", style={{
alignItems: "center", flexDirection: "row",
justifyContent: "space-between", alignItems: "center",
}} justifyContent: "space-between",
> }}
<View> >
<Text style={{ color: appContext.appTheme.text }}> <View>
{t("screens.device.light.pickerColorModeText")} <Text style={{ color: appContext.appTheme.text }}>
</Text> {t("screens.device.light.pickerColorModeText")}
<Text style={{ color: appContext.appTheme.colors.primary }}> </Text>
{selectedDeviceColorMode === "" <Text style={{ color: appContext.appTheme.colors.primary }}>
? t("screens.device.light.pickerColorModePlaceholder") {selectedDeviceColorMode === ""
: colorModePickerOptions.find( ? t("screens.device.light.pickerColorModePlaceholder")
(item) => item.value === selectedDeviceColorMode : colorModePickerOptions.find(
).label} (item) => item.value === selectedDeviceColorMode
</Text> ).label}
</Text>
</View>
<MyIcon
name="chevron-down"
size={24}
color={appContext.appTheme.icon}
/>
</View> </View>
</TouchableOpacity>
<PickerModal
isOpen={modalDeviceColorModeVisible}
setIsOpen={setModalDeviceColorModeVisible}
items={colorModePickerOptions.map((item) => {
return {
label: item.label,
onPress: () => setSelectedDeviceColorMode(item.value),
selected: selectedDeviceColorMode === item.value,
};
})}
/>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<MySwitch
value={switchState}
onValueChange={(e) => setSwitchState(e)}
/>
<MyIcon <MyIcon
name="chevron-down" name={
sliderBrightness < 1
? "brightness-5"
: sliderBrightness < 40
? "brightness-4"
: sliderBrightness < 80
? "brightness-6"
: "brightness-7"
}
color={appContext.appTheme.icon}
size={20}
/>
<MySlider
style={{ flex: 1 }}
minimumValue={0}
maximumValue={100}
value={sliderBrightness}
onValueChange={(v) => setSliderBrightness(v)}
/>
</View>
<Animated.View>
<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>
<TouchableOpacity
onPress={() =>
setColorSwatchesFavorites([
...colorSwatchesFavorites,
selectedColorPickerColor.value,
])
}
style={{
position: "absolute",
top: 20,
right: 0,
}}
>
<MyIcon
name="star-outline"
color={appContext.appTheme.icon}
size={20}
/>
</TouchableOpacity>
<View style={{ marginLeft: 30, marginRight: 30 }}>
<HueCircular
containerStyle={{
justifyContent: "center",
backgroundColor: appContext.appTheme.backgroundColor,
}}
thumbShape="pill"
>
<Panel1 style={styles.panelStyle} />
</HueCircular>
</View>
<Swatches
style={styles.swatchesContainer}
swatchStyle={styles.swatchStyle}
colors={colorSwatchesFavorites}
/>
{appContext.isUserExpertModeEnabled && (
<View style={styles.previewTxtContainer}>
<InputWidget
inputStyle={{
color: appContext.appTheme.text,
paddingVertical: 2,
borderColor: "#707070",
fontSize: 12,
marginLeft: 5,
}}
iconColor="#707070"
/>
</View>
)}
</ColorPicker>
</Animated.View>
</Card>
<Card>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<MyIcon
name="brightness-6"
size={24} size={24}
color={appContext.appTheme.icon} color={appContext.appTheme.icon}
/> />
</View> <Text style={{ color: appContext.appTheme.text, marginLeft: 10 }}>
</TouchableOpacity> Auto brightness
</Text>
<PickerModal <MySwitch
isOpen={modalDeviceColorModeVisible} style={{ flex: 1 }}
setIsOpen={setModalDeviceColorModeVisible} value={switchState}
items={colorModePickerOptions.map((item) => { onValueChange={(e) => setSwitchState(e)}
return {
label: item.label,
onPress: () => setSelectedDeviceColorMode(item.value),
selected: selectedDeviceColorMode === item.value,
};
})}
/>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<MySwitch
value={switchState}
onValueChange={(e) => setSwitchState(e)}
/>
<MyIcon
name={"brightness-7"}
color={appContext.appTheme.icon}
size={20}
/>
<View style={{ flex: 1 }}>
<MySlider />
</View>
</View>
<Animated.View>
<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>
<TouchableOpacity
onPress={() =>
setColorSwatchesFavorites([
...colorSwatchesFavorites,
selectedColorPickerColor.value,
])
}
style={{
position: "absolute",
top: 20,
right: 0,
}}
>
<MyIcon
name="star-outline"
color={appContext.appTheme.icon}
size={20}
/>
</TouchableOpacity>
<View style={{ marginLeft: 30, marginRight: 30 }}>
<HueCircular
containerStyle={{
justifyContent: "center",
backgroundColor: appContext.appTheme.backgroundColor,
}}
thumbShape="pill"
>
<Panel1 style={styles.panelStyle} />
</HueCircular>
</View>
<Swatches
style={styles.swatchesContainer}
swatchStyle={styles.swatchStyle}
colors={colorSwatchesFavorites}
/> />
</View>
{appContext.isUserExpertModeEnabled && ( <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<View style={styles.previewTxtContainer}> <Text
<InputWidget style={[
inputStyle={{ AppStyles.typography14,
color: appContext.appTheme.text, { color: appContext.appTheme.text },
paddingVertical: 2, ]}
borderColor: "#707070", >
fontSize: 12, {t("screens.device.light.minimumBrightnessText")}
marginLeft: 5, </Text>
}} <Text
iconColor="#707070" style={[
/> AppStyles.typography14,
</View> { color: appContext.appTheme.text },
)} ]}
</ColorPicker> >
</Animated.View> {sliderMinimumBrightness} %
</Card> </Text>
</View>
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text
style={[
AppStyles.typography14,
{ color: appContext.appTheme.text },
]}
>
{t("screens.device.light.maximumBrightnessText")}
</Text>
<Text
style={[
AppStyles.typography14,
{ color: appContext.appTheme.text },
]}
>
{sliderMaximumBrightness} %
</Text>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "space-around",
marginTop: 10,
}}
>
<View style={{ width: "60%" }}>
<MySlider
minimumValue={50}
maximumValue={0}
inverted
value={sliderMinimumBrightness}
onValueChange={(v) => setSliderMinimumBrightness(Math.round(v))}
/>
</View>
<View style={{ width: "60%", right: 1 }}>
<MySlider
minimumValue={51}
maximumValue={100}
value={sliderMaximumBrightness}
onValueChange={(v) => setSliderMaximumBrightness(Math.round(v))}
/>
</View>
</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({ const styles = StyleSheet.create({
previewTxtContainer: { previewTxtContainer: {
paddingTop: 20, paddingTop: 20,

10
src/utils.js
View File

@ -54,12 +54,12 @@ const DarkAppTheme = {
activeBackgroundColor: "rgba(0, 0, 0, 0.1)", activeBackgroundColor: "rgba(0, 0, 0, 0.1)",
}, },
}, },
divider: "#888", divider: "#434443",
icon: "#ddd", icon: "#ddd",
switch: { switch: {
trackColorTrue: "#b2b3b3", trackColorTrue: "#01d064",
trackColorFalse: "#b2b3b3", trackColorFalse: "#b2b3b3",
thumbColorTrue: "#e67e22", thumbColorTrue: "#f4f3f4",
thumbColorFalse: "#f4f3f4", thumbColorFalse: "#f4f3f4",
ios_backgroundColor: "#3e3e3e", ios_backgroundColor: "#3e3e3e",
}, },
@ -93,9 +93,9 @@ const LightAppTheme = {
divider: "#ddd", divider: "#ddd",
icon: "#000", icon: "#000",
switch: { switch: {
trackColorTrue: "#b2b3b3", trackColorTrue: "#01d064",
trackColorFalse: "#b2b3b3", trackColorFalse: "#b2b3b3",
thumbColorTrue: "#e67e22", thumbColorTrue: "#f4f3f4",
thumbColorFalse: "#f4f3f4", thumbColorFalse: "#f4f3f4",
ios_backgroundColor: "#3e3e3e", ios_backgroundColor: "#3e3e3e",
}, },