1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- 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};
- & h3 {
- font-weight: bold;
- padding: 0.2em 0;
- margin: 0;
- }
- & 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;
- }
- `}
- `;
- 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()
- }
- >
- <label style={{ userSelect: "none" }}>
- <h3>{label}</h3>
- <textarea value={currentValue} onChange={setValue} />
- </label>
- </NotePane>
- );
- };
- export default memo(Note);
|