doui-react 1.0.0

package/lib/hooks/hook/use-fetch.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFetch = useFetch;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _2 = require("./..");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+var _reactUse = require("react-use");
+var _excluded = ["wait"];
+var defaultOptions = {
+  automatic: true,
+  debounce: true,
+  requestOrderControl: false
+};
+function useFetch(_fn, dependencyList, options) {
+  var _parseArguments = parseArguments(dependencyList),
+    _parseArguments$deps = _parseArguments.deps,
+    deps = _parseArguments$deps === void 0 ? [] : _parseArguments$deps,
+    _parseArguments$isFet = _parseArguments.isFetch,
+    isFetch = _parseArguments$isFet === void 0 ? true : _parseArguments$isFet;
+  var _defaultOptions$optio = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultOptions), options),
+    automatic = _defaultOptions$optio.automatic,
+    debounce = _defaultOptions$optio.debounce,
+    requestOrderControl = _defaultOptions$optio.requestOrderControl;
+  var _useSetState = (0, _reactUse.useSetState)({}),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+
+  // 将 deps 作为请求 id，保证请求顺序正确
+  var fetchId = (0, _reactUse.useLatest)(requestOrderControl ? JSON.stringify(deps) : 'fetchId');
+  var fetcher = useFetcher( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+    var _len,
+      args,
+      _key,
+      _yield$fetchWrapper,
+      id,
+      data,
+      _args = arguments;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          for (_len = _args.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = _args[_key];
+          }
+          setState({
+            loading: true
+          });
+          _context.prev = 2;
+          _context.next = 5;
+          return fetchWrapper({
+            id: fetchId.current,
+            fn: function fn() {
+              return _fn.apply(void 0, args);
+            }
+          });
+        case 5:
+          _yield$fetchWrapper = _context.sent;
+          id = _yield$fetchWrapper.id;
+          data = _yield$fetchWrapper.data;
+          if (!(id !== fetchId.current)) {
+            _context.next = 10;
+            break;
+          }
+          return _context.abrupt("return");
+        case 10:
+          setState(function (prevState) {
+            if ((0, _reactFastCompare.default)(prevState.data, data)) {
+              return {
+                loading: false
+              };
+            }
+            return {
+              loading: false,
+              data: data
+            };
+          });
+          _context.next = 16;
+          break;
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](2);
+          setState({
+            loading: false,
+            error: _context.t0
+          });
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[2, 13]]);
+  })), debounce);
+  var needFetch = isFetch && automatic;
+  (0, _2.useDeepEffect)(function () {
+    needFetch && fetcher();
+  }, [{
+    needFetch: needFetch,
+    deps: deps
+  }]);
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+    setState: setState,
+    fetcher: fetcher
+  });
+}
+function parseArguments(deps) {
+  if (!deps) {
+    return {
+      isFetch: false
+    };
+  }
+  return {
+    deps: _lodash.default.castArray(deps)
+  };
+}
+function useFetcher(fn, debounce) {
+  var _parseDebounceProps = parseDebounceProps(debounce),
+    wait = _parseDebounceProps.wait,
+    options = _parseDebounceProps.options;
+  var fetcher = (0, _2.useDebounce)(fn, wait, options);
+  return debounce ? fetcher : fn;
+}
+function parseDebounceProps(debounce) {
+  if (!debounce || debounce === true) {
+    return {};
+  }
+  if (_lodash.default.isObject(debounce)) {
+    var wait = debounce.wait,
+      rest = (0, _objectWithoutProperties2.default)(debounce, _excluded);
+    return {
+      wait: wait,
+      options: rest
+    };
+  }
+  return {
+    wait: debounce
+  };
+}
+function fetchWrapper(_x) {
+  return _fetchWrapper.apply(this, arguments);
+}
+function _fetchWrapper() {
+  _fetchWrapper = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(_ref2) {
+    var id, fn, data;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          id = _ref2.id, fn = _ref2.fn;
+          _context2.next = 3;
+          return fn();
+        case 3:
+          data = _context2.sent;
+          return _context2.abrupt("return", {
+            data: data,
+            id: id
+          });
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _fetchWrapper.apply(this, arguments);
+}

package/lib/hooks/hook/use-list-operation.d.ts

@@ -0,0 +1,5 @@
+import { ListOperation, ListOperationProps } from '../type';
+export declare function useListOperation(props?: ListOperationProps): ListOperation;
+export declare function isValidMoveUpAction(index: number): boolean;
+export declare function isValidMoveDownAction(index: number, values: any[]): boolean;
+export declare function isValidMoveAction(from: number, to: number, values: any[]): boolean;

package/lib/hooks/hook/use-list-operation.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidMoveAction = isValidMoveAction;
+exports.isValidMoveDownAction = isValidMoveDownAction;
+exports.isValidMoveUpAction = isValidMoveUpAction;
+exports.useListOperation = useListOperation;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _api = require("../../api");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = require("react");
+function useListOperation(props) {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    list = _useState2[0],
+    setList = _useState2[1];
+  var values = _lodash.default.clone((props === null || props === void 0 ? void 0 : props.value) || list);
+  var onChange = (props === null || props === void 0 ? void 0 : props.onChange) || setList;
+  function add(defaultValue, insertIndex) {
+    var index = insertIndex !== null && insertIndex !== void 0 ? insertIndex : values.length;
+    values.splice(index, 0, defaultValue);
+    onChange(values);
+  }
+  function remove(index) {
+    if (_lodash.default.isNil(index)) {
+      onChange([]);
+      return;
+    }
+    _lodash.default.pullAt(values, index);
+    onChange(values);
+  }
+  function move(from, to) {
+    if (!isValidMoveAction(from, to, values)) {
+      return;
+    }
+    var _values$splice = values.splice(from, 1),
+      _values$splice2 = (0, _slicedToArray2.default)(_values$splice, 1),
+      item = _values$splice2[0];
+    values.splice(to, 0, item);
+    onChange(values);
+  }
+  function moveUp(index) {
+    if (isValidMoveUpAction(index)) {
+      move(index, index - 1);
+    }
+  }
+  function moveDown(index) {
+    if (isValidMoveDownAction(index, values)) {
+      move(index, index + 1);
+    }
+  }
+  function update(index, newValue) {
+    values[index] = (0, _api.executeFunction)(newValue, values[index]);
+    onChange(values);
+  }
+  return {
+    value: values,
+    add: add,
+    move: move,
+    remove: remove,
+    moveUp: moveUp,
+    moveDown: moveDown,
+    update: update
+  };
+}
+function isValidMoveUpAction(index) {
+  return index > 0;
+}
+function isValidMoveDownAction(index, values) {
+  return index < values.length - 1;
+}
+function isValidMoveAction(from, to, values) {
+  var isValidIndex = function isValidIndex(index) {
+    return index >= 0 && index < values.length;
+  };
+  return isValidIndex(from) && isValidIndex(to);
+}

package/lib/hooks/hook/use-loading.d.ts

@@ -0,0 +1,7 @@
+import { FunctionReturn } from "../../api";
+type LoadingOptions = {
+    delay?: number;
+};
+type Fn = (...args: any) => FunctionReturn<any>;
+export declare function useLoading(fn?: Fn, options?: LoadingOptions): readonly [boolean | undefined, (...event: any) => Promise<any>];
+export {};

package/lib/hooks/hook/use-loading.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLoading = useLoading;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _ = require("./..");
+var _react = require("react");
+var defaultOptions = {
+  delay: 50
+};
+function useLoading(fn) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _defaultOptions$optio = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultOptions), options),
+    delay = _defaultOptions$optio.delay;
+  var _useSafeState = (0, _.useSafeState)(),
+    _useSafeState2 = (0, _slicedToArray2.default)(_useSafeState, 2),
+    loading = _useSafeState2[0],
+    setLoading = _useSafeState2[1];
+  var isRunningRef = (0, _react.useRef)(false);
+  var callback = (0, _.useMemoFn)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+    var timer,
+      _len,
+      event,
+      _key,
+      _args = arguments;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!isRunningRef.current) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          isRunningRef.current = true;
+          timer = setTimeout(function () {
+            return setLoading(true);
+          }, delay);
+          _context.prev = 4;
+          for (_len = _args.length, event = new Array(_len), _key = 0; _key < _len; _key++) {
+            event[_key] = _args[_key];
+          }
+          _context.next = 8;
+          return fn === null || fn === void 0 ? void 0 : fn.apply(void 0, event);
+        case 8:
+          return _context.abrupt("return", _context.sent);
+        case 9:
+          _context.prev = 9;
+          isRunningRef.current = false;
+          clearTimeout(timer);
+          setLoading(false);
+          return _context.finish(9);
+        case 14:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[4,, 9, 14]]);
+  })));
+  return [loading, callback];
+}

