react-inforvation-utility

Install

npm install --save react-inforvation-utility

Usage

BlobImage

import React, { Component } from 'react'
import { Grid } from 'semantic-ui-react'
import { BlobImage } from 'react-inforvation-utility'

class Example extends Component {
  onSaveSuccess = () => {
    console.log('onSaveSuccess');
  }
  
  onSaveError = () => {
    console.log('onSaveError');
  }
  
  onCheckHaveImg = () => {
    console.log('onCheckHaveImg');
  }
  
  render () {
    let token = 'TOKEN';
    return (
      <Grid columns={2}>
        <Grid.Column>
          <BlobImage 
            token={token} 
            account='ACCOUNT_NAME'            
            container='CONTAINER_NAME'
            name='FILE_NAME'
            width = '100%'  {/*Percent or Pixel*/} 
            height = '100%' {/*Percent or Pixel*/} 
            ribbonDescription = 'รูปที่ 1 ทดสอบ'
            ribbonColor = 'COLOR_LIBBON' {/*Example 'teal'*/} 
            ribbonSide {/*option for show ribbon default is left*/}
            upload {/*option for show upload button*/}
            onSaveSuccess={this.onSaveSuccess}
            onNoImage={this.onCheckHaveImg}
            onSaveError={this.onSaveError}
          />
        </Grid.Column>
        <Grid.Column>
          <BlobImage 
            token={token} 
            account='ACCOUNT_NAME'            
            container='CONTAINER_NAME'
            name='FILE_NAME'
            width = '100%' {/*Percent or Pixel*/} 
            height = '100%' {/*Percent or Pixel*/} 
            ribbonDescription = 'Image Description' {/*Example ''รูปที่ 2 ทดสอบ''*/} 
            ribbonColor = 'COLOR_LIBBON' {/*Example 'red'*/} 
            ribbonSide ='right' {/*option for show ribbon default is left*/}
            upload {/*option for show upload button*/}
            onSaveSuccess={this.onSaveSuccess}
            onNoImage={this.onCheckHaveImg}
            onSaveError={this.onSaveError}
          />
        </Grid.Column>
      </Grid>
    );     
  }
}

withDocumentFetch

import React, { Component } from 'react';
import { Form } from 'semantic-ui-react'
import validate from 'validate.js'
import { withDocumentFetch } from 'react-inforvation-utility';


validate.validators.custom = function(value, options, key, attributes) {
  return "is totally wrong";
};

const constraint = {
  year:{length:{is:4}}
}

class TestDocFetch extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }  
  
  handleChange = (e,{name,value}) => {
    let tmp = { ...this.props.data };    
    tmp[name]=value;              
    this.props.onDocumentChange(tmp);    
  }
  
  render() {    
    const { data, validateError } = this.props;
    return (
    <Form>
      <Form.Input name="year" 
        label="year"
        error={'year' in validateError}
        value={data.year||''} onChange={this.handleChange}/> 
        {validateError['year']}
     </Form>
    );
  }
}

constraint['validator'] = validate;

export default withDocumentFetch('/obec/ject_cct',constraint)(TestDocFetch);

import React, { Component,Fragment } from 'react';
import { Button } from 'semantic-ui-react'
import TestDocFetch from './TestDocFetch';

let token = 'TOKEN';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
 
  handleValidateError = (result) => {
    console.log(result);
  }
  
  handleClick = () => {
    this.refs.form.save();
  }
  
  onSaveSuccess = (result) => {
  }
  
  onSaveError = (result) => {
  }
  
  render() {
    return (
      <Fragment>
        <TestDocFetch docId="0011011374935" ref="form" 
          token={token} 
          onValidateError={this.handleValidateError}/>
        <Button fluid onClick={this.handleClick} content="เลือก"/>
      </Fragment>
    );
  }
}

export default Test;

withDocumentQuery

import React, { Component } from 'react';
import { withDocumentQuery } from 'react-inforvation-utility';

class TestDocQuery extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }  

  render() {    
    const { token,body,response } = this.props;
    console.log( body,response );
    return (<div/>);
  }
}

export default withDocumentQuery('/obec/ject_cct')(TestDocQuery);

import React, { Component,Fragment } from 'react';
import { Button } from 'semantic-ui-react'
import TestDocQuery from './TestDocQuery';

let token = 'TOKEN';

class TestQuery extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  
  render() {
    const body = {"query":{'_id':'0011011374935'}};
    return (
      <Fragment>
        <TestDocQuery 
          token={token} 
          body={body}/>
      </Fragment>
    );
  }
}

export default TestQuery;

License

NU © theerawutt53