diff --git a/.storybook/global.css b/.storybook/global.css index 1fab8d4..90c40eb 100644 --- a/.storybook/global.css +++ b/.storybook/global.css @@ -20,7 +20,7 @@ li { margin-bottom: 8px; } -button { +button:not[class*="MuiButton"] { line-height: 1.499; position: relative; display: inline-block; @@ -49,7 +49,7 @@ button { border-color: #d9d9d9; } -button:hover { +button:not[class*="MuiButton"]:hover { outline: 0; color: #f50057; background-color: #fff; diff --git a/package.json b/package.json index 6b594ff..c7e0947 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mui-layout", - "version": "1.2.2", + "version": "1.2.3", "description": "Instantly build dynamic and responsive layout based on React Material-UI", "main": "dist/index.js", "repository": "https://github.com/siriwatknp/mui-layout.git", @@ -28,9 +28,9 @@ "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "@babel/preset-react": "^7.0.0", - "@material-ui/core": "^4.1.3", + "@material-ui/core": "^4.2.0", "@material-ui/icons": "^4.2.1", - "@material-ui/styles": "^4.1.2", + "@material-ui/styles": "^4.2.0", "@storybook/addon-actions": "^5.1.9", "@storybook/addon-links": "^5.1.9", "@storybook/addons": "^5.1.9", diff --git a/src/components/Root.js b/src/components/Root.js index 3d03bb6..221951f 100644 --- a/src/components/Root.js +++ b/src/components/Root.js @@ -14,6 +14,7 @@ const Root = ({ children, config }) => { const [opened, setOpened] = useState(false); const mergedConfig = useMergedConfig(config, initialConfig); const screen = useWidth(); + console.log('screen', screen); return ( { - const index = keys.indexOf(screen); - if (index === keys.length - 1) return null; - return keys[index + 1]; -}; -const getScreenBefore = (keys, screen) => { - const index = keys.indexOf(screen); - if (index === 0) return null; - return keys[index - 1]; -}; - -const getScreen = breakpoints => { - const { width } = getWindowSizes(); - let screen = 'xs'; - breakpoints.keys.some(key => { - if (width < breakpoints.values[key]) { - screen = key; - return true; - } - return false; - }); - return screen; -}; function useWidth() { const theme = useTheme(); - const { breakpoints } = theme; - const [screen, setScreen] = useState(getScreen(breakpoints)); - const keys = [...breakpoints.keys].reverse(); - const result = - keys.reduce((output, key) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const matches = useMediaQuery(theme.breakpoints.only(key)); - - return !output && matches ? key : output; - }, null) || 'xs'; - - useEffect(() => { - if ( - getNextScreen(keys, screen) === result || - getScreenBefore(keys, screen) === result - ) { - setScreen(result); - } - }, [result]); - return screen; + const isXs = useMediaQuery(theme.breakpoints.up('xs')); + const isSm = useMediaQuery(theme.breakpoints.up('sm')); + const isMd = useMediaQuery(theme.breakpoints.up('md')); + const isLg = useMediaQuery(theme.breakpoints.up('lg')); + const isXl = useMediaQuery(theme.breakpoints.up('xl')); + if (isXl) return 'xl'; + if (isLg) return 'lg'; + if (isMd) return 'md'; + if (isSm) return 'sm'; + if (isXs) return 'xs'; + return null; } export default useWidth; - -// import { useEffect, useRef, useState } from 'react'; -// import { useTheme } from '@material-ui/core/styles'; -// import getWindowSizes from 'utils/getWindowSizes'; -// -// const useWidth = (interval = 200) => { -// const { breakpoints } = useTheme(); -// const [screen, setScreen] = useState(getScreen(breakpoints)); -// -// const debounced = useRef(() => -// setTimeout(() => { -// const calculatedScreen = getScreen(breakpoints); -// if (screen !== calculatedScreen) { -// setScreen(calculatedScreen); -// } -// }, interval), -// ); -// useEffect(() => { -// window.addEventListener('resize', debounced.current); -// return () => { -// window.removeEventListener('resize', debounced.current); -// }; -// }, []); -// console.log('screen', screen); -// return screen; -// }; -// -// export default useWidth; diff --git a/yarn.lock b/yarn.lock index 35acbd5..e4da216 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1042,27 +1042,25 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.3.tgz#dfa0c92efe44a1d1a7974fb49ffeb40ef2da5a27" integrity sha512-zVgvPwGK7c1aVdUVc9Qv7SqepOGRDrqCw7KZPSZziWGxSlbII3gmvGLPzLX4d0n0BMbamBacUrN22zOMyFFEkQ== -"@material-ui/core@^4.1.3": - version "4.1.3" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.1.3.tgz#0f8ffae88ac668399fbfc66efa1ed37c4ce29a7d" - integrity sha512-cSrI3yZ2L1XVi5IyO0/dPGUq1FaDBKTL9ygDOlvojD6bGuD/Qu17dCFAD8/mHV4CPNQMJYUKLYyOmqtDYdEB9g== +"@material-ui/core@^4.2.0": + version "4.2.0" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.2.0.tgz#fd57352c63a50bc28d8b0d61a779a55aba84f9c4" + integrity sha512-kqwoCMpGaj3zJedihUuVZWjISh+T72KAXOwgk6VKNf+APMTB8yLByLSgSLDhXsliRBO/9Pda/0g/KzGY7R+irQ== dependencies: "@babel/runtime" "^7.2.0" - "@material-ui/styles" "^4.1.2" + "@material-ui/styles" "^4.2.0" "@material-ui/system" "^4.3.0" "@material-ui/types" "^4.1.1" "@material-ui/utils" "^4.1.0" "@types/react-transition-group" "^2.0.16" clsx "^1.0.2" convert-css-length "^2.0.0" - debounce "^1.1.0" deepmerge "^3.0.0" hoist-non-react-statics "^3.2.1" is-plain-object "^3.0.0" normalize-scroll-left "^0.2.0" popper.js "^1.14.1" prop-types "^15.7.2" - react-event-listener "^0.6.6" react-transition-group "^4.0.0" warning "^4.0.1" @@ -1073,10 +1071,10 @@ dependencies: "@babel/runtime" "^7.2.0" -"@material-ui/styles@^4.1.2": - version "4.1.2" - resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.1.2.tgz#f22cb0d8f60a5e4a4b92f1ffb4b56f825ff89034" - integrity sha512-IRwhGI3OzxMKIDXnYl/vi9FD/i5ZktVP2m/5PIf/HVdvhqUZGIzqR2OB/9f3W1hc+kKKExdOPlpZpVihIsJWkA== +"@material-ui/styles@^4.2.0": + version "4.2.0" + resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.2.0.tgz#dafb8a271cb6772354aece15d3e43af33844f692" + integrity sha512-VpPCNWYK1KjpurFh1gH02xpAmCqKZrC/rmiBosZcCRDl8AOcUkSxBMNU0rziHgSQ/jYTEh3MdKNs3Gq0vGCQ/w== dependencies: "@babel/runtime" "^7.2.0" "@emotion/hash" "^0.7.1" @@ -3492,11 +3490,6 @@ date-now@^0.1.4: resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b" integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs= -debounce@^1.1.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131" - integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg== - debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -7871,15 +7864,6 @@ react-error-overlay@^5.1.6: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d" integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q== -react-event-listener@^0.6.6: - version "0.6.6" - resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a" - integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw== - dependencies: - "@babel/runtime" "^7.2.0" - prop-types "^15.6.0" - warning "^4.0.1" - react-fast-compare@2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"