mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-03 22:37:03 +00:00
Merge pull request #26583 from MrLuje/react-native-settings-list
Add type definitions for react-native-settings-list
This commit is contained in:
Nathan Shively-Sanders
+149
@@ -0,0 +1,149 @@
|
||||
// Type definitions for react-native-settings-list 1.8
|
||||
// Project: https://github.com/evetstech/react-native-settings-list
|
||||
// Definitions by: MrLuje <https://github.com/MrLuje>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.6
|
||||
|
||||
import { Component, ReactNode } from "react";
|
||||
import { TextStyle, StyleProp, ImageStyle, ViewStyle } from "react-native";
|
||||
|
||||
interface SettingsListProps {
|
||||
/**
|
||||
* default: white
|
||||
*/
|
||||
backgroundColor?: string;
|
||||
/**
|
||||
* default: black
|
||||
*/
|
||||
borderColor?: string;
|
||||
/**
|
||||
* default: 50
|
||||
*/
|
||||
defaultItemSize?: number;
|
||||
/**
|
||||
* default: transparent
|
||||
*/
|
||||
underlayColor?: string;
|
||||
/**
|
||||
* default: {fontSize: 16}
|
||||
*/
|
||||
defaultTitleStyle?: StyleProp<TextStyle>;
|
||||
defaultTitleInfoPosition?: string;
|
||||
scrollViewProps?: object;
|
||||
}
|
||||
declare class SettingsList extends Component<SettingsListProps> {}
|
||||
|
||||
interface HeaderProps {
|
||||
headerText?: string;
|
||||
headerStyle?: StyleProp<TextStyle>;
|
||||
headerRef?: () => void;
|
||||
/**
|
||||
* default: 1
|
||||
*/
|
||||
headerNumberOfLines?: number;
|
||||
}
|
||||
|
||||
interface ItemProps {
|
||||
/**
|
||||
* Title being displayed
|
||||
*/
|
||||
title?: string;
|
||||
titleStyle?: StyleProp<TextStyle>;
|
||||
/**
|
||||
* Icon displayed on the left of the settings item
|
||||
*/
|
||||
icon?: ReactNode;
|
||||
|
||||
/**
|
||||
* Item Box Style
|
||||
*/
|
||||
itemBoxStyle?: StyleProp<ViewStyle>;
|
||||
/**
|
||||
* Title Box Style
|
||||
*/
|
||||
titleBoxStyle?: StyleProp<ViewStyle>;
|
||||
/**
|
||||
* Right Side Style
|
||||
*/
|
||||
rightSideStyle?: StyleProp<ViewStyle>;
|
||||
/**
|
||||
* Editable Right Side Style
|
||||
*/
|
||||
editableTextStyle?: StyleProp<TextStyle>;
|
||||
|
||||
/**
|
||||
* Individual item width. Can be globally set in the parent. Will become deprecated
|
||||
*/
|
||||
itemWidth?: number;
|
||||
/**
|
||||
* Allows for the item to become an auth item
|
||||
*/
|
||||
isAuth?: boolean;
|
||||
authPropsUser?: object;
|
||||
authPropsPW?: object;
|
||||
/**
|
||||
* Individual background color. Can be globally set in the parent. Will become Deprecated
|
||||
*/
|
||||
backgroundColor?: string;
|
||||
|
||||
/**
|
||||
* Individual underlay click color. Can be globally set in the parent.
|
||||
*/
|
||||
underlayColor?: string;
|
||||
/**
|
||||
* Item on press callback.
|
||||
*/
|
||||
onPress?: () => void;
|
||||
/**
|
||||
* Item on long press callback.
|
||||
*/
|
||||
onLongPress?: () => void;
|
||||
/**
|
||||
* Enable or disable the > arrow at the end of the setting item.
|
||||
* Default: true
|
||||
*/
|
||||
hasNavArrow?: boolean;
|
||||
arrowIcon?: ReactNode;
|
||||
|
||||
arrowStyle?: StyleProp<ImageStyle>;
|
||||
/**
|
||||
* Enable or disable a Switch component
|
||||
*/
|
||||
hasSwitch?: boolean;
|
||||
/**
|
||||
* Switch state
|
||||
*/
|
||||
switchState?: boolean;
|
||||
/**
|
||||
* Switch props
|
||||
*/
|
||||
switchProps?: object;
|
||||
/**
|
||||
* On value change callback
|
||||
*/
|
||||
switchOnValueChange?: () => void;
|
||||
/**
|
||||
* Right side information on the setting item
|
||||
*/
|
||||
titleInfo?: string;
|
||||
titleInfoStyle?: StyleProp<TextStyle>;
|
||||
/**
|
||||
* If 'Bottom'; info is placed beneath the title
|
||||
*/
|
||||
titleInfoPosition?: string;
|
||||
/**
|
||||
* Right side content
|
||||
*/
|
||||
rightSideContent?: ReactNode;
|
||||
/* Gives opens to hide specific borders */
|
||||
borderHide?: "Top" | "Bottom" | "Both";
|
||||
|
||||
itemRef?: () => void;
|
||||
}
|
||||
|
||||
declare namespace SettingsList {
|
||||
class Header extends Component<HeaderProps> {}
|
||||
class Item extends Component<ItemProps> {}
|
||||
}
|
||||
|
||||
export default SettingsList;
|
||||
@@ -0,0 +1,219 @@
|
||||
"use strict";
|
||||
import { AppRegistry, StyleSheet, Text, Image, View } from "react-native";
|
||||
|
||||
import SettingsList from "react-native-settings-list";
|
||||
import { Component } from "react";
|
||||
|
||||
class SettingsListExample extends Component {
|
||||
render() {
|
||||
return (
|
||||
<View style={{ backgroundColor: "#f6f6f6", flex: 1 }}>
|
||||
<View
|
||||
style={{
|
||||
borderBottomWidth: 1,
|
||||
backgroundColor: "#263238",
|
||||
borderColor: "#c8c7cc"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
marginTop: 15,
|
||||
marginBottom: 15,
|
||||
marginLeft: 15,
|
||||
fontWeight: "bold",
|
||||
fontSize: 20
|
||||
}}
|
||||
>
|
||||
Settings
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ backgroundColor: "#f6f6f6", flex: 1 }}>
|
||||
<SettingsList borderColor="#d6d5d9" defaultItemSize={50}>
|
||||
<SettingsList.Item
|
||||
hasNavArrow={false}
|
||||
title="Wireless & networks"
|
||||
titleStyle={{
|
||||
color: "#009688",
|
||||
marginBottom: 10,
|
||||
fontWeight: "500"
|
||||
}}
|
||||
itemWidth={50}
|
||||
borderHide={"Both"}
|
||||
/>
|
||||
<SettingsList.Item
|
||||
icon={
|
||||
<View style={styles.imageStyle}>
|
||||
<Image
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
height: 22,
|
||||
width: 22
|
||||
}}
|
||||
source={require("./images/data.png")}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
hasNavArrow={false}
|
||||
itemWidth={70}
|
||||
titleStyle={{ color: "black", fontSize: 16 }}
|
||||
title="Data usage"
|
||||
/>
|
||||
<SettingsList.Item
|
||||
icon={
|
||||
<View style={styles.imageStyle}>
|
||||
<Image
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
height: 4,
|
||||
width: 18
|
||||
}}
|
||||
source={require("./images/more.png")}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
title="More"
|
||||
itemWidth={70}
|
||||
titleStyle={{ color: "black", fontSize: 16 }}
|
||||
hasNavArrow={false}
|
||||
/>
|
||||
<SettingsList.Header headerStyle={{ marginTop: -5 }} />
|
||||
<SettingsList.Item
|
||||
hasNavArrow={false}
|
||||
title="Device"
|
||||
titleStyle={{
|
||||
color: "#009688",
|
||||
marginBottom: 10,
|
||||
fontWeight: "bold"
|
||||
}}
|
||||
itemWidth={70}
|
||||
borderHide={"Both"}
|
||||
/>
|
||||
<SettingsList.Item
|
||||
icon={
|
||||
<View style={styles.imageStyle}>
|
||||
<Image
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
height: 22,
|
||||
width: 22
|
||||
}}
|
||||
source={require("./images/display2.png")}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
title="Display"
|
||||
itemWidth={70}
|
||||
titleStyle={{ color: "black", fontSize: 16 }}
|
||||
hasNavArrow={false}
|
||||
/>
|
||||
<SettingsList.Item
|
||||
icon={
|
||||
<View style={styles.imageStyle}>
|
||||
<Image
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
height: 20,
|
||||
width: 18
|
||||
}}
|
||||
source={require("./images/sound.png")}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
title="Sound & notification"
|
||||
itemWidth={70}
|
||||
titleStyle={{ color: "black", fontSize: 16 }}
|
||||
hasNavArrow={false}
|
||||
/>
|
||||
<SettingsList.Item
|
||||
icon={
|
||||
<View style={styles.imageStyle}>
|
||||
<Image
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
height: 22,
|
||||
width: 14
|
||||
}}
|
||||
source={require("./images/apps.png")}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
title="Apps"
|
||||
itemWidth={70}
|
||||
titleStyle={{ color: "black", fontSize: 16 }}
|
||||
hasNavArrow={false}
|
||||
/>
|
||||
<SettingsList.Item
|
||||
icon={
|
||||
<View style={styles.imageStyle}>
|
||||
<Image
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
height: 14,
|
||||
width: 20
|
||||
}}
|
||||
source={require("./images/storage.png")}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
title="Storage & USB"
|
||||
itemWidth={70}
|
||||
titleStyle={{ color: "black", fontSize: 16 }}
|
||||
hasNavArrow={false}
|
||||
/>
|
||||
<SettingsList.Item
|
||||
icon={
|
||||
<View style={styles.imageStyle}>
|
||||
<Image
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
height: 22,
|
||||
width: 14
|
||||
}}
|
||||
source={require("./images/battery.png")}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
title="Battery"
|
||||
itemWidth={70}
|
||||
titleStyle={{ color: "black", fontSize: 16 }}
|
||||
hasNavArrow={false}
|
||||
/>
|
||||
<SettingsList.Item
|
||||
icon={
|
||||
<View style={styles.imageStyle}>
|
||||
<Image
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
height: 18,
|
||||
width: 20
|
||||
}}
|
||||
source={require("./images/memory.png")}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
title="Memory"
|
||||
itemWidth={70}
|
||||
titleStyle={{ color: "black", fontSize: 16 }}
|
||||
hasNavArrow={false}
|
||||
/>
|
||||
<SettingsList.Header headerStyle={{ marginTop: -5 }} />
|
||||
</SettingsList>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
imageStyle: {
|
||||
marginLeft: 15,
|
||||
marginRight: 20,
|
||||
alignSelf: "center",
|
||||
width: 20,
|
||||
height: 24,
|
||||
justifyContent: "center"
|
||||
}
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent("SettingsListExample", () => SettingsListExample);
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictFunctionTypes": true,
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react-native"
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"react-native-settings-list-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user