How to use xadmin - 10 common examples

render() {
    const { routes, params } = this.props
    return (
      
        
          <div>
            {_c('site.logo')}
            {_c('site.title', 'Admin')}
          </div>
          
        
        
          <header style="{{">
            
            {/*  */}
            <div style="{{">
              
                {items =&gt; <menu style="{{" mode="horizontal">{items}</menu>}
              </div></header>

render() {
    if(this.state.hasError) {
      return null
    }

    const { selected, params={}, data, cellKey, editMode, wrapStyle, widgetWrap,
      dispatchData, removeCell, selectCell, copyCell, onSettings, ...extraProps } = this.props

    // is should display
    if(!this.state.display || params == null) { return null }

    const animed = params.animate && params.animate.active
    const Widget = app.load_dict('dashboard_widgets')[params.type] || MissWidgetType
    const style = { height: '100%', padding: 0, position: 'relative', userSelect: 'none', ...wrapStyle }
    const cellSelected = selected && editMode

    if(cellSelected) {
      style['boxShadow'] = '0px 0px 1px #f00'
    }
    const widgetParams = this.state.widgetParams

    const canSelect = Widget.CanSelect || !Widget.Container
    const wrapId = 'dashboard-cell-wrap-' + cellKey.replace(/[\/\.]/g, '_')
    const cellStyle = widgetParams.style ? <style scope="{true}">{_transformSheet(widgetParams.style, wrapId)}</style> : null
    const typeClassName = 'dashboard-widget-' + params.type.replace(/[\/\.]/g, '_')
    const wrapClassName = [ 'dashboard-cell-wrap', typeClassName ].join(' ')

    const wrap = widgetWrap || ((widget) =&gt; (editMode ? (
      <div style="{style}" id="{wrapId}"></div>

const renderActions = () => {
    const { canEdit } = use('model.permission')
    const { onEdit } = use('model.event')

    return (<>
      
      { canEdit ?
        (<button type="primary">onEdit(params &amp;&amp; params.id)}&gt; {_t('Edit')}</button>) : null
      }
    )
  }

const BatchChangeBtn = props => {
  const { _t } = app.context
  const [ show, setShow ] = React.useState(false)
  const { canEdit, fields, onBatchChange } = use('actons.batch_change', props)
  const { selected } = use('model.select', props)
  const { model } = use('model', props)

  const onClose = () => setShow(false)

  const renderModel = () => {
    const fs = fields.map(f => f.split('.')[0])
    return (
       _.find(model.form, f => f && f.key == name) || name ) : [ '*' ]
        }, 'required')}

render() {
    const { _t } = app.context
    return (
      
        
      
    );
  }
}

export default StoreWrap('test', { 
  data: ({ state }) => ({ title: state.test }),
  event: {
    mount: ({ dispatch }) => dispatch({ type: '@@xadmin/ADD_NOTICE', headline: 'Test', message: 'Test message' })
  }
})(App);

}).then(user => {
          dispatch({ type: '@@xadmin/AUTH_SIGN_IN', payload: _.omit(user, 'password') })
          app.go(query && query.redirect || '/app/')
        }).catch(error => {
          dispatch({ type: '@@xadmin/AUTH_SIGN_IN_ERROR', error })

const ItemEditForm = props => {
  const { item, field, schema, model, onClose, saveItem } = use('model.save', props)

  const formField = _.find(model.form || [], obj => obj && obj.key == field ) || { key: field }
  const required = (model.required || []).indexOf(field) >= 0 ? { required: [ field ] } : {}

  return (

const ColsDropdown = props => {
  const { selected, fields, changeFieldDisplay } = use('model.fields', props)

  let items = []
  const showFields = Object.keys(fields).filter(name => fields[name].showInList !== false)
  const menuShow = showFields.length <= 10

  for (let name of showFields) {
    let field = fields[name]
      , fieldName = name
      , title = field.title || name
      , fieldSelected = _.indexOf(selected, name) !== -1
      , onClick = (e) => {
        changeFieldDisplay([ fieldName, e.target.checked ])
      }, onClickBtn = () => {
        changeFieldDisplay([ fieldName, !fieldSelected ])
      }
    if(menuShow) {

const useList = render => props => {
  const state = use('model.list', use('model', props))
  const { loading, items, model } = state
  const list = render(state)

  if(loading) {
    return {items.length > 0 ? list : null}
  } else {
    if(items.length > 0) {
      return list
    } else {
      const EmptyComponent = model.components && model.components.DataEmpty
      if(EmptyComponent) {
        return 
      } else {
        return 
      }
    }

const AddChildrenModelBtn = props => {
  const [ show, setShow ] = React.useState(false)
  const { model, getItems } = use('model.getItems')
  const { canAdd } = use('model.permission')
  const { refData, refreshTimeout } = props

  const onSuccess = () => {
    if(refreshTimeout) {
      setTimeout(getItems, refreshTimeout)
    } else {
      getItems()
    }
  }

  return canAdd ? [
    <button style="{{"> setShow(true)}&gt;{_t('Add {{object}}', { object: model.title })}</button>,
     setShow(false)} /&gt;
  ] : null
}