A plugin can rewrite a class from core or other plugin.
Config Rewrite
In the plugin, we register rewrite in file etc/config.js.
...
| Code Block | ||
|---|---|---|
| ||
/**
*
* @type {MenuComponent}
*/
const component = ComponentFactory.get(MenuComponent);
|
Rewrite Implementation
To implement rewrite, we need using javascript function. For example, we implement rewrite for MenuComponent as:
| Code Block | ||
|---|---|---|
| ||
import React, {Fragment} from "react";
/**
* Rewrite MenuComponent
*
* @param {MenuComponent} MenuComponent
* @returns {RewriteClass}
*/
export default function(MenuComponent) {
return class Rewrite extends MenuComponent {
template() {
let template = super.template();
return (
<Fragment>
Hello World!
{template}
</Fragment>
)
}
}
}
|
Rewrite Epic
Epic is a Function, not a Class. So rewriting epic has a little difference. For example, we implement rewrite for LocationEpic as:
| Code Block | ||
|---|---|---|
| ||
import {Observable} from "rxjs/Rx";
import UserConstant from "../../../view/constant/UserConstant";
import LocationAction from "../../../view/action/LocationAction";
export default function () {
let LocationEpic = function (action$) {
let LocationService = require("../../../service/LocationService").default;
return action$.ofType(UserConstant.USER_ASSIGN_POS)
.mergeMap(action => Observable.from(
LocationService.assignPos(
action.posId, action.locationId, action.currentStaffId))
.map((response) => {
console.log(response);
return LocationAction.assignPosResponse();
})
.catch((error) =>{
return Observable.of(LocationAction.assignPosError(error.message));
}
)
);
};
LocationEpic.className = "LocationEpic";
return LocationEpic;
} |
Exercise: Use rewrite to display Description of product to product list of POS