This repository has been archived by the owner on Jan 15, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1032/filter tokens orders widget (#1097)
* grab token details inside useOrders 1. use service 2. populate here to filter later 3. created DetailedAuctionElement type * remove async logic of fetching tokens from OrderRow inside fetchTokens * export BalanceTools * pass BalanceTools and DetauledAuction/PendingElement into OrdersWidget * get detailed info from pendingOrders hook * BalanceTools added with cehckbox and css changed to keep box on top * added FormMessage to show filter amount 1. added useDataFilter to OrderWidget * CSS: removed duped code, added styling * css fix on text color FormMessage * move BalanceTools into FilterTools component 1. re-add h5 title to TradeWidget (was removed to try adding as prop) * Add FilterTools to DepositWidget * add FilterTools to OrdersWidget + misc changes 1. add isWidget prop to flag smaller size * prop isWidget * simplify filter fn * include data-order-id to each tr * added id filtering 1. made filtering into fn for ease * fixed dataFiter props after rebase * DepositWidget: show filter results on search * Promise.all inside useOrder/PendingOrders * FilterTools resultName prop * move inline CSS to OrdersWidget.styled * fix missing border-radius for trade pg * use correct TokenDetails from `types` * no need for cast after fixed TokenDetails * return null custom filter fn on empty string thanks @Velenir * use TokenDetails from types
- Loading branch information
Showing
12 changed files
with
334 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
| // Components | ||
| import FormMessage from './TradeWidget/FormMessage' | ||
| // Assets | ||
| import searchIcon from 'assets/img/search.svg' | ||
| // Misc | ||
| import { MEDIA } from 'const' | ||
|
|
||
| export const BalanceTools = styled.div<{ $css?: string | false }>` | ||
| display: flex; | ||
| width: 100%; | ||
| justify-content: space-between; | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| align-items: center; | ||
| order: 0; | ||
| ${FormMessage} { | ||
| color: var(--color-text-primary); | ||
| background: var(--color-background-validation-warning); | ||
| font-size: x-small; | ||
| margin: 0; | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| width: max-content; | ||
| padding: 0.1rem 1.6rem 0.1rem 0.5rem; | ||
| border-radius: 0 1.6rem 0rem 0rem; | ||
| } | ||
| // label + search input | ||
| > .balances-searchTokens { | ||
| display: flex; | ||
| width: auto; | ||
| max-width: 100%; | ||
| position: relative; | ||
| height: 5.6rem; | ||
| margin: 1.6rem; | ||
| > input { | ||
| margin: 0; | ||
| width: 35rem; | ||
| max-width: 100%; | ||
| background: var(--color-background-input) url(${searchIcon}) no-repeat left 1.6rem center/1.6rem; | ||
| border-radius: 0.6rem 0.6rem 0 0; | ||
| border: 0; | ||
| font-size: 1.4rem; | ||
| line-height: 1; | ||
| box-sizing: border-box; | ||
| border-bottom: 0.2rem solid transparent; | ||
| font-weight: var(--font-weight-normal); | ||
| padding: 0 1.6rem 0 4.8rem; | ||
| outline: 0; | ||
| @media ${MEDIA.mobile} { | ||
| font-size: 1.3rem; | ||
| width: 100%; | ||
| } | ||
| &::placeholder { | ||
| font-size: inherit; | ||
| color: inherit; | ||
| } | ||
| &:focus { | ||
| color: var(--color-text-active); | ||
| } | ||
| &:focus { | ||
| border-bottom: 0.2rem solid var(--color-text-active); | ||
| border-color: var(--color-text-active); | ||
| transition: all 0.2s ease-in-out; | ||
| } | ||
| &.error { | ||
| border-color: var(--color-error); | ||
| } | ||
| &.warning { | ||
| border-color: orange; | ||
| } | ||
| &:disabled { | ||
| box-shadow: none; | ||
| } | ||
| } | ||
| @media ${MEDIA.mobile} { | ||
| width: 100%; | ||
| height: 4.6rem; | ||
| margin: 0 0 2.4rem; | ||
| > ${FormMessage} { | ||
| bottom: -1.2rem; | ||
| border-radius: 0 0 1.6rem 0rem; | ||
| } | ||
| } | ||
| } | ||
| ${({ $css = '' }): string | false => $css} | ||
| ` | ||
|
|
||
| interface Props { | ||
| customStyles?: string | false | ||
| className?: string | ||
| dataLength: number | ||
| resultName?: string | ||
| searchValue: string | ||
| showFilter: boolean | ||
| handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void | ||
| } | ||
|
|
||
| const FilterTools: React.FC<Props> = ({ | ||
| children, | ||
| className, | ||
| customStyles, | ||
| dataLength, | ||
| resultName = 'results', | ||
| searchValue, | ||
| showFilter, | ||
| handleSearch, | ||
| }) => ( | ||
| <BalanceTools className={className} $css={customStyles}> | ||
| <label className="balances-searchTokens"> | ||
| <input | ||
| placeholder="Search token by Name, Symbol or Address" | ||
| type="text" | ||
| value={searchValue} | ||
| onChange={handleSearch} | ||
| /> | ||
| {showFilter && ( | ||
| <FormMessage id="filterLabel"> | ||
| Filter: Showing {dataLength} {dataLength === 1 ? 'result' : resultName} | ||
| </FormMessage> | ||
| )} | ||
| </label> | ||
| <>{children}</> | ||
| </BalanceTools> | ||
| ) | ||
|
|
||
| export default FilterTools |
Oops, something went wrong.