QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 22:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/feature/Detail'

Browse Source
This commit is contained in:
a.bouhuolia
2021-08-25 16:10:13 +02:00
parent 8a3ab96c53 aa6769c011
commit 1f56c04c73
61 changed files with 1668 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/components/Details/index.js
View File

@@ -8,10 +8,17 @@ const DIRECTION = {
HORIZANTAL: 'horizantal',
};
const DetailsMenuContext = React.createContext();
const useDetailsMenuContext = () => React.useContext(DetailsMenuContext);
/**
* Details menu.
*/
export function DetailsMenu({ children, direction = DIRECTION.VERTICAL }) {
export function DetailsMenu({
children,
direction = DIRECTION.VERTICAL,
minLabelSize,
}) {
return (
<div
className={classNames('details-menu', {
@@ -19,7 +26,9 @@ export function DetailsMenu({ children, direction = DIRECTION.VERTICAL }) {
'details-menu--horizantal': direction === DIRECTION.HORIZANTAL,
})}
>
{children}
<DetailsMenuContext.Provider value={{ minLabelSize }}>
{children}
</DetailsMenuContext.Provider>
</div>
);
}
@@ -28,11 +37,22 @@ export function DetailsMenu({ children, direction = DIRECTION.VERTICAL }) {
* Detail item.
*/
export function DetailItem({ label, children, name }) {
const { minLabelSize } = useDetailsMenuContext();
return (
<div className={classNames('detail-item', {
[`detail-item--${name}`]: name,
})}>
<div class="detail-item__label">{label}</div>
<div
className={classNames('detail-item', {
[`detail-item--${name}`]: name,
})}
>
<div
style={{
'min-width': minLabelSize,
}}
class="detail-item__label"
>
{label}
</div>
<div class="detail-item__content">{children}</div>
</div>
);