generated from gravity-ui/package-example
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Relative components): Add description in README (#48)
- Loading branch information
Showing
4 changed files
with
162 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <!--GITHUB_BLOCK--> | ||
|
|
||
| # RelativeDateField | ||
|
|
||
| <!--/GITHUB_BLOCK--> | ||
|
|
||
| ```tsx | ||
| import {RelativeDateField} from '@gravity-ui/date-components'; | ||
| ``` | ||
|
|
||
| `RelativeDateField` component is used only for entering relative dates. It can't be used as "normal" `DateField`. | ||
|
|
||
| ## Relative input | ||
|
|
||
| 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/). | ||
|
|
||
| Using this mode you can deliver your data from source to destination and compute the exact value straight on the necessary endpoit without inaccuracy. | ||
|
|
||
| ## Valid input rules | ||
|
|
||
| - a value should starts from keyword `now` | ||
| - relative date expression in common looks like: `now${operand}${count}${unit}` | ||
| - available values for `operand`: | ||
| - `-` - subtraction | ||
| - `+` - addition | ||
| - `/` - bringing to the start of the `unit` | ||
| - valid values of `count` - any natural number | ||
| - valid values of `unit`: | ||
| - `d` - day | ||
| - `w` - week | ||
| - `M` - month | ||
| - `Q` - quarter | ||
| - `y` - year | ||
| - `h` - hour | ||
| - `m` - minute | ||
|
|
||
| ### Examples of usage | ||
|
|
||
| > `now-1d` | ||
| > | ||
| > `now/w` | ||
| > | ||
| > `now+10d-5d/M` | ||
| ## Properties | ||
|
|
||
| | Name | Description | Type | Default | | ||
| | :--------------- | :------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-------------: | | ||
| | aria-describedby | The control's `aria-describedby` attribute | `string` | | | ||
| | aria-details | The control's `aria-details` attribute | `string` | | | ||
| | aria-label | The control's `aria-label` attribute | `string` | | | ||
| | aria-labelledby | The control's `aria-labelledby` attribute | `string` | | | ||
| | autoFocus | The control's `autofocus` attribute | `boolean` | | | ||
| | className | The control's wrapper class name | `string` | | | ||
| | defaultValue | Sets the initial value for uncontrolled component. | `string` | | | ||
| | disabled | Indicates that the user cannot interact with the control | `boolean` | `false` | | ||
| | errorMessage | Error text | `ReactNode` | | | ||
| | hasClear | Shows the icon for clearing control's value | `boolean` | `false` | | ||
| | hasTime | Show time field in popupvalue | `boolean` | `false` | | ||
| | id | The control's `id` attribute | `string` | | | ||
| | label | Help text rendered to the left of the input node | `string` | | | ||
| | leftContent | The user`s node rendered before label and input | `React.ReactNode` | | | ||
| | onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `((e: FocusEvent<Element, Element>) => void)` | | | ||
| | onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `((e: FocusEvent<Element, Element>) => void)` | | | ||
| | onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `((e: KeyboardEvent<Element>) => void)` | | | ||
| | onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `((e: KeyboardEvent<Element>) => void)` | | | ||
| | onUpdate | Fires when the value is changed by the user. Provides new value as an callback's argument | `((value: string \| null) => void` | | | ||
| | pin | Corner rounding | `string` | `'round-round'` | | ||
| | placeholder | Text that appears in the control when it has no value set | `string` | | | ||
| | readOnly | Whether the component's value is immutable. | `boolean` | `false` | | ||
| | rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | | | ||
| | size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` | | ||
| | style | Sets inline style for the element. | `CSSProperties` | | | ||
| | timeZone | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) | `string` | | | ||
| | validationState | Validation state | `"invalid"` | | | ||
| | value | The value of the control | `string` `null` | | | ||
| | view | The view of the control | `"normal"` `"clear"` | `"normal"` | |
Oops, something went wrong.