@increase/admin-components

increase-admin-components

Admin components

Install

npm install --save @increase/admin-components

Development

Bootstrapped with create-react-library

Usage

//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";

// 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;

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

const Users = (props) => {

  ...
  ...

  return (
    <Row>
      <Col>
        <List
          fields={config.list}
          data={data}
          title="Users"
          location={props.location}
          searchKeys={config.search}
          onPageChange={handlePageChange}
          onFilterChange={handleFilterChange}
        />
      </Col>
    </Row>
  );
};

export default withRouter(Users);

// 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 (
    <Container fluid>
      <Row>
        <Col>
          <Show data={data} title="Show" fields={config.show} match={{}} />
        </Col>
      </Row>
    </Container>
  );
};

export default withRouter(User);

License

MIT © increasecard