Editor templates

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

export interface CriteriaEditorProps {
  /** Id of this criteria in database */
  id: string;
  /** An id unique for this instance */
  uiGuid: string;
  /** The display name */
  name: string;
  /** Criteria description */
  description: string;
  /** The selected visitor group'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 critera */
  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 Visitor Group",
    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);
    }
}