pansyjs / react-hooks Goto Github PK

View Code? Open in Web Editor NEW

9.0 9.0 2.0 40.69 MB

react hooks

Home Page: https://hooks.xingkang.wang

License: MIT License

JavaScript 0.39% TypeScript 99.30% Shell 0.02% Smarty 0.28%

hooks mqtt react react-hooks typescript websocket

react-hooks's People

Contributors

Stargazers

Watchers

Forkers

yangjiaxin1995 xiaoliangpan

react-hooks's Issues

希望新增全局滚动hook

1.滚动位移的计数
2.滚动方向
3.mac触摸板兼容
4.防抖动

例如：

useMouseWheel

import { off, on } from './utils';

export default () => {
  const [mouseWheelScrolled, setMouseWheelScrolled] = useState(0);
  useEffect(() => {
    const updateScroll = (e: MouseWheelEvent) => {
      setMouseWheelScrolled(e.deltaY + mouseWheelScrolled);
    };
    on(window, 'wheel', updateScroll, false);
    return () => off(window, 'wheel', updateScroll);
  });
  return mouseWheelScrolled;
};

useMouseWheelDirection

import { off, on } from './utils';
import { useDebouncedCallback } from 'use-debounce';

let macScroll = false;
export default () => {
  const [mouseWheelScrolled, setMouseWheelScrolled] = useState(0);
  const [direction, setDirection] = useState<null | 'up' | 'down'>(null);
  // 整体防抖动
  const updateScroll = useDebouncedCallback(
    (e: MouseWheelEvent) => {
      if (!macScroll) {
        macScroll = true;
        if (Math.abs(mouseWheelScrolled - e.deltaY + mouseWheelScrolled) > 0) {
          setDirection(
            mouseWheelScrolled > e.deltaY + mouseWheelScrolled ? 'up' : 'down',
          );
          setMouseWheelScrolled(e.deltaY + mouseWheelScrolled);
        }
        // 触摸板防抖动
        setTimeout(() => {
          macScroll = false;
        }, 1000);
      }
    },
    100,
    { maxWait: 100 },
  );

  useEffect(() => {
    on(window, 'mousewheel', updateScroll, false);
    return () => off(window, 'mousewheel', updateScroll);
  });
  return direction;
};

环境详情

@pansy/react-hooks version: 0.0。2
react version:
react-dom version:
typescript version:

当set后立马get，返回的还是老的，需要把set方法包一层给current就可以了

import { useState, useRef, useCallback } from 'react';

import type { Dispatch, SetStateAction } from 'react';

type GetState<S> = () => S;

/**
 * 给 React.useState 增加了一个 getter 方法，以获取当前最新值
 * @param initialState
 * @returns
 */
export function useGetState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>, GetState<S>] {
  const [state, setState] = useState<S>(initialState);

  const stateRef = useRef<S>(state);

  stateRef.current = state;

  const getState = useCallback<GetState<S>>(() => stateRef.current, []);

  return [state, setState, getState];
}

将代码改为以下代码即可：

import { useState, useRef, useCallback } from 'react';

import type { Dispatch, SetStateAction } from 'react';

type GetState<S> = () => S;

/**
 * 给 React.useState 增加了一个 getter 方法，以获取当前最新值
 * @param initialState
 * @returns
 */
export function useGetState<S>(
  initialState: S | (() => S),
): [S, Dispatch<SetStateAction<S>>, GetState<S>] {
  const [state, setState] = useState<S>(initialState);

  const stateRef = useRef<S>(state);

  stateRef.current = state;

  const _setState = (e) => {
    setState(e);
    stateRef.current = e;
  };

  const getState = useCallback<GetState<S>>(() => stateRef.current, []);

  return [state, _setState, getState];
}

请求大佬增加 mysql ddl 生成库

目前npm 搜索ddl 没找到相关的库
社区有 ddl 2 json的但是没有链式操作生成ddl的库

我目前的需求是根据markdown 生成 msyql的语句建表，因为这样写好文档就相当于写好了mysql

markdown 根据 table 解析为json 已经解决

ddl生成目前采用的 https://github.com/easy-swoole/ddl
不过我觉得生成代码这种工作放在前端比较好所以希望社区增加该类型的库

这是我现在用php生成的文件
1.markdown table语法转为json
2.根据json循环生成 sql文件
3.复制sql内容到Navicat

