Subject: Inquiry about "custom operator matches" functionality in react-awesome-query-builder

[AndresPalacio]

Hello,

I hope you're doing well. I'm exploring the react-awesome-query-builder repository on GitHub (https://github.com/ukrbublik/react-awesome-query-builder) and I was wondering how to customize an operator with the functionality of regex matches.

Specifically, I would like to know if it's possible to create a custom operator for my project that uses the matches functionality with a regex pattern like matches('.*(01|11|41|52|63)$'), where I'm evaluating if an element ends with "01" or "11" and so on.

If the matches functionality is available for creating a result in SPEL (Structured Predicate Expression Language), and considering that it can also be used with the contains operator, I would like to leverage this regex matches functionality in Spel.

I appreciate your time and assistance in clarifying this matter.

Best regards,

[ukrbublik]

Please create a new issue. I need to support matches operator for SpEL

[AndresPalacio]

Question Is it not possible to make the custom operator for my current project?

[AndresPalacio]

I see that it is present in the import spel

react-awesome-query-builder/packages/core/modules/import/spel.js

Line 255 in a04dcbd

// examples: "==", "eq", ".contains", "matches" (can be used for starts_with, ends_with)

[ukrbublik]

Is someVar.matches('.*(01|11|41|52|63)$') a valid spel expression?
I thought someVar matches '.*(01|11|41|52|63)$' is valid. And it's not possible to import for now with current version.

[ukrbublik]

If first one is valid, you can customize config to support your custom operator. I can provide sample code

[AndresPalacio]

that's correct, my current spel is this #phone.matches('.*(01|11|41|52|63)$')
Could you please provide me with the example you mention?

[ukrbublik]

Just add to operators:

const operators: Operators = {
  ...InitialConfig.operators,
  matches: {
    label: "matches",
    spelOp: ".matches", // <6.4
    //spelOp: "${0}.matches(${1})", // 6.4+
  },
};

And to types:

import merge from "lodash/merge";
  const types: Types = merge(
    {},
    InitialConfig.types,
    {
      text: {
        widgets: {
          text: {
            operators: [
              "matches",
              ...InitialConfig.types.text.widgets.text.operators,
            ],
          }
        },
      }
    }
  );

const config: Config = {
    ...MuiConfig,
   types,
  operators,
};

[AndresPalacio]

this is a configuration for typescript ?

const config: Config = {
    ...MuiConfig,
    settings: {
        ...MuiConfig.settings,
    },
    fields: {
        terms: {
            label: "Search Terms",
            type: "text",
            fieldSettings: {
                min: 0
            },
            valueSources: ["value"],
            preferWidgets: ["number"],
            isSpelVariable: true,
        }
    }
};

[ukrbublik]

Updated my sample code in previous comment to TS

[AndresPalacio]

How can I make this work for me? I can't get it to work.

const operators = {
    ...MuiConfig.operators,
    matches: {
      label: "matches",
      spelOp: ".matches", // <6.4
    },
  };

  const types: Types = merge(
    {},
    MuiConfig.types,
    {
      text: {
        widgets: {
          text: {
            operators: [
              "matches",
              ...MuiConfig.types.text.widgets.text.operators || [],
            ],
          }
        },
      }
    }
  );

  const config: Config = {
    ...MuiConfig,
   types,
  operators,
  fields: {
    terms: {
        label: "Search Terms",
        type: "text",
        fieldSettings: {
            min: 0
        },
        valueSources: ["value"],
        preferWidgets: ["number"],
        isSpelVariable: true,
    }
},
};

  "dependencies": {
    "@react-awesome-query-builder/mui": "^6.2.0",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.4",
    "@mui/lab": "^5.0.0-alpha.60",
    "@mui/material": "^5.2.4",
    "@mui/x-date-pickers": "^5.0.0-beta.2",
    "@mui/system": "^5.4.1"
  }

Error:

Cannot read properties of undefined (reading 'valueSrc')
TypeError: Cannot read properties of undefined (reading 'valueSrc')
at _loop2 (http://localhost:3000/static/js/bundle.js:57554:51)
at _getWidgetsAndSrcsForFieldOp (http://localhost:3000/static/js/bundle.js:57578:7)
at getWidgetForFieldOp (http://localhost:3000/static/js/bundle.js:57638:32)
at getOperatorConfig (http://localhost:3000/static/js/bundle.js:56299:81)
at getNewValueForFieldOp (http://localhost:3000/static/js/bundle.js:57261:90)
at http://localhost:3000/static/js/bundle.js:55338:107
at Map.withMutations (http://localhost:3000/static/js/bundle.js:78660:5)
at http://localhost:3000/static/js/bundle.js:55337:16
at updateInDeepMap (http://localhost:3000/static/js/bundle.js:79168:22)
at updateInDeepMap (http://localhost:3000/static/js/bundle.js:79174:23)

[ukrbublik]

Please remove

        fieldSettings: {
            min: 0
        },
        preferWidgets: ["number"],

as these props do not make sense for text type

[AndresPalacio]

Oh sorry.
Thank you for the support, now it makes sense to me. Thank you very much.