Lf 4083 add search to animal list #3152
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /* | ||
| * Copyright 2024 LiteFarm.org | ||
| * This file is part of LiteFarm. | ||
| * | ||
| * LiteFarm is free software: you can redistribute it and/or modify | ||
| * it under the terms of the GNU General Public License as published by | ||
| * the Free Software Foundation, either version 3 of the License, or | ||
| * (at your option) any later version. | ||
| * | ||
| * LiteFarm is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * GNU General Public License for more details, see <https://www.gnu.org/licenses/>. | ||
| */ | ||
|
|
||
| .NoSearchResults___marginTop24 { | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| .NoSearchResults___marginTop40 { | ||
| margin-top: 40px; | ||
| } | ||
|
|
||
| .SearchBar___widthFixed { | ||
| width: 240px; | ||
| } | ||
|
|
||
| .SearchBar___widthFull { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .SearchAndFilter_container___desktop { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| .SearchAndFilter_container { | ||
| display: inline-grid; | ||
| gap: 4px; | ||
| padding: 8px 16px 8px 16px; | ||
| background-color: var(--Colors-Primary-Primary-teal-50); | ||
| } | ||
|
|
||
| .SearchResults___marginLeft8 { | ||
| margin-left: 8px; | ||
| } | ||
|
|
||
| .SearchResults___textAlignCenter { | ||
| text-align: center; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| /* | ||
| * Copyright 2023-2024 LiteFarm.org | ||
| * This file is part of LiteFarm. | ||
| * | ||
| * LiteFarm is free software: you can redistribute it and/or modify | ||
|
|
@@ -22,13 +22,14 @@ import Input from '../../Form/Input'; | |
| import TextButton from '../../Form/Button/TextButton'; | ||
| import { Modal } from '../../Modals'; | ||
|
|
||
| export default function PureCollapsingSearch({ | ||
| value, | ||
| isSearchActive, | ||
| onChange, | ||
| placeholderText, | ||
| className, | ||
| containerRef, | ||
| isDesktop, | ||
|
There was a problem hiding this comment. We shouldn't use the breakpoint? There was a problem hiding this comment. It was a media query -- no we should not use media query I don't think.
There was a problem hiding this comment. I really like having the breakpoints being controlled by JS/TS and no longer the mixins... those multiple methods and sources of truth (when finances was created we weren't yet unified around the MUI breakpoints) made it really hard to reason about e.g. the CollapsibleSearch. But GOSH I hate those BEM underscores... do we have to?? 🤣 Edit: and more in the spirit of logic and not just knee-jerk underscore dislike, I don't think we want to adopt a new CSS naming convention like this without discussion + deciding if it's something we'll use moving forward; a mix of naming conventions is pretty confusing. There was a problem hiding this comment. lol no not necessary -- but its a good architecture vs "willy nilly" haha There was a problem hiding this comment. Okay, I was in favour of using CSS. I don't think we have discussed which strategy to stick with? I added to the tech daily agenda! There was a problem hiding this comment. @SayakaOno sounds awesome! I don't have a strong opinion between mixins and inline breakpoints just no more media queries haha There was a problem hiding this comment. I don't think we made a decision today. @SayakaOno can I make a tech debt ticket to choose ? That way search bar can go through. There was a problem hiding this comment. I thought we wouldn't need any further discussion 😅 It's up to you! There was a problem hiding this comment. I think it would be nice to choose a direction haha: https://lite-farm.atlassian.net/browse/LF-4143 |
||
| }) { | ||
| const searchRef = useRef(null); | ||
| const [modalStyle, setModalStyle] = useState({}); | ||
|
|
@@ -82,7 +83,10 @@ export default function PureCollapsibleSearch({ | |
| }, [searchOverlayOpen]); | ||
|
|
||
| return ( | ||
| <div | ||
| className={clsx(styles.container, className, isDesktop && styles.desktopContainer)} | ||
| ref={searchRef} | ||
| > | ||
| <Input | ||
| className={styles.searchBar} | ||
| isSearchBar | ||
|
|
@@ -95,7 +99,7 @@ export default function PureCollapsibleSearch({ | |
| <Modal dismissModal={onSearchClose} style={modalStyle}> | ||
| <form // allows closing modal with enter key (= submit) | ||
| onSubmit={handleSubmit} | ||
| className={clsx(styles.modalContent, isDesktop && styles.displayNone)} | ||
| > | ||
| <Input | ||
| className={styles.modalSearchbar} | ||
|
|
@@ -109,32 +113,37 @@ export default function PureCollapsibleSearch({ | |
| )} | ||
|
|
||
| <TextButton | ||
| className={clsx( | ||
| styles.searchButton, | ||
| isSearchActive && styles.active, | ||
| isDesktop && styles.displayNone, | ||
| )} | ||
| onClick={onSearchOpen} | ||
| > | ||
| <SearchIcon className={styles.searchIcon} /> | ||
| </TextButton> | ||
|
|
||
| {isSearchActive && ( | ||
| <div className={clsx(styles.circleContainer, isDesktop && styles.displayNone)}> | ||
| <div className={clsx(styles.circle, isDesktop && styles.displayNone)} /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| PureCollapsingSearch.propTypes = { | ||
| value: PropTypes.string, | ||
| isSearchActive: PropTypes.bool, | ||
| onChange: PropTypes.func, | ||
| placeholderText: PropTypes.string, | ||
| className: PropTypes.string, | ||
| overlayModalOnButton: PropTypes.bool, | ||
| containerRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }), | ||
| isDesktop: PropTypes.bool, | ||
| }; | ||
|
|
||
| PureCollapsingSearch.defaultProps = { | ||
| placeholderText: '', | ||
| isSearchActive: false, | ||
| className: '', | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like BEM overall, but since we haven't made a decision to go for that throughout the app, I'd advocate for consistency here and naming the styles more similarly to how classes are currently named in other files. In general I'm all for BEM but I think these will be out of place unless there's overall consensus to go with BEM from now on. If we do make a decision to go with BEM from now on, I think the convention would actually be something like
search-and-filter__container--desktop. Unless this is a different one and not BEM?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think there are some react problems with the - or something. I linked the article I used to try to apply it but it may be out of date.
I just added it to discuss the isDesktop inline breakpoints readability.