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>
This commit is contained in:
davidxd33
2022-10-27 03:17:53 -04:00
committed by GitHub
parent 0d2c06e982
commit 4f69c7c5c1
7 changed files with 12 additions and 0 deletions

View File

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

View File

@@ -9,6 +9,7 @@ local input
---@field iconColor? string ---@field iconColor? string
---@field placeholder? string ---@field placeholder? string
---@field default? string | number ---@field default? string | number
---@field disabled? boolean
---@field checked? boolean ---@field checked? boolean
---@field min? number ---@field min? number
---@field max? number ---@field max? number

View File

@@ -29,6 +29,7 @@ const InputField: React.FC<Props> = (props) => {
placeholder={props.row.placeholder} placeholder={props.row.placeholder}
defaultValue={props.row.default} defaultValue={props.row.default}
type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'} type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
isDisabled={props.row.disabled}
/> />
{props.row.password && ( {props.row.password && (
<InputRightElement <InputRightElement

View File

@@ -31,6 +31,7 @@ const NumberField: React.FC<Props> = (props) => {
defaultValue={props.row.default} defaultValue={props.row.default}
min={props.row.min} min={props.row.min}
max={props.row.max} max={props.row.max}
isDisabled={props.row.disabled}
> >
{props.row.icon && ( {props.row.icon && (
<InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} /> <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />

View File

@@ -25,6 +25,8 @@ const SelectField: React.FC<Props> = (props) => {
<Select <Select
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => props.handleChange(e.target.value, props.index)} onChange={(e: React.ChangeEvent<HTMLSelectElement>) => props.handleChange(e.target.value, props.index)}
defaultValue={props.row.default || ''} defaultValue={props.row.default || ''}
isDisabled={props.row.disabled}
isReadOnly={props.row.readonly}
> >
{/* Hacky workaround for selectable placeholder issue */} {/* Hacky workaround for selectable placeholder issue */}
{!props.row.default && ( {!props.row.default && (

View File

@@ -26,6 +26,7 @@ const SliderField: React.FC<Props> = (props) => {
min={props.row.min} min={props.row.min}
max={props.row.max} max={props.row.max}
step={props.row.step} step={props.row.step}
isDisabled={props.row.disabled}
> >
<SliderTrack> <SliderTrack>
<SliderFilledTrack /> <SliderFilledTrack />

View File

@@ -7,12 +7,14 @@ export interface IInput {
default?: string; default?: string;
password?: boolean; password?: boolean;
icon?: IconProp; icon?: IconProp;
disabled?: boolean;
} }
export interface ICheckbox { export interface ICheckbox {
type: 'checkbox'; type: 'checkbox';
label: string; label: string;
checked?: boolean; checked?: boolean;
disabled?: boolean;
} }
export interface ISelect { export interface ISelect {
@@ -20,6 +22,7 @@ export interface ISelect {
label: string; label: string;
default?: string; default?: string;
options?: { value: string; label?: string }[]; options?: { value: string; label?: string }[];
disabled?: boolean;
} }
export interface INumber { export interface INumber {
@@ -30,6 +33,7 @@ export interface INumber {
icon?: IconProp; icon?: IconProp;
min?: number; min?: number;
max?: number; max?: number;
disabled?: boolean;
} }
export interface ISlider { export interface ISlider {
@@ -39,4 +43,5 @@ export interface ISlider {
min?: number; min?: number;
max?: number; max?: number;
step?: number; step?: number;
disabled?: boolean;
} }