Fakultas Ilmu Komputer UI

Commit 4fc3fde2 authored by Muhammad Zahran Agung Dewantoro's avatar Muhammad Zahran Agung Dewantoro Committed by Bagus Prabowo
Browse files

Alphabet group list

parent 390be7dc
This diff is collapsed.
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"
......
Markdown is supported
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