├── .dumirc.ts ├── .editorconfig ├── .eslintrc.js ├── .fatherrc.ts ├── .github ├── dependabot.yml └── workflows │ ├── codeql.yml │ ├── react-component-ci.yml │ └── site-deploy.yml ├── .gitignore ├── .husky └── pre-commit ├── .prettierrc ├── HISTORY.md ├── LICENSE ├── README.md ├── docs ├── demo │ ├── dynaymicCSS.md │ ├── getScrollBarSize.md │ ├── portal.md │ ├── styleChecker.md │ └── toArray.md ├── examples │ ├── dynaymicCSS.tsx │ ├── getScrollBarSize.tsx │ ├── portal.tsx │ ├── styleChecker.tsx │ └── toArray.tsx └── index.md ├── package.json ├── src ├── Children │ └── toArray.ts ├── Dom │ ├── canUseDom.ts │ ├── contains.ts │ ├── dynamicCSS.ts │ ├── findDOMNode.ts │ ├── focus.ts │ ├── isVisible.ts │ ├── scrollLocker.ts │ ├── shadow.ts │ └── styleChecker.ts ├── KeyCode.ts ├── Portal.tsx ├── PortalWrapper.tsx ├── React │ ├── isFragment.ts │ └── render.ts ├── composeProps.ts ├── getScrollBarSize.tsx ├── hooks │ ├── useEffect.ts │ ├── useEvent.ts │ ├── useId.ts │ ├── useLayoutEffect.ts │ ├── useMemo.ts │ ├── useMergedState.ts │ ├── useMobile.ts │ ├── useState.ts │ └── useSyncState.ts ├── index.ts ├── isEqual.ts ├── isMobile.ts ├── omit.ts ├── pickAttrs.ts ├── proxyObject.ts ├── raf.ts ├── ref.ts ├── setStyle.ts ├── test │ ├── domHook.ts │ └── isEqual.test.ts ├── utils │ ├── get.ts │ └── set.ts └── warning.ts ├── tests ├── Portal.test.tsx ├── composeProps.test.ts ├── contains.test.tsx ├── domHook.test.ts ├── dynamicCSS.test.tsx ├── findDOMNode.test.tsx ├── focus.test.ts ├── getScrollBarSize.test.ts ├── hooks-17.test.tsx ├── hooks.test.tsx ├── omit.test.ts ├── proxyObject.test.ts ├── raf.test.ts ├── react.test.tsx ├── ref-19.test.tsx ├── ref.test.tsx ├── scrollLocker.test.ts ├── setStyle.test.ts ├── shadow.test.tsx ├── style.test.ts ├── toArray-19.test.tsx ├── toArray.test.tsx ├── utils.test.ts └── warning.test.ts └── tsconfig.json /.dumirc.ts: -------------------------------------------------------------------------------- 1 | // more config: https://d.umijs.org/config 2 | import { defineConfig } from 'dumi'; 3 | 4 | const basePath = process.env.GITHUB_ACTIONS ? '/util/' : '/'; 5 | const publicPath = process.env.GITHUB_ACTIONS ? '/util/' : '/'; 6 | 7 | export default defineConfig({ 8 | favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'], 9 | themeConfig: { 10 | name: 'Util', 11 | logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', 12 | }, 13 | outputPath: '.doc', 14 | exportStatic: {}, 15 | base: basePath, 16 | publicPath, 17 | }); 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | # Unix-style newlines with a newline ending every file 5 | [*.{js,css}] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [require.resolve('@umijs/fabric/dist/eslint')], 3 | rules: { 4 | 'react/no-did-update-set-state': 0, 5 | 'react/no-find-dom-node': 0, 6 | 'import/no-extraneous-dependencies': 0, 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /.fatherrc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'father'; 2 | 3 | export default defineConfig({ 4 | // Locked version only supports 1.0.0 5 | plugins: ['@rc-component/father-plugin'], 6 | }); 7 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: daily 7 | time: "21:00" 8 | open-pull-requests-limit: 10 9 | ignore: 10 | - dependency-name: eslint 11 | versions: 12 | - 7.18.0 13 | - 7.19.0 14 | - 7.20.0 15 | - 7.21.0 16 | - 7.22.0 17 | - 7.23.0 18 | - 7.24.0 19 | - dependency-name: "@types/jest" 20 | versions: 21 | - 26.0.20 22 | - 26.0.21 23 | - 26.0.22 24 | - dependency-name: react 25 | versions: 26 | - 17.0.1 27 | - dependency-name: "@types/react" 28 | versions: 29 | - 17.0.0 30 | - 17.0.1 31 | - 17.0.2 32 | - 17.0.3 33 | - dependency-name: "@types/react-dom" 34 | versions: 35 | - 17.0.0 36 | - 17.0.1 37 | - 17.0.2 38 | - dependency-name: react-dom 39 | versions: 40 | - 17.0.1 41 | - dependency-name: np 42 | versions: 43 | - 7.2.0 44 | - 7.3.0 45 | - 7.4.0 46 | - dependency-name: react-is 47 | versions: 48 | - 17.0.1 49 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL" 2 | 3 | on: 4 | push: 5 | branches: [ "master" ] 6 | pull_request: 7 | branches: [ "master" ] 8 | schedule: 9 | - cron: "4 6 * * 0" 10 | 11 | jobs: 12 | analyze: 13 | name: Analyze 14 | runs-on: ubuntu-latest 15 | permissions: 16 | actions: read 17 | contents: read 18 | security-events: write 19 | 20 | strategy: 21 | fail-fast: false 22 | matrix: 23 | language: [ javascript ] 24 | 25 | steps: 26 | - name: Checkout 27 | uses: actions/checkout@v3 28 | 29 | - name: Initialize CodeQL 30 | uses: github/codeql-action/init@v2 31 | with: 32 | languages: ${{ matrix.language }} 33 | queries: +security-and-quality 34 | 35 | - name: Autobuild 36 | uses: github/codeql-action/autobuild@v2 37 | 38 | - name: Perform CodeQL Analysis 39 | uses: github/codeql-action/analyze@v2 40 | with: 41 | category: "/language:${{ matrix.language }}" 42 | -------------------------------------------------------------------------------- /.github/workflows/react-component-ci.yml: -------------------------------------------------------------------------------- 1 | name: ✅ test 2 | on: [push, pull_request] 3 | jobs: 4 | test: 5 | uses: react-component/rc-test/.github/workflows/test-npm.yml@main 6 | secrets: inherit 7 | -------------------------------------------------------------------------------- /.github/workflows/site-deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy website 2 | on: 3 | push: 4 | tags: 5 | - '*' 6 | workflow_dispatch: 7 | 8 | permissions: 9 | contents: write 10 | 11 | jobs: 12 | build-and-deploy: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: checkout 16 | uses: actions/checkout@v3 17 | 18 | - name: setup node 19 | uses: actions/setup-node@v1 20 | with: 21 | node-version: 20 22 | 23 | - name: create package-lock.json 24 | run: npm i --package-lock-only --ignore-scripts 25 | 26 | - name: Install dependencies 27 | run: npm ci 28 | 29 | - name: build Docs 30 | run: npm run build 31 | 32 | - name: Deploy to GitHub Pages 33 | uses: peaceiris/actions-gh-pages@v3 34 | with: 35 | github_token: ${{ secrets.GITHUB_TOKEN }} 36 | publish_dir: ./.doc 37 | force_orphan: true 38 | user_name: 'github-actions[bot]' 39 | user_email: 'github-actions[bot]@users.noreply.github.com' 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .storybook 2 | *.iml 3 | *.log 4 | .idea 5 | .ipr 6 | .iws 7 | *~ 8 | ~* 9 | *.diff 10 | *.patch 11 | *.bak 12 | .DS_Store 13 | Thumbs.db 14 | .project 15 | .*proj 16 | .svn 17 | *.swp 18 | *.swo 19 | *.pyc 20 | *.pyo 21 | node_modules 22 | .cache 23 | *.css 24 | build 25 | lib 26 | coverage 27 | /es/ 28 | package-lock.json 29 | pnpm-lock.yaml 30 | yarn.lock 31 | .doc 32 | bun.lockb 33 | 34 | # umi 35 | .umi 36 | .umi-production 37 | .umi-test 38 | .env.local 39 | 40 | .dumi/tmp 41 | .dumi/tmp-test 42 | .dumi/tmp-production 43 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": true, 4 | "singleQuote": true, 5 | "tabWidth": 2, 6 | "trailingComma": "all", 7 | "arrowParens": "avoid" 8 | } 9 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | # History 2 | 3 | --- 4 | 5 | ## 5.0.0 6 | 7 | - Remove `prop-types` from deps. 8 | - Remove `add-dom-event-listener` from deps. 9 | - Remove `react-lifecycles-compact` from deps. 10 | 11 | ## 4.16.1 / 2019-12-09 12 | 13 | - PortaWrapper add `switchScrollingEffect` prop. 14 | - Add `setStyle`. 15 | - Improve `switchScrollingEffect` when closed 16 | 17 | ## 4.15.0 / 2019-11-09 18 | 19 | - Add `unsafeLifecyclesPolyfill`. ant-design/ant-design#9792 20 | 21 | ## 4.14.0 / 2019-10-29 22 | 23 | - add `supportRef` check 24 | 25 | ## 4.13.0 / 2019-10-10 26 | 27 | - add `domHooks` for test 28 | 29 | ## 4.12.0 / 2019-10-08 30 | 31 | - add `ref` util 32 | 33 | ## 4.11.0 / 2019-08-23 34 | 35 | - warning support `noteOnce` 36 | 37 | ## 4.8.0 / 2019-07-09 38 | 39 | - add findDOMNode to check if a DOM first and then use native findDOMNode 40 | 41 | ## 4.7.0 / 2019-07-08 42 | 43 | - add PortalWrapper to support body scroll control 44 | 45 | ## 4.6.0 / 2016-10-15 46 | 47 | - addDOMEventListener support option 48 | 49 | ## 3.4.0 / 2016-08-16 50 | 51 | - add getScrollBarSize 52 | 53 | ## 3.3.0 / 2016-07-18 54 | 55 | - add getContainerRenderMixin 56 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-present yiminghe 4 | Copyright (c) 2015-present Alipay.com, https://www.alipay.com/ 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 17 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rc-util 2 | 3 | Common Utils For React Component. 4 | 5 | [![NPM version][npm-image]][npm-url] 6 | [![npm download][download-image]][download-url] 7 | [![build status][github-actions-image]][github-actions-url] 8 | [![Codecov][codecov-image]][codecov-url] 9 | [![bundle size][bundlephobia-image]][bundlephobia-url] 10 | [![dumi][dumi-image]][dumi-url] 11 | 12 | [npm-image]: http://img.shields.io/npm/v/rc-util.svg?style=flat-square 13 | [npm-url]: http://npmjs.org/package/rc-util 14 | [travis-image]: https://img.shields.io/travis/react-component/util/master?style=flat-square 15 | [travis-url]: https://travis-ci.com/react-component/util 16 | [github-actions-image]: https://github.com/react-component/util/workflows/CI/badge.svg 17 | [github-actions-url]: https://github.com/react-component/util/actions 18 | [codecov-image]: https://img.shields.io/codecov/c/github/react-component/util/master.svg?style=flat-square 19 | [codecov-url]: https://app.codecov.io/gh/react-component/util 20 | [david-url]: https://david-dm.org/react-component/util 21 | [david-image]: https://david-dm.org/react-component/util/status.svg?style=flat-square 22 | [david-dev-url]: https://david-dm.org/react-component/util?type=dev 23 | [david-dev-image]: https://david-dm.org/react-component/util/dev-status.svg?style=flat-square 24 | [download-image]: https://img.shields.io/npm/dm/rc-util.svg?style=flat-square 25 | [download-url]: https://npmjs.org/package/rc-util 26 | [bundlephobia-url]: https://bundlephobia.com/package/rc-util 27 | [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-util 28 | [dumi-url]: https://github.com/umijs/dumi 29 | [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square 30 | 31 | ## Install 32 | 33 | [![rc-util](https://nodei.co/npm/rc-util.png)](https://npmjs.org/package/rc-util) 34 | 35 | ## API 36 | 37 | ### createChainedFunction 38 | 39 | > (...functions): Function 40 | 41 | Create a function which will call all the functions with it's arguments from left to right. 42 | 43 | ```jsx|pure 44 | import createChainedFunction from 'rc-util/lib/createChainedFunction'; 45 | ``` 46 | 47 | ### deprecated 48 | 49 | > (prop: string, instead: string, component: string): void 50 | 51 | Log an error message to warn developers that `prop` is deprecated. 52 | 53 | ```jsx|pure 54 | import deprecated from 'rc-util/lib/deprecated'; 55 | ``` 56 | 57 | ### getContainerRenderMixin 58 | 59 | > (config: Object): Object 60 | 61 | To generate a mixin which will render specific component into specific container automatically. 62 | 63 | ```jsx|pure 64 | import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin'; 65 | ``` 66 | 67 | Fields in `config` and their meanings. 68 | 69 | | Field | Type | Description | Default | 70 | | ------------- | ---------------------------- | -------------------------------------------------------------------------- | ------- | 71 | | autoMount | boolean | Whether to render component into container automatically | true | 72 | | autoDestroy | boolean | Whether to remove container automatically while the component is unmounted | true | 73 | | isVisible | (instance): boolean | A function to get current visibility of the component | - | 74 | | isForceRender | (instance): boolean | A function to determine whether to render popup even it's not visible | - | 75 | | getComponent | (instance, extra): ReactNode | A function to get the component which will be rendered into container | - | 76 | | getContainer | (instance): HTMLElement | A function to get the container | | 77 | 78 | ### Portal 79 | 80 | Render children to the specific container; 81 | 82 | ```jsx|pure 83 | import Portal from 'rc-util/lib/Portal'; 84 | ``` 85 | 86 | Props: 87 | 88 | | Prop | Type | Description | Default | 89 | | ------------ | --------------- | ------------------------------- | ------- | 90 | | children | ReactChildren | Content render to the container | - | 91 | | getContainer | (): HTMLElement | A function to get the container | - | 92 | 93 | ### getScrollBarSize 94 | 95 | > (fresh?: boolean): number 96 | 97 | Get the width of scrollbar. 98 | 99 | ```jsx|pure 100 | import getScrollBarSize from 'rc-util/lib/getScrollBarSize'; 101 | ``` 102 | 103 | ### guid 104 | 105 | > (): string 106 | 107 | To generate a global unique id across current application. 108 | 109 | ```jsx|pure 110 | import guid from 'rc-util/lib/guid'; 111 | ``` 112 | 113 | ### pickAttrs 114 | 115 | > (props: Object): Object 116 | 117 | Pick valid HTML attributes and events from props. 118 | 119 | ```jsx|pure 120 | import pickAttrs from 'rc-util/lib/pickAttrs'; 121 | ``` 122 | 123 | ### warn 124 | 125 | > (msg: string): void 126 | 127 | A shallow wrapper of `console.warn`. 128 | 129 | ```jsx|pure 130 | import warn from 'rc-util/lib/warn'; 131 | ``` 132 | 133 | ### warning 134 | 135 | > (valid: boolean, msg: string): void 136 | 137 | A shallow wrapper of [warning](https://github.com/BerkeleyTrue/warning), but only warning once for the same message. 138 | 139 | ```jsx|pure 140 | import warning, { noteOnce } from 'rc-util/lib/warning'; 141 | 142 | warning(false, '[antd Component] test hello world'); 143 | 144 | // Low level note 145 | noteOnce(false, '[antd Component] test hello world'); 146 | ``` 147 | 148 | ### Children 149 | 150 | A collection of functions to operate React elements' children. 151 | 152 | #### Children/mapSelf 153 | 154 | > (children): children 155 | 156 | Return a shallow copy of children. 157 | 158 | ```jsx|pure 159 | import mapSelf from 'rc-util/lib/Children/mapSelf'; 160 | ``` 161 | 162 | #### Children/toArray 163 | 164 | > (children: ReactNode[]): ReactNode[] 165 | 166 | Convert children into an array. 167 | 168 | ```jsx|pure 169 | import toArray from 'rc-util/lib/Children/toArray'; 170 | ``` 171 | 172 | ### Dom 173 | 174 | A collection of functions to operate DOM elements. 175 | 176 | #### Dom/addEventlistener 177 | 178 | > (target: ReactNode, eventType: string, listener: Function): { remove: Function } 179 | 180 | A shallow wrapper of [add-dom-event-listener](https://github.com/yiminghe/add-dom-event-listener). 181 | 182 | ```jsx|pure 183 | import addEventlistener from 'rc-util/lib/Dom/addEventlistener'; 184 | ``` 185 | 186 | #### Dom/canUseDom 187 | 188 | > (): boolean 189 | 190 | Check if DOM is available. 191 | 192 | ```jsx|pure 193 | import canUseDom from 'rc-util/lib/Dom/canUseDom'; 194 | ``` 195 | 196 | #### Dom/class 197 | 198 | A collection of functions to operate DOM nodes' class name. 199 | 200 | - `hasClass(node: HTMLElement, className: string): boolean` 201 | - `addClass(node: HTMLElement, className: string): void` 202 | - `removeClass(node: HTMLElement, className: string): void` 203 | 204 | ```jsx|pure 205 | import cssClass from 'rc-util/lib/Dom/class; 206 | ``` 207 | 208 | #### Dom/contains 209 | 210 | > (root: HTMLElement, node: HTMLElement): boolean 211 | 212 | Check if node is equal to root or in the subtree of root. 213 | 214 | ```jsx|pure 215 | import contains from 'rc-util/lib/Dom/contains'; 216 | ``` 217 | 218 | #### Dom/css 219 | 220 | A collection of functions to get or set css styles. 221 | 222 | - `get(node: HTMLElement, name?: string): any` 223 | - `set(node: HTMLElement, name?: string, value: any) | set(node, object)` 224 | - `getOuterWidth(el: HTMLElement): number` 225 | - `getOuterHeight(el: HTMLElement): number` 226 | - `getDocSize(): { width: number, height: number }` 227 | - `getClientSize(): { width: number, height: number }` 228 | - `getScroll(): { scrollLeft: number, scrollTop: number }` 229 | - `getOffset(node: HTMLElement): { left: number, top: number }` 230 | 231 | ```jsx|pure 232 | import css from 'rc-util/lib/Dom/css'; 233 | ``` 234 | 235 | #### Dom/focus 236 | 237 | A collection of functions to operate focus status of DOM node. 238 | 239 | - `saveLastFocusNode(): void` 240 | - `clearLastFocusNode(): void` 241 | - `backLastFocusNode(): void` 242 | - `getFocusNodeList(node: HTMLElement): HTMLElement[]` get a list of focusable nodes from the subtree of node. 243 | - `limitTabRange(node: HTMLElement, e: Event): void` 244 | 245 | ```jsx|pure 246 | import focus from 'rc-util/lib/Dom/focus'; 247 | ``` 248 | 249 | #### Dom/support 250 | 251 | > { animation: boolean | Object, transition: boolean | Object } 252 | 253 | A flag to tell whether current environment supports `animationend` or `transitionend`. 254 | 255 | ```jsx|pure 256 | import support from 'rc-util/lib/Dom/support'; 257 | ``` 258 | 259 | ### KeyCode 260 | 261 | > Enum 262 | 263 | Enum of KeyCode, please check the [definition](https://github.com/react-component/util/blob/master/src/KeyCode.ts) of it. 264 | 265 | ```jsx|pure 266 | import KeyCode from 'rc-util/lib/KeyCode'; 267 | ``` 268 | 269 | #### KeyCode.isTextModifyingKeyEvent 270 | 271 | > (e: Event): boolean 272 | 273 | Whether text and modified key is entered at the same time. 274 | 275 | #### KeyCode.isCharacterKey 276 | 277 | > (keyCode: KeyCode): boolean 278 | 279 | Whether character is entered. 280 | 281 | ### ScrollLocker 282 | 283 | > ScrollLocker<{lock: (options: {container: HTMLElement}) => void, unLock: () => void}> 284 | 285 | improve shake when page scroll bar hidden. 286 | 287 | `ScrollLocker` change body style, and add a class `ant-scrolling-effect` when called, so if you page look abnormal, please check this; 288 | 289 | ```js 290 | import ScrollLocker from 'rc-util/lib/Dom/scrollLocker'; 291 | 292 | const scrollLocker = new ScrollLocker(); 293 | 294 | // lock 295 | scrollLocker.lock() 296 | 297 | // unLock 298 | scrollLocker.unLock() 299 | ``` 300 | 301 | ## License 302 | 303 | [MIT](/LICENSE) 304 | -------------------------------------------------------------------------------- /docs/demo/dynaymicCSS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: dynaymicCSS 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/getScrollBarSize.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: getScrollBarSize 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/portal.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: portal 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/styleChecker.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: styleChecker 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/toArray.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: toArray 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/examples/dynaymicCSS.tsx: -------------------------------------------------------------------------------- 1 | import type { Prepend } from 'rc-util/es/Dom/dynamicCSS'; 2 | import { removeCSS, updateCSS } from 'rc-util/es/Dom/dynamicCSS'; 3 | import React from 'react'; 4 | 5 | function injectStyle(id: number, prepend?: Prepend, priority?: number) { 6 | const randomColor = Math.floor(Math.random() * 16777215).toString(16); 7 | 8 | updateCSS(`body { background: #${randomColor} }`, `style-${id}`, { 9 | prepend, 10 | priority, 11 | }); 12 | } 13 | 14 | export default () => { 15 | const [id, setId] = React.useState(0); 16 | const idRef = React.useRef(id); 17 | idRef.current = id; 18 | 19 | // Clean up 20 | React.useEffect(() => { 21 | return () => { 22 | for (let i = 0; i <= idRef.current; i += 1) { 23 | removeCSS(`style-${i}`); 24 | } 25 | }; 26 | }, []); 27 | 28 | return ( 29 | <> 30 | 38 | 39 | 47 | 48 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /docs/examples/getScrollBarSize.tsx: -------------------------------------------------------------------------------- 1 | import getScrollBarSize, { 2 | getTargetScrollBarSize, 3 | } from 'rc-util/es/getScrollBarSize'; 4 | import React from 'react'; 5 | 6 | const cssText = ` 7 | #customizeContainer::-webkit-scrollbar { 8 | width: 2em; 9 | height: 23px; 10 | background: blue; 11 | } 12 | 13 | #customizeContainer::-webkit-scrollbar-thumb { 14 | background: red; 15 | height: 30px; 16 | } 17 | 18 | #scrollContainer { 19 | scrollbar-color: red orange; 20 | scrollbar-width: thin; 21 | } 22 | `; 23 | 24 | export default () => { 25 | const defaultRef = React.useRef(); 26 | const webkitRef = React.useRef(); 27 | const scrollRef = React.useRef(); 28 | const [sizeData, setSizeData] = React.useState(''); 29 | 30 | React.useEffect(() => { 31 | const originSize = getScrollBarSize(); 32 | const defaultSize = getTargetScrollBarSize(defaultRef.current); 33 | const webkitSize = getTargetScrollBarSize(webkitRef.current); 34 | const scrollSize = getTargetScrollBarSize(scrollRef.current); 35 | 36 | setSizeData( 37 | [ 38 | `Origin: ${originSize}`, 39 | `Default: ${defaultSize.width}/${defaultSize.height}`, 40 | `Webkit: ${webkitSize.width}/${webkitSize.height}`, 41 | `Scroll: ${scrollSize.width}/${scrollSize.height}`, 42 | ].join(', '), 43 | ); 44 | }, []); 45 | 46 | return ( 47 |
48 |