From 4f69c7c5c1b885731de325b13baa9207338afe15 Mon Sep 17 00:00:00 2001
From: davidxd33 <dponce116@gmail.com>
Date: Thu, 27 Oct 2022 03:17:53 -0400
Subject: [PATCH] feat(interface/dialog): disabled row property (#142)

* feat(interface/dialog): readonly, disabled flags

* Update TS prop types

* refactor(web/input): remove read only property

Co-authored-by: davidxd33 <dponce@gmail.com>
---
 package/client/resource/interface/input.ts    | 1 +
 resource/interface/client/input.lua           | 1 +
 web/src/features/dialog/components/input.tsx  | 1 +
 web/src/features/dialog/components/number.tsx | 1 +
 web/src/features/dialog/components/select.tsx | 2 ++
 web/src/features/dialog/components/slider.tsx | 1 +
 web/src/interfaces/dialog.ts                  | 5 +++++
 7 files changed, 12 insertions(+)

diff --git a/package/client/resource/interface/input.ts b/package/client/resource/interface/input.ts
index 9455636..9226cd7 100644
--- a/package/client/resource/interface/input.ts
+++ b/package/client/resource/interface/input.ts
@@ -9,6 +9,7 @@ interface InputDialogRowProps {
   iconColor?: string;
   placeholder?: string;
   default?: string | number;
+  disabled?: boolean;
   checked?: boolean;
   min?: number;
   max?: number;
diff --git a/resource/interface/client/input.lua b/resource/interface/client/input.lua
index 2491138..b84e703 100644
--- a/resource/interface/client/input.lua
+++ b/resource/interface/client/input.lua
@@ -9,6 +9,7 @@ local input
 ---@field iconColor? string
 ---@field placeholder? string
 ---@field default? string | number
+---@field disabled? boolean
 ---@field checked? boolean
 ---@field min? number
 ---@field max? number
diff --git a/web/src/features/dialog/components/input.tsx b/web/src/features/dialog/components/input.tsx
index 2ecfc4e..09de9dd 100644
--- a/web/src/features/dialog/components/input.tsx
+++ b/web/src/features/dialog/components/input.tsx
@@ -29,6 +29,7 @@ const InputField: React.FC<Props> = (props) => {
             placeholder={props.row.placeholder}
             defaultValue={props.row.default}
             type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
+            isDisabled={props.row.disabled}
           />
           {props.row.password && (
             <InputRightElement
diff --git a/web/src/features/dialog/components/number.tsx b/web/src/features/dialog/components/number.tsx
index a8c758c..20a9cfb 100644
--- a/web/src/features/dialog/components/number.tsx
+++ b/web/src/features/dialog/components/number.tsx
@@ -31,6 +31,7 @@ const NumberField: React.FC<Props> = (props) => {
         defaultValue={props.row.default}
         min={props.row.min}
         max={props.row.max}
+        isDisabled={props.row.disabled}
       >
         {props.row.icon && (
           <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
diff --git a/web/src/features/dialog/components/select.tsx b/web/src/features/dialog/components/select.tsx
index 513ec28..733babf 100644
--- a/web/src/features/dialog/components/select.tsx
+++ b/web/src/features/dialog/components/select.tsx
@@ -25,6 +25,8 @@ const SelectField: React.FC<Props> = (props) => {
         <Select
           onChange={(e: React.ChangeEvent<HTMLSelectElement>) => props.handleChange(e.target.value, props.index)}
           defaultValue={props.row.default || ''}
+          isDisabled={props.row.disabled}
+          isReadOnly={props.row.readonly}
         >
           {/* Hacky workaround for selectable placeholder issue */}
           {!props.row.default && (
diff --git a/web/src/features/dialog/components/slider.tsx b/web/src/features/dialog/components/slider.tsx
index ef478a1..68a6831 100644
--- a/web/src/features/dialog/components/slider.tsx
+++ b/web/src/features/dialog/components/slider.tsx
@@ -26,6 +26,7 @@ const SliderField: React.FC<Props> = (props) => {
           min={props.row.min}
           max={props.row.max}
           step={props.row.step}
+          isDisabled={props.row.disabled}
         >
           <SliderTrack>
             <SliderFilledTrack />
diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts
index 90d5666..1f71161 100644
--- a/web/src/interfaces/dialog.ts
+++ b/web/src/interfaces/dialog.ts
@@ -7,12 +7,14 @@ export interface IInput {
   default?: string;
   password?: boolean;
   icon?: IconProp;
+  disabled?: boolean;
 }
 
 export interface ICheckbox {
   type: 'checkbox';
   label: string;
   checked?: boolean;
+  disabled?: boolean;
 }
 
 export interface ISelect {
@@ -20,6 +22,7 @@ export interface ISelect {
   label: string;
   default?: string;
   options?: { value: string; label?: string }[];
+  disabled?: boolean;
 }
 
 export interface INumber {
@@ -30,6 +33,7 @@ export interface INumber {
   icon?: IconProp;
   min?: number;
   max?: number;
+  disabled?: boolean;
 }
 
 export interface ISlider {
@@ -39,4 +43,5 @@ export interface ISlider {
   min?: number;
   max?: number;
   step?: number;
+  disabled?: boolean;
 }