dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-06-07 08:39:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Started moving Box to a single component

Browse Source 
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
Florian Bouillon 2021-04-15 01:24:48 +02:00
parent 0de363487d
commit 2491f23f49
Signed by: Florian Bouillon
GPG Key ID: 50BD648F12C86AB6
6 changed files with 37 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl → src/dzeio/Box/Box.module.styl
View File

@ -1,4 +1,4 @@
@import "../../config"
@import "../config"
.box
background $foregroundLight
@ -10,3 +10,8 @@
border 2px solid $grayDark
@media (prefers-color-scheme dark)
border-color $grayLight
// BODY
.body
padding 0 16px 16px

2
src/dzeio/Box/BoxBody/BoxBody.module.styl
View File

@ -1,2 +0,0 @@
.body
padding 0 16px 16px

18
src/dzeio/Box/BoxBody/index.tsx
View File

@ -1,18 +0,0 @@
import React from 'react'
import css from './BoxBody.module.styl'
import { buildClassName } from '../../Util'
interface Props {
noPadding?: boolean
}
export default class BoxBody extends React.Component<Props> {
public render = () => (
<div className={buildClassName([css.body, !this.props.noPadding])}>
{this.props.children}
</div>
)
}

24
src/dzeio/Box/BoxHeader/index.tsx
View File

@ -18,19 +18,25 @@ export default class BoxHeader extends React.Component<Props> {
public render = () => (
<>
<div className={buildClassName(
<div data-t="true" className={buildClassName(
css.header
)}>
<Row>
<Col size={this.props.titleColSize as 1 || 8}>
<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
<Text className={css.subtitle}>{this.props.subtitle}</Text>
</Col>
<Row nomargin justify="space-between">
<Col>
<Row justify="flex-end">
{this.props.children}
</Row>
{this.props.title && (
<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
)}
{this.props.subtitle && (
<Text className={css.subtitle}>{this.props.subtitle}</Text>
)}
</Col>
{this.props.children && (
<Col nogrow>
<Row justify="flex-end">
{this.props.children}
</Row>
</Col>
)}
</Row>
</div>
</>

28
src/dzeio/Box/BoxWrapper/index.tsx
View File

@ -1,28 +0,0 @@
import React from 'react'
import css from './BoxWrapper.module.styl'
import { buildClassName } from '../../Util'
interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
outline?: boolean
className?: string
}
export default class BoxWrapper extends React.Component<Props> {
public render = () => (
<div {...this.props}
className={buildClassName(css.box, [css.outline, this.props.outline], this.props.className)}
>
{this.props.children}
</div>
)
}
/*
Wrapper extends div
Body
noPadding?: boolean
*/

30
src/dzeio/Box/index.tsx
View File

@ -1,15 +1,20 @@
import React from 'react'
import BoxWrapper from './BoxWrapper'
import BoxHeader from './BoxHeader'
import BoxBody from './BoxBody'
import { buildClassName } from '../Util'
import css from './Box.module.styl'
interface Props {
// Wrapper
wrapperProps?: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className'>
outline?: boolean
/**
* @deprecated use wrapperProps.onClick
*/
onClick?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>['onClick']
className?: string
onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
// Header
title?: string
@ -26,7 +31,11 @@ interface Props {
export default class Box extends React.Component<Props> {
public render = () => (
<BoxWrapper onClick={this.props.onClick} outline={this.props.outline} className={this.props.className}>
<div
{...this.props.wrapperProps}
onClick={this.props.onClick}
className={buildClassName(css.box, this.props.className, [css.outline, this.props.outline])}
>
{(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
<BoxHeader
title={this.props.title}
@ -38,17 +47,10 @@ export default class Box extends React.Component<Props> {
</BoxHeader>
)}
{this.props.children && (
<BoxBody noPadding={this.props.noPadding}>
<div className={buildClassName([css.body, !this.props.noPadding])}>
{this.props.children}
</BoxBody>
</div>
)}
</BoxWrapper>
</div>
)
}
export {
BoxWrapper,
BoxHeader,
BoxBody
}