From 0d1fd37d2a2114523f155eef90b0e141f827fa2a Mon Sep 17 00:00:00 2001 From: TinySymphony Date: Wed, 5 Apr 2017 20:29:19 +0800 Subject: [PATCH 1/7] add max width of items --- LabelSelect/LabelSelectStyle.js | 6 ++++-- LabelSelect/index.js | 11 ++++++----- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/LabelSelect/LabelSelectStyle.js b/LabelSelect/LabelSelectStyle.js index ee8f533..5e3cec1 100644 --- a/LabelSelect/LabelSelectStyle.js +++ b/LabelSelect/LabelSelectStyle.js @@ -43,7 +43,8 @@ export default StyleSheet.create({ labelText: { padding: 6, fontSize: 14, - lineHeight: 14 + lineHeight: 14, + maxWidth: 300 }, closeContainer: { padding: 8, @@ -110,7 +111,8 @@ export default StyleSheet.create({ borderBottomColor: '#bbb' }, modalText: { - fontSize: 16 + fontSize: 16, + width: width * 0.6 - 70 }, buttonText: { color: '#fff', diff --git a/LabelSelect/index.js b/LabelSelect/index.js index de58863..262aa6f 100644 --- a/LabelSelect/index.js +++ b/LabelSelect/index.js @@ -165,7 +165,8 @@ class Label extends Component { const {enable, readOnly, onCancel} = this.props; return ( - {this.props.children} + {this.props.children} {enable && !readOnly && - {this.props.children} - - {this.isSelected && } - + {this.props.children} + + {this.isSelected && } + ); From b6d2460d47cc78c583a447636ef673a7ed10dc94 Mon Sep 17 00:00:00 2001 From: TinySymphony Date: Wed, 5 Apr 2017 20:30:30 +0800 Subject: [PATCH 2/7] 1.0.8v --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1d45753..d5c7144 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-label-select", - "version": "1.0.7", + "version": "1.0.8", "description": "A label select component for React Native apps", "keywords": [ "label", From cd2ae6cb5223779ddf8929b9a0c24de007f5f8c2 Mon Sep 17 00:00:00 2001 From: TinySymphony Date: Fri, 7 Apr 2017 13:11:12 +0800 Subject: [PATCH 3/7] fix test snap --- __tests__/__snapshots__/test.js.snap | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/__tests__/__snapshots__/test.js.snap b/__tests__/__snapshots__/test.js.snap index 13d2bf8..b9c9630 100644 --- a/__tests__/__snapshots__/test.js.snap +++ b/__tests__/__snapshots__/test.js.snap @@ -36,10 +36,13 @@ exports[`test renders a modal item 1`] = ` C @@ -99,12 +102,15 @@ exports[`test renders disabled LabelSelect 1`] = ` Date: Wed, 26 Apr 2017 19:54:40 +0800 Subject: [PATCH 4/7] fix doc --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 96362ec..58a2b6c 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ import LabelSelect from 'react-native-label-select'; style={yourStyle} onConfirm={(list) => {...}}> - selected ItemA @@ -80,7 +80,7 @@ import LabelSelect from 'react-native-label-select'; Use `ref` property as a hook to invoke internal methods. ```html -... +... ``` ```js From d1d96eb3c38180d97880362f71b6fed9f564c1b3 Mon Sep 17 00:00:00 2001 From: TinySymphony Date: Wed, 26 Apr 2017 19:56:00 +0800 Subject: [PATCH 5/7] fix doc --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d5c7144..123ee81 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-label-select", - "version": "1.0.8", + "version": "1.0.9", "description": "A label select component for React Native apps", "keywords": [ "label", From c6df83e0beb673435289e446a1614df151472f67 Mon Sep 17 00:00:00 2001 From: TinySymphony Date: Thu, 4 May 2017 17:32:10 +0800 Subject: [PATCH 6/7] v1.0.10 --- LabelSelect/LabelSelectStyle.js | 6 +- LabelSelect/index.js | 57 ++-- README.md | 8 +- __tests__/__snapshots__/test.js.snap | 373 +++++++++++++++++---------- __tests__/test.js | 2 + package.json | 2 +- 6 files changed, 285 insertions(+), 163 deletions(-) diff --git a/LabelSelect/LabelSelectStyle.js b/LabelSelect/LabelSelectStyle.js index 5e3cec1..a6970be 100644 --- a/LabelSelect/LabelSelectStyle.js +++ b/LabelSelect/LabelSelectStyle.js @@ -87,19 +87,19 @@ export default StyleSheet.create({ height: height * 0.6 - 80 }, buttonView: { - height: 40, - backgroundColor: Color.main, borderBottomLeftRadius: 10, borderBottomRightRadius: 10, flexDirection: 'row', justifyContent: 'space-around' }, modalButton: { + height: 40, width: width * 0.3, paddingLeft: 20, paddingRight: 20, justifyContent: 'center', - alignItems: 'center' + alignItems: 'center', + backgroundColor: Color.main }, modalItem: { height: 50, diff --git a/LabelSelect/index.js b/LabelSelect/index.js index 262aa6f..16cc13b 100644 --- a/LabelSelect/index.js +++ b/LabelSelect/index.js @@ -22,15 +22,20 @@ class LabelSelect extends Component { readOnly: PropTypes.bool, enable: PropTypes.bool, onConfirm: PropTypes.func, - enableAddBtn: PropTypes.bool + enableAddBtn: PropTypes.bool, + confirmText: PropTypes.string, + cancelText: PropTypes.string } static defaultProps = { style: {}, + customStyle: {}, title: ' ', enable: true, readOnly: false, onConfirm: () => {}, - enableAddBtn: true + enableAddBtn: true, + confirmText: 'Confirm', + cancelText: 'Cancel' } constructor(props) { super(props); @@ -69,7 +74,16 @@ class LabelSelect extends Component { else {this.selectedList.push(time);} } render() { - const {readOnly, enable, title, style, enableAddBtn} = this.props; + const { + readOnly, + enable, + title, + style, + enableAddBtn, + customStyle, + confirmText, + cancelText + } = this.props; let selectedLabels = React.Children.toArray(this.props.children) .filter(item => item.type === Label) .map((child, index) => { @@ -94,7 +108,7 @@ class LabelSelect extends Component { {this.openModal();}}> + onPress={this.openModal}> - + {title} {modalItems} - + - Cancel + + {cancelText} + - Confirm + activeOpacity={0.8} + onPress={this.confirmSelect}> + + {confirmText} + @@ -156,16 +174,17 @@ class Label extends Component { static defaultProps = { onCancel: () => {}, enable: true, - readOnly: false + readOnly: false, + customStyle: {} } constructor(props) { super(props); } render() { - const {enable, readOnly, onCancel} = this.props; + const {enable, readOnly, onCancel, customStyle} = this.props; return ( - {this.props.children} {enable && !readOnly && {this.props.children} - - {this.isSelected && } + + {this.isSelected && } diff --git a/README.md b/README.md index 58a2b6c..81894b3 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,9 @@ import LabelSelect from 'react-native-label-select'; | enable | true | bool | is the component interactive | | enableAddBtn | true | bool | whether to show the add button | | onConfirm | - | function | Triggered when the confirm button of modal is pressed with the newly selected items list passed as the only argument | - +| confirmText | - | string | Text of confirm button. | +| cancelText | - | string | Text of cancelText button. | +| customStyle | - | object | You can customize styles of `modal` / `buttonView` / `confirmButton` / `confirmText` / `cancelButton` / `cancelText` by `customStyle. | **LabelSelect.Label** @@ -57,7 +59,8 @@ import LabelSelect from 'react-native-label-select'; | Prop | Default | Type | Description | | --- | --- | --- | --- | | onCancel | - | function | Triggered when the close button of Label is pressed. | -|data| -| any | Data that bind to the Label | +| data | - | any | Data that bind to the Label | +| customStyle | - | object | You can customize styles of `text` by `customStyle. | **LabelSelect.ModalItem** @@ -76,6 +79,7 @@ import LabelSelect from 'react-native-label-select'; | --- | --- | --- | | openModal | - | Open select modal | | cancelSelect | - | Close select modal. Also triggered when the cancel button of modal being pressed. | +| customStyle | - | object | You can customize styles of `modalText` / `outerCircle` / `innerCircle` by `customStyle. | Use `ref` property as a hook to invoke internal methods. diff --git a/__tests__/__snapshots__/test.js.snap b/__tests__/__snapshots__/test.js.snap index b9c9630..2e1bc9a 100644 --- a/__tests__/__snapshots__/test.js.snap +++ b/__tests__/__snapshots__/test.js.snap @@ -61,6 +61,7 @@ exports[`test renders a modal item 1`] = ` "width": 20, }, Object {}, + Object {}, ] } /> @@ -116,6 +117,7 @@ exports[`test renders disabled LabelSelect 1`] = ` Object { "color": "#999", }, + Object {}, ] }> A @@ -157,6 +159,7 @@ exports[`test renders disabled LabelSelect 1`] = ` Object { "color": "#999", }, + Object {}, ] }> B @@ -203,13 +206,16 @@ exports[`test renders disabled LabelSelect 1`] = ` style={Object {}}> - - Cancel - + + Cancel + + + - - Confirm - + + Confirm + + @@ -394,6 +425,7 @@ exports[`test renders enabled LabelSelect 1`] = ` "padding": 6, }, false, + Object {}, ] }> A @@ -473,6 +505,7 @@ exports[`test renders enabled LabelSelect 1`] = ` "padding": 6, }, false, + Object {}, ] }> B @@ -612,13 +645,16 @@ exports[`test renders enabled LabelSelect 1`] = ` style={Object {}}> - - Cancel - + + Cancel + + + - - Confirm - + + Confirm + + @@ -803,6 +864,7 @@ exports[`test renders readOnly LabelSelect 1`] = ` "padding": 6, }, false, + Object {}, ] }> A @@ -840,6 +902,7 @@ exports[`test renders readOnly LabelSelect 1`] = ` "padding": 6, }, false, + Object {}, ] }> B @@ -886,13 +949,16 @@ exports[`test renders readOnly LabelSelect 1`] = ` style={Object {}}> - - Cancel - + + Cancel + + + - - Confirm - + + Confirm + + diff --git a/__tests__/test.js b/__tests__/test.js index b0731f9..dc46a00 100644 --- a/__tests__/test.js +++ b/__tests__/test.js @@ -100,8 +100,10 @@ it('interact with modal', () => { expect(arr[0]).toEqual(item); expect(tree.state('isModalVisible')).toEqual(false); select.openModal(); + expect(tree.state('isModalVisible')).toEqual(true); select.cancelSelect(); expect(tree.state('isModalVisible')).toEqual(false); + select.confirmSelect(); }); it('selecte a item', () => { diff --git a/package.json b/package.json index 123ee81..20bf7d1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-label-select", - "version": "1.0.9", + "version": "1.0.10", "description": "A label select component for React Native apps", "keywords": [ "label", From 257574a0ef7714f466f01a269b2adcf7e262c452 Mon Sep 17 00:00:00 2001 From: TinySymphony Date: Fri, 5 May 2017 11:20:56 +0800 Subject: [PATCH 7/7] fix modalText --- LabelSelect/index.js | 7 ++++++- __tests__/__snapshots__/test.js.snap | 11 +++++++---- package.json | 2 +- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/LabelSelect/index.js b/LabelSelect/index.js index 16cc13b..d9bbced 100644 --- a/LabelSelect/index.js +++ b/LabelSelect/index.js @@ -231,7 +231,12 @@ class ModalItem extends Component { underlayColor="transparent" onPress={this._toggleSelect}> - {this.props.children} + + {this.props.children} + {this.isSelected && } diff --git a/__tests__/__snapshots__/test.js.snap b/__tests__/__snapshots__/test.js.snap index 2e1bc9a..f722947 100644 --- a/__tests__/__snapshots__/test.js.snap +++ b/__tests__/__snapshots__/test.js.snap @@ -40,10 +40,13 @@ exports[`test renders a modal item 1`] = ` ellipsizeMode="tail" numberOfLines={1} style={ - Object { - "fontSize": 16, - "width": 380, - } + Array [ + Object { + "fontSize": 16, + "width": 380, + }, + Object {}, + ] }> C diff --git a/package.json b/package.json index 20bf7d1..ad7fb1a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-label-select", - "version": "1.0.10", + "version": "1.1.0", "description": "A label select component for React Native apps", "keywords": [ "label",