the-site-components v4.0.5

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

TheCreateDialog

Props

TheDestroyDialog

Props

TheFBLoginButton

TheLocaleForm

Props

TheOperationDialog

Props

TheOperationList

TheOperationPager

ThePasswordChangeForm

TheProfileEditForm

TheRecoverResetForm

TheRecoverSendForm

TheSearchForm

Props

TheSigninForm

Props

TheSignUpForm

Props

TheSiteToasts

TheUserCreateForm

Props

TheUserImage

Props

TheUsersRoleForm

Props

License

This software is released under the MIT License.

Links

• THE Labo