icode-hooks 0.3.0

package/es/useRequest/routes-doc/use-request/demos/basic/lifeCycle.js

@@ -0,0 +1,55 @@
+import { __read } from "tslib";
+import { message } from 'antd';
+import React, { useState } from 'react';
+import useRequest from '../../../../index';
+function editUsername(username) {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      if (Math.random() > 0.5) {
+        resolve();
+      } else {
+        reject(new Error('Failed to modify username'));
+      }
+    }, 1000);
+  });
+}
+export default (function () {
+  var _a = __read(useState(''), 2),
+    state = _a[0],
+    setState = _a[1];
+  var _b = useRequest(editUsername, {
+      manual: true,
+      onBefore: function (params) {
+        message.info("Start Request: ".concat(params[0]));
+      },
+      onSuccess: function (result, params) {
+        setState('');
+        message.success("The username was changed to \"".concat(params[0], "\" !"));
+      },
+      onError: function (error) {
+        message.error(error.message);
+      },
+      onFinally: function (params, result, error) {
+        message.info("Request finish");
+      }
+    }),
+    loading = _b.loading,
+    run = _b.run;
+  return React.createElement("div", null, React.createElement("input", {
+    onChange: function (e) {
+      return setState(e.target.value);
+    },
+    value: state,
+    placeholder: "Please enter username",
+    style: {
+      width: 240,
+      marginRight: 16
+    }
+  }), React.createElement("button", {
+    disabled: loading,
+    type: "button",
+    onClick: function () {
+      return run(state);
+    }
+  }, loading ? 'Loading' : 'Edit'));
+});

package/es/useRequest/routes-doc/use-request/demos/basic/manualRun.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 修改用户名
+ * desc: 在这个例子中，我们通过 `run(username)` 来修改用户名，通过 `onSuccess` 和 `onError` 来处理成功和失败。
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/basic/manualRun.js

@@ -0,0 +1,53 @@
+/**
+ * title: 修改用户名
+ * desc: 在这个例子中，我们通过 `run(username)` 来修改用户名，通过 `onSuccess` 和 `onError` 来处理成功和失败。
+ */
+import { __read } from "tslib";
+import { message } from 'antd';
+import React, { useState } from 'react';
+import useRequest from '../../../../index';
+function editUsername(username) {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      if (Math.random() > 0.5) {
+        resolve();
+      } else {
+        reject(new Error('Failed to modify username'));
+      }
+    }, 1000);
+  });
+}
+export default (function () {
+  var _a = __read(useState(''), 2),
+    state = _a[0],
+    setState = _a[1];
+  var _b = useRequest(editUsername, {
+      manual: true,
+      onSuccess: function (result, params) {
+        setState('');
+        message.success("The username was changed to \"".concat(params[0], "\" !"));
+      },
+      onError: function (error) {
+        message.error(error.message);
+      }
+    }),
+    loading = _b.loading,
+    run = _b.run;
+  return React.createElement("div", null, React.createElement("input", {
+    onChange: function (e) {
+      return setState(e.target.value);
+    },
+    value: state,
+    placeholder: "Please enter username",
+    style: {
+      width: 240,
+      marginRight: 16
+    }
+  }), React.createElement("button", {
+    disabled: loading,
+    type: "button",
+    onClick: function () {
+      return run(state);
+    }
+  }, loading ? 'Loading' : 'Edit'));
+});

package/es/useRequest/routes-doc/use-request/demos/basic/manualRunAsync.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 修改用户名
+ * desc: 在这个例子中，我们通过 `runAsync(username)` 来修改用户名，此时必须通过 catch 来自行处理异常。
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/basic/manualRunAsync.js

