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.