@csshero/usehooks 0.1.0

package/dist/useMap/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 传递需要初始化的值然后进行操作
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/useMap/demo/demo1.js

@@ -0,0 +1,51 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 传递需要初始化的值然后进行操作
+ */
+
+import { useMap } from "../..";
+import React from 'react';
+export default (function () {
+  var _useMap = useMap([['msg', 'hello world'], ['info', 'hello react']]),
+    _useMap2 = _slicedToArray(_useMap, 2),
+    map = _useMap2[0],
+    _useMap2$ = _useMap2[1],
+    set = _useMap2$.set,
+    setAll = _useMap2$.setAll,
+    remove = _useMap2$.remove,
+    reset = _useMap2$.reset,
+    get = _useMap2$.get;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return set(String(Date.now()), new Date().toJSON());
+    }
+  }, "Add"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setAll([['text', 'this is a new Map']]);
+    },
+    style: {
+      margin: '0 8px'
+    }
+  }, "Set new Map"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return remove('msg');
+    },
+    disabled: !get('msg')
+  }, "Remove msg"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return reset();
+    },
+    style: {
+      margin: '0 8px'
+    }
+  }, "Reset"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 16
+    }
+  }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(Array.from(map), null, 2))));
+});

package/dist/useMap/index.d.ts

@@ -0,0 +1,9 @@
+interface Actions<K, V> {
+    set: (key: K, value: V) => void;
+    get: (key: K) => V | undefined;
+    remove: (key: K) => void;
+    reset: () => void;
+    setAll: (newMap: Iterable<readonly [K, V]>) => void;
+}
+declare const useMap: <K, V>(initValue?: Iterable<readonly [K, V]> | undefined) => [Map<K, V>, Actions<K, V>];
+export default useMap;

package/dist/useMap/index.js

@@ -0,0 +1,46 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState } from 'react';
+import useCreation from "../useCreation";
+var useMap = function useMap(initValue) {
+  var initMap = function initMap() {
+    return new Map(initValue);
+  };
+  var _useState = useState(initMap),
+    _useState2 = _slicedToArray(_useState, 2),
+    map = _useState2[0],
+    setMap = _useState2[1];
+  var actions = useCreation(function () {
+    var set = function set(key, value) {
+      setMap(function (prev) {
+        var temp = new Map(prev);
+        temp.set(key, value);
+        return temp;
+      });
+    };
+    var get = function get(key) {
+      return map.get(key);
+    };
+    var remove = function remove(key) {
+      setMap(function (prev) {
+        var temp = new Map(prev);
+        temp.delete(key);
+        return temp;
+      });
+    };
+    var reset = function reset() {
+      return setMap(initMap());
+    };
+    var setAll = function setAll(newMap) {
+      setMap(new Map(newMap));
+    };
+    return {
+      set: set,
+      get: get,
+      remove: remove,
+      reset: reset,
+      setAll: setAll
+    };
+  }, []);
+  return [map, actions];
+};
+export default useMap;

package/dist/useMemoizedFn/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: useMemoizedFn 与 useCallback 可以实现同样的效果。
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/useMemoizedFn/demo/demo1.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: useMemoizedFn 与 useCallback 可以实现同样的效果。
+ */
+
+import { useMemoizedFn } from "../..";
+import React, { useCallback, useState } from 'react';
+export default (function () {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  var _useState3 = useState('Current count is 0'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    info = _useState4[0],
+    setInfo = _useState4[1];
+  var callbackFn = useCallback(function () {
+    setInfo("Current count is ".concat(count));
+  }, [count]);
+  var memoizedFn = useMemoizedFn(function () {
+    setInfo("Current count is ".concat(count));
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "count: ", count), /*#__PURE__*/React.createElement("p", null, "info: ", info), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      setCount(function (c) {
+        return c + 1;
+      });
+    }
+  }, "Add Count"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 16
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: callbackFn
+  }, "call callbackFn"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: memoizedFn,
+    style: {
+      marginLeft: 8
+    }
+  }, "call memoizedFn")));
+});

