├── .dockerignore ├── .eslintignore ├── .eslintrc.json ├── .github └── workflows │ ├── ci.yml │ └── publish.yml ├── .gitignore ├── .npmignore ├── .npmrc ├── .npmrc.template ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── CHANGELOG.md ├── Dockerfile.publish ├── Dockerfile.test ├── README.md ├── babelrc.build.json ├── babelrc.modules.json ├── babelrc.tests.json ├── commitlint.config.js ├── docs ├── .nojekyll ├── assets │ ├── highlight.css │ ├── icons.css │ ├── icons.png │ ├── icons@2x.png │ ├── main.js │ ├── search.js │ ├── style.css │ ├── widgets.png │ └── widgets@2x.png ├── index.html └── modules.html ├── jest.config.js ├── package.json ├── scripts └── validateDependencyTree.js ├── src ├── index.ts └── types │ └── InferProps.ts ├── tests ├── fastWrap.test.tsx ├── memoWrap.test.tsx └── wrap.test.tsx ├── tsconfig.json ├── tsconfig.typedefs.json └── yarn.lock /.dockerignore: -------------------------------------------------------------------------------- 1 | .cache 2 | node_modules 3 | .github 4 | .git 5 | .idea 6 | .vscode 7 | .gitignore 8 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["react-app"], 3 | "plugins": ["@typescript-eslint", "react-hooks"] 4 | } 5 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: 'ci' 2 | on: 3 | pull_request: 4 | branches: 5 | - master 6 | - devel 7 | 8 | jobs: 9 | test: 10 | name: 'Test' 11 | runs-on: 'ubuntu-latest' 12 | if: "!contains(github.event.head_commit.message,'#skip-ci')" 13 | strategy: 14 | matrix: 15 | node-version: [16.x, 14.x] 16 | steps: 17 | - uses: actions/checkout@v2 18 | - name: Use Node.js ${{ matrix.node-version }} 19 | uses: actions/setup-node@v1 20 | - run: yarn install 21 | - name: Typecheck 22 | run: yarn typecheck 23 | - name: Lint 24 | run: yarn lint 25 | - name: Validate dependency tree 26 | run: yarn validateDepsTree 27 | - name: Test 28 | run: yarn test 29 | env: 30 | CI: true 31 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: 'publish' 2 | 3 | on: 4 | push: 5 | branches: 6 | - 'master' 7 | 8 | jobs: 9 | release: 10 | name: 'Publish' 11 | runs-on: 'ubuntu-latest' 12 | if: "!contains(github.event.head_commit.message,'#no-publish')" 13 | steps: 14 | - uses: actions/checkout@v2 15 | - uses: actions/setup-node@v1 16 | with: 17 | node-version: '16.x' 18 | registry-url: 'https://registry.npmjs.org' 19 | scope: 'atlasgroup' 20 | - name: 'install' 21 | run: yarn install 22 | - name: 'build-publish' 23 | run: npm publish --access public 24 | env: 25 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_PUBLISH }} 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | # testing 4 | /coverage 5 | 6 | # production 7 | /lib 8 | /storybook-static 9 | 10 | # misc 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | 20 | #idea config 21 | .idea 22 | 23 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # dirs 2 | .vscode 3 | .github 4 | scripts 5 | docs 6 | tests 7 | 8 | # config 9 | tsconfig.json 10 | tsconfig.typedefs.json 11 | .eslint* 12 | babelrc* 13 | commitlint.config.json 14 | Docker* 15 | jest.config.js 16 | .npm* 17 | 18 | # git 19 | .gitignore 20 | 21 | # tests 22 | *.test.* 23 | 24 | # lockfile 25 | yarn.lock -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | message="chore(release): %s" 2 | tag-version-prefix="" 3 | sign-git-tag=false -------------------------------------------------------------------------------- /.npmrc.template: -------------------------------------------------------------------------------- 1 | registry="$NPM_REGISTRY" 2 | always-auth=true 3 | _auth="$NPM_AUTH" 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .idea 3 | .next 4 | .prettierrc 5 | .prettierignore 6 | .gitignore 7 | .dockerignore 8 | Dockerfile 9 | Dockerfile.dev 10 | yarn.lock 11 | lib -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": true, 4 | "singleQuote": true, 5 | "bracketSpacing": true, 6 | "tabWidth": 4, 7 | "arrowParens": "always", 8 | "trailingComma": "es5", 9 | "jsxSingleQuote": false 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules\\typescript\\lib" 3 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # [1.3.0](https://github.com/atlasgroupcz/react-wrap/compare/1.2.0...1.3.0) (2022-05-24) 2 | 3 | # [1.2.0](https://github.com/atlasgroupcz/react-wrap/compare/1.1.0...1.2.0) (2021-06-18) 4 | 5 | # [1.1.0](https://github.com/atlasgroupcz/react-wrap/compare/1.0.0...1.1.0) (2021-05-26) 6 | 7 | ### Features 8 | 9 | - ✨ fastWrap ([8108690](https://github.com/atlasgroupcz/react-wrap/commit/8108690429ce70053c543bc4da4bc7d50aa11cef)) 10 | 11 | # 1.0.0 (2021-05-07) 12 | 13 | ### Bug Fixes 14 | 15 | - 🐛 passthrough children ([7a99fa2](https://github.com/atlasgroupcz/react-wrap/commit/7a99fa2e40f4adb703f83f1708360d24ee4f4b71)) 16 | -------------------------------------------------------------------------------- /Dockerfile.publish: -------------------------------------------------------------------------------- 1 | 2 | FROM node:12 3 | 4 | # install envsubst 5 | RUN apt-get update 6 | RUN apt-get install -y gettext-base 7 | 8 | WORKDIR /usr/src/app 9 | 10 | COPY . . 11 | RUN yarn install 12 | 13 | CMD envsubst < "/usr/src/app/.npmrc.template" > "/usr/src/app/.npmrc" && cat "/usr/src/app/.npmrc" && yarn build && npm publish 14 | -------------------------------------------------------------------------------- /Dockerfile.test: -------------------------------------------------------------------------------- 1 | FROM node:12 2 | WORKDIR /usr/src/app 3 | COPY . . 4 | RUN yarn install 5 | CMD yarn integrate 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Wrap 🌯 2 | 3 | A straight-forward react component logic reusing and close-coupling prevention utility 4 | 5 | ### [Documentation 📚](https://atlasgroupcz.github.io/react-wrap/) 6 | 7 | ## Quick start 8 | 9 | ### Installation 10 | 11 | npm: 12 | 13 | ``` 14 | npm install @atlasgroup/react-wrap 15 | ``` 16 | 17 | yarn: 18 | 19 | ``` 20 | yarn add @atlasgroup/react-wrap 21 | ``` 22 | 23 | ### Usage 24 | 25 | `react-wrap` enables a typesafe and highly flexible way of implementing logic for presentational components, or extending/simplifying others. 26 | 27 | A component and a hook are passed as arguments to `wrap`. 28 | 29 | `wrap` creates a component where the input props are preprocessed by the controller hook before passing them to the original component, essentially working as middleware, but for react components. 30 | 31 | #### Basic scheme 32 | 33 | ```tsx 34 | const Component = wrap(BaseComponent, useMyHook); 35 | ``` 36 | 37 | ``` 38 | | pass props to Component 39 | | props are intercepted by useMyHook useMyHook({prop1: value1}) 40 | | *do stuff in useMyHook* 41 | V return new props for BaseComponent 42 | ``` 43 | 44 | ### Examples 45 | 46 | #### Implementing a presentational component 47 | 48 | ```tsx 49 | const useTogglableButton = (): ButtonProps => { 50 | const [isToggled, setIsToggled] = useState(false); 51 | 52 | const onClick = useCallback(() => setIsToggled((current) => !current), []); 53 | 54 | return { 55 | color: isToggled ? 'red' : 'green', 56 | onClick, 57 | }; 58 | }; 59 | 60 | const TogglableButton = wrap(Button, useTogglableButton); 61 | ``` 62 | 63 | #### Extending and/or hydrating an existing component 64 | 65 | ```tsx 66 | type CalendarWithEventsProps = CalendarProps & { showEvents?: boolean }; 67 | 68 | const useEvents = ({ 69 | showEvents, 70 | ...props 71 | }: CalendarWithEventsProps): CalendarProps => { 72 | // Don't query if events will not be shown 73 | const { data } = useEvents({ skip: !showEvents }); 74 | 75 | const events = data?.events; 76 | 77 | return { 78 | events, 79 | ...props, 80 | }; 81 | }; 82 | 83 | const CalendarWithEvents = wrap(Calendar, useEvents); 84 | ``` 85 | 86 | #### Simplifying an existing component 87 | 88 | ```tsx 89 | type LessComplicatedComponentProps = Omit< 90 | SuperComplicatedComponentProps, 91 | 'some' | 'random' | 'stuff' 92 | >; 93 | 94 | const useLessComplicatedComponent = ( 95 | props: LessComplicatedComponentProps 96 | ): SuperComplicatedComponentProps => { 97 | // Evaluate "some random stuff" 98 | // ... 99 | 100 | return { 101 | some, 102 | random, 103 | stuff, 104 | ...props, 105 | }; 106 | }; 107 | 108 | const LessComplicatedComponent = wrap( 109 | SuperComplicatedComponent, 110 | useLessComplicatedComponent 111 | ); 112 | ``` 113 | 114 | --- 115 | 116 | ### react-wrap variants 117 | 118 | `react-wrap` exposes three slightly different variants of itself: 119 | 120 | - `wrap` - gives `children` special treatment as a prop and passes them down to the wrapped component directly 121 | - `fastWrap` - ignores `children`, absolute control over the flow of props is given to the hook passed as an argument 122 | - `memoWrap` - wraps the resulting component in a `React.memo`, useful for optimizations, exposes a third parameter, a custom `arePropsEqual`, treats `children` like `wrap` 123 | 124 | --- 125 | 126 | ### Bug reports, feature requests and questions 127 | 128 | Feel free to file a bug report, feature request or a question in the issues section with the correspoding **[BUG]**, **[FEATURE]**, **[QUESTION]** prefix in the title. 129 | 130 | ### Contributing 131 | 132 | Any contributions must pass CI checks and a code review by a project maintainer. Please rebase your branches with the current `master` before submitting a pull request. 133 | -------------------------------------------------------------------------------- /babelrc.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./babelrc.modules.json", 3 | "presets": [ 4 | [ 5 | "@babel/preset-env", 6 | { 7 | "targets": { 8 | "browsers": ["defaults", "dead"] 9 | } 10 | } 11 | ], 12 | "@babel/preset-typescript", 13 | "minify" 14 | ], 15 | "plugins": [ 16 | "babel-plugin-transform-class-properties", 17 | [ 18 | "@babel/plugin-transform-runtime", 19 | { 20 | "absoluteRuntime": false, 21 | "corejs": false, 22 | "helpers": false, 23 | "regenerator": false 24 | } 25 | ] 26 | ], 27 | "comments": false 28 | } 29 | -------------------------------------------------------------------------------- /babelrc.modules.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | [ 4 | "module-resolver", 5 | { 6 | "root": ["./src"], 7 | "alias": { 8 | "@library": "./src" 9 | } 10 | } 11 | ] 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /babelrc.tests.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./babelrc.modules.json", 3 | "plugins": ["babel-plugin-transform-class-properties"], 4 | "presets": ["react-app"] 5 | } 6 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. -------------------------------------------------------------------------------- /docs/assets/highlight.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --light-hl-0: #001080; 3 | --dark-hl-0: #9cdcfe; 4 | --light-hl-1: #000000; 5 | --dark-hl-1: #d4d4d4; 6 | --light-hl-2: #0000ff; 7 | --dark-hl-2: #569cd6; 8 | --light-hl-3: #0070c1; 9 | --dark-hl-3: #4fc1ff; 10 | --light-hl-4: #795e26; 11 | --dark-hl-4: #dcdcaa; 12 | --light-hl-5: #af00db; 13 | --dark-hl-5: #c586c0; 14 | --light-hl-6: #267f99; 15 | --dark-hl-6: #4ec9b0; 16 | --light-hl-7: #a31515; 17 | --dark-hl-7: #ce9178; 18 | --light-hl-8: #008000; 19 | --dark-hl-8: #6a9955; 20 | --light-code-background: #f5f5f5; 21 | --dark-code-background: #1e1e1e; 22 | } 23 | 24 | @media (prefers-color-scheme: light) { 25 | :root { 26 | --hl-0: var(--light-hl-0); 27 | --hl-1: var(--light-hl-1); 28 | --hl-2: var(--light-hl-2); 29 | --hl-3: var(--light-hl-3); 30 | --hl-4: var(--light-hl-4); 31 | --hl-5: var(--light-hl-5); 32 | --hl-6: var(--light-hl-6); 33 | --hl-7: var(--light-hl-7); 34 | --hl-8: var(--light-hl-8); 35 | --code-background: var(--light-code-background); 36 | } 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --hl-0: var(--dark-hl-0); 42 | --hl-1: var(--dark-hl-1); 43 | --hl-2: var(--dark-hl-2); 44 | --hl-3: var(--dark-hl-3); 45 | --hl-4: var(--dark-hl-4); 46 | --hl-5: var(--dark-hl-5); 47 | --hl-6: var(--dark-hl-6); 48 | --hl-7: var(--dark-hl-7); 49 | --hl-8: var(--dark-hl-8); 50 | --code-background: var(--dark-code-background); 51 | } 52 | } 53 | 54 | body.light { 55 | --hl-0: var(--light-hl-0); 56 | --hl-1: var(--light-hl-1); 57 | --hl-2: var(--light-hl-2); 58 | --hl-3: var(--light-hl-3); 59 | --hl-4: var(--light-hl-4); 60 | --hl-5: var(--light-hl-5); 61 | --hl-6: var(--light-hl-6); 62 | --hl-7: var(--light-hl-7); 63 | --hl-8: var(--light-hl-8); 64 | --code-background: var(--light-code-background); 65 | } 66 | 67 | body.dark { 68 | --hl-0: var(--dark-hl-0); 69 | --hl-1: var(--dark-hl-1); 70 | --hl-2: var(--dark-hl-2); 71 | --hl-3: var(--dark-hl-3); 72 | --hl-4: var(--dark-hl-4); 73 | --hl-5: var(--dark-hl-5); 74 | --hl-6: var(--dark-hl-6); 75 | --hl-7: var(--dark-hl-7); 76 | --hl-8: var(--dark-hl-8); 77 | --code-background: var(--dark-code-background); 78 | } 79 | 80 | .hl-0 { 81 | color: var(--hl-0); 82 | } 83 | .hl-1 { 84 | color: var(--hl-1); 85 | } 86 | .hl-2 { 87 | color: var(--hl-2); 88 | } 89 | .hl-3 { 90 | color: var(--hl-3); 91 | } 92 | .hl-4 { 93 | color: var(--hl-4); 94 | } 95 | .hl-5 { 96 | color: var(--hl-5); 97 | } 98 | .hl-6 { 99 | color: var(--hl-6); 100 | } 101 | .hl-7 { 102 | color: var(--hl-7); 103 | } 104 | .hl-8 { 105 | color: var(--hl-8); 106 | } 107 | pre, 108 | code { 109 | background: var(--code-background); 110 | } 111 | -------------------------------------------------------------------------------- /docs/assets/icons.css: -------------------------------------------------------------------------------- 1 | .tsd-kind-icon { 2 | display: block; 3 | position: relative; 4 | padding-left: 20px; 5 | text-indent: -20px; 6 | } 7 | .tsd-kind-icon:before { 8 | content: ''; 9 | display: inline-block; 10 | vertical-align: middle; 11 | width: 17px; 12 | height: 17px; 13 | margin: 0 3px 2px 0; 14 | background-image: url(./icons.png); 15 | } 16 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 17 | .tsd-kind-icon:before { 18 | background-image: url(./icons@2x.png); 19 | background-size: 238px 204px; 20 | } 21 | } 22 | 23 | .tsd-signature.tsd-kind-icon:before { 24 | background-position: 0 -153px; 25 | } 26 | 27 | .tsd-kind-object-literal > .tsd-kind-icon:before { 28 | background-position: 0px -17px; 29 | } 30 | .tsd-kind-object-literal.tsd-is-protected > .tsd-kind-icon:before { 31 | background-position: -17px -17px; 32 | } 33 | .tsd-kind-object-literal.tsd-is-private > .tsd-kind-icon:before { 34 | background-position: -34px -17px; 35 | } 36 | 37 | .tsd-kind-class > .tsd-kind-icon:before { 38 | background-position: 0px -34px; 39 | } 40 | .tsd-kind-class.tsd-is-protected > .tsd-kind-icon:before { 41 | background-position: -17px -34px; 42 | } 43 | .tsd-kind-class.tsd-is-private > .tsd-kind-icon:before { 44 | background-position: -34px -34px; 45 | } 46 | 47 | .tsd-kind-class.tsd-has-type-parameter > .tsd-kind-icon:before { 48 | background-position: 0px -51px; 49 | } 50 | .tsd-kind-class.tsd-has-type-parameter.tsd-is-protected 51 | > .tsd-kind-icon:before { 52 | background-position: -17px -51px; 53 | } 54 | .tsd-kind-class.tsd-has-type-parameter.tsd-is-private > .tsd-kind-icon:before { 55 | background-position: -34px -51px; 56 | } 57 | 58 | .tsd-kind-interface > .tsd-kind-icon:before { 59 | background-position: 0px -68px; 60 | } 61 | .tsd-kind-interface.tsd-is-protected > .tsd-kind-icon:before { 62 | background-position: -17px -68px; 63 | } 64 | .tsd-kind-interface.tsd-is-private > .tsd-kind-icon:before { 65 | background-position: -34px -68px; 66 | } 67 | 68 | .tsd-kind-interface.tsd-has-type-parameter > .tsd-kind-icon:before { 69 | background-position: 0px -85px; 70 | } 71 | .tsd-kind-interface.tsd-has-type-parameter.tsd-is-protected 72 | > .tsd-kind-icon:before { 73 | background-position: -17px -85px; 74 | } 75 | .tsd-kind-interface.tsd-has-type-parameter.tsd-is-private 76 | > .tsd-kind-icon:before { 77 | background-position: -34px -85px; 78 | } 79 | 80 | .tsd-kind-namespace > .tsd-kind-icon:before { 81 | background-position: 0px -102px; 82 | } 83 | .tsd-kind-namespace.tsd-is-protected > .tsd-kind-icon:before { 84 | background-position: -17px -102px; 85 | } 86 | .tsd-kind-namespace.tsd-is-private > .tsd-kind-icon:before { 87 | background-position: -34px -102px; 88 | } 89 | 90 | .tsd-kind-module > .tsd-kind-icon:before { 91 | background-position: 0px -102px; 92 | } 93 | .tsd-kind-module.tsd-is-protected > .tsd-kind-icon:before { 94 | background-position: -17px -102px; 95 | } 96 | .tsd-kind-module.tsd-is-private > .tsd-kind-icon:before { 97 | background-position: -34px -102px; 98 | } 99 | 100 | .tsd-kind-enum > .tsd-kind-icon:before { 101 | background-position: 0px -119px; 102 | } 103 | .tsd-kind-enum.tsd-is-protected > .tsd-kind-icon:before { 104 | background-position: -17px -119px; 105 | } 106 | .tsd-kind-enum.tsd-is-private > .tsd-kind-icon:before { 107 | background-position: -34px -119px; 108 | } 109 | 110 | .tsd-kind-enum-member > .tsd-kind-icon:before { 111 | background-position: 0px -136px; 112 | } 113 | .tsd-kind-enum-member.tsd-is-protected > .tsd-kind-icon:before { 114 | background-position: -17px -136px; 115 | } 116 | .tsd-kind-enum-member.tsd-is-private > .tsd-kind-icon:before { 117 | background-position: -34px -136px; 118 | } 119 | 120 | .tsd-kind-signature > .tsd-kind-icon:before { 121 | background-position: 0px -153px; 122 | } 123 | .tsd-kind-signature.tsd-is-protected > .tsd-kind-icon:before { 124 | background-position: -17px -153px; 125 | } 126 | .tsd-kind-signature.tsd-is-private > .tsd-kind-icon:before { 127 | background-position: -34px -153px; 128 | } 129 | 130 | .tsd-kind-type-alias > .tsd-kind-icon:before { 131 | background-position: 0px -170px; 132 | } 133 | .tsd-kind-type-alias.tsd-is-protected > .tsd-kind-icon:before { 134 | background-position: -17px -170px; 135 | } 136 | .tsd-kind-type-alias.tsd-is-private > .tsd-kind-icon:before { 137 | background-position: -34px -170px; 138 | } 139 | 140 | .tsd-kind-type-alias.tsd-has-type-parameter > .tsd-kind-icon:before { 141 | background-position: 0px -187px; 142 | } 143 | .tsd-kind-type-alias.tsd-has-type-parameter.tsd-is-protected 144 | > .tsd-kind-icon:before { 145 | background-position: -17px -187px; 146 | } 147 | .tsd-kind-type-alias.tsd-has-type-parameter.tsd-is-private 148 | > .tsd-kind-icon:before { 149 | background-position: -34px -187px; 150 | } 151 | 152 | .tsd-kind-variable > .tsd-kind-icon:before { 153 | background-position: -136px -0px; 154 | } 155 | .tsd-kind-variable.tsd-is-protected > .tsd-kind-icon:before { 156 | background-position: -153px -0px; 157 | } 158 | .tsd-kind-variable.tsd-is-private > .tsd-kind-icon:before { 159 | background-position: -119px -0px; 160 | } 161 | .tsd-kind-variable.tsd-parent-kind-class > .tsd-kind-icon:before { 162 | background-position: -51px -0px; 163 | } 164 | .tsd-kind-variable.tsd-parent-kind-class.tsd-is-inherited 165 | > .tsd-kind-icon:before { 166 | background-position: -68px -0px; 167 | } 168 | .tsd-kind-variable.tsd-parent-kind-class.tsd-is-protected 169 | > .tsd-kind-icon:before { 170 | background-position: -85px -0px; 171 | } 172 | .tsd-kind-variable.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 173 | > .tsd-kind-icon:before { 174 | background-position: -102px -0px; 175 | } 176 | .tsd-kind-variable.tsd-parent-kind-class.tsd-is-private 177 | > .tsd-kind-icon:before { 178 | background-position: -119px -0px; 179 | } 180 | .tsd-kind-variable.tsd-parent-kind-enum > .tsd-kind-icon:before { 181 | background-position: -170px -0px; 182 | } 183 | .tsd-kind-variable.tsd-parent-kind-enum.tsd-is-protected 184 | > .tsd-kind-icon:before { 185 | background-position: -187px -0px; 186 | } 187 | .tsd-kind-variable.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before { 188 | background-position: -119px -0px; 189 | } 190 | .tsd-kind-variable.tsd-parent-kind-interface > .tsd-kind-icon:before { 191 | background-position: -204px -0px; 192 | } 193 | .tsd-kind-variable.tsd-parent-kind-interface.tsd-is-inherited 194 | > .tsd-kind-icon:before { 195 | background-position: -221px -0px; 196 | } 197 | 198 | .tsd-kind-property > .tsd-kind-icon:before { 199 | background-position: -136px -0px; 200 | } 201 | .tsd-kind-property.tsd-is-protected > .tsd-kind-icon:before { 202 | background-position: -153px -0px; 203 | } 204 | .tsd-kind-property.tsd-is-private > .tsd-kind-icon:before { 205 | background-position: -119px -0px; 206 | } 207 | .tsd-kind-property.tsd-parent-kind-class > .tsd-kind-icon:before { 208 | background-position: -51px -0px; 209 | } 210 | .tsd-kind-property.tsd-parent-kind-class.tsd-is-inherited 211 | > .tsd-kind-icon:before { 212 | background-position: -68px -0px; 213 | } 214 | .tsd-kind-property.tsd-parent-kind-class.tsd-is-protected 215 | > .tsd-kind-icon:before { 216 | background-position: -85px -0px; 217 | } 218 | .tsd-kind-property.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 219 | > .tsd-kind-icon:before { 220 | background-position: -102px -0px; 221 | } 222 | .tsd-kind-property.tsd-parent-kind-class.tsd-is-private 223 | > .tsd-kind-icon:before { 224 | background-position: -119px -0px; 225 | } 226 | .tsd-kind-property.tsd-parent-kind-enum > .tsd-kind-icon:before { 227 | background-position: -170px -0px; 228 | } 229 | .tsd-kind-property.tsd-parent-kind-enum.tsd-is-protected 230 | > .tsd-kind-icon:before { 231 | background-position: -187px -0px; 232 | } 233 | .tsd-kind-property.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before { 234 | background-position: -119px -0px; 235 | } 236 | .tsd-kind-property.tsd-parent-kind-interface > .tsd-kind-icon:before { 237 | background-position: -204px -0px; 238 | } 239 | .tsd-kind-property.tsd-parent-kind-interface.tsd-is-inherited 240 | > .tsd-kind-icon:before { 241 | background-position: -221px -0px; 242 | } 243 | 244 | .tsd-kind-get-signature > .tsd-kind-icon:before { 245 | background-position: -136px -17px; 246 | } 247 | .tsd-kind-get-signature.tsd-is-protected > .tsd-kind-icon:before { 248 | background-position: -153px -17px; 249 | } 250 | .tsd-kind-get-signature.tsd-is-private > .tsd-kind-icon:before { 251 | background-position: -119px -17px; 252 | } 253 | .tsd-kind-get-signature.tsd-parent-kind-class > .tsd-kind-icon:before { 254 | background-position: -51px -17px; 255 | } 256 | .tsd-kind-get-signature.tsd-parent-kind-class.tsd-is-inherited 257 | > .tsd-kind-icon:before { 258 | background-position: -68px -17px; 259 | } 260 | .tsd-kind-get-signature.tsd-parent-kind-class.tsd-is-protected 261 | > .tsd-kind-icon:before { 262 | background-position: -85px -17px; 263 | } 264 | .tsd-kind-get-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 265 | > .tsd-kind-icon:before { 266 | background-position: -102px -17px; 267 | } 268 | .tsd-kind-get-signature.tsd-parent-kind-class.tsd-is-private 269 | > .tsd-kind-icon:before { 270 | background-position: -119px -17px; 271 | } 272 | .tsd-kind-get-signature.tsd-parent-kind-enum > .tsd-kind-icon:before { 273 | background-position: -170px -17px; 274 | } 275 | .tsd-kind-get-signature.tsd-parent-kind-enum.tsd-is-protected 276 | > .tsd-kind-icon:before { 277 | background-position: -187px -17px; 278 | } 279 | .tsd-kind-get-signature.tsd-parent-kind-enum.tsd-is-private 280 | > .tsd-kind-icon:before { 281 | background-position: -119px -17px; 282 | } 283 | .tsd-kind-get-signature.tsd-parent-kind-interface > .tsd-kind-icon:before { 284 | background-position: -204px -17px; 285 | } 286 | .tsd-kind-get-signature.tsd-parent-kind-interface.tsd-is-inherited 287 | > .tsd-kind-icon:before { 288 | background-position: -221px -17px; 289 | } 290 | 291 | .tsd-kind-set-signature > .tsd-kind-icon:before { 292 | background-position: -136px -34px; 293 | } 294 | .tsd-kind-set-signature.tsd-is-protected > .tsd-kind-icon:before { 295 | background-position: -153px -34px; 296 | } 297 | .tsd-kind-set-signature.tsd-is-private > .tsd-kind-icon:before { 298 | background-position: -119px -34px; 299 | } 300 | .tsd-kind-set-signature.tsd-parent-kind-class > .tsd-kind-icon:before { 301 | background-position: -51px -34px; 302 | } 303 | .tsd-kind-set-signature.tsd-parent-kind-class.tsd-is-inherited 304 | > .tsd-kind-icon:before { 305 | background-position: -68px -34px; 306 | } 307 | .tsd-kind-set-signature.tsd-parent-kind-class.tsd-is-protected 308 | > .tsd-kind-icon:before { 309 | background-position: -85px -34px; 310 | } 311 | .tsd-kind-set-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 312 | > .tsd-kind-icon:before { 313 | background-position: -102px -34px; 314 | } 315 | .tsd-kind-set-signature.tsd-parent-kind-class.tsd-is-private 316 | > .tsd-kind-icon:before { 317 | background-position: -119px -34px; 318 | } 319 | .tsd-kind-set-signature.tsd-parent-kind-enum > .tsd-kind-icon:before { 320 | background-position: -170px -34px; 321 | } 322 | .tsd-kind-set-signature.tsd-parent-kind-enum.tsd-is-protected 323 | > .tsd-kind-icon:before { 324 | background-position: -187px -34px; 325 | } 326 | .tsd-kind-set-signature.tsd-parent-kind-enum.tsd-is-private 327 | > .tsd-kind-icon:before { 328 | background-position: -119px -34px; 329 | } 330 | .tsd-kind-set-signature.tsd-parent-kind-interface > .tsd-kind-icon:before { 331 | background-position: -204px -34px; 332 | } 333 | .tsd-kind-set-signature.tsd-parent-kind-interface.tsd-is-inherited 334 | > .tsd-kind-icon:before { 335 | background-position: -221px -34px; 336 | } 337 | 338 | .tsd-kind-accessor > .tsd-kind-icon:before { 339 | background-position: -136px -51px; 340 | } 341 | .tsd-kind-accessor.tsd-is-protected > .tsd-kind-icon:before { 342 | background-position: -153px -51px; 343 | } 344 | .tsd-kind-accessor.tsd-is-private > .tsd-kind-icon:before { 345 | background-position: -119px -51px; 346 | } 347 | .tsd-kind-accessor.tsd-parent-kind-class > .tsd-kind-icon:before { 348 | background-position: -51px -51px; 349 | } 350 | .tsd-kind-accessor.tsd-parent-kind-class.tsd-is-inherited 351 | > .tsd-kind-icon:before { 352 | background-position: -68px -51px; 353 | } 354 | .tsd-kind-accessor.tsd-parent-kind-class.tsd-is-protected 355 | > .tsd-kind-icon:before { 356 | background-position: -85px -51px; 357 | } 358 | .tsd-kind-accessor.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 359 | > .tsd-kind-icon:before { 360 | background-position: -102px -51px; 361 | } 362 | .tsd-kind-accessor.tsd-parent-kind-class.tsd-is-private 363 | > .tsd-kind-icon:before { 364 | background-position: -119px -51px; 365 | } 366 | .tsd-kind-accessor.tsd-parent-kind-enum > .tsd-kind-icon:before { 367 | background-position: -170px -51px; 368 | } 369 | .tsd-kind-accessor.tsd-parent-kind-enum.tsd-is-protected 370 | > .tsd-kind-icon:before { 371 | background-position: -187px -51px; 372 | } 373 | .tsd-kind-accessor.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before { 374 | background-position: -119px -51px; 375 | } 376 | .tsd-kind-accessor.tsd-parent-kind-interface > .tsd-kind-icon:before { 377 | background-position: -204px -51px; 378 | } 379 | .tsd-kind-accessor.tsd-parent-kind-interface.tsd-is-inherited 380 | > .tsd-kind-icon:before { 381 | background-position: -221px -51px; 382 | } 383 | 384 | .tsd-kind-function > .tsd-kind-icon:before { 385 | background-position: -136px -68px; 386 | } 387 | .tsd-kind-function.tsd-is-protected > .tsd-kind-icon:before { 388 | background-position: -153px -68px; 389 | } 390 | .tsd-kind-function.tsd-is-private > .tsd-kind-icon:before { 391 | background-position: -119px -68px; 392 | } 393 | .tsd-kind-function.tsd-parent-kind-class > .tsd-kind-icon:before { 394 | background-position: -51px -68px; 395 | } 396 | .tsd-kind-function.tsd-parent-kind-class.tsd-is-inherited 397 | > .tsd-kind-icon:before { 398 | background-position: -68px -68px; 399 | } 400 | .tsd-kind-function.tsd-parent-kind-class.tsd-is-protected 401 | > .tsd-kind-icon:before { 402 | background-position: -85px -68px; 403 | } 404 | .tsd-kind-function.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 405 | > .tsd-kind-icon:before { 406 | background-position: -102px -68px; 407 | } 408 | .tsd-kind-function.tsd-parent-kind-class.tsd-is-private 409 | > .tsd-kind-icon:before { 410 | background-position: -119px -68px; 411 | } 412 | .tsd-kind-function.tsd-parent-kind-enum > .tsd-kind-icon:before { 413 | background-position: -170px -68px; 414 | } 415 | .tsd-kind-function.tsd-parent-kind-enum.tsd-is-protected 416 | > .tsd-kind-icon:before { 417 | background-position: -187px -68px; 418 | } 419 | .tsd-kind-function.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before { 420 | background-position: -119px -68px; 421 | } 422 | .tsd-kind-function.tsd-parent-kind-interface > .tsd-kind-icon:before { 423 | background-position: -204px -68px; 424 | } 425 | .tsd-kind-function.tsd-parent-kind-interface.tsd-is-inherited 426 | > .tsd-kind-icon:before { 427 | background-position: -221px -68px; 428 | } 429 | 430 | .tsd-kind-method > .tsd-kind-icon:before { 431 | background-position: -136px -68px; 432 | } 433 | .tsd-kind-method.tsd-is-protected > .tsd-kind-icon:before { 434 | background-position: -153px -68px; 435 | } 436 | .tsd-kind-method.tsd-is-private > .tsd-kind-icon:before { 437 | background-position: -119px -68px; 438 | } 439 | .tsd-kind-method.tsd-parent-kind-class > .tsd-kind-icon:before { 440 | background-position: -51px -68px; 441 | } 442 | .tsd-kind-method.tsd-parent-kind-class.tsd-is-inherited 443 | > .tsd-kind-icon:before { 444 | background-position: -68px -68px; 445 | } 446 | .tsd-kind-method.tsd-parent-kind-class.tsd-is-protected 447 | > .tsd-kind-icon:before { 448 | background-position: -85px -68px; 449 | } 450 | .tsd-kind-method.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 451 | > .tsd-kind-icon:before { 452 | background-position: -102px -68px; 453 | } 454 | .tsd-kind-method.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before { 455 | background-position: -119px -68px; 456 | } 457 | .tsd-kind-method.tsd-parent-kind-enum > .tsd-kind-icon:before { 458 | background-position: -170px -68px; 459 | } 460 | .tsd-kind-method.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before { 461 | background-position: -187px -68px; 462 | } 463 | .tsd-kind-method.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before { 464 | background-position: -119px -68px; 465 | } 466 | .tsd-kind-method.tsd-parent-kind-interface > .tsd-kind-icon:before { 467 | background-position: -204px -68px; 468 | } 469 | .tsd-kind-method.tsd-parent-kind-interface.tsd-is-inherited 470 | > .tsd-kind-icon:before { 471 | background-position: -221px -68px; 472 | } 473 | 474 | .tsd-kind-call-signature > .tsd-kind-icon:before { 475 | background-position: -136px -68px; 476 | } 477 | .tsd-kind-call-signature.tsd-is-protected > .tsd-kind-icon:before { 478 | background-position: -153px -68px; 479 | } 480 | .tsd-kind-call-signature.tsd-is-private > .tsd-kind-icon:before { 481 | background-position: -119px -68px; 482 | } 483 | .tsd-kind-call-signature.tsd-parent-kind-class > .tsd-kind-icon:before { 484 | background-position: -51px -68px; 485 | } 486 | .tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-inherited 487 | > .tsd-kind-icon:before { 488 | background-position: -68px -68px; 489 | } 490 | .tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-protected 491 | > .tsd-kind-icon:before { 492 | background-position: -85px -68px; 493 | } 494 | .tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 495 | > .tsd-kind-icon:before { 496 | background-position: -102px -68px; 497 | } 498 | .tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-private 499 | > .tsd-kind-icon:before { 500 | background-position: -119px -68px; 501 | } 502 | .tsd-kind-call-signature.tsd-parent-kind-enum > .tsd-kind-icon:before { 503 | background-position: -170px -68px; 504 | } 505 | .tsd-kind-call-signature.tsd-parent-kind-enum.tsd-is-protected 506 | > .tsd-kind-icon:before { 507 | background-position: -187px -68px; 508 | } 509 | .tsd-kind-call-signature.tsd-parent-kind-enum.tsd-is-private 510 | > .tsd-kind-icon:before { 511 | background-position: -119px -68px; 512 | } 513 | .tsd-kind-call-signature.tsd-parent-kind-interface > .tsd-kind-icon:before { 514 | background-position: -204px -68px; 515 | } 516 | .tsd-kind-call-signature.tsd-parent-kind-interface.tsd-is-inherited 517 | > .tsd-kind-icon:before { 518 | background-position: -221px -68px; 519 | } 520 | 521 | .tsd-kind-function.tsd-has-type-parameter > .tsd-kind-icon:before { 522 | background-position: -136px -85px; 523 | } 524 | .tsd-kind-function.tsd-has-type-parameter.tsd-is-protected 525 | > .tsd-kind-icon:before { 526 | background-position: -153px -85px; 527 | } 528 | .tsd-kind-function.tsd-has-type-parameter.tsd-is-private 529 | > .tsd-kind-icon:before { 530 | background-position: -119px -85px; 531 | } 532 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class 533 | > .tsd-kind-icon:before { 534 | background-position: -51px -85px; 535 | } 536 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-inherited 537 | > .tsd-kind-icon:before { 538 | background-position: -68px -85px; 539 | } 540 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-protected 541 | > .tsd-kind-icon:before { 542 | background-position: -85px -85px; 543 | } 544 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 545 | > .tsd-kind-icon:before { 546 | background-position: -102px -85px; 547 | } 548 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-private 549 | > .tsd-kind-icon:before { 550 | background-position: -119px -85px; 551 | } 552 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-enum 553 | > .tsd-kind-icon:before { 554 | background-position: -170px -85px; 555 | } 556 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-enum.tsd-is-protected 557 | > .tsd-kind-icon:before { 558 | background-position: -187px -85px; 559 | } 560 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-enum.tsd-is-private 561 | > .tsd-kind-icon:before { 562 | background-position: -119px -85px; 563 | } 564 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-interface 565 | > .tsd-kind-icon:before { 566 | background-position: -204px -85px; 567 | } 568 | .tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-interface.tsd-is-inherited 569 | > .tsd-kind-icon:before { 570 | background-position: -221px -85px; 571 | } 572 | 573 | .tsd-kind-method.tsd-has-type-parameter > .tsd-kind-icon:before { 574 | background-position: -136px -85px; 575 | } 576 | .tsd-kind-method.tsd-has-type-parameter.tsd-is-protected 577 | > .tsd-kind-icon:before { 578 | background-position: -153px -85px; 579 | } 580 | .tsd-kind-method.tsd-has-type-parameter.tsd-is-private > .tsd-kind-icon:before { 581 | background-position: -119px -85px; 582 | } 583 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class 584 | > .tsd-kind-icon:before { 585 | background-position: -51px -85px; 586 | } 587 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-inherited 588 | > .tsd-kind-icon:before { 589 | background-position: -68px -85px; 590 | } 591 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-protected 592 | > .tsd-kind-icon:before { 593 | background-position: -85px -85px; 594 | } 595 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 596 | > .tsd-kind-icon:before { 597 | background-position: -102px -85px; 598 | } 599 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-private 600 | > .tsd-kind-icon:before { 601 | background-position: -119px -85px; 602 | } 603 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-enum 604 | > .tsd-kind-icon:before { 605 | background-position: -170px -85px; 606 | } 607 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-enum.tsd-is-protected 608 | > .tsd-kind-icon:before { 609 | background-position: -187px -85px; 610 | } 611 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-enum.tsd-is-private 612 | > .tsd-kind-icon:before { 613 | background-position: -119px -85px; 614 | } 615 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-interface 616 | > .tsd-kind-icon:before { 617 | background-position: -204px -85px; 618 | } 619 | .tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-interface.tsd-is-inherited 620 | > .tsd-kind-icon:before { 621 | background-position: -221px -85px; 622 | } 623 | 624 | .tsd-kind-constructor > .tsd-kind-icon:before { 625 | background-position: -136px -102px; 626 | } 627 | .tsd-kind-constructor.tsd-is-protected > .tsd-kind-icon:before { 628 | background-position: -153px -102px; 629 | } 630 | .tsd-kind-constructor.tsd-is-private > .tsd-kind-icon:before { 631 | background-position: -119px -102px; 632 | } 633 | .tsd-kind-constructor.tsd-parent-kind-class > .tsd-kind-icon:before { 634 | background-position: -51px -102px; 635 | } 636 | .tsd-kind-constructor.tsd-parent-kind-class.tsd-is-inherited 637 | > .tsd-kind-icon:before { 638 | background-position: -68px -102px; 639 | } 640 | .tsd-kind-constructor.tsd-parent-kind-class.tsd-is-protected 641 | > .tsd-kind-icon:before { 642 | background-position: -85px -102px; 643 | } 644 | .tsd-kind-constructor.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 645 | > .tsd-kind-icon:before { 646 | background-position: -102px -102px; 647 | } 648 | .tsd-kind-constructor.tsd-parent-kind-class.tsd-is-private 649 | > .tsd-kind-icon:before { 650 | background-position: -119px -102px; 651 | } 652 | .tsd-kind-constructor.tsd-parent-kind-enum > .tsd-kind-icon:before { 653 | background-position: -170px -102px; 654 | } 655 | .tsd-kind-constructor.tsd-parent-kind-enum.tsd-is-protected 656 | > .tsd-kind-icon:before { 657 | background-position: -187px -102px; 658 | } 659 | .tsd-kind-constructor.tsd-parent-kind-enum.tsd-is-private 660 | > .tsd-kind-icon:before { 661 | background-position: -119px -102px; 662 | } 663 | .tsd-kind-constructor.tsd-parent-kind-interface > .tsd-kind-icon:before { 664 | background-position: -204px -102px; 665 | } 666 | .tsd-kind-constructor.tsd-parent-kind-interface.tsd-is-inherited 667 | > .tsd-kind-icon:before { 668 | background-position: -221px -102px; 669 | } 670 | 671 | .tsd-kind-constructor-signature > .tsd-kind-icon:before { 672 | background-position: -136px -102px; 673 | } 674 | .tsd-kind-constructor-signature.tsd-is-protected > .tsd-kind-icon:before { 675 | background-position: -153px -102px; 676 | } 677 | .tsd-kind-constructor-signature.tsd-is-private > .tsd-kind-icon:before { 678 | background-position: -119px -102px; 679 | } 680 | .tsd-kind-constructor-signature.tsd-parent-kind-class > .tsd-kind-icon:before { 681 | background-position: -51px -102px; 682 | } 683 | .tsd-kind-constructor-signature.tsd-parent-kind-class.tsd-is-inherited 684 | > .tsd-kind-icon:before { 685 | background-position: -68px -102px; 686 | } 687 | .tsd-kind-constructor-signature.tsd-parent-kind-class.tsd-is-protected 688 | > .tsd-kind-icon:before { 689 | background-position: -85px -102px; 690 | } 691 | .tsd-kind-constructor-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 692 | > .tsd-kind-icon:before { 693 | background-position: -102px -102px; 694 | } 695 | .tsd-kind-constructor-signature.tsd-parent-kind-class.tsd-is-private 696 | > .tsd-kind-icon:before { 697 | background-position: -119px -102px; 698 | } 699 | .tsd-kind-constructor-signature.tsd-parent-kind-enum > .tsd-kind-icon:before { 700 | background-position: -170px -102px; 701 | } 702 | .tsd-kind-constructor-signature.tsd-parent-kind-enum.tsd-is-protected 703 | > .tsd-kind-icon:before { 704 | background-position: -187px -102px; 705 | } 706 | .tsd-kind-constructor-signature.tsd-parent-kind-enum.tsd-is-private 707 | > .tsd-kind-icon:before { 708 | background-position: -119px -102px; 709 | } 710 | .tsd-kind-constructor-signature.tsd-parent-kind-interface 711 | > .tsd-kind-icon:before { 712 | background-position: -204px -102px; 713 | } 714 | .tsd-kind-constructor-signature.tsd-parent-kind-interface.tsd-is-inherited 715 | > .tsd-kind-icon:before { 716 | background-position: -221px -102px; 717 | } 718 | 719 | .tsd-kind-index-signature > .tsd-kind-icon:before { 720 | background-position: -136px -119px; 721 | } 722 | .tsd-kind-index-signature.tsd-is-protected > .tsd-kind-icon:before { 723 | background-position: -153px -119px; 724 | } 725 | .tsd-kind-index-signature.tsd-is-private > .tsd-kind-icon:before { 726 | background-position: -119px -119px; 727 | } 728 | .tsd-kind-index-signature.tsd-parent-kind-class > .tsd-kind-icon:before { 729 | background-position: -51px -119px; 730 | } 731 | .tsd-kind-index-signature.tsd-parent-kind-class.tsd-is-inherited 732 | > .tsd-kind-icon:before { 733 | background-position: -68px -119px; 734 | } 735 | .tsd-kind-index-signature.tsd-parent-kind-class.tsd-is-protected 736 | > .tsd-kind-icon:before { 737 | background-position: -85px -119px; 738 | } 739 | .tsd-kind-index-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 740 | > .tsd-kind-icon:before { 741 | background-position: -102px -119px; 742 | } 743 | .tsd-kind-index-signature.tsd-parent-kind-class.tsd-is-private 744 | > .tsd-kind-icon:before { 745 | background-position: -119px -119px; 746 | } 747 | .tsd-kind-index-signature.tsd-parent-kind-enum > .tsd-kind-icon:before { 748 | background-position: -170px -119px; 749 | } 750 | .tsd-kind-index-signature.tsd-parent-kind-enum.tsd-is-protected 751 | > .tsd-kind-icon:before { 752 | background-position: -187px -119px; 753 | } 754 | .tsd-kind-index-signature.tsd-parent-kind-enum.tsd-is-private 755 | > .tsd-kind-icon:before { 756 | background-position: -119px -119px; 757 | } 758 | .tsd-kind-index-signature.tsd-parent-kind-interface > .tsd-kind-icon:before { 759 | background-position: -204px -119px; 760 | } 761 | .tsd-kind-index-signature.tsd-parent-kind-interface.tsd-is-inherited 762 | > .tsd-kind-icon:before { 763 | background-position: -221px -119px; 764 | } 765 | 766 | .tsd-kind-event > .tsd-kind-icon:before { 767 | background-position: -136px -136px; 768 | } 769 | .tsd-kind-event.tsd-is-protected > .tsd-kind-icon:before { 770 | background-position: -153px -136px; 771 | } 772 | .tsd-kind-event.tsd-is-private > .tsd-kind-icon:before { 773 | background-position: -119px -136px; 774 | } 775 | .tsd-kind-event.tsd-parent-kind-class > .tsd-kind-icon:before { 776 | background-position: -51px -136px; 777 | } 778 | .tsd-kind-event.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before { 779 | background-position: -68px -136px; 780 | } 781 | .tsd-kind-event.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before { 782 | background-position: -85px -136px; 783 | } 784 | .tsd-kind-event.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 785 | > .tsd-kind-icon:before { 786 | background-position: -102px -136px; 787 | } 788 | .tsd-kind-event.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before { 789 | background-position: -119px -136px; 790 | } 791 | .tsd-kind-event.tsd-parent-kind-enum > .tsd-kind-icon:before { 792 | background-position: -170px -136px; 793 | } 794 | .tsd-kind-event.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before { 795 | background-position: -187px -136px; 796 | } 797 | .tsd-kind-event.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before { 798 | background-position: -119px -136px; 799 | } 800 | .tsd-kind-event.tsd-parent-kind-interface > .tsd-kind-icon:before { 801 | background-position: -204px -136px; 802 | } 803 | .tsd-kind-event.tsd-parent-kind-interface.tsd-is-inherited 804 | > .tsd-kind-icon:before { 805 | background-position: -221px -136px; 806 | } 807 | 808 | .tsd-is-static > .tsd-kind-icon:before { 809 | background-position: -136px -153px; 810 | } 811 | .tsd-is-static.tsd-is-protected > .tsd-kind-icon:before { 812 | background-position: -153px -153px; 813 | } 814 | .tsd-is-static.tsd-is-private > .tsd-kind-icon:before { 815 | background-position: -119px -153px; 816 | } 817 | .tsd-is-static.tsd-parent-kind-class > .tsd-kind-icon:before { 818 | background-position: -51px -153px; 819 | } 820 | .tsd-is-static.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before { 821 | background-position: -68px -153px; 822 | } 823 | .tsd-is-static.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before { 824 | background-position: -85px -153px; 825 | } 826 | .tsd-is-static.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 827 | > .tsd-kind-icon:before { 828 | background-position: -102px -153px; 829 | } 830 | .tsd-is-static.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before { 831 | background-position: -119px -153px; 832 | } 833 | .tsd-is-static.tsd-parent-kind-enum > .tsd-kind-icon:before { 834 | background-position: -170px -153px; 835 | } 836 | .tsd-is-static.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before { 837 | background-position: -187px -153px; 838 | } 839 | .tsd-is-static.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before { 840 | background-position: -119px -153px; 841 | } 842 | .tsd-is-static.tsd-parent-kind-interface > .tsd-kind-icon:before { 843 | background-position: -204px -153px; 844 | } 845 | .tsd-is-static.tsd-parent-kind-interface.tsd-is-inherited 846 | > .tsd-kind-icon:before { 847 | background-position: -221px -153px; 848 | } 849 | 850 | .tsd-is-static.tsd-kind-function > .tsd-kind-icon:before { 851 | background-position: -136px -170px; 852 | } 853 | .tsd-is-static.tsd-kind-function.tsd-is-protected > .tsd-kind-icon:before { 854 | background-position: -153px -170px; 855 | } 856 | .tsd-is-static.tsd-kind-function.tsd-is-private > .tsd-kind-icon:before { 857 | background-position: -119px -170px; 858 | } 859 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-class > .tsd-kind-icon:before { 860 | background-position: -51px -170px; 861 | } 862 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-class.tsd-is-inherited 863 | > .tsd-kind-icon:before { 864 | background-position: -68px -170px; 865 | } 866 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-class.tsd-is-protected 867 | > .tsd-kind-icon:before { 868 | background-position: -85px -170px; 869 | } 870 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 871 | > .tsd-kind-icon:before { 872 | background-position: -102px -170px; 873 | } 874 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-class.tsd-is-private 875 | > .tsd-kind-icon:before { 876 | background-position: -119px -170px; 877 | } 878 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-enum > .tsd-kind-icon:before { 879 | background-position: -170px -170px; 880 | } 881 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-enum.tsd-is-protected 882 | > .tsd-kind-icon:before { 883 | background-position: -187px -170px; 884 | } 885 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-enum.tsd-is-private 886 | > .tsd-kind-icon:before { 887 | background-position: -119px -170px; 888 | } 889 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-interface 890 | > .tsd-kind-icon:before { 891 | background-position: -204px -170px; 892 | } 893 | .tsd-is-static.tsd-kind-function.tsd-parent-kind-interface.tsd-is-inherited 894 | > .tsd-kind-icon:before { 895 | background-position: -221px -170px; 896 | } 897 | 898 | .tsd-is-static.tsd-kind-method > .tsd-kind-icon:before { 899 | background-position: -136px -170px; 900 | } 901 | .tsd-is-static.tsd-kind-method.tsd-is-protected > .tsd-kind-icon:before { 902 | background-position: -153px -170px; 903 | } 904 | .tsd-is-static.tsd-kind-method.tsd-is-private > .tsd-kind-icon:before { 905 | background-position: -119px -170px; 906 | } 907 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-class > .tsd-kind-icon:before { 908 | background-position: -51px -170px; 909 | } 910 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-class.tsd-is-inherited 911 | > .tsd-kind-icon:before { 912 | background-position: -68px -170px; 913 | } 914 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-class.tsd-is-protected 915 | > .tsd-kind-icon:before { 916 | background-position: -85px -170px; 917 | } 918 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 919 | > .tsd-kind-icon:before { 920 | background-position: -102px -170px; 921 | } 922 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-class.tsd-is-private 923 | > .tsd-kind-icon:before { 924 | background-position: -119px -170px; 925 | } 926 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-enum > .tsd-kind-icon:before { 927 | background-position: -170px -170px; 928 | } 929 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-enum.tsd-is-protected 930 | > .tsd-kind-icon:before { 931 | background-position: -187px -170px; 932 | } 933 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-enum.tsd-is-private 934 | > .tsd-kind-icon:before { 935 | background-position: -119px -170px; 936 | } 937 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-interface 938 | > .tsd-kind-icon:before { 939 | background-position: -204px -170px; 940 | } 941 | .tsd-is-static.tsd-kind-method.tsd-parent-kind-interface.tsd-is-inherited 942 | > .tsd-kind-icon:before { 943 | background-position: -221px -170px; 944 | } 945 | 946 | .tsd-is-static.tsd-kind-call-signature > .tsd-kind-icon:before { 947 | background-position: -136px -170px; 948 | } 949 | .tsd-is-static.tsd-kind-call-signature.tsd-is-protected 950 | > .tsd-kind-icon:before { 951 | background-position: -153px -170px; 952 | } 953 | .tsd-is-static.tsd-kind-call-signature.tsd-is-private > .tsd-kind-icon:before { 954 | background-position: -119px -170px; 955 | } 956 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class 957 | > .tsd-kind-icon:before { 958 | background-position: -51px -170px; 959 | } 960 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-inherited 961 | > .tsd-kind-icon:before { 962 | background-position: -68px -170px; 963 | } 964 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-protected 965 | > .tsd-kind-icon:before { 966 | background-position: -85px -170px; 967 | } 968 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 969 | > .tsd-kind-icon:before { 970 | background-position: -102px -170px; 971 | } 972 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-private 973 | > .tsd-kind-icon:before { 974 | background-position: -119px -170px; 975 | } 976 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-enum 977 | > .tsd-kind-icon:before { 978 | background-position: -170px -170px; 979 | } 980 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-enum.tsd-is-protected 981 | > .tsd-kind-icon:before { 982 | background-position: -187px -170px; 983 | } 984 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-enum.tsd-is-private 985 | > .tsd-kind-icon:before { 986 | background-position: -119px -170px; 987 | } 988 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-interface 989 | > .tsd-kind-icon:before { 990 | background-position: -204px -170px; 991 | } 992 | .tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-interface.tsd-is-inherited 993 | > .tsd-kind-icon:before { 994 | background-position: -221px -170px; 995 | } 996 | 997 | .tsd-is-static.tsd-kind-event > .tsd-kind-icon:before { 998 | background-position: -136px -187px; 999 | } 1000 | .tsd-is-static.tsd-kind-event.tsd-is-protected > .tsd-kind-icon:before { 1001 | background-position: -153px -187px; 1002 | } 1003 | .tsd-is-static.tsd-kind-event.tsd-is-private > .tsd-kind-icon:before { 1004 | background-position: -119px -187px; 1005 | } 1006 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-class > .tsd-kind-icon:before { 1007 | background-position: -51px -187px; 1008 | } 1009 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-class.tsd-is-inherited 1010 | > .tsd-kind-icon:before { 1011 | background-position: -68px -187px; 1012 | } 1013 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-class.tsd-is-protected 1014 | > .tsd-kind-icon:before { 1015 | background-position: -85px -187px; 1016 | } 1017 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited 1018 | > .tsd-kind-icon:before { 1019 | background-position: -102px -187px; 1020 | } 1021 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-class.tsd-is-private 1022 | > .tsd-kind-icon:before { 1023 | background-position: -119px -187px; 1024 | } 1025 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-enum > .tsd-kind-icon:before { 1026 | background-position: -170px -187px; 1027 | } 1028 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-enum.tsd-is-protected 1029 | > .tsd-kind-icon:before { 1030 | background-position: -187px -187px; 1031 | } 1032 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-enum.tsd-is-private 1033 | > .tsd-kind-icon:before { 1034 | background-position: -119px -187px; 1035 | } 1036 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-interface 1037 | > .tsd-kind-icon:before { 1038 | background-position: -204px -187px; 1039 | } 1040 | .tsd-is-static.tsd-kind-event.tsd-parent-kind-interface.tsd-is-inherited 1041 | > .tsd-kind-icon:before { 1042 | background-position: -221px -187px; 1043 | } 1044 | -------------------------------------------------------------------------------- /docs/assets/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atlasgroupcz/react-wrap/5259c4a6383267d6fc026c3bf1849bb6b57c46b2/docs/assets/icons.png -------------------------------------------------------------------------------- /docs/assets/icons@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atlasgroupcz/react-wrap/5259c4a6383267d6fc026c3bf1849bb6b57c46b2/docs/assets/icons@2x.png -------------------------------------------------------------------------------- /docs/assets/search.js: -------------------------------------------------------------------------------- 1 | window.searchData = JSON.parse( 2 | '{"kinds":{"64":"Function"},"rows":[{"id":0,"kind":64,"name":"wrap","url":"modules.html#wrap","classes":"tsd-kind-function tsd-has-type-parameter"},{"id":1,"kind":64,"name":"memoWrap","url":"modules.html#memoWrap","classes":"tsd-kind-function tsd-has-type-parameter"},{"id":2,"kind":64,"name":"fastWrap","url":"modules.html#fastWrap","classes":"tsd-kind-function tsd-has-type-parameter"}],"index":{"version":"2.3.9","fields":["name","parent"],"fieldVectors":[["name/0",[0,9.808]],["parent/0",[]],["name/1",[1,9.808]],["parent/1",[]],["name/2",[2,9.808]],["parent/2",[]]],"invertedIndex":[["fastwrap",{"_index":2,"name":{"2":{}},"parent":{}}],["memowrap",{"_index":1,"name":{"1":{}},"parent":{}}],["wrap",{"_index":0,"name":{"0":{}},"parent":{}}]],"pipeline":[]}}' 3 | ); 4 | -------------------------------------------------------------------------------- /docs/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url('./icons.css'); 2 | 3 | :root { 4 | /* Light */ 5 | --light-color-background: #fcfcfc; 6 | --light-color-secondary-background: #fff; 7 | --light-color-text: #222; 8 | --light-color-text-aside: #707070; 9 | --light-color-link: #4da6ff; 10 | --light-color-menu-divider: #eee; 11 | --light-color-menu-divider-focus: #000; 12 | --light-color-menu-label: #707070; 13 | --light-color-panel: var(--light-color-secondary-background); 14 | --light-color-panel-divider: #eee; 15 | --light-color-comment-tag: #707070; 16 | --light-color-comment-tag-text: #fff; 17 | --light-color-ts: #9600ff; 18 | --light-color-ts-interface: #647f1b; 19 | --light-color-ts-enum: #937210; 20 | --light-color-ts-class: #0672de; 21 | --light-color-ts-private: #707070; 22 | --light-color-toolbar: #fff; 23 | --light-color-toolbar-text: #333; 24 | --light-icon-filter: invert(0); 25 | --light-external-icon: url("data:image/svg+xml;utf8,"); 26 | 27 | /* Dark */ 28 | --dark-color-background: #36393f; 29 | --dark-color-secondary-background: #2f3136; 30 | --dark-color-text: #ffffff; 31 | --dark-color-text-aside: #e6e4e4; 32 | --dark-color-link: #00aff4; 33 | --dark-color-menu-divider: #eee; 34 | --dark-color-menu-divider-focus: #000; 35 | --dark-color-menu-label: #707070; 36 | --dark-color-panel: var(--dark-color-secondary-background); 37 | --dark-color-panel-divider: #818181; 38 | --dark-color-comment-tag: #dcddde; 39 | --dark-color-comment-tag-text: #2f3136; 40 | --dark-color-ts: #c97dff; 41 | --dark-color-ts-interface: #9cbe3c; 42 | --dark-color-ts-enum: #d6ab29; 43 | --dark-color-ts-class: #3695f3; 44 | --dark-color-ts-private: #e2e2e2; 45 | --dark-color-toolbar: #34373c; 46 | --dark-color-toolbar-text: #ffffff; 47 | --dark-icon-filter: invert(1); 48 | --dark-external-icon: url("data:image/svg+xml;utf8,"); 49 | } 50 | 51 | @media (prefers-color-scheme: light) { 52 | :root { 53 | --color-background: var(--light-color-background); 54 | --color-secondary-background: var(--light-color-secondary-background); 55 | --color-text: var(--light-color-text); 56 | --color-text-aside: var(--light-color-text-aside); 57 | --color-link: var(--light-color-link); 58 | --color-menu-divider: var(--light-color-menu-divider); 59 | --color-menu-divider-focus: var(--light-color-menu-divider-focus); 60 | --color-menu-label: var(--light-color-menu-label); 61 | --color-panel: var(--light-color-panel); 62 | --color-panel-divider: var(--light-color-panel-divider); 63 | --color-comment-tag: var(--light-color-comment-tag); 64 | --color-comment-tag-text: var(--light-color-comment-tag-text); 65 | --color-ts: var(--light-color-ts); 66 | --color-ts-interface: var(--light-color-ts-interface); 67 | --color-ts-enum: var(--light-color-ts-enum); 68 | --color-ts-class: var(--light-color-ts-class); 69 | --color-ts-private: var(--light-color-ts-private); 70 | --color-toolbar: var(--light-color-toolbar); 71 | --color-toolbar-text: var(--light-color-toolbar-text); 72 | --icon-filter: var(--light-icon-filter); 73 | --external-icon: var(--light-external-icon); 74 | } 75 | } 76 | 77 | @media (prefers-color-scheme: dark) { 78 | :root { 79 | --color-background: var(--dark-color-background); 80 | --color-secondary-background: var(--dark-color-secondary-background); 81 | --color-text: var(--dark-color-text); 82 | --color-text-aside: var(--dark-color-text-aside); 83 | --color-link: var(--dark-color-link); 84 | --color-menu-divider: var(--dark-color-menu-divider); 85 | --color-menu-divider-focus: var(--dark-color-menu-divider-focus); 86 | --color-menu-label: var(--dark-color-menu-label); 87 | --color-panel: var(--dark-color-panel); 88 | --color-panel-divider: var(--dark-color-panel-divider); 89 | --color-comment-tag: var(--dark-color-comment-tag); 90 | --color-comment-tag-text: var(--dark-color-comment-tag-text); 91 | --color-ts: var(--dark-color-ts); 92 | --color-ts-interface: var(--dark-color-ts-interface); 93 | --color-ts-enum: var(--dark-color-ts-enum); 94 | --color-ts-class: var(--dark-color-ts-class); 95 | --color-ts-private: var(--dark-color-ts-private); 96 | --color-toolbar: var(--dark-color-toolbar); 97 | --color-toolbar-text: var(--dark-color-toolbar-text); 98 | --icon-filter: var(--dark-icon-filter); 99 | --external-icon: var(--dark-external-icon); 100 | } 101 | } 102 | 103 | body { 104 | margin: 0; 105 | } 106 | 107 | body.light { 108 | --color-background: var(--light-color-background); 109 | --color-secondary-background: var(--light-color-secondary-background); 110 | --color-text: var(--light-color-text); 111 | --color-text-aside: var(--light-color-text-aside); 112 | --color-link: var(--light-color-link); 113 | --color-menu-divider: var(--light-color-menu-divider); 114 | --color-menu-divider-focus: var(--light-color-menu-divider-focus); 115 | --color-menu-label: var(--light-color-menu-label); 116 | --color-panel: var(--light-color-panel); 117 | --color-panel-divider: var(--light-color-panel-divider); 118 | --color-comment-tag: var(--light-color-comment-tag); 119 | --color-comment-tag-text: var(--light-color-comment-tag-text); 120 | --color-ts: var(--light-color-ts); 121 | --color-ts-interface: var(--light-color-ts-interface); 122 | --color-ts-enum: var(--light-color-ts-enum); 123 | --color-ts-class: var(--light-color-ts-class); 124 | --color-ts-private: var(--light-color-ts-private); 125 | --color-toolbar: var(--light-color-toolbar); 126 | --color-toolbar-text: var(--light-color-toolbar-text); 127 | --icon-filter: var(--light-icon-filter); 128 | --external-icon: var(--light-external-icon); 129 | } 130 | 131 | body.dark { 132 | --color-background: var(--dark-color-background); 133 | --color-secondary-background: var(--dark-color-secondary-background); 134 | --color-text: var(--dark-color-text); 135 | --color-text-aside: var(--dark-color-text-aside); 136 | --color-link: var(--dark-color-link); 137 | --color-menu-divider: var(--dark-color-menu-divider); 138 | --color-menu-divider-focus: var(--dark-color-menu-divider-focus); 139 | --color-menu-label: var(--dark-color-menu-label); 140 | --color-panel: var(--dark-color-panel); 141 | --color-panel-divider: var(--dark-color-panel-divider); 142 | --color-comment-tag: var(--dark-color-comment-tag); 143 | --color-comment-tag-text: var(--dark-color-comment-tag-text); 144 | --color-ts: var(--dark-color-ts); 145 | --color-ts-interface: var(--dark-color-ts-interface); 146 | --color-ts-enum: var(--dark-color-ts-enum); 147 | --color-ts-class: var(--dark-color-ts-class); 148 | --color-ts-private: var(--dark-color-ts-private); 149 | --color-toolbar: var(--dark-color-toolbar); 150 | --color-toolbar-text: var(--dark-color-toolbar-text); 151 | --icon-filter: var(--dark-icon-filter); 152 | --external-icon: var(--dark-external-icon); 153 | } 154 | 155 | h1, 156 | h2, 157 | h3, 158 | h4, 159 | h5, 160 | h6 { 161 | line-height: 1.2; 162 | } 163 | 164 | h1 { 165 | font-size: 2em; 166 | margin: 0.67em 0; 167 | } 168 | 169 | h2 { 170 | font-size: 1.5em; 171 | margin: 0.83em 0; 172 | } 173 | 174 | h3 { 175 | font-size: 1.17em; 176 | margin: 1em 0; 177 | } 178 | 179 | h4, 180 | .tsd-index-panel h3 { 181 | font-size: 1em; 182 | margin: 1.33em 0; 183 | } 184 | 185 | h5 { 186 | font-size: 0.83em; 187 | margin: 1.67em 0; 188 | } 189 | 190 | h6 { 191 | font-size: 0.67em; 192 | margin: 2.33em 0; 193 | } 194 | 195 | pre { 196 | white-space: pre; 197 | white-space: pre-wrap; 198 | word-wrap: break-word; 199 | } 200 | 201 | dl, 202 | menu, 203 | ol, 204 | ul { 205 | margin: 1em 0; 206 | } 207 | 208 | dd { 209 | margin: 0 0 0 40px; 210 | } 211 | 212 | .container { 213 | max-width: 1200px; 214 | margin: 0 auto; 215 | padding: 0 40px; 216 | } 217 | @media (max-width: 640px) { 218 | .container { 219 | padding: 0 20px; 220 | } 221 | } 222 | 223 | .container-main { 224 | padding-bottom: 200px; 225 | } 226 | 227 | .row { 228 | display: flex; 229 | position: relative; 230 | margin: 0 -10px; 231 | } 232 | .row:after { 233 | visibility: hidden; 234 | display: block; 235 | content: ''; 236 | clear: both; 237 | height: 0; 238 | } 239 | 240 | .col-4, 241 | .col-8 { 242 | box-sizing: border-box; 243 | float: left; 244 | padding: 0 10px; 245 | } 246 | 247 | .col-4 { 248 | width: 33.3333333333%; 249 | } 250 | .col-8 { 251 | width: 66.6666666667%; 252 | } 253 | 254 | ul.tsd-descriptions > li > :first-child, 255 | .tsd-panel > :first-child, 256 | .col-8 > :first-child, 257 | .col-4 > :first-child, 258 | ul.tsd-descriptions > li > :first-child > :first-child, 259 | .tsd-panel > :first-child > :first-child, 260 | .col-8 > :first-child > :first-child, 261 | .col-4 > :first-child > :first-child, 262 | ul.tsd-descriptions > li > :first-child > :first-child > :first-child, 263 | .tsd-panel > :first-child > :first-child > :first-child, 264 | .col-8 > :first-child > :first-child > :first-child, 265 | .col-4 > :first-child > :first-child > :first-child { 266 | margin-top: 0; 267 | } 268 | ul.tsd-descriptions > li > :last-child, 269 | .tsd-panel > :last-child, 270 | .col-8 > :last-child, 271 | .col-4 > :last-child, 272 | ul.tsd-descriptions > li > :last-child > :last-child, 273 | .tsd-panel > :last-child > :last-child, 274 | .col-8 > :last-child > :last-child, 275 | .col-4 > :last-child > :last-child, 276 | ul.tsd-descriptions > li > :last-child > :last-child > :last-child, 277 | .tsd-panel > :last-child > :last-child > :last-child, 278 | .col-8 > :last-child > :last-child > :last-child, 279 | .col-4 > :last-child > :last-child > :last-child { 280 | margin-bottom: 0; 281 | } 282 | 283 | @keyframes fade-in { 284 | from { 285 | opacity: 0; 286 | } 287 | to { 288 | opacity: 1; 289 | } 290 | } 291 | @keyframes fade-out { 292 | from { 293 | opacity: 1; 294 | visibility: visible; 295 | } 296 | to { 297 | opacity: 0; 298 | } 299 | } 300 | @keyframes fade-in-delayed { 301 | 0% { 302 | opacity: 0; 303 | } 304 | 33% { 305 | opacity: 0; 306 | } 307 | 100% { 308 | opacity: 1; 309 | } 310 | } 311 | @keyframes fade-out-delayed { 312 | 0% { 313 | opacity: 1; 314 | visibility: visible; 315 | } 316 | 66% { 317 | opacity: 0; 318 | } 319 | 100% { 320 | opacity: 0; 321 | } 322 | } 323 | @keyframes shift-to-left { 324 | from { 325 | transform: translate(0, 0); 326 | } 327 | to { 328 | transform: translate(-25%, 0); 329 | } 330 | } 331 | @keyframes unshift-to-left { 332 | from { 333 | transform: translate(-25%, 0); 334 | } 335 | to { 336 | transform: translate(0, 0); 337 | } 338 | } 339 | @keyframes pop-in-from-right { 340 | from { 341 | transform: translate(100%, 0); 342 | } 343 | to { 344 | transform: translate(0, 0); 345 | } 346 | } 347 | @keyframes pop-out-to-right { 348 | from { 349 | transform: translate(0, 0); 350 | visibility: visible; 351 | } 352 | to { 353 | transform: translate(100%, 0); 354 | } 355 | } 356 | body { 357 | background: var(--color-background); 358 | font-family: 'Segoe UI', sans-serif; 359 | font-size: 16px; 360 | color: var(--color-text); 361 | } 362 | 363 | a { 364 | color: var(--color-link); 365 | text-decoration: none; 366 | } 367 | a:hover { 368 | text-decoration: underline; 369 | } 370 | a.external[target='_blank'] { 371 | background-image: var(--external-icon); 372 | background-position: top 3px right; 373 | background-repeat: no-repeat; 374 | padding-right: 13px; 375 | } 376 | 377 | code, 378 | pre { 379 | font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; 380 | padding: 0.2em; 381 | margin: 0; 382 | font-size: 14px; 383 | } 384 | 385 | pre { 386 | padding: 10px; 387 | } 388 | pre code { 389 | padding: 0; 390 | font-size: 100%; 391 | } 392 | 393 | blockquote { 394 | margin: 1em 0; 395 | padding-left: 1em; 396 | border-left: 4px solid gray; 397 | } 398 | 399 | .tsd-typography { 400 | line-height: 1.333em; 401 | } 402 | .tsd-typography ul { 403 | list-style: square; 404 | padding: 0 0 0 20px; 405 | margin: 0; 406 | } 407 | .tsd-typography h4, 408 | .tsd-typography .tsd-index-panel h3, 409 | .tsd-index-panel .tsd-typography h3, 410 | .tsd-typography h5, 411 | .tsd-typography h6 { 412 | font-size: 1em; 413 | margin: 0; 414 | } 415 | .tsd-typography h5, 416 | .tsd-typography h6 { 417 | font-weight: normal; 418 | } 419 | .tsd-typography p, 420 | .tsd-typography ul, 421 | .tsd-typography ol { 422 | margin: 1em 0; 423 | } 424 | 425 | @media (min-width: 901px) and (max-width: 1024px) { 426 | html .col-content { 427 | width: 72%; 428 | } 429 | html .col-menu { 430 | width: 28%; 431 | } 432 | html .tsd-navigation { 433 | padding-left: 10px; 434 | } 435 | } 436 | @media (max-width: 900px) { 437 | html .col-content { 438 | float: none; 439 | width: 100%; 440 | } 441 | html .col-menu { 442 | position: fixed !important; 443 | overflow: auto; 444 | -webkit-overflow-scrolling: touch; 445 | z-index: 1024; 446 | top: 0 !important; 447 | bottom: 0 !important; 448 | left: auto !important; 449 | right: 0 !important; 450 | width: 100%; 451 | padding: 20px 20px 0 0; 452 | max-width: 450px; 453 | visibility: hidden; 454 | background-color: var(--color-panel); 455 | transform: translate(100%, 0); 456 | } 457 | html .col-menu > *:last-child { 458 | padding-bottom: 20px; 459 | } 460 | html .overlay { 461 | content: ''; 462 | display: block; 463 | position: fixed; 464 | z-index: 1023; 465 | top: 0; 466 | left: 0; 467 | right: 0; 468 | bottom: 0; 469 | background-color: rgba(0, 0, 0, 0.75); 470 | visibility: hidden; 471 | } 472 | 473 | .to-has-menu .overlay { 474 | animation: fade-in 0.4s; 475 | } 476 | 477 | .to-has-menu :is(header, footer, .col-content) { 478 | animation: shift-to-left 0.4s; 479 | } 480 | 481 | .to-has-menu .col-menu { 482 | animation: pop-in-from-right 0.4s; 483 | } 484 | 485 | .from-has-menu .overlay { 486 | animation: fade-out 0.4s; 487 | } 488 | 489 | .from-has-menu :is(header, footer, .col-content) { 490 | animation: unshift-to-left 0.4s; 491 | } 492 | 493 | .from-has-menu .col-menu { 494 | animation: pop-out-to-right 0.4s; 495 | } 496 | 497 | .has-menu body { 498 | overflow: hidden; 499 | } 500 | .has-menu .overlay { 501 | visibility: visible; 502 | } 503 | .has-menu :is(header, footer, .col-content) { 504 | transform: translate(-25%, 0); 505 | } 506 | .has-menu .col-menu { 507 | visibility: visible; 508 | transform: translate(0, 0); 509 | display: grid; 510 | grid-template-rows: auto 1fr; 511 | max-height: 100vh; 512 | } 513 | .has-menu .tsd-navigation { 514 | max-height: 100%; 515 | } 516 | } 517 | 518 | .tsd-page-title { 519 | padding: 70px 0 20px 0; 520 | margin: 0 0 40px 0; 521 | background: var(--color-panel); 522 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); 523 | } 524 | .tsd-page-title h1 { 525 | margin: 0; 526 | } 527 | 528 | .tsd-breadcrumb { 529 | margin: 0; 530 | padding: 0; 531 | color: var(--color-text-aside); 532 | } 533 | .tsd-breadcrumb a { 534 | color: var(--color-text-aside); 535 | text-decoration: none; 536 | } 537 | .tsd-breadcrumb a:hover { 538 | text-decoration: underline; 539 | } 540 | .tsd-breadcrumb li { 541 | display: inline; 542 | } 543 | .tsd-breadcrumb li:after { 544 | content: ' / '; 545 | } 546 | 547 | dl.tsd-comment-tags { 548 | overflow: hidden; 549 | } 550 | dl.tsd-comment-tags dt { 551 | float: left; 552 | padding: 1px 5px; 553 | margin: 0 10px 0 0; 554 | border-radius: 4px; 555 | border: 1px solid var(--color-comment-tag); 556 | color: var(--color-comment-tag); 557 | font-size: 0.8em; 558 | font-weight: normal; 559 | } 560 | dl.tsd-comment-tags dd { 561 | margin: 0 0 10px 0; 562 | } 563 | dl.tsd-comment-tags dd:before, 564 | dl.tsd-comment-tags dd:after { 565 | display: table; 566 | content: ' '; 567 | } 568 | dl.tsd-comment-tags dd pre, 569 | dl.tsd-comment-tags dd:after { 570 | clear: both; 571 | } 572 | dl.tsd-comment-tags p { 573 | margin: 0; 574 | } 575 | 576 | .tsd-panel.tsd-comment .lead { 577 | font-size: 1.1em; 578 | line-height: 1.333em; 579 | margin-bottom: 2em; 580 | } 581 | .tsd-panel.tsd-comment .lead:last-child { 582 | margin-bottom: 0; 583 | } 584 | 585 | .toggle-protected .tsd-is-private { 586 | display: none; 587 | } 588 | 589 | .toggle-public .tsd-is-private, 590 | .toggle-public .tsd-is-protected, 591 | .toggle-public .tsd-is-private-protected { 592 | display: none; 593 | } 594 | 595 | .toggle-inherited .tsd-is-inherited { 596 | display: none; 597 | } 598 | 599 | .toggle-externals .tsd-is-external { 600 | display: none; 601 | } 602 | 603 | #tsd-filter { 604 | position: relative; 605 | display: inline-block; 606 | height: 40px; 607 | vertical-align: bottom; 608 | } 609 | .no-filter #tsd-filter { 610 | display: none; 611 | } 612 | #tsd-filter .tsd-filter-group { 613 | display: inline-block; 614 | height: 40px; 615 | vertical-align: bottom; 616 | white-space: nowrap; 617 | } 618 | #tsd-filter input { 619 | display: none; 620 | } 621 | @media (max-width: 900px) { 622 | #tsd-filter .tsd-filter-group { 623 | display: block; 624 | position: absolute; 625 | top: 40px; 626 | right: 20px; 627 | height: auto; 628 | background-color: var(--color-panel); 629 | visibility: hidden; 630 | transform: translate(50%, 0); 631 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); 632 | } 633 | .has-options #tsd-filter .tsd-filter-group { 634 | visibility: visible; 635 | } 636 | .to-has-options #tsd-filter .tsd-filter-group { 637 | animation: fade-in 0.2s; 638 | } 639 | .from-has-options #tsd-filter .tsd-filter-group { 640 | animation: fade-out 0.2s; 641 | } 642 | #tsd-filter label, 643 | #tsd-filter .tsd-select { 644 | display: block; 645 | padding-right: 20px; 646 | } 647 | } 648 | 649 | footer { 650 | border-top: 1px solid var(--color-panel-divider); 651 | background-color: var(--color-panel); 652 | } 653 | footer:after { 654 | content: ''; 655 | display: table; 656 | } 657 | footer.with-border-bottom { 658 | border-bottom: 1px solid var(--color-panel-divider); 659 | } 660 | footer .tsd-legend-group { 661 | font-size: 0; 662 | } 663 | footer .tsd-legend { 664 | display: inline-block; 665 | width: 25%; 666 | padding: 0; 667 | font-size: 16px; 668 | list-style: none; 669 | line-height: 1.333em; 670 | vertical-align: top; 671 | } 672 | @media (max-width: 900px) { 673 | footer .tsd-legend { 674 | width: 50%; 675 | } 676 | } 677 | 678 | .tsd-hierarchy { 679 | list-style: square; 680 | padding: 0 0 0 20px; 681 | margin: 0; 682 | } 683 | .tsd-hierarchy .target { 684 | font-weight: bold; 685 | } 686 | 687 | .tsd-index-panel .tsd-index-content { 688 | margin-bottom: -30px !important; 689 | } 690 | .tsd-index-panel .tsd-index-section { 691 | margin-bottom: 30px !important; 692 | } 693 | .tsd-index-panel h3 { 694 | margin: 0 -20px 10px -20px; 695 | padding: 0 20px 10px 20px; 696 | border-bottom: 1px solid var(--color-panel-divider); 697 | } 698 | .tsd-index-panel ul.tsd-index-list { 699 | -webkit-column-count: 3; 700 | -moz-column-count: 3; 701 | -ms-column-count: 3; 702 | -o-column-count: 3; 703 | column-count: 3; 704 | -webkit-column-gap: 20px; 705 | -moz-column-gap: 20px; 706 | -ms-column-gap: 20px; 707 | -o-column-gap: 20px; 708 | column-gap: 20px; 709 | padding: 0; 710 | list-style: none; 711 | line-height: 1.333em; 712 | } 713 | @media (max-width: 900px) { 714 | .tsd-index-panel ul.tsd-index-list { 715 | -webkit-column-count: 1; 716 | -moz-column-count: 1; 717 | -ms-column-count: 1; 718 | -o-column-count: 1; 719 | column-count: 1; 720 | } 721 | } 722 | @media (min-width: 901px) and (max-width: 1024px) { 723 | .tsd-index-panel ul.tsd-index-list { 724 | -webkit-column-count: 2; 725 | -moz-column-count: 2; 726 | -ms-column-count: 2; 727 | -o-column-count: 2; 728 | column-count: 2; 729 | } 730 | } 731 | .tsd-index-panel ul.tsd-index-list li { 732 | -webkit-page-break-inside: avoid; 733 | -moz-page-break-inside: avoid; 734 | -ms-page-break-inside: avoid; 735 | -o-page-break-inside: avoid; 736 | page-break-inside: avoid; 737 | } 738 | .tsd-index-panel a, 739 | .tsd-index-panel .tsd-parent-kind-module a { 740 | color: var(--color-ts); 741 | } 742 | .tsd-index-panel .tsd-parent-kind-interface a { 743 | color: var(--color-ts-interface); 744 | } 745 | .tsd-index-panel .tsd-parent-kind-enum a { 746 | color: var(--color-ts-enum); 747 | } 748 | .tsd-index-panel .tsd-parent-kind-class a { 749 | color: var(--color-ts-class); 750 | } 751 | .tsd-index-panel .tsd-kind-module a { 752 | color: var(--color-ts); 753 | } 754 | .tsd-index-panel .tsd-kind-interface a { 755 | color: var(--color-ts-interface); 756 | } 757 | .tsd-index-panel .tsd-kind-enum a { 758 | color: var(--color-ts-enum); 759 | } 760 | .tsd-index-panel .tsd-kind-class a { 761 | color: var(--color-ts-class); 762 | } 763 | .tsd-index-panel .tsd-is-private a { 764 | color: var(--color-ts-private); 765 | } 766 | 767 | .tsd-flag { 768 | display: inline-block; 769 | padding: 0.25em 0.4em; 770 | border-radius: 4px; 771 | color: var(--color-comment-tag-text); 772 | background-color: var(--color-comment-tag); 773 | text-indent: 0; 774 | font-size: 75%; 775 | line-height: 1; 776 | font-weight: normal; 777 | } 778 | 779 | .tsd-anchor { 780 | position: absolute; 781 | top: -100px; 782 | } 783 | 784 | .tsd-member { 785 | position: relative; 786 | } 787 | .tsd-member .tsd-anchor + h3 { 788 | margin-top: 0; 789 | margin-bottom: 0; 790 | border-bottom: none; 791 | } 792 | .tsd-member [data-tsd-kind] { 793 | color: var(--color-ts); 794 | } 795 | .tsd-member [data-tsd-kind='Interface'] { 796 | color: var(--color-ts-interface); 797 | } 798 | .tsd-member [data-tsd-kind='Enum'] { 799 | color: var(--color-ts-enum); 800 | } 801 | .tsd-member [data-tsd-kind='Class'] { 802 | color: var(--color-ts-class); 803 | } 804 | .tsd-member [data-tsd-kind='Private'] { 805 | color: var(--color-ts-private); 806 | } 807 | 808 | .tsd-navigation { 809 | margin: 0 0 0 40px; 810 | } 811 | .tsd-navigation a { 812 | display: block; 813 | padding-top: 2px; 814 | padding-bottom: 2px; 815 | border-left: 2px solid transparent; 816 | color: var(--color-text); 817 | text-decoration: none; 818 | transition: border-left-color 0.1s; 819 | } 820 | .tsd-navigation a:hover { 821 | text-decoration: underline; 822 | } 823 | .tsd-navigation ul { 824 | margin: 0; 825 | padding: 0; 826 | list-style: none; 827 | } 828 | .tsd-navigation li { 829 | padding: 0; 830 | } 831 | 832 | .tsd-navigation.primary { 833 | padding-bottom: 40px; 834 | } 835 | .tsd-navigation.primary a { 836 | display: block; 837 | padding-top: 6px; 838 | padding-bottom: 6px; 839 | } 840 | .tsd-navigation.primary ul li a { 841 | padding-left: 5px; 842 | } 843 | .tsd-navigation.primary ul li li a { 844 | padding-left: 25px; 845 | } 846 | .tsd-navigation.primary ul li li li a { 847 | padding-left: 45px; 848 | } 849 | .tsd-navigation.primary ul li li li li a { 850 | padding-left: 65px; 851 | } 852 | .tsd-navigation.primary ul li li li li li a { 853 | padding-left: 85px; 854 | } 855 | .tsd-navigation.primary ul li li li li li li a { 856 | padding-left: 105px; 857 | } 858 | .tsd-navigation.primary > ul { 859 | border-bottom: 1px solid var(--color-panel-divider); 860 | } 861 | .tsd-navigation.primary li { 862 | border-top: 1px solid var(--color-panel-divider); 863 | } 864 | .tsd-navigation.primary li.current > a { 865 | font-weight: bold; 866 | } 867 | .tsd-navigation.primary li.label span { 868 | display: block; 869 | padding: 20px 0 6px 5px; 870 | color: var(--color-menu-label); 871 | } 872 | .tsd-navigation.primary li.globals + li > span, 873 | .tsd-navigation.primary li.globals + li > a { 874 | padding-top: 20px; 875 | } 876 | 877 | .tsd-navigation.secondary { 878 | max-height: calc(100vh - 1rem - 40px); 879 | overflow: auto; 880 | position: sticky; 881 | top: calc(0.5rem + 40px); 882 | transition: 0.3s; 883 | } 884 | .tsd-navigation.secondary.tsd-navigation--toolbar-hide { 885 | max-height: calc(100vh - 1rem); 886 | top: 0.5rem; 887 | } 888 | .tsd-navigation.secondary ul { 889 | transition: opacity 0.2s; 890 | } 891 | .tsd-navigation.secondary ul li a { 892 | padding-left: 25px; 893 | } 894 | .tsd-navigation.secondary ul li li a { 895 | padding-left: 45px; 896 | } 897 | .tsd-navigation.secondary ul li li li a { 898 | padding-left: 65px; 899 | } 900 | .tsd-navigation.secondary ul li li li li a { 901 | padding-left: 85px; 902 | } 903 | .tsd-navigation.secondary ul li li li li li a { 904 | padding-left: 105px; 905 | } 906 | .tsd-navigation.secondary ul li li li li li li a { 907 | padding-left: 125px; 908 | } 909 | .tsd-navigation.secondary ul.current a { 910 | border-left-color: var(--color-panel-divider); 911 | } 912 | .tsd-navigation.secondary li.focus > a, 913 | .tsd-navigation.secondary ul.current li.focus > a { 914 | border-left-color: var(--color-menu-divider-focus); 915 | } 916 | .tsd-navigation.secondary li.current { 917 | margin-top: 20px; 918 | margin-bottom: 20px; 919 | border-left-color: var(--color-panel-divider); 920 | } 921 | .tsd-navigation.secondary li.current > a { 922 | font-weight: bold; 923 | } 924 | 925 | @media (min-width: 901px) { 926 | .menu-sticky-wrap { 927 | position: static; 928 | } 929 | } 930 | 931 | .tsd-panel { 932 | margin: 20px 0; 933 | padding: 20px; 934 | background-color: var(--color-panel); 935 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); 936 | } 937 | .tsd-panel:empty { 938 | display: none; 939 | } 940 | .tsd-panel > h1, 941 | .tsd-panel > h2, 942 | .tsd-panel > h3 { 943 | margin: 1.5em -20px 10px -20px; 944 | padding: 0 20px 10px 20px; 945 | border-bottom: 1px solid var(--color-panel-divider); 946 | } 947 | .tsd-panel > h1.tsd-before-signature, 948 | .tsd-panel > h2.tsd-before-signature, 949 | .tsd-panel > h3.tsd-before-signature { 950 | margin-bottom: 0; 951 | border-bottom: 0; 952 | } 953 | .tsd-panel table { 954 | display: block; 955 | width: 100%; 956 | overflow: auto; 957 | margin-top: 10px; 958 | word-break: normal; 959 | word-break: keep-all; 960 | border-collapse: collapse; 961 | } 962 | .tsd-panel table th { 963 | font-weight: bold; 964 | } 965 | .tsd-panel table th, 966 | .tsd-panel table td { 967 | padding: 6px 13px; 968 | border: 1px solid var(--color-panel-divider); 969 | } 970 | .tsd-panel table tr { 971 | background: var(--color-background); 972 | } 973 | .tsd-panel table tr:nth-child(even) { 974 | background: var(--color-secondary-background); 975 | } 976 | 977 | .tsd-panel-group { 978 | margin: 60px 0; 979 | } 980 | .tsd-panel-group > h1, 981 | .tsd-panel-group > h2, 982 | .tsd-panel-group > h3 { 983 | padding-left: 20px; 984 | padding-right: 20px; 985 | } 986 | 987 | #tsd-search { 988 | transition: background-color 0.2s; 989 | } 990 | #tsd-search .title { 991 | position: relative; 992 | z-index: 2; 993 | } 994 | #tsd-search .field { 995 | position: absolute; 996 | left: 0; 997 | top: 0; 998 | right: 40px; 999 | height: 40px; 1000 | } 1001 | #tsd-search .field input { 1002 | box-sizing: border-box; 1003 | position: relative; 1004 | top: -50px; 1005 | z-index: 1; 1006 | width: 100%; 1007 | padding: 0 10px; 1008 | opacity: 0; 1009 | outline: 0; 1010 | border: 0; 1011 | background: transparent; 1012 | color: var(--color-text); 1013 | } 1014 | #tsd-search .field label { 1015 | position: absolute; 1016 | overflow: hidden; 1017 | right: -40px; 1018 | } 1019 | #tsd-search .field input, 1020 | #tsd-search .title { 1021 | transition: opacity 0.2s; 1022 | } 1023 | #tsd-search .results { 1024 | position: absolute; 1025 | visibility: hidden; 1026 | top: 40px; 1027 | width: 100%; 1028 | margin: 0; 1029 | padding: 0; 1030 | list-style: none; 1031 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); 1032 | } 1033 | #tsd-search .results li { 1034 | padding: 0 10px; 1035 | background-color: var(--color-background); 1036 | } 1037 | #tsd-search .results li:nth-child(even) { 1038 | background-color: var(--color-panel); 1039 | } 1040 | #tsd-search .results li.state { 1041 | display: none; 1042 | } 1043 | #tsd-search .results li.current, 1044 | #tsd-search .results li:hover { 1045 | background-color: var(--color-panel-divider); 1046 | } 1047 | #tsd-search .results a { 1048 | display: block; 1049 | } 1050 | #tsd-search .results a:before { 1051 | top: 10px; 1052 | } 1053 | #tsd-search .results span.parent { 1054 | color: var(--color-text-aside); 1055 | font-weight: normal; 1056 | } 1057 | #tsd-search.has-focus { 1058 | background-color: var(--color-panel-divider); 1059 | } 1060 | #tsd-search.has-focus .field input { 1061 | top: 0; 1062 | opacity: 1; 1063 | } 1064 | #tsd-search.has-focus .title { 1065 | z-index: 0; 1066 | opacity: 0; 1067 | } 1068 | #tsd-search.has-focus .results { 1069 | visibility: visible; 1070 | } 1071 | #tsd-search.loading .results li.state.loading { 1072 | display: block; 1073 | } 1074 | #tsd-search.failure .results li.state.failure { 1075 | display: block; 1076 | } 1077 | 1078 | .tsd-signature { 1079 | margin: 0 0 1em 0; 1080 | padding: 10px; 1081 | border: 1px solid var(--color-panel-divider); 1082 | font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; 1083 | font-size: 14px; 1084 | overflow-x: auto; 1085 | } 1086 | .tsd-signature.tsd-kind-icon { 1087 | padding-left: 30px; 1088 | } 1089 | .tsd-signature.tsd-kind-icon:before { 1090 | top: 10px; 1091 | left: 10px; 1092 | } 1093 | .tsd-panel > .tsd-signature { 1094 | margin-left: -20px; 1095 | margin-right: -20px; 1096 | border-width: 1px 0; 1097 | } 1098 | .tsd-panel > .tsd-signature.tsd-kind-icon { 1099 | padding-left: 40px; 1100 | } 1101 | .tsd-panel > .tsd-signature.tsd-kind-icon:before { 1102 | left: 20px; 1103 | } 1104 | 1105 | .tsd-signature-symbol { 1106 | color: var(--color-text-aside); 1107 | font-weight: normal; 1108 | } 1109 | 1110 | .tsd-signature-type { 1111 | font-style: italic; 1112 | font-weight: normal; 1113 | } 1114 | 1115 | .tsd-signatures { 1116 | padding: 0; 1117 | margin: 0 0 1em 0; 1118 | border: 1px solid var(--color-panel-divider); 1119 | } 1120 | .tsd-signatures .tsd-signature { 1121 | margin: 0; 1122 | border-width: 1px 0 0 0; 1123 | transition: background-color 0.1s; 1124 | } 1125 | .tsd-signatures .tsd-signature:first-child { 1126 | border-top-width: 0; 1127 | } 1128 | .tsd-signatures .tsd-signature.current { 1129 | background-color: var(--color-panel-divider); 1130 | } 1131 | .tsd-signatures.active > .tsd-signature { 1132 | cursor: pointer; 1133 | } 1134 | .tsd-panel > .tsd-signatures { 1135 | margin-left: -20px; 1136 | margin-right: -20px; 1137 | border-width: 1px 0; 1138 | } 1139 | .tsd-panel > .tsd-signatures .tsd-signature.tsd-kind-icon { 1140 | padding-left: 40px; 1141 | } 1142 | .tsd-panel > .tsd-signatures .tsd-signature.tsd-kind-icon:before { 1143 | left: 20px; 1144 | } 1145 | .tsd-panel > a.anchor + .tsd-signatures { 1146 | border-top-width: 0; 1147 | margin-top: -20px; 1148 | } 1149 | 1150 | ul.tsd-descriptions { 1151 | position: relative; 1152 | overflow: hidden; 1153 | padding: 0; 1154 | list-style: none; 1155 | } 1156 | ul.tsd-descriptions.active > .tsd-description { 1157 | display: none; 1158 | } 1159 | ul.tsd-descriptions.active > .tsd-description.current { 1160 | display: block; 1161 | } 1162 | ul.tsd-descriptions.active > .tsd-description.fade-in { 1163 | animation: fade-in-delayed 0.3s; 1164 | } 1165 | ul.tsd-descriptions.active > .tsd-description.fade-out { 1166 | animation: fade-out-delayed 0.3s; 1167 | position: absolute; 1168 | display: block; 1169 | top: 0; 1170 | left: 0; 1171 | right: 0; 1172 | opacity: 0; 1173 | visibility: hidden; 1174 | } 1175 | ul.tsd-descriptions h4, 1176 | ul.tsd-descriptions .tsd-index-panel h3, 1177 | .tsd-index-panel ul.tsd-descriptions h3 { 1178 | font-size: 16px; 1179 | margin: 1em 0 0.5em 0; 1180 | } 1181 | 1182 | ul.tsd-parameters, 1183 | ul.tsd-type-parameters { 1184 | list-style: square; 1185 | margin: 0; 1186 | padding-left: 20px; 1187 | } 1188 | ul.tsd-parameters > li.tsd-parameter-signature, 1189 | ul.tsd-type-parameters > li.tsd-parameter-signature { 1190 | list-style: none; 1191 | margin-left: -20px; 1192 | } 1193 | ul.tsd-parameters h5, 1194 | ul.tsd-type-parameters h5 { 1195 | font-size: 16px; 1196 | margin: 1em 0 0.5em 0; 1197 | } 1198 | ul.tsd-parameters .tsd-comment, 1199 | ul.tsd-type-parameters .tsd-comment { 1200 | margin-top: -0.5em; 1201 | } 1202 | 1203 | .tsd-sources { 1204 | font-size: 14px; 1205 | color: var(--color-text-aside); 1206 | margin: 0 0 1em 0; 1207 | } 1208 | .tsd-sources a { 1209 | color: var(--color-text-aside); 1210 | text-decoration: underline; 1211 | } 1212 | .tsd-sources ul, 1213 | .tsd-sources p { 1214 | margin: 0 !important; 1215 | } 1216 | .tsd-sources ul { 1217 | list-style: none; 1218 | padding: 0; 1219 | } 1220 | 1221 | .tsd-page-toolbar { 1222 | position: fixed; 1223 | z-index: 1; 1224 | top: 0; 1225 | left: 0; 1226 | width: 100%; 1227 | height: 40px; 1228 | color: var(--color-toolbar-text); 1229 | background: var(--color-toolbar); 1230 | border-bottom: 1px solid var(--color-panel-divider); 1231 | transition: transform 0.3s linear; 1232 | } 1233 | .tsd-page-toolbar a { 1234 | color: var(--color-toolbar-text); 1235 | text-decoration: none; 1236 | } 1237 | .tsd-page-toolbar a.title { 1238 | font-weight: bold; 1239 | } 1240 | .tsd-page-toolbar a.title:hover { 1241 | text-decoration: underline; 1242 | } 1243 | .tsd-page-toolbar .table-wrap { 1244 | display: table; 1245 | width: 100%; 1246 | height: 40px; 1247 | } 1248 | .tsd-page-toolbar .table-cell { 1249 | display: table-cell; 1250 | position: relative; 1251 | white-space: nowrap; 1252 | line-height: 40px; 1253 | } 1254 | .tsd-page-toolbar .table-cell:first-child { 1255 | width: 100%; 1256 | } 1257 | 1258 | .tsd-page-toolbar--hide { 1259 | transform: translateY(-100%); 1260 | } 1261 | 1262 | .tsd-select .tsd-select-list li:before, 1263 | .tsd-select .tsd-select-label:before, 1264 | .tsd-widget:before { 1265 | content: ''; 1266 | display: inline-block; 1267 | width: 40px; 1268 | height: 40px; 1269 | margin: 0 -8px 0 0; 1270 | background-image: url(./widgets.png); 1271 | background-repeat: no-repeat; 1272 | text-indent: -1024px; 1273 | vertical-align: bottom; 1274 | filter: var(--icon-filter); 1275 | } 1276 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 1277 | .tsd-select .tsd-select-list li:before, 1278 | .tsd-select .tsd-select-label:before, 1279 | .tsd-widget:before { 1280 | background-image: url(./widgets@2x.png); 1281 | background-size: 320px 40px; 1282 | } 1283 | } 1284 | 1285 | .tsd-widget { 1286 | display: inline-block; 1287 | overflow: hidden; 1288 | opacity: 0.8; 1289 | height: 40px; 1290 | transition: opacity 0.1s, background-color 0.2s; 1291 | vertical-align: bottom; 1292 | cursor: pointer; 1293 | } 1294 | .tsd-widget:hover { 1295 | opacity: 0.9; 1296 | } 1297 | .tsd-widget.active { 1298 | opacity: 1; 1299 | background-color: var(--color-panel-divider); 1300 | } 1301 | .tsd-widget.no-caption { 1302 | width: 40px; 1303 | } 1304 | .tsd-widget.no-caption:before { 1305 | margin: 0; 1306 | } 1307 | .tsd-widget.search:before { 1308 | background-position: 0 0; 1309 | } 1310 | .tsd-widget.menu:before { 1311 | background-position: -40px 0; 1312 | } 1313 | .tsd-widget.options:before { 1314 | background-position: -80px 0; 1315 | } 1316 | .tsd-widget.options, 1317 | .tsd-widget.menu { 1318 | display: none; 1319 | } 1320 | @media (max-width: 900px) { 1321 | .tsd-widget.options, 1322 | .tsd-widget.menu { 1323 | display: inline-block; 1324 | } 1325 | } 1326 | input[type='checkbox'] + .tsd-widget:before { 1327 | background-position: -120px 0; 1328 | } 1329 | input[type='checkbox']:checked + .tsd-widget:before { 1330 | background-position: -160px 0; 1331 | } 1332 | 1333 | .tsd-select { 1334 | position: relative; 1335 | display: inline-block; 1336 | height: 40px; 1337 | transition: opacity 0.1s, background-color 0.2s; 1338 | vertical-align: bottom; 1339 | cursor: pointer; 1340 | } 1341 | .tsd-select .tsd-select-label { 1342 | opacity: 0.6; 1343 | transition: opacity 0.2s; 1344 | } 1345 | .tsd-select .tsd-select-label:before { 1346 | background-position: -240px 0; 1347 | } 1348 | .tsd-select.active .tsd-select-label { 1349 | opacity: 0.8; 1350 | } 1351 | .tsd-select.active .tsd-select-list { 1352 | visibility: visible; 1353 | opacity: 1; 1354 | transition-delay: 0s; 1355 | } 1356 | .tsd-select .tsd-select-list { 1357 | position: absolute; 1358 | visibility: hidden; 1359 | top: 40px; 1360 | left: 0; 1361 | margin: 0; 1362 | padding: 0; 1363 | opacity: 0; 1364 | list-style: none; 1365 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); 1366 | transition: visibility 0s 0.2s, opacity 0.2s; 1367 | } 1368 | .tsd-select .tsd-select-list li { 1369 | padding: 0 20px 0 0; 1370 | background-color: var(--color-background); 1371 | } 1372 | .tsd-select .tsd-select-list li:before { 1373 | background-position: 40px 0; 1374 | } 1375 | .tsd-select .tsd-select-list li:nth-child(even) { 1376 | background-color: var(--color-panel); 1377 | } 1378 | .tsd-select .tsd-select-list li:hover { 1379 | background-color: var(--color-panel-divider); 1380 | } 1381 | .tsd-select .tsd-select-list li.selected:before { 1382 | background-position: -200px 0; 1383 | } 1384 | @media (max-width: 900px) { 1385 | .tsd-select .tsd-select-list { 1386 | top: 0; 1387 | left: auto; 1388 | right: 100%; 1389 | margin-right: -5px; 1390 | } 1391 | .tsd-select .tsd-select-label:before { 1392 | background-position: -280px 0; 1393 | } 1394 | } 1395 | 1396 | img { 1397 | max-width: 100%; 1398 | } 1399 | 1400 | .tsd-anchor-icon { 1401 | margin-left: 10px; 1402 | vertical-align: middle; 1403 | color: var(--color-text); 1404 | } 1405 | 1406 | .tsd-anchor-icon svg { 1407 | width: 1em; 1408 | height: 1em; 1409 | visibility: hidden; 1410 | } 1411 | 1412 | .tsd-anchor-link:hover > .tsd-anchor-icon svg { 1413 | visibility: visible; 1414 | } 1415 | -------------------------------------------------------------------------------- /docs/assets/widgets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atlasgroupcz/react-wrap/5259c4a6383267d6fc026c3bf1849bb6b57c46b2/docs/assets/widgets.png -------------------------------------------------------------------------------- /docs/assets/widgets@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atlasgroupcz/react-wrap/5259c4a6383267d6fc026c3bf1849bb6b57c46b2/docs/assets/widgets@2x.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | @atlasgroup/react-wrap 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 |
23 |
24 |
25 |
26 | 46 |
47 |
48 | Options 54 |
55 |
59 | All 62 |
    63 |
  • Public
    • 64 |
  • 65 | Public/Protected 66 |
    • 67 |
  • 71 | All 72 |
    • 73 |
