modernizacion_componentes v1.0.1

Componentes Reutilizables de la Secretaría de Modernización

Esta Librería tiene como finalidad facilitar la reutilización de componentes para proyectos de la Secretaría de Modernización. se utiliza Ant Design como base.

Instalación

npm install componentes_modernizacion

Estructura

Para poder trabajar con los componentes aisladamente utilizamos una librería llama Storybook, la misma permite parametrizar las propiedades que se le asignan a cada componente para un desarrollo más dinámico.

Para visualizar el componente ingresamos el siguiente comando en la consola

npm run storybook

Para crear nuevos componente se necesita seguir con el siguiente scaffolding para que la interfaz de Storybook pueda mostrarlo.

src/
    nombre-componente/
        stories/
            nombre-componente.stories.js
        nombre-componente.js
        nombre-componente.css

Tambien pueden hacerse pruebas con varios componentes en la carpeta __test__ siguiendo la misma estructura que con src

Componentes

ActionTable

Tabla realizada con ant design en la que se especifican las columnas, filas y acciones.

return <ActionTable
    columns={columns}
    items={dataSource}
    actions={actions}
    isLoading={_isLoading}
    loading={_loading}
    filterOn={[_filter]}
    sortingOn={[_sorting]}
    onSorting={onSorting}
/>

Posee las siguientes propiedades:

columns

Arreglo de objetos siendo la key el valor de identidad y el value el nombre como se desplegaría en la cabecera de la columna

const columns = [
    { 'titulo': 'Título' },
    { 'jornada': 'Jornada' }
];

dataSource

Arreglo de objetos con los valores por fila de cada columna

export const dataSource = [
    {
        key: '1',
        titulo: 'Mike',
        jornada: '11 Downing Street',
    },
    {
        key: '2',
        titulo: 'Jhon',
        jornada: '10 Downing Street',
    },
];

actions - opcional

Son las acciones en forma de Iconos que puede realizar la tabla. Es un arreglo que puede contener tantos objetos como acciones requiera la tabla. Solo el primer objeto tiene un tittle funcional, el mismo puede ser un texto o un elemento. Luego el resto de parametros deben estar presente en todos los obejtos y son: action, funcion que se ejecuta al interactuar con el icono, la misma recibe como parametro un objeto con los titulos de las columnas como Keys y el contenido de la fila como Value; color, es el color del icono; icon, icono importado desde @ant-design/icons; label, descripcion del boton desplegado como Tooltip.

import {InfoCircleOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons'

export const actions = [
    {
        title: <Button
            type="primary"
            size='small'
            style={{ marginLeft: '5px' }}
            onClick={() => history.push('/empresa/crear-oferta')}
        >
            Nueva oferta
        </Button>,
        label: 'Detalle de oferta',
        color: 'blue',
        icon: InfoCircleOutlined,
        action: (record) => {
            history.push(`/empresa/oferta/${oferta.id}/detalle/`);
        },
        displayRule: []
    },
    {
        title: '',
        label: 'Editar oferta',
        color: 'green',
        icon: EditOutlined,
        action: (record) => {
            history.push(`/empresa/oferta/${oferta.id}/modificar/`);
        },
        displayRule: []
    },
    {
        title: '',
        label: 'Eliminar oferta',
        color: 'red',
        icon: DeleteOutlined,
        action: (record) => {
            eliminarOferta(oferta);
        },
        displayRule: []
    }
]

isLoading - opcional

Booleano que despliega un spinner en caso de estarse cargando los componentes de la tabla

loading - opcional

Booleano similar a isLoading, pero despliega el spinner propio de la tabla

filterOn - opcional

Arreglo de string con las claves del objeto column que pueden ser filtrados

sortingOn - opcional

Arreglo de string con las claves del objeto column para ordenar de forma acendente o descendente

onSorting - opcional

Funcion que recibe un objeto con 2 valores, sortOrder : ('ascend' || 'descent' || undefined), sortColumn : (String : titulo de la columna)

rowKey - opcional

Permite identificar cada fila de la columna, por defecto es 'id', en caso de usar otro valor como key deberia cambiarlo

Pagination

La idea principal de tener un apaginación separada es poder realizar peticiones en base a los cambios del número de página y el tamaño de filas desde el backend. Se podría automatizar en un futuro los procesos de redux y redux-saga para simplemente incluir funciones y ahorrar la configuraion, al igual que el enrutado. El componente recibe 3 parametros: