init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Input } from "antd";
import { Checkbox } from "@humansignal/ui";
import { observer } from "mobx-react";
import type { FC } from "react";
import type { SettingsProperties, SettingsProperty } from "../../../core/settings/types";
import { cn } from "../../../utils/bem";
import { isFF } from "../../../utils/feature-flags";
 
const SettingsRendererPure: FC<{ store: any; settings: SettingsProperties }> = ({ store, settings }) => {
  return (
    <div className={cn("settings").toClassName()}>
      {Object.entries(settings).map(([key, value]) => {
        return value.ff && !isFF(value.ff) ? null : <SettingsField key={key} name={key} store={store} value={value} />;
      })}
    </div>
  );
};
 
const SettingsField: FC<{
  store: any;
  name: string;
  value: SettingsProperty;
}> = observer(({ store, name, value }) => {
  const handler = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (value.onChangeEvent) {
      value.onChangeEvent(e);
    } else if (value.type === "boolean") {
      store.settings.toggleProperty(name);
    } else {
      const newValue = value.type === "number" ? Number(e.target.value) : e.target.value;
 
      store.settings.setProperty(name, newValue);
    }
  };
 
  const props: Record<string, any> = {
    onChange: handler,
  };
 
  if (value.type === "boolean") {
    props.checked = store.settings[name];
  }
 
  if (value.type !== "boolean") {
    props.type = value.type;
    props.value = store.settings[name];
    props.placeholder = value.description;
  }
 
  if (value.type === "number") {
    props.step = value.step;
    props.min = value.min;
    props.max = value.max;
  }
 
  return (
    <div className={cn("settings").elem("field").toClassName()} key={name}>
      {value.type === "boolean" ? (
        <Checkbox {...props}>{value.description}</Checkbox>
      ) : (
        <label>
          {value.description}
          <Input {...props} />
        </label>
      )}
    </div>
  );
});
 
export const SettingsRenderer = observer(SettingsRendererPure);