feat: feature/mvp-sprint-1 Added editable number using chakra number input field

Browse Source
This commit is contained in:
Nikolaj Frey 2023-07-22 00:32:08 +10:00
parent d16b022807
commit 39a0973b7c
3 changed files with 99 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
remix/app/Providers/Chakra/theme.tsx
View File

@ -1,4 +1,13 @@
import { extendTheme, Select, Switch } from "@chakra-ui/react"
import {
extendTheme,
NumberDecrementStepper,
NumberIncrementStepper,
NumberInput,
NumberInputField,
NumberInputStepper,
Select,
Switch,
} from "@chakra-ui/react"
import { colors } from "./colors"
@ -83,6 +92,14 @@ export const theme = extendTheme({
},
},
},
NumberInput: {
baseStyle: {
field: {
width: "auto",
// border: "none",
},
},
},
},
})
@ -105,3 +122,31 @@ Select.defaultProps = {
paddingInlineEnd: "24px",
},
}
NumberInput.defaultProps = {
...NumberInput.defaultProps,
variant: "unstyled",
}
NumberInputField.defaultProps = {
...NumberInputField.defaultProps,
height: "100%",
pr: 3,
fontSize: "inherit",
// variant: "unstyled",
}
NumberInputStepper.defaultProps = {
...NumberInputStepper.defaultProps,
border: "none",
color: "grays.medium",
}
NumberIncrementStepper.defaultProps = {
...NumberIncrementStepper.defaultProps,
border: "none",
}
NumberDecrementStepper.defaultProps = {
...NumberDecrementStepper.defaultProps,
border: "none",
}

3
remix/app/components/Commander/Commander.tsx
View File

@ -220,6 +220,7 @@ export const Commander = (props) => {
const allCommanderKeyListener = React.useCallback(
(e: any) => {
console.log("commander key listener e?.code", e?.code)
thingtimeRef.current = thingtime
if (e?.metaKey && e?.code === "KeyP") {
e.preventDefault()
e.stopPropagation()
@ -331,6 +332,8 @@ export const Commander = (props) => {
hoveredSuggestion,
selectSuggestion,
suggestions,
thingtime,
thingtimeRef,
commanderActive,
commandIsAction,
commandContainsPath,

62
remix/app/components/Thingtime/Thingtime.tsx
View File

@ -1,5 +1,16 @@
import React from "react"
import { Box, Flex, Select, Switch } from "@chakra-ui/react"
import {
Box,
Flex,
Input,
NumberDecrementStepper,
NumberIncrementStepper,
NumberInput,
NumberInputField,
NumberInputStepper,
Select,
Switch,
} from "@chakra-ui/react"
import { Icon } from "../Icon/Icon"
import { Safe } from "../Safety/Safe"
@ -214,6 +225,7 @@ export const Thingtime = (props) => {
return (
<Flex
flexDirection="row"
flexShrink={1}
paddingLeft={pl}
fontSize="20px"
border="none"
@ -261,16 +273,41 @@ export const Thingtime = (props) => {
>
<Switch colorScheme="red" isChecked={thing}></Switch>
</Box>
{/* <Select
width="auto"
marginRight="auto"
paddingStart={0}
paddingX={0}
>
{renderableValue}
<option value="true">true</option>
<option value="false">false</option>
</Select> */}
</AtomicWrapper>
)
}
if (type === "number") {
const numberPxLength = thing?.toString()?.length * 13 + 30
return (
<AtomicWrapper>
<Flex>
<NumberInput
alignItems="center"
justifyContent="center"
onChange={(value) => {
setTimeout(() => {
try {
const number = Number(value)
console.log("typeof number", typeof number)
updateValue({ value: number })
} catch {
// something went wrong casting to number
}
}, 1)
}}
value={thing}
>
<NumberInputField width={numberPxLength + "px"} />
<NumberInputStepper transform="scale(0.9)">
<NumberIncrementStepper
// transform="scale(0.7)"
/>
<NumberDecrementStepper
// transform="scale(0.7)"
/>
</NumberInputStepper>
</NumberInput>
</Flex>
</AtomicWrapper>
)
}
@ -372,7 +409,8 @@ export const Thingtime = (props) => {
<Flex>{pathDom}</Flex>
{props?.edit && (
<Box
marginTop={-3}
// marginTop={-3}
marginTop={-1}
paddingLeft={1}
opacity={0.5}
cursor="pointer"