jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - funnels - issues sort

Browse source
This commit is contained in:
Shekar Siri 2022-05-11 17:12:33 +02:00
parent 467e99d90d
commit a8fbf50a49
2 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx
View file

@ -9,12 +9,19 @@ const sortOptions = [
{ value: 'lostConversions-desc', label: 'Lost Conversions (High)' },
{ value: 'lostConversions-asc', label: 'Lost Conversions (Low)' },
]
function FunnelIssuesSort(props) {
interface Props {
onChange?: (value: string) => void;
}
function FunnelIssuesSort(props: Props) {
return (
<div>
<Select
plain
defaultValue={sortOptions[0].value}
options={sortOptions}
alignRight={true}
onChange={props.onChange}
/>
</div>
);

18
frontend/app/components/shared/Select/Select.tsx
View file

@ -11,7 +11,9 @@ interface Props {
components?: any;
[x:string]: any;
}
export default function({ plain = false, options, isSearchable = false, components = {}, defaultValue = '', ...rest }: Props) {
export default function({ alignRight = false, plain = false, options, isSearchable = false, components = {}, defaultValue = '', ...rest }: Props) {
const defaultSelected = defaultValue ? options.find(x => x.value === defaultValue) : null;
const customStyles = {
option: (provided, state) => ({
...provided,
@ -20,20 +22,28 @@ export default function({ plain = false, options, isSearchable = false, componen
menu: (provided, state) => ({
...provided,
top: 31,
border: 'solid thin #ccc',
borderRadius: '3px',
backgroundColor: '#fff',
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
position: 'absolute',
minWidth: 'fit-content',
...(alignRight && { right: 0 })
}),
control: (provided) => {
const obj = {
...provided,
border: 'solid thin #ddd',
cursor: 'pointer',
transition: 'all 0.5s',
}
if (plain) {
obj['border'] = '1px solid transparent'
obj['backgroundColor'] = 'transparent'
obj['&:hover'] = {
borderColor: 'transparent',
backgroundColor: colors['gray-light']
backgroundColor: colors['gray-light'],
transition: 'all 0.2s ease-in-out'
}
obj['&:focus'] = {
borderColor: 'transparent'
@ -55,7 +65,8 @@ export default function({ plain = false, options, isSearchable = false, componen
return { ...provided, opacity, transition };
}
}
const defaultSelected = defaultValue ? options.find(x => x.value === defaultValue) : null;
return (
<Select
options={options}
@ -75,6 +86,7 @@ export default function({ plain = false, options, isSearchable = false, componen
}
})}
blurInputOnSelect={true}
// menuPosition="fixed"
{...rest}
/>
);