wojtekmaj / react-fit Goto Github PK

View Code? Open in Web Editor NEW

22.0 4.0 1.0 4.46 MB

Fit a popover element on the screen.

License: MIT License

HTML 1.69% CSS 6.45% TypeScript 91.86%

react collision collision-detection position

react-fit's Issues

TypeError: CSS.supports is not a function in test

I'm using react-date-picker, after updating to the latest version I got the error in tests.

For tests, I'm using react-create-library with jest.

my packege.json is:

"dependencies": {
    "@reach/router": "^1.2.1",
    "jwt-decode": "^2.2.0",
    "keyboardjs": "^2.5.1",
    "password-validator": "^4.1.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^0.2.0",
    "react-aria-menubutton": "^6.1.0",
    "react-date-picker": "^7.5.0",
    "react-dom": "^16.8.6",
    "react-flexbox-grid": "^2.1.2",
    "react-icons": "^3.5.0",
    "react-intl": "^2.8.0",
    "react-modal": "^3.8.1",
    "react-scripts": "2.1.8",
    "react-transition-group": "^2.7.1",
    "react-use": "^7.3.1",
    "rebound": "^0.1.0",
    "rxjs": "^6.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "storybook-build": "build-storybook -c .storybook -o .out"
  },
  "devDependencies": {
    "@babel/runtime": "^7.4.2",
    "@sambego/storybook-state": "^1.3.4",
    "@storybook/addon-a11y": "^5.0.6",
    "@storybook/addon-actions": "^5.0.6",
    "@storybook/addon-info": "^5.0.6",
    "@storybook/addon-knobs": "^5.0.6",
    "@storybook/addon-links": "^5.0.6",
    "@storybook/addon-viewport": "^5.0.6",
    "@storybook/addons": "^5.0.6",
    "@storybook/client-logger": "^5.0.6",
    "@storybook/react": "^5.0.6",
    "@types/jest": "^24.0.11",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "^11.12.2",
    "@types/reach__router": "^1.2.3",
    "@types/react": "^16.8.10",
    "@types/react-aria-menubutton": "^6.2.0",
    "@types/react-dom": "^16.8.3",
    "@types/react-intl": "^2.3.17",
    "@types/react-modal": "^3.8.1",
    "@types/react-test-renderer": "^16.8.1",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-knobs": "^4.0.4",
    "@types/storybook__react": "^4.0.1",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.5",
    "babel-polyfill": "^6.26.0",
    "cssom": "^0.3.4",
    "hyperform": "^0.9.23",
    "jest-dom": "^3.1.3",
    "jest-fetch-mock": "^2.1.1",
    "jest-localstorage-mock": "^2.4.0",
    "prettier": "^1.16.4",
    "react-docgen-typescript-loader": "^3.0.1",
    "react-testing-library": "^6.0.3",
    "storybook-addon-intl": "^2.4.1",
    "stylelint": "^9.10.1",
    "stylelint-order": "^2.1.0",
    "tslint": "^5.14.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "tslint-react": "^4.0.0",
    "tslint-react-hooks": "^2.0.0",
    "typescript": "^3.4.1",
    "xhr-mock": "^2.4.1"
  },

My temporary fix:
global.CSS = { supports: jest.fn() };

Warning: <Fit />'s child needed to have its height decreased to xxx.px.

We use this component in cases where there can be less space available and child element of Fit is scrollable then. But We are getting this warning

Warning: 's child needed to have its height decreased to

into to Chrome developer console and it does not look nice.

I propose change the log level of this message to "verbose" or to do it configurable.

Window undefined on Gatsby build time

When using react-time-picker, react-fit is doing a check against window however it is undefined. This is because Gatsby is rendering (at build time) in Node, not in a browser.

In the meantime, I am setting this up to bypass the error.

`<Fit />'s child needed to have its height decreased to 0px` console warning in tests

I'm using react-date-picker and while executing jest tests for components wrapping react-date-picker I see a lot of console warnings like this:

console.warn
  <Fit />'s child needed to have its height decreased to 0px

      at consoleOnDev (node_modules/react-fit/dist/umd/shared/utils.js:23:34)
      at warnOnDev (node_modules/react-fit/dist/umd/shared/utils.js:32:23)
      at shrinkToSize (node_modules/react-fit/dist/umd/Fit.js:161:28)
      at displayWhereverShrinkedFits (node_modules/react-fit/dist/umd/Fit.js:169:7)
      at alignAxis (node_modules/react-fit/dist/umd/Fit.js:183:5)
      at alignMainAxis (node_modules/react-fit/dist/umd/Fit.js:188:3)
      at alignBothAxis (node_modules/react-fit/dist/umd/Fit.js:203:3)

While I understand that those warnings might be important in the context of a browser, I don't find them to be useful when executed in the context of a node process.

Is there a way to silence them?

it doesnt works for ts?

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

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

Recommend Topics

javascript

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

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

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

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

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.