package/lib/hooks/hook/use-window-resize.d.ts

@@ -0,0 +1,5 @@
+export interface WindowSize {
+    width: number;
+    height: number;
+}
+export declare function useWindowResize(onResize: (size: WindowSize) => void): void;

package/lib/hooks/hook/use-window-resize.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWindowResize = useWindowResize;
+var _react = require("react");
+function useWindowResize(onResize) {
+  (0, _react.useEffect)(function () {
+    var handler = function handler() {
+      onResize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    window.addEventListener('resize', handler);
+    return function () {
+      window.removeEventListener('resize', handler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

package/lib/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hook';
+export * from './type';

package/lib/hooks/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _hook = require("./hook");
+Object.keys(_hook).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hook[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _hook[key];
+    }
+  });
+});
+var _type = require("./type");
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _type[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _type[key];
+    }
+  });
+});

package/lib/hooks/type/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-fetch';
+export * from './use-list-operation';

package/lib/hooks/type/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useFetch = require("./use-fetch");
+Object.keys(_useFetch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useFetch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useFetch[key];
+    }
+  });
+});
+var _useListOperation = require("./use-list-operation");
+Object.keys(_useListOperation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useListOperation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useListOperation[key];
+    }
+  });
+});

package/lib/hooks/type/use-fetch.d.ts

