increase-admin-components

> Admin components

 

Install

``bash
npm install --save @increase/admin-components
`

Development

Bootstrapped with create-react-library

Usage

`tsx
//index.js
import React from 'react';

//Include Styles
import "bootstrap/dist/css/bootstrap.min.css";
import "increase-admin-components/src/styles/shards-dashboards.1.1.0.min.css";

`

`tsx
// config.js
import {
AttributeField,
TextField,
DateField,
CreateDateField,
BooleanField,
CreateBooleanField
} from 'increase-admin-components';

import { getNames } from './data';

const config = {
list: {
id: { label: 'Id', content: TextField },
name: { label: 'Name', content: TextField },
object: { label: 'Object', content: AttributeField('name') },
date: { label: 'Date', content: DateField },
customDate: {
label: 'Custom Date',
content: CreateDateField('en', {dateStyle: 'full', timeStyle: 'short'})
},
boolean: { label: 'Boolean', content: BooleanField },
customBoolean: { label: 'Custom Boolean', content: CreateBooleanField('Yes', 'Noop') },
},
search: [{
key: 'id',
label: 'Filtrar por id'
}, {
key: 'name',
label: 'Filtrar por nombre',
type: 'select',
content: getNames()
}, {
key: 'active',
label: 'Activo',
type: 'checkbox'
}],
show: {
id: { label: 'Id', content: TextField },
name: { label: 'Name', content: TextField },
object: {
label: 'Object',
type: 'object',
content: {
id: { label: 'Id', content: TextField },
name: { label: 'Nombre', content: TextField }
}
},
nested: {
label: 'Nested',
type: 'nested',
link: false,
content: {
id: { label: 'Id', content: TextField },
name: { label: 'Nombre', content: TextField }
}
},
date: { label: 'Date', content: DateField },
customDate: {
label: 'Custom Date',
content: CreateDateField('en', {dateStyle: 'full', timeStyle: 'short'})
}
}
};

export default config;
`

`tsx
// users.js
import { List } from 'increase-admin-components';
import config from './config';

const Users = (props) => {

...
...

return (


fields={config.list}
data={data}
title="Users"
location={props.location}
searchKeys={config.search}
onPageChange={handlePageChange}
onFilterChange={handleFilterChange}
/>


);
};

export default withRouter(Users);
`

`tsx
// user.js
import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router';
import { Container, Row, Col } from 'shards-react';
import { Show } from 'increase-admin-components';

import config from './config';
import { getUser } from './data';

const User = (props) => {
const [data, setData] = useState();
const userId = props.match.params.id;

useEffect(() => {
getUser(userId).then(user => setData(user));
}, [userId]);

return (







);
};

export default withRouter(User);

``

License

MIT © increasecard