package/dist/useMemoizedFn/demo/demo2.d.ts

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

package/dist/useMemoizedFn/demo/demo2.js

@@ -0,0 +1,48 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useMemoizedFn } from "../..";
+import React, { useCallback, useRef, useState } from 'react';
+var ExpensiveTree = /*#__PURE__*/React.memo(function (_ref) {
+  var showCount = _ref.showCount;
+  var renderCountRef = useRef(0);
+  renderCountRef.current += 1;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "\u7EC4\u4EF6\u88AB\u6E32\u67D3\u7684\u6B21\u6570: ", renderCountRef.current), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: showCount
+  }, "showParentCount"));
+});
+export default (function () {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  var _useState3 = useState('Current count is 0'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    info = _useState4[0],
+    setInfo = _useState4[1];
+  var callbackFn = useCallback(function () {
+    setInfo("Current count is ".concat(count));
+  }, [count]);
+  var memoizedFn = useMemoizedFn(function () {
+    setInfo("Current count is ".concat(count));
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "count: ", count), /*#__PURE__*/React.createElement("p", null, "info: ", info), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      setCount(function (c) {
+        return c + 1;
+      });
+    }
+  }, "Add Count"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 32
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, "\u4F20\u9012useCallback function\u7684\u7EC4\u4EF6:"), /*#__PURE__*/React.createElement(ExpensiveTree, {
+    showCount: callbackFn
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 32
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, "\u4F20\u9012useMemoizedFn function\u7684\u7EC4\u4EF6:"), /*#__PURE__*/React.createElement(ExpensiveTree, {
+    showCount: memoizedFn
+  })));
+});

package/dist/useMemoizedFn/index.d.ts

@@ -0,0 +1,3 @@
+type FnType = (...args: any[]) => any;
+declare const useMemoizedFn: <T extends FnType>(fn: T) => T;
+export default useMemoizedFn;

package/dist/useMemoizedFn/index.js

@@ -0,0 +1,21 @@
+import { useMemo, useRef } from 'react';
+var useMemoizedFn = function useMemoizedFn(fn) {
+  var fnRef = useRef(fn);
+
+  // why not write `fnRef.current = fn`?
+  // https://github.com/alibaba/hooks/issues/728
+  fnRef.current = useMemo(function () {
+    return fn;
+  }, [fn]);
+  var memoizedFn = useRef();
+  if (!memoizedFn.current) {
+    memoizedFn.current = function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return fnRef.current.apply(this, args);
+    };
+  }
+  return memoizedFn.current;
+};
+export default useMemoizedFn;

package/dist/useMount/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 在组件首次渲染时，执行方法。
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/useMount/demo/demo1.js

@@ -0,0 +1,24 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 在组件首次渲染时，执行方法。
+ */
+
+import { useBoolean, useMount } from "../..";
+import React from 'react';
+var MyComponent = function MyComponent() {
+  useMount(function () {
+    alert('组件首次渲染，执行传入函数。');
+  });
+  return /*#__PURE__*/React.createElement("div", null, "Hello World");
+};
+export default (function () {
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    state = _useBoolean2[0],
+    toggle = _useBoolean2[1].toggle;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: toggle
+  }, state ? '卸载组件' : '挂载组件'), state && /*#__PURE__*/React.createElement(MyComponent, null));
+});

package/dist/useMount/index.d.ts

@@ -0,0 +1,2 @@
+declare const useMount: (callback: () => void) => void;
+export default useMount;

package/dist/useMount/index.js

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+var useMount = function useMount(callback) {
+  useEffect(function () {
+    callback();
+  }, []);
+};
+export default useMount;

package/dist/useSet/demo/demo1.d.ts

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

package/dist/useSet/demo/demo1.js

