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

@@ -9,6 +9,7 @@ interface InputDialogRowProps {
   iconColor?: string;
   placeholder?: string;
   default?: string | number;
+  disabled?: boolean;
   checked?: boolean;
   min?: number;
   max?: number;

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

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

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 />} />

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 && (

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 />

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;
 }