UNPKG

@kiwicom/orbit-components

Version:

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

github.com/kiwicom/orbit-components

kiwicom/orbit-components

125 lines (91 loc) • 7.55 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
# Stepper To implement Stepper component into your project you'll need to add the import: ```jsx import Stepper from "@kiwicom/orbit-components/lib/Stepper"; ``` After adding import into your project you can use it simply like: ```jsx <Stepper /> ``` ## Props Table below contains all types of the props available in Stepper component. | Name | Type | Default | Description | | :------------- | :-------------------------- | :------ | :---------------------------------------------------------------------------- | | dataTest | `string` | | Optional prop for testing purposes. | | defaultValue | `number` | `0` | Specifies the value of the Stepper. [See Functional specs](#functional-specs) | | disabled | `boolean` | `false` | If `true`, the Stepper will be disabled. | | maxValue | `number` | `∞` | Specifies the maximum value for the Stepper. | | minValue | `number` | `-∞` | Specifies the minimum value for the Stepper. | | name | `string` | | The name for the Stepper. | | onBlur | `event => void \| Promise` | | Function for handling onBlur event. | | onChange | `number => void \| Promise` | | Function for handling onClick event. | | onFocus | `event => void \| Promise` | | Function for handling onFocus event. | | step | `number` | `1` | Specifies the value of step to increment and decrement. | | titleDecrement | `string | (any => string)` | | Specifies `title` property on decrement `Button`. | | titleIncrement | `string | (any => string)` | | Specifies `title` property on increment `Button`. | ## Functional specs - The prop `defaultValue` sets up the default value when component mounts. If you need to get the current value of Stepper, use arrow function for it. The second parameter `name` is optional. The code may look like this: ```jsx <Stepper onChange={(value, name) => doSomething(value, name)} /> ``` # StepperStateless InputStepper offers a stateless version for your custom solutions. To use `StepperStateless` you'll need to add the import ```jsx import StepperStateless from "@kiwicom/orbit-components/lib/Stepper/StepperStateless"; ``` ## Props Table below contains all types of the props available in `StepperStateless` component. | Name | Type | Default | Description | | :---------------- | :-------------------------- | :------ | :---------------------------------------------------------------------------- | | dataTest | `string` | | Optional prop for testing purposes. | | defaultValue | `number` | `0` | Specifies the value of the Stepper. [See Functional specs](#functional-specs) | | disabled | `boolean` | `false` | If `true`, the Stepper will be disabled. | | disabledIncrement | `boolean` | | If `true`, the increment `Button` will be disabled. | | disabledDecrement | `boolean` | | If `true`, the decrement `Button` will be disabled. | | maxValue | `number` | `∞` | Specifies the maximum value for the Stepper. | | minValue | `number` | `-∞` | Specifies the minimum value for the Stepper. | | name | `string` | | The name for the Stepper. | | onBlur | `event => void \| Promise` | | Function for handling onBlur event. | | onChange | `number => void \| Promise` | | Function for handling onClick event. | | onDecrement | `event => void \| Promise` | | Function for handling decrement event.l | | onFocus | `event => void \| Promise` | | Function for handling onFocus event. | | onIncrement | `event => void \| Promise` | | Function for handling increment event. | | onKeyDown | `event => void \| Promise` | | Function for handling onKeyDown event present on input. | | step | `number` | `1` | Specifies the value of step to increment and decrement. | | titleDecrement | `string | (any => string)` | | Specifies `title` property on decrement `Button`. | | titleIncrement | `string | (any => string)` | | Specifies `title` property on increment `Button`. | | value | `number | string` | | Specifies the value of the StepperStateless. | ### Usage: ```jsx <StepperStateless value={"2 adults"} /> ``` ## Helper functions We provide you with helpers function for validation they can be imported like this: ```jsx import validateIncrement from "@kiwicom/orbit-components/lib/utils/validateIncrement"; import validateDecrement from "@kiwicom/orbit-components/lib/utils/validateDecrement"; ``` ### ValidateIncrement Helper function for validating increment. Can be used with Stateless Stepper to make custom validation easier. #### Arguments | Name | Type | Default | Description | | :------- | :------- | :------ | :--------------------------------------------------------- | | value | `number` | | Specifies the the current value. | | maxValue | `number` | `∞` | Specifies the maximum value for the InputStepperStateless. | | step | `number` | `1` | Specifies the value of step to increment and decrement. | #### Usage ```js validateIncrement({ value, maxValue, step }); ``` ### ValidateDecrement Helper function for validating decrement. Can be used with Stateless Stepper to make custom validation easier. #### Arguments | Name | Type | Default | Description | | :------- | :------- | :------ | :--------------------------------------------------------- | | value | `number` | | Specifies the the current value. | | minValue | `number` | `-∞` | Specifies the minimum value for the InputStepperStateless. | | step | `number` | `1` | Specifies the value of step to increment and decrement. | #### Usage ```js validateDecrement({ value, minValue, step }); ```