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 <[email protected]>
overextended · Oct 27, 2022 · 4f69c7c · 4f69c7c
1 parent 0d2c06e
commit 4f69c7c
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -7,19 +7,22 @@ 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 {
   type: 'select';
   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;
 }