data-box

v0.0.9arrow_drop_down
v0.0.9
v0.0.8
v0.0.7
v0.0.6
v0.0.5
v0.0.4
v0.0.3
v0.0.2
v0.0.1
STATUS
Passing
DOWNLOADS
610
VISIBILITY
Public
PUBLISHED
2 years ago
SIZE
N/A
1 contributor
Install data-box as a package?
Copied
npm i @bit/equipmentshare.global.organisms.data-box
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDescription
actions
Array

Group of action texts with onClick handlers

actionViews
IDataBoxActionViews

Group of Custom forms that are treated as actions. Works well with DataBoxForm component.

asyncDisplayProps
IAsyncDisplayProps

Override props for the AsyncDisplay component

children
(required)
ReactReactNode
defaultAction
string

Tells us that the user wants to enable edit mode by default

error
unknown

Any error data. Undefined or null means no error

emptyMessage
string

Used for empty state such as You have no ${name}

errorMessage
string

Overrides the default errorMessage

name
string

Used for default error message and empty messages

noMt
boolean

Opt out from the default top margin. This is used to stack DataBox components.

onCancel
signature

Gets called when the user clicks on the close button during the action view

inProgress
boolean

Progress can be pending/fulfilled/rejected show the children on fulfilled show loading component on pending show error component on rejected

status
Array

Array of tags/descriptors shown on top

title
string
viewableData
Array

Works on top of the progress property to determine if the data is empty when progress is fulfilled

Help and resources