This package has been deprecated

Author message:

NO LONGER MAINTAINED

the-site-components

Components for the-site

Installation

$ npm install the-site-components --save

Usage

'use strict'
 
import React from 'react'
import {
  TheSignInForm,
  TheSignUpForm,
  TheOperationList,
  TheCreateDialog,
} from 'the-site-components'
import { formed } from 'the-component-mixins'
import { TheThemeStyle, TheIcon } from 'the-components'
 
const SignInForm = formed(TheSignInForm)
const SignUpForm = formed(TheSignUpForm)
 
class ExampleComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      signInValues: {},
      signUpValues: {},
      signUpStep: 0
    }
  }
 
  render () {
    const l = (key) => ({})[key] || key.split(/\./g).pop()
    return (
      <div>
        <TheThemeStyle/>
        <TheIcon.CdnLink/>
        <h1>TheSignInForm</h1>
        <div>
          <SignInForm {...{l}}
                      values={this.state.signInValues}
                      onUpdate={(signInValues) => this.setState({signInValues: Object.assign(this.state.signInValues, signInValues)})}
          />
        </div>
        <h1>SignUpForm</h1>
        <div>
          <SignUpForm {...{l}}
                      values={this.state.signUpValues}
                      onUpdate={(signUpValues) => this.setState({signUpValues: Object.assign(this.state.signUpValues, signUpValues)})}
                      step={this.state.signUpStep}
                      onStep={(signUpStep) => this.setState({signUpStep})}
          />
        </div>
        <hr/>
 
        <h1>TheOperationList</h1>
 
        <div>
 
          <TheOperationList entities={[{id: 1, name: 'v1'}, {id: 2, name: 'v2'}]}
                            {...{l}}
                            fields={{
                              id: {
                                label: 'id',
                              },
                              name: {
                                label: 'name',
                              },
 
                            }}
          />
 
          <TheCreateDialog active={false}
                           {...{l}}
          />
        </div>
      </div>
 
    )
  }
}
 
export default ExampleComponent
 

Components

TheConnectionRetryDialog

@lends TheConnectionRetryDialog

Props

Name	Type	Description	Default
reloadIcon			null
warningIcon			null

TheCreateDialog

Props

Name	Type	Description	Default
doneTitle			title

TheDestroyDialog

Props

Name	Type	Description	Default
renderItem			(entity) => entity.name

TheFBLoginButton

TheLocaleForm

Props

Name	Type	Description	Default
icon			'fas fa-globe'
name			'locale'

TheOperationDialog

Props

Name	Type	Description	Default
renderItem			({ name }) => name

TheOperationList

TheOperationPager

ThePasswordChangeForm

TheProfileEditForm

TheRecoverResetForm

TheRecoverSendForm

TheSearchForm

Props

Name	Type	Description	Default
autoFocus			false
name			'q'

TheSigninForm

Props

Name	Type	Description	Default
nameParser			userNameParser

TheSignUpForm

Props

Name	Type	Description	Default
nameParser			userNameParser
required			['name', 'password', 'profile.email']
step			0

TheSiteToasts

TheUserCreateForm

Props

Name	Type	Description	Default
roles			{}

TheUserImage

Props

Name	Type	Description	Default
scale			'fill'
size			48

TheUsersRoleForm

Props

Name	Type	Description	Default
roles			{}
users			[]

License

This software is released under the MIT License.

Links

• THE Labo