fluid-commons

0.8.9 • Public • Published

Fluid Commons

Commonly used react components with Fluid-Func and Redux support.

Getting Started

Installation

    npm install --save fluid-commons

Fluid-api

  • Fluid Api configuration
        import { FluidApi } from 'fluid-commons';
        const config = {
            environment: {
                production: { paramForProd: 'hey'},
                development: { paramForDev: 'hey dev'}
            }
            catch: {
                componentError: (error, info)=>{
                    //catches child's component error
                }
                apiError: (error)=>{
                    //catches api call error
                }
            },
            storage: { // provides a temporary storage across the application
                production: {},
                development: {},
                // production: new Promise() - can be written in Promise
                // production: ()=>{} - can be writting in Function
            } // accessible via FluidApi.storage(context, action);
        };
 
        const Api = {
            saveAction: {
                production: (param)=>{
                    const forProd = param.paramForProd();
                    // forProd = "hey"
                },
                development: (param)=>{
                    const forDev = param.paramForDev();
                    // forDev = "hey dev"
                }
            }
        };
 
 function FluidApiSample() {  
     return (<FluidApi environment="production" config={config} api={Api}>
            <div> content here </div>
            </FluidApi>);
 }
  • To call an api method
 
    FluidApi.execute('saveAction', {
        anyParam:'anyParam'
    }).then(()=> {
        //success
    }).catch(err=>{
        //failed
    });
  • To access the storage
 
 
    /*  storage: { 
        development: {
            person: {
                name:'John'
            },
            people: [
                {
                    name:'John'
                },
                {
                    name:'Mary'
                }
            ]
        },
    } */
 
 
    FluidApi.storage('person', {
       field:'name'
    }).then(({data})=> {
       // data will return person.name
    }).catch(err=>{
        //failed
    });
 
    FluidApi.storage('person', {
       field:'name',
       value:'Johnny'
    }).then(({data})=> {
       // data will set person.name = 'Johnny'
    }).catch(err=>{
        //failed
    });
 
    FluidApi.storage('people').
      then(({data})=> {
       // data will get people list
    }).catch(err=>{
        //failed
    });
 
    FluidApi.storage('people', {
        field: 1,
        value: {
            name: 'Mary Ann'
        }
    }).
      then(({data})=> {
       // data set update array index 1 with new value
    }).catch(err=>{
        //failed
    });
 
    FluidApi.storage('people', {
        remove: 1
    }).
      then(({data})=> {
       // data remove index 1 from the array
    }).catch(err=>{
        //failed
    });
 
    FluidApi.storage('person', {
        remove: 'name'
    }).
      then(({data})=> {
       // data remove field name from person object
    }).catch(err=>{
        //failed
    });
 

Fluid-button

  • Works like a normal html button with the same react attributes as Button but with fluid-func trigger.
 import { FluidButton } from 'fluid-commons';
 import FluidFunc from 'fluid-func';
 
 FluidFunc.create('saveAction', (param)=> {
    const inputParam = param.input();
    //inputParam = "Hello from button!"
 });
 
 function fluidButtonSample(){
     return (<div>
            <FluidButton action="saveAction" data={{input:'Hello from button!'}}>Save</FluidButton>
      </div>);
 }
 

Fluid-form (requires redux)

 import { FluidForm } from 'fluid-commons';
 const specs = ({dispatch, formName})=>{
     return [
         {field:'fullname', data: {
             // see fluid-func's tranform, translate and validate
         }},
         {field:'occupation', data: {
              // see fluid-func's tranform, translate and validate
         }}
     ];
 };
 
 const onSubmit = (value) =>{
     const {fullname, occupation} = value;
 }
 
 const onFailed = (fluidFuncError) =>{
     const {stackId, error} = fluidFuncError;
     //error.message = "error message"
 };
 
 function fluidFormSample() {
     return (<FluidForm 
        onFailed={onFailed}
        onSubmit={onSubmit} name="mainForm" specs={}>
        <input name="fullname"/>
        <input name="occupation"/>
        <button type="submit">Submit</button>
     </FluidForm>);
 }

Note: Form name is required.

  • Using FluidFormReducer
 
    import { FluidFormReducer as fluidForm } from 'fluid-commons';
    const rootReducer = combineReducers({
        fluidForm
    });
 
  • Create a container for FluidForm
  import { FluidForm } from 'fluid-form'; 
  import { connect } from 'react-redux';
  import React from 'react';
 
  class FormSample extends React.Component {
      constructor(props){
          super(props);
          this.specs = ({dispatch, formName}) => {
             return [
                {field:'fullname', data: {
                    // see fluid-func's tranform, translate and validate
                }},
                {field:'occupation', data: {
                    // see fluid-func's tranform, translate and validate
                }}
            ];
          }
      }
      onSubmit(value){
 
      }
      onFailed(){
 
      }
      render(){
          (<FluidForm specs={specs} name="mainForm" onSubmit={this.onSubmit} onFailed={this.onFailed}></FluidForm>)
      }
  }
  
  function mapStateToProps(state) {
      return {
          mainForm: state.fluidForm.mainForm || {data: {}}
      };
  }
 
  export const ConnectedFormSample = connect(mapStateToProps)(FormSample);
 
  • To clear form fields
    FluidForm.clear('mainForm'); // form name
  • To submit form
    FluidForm.submit('mainForm');// form name
  • To load data to form
    FluidForm.load('mainForm', {
        fullname:'John Doe',
        occupation: 'Programmer'
    });
  • To set value to a specific field
    FluidForm.set('mainForm','fullname','John Doe');
  • To listen to changes of a specific field
    FluidForm.on('mainForm','fullname', (value)=> {
        // will trigger every update on the value
    }); 

Note: To enable these functionalities "fullname" must be tagged as public. See below:

       this.specs = ({dispatch, formName}) => {
             return [
                {field:'fullname', data: {
                    // see fluid-func's tranform, translate and validate
                }, public: true},
                {field:'occupation', data: {
                    // see fluid-func's tranform, translate and validate
                }}
            ];
          }
 

Fluid-input

    import { FluidInput, FluidForm } from 'fluid-commons';
    const data = {
        fullname: 'John Doe'.
        occupation: 'Programmer'
    };
 
     function fluidInputSample() {
     return (<FluidForm 
        onFailed={onFailed}
        onSubmit={onSubmit} name="mainForm" specs={}>
        <FluidInput dataSrc={data} name="fullname"/>
        <FluidInput dataSrc={data} name="occupation"/>
        <button type="submit">Submit</button>
     </FluidForm>);

Fluid-label

   import { FluidLabel } from 'fluid-label';
   
   FluidLabel.setup('mainLabel', {
       en:  {
           appName: 'app name in en'
       },
       dk: {
           appName: 'app name in dk'
       }
   });
 
    return (<div><FluidLabel locale="en" label="appName" name="mainLabel"/></div>);
 
  • Get label using .get static method
    FluidLabel.get('mainLabel', 'en', 'appName'); //  app name in en

Fluid-merged-view

Coming soon.

Fluid-paginate

Coming soon.

Fluid-table

Coming soon.

Readme

Keywords

none

Package Sidebar

Install

npm i fluid-commons

Weekly Downloads

2

Version

0.8.9

License

MIT

Unpacked Size

566 kB

Total Files

7

Last publish

Collaborators

  • rickzx98