fluid-commons
v0.8.9
Published
Commonly used react components with Fluid-Func support.
Downloads
11
Readme
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.