@limit.es/limit-react-components v0.3.0

Limit React Components

Library with multiple generic components for limit inc

Install

npm install --save @limit.es/limit-react-components

or

yarn add --@limit.es/limit-react-components

Usage

Tree View

...

import { TreeView } from "@limit.es/limit-react-components";

...

const mapStateToProps = (state) => {
  return {
    data: getFormattedData(state),
    loading: getIsLoading(state),
    expanded: getExpanded(state),
    selectedNode: getSelectedNode(state),
  };
};

const mapDispatchToProps = (dispatch) => {
  const actions = {
    reset: bindActionCreators(reset, dispatch),
    selectNode: bindActionCreators(selectNode, dispatch),
    expandNode: bindActionCreators(expandNode, dispatch),
    selectAndExpandNode: bindActionCreators(selectAndExpandNode, dispatch),
  };
  return { actions };
};

const component = connect(mapStateToProps, mapDispatchToProps)(TreeView);
export default component;

Material DataGrid Pro

import { MaterialDataGridPro } from "@limit.es/limit-react-components";

const rows = [
  {
    id: "1",
    codi: "1",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    rating: 1,
    number: "120.100",
  },
  ...
];

const columns = [
  { field: "codi", headerName: "Code", minWidth: 90, editable: true },
  ...
];

...

<MaterialDataGridPro
  rows={rows}
  columns={columns}
  getRowId={(row) => row.id}
  onCreate={() => {}}
  onCellEditCommit={() => {}}
  indexRow={"codi"}
  disableEditandCreate={false}
  disableInlineEdition={false}
/>;
...

Material Autocomplete

import { MaterialAutocomplete } from "@limit.es/limit-react-components";

const items =  [
  {
    label: "Option 1",
    value: "label1",
  },
  ...
]

...

<MaterialAutocomplete
  id="example"
  label="Example autocomplete"
  variant="filled"
  loading={loading}
  items={items}
  onChange={handleChange}
  onSearch={handleSearch}
  groupBy={(option) => option.label}
  size="small"
  disabled={disabled}
  forcedValue={{
    label: value?.description,
    value: value?.id,
  }}
/>;
...

Material DataGrid

import { MaterialDataGrid } from "@limit.es/limit-react-components";

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  ...
];

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  {
    field: "firstName",
    headerName: "First Name",
    align: "center",
    headerAlign: "center",
    editable: true
  },
  ...
];

...

<MaterialDataGrid
  id="example"
  rows = {rows}
  columns = {columns}
  loading = {loading}
  getRowId = {(row) => row.codi}
  autoHeight = {true}
  autoWidth = {true}
  disableColumnMenu = {true}
  disableExtendRowFullWidth = {true}
  disableInlineEdition = {false}
  flexGrid = {true}
  checkboxSelection = {false}
  onCellEditCommit = {() => {}}
  onRowClick = {() => {}}
  onRowDoubleClick = {() => {}}
  onSelectionModelChange = {() => {}}
  rowPerPage = {5}
/>;
...

License

MIT © juanmzaragoza