CREATE TABLE IF NOT EXISTS `fa_anubis_order` (
  `id` int(10) UNSIGNED ZEROFILL NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT 'ID',
  `order_id` bigint(20) UNSIGNED NULL DEFAULT NULL COMMENT '订单id',
  `tracking_id` bigint(20) UNSIGNED NULL DEFAULT NULL COMMENT '运单id',
  `partner_order_code` varchar(64) NULL DEFAULT NULL COMMENT '外部订单号',
  `serial_number` varchar(64) NULL DEFAULT NULL COMMENT '商家订单流水号',
  `order_status` tinyint(6) UNSIGNED NULL DEFAULT NULL COMMENT '订单状态|ENUM:0:订单生成,1:运单生成成功,20:骑手接单,80:骑手到店,2:配送中,3:已完成,4:已取消,5:配送异常',
  `carrier_driver_id` varchar(64) NULL DEFAULT NULL COMMENT '配送员id',
  `carrier_driver_name` varchar(32) NULL DEFAULT NULL COMMENT '配送员姓名',
  `carrier_driver_phone` varchar(20) NULL DEFAULT NULL COMMENT '配送员电话',
  `estimate_arrive_time` bigint(13) UNSIGNED NULL DEFAULT NULL COMMENT '预计送达时间(毫秒)',
  `overtime_compensation_cost_cent` int(10) UNSIGNED NULL DEFAULT NULL COMMENT '时效赔付',
  `if_can_add_tip` int(10) UNSIGNED NULL DEFAULT NULL COMMENT '调度费支持|ENUM:0:不可以,1:可以',
  `order_tip_amount_cent` int(10) UNSIGNED NULL DEFAULT NULL COMMENT '订单当前小费总金额分',
  `delivery_fetch_photos` varchar NULL DEFAULT NULL COMMENT '骑手取货照片地址',
  `order_total_amount_cent` int(10) UNSIGNED NULL DEFAULT NULL COMMENT '原始配送费金额无需关注',
  `order_actual_amount_cent` int(10) UNSIGNED NULL DEFAULT NULL COMMENT '订单实际配送支付总金额',
  `price_detail` varchar NULL DEFAULT NULL COMMENT '配送费价格明细',
  `abnormal_code` varchar(20) NULL DEFAULT NULL COMMENT '运单异常原因code',
  `abnormal_desc` varchar(255) NULL DEFAULT NULL COMMENT '运单异常原因描述',
  `event_log_details` varchar NULL DEFAULT NULL COMMENT '运单事件节点信息',
  `complaint_id` bigint(20) NULL DEFAULT NULL COMMENT '投诉编号',
  `complaint_reason_desc` varchar(255) NULL DEFAULT NULL COMMENT '投诉原因描述',
  `complaint_status` tinyint(6) NULL DEFAULT NULL COMMENT '投诉状态|ENUM:1:待处理,2:成功,3:失败',
  `claim_id` bigint(20) NULL DEFAULT NULL COMMENT '索赔id',
  `claim_reason_desc` varchar(255) NULL DEFAULT NULL COMMENT '索赔原因描述',
  `claim_status` tinyint(6) UNSIGNED NULL DEFAULT NULL COMMENT '索赔状态|ENUM:1:待处理,2:成功,3:失败',
  `temperature` varchar(20) NULL DEFAULT NULL COMMENT '骑手体温',
  `order_distance` decimal(10,2) NULL DEFAULT NULL COMMENT '配送距离',
  `created_time` int(10) NOT NULL DEFAULT 0 COMMENT '创建时间',
  `updated_time` int(10) NOT NULL DEFAULT 0 COMMENT '更新时间',
  `delete_time` int(10) NOT NULL DEFAULT 0 COMMENT '删除时间'
)
ENGINE = MYISAM DEFAULT COLLATE = 'utf8mb4_general_ci' COMMENT = 'anubis_order';

The automated release is failing 🚨

🚨 The automated release from the `main` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/coverage.yml

actions/checkout v3

pnpm/action-setup v2.2.4

actions/cache v3

actions/setup-node v3

codecov/codecov-action v3

.github/workflows/deploy.yml

actions/checkout v3

actions/setup-node v3

pnpm/action-setup v2

actions/cache v3

peaceiris/actions-gh-pages v3

.github/workflows/test.yml

actions/checkout v3

pnpm/action-setup v2.2.4

actions/cache v3

actions/setup-node v3

npm

hooks/hooks/package.json

@pansy/use-boolean 0.3.2

@pansy/use-click-away 0.4.3

@pansy/use-controllable-value 0.4.2

@pansy/use-cookie-state 0.2.3

@pansy/use-creation 0.2.4

@pansy/use-deep-compare-effect 1.3.3

@pansy/use-deep-compare-layout-effect 1.1.2

@pansy/use-document-visibility 0.3.4

@pansy/use-drag 1.1.0

@pansy/use-drop 1.1.0