@@ -0,0 +1,67 @@
+/**
+ * title: 修改用户名
+ * desc: 在这个例子中，我们通过 `runAsync(username)` 来修改用户名，此时必须通过 catch 来自行处理异常。
+ */
+import { __awaiter, __generator, __read } from "tslib";
+import { message } from 'antd';
+import React, { useState } from 'react';
+import useRequest from '../../../../index';
+function editUsername(username) {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      if (Math.random() > 0.5) {
+        resolve();
+      } else {
+        reject(new Error('Failed to modify username'));
+      }
+    }, 1000);
+  });
+}
+export default (function () {
+  var _a = __read(useState(''), 2),
+    state = _a[0],
+    setState = _a[1];
+  var _b = useRequest(editUsername, {
+      manual: true
+    }),
+    loading = _b.loading,
+    runAsync = _b.runAsync;
+  var onClick = function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var error_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            return [4 /*yield*/, runAsync(state)];
+          case 1:
+            _a.sent();
+            setState('');
+            message.success("The username was changed to \"".concat(state, "\" !"));
+            return [3 /*break*/, 3];
+          case 2:
+            error_1 = _a.sent();
+            message.error(error_1.message);
+            return [3 /*break*/, 3];
+          case 3:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  return React.createElement("div", null, React.createElement("input", {
+    onChange: function (e) {
+      return setState(e.target.value);
+    },
+    value: state,
+    placeholder: "Please enter username",
+    style: {
+      width: 240,
+      marginRight: 16
+    }
+  }), React.createElement("button", {
+    disabled: loading,
+    type: "button",
+    onClick: onClick
+  }, loading ? 'Loading' : 'Edit'));
+});

package/es/useRequest/routes-doc/use-request/demos/basic/mutate.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 修改用户名
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/basic/mutate.js

@@ -0,0 +1,68 @@
+/**
+ * title: 修改用户名
+ */
+import { __read } from "tslib";
+import { message } from 'antd';
+import React, { useState, useRef } from 'react';
+import useRequest from '../../../../index';
+import Mock from 'mockjs';
+function getUsername() {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      resolve(Mock.mock('@name'));
+    }, 1000);
+  });
+}
+function editUsername(username) {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      if (Math.random() > 0.5) {
+        resolve();
+      } else {
+        reject(new Error('Failed to modify username'));
+      }
+    }, 1000);
+  });
+}
+export default (function () {
+  // store last username
+  var lastRef = useRef();
+  var _a = __read(useState(''), 2),
+    state = _a[0],
+    setState = _a[1];
+  // get username
+  var _b = useRequest(getUsername),
+    username = _b.data,
+    mutate = _b.mutate;
+  // edit username
+  var edit = useRequest(editUsername, {
+    manual: true,
+    onSuccess: function (result, params) {
+      setState('');
+      message.success("The username was changed to \"".concat(params[0], "\" !"));
+    },
+    onError: function (error) {
+      message.error(error.message);
+      mutate(lastRef.current);
+    }
+  }).run;
+  var onChange = function () {
+    lastRef.current = username;
+    mutate(state);
+    edit(state);
+  };
+  return React.createElement("div", null, React.createElement("p", null, "Username: ", username), React.createElement("input", {
+    onChange: function (e) {
+      return setState(e.target.value);
+    },
+    value: state,
+    placeholder: "Please enter username",
+    style: {
+      width: 240,
+      marginRight: 16
+    }
+  }), React.createElement("button", {
+    type: "button",
+    onClick: onChange
+  }, "Edit"));
+});

package/es/useRequest/routes-doc/use-request/demos/basic/params.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/basic/params.js

@@ -0,0 +1,44 @@
+import { __read } from "tslib";
+import useRequest from '../../../../index';
+import Mock from 'mockjs';
+import React, { useState } from 'react';
+function getUsername(id) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      resolve(Mock.mock('@name'));
+    }, 1000);
+  });
+}
+export default (function () {
+  var _a = __read(useState(''), 2),
+    state = _a[0],
+    setState = _a[1];
+  // get username
+  var _b = useRequest(getUsername, {
+      defaultParams: ['1']
+    }),
+    username = _b.data,
+    run = _b.run,
+    params = _b.params;
+  var onChange = function () {
+    run(state);
+  };
+  return React.createElement("div", null, React.createElement("input", {
+    onChange: function (e) {
+      return setState(e.target.value);
+    },
+    value: state,
+    placeholder: "Please enter userId",
+    style: {
+      width: 240,
+      marginRight: 16
+    }
+  }), React.createElement("button", {
+    type: "button",
+    onClick: onChange
+  }, "GetUserName"), React.createElement("p", {
+    style: {
+      marginTop: 8
+    }
+  }, "UserId: ", params[0]), React.createElement("p", null, "Username: ", username));
+});

