doui-react 1.0.0

package/es/hooks/hook/use-deep.js

@@ -0,0 +1,64 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+import isEqual from 'react-fast-compare';
+import { useUnmount } from 'react-use';
+export var useSafeState = function useSafeState(initialValue) {
+  var unMountedRef = useRef(false);
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useUnmount(function () {
+    return unMountedRef.current = true;
+  });
+  var updateState = useMemoFn(function (newValue) {
+    if (unMountedRef.current || isEqual(state, newValue)) {
+      return;
+    }
+    setState(newValue);
+  });
+  return [state, updateState];
+};
+export function useDeepEffect(effect) {
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var prevDepsRef = useRef();
+  useEffect(function () {
+    if (isEqual(prevDepsRef.current, deps)) {
+      return;
+    }
+    effect();
+    prevDepsRef.current = deps;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}
+export function useDeepMemo(factory) {
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var prevDepsRef = useRef();
+  var memoizedValueRef = useRef();
+  if (!isEqual(prevDepsRef.current, deps)) {
+    memoizedValueRef.current = factory();
+    prevDepsRef.current = deps;
+  }
+  return memoizedValueRef.current;
+}
+export function useMemoFn(factory) {
+  var fnRef = useRef(factory);
+  fnRef.current = factory;
+  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 function deepMemo(Component, keys) {
+  return /*#__PURE__*/React.memo(Component, function (prevProps, nextProps) {
+    return keys.every(function (key) {
+      return isEqual(prevProps[key], nextProps[key]);
+    });
+  });
+}

package/es/hooks/hook/use-fetch.d.ts

@@ -0,0 +1,8 @@
+import { UseFetchOptions, UseFetchResult, UseFetchState } from "..";
+export declare function useFetch(fn: UseFetchResult['fetcher'], dependencyList?: any, options?: UseFetchOptions): {
+    setState: (patch: Partial<UseFetchState> | ((prevState: UseFetchState) => Partial<UseFetchState>)) => void;
+    fetcher: (...args: any) => any;
+    loading?: boolean | undefined;
+    data?: any;
+    error?: any;
+};

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

@@ -0,0 +1,164 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["wait"];
+import { useDebounce, useDeepEffect } from "./..";
+import _ from 'lodash';
+import isEqual from 'react-fast-compare';
+import { useLatest, useSetState } from 'react-use';
+var defaultOptions = {
+  automatic: true,
+  debounce: true,
+  requestOrderControl: false
+};
+export 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 = _objectSpread(_objectSpread({}, defaultOptions), options),
+    automatic = _defaultOptions$optio.automatic,
+    debounce = _defaultOptions$optio.debounce,
+    requestOrderControl = _defaultOptions$optio.requestOrderControl;
+  var _useSetState = useSetState({}),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+
+  // 将 deps 作为请求 id，保证请求顺序正确
+  var fetchId = useLatest(requestOrderControl ? JSON.stringify(deps) : 'fetchId');
+  var fetcher = useFetcher( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _len,
+      args,
+      _key,
+      _yield$fetchWrapper,
+      id,
+      data,
+      _args = arguments;
+    return _regeneratorRuntime().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 (isEqual(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;
+  useDeepEffect(function () {
+    needFetch && fetcher();
+  }, [{
+    needFetch: needFetch,
+    deps: deps
+  }]);
+  return _objectSpread(_objectSpread({}, state), {}, {
+    setState: setState,
+    fetcher: fetcher
+  });
+}
+function parseArguments(deps) {
+  if (!deps) {
+    return {
+      isFetch: false
+    };
+  }
+  return {
+    deps: _.castArray(deps)
+  };
+}
+function useFetcher(fn, debounce) {
+  var _parseDebounceProps = parseDebounceProps(debounce),
+    wait = _parseDebounceProps.wait,
+    options = _parseDebounceProps.options;
+  var fetcher = useDebounce(fn, wait, options);
+  return debounce ? fetcher : fn;
+}
+function parseDebounceProps(debounce) {
+  if (!debounce || debounce === true) {
+    return {};
+  }
+  if (_.isObject(debounce)) {
+    var wait = debounce.wait,
+      rest = _objectWithoutProperties(debounce, _excluded);
+    return {
+      wait: wait,
+      options: rest
+    };
+  }
+  return {
+    wait: debounce
+  };
+}
+function fetchWrapper(_x) {
+  return _fetchWrapper.apply(this, arguments);
+}
+function _fetchWrapper() {
+  _fetchWrapper = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2) {
+    var id, fn, data;
+    return _regeneratorRuntime().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/es/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/es/hooks/hook/use-list-operation.js

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { executeFunction } from "../../api";
+import _ from 'lodash';
+import { useState } from 'react';
+export function useListOperation(props) {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    list = _useState2[0],
+    setList = _useState2[1];
+  var values = _.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 (_.isNil(index)) {
+      onChange([]);
+      return;
+    }
+    _.pullAt(values, index);
+    onChange(values);
+  }
+  function move(from, to) {
+    if (!isValidMoveAction(from, to, values)) {
+      return;
+    }
+    var _values$splice = values.splice(from, 1),
+      _values$splice2 = _slicedToArray(_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] = executeFunction(newValue, values[index]);
+    onChange(values);
+  }
+  return {
+    value: values,
+    add: add,
+    move: move,
+    remove: remove,
+    moveUp: moveUp,
+    moveDown: moveDown,
+    update: update
+  };
+}
+export function isValidMoveUpAction(index) {
+  return index > 0;
+}
+export function isValidMoveDownAction(index, values) {
+  return index < values.length - 1;
+}
+export function isValidMoveAction(from, to, values) {
+  var isValidIndex = function isValidIndex(index) {
+    return index >= 0 && index < values.length;
+  };
+  return isValidIndex(from) && isValidIndex(to);
+}

package/es/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/es/hooks/hook/use-loading.js

@@ -0,0 +1,59 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useMemoFn, useSafeState } from "./..";
+import { useRef } from 'react';
+var defaultOptions = {
+  delay: 50
+};
+export function useLoading(fn) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _defaultOptions$optio = _objectSpread(_objectSpread({}, defaultOptions), options),
+    delay = _defaultOptions$optio.delay;
+  var _useSafeState = useSafeState(),
+    _useSafeState2 = _slicedToArray(_useSafeState, 2),
+    loading = _useSafeState2[0],
+    setLoading = _useSafeState2[1];
+  var isRunningRef = useRef(false);
+  var callback = useMemoFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var timer,
+      _len,
+      event,
+      _key,
+      _args = arguments;
+    return _regeneratorRuntime().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/es/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/es/hooks/hook/use-window-resize.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+export function useWindowResize(onResize) {
+  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/es/hooks/index.d.ts

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

package/es/hooks/index.js

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

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

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

package/es/hooks/type/index.js

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

package/es/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/es/hooks/type/use-fetch.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/hooks/type/use-list-operation.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/icon/component/down.js

@@ -0,0 +1,42 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+import { useIcon } from "../hook";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+var defaultColors = {
+  'node-1': {
+    fill: '#595959'
+  }
+};
+var componentName = 'Down';
+export var Down = function Down(iconProps) {
+  var props = useIcon(iconProps, defaultColors, componentName);
+  return _jsx("svg", _objectSpread(_objectSpread({
+    viewBox: "0 0 14 14",
+    width: "1em",
+    height: "1em"
+  }, props), {}, {
+    children: _jsx("g", {
+      id: "down__Page-1-Copy-2",
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "none",
+      strokeWidth: 1,
+      children: _jsx("g", {
+        id: "down__circleTriangleUp",
+        fill: "#595959",
+        fillRule: "nonzero",
+        "data-id": "node-1",
+        children: _jsx("g", {
+          id: "down__circleTriangleDown",
+          children: _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/es/icon/component/index.d.ts

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

package/es/icon/component/index.js

@@ -0,0 +1,5 @@
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+export * from "./down";
+export * from "./up";

package/es/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/es/icon/component/up.js

@@ -0,0 +1,41 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+import { useIcon } from "../hook";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+var defaultColors = {
+  'node-1': {
+    fill: '#595959'
+  }
+};
+var componentName = 'Up';
+export var Up = function Up(iconProps) {
+  var props = useIcon(iconProps, defaultColors, componentName);
+  return _jsx("svg", _objectSpread(_objectSpread({
+    viewBox: "0 0 14 14",
+    width: "1em",
+    height: "1em"
+  }, props), {}, {
+    children: _jsx("g", {
+      id: "up__Page-1-Copy-2",
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "none",
+      strokeWidth: 1,
+      children: _jsx("g", {
+        id: "up__circleTriangleDown",
+        fill: "#595959",
+        fillRule: "nonzero",
+        "data-id": "node-1",
+        children: _jsx("g", {
+          id: "up__circleTriangleUp",
+          children: _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"
+          })
+        })
+      })
+    })
+  }));
+};