From 22916404a88ca4b13c624b9d9113555919c2107c Mon Sep 17 00:00:00 2001 From: B Pawan Kalyan Date: Mon, 16 Dec 2024 12:30:32 +0530 Subject: [PATCH] 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"