@@ -0,0 +1,31 @@
+import { FunctionReturn } from "../../api";
+export interface UseFetchOptions {
+    /**
+     * @description 是否使用防抖，默认 `true`, 防抖时间为 `300ms`，设置为 `0` 或 `false` 则关闭防抖
+     * @default true
+     */
+    debounce?: boolean | number | DebounceOptions;
+    /**
+     * @description 是否开启时序控制
+     * @default false
+     */
+    requestOrderControl?: boolean;
+    /**
+     * 是否在依赖项变化后自动请求数据
+     */
+    automatic?: boolean;
+}
+export interface DebounceOptions {
+    wait?: number;
+    leading?: boolean;
+    trailing?: boolean;
+}
+export interface UseFetchState {
+    loading?: boolean;
+    data?: any;
+    error?: any;
+}
+export interface UseFetchResult extends UseFetchState {
+    fetcher: (...args: any) => FunctionReturn<any>;
+    setState: (patch: Partial<UseFetchState> | ((prevState: UseFetchState) => Partial<UseFetchState>)) => void;
+}

package/lib/hooks/type/use-fetch.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/hooks/type/use-list-operation.d.ts

@@ -0,0 +1,34 @@
+export interface ListOperationProps {
+    value: any[];
+    onChange(value: any[]): void;
+}
+export interface ListOperation {
+    /**
+     * @description 列表值
+     */
+    value: any[];
+    /**
+     * @description 新增
+     */
+    add: (defaultValue?: any, insertIndex?: number) => void;
+    /**
+     * @description 删除
+     */
+    remove: (index?: number | number[]) => void;
+    /**
+     * @description 向上移动
+     */
+    moveUp: (index: number) => void;
+    /**
+     * @description 向下移动
+     */
+    moveDown: (index: number) => void;
+    /**
+     * @description 自由移动
+     */
+    move: (from: number, to: number) => void;
+    /**
+     * @description 更新
+     */
+    update: (index: number, newValue?: any) => void;
+}

package/lib/hooks/type/use-list-operation.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/icon/component/down.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from '../type';
+export declare const Down: (iconProps: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/icon/component/down.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Down = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _hook = require("../hook");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+
+var defaultColors = {
+  'node-1': {
+    fill: '#595959'
+  }
+};
+var componentName = 'Down';
+var Down = exports.Down = function Down(iconProps) {
+  var props = (0, _hook.useIcon)(iconProps, defaultColors, componentName);
+  return (0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    viewBox: "0 0 14 14",
+    width: "1em",
+    height: "1em"
+  }, props), {}, {
+    children: (0, _jsxRuntime.jsx)("g", {
+      id: "down__Page-1-Copy-2",
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "none",
+      strokeWidth: 1,
+      children: (0, _jsxRuntime.jsx)("g", {
+        id: "down__circleTriangleUp",
+        fill: "#595959",
+        fillRule: "nonzero",
+        "data-id": "node-1",
+        children: (0, _jsxRuntime.jsx)("g", {
+          id: "down__circleTriangleDown",
+          children: (0, _jsxRuntime.jsx)("path", {
+            id: "down__Combined-Shape",
+            d: "M7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0m0 3.111L2.333 9.333H4.2l2.8-3.5 2.8 3.5h1.867z",
+            transform: "matrix(1 0 0 -1 0 14)"
+          })
+        })
+      })
+    })
+  }));
+};

package/lib/icon/component/index.d.ts

@@ -0,0 +1,2 @@
+export * from './down';
+export * from './up';

package/lib/icon/component/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _down = require("./down");
+Object.keys(_down).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _down[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _down[key];
+    }
+  });
+});
+var _up = require("./up");
+Object.keys(_up).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _up[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _up[key];
+    }
+  });
+});

package/lib/icon/component/up.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from '../type';
+export declare const Up: (iconProps: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/icon/component/up.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Up = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _hook = require("../hook");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+
+var defaultColors = {
+  'node-1': {
+    fill: '#595959'
+  }
+};
+var componentName = 'Up';
+var Up = exports.Up = function Up(iconProps) {
+  var props = (0, _hook.useIcon)(iconProps, defaultColors, componentName);
+  return (0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    viewBox: "0 0 14 14",
+    width: "1em",
+    height: "1em"
+  }, props), {}, {
+    children: (0, _jsxRuntime.jsx)("g", {
+      id: "up__Page-1-Copy-2",
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "none",
+      strokeWidth: 1,
+      children: (0, _jsxRuntime.jsx)("g", {
+        id: "up__circleTriangleDown",
+        fill: "#595959",
+        fillRule: "nonzero",
+        "data-id": "node-1",
+        children: (0, _jsxRuntime.jsx)("g", {
+          id: "up__circleTriangleUp",
+          children: (0, _jsxRuntime.jsx)("path", {
+            id: "up__Combined-Shape",
+            d: "M7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0m0 3.5L2.333 9.722H4.2l2.8-3.5 2.8 3.5h1.867z"
+          })
+        })
+      })
+    })
+  }));
+};