From 3bccceceaac1bee71df513d435b51d8a6bc0f4bb Mon Sep 17 00:00:00 2001 From: Remington Breeze Date: Tue, 22 Jun 2021 12:23:36 -0700 Subject: [PATCH 1/6] Move rxjs and moment to peerDependencies Signed-off-by: Remington Breeze --- v2/package.json | 7 ++++--- v2/yarn.lock | 11 ++--------- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/v2/package.json b/v2/package.json index 2f44febe..f492868e 100644 --- a/v2/package.json +++ b/v2/package.json @@ -13,21 +13,22 @@ "@types/react-dom": "^16.9.3", "@types/react-helmet": "^6.1.0", "@types/react-router-dom": "^5.1.7", - "moment": "^2.29.1", "moment-timezone": "^0.5.33", "portable-fetch": "^3.0.0", "react-helmet": "^6.1.0", "react-hot-loader": "^3.1.3", "react-keyhooks": "^0.2.2", "react-router-dom": "^5.2.0", - "rxjs": "^6.6.6", + "typescript": "^4.1.2", "web-vitals": "^1.0.1", "webpack-dev-server": "^3.11.2" }, "peerDependencies": { + "moment": "^2.29.1", "react": "^16.9.3", - "react-dom": "^16.9.3" + "react-dom": "^16.9.3", + "rxjs": "^6.6.6" }, "scripts": { "start": "start-storybook", diff --git a/v2/yarn.lock b/v2/yarn.lock index 3d8cb64c..07f2c42a 100644 --- a/v2/yarn.lock +++ b/v2/yarn.lock @@ -7812,7 +7812,7 @@ moment-timezone@^0.5.33: dependencies: moment ">= 2.9.0" -"moment@>= 2.9.0", moment@^2.29.1: +"moment@>= 2.9.0": version "2.29.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== @@ -9820,13 +9820,6 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" -rxjs@^6.6.6: - version "6.6.7" - resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9" - integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ== - dependencies: - tslib "^1.9.0" - safe-buffer@5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853" @@ -10942,7 +10935,7 @@ ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== -tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: +tslib@^1.8.0, tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== From 8be0949244156aba83b035ba404d70f5722b8ef8 Mon Sep 17 00:00:00 2001 From: Remington Breeze Date: Tue, 22 Jun 2021 12:25:02 -0700 Subject: [PATCH 2/6] Bump version Signed-off-by: Remington Breeze --- v2/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/v2/package.json b/v2/package.json index f492868e..670ddfdf 100644 --- a/v2/package.json +++ b/v2/package.json @@ -1,6 +1,6 @@ { "name": "argo-ux", - "version": "1.1.10", + "version": "1.1.11", "main": "index.js", "license": "MIT", "dependencies": { From a52561dd8771cb89dc58c81587204037ccd3863e Mon Sep 17 00:00:00 2001 From: Remington Breeze Date: Tue, 22 Jun 2021 13:57:45 -0700 Subject: [PATCH 3/6] fix: text in Text component would not wrap Signed-off-by: Remington Breeze --- v2/components/text/text.scss | 2 +- v2/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/v2/components/text/text.scss b/v2/components/text/text.scss index 569972ee..e0ef05fd 100644 --- a/v2/components/text/text.scss +++ b/v2/components/text/text.scss @@ -1,6 +1,6 @@ .text { font-family: 'Heebo', sans-serif; - + white-space: normal; &--dark { color: white; } diff --git a/v2/package.json b/v2/package.json index 670ddfdf..8cc90d6a 100644 --- a/v2/package.json +++ b/v2/package.json @@ -1,6 +1,6 @@ { "name": "argo-ux", - "version": "1.1.11", + "version": "1.1.12", "main": "index.js", "license": "MIT", "dependencies": { From 2d775022fc422af4c03c70b18623ada35986f583 Mon Sep 17 00:00:00 2001 From: Remington Breeze Date: Wed, 23 Jun 2021 11:31:01 -0700 Subject: [PATCH 4/6] fix: Row and box styled with common CSS class and , changed to be more specific Signed-off-by: Remington Breeze --- v2/components/box/box.scss | 2 +- v2/components/box/box.tsx | 4 ++-- v2/components/row/row.scss | 4 ++-- v2/components/row/row.tsx | 2 +- v2/package.json | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/v2/components/box/box.scss b/v2/components/box/box.scss index c90ce4d8..65bc0109 100644 --- a/v2/components/box/box.scss +++ b/v2/components/box/box.scss @@ -1,6 +1,6 @@ @import '../../styles/colors.scss'; -.box { +.argo-box { border: 1px solid $argo-color-gray-4; border-radius: 5px; padding: 20px; diff --git a/v2/components/box/box.tsx b/v2/components/box/box.tsx index 9268359a..413e3aa8 100644 --- a/v2/components/box/box.tsx +++ b/v2/components/box/box.tsx @@ -5,9 +5,9 @@ import {ThemeDiv} from '../theme-div/theme-div'; import './box.scss'; export const Box = (props: {children: React.ReactNode}) => { - return {props.children}; + return {props.children}; }; export const BoxTitle = (props: {children: React.ReactNode}) => { - return {props.children}; + return {props.children}; }; diff --git a/v2/components/row/row.scss b/v2/components/row/row.scss index edb77dfd..3fbbecfa 100644 --- a/v2/components/row/row.scss +++ b/v2/components/row/row.scss @@ -1,10 +1,10 @@ -.row { +.argo-row { display: flex; width: 100%; margin-bottom: 1.5em; justify-content: center; - .box { + .argo-box { height: auto; width: 400px; margin-right: 15px; diff --git a/v2/components/row/row.tsx b/v2/components/row/row.tsx index 757044ad..339024c5 100644 --- a/v2/components/row/row.tsx +++ b/v2/components/row/row.tsx @@ -4,4 +4,4 @@ import {ThemeDiv} from '../theme-div/theme-div'; import './row.scss'; -export const CenteredRow = (props: {children: React.ReactNode}) => {props.children}; +export const CenteredRow = (props: {children: React.ReactNode}) => {props.children}; diff --git a/v2/package.json b/v2/package.json index 8cc90d6a..c3cc436d 100644 --- a/v2/package.json +++ b/v2/package.json @@ -1,6 +1,6 @@ { "name": "argo-ux", - "version": "1.1.12", + "version": "1.1.13", "main": "index.js", "license": "MIT", "dependencies": { From e863dad91d16846ecae2a21f052077e0044f45a6 Mon Sep 17 00:00:00 2001 From: Remington Breeze Date: Tue, 29 Jun 2021 12:42:29 -0700 Subject: [PATCH 5/6] fix: Style autocomplete items on hover and flip menu if there is not enough room Signed-off-by: Remington Breeze --- v2/components/autocomplete/autocomplete.scss | 13 +++- v2/components/autocomplete/autocomplete.tsx | 64 +++++++++++++++----- v2/package.json | 8 +-- v2/yarn.lock | 9 ++- 4 files changed, 71 insertions(+), 23 deletions(-) diff --git a/v2/components/autocomplete/autocomplete.scss b/v2/components/autocomplete/autocomplete.scss index cd42c450..5c1f3227 100644 --- a/v2/components/autocomplete/autocomplete.scss +++ b/v2/components/autocomplete/autocomplete.scss @@ -10,9 +10,8 @@ z-index: 3; position: absolute; white-space: nowrap; - max-height: 6em; + max-height: 12em; overflow-y: auto; - margin-top: 0.5em; border-radius: 3px; background-color: white; border: 1px solid $argo-color-gray-4; @@ -21,6 +20,10 @@ box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.05); line-height: 0.5em; + &--inverted { + bottom: 50px; + } + &__item { z-index: 2; padding: 0.75em 0; @@ -34,6 +37,12 @@ border-bottom: 1px solid $sky; box-shadow: 0px 1px 0px 0px $sky; } + + &:hover { + border-radius: 3px; + background-color: $argo-color-gray-3; + border-color: $argo-color-gray-3; + } } &--dark { diff --git a/v2/components/autocomplete/autocomplete.tsx b/v2/components/autocomplete/autocomplete.tsx index aa91bc20..65af43e1 100644 --- a/v2/components/autocomplete/autocomplete.tsx +++ b/v2/components/autocomplete/autocomplete.tsx @@ -34,6 +34,7 @@ export const Autocomplete = ( const autocompleteRef = React.useRef(null); const [showSuggestions, setShowSuggestions] = React.useState(false); const [pos, nav, reset] = useNav(props.items.length); + const menuRef = React.useRef(null); React.useEffect(() => { function unfocus(e: any) { @@ -109,6 +110,35 @@ export const Autocomplete = ( delete trimmedProps.inputStyle; delete trimmedProps.onItemClick; + const [inverted, setInverted] = React.useState(false); + + React.useEffect(() => { + const listener = (event: any) => { + if (autocompleteRef && autocompleteRef.current && menuRef.current && !(event.target === menuRef.current)) { + const node = inputRef.current; + if (node && menuRef.current) { + const rect = node.getBoundingClientRect(); + const computedStyle = window.getComputedStyle(node); + const marginBottom = parseInt(computedStyle.marginBottom, 10) || 0; + let menuTop = rect.bottom + marginBottom; + if (window.innerHeight - (menuTop + menuRef.current.offsetHeight) < 0) { + if (!inverted) { + setInverted(true); + } + } else { + if (inverted) { + setInverted(false); + } + } + } + } + }; + document.addEventListener('scroll', listener, true); + return () => { + document.removeEventListener('scroll', listener); + }; + }); + return (
setShowSuggestions(true)} /> - +
+ +
); }; diff --git a/v2/package.json b/v2/package.json index c3cc436d..492ae76b 100644 --- a/v2/package.json +++ b/v2/package.json @@ -1,6 +1,6 @@ { "name": "argo-ux", - "version": "1.1.13", + "version": "1.1.14", "main": "index.js", "license": "MIT", "dependencies": { @@ -19,7 +19,6 @@ "react-hot-loader": "^3.1.3", "react-keyhooks": "^0.2.2", "react-router-dom": "^5.2.0", - "typescript": "^4.1.2", "web-vitals": "^1.0.1", "webpack-dev-server": "^3.11.2" @@ -58,7 +57,6 @@ }, "devDependencies": { "@babel/core": "^7.14.0", - "dtslint": "^4.0.9", "@storybook/addon-actions": "^6.2.9", "@storybook/addon-controls": "^6.2.9", "@storybook/addon-essentials": "^6.2.9", @@ -67,10 +65,12 @@ "@storybook/react": "^6.2.9", "babel-loader": "^8.2.2", "copy-webpack-plugin": "^6.3.2", + "dtslint": "^4.0.9", "mini-css-extract-plugin": "^1.3.9", "raw-loader": "^4.0.2", - "react-dom": "^16.9.3", "react": "^16.9.3", + "react-dom": "^16.9.3", + "rxjs": "^6.6.6", "sass": "^1.32.8", "sass-loader": "^10.1.1", "storybook": "^6.2.9", diff --git a/v2/yarn.lock b/v2/yarn.lock index 07f2c42a..63890821 100644 --- a/v2/yarn.lock +++ b/v2/yarn.lock @@ -9820,6 +9820,13 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" +rxjs@^6.6.6: + version "6.6.7" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9" + integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ== + dependencies: + tslib "^1.9.0" + safe-buffer@5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853" @@ -10935,7 +10942,7 @@ ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== -tslib@^1.8.0, tslib@^1.8.1: +tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== From 138ce80ae76f91ec4e29bdb46f096502e225581d Mon Sep 17 00:00:00 2001 From: Remington Breeze Date: Wed, 30 Jun 2021 14:41:47 -0700 Subject: [PATCH 6/6] fix: Feature parity between new and old autocompletes Signed-off-by: Remington Breeze --- v2/components/autocomplete/autocomplete.scss | 10 +-- v2/components/autocomplete/autocomplete.tsx | 68 +++++++++++++------- v2/components/checkbox/checkbox.scss | 20 +++++- v2/components/checkbox/checkbox.tsx | 2 +- v2/package.json | 7 +- v2/utils/utils.tsx | 11 ++++ 6 files changed, 85 insertions(+), 33 deletions(-) diff --git a/v2/components/autocomplete/autocomplete.scss b/v2/components/autocomplete/autocomplete.scss index 5c1f3227..9acf8758 100644 --- a/v2/components/autocomplete/autocomplete.scss +++ b/v2/components/autocomplete/autocomplete.scss @@ -33,15 +33,17 @@ border-bottom: 1px solid $argo-color-gray-4; box-sizing: border-box; + &:hover, &--selected { - border-bottom: 1px solid $sky; - box-shadow: 0px 1px 0px 0px $sky; + border-radius: 3px; } &:hover { - border-radius: 3px; background-color: $argo-color-gray-3; - border-color: $argo-color-gray-3; + } + + &--selected { + background-color: $argo-color-teal-3; } } diff --git a/v2/components/autocomplete/autocomplete.tsx b/v2/components/autocomplete/autocomplete.tsx index 65af43e1..3bae6b54 100644 --- a/v2/components/autocomplete/autocomplete.tsx +++ b/v2/components/autocomplete/autocomplete.tsx @@ -1,4 +1,4 @@ -import {Key, KeybindingContext, useNav} from 'react-keyhooks'; +import {Key, KeybindingContext, KeybindingProvider, useNav} from 'react-keyhooks'; import * as React from 'react'; import {Input, InputProps, SetInputFxn, useDebounce, useInput} from '../input/input'; import ThemeDiv from '../theme-div/theme-div'; @@ -27,6 +27,22 @@ export const Autocomplete = ( icon?: string; inputref?: React.MutableRefObject; } +) => { + return ( + + + + ); +}; + +export const RenderAutocomplete = ( + props: React.InputHTMLAttributes & { + items: string[]; + inputStyle?: React.CSSProperties; + onItemClick?: (item: string) => void; + icon?: string; + inputref?: React.MutableRefObject; + } ) => { const [curItems, setCurItems] = React.useState(props.items || []); const nullInputRef = React.useRef(null); @@ -40,6 +56,7 @@ export const Autocomplete = ( function unfocus(e: any) { if (autocompleteRef.current && !autocompleteRef.current.contains(e.target)) { setShowSuggestions(false); + reset(); } } @@ -83,6 +100,7 @@ export const Autocomplete = ( useKeybinding(Key.ENTER, () => { if (showSuggestions && props.onItemClick) { props.onItemClick(curItems[pos]); + setShowSuggestions(false); return true; } return false; @@ -112,30 +130,33 @@ export const Autocomplete = ( const [inverted, setInverted] = React.useState(false); - React.useEffect(() => { - const listener = (event: any) => { - if (autocompleteRef && autocompleteRef.current && menuRef.current && !(event.target === menuRef.current)) { - const node = inputRef.current; - if (node && menuRef.current) { - const rect = node.getBoundingClientRect(); - const computedStyle = window.getComputedStyle(node); - const marginBottom = parseInt(computedStyle.marginBottom, 10) || 0; - let menuTop = rect.bottom + marginBottom; - if (window.innerHeight - (menuTop + menuRef.current.offsetHeight) < 0) { - if (!inverted) { - setInverted(true); - } - } else { - if (inverted) { - setInverted(false); - } + const checkDirection = () => { + if (autocompleteRef && autocompleteRef.current && menuRef.current && !(event.target === menuRef.current)) { + const node = inputRef.current; + if (node && menuRef.current) { + const rect = node.getBoundingClientRect(); + const computedStyle = window.getComputedStyle(node); + const marginBottom = parseInt(computedStyle.marginBottom, 10) || 0; + let menuTop = rect.bottom + marginBottom; + if (window.innerHeight - (menuTop + menuRef.current.offsetHeight) < 30) { + if (!inverted) { + setInverted(true); + } + } else { + if (inverted) { + setInverted(false); } } } - }; - document.addEventListener('scroll', listener, true); + } + }; + + React.useEffect(() => { + document.addEventListener('scroll', checkDirection, true); + document.addEventListener('resize', checkDirection, true); return () => { - document.removeEventListener('scroll', listener); + document.removeEventListener('scroll', checkDirection); + document.removeEventListener('resize', checkDirection); }; }); @@ -151,7 +172,10 @@ export const Autocomplete = ( props.onChange(e); } }} - onFocus={() => setShowSuggestions(true)} + onFocus={() => { + checkDirection(); + setShowSuggestions(true); + }} />
); }; diff --git a/v2/package.json b/v2/package.json index 492ae76b..12f99681 100644 --- a/v2/package.json +++ b/v2/package.json @@ -1,6 +1,6 @@ { "name": "argo-ux", - "version": "1.1.14", + "version": "1.1.15", "main": "index.js", "license": "MIT", "dependencies": { @@ -17,7 +17,6 @@ "portable-fetch": "^3.0.0", "react-helmet": "^6.1.0", "react-hot-loader": "^3.1.3", - "react-keyhooks": "^0.2.2", "react-router-dom": "^5.2.0", "typescript": "^4.1.2", "web-vitals": "^1.0.1", @@ -27,7 +26,8 @@ "moment": "^2.29.1", "react": "^16.9.3", "react-dom": "^16.9.3", - "rxjs": "^6.6.6" + "rxjs": "^6.6.6", + "react-keyhooks": "^0.2.2" }, "scripts": { "start": "start-storybook", @@ -70,6 +70,7 @@ "raw-loader": "^4.0.2", "react": "^16.9.3", "react-dom": "^16.9.3", + "react-keyhooks": "^0.2.2", "rxjs": "^6.6.6", "sass": "^1.32.8", "sass-loader": "^10.1.1", diff --git a/v2/utils/utils.tsx b/v2/utils/utils.tsx index b9dc87d4..0acc8bc2 100644 --- a/v2/utils/utils.tsx +++ b/v2/utils/utils.tsx @@ -76,3 +76,14 @@ export const useTimeout = (fx: () => void, timeoutMs: number, dependencies: any[ return () => clearInterval(to); }, dependencies); }; + +export const debounce = (fxn: () => any, ms: number) => { + let timer: any; + return () => { + clearTimeout(timer); + timer = setTimeout(() => { + timer = null; + fxn.apply(this); + }, ms); + }; +};