mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
Update layout
This commit is contained in:
parent
8581ea99b9
commit
3d6c5e8c97
@ -1,7 +1,7 @@
|
|||||||
import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
|
import { DetailedHTMLProps, HTMLAttributes } from 'react';
|
||||||
import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
|
import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
|
||||||
|
|
||||||
export interface NitroLayoutBaseProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>
|
export interface NitroLayoutBaseProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
|
||||||
{
|
{
|
||||||
overflow?: NitroLayoutOverflow;
|
overflow?: NitroLayoutOverflow;
|
||||||
position?: NitroLayoutPosition;
|
position?: NitroLayoutPosition;
|
||||||
|
19
src/layout/button-group/NitroLayoutButtonGroup.tsx
Normal file
19
src/layout/button-group/NitroLayoutButtonGroup.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { FC, useMemo } from 'react';
|
||||||
|
import { NitroLayoutBase } from '../base';
|
||||||
|
import { NitroLayoutButtonGroupProps } from './NitroLayoutButtonGroup.types';
|
||||||
|
|
||||||
|
export const NitroLayoutButtonGroup: FC<NitroLayoutButtonGroupProps> = props =>
|
||||||
|
{
|
||||||
|
const { className = '', ...rest } = props;
|
||||||
|
|
||||||
|
const getClassName = useMemo(() =>
|
||||||
|
{
|
||||||
|
let newClassName = 'btn-group';
|
||||||
|
|
||||||
|
if(className && className.length) newClassName += ` ${ className }`;
|
||||||
|
|
||||||
|
return newClassName;
|
||||||
|
}, [ className ]);
|
||||||
|
|
||||||
|
return <NitroLayoutBase className={ getClassName } { ...rest } />;
|
||||||
|
}
|
6
src/layout/button-group/NitroLayoutButtonGroup.types.ts
Normal file
6
src/layout/button-group/NitroLayoutButtonGroup.types.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { NitroLayoutBaseProps } from '../base';
|
||||||
|
|
||||||
|
export interface NitroLayoutButtonGroupProps extends NitroLayoutBaseProps
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
2
src/layout/button-group/index.ts
Normal file
2
src/layout/button-group/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './NitroLayoutButtonGroup';
|
||||||
|
export * from './NitroLayoutButtonGroup.types';
|
@ -20,7 +20,7 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
|
|||||||
|
|
||||||
if(columns && (columns >= 1))
|
if(columns && (columns >= 1))
|
||||||
{
|
{
|
||||||
newStyle['grid-template-columns'] = 'unset';
|
newStyle.gridTemplateColumns = 'unset';
|
||||||
newStyle['--bs-columns'] = columns.toString();
|
newStyle['--bs-columns'] = columns.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
|
|||||||
|
|
||||||
export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
|
export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
|
||||||
{
|
{
|
||||||
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
|
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
|
||||||
|
|
||||||
const getClassName = useMemo(() =>
|
const getClassName = useMemo(() =>
|
||||||
{
|
{
|
||||||
@ -38,7 +38,7 @@ export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={ getClassName } style={ getStyle } { ...rest }>
|
<div className={ getClassName } style={ getStyle } { ...rest }>
|
||||||
{ (itemCount > 1) &&
|
{ (itemCount > itemCountMinimum) &&
|
||||||
<span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
|
<span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
|
||||||
{ (itemUniqueNumber > 0) &&
|
{ (itemUniqueNumber > 0) &&
|
||||||
<div className="position-absolute unique-item-counter">
|
<div className="position-absolute unique-item-counter">
|
||||||
|
@ -6,6 +6,7 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
|
|||||||
itemColor?: string;
|
itemColor?: string;
|
||||||
itemActive?: boolean;
|
itemActive?: boolean;
|
||||||
itemCount?: number;
|
itemCount?: number;
|
||||||
|
itemCountMinimum?: number;
|
||||||
itemUniqueNumber?: number;
|
itemUniqueNumber?: number;
|
||||||
itemUnseen?: boolean;
|
itemUnseen?: boolean;
|
||||||
}
|
}
|
||||||
|
@ -17,7 +17,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
|
|||||||
{
|
{
|
||||||
return (
|
return (
|
||||||
<div className="container-fluid bg-light">
|
<div className="container-fluid bg-light">
|
||||||
<div className="row nitro-card-header simple-header">
|
<div className="row nitro-card-header simple-header overflow-hidden">
|
||||||
<div className="d-flex justify-content-center align-items-center w-100 position-relative px-0">
|
<div className="d-flex justify-content-center align-items-center w-100 position-relative px-0">
|
||||||
<div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 drag-handler">{ headerText }</div>
|
<div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 drag-handler">{ headerText }</div>
|
||||||
<div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
|
<div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
|
||||||
@ -31,7 +31,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="drag-handler container-fluid bg-primary">
|
<div className="drag-handler container-fluid bg-primary">
|
||||||
<div className="row nitro-card-header">
|
<div className="row nitro-card-header overflow-hidden">
|
||||||
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
|
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
|
||||||
<div className="h4 text-white text-shadow header-text">{ headerText }</div>
|
<div className="h4 text-white text-shadow header-text">{ headerText }</div>
|
||||||
<div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
|
<div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
|
||||||
|
@ -5,4 +5,5 @@ export * from './grid';
|
|||||||
export * from './header';
|
export * from './header';
|
||||||
export * from './NitroCardView';
|
export * from './NitroCardView';
|
||||||
export * from './NitroCardView.types';
|
export * from './NitroCardView.types';
|
||||||
|
export * from './sub-header';
|
||||||
export * from './tabs';
|
export * from './tabs';
|
||||||
|
21
src/layout/card/sub-header/NitroCardSubHeaderView.tsx
Normal file
21
src/layout/card/sub-header/NitroCardSubHeaderView.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { FC, useMemo } from 'react';
|
||||||
|
import { NitroLayoutFlex } from '../..';
|
||||||
|
import { NitroCardSubHeaderViewProps } from './NitroCardSubHeaderView.types';
|
||||||
|
|
||||||
|
export const NitroCardSubHeaderView: FC<NitroCardSubHeaderViewProps> = props =>
|
||||||
|
{
|
||||||
|
const { className = '', ...rest } = props;
|
||||||
|
|
||||||
|
const getClassName = useMemo(() =>
|
||||||
|
{
|
||||||
|
let newClassName = 'container-fluid bg-muted justify-content-center py-1';
|
||||||
|
|
||||||
|
if(className && className.length) newClassName += ` ${ className }`;
|
||||||
|
|
||||||
|
return newClassName;
|
||||||
|
}, [ className ]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NitroLayoutFlex className={ getClassName } { ...rest } />
|
||||||
|
);
|
||||||
|
}
|
@ -0,0 +1,6 @@
|
|||||||
|
import { NitroLayoutFlexProps } from '../../flex';
|
||||||
|
|
||||||
|
export interface NitroCardSubHeaderViewProps extends NitroLayoutFlexProps
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
2
src/layout/card/sub-header/index.ts
Normal file
2
src/layout/card/sub-header/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './NitroCardSubHeaderView';
|
||||||
|
export * from './NitroCardSubHeaderView.types';
|
@ -1 +1 @@
|
|||||||
export type NitroLayoutVariant = 'primary' | 'success' | 'danger';
|
export type NitroLayoutVariant = 'primary' | 'success' | 'danger' | 'secondary';
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
export interface NitroLayoutGiftCardViewProps
|
export interface NitroLayoutGiftCardViewProps
|
||||||
{
|
{
|
||||||
figure?:string;
|
figure?: string;
|
||||||
userName?: string;
|
userName?: string;
|
||||||
message?: string;
|
message?: string;
|
||||||
editable?: boolean;
|
editable?: boolean;
|
||||||
|
@ -4,16 +4,16 @@ import { NitroLayoutGridColumnProps } from './NitroLayoutGridColumn.types';
|
|||||||
|
|
||||||
export const NitroLayoutGridColumn: FC<NitroLayoutGridColumnProps> = props =>
|
export const NitroLayoutGridColumn: FC<NitroLayoutGridColumnProps> = props =>
|
||||||
{
|
{
|
||||||
const { className = '', size = 12, gap = 3, ...rest } = props;
|
const { className = '', size = 12, gap = 2, overflow = 'auto', ...rest } = props;
|
||||||
|
|
||||||
const getClassName = useMemo(() =>
|
const getClassName = useMemo(() =>
|
||||||
{
|
{
|
||||||
let newClassName = `g-col-${ size }`;
|
let newClassName = `g-col-${ size }`;
|
||||||
|
|
||||||
if(className && className.length) newClassName += ' ' + className;
|
if(className && className.length) newClassName += ` ${ className }`;
|
||||||
|
|
||||||
return newClassName;
|
return newClassName;
|
||||||
}, [ className, size ]);
|
}, [ className, size ]);
|
||||||
|
|
||||||
return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow="auto" { ...rest } />
|
return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow={ overflow } { ...rest } />
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
export * from './button';
|
export * from './button';
|
||||||
|
export * from './button-group';
|
||||||
export * from './card';
|
export * from './card';
|
||||||
export * from './common';
|
export * from './common';
|
||||||
export * from './draggable-window';
|
export * from './draggable-window';
|
||||||
|
Loading…
Reference in New Issue
Block a user