123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- import React, { memo, useEffect } from "react";
- import styled, { css } from "styled-components";
- const NotePane = styled.div`
- ${({ color, fontSize, textColor, width, height }) => css`
- background-color: ${color};
- width: ${width}px;
- padding: 0.5em;
- text-align: center;
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
- color: ${textColor};
- .item-library__component & {
- background-color: #ccc;
- }
- & .note__title {
- font-weight: bold;
- padding: 0.2em 0;
- margin: 0;
- }
- & .note__textarea {
- height: ${height}px;
- font-family: "Satisfy", cursive;
- width: 100%;
- padding: 0.2em 0;
- background-color: transparent;
- resize: none;
- border: 1px solid #00000011;
- font-size: ${fontSize}px;
- .item-library__component & {
- height: 35px;
- }
- }
- `}
- `;
- const Note = ({
- value = "",
- color = "#ffc",
- label = "",
- textColor = "#000",
- fontSize = "20",
- width = 300,
- height = 200,
- setState,
- }) => {
- // To avoid this behaviour https://github.com/facebook/react/issues/955
- // We have a local state and a use effect when incoming update occurs
- const [currentValue, setCurrentValue] = React.useState(value);
- const setValue = (e) => {
- const value = e.target.value;
- setCurrentValue(value);
- setState((prevState) => ({
- ...prevState,
- value,
- }));
- };
- useEffect(() => {
- setCurrentValue(value);
- }, [value]);
- return (
- <NotePane
- color={color}
- fontSize={fontSize}
- textColor={textColor}
- width={width}
- height={height}
- onKeyDown={(e) =>
- e.target === document.activeElement && e.stopPropagation()
- }
- onKeyUp={(e) =>
- e.target === document.activeElement && e.stopPropagation()
- }
- onWheel={(e) =>
- e.target === document.activeElement && e.stopPropagation()
- }
- onPointerMove={(e) =>
- e.target === document.activeElement && e.stopPropagation()
- }
- >
- <label style={{ userSelect: "none" }}>
- <h3 className="note__title">{label}</h3>
- <textarea
- className="note__textarea"
- value={currentValue}
- onChange={setValue}
- />
- </label>
- </NotePane>
- );
- };
- export default memo(Note);
|