74 |
75 | 92 |
93 |
94 | Menu 100 |
101 |
102 |
103 |
104 |
105 |

@atlasgroup/react-wrap

106 |
107 |
108 |
109 |
110 |
111 |
112 | 117 |

React Wrap 🌯

118 | 119 |

120 | A straight-forward react component logic reusing and 121 | close-coupling prevention utility 122 |

123 | 124 | 129 |

130 | Documentation 📚 134 |

135 | 136 | 137 | 142 |

Quick start

143 | 144 | 145 | 150 |

Installation

151 | 152 |

npm:

153 | 
npm install @atlasgroup/react-wrap
154 |
155 |

yarn:

156 | 
yarn add @atlasgroup/react-wrap
157 |
158 | 159 | 164 |

Usage

165 | 166 |

167 | react-wrap enables a typesafe and 168 | highly flexible way of implementing logic for 169 | presentational components, or extending/simplifying 170 | others. 171 |

172 |

173 | A component and a hook are passed as arguments to 174 | wrap. 175 |

176 |

177 | wrap creates a component where the 178 | input props are preprocessed by the controller hook 179 | before passing them to the original component, 180 | essentially working as middleware, but for react 181 | components. 182 |

183 | 184 | 189 |

Basic scheme

190 | 191 | 
const Component = wrap(BaseComponent, useMyHook);
192 |
193 | 
|  pass props to Component              <Component prop1={value1}>
|  props are intercepted by useMyHook   useMyHook({prop1: value1})
|                                       *do stuff in useMyHook*
V  return new props for BaseComponent   <BaseComponent prop2={value2} />
194 |
195 | 196 | 201 |

