axios-adapter-ui
Version:
adapter and mock components for react + axios
574 lines (463 loc) • 23.9 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AdapterDom = void 0;
var _react = _interopRequireDefault(require("react"));
var _antd = require("antd");
var _settingsPanel = require("./settingsPanel");
var _icons = require("@ant-design/icons");
var _adapterDataPanel = require("./adapterDataPanel");
var _theme = require("../theme");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var AdapterDom = /*#__PURE__*/function (_React$PureComponent) {
_inherits(AdapterDom, _React$PureComponent);
var _super = _createSuper(AdapterDom);
function AdapterDom(props) {
var _this;
_classCallCheck(this, AdapterDom);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "ignoreParamsSymbol", '__ignoreParamsSymbol__');
_defineProperty(_assertThisInitialized(_this), "dragging", false);
_defineProperty(_assertThisInitialized(_this), "isMove", false);
_defineProperty(_assertThisInitialized(_this), "interval", null);
_defineProperty(_assertThisInitialized(_this), "mousemoveEvent", function (e) {
e.stopPropagation();
if (!_this.dragging) return;
var _this$state = _this.state,
x = _this$state.x,
y = _this$state.y;
var cmpX = x - e.movementX;
var cmpY = y - e.movementY;
_this.isMove = true;
_this.setState({
x: cmpX,
y: cmpY
});
});
_defineProperty(_assertThisInitialized(_this), "handleMousedown", function () {
_this.dragging = true;
_this.isMove = false;
});
_defineProperty(_assertThisInitialized(_this), "handleMouseUp", function () {
_this.dragging = false;
if (!_this.isMove) _this.changeModalVisible();
});
_defineProperty(_assertThisInitialized(_this), "extractAdapterData", function () {
var _targetUrlScope$param;
var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var jsonData = arguments.length > 2 ? arguments[2] : undefined;
var _this$state2 = _this.state,
adapterData = _this$state2.adapterData,
settings = _this$state2.settings;
var site = location.href;
var namespace = adapterData[site];
if (!namespace || !Array.isArray(namespace)) return null;
var targetUrlScope = namespace.find(function (item) {
return item.url === url && item.method === method;
});
if (!targetUrlScope) return null;
var targetParamsScope;
if (settings.ignoreParams && (targetUrlScope === null || targetUrlScope === void 0 ? void 0 : (_targetUrlScope$param = targetUrlScope.params) === null || _targetUrlScope$param === void 0 ? void 0 : _targetUrlScope$param.length) > 0) targetParamsScope = targetUrlScope.params[0];else targetParamsScope = targetUrlScope.params.find(function (item) {
return item.data === jsonData;
});
if (targetParamsScope) return targetParamsScope.response;else return null;
});
_defineProperty(_assertThisInitialized(_this), "responseHandler", function (response) {
if (!response) return;
if (_this.state.settings["switch"] || _this.state.settings.saveSwitch) {
var _this$state$settings = _this.state.settings,
bannedUrl = _this$state$settings.bannedUrl,
bannedSite = _this$state$settings.bannedSite;
var site = location.href;
var url = response.config.url;
var urlIsBanned = bannedUrl && bannedUrl[url];
var siteIsBanned = bannedSite && bannedSite[site];
if (!urlIsBanned && !siteIsBanned && _this.isUrlMatchRegExp(url) && _this.isSiteMatchRegExp(site)) {
var method = response.config.method;
var jsonData = response.config.data;
var status = response.status;
_this.updateAdapterData(url, method, jsonData, response, status);
}
}
});
_defineProperty(_assertThisInitialized(_this), "updateAdapterData", function (url, method, requestData, responseData, status) {
var _this$state3 = _this.state,
adapterData = _this$state3.adapterData,
settings = _this$state3.settings;
var onUpdateAdapterData = _this.props.onUpdateAdapterData;
var site = location.href;
var namespace = adapterData[site];
if (!namespace || !Array.isArray(namespace)) namespace = [];
var targetUrlScopeIndex = namespace.findIndex(function (item) {
return item.url === url && item.method === method;
});
if (targetUrlScopeIndex === -1) {
namespace.push({
method: method,
url: url,
params: [],
header: '',
lastCallTime: Number(new Date())
});
targetUrlScopeIndex = namespace.length - 1;
} else if (!namespace[targetUrlScopeIndex].params) {
namespace[targetUrlScopeIndex].params = [];
}
namespace[targetUrlScopeIndex].lastCallTime = Number(new Date());
var searchParams = settings.ignoreParams ? _this.ignoreParamsSymbol : requestData;
var paramsTargetIndex = namespace[targetUrlScopeIndex].params.findIndex(function (item) {
return item.data === searchParams;
});
if (paramsTargetIndex === -1) {
namespace[targetUrlScopeIndex].params.push({
data: requestData,
response: responseData,
status: status,
key: String(Number(new Date()))
});
} else {
namespace[targetUrlScopeIndex].params[paramsTargetIndex] = {
data: requestData,
response: responseData,
status: status,
key: String(Number(new Date()))
};
}
adapterData[site] = _toConsumableArray(namespace);
_this.setState({
adapterData: JSON.parse(JSON.stringify(_objectSpread({}, adapterData)))
});
onUpdateAdapterData(adapterData);
});
_defineProperty(_assertThisInitialized(_this), "handleUpdateSettingsFields", function (field, value, shouldSave) {
var onUpdateSettings = _this.props.onUpdateSettings;
var settings = _this.state.settings;
var newSettings = _objectSpread({}, settings);
newSettings[field] = value;
_this.setState({
settings: _objectSpread({}, newSettings),
settingsHasChanged: true
});
if (shouldSave) _this.saveToSource();
onUpdateSettings(newSettings);
});
_defineProperty(_assertThisInitialized(_this), "handleUpdateAdapterData", function (value) {
var onUpdateAdapterData = _this.props.onUpdateAdapterData;
var newVal = _objectSpread({}, value);
_this.setState({
adapterData: newVal
});
onUpdateAdapterData(newVal);
});
_defineProperty(_assertThisInitialized(_this), "saveToSource", function () {
var options = _this.props.options;
if (options.dataSource && options.remoteApi) {// TODO: to implement
} else {
var json = JSON.stringify({
settings: _this.state.settings,
adapterData: _this.state.adapterData
});
var bufferLength = Buffer.byteLength(json, 'utf8');
if (bufferLength > 3500000) {
_this.pruneData();
_antd.message.warn('LocalStorage使用量已接近4MB，已自动清理最近未使用的缓存');
var _json = JSON.stringify({
settings: _this.state.settings,
adapterData: _this.state.adapterData
});
localStorage.setItem(options.localStorageKey, _json);
return;
}
localStorage.setItem(options.localStorageKey, json);
}
_this.setState({
settingsHasChanged: false
});
});
_defineProperty(_assertThisInitialized(_this), "pruneData", function () {
var pruneMap = [];
var adapterData = _this.state.adapterData;
var _loop = function _loop(siteUrl) {
adapterData[siteUrl].forEach(function (item) {
return pruneMap.push({
api: item.url,
siteUrl: siteUrl,
lastCallTime: item.lastCallTime
});
});
};
for (var siteUrl in adapterData) {
_loop(siteUrl);
}
pruneMap = pruneMap.sort(function (a, b) {
return a.lastCallTime - b.lastCallTime;
});
var _iterator = _createForOfIteratorHelper(pruneMap),
_step;
try {
var _loop2 = function _loop2() {
var item = _step.value;
adapterData[item.siteUrl] = adapterData[item.siteUrl].filter(function (urlItem) {
return urlItem.url !== item.api;
});
var targetIndex = adapterData[item.siteUrl].findIndex(function (urlItem) {
return urlItem.url === item.api;
});
if (targetIndex !== -1) adapterData[item.siteUrl].splice(targetIndex, 1);
var json = JSON.stringify(adapterData);
if (Buffer.byteLength(json, 'utf8') < 3000000) return "break";
};
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var _ret = _loop2();
if (_ret === "break") break;
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
_this.setState({
adapterData: _objectSpread({}, adapterData)
});
});
_defineProperty(_assertThisInitialized(_this), "changeModalVisible", function () {
_this.setState({
modalVisible: !_this.state.modalVisible
});
});
var service = props.service,
_settings = props.settings,
_adapterData = props.adapterData;
_this.useRequestAdapter(service);
_this.useResponseAdapter(service);
_this.state = {
modalVisible: false,
x: 50,
y: 50,
settings: JSON.parse(JSON.stringify(_settings)),
adapterData: JSON.parse(JSON.stringify(_adapterData)),
settingsHasChanged: false
};
return _this;
}
_createClass(AdapterDom, [{
key: "componentDidMount",
value: function componentDidMount() {
var options = this.props.options;
document.addEventListener('mousemove', this.mousemoveEvent);
if (options.intervalTime) this.interval = setInterval(this.saveToSource, options.intervalTime);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.removeEventListener('mousemove', this.mousemoveEvent);
if (this.interval) clearInterval(this.interval);
}
/** mouse event handler */
}, {
key: "useRequestAdapter",
value:
/** request adapter main methods */
function useRequestAdapter(service) {
var _this2 = this;
service.interceptors.request.use(function (cfg) {
if (_this2.state.settings["switch"]) {
var _this2$state$settings = _this2.state.settings,
bannedUrl = _this2$state$settings.bannedUrl,
bannedSite = _this2$state$settings.bannedSite;
var site = location.href;
var url = _this2.isAbsoluteURL(cfg.url) ? cfg.url : _this2.combineURLs(cfg.baseURL || '', cfg.url);
if (!url) return _objectSpread({}, cfg);
if (!_this2.isUrlMatchRegExp(url) || !_this2.isSiteMatchRegExp(site)) return _objectSpread({}, cfg);
if (bannedUrl && bannedUrl[url]) return _objectSpread({}, cfg);
if (bannedSite && bannedSite[site]) return _objectSpread({}, cfg);
var method = cfg.method;
var data = cfg.data;
var jsonData = JSON.stringify(data);
var targetMock = _this2.extractAdapterData(url, method, jsonData);
if (!targetMock) return _objectSpread({}, cfg);
return _objectSpread(_objectSpread({}, cfg), {}, {
adapter: function adapter(config) {
return new Promise(function (resolve, reject) {
resolve(targetMock);
});
}
});
}
return _objectSpread({}, cfg);
});
}
}, {
key: "isAbsoluteURL",
value: function isAbsoluteURL(url) {
return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);
}
}, {
key: "combineURLs",
value: function combineURLs(baseURL, relativeURL) {
return relativeURL ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '') : baseURL;
}
}, {
key: "useResponseAdapter",
value:
/** response adapter main methods */
function useResponseAdapter(service) {
var _this3 = this;
service.interceptors.response.use(function (response) {
_this3.responseHandler(response);
return _objectSpread({}, response);
}, function (err) {
var response = err.response;
_this3.responseHandler(response);
return Promise.reject(err);
});
}
}, {
key: "isSiteMatchRegExp",
value:
/** request/response adapter utils */
function isSiteMatchRegExp(siteUrl) {
var settings = this.state.settings;
var includeSiteRegexp = settings.includeSiteRegexp,
excludeSiteRegexp = settings.excludeSiteRegexp;
if (excludeSiteRegexp) {
var regExp = new RegExp(excludeSiteRegexp);
if (regExp.test(siteUrl)) return false;
}
if (includeSiteRegexp) {
var _regExp = new RegExp(includeSiteRegexp);
return _regExp.test(siteUrl);
}
return true;
}
}, {
key: "isUrlMatchRegExp",
value: function isUrlMatchRegExp(url) {
var settings = this.state.settings;
var includeRegexp = settings.includeRegexp,
excludeRegexp = settings.excludeRegexp;
if (excludeRegexp) {
var regExp = new RegExp(excludeRegexp);
if (regExp.test(url)) return false;
}
if (includeRegexp) {
var _regExp2 = new RegExp(includeRegexp);
return _regExp2.test(url);
}
return true;
}
/** adapterData or settings update handler */
}, {
key: "render",
value: function render() {
var _this4 = this;
var _this$state4 = this.state,
modalVisible = _this$state4.modalVisible,
x = _this$state4.x,
y = _this$state4.y;
var _this$state5 = this.state,
settings = _this$state5.settings,
adapterData = _this$state5.adapterData,
settingsHasChanged = _this$state5.settingsHasChanged;
if (settings.forceHideEntry) return /*#__PURE__*/_react["default"].createElement("div", null);
var iconColor = settings["switch"] ? _theme.theme.color6 : settings.saveSwitch ? _theme.theme.special : _theme.theme.disabled;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
style: {
boxShadow: "0px 0px 3px 2px ".concat(iconColor),
backgroundColor: iconColor,
color: _theme.theme.color1,
cursor: 'pointer',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'fixed',
right: "".concat(x, "px"),
bottom: "".concat(y, "px"),
height: '50px',
width: '50px',
borderRadius: '50%',
fontSize: '28px',
zIndex: 99999
},
onMouseDown: function onMouseDown(e) {
e.stopPropagation();
_this4.handleMousedown();
},
onMouseUp: function onMouseUp(e) {
e.stopPropagation();
_this4.handleMouseUp();
}
}, /*#__PURE__*/_react["default"].createElement(_icons.GlobalOutlined, null)), /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
visible: modalVisible,
onCancel: this.changeModalVisible,
footer: null,
width: 1200
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
margin: '16px',
color: '#fff'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
cursor: 'pointer',
padding: '0 16px',
borderRadius: '16px',
background: settingsHasChanged ? _theme.theme.special : _theme.theme.color6,
display: 'inline-block',
transition: '0.2s ease-in-out'
},
onClick: function onClick() {
_this4.saveToSource();
_antd.message.success('同步完成');
}
}, "\u7ACB\u5373\u4FDD\u5B58\u914D\u7F6E")), /*#__PURE__*/_react["default"].createElement(_antd.Tabs, {
defaultActiveKey: "settings",
tabPosition: 'left',
style: {
paddingRight: '32px'
}
}, /*#__PURE__*/_react["default"].createElement(_antd.Tabs.TabPane, {
tab: "Settings",
key: 'settings'
}, /*#__PURE__*/_react["default"].createElement(_settingsPanel.SettingsPanel, {
settings: settings,
onUpdateSettingsField: this.handleUpdateSettingsFields
})), /*#__PURE__*/_react["default"].createElement(_antd.Tabs.TabPane, {
tab: "Adapter Data",
key: 'adapterData'
}, /*#__PURE__*/_react["default"].createElement(_adapterDataPanel.AdapterDataPanel, {
adapterData: adapterData,
onUpdateAdapterData: function onUpdateAdapterData(value) {
_this4.handleUpdateAdapterData(value);
},
settings: settings,
onUpdateSettingsField: this.handleUpdateSettingsFields
})))));
}
}]);
return AdapterDom;
}(_react["default"].PureComponent);
exports.AdapterDom = AdapterDom;