From 22916404a88ca4b13c624b9d9113555919c2107c Mon Sep 17 00:00:00 2001 From: B Pawan Kalyan Date: Mon, 16 Dec 2024 12:30:32 +0530 Subject: [PATCH 1/2] bugfix-colorpicker --- package.json | 1 + .../Board/TileEditor/TileEditor.component.js | 33 ++++++++++++++- yarn.lock | 41 +++++++++++++++++-- 3 files changed, 71 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 530dc0b75..a85491428 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "ramda": "^0.29.1", "react": "^17.0.2", "react-autosuggest": "^10.1.0", + "react-color": "^2.19.3", "react-cropper": "^2.3.3", "react-dnd": "^11.1.3", "react-dnd-touch-backend": "^11.1.3", diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 7d8bce603..70b7dcb41 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, useState } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; import shortid from 'shortid'; @@ -18,6 +18,9 @@ import Select from '@material-ui/core/Select'; import MenuItem from '@material-ui/core/MenuItem'; import InputLabel from '@material-ui/core/InputLabel'; import CircularProgress from '@material-ui/core/CircularProgress'; +import SketchPicker from 'react-color'; +import BlockPicker from 'react-color'; +import ColorizeIcon from '@material-ui/icons/Colorize'; import messages from './TileEditor.messages'; import SymbolSearch from '../SymbolSearch'; @@ -120,6 +123,12 @@ export class TileEditor extends Component { }; } + handleTogglePicker = () => { + this.setState(prevState => ({ + enablePicker: !prevState.enablePicker + })); + }; + UNSAFE_componentWillReceiveProps(props) { this.updateTileProperty('id', shortid.generate()); // todo not here this.setState({ editingTiles: props.editingTiles }); @@ -400,6 +409,16 @@ export class TileEditor extends Component { } }; + handleChangeComplete = color => { + const colorhex = color.hex ? color.hex : ''; + this.setState({ selectedBackgroundColor: colorhex }); + if (color) { + this.updateTileProperty('backgroundColor', colorhex); + } else { + this.updateTileProperty('backgroundColor', this.getDefaultColor()); + } + }; + getDefaultColor = () => { if (this.currentTileProp('type') === 'folder') { return this.defaultTileColors.folder; @@ -451,6 +470,8 @@ export class TileEditor extends Component { }; render() { + const { enablePicker, selectedBackgroundColor } = this.state; + const { open, intl, boards } = this.props; const currentLabel = this.currentTileProp('labelKey') ? intl.formatMessage({ id: this.currentTileProp('labelKey') }) @@ -647,6 +668,16 @@ export class TileEditor extends Component { selectedColor={this.state.selectedBackgroundColor} onChange={this.handleColorChange} /> + + {enablePicker && ( + + )} {this.currentTileProp('type') !== 'board' && (
diff --git a/yarn.lock b/yarn.lock index 978816775..47ea8331f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1427,6 +1427,11 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3" integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA== +"@icons/material@^0.2.4": + version "0.2.4" + resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8" + integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw== + "@isaacs/cliui@^8.0.2": version "8.0.2" resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550" @@ -8439,7 +8444,7 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" -lodash-es@^4.17.14, lodash-es@^4.17.21: +lodash-es@^4.17.14, lodash-es@^4.17.15, lodash-es@^4.17.21: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== @@ -8519,7 +8524,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ== -lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0: +lodash@^4.0.1, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -8634,6 +8639,11 @@ map-obj@^1.0.0, map-obj@^1.0.1: resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" integrity sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg== +material-colors@^1.2.1: + version "1.2.6" + resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46" + integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg== + mathjs@7.6.0: version "7.6.0" resolved "https://registry.yarnpkg.com/mathjs/-/mathjs-7.6.0.tgz#f0b7579e0756b13422995d0c4f29bd17d65d4dcc" @@ -10341,7 +10351,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@15.x, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -10540,6 +10550,19 @@ react-autosuggest@^10.1.0: section-iterator "^2.0.0" shallow-equal "^1.2.1" +react-color@^2.19.3: + version "2.19.3" + resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d" + integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA== + dependencies: + "@icons/material" "^0.2.4" + lodash "^4.17.15" + lodash-es "^4.17.15" + material-colors "^1.2.1" + prop-types "^15.5.10" + reactcss "^1.2.0" + tinycolor2 "^1.4.1" + react-cropper@^2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/react-cropper/-/react-cropper-2.3.3.tgz#aced0d045d9fd56168ba4d17287a40c287754dee" @@ -10935,6 +10958,13 @@ react@^17.0.2: loose-envify "^1.1.0" object-assign "^4.1.1" +reactcss@^1.2.0: + version "1.2.3" + resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd" + integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A== + dependencies: + lodash "^4.0.1" + read-cache@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" @@ -12519,6 +12549,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2: resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== +tinycolor2@^1.4.1: + version "1.6.0" + resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e" + integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw== + tmpl@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" From 4c88d0e0317ef21f48ff5d4a4b4b4dba3f70fea5 Mon Sep 17 00:00:00 2001 From: B Pawan Kalyan <115493304+Pawankalyan2023@users.noreply.github.com> Date: Sun, 22 Dec 2024 22:28:01 +0530 Subject: [PATCH 2/2] Update TileEditor.component.js --- .../Board/TileEditor/TileEditor.component.js | 1389 ++++++++--------- 1 file changed, 694 insertions(+), 695 deletions(-) diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 70b7dcb41..d93fb2635 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -1,742 +1,741 @@ -import React, { Component, useState } from 'react'; -import PropTypes from 'prop-types'; -import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; -import shortid from 'shortid'; -import FormControl from '@material-ui/core/FormControl'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormLabel from '@material-ui/core/FormLabel'; -import Radio from '@material-ui/core/Radio'; -import RadioGroup from '@material-ui/core/RadioGroup'; -import Paper from '@material-ui/core/Paper'; -import TextField from '@material-ui/core/TextField'; -import MobileStepper from '@material-ui/core/MobileStepper'; -import Button from '@material-ui/core/Button'; -import SearchIcon from '@material-ui/icons/Search'; -import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; -import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import InputLabel from '@material-ui/core/InputLabel'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import SketchPicker from 'react-color'; -import BlockPicker from 'react-color'; -import ColorizeIcon from '@material-ui/icons/Colorize'; - -import messages from './TileEditor.messages'; -import SymbolSearch from '../SymbolSearch'; -import Symbol from '../Symbol'; -import Tile from '../Tile'; -import FullScreenDialog, { - FullScreenDialogContent -} from '../../UI/FullScreenDialog'; -import InputImage from '../../UI/InputImage'; -import IconButton from '../../UI/IconButton'; -import ColorSelect from '../../UI/ColorSelect'; -import VoiceRecorder from '../../VoiceRecorder'; -import './TileEditor.css'; -import EditIcon from '@material-ui/icons/Edit'; -import ImageEditor from '../ImageEditor'; - -import API from '../../../api'; -import { - isAndroid, - requestCvaPermissions, - writeCvaFile -} from '../../../cordova-util'; -import { convertImageUrlToCatchable } from '../../../helpers'; -import PremiumFeature from '../../PremiumFeature'; - -export class TileEditor extends Component { - static propTypes = { - /** - * @ignore - */ - intl: intlShape.isRequired, - /** - * If true, TileEditor will be visibile - */ - open: PropTypes.bool, - /** - * Callback fired on TileEditor request to be hidden - */ - onClose: PropTypes.func.isRequired, - /** - * Tiles array to work on - */ - editingTiles: PropTypes.array, - /** - * Callback fired when submitting edited board tiles - */ - onEditSubmit: PropTypes.func.isRequired, - /** - * Callback fired when submitting a new board tile - */ - onAddSubmit: PropTypes.func.isRequired, - boards: PropTypes.array, - userData: PropTypes.object - }; - - static defaultProps = { - editingTiles: [], - openImageEditor: false - }; - - constructor(props) { - super(props); - - this.defaultTileColors = { - folder: '#bbdefb', - button: '#fff176', - board: '#999999' + import React, { Component } from 'react'; + import PropTypes from 'prop-types'; + import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; + import shortid from 'shortid'; + import FormControl from '@material-ui/core/FormControl'; + import FormControlLabel from '@material-ui/core/FormControlLabel'; + import FormLabel from '@material-ui/core/FormLabel'; + import Radio from '@material-ui/core/Radio'; + import RadioGroup from '@material-ui/core/RadioGroup'; + import Paper from '@material-ui/core/Paper'; + import TextField from '@material-ui/core/TextField'; + import MobileStepper from '@material-ui/core/MobileStepper'; + import Button from '@material-ui/core/Button'; + import SearchIcon from '@material-ui/icons/Search'; + import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; + import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft'; + import Select from '@material-ui/core/Select'; + import MenuItem from '@material-ui/core/MenuItem'; + import InputLabel from '@material-ui/core/InputLabel'; + import CircularProgress from '@material-ui/core/CircularProgress'; + import BlockPicker from 'react-color'; + import ColorizeIcon from '@material-ui/icons/Colorize'; + + import messages from './TileEditor.messages'; + import SymbolSearch from '../SymbolSearch'; + import Symbol from '../Symbol'; + import Tile from '../Tile'; + import FullScreenDialog, { + FullScreenDialogContent + } from '../../UI/FullScreenDialog'; + import InputImage from '../../UI/InputImage'; + import IconButton from '../../UI/IconButton'; + import ColorSelect from '../../UI/ColorSelect'; + import VoiceRecorder from '../../VoiceRecorder'; + import './TileEditor.css'; + import EditIcon from '@material-ui/icons/Edit'; + import ImageEditor from '../ImageEditor'; + + import API from '../../../api'; + import { + isAndroid, + requestCvaPermissions, + writeCvaFile + } from '../../../cordova-util'; + import { convertImageUrlToCatchable } from '../../../helpers'; + import PremiumFeature from '../../PremiumFeature'; + + export class TileEditor extends Component { + static propTypes = { + /** + * @ignore + */ + intl: intlShape.isRequired, + /** + * If true, TileEditor will be visibile + */ + open: PropTypes.bool, + /** + * Callback fired on TileEditor request to be hidden + */ + onClose: PropTypes.func.isRequired, + /** + * Tiles array to work on + */ + editingTiles: PropTypes.array, + /** + * Callback fired when submitting edited board tiles + */ + onEditSubmit: PropTypes.func.isRequired, + /** + * Callback fired when submitting a new board tile + */ + onAddSubmit: PropTypes.func.isRequired, + boards: PropTypes.array, + userData: PropTypes.object }; - this.defaultTile = { - label: '', - labelKey: '', - vocalization: '', - image: '', - loadBoard: '', - sound: '', - type: 'button', - backgroundColor: this.defaultTileColors.button, - linkedBoard: false + static defaultProps = { + editingTiles: [], + openImageEditor: false }; - this.state = { - activeStep: 0, - editingTiles: props.editingTiles, - isSymbolSearchOpen: false, - autoFill: '', - selectedBackgroundColor: '', - tile: this.defaultTile, - linkedBoard: '', - imageUploadedData: [], - isEditImageBtnActive: false, - isLoading: false - }; + constructor(props) { + super(props); - this.defaultimageUploadedData = { - isUploaded: false, - fileName: '', - blobHQ: null, - blob: null - }; - } + this.defaultTileColors = { + folder: '#bbdefb', + button: '#fff176', + board: '#999999' + }; - handleTogglePicker = () => { - this.setState(prevState => ({ - enablePicker: !prevState.enablePicker - })); - }; + this.defaultTile = { + label: '', + labelKey: '', + vocalization: '', + image: '', + loadBoard: '', + sound: '', + type: 'button', + backgroundColor: this.defaultTileColors.button, + linkedBoard: false + }; - UNSAFE_componentWillReceiveProps(props) { - this.updateTileProperty('id', shortid.generate()); // todo not here - this.setState({ editingTiles: props.editingTiles }); - } - componentDidUpdate(prevProps) { - if (this.props.open !== prevProps.open && this.props.open) { - if (this.editingTile()) this.setLinkedBoard(); - if (isAndroid()) requestCvaPermissions(); + this.state = { + activeStep: 0, + editingTiles: props.editingTiles, + isSymbolSearchOpen: false, + autoFill: '', + selectedBackgroundColor: '', + tile: this.defaultTile, + linkedBoard: '', + imageUploadedData: [], + isEditImageBtnActive: false, + isLoading: false + }; + + this.defaultimageUploadedData = { + isUploaded: false, + fileName: '', + blobHQ: null, + blob: null + }; } - } - editingTile() { - return this.state.editingTiles[this.state.activeStep]; - } + handleTogglePicker = () => { + this.setState(prevState => ({ + enablePicker: !prevState.enablePicker + })); + }; - currentTileProp(prop) { - const currentTile = this.editingTile(); - return currentTile ? currentTile[prop] : this.state.tile[prop]; - } + UNSAFE_componentWillReceiveProps(props) { + this.updateTileProperty('id', shortid.generate()); // todo not here + this.setState({ editingTiles: props.editingTiles }); + } + componentDidUpdate(prevProps) { + if (this.props.open !== prevProps.open && this.props.open) { + if (this.editingTile()) this.setLinkedBoard(); + if (isAndroid()) requestCvaPermissions(); + } + } - updateEditingTile(id, property, value) { - return state => { - const editingTiles = state.editingTiles.map(b => - b.id === id ? { ...b, ...{ [property]: value } } : b - ); - return { ...state, editingTiles }; - }; - } + editingTile() { + return this.state.editingTiles[this.state.activeStep]; + } - updateNewTile(property, value) { - return state => { - const tile = { ...state.tile, [property]: value }; - return { ...state, tile }; - }; - } + currentTileProp(prop) { + const currentTile = this.editingTile(); + return currentTile ? currentTile[prop] : this.state.tile[prop]; + } - updateTileProperty(property, value) { - if (this.editingTile()) { - this.setState( - this.updateEditingTile(this.editingTile().id, property, value) - ); - } else { - this.setState(this.updateNewTile(property, value)); + updateEditingTile(id, property, value) { + return state => { + const editingTiles = state.editingTiles.map(b => + b.id === id ? { ...b, ...{ [property]: value } } : b + ); + return { ...state, editingTiles }; + }; } - } - handleSubmit = async () => { - const { onEditSubmit, onAddSubmit } = this.props; - if (this.editingTile()) { - const { imageUploadedData } = this.state; - if (imageUploadedData.length) { - let tilesToAdd = JSON.parse(JSON.stringify(this.state.editingTiles)); - await Promise.all( - imageUploadedData.map(async (obj, index) => { - if (obj.isUploaded) { - tilesToAdd[index].image = await this.updateTileImgURL( - obj.blob, - obj.fileName - ); - } - }) + updateNewTile(property, value) { + return state => { + const tile = { ...state.tile, [property]: value }; + return { ...state, tile }; + }; + } + + updateTileProperty(property, value) { + if (this.editingTile()) { + this.setState( + this.updateEditingTile(this.editingTile().id, property, value) ); - onEditSubmit(tilesToAdd); } else { - onEditSubmit(this.state.editingTiles); - } - } else { - const tileToAdd = this.state.tile; - const imageUploadedData = this.state.imageUploadedData[ - this.state.activeStep - ]; - if (imageUploadedData && imageUploadedData.isUploaded) { - tileToAdd.image = await this.updateTileImgURL( - imageUploadedData.blob, - imageUploadedData.fileName - ); + this.setState(this.updateNewTile(property, value)); } + } - const selectedBackgroundColor = this.state.selectedBackgroundColor; - if (selectedBackgroundColor) { - tileToAdd.backgroundColor = selectedBackgroundColor; + handleSubmit = async () => { + const { onEditSubmit, onAddSubmit } = this.props; + if (this.editingTile()) { + const { imageUploadedData } = this.state; + if (imageUploadedData.length) { + let tilesToAdd = JSON.parse(JSON.stringify(this.state.editingTiles)); + await Promise.all( + imageUploadedData.map(async (obj, index) => { + if (obj.isUploaded) { + tilesToAdd[index].image = await this.updateTileImgURL( + obj.blob, + obj.fileName + ); + } + }) + ); + onEditSubmit(tilesToAdd); + } else { + onEditSubmit(this.state.editingTiles); + } + } else { + const tileToAdd = this.state.tile; + const imageUploadedData = this.state.imageUploadedData[ + this.state.activeStep + ]; + if (imageUploadedData && imageUploadedData.isUploaded) { + tileToAdd.image = await this.updateTileImgURL( + imageUploadedData.blob, + imageUploadedData.fileName + ); + } + + const selectedBackgroundColor = this.state.selectedBackgroundColor; + if (selectedBackgroundColor) { + tileToAdd.backgroundColor = selectedBackgroundColor; + } + onAddSubmit(tileToAdd); } - onAddSubmit(tileToAdd); - } - this.setState({ - activeStep: 0, - selectedBackgroundColor: '', - tile: this.defaultTile, - imageUploadedData: [], - isEditImageBtnActive: false, - linkedBoard: '' - }); - }; - - updateTileImgURL = async (blob, fileName) => { - const { userData } = this.props; - const user = userData.email ? userData : null; - if (user) { - // this.setState({ - // loading: true - // }); - try { - const imageUrl = await API.uploadFile(blob, fileName); - // console.log('imagen guardada en servidor', imageUrl); - return convertImageUrlToCatchable(imageUrl) || imageUrl; - } catch (error) { - //console.log('imagen no guardad en servidor'); - return await this.blobToBase64(blob); + this.setState({ + activeStep: 0, + selectedBackgroundColor: '', + tile: this.defaultTile, + imageUploadedData: [], + isEditImageBtnActive: false, + linkedBoard: '' + }); + }; + + updateTileImgURL = async (blob, fileName) => { + const { userData } = this.props; + const user = userData.email ? userData : null; + if (user) { + // this.setState({ + // loading: true + // }); + try { + const imageUrl = await API.uploadFile(blob, fileName); + // console.log('imagen guardada en servidor', imageUrl); + return convertImageUrlToCatchable(imageUrl) || imageUrl; + } catch (error) { + //console.log('imagen no guardad en servidor'); + return await this.blobToBase64(blob); + } + // } finally { + // this.setState({ + // loading: false + // }); + } else { + if (isAndroid()) { + const filePath = '/Android/data/com.unicef.cboard/files/' + fileName; + const fEntry = await writeCvaFile(filePath, blob); + return fEntry.nativeURL; + } else { + return await this.blobToBase64(blob); + } } - // } finally { - // this.setState({ - // loading: false - // }); - } else { - if (isAndroid()) { - const filePath = '/Android/data/com.unicef.cboard/files/' + fileName; - const fEntry = await writeCvaFile(filePath, blob); - return fEntry.nativeURL; + }; + + blobToBase64 = async blob => { + return new Promise(resolve => { + const reader = new FileReader(); + reader.onload = () => { + resolve(reader.result); + }; + reader.readAsDataURL(blob); + }); + }; + + handleCancel = () => { + const { onClose } = this.props; + this.setState({ + activeStep: 0, + selectedBackgroundColor: '', + tile: this.defaultTile, + imageUploadedData: [], + isEditImageBtnActive: false, + linkedBoard: '' + }); + onClose(); + }; + + createimageUploadedDataArray() { + if (this.editingTile()) { + let imageUploadedDataArray = new Array(this.state.editingTiles.length); + imageUploadedDataArray.fill(this.defaultimageUploadedData); + this.setState({ imageUploadedData: imageUploadedDataArray }); } else { - return await this.blobToBase64(blob); + this.setState({ + imageUploadedData: new Array(this.defaultimageUploadedData) + }); } } - }; - blobToBase64 = async blob => { - return new Promise(resolve => { - const reader = new FileReader(); - reader.onload = () => { - resolve(reader.result); + handleInputImageChange = (blob, fileName, blobHQ) => { + if (!this.state.imageUploadedData.length) { + this.createimageUploadedDataArray(); + } + this.setimageUploadedData(true, fileName, blobHQ, blob); + this.setState({ isEditImageBtnActive: true }); + const image = URL.createObjectURL(blob); + this.updateTileProperty('image', image); + }; + + handleLoadingStateChange = isLoading => { + this.setState({ isLoading: isLoading }); + }; + + setimageUploadedData = (isUploaded, fileName, blobHQ = null, blob = null) => { + const { activeStep } = this.state; + let imageUploadedData = this.state.imageUploadedData.map((item, indx) => { + if (indx === activeStep) { + return { + ...item, + isUploaded: isUploaded, + fileName: fileName, + blobHQ: blobHQ, + blob: blob + }; + } else { + return item; + } + }); + this.setState({ imageUploadedData: imageUploadedData }); + }; + + handleSymbolSearchChange = ({ image, labelKey, label, keyPath }) => { + return new Promise(resolve => { + this.updateTileProperty('labelKey', labelKey); + this.updateTileProperty('label', label); + this.updateTileProperty('image', image); + if (keyPath) this.updateTileProperty('keyPath', keyPath); + if (this.state.imageUploadedData.length) { + this.setimageUploadedData(false, ''); + } + resolve(); + }); + }; + + handleSymbolSearchClose = event => { + const { imageUploadedData } = this.state; + this.setState({ isSymbolSearchOpen: false }); + if ( + imageUploadedData.length && + imageUploadedData[this.state.activeStep].isUploaded + ) { + this.setState({ isEditImageBtnActive: true }); + } + }; + + handleLabelChange = event => { + this.updateTileProperty('label', event.target.value); + this.updateTileProperty('labelKey', ''); + }; + + handleVocalizationChange = event => { + this.updateTileProperty('vocalization', event.target.value); + }; + handleSoundChange = sound => { + this.updateTileProperty('sound', sound); + }; + handleTypeChange = (event, type) => { + let loadBoard = ''; + if (type === 'folder' || type === 'board') { + loadBoard = shortid.generate(); + } + let backgroundColor = this.defaultTileColors.button; + if (type === 'board') { + backgroundColor = this.defaultTileColors.board; + } + if (type === 'folder') { + backgroundColor = this.defaultTileColors.folder; + } + const tile = { + ...this.state.tile, + linkedBoard: false, + backgroundColor, + loadBoard, + type }; - reader.readAsDataURL(blob); - }); - }; - - handleCancel = () => { - const { onClose } = this.props; - this.setState({ - activeStep: 0, - selectedBackgroundColor: '', - tile: this.defaultTile, - imageUploadedData: [], - isEditImageBtnActive: false, - linkedBoard: '' - }); - onClose(); - }; - - createimageUploadedDataArray() { - if (this.editingTile()) { - let imageUploadedDataArray = new Array(this.state.editingTiles.length); - imageUploadedDataArray.fill(this.defaultimageUploadedData); - this.setState({ imageUploadedData: imageUploadedDataArray }); - } else { - this.setState({ - imageUploadedData: new Array(this.defaultimageUploadedData) + this.setState({ tile, linkedBoard: '' }); + }; + + handleBack = event => { + this.setState({ activeStep: this.state.activeStep - 1 }, () => { + this.setLinkedBoard(); }); - } - } + this.setState({ selectedBackgroundColor: '' }); + this.setState({ isEditImageBtnActive: false }); + }; - handleInputImageChange = (blob, fileName, blobHQ) => { - if (!this.state.imageUploadedData.length) { - this.createimageUploadedDataArray(); - } - this.setimageUploadedData(true, fileName, blobHQ, blob); - this.setState({ isEditImageBtnActive: true }); - const image = URL.createObjectURL(blob); - this.updateTileProperty('image', image); - }; - - handleLoadingStateChange = isLoading => { - this.setState({ isLoading: isLoading }); - }; - - setimageUploadedData = (isUploaded, fileName, blobHQ = null, blob = null) => { - const { activeStep } = this.state; - let imageUploadedData = this.state.imageUploadedData.map((item, indx) => { - if (indx === activeStep) { - return { - ...item, - isUploaded: isUploaded, - fileName: fileName, - blobHQ: blobHQ, - blob: blob - }; + handleNext = async event => { + this.setState({ activeStep: this.state.activeStep + 1 }, () => { + this.setLinkedBoard(); + }); + this.setState({ selectedBackgroundColor: '' }); + this.setState({ isEditImageBtnActive: false }); + }; + + handleSearchClick = (event, currentLabel) => { + this.setState({ isSymbolSearchOpen: true, autoFill: currentLabel || '' }); + this.setState({ isEditImageBtnActive: false }); + }; + + handleColorChange = event => { + const color = event ? event.target.value : ''; + this.setState({ selectedBackgroundColor: color }); + if (event) { + this.updateTileProperty('backgroundColor', event.target.value); } else { - return item; + this.updateTileProperty('backgroundColor', this.getDefaultColor()); } - }); - this.setState({ imageUploadedData: imageUploadedData }); - }; - - handleSymbolSearchChange = ({ image, labelKey, label, keyPath }) => { - return new Promise(resolve => { - this.updateTileProperty('labelKey', labelKey); - this.updateTileProperty('label', label); - this.updateTileProperty('image', image); - if (keyPath) this.updateTileProperty('keyPath', keyPath); - if (this.state.imageUploadedData.length) { - this.setimageUploadedData(false, ''); + }; + + handleChangeComplete = color => { + const colorhex = color.hex ? color.hex : ''; + this.setState({ selectedBackgroundColor: colorhex }); + if (color) { + this.updateTileProperty('backgroundColor', colorhex); + } else { + this.updateTileProperty('backgroundColor', this.getDefaultColor()); } - resolve(); - }); - }; - - handleSymbolSearchClose = event => { - const { imageUploadedData } = this.state; - this.setState({ isSymbolSearchOpen: false }); - if ( - imageUploadedData.length && - imageUploadedData[this.state.activeStep].isUploaded - ) { - this.setState({ isEditImageBtnActive: true }); - } - }; - - handleLabelChange = event => { - this.updateTileProperty('label', event.target.value); - this.updateTileProperty('labelKey', ''); - }; - - handleVocalizationChange = event => { - this.updateTileProperty('vocalization', event.target.value); - }; - handleSoundChange = sound => { - this.updateTileProperty('sound', sound); - }; - handleTypeChange = (event, type) => { - let loadBoard = ''; - if (type === 'folder' || type === 'board') { - loadBoard = shortid.generate(); - } - let backgroundColor = this.defaultTileColors.button; - if (type === 'board') { - backgroundColor = this.defaultTileColors.board; - } - if (type === 'folder') { - backgroundColor = this.defaultTileColors.folder; - } - const tile = { - ...this.state.tile, - linkedBoard: false, - backgroundColor, - loadBoard, - type }; - this.setState({ tile, linkedBoard: '' }); - }; - - handleBack = event => { - this.setState({ activeStep: this.state.activeStep - 1 }, () => { - this.setLinkedBoard(); - }); - this.setState({ selectedBackgroundColor: '' }); - this.setState({ isEditImageBtnActive: false }); - }; - - handleNext = async event => { - this.setState({ activeStep: this.state.activeStep + 1 }, () => { - this.setLinkedBoard(); - }); - this.setState({ selectedBackgroundColor: '' }); - this.setState({ isEditImageBtnActive: false }); - }; - - handleSearchClick = (event, currentLabel) => { - this.setState({ isSymbolSearchOpen: true, autoFill: currentLabel || '' }); - this.setState({ isEditImageBtnActive: false }); - }; - - handleColorChange = event => { - const color = event ? event.target.value : ''; - this.setState({ selectedBackgroundColor: color }); - if (event) { - this.updateTileProperty('backgroundColor', event.target.value); - } else { - this.updateTileProperty('backgroundColor', this.getDefaultColor()); - } - }; - - handleChangeComplete = color => { - const colorhex = color.hex ? color.hex : ''; - this.setState({ selectedBackgroundColor: colorhex }); - if (color) { - this.updateTileProperty('backgroundColor', colorhex); - } else { - this.updateTileProperty('backgroundColor', this.getDefaultColor()); - } - }; - getDefaultColor = () => { - if (this.currentTileProp('type') === 'folder') { - return this.defaultTileColors.folder; - } - if (this.currentTileProp('type') === 'button') { - return this.defaultTileColors.button; - } - if (this.currentTileProp('type') === 'board') { - return this.defaultTileColors.board; - } - }; - - handleBoardsChange = event => { - const board = event ? event.target.value : ''; - this.setState({ linkedBoard: board }); - if (board && board !== 'none') { - this.updateTileProperty('linkedBoard', true); - this.updateTileProperty('loadBoard', board.id); - } else { - this.updateTileProperty('linkedBoard', false); - this.updateTileProperty('loadBoard', shortid.generate()); - } - }; - - handleOnClickImageEditor = () => { - this.setState({ openImageEditor: true }); - }; - onImageEditorClose = () => { - this.setState({ openImageEditor: false }); - }; - onImageEditorDone = blob => { - this.setState(prevState => { - const newArray = [...prevState.imageUploadedData]; - newArray[this.state.activeStep].blob = blob; - return { imageUploadedData: newArray }; - }); - const image = URL.createObjectURL(blob); - this.updateTileProperty('image', image); - }; - - setLinkedBoard = () => { - const loadBoard = - this.currentTileProp('linkedBoard') || this.editingTile() - ? this.currentTileProp('loadBoard') - : null; - const linkedBoard = - this.props.boards.find(board => board.id === loadBoard) || 'none'; - this.setState({ linkedBoard: linkedBoard }); - }; - - render() { - const { enablePicker, selectedBackgroundColor } = this.state; - - const { open, intl, boards } = this.props; - const currentLabel = this.currentTileProp('labelKey') - ? intl.formatMessage({ id: this.currentTileProp('labelKey') }) - : this.currentTileProp('label'); - const buttons = ( - this.handleSearchClick(e, currentLabel)} - > - - - ); - - const selectBoardElement = ( -
- - - {intl.formatMessage(messages.existingBoards)} - - - -
- ); - const tileInView = this.editingTile() - ? this.editingTile() - : this.state.tile; - - return ( -
- - } - onClose={this.handleCancel} - onSubmit={this.handleSubmit} + getDefaultColor = () => { + if (this.currentTileProp('type') === 'folder') { + return this.defaultTileColors.folder; + } + if (this.currentTileProp('type') === 'button') { + return this.defaultTileColors.button; + } + if (this.currentTileProp('type') === 'board') { + return this.defaultTileColors.board; + } + }; + + handleBoardsChange = event => { + const board = event ? event.target.value : ''; + this.setState({ linkedBoard: board }); + if (board && board !== 'none') { + this.updateTileProperty('linkedBoard', true); + this.updateTileProperty('loadBoard', board.id); + } else { + this.updateTileProperty('linkedBoard', false); + this.updateTileProperty('loadBoard', shortid.generate()); + } + }; + + handleOnClickImageEditor = () => { + this.setState({ openImageEditor: true }); + }; + onImageEditorClose = () => { + this.setState({ openImageEditor: false }); + }; + onImageEditorDone = blob => { + this.setState(prevState => { + const newArray = [...prevState.imageUploadedData]; + newArray[this.state.activeStep].blob = blob; + return { imageUploadedData: newArray }; + }); + const image = URL.createObjectURL(blob); + this.updateTileProperty('image', image); + }; + + setLinkedBoard = () => { + const loadBoard = + this.currentTileProp('linkedBoard') || this.editingTile() + ? this.currentTileProp('loadBoard') + : null; + const linkedBoard = + this.props.boards.find(board => board.id === loadBoard) || 'none'; + this.setState({ linkedBoard: linkedBoard }); + }; + + render() { + const { enablePicker } = this.state; + + const { open, intl, boards } = this.props; + const currentLabel = this.currentTileProp('labelKey') + ? intl.formatMessage({ id: this.currentTileProp('labelKey') }) + : this.currentTileProp('label'); + const buttons = ( + this.handleSearchClick(e, currentLabel)} > - - -
-
-
-
- - {this.state.isLoading ? ( - - ) : ( - - )} - -
- {this.state.isEditImageBtnActive && ( - - + + ); + + const selectBoardElement = ( +
+ + + {intl.formatMessage(messages.existingBoards)} + + + +
+ ); + const tileInView = this.editingTile() + ? this.editingTile() + : this.state.tile; + + return ( +
+ + } + onClose={this.handleCancel} + onSubmit={this.handleSubmit} + > + + +
+
+
+
+ + {this.state.isLoading ? ( + + ) : ( + )} + +
+ {this.state.isEditImageBtnActive && ( + + + + + )} + +
+ - - - )} - -
- +
+
+ + + + {!this.editingTile() && ( +
+ + + {intl.formatMessage(messages.type)} + + + } + label={intl.formatMessage(messages.button)} + /> + } + label={intl.formatMessage(messages.folder)} + /> + } + label={intl.formatMessage(messages.board)} + /> + + +
+ )} + {this.currentTileProp('type') === 'folder' && + selectBoardElement}
-
- - - - {!this.editingTile() && ( -
- - - {intl.formatMessage(messages.type)} - - - } - label={intl.formatMessage(messages.button)} - /> - } - label={intl.formatMessage(messages.folder)} - /> - } - label={intl.formatMessage(messages.board)} - /> - - -
- )} - {this.currentTileProp('type') === 'folder' && - selectBoardElement} -
-
-
-
-
- - - {enablePicker && ( - +
+
+ - )} -
- {this.currentTileProp('type') !== 'board' && ( -
- - {intl.formatMessage(messages.voiceRecorder)} - - - + {enablePicker && ( + - + )}
- )} + {this.currentTileProp('type') !== 'board' && ( +
+ + {intl.formatMessage(messages.voiceRecorder)} + + + + +
+ )} +
-
- - - {this.state.editingTiles.length > 1 && ( - - {intl.formatMessage(messages.next)}{' '} - - - } - backButton={ - - } - /> - )} - - - - -
- ); + + + {this.state.editingTiles.length > 1 && ( + + {intl.formatMessage(messages.next)}{' '} + + + } + backButton={ + + } + /> + )} + + + + +
+ ); + } } -} -export default injectIntl(TileEditor); + export default injectIntl(TileEditor);