@pansy/use-event-listener 0.3.4

@pansy/use-event-target 0.2.8

@pansy/use-external 0.1.6

@pansy/use-favicon 0.2.6

@pansy/use-fullscreen 0.1.0

@pansy/use-get-state 0.4.2

@pansy/use-hover 0.4.3

@pansy/use-in-viewport 0.4.3

@pansy/use-interval 0.3.2

@pansy/use-key-press 0.3.3

@pansy/use-latest 0.2.6

@pansy/use-local-storage-state 0.3.4

@pansy/use-lock-fn 1.0.7

@pansy/use-memoized-fn 0.3.3

@pansy/use-modal 1.0.3

@pansy/use-mount 0.2.1

@pansy/use-mouse 0.3.3

@pansy/use-pagination 0.1.2

@pansy/use-portal 0.2.2

@pansy/use-previous 0.2.6

@pansy/use-raf-state 0.2.9

@pansy/use-request 0.3.3

@pansy/use-scroll 0.3.4

@pansy/use-scroll-lock 1.3.4

@pansy/use-selections 0.4.2

@pansy/use-session-storage-state 0.3.4

@pansy/use-size 0.3.4

@pansy/use-timeout 0.2.8

@pansy/use-title 0.3.4

@pansy/use-toggle 0.2.6

@pansy/use-unmount 0.2.9

@pansy/use-update 0.2.6

@pansy/use-update-effect 0.2.6

@pansy/use-update-layout-effect 0.2.13

@pansy/use-watermark 0.3.4

@pansy/use-web-socket 0.2.3

hooks/useBoolean/package.json

@pansy/use-toggle 0.2.6

hooks/useClickAway/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-latest 0.2.6

hooks/useControllableValue/package.json

@pansy/shared ^1.15.0

@pansy/use-memoized-fn 0.3.3

@pansy/use-update 0.2.6

hooks/useCookieState/package.json

@pansy/shared ^1.15.0

@pansy/use-memoized-fn 0.3.3

@types/js-cookie ^2.x.x

js-cookie ^2.x.x

hooks/useCreation/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

hooks/useDeepCompareEffect/package.json

@pansy/shared ^1.15.0

hooks/useDeepCompareLayoutEffect/package.json

@pansy/shared ^1.15.0

hooks/useDocumentVisibility/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-event-listener 0.3.4

hooks/useDrag/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-latest 0.2.6

@pansy/use-mount 0.2.1

hooks/useDrop/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-latest 0.2.6

hooks/useEventListener/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-latest 0.2.6

hooks/useEventTarget/package.json

@pansy/use-latest 0.2.6

hooks/useExternal/package.json

hooks/useFavicon/package.json

hooks/useFullscreen/package.json

@pansy/shared ^1.15.0

@pansy/use-boolean 0.3.2

screenfull ^5.0.2

hooks/useGetState/package.json

@pansy/use-toggle 0.2.6

hooks/useHover/package.json

@pansy/shared ^1.15.0

@pansy/use-boolean 0.3.2

@pansy/use-event-listener 0.3.4

hooks/useInViewport/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

intersection-observer ^0.12.2

hooks/useInterval/package.json

@pansy/shared ^1.15.0

@pansy/use-latest 0.2.6

hooks/useKeyPress/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-latest 0.2.6

hooks/useLatest/package.json

hooks/useLocalStorageState/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

hooks/useLockFn/package.json

hooks/useMemoizedFn/package.json

@pansy/use-toggle 0.2.6

hooks/useModal/package.json

@pansy/use-boolean 0.3.2

@pansy/use-memoized-fn 0.3.3

hooks/useMount/package.json

hooks/useMouse/package.json

@pansy/shared ^1.15.0

@pansy/use-event-listener 0.3.4

@pansy/use-raf-state 0.2.9

hooks/useMqtt/package.json

@pansy/use-boolean 0.3.2

@pansy/use-latest 0.2.6

@pansy/use-memoized-fn 0.3.3

@pansy/use-unmount 0.2.9

mqtt ^4.3.7

hooks/usePagination/package.json

@pansy/use-memoized-fn 0.3.3

@pansy/use-request 0.3.3

hooks/usePortal/package.json

hooks/usePrevious/package.json

hooks/useRafState/package.json

@pansy/use-unmount 0.2.9

hooks/useRequest/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-creation 0.2.4

@pansy/use-latest 0.2.6

@pansy/use-memoized-fn 0.3.3

@pansy/use-mount 0.2.1

@pansy/use-unmount 0.2.9

@pansy/use-update 0.2.6

lodash ^4.17.21

hooks/useScroll/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-latest 0.2.6

