Commit 5cf11271 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov

Merge branch '609-adjust-width-of-filter-options' into 'master'

Adjust width of filter options

Closes #609

See merge request genesys-pgr/genesys-ui!596
parents 3a2998fe 95ac304d
......@@ -77,7 +77,7 @@ interface IItemProps extends React.ClassAttributes<any> {
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesRowLabel' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'> & WithTranslation & any, any> {
public render() {
const { keepEmpty, small, md, numeric, title, classes, className, children, t, style, ...other} = this.props;
const { keepEmpty, small, md, numeric, suggestion, title, classes, className, children, t, style, ...other} = this.props;
if (!keepEmpty && ! children) {
return null;
}
......@@ -86,12 +86,22 @@ class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertie
<Grid item xs={ 12 } md={ small ? 3 : md ? 6 : 12 } lg={ md ? 4 : 12 } className={ `${classes.propertiesRow} ${className ? className : ''}` } { ...other }>
<Grid container style={ small ? {height: '100%' } : {} } spacing={ 0 }>
{ hasTitle && (
<Grid item xs={ (small || md) && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 10 : 4) } className={ `font-bold p-halfrem ${classes.propertiesRowLabel}` } >
<Grid
item
xs={ (small || md) && numeric ? 8 : suggestion ? 8 : 6 }
md={ small ? 12 : (numeric ? 10 : suggestion ? 8 : 4) }
className={ `font-bold p-halfrem ${classes.propertiesRowLabel}` }
>
{ title && typeof title === 'string' ? t(title) : title }
</Grid>
) }
<Grid item xs={ !hasTitle ? 12 : (small || md) && numeric ? 4 : 6 } md={ !hasTitle ? 12 : small ? 12 : (numeric ? 2 : 8) } style={ style }
className={ style ? `${style}` : `${small ? classes.propertiesValueSmall : ''} ${numeric && !small ? classes.propertiesValueNumeric : ''} ${classes.propertiesValue}` }>
<Grid
item
xs={ !hasTitle ? 12 : (small || md) && numeric ? 4 : suggestion ? 4 : 6 }
md={ !hasTitle ? 12 : small ? 12 : (numeric ? 2 : suggestion ? 4 : 8) }
style={ style }
className={ style ? `${style}` : `${small ? classes.propertiesValueSmall : ''} ${numeric && !small ? classes.propertiesValueNumeric : ''} ${classes.propertiesValue}` }
>
{ children }
</Grid>
</Grid>
......
......@@ -355,7 +355,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
<Properties>
<h5 className="pl-10 pt-1rem mb-10">{ t('common:f.suggestedFilters') }</h5>
{ terms && Array.from(terms).slice(0, 10).filter(([key, value]) => !['missing', ...excludedValues].includes(key)).map(([key, value]) => (
<PropertiesItem key={ key } title={ options && options[key] || key } onClick={ () => input.onChange(this.maybeAdd(key)) } classes={ {...classes, propertiesRow: 'cursor-pointer'} }>
<PropertiesItem suggestion key={ key } title={ options && options[key] || key } onClick={ () => input.onChange(this.maybeAdd(key)) } classes={ {...classes, propertiesRow: 'cursor-pointer'} }>
<span className="float-right">
<Number value={ value }/>
</span>
......
......@@ -331,7 +331,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
<Properties>
<h5 className="pl-10 pt-1rem mb-10">{ t('common:f.suggestedFilters') }</h5>
{ terms && Array.from(terms).slice(0, 10).filter(([key, value]) => !['missing', ...excludedValues].includes(key)).map(([key, value]) => (
<PropertiesItem key={ key } title={ suggestionTranslations && suggestionTranslations[key] || key } onClick={ () => input.onChange(this.maybeAdd(key)) } classes={ {...classes, propertiesRow: 'cursor-pointer'} }>
<PropertiesItem suggestion key={ key } title={ suggestionTranslations && suggestionTranslations[key] || key } onClick={ () => input.onChange(this.maybeAdd(key)) } classes={ {...classes, propertiesRow: 'cursor-pointer'} }>
<span className="float-right">
<Number value={ value }/>
</span>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment