Skip to content

Commit

Permalink
feat: add input props for checkbox input
Browse files Browse the repository at this point in the history
  • Loading branch information
@bocembocem
bocembocem committed Mar 21, 2024
1 parent 53dfa22 commit 1461a53
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 2 deletions.
11 changes: 11 additions & 0 deletions docs/input-props-map.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
## Supported input props map

| Config type | Config name | Storybook | Type | Original component |
| :---------- | :---------- | :----------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------- | :----------------------------------------------------------------------------- |
| `array` | `select` | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/array-select--select) | [MultiSelectProps](../src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx#L10) | https://github.com/gravity-ui/uikit/tree/main/src/components/Select |
| `boolean` | `base` | [Checkbox](https://preview.gravity-ui.com/dynamic-forms/?path=/story/boolean-base--base) | [CheckboxProps](../src/lib/kit/components/Inputs/Checkbox/Checkbox.tsx#L12) | https://github.com/gravity-ui/uikit/tree/main/src/components/Checkbox |
| `number` | `base` | [Text](https://preview.gravity-ui.com/dynamic-forms/?path=/story/number-base--base) | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9) | https://github.com/gravity-ui/uikit/tree/main/src/components/Text |
| `string` | `base` | [Text](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-base--base) | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9) | https://github.com/gravity-ui/uikit/tree/main/src/components/Text |
| `string` | `password` | [Text](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-password--password) | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9) | https://github.com/gravity-ui/uikit/tree/main/src/components/Text |
| `string` | `select` | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-select--select) | [SelectProps](../src/lib/kit/components/Inputs/Select/Select.tsx#L12) | https://github.com/gravity-ui/uikit/tree/main/src/components/Select |
| `string` | `textarea` | [TextArea](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-textarea--text-area) | [TextAreaProps](../src/lib/kit/components/Inputs/TextArea/TextArea.tsx#L7) | https://github.com/gravity-ui/uikit/tree/main/src/components/controls/TextArea |
4 changes: 4 additions & 0 deletions docs/spec.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
| viewSpec.addButtonPosition | `"down"/"right"` | | The location of the button adding a new element to the array. Default value "down". |
| viewSpec.hidden | `boolean` | | Hide field and view |
| viewSpec.selectParams | `object` | | [Parameters](#selectparams) additional options for the selector |
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |

### BooleanSpec

Expand All @@ -50,6 +51,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
| viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering |
| viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value |
| viewSpec.hidden | `boolean` | | Hide field and view |
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |

### NumberSpec

Expand All @@ -72,6 +74,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
| viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value |
| viewSpec.copy | `boolean` | | For `true`, will add a copy value button |
| viewSpec.hidden | `boolean` | | Hide field and view |
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |

### ObjectSpec

Expand Down Expand Up @@ -127,6 +130,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
| viewSpec.textContentParams | `object` | | [Parameters](#textcontentparams) that must be passed to text content |
| viewSpec.selectParams | `object` | | [Parameters](#selectparams) additional options for the selector |
| viewSpec.generateRandomValueButton | `boolean` | | Shows a button that allows you to generate a random value depending on the passed [function generateRandomValue](./lib.md#dynamicfield) |
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |

#### SizeParams

Expand Down
11 changes: 9 additions & 2 deletions src/lib/kit/components/Inputs/Checkbox/Checkbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import {Checkbox as CheckboxBase} from '@gravity-ui/uikit';
import {Checkbox as CheckboxBase, CheckboxProps as CheckboxBaseProps} from '@gravity-ui/uikit';

import {BooleanInput} from '../../../../core';
import {block} from '../../../utils';
Expand All @@ -9,7 +9,13 @@ import './Checkbox.scss';

const b = block('checkbox');

export const Checkbox: BooleanInput = ({name, input, spec}) => {
export interface CheckboxProps
extends Omit<
CheckboxBaseProps,
'checked' | 'onChange' | 'onBlur' | 'onFocus' | 'disabled' | 'qa'
> {}

export const Checkbox: BooleanInput<CheckboxProps> = ({name, input, spec, inputProps}) => {
const {value, onBlur, onChange, onFocus} = input;

const handleChange = React.useCallback(
Expand All @@ -20,6 +26,7 @@ export const Checkbox: BooleanInput = ({name, input, spec}) => {
return (
<div className={b()}>
<CheckboxBase
{...inputProps}
checked={value}
onChange={handleChange}
onBlur={onBlur}
Expand Down

0 comments on commit 1461a53

Please sign in to comment.