@pansy/use-raf-state 0.2.9

hooks/useScrollLock/package.json

@pansy/shared ^1.15.0

@pansy/use-event-listener 0.3.4

@pansy/use-get-state 0.4.2

hooks/useSelections/package.json

@pansy/use-memoized-fn 0.3.3

hooks/useSessionStorageState/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

hooks/useSize/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-raf-state 0.2.9

resize-observer-polyfill ^1.5.1

hooks/useTimeout/package.json

@pansy/shared ^1.15.0

@pansy/use-latest 0.2.6

hooks/useTitle/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-unmount 0.2.9

hooks/useToggle/package.json

hooks/useUnmount/package.json

@pansy/shared ^1.15.0

@pansy/use-latest 0.2.6

hooks/useUpdate/package.json

hooks/useUpdateEffect/package.json

hooks/useUpdateLayoutEffect/package.json

@pansy/hook-utils 0.5.3

hooks/useUrlState/package.json

@pansy/use-memoized-fn 0.3.3

@pansy/use-update 0.2.6

query-string ^7.1.1

react-router ^5.0.0 || ^6.0.0

hooks/useWatermark/package.json

@pansy/hook-utils 0.5.3

@pansy/shared ^1.15.0

@pansy/use-memoized-fn 0.3.3

@pansy/use-unmount 0.2.9

@pansy/watermark ^2.2.1

hooks/useWebSocket/package.json

@pansy/use-latest 0.2.6

@pansy/use-memoized-fn 0.3.3

@pansy/use-unmount 0.2.9

hooks/utils/package.json

@pansy/shared ^1.15.0

@pansy/use-memoized-fn 0.3.3

@pansy/use-unmount 0.2.9

@pansy/use-update-effect 0.2.6

lodash ^4.17.21

package.json

@ant-design/icons 5.0.1

@ant-design/pro-card ^2.3.2

@babel/plugin-transform-modules-commonjs 7.21.2

@testing-library/jest-dom 5.16.5

@testing-library/react 14.0.0

@types/node ^18.15.11

@types/jest ^29.5.0

@types/testing-library__jest-dom 5.14.5

@typescript-eslint/eslint-plugin 5.57.0

@typescript-eslint/parser 5.57.0

@umijs/test ^4.0.63

@umijs/utils ^4.0.63

@walrus/cli 1.3.4

@walrus/cli-utils 2.2.1

@walrus/package ^1.1.0

@walrus/plugin-release 1.14.3

antd 5.3.3

cross-env 7.0.3

conventional-changelog-cli 2.2.2

conventional-changelog-gitmoji-config 1.4.7

dumi 2.1.17

eslint 8.37.0

eslint-config-alloy 4.9.0

eslint-config-prettier 8.8.0

eslint-plugin-react 7.32.2

eslint-plugin-react-hooks 4.6.0

husky 8.0.3

jest 29.5.0

jest-environment-jsdom 29.5.0

jest-fetch-mock 3.0.3

jest-localstorage-mock 2.4.26

jest-websocket-mock 2.4.0

lerna 6.6.1

mock-socket 9.2.1

mockjs ^1.1.0

react-shadow 20.0.0

react-router ^6.9.0

react-test-renderer 18.2.0

redbud 1.6.0

rimraf 3.0.2

tsx ^3.12.6

turbo ^1.8.6

ts-node ^10.9.1

typescript 5.0.2

scripts/package.json

Check this box to trigger a request for Renovate to run again on this repository

The automated release is failing 🚨

🚨 The automated release from the `main` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

王兄增加个移动端是阔值手势吧

我临时写了一个，最近写api接口，没时间维护前端，这个还得你专业

根据手势的位移阔值来判断上下左右，方便用户直接使用，做翻页

import {useState} from 'react';
import {useDebouncedCallback} from 'use-debounce';
import {useDrag} from '@use-gesture/react';

export default () => {
  const [dragScrolled, setDragScrolled] = useState(0);
  const [direction, setDirection] = useState<null | 'up' | 'down'>(null);
  const theshold = 10
  const bind = useDrag(
    ({
       first,
       last,
       velocity: [, vy],
       direction: [, dy],
       movement: [, my],
     }) => {
      if (first) {
        setDragScrolled(my)
      }
      if (last) {
        updateScroll(dy, my)
      }
    }
  );
  const updateScroll = useDebouncedCallback(
    (dy, y) => {
      if (Math.abs(dragScrolled - y) > theshold) {
        setDirection(
          dy > -1 ? 'up' : 'down',
        );
        setDragScrolled(y + dragScrolled);
      }
    },
    100,
    {maxWait: 100},
  );
  return [bind, direction]
};

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.