diff --git a/packages/trader/src/AppV2/Components/Filter/filter.scss b/packages/trader/src/AppV2/Components/Filter/filter.scss index 8f4865e84aba..9c8444e21dfb 100644 --- a/packages/trader/src/AppV2/Components/Filter/filter.scss +++ b/packages/trader/src/AppV2/Components/Filter/filter.scss @@ -8,37 +8,5 @@ &__wrapper { padding-block: var(--core-spacing-800); } - // TODO: Temporary css (until quill fix) - .quill-checkbox__wrapper { - order: 3; - } - } -} - -// TODO: Temporary css (until quill fix) -.quill-action-sheet { - &--root { - width: 100%; - } - - &--handle-bar--line { - width: var(--core-size-2400); - } - - &--header > p, - &--title--icon { - display: none; - } - - &--header { - padding-block: var(--core-spacing-400); - } - - &--title { - height: var(--core-size-2400); - } - - &--footer { - padding-block: var(--core-spacing-800); } } diff --git a/packages/trader/src/AppV2/Components/Filter/filter.tsx b/packages/trader/src/AppV2/Components/Filter/filter.tsx index 26cc5d8de512..fa83ad2b843f 100644 --- a/packages/trader/src/AppV2/Components/Filter/filter.tsx +++ b/packages/trader/src/AppV2/Components/Filter/filter.tsx @@ -5,6 +5,7 @@ import { Localize } from '@deriv/translations'; type TFilter = { setContractTypeFilter: React.Dispatch>; + contractTypeFilter: string[] | []; }; // TODO: Replace mockAvailableContractsList with real data when BE will be ready (send list of all available contracts based on account) @@ -21,12 +22,13 @@ const mockAvailableContractsList = [ { tradeType: , id: 'Over/Under' }, ]; -const Filter = ({ setContractTypeFilter }: TFilter) => { +const Filter = ({ setContractTypeFilter, contractTypeFilter }: TFilter) => { const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [changedOptions, setChangedOptions] = React.useState([]); + const [changedOptions, setChangedOptions] = React.useState(contractTypeFilter); - const onDropdownClick = () => { - setIsDropdownOpen(!isDropdownOpen); + const onActionSheetClose = () => { + setIsDropdownOpen(false); + setChangedOptions(contractTypeFilter); }; const onChange = (e: React.ChangeEvent | React.KeyboardEvent) => { @@ -39,14 +41,6 @@ const Filter = ({ setContractTypeFilter }: TFilter) => { } }; - const onApply = () => { - setContractTypeFilter(changedOptions); - }; - const onClearAll = () => { - setContractTypeFilter([]); - setChangedOptions([]); - }; - const chipLabelFormatting = () => { const arrayLength = changedOptions.length; if (!arrayLength) return ; @@ -56,18 +50,17 @@ const Filter = ({ setContractTypeFilter }: TFilter) => { }; return ( - <> + setIsDropdownOpen(!isDropdownOpen)} selected={!!changedOptions.length} /> - setIsDropdownOpen(false)} position='left'> + - {/* TODO: Add a PR to Quill with changing type of title (need ReactNode)*/} - + } /> {mockAvailableContractsList.map(({ tradeType, id }) => ( { id={id} checked={changedOptions.includes(id)} size='md' + checkboxPosition='right' /> ))} - {/* TODO: Add PR to Quill in order to switch off (make optional) ability to close action sheet by clicking on btns */} setContractTypeFilter(changedOptions) }} + secondaryAction={{ content: 'Clear All', onAction: () => setChangedOptions([]) }} alignment='vertical' + shouldCloseOnSecondaryButtonClick={false} /> - + ); }; diff --git a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx index 87c3d9970ed3..fc835d96c3e5 100644 --- a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx +++ b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx @@ -9,6 +9,7 @@ type TPositionsContentProps = Omit & { noMatchesFound?: boolean; positions?: TPortfolioPosition[]; setContractTypeFilter: React.Dispatch>; + contractTypeFilter: string[] | []; }; //TODO: Implement contract card @@ -34,13 +35,14 @@ const PositionsContent = ({ onRedirectToTrade, positions = [], setContractTypeFilter, + contractTypeFilter, }: TPositionsContentProps) => { return (
{(!!positions.length || (!positions.length && noMatchesFound)) && ( - + )}
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions.tsx b/packages/trader/src/AppV2/Containers/Positions/positions.tsx index b4c18cd68e87..7adbc5e2ca20 100644 --- a/packages/trader/src/AppV2/Containers/Positions/positions.tsx +++ b/packages/trader/src/AppV2/Containers/Positions/positions.tsx @@ -82,6 +82,7 @@ const Positions = observer(({ onRedirectToTrade }: TPositionsProps) => { onRedirectToTrade={onRedirectToTrade} positions={filteredPositions} setContractTypeFilter={setContractTypeFilter} + contractTypeFilter={contractTypeFilter} /> ), }, @@ -94,6 +95,7 @@ const Positions = observer(({ onRedirectToTrade }: TPositionsProps) => { noMatchesFound={noMatchesFound} positions={filteredPositions} setContractTypeFilter={setContractTypeFilter} + contractTypeFilter={contractTypeFilter} /> ), },