flex-wrap-layout
Advanced tools
Comparing version 0.9.1 to 0.9.2
@@ -1,6 +0,10 @@ | ||
## v0.9.1 (2020/02/24) | ||
## 0.9.2 (2020/03/18) | ||
- Update npm packages | ||
## 0.9.1 (2020/02/24) | ||
- DevTools accepts div props | ||
## v0.9.0 (2020/02/24) | ||
## 0.9.0 (2020/02/24) | ||
@@ -10,3 +14,3 @@ - Rework everything: exposes `useDetectWrappedElements()`, `detectWrappedElements()` and `DevTools` | ||
## v0.2.1 (2020/01/31) | ||
## 0.2.1 (2020/01/31) | ||
@@ -16,3 +20,3 @@ - Fix remove .next-is-wrapped | ||
## v0.2.0 (2020/01/30) | ||
## 0.2.0 (2020/01/30) | ||
@@ -22,3 +26,3 @@ - Replace `.wrapped` by `.next-is-wrapped ~ *` | ||
## v0.1.2 (2020/01/30) | ||
## 0.1.2 (2020/01/30) | ||
@@ -29,7 +33,7 @@ - Update npm packages | ||
## v0.1.1 (2019/03/25) | ||
## 0.1.1 (2019/03/25) | ||
- Fix crash when testing with Jest | ||
## v0.1.0 (2019/03/25) | ||
## 0.1.0 (2019/03/25) | ||
@@ -41,4 +45,4 @@ - Modernize build system | ||
## v0.0.2 (2017/09/12) | ||
## 0.0.2 (2017/09/12) | ||
First release |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
// See [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172) | ||
// [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172) | ||
function position(el) { | ||
@@ -12,3 +12,3 @@ const { top, left } = el.getBoundingClientRect(); | ||
} | ||
// See [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428) | ||
// [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428) | ||
function detectWrappedElements(rootElement, wrapChildrenClassName, nextIsWrappedClassName, hasChildWrappedClassName) { | ||
@@ -34,3 +34,3 @@ // For each child of .wrap-children | ||
// There is no way to CSS style an element given a match on its next sibling | ||
// See [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792) | ||
// [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792) | ||
prev.classList.add(nextIsWrappedClassName); | ||
@@ -46,3 +46,3 @@ } | ||
// IE does not support toggle() second argument | ||
// See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility | ||
// https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility | ||
//rootEl.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped); | ||
@@ -49,0 +49,0 @@ rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName); |
@@ -12,3 +12,3 @@ "use strict"; | ||
const useDetectWrappedElements_1 = require("./useDetectWrappedElements"); | ||
// See https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js | ||
// https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js | ||
const panel = { | ||
@@ -15,0 +15,0 @@ display: 'inline-block', |
@@ -20,3 +20,3 @@ "use strict"; | ||
const children = rootElement.getElementsByClassName(exports.nextIsWrappedClassName); | ||
// See https://stackoverflow.com/q/22270664#comment33829207_22270685 | ||
// https://stackoverflow.com/q/22270664#comment33829207_22270685 | ||
while (children.length > 0) { | ||
@@ -23,0 +23,0 @@ children[0].classList.remove(exports.nextIsWrappedClassName); |
@@ -14,3 +14,3 @@ "use strict"; | ||
// ["jsdom doesn't do any rendering, so getBoundingClientRect() always returns 0,0,0,0"](https://github.com/jsdom/jsdom/issues/1590#issuecomment-243228840) | ||
// See also [Implement a layout engine](https://github.com/jsdom/jsdom/issues/1322) | ||
// [Implement a layout engine](https://github.com/jsdom/jsdom/issues/1322) | ||
const mockWindowGetComputedStyle = (style) => (window.getComputedStyle = () => style); | ||
@@ -17,0 +17,0 @@ const mockGetBoundingClientRect = (el, rect) => |
@@ -1,2 +0,2 @@ | ||
// See [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172) | ||
// [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172) | ||
function position(el) { | ||
@@ -10,3 +10,3 @@ const { top, left } = el.getBoundingClientRect(); | ||
} | ||
// See [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428) | ||
// [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428) | ||
export function detectWrappedElements(rootElement, wrapChildrenClassName, nextIsWrappedClassName, hasChildWrappedClassName) { | ||
@@ -32,3 +32,3 @@ // For each child of .wrap-children | ||
// There is no way to CSS style an element given a match on its next sibling | ||
// See [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792) | ||
// [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792) | ||
prev.classList.add(nextIsWrappedClassName); | ||
@@ -44,5 +44,5 @@ } | ||
// IE does not support toggle() second argument | ||
// See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility | ||
// https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility | ||
//rootEl.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped); | ||
rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName); | ||
} |
import React, { useState } from 'react'; | ||
import { useDetectWrappedElements } from './useDetectWrappedElements'; | ||
// See https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js | ||
// https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js | ||
const panel = { | ||
@@ -5,0 +5,0 @@ display: 'inline-block', |
@@ -18,3 +18,3 @@ import { useEffect } from 'react'; | ||
const children = rootElement.getElementsByClassName(nextIsWrappedClassName); | ||
// See https://stackoverflow.com/q/22270664#comment33829207_22270685 | ||
// https://stackoverflow.com/q/22270664#comment33829207_22270685 | ||
while (children.length > 0) { | ||
@@ -21,0 +21,0 @@ children[0].classList.remove(nextIsWrappedClassName); |
@@ -5,3 +5,3 @@ import React, { useRef } from 'react'; | ||
// ["jsdom doesn't do any rendering, so getBoundingClientRect() always returns 0,0,0,0"](https://github.com/jsdom/jsdom/issues/1590#issuecomment-243228840) | ||
// See also [Implement a layout engine](https://github.com/jsdom/jsdom/issues/1322) | ||
// [Implement a layout engine](https://github.com/jsdom/jsdom/issues/1322) | ||
const mockWindowGetComputedStyle = (style) => (window.getComputedStyle = () => style); | ||
@@ -8,0 +8,0 @@ const mockGetBoundingClientRect = (el, rect) => |
{ | ||
"name": "flex-wrap-layout", | ||
"version": "0.9.1", | ||
"version": "0.9.2", | ||
"repository": { | ||
@@ -45,9 +45,9 @@ "type": "git", | ||
"devDependencies": { | ||
"@testing-library/react": "^9.4.1", | ||
"@types/jest": "^25.1.3", | ||
"@types/react": "^16.9.22", | ||
"@typescript-eslint/eslint-plugin": "^2.20.0", | ||
"@typescript-eslint/parser": "^2.20.0", | ||
"@testing-library/react": "^10.0.1", | ||
"@types/jest": "^25.1.4", | ||
"@types/react": "^16.9.23", | ||
"@typescript-eslint/eslint-plugin": "^2.24.0", | ||
"@typescript-eslint/parser": "^2.24.0", | ||
"eslint": "^6.8.0", | ||
"eslint-config-airbnb": "^18.0.1", | ||
"eslint-config-airbnb": "^18.1.0", | ||
"eslint-config-prettier": "^6.10.0", | ||
@@ -57,18 +57,18 @@ "eslint-plugin-import": "^2.20.1", | ||
"eslint-plugin-prettier": "^3.1.2", | ||
"eslint-plugin-react": "^7.18.3", | ||
"eslint-plugin-react-hooks": "^2.4.0", | ||
"eslint-plugin-react": "^7.19.0", | ||
"eslint-plugin-react-hooks": "^2.5.0", | ||
"husky": "^4.2.3", | ||
"jest": "^25.1.0", | ||
"lint-staged": "^10.0.7", | ||
"lint-staged": "^10.0.8", | ||
"prettier": "^1.19.1", | ||
"react": "^16.12.0", | ||
"react-dom": "^16.12.0", | ||
"stylelint": "^13.2.0", | ||
"react": "^16.13.0", | ||
"react-dom": "^16.13.0", | ||
"stylelint": "^13.2.1", | ||
"stylelint-config-airbnb": "0.0.0", | ||
"stylelint-config-recommended-scss": "^4.2.0", | ||
"stylelint-order": "^4.0.0", | ||
"stylelint-scss": "^3.14.2", | ||
"stylelint-scss": "^3.15.0", | ||
"ts-jest": "^25.2.1", | ||
"typescript": "^3.8.2" | ||
"typescript": "^3.8.3" | ||
} | ||
} |
@@ -5,2 +5,5 @@ # flex-wrap-layout | ||
[![Build status](https://github.com/tkrotoff/flex-wrap-layout/workflows/Node.js%20CI/badge.svg)](https://github.com/tkrotoff/flex-wrap-layout/actions) | ||
[![npm bundle size](https://img.shields.io/bundlephobia/min/flex-wrap-layout.svg)](https://bundlephobia.com/result?p=flex-wrap-layout) | ||
[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) | ||
[![Airbnb Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript) | ||
@@ -59,3 +62,3 @@ Detects flex-wrap via JavaScript ([unfortunately not possible in CSS](https://stackoverflow.com/q/40012428)). | ||
- [Boxes example](examples/Boxes.tsx) | ||
- [Bootstrap 4 example](examples/Bootstrap4.tsx) | ||
- [Bootstrap 4 example](examples/Bootstrap4.tsx): https://codesandbox.io/s/github/tkrotoff/flex-wrap-layout/tree/codesandbox.io/examples | ||
@@ -62,0 +65,0 @@ ## Supported browsers |
@@ -1,2 +0,2 @@ | ||
// See [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172) | ||
// [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172) | ||
function position(el: Element) { | ||
@@ -11,3 +11,3 @@ const { top, left } = el.getBoundingClientRect(); | ||
// See [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428) | ||
// [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428) | ||
export function detectWrappedElements( | ||
@@ -43,3 +43,3 @@ rootElement: HTMLElement, | ||
// There is no way to CSS style an element given a match on its next sibling | ||
// See [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792) | ||
// [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/q/1817792) | ||
prev.classList.add(nextIsWrappedClassName); | ||
@@ -57,5 +57,5 @@ } else if (top === prevTop) { | ||
// IE does not support toggle() second argument | ||
// See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility | ||
// https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility | ||
//rootEl.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped); | ||
rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName); | ||
} |
@@ -31,3 +31,3 @@ import React, { useEffect } from 'react'; | ||
const children = rootElement.getElementsByClassName(nextIsWrappedClassName); | ||
// See https://stackoverflow.com/q/22270664#comment33829207_22270685 | ||
// https://stackoverflow.com/q/22270664#comment33829207_22270685 | ||
while (children.length > 0) { | ||
@@ -34,0 +34,0 @@ children[0].classList.remove(nextIsWrappedClassName); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
41389
66