package/es/useRequest/routes-doc/use-request/demos/basic/refresh.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 刷新用户名称
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/basic/refresh.js

@@ -0,0 +1,35 @@
+/**
+ * title: 刷新用户名称
+ */
+import useRequest from '../../../../index';
+import Mock from 'mockjs';
+import React, { useEffect } from 'react';
+function getUsername(id) {
+  console.log('use-request-refresh-id', id);
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      resolve(Mock.mock('@name'));
+    }, 1000);
+  });
+}
+export default (function () {
+  var _a = useRequest(function (id) {
+      return getUsername(id);
+    }, {
+      manual: true
+    }),
+    data = _a.data,
+    loading = _a.loading,
+    run = _a.run,
+    refresh = _a.refresh;
+  useEffect(function () {
+    run(1);
+  }, []);
+  if (loading) {
+    return React.createElement("div", null, "loading...");
+  }
+  return React.createElement("div", null, React.createElement("p", null, "Username: ", data), React.createElement("button", {
+    onClick: refresh,
+    type: "button"
+  }, "Refresh"));
+});

package/es/useRequest/routes-doc/use-request/demos/cache/cacheKey.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/cache/cacheKey.js

@@ -0,0 +1,41 @@
+import { __awaiter, __generator } from "tslib";
+import useBoolean from '../../../../../useBoolean';
+import Mock from 'mockjs';
+import React from 'react';
+import useRequest from '../../../../index';
+function getArticle() {
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      return [2 /*return*/, new Promise(function (resolve) {
+        setTimeout(function () {
+          resolve({
+            data: Mock.mock('@paragraph'),
+            time: new Date().getTime()
+          });
+        }, 1000);
+      })];
+    });
+  });
+}
+var Article = function () {
+  var _a = useRequest(getArticle, {
+      cacheKey: 'cacheKey-demo'
+    }),
+    data = _a.data,
+    loading = _a.loading;
+  if (!data && loading) {
+    return React.createElement("p", null, "Loading");
+  }
+  return React.createElement(React.Fragment, null, React.createElement("p", null, "Background loading: ", loading ? 'true' : 'false'), React.createElement("p", null, "Latest request time: ", data === null || data === void 0 ? void 0 : data.time), React.createElement("p", null, data === null || data === void 0 ? void 0 : data.data));
+};
+export default (function () {
+  var _a = useBoolean(),
+    state = _a.state,
+    toggle = _a.toggle;
+  return React.createElement("div", null, React.createElement("button", {
+    type: "button",
+    onClick: function () {
+      return toggle();
+    }
+  }, "show/hidden"), state && React.createElement(Article, null));
+});

package/es/useRequest/routes-doc/use-request/demos/cache/clearCache.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/cache/clearCache.js

