Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: update unused vars in component
- Loading branch information
1 parent
b6bd15b
commit 25141ba
Showing
5 changed files
with
44 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,2 @@ | ||
|
||
export { Table } from './table'; | ||
export type { TableProps } from './types'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,59 +1,73 @@ | ||
import React from 'react'; | ||
import '../../../../client/src/components/layouts/global.css' | ||
import '../../../../client/src/components/layouts/global.css'; | ||
|
||
import { TableProps, TableVariant } from './types'; | ||
import { TableProps } from './types'; | ||
|
||
const defaultClassNames = ['table','table-auto', 'w-full', 'border-collapse', | ||
'text-left', 'bg-transparent']; | ||
const defaultClassNames = [ | ||
'table', | ||
'table-auto', | ||
'w-full', | ||
'border-collapse', | ||
'text-left', | ||
'bg-transparent' | ||
]; | ||
const MAX_MOBILE_WIDTH = 767; | ||
|
||
const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH | ||
const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH; | ||
|
||
const variantClasses: Record<TableVariant, string> = { | ||
light: 'bg-light-theme-background', | ||
dark: 'bg-dark-theme-background text-gray-0' | ||
} | ||
// const variantClasses: Record<TableVariant, string> = { | ||
// light: 'bg-light-theme-background', | ||
// dark: 'bg-dark-theme-background text-gray-0' | ||
// } | ||
|
||
const computeClassNames = (size: string) => { | ||
switch (size) { | ||
case 'large': | ||
return 'text-lg' | ||
return 'text-lg'; | ||
case 'small': | ||
return 'text-sm' | ||
return 'text-sm'; | ||
// default is medium | ||
default: | ||
return 'text-md' | ||
return 'text-md'; | ||
} | ||
} | ||
}; | ||
|
||
export const Table = React.forwardRef<HTMLTableElement, TableProps>( | ||
( | ||
{ borderless, bordered, className, hover, striped, responsive, variant, size, ...props }, | ||
{ borderless, bordered, hover, striped, responsive, size, ...props }, | ||
ref | ||
) => { | ||
props.cellPadding = 10 // Default cell padding for visual clarity in Storybook | ||
|
||
if (borderless && bordered) bordered = false; | ||
props.cellPadding = 10; // Default cell padding for visual clarity in Storybook | ||
|
||
const borderClass = bordered ? "bordered" : "" | ||
const stripedClass = striped ? "table-striped" : "" | ||
const hoverClass = hover ? "table-hover" : "" | ||
if (borderless && bordered) bordered = false; | ||
|
||
const classes = [...defaultClassNames, borderClass, stripedClass, computeClassNames(size || ''), hoverClass].join(' '); | ||
const borderClass = bordered ? 'bordered' : ''; | ||
const stripedClass = striped ? 'table-striped' : ''; | ||
const hoverClass = hover ? 'table-hover' : ''; | ||
|
||
const classes = [ | ||
...defaultClassNames, | ||
borderClass, | ||
stripedClass, | ||
computeClassNames(size || ''), | ||
hoverClass | ||
].join(' '); | ||
|
||
const table = <table {...props} ref={ref} className={classes}/>; | ||
const table = <table {...props} ref={ref} className={classes} />; | ||
|
||
if (responsive) { | ||
let responsiveClass = computeWindowSize ? 'sm' : 'lg'; | ||
return <div className={responsiveClass}>{table}</div> | ||
const responsiveClass = computeWindowSize ? 'sm' : 'lg'; | ||
return <div className={responsiveClass}>{table}</div>; | ||
} | ||
|
||
// For storybook use cases. Table should remain transparent to the background color | ||
// For storybook use cases. Table should remain transparent to the background color add @param of 'variant' | ||
|
||
// if (variant == 'light') { | ||
// return <div className={variantClasses[variant]}>{table}</div> | ||
// } else return <div className={variantClasses[variant]}>{table}</div> | ||
|
||
return table; | ||
} | ||
); | ||
|
||
Table.displayName = 'Table'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters