123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- import React, { memo } from "react";
- import styled, { css } from "styled-components";
- const CounterPane = styled.div`
- ${({ color }) => css`
- background-color: ${color};
- padding: 0.2em;
- text-align: center;
- border-radius: 3px;
- box-shadow: 4px 4px 5px 0px rgb(0, 0, 0, 0.3);
- .item-library__component & {
- transform: scale(0.7);
- }
- button {
- padding: 1rem;
- }
- input {
- width: 2em;
- }
- h3 {
- user-select: none;
- padding: 0;
- margin: 0;
- }
- div {
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- align-items: center;
- }
- `}
- `;
- const Counter = ({
- value = 0,
- color = "#CCC",
- label = "",
- textColor = "#000",
- fontSize = "22",
- setState,
- }) => {
- const setValue = (e) => {
- let value = parseInt(e.target.value, 10);
- if (isNaN(value)) {
- value = 0;
- }
- setState((prevState) => ({
- ...prevState,
- value: value,
- }));
- };
- const increment = () => {
- setState((prevState) => ({
- ...prevState,
- value: (prevState.value || 0) + 1,
- }));
- };
- const decrement = () => {
- setState((prevState) => ({
- ...prevState,
- value: (prevState.value || 0) - 1,
- }));
- };
- return (
- <CounterPane color={color}>
- <h3>{label}</h3>
- <div>
- <button onClick={decrement} style={{ margin: "2px" }}>
- -
- </button>
- <label style={{ userSelect: "none" }}>
- <input
- style={{
- textColor,
- width: "2.5em",
- display: "block",
- textAlign: "center",
- border: "none",
- margin: "0.2em 0",
- padding: "0.2em 0",
- fontSize: fontSize + "px",
- userSelect: "none",
- }}
- onKeyUp={(e) => e.stopPropagation()}
- onKeyDown={(e) => e.stopPropagation()}
- value={value}
- onChange={setValue}
- />
- </label>
- <button onClick={increment} style={{ margin: "2px" }}>
- +
- </button>
- </div>
- </CounterPane>
- );
- };
- export default memo(Counter);
|