init

2025-03-07 13:47:44 +07:00
commit c4efec5a14
3358 changed files with 303774 additions and 0 deletions
--- a/platform/ui/src/components/AdvancedToolbox/ToolSettings.tsx
+++ b/platform/ui/src/components/AdvancedToolbox/ToolSettings.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { ButtonGroup, InputDoubleRange, InputRange } from '../../components';
+
+const SETTING_TYPES = {
+  RANGE: 'range',
+  RADIO: 'radio',
+  CUSTOM: 'custom',
+  DOUBLE_RANGE: 'double-range',
+};
+
+function ToolSettings({ options }) {
+  if (!options) {
+    return null;
+  }
+
+  if (typeof options === 'function') {
+    return options();
+  }
+
+  return (
+    <div className="space-y-2 py-2 text-white">
+      {options?.map(option => {
+        if (option.condition && option.condition?.({ options }) === false) {
+          return null;
+        }
+
+        switch (option.type) {
+          case SETTING_TYPES.RANGE:
+            return renderRangeSetting(option);
+          case SETTING_TYPES.RADIO:
+            return renderRadioSetting(option);
+          case SETTING_TYPES.DOUBLE_RANGE:
+            return renderDoubleRangeSetting(option);
+          case SETTING_TYPES.CUSTOM:
+            return renderCustomSetting(option);
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}
+
+const renderRangeSetting = option => {
+  return (
+    <div
+      className="flex items-center"
+      key={option.id}
+    >
+      <div className="w-1/3 text-[13px]">{option.name}</div>
+      <div className="w-2/3">
+        <InputRange
+          minValue={option.min}
+          maxValue={option.max}
+          step={option.step}
+          value={option.value}
+          onChange={value => option.commands?.(value)}
+          allowNumberEdit={true}
+          showAdjustmentArrows={false}
+          inputClassName="ml-1 w-4/5 cursor-pointer"
+        />
+      </div>
+    </div>
+  );
+};
+
+const renderRadioSetting = option => {
+  const renderButtons = option => {
+    return option.values?.map(({ label, value: optionValue }, index) => (
+      <button
+        onClick={() => {
+          option.commands?.(optionValue);
+        }}
+        key={`button-${option.id}-${index}`}
+      >
+        {label}
+      </button>
+    ));
+  };
+
+  return (
+    <div
+      className="flex items-center justify-between text-[13px]"
+      key={option.id}
+    >
+      <span>{option.name}</span>
+      <div className="max-w-1/2">
+        <ButtonGroup
+          className="border-secondary-light rounded-md border"
+          activeIndex={option.values.findIndex(({ value }) => value === option.value) || 0}
+        >
+          {renderButtons(option)}
+        </ButtonGroup>
+      </div>
+    </div>
+  );
+};
+
+const renderDoubleRangeSetting = option => {
+  return (
+    <div
+      className="flex w-full items-center"
+      key={option.id}
+    >
+      <InputDoubleRange
+        values={option.value}
+        onChange={option.commands}
+        minValue={option.min}
+        maxValue={option.max}
+        step={option.step}
+        showLabel={true}
+        allowNumberEdit={true}
+        showAdjustmentArrows={false}
+        containerClassName="w-full"
+      />
+    </div>
+  );
+};
+
+const renderCustomSetting = option => {
+  return (
+    <div key={option.id}>
+      {typeof option.children === 'function' ? option.children() : option.children}
+    </div>
+  );
+};
+
+export default ToolSettings;