Palette

src/App.js

@@ -163,23 +163,22 @@ function App() {
 
   function addCard(cardData = {}) {
     setCards(
-      cardsArr.concat([new Card({ id: ++cardCount, name: cardData.name, completed: cardData.sel, text: cardData.text })])
+      cardsArr.concat([new Card({ id: ++cardCount, name: cardData.name, color: cardData.color, text: cardData.text })])
     )
   }
 
-  function changeCardState(index) {
-    cardsArr[index].completed = !cardsArr[index].completed
+  function changeCardColor(index, color) {
+    cardsArr[index].color = color
     setCards([...cardsArr])
   }
 
   function editCardContent(index, name, text) {
-
     if (cardsArr[index]) {
       let card
       card = new Card(cardsArr[index])
       card.name = name
       card.text = text
-      cardsArr[index]=card
+      cardsArr[index] = card
     }
     setCards([...cardsArr])
   }
@@ -198,7 +197,7 @@ function App() {
   ///////////
 
   return (
-    <Context.Provider value={{ removeCard, changeCardState, setEditCard, unsetEditCard, editCardContent, editCardId }}>
+    <Context.Provider value={{ removeCard, changeCardColor, setEditCard, unsetEditCard, editCardContent, editCardId }}>
       <div className="App pb-3 mb-3">
         <header className="p-1">
           <nav className="d-flex container px-0 flex-wrap-reverse justify-content-around">

src/Cards/AddCard.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import TextareaAutosize from 'react-textarea-autosize'
+import Palette, { colors } from './palette/palette'
 
 function useInputValue(defaultValue) {
   const [value, setValue] = useState(defaultValue)
@@ -16,20 +17,36 @@ function useInputValue(defaultValue) {
 
 function AddCard({ onCreate, onDeleteAll }) {
   const input = useInputValue('')
-  const select = useInputValue(0)
+
+  const defColor = colors[0]
+  const [color, setColor] = React.useState(defColor)
+  const blackOnHover = () => {
+    switch (color) {
+      case colors[0]:
+      case colors[2]:
+      case colors[3]:
+      case colors[4]:
+      case colors[6]:
+      case colors[8]:
+        return true
+      default:
+        return false
+    }
+  }
 
   function submitHandler() {
-    if (String(input.value()).trim() && String(select.value()).trim()) {
-      onCreate({ name: String(input.value()).trim(), text: "", sel: Boolean(Number(select.value())) })
+    if (String(input.value()).trim() && String(color).trim()) {
+      onCreate({ name: String(input.value()).trim(), text: "", color: String(color) })
       input.clear()
+      setColor(defColor)
     }
   }
 
   return (
     <div className="container">
       <div className="row my-2 text-center">
 
-        <div className="col-lg-12 col-md-12 p-1">
+        <div className="col-lg-9 col-md-10 col-12 p-1">
           <TextareaAutosize type="text" className="form-control" placeholder="Card name" id="Text"
             {...input.bind}
             style={{ resize: "none" }}
@@ -39,19 +56,15 @@ function AddCard({ onCreate, onDeleteAll }) {
           />
         </div>
 
-        <div className="col-lg-8 col-md-6 col-sm-4 p-1">
-          <select className="custom-select" id="Status" {...select.bind}>
-            <option value="1">Done</option>
-            <option value="0">Not done</option>
-          </select>
-        </div>
-
-        <div className="col-lg-2 col-md-3 col-sm-4 col-6 p-1">
-          <button disabled={!input.value().trim()} className="btn btn-success btn-block" onClick={submitHandler}><i className="bi bi-clipboard-plus"></i> Add card</button>
+        <div className="col-lg-1 col-md-1 col-sm-3 col-4 p-1">
+          <Palette setColor={setColor} className={`btn btn-outline-secondary palitra-btn ${blackOnHover() ? "palitra-blackOnHover" : "palitra-lightOnHover"}`} style={{ width: "100%", background: color }}></Palette>
         </div>
 
-        <div className="col-lg-2 col-md-3 col-sm-4 col-6 p-1">
-          <button className="btn btn-danger btn-block" onClick={onDeleteAll}><i className="bi bi-x-square"></i> Delete All</button>
+        <div className="col-lg-2 col-md-1 col p-1">
+          <button disabled={!input.value().trim()} className="btn btn-success btn-block" onClick={submitHandler}>
+            <i className="bi bi-clipboard-plus"></i>
+            <span className='d-lg-inline d-none'> Add card</span>
+          </button>
         </div>
 
       </div>

src/Cards/CardItem.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import Context from '../context'
 import Card from '../Shared/Card'
+//import Palette from './palette'
 
 function createHTML(text) {
     let el = document.createElement("p")
@@ -10,15 +11,18 @@ function createHTML(text) {
 }
 
 function CardItem(props) {
-    const { removeCard, changeCardState, setEditCard } = useContext(Context)
+    const { removeCard, /*changeCardColor,*/ setEditCard } = useContext(Context)
     const { card, index } = props
     const cardItem = card && new Card(card)
     const lineClip = 12
-    const [color, btcolor] = cardItem && cardItem.completed ? ["green", "success"] : ["red", "danger"]
+    const bgColor = cardItem.color
+    /*function tryChangeColor(color) {
+        changeCardColor(index, color)
+    }*/
     return (
 
         <div className="p-1" >
-            <div className="card" style={{ color: "white", backgroundColor: color }} >
+            <div className="card" style={{ backgroundColor: bgColor }} >
 
                 <div className="card-body" onClick={() => setEditCard(index)} >
                     <h5 className="card-title">{cardItem.name}</h5>
@@ -31,19 +35,17 @@ function CardItem(props) {
 
                 <div className="card-body pt-0">
                     <button
-                        className={`btn btn-${btcolor} p-0`}
+                        className={`btn btn-light p-0`}
                         style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
                         onClick={() => removeCard(index)}
                     >
                         &#10007;
                     </button>
-                    <button
-                        className={`btn btn-${btcolor} p-0 mx-2`}
+                    {/*<Palette
+                        className={`btn btn-light p-0 mx-2`}
                         style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
-                        onClick={() => changeCardState(index)}
-                    >
-                        &#10003;
-                    </button>
+                        setColor={tryChangeColor}
+                    ></Palette>*/}
                 </div>
 
             </div>

src/Cards/ModalCardEdit.js

@@ -5,6 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize'
 import Modal, { ModalProps } from "../Shared/Modal/Modal"
 import debounce from '../Shared/debounce'
 import Card from '../Shared/Card'
+import Palette from './palette/palette'
 
 function calcMaxRows() {
     const small = 576
@@ -20,7 +21,7 @@ function calcMaxRows() {
 }
 
 function ModalCardEdit(props) {
-    const { removeCard, changeCardState, unsetEditCard, editCardContent } = React.useContext(Context)
+    const { removeCard, changeCardColor, unsetEditCard, editCardContent } = React.useContext(Context)
     const { card, index } = props
     React.useEffect(() => { if (card !== null) open() }, [card])
 
@@ -57,8 +58,8 @@ function ModalCardEdit(props) {
         save(name, text)
     }
 
-    function tryStateChange() {
-        changeCardState(index)
+    function tryChangeColor(color) {
+        changeCardColor(index, color)
     }
     function tryRemove() {
         unsetEditCard();
@@ -70,9 +71,6 @@ function ModalCardEdit(props) {
         close()
     }
 
-    // eslint-disable-next-line no-unused-vars
-    const [color, btcolor] = cardEdit && cardEdit.completed ? ["green", "success"] : ["red", "danger"]
-
     return (
         <Modal {...modalProps.bind()}>
             <div className="container p-2">
@@ -91,9 +89,9 @@ function ModalCardEdit(props) {
                             />
 
                             <p style={{ fontWeight: "500" }} className="mb-2 text-dark">
-                                Completed:
-                                <span className={`m-1 d-inline-block text-center badge badge-${btcolor}`} style={{ width: "3em" }}>
-                                    {String(cardEdit.completed)}
+                                Color:
+                                <span className={`m-1 d-inline-block text-center badge border border-secondary`} style={{ width: "3em", backgroundColor: cardEdit.color }}>
+                                    &nbsp;
                                 </span>
                             </p>
 
@@ -114,11 +112,11 @@ function ModalCardEdit(props) {
 
                 <div style={{ display: "flex", justifyContent: "space-around", alignItems: "center", flexWrap: "wrap" }}>
                     <div>
-                        <button
+                        <Palette
                             className="btn btn-light mx-1"
                             disabled={!cardEdit}
-                            onClick={tryStateChange}
-                        >&#10003;</button>
+                            setColor={tryChangeColor}
+                        ></Palette>
                         <button
                             className="btn btn-light"
                             disabled={!cardEdit}

src/Cards/palette/palette.css

@@ -0,0 +1,20 @@
+.palitra-blackOnHover:hover {
+  color: black !important;
+}
+
+.palitra-blackOnHover {
+  border-color: lightgray !important;
+}
+
+.palitra-lightOnHover {
+  border-color: #868e96 !important;
+  color: #495057 !important;
+}
+
+.palitra-lightOnHover:hover {
+  color: white !important;
+}
+
+.palitra-btn:focus {
+  box-shadow: 0 0 0 0.2rem rgb(216 217 219 / 50%) !important;
+}

src/Cards/palette/palette.js

@@ -0,0 +1,74 @@
+import React from "react";
+import PropTypes from 'prop-types'
+import "./palette.css"
+
+export const colors = [
+  "#f8f9fa",
+  "#F38181",
+  "#FCE38A",
+  "#EAFFD0",
+  "#F9FFEA",
+  "#8785A2",
+  "#DBE2EF",
+  "#D4A5A5",
+  "#6EF3D6"
+];
+
+
+function Palette({ setColor, style, className, disabled }) {
+  return (
+    <span className="dropdown">
+
+      <button
+        disabled={disabled}
+        className={`btn ${className}`}
+        style={style}
+        type="button"
+        id="dropdownMenuButton"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+      >
+        <i className="bi bi-palette" ></i>
+      </button>
+
+      <div className="dropdown-menu tab-content mt-1" aria-labelledby="dropdownMenuButton">
+        <form>
+          <div className="d-flex flex-row flex-wrap justify-content-center">
+            {colors.map((color, key) => (
+              <button
+                style={{
+                  borderRadius: "100%",
+                  width: "32px", //поменять на rem
+                  height: "32px",
+                  backgroundColor: color,
+                }}
+                type="button"
+                key={key}
+                className={`m-1 btn`}
+                onClick={() => setColor(color)}
+              >
+                {` `}
+              </button>
+            ))}
+          </div>
+        </form>
+      </div>
+
+    </span>
+  );
+}
+
+Palette.propTypes = {
+  setColor: PropTypes.func,
+  style: PropTypes.object,
+  className: PropTypes.string,
+}
+
+export default Palette;
+
+
+
+
+
+

src/Services/DataService.js

@@ -65,18 +65,11 @@ export default function DataService() {
     ////////////////////////////////////////////////////////////
     function tryParce(str) {
         try {
-            return JSON.parse(str, reviver);
+            return JSON.parse(str);
         } catch (e) {
             return str;
         }
     }
-    function reviver(key, value) {
-        if (typeof value == 'string' && (Boolean(value) !== undefined)) {
-            if (value === "false") return false;
-            if (value === "true") return true;
-        }
-        return value;
-    }
 
     function checkData(data) {
         //console.log('start check data')

src/Shared/Card.js

@@ -14,17 +14,17 @@ const checkCard = (card) => {
     return (
         (typeof card.id === "number" || typeof card.id === "string") && !isNaN(card.id) &&
         typeof card.name === "string" &&
-        typeof card.completed === "boolean" &&
+        typeof card.color === "string" &&
         typeof card.text === "string" &&
         card instanceof Card
     )
 }
 
 export class Card {
-    constructor({ id, name, completed, text }) {
+    constructor({ id, name, color, text }) {
         this.id = Number(id)
         this.name = String(name)
-        this.completed = Boolean(completed)
+        this.color = String(color)
         this.text = String(text)
     }
 }

src/index.js

@@ -7,6 +7,7 @@ import reportWebVitals from './reportWebVitals';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap-icons/font/bootstrap-icons.css';
+import "bootstrap/dist/js/bootstrap.bundle.min";
 
 ReactDOM.render(
   <React.StrictMode>