feat: add Barcode & QRCode custom style (#22)

Miaonster · Aug 24, 2020 · 862db8b · 862db8b
1 parent 38c60e0
commit 862db8b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 399 deletions.
diff --git a/...s/taro-code-demo/src/pages/index/index.js → .../taro-code-demo/src/pages/index/index.tsx b/...s/taro-code-demo/src/pages/index/index.js → .../taro-code-demo/src/pages/index/index.tsx
@@ -5,25 +5,27 @@ import './index.css'
 
 class Index extends Component {
   state = {
-    text: 'hello'
+    text: 'hello',
+    size: 300
   }
 
   componentDidMount () {
     setInterval(() => {
       this.setState({
-        text: Date.now() + ''
+        text: Date.now() + '',
+        size: Math.floor(Math.random() * (300 - 200) + 200)
       })
-    }, 1000)
+    }, 2000)
   }
 
   render () {
     return (
       <View className='index'>
         <View className='barcode'>
-          <Barcode text={this.state.text} width={300} height={60} />
+          <Barcode text={this.state.text} style={{ width: this.state.size + 'px' }} height={60} />
         </View>
         <View className='qrcode'>
-          <QRCode text={this.state.text} size={300} />
+          <QRCode text={this.state.text} size={this.state.size} />
         </View>
       </View>
     )

diff --git a/packages/taro-code/src/components/Barcode/index.tsx b/packages/taro-code/src/components/Barcode/index.tsx
@@ -3,19 +3,20 @@ import PropTypes from 'prop-types'
 import { Image } from '@tarojs/components'
 import barcode from '../../common/barcode'
 
-const Barcode = ({ text = '', scale = 4, width = 300, height = 60 }) => {
+const Barcode = ({ text = '', scale = 4, width = 300, height = 60, style = {} }) => {
   const image = useMemo(() => barcode({ text, scale }), [text, scale])
   const widthString = width ? width + 'px' : ''
   const heightString = height ? height + 'px' : ''
-  const style = { width: widthString, height: heightString }
-  return <Image style={style} src={image || ''} />
+  const finalStyle = { width: widthString, height: heightString, ...style }
+  return <Image style={finalStyle} src={image || ''} />
 }
 
 Barcode.propTypes = {
   text: PropTypes.string.isRequired,
   scale: PropTypes.number,
   width: PropTypes.number,
-  height: PropTypes.number
+  height: PropTypes.number,
+  style: PropTypes.object,
 }
 
 export default Barcode
diff --git a/packages/taro-code/src/components/QRCode/index.tsx b/packages/taro-code/src/components/QRCode/index.tsx
@@ -3,19 +3,22 @@ import PropTypes from 'prop-types'
 import { Image } from '@tarojs/components'
 import { createQrCodeImg } from '../../common/qrcode'
 
-const QRCode = ({ text = '', size = 100, scale = 4, typeNumber = 2, errorCorrectLevel = 'M' }) => {
+const QRCode = ({ text = '', size = 100, scale = 4, typeNumber = 2, errorCorrectLevel = 'M', style = {} }) => {
   const image = useMemo(() => {
     const options = { errorCorrectLevel, typeNumber, size: size * scale }
     return createQrCodeImg(text, options)
   }, [text, scale, size, errorCorrectLevel, typeNumber])
-  const style = { width: size + 'px', height: size + 'px' }
-  return <Image style={style} src={image} />
+  const widthString = size ? size + 'px' : ''
+  const heightString = size ? size + 'px' : ''
+  const finalStyle = { width: widthString, height: heightString, ...style }
+  return <Image style={finalStyle} src={image} />
 }
 
 QRCode.propTypes = {
   text: PropTypes.string.isRequired,
   size: PropTypes.number,
   scale: PropTypes.number,
+  style: PropTypes.object,
   errorCorrectLevel: PropTypes.string,
   typeNumber: PropTypes.number
 }