@@ -0,0 +1,80 @@
+import { __awaiter, __generator } from "tslib";
+import Mock from 'mockjs';
+import React from 'react';
+import useRequest from '../../../../index';
+import { clearCache } from '../../../../src/utils/cache';
+import useBoolean from '../../../../../useBoolean';
+import { message } from 'antd';
+function getArticle() {
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      return [2 /*return*/, new Promise(function (resolve) {
+        setTimeout(function () {
+          resolve({
+            data: Mock.mock('@paragraph'),
+            time: new Date().getTime()
+          });
+        }, 3000);
+      })];
+    });
+  });
+}
+var Article = function (_a) {
+  var cacheKey = _a.cacheKey;
+  var _b = useRequest(getArticle, {
+      cacheKey: cacheKey
+    }),
+    data = _b.data,
+    loading = _b.loading;
+  if (!data && loading) {
+    return React.createElement("p", null, "Loading");
+  }
+  return React.createElement(React.Fragment, null, React.createElement("p", null, "Background loading: ", loading ? 'true' : 'false'), React.createElement("p", null, "Latest request time: ", data === null || data === void 0 ? void 0 : data.time), React.createElement("p", null, data === null || data === void 0 ? void 0 : data.data));
+};
+var clear = function (cacheKey) {
+  clearCache(cacheKey);
+  var tips = Array.isArray(cacheKey) ? cacheKey.join('、') : cacheKey;
+  message.success("Clear ".concat(tips !== null && tips !== void 0 ? tips : 'All', " finished"));
+};
+export default (function () {
+  var _a = useBoolean(),
+    state = _a.state,
+    toggle = _a.toggle;
+  return React.createElement("div", null, React.createElement("p", null, React.createElement("button", {
+    type: "button",
+    onClick: function () {
+      return toggle();
+    }
+  }, "show/hidden")), React.createElement("p", null, React.createElement("button", {
+    style: {
+      marginRight: 8
+    },
+    onClick: function () {
+      return clear('Article1');
+    }
+  }, "Clear Article1"), React.createElement("button", {
+    style: {
+      marginRight: 8
+    },
+    onClick: function () {
+      return clear('Article2');
+    }
+  }, "Clear Article2"), React.createElement("button", {
+    style: {
+      marginRight: 8
+    },
+    onClick: function () {
+      return clear(['Article2', 'Article3']);
+    }
+  }, "Clear Article2 and Article3"), React.createElement("button", {
+    onClick: function () {
+      return clear();
+    }
+  }, "Clear All")), React.createElement("h2", null, "Article 1"), state && React.createElement(Article, {
+    cacheKey: "Article1"
+  }), React.createElement("h2", null, "Article 2"), state && React.createElement(Article, {
+    cacheKey: "Article2"
+  }), React.createElement("h2", null, "Article 3"), state && React.createElement(Article, {
+    cacheKey: "Article3"
+  }));
+});

package/es/useRequest/routes-doc/use-request/demos/cache/params.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/cache/params.js

@@ -0,0 +1,65 @@
+import { __awaiter, __generator, __read } from "tslib";
+import useBoolean from '../../../../../useBoolean';
+import useRequest from '../../../../index';
+import Mock from 'mockjs';
+import React, { useState } from 'react';
+function getArticle(keyword) {
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      console.log('cacheKey', keyword);
+      return [2 /*return*/, new Promise(function (resolve) {
+        setTimeout(function () {
+          resolve({
+            data: Mock.mock('@paragraph'),
+            time: new Date().getTime()
+          });
+        }, 1000);
+      })];
+    });
+  });
+}
+var Article = function () {
+  var _a = useRequest(getArticle, {
+      cacheKey: 'cacheKey-demo'
+    }),
+    data = _a.data,
+    params = _a.params,
+    loading = _a.loading,
+    run = _a.run;
+  var _b = __read(useState(params[0] || ''), 2),
+    keyword = _b[0],
+    setKeyword = _b[1];
+  if (!data && loading) {
+    return React.createElement("p", null, "Loading");
+  }
+  return React.createElement(React.Fragment, null, React.createElement("div", null, React.createElement("input", {
+    style: {
+      width: 300
+    },
+    value: keyword,
+    onChange: function (e) {
+      return setKeyword(e.target.value);
+    }
+  }), React.createElement("button", {
+    style: {
+      marginLeft: 8
+    },
+    onClick: function () {
+      run(keyword);
+    }
+  }, "Get")), React.createElement("p", null, "Background loading: ", loading ? 'true' : 'false'), React.createElement("p", null, "Latest request time: ", data === null || data === void 0 ? void 0 : data.time), React.createElement("p", null, "Keyword: ", keyword), React.createElement("p", null, data === null || data === void 0 ? void 0 : data.data));
+};
+export default (function () {
+  var _a = useBoolean(),
+    state = _a.state,
+    toggle = _a.toggle;
+  return React.createElement("div", null, React.createElement("button", {
+    type: "button",
+    onClick: function () {
+      return toggle();
+    },
+    style: {
+      marginBottom: 16
+    }
+  }, "show/hidden"), state && React.createElement(Article, null));
+});

