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 = (
-