Fakultas Ilmu Komputer UI

Commit 3164556e authored by Bagus Prabowo's avatar Bagus Prabowo
Browse files

Merge branch 'alphabet-group-list' into 'master'

Alphabet group list

See merge request !66
parents e9df3797 4fc3fde2
Pipeline #85933 passed with stage
in 7 minutes and 52 seconds
This source diff could not be displayed because it is too large. You can view the blob instead.
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { AlphabetList } from "react-native-section-alphabet-list";
import PlainButton from "../button/PlainButton";
import Colors from "../../constants/Colors";
import { IData, ISectionData } from "../../types/alphabetGroupList";
type props = {
data: IData[];
};
const AlphabetGroupList = ({ data }: props) => {
return (
<View style={styles.container}>
<AlphabetList
data={data}
indexLetterStyle={styles.indexLetter}
renderCustomItem={(item: IData) => (
<View style={styles.listItemContainer}>
<PlainButton text={item.value} onPress={() => {}} />
</View>
)}
renderCustomSectionHeader={(section: ISectionData) => (
<View style={styles.sectionHeaderContainer}>
<Text style={styles.sectionHeaderLabel}>{section.title}</Text>
</View>
)}
/>
</View>
);
};
export default AlphabetGroupList;
const styles = StyleSheet.create({
container: {
flex: 1,
},
indexLetter: {
width: 0,
height: 0,
},
listItemContainer: {
paddingVertical: 8,
paddingHorizontal: 5,
},
sectionHeaderContainer: {
paddingVertical: 8,
paddingHorizontal: 5,
},
sectionHeaderLabel: {
backgroundColor: Colors.background,
},
});
......@@ -3,15 +3,40 @@ import * as React from "react";
import { StyleSheet } from "react-native";
import { Text, View } from "../../components/Themed";
import Colors from "../../constants/Colors";
import AlphabetGroupList from "../../components/GroupList/AlphabetGroupList";
const BusinessCategoryScreen = () => {
const nav = useNavigation();
const data = [
{ value: "Accomodation and Food Services", key: "1" },
{
value:
"Administrative and Support and Waste Management and Remediation Services",
key: "2",
},
{ value: "Agriculture, Forestry, Fishing, and Hunting", key: "3" },
{ value: "Arts, Entertainment, and Recreation", key: "4" },
{ value: "Construction", key: "5" },
{ value: "Educational Services", key: "6" },
{ value: "Finance and Insurance", key: "7" },
{ value: "Health Care and Social Assistance", key: "8" },
{ value: "Management of Companies and Enterprises", key: "9" },
{ value: "Manufacturing", key: "10" },
{ value: "Mining, Quarrying, and Oil and Gas Extraction ", key: "11" },
{ value: "Other Services (Except Public Administration)", key: "12" },
{ value: "Professional, Scientific, and Technical Services", key: "13" },
{ value: "Public Administration", key: "14" },
{ value: "Real Estate and Rental and Leasing", key: "15" },
{ value: "Retail Trade", key: "16" },
{ value: "Transportation and Warehousing", key: "17" },
{ value: "Utilities", key: "18" },
{ value: "Umum", key: "19" },
{ value: "Wholesale Trade", key: "20" },
];
return (
<View style={styles.container}>
<View>
<Text>Layar Kategori Bisnis</Text>
</View>
<AlphabetGroupList data={data} />
</View>
);
};
......@@ -19,9 +44,10 @@ const BusinessCategoryScreen = () => {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.background,
paddingHorizontal: 24,
alignItems: "center",
justifyContent: "center",
backgroundColor: Colors.background,
padding: 24,
},
});
......
export type IData = {
value: string;
key: string;
};
export type ISectionData = {
title: string;
data: IData[];
index?: number;
};
......@@ -8416,6 +8416,18 @@ react-native-screens@~3.4.0:
dependencies:
warn-once "^0.1.0"
react-native-section-alphabet-list@^2.0.7:
version "2.0.7"
resolved "https://registry.yarnpkg.com/react-native-section-alphabet-list/-/react-native-section-alphabet-list-2.0.7.tgz#36e08148e8aae99bd3102101b4a589b7fe649a0c"
integrity sha512-iqHzyCVgzMc4YsmJlONo3uxd7x9LApmAZDhh0YtMht+qGJ0j+L+NJ2eFT8ZUrUgvMNb64OqQlNvMqHu/IhUvUw==
dependencies:
react-native-section-list-get-item-layout "^2.2.3"
react-native-section-list-get-item-layout@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/react-native-section-list-get-item-layout/-/react-native-section-list-get-item-layout-2.2.3.tgz#152a8efdcb3847dbcbeb04cd2d0de4312d3d2fcb"
integrity sha512-fzCW5SiYP6qCZyDHebaElHonIFr8NFrZK9JDkxFLnpxMJih4d+HQ4rHyOs0Z4Gb/FjyCVbRH7RtEnjeQ0XffMg==
react-native-size-matters@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"
......
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