Cloned2Preserve
/
qrbtf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev-redux' of https://github.com/ciaochaos/qrbtf into dev-redux 

 Conflicts:
	src/api/db.js
This commit is contained in:
ciaochaos 2020-05-13 16:38:20 +08:00
parent 71562c1142 14021335d2
commit a5570ab2e9
11 changed files with 185 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.idea/misc.xml
View File

@ -1,9 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="JSX" />
</component>
<component name="ProjectPlainTextFileTypeManager">
<file url="file://$PROJECT_DIR$/src/logo.svg" />
<option name="languageLevel" value="FLOW" />
</component>
</project>

1
package.json
View File

@ -37,6 +37,7 @@
},
"homepage": "./",
"devDependencies": {
"reactcss": "^1.2.3",
"redux-devtools": "^3.5.0",
"tcb-js-sdk": "^1.6.1"
}

18
src/api/db.js
View File

@ -6,12 +6,8 @@ const app = tcb.init({
const auth = app.auth();
async function login() {
await auth.signInAnonymously();
<<<<<<< HEAD
const loginState = await auth.getLoginState()
=======
// await auth.signInAnonymously();
// const loginState = await auth.getLoginState();
>>>>>>> 47e31499e13fa4a29b3e69e6551268f3badb67b2
}
login();
@ -19,11 +15,7 @@ login();
const db = app.database();
const _ = db.command
<<<<<<< HEAD
export function increaseDownloadData(value, date) {
=======
export function increaseDownloadData(value) {
>>>>>>> 47e31499e13fa4a29b3e69e6551268f3badb67b2
db.collection('QRCounter').where({
value: _.eq(value)
}).get().then(res => {
@ -32,11 +24,7 @@ export function increaseDownloadData(value) {
value: _.eq(value)
}).update({
count: _.inc(1),
<<<<<<< HEAD
date: date
=======
date: new Date().toString()
>>>>>>> 47e31499e13fa4a29b3e69e6551268f3badb67b2
}).then(res => {
})
}
@ -44,11 +32,7 @@ export function increaseDownloadData(value) {
db.collection('QRCounter').add({
value: value,
count: 1,
<<<<<<< HEAD
date: date
=======
date: new Date().toString()
>>>>>>> 47e31499e13fa4a29b3e69e6551268f3badb67b2
}).then(res => {
})
}

61
src/components/param/ParamColor.js
View File

@ -1,16 +1,57 @@
import React from 'react';
import React, {useState} from 'react';
import reactCSS from 'reactcss';
import PropTypes from 'prop-types';
import {SliderPicker} from 'react-color';
import {TwitterPicker} from 'react-color';
import '../Qrcode.css';
const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => (
<SliderPicker
key={"input_" + rendererIndex + "_" + paramIndex}
className="Qr-color-picker"
color={value}
onChangeComplete={onChange}
/>
)
const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
const [displayColorPicker, setDisplay] = useState(false);
const styles = reactCSS({
'default': {
swatch: {
padding: '5px',
background: '#fff',
borderRadius: '1px',
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
display: 'inline-block',
cursor: 'pointer',
},
popover: {
position: 'absolute',
zIndex: '2',
},
cover: {
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
},
},
});
return (
<div>
<button className="dl-btn" onClick={ () => setDisplay(!displayColorPicker) }>
点击选择颜色
</button>
{
displayColorPicker ?
<div style={styles.popover}>
<div style={styles.cover} onClick={() => setDisplay(false)} />
<TwitterPicker
key={"input_" + rendererIndex + "_" + paramIndex}
triangle="hide"
color={value}
onChangeComplete={onChange}
/>
</div>
:
null
}
</div>
);
}
ParamColor.propTypes = {
rendererIndex: PropTypes.number.isRequired,

28
src/components/param/ParamCorrectLevel.js
View File

@ -2,21 +2,21 @@ import React from 'react';
import PropTypes from 'prop-types'
import '../Qrcode.css';
const ParamCorrectLevel = ({ value, onChange }) => (
const ParamCorrectLevel = ({value, onChange}) => (
<tr>
<td>容错率</td>
<td>
<select
className="Qr-select"
value={value}
onChange={onChange}>
<option value={1}>7%</option>
<option value={0}>15%</option>
<option value={3}>25%</option>
<option value={2}>30%</option>
</select>
</td>
</tr>
<td>容错率</td>
<td>
<select
className="Qr-select"
value={value}
onChange={onChange}>
<option value={1}>7%</option>
<option value={0}>15%</option>
<option value={3}>25%</option>
<option value={2}>30%</option>
</select>
</td>
</tr>
)
ParamCorrectLevel.propTypes = {

51
src/components/param/ParamList.js
View File

@ -4,41 +4,28 @@ import PropTypes from "prop-types"
import ParamTextViewer from "../../containers/param/ParamTextViewer";
import ParamSelectViewer from "../../containers/param/ParamSelectViewer";
import ParamColorViewer from "../../containers/param/ParamColorViewer";
import ParamUploadViewer from "../../containers/param/ParamUploadViewer";
const mapTypeToComponent = ({
[ParamTypes.TEXT_EDITOR]: ParamTextViewer,
[ParamTypes.SELECTOR]: ParamSelectViewer,
[ParamTypes.COLOR_EDITOR]: ParamColorViewer,
[ParamTypes.UPLOAD_BUTTON]: ParamUploadViewer,
})
const ParamList = ({ rendererIndex, paramInfo }) => (
paramInfo.map((item, paramIndex) => {
switch (item.type) {
case ParamTypes.TEXT_EDITOR: {
return (
<tr key={"tr_" + rendererIndex + "_" + paramIndex}>
<td>{item.key}</td>
<td>
<ParamTextViewer rendererIndex={rendererIndex} paramIndex={paramIndex}/>
</td>
</tr>
)
}
case ParamTypes.SELECTOR: {
return (
<tr key={"tr_" + rendererIndex + "_" + paramIndex}>
<td>{item.key}</td>
<td>
<ParamSelectViewer rendererIndex={rendererIndex} paramIndex={paramIndex}/>
</td>
</tr>
)
}
case ParamTypes.COLOR_EDITOR: {
return (
<tr key={"tr_" + rendererIndex + "_" + paramIndex}>
<td>{item.key}</td>
<td>
<ParamColorViewer rendererIndex={rendererIndex} paramIndex={paramIndex}/>
</td>
</tr>
)
}
}
return (
<tr key={"tr_" + rendererIndex + "_" + paramIndex}>
<td>{item.key}</td>
<td>
{React.createElement(mapTypeToComponent[item.type], {
rendererIndex: rendererIndex,
paramIndex: paramIndex
})}
</td>
</tr>
);
})
)

32
src/components/param/ParamUpload.js Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../Qrcode.css';
const ParamUpload = ({ rendererIndex, paramIndex, onChange }) => (
<React.Fragment>
<label
htmlFor="image_upload"
key={"label_" + rendererIndex + "_" + paramIndex}
className="dl-btn"
style={{textAlign: "center"}}
>
上传图片
</label>
<input
type="file"
key={"input_" + rendererIndex + "_" + paramIndex}
id="image_upload"
hidden={true}
accept=".jpg, .jpeg, .png"
onChange={onChange}
/>
</React.Fragment>
)
ParamUpload.propTypes = {
rendererIndex: PropTypes.number.isRequired,
paramIndex: PropTypes.number.isRequired,
onChange: PropTypes.func.isRequired
}
export default ParamUpload;

8
src/components/renderer/RendererImage.js
View File

File diff suppressed because one or more lines are too long

5
src/constant/ParamTypes.js
View File

@ -1,6 +1,7 @@
export const ParamTypes = {
export const ParamTypes = ({
TEXT_EDITOR: 1,
SELECTOR: 2,
COLOR_EDITOR: 3,
MULTI_CHECK: 4,
}
UPLOAD_BUTTON: 5
});

36
src/containers/param/ParamUploadViewer.js Normal file
View File

@ -0,0 +1,36 @@
import { connect } from 'react-redux';
import {changeParam} from "../../actions";
import ParamUpload from "../../components/param/ParamUpload";
import {toBase64} from "../../utils/util";
const fileTypes =[
'image/jpeg',
'image/pjpeg',
'image/png'
]
function validFileType(file) {
return fileTypes.includes(file.type);
}
const mapStateToProps = (state, ownProps) => ({
rendererIndex: ownProps.rendererIndex,
paramIndex: ownProps.paramIndex,
value: state.paramValue[ownProps.rendererIndex][ownProps.paramIndex],
info: state.paramInfo[ownProps.rendererIndex][ownProps.paramIndex],
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onChange: (e) => {
if (e.target.files.length > 0) {
const file = e.target.files[0];
if (validFileType(file)) {
toBase64(file, 500, 500).then(res => {
dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, res))
})
}
}
}
})
export default connect(mapStateToProps, mapDispatchToProps)(ParamUpload);

20
src/utils/util.js
View File

@ -41,3 +41,23 @@ export function getParamDetailedValue(item, paramValue) {
if (item.type == ParamTypes.SELECTOR) return item.choices[paramValue];
return paramValue;
}
export async function toBase64(file, width, height) {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let img = document.createElement('img');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
img.setAttribute('src', URL.createObjectURL(file));
return new Promise(resolve => {
img.onload = () => {
ctx.fillStyle = 'white'
ctx.fillRect(0, 0, width, height)
ctx.drawImage(img, 0, 0, width, height);
resolve(canvas.toDataURL(file.type, 0.8));
};
})
}