Skip to content

Commit b91027a

Browse files
Arucard89Arucard89
authored
feat(Relative components): Add description in README (#48)
1 parent 5ca3521 commit b91027a

File tree

4 files changed

+162
-2
lines changed

4 files changed

+162
-2
lines changed

‎src/components/DateField/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -363,7 +363,7 @@ LANDING_BLOCK-->
363363
| className | The control's wrapper class name | `string` | |
364364
| defaultValue | Sets the initial value for uncontrolled component. | `DateTime` | |
365365
| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` |
366-
| errorMessage | Error text | `string` | |
366+
| errorMessage | Error text | `ReactNode` | |
367367
| format | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) | `string` | |
368368
| hasClear | Shows the icon for clearing control's value | `boolean` | `false` |
369369
| id | The control's `id` attribute | `string` | |

‎src/components/DatePicker/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ LANDING_BLOCK-->
331331
| className | The control's wrapper class name | `string` | |
332332
| [defaultValue](#datepicker) | Sets the initial value for uncontrolled component. | `DateTime` | |
333333
| [disabled](#disabled) | Indicates that the user cannot interact with the control | `boolean` | `false` |
334-
| [errorMessage](#error) | Error text | `string` | |
334+
| [errorMessage](#error) | Error text | `ReactNode` | |
335335
| [format](#format) | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) | `string` | |
336336
| [hasClear](#clear-button) | Shows the icon for clearing control's value | `boolean` | `false` |
337337
| id | The control's `id` attribute | `string` | |

‎src/components/RelativeDateField/README.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!--GITHUB_BLOCK-->
2+
3+
# RelativeDateField
4+
5+
<!--/GITHUB_BLOCK-->
6+
7+
```tsx
8+
import {RelativeDateField} from '@gravity-ui/date-components';
9+
```
10+
11+
`RelativeDateField` component is used only for entering relative dates. It can't be used as "normal" `DateField`.
12+
13+
## Relative input
14+
15+
The component get values in special relative format. You set values as formulas which will help you to compute the exact date. We can call it `grafana-like format` because it is very similar to format of Grafana's relative time fields. To know more about relative time values in Grafana read [the docs](https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/).
16+
17+
Using this mode you can deliver your data from source to destination and compute the exact value straight on the necessary endpoit without inaccuracy.
18+
19+
## Valid input rules
20+
21+
- a value should starts from keyword `now`
22+
- relative date expression in common looks like: `now${operand}${count}${unit}`
23+
- available values for `operand`:
24+
- `-` - subtraction
25+
- `+` - addition
26+
- `/` - bringing to the start of the `unit`
27+
- valid values of `count` - any natural number
28+
- valid values of `unit`:
29+
- `d` - day
30+
- `w` - week
31+
- `M` - month
32+
- `Q` - quarter
33+
- `y` - year
34+
- `h` - hour
35+
- `m` - minute
36+
37+
### Examples of usage
38+
39+
> `now-1d`
40+
>
41+
> `now/w`
42+
>
43+
> `now+10d-5d/M`
44+
45+
## Properties
46+
47+
| Name | Description | Type | Default |
48+
| :--------------- | :------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-------------: |
49+
| aria-describedby | The control's `aria-describedby` attribute | `string` | |
50+
| aria-details | The control's `aria-details` attribute | `string` | |
51+
| aria-label | The control's `aria-label` attribute | `string` | |
52+
| aria-labelledby | The control's `aria-labelledby` attribute | `string` | |
53+
| autoFocus | The control's `autofocus` attribute | `boolean` | |
54+
| className | The control's wrapper class name | `string` | |
55+
| defaultValue | Sets the initial value for uncontrolled component. | `string` | |
56+
| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` |
57+
| errorMessage | Error text | `ReactNode` | |
58+
| hasClear | Shows the icon for clearing control's value | `boolean` | `false` |
59+
| hasTime | Show time field in popupvalue | `boolean` | `false` |
60+
| id | The control's `id` attribute | `string` | |
61+
| label | Help text rendered to the left of the input node | `string` | |
62+
| leftContent | The user`s node rendered before label and input | `React.ReactNode` | |
63+
| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `((e: FocusEvent<Element, Element>) => void)` | |
64+
| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `((e: FocusEvent<Element, Element>) => void)` | |
65+
| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `((e: KeyboardEvent<Element>) => void)` | |
66+
| onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `((e: KeyboardEvent<Element>) => void)` | |
67+
| onUpdate | Fires when the value is changed by the user. Provides new value as an callback's argument | `((value: string \| null) => void` | |
68+
| pin | Corner rounding | `string` | `'round-round'` |
69+
| placeholder | Text that appears in the control when it has no value set | `string` | |
70+
| readOnly | Whether the component's value is immutable. | `boolean` | `false` |
71+
| rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | |
72+
| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
73+
| style | Sets inline style for the element. | `CSSProperties` | |
74+
| timeZone | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) | `string` | |
75+
| validationState | Validation state | `"invalid"` | |
76+
| value | The value of the control | `string` `null` | |
77+
| view | The view of the control | `"normal"` `"clear"` | `"normal"` |

0 commit comments

Comments
 (0)