canner
Version:
Build CMS in few lines of code for different data sources
447 lines (384 loc) • 16 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.parseOrder = parseOrder;
exports.parsePagination = parsePagination;
exports.parseWhere = parseWhere;
exports.processWhere = processWhere;
exports.default = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _lodash = require("lodash");
var _toolbarlayout = _interopRequireDefault(require("./toolbarlayout"));
var _pagination = _interopRequireDefault(require("./pagination"));
var _sort = _interopRequireDefault(require("./sort"));
var _index = _interopRequireDefault(require("./filter/index"));
var _actions = _interopRequireDefault(require("./actions"));
var _isObject = _interopRequireDefault(require("lodash/isObject"));
var Toolbar =
/*#__PURE__*/
function (_React$PureComponent) {
(0, _inherits2.default)(Toolbar, _React$PureComponent);
function Toolbar(props) {
var _this;
(0, _classCallCheck2.default)(this, Toolbar);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Toolbar).call(this, props));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "async", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changeOrder", function (_ref) {
var orderField = _ref.orderField,
orderType = _ref.orderType;
var _this$props = _this.props,
updateQuery = _this$props.updateQuery,
refId = _this$props.refId,
args = _this$props.args;
if (_this.async) {
if (orderField) {
updateQuery(refId.getPathArr(), {
first: 10,
orderBy: "".concat(orderField, "_").concat(orderType),
where: args.where
});
} else {
updateQuery(refId.getPathArr(), {
first: 10,
where: args.where
});
}
} else {
if (orderField) {
_this.setState({
sort: {
orderField: orderField,
orderType: orderType
}
});
} else {
_this.setState({
sort: {}
});
}
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changeFilter", function (where) {
var _this$props2 = _this.props,
updateQuery = _this$props2.updateQuery,
refId = _this$props2.refId,
args = _this$props2.args,
toolbar = _this$props2.toolbar;
var permanentFilter = {};
if (toolbar && toolbar.filter && toolbar.filter.permanentFilter) {
permanentFilter = toolbar.filter.permanentFilter || {};
}
if (_this.async) {
updateQuery(refId.getPathArr(), {
first: 10,
orderBy: args.orderBy,
// $FlowFixMe
where: (0, _objectSpread2.default)({}, processWhere(where), permanentFilter)
});
} else {
_this.setState({
// $FlowFixMe
filter: (0, _objectSpread2.default)({}, where)
});
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changePage", function (page) {
_this.setState({
current: page
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "nextPage", function () {
var _this$props3 = _this.props,
updateQuery = _this$props3.updateQuery,
args = _this$props3.args,
refId = _this$props3.refId,
keyName = _this$props3.keyName;
var _this$state = _this.state,
originRootValue = _this$state.originRootValue,
pagination = _this$state.pagination;
if ((0, _lodash.get)(originRootValue, [keyName, 'pageInfo', 'hasNextPage'])) {
var endCursor = (0, _lodash.get)(originRootValue, [keyName, 'pageInfo', 'endCursor'], null);
var after = endCursor || originRootValue[keyName].edges.slice(-1)[0].cursor; // the last one
updateQuery(refId.getPathArr(), (0, _objectSpread2.default)({}, args, {
first: pagination.first || 10,
after: after,
last: undefined,
before: undefined
}));
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "prevPage", function () {
var _this$props4 = _this.props,
updateQuery = _this$props4.updateQuery,
args = _this$props4.args,
refId = _this$props4.refId,
keyName = _this$props4.keyName;
var _this$state2 = _this.state,
originRootValue = _this$state2.originRootValue,
pagination = _this$state2.pagination;
if ((0, _lodash.get)(originRootValue, [keyName, 'pageInfo', 'hasPreviousPage'])) {
var startCursor = (0, _lodash.get)(originRootValue, [keyName, 'pageInfo', 'startCursor'], null);
var before = startCursor || (0, _lodash.get)(originRootValue, [keyName, 'edges', 0, 'cursor']); // the first one
updateQuery(refId.getPathArr(), (0, _objectSpread2.default)({}, args, {
last: pagination.last || 10,
before: before,
after: undefined,
first: undefined
}));
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changeSize", function (size) {
var _this$props5 = _this.props,
updateQuery = _this$props5.updateQuery,
args = _this$props5.args,
refId = _this$props5.refId;
var pagination = parsePagination(args);
if (pagination.last) {
updateQuery(refId.getPathArr(), (0, _objectSpread2.default)({}, args, {
last: size
}));
} else {
updateQuery(refId.getPathArr(), (0, _objectSpread2.default)({}, args, {
first: size
}));
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "addFilter", function (index) {
_this.setState({
displayedFilterIndexs: _this.state.displayedFilterIndexs.concat(index)
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "deleteFilter", function (index) {
_this.setState({
displayedFilterIndexs: _this.state.displayedFilterIndexs.filter(function (i) {
return i !== index;
})
});
});
var _args = props.args,
_originRootValue = props.originRootValue;
_this.async = props.toolbar && props.toolbar.async; // $FlowFixMe
var _permanentFilter = props.toolbar && props.toolbar.filter && props.toolbar.filter.permanentFilter || {};
_this.state = {
originRootValue: _originRootValue,
sort: parseOrder(_args.orderBy),
filter: (0, _objectSpread2.default)({}, parseWhere(_args.where || {}), parseWhere(_permanentFilter)),
pagination: parsePagination(_args),
current: 1,
displayedFilterIndexs: []
};
return _this;
}
(0, _createClass2.default)(Toolbar, [{
key: "render",
value: function render() {
var _this$props6 = this.props,
children = _this$props6.children,
_this$props6$toolbar = _this$props6.toolbar,
toolbar = _this$props6$toolbar === void 0 ? {} : _this$props6$toolbar,
args = _this$props6.args,
refId = _this$props6.refId,
items = _this$props6.items,
defaultValue = _this$props6.defaultValue,
parseConnectionToNormal = _this$props6.parseConnectionToNormal,
getValue = _this$props6.getValue,
query = _this$props6.query,
keyName = _this$props6.keyName,
request = _this$props6.request,
deploy = _this$props6.deploy;
var _this$state3 = this.state,
originRootValue = _this$state3.originRootValue,
current = _this$state3.current,
displayedFilterIndexs = _this$state3.displayedFilterIndexs;
var sorter = toolbar.sorter,
pagination = toolbar.pagination,
filter = toolbar.filter,
toolbarLayout = toolbar.toolbarLayout,
actions = toolbar.actions;
var ToolbarLayout = toolbarLayout && toolbarLayout.component ? toolbarLayout.component : _toolbarlayout.default;
var SortComponent = sorter && sorter.component ? sorter.component : _sort.default;
var FilterComponent = filter && filter.component ? filter.component : _index.default;
var PaginationComponent = pagination && pagination.component ? pagination.component : _pagination.default;
var ActionsComponent = actions && actions.component ? actions.component : _actions.default;
var _parseOrder = parseOrder(args.orderBy),
orderField = _parseOrder.orderField,
orderType = _parseOrder.orderType;
var where = parseWhere(args.where || {});
var _parsePagination = parsePagination(args),
first = _parsePagination.first,
last = _parsePagination.last;
var total = 0;
var rootValue = parseConnectionToNormal(originRootValue);
var value = getValue(originRootValue, refId.getPathArr());
return React.createElement(ToolbarLayout, {
Actions: actions && toolbar.async ? React.createElement(ActionsComponent, (0, _extends2.default)({}, actions, {
async: toolbar.async,
filters: filter && filter.filters || [],
displayedFilters: displayedFilterIndexs,
addFilter: this.addFilter,
query: query,
keyName: keyName,
value: rootValue[keyName],
items: items.items,
request: request,
deploy: deploy
})) : React.createElement("div", null),
Sort: sorter && toolbar.async ? React.createElement(SortComponent, (0, _extends2.default)({}, sorter, {
async: toolbar.async,
defaultField: sorter.defaultField,
options: sorter.options || [],
changeOrder: this.changeOrder,
orderField: orderField,
orderType: orderType,
items: items
})) : null,
Pagination: pagination && toolbar.async ? React.createElement(PaginationComponent, (0, _extends2.default)({}, pagination, {
async: toolbar.async,
hasNextPage: (0, _lodash.get)(value, ['pageInfo', 'hasNextPage']),
hasPreviousPage: (0, _lodash.get)(value, ['pageInfo', 'hasPreviousPage']),
nextPage: this.nextPage,
prevPage: this.prevPage,
changeSize: this.changeSize,
size: first || last,
current: current,
changePage: this.changePage,
total: total
})) : null,
Filter: filter && toolbar.async ? React.createElement(FilterComponent, (0, _extends2.default)({
async: toolbar.async
}, filter, {
displayedFilters: displayedFilterIndexs,
items: items,
where: where,
changeFilter: this.changeFilter,
deleteFilter: this.deleteFilter
})) : null
}, React.cloneElement(children, {
rootValue: rootValue,
value: value ? (0, _lodash.get)(value, 'edges', []).map(function (item) {
return item.node;
}) : defaultValue('array'),
showPagination: toolbar && !toolbar.async
}));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps) {
var originRootValue = nextProps.originRootValue,
args = nextProps.args,
toolbar = nextProps.toolbar;
if (toolbar && !toolbar.async) {
return {
originRootValue: originRootValue
};
} // $FlowFixMe
var permanentFilter = toolbar.filter && toolbar.filter.permanentFilter || {};
return {
originRootValue: originRootValue,
sort: parseOrder(args.orderBy),
filter: (0, _objectSpread2.default)({}, parseWhere(args.where || {}), parseWhere(permanentFilter)),
pagination: parsePagination(args)
};
}
}]);
return Toolbar;
}(React.PureComponent);
exports.default = Toolbar;
function parseOrder(orderBy) {
if (typeof orderBy === 'string') {
var _orderBy$split = orderBy.split('_'),
_orderBy$split2 = (0, _slicedToArray2.default)(_orderBy$split, 2),
orderField = _orderBy$split2[0],
orderType = _orderBy$split2[1];
if (orderType !== 'ASC' && orderType !== 'DESC') {
return {
orderField: orderField,
orderType: 'ASC'
};
}
return {
orderField: orderField,
orderType: orderType
};
}
return {
orderField: null,
orderType: 'ASC'
};
}
function parsePagination() {
var args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return {
first: args.first,
after: args.after,
last: args.last,
before: args.before
};
}
function parseWhere(where) {
return Object.keys(where).reduce(function (result, key) {
var v = where[key];
var type = (0, _typeof2.default)(v);
var _key$split = key.split('_'),
_key$split2 = (0, _slicedToArray2.default)(_key$split, 2),
field = _key$split2[0],
op = _key$split2[1];
if (type === 'string') {
result[field] = (0, _defineProperty2.default)({}, op || 'eq', v);
}
if (type === 'boolean') {
result[field] = (0, _defineProperty2.default)({}, op || 'eq', v);
}
if (type === 'number') {
result[field] = (0, _defineProperty2.default)({}, op || 'eq', v);
}
if (type === 'object') {
result[field] = parseWhere(v);
}
return result;
}, {});
}
function processWhere(where) {
return Object.keys(where).reduce(function (result, key) {
var v = where[key];
if (isEnd(v)) {
var _parseOpAndValue = parseOpAndValue(v),
op = _parseOpAndValue.op,
value = _parseOpAndValue.value;
result["".concat(key, "_").concat(op)] = value;
} else {
result[key] = processWhere(v);
}
return result;
}, {});
}
function isEnd(v) {
if (!(0, _isObject.default)(v)) {
return false;
}
var keys = Object.keys(v);
var value = v[keys[0]];
return keys.length === 1 && ['lt', 'lte', 'gt', 'gte', 'eq', 'contains'].indexOf(keys[0]) !== -1 && (typeof value === 'string' || typeof value === 'boolean' || typeof value === 'number');
}
function parseOpAndValue(v) {
var op = Object.keys(v)[0];
var value = v[op];
return {
op: op,
value: value
};
}