From b18208c7dba0d6243f792157a4358843947c6bf0 Mon Sep 17 00:00:00 2001 From: "Jason Jon E. Carreos" Date: Thu, 22 Feb 2018 13:09:58 +0800 Subject: [PATCH 1/4] Export default snippet --- ...exportDefault_react_native.sublime-snippet | 6 + snippets/snippets.cson | 309 +++++++++--------- 2 files changed, 162 insertions(+), 153 deletions(-) create mode 100644 snippets/exportDefault_react_native.sublime-snippet diff --git a/snippets/exportDefault_react_native.sublime-snippet b/snippets/exportDefault_react_native.sublime-snippet new file mode 100644 index 0000000..1f82242 --- /dev/null +++ b/snippets/exportDefault_react_native.sublime-snippet @@ -0,0 +1,6 @@ + + + ed + source.js,source.jsx + export default + diff --git a/snippets/snippets.cson b/snippets/snippets.cson index 2f55312..7e43174 100644 --- a/snippets/snippets.cson +++ b/snippets/snippets.cson @@ -1,12 +1,5 @@ # Generated with Atomizr - https://github.com/idleberg/atomizr.rb -'.source.js,source.jsx': - 'componentWillMount()': - 'prefix': 'cwm' - 'body': """ - componentWillMount() { - ${1} - }$0 - """ +'.source.jssource.jsx': 'componentDidMount()': 'prefix': 'cdm' 'body': """ @@ -14,6 +7,12 @@ ${1} }$0 """ + 'flex: 1': + 'prefix': 'f1' + 'body': 'flex: ${1:1},$0' + 'React.PropTypes.': + 'prefix': 'rpt' + 'body': 'React.PropTypes.${1}$0' 'componentWillUnmount()': 'prefix': 'cwum' 'body': """ @@ -21,99 +20,74 @@ ${1} }$0 """ - 'alignItems: \'center\',': - 'prefix': 'ai' - 'body': 'alignItems: \'${1:center}\',$0' - 'Create react-native Class': - 'prefix': 'rncc' + 'StyleSheet.create()': + 'prefix': 'ssc' 'body': """ - \'use strict\'; - - import React, { Component } from \'react\'; - - import { - StyleSheet, - View, - } from \'react-native\'; - - class ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}} extends Component { - render() { - return ( - ${2:} - ); - } - } - const styles = StyleSheet.create({ - - }); - - - export default ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}};$0 + ${1}: ${2}, + });$0 """ - 'componentWillReceiveProps(object nextProps)': - 'prefix': 'cwrp' + 'Create StyleSheet': + 'prefix': 'css' 'body': """ - componentWillReceiveProps(nextProps) { - ${1} - }$0 + /* @flow */ + \'use strict\'; + + import { StyleSheet } from \'react-native\'; + + module.exports = StyleSheet.create({ + ${1}: ${2}, + });$0 """ - 'componentWillUpdate(object nextProps, object nextState)': - 'prefix': 'cwud' + 'componentDidUpdate(object prevProps, object prevState)': + 'prefix': 'cdud' 'body': """ - componentWillUpdate(nextProps, nextState) { + componentDidUpdate(prevProps, prevState) { ${1} }$0 """ - 'shouldComponentUpdate(object nextProps, object nextState)': - 'prefix': 'scud' + 'constructor()': + 'prefix': 'constructor()' 'body': """ - shouldComponentUpdate(nextProps, nextState) { - ${1} + constructor(props) { + super(props); + + this.state = {}; }$0 """ - 'ActivityIndicatorIOS': - 'prefix': 'rnActivityIndicatorIOS' + 'export default': + 'prefix': 'ed' + 'body': 'export default ${1}$0' + 'propTypes': + 'prefix': 'propTypes' 'body': """ - - ${4}$0 + static propTypes = { + ${2:prop}: React.PropTypes.${3:Type} + }$0 """ - 'PickerIOS': - 'prefix': 'rnPickerIOS' + 'defaultProps': + 'prefix': 'defaultProps' 'body': """ - $0 + static defaultProps = { + ${2:prop}: ${3:\'value\'} + }$0 """ - 'DatePickerIOS': - 'prefix': 'rnDatePickerIOS' + 'shouldComponentUpdate(object nextProps, object nextState)': + 'prefix': 'scud' 'body': """ - - ${12}$0 + shouldComponentUpdate(nextProps, nextState) { + ${1} + }$0 """ - 'NavigatorIOS': - 'prefix': 'rnNavigatorIOS' + 'TouchableHighlight': + 'prefix': 'rnTouchableHighlight' 'body': """ - - ${3}$0 + + ${4} + $0 """ 'MapView': 'prefix': 'rnMapView' @@ -130,15 +104,14 @@ /> ${5}$0 """ - 'ListView': - 'prefix': 'rnListView' + 'Image': + 'prefix': 'rnImage' 'body': """ - ${4:{rowData\}}}} + source={{uri: \'${2}\'}} /> - ${5}$0 + ${3}$0 """ 'View': 'prefix': 'rnView' @@ -150,6 +123,26 @@ ${2} $0 """ + 'ListView': + 'prefix': 'rnListView' + 'body': """ + ${4:{rowData\}}}} + /> + ${5}$0 + """ + 'Navigator': + 'prefix': 'rnNavigator' + 'body': """ + { + ${2} + }} + />$0 + """ 'ScrollView': 'prefix': 'rnScrollView' 'body': """ @@ -159,90 +152,100 @@ ${3} $0 """ - 'Image': - 'prefix': 'rnImage' + 'DatePickerIOS': + 'prefix': 'rnDatePickerIOS' 'body': """ - - ${3}$0 - """ - 'TouchableHighlight': - 'prefix': 'rnTouchableHighlight' - 'body': """ - - ${4} - $0 + ${12}$0 """ - 'Navigator': - 'prefix': 'rnNavigator' + 'NavigatorIOS': + 'prefix': 'rnNavigatorIOS' 'body': """ - { - ${2} + $0 + /> + ${3}$0 """ - 'propTypes': - 'prefix': 'propTypes' + 'PickerIOS': + 'prefix': 'rnPickerIOS' 'body': """ - static propTypes = { - ${2:prop}: React.PropTypes.${3:Type} - }$0 + $0 """ - 'defaultProps': - 'prefix': 'defaultProps' + 'ActivityIndicatorIOS': + 'prefix': 'rnActivityIndicatorIOS' 'body': """ - static defaultProps = { - ${2:prop}: ${3:\'value\'} - }$0 + + ${4}$0 """ - 'componentDidUpdate(object prevProps, object prevState)': - 'prefix': 'cdud' + 'justifyContent: 'center',': + 'prefix': 'jc' + 'body': 'justifyContent: \'${1:center}\',$0' + 'componentWillMount()': + 'prefix': 'cwm' 'body': """ - componentDidUpdate(prevProps, prevState) { + componentWillMount() { ${1} }$0 """ - 'StyleSheet.create()': - 'prefix': 'ssc' + 'Create react-native Class': + 'prefix': 'rncc' 'body': """ + \'use strict\'; + + import React, { Component } from \'react\'; + + import { + StyleSheet, + View, + } from \'react-native\'; + + class ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}} extends Component { + render() { + return ( + ${2:} + ); + } + } + const styles = StyleSheet.create({ - ${1}: ${2}, - });$0 + + }); + + + export default ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}};$0 """ - 'flex: 1': - 'prefix': 'f1' - 'body': 'flex: ${1:1},$0' - 'Create StyleSheet': - 'prefix': 'css' + 'alignItems: 'center',': + 'prefix': 'ai' + 'body': 'alignItems: \'${1:center}\',$0' + 'componentWillReceiveProps(object nextProps)': + 'prefix': 'cwrp' 'body': """ - /* @flow */ - \'use strict\'; - - import { StyleSheet } from \'react-native\'; - - module.exports = StyleSheet.create({ - ${1}: ${2}, - });$0 + componentWillReceiveProps(nextProps) { + ${1} + }$0 """ - 'justifyContent: \'center\',': - 'prefix': 'jc' - 'body': 'justifyContent: \'${1:center}\',$0' - 'constructor()': - 'prefix': 'constructor()' + 'componentWillUpdate(object nextProps, object nextState)': + 'prefix': 'cwud' 'body': """ - constructor(props) { - super(props); - - this.state = {}; + componentWillUpdate(nextProps, nextState) { + ${1} }$0 """ - 'React.PropTypes.': - 'prefix': 'rpt' - 'body': 'React.PropTypes.${1}$0' From 3a89eb0558622717cfb5330245eca837bdcaf5bf Mon Sep 17 00:00:00 2001 From: "Jason Jon E. Carreos" Date: Thu, 22 Feb 2018 13:24:25 +0800 Subject: [PATCH 2/4] Stateless function snippet --- snippets/snippets.cson | 25 +++++++++++++++++ ...elessFunction_react_native.sublime-snippet | 28 +++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 snippets/statelessFunction_react_native.sublime-snippet diff --git a/snippets/snippets.cson b/snippets/snippets.cson index 7e43174..8e8a62e 100644 --- a/snippets/snippets.cson +++ b/snippets/snippets.cson @@ -10,6 +10,31 @@ 'flex: 1': 'prefix': 'f1' 'body': 'flex: ${1:1},$0' + 'Create react-native Stateless function': + 'prefix': 'rnstf' + 'body': """ + \'use strict\'; + + import React from \'react\'; + + import { + ${4}, + } from \'react-native\'; + + const ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}} = (props) => { + render() { + return ( + ${3:} + ); + } + } + + const styles = StyleSheet.create({ + + }); + + export default ${2:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}};$0 + """ 'React.PropTypes.': 'prefix': 'rpt' 'body': 'React.PropTypes.${1}$0' diff --git a/snippets/statelessFunction_react_native.sublime-snippet b/snippets/statelessFunction_react_native.sublime-snippet new file mode 100644 index 0000000..4d124f0 --- /dev/null +++ b/snippets/statelessFunction_react_native.sublime-snippet @@ -0,0 +1,28 @@ + + { + render() { + return ( + ${3:} + ); + } +} + +const styles = StyleSheet.create({ + +}); + +export default ${2:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}}; +]]> + rnstf + source.js,source.jsx + Create react-native Stateless function + From 26dcb82a96c6382d79f1d8ebbb5f689e5dfcebce Mon Sep 17 00:00:00 2001 From: "Jason Jon E. Carreos" Date: Thu, 22 Feb 2018 13:50:32 +0800 Subject: [PATCH 3/4] Updated README file --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 7c70be9..67106e8 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,11 @@ For Atom, search for `react-native-snippets-horse` in the [Atom Package Manager] rncc Scaffolds a full react-native component class. + + React Native Create Stateless Function + rnstf + Scaffolds a stateless function. + this.setState() tss @@ -41,6 +46,10 @@ For Atom, search for `react-native-snippets-horse` in the [Atom Package Manager] React.PropTypes. rpt + + export default + ed + ### Lifecycle Methods From c6171f4b79793a58d28fff1c29b89eb8f4f444cf Mon Sep 17 00:00:00 2001 From: "Jason Jon E. Carreos" Date: Fri, 23 Feb 2018 12:21:49 +0800 Subject: [PATCH 4/4] Addressed PR comments --- snippets/snippets.cson | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/snippets/snippets.cson b/snippets/snippets.cson index 8e8a62e..c65d799 100644 --- a/snippets/snippets.cson +++ b/snippets/snippets.cson @@ -1,5 +1,5 @@ # Generated with Atomizr - https://github.com/idleberg/atomizr.rb -'.source.jssource.jsx': +'.source.js,source.jsx': 'componentDidMount()': 'prefix': 'cdm' 'body': """ @@ -14,13 +14,13 @@ 'prefix': 'rnstf' 'body': """ \'use strict\'; - + import React from \'react\'; - + import { ${4}, } from \'react-native\'; - + const ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}} = (props) => { render() { return ( @@ -28,11 +28,11 @@ ); } } - + const styles = StyleSheet.create({ - + }); - + export default ${2:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}};$0 """ 'React.PropTypes.': @@ -57,9 +57,9 @@ 'body': """ /* @flow */ \'use strict\'; - + import { StyleSheet } from \'react-native\'; - + module.exports = StyleSheet.create({ ${1}: ${2}, });$0 @@ -76,7 +76,7 @@ 'body': """ constructor(props) { super(props); - + this.state = {}; }$0 """ @@ -220,7 +220,7 @@ /> ${4}$0 """ - 'justifyContent: 'center',': + 'justifyContent: \'center\',': 'prefix': 'jc' 'body': 'justifyContent: \'${1:center}\',$0' 'componentWillMount()': @@ -234,14 +234,14 @@ 'prefix': 'rncc' 'body': """ \'use strict\'; - + import React, { Component } from \'react\'; - + import { StyleSheet, View, } from \'react-native\'; - + class ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}} extends Component { render() { return ( @@ -249,15 +249,15 @@ ); } } - + const styles = StyleSheet.create({ - + }); - - + + export default ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}};$0 """ - 'alignItems: 'center',': + 'alignItems: \'center\',': 'prefix': 'ai' 'body': 'alignItems: \'${1:center}\',$0' 'componentWillReceiveProps(object nextProps)':