Examples

202 | 203 | 204 | 209 |

Implementing a presentational component

210 | 211 | 
const useTogglableButton = (): ButtonProps => {
    const [isToggled, setIsToggled] = useState<boolean>(false);

    const onClick = useCallback(() => setIsToggled((current) => !current), []);

    return {
        color: isToggled ? 'red' : 'green',
        onClick,
    };
};

const TogglableButton = wrap(Button, useTogglableButton);
212 |
213 | 214 | 219 |

220 | Extending and/or hydrating an existing component 221 |

222 | 223 | 
type CalendarWithEventsProps = CalendarProps & { showEvents?: boolean };

const useEvents = ({
    showEvents,
    ...props
}: CalendarWithEventsProps): CalendarProps => {
    // Don't query if events will not be shown
    const { data } = useEvents({ skip: !showEvents });

    const events = data?.events;

    return {
        events,
        ...props,
    };
};

const CalendarWithEvents = wrap(Calendar, useEvents);
224 |
225 | 226 | 231 |

Simplifying an existing component

232 | 233 | 
type LessComplicatedComponentProps = Omit<
    SuperComplicatedComponentProps,
    'some' | 'random' | 'stuff'
>;

const useLessComplicatedComponent = (
    props: LessComplicatedComponentProps
): SuperComplicatedComponentProps => {
    // Evaluate "some random stuff"
    // ...

    return {
        some,
        random,
        stuff,
        ...props,
    };
};

