<commit_before>// Libs
import React from "react";
import i18n from "i18next";

// Components
import { Checkbox } from "./checkbox";

// Styles
import "./__style__/checkbox-select.scss";

function clickHandlerFactory(
  isSelected: boolean,
  value: string[] | number[] | undefined,
  optVal: string | number,
  onChange: (value: string[] | number[] | undefined) => void
) {
  return (e: React.SyntheticEvent<any>) => {
    e.stopPropagation();
    e.preventDefault();

    if (isSelected) {
      // is selected -> remove it
      onChange(
        value ? (value as any).filter((val: any) => val !== optVal) : undefined
      );
    } else {
      // is not selected -> add it
      onChange((value ? [...value, optVal] : [optVal]) as any);
    }
  };
}

export interface CheckboxSelectProps {
  /** Disabled checkbox-select. */
  disabled?: boolean;
  /** Error message to display. */
  error?: string;
  /** Label to display. */
  label?: string;
  /** Name of field for label. */
  labelKey: string;
  /** Name for input field. */
  name: string;
  /** Call with each value change. */
  onChange: (value: string[] | number[] | undefined) => void;
  /** Value. */
  value?: string[] | number[];
  /** Name of field for key. */
  valueKey: string;
  /** Values. */
  values: {}[];
}

export function CheckboxSelect({
  disabled = false,
  error,
  label,
  labelKey,
  name,
  onChange,
  value,
  valueKey,
  values
}: CheckboxSelectProps) {
  return (
    <div className="c-checkbox-select">
      {label && <h5 className="c-checkbox-select__title">{i18n.t(label)}</h5>}
      <ul>
        {values.map(option => {
          const optVal = (option as any)[valueKey];
          const optLabel = (option as any)[labelKey];

          const isSelected = value
            ? !!(value as any).find((val: any) => optVal === val)
            : false;
          const clickHandler = clickHandlerFactory(
            isSelected,
            value,
            optVal,
            onChange
          );

          return (
            <li
              key={optVal}
              onClick={clickHandler}
              className="c-checkbox-select__option"
            >
              <Checkbox
                name={`${name}-${optVal}`}
                value={isSelected}
                onClick={clickHandler}
                disabled={disabled}
                label={i18n.t(optLabel)}
              />
              {error ? <div>{error}</div> : null}
            </li>
          );
        })}
      </ul>
    </div>
  );
}<commit_msg>fix: Disabled not handled properly<commit_after>// Libs
import i18n from "i18next";
import React from "react";

// Components
import { Checkbox } from "./checkbox";

// Styles
import "./__style__/checkbox-select.scss";

function clickHandlerFactory(
  isDisabled: boolean,
  isSelected: boolean,
  value: string[] | number[] | undefined,
  optVal: string | number,
  onChange: (value: string[] | number[] | undefined) => void
) {
  return (e: React.SyntheticEvent<any>) => {
    e.stopPropagation();
    e.preventDefault();

    if (!isDisabled) {
      if (isSelected) {
        // is selected -> remove it
        onChange(
          value
            ? (value as any).filter((val: any) => val !== optVal)
            : undefined
        );
      } else {
        // is not selected -> add it
        onChange((value ? [...value, optVal] : [optVal]) as any);
      }
    }
  };
}

export interface CheckboxSelectProps {
  /** Disabled checkbox-select. */
  disabled?: boolean;
  /** Error message to display. */
  error?: string;
  /** Label to display. */
  label?: string;
  /** Name of field for label. */
  labelKey: string;
  /** Name for input field. */
  name: string;
  /** Call with each value change. */
  onChange: (value: string[] | number[] | undefined) => void;
  /** Value. */
  value?: string[] | number[];
  /** Name of field for key. */
  valueKey: string;
  /** Values. */
  values: {}[];
}

export function CheckboxSelect({
  disabled = false,
  error,
  label,
  labelKey,
  name,
  onChange,
  value,
  valueKey,
  values
}: CheckboxSelectProps) {
  return (
    <div className="c-checkbox-select">
      {label && <h5 className="c-checkbox-select__title">{i18n.t(label)}</h5>}
      <ul>
        {values.map(option => {
          const optVal = (option as any)[valueKey];
          const optLabel = (option as any)[labelKey];

          const isSelected = value
            ? !!(value as any).find((val: any) => optVal === val)
            : false;
          const clickHandler = clickHandlerFactory(
            disabled,
            isSelected,
            value,
            optVal,
            onChange
          );

          return (
            <li
              key={optVal}
              onClick={clickHandler}
              className="c-checkbox-select__option"
            >
              <Checkbox
                name={`${name}-${optVal}`}
                value={isSelected}
                onClick={clickHandler}
                disabled={disabled}
                label={i18n.t(optLabel)}
              />
            </li>
          );
        })}
      </ul>
      {error ? <div>{error}</div> : null}
    </div>
  );
}
{'fraction_non_alphanumeric': 0.1496821421691389, 'fraction_numerical': 0.0038528221922558272, 'mean_word_length': 1.9070548712206048, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6065620', 'n_tokens_mistral': 1539, 'n_tokens_neox': 1533, 'n_words': 385}