package/es/useRequest/routes-doc/use-request/demos/cache/setCache.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/cache/setCache.js

@@ -0,0 +1,48 @@
+import { __awaiter, __generator } from "tslib";
+import useBoolean from '../../../../../useBoolean';
+import Mock from 'mockjs';
+import React from 'react';
+import useRequest from '../../../../index';
+function getArticle() {
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      return [2 /*return*/, new Promise(function (resolve) {
+        setTimeout(function () {
+          resolve({
+            data: Mock.mock('@paragraph'),
+            time: new Date().getTime()
+          });
+        }, 1000);
+      })];
+    });
+  });
+}
+var cacheKey = 'setCache-demo';
+var Article = function () {
+  var _a = useRequest(getArticle, {
+      cacheKey: cacheKey,
+      setCache: function (data) {
+        return localStorage.setItem(cacheKey, JSON.stringify(data));
+      },
+      getCache: function () {
+        return JSON.parse(localStorage.getItem(cacheKey) || '{}');
+      }
+    }),
+    data = _a.data,
+    loading = _a.loading;
+  if (!data && loading) {
+    return React.createElement("p", null, "Loading");
+  }
+  return React.createElement(React.Fragment, null, React.createElement("p", null, "Background loading: ", loading ? 'true' : 'false'), React.createElement("p", null, "Latest request time: ", data === null || data === void 0 ? void 0 : data.time), React.createElement("p", null, data === null || data === void 0 ? void 0 : data.data));
+};
+export default (function () {
+  var _a = useBoolean(),
+    state = _a.state,
+    toggle = _a.toggle;
+  return React.createElement("div", null, React.createElement("button", {
+    type: "button",
+    onClick: function () {
+      return toggle();
+    }
+  }, "show/hidden"), state && React.createElement(Article, null));
+});

package/es/useRequest/routes-doc/use-request/demos/cache/share.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/useRequest/routes-doc/use-request/demos/cache/share.js

@@ -0,0 +1,37 @@
+import { __awaiter, __generator } from "tslib";
+import Mock from 'mockjs';
+import React from 'react';
+import useRequest from '../../../../index';
+function getArticle() {
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      console.log('cacheKey-share');
+      return [2 /*return*/, new Promise(function (resolve) {
+        setTimeout(function () {
+          resolve({
+            data: Mock.mock('@paragraph'),
+            time: new Date().getTime()
+          });
+        }, 3000);
+      })];
+    });
+  });
+}
+var Article = function () {
+  var _a = useRequest(getArticle, {
+      cacheKey: 'cacheKey-share'
+    }),
+    data = _a.data,
+    loading = _a.loading,
+    refresh = _a.refresh;
+  if (!data && loading) {
+    return React.createElement("p", null, "Loading");
+  }
+  return React.createElement(React.Fragment, null, React.createElement("p", null, "Background loading: ", loading ? 'true' : 'false'), React.createElement("p", null, React.createElement("button", {
+    onClick: refresh,
+    type: "button"
+  }, "\u66F4\u65B0")), React.createElement("p", null, "Latest request time: ", data === null || data === void 0 ? void 0 : data.time), React.createElement("p", null, data === null || data === void 0 ? void 0 : data.data));
+};
+export default (function () {
+  return React.createElement("div", null, React.createElement("h2", null, "Article 1"), React.createElement(Article, null), React.createElement("h2", null, "Article 2"), React.createElement(Article, null));
+});

package/es/useRequest/routes-doc/use-request/demos/cache/staleTime.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;