@hbsis.uikit/react/src/widgets/widgets.story.js

Biblioteca ReactJS

import React, { Component } from 'react'
import { storiesOf } from '@storybook/react'
import { Taggable, TaggableExpanded, DataTable } from 'src'

import { TaggableSetValue, ExpandedSetValue } from './taggable/story'

const stories = storiesOf('Widgets', module)
const styles = {
  margin: '20px'
}

const data = [
  {
    codigo: '123',
    nome: 'ADMINISTRATOR'
  },
  {
    codigo: '333',
    nome: 'asdasdasd'
  },
  {
    codigo: '222',
    nome: 'weqweqeqwe'
  },
  {
    codigo: '666',
    nome: 'terterterterte'
  },
  {
    codigo: '321',
    nome: 'BBB'
  }
]

const dataMultiple = [
  ...data
]

const dataExpanded = [
  ...data
]

const datatableData = [
  {
    modelo: 'modelo 1',
    operadora: 'Claro',
    numero: '9987-9663',
    usuario: 'Armando da Silva',
    status: 1
  },
  {
    modelo: 'modelo 2',
    operadora: 'Oi',
    numero: '7895-6541',
    usuario: 'Maria das Dores',
    status: 0
  },
  {
    modelo: 'modelo 3',
    operadora: 'Tim',
    numero: '1234-5678',
    usuario: 'Alessandra Ambrosio',
    status: 1
  },
  {
    modelo: 'modelo 4',
    operadora: 'Vivo',
    numero: '1231-93213',
    usuario: 'Antonio Fagundes',
    status: 1
  },
  {
    modelo: 'modelo 5',
    operadora: 'Tim',
    numero: '12345-8237',
    usuario: 'Joao Francisco',
    status: 0
  },
]

stories.add('Taggagle', () => (
  <div style={styles}>

    <Taggable
      label='Digite o nome do marcador'
      placeholder='Placeholder'
      valueKey="codigo"
      labelKey="nome"
      providerSearch={() => Promise.resolve(data)}
      canRemove
      providerCreate={(value) => {
        return Promise.resolve([{
          codigo: value,
          nome: value
        }])
      }}
      providerRemove={() => Promise.resolve()}
      providerRemoveAll={() => Promise.resolve()}
      width='300px'
      type='primary'
      value={data[1]}
    />

    <Taggable
      multiple
      canCreate
      width='300px'
      label='Digite o nome do marcador'
      placeholder='Placeholder'
      valueKey="codigo"
      labelKey="nome"
      providerSearch={() => Promise.resolve(dataMultiple)}
      providerCreate={(value) => {
        return Promise.resolve([{
          codigo: value,
          nome: value
        }])
      }}
      value={[dataMultiple[0]]}
      providerRemove={() => Promise.resolve()}
      providerRemoveAll={() => Promise.resolve()}
    />

    <TaggableSetValue />

  </div>
))

stories.add('TaggableExpanded', () => (
  <div style={styles}>
    <TaggableExpanded
      label='Digite o nome do marcador'
      placeholder='Quem pode ver este estabelecimento?'
      valueKey="codigo"
      labelKey="nome"
      providerSearch={() => Promise.resolve(dataExpanded)}
      providerCreate={(values) => Promise.resolve([{}, {}])}
      providerRemove={() => Promise.resolve([{}, {}])}
      providerRemoveAll={() => Promise.resolve([{}, {}])}
      width='300px'
      value={[dataExpanded[0]]}
      containerHeight='150px'
      onChange={(v) => console.log(v)}
    />

    <ExpandedSetValue />
  </div>
))


stories.add('DataTable', () => (
  <div style={styles}>
    <h3>Valor Default</h3>
    <DataTable
      columns={[
        {
          labelHeader: 'Nome',
          attribute: 'usuario',
          width: '25%',
          bordered: true
        },
        {
          labelHeader: 'Numero de Telefone',
          attribute: 'numero',
          width: '25%'
        },
        {
          labelHeader: 'modelo',
          attribute: 'modelo',
          width: '25%'
        },
        {
          labelHeader: 'operadora',
          attribute: 'operadora',
          width: '25%'
        }
      ]}
      data={datatableData}
    />

    <h3>Valor Customizado</h3>
    <DataTable
      data={datatableData}
      columns={[
        {
          labelHeader: 'Nome',
          attribute: 'usuario',
          width: '25%',
          bordered: true
        },
        {
          labelHeader: 'Numero de Telefone',
          attribute: 'numero',
          width: '25%'
        },
        {
          labelHeader: 'modelo',
          attribute: 'modelo',
          width: '25%'
        },
        {
          labelHeader: 'custom operadora',
          attribute: 'operadora',
          width: '25%',
          renderCol: (data) => <span style={{ backgroundColor: 'blue', color: 'white' }}>{`Custom col value: ${data.operadora}`}</span>
        }
      ]}
    />
  </div>
))