How to show popup Confirm Remove Rule instead of default popup

[tunv1998]

hi guys, I wonder how to custom this default Confirm Remove Rule
I'm using bootstrap btw
from this

to this

Thanks

[ukrbublik]

You need to set settings.removeRuleConfirmOptions.title

react-awesome-query-builder/examples/demo/config.tsx

Lines 213 to 218 in 0a54e42

	removeRuleConfirmOptions: {
	title: "Are you sure delete this rule?",
	okText: "Yes",
	okType: "danger",
	cancelText: "Cancel"
	},

[tunv1998]

configs

const localeSettings: LocaleSettings = {
    valueLabel: 'Value',
    valuePlaceholder: 'Value',
    fieldLabel: 'Field',
    operatorLabel: 'Operator',
    funcLabel: 'Function',
    fieldPlaceholder: 'Select field',
    funcPlaceholder: 'Select function',
    operatorPlaceholder: 'Select operator',
    lockLabel: 'Lock',
    lockedLabel: 'Locked',
    addGroupLabel: 'Add group',
    addRuleLabel:
      builderType === BuilderType.CONDITION ? 'Add Rule' : 'Add Action',
    addSubRuleLabel: 'Add sub rule',
    notLabel: 'Not',
    valueSourcesPopupTitle: 'Select value source',
    removeRuleConfirmOptions: {
      title: 'Are you sure delete this rule?',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'Cancel',
    },
    removeGroupConfirmOptions: {
      title: 'Are you sure delete this group?',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'Cancel',
    },
  };

[tunv1998]

settings

const settings: Settings = {
    ...BasicConfig.settings,
    ...localeSettings,
    renderButton: RenderButton, // I implemented a RenderButton component and it works well
    valueSourcesInfo: {
      value: {
        label: 'Value',
      },
      field: {
        label: 'Field',
        widget: 'field',
      },
      func: {
        label: 'Function',
        widget: 'func',
      },
    },
    maxNesting: 1,
    showNot: false,
    canLeaveEmptyGroup: true,
    groupActionsPosition: 'topLeft',
    shouldCreateEmptyGroup: false,
    showErrorMessage: true,
    customFieldSelectProps: {
      showSearch: true,
    },
    canReorder: false,
  };

[tunv1998]

@ukrbublik sr cause large file so I have to use Github markdown instead of Codesandbox

[tunv1998]

I'm using React + Typescript + Reactstrap + Bootstrap.

Issues 1: with BootstrapConfig, I can't use example code cause there is no d.ts file in utils.

[tunv1998]

renderConfirm

import React from 'react'

import {ConfirmModalProps} from 

const RenderConfirm:React.Factory<ConfirmModalProps> = (props) => { // wont work cause renderConfirm type !React.Factory
const {title} = props || {};

return <Modal isOpen>
<ModalHeader>{title}</ModalHeader>
</Modal>
}

[ukrbublik]

renderConfirm should not return components to render.
It should call hook, something like showConfirm in antdesign: https://ant.design/components/modal/#components-modal-demo-confirm
But this hook is not implemented for reactstrap (yet).
You can open an issue for this.

This article can be used as example to write PR:
https://dev.to/alexandprivate/your-next-react-modal-with-your-own-usemodal-hook-context-api-3jg7

[tunv1998]

thanks, It helps a lots!