diff --git a/README.md b/README.md
index ce6da9a..ad62e7c 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,7 @@ The following props are used:
| defaultItemSize | Sets default width for all children | React.PropTypes.number |
| underlayColor | Sets default underlayColor for all children | React.PropTypes.string |
| defaultTitleStyle | Sets default style for all children's titles | React.PropTypes.string |
+| defaultAllowFontScaling | Sets default allow font scaling for all children | React.PropTypes.bool |
### \
The following props are used:
@@ -74,6 +75,7 @@ The following props are used:
|-------------|-----------------------------------------|------------------------|
| headerText | Text for the header | React.PropTypes.string |
| headerStyle | Sets border color for the settings list | Text.propTypes.style |
+| allowFontScaling | Sets allow font scaling | React.PropTypes.bool |
| headerRef | Sets a `ref` on the header component | React.PropTypes.func |
### \
@@ -99,8 +101,10 @@ The following props are used:
| isAuth | Sets item as an authorization item | React.PropTypes.bool |
| authPropsUser | Changes the props for the first TextInput component; overwrites default | React.PropTypes.node |
| authPropsPW | Changes the props for the second TextInput component; overwrites default | React.PropTypes.node |
+| allowFontScaling | Sets allow font scaling | React.PropTypes.bool |
| itemRef | Sets a `ref` on the TouchableHighlight that SettingsList.Item renders to | React.PropTypes.func |
+
###### Top
diff --git a/index.js b/index.js
index 00e7242..dc798b2 100644
--- a/index.js
+++ b/index.js
@@ -27,49 +27,51 @@ class SettingsList extends React.Component {
defaultTitleStyle: Text.propTypes.style,
defaultTitleInfoPosition: PropTypes.string,
scrollViewProps: PropTypes.object,
+ defaultAllowFontScaling: PropTypes.bool
};
- static defaultProps ={
+ static defaultProps = {
backgroundColor: 'white',
borderColor: 'black',
defaultItemSize: 50,
underlayColor: 'transparent',
- defaultTitleStyle: {fontSize: 16}
+ defaultTitleStyle: { fontSize: 16 },
+ defaultAllowFontScaling: true
};
- _getGroups(){
+ _getGroups() {
var groupNumber = -1;
let headers = [];
let itemGroup = [];
let result = [];
React.Children.forEach(this.props.children, (child) => {
// Allow for null, optional fields
- if(!child) return;
+ if (!child) return;
- if(child.type.displayName === 'Header'){
- if(groupNumber != -1){
- result[groupNumber] = {items: itemGroup, header: headers[groupNumber] };
+ if (child.type.displayName === 'Header') {
+ if (groupNumber != -1) {
+ result[groupNumber] = { items: itemGroup, header: headers[groupNumber] };
itemGroup = [];
}
groupNumber++;
headers[groupNumber] = child.props;
- } else if(child.type.displayName === 'Item'){
- if(groupNumber == -1){
+ } else if (child.type.displayName === 'Item') {
+ if (groupNumber == -1) {
groupNumber++;
}
itemGroup.push(child.props);
} else {
- if(groupNumber == -1){
+ if (groupNumber == -1) {
groupNumber++;
}
itemGroup.push(child);
}
});
- result[groupNumber] = {items: itemGroup, header: headers[groupNumber] };
+ result[groupNumber] = { items: itemGroup, header: headers[groupNumber] };
return result;
}
- render(){
+ render() {
return (
{this._getGroups().map((group, index) => {
@@ -79,14 +81,16 @@ class SettingsList extends React.Component {
)
}
- _groupView(group, index){
- if(group.header){
+ _groupView(group, index) {
+ if (group.header) {
+
+ let allowFontScaling = group.header.allowFontScaling != null ? group.header.allowFontScaling : this.props.defaultAllowFontScaling;
return (
- {group.header.headerText}
-
+ {group.header.headerText}
+
{group.items.map((item, index) => {
- return this._itemView(item,index, group.items.length);
+ return this._itemView(item, index, group.items.length);
})}
@@ -95,9 +99,9 @@ class SettingsList extends React.Component {
let items;
if (group.items.length > 0) {
items = (
-
+
{group.items.map((item, index) => {
- return this._itemView(item,index, group.items.length);
+ return this._itemView(item, index, group.items.length);
})}
);
@@ -114,129 +118,136 @@ class SettingsList extends React.Component {
_itemEditableBlock(item, index, position) {
return ([
-
- {item.title}
- ,
- item.isEditable ?
+
+ {item.title}
+ ,
+ item.isEditable ?
item.onTextChange(text)}
- value={item.value} />
+ key={item.id}
+ style={item.editableTextStyle ? item.editableTextStyle : styles.editableText}
+ placeholder={item.placeholder}
+ onChangeText={(text) => item.onTextChange(text)}
+ value={item.value} />
: null
])
}
_itemTitleBlock(item, index, position) {
+ let allowFontScaling = item.allowFontScaling != null ? item.allowFontScaling : this.props.defaultAllowFontScaling;
+
return ([
- {item.title}
+ key={'itemTitle_' + index}
+ style={[
+ item.titleStyle ? item.titleStyle : this.props.defaultTitleStyle,
+ position === 'Bottom' ? null : styles.titleText
+ ]}
+ allowFontScaling={allowFontScaling}>
+ {item.title}
,
item.titleInfo ?
- {item.titleInfo}
+ position === 'Bottom' ? null : styles.rightSide,
+ { color: '#B1B1B1' },
+ item.titleInfoStyle
+ ]}
+ allowFontScaling={allowFontScaling}>
+ {item.titleInfo}
: null
])
}
- _itemView(item, index, max){
+ _itemView(item, index, max) {
var border;
if (item.type && item.type.displayName) {
- return item;
+ return item;
}
- if(item.borderHide) {
- switch(item.borderHide) {
- case 'Top' : border = {borderBottomWidth:1, borderColor: this.props.borderColor}; break;
- case 'Bottom' : border = {borderTopWidth:1, borderColor: this.props.borderColor}; break;
+ if (item.borderHide) {
+ switch (item.borderHide) {
+ case 'Top': border = { borderBottomWidth: 1, borderColor: this.props.borderColor }; break;
+ case 'Bottom': border = { borderTopWidth: 1, borderColor: this.props.borderColor }; break;
}
} else {
- border = index === max-1 ? {borderWidth:0} : {borderBottomWidth:1, borderColor: this.props.borderColor};
+ border = index === max - 1 ? { borderWidth: 0 } : { borderBottomWidth: 1, borderColor: this.props.borderColor };
}
let titleInfoPosition = item.titleInfoPosition ? item.titleInfoPosition : this.props.defaultTitleInfoPosition;
+ let allowFontScaling = item.allowFontScaling != null ? item.allowFontScaling : this.props.defaultAllowFontScaling;
return (
-
+
{item.icon}
{item.isAuth ?
-
-
+
+
this.refs.PasswordInputBlock.focus()}
- style={{flex:1,height:30, borderBottomWidth:1}}
- placeholder = "username"
+ style={{ flex: 1, height: 30, borderBottomWidth: 1 }}
+ placeholder="username"
+ allowFontScaling={allowFontScaling}
{...item.authPropsUser}
/>
item.onPress()}
/>
- :
-
- {titleInfoPosition === 'Bottom' ?
-
- {item.isEditable ? this._itemEditableBlock(item, inde, 'Bottom') : this._itemTitleBlock(item, index, 'Bottom')}
+ :
+
+ {titleInfoPosition === 'Bottom' ?
+
+ {item.isEditable ? this._itemEditableBlock(item, inde, 'Bottom') : this._itemTitleBlock(item, index, 'Bottom')}
- : item.isEditable ? this._itemEditableBlock(item, index) : this._itemTitleBlock(item, index)}
-
- {item.rightSideContent ? item.rightSideContent : null}
- {item.hasSwitch ?
- item.switchOnValueChange(value)}
- value={item.switchState}/>
+ : item.isEditable ? this._itemEditableBlock(item, index) : this._itemTitleBlock(item, index)}
+
+ {item.rightSideContent ? item.rightSideContent : null}
+ {item.hasSwitch ?
+ item.switchOnValueChange(value)}
+ value={item.switchState} />
: null}
- {this.itemArrowIcon(item)}
-
- }
+ {this.itemArrowIcon(item)}
+
+ }
)
}
itemArrowIcon(item) {
- if(item.arrowIcon) {
- return item.arrowIcon;
+ if (item.arrowIcon) {
+ return item.arrowIcon;
}
- if(item.hasNavArrow){
- return ;
+ if (item.hasNavArrow) {
+ return ;
}
return null;
@@ -246,22 +257,22 @@ module.exports = SettingsList;
const styles = StyleSheet.create({
itemBox: {
- flex:1,
- justifyContent:'center',
- flexDirection:'row'
+ flex: 1,
+ justifyContent: 'center',
+ flexDirection: 'row'
},
titleBox: {
- flex:1,
- marginLeft:15,
- flexDirection:'row'
+ flex: 1,
+ marginLeft: 15,
+ flexDirection: 'row'
},
titleText: {
- flex:1,
- alignSelf:'center'
+ flex: 1,
+ alignSelf: 'center'
},
rightSide: {
- marginRight:15,
- alignSelf:'center'
+ marginRight: 15,
+ alignSelf: 'center'
},
editableText: {
flex: 1,
@@ -288,7 +299,7 @@ SettingsList.Header = createReactClass({
/**
* not directly rendered
*/
- render(){
+ render() {
return null;
}
});
@@ -311,7 +322,7 @@ SettingsList.Item = createReactClass({
/**
* Item Box Style
*/
- itemBoxStyle : ViewPropTypes.style,
+ itemBoxStyle: ViewPropTypes.style,
/**
* Title Box Style
*/
@@ -393,7 +404,7 @@ SettingsList.Item = createReactClass({
itemRef: PropTypes.func,
},
- getDefaultProps(){
+ getDefaultProps() {
return {
hasNavArrow: true
}
@@ -401,7 +412,7 @@ SettingsList.Item = createReactClass({
/**
* not directly rendered
*/
- render(){
+ render() {
return null;
},
});