Feat: Re-draw code when text is changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "taro-code",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Taro.js barcode & qrcode",
   "scripts": {
     "build": "export TARO_BUILD_TYPE=ui && taro build --ui",

src/components/Barcode/index.js

@@ -6,11 +6,18 @@ import './style.css'
 
 class Barcode extends Component {
   componentDidMount () {
-    const ctx = Taro.createCanvasContext('barcode', this)
+    this.drawCode(this.props.text)
+  }
 
+  componentWillReceiveProps (nextProps) {
+    this.drawCode(nextProps.text)
+  }
+
+  drawCode (text) {
+    const ctx = Taro.createCanvasContext('barcode', this)
     utils.barcode({
       ctx,
-      text: this.props.text,
+      text: text,
       width: this.props.width * 4,
       height: this.props.height * 4,
     })

src/components/Qrcode/index.js

@@ -6,8 +6,16 @@ import './style.css'
 
 class QRCode extends Component {
   componentDidMount () {
+    this.drawCode(this.props.text)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    this.drawCode(nextProps.text)
+  }
+
+  drawCode (text) {
     const ctx = Taro.createCanvasContext('qrcode', this)
-    utils.qrcode(this.props.text, {
+    utils.qrcode(text, {
       ctx,
       size: this.props.size * 2,
       padding: 0,

src/pages/index/index.css

@@ -4,3 +4,7 @@
   justify-content: center;
   align-items: center;
 }
+.barcode {
+  padding-top: 30px;
+  padding-bottom: 50px;
+}

src/pages/index/index.js

@@ -10,9 +10,19 @@ export default class Index extends Component {
     navigationBarTitleText: '首页'
   }
 
+  state = {
+    text: 'hello'
+  }
+
   componentWillMount () { }
 
-  componentDidMount () { }
+  componentDidMount () {
+    setInterval(() => {
+      this.setState({
+        text: Date.now() + ''
+      })
+    }, 1000);
+  }
 
   componentWillUnmount () { }
 
@@ -23,8 +33,12 @@ export default class Index extends Component {
   render () {
     return (
       <View className='index'>
-        <Barcode text='hello' width={320} height={60} />
-        <QRCode text='hello world' size={300} />
+        <View className='barcode'>
+          <Barcode text={this.state.text} width={320} height={60} />
+        </View>
+        <View className='qrcode'>
+          <QRCode text={this.state.text} size={300} />
+        </View>
       </View>
     )
   }