const LessComplicatedComponent = wrap(
    SuperComplicatedComponent,
    useLessComplicatedComponent
);
234 |
235 |
236 | 237 | 242 |

react-wrap variants

243 | 244 |

245 | react-wrap exposes three slightly 246 | different variants of itself: 247 |

248 |
    249 |
  • 250 | wrap - gives 251 | children special treatment as a 252 | prop and passes them down to the wrapped 253 | component directly 254 |
    • 255 |
  • 256 | fastWrap - ignores 257 | children, absolute control over the 258 | flow of props is given to the hook passed as an 259 | argument 260 |
    • 261 |
  • 262 | memoWrap - wraps the resulting 263 | component in a React.memo, useful 264 | for optimizations, exposes a third parameter, a 265 | custom arePropsEqual, treats 266 | children like wrap 267 |
    • 268 |
269 |
270 | 271 | 276 |

Bug reports, feature requests and questions

277 | 278 |

279 | Feel free to file a bug report, feature request or a 280 | question in the issues section with the correspoding 281 | [BUG], [FEATURE], 282 | [QUESTION] prefix in the title. 283 |

284 | 285 | 290 |

Contributing

291 | 292 |

293 | Any contributions must pass CI checks and a code 294 | review by a project maintainer. Please rebase your 295 | branches with the current master before 296 | submitting a pull request. 297 |

