mirror of
https://github.com/omnivore-app/omnivore.git
synced 2026-03-11 08:54:26 +00:00
Deleting testing file for table and cleaning up commented code
This commit is contained in:
Rupin Khandelwal
parent
5b6b9afd47
commit
ba945b36a4
2 changed files with 7 additions and 285 deletions
|
|
@ -1,115 +0,0 @@
|
|||
// import React from 'react'
|
||||
// import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
|
||||
// import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
|
||||
// import { IconButton } from './Button'
|
||||
// import { PencilSimple, Trash } from 'phosphor-react'
|
||||
// import { isDarkTheme } from '../../lib/themeUpdater'
|
||||
// import { Box, SpanBox } from './LayoutPrimitives'
|
||||
// import { StyledText } from './StyledText'
|
||||
|
||||
// interface TableProps {
|
||||
// heading: string
|
||||
// infoLink?: string
|
||||
// onAdd?: () => void
|
||||
// headers: string[]
|
||||
// rows: Map<string, Record<string, any>>
|
||||
// onDelete?: (id: string) => void
|
||||
// onEdit?: (obj: any) => void
|
||||
// }
|
||||
|
||||
// export default function TableR(props: TableProps): JSX.Element {
|
||||
// const { headers } = props
|
||||
// const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
|
||||
// return (
|
||||
// <>
|
||||
// <Box css={{ml:'25px'}}>
|
||||
// <StyledText style="fixedHeadline">{props.heading}</StyledText>
|
||||
// </Box>
|
||||
// <Box
|
||||
// css={{
|
||||
// backgroundColor: '$grayBg',
|
||||
// margin: ' 0 auto',
|
||||
// border: '0.5px solid $grayBgActive',
|
||||
// width: '95%',
|
||||
// mt: '$3',
|
||||
// '&:hover': {
|
||||
// border: '0.5px solid #FFD234',
|
||||
// },
|
||||
// }}
|
||||
// >
|
||||
// <Table>
|
||||
// <Thead>
|
||||
// <Tr>
|
||||
// {headers.map((header: string, index: number) => (
|
||||
// <Th key={index}>
|
||||
// <SpanBox
|
||||
// css={{
|
||||
// textTransform: 'uppercase',
|
||||
// display: 'flex',
|
||||
// fontWeight: 600,
|
||||
// padding: '20px 10px',
|
||||
// color: '$grayTextContrast',
|
||||
// fontSize: '$2',
|
||||
// }}
|
||||
// >
|
||||
// {header}
|
||||
// </SpanBox>
|
||||
// </Th>
|
||||
// ))}
|
||||
// </Tr>
|
||||
// </Thead>
|
||||
// <Tbody>
|
||||
// {Array.from(props.rows.keys()).map((key, index) => (
|
||||
// <Tr key={index}>
|
||||
// {Object.values(props.rows.get(key) || {}).map((cell, index) => (
|
||||
// <Td key={index}>
|
||||
// <SpanBox
|
||||
// key={index}
|
||||
// css={{
|
||||
// display: 'flex',
|
||||
// justifyContent: 'left',
|
||||
// padding: '15px 10px',
|
||||
// color: '$grayTextContrast',
|
||||
// fontSize: '$1',
|
||||
// }}
|
||||
// >
|
||||
// {cell}
|
||||
// </SpanBox>
|
||||
// </Td>
|
||||
// ))}
|
||||
|
||||
// {props.onDelete && (
|
||||
// <Td>
|
||||
// <IconButton
|
||||
// style="ctaWhite"
|
||||
// css={{ mr: '$1', background: '$labelButtonsBg' }}
|
||||
// onClick={() => {
|
||||
// props.onDelete && props.onDelete(key)
|
||||
// }}
|
||||
// >
|
||||
// <Trash size={16} color={iconColor} />
|
||||
// </IconButton>
|
||||
// </Td>
|
||||
// )}
|
||||
// {props.onEdit && (
|
||||
// <Td>
|
||||
// <IconButton
|
||||
// style="ctaWhite"
|
||||
// css={{ mr: '$1', background: '$labelButtonsBg' }}
|
||||
// onClick={() => {
|
||||
// props.onEdit &&
|
||||
// props.onEdit({ ...props.rows.get(key), id: key })
|
||||
// }}
|
||||
// >
|
||||
// <PencilSimple size={24} color={iconColor} />
|
||||
// </IconButton>
|
||||
// </Td>
|
||||
// )}
|
||||
// </Tr>
|
||||
// ))}
|
||||
// </Tbody>
|
||||
// </Table>
|
||||
// </Box>
|
||||
// </>
|
||||
// )
|
||||
// }
|
||||
|
|
@ -1,14 +1,13 @@
|
|||
import { isDarkTheme } from '../../lib/themeUpdater'
|
||||
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
|
||||
import { PencilSimple, Plus, Trash } from 'phosphor-react'
|
||||
import { Box, SpanBox, VStack } from './LayoutPrimitives'
|
||||
import { styled } from '../tokens/stitches.config'
|
||||
import { StyledText } from './StyledText'
|
||||
import { InfoLink } from './InfoLink'
|
||||
import { Button } from './Button'
|
||||
import { PencilSimple, Plus, Trash } from 'phosphor-react'
|
||||
import { isDarkTheme } from '../../lib/themeUpdater'
|
||||
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
|
||||
import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
|
||||
import { IconButton } from './Button'
|
||||
|
||||
interface TableProps {
|
||||
heading: string
|
||||
infoLink?: string
|
||||
|
|
@ -26,63 +25,6 @@ const HeaderWrapper = styled(Box, {
|
|||
},
|
||||
})
|
||||
|
||||
// const TableCard = styled(Box, {
|
||||
// backgroundColor: '$grayBg',
|
||||
// display: 'flex',
|
||||
// alignItems: 'center',
|
||||
// padding: '10px 12px',
|
||||
// border: '0.5px solid $grayBgActive',
|
||||
// width: '100%',
|
||||
|
||||
// '&:hover': {
|
||||
// border: '0.5px solid #FFD234',
|
||||
// },
|
||||
// '@md': {
|
||||
// paddingLeft: '0',
|
||||
// },
|
||||
// })
|
||||
|
||||
// const TableHeading = styled(Box, {
|
||||
// backgroundColor: '$grayBgActive',
|
||||
// border: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
// display: 'none',
|
||||
// alignItems: 'center',
|
||||
// padding: '14px 0 14px 40px',
|
||||
// borderRadius: '5px 5px 0px 0px',
|
||||
// width: '100%',
|
||||
// '@md': {
|
||||
// display: 'flex',
|
||||
// },
|
||||
// })
|
||||
|
||||
// const Input = styled('input', {
|
||||
// backgroundColor: 'transparent',
|
||||
// color: '$grayTextContrast',
|
||||
// marginTop: '5px',
|
||||
// '&[disabled]': {
|
||||
// border: 'none',
|
||||
// },
|
||||
// })
|
||||
|
||||
// const IconButton = styled(Button, {
|
||||
// variants: {
|
||||
// style: {
|
||||
// ctaWhite: {
|
||||
// color: 'red',
|
||||
// padding: '10px',
|
||||
// display: 'flex',
|
||||
// justifyContent: 'center',
|
||||
// alignItems: 'center',
|
||||
// border: '1px solid $grayBorder',
|
||||
// boxSizing: 'border-box',
|
||||
// borderRadius: 6,
|
||||
// width: 40,
|
||||
// height: 40,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
|
||||
export function TableR(props: TableProps): JSX.Element {
|
||||
const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
|
||||
|
||||
|
|
@ -143,111 +85,6 @@ export function TableR(props: TableProps): JSX.Element {
|
|||
)}
|
||||
</Box>
|
||||
</HeaderWrapper>
|
||||
{/* <TableHeading>
|
||||
{props.headers.map((header, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
css={{
|
||||
flex: 'auto',
|
||||
}}
|
||||
>
|
||||
<StyledText
|
||||
key={index}
|
||||
style="menuTitle"
|
||||
css={{
|
||||
color: '$grayTextContrast',
|
||||
'@md': {
|
||||
fontWeight: '600',
|
||||
color: '$grayTextContrast',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
width: '240px',
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
</StyledText>
|
||||
</Box>
|
||||
))}
|
||||
<Box
|
||||
css={{
|
||||
width: '120px',
|
||||
}}
|
||||
></Box>
|
||||
</TableHeading> */}
|
||||
{/* {Array.from(props.rows.keys()).map((key, index) => (
|
||||
<TableCard
|
||||
key={index}
|
||||
css={{
|
||||
'&:hover': {
|
||||
background: 'rgba(255, 234, 159, 0.12)',
|
||||
},
|
||||
'@mdDown': {
|
||||
borderTopLeftRadius: index === 0 ? '5px' : '',
|
||||
borderTopRightRadius: index === 0 ? '5px' : '',
|
||||
},
|
||||
borderBottomLeftRadius: index == props.rows.size - 1 ? '5px' : '',
|
||||
borderBottomRightRadius: index == props.rows.size - 1 ? '5px' : '',
|
||||
padding: '10px 20px 10px 40px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
css={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
'@md': {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{Object.values(props.rows.get(key) || {}).map((cell, index) => (
|
||||
<HStack
|
||||
key={index}
|
||||
css={{
|
||||
flex: 'auto',
|
||||
display: 'flex',
|
||||
padding: '4px 4px 4px 0px',
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
value={cell}
|
||||
disabled
|
||||
css={{
|
||||
width: '100%',
|
||||
}}
|
||||
></Input>
|
||||
</HStack>
|
||||
))}
|
||||
{props.onEdit && (
|
||||
<IconButton
|
||||
style="ctaWhite"
|
||||
css={{ mr: '$1', background: '$labelButtonsBg' }}
|
||||
onClick={() => {
|
||||
props.onEdit &&
|
||||
props.onEdit({ ...props.rows.get(key), id: key })
|
||||
}}
|
||||
>
|
||||
<PencilSimple size={24} color={iconColor} />
|
||||
</IconButton>
|
||||
)}
|
||||
{props.onDelete && (
|
||||
<IconButton
|
||||
style="ctaWhite"
|
||||
css={{ mr: '$1', background: '$labelButtonsBg' }}
|
||||
onClick={() => {
|
||||
props.onDelete && props.onDelete(key)
|
||||
}}
|
||||
>
|
||||
<Trash size={16} color={iconColor} />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
</TableCard>
|
||||
))} */}
|
||||
{/* <Box css={{ ml: '25px' }}>
|
||||
<StyledText style="fixedHeadline">{props.heading}</StyledText>
|
||||
</Box> */}
|
||||
<Box
|
||||
css={{
|
||||
backgroundColor: '$grayBg',
|
||||
|
|
@ -270,7 +107,7 @@ export function TableR(props: TableProps): JSX.Element {
|
|||
textTransform: 'uppercase',
|
||||
display: 'flex',
|
||||
fontWeight: 600,
|
||||
padding: '20px 10px',
|
||||
padding: '20px 10px 20px 40px',
|
||||
color: '$grayTextContrast',
|
||||
fontSize: '$2',
|
||||
}}
|
||||
|
|
@ -291,7 +128,7 @@ export function TableR(props: TableProps): JSX.Element {
|
|||
css={{
|
||||
display: 'flex',
|
||||
justifyContent: 'left',
|
||||
padding: '20px 10px',
|
||||
padding: '20px 10px 20px 40px',
|
||||
color: '$grayTextContrast',
|
||||
fontSize: '$1',
|
||||
}}
|
||||
|
|
@ -305,7 +142,7 @@ export function TableR(props: TableProps): JSX.Element {
|
|||
<Td>
|
||||
<IconButton
|
||||
style="ctaWhite"
|
||||
css={{ mr: '$1', background: '$labelButtonsBg' }}
|
||||
css={{ mr: '$1', background: '$labelButtonsBg', margin: '20px 10px 20px 40px', }}
|
||||
onClick={() => {
|
||||
props.onDelete && props.onDelete(key)
|
||||
}}
|
||||
|
|
@ -318,7 +155,7 @@ export function TableR(props: TableProps): JSX.Element {
|
|||
<Td>
|
||||
<IconButton
|
||||
style="ctaWhite"
|
||||
css={{ mr: '$1', background: '$labelButtonsBg' }}
|
||||
css={{ mr: '$1', background: '$labelButtonsBg', margin: '20px 10px 20px 40px', }}
|
||||
onClick={() => {
|
||||
props.onEdit &&
|
||||
props.onEdit({ ...props.rows.get(key), id: key })
|
||||
|
|
|
|||
Loading…
Reference in a new issue