@@ -0,0 +1,36 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useSet } from "../..";
+import React from 'react';
+export default (function () {
+  var _useSet = useSet(['Hello']),
+    _useSet2 = _slicedToArray(_useSet, 2),
+    set = _useSet2[0],
+    _useSet2$ = _useSet2[1],
+    add = _useSet2$.add,
+    remove = _useSet2$.remove,
+    reset = _useSet2$.reset;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return add(String(Date.now()));
+    }
+  }, "Add Timestamp"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return remove('Hello');
+    },
+    disabled: !set.has('Hello'),
+    style: {
+      margin: '0 8px'
+    }
+  }, "Remove Hello"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return reset();
+    }
+  }, "Reset"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 16
+    }
+  }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(Array.from(set), null, 2))));
+});

package/dist/useSet/index.d.ts

@@ -0,0 +1,6 @@
+declare function useSet<K>(initialValue?: Iterable<K>): readonly [Set<K>, {
+    readonly add: (key: K) => void;
+    readonly remove: (key: K) => void;
+    readonly reset: () => void;
+}];
+export default useSet;

package/dist/useSet/index.js

@@ -0,0 +1,41 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState } from 'react';
+import useMemoizedFn from "../useMemoizedFn";
+function useSet(initialValue) {
+  var getInitValue = function getInitValue() {
+    return new Set(initialValue);
+  };
+  var _useState = useState(getInitValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    set = _useState2[0],
+    setSet = _useState2[1];
+  var add = function add(key) {
+    if (set.has(key)) {
+      return;
+    }
+    setSet(function (prevSet) {
+      var temp = new Set(prevSet);
+      temp.add(key);
+      return temp;
+    });
+  };
+  var remove = function remove(key) {
+    if (!set.has(key)) {
+      return;
+    }
+    setSet(function (prevSet) {
+      var temp = new Set(prevSet);
+      temp.delete(key);
+      return temp;
+    });
+  };
+  var reset = function reset() {
+    return setSet(getInitValue());
+  };
+  return [set, {
+    add: useMemoizedFn(add),
+    remove: useMemoizedFn(remove),
+    reset: useMemoizedFn(reset)
+  }];
+}
+export default useSet;

package/dist/useThrottleFn/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 频繁调用 run，但只会每隔 1000ms 执行一次相关函数。
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/useThrottleFn/demo/demo1.js

@@ -0,0 +1,39 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 频繁调用 run，但只会每隔 1000ms 执行一次相关函数。
+ */
+
+import { useThrottleFn } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useThrottleFn = useThrottleFn(function () {
+      setValue(value + 1);
+    }, {
+      wait: 1000
+    }),
+    run = _useThrottleFn.run,
+    cancel = _useThrottleFn.cancel,
+    flush = _useThrottleFn.flush;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginTop: 16
+    }
+  }, " count: ", value, " "), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: run
+  }, "\u70B9\u51FB\u8C03\u7528"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: flush,
+    style: {
+      margin: '0 8px'
+    }
+  }, "\u7ACB\u5373\u5B8C\u6210\u8282\u6D41\u51FD\u6570"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: cancel
+  }, "\u53D6\u6D88"));
+});

package/dist/useThrottleFn/demo/demo2.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 设置 leading 为 false 当频繁调用 run，每隔 1000ms 执行一次相关函数 但第一次不会调用。
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/useThrottleFn/demo/demo2.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 设置 leading 为 false 当频繁调用 run，每隔 1000ms 执行一次相关函数 但第一次不会调用。
+ */
+
+import { useThrottleFn } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useThrottleFn = useThrottleFn(function () {
+      setValue(value + 1);
+    }, {
+      leading: false,
+      wait: 1000
+    }),
+    run = _useThrottleFn.run;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginTop: 16
+    }
+  }, " count: ", value, " "), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: run
+  }, "\u70B9\u51FB\u8C03\u7528"));
+});

package/dist/useThrottleFn/index.d.ts