298 |
299 |
300 |
301 | 308 | 339 |
340 |
341 |
342 |
343 |
344 |

Settings

345 |

346 | Theme 347 | 352 |

353 |
354 |
355 |
356 |

357 | Generated using 358 | TypeDoc 359 |

360 |
361 |
362 | 363 | 364 | 365 | -------------------------------------------------------------------------------- /docs/modules.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | @atlasgroup/react-wrap 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 |
23 |
24 |
25 |
26 | 46 |
47 |
48 | Options 54 |
55 |
59 | All 62 |
    63 |
  • Public
    • 64 |
  • 65 | Public/Protected 66 |
    • 67 |
  • 71 | All 72 |
    • 73 |
74 |
75 | 92 |
93 |
94 | Menu 100 |
101 |
102 |
103 |
104 |
105 |

@atlasgroup/react-wrap

106 |
107 |
108 |
109 |
110 |
111 |
112 |

Index

113 |
114 |
115 |
116 |

Functions

117 | 146 |
147 |
148 |
149 |
150 |
151 |

Functions

152 |
155 | 156 |

157 | fastWrap 171 | 176 | 179 | 183 |

184 |
    187 |
  • 188 | fastWrap<V, C>(View: V, useController: C): FC<InferProps<C>> 234 |
    • 235 |
