Configure editor templates

import React, {useEffect} from 'react';
import { TextField, ExposedDropdownMenu } from "@episerver/ui-framework";

export interface CriteriaEditorProps {
  /** Id of this criterion in database */
  id: string;
  /** An id unique for this instance */
  uiGuid: string;
  /** The display name */
  name: string;
  /** Criteria description */
  description: string;
  /** The selected audience's id */
  visitorGroupId: string;
  /** The url where the remote editor component can be downloaded */
  scriptUrl: string;
  /** Props to pass along to the remote editor component */
  editorConfig: Array<CriteriaEditorModelPropertyConfig>;
  /** Stored settings for a criteria */
  settings: any;
  /** Points value */
  points: number;
  /** List of criterion errors */
  errors: CriterionError[];
  /** Callback when the value has changed */
  onValueChange: (value: string) => void;
  /** Callback when the criteria editor is deleted */
  onEditorDelete: (id: string) => void;
  /** Flag indicating if the criteria is required or not */
  required: boolean;
  /** Localization function */
  localization(key: string, fallbackText?: string, values?: any[]): string;
  /** Init function for partner localizations */
  initLocalization(path: string): any;
  /** Property indicating whether partner translations has been loaded or not */
  translationsLoaded: boolean;
}

export interface CriterionError {
  type: CriterionErrorType;
  message: string;
}
export enum CriterionErrorType {
  Error,
  Warning,
  Info,
}

interface CriteriaEditorModelPropertyConfig {
  defaultValue: any;
  required: boolean;
  range: ValidRange;
  pattern: string;
  stringLength: ValidRange;
  selectItems: any;
  additionalProps: any;
  label: string;
  typeName: string;
  order: number;
  }
  
interface ValidRange {
  min: number;
  max: number;
}

const CustomCriteriaEditor = (props: CriteriaEditorProps) => {
  const [localModelState, setLocalModelState] = React.useState<any>({});

  useEffect(() => {
    const state = { ...props.settings };
    setLocalModelState(state);
  }, []);

  const emitValueChange = (newState: any) => {
    setLocalModelState(newState);
    props.onValueChange(newState);
  };

  const editorConfig = props.editorConfig as any;

  return (
    <>
      <ExposedDropdownMenu
        label="Language"
        options={
          props &&
          editorConfig.language.selectItems.map((item: any) => {
            return {
              label: item.text ?? "",
              value: item.value?.toString() ?? "",
            };
          })
        }
        value={localModelState.language?.toString()}
        onValueChange={(value) => {
          let newState = { ...localModelState };
          newState.language = value;
          emitValueChange(newState);
        }}
      />
    </>
  );
};

export default CustomCriteriaEditor;

const path = require('path');

module.exports = {
	entry: './src/CustomCriteriaEditor.tsx',
	module: {
		rules: [{
			test: /\.tsx?$/,
			use: 'ts-loader',
			exclude: /node_modules/,
		}, ],
	},
	resolve: {
		extensions: ['.tsx', '.ts', '.js'],
	},
	output: {
		filename: 'CustomCriteriaEditor.js',
		libraryTarget: "commonjs",
		path: path.resolve(__dirname, 'dist'),
	},
	externals: {
		react: "react",
		reactDOM: "react-dom",
		"@episerver/ui-framework": "@episerver/ui-framework"
	},
	mode: 'development'
};

{
    "compilerOptions": {
      "outDir": "dist",
      "target": "es5",
      "jsx": "react",
      "esModuleInterop": true
    }
  }

[VisitorGroupCriterion(
  Category = "Custom Criteria",
  DisplayName = "Custom Audience",
  Description = "Sample of a custom critera",
  ScriptUrl = "CustomCriteria/main.js")]
public class CustomCriterion: CriterionBase<CustomCriterionModel> {
  public override bool IsMatch(IPrincipal principal, HttpContext httpContext) {
    return System.Threading.Thread.CurrentThread.CurrentUICulture.Name == Model.Language;
  }
}

public class SimpleLanguageSelectionFactory: ISelectionFactory {
  public IEnumerable<SelectListItem> GetSelectListItems(Type propertyType) {
    return new List<SelectListItem> {
      new SelectListItem {
        Text = "English",
          Value = "en"
      },
      new SelectListItem {
        Text = "Swedish",
          Value = "sv"
      }
    };
  }
}

[EPiServerDataStore(AutomaticallyCreateStore = true, AutomaticallyRemapStore = true)]
public class CustomCriterionModel: CriterionModelBase, IValidateCriterionModel {
  [CriterionPropertyEditor(SelectionFactoryType = typeof (SimpleLanguageSelectionFactory))]
  public string Language {
    get;
    set;
  }

  public override ICriterionModel Copy() {
    return ShallowCopy();
  }

  public CriterionValidationResult Validate(VisitorGroup currentGroup) {
    if (string.IsNullOrWhiteSpace(Language)) {
      return new CriterionValidationResult(false, "Please select a Language");
    }

    return new CriterionValidationResult(true);
  }
}