@@ -0,0 +1,13 @@
+interface ThrottleOptions {
+    wait?: number;
+    leading?: boolean;
+    trailing?: boolean;
+}
+interface ThrottledFn<T extends FnType> {
+    run: (...args: Parameters<T>) => ReturnType<T>;
+    cancel: () => void;
+    flush: () => void;
+}
+type FnType = (...args: any[]) => any;
+declare const useThrottleFn: <T extends FnType>(callback: T, option: ThrottleOptions) => ThrottledFn<T>;
+export default useThrottleFn;

package/dist/useThrottleFn/index.js

@@ -0,0 +1,28 @@
+import _ from 'lodash-es';
+import useCreation from "../useCreation";
+import useLatest from "../useLatest";
+import useUnmount from "../useUnmount";
+var useThrottleFn = function useThrottleFn(callback, option) {
+  var _option$leading, _option$trailing, _option$wait;
+  // 设置默认值
+  option.leading = (_option$leading = option === null || option === void 0 ? void 0 : option.leading) !== null && _option$leading !== void 0 ? _option$leading : true;
+  option.trailing = (_option$trailing = option === null || option === void 0 ? void 0 : option.trailing) !== null && _option$trailing !== void 0 ? _option$trailing : true;
+  option.wait = (_option$wait = option === null || option === void 0 ? void 0 : option.wait) !== null && _option$wait !== void 0 ? _option$wait : 1000;
+  var callbackRef = useLatest(callback);
+
+  // 保存_.debounce()返回的函数
+  var throttle = useCreation(function () {
+    return _.throttle(function () {
+      return callbackRef.current.apply(callbackRef, arguments);
+    }, option.wait, option);
+  }, []);
+  useUnmount(function () {
+    throttle.cancel();
+  });
+  return {
+    run: throttle,
+    cancel: throttle.cancel,
+    flush: throttle.flush
+  };
+};
+export default useThrottleFn;

package/dist/useThrottleValue/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: ThrottledValue 每隔 1000ms 变化一次。
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/useThrottleValue/demo/demo1.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: ThrottledValue 每隔 1000ms 变化一次。
+ */
+
+import { useThrottleValue } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var throttledValue = useThrottleValue(value, {
+    wait: 1000
+  });
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    value: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    placeholder: "\u4FEE\u6539throttledValue",
+    style: {
+      width: 280
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginTop: 16
+    }
+  }, "throttledValue: ", throttledValue));
+});

package/dist/useThrottleValue/index.d.ts

@@ -0,0 +1,7 @@
+interface ThrottleOptions {
+    wait?: number;
+    leading?: boolean;
+    trailing?: boolean;
+}
+declare const useThrottleValue: <T>(value: T, options: ThrottleOptions) => T;
+export default useThrottleValue;

package/dist/useThrottleValue/index.js

@@ -0,0 +1,18 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+import useThrottleFn from "../useThrottleFn";
+var useThrottleValue = function useThrottleValue(value, options) {
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    throttled = _useState2[0],
+    setThrottled = _useState2[1];
+  var _useThrottleFn = useThrottleFn(function () {
+      setThrottled(value);
+    }, options),
+    run = _useThrottleFn.run;
+  useEffect(function () {
+    run();
+  }, [value]);
+  return throttled;
+};
+export default useThrottleValue;

package/dist/useTimeout/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 3000ms 后执行一次
+ */
+import { FC } from 'react';
+declare const DemoOne: FC;
+export default DemoOne;

package/dist/useTimeout/demo/demo1.js

@@ -0,0 +1,19 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 3000ms 后执行一次
+ */
+
+import { useTimeout } from "../..";
+import React, { useState } from 'react';
+var DemoOne = function DemoOne() {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  useTimeout(function () {
+    setCount(count + 1);
+  }, 3000);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "count: ", count));
+};
+export default DemoOne;

package/dist/useTimeout/demo/demo2.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 动态修改 delay 以实现定时器间隔变化与暂停。
+ */
+import { FC } from 'react';
+declare const DemoTwo: FC;
+export default DemoTwo;