236 |
    237 |
  • 238 | 249 |
    250 |
    251 |

    252 | Unlike wrap, 253 | fastWrap 254 | doesn't allow 255 | children to fall 256 | through 257 |

    258 |
    259 |
    260 |

    261 | Type parameters 262 |

    263 |
      264 |
    • 265 |

      266 | V: FunctionComponent<any, V> 289 |

      290 |
      • 291 |
    • 292 |

      293 | C: (argsObj: any) 311 | => PropsWithChildren<PropsWithoutRef<ComponentProps<V>>> 344 |

      345 |
      • 346 |
    347 |

    348 | Parameters 349 |

    350 |
      351 |
    • 352 |
      353 | View: 354 | V 359 |
      360 |
      363 |
      364 |

      A view component

      365 |
      366 |
      367 |
      • 368 |
    • 369 |
      370 | useController: 371 | C 376 |
      377 |
      380 |
      381 |

      382 | A controller hook, can 383 | be parametrized with a 384 | object parameter 385 |

      386 |
      387 |
      388 |
      • 389 |
    390 |

    391 | Returns 392 | FC<InferProps<C>> 409 |

    410 |
    • 411 |
412 |
413 |
416 | 417 |

418 | memoWrap 432 | 437 | 440 | 444 |

445 |
    448 |
  • 449 | memoWrap<V, C>(View: V, useController: C, propsAreEqual?: (prevProps: Readonly<InferProps<C>>, nextProps: Readonly<InferProps<C>>) 520 | => boolean): NamedExoticComponent<PropsWithChildren<InferProps<C>>> 548 |
    • 549 |
