From 1d86d0f1008f1cab037b4170254b246f24d62ec9 Mon Sep 17 00:00:00 2001 From: "MSI\\derek" Date: Fri, 24 May 2024 17:33:55 +0800 Subject: [PATCH] update --- .../CostAndExpenseReport.tsx | 1 - src/components/utils/numberInput.tsx | 148 ++++++++++-------- 2 files changed, 84 insertions(+), 65 deletions(-) diff --git a/src/components/CostAndExpenseReport/CostAndExpenseReport.tsx b/src/components/CostAndExpenseReport/CostAndExpenseReport.tsx index 766ab0e..5957f94 100644 --- a/src/components/CostAndExpenseReport/CostAndExpenseReport.tsx +++ b/src/components/CostAndExpenseReport/CostAndExpenseReport.tsx @@ -20,7 +20,6 @@ const CostAndExpenseReport: React.FC = ({ team, customer }) => { const { t } = useTranslation("report"); const teamCombo = team.map((t) => `${t.name} - ${t.code}`); const custCombo = customer.map(c => `${c.name} - ${c.code}`) - const percentList = [">50%", ">90%"] const searchCriteria: Criterion[] = useMemo( () => [ diff --git a/src/components/utils/numberInput.tsx b/src/components/utils/numberInput.tsx index 2ccaa6b..4b14cfe 100644 --- a/src/components/utils/numberInput.tsx +++ b/src/components/utils/numberInput.tsx @@ -42,18 +42,31 @@ export const InputAdornment = styled('div')( `, ); -export default function NumberInputBasic() { +export default function NumberInputBasic(testing: any, props: NumberInputProps) { const [value, setValue] = React.useState(null); return ( setValue(val)} + {...props} + onChange={testing} /> ); } +// export default function NumberInputBasic() { +// const [value, setValue] = React.useState(null); +// return ( +// setValue(val)} +// /> +// ); +// } + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -113,7 +126,7 @@ const StyledInputElement = styled('input')( font-family: inherit; font-weight: 400; line-height: 1.5; - grid-column: 1/2; + grid-column: 1/3; grid-row: 1/3; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; background: inherit; @@ -125,68 +138,75 @@ const StyledInputElement = styled('input')( ); const StyledButton = styled('button')( - ({ theme }) => ` - display: flex; - flex-flow: row nowrap; - justify-content: center; - align-items: center; - appearance: none; - padding: 0; - width: 19px; - height: 19px; - font-family: system-ui, sans-serif; - font-size: 0.875rem; - line-height: 1; - box-sizing: border-box; - background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; - border: 0; - color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 120ms; - - &:hover { - background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]}; - border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]}; - cursor: pointer; - } - - &.${numberInputClasses.incrementButton} { - grid-column: 2/3; - grid-row: 1/2; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - border: 1px solid; - border-bottom: 0; + ({ theme }) => ` + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + appearance: none; + padding: 0; + width: 19px; + height: 20px; + font-family: system-ui, sans-serif; + font-size: 0.875rem; + line-height: 1; + box-sizing: border-box; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 0; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 120ms; + &:hover { + background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]}; + border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]}; cursor: pointer; - background: ${blue[400]}; - color: ${grey[50]}; } - - border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]}; - background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]}; - } - - &.${numberInputClasses.decrementButton} { - grid-column: 2/3; - grid-row: 2/3; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - border: 1px solid; - &:hover { - cursor: pointer; - background: ${blue[400]}; - color: ${grey[50]}; + + &.${numberInputClasses.incrementButton} { + grid-column: 4/5; + grid-row: 1/2; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border: 1px solid; + border-bottom: 0; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; + color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]}; + + &:hover { + cursor: pointer; + color: #FFF; + background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]}; + border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]}; + } } - - border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]}; - background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]}; - } - & .arrow { - transform: translateY(-1px); - } -`, -); \ No newline at end of file + + &.${numberInputClasses.decrementButton} { + grid-column: 4/5; + grid-row: 2/3; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: 1px solid; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; + color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]}; + + &:hover { + cursor: pointer; + color: #FFF; + background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]}; + border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]}; + } + } + + & .arrow { + transform: translateY(-1px); + } + + & .arrow { + transform: translateY(-1px); + } + `, + ); \ No newline at end of file