Add renderIcon to customize button icons and drag icon (#962)

* Add renderIcon

* fluent

* bootstrap

* antd

* .

* mui

* iconProps

* chlog

* lint fix

* type fix

CHANGELOG.md

@@ -1,4 +1,6 @@
 # Changelog
+- 6.4.2
+  - Allow override icons with `renderIcon` (issues #319, #872) (PR #xxx)
 - 6.4.1
   - Fixed import of rule_group in rule_group from SpEL (PR #959)
   - Updated type `ItemBuilderProps` (PR #959)

CONFIG.adoc

@@ -367,7 +367,7 @@ Render settings:
   Available widgets for AntDesign: `FieldSelect`, `FieldDropdown`
 |renderFunc |`(props) => <FieldSelect {...props} />` |Render functions list +
   Available widgets for AntDesign: `FieldSelect`, `FieldDropdown`
-|renderConjs, renderButton, renderButtonGroup, renderSwitch, renderProvider, renderValueSources, renderConfirm, useConfirm, renderRuleError | |Other internal render functions you can override if using another UI framework ({renderSwitch}[example])
+|renderConjs, renderButton, renderIcon, renderButtonGroup, renderSwitch, renderProvider, renderValueSources, renderConfirm, useConfirm, renderRuleError | |Other internal render functions you can override if using another UI framework ({renderSwitch}[example])
 |renderItem | |Render Item +
   Able to Customize Render behavior for rule/group items.
 |showLabels |false |Show labels above all fields?

packages/antd/modules/config/index.jsx

@@ -21,6 +21,7 @@ const settings = {
   renderConjs: (props, {RCE, W: {Conjs}}) => RCE(Conjs, props),
   renderSwitch: (props, {RCE, W: {Switch}}) => RCE(Switch, props),
   renderButton: (props, {RCE, W: {Button}}) => RCE(Button, props),
+  renderIcon: (props, {RCE, W: {Icon}}) => RCE(Icon, props),
   renderButtonGroup: (props, {RCE, W: {ButtonGroup}}) => RCE(ButtonGroup, props),
   renderValueSources: (props, {RCE, W: {ValueSources}}) => RCE(ValueSources, props),
   renderFieldSources: (props, {RCE, W: {ValueSources}}) => RCE(ValueSources, props),

packages/antd/modules/widgets/core/Button.jsx

@@ -1,53 +1,50 @@
 import React from "react";
 import { Button } from "antd";
-import { PlusOutlined, PlusCircleOutlined, DeleteFilled } from "@ant-design/icons";
 
-export default ({type, onClick, label, readonly, config: {settings}}) => {
-  const hideLabelsFor = {
-    "addRuleGroup": true
-  };
-  const btnLabel = hideLabelsFor[type] ? "" : label;
-  const hasLabel = !!btnLabel;
-
-  const typeToIcon = {
-    "addRule": <PlusOutlined />,
-    "addGroup": <PlusCircleOutlined />,
-    "delRule": <DeleteFilled />, //?
-    "delGroup": <DeleteFilled />,
-    "delRuleGroup": <DeleteFilled />,
-    "addRuleGroup": <PlusOutlined />,
-  };
+const hideLabelsFor = {
+  "addRuleGroup": true,
+  "delGroup": true,
+  "delRuleGroup": true,
+  "delRule": true,
+};
 
-  const typeToClass = {
-    "addRule": "action action--ADD-RULE",
-    "addGroup": "action action--ADD-GROUP",
-    "delRule": "action action--DELETE", //?
-    "delGroup": "action action--DELETE",
-    "delRuleGroup": "action action--DELETE",
-    "addRuleGroup": <PlusOutlined />,
-  };
+const typeToClass = {
+  "addRule": "action action--ADD-RULE",
+  "addGroup": "action action--ADD-GROUP",
+  "delRule": "action action--DELETE",
+  "delGroup": "action action--DELETE",
+  "delRuleGroup": "action action--DELETE",
+  "addRuleGroup": "action action--ADD-RULE",
+};
 
-  const typeToType = {
-    "delRule": "text",
-    // "delGroup": "default",
-    // "delRuleGroup": "default",
-  };
+const typeToType = {
+  "delRule": "text",
+  // "delGroup": "default",
+  // "delRuleGroup": "default",
+};
 
-  const dangerFor = {
-    "delRule": true,
-    "delGroup": true,
-    "delRuleGroup": true,
-  };
+const dangerFor = {
+  "delRule": true,
+  "delGroup": true,
+  "delRuleGroup": true,
+};
 
+export default (props) => {
+  const {type, onClick, label, readonly, config: {settings}, renderIcon} = props;
   const {renderSize} = settings;
-
+  const iconProps = {
+    type,
+    readonly,
+  };
+  const icon = renderIcon?.(iconProps);
+  const btnLabel = hideLabelsFor[type] ? "" : label;
 
   return (
     <Button
       danger={dangerFor[type] === true}
       key={type}
       type={typeToType[type] || "default"}
-      icon={typeToIcon[type]}
+      icon={icon}
       className={typeToClass[type]}
       onClick={onClick}
       size={renderSize}

packages/antd/modules/widgets/core/Icon.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { PlusOutlined, PlusCircleOutlined, DeleteFilled, HolderOutlined } from "@ant-design/icons";
+import { Utils } from "@react-awesome-query-builder/ui";
+const { DragIcon } = Utils;
+
+const typeToIcon = {
+  "addRule": <PlusOutlined />,
+  "addGroup": <PlusCircleOutlined />,
+  "delRule": <DeleteFilled />,
+  "delGroup": <DeleteFilled />,
+  "delRuleGroup": <DeleteFilled />,
+  "addRuleGroup": <PlusOutlined />,
+  "addRuleGroupExt": <PlusOutlined />,
+  "drag": <HolderOutlined />,
+};
+
+export default ({type}) => {
+  let icon = typeToIcon[type];
+  if (!icon && type === "drag") {
+    icon = <DragIcon />;
+  }
+
+  return icon || null;
+};

packages/antd/modules/widgets/index.jsx

@@ -22,6 +22,7 @@ import FieldCascader from "./core/FieldCascader";
 import FieldTreeSelect from "./core/FieldTreeSelect";
 
 // core components
+import Icon from "./core/Icon";
 import Button from "./core/Button";
 import ButtonGroup from "./core/ButtonGroup";
 import Conjs from "./core/Conjs";
@@ -52,6 +53,7 @@ export default {
   FieldCascader,
   FieldTreeSelect,
 
+  Icon,
   Button,
   ButtonGroup,
   Conjs,

packages/bootstrap/modules/config/index.jsx

@@ -11,6 +11,7 @@ const settings = {
   renderFunc: (props, {RCE, W: {BootstrapFieldSelect}}) => RCE(BootstrapFieldSelect, props),
   renderConjs: (props, {RCE, W: {BootstrapConjs}}) => RCE(BootstrapConjs, props),
   renderButton: (props, {RCE, W: {BootstrapButton}}) => RCE(BootstrapButton, props),
+  renderIcon: (props, {RCE, W: {BootstrapIcon}}) => RCE(BootstrapIcon, props),
   renderButtonGroup: (props, {RCE, W: {BootstrapButtonGroup}}) => RCE(BootstrapButtonGroup, props),
   renderValueSources: (props, {RCE, W: {BootstrapValueSources}}) => RCE(BootstrapValueSources, props),
   renderFieldSources: (props, {RCE, W: {BootstrapValueSources}}) => RCE(BootstrapValueSources, props),

packages/bootstrap/modules/widgets/core/BootstrapButton.jsx

@@ -1,34 +1,37 @@
 import React from "react";
 import { Button } from "reactstrap";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 
-export default ({ type, label, onClick, config }) => {
-  const hideLabelsFor = {
-    "addRuleGroup": true
-  };
-  const typeToIcon = {
-    delGroup: faTrashAlt,
-    delRuleGroup: faTrashAlt,
-    delRule: faTrashAlt,
-    addRuleGroup: faPlus,
-    addRuleGroupExt: faPlus,
-    addRule: faPlus,
-    addGroup: faPlus,
-  };
-  const typeToColor = {
-    addRule: "primary",
-    addGroup: "primary",
-    delGroup: "danger",
-    delRuleGroup: "danger",
-    delRule: "danger",
+const hideLabelsFor = {
+  "addRuleGroup": true,
+  "delRuleGroup": true,
+  "delRule": true,
+};
+
+const typeToColor = {
+  addRule: "primary",
+  addGroup: "primary",
+  delGroup: "danger",
+  delRuleGroup: "danger",
+  delRule: "danger",
+};
+
+export default (props) => {
+  const { type, label, onClick, renderIcon, readonly } = props;
+  const iconProps = {
+    type,
+    readonly,
   };
+  const Icon = renderIcon?.(iconProps) || null;
 
   let isOnlyIcon = hideLabelsFor[type] || !label;
 
-  return (
-    <Button size="sm" color={typeToColor[type]} onClick={onClick}>
-      <FontAwesomeIcon icon={typeToIcon[type]} /> {!isOnlyIcon && label}
-    </Button>
-  );
+  if (!onClick) {
+    return Icon;
+  } else {
+    return (
+      <Button size="sm" color={typeToColor[type]} onClick={onClick}>
+        {Icon}{!isOnlyIcon && label}
+      </Button>
+    );
+  }
 };

packages/bootstrap/modules/widgets/core/BootstrapIcon.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faTrashAlt, faUpDown } from "@fortawesome/free-solid-svg-icons";
+import { Utils } from "@react-awesome-query-builder/ui";
+const { DragIcon } = Utils;
+
+const typeToIcon = {
+  delGroup: faTrashAlt,
+  delRuleGroup: faTrashAlt,
+  delRule: faTrashAlt,
+  addRuleGroup: faPlus,
+  addRuleGroupExt: faPlus,
+  addRule: faPlus,
+  addGroup: faPlus,
+  drag: faUpDown,
+};
+
+export default ({ type }) => {
+  let icon = typeToIcon[type] 
+    && <FontAwesomeIcon
+      icon={typeToIcon[type]}
+    />;
+  if (!icon && type === "drag") {
+    icon = <DragIcon />;
+  }
+
+  return icon;
+};

packages/bootstrap/modules/widgets/index.jsx

@@ -14,6 +14,7 @@ import BootstrapMultiSelectWidget from "./value/BootstrapMultiSelect";
 import BootstrapFieldSelect from "./core/BootstrapFieldSelect";
 
 // core components
+import BootstrapIcon from "./core/BootstrapIcon";
 import BootstrapButton from "./core/BootstrapButton";
 import BootstrapButtonGroup from "./core/BootstrapButtonGroup";
 import BootstrapConjs from "./core/BootstrapConjs";
@@ -37,6 +38,7 @@ export default {
 
   BootstrapFieldSelect,
 
+  BootstrapIcon,
   BootstrapButton,
   BootstrapButtonGroup,
   BootstrapConjs,

packages/bootstrap/styles/fixes.scss

@@ -1,3 +1,9 @@
 .svg-inline--fa {
   pointer-events: none;
 }
+.btn > .svg-inline--fa {
+  margin-right: 4px;
+}
+.rule--drag-handler .svg-inline--fa {
+  margin-left: 6px;
+}

packages/core/modules/config/default.js

@@ -46,14 +46,14 @@ export const settings = {
   operatorPlaceholder: "Select operator",
   lockLabel: "Lock",
   lockedLabel: "Locked",
-  deleteLabel: null,
+  deleteLabel: "Delete",
   addGroupLabel: "Add group",
   addCaseLabel: "Add condition",
   addDefaultCaseLabel: "Add default condition",
   defaultCaseLabel: "Default:",
   addRuleLabel: "Add rule",
   addSubRuleLabel: "Add sub rule",
-  delGroupLabel: "",
+  delGroupLabel: "Delete",
   notLabel: "Not",
   fieldSourcesPopupTitle: "Select source",
   valueSourcesPopupTitle: "Select value source",

packages/core/modules/utils/configSerialize.js

@@ -134,6 +134,7 @@ const compileMetaSettings = {
   renderFunc: { type: "rf" },
   renderConjs: { type: "rf" },
   renderButton: { type: "rf" },
+  renderIcon: { type: "rf" },
   renderButtonGroup: { type: "rf" },
   renderValueSources: { type: "rf" },
   renderFieldSources: { type: "rf" },

packages/fluent/modules/config/index.jsx

@@ -11,6 +11,7 @@ const settings = {
   renderFunc: (props, {RCE, W: {FluentUIFieldSelect}}) => RCE(FluentUIFieldSelect, props),
   renderConjs: (props, {RCE, W: {FluentUIConjs}}) => RCE(FluentUIConjs, props),
   renderButton: (props, {RCE, W: {FluentUIButton}}) => RCE(FluentUIButton, props),
+  renderIcon: (props, {RCE, W: {FluentUIIcon}}) => RCE(FluentUIIcon, props),
   renderButtonGroup: (props, {RCE, W: {FluentUIButtonGroup}}) => RCE(FluentUIButtonGroup, props),
   renderValueSources: (props, {RCE, W: {FluentUIValueSources}}) => RCE(FluentUIValueSources, props),
   renderFieldSources: (props, {RCE, W: {FluentUIValueSources}}) => RCE(FluentUIValueSources, props),