550 |
    551 |
  • 552 | 563 |
    564 |
    565 |

    566 | Creates a memoized 567 | implementation wrap 568 |

    569 |
    570 |
    571 |

    572 | Type parameters 573 |

    574 |
      575 |
    • 576 |

      577 | V: FunctionComponent<any, V> 600 |

      601 |
      • 602 |
    • 603 |

      604 | C: (argsObj: any) 622 | => PropsWithChildren<PropsWithoutRef<ComponentProps<V>>> 655 |

      656 |
      • 657 |
    658 |

    659 | Parameters 660 |

    661 |
      662 |
    • 663 |
      664 | View: 665 | V 670 |
      671 |
      674 |
      675 |

      A view component

      676 |
      677 |
      678 |
      • 679 |
    • 680 |
      681 | useController: 682 | C 687 |
      688 |
      691 |
      692 |

      693 | A controller hook, can 694 | be parametrized with a 695 | object parameter 696 |

      697 |
      698 |
      699 |
      • 700 |
    • 701 |
      702 | Optional 706 | propsAreEqual: 707 | (prevProps: Readonly<InferProps<C>>, nextProps: Readonly<InferProps<C>>) 766 | => boolean 771 |
      772 |
      775 |
      776 |

      777 | Like 778 | React.memo, 779 | a custom 780 | propsAreEqual 783 | can be defined to change 784 | the way component 785 | rerendering behaves 786 |

      787 |
      788 |
      789 |
        790 |
      • 793 |
          796 |
        • 799 | (prevProps: Readonly<InferProps<C>>, nextProps: Readonly<InferProps<C>>): boolean 862 |
          • 863 |
        864 |
          867 |
        • 870 |

          873 | Parameters 874 |

          875 |
            878 |
          • 879 |
            880 | prevProps: 881 | Readonly<InferProps<C>> 904 |
            905 |
            • 906 |
          • 907 |
            908 | nextProps: 909 | Readonly<InferProps<C>> 932 |
            933 |
            • 934 |
          935 |

          938 | Returns 939 | boolean 943 |

          944 |
          • 945 |
        946 |
        • 947 |
      948 |
      • 949 |
    950 |

    951 | Returns 952 | NamedExoticComponent<PropsWithChildren<InferProps<C>>> 975 |

    976 |
    • 977 |
978 |
979 |
982 | 983 |

984 | wrap 998 | 1003 | 1006 | 1010 |

1011 |
    1014 |
  • 1015 | wrap<V, C>(View: V, useController: C): FC<InferProps<C>> 1060 |
    • 1061 |
1062 |
    1063 |
  • 1064 | 1075 |
    1076 |
    1077 |

    1078 | Creates an implementation of a 1079 | wrapped component using 1080 | a View and a Controller hook 1081 |

    1082 |
    1083 |
    1084 |

    1085 | Type parameters 1086 |

    1087 |
      1088 |
    • 1089 |

      1090 | V: FunctionComponent<any, V> 1113 |

      1114 |
      • 1115 |
    • 1116 |

      1117 | C: (argsObj: any) 1135 | => PropsWithChildren<PropsWithoutRef<ComponentProps<V>>> 1168 |

      1169 |
      • 1170 |
    1171 |

    1172 | Parameters 1173 |

    1174 |
      1175 |
    • 1176 |
      1177 | View: 1178 | V 1183 |
      1184 |
      1187 |
      1188 |

      A view component

      1189 |
      1190 |
      1191 |
      • 1192 |
    • 1193 |
      1194 | useController: 1195 | C 1200 |
      1201 |
      1204 |
      1205 |

      1206 | A controller hook, can 1207 | be parametrized with a 1208 | object parameter 1209 |

      1210 |
      1211 |
      1212 |
      • 1213 |
    1214 |

    1215 | Returns 1216 | FC<InferProps<C>> 1233 |

    1234 |
    • 1235 |
1236 |
1237 |
1238 |
1239 |
1240 | 1247 | 1278 |
1279 |
1280 |
1281 |
1282 |
1283 |

Settings

1284 |

1285 | Theme 1286 | 1291 |

1292 |
1293 |
1294 |
1295 |

1296 | Generated using 1297 | TypeDoc 1298 |

