feat: nullable cell option (#754)

* feat: nullable cell option * fix: format
kufu · May 8, 2020 · b16624d · b16624d
1 parent 0bf27be
commit b16624d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/components/Table/Cell.tsx b/src/components/Table/Cell.tsx
@@ -10,6 +10,7 @@ export type Props = {
   colSpan?: number
   rowSpan?: number
   highlighted?: boolean
+  nullable?: boolean
   children?: ReactNode
   className?: string
   onClick?: () => void
@@ -22,10 +23,13 @@ export const Cell: FC<Props> = ({
   colSpan,
   rowSpan,
   highlighted = false,
+  nullable = false,
 }) => {
   const theme = useTheme()
   const { group } = useContext(TableGroupContext)
-  const classNames = `${className} ${highlighted ? 'highlighted' : ''}`
+  const classNames = [className, highlighted && 'highlighted', nullable && 'nullable']
+    .filter((c) => !!c)
+    .join(' ')
   const props = {
     children,
     onClick,
@@ -73,6 +77,14 @@ const Th = styled.th<{ themes: Theme; onClick?: () => void }>`
   }}
 `
 const Td = styled.td<{ themes: Theme }>`
+  &.nullable {
+    &:empty {
+      &::after {
+        content: '-----';
+      }
+    }
+  }
+
   ${({ themes }) => {
     const { size, palette, frame } = themes
 

diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -158,6 +158,11 @@ storiesOf('Table', module)
                   line
                 </Cell>
               </Row>
+              <Row>
+                <Cell nullable={true}></Cell>
+                <Cell nullable={true}>not null</Cell>
+                <Cell nullable={false}></Cell>
+              </Row>
             </Body>
           </Table>
         </Base>