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={{
// headerShown: false,
headerStyle: {
backgroundColor: appContext.appTheme.drawer.backgroundColor,
backgroundColor: appContext.appTheme.backgroundColor,
},
headerTintColor: appContext.appTheme.text,
drawerStyle: {

4
README.md
View File

@ -6,10 +6,6 @@ npx expo start -c
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/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": {
"light": {
"pickerColorModeText": "Farbauswahl",
"pickerColorModePlaceholder": "Wählen Sie einen Farbmodus"
"pickerColorModePlaceholder": "Wählen Sie einen Farbmodus",
"minimumBrightnessText": "Minimale Helligkeit",
"maximumBrightnessText": "Maximale Helligkeit"
},
"settings": {
"settingsTitle": "Einstellungen",

4
locales/en.json
View File

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

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

@ -8,6 +8,7 @@ export default function MySlider({
onValueChange,
minimumValue,
maximumValue,
inverted,
}) {
const appContext = useContext(AppContext);
@ -17,6 +18,7 @@ export default function MySlider({
minimumValue={minimumValue}
maximumValue={maximumValue}
value={value}
inverted={inverted}
onValueChange={onValueChange}
minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor}
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 { AppContext } from "../../utils";
export default function MySwitch({ value, onValueChange }) {
export default function MySwitch({ style, value, onValueChange }) {
const appContext = useContext(AppContext);
return (
<Switch
style={style}
value={value}
onValueChange={onValueChange}
trackColor={{

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

@ -16,7 +16,7 @@ import ColorPicker, {
HueCircular,
Panel1,
} from "reanimated-color-picker";
import { AppContext } from "../../utils";
import { AppContext, AppStyles } from "../../utils";
import Card from "../../Components/Card";
import MySwitch from "../../Components/Switch";
import MyIcon from "../../Components/Icon";
@ -113,6 +113,10 @@ export default function LightView() {
const selectedColorLayer3 = 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) => {
selectedColorPickerColor.value = color.hex;
@ -133,191 +137,268 @@ export default function LightView() {
};
return (
<Card>
<TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View>
<Text style={{ color: appContext.appTheme.text }}>
{t("screens.device.light.pickerColorModeText")}
</Text>
<Text style={{ color: appContext.appTheme.colors.primary }}>
{selectedDeviceColorMode === ""
? t("screens.device.light.pickerColorModePlaceholder")
: colorModePickerOptions.find(
(item) => item.value === selectedDeviceColorMode
).label}
</Text>
<>
<Card>
<TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View>
<Text style={{ color: appContext.appTheme.text }}>
{t("screens.device.light.pickerColorModeText")}
</Text>
<Text style={{ color: appContext.appTheme.colors.primary }}>
{selectedDeviceColorMode === ""
? t("screens.device.light.pickerColorModePlaceholder")
: colorModePickerOptions.find(
(item) => item.value === selectedDeviceColorMode
).label}
</Text>
</View>
<MyIcon
name="chevron-down"
size={24}
color={appContext.appTheme.icon}
/>
</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
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}
color={appContext.appTheme.icon}
/>
</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
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}
<Text style={{ color: appContext.appTheme.text, marginLeft: 10 }}>
Auto brightness
</Text>
<MySwitch
style={{ flex: 1 }}
value={switchState}
onValueChange={(e) => setSwitchState(e)}
/>
</View>
{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>
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text
style={[
AppStyles.typography14,
{ color: appContext.appTheme.text },
]}
>
{t("screens.device.light.minimumBrightnessText")}
</Text>
<Text
style={[
AppStyles.typography14,
{ color: appContext.appTheme.text },
]}
>
{sliderMinimumBrightness} %
</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({
previewTxtContainer: {
paddingTop: 20,

10
src/utils.js
View File

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