1299 |
1300 |
1301 | 1302 | 1303 | 1304 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | transform: { 5 | '^.+\\.tsx?$': ['babel-jest', { configFile: './babelrc.tests.json' }], 6 | }, 7 | moduleNameMapper: { 8 | '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|less|scss)$': 9 | '/tests/__mocks__/staticMock.js', 10 | }, 11 | // setupFiles: ['./tests/config/setupTests.js'], 12 | }; 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@atlasgroup/react-wrap", 3 | "description": "A straight-forward react component logic reusing and close-coupling prevention utility", 4 | "version": "1.3.0", 5 | "private": false, 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/atlasgroupcz/react-wrap" 9 | }, 10 | "homepage": "https://atlasgroupcz.github.io/react-wrap", 11 | "main": "lib/index.js", 12 | "scripts": { 13 | "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md", 14 | "changelog:all": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0", 15 | "version": "yarn docs && yarn changelog && git stage .", 16 | "docs": "typedoc src/index.ts", 17 | "depsTree": "dpdm src --ext \".ts,.tsx,.json\"", 18 | "lint": "eslint src -c .eslintrc.json --ext .js,.jsx,.ts,.tsx --max-warnings=0", 19 | "test": "jest -c jest.config.js", 20 | "typecheck": "tsc --noEmit", 21 | "build": "cross-env NODE_ENV=production babel src -d lib --extensions .ts,.tsx --ignore \"src/**/*.test.tsx\",\"src/**/*.test.ts\" --config-file ./babelrc.build.json && yarn typedefs", 22 | "prepublishOnly": "yarn build", 23 | "typedefs": "ttsc -p ./tsconfig.typedefs.json", 24 | "validateDepsTree": "node scripts/validateDependencyTree.js", 25 | "pruneModules": "ts-prune -p tsconfig.json -i \"tests|index|.test.|.*\\.{js|jsx}\" | grep -v \"(used in module)\" | grep --color -E \" - .*|$\" -", 26 | "integrate": "yarn lint && yarn typecheck && yarn validateDepsTree && yarn test" 27 | }, 28 | "author": "Atlas Consulting", 29 | "license": "MIT", 30 | "devDependencies": { 31 | "@babel/cli": "^7.17.10", 32 | "@babel/plugin-transform-runtime": "^7.18.0", 33 | "@babel/preset-env": "^7.18.0", 34 | "@babel/preset-typescript": "^7.17.12", 35 | "@commitlint/cli": "^17.0.0", 36 | "@commitlint/config-conventional": "^17.0.0", 37 | "@testing-library/react": "^13.2.0", 38 | "@testing-library/react-hooks": "^8.0.0", 39 | "@types/jest": "^26.0.23", 40 | "@typescript-eslint/eslint-plugin": "^5.26.0", 41 | "@typescript-eslint/parser": "^5.26.0", 42 | "babel-eslint": "^10.1.0", 43 | "babel-plugin-module-resolver": "^4.1.0", 44 | "babel-plugin-react-app": "^0.0.0", 45 | "babel-plugin-transform-class-properties": "^6.24.1", 46 | "babel-preset-minify": "^0.5.2", 47 | "babel-preset-react-app": "^10.0.1", 48 | "conventional-changelog-cli": "^2.2.2", 49 | "cross-env": "^7.0.3", 50 | "devmoji": "^2.3.0", 51 | "dpdm": "^3.9.0", 52 | "eslint": "^8.16.0", 53 | "eslint-config-react-app": "^7.0.1", 54 | "eslint-plugin-flowtype": "^8.0.3", 55 | "eslint-plugin-import": "^2.26.0", 56 | "eslint-plugin-jsx-a11y": "^6.5.1", 57 | "eslint-plugin-react": "^7.30.0", 58 | "eslint-plugin-react-hooks": "^4.5.0", 59 | "husky": "^4.3.0", 60 | "jest": "^26.6.3", 61 | "jest-environment-node": "^26.6.2", 62 | "jest-playwright-preset": "^1.5.2", 63 | "playwright": "^1.22.2", 64 | "prettier": "^2.6.2", 65 | "pretty-quick": "^3.1.3", 66 | "react": "^18.1.0", 67 | "react-dom": "^18.1.0", 68 | "react-test-renderer": "^18.1.0", 69 | "ts-jest": "^26.4.4", 70 | "ts-prune": "^0.10.3", 71 | "ttypescript": "^1.5.13", 72 | "typedoc": "^0.22.15", 73 | "typescript": "^4.6.4", 74 | "typescript-transform-paths": "^3.3.1" 75 | }, 76 | "husky": { 77 | "hooks": { 78 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", 79 | "pre-commit": "pretty-quick --staged", 80 | "prepare-commit-msg": "devmoji -e --lint", 81 | "post-commit": "yarn depsTree" 82 | } 83 | }, 84 | "peerDependencies": { 85 | "react": ">=16.8" 86 | }, 87 | "keywords": [ 88 | "react", 89 | "wrap", 90 | "components", 91 | "hooks", 92 | "pattern" 93 | ] 94 | } 95 | -------------------------------------------------------------------------------- /scripts/validateDependencyTree.js: -------------------------------------------------------------------------------- 1 | (async () => { 2 | try { 3 | const { 4 | parseDependencyTree, 5 | prettyCircular, 6 | parseCircular, 7 | } = require('dpdm'); 8 | 9 | const depsTree = await parseDependencyTree('src', { 10 | extensions: ['.ts', '.tsx', '.json'], 11 | exclude: /node_modules/, 12 | }); 13 | 14 | const circulars = parseCircular(depsTree); 15 | 16 | if (circulars.length) { 17 | console.log(` 18 | The following circular dependecies detected: 19 | 20 | ${prettyCircular(circulars)} 21 | `); 22 | process.exit(1); 23 | } else { 24 | console.log(` 25 | No circular dependecies detected 26 | `); 27 | process.exit(0); 28 | } 29 | } catch (err) { 30 | console.error(err); 31 | process.exit(1); 32 | } 33 | })(); 34 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | FC, 3 | ComponentPropsWithoutRef, 4 | createElement, 5 | memo, 6 | PropsWithChildren, 7 | } from 'react'; 8 | import { InferProps } from './types/InferProps'; 9 | 10 | /** 11 | * Creates an implementation of a *wrapped* component using a View and a Controller hook 12 | * @param View A view component 13 | * @param useController A controller hook, can be parametrized with a object parameter 14 | * 15 | */ 16 | export const wrap = 17 | < 18 | V extends FC>, 19 | C extends ( 20 | argsObj: any 21 | ) => PropsWithChildren> 22 | >( 23 | View: V, 24 | useController: C 25 | ): FC> => 26 | (controllerArgs) => 27 | createElement( 28 | View, 29 | useController(controllerArgs), 30 | controllerArgs.children 31 | ); 32 | 33 | /** 34 | * Creates a memoized implementation `wrap` 35 | * @param View A view component 36 | * @param useController A controller hook, can be parametrized with a object parameter 37 | * @param propsAreEqual Like `React.memo`, a custom `propsAreEqual` can be defined to change the way component rerendering behaves 38 | * 39 | */ 40 | export const memoWrap = < 41 | V extends FC>, 42 | C extends (argsObj: any) => PropsWithChildren> 43 | >( 44 | View: V, 45 | useController: C, 46 | propsAreEqual?: ( 47 | prevProps: Readonly>, 48 | nextProps: Readonly> 49 | ) => boolean 50 | ) => 51 | memo>>( 52 | (controllerArgs) => 53 | createElement( 54 | View, 55 | useController(controllerArgs), 56 | controllerArgs.children 57 | ), 58 | propsAreEqual 59 | ); 60 | 61 | /** 62 | * Unlike `wrap`, `fastWrap` doesn't allow `children` to fall through 63 | * @param View A view component 64 | * @param useController A controller hook, can be parametrized with a object parameter 65 | * 66 | */ 67 | export const fastWrap = 68 | < 69 | V extends FC>, 70 | C extends ( 71 | argsObj: any 72 | ) => PropsWithChildren> 73 | >( 74 | View: V, 75 | useController: C 76 | ): FC> => 77 | (controllerArgs) => 78 | createElement(View, useController(controllerArgs)); 79 | -------------------------------------------------------------------------------- /src/types/InferProps.ts: -------------------------------------------------------------------------------- 1 | export type InferProps any> = T extends ( 2 | props: infer P 3 | ) => any 4 | ? P extends {} 5 | ? P 6 | : {} 7 | : never; 8 | -------------------------------------------------------------------------------- /tests/fastWrap.test.tsx: -------------------------------------------------------------------------------- 1 | import { fastWrap } from '@library'; 2 | import { render } from '@testing-library/react'; 3 | import React, { FC, useEffect, useState } from 'react'; 4 | 5 | describe('fastWrap', () => { 6 | it('should be defined', () => { 7 | expect(fastWrap).toBeDefined(); 8 | }); 9 | 10 | it('should render', async () => { 11 | const match = 'ahoj'; 12 | 13 | const View: FC<{ text: string }> = ({ text }) =>
{text}
; 14 | 15 | const WrappedComponent = fastWrap(View, () => { 16 | const text = match; 17 | return { text }; 18 | }); 19 | 20 | const componentRender = render(); 21 | expect(componentRender).toBeDefined(); 22 | 23 | const queryResult = await componentRender.findByText(match); 24 | 25 | expect(queryResult.textContent).toBe(match); 26 | }); 27 | 28 | it('should not render excessively', async () => { 29 | const fn = jest.fn(); 30 | const View: FC<{ text: string }> = ({ text }) => { 31 | useEffect(fn); 32 | 33 | return
{text}
; 34 | }; 35 | const useText = () => { 36 | const [text, setText] = useState('some text'); 37 | 38 | // update text 39 | useEffect(() => { 40 | setText('some other text'); 41 | }, []); 42 | 43 | return { text }; 44 | }; 45 | const WrappedComponent = fastWrap(View, useText); 46 | 47 | render(); 48 | 49 | expect(fn).toHaveBeenCalledTimes(2); 50 | }); 51 | 52 | it('should not pass through children', async () => { 53 | const match = 'children'; 54 | const noMatch = 'no match'; 55 | 56 | const View: FC<{ text: string }> = ({ children }) => { 57 | return
{children || noMatch}
; 58 | }; 59 | const useText = () => { 60 | const text = 'some text'; 61 | return { text }; 62 | }; 63 | 64 | const WrappedComponent = fastWrap(View, useText); 65 | 66 | const componentRender = render( 67 | {match} 68 | ); 69 | 70 | const queryResult = await componentRender.findByText(noMatch); 71 | 72 | expect(queryResult.textContent).toBe(noMatch); 73 | }); 74 | }); 75 | -------------------------------------------------------------------------------- /tests/memoWrap.test.tsx: -------------------------------------------------------------------------------- 1 | import { memoWrap } from '@library'; 2 | import { render } from '@testing-library/react'; 3 | import React, { FC, useEffect, useState } from 'react'; 4 | 5 | describe('memoWrap', () => { 6 | it('should be defined', () => { 7 | expect(memoWrap).toBeDefined(); 8 | }); 9 | 10 | it('should render', async () => { 11 | const match = 'ahoj'; 12 | 13 | const View: FC<{ text: string }> = ({ text }) =>
{text}
; 14 | 15 | const WrappedComponent = memoWrap(View, () => { 16 | const text = match; 17 | return { text }; 18 | }); 19 | 20 | const componentRender = render(); 21 | expect(componentRender).toBeDefined(); 22 | 23 | const queryResult = await componentRender.findByText(match); 24 | 25 | expect(queryResult.textContent).toBe(match); 26 | }); 27 | 28 | it('should not render excessively', async () => { 29 | const fn = jest.fn(); 30 | const View: FC<{ text: string }> = ({ text }) => { 31 | useEffect(fn); 32 | 33 | return
{text}
; 34 | }; 35 | const useText = () => { 36 | const [text, setText] = useState('some text'); 37 | 38 | // update text 39 | useEffect(() => { 40 | setText('some other text'); 41 | }, []); 42 | 43 | return { text }; 44 | }; 45 | 46 | const WrappedComponent = memoWrap(View, useText); 47 | 48 | render(); 49 | 50 | expect(fn).toHaveBeenCalledTimes(2); 51 | }); 52 | 53 | it('should prevent rerender with custom `arePropsEqual`', async () => { 54 | const inner = jest.fn(); 55 | const outer = jest.fn(); 56 | const View: FC<{ text: string }> = ({ text }) => { 57 | useEffect(inner); 58 | 59 | return
{text}
; 60 | }; 61 | type WrappedComponentProps = { 62 | initialText?: string; 63 | }; 64 | 65 | const useText = (props?: WrappedComponentProps) => { 66 | // useText will run twice => an updating effect is fired here, still, props don´t change 67 | useEffect(outer, [props]); 68 | 69 | const [text, setText] = useState( 70 | props?.initialText ?? 'some text' 71 | ); 72 | 73 | // update text 74 | useEffect(() => { 75 | setText('some other text'); 76 | }, []); 77 | 78 | return { text }; 79 | }; 80 | 81 | const useOuterText = (props?: WrappedComponentProps) => { 82 | const [text, setText] = useState( 83 | props?.initialText ?? 'some outer text' 84 | ); 85 | 86 | // update text 87 | useEffect(() => { 88 | setText('some other outer text'); 89 | }, []); 90 | 91 | return { text }; 92 | }; 93 | 94 | const WrappedComponent = memoWrap(View, useText, (_p, _n) => { 95 | // never update 96 | return true; 97 | }); 98 | 99 | const Outer: FC = () => { 100 | const { text } = useOuterText(); 101 | 102 | return ; 103 | }; 104 | 105 | render(); 106 | 107 | expect(inner).toHaveBeenCalledTimes(2); 108 | expect(outer).toHaveBeenCalledTimes(1); 109 | }); 110 | 111 | it('should pass through children', async () => { 112 | const match = 'children'; 113 | 114 | const View: FC<{ text: string }> = ({ children }) => { 115 | return
{children}
; 116 | }; 117 | const useText = () => { 118 | const text = 'some text'; 119 | return { text }; 120 | }; 121 | 122 | const WrappedComponent = memoWrap(View, useText); 123 | 124 | const componentRender = render( 125 | {match} 126 | ); 127 | 128 | const queryResult = await componentRender.findByText(match); 129 | 130 | expect(queryResult.textContent).toBe(match); 131 | }); 132 | }); 133 | -------------------------------------------------------------------------------- /tests/wrap.test.tsx: -------------------------------------------------------------------------------- 1 | import { wrap } from '@library'; 2 | import { render } from '@testing-library/react'; 3 | import React, { FC, useEffect, useState } from 'react'; 4 | 5 | describe('wrap', () => { 6 | it('should be defined', () => { 7 | expect(wrap).toBeDefined(); 8 | }); 9 | 10 | it('should render', async () => { 11 | const match = 'ahoj'; 12 | 13 | const View: FC<{ text: string }> = ({ text }) =>
{text}
; 14 | 15 | const WrappedComponent = wrap(View, () => { 16 | const text = match; 17 | return { text }; 18 | }); 19 | 20 | const componentRender = render(); 21 | expect(componentRender).toBeDefined(); 22 | 23 | const queryResult = await componentRender.findByText(match); 24 | 25 | expect(queryResult.textContent).toBe(match); 26 | }); 27 | 28 | it('should not render excessively', async () => { 29 | const fn = jest.fn(); 30 | const View: FC<{ text: string }> = ({ text }) => { 31 | useEffect(fn); 32 | 33 | return
{text}
; 34 | }; 35 | const useText = () => { 36 | const [text, setText] = useState('some text'); 37 | 38 | // update text 39 | useEffect(() => { 40 | setText('some other text'); 41 | }, []); 42 | 43 | return { text }; 44 | }; 45 | const WrappedComponent = wrap(View, useText); 46 | 47 | render(); 48 | 49 | expect(fn).toHaveBeenCalledTimes(2); 50 | }); 51 | 52 | it('should pass through children', async () => { 53 | const match = 'children'; 54 | 55 | const View: FC<{ text: string }> = ({ children }) => { 56 | return
{children}
; 57 | }; 58 | const useText = () => { 59 | const text = 'some text'; 60 | return { text }; 61 | }; 62 | 63 | const WrappedComponent = wrap(View, useText); 64 | 65 | const componentRender = render( 66 | {match} 67 | ); 68 | 69 | const queryResult = await componentRender.findByText(match); 70 | 71 | expect(queryResult.textContent).toBe(match); 72 | }); 73 | }); 74 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "noImplicitAny": true, 17 | "downlevelIteration": true, 18 | "baseUrl": "./", 19 | "jsx": "react", 20 | "paths": { 21 | "@library": ["src"] 22 | } 23 | }, 24 | "include": ["src", "tests"], 25 | "exclude": ["node_modules", "*.(js|jsx)", "*.test.*"] 26 | } 27 | -------------------------------------------------------------------------------- /tsconfig.typedefs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "noEmit": false, 6 | "emitDeclarationOnly": true, 7 | "outDir": "lib", 8 | "plugins": [ 9 | { 10 | "transform": "typescript-transform-paths", 11 | "afterDeclarations": true 12 | } 13 | ] 14 | }, 15 | "exclude": ["**/*.test.*", "tests", "node_modules", "lib"] 16 | } 17 | --------------------------------------------------------------------------------