Hi community,
I want to modify the existing filter widget but i'm encountering a problem.
in the "widget.tsx" file there is this code who manage the position of the reset filter button :
showResetAtBottom = (resetAll, arrangeType, wrap, filterItems): boolean => {
let atBottom = true
if (
resetAll && arrangeType === FilterArrangeType.Inline && !wrap &&
(filterItems.length > 1 || (filterItems.length === 1 && getShownClauseNumberByExpression(filterItems[0].sqlExprObj) === 0))
) {
atBottom = false
}
return atBottom
}
getItemUseDs = (item: filterItemConfig) => {
let useDs = item.useDataSources[0]
if (item.isGroup && item.sqlExprObjForGroup) {
useDs = item.useDataSources.filter(ds => ds.dataSourceId === item.sqlExprObjForGroup[0].dataSourceId)[0]
}
return useDs
}
getFilterItems = (config, arrangeType = FilterArrangeType.Block, wrap = false, isPopup = false) => {
const showResetAtBottom = this.showResetAtBottom(config.resetAll, arrangeType, wrap, config.filterItems)
return (
<div className={classNames('w-100 h-100 d-flex justify-content-between',
showResetAtBottom ? 'flex-column' : 'flex-row')}
css={getStyles(this.props.theme, this.props.config)}>
<div
className={classNames('w-100 filter-items-container',
arrangeType && config.arrangeType === FilterArrangeType.Inline ? 'filter-items-inline' : '',
wrap ? 'filter-items-wrap' : '', isPopup ? 'filter-items-popup' : '')}
>
{(this.state.filterItems as unknown as filterItemConfig[]).map((item, index) => {
const useDs = this.getItemUseDs(item)
const ds = this.isDataSourceRemoved(useDs.dataSourceId) ? null : this.state.dataSources[useDs.dataSourceId]
const isNotReadyFromWidget = this.state.outputDataSourceIsNotReady[useDs.dataSourceId]
return (
<FilterItem
key={index} id={index} widgetId={this.props.id} intl={this.props.intl}
selectedDs={ds} useDataSource={useDs}
isNotReadyFromWidget={isNotReadyFromWidget} logicalOperator={config.logicalOperator} config={item}
arrangeType={arrangeType} triggerType={config.triggerType} wrap={wrap} omitInternalStyle={config.omitInternalStyle} filterNum={this.state.filterItems.length}
onChange={this.onFilterItemChange} itemBgColor={this.props.theme.ref.palette.neutral[400]} theme={this.props.theme}
/>
)
})}
</div>
{
config.resetAll && <div className={classNames('filter-reset-container', showResetAtBottom ? 'bottom-reset' : 'right-reset')}>
<Button icon type='default' size='default' className='reset-button'
style={{ borderRadius: config.triggerType === FilterTriggerType.Toggle ? '16px' : null }}
title={this.props.intl.formatMessage({ id: 'resetAllFilters', defaultMessage: jimuUIMessages.resetAllFilters })}
aria-label={this.props.intl.formatMessage({ id: 'resetAllFilters', defaultMessage: jimuUIMessages.resetAllFilters })}
onClick={this.onResetChange}
>
<ResetOutlined />
</Button>
</div>
}
</div>
)
}
My question here is simple : how can I move the button to integrate on the filter dialog box ? I don't want to have this button outside of the dialog box because it consume to much space if I use multiple filter widget.
