Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove unused number input component

Browse Source
This commit is contained in:
Mitchell McCaffrey
2021-05-06 15:08:12 +10:00
parent 8aa3bda90d
commit e1f5cb3014
1 changed files with 0 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/NumberInput.js
View File

@@ -1,59 +0,0 @@
import React from "react";
import { Box, Flex, IconButton, Text } from "theme-ui";
function NumberInput({ value, onChange, title, min, max }) {
return (
<Box>
<Text sx={{ textAlign: "center" }} variant="heading" as="h1">
{title}
</Text>
<Flex sx={{ alignItems: "center", justifyContent: "center" }}>
<IconButton
aria-label={`Decrease ${title}`}
title={`Decrease ${title}`}
onClick={() => value > min && onChange(value - 1)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z" />
</svg>
</IconButton>
<Text as="p" aria-label={`Current ${title}`}>
{value}
</Text>
<IconButton
aria-label={`Increase ${title}`}
title={`Increase ${title}`}
onClick={() => value < max && onChange(value + 1)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z" />
</svg>
</IconButton>
</Flex>
</Box>
);
}
NumberInput.defaultProps = {
value: 1,
onChange: () => {},
title: "Number",
min: 0,
max: 10,
};
export default NumberInput;