xbrain-react-components v2.1.6

X-Brain React Components

xbrain-react-components is a set of custom components that use material-ui v1 as a basis.

Installation

Using yarn:

  yarn add xbrain-react-components react-select react-select-fast-filter-options react-virtualized-select

Using npm:

  npm install --save xbrain-react-components react-select react-select-fast-filter-options react-virtualized-select

Available Components

• XButton - mui
• XExternalRedirect - Redirects to an external URL
• XTableHead - mui
• XTabs - mui

All [mui] components have the material-ui props. However, we added new properties that will be listed as a custom property.

XButton

Just a button.

Custom properties

loading={true|false} (optional) - displays a loading or not, default is false.

gutter={all|top|right|bottom|left} (optional) - adds extra space in chosen direction.

<XButton gutter="right" loading type="submit">
  Cancel
</XButton>

<XButton gutter="left" loading type="submit">
  Send
</XButton>

XExternalRedirect

Redirects to an external URL.

Properties

uri={string} (required) - URL you want to redirect

<XExternalRedirect uri="https://google.com" />

XTableHead

Head for data table.

Properties

enterDelay=300 (optional) - Delay for tooltip.

titleToolTip={string} (optional) - Name in tooltip.

actions={false|true} (optional) - Add last column in table for actions.

actionsLabel={string} (optional) - Name of the label for actions.

orderDirection={'asc'|'desc'} (optional) - The sort order of the column.

orderBy={string} (optional) - The current sort columns.

data={array} (required) - Data list.

data.orderKey:{string} - (optional) - The name of the columns to be sorted. If it is not present, the column will not be sorted.

data.name:{string} - (optional) - Column name.

data.numeric:{true|false} - (optional) - If true, content will align to the right.

data.visible:{true|false} - (optional) - If false, not present content.

data.padding:{default'|'checkbox'|'dense'|'none'} - (optional) - If present replace padding cell padding

Exemple

const columns = [
  { name: 'id', orderKey: 'id', numeric: true },
  { name: 'name', orderKey: 'name', visible: false },
];

const order = {
  orderBy: 'id',
  orderDirection: 'asc',
};

const data = [
  {
    id: 1,
    name: 'Name 1',
  },
  {
    id: 2,
    name: 'Name 2',
  },
];

handleOrderChange = newOrderBy => {
  console.log('column click:', newOrderBy);
};

<XTableHead
  columns={columns}
  orderBy={order.orderBy}
  orderDirection={order.orderDirection}
  onOrderChange={handleOrderChange}
  data={data}
  actions
/>;

XTabs

Tabs component.

Properties

tabs={array} (required) - Array of tabs .

tabs.label:{string} - (optional) - The name tab.

tabs.disabled={bool} (optional) - Disabled tab.

tabs.component={false|true} (required) - Component that will be rendered.

Exemple

const tabs = [
  {
    label: 'information',
    disabled: false,
    component: <InformationScreen {...this.props} />,
    disableGutters: false,
  },
  {
    label: 'Details',
    disabled: false,
    component: <DetailsScreen {...this.props} />,
    disableGutters: true,
  },
];

<XTabs tabs={tabs} />;