Commit 4a66c29f authored by Thor-Herman's avatar Thor-Herman
Browse files

Extract OrderingPicker #7

parent 7e3d719b
......@@ -19,7 +19,6 @@ const decideRegex = (filterGenres: { [key in Genres]: boolean }) => {
let regex = '(';
const checkedGenres = _.keys(_.pickBy(filterGenres, (genre: boolean) => genre))
for (let i = 0; i < checkedGenres.length; i++) {
console.log(checkedGenres);
regex += checkedGenres[i].toString();
regex += i === checkedGenres.length - 1 ? '' : '|'; // Last element, don't add final |
}
......
import _ from "lodash";
import { Item, Label, Picker, Icon } from "native-base";
import React, { useState } from "react";
const orderingOptions = [
{ key: "title", order: "asc" },
{ key: "title", order: "desc" },
{ key: "year", order: "asc" },
{ key: "year", order: "desc" },
{ key: "length", order: "asc" },
{ key: "length", order: "desc" },
];
const OrderingPicker = () => {
const [selected, setSelected] = useState("");
const onValueChange = (value: string) => {
setSelected(value);
};
const pickerItems = orderingOptions.map((option) => (
<Picker.Item
label={`${_.startCase(option.key)} - ${option.order}`}
value={option}
key={option.key}
/>
));
return (
<Item fixedLabel picker>
<Label>Order by...</Label>
<Picker
mode="dropdown"
iosIcon={<Icon name="arrow-down" />}
placeholder=""
placeholderStyle={{ color: "#bfc6ea" }}
placeholderIconColor="#007aff"
style={{ width: undefined }}
selectedValue={selected}
onValueChange={onValueChange}
>
{pickerItems}
</Picker>
</Item>
);
};
export default OrderingPicker;
......@@ -5,52 +5,18 @@ import { StackNavigationProp } from "@react-navigation/stack";
import { Genres } from "../types/filter";
import _ from "lodash";
import FilterList from "../components/FilterList";
import OrderingPicker from "../components/OrderingPicker";
type FilterScreenNavigationProp = StackNavigationProp<StackParamList, "Filter">;
type Props = {
navigation: FilterScreenNavigationProp;
};
const orderingOptions = [
{ key: "title", order: "asc" },
{ key: "title", order: "desc" },
{ key: "year", order: "asc" },
{ key: "year", order: "desc" },
{ key: "length", order: "asc" },
{ key: "length", order: "desc" },
];
const FilterPage = ({ navigation }: Props) => {
const [selected, setSelected] = useState("");
const onValueChange = (value: string) => {
setSelected(value);
};
const pickerItems = orderingOptions.map((option) => (
<Picker.Item
label={`${_.startCase(option.key)} - ${option.order}`}
value={option}
key={option.key}
/>
));
return (
<Form>
<Item fixedLabel picker>
<Label>Order by...</Label>
<Picker
mode="dropdown"
iosIcon={<Icon name="arrow-down" />}
placeholder=""
placeholderStyle={{ color: "#bfc6ea" }}
placeholderIconColor="#007aff"
style={{ width: undefined }}
selectedValue={selected}
onValueChange={onValueChange}
>
{pickerItems}
</Picker>
</Item>
<OrderingPicker />
<FilterList />
</Form>
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment