@gympass/yoga 7.59.0 → 7.60.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Card/web/PlanCard/Content.js +11 -6
- package/cjs/Drawer/web/Content.js +1 -4
- package/esm/Card/web/PlanCard/Content.js +11 -6
- package/esm/Drawer/web/Content.js +1 -4
- package/package.json +5 -5
- package/cjs/ActionRequirement/native/ActionRequirement.test.js +0 -1
- package/cjs/ActionRequirement/web/ActionRequirement.test.js +0 -40
- package/cjs/AutoComplete/web/AutoComplete.test.js +0 -156
- package/cjs/Avatar/native/Avatar.test.js +0 -1
- package/cjs/Avatar/web/Avatar.test.js +0 -72
- package/cjs/Banner/native/Banner.test.js +0 -1
- package/cjs/Banner/web/Banner.test.js +0 -121
- package/cjs/BottomSheet/web/BottomSheet.test.js +0 -61
- package/cjs/Box/native/Box.test.js +0 -1
- package/cjs/Box/web/Box.test.js +0 -23
- package/cjs/Button/native/Button.test.js +0 -1
- package/cjs/Button/web/Button.test.js +0 -778
- package/cjs/Card/native/Card/Card.test.js +0 -1
- package/cjs/Card/native/EventCard/EventCard.test.js +0 -1
- package/cjs/Card/native/GymCard/CheckIn/CheckIn.test.js +0 -1
- package/cjs/Card/native/PlanCard/PlanCard.test.js +0 -1
- package/cjs/Card/web/Card/Card.test.js +0 -22
- package/cjs/Card/web/EventCard/EventCard.test.js +0 -35
- package/cjs/Card/web/PlanCard/PlanCard.test.js +0 -95
- package/cjs/Checkbox/native/Checkbox.test.js +0 -1
- package/cjs/Checkbox/native/Switch.test.js +0 -1
- package/cjs/Checkbox/web/Checkbox.test.js +0 -161
- package/cjs/Checkbox/web/Switch.test.js +0 -65
- package/cjs/Chips/native/Chips.test.js +0 -1
- package/cjs/Chips/web/Chips.test.js +0 -138
- package/cjs/Datepicker/web/Datepicker.test.js +0 -286
- package/cjs/Dialog/web/Dialog.test.js +0 -78
- package/cjs/Divider/native/Divider.test.js +0 -1
- package/cjs/Divider/web/Divider.test.js +0 -36
- package/cjs/Drawer/web/Drawer.test.js +0 -46
- package/cjs/Dropdown/native/Backdrop.test.js +0 -1
- package/cjs/Dropdown/native/Dropdown.test.js +0 -1
- package/cjs/Dropdown/web/Dropdown.test.js +0 -102
- package/cjs/Feedback/web/Feedback.test.js +0 -89
- package/cjs/Grid/web/Col.test.js +0 -56
- package/cjs/Grid/web/Container.test.js +0 -22
- package/cjs/Grid/web/Hide.test.js +0 -39
- package/cjs/Grid/web/Row.test.js +0 -22
- package/cjs/Header/web/Header.test.js +0 -49
- package/cjs/Heading/web/Heading.test.js +0 -68
- package/cjs/Icon/native/Icon.test.js +0 -1
- package/cjs/Icon/web/Icon.test.js +0 -53
- package/cjs/Input/native/Email.test.js +0 -1
- package/cjs/Input/native/Input.test.js +0 -1
- package/cjs/Input/native/Number.test.js +0 -1
- package/cjs/Input/native/Password.test.js +0 -1
- package/cjs/Input/native/Tel.test.js +0 -1
- package/cjs/Input/web/Email.test.js +0 -20
- package/cjs/Input/web/Input.test.js +0 -161
- package/cjs/Input/web/Number.test.js +0 -20
- package/cjs/Input/web/Password.test.js +0 -103
- package/cjs/Input/web/Tel.test.js +0 -20
- package/cjs/List/native/List.test.js +0 -1
- package/cjs/List/web/List.test.js +0 -69
- package/cjs/Menu/web/Menu.test.js +0 -123
- package/cjs/Popover/web/Popover.test.js +0 -27
- package/cjs/Progress/native/Progress.test.js +0 -1
- package/cjs/Progress/web/Progress.test.js +0 -229
- package/cjs/RadioGroup/native/Button/RadioButton.test.js +0 -1
- package/cjs/RadioGroup/native/Radio/Radio.test.js +0 -1
- package/cjs/RadioGroup/native/RadioGroup.test.js +0 -1
- package/cjs/RadioGroup/web/Button/RadioButton.test.js +0 -132
- package/cjs/RadioGroup/web/Radio/Radio.test.js +0 -119
- package/cjs/RadioGroup/web/RadioGroup.test.js +0 -93
- package/cjs/Rating/native/Rating.test.js +0 -1
- package/cjs/Rating/web/Rating.test.js +0 -201
- package/cjs/Result/native/Result.test.js +0 -1
- package/cjs/Skeleton/native/Skeleton.test.js +0 -1
- package/cjs/Skeleton/web/Skeleton.test.js +0 -84
- package/cjs/Slider/native/Slider.test.js +0 -1
- package/cjs/Slider/web/Slider.test.js +0 -95
- package/cjs/Snackbar/native/Snackbar.test.js +0 -1
- package/cjs/Snackbar/web/Snackbar.test.js +0 -137
- package/cjs/Stepper/native/Stepper.test.js +0 -1
- package/cjs/Stepper/web/Stepper.test.js +0 -75
- package/cjs/Tag/native/Tag.test.js +0 -1
- package/cjs/Tag/web/Tag.test.js +0 -87
- package/cjs/Text/native/Text.test.js +0 -1
- package/cjs/Text/web/Text.test.js +0 -157
- package/cjs/TextArea/native/TextArea.test.js +0 -1
- package/cjs/TextArea/web/TextArea.test.js +0 -18
- package/cjs/Theme/Provider/web/FontLoader.test.js +0 -19
- package/cjs/Theme/Provider/web/GlobalStyle.test.js +0 -27
- package/cjs/Theme/helpers/themeReader/native/native.test.js +0 -1
- package/cjs/Theme/helpers/themeReader/web/web.test.js +0 -54
- package/esm/ActionRequirement/index.native.js +0 -2
- package/esm/ActionRequirement/native/ActionRequirement.js +0 -48
- package/esm/ActionRequirement/native/ActionRequirement.test.js +0 -45
- package/esm/ActionRequirement/native/ActionRequirementStyles.js +0 -25
- package/esm/ActionRequirement/native/index.js +0 -6
- package/esm/ActionRequirement/web/ActionRequirement.test.js +0 -31
- package/esm/AutoComplete/web/AutoComplete.test.js +0 -139
- package/esm/Avatar/index.native.js +0 -4
- package/esm/Avatar/native/Avatar.js +0 -96
- package/esm/Avatar/native/Avatar.test.js +0 -46
- package/esm/Avatar/native/AvatarCircle.js +0 -24
- package/esm/Avatar/web/Avatar.test.js +0 -63
- package/esm/Banner/index.native.js +0 -2
- package/esm/Banner/native/Banner.js +0 -128
- package/esm/Banner/native/Banner.test.js +0 -103
- package/esm/Banner/native/index.js +0 -2
- package/esm/Banner/web/Banner.test.js +0 -109
- package/esm/BottomSheet/web/BottomSheet.test.js +0 -48
- package/esm/Box/index.native.js +0 -2
- package/esm/Box/native/Box.js +0 -4
- package/esm/Box/native/Box.test.js +0 -16
- package/esm/Box/native/index.js +0 -2
- package/esm/Box/web/Box.test.js +0 -16
- package/esm/Button/index.native.js +0 -8
- package/esm/Button/native/Button.js +0 -110
- package/esm/Button/native/Button.test.js +0 -475
- package/esm/Button/native/Icon.js +0 -82
- package/esm/Button/native/Link.js +0 -35
- package/esm/Button/native/Text.js +0 -74
- package/esm/Button/native/withTouchable.js +0 -63
- package/esm/Button/web/Button.test.js +0 -764
- package/esm/Card/index.native.js +0 -2
- package/esm/Card/native/Card/Actions.js +0 -12
- package/esm/Card/native/Card/Card.js +0 -92
- package/esm/Card/native/Card/Card.test.js +0 -15
- package/esm/Card/native/Card/Content.js +0 -8
- package/esm/Card/native/Card/Header.js +0 -8
- package/esm/Card/native/Card/index.js +0 -8
- package/esm/Card/native/EventCard/EventCard.js +0 -169
- package/esm/Card/native/EventCard/EventCard.test.js +0 -65
- package/esm/Card/native/EventCard/index.js +0 -2
- package/esm/Card/native/GymCard/CheckIn/Avatar.js +0 -17
- package/esm/Card/native/GymCard/CheckIn/CheckIn.js +0 -66
- package/esm/Card/native/GymCard/CheckIn/CheckIn.test.js +0 -39
- package/esm/Card/native/GymCard/CheckIn/Content.js +0 -11
- package/esm/Card/native/GymCard/CheckIn/Header.js +0 -11
- package/esm/Card/native/GymCard/CheckIn/index.js +0 -2
- package/esm/Card/native/GymCard/index.js +0 -5
- package/esm/Card/native/PlanCard/Actions.js +0 -22
- package/esm/Card/native/PlanCard/Content.js +0 -75
- package/esm/Card/native/PlanCard/List.js +0 -73
- package/esm/Card/native/PlanCard/PlanCard.js +0 -51
- package/esm/Card/native/PlanCard/PlanCard.test.js +0 -84
- package/esm/Card/native/PlanCard/Subtitle.js +0 -15
- package/esm/Card/native/PlanCard/Tag.js +0 -34
- package/esm/Card/native/PlanCard/index.js +0 -15
- package/esm/Card/native/index.js +0 -5
- package/esm/Card/web/Card/Card.test.js +0 -14
- package/esm/Card/web/EventCard/EventCard.test.js +0 -27
- package/esm/Card/web/PlanCard/PlanCard.test.js +0 -85
- package/esm/Checkbox/index.native.js +0 -3
- package/esm/Checkbox/native/Checkbox.js +0 -179
- package/esm/Checkbox/native/Checkbox.test.js +0 -115
- package/esm/Checkbox/native/Switch.js +0 -115
- package/esm/Checkbox/native/Switch.test.js +0 -54
- package/esm/Checkbox/native/index.js +0 -3
- package/esm/Checkbox/web/Checkbox.test.js +0 -153
- package/esm/Checkbox/web/Switch.test.js +0 -56
- package/esm/Chips/index.native.js +0 -2
- package/esm/Chips/native/Chips.js +0 -104
- package/esm/Chips/native/Chips.test.js +0 -143
- package/esm/Chips/native/Counter.js +0 -20
- package/esm/Chips/native/index.js +0 -2
- package/esm/Chips/web/Chips.test.js +0 -128
- package/esm/Datepicker/web/Datepicker.test.js +0 -247
- package/esm/Dialog/web/Dialog.test.js +0 -62
- package/esm/Divider/index.native.js +0 -2
- package/esm/Divider/native/Divider.js +0 -29
- package/esm/Divider/native/Divider.test.js +0 -29
- package/esm/Divider/native/index.js +0 -2
- package/esm/Divider/web/Divider.test.js +0 -29
- package/esm/Drawer/web/Drawer.test.js +0 -33
- package/esm/Dropdown/index.native.js +0 -2
- package/esm/Dropdown/native/Backdrop.js +0 -93
- package/esm/Dropdown/native/Backdrop.test.js +0 -26
- package/esm/Dropdown/native/Dropdown.js +0 -142
- package/esm/Dropdown/native/Dropdown.test.js +0 -78
- package/esm/Dropdown/native/Options.android.js +0 -66
- package/esm/Dropdown/native/Options.ios.js +0 -71
- package/esm/Dropdown/native/index.js +0 -2
- package/esm/Dropdown/web/Dropdown.test.js +0 -93
- package/esm/Feedback/web/Feedback.test.js +0 -83
- package/esm/Grid/web/Col.test.js +0 -48
- package/esm/Grid/web/Container.test.js +0 -14
- package/esm/Grid/web/Hide.test.js +0 -31
- package/esm/Grid/web/Row.test.js +0 -14
- package/esm/Header/web/Header.test.js +0 -38
- package/esm/Heading/web/Heading.test.js +0 -58
- package/esm/Icon/index.native.js +0 -2
- package/esm/Icon/native/Icon.test.js +0 -47
- package/esm/Icon/native/index.js +0 -2
- package/esm/Icon/web/Icon.test.js +0 -47
- package/esm/Input/index.native.js +0 -6
- package/esm/Input/native/Email.js +0 -15
- package/esm/Input/native/Email.test.js +0 -13
- package/esm/Input/native/Helper.js +0 -62
- package/esm/Input/native/Input.js +0 -234
- package/esm/Input/native/Input.test.js +0 -181
- package/esm/Input/native/Number.js +0 -12
- package/esm/Input/native/Number.test.js +0 -13
- package/esm/Input/native/Password.js +0 -112
- package/esm/Input/native/Password.test.js +0 -125
- package/esm/Input/native/Tel.js +0 -14
- package/esm/Input/native/Tel.test.js +0 -13
- package/esm/Input/native/index.js +0 -6
- package/esm/Input/web/Email.test.js +0 -13
- package/esm/Input/web/Input.test.js +0 -145
- package/esm/Input/web/Number.test.js +0 -13
- package/esm/Input/web/Password.test.js +0 -90
- package/esm/Input/web/Tel.test.js +0 -13
- package/esm/List/index.native.js +0 -3
- package/esm/List/native/List.js +0 -22
- package/esm/List/native/List.test.js +0 -106
- package/esm/List/native/ListItem.js +0 -51
- package/esm/List/native/index.js +0 -3
- package/esm/List/web/List.test.js +0 -62
- package/esm/Menu/web/Menu.test.js +0 -115
- package/esm/Popover/web/Popover.test.js +0 -19
- package/esm/Progress/index.native.js +0 -2
- package/esm/Progress/native/Progress.js +0 -103
- package/esm/Progress/native/Progress.test.js +0 -222
- package/esm/Progress/native/index.js +0 -2
- package/esm/Progress/web/Progress.test.js +0 -222
- package/esm/RadioGroup/index.native.js +0 -4
- package/esm/RadioGroup/native/Button/RadioButton.js +0 -64
- package/esm/RadioGroup/native/Button/RadioButton.test.js +0 -96
- package/esm/RadioGroup/native/Radio/Radio.js +0 -88
- package/esm/RadioGroup/native/Radio/Radio.test.js +0 -112
- package/esm/RadioGroup/native/RadioGroup.js +0 -66
- package/esm/RadioGroup/native/RadioGroup.test.js +0 -50
- package/esm/RadioGroup/native/index.js +0 -4
- package/esm/RadioGroup/web/Button/RadioButton.test.js +0 -121
- package/esm/RadioGroup/web/Radio/Radio.test.js +0 -108
- package/esm/RadioGroup/web/RadioGroup.test.js +0 -83
- package/esm/Rating/index.native.js +0 -2
- package/esm/Rating/native/Rating.js +0 -186
- package/esm/Rating/native/Rating.test.js +0 -121
- package/esm/Rating/native/index.js +0 -2
- package/esm/Rating/web/Rating.test.js +0 -184
- package/esm/Result/index.native.js +0 -8
- package/esm/Result/native/Attendances.js +0 -55
- package/esm/Result/native/Details.js +0 -97
- package/esm/Result/native/Rate.js +0 -35
- package/esm/Result/native/Result.js +0 -86
- package/esm/Result/native/Result.test.js +0 -107
- package/esm/Result/native/ResultButton.js +0 -13
- package/esm/Result/native/Tags.js +0 -41
- package/esm/Result/native/TinyTextIcon.js +0 -18
- package/esm/Result/native/index.js +0 -2
- package/esm/Skeleton/index.native.js +0 -2
- package/esm/Skeleton/native/Skeleton.js +0 -94
- package/esm/Skeleton/native/Skeleton.test.js +0 -78
- package/esm/Skeleton/native/index.js +0 -2
- package/esm/Skeleton/web/Skeleton.test.js +0 -77
- package/esm/Slider/index.native.js +0 -2
- package/esm/Slider/native/Label.js +0 -19
- package/esm/Slider/native/Marker.js +0 -68
- package/esm/Slider/native/Slider.js +0 -156
- package/esm/Slider/native/Slider.test.js +0 -122
- package/esm/Slider/native/Step.js +0 -14
- package/esm/Slider/native/Tooltip.js +0 -90
- package/esm/Slider/web/Slider.test.js +0 -86
- package/esm/Snackbar/index.native.js +0 -2
- package/esm/Snackbar/native/Snackbar.js +0 -199
- package/esm/Snackbar/native/Snackbar.test.js +0 -100
- package/esm/Snackbar/native/SnackbarAnimationWrapper.js +0 -124
- package/esm/Snackbar/native/index.js +0 -2
- package/esm/Snackbar/web/Snackbar.test.js +0 -118
- package/esm/Stepper/index.native.js +0 -3
- package/esm/Stepper/native/Dots.js +0 -45
- package/esm/Stepper/native/Line.js +0 -35
- package/esm/Stepper/native/Step.js +0 -19
- package/esm/Stepper/native/Stepper.js +0 -52
- package/esm/Stepper/native/Stepper.test.js +0 -70
- package/esm/Stepper/native/index.js +0 -3
- package/esm/Stepper/web/Stepper.test.js +0 -67
- package/esm/Tag/index.native.js +0 -4
- package/esm/Tag/native/Informative.js +0 -72
- package/esm/Tag/native/Tag.js +0 -75
- package/esm/Tag/native/Tag.test.js +0 -94
- package/esm/Tag/native/index.js +0 -2
- package/esm/Tag/web/Tag.test.js +0 -79
- package/esm/Text/index.native.js +0 -16
- package/esm/Text/native/Text.js +0 -69
- package/esm/Text/native/Text.test.js +0 -149
- package/esm/Text/native/index.js +0 -2
- package/esm/Text/web/Text.test.js +0 -149
- package/esm/TextArea/index.native.js +0 -2
- package/esm/TextArea/native/TextArea.js +0 -59
- package/esm/TextArea/native/TextArea.test.js +0 -11
- package/esm/TextArea/native/index.js +0 -2
- package/esm/TextArea/web/TextArea.test.js +0 -11
- package/esm/Theme/Provider/index.native.js +0 -2
- package/esm/Theme/Provider/native/index.js +0 -2
- package/esm/Theme/Provider/web/FontLoader.test.js +0 -11
- package/esm/Theme/Provider/web/GlobalStyle.test.js +0 -17
- package/esm/Theme/helpers/themeReader/native/native.test.js +0 -53
- package/esm/Theme/helpers/themeReader/web/web.test.js +0 -41
- package/esm/Theme/index.native.js +0 -5
- package/esm/index.native.js +0 -26
- package/esm/shared/index.native.js +0 -2
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render } from '@testing-library/react';
|
|
3
|
-
import { ThemeProvider, Skeleton } from '../..';
|
|
4
|
-
describe('<Skeleton />', function () {
|
|
5
|
-
it('should render the circular skeleton', function () {
|
|
6
|
-
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
7
|
-
type: "circular",
|
|
8
|
-
width: 64,
|
|
9
|
-
height: 64
|
|
10
|
-
}))),
|
|
11
|
-
container = _render.container;
|
|
12
|
-
|
|
13
|
-
expect(container).toMatchSnapshot();
|
|
14
|
-
});
|
|
15
|
-
it('should render the rectangular skeleton', function () {
|
|
16
|
-
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
17
|
-
type: "rectangular",
|
|
18
|
-
width: 400,
|
|
19
|
-
height: 200
|
|
20
|
-
}))),
|
|
21
|
-
container = _render2.container;
|
|
22
|
-
|
|
23
|
-
expect(container).toMatchSnapshot();
|
|
24
|
-
});
|
|
25
|
-
it('should render the text skeleton', function () {
|
|
26
|
-
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
27
|
-
type: "text",
|
|
28
|
-
variant: "body1",
|
|
29
|
-
width: 61
|
|
30
|
-
}))),
|
|
31
|
-
container = _render3.container;
|
|
32
|
-
|
|
33
|
-
expect(container).toMatchSnapshot();
|
|
34
|
-
});
|
|
35
|
-
it('should render all text skeleton variants correctly', function () {
|
|
36
|
-
var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
37
|
-
type: "text",
|
|
38
|
-
variant: "h1",
|
|
39
|
-
width: "100"
|
|
40
|
-
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
41
|
-
type: "text",
|
|
42
|
-
variant: "h2",
|
|
43
|
-
width: "100"
|
|
44
|
-
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
45
|
-
type: "text",
|
|
46
|
-
variant: "h3",
|
|
47
|
-
width: "100"
|
|
48
|
-
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
49
|
-
type: "text",
|
|
50
|
-
variant: "h4",
|
|
51
|
-
width: "100"
|
|
52
|
-
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
53
|
-
type: "text",
|
|
54
|
-
variant: "h5",
|
|
55
|
-
width: "100"
|
|
56
|
-
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
57
|
-
type: "text",
|
|
58
|
-
variant: "body1",
|
|
59
|
-
width: "100"
|
|
60
|
-
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
61
|
-
type: "text",
|
|
62
|
-
variant: "body2",
|
|
63
|
-
width: "100"
|
|
64
|
-
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
65
|
-
type: "text",
|
|
66
|
-
variant: "overline",
|
|
67
|
-
width: "100"
|
|
68
|
-
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
69
|
-
type: "text",
|
|
70
|
-
variant: "exception",
|
|
71
|
-
width: "100"
|
|
72
|
-
}))),
|
|
73
|
-
container = _render4.container;
|
|
74
|
-
|
|
75
|
-
expect(container).toMatchSnapshot();
|
|
76
|
-
});
|
|
77
|
-
});
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
var _templateObject;
|
|
2
|
-
|
|
3
|
-
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
4
|
-
|
|
5
|
-
import styled from 'styled-components';
|
|
6
|
-
import { oneOf } from 'prop-types';
|
|
7
|
-
var LabelView = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
8
|
-
var LabelText = styled.Text(function (_ref) {
|
|
9
|
-
var placement = _ref.placement,
|
|
10
|
-
baseFont = _ref.theme.yoga.baseFont;
|
|
11
|
-
return "\n position: relative;\n bottom: 5;\n left: " + (placement === 'left' ? -8 : 0) + "px;\n\n font-family: " + baseFont.family + ";\n\n text-align: " + placement + ";\n ";
|
|
12
|
-
});
|
|
13
|
-
LabelText.propTypes = {
|
|
14
|
-
placement: oneOf(['left', 'right'])
|
|
15
|
-
};
|
|
16
|
-
LabelText.defaultProps = {
|
|
17
|
-
placement: 'left'
|
|
18
|
-
};
|
|
19
|
-
export { LabelView, LabelText };
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
var _templateObject;
|
|
2
|
-
|
|
3
|
-
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
4
|
-
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import { TouchableOpacity, View } from 'react-native';
|
|
7
|
-
import { bool, number, shape, string } from 'prop-types';
|
|
8
|
-
import styled from 'styled-components';
|
|
9
|
-
import { hexToRgb } from '@gympass/yoga-common';
|
|
10
|
-
import Tooltip from './Tooltip';
|
|
11
|
-
import Box from '../../Box';
|
|
12
|
-
var Circle = styled(Box).attrs(function (_ref) {
|
|
13
|
-
var slider = _ref.theme.yoga.components.slider;
|
|
14
|
-
return {
|
|
15
|
-
bgColor: slider.marker.backgroundColor,
|
|
16
|
-
border: 6,
|
|
17
|
-
borderColor: slider.marker.border.color,
|
|
18
|
-
borderRadius: slider.marker.border.radius,
|
|
19
|
-
elevation: slider.marker.shadow,
|
|
20
|
-
height: 24,
|
|
21
|
-
width: 24,
|
|
22
|
-
top: '2px',
|
|
23
|
-
position: 'relative',
|
|
24
|
-
as: TouchableOpacity
|
|
25
|
-
};
|
|
26
|
-
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
|
|
27
|
-
var CirclePressed = styled(Circle)(function (_ref2) {
|
|
28
|
-
var pressed = _ref2.pressed,
|
|
29
|
-
slider = _ref2.theme.yoga.components.slider;
|
|
30
|
-
return "\n " + (pressed ? "\n background-color: " + hexToRgb(slider.marker.backgroundColor, 0.2) + ";\n border: none;\n width: 40px;\n height: 40px;\n position: absolute;\n elevation: 0;\n top: -6px;\n " : 'display: none; border: none;') + "\n ";
|
|
31
|
-
});
|
|
32
|
-
CirclePressed.propTypes = {
|
|
33
|
-
pressed: bool
|
|
34
|
-
};
|
|
35
|
-
CirclePressed.defaultProps = {
|
|
36
|
-
pressed: false
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
var Marker = function Marker(_ref3) {
|
|
40
|
-
var pressed = _ref3.pressed,
|
|
41
|
-
tooltip = _ref3.tooltip;
|
|
42
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, pressed && tooltip && /*#__PURE__*/React.createElement(Tooltip, {
|
|
43
|
-
description: tooltip.description,
|
|
44
|
-
title: tooltip.title,
|
|
45
|
-
ribbon: tooltip.ribbon
|
|
46
|
-
}), /*#__PURE__*/React.createElement(CirclePressed, {
|
|
47
|
-
as: View,
|
|
48
|
-
pressed: pressed
|
|
49
|
-
}), /*#__PURE__*/React.createElement(Circle, {
|
|
50
|
-
accessibilityRole: "adjustable"
|
|
51
|
-
}));
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
Marker.propTypes = {
|
|
55
|
-
pressed: bool,
|
|
56
|
-
tooltip: shape({
|
|
57
|
-
description: string,
|
|
58
|
-
title: string,
|
|
59
|
-
ribbon: string,
|
|
60
|
-
visible: bool,
|
|
61
|
-
step: number
|
|
62
|
-
})
|
|
63
|
-
};
|
|
64
|
-
Marker.defaultProps = {
|
|
65
|
-
pressed: false,
|
|
66
|
-
tooltip: undefined
|
|
67
|
-
};
|
|
68
|
-
export default Marker;
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
var _excluded = ["max", "maxLabel", "min", "minLabel", "snapped", "values", "tooltip", "sliderLength", "theme"];
|
|
2
|
-
|
|
3
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
-
|
|
5
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
|
-
|
|
7
|
-
import React from 'react';
|
|
8
|
-
import { View } from 'react-native';
|
|
9
|
-
import { bool, number, arrayOf, shape, string, oneOfType } from 'prop-types';
|
|
10
|
-
import { withTheme } from 'styled-components';
|
|
11
|
-
import MultiSlider from '@ptomasroos/react-native-multi-slider';
|
|
12
|
-
import { LabelView, LabelText } from './Label';
|
|
13
|
-
import Marker from './Marker';
|
|
14
|
-
import Step from './Step';
|
|
15
|
-
/** Sliders allow users to make selections from a range of values. Sliders
|
|
16
|
-
reflect a range of values along a bar, from which users may select a single
|
|
17
|
-
value. They are ideal for adjusting settings such as volume, brightness, or
|
|
18
|
-
applying image filters. */
|
|
19
|
-
|
|
20
|
-
var Slider = function Slider(_ref) {
|
|
21
|
-
var max = _ref.max,
|
|
22
|
-
maxLabel = _ref.maxLabel,
|
|
23
|
-
min = _ref.min,
|
|
24
|
-
minLabel = _ref.minLabel,
|
|
25
|
-
snapped = _ref.snapped,
|
|
26
|
-
values = _ref.values,
|
|
27
|
-
tooltip = _ref.tooltip,
|
|
28
|
-
sliderLength = _ref.sliderLength,
|
|
29
|
-
slider = _ref.theme.yoga.components.slider,
|
|
30
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
31
|
-
|
|
32
|
-
var renderSnapDots = function renderSnapDots() {
|
|
33
|
-
var items = [];
|
|
34
|
-
|
|
35
|
-
for (var i = min; i <= max; i++) {
|
|
36
|
-
if (values.length > 1) {
|
|
37
|
-
items.push( /*#__PURE__*/React.createElement(Step, {
|
|
38
|
-
key: i,
|
|
39
|
-
active: values[0] < i && values[1] > i
|
|
40
|
-
}));
|
|
41
|
-
} else {
|
|
42
|
-
items.push( /*#__PURE__*/React.createElement(Step, {
|
|
43
|
-
key: i,
|
|
44
|
-
active: values[0] > i
|
|
45
|
-
}));
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
return items;
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
var renderTooltip = function renderTooltip(side) {
|
|
53
|
-
var tooltipSide = side === 'left' ? 0 : 1;
|
|
54
|
-
return tooltip.filter(function (_ref2) {
|
|
55
|
-
var step = _ref2.step,
|
|
56
|
-
visible = _ref2.visible;
|
|
57
|
-
|
|
58
|
-
if (!step && step !== 0) {
|
|
59
|
-
return visible;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
return visible && values[tooltipSide] === step;
|
|
63
|
-
})[0];
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
67
|
-
style: {
|
|
68
|
-
width: sliderLength
|
|
69
|
-
}
|
|
70
|
-
}, snapped && /*#__PURE__*/React.createElement(View, {
|
|
71
|
-
style: {
|
|
72
|
-
flexDirection: 'row',
|
|
73
|
-
alignItems: 'center',
|
|
74
|
-
justifyContent: 'space-between',
|
|
75
|
-
bottom: -30
|
|
76
|
-
}
|
|
77
|
-
}, renderSnapDots()), /*#__PURE__*/React.createElement(MultiSlider, _extends({}, props, {
|
|
78
|
-
values: values,
|
|
79
|
-
sliderLength: sliderLength,
|
|
80
|
-
trackStyle: {
|
|
81
|
-
backgroundColor: slider.track.backgroundColor.inactive,
|
|
82
|
-
height: 4,
|
|
83
|
-
borderRadius: slider.track.border.radius
|
|
84
|
-
},
|
|
85
|
-
selectedStyle: {
|
|
86
|
-
backgroundColor: slider.track.backgroundColor.active
|
|
87
|
-
},
|
|
88
|
-
isMarkersSeparated: true,
|
|
89
|
-
min: min,
|
|
90
|
-
max: max,
|
|
91
|
-
snapped: snapped,
|
|
92
|
-
customMarkerLeft: function customMarkerLeft(_ref3) {
|
|
93
|
-
var pressed = _ref3.pressed;
|
|
94
|
-
return /*#__PURE__*/React.createElement(Marker, {
|
|
95
|
-
tooltip: renderTooltip('left'),
|
|
96
|
-
pressed: pressed
|
|
97
|
-
});
|
|
98
|
-
},
|
|
99
|
-
customMarkerRight: function customMarkerRight(_ref4) {
|
|
100
|
-
var pressed = _ref4.pressed;
|
|
101
|
-
return /*#__PURE__*/React.createElement(Marker, {
|
|
102
|
-
tooltip: renderTooltip('right'),
|
|
103
|
-
pressed: pressed
|
|
104
|
-
});
|
|
105
|
-
},
|
|
106
|
-
touchDimensions: {
|
|
107
|
-
slipDisplacement: 400
|
|
108
|
-
}
|
|
109
|
-
})), (minLabel || maxLabel) && /*#__PURE__*/React.createElement(LabelView, null, minLabel && /*#__PURE__*/React.createElement(LabelText, {
|
|
110
|
-
placement: "left"
|
|
111
|
-
}, minLabel), maxLabel && /*#__PURE__*/React.createElement(LabelText, {
|
|
112
|
-
placement: "right"
|
|
113
|
-
}, maxLabel)));
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
Slider.propTypes = {
|
|
117
|
-
/** set the max value */
|
|
118
|
-
max: number,
|
|
119
|
-
|
|
120
|
-
/** label to be displayed at max value */
|
|
121
|
-
maxLabel: oneOfType([string, number]),
|
|
122
|
-
|
|
123
|
-
/** set the min value */
|
|
124
|
-
min: number,
|
|
125
|
-
|
|
126
|
-
/** label to be displayed at min value */
|
|
127
|
-
minLabel: oneOfType([string, number]),
|
|
128
|
-
sliderLength: number,
|
|
129
|
-
|
|
130
|
-
/** make slider be snap through dots */
|
|
131
|
-
snapped: bool,
|
|
132
|
-
|
|
133
|
-
/** accepts a shape with 'ribbon', 'title', 'description', 'visible' and 'step' properties */
|
|
134
|
-
tooltip: arrayOf(shape({
|
|
135
|
-
description: string,
|
|
136
|
-
title: string,
|
|
137
|
-
ribbon: string,
|
|
138
|
-
visible: bool,
|
|
139
|
-
step: number
|
|
140
|
-
})),
|
|
141
|
-
|
|
142
|
-
/** an array that accepts one or two numbers, this determines how many markers will be displayed */
|
|
143
|
-
values: arrayOf(number)
|
|
144
|
-
};
|
|
145
|
-
Slider.defaultProps = {
|
|
146
|
-
max: 10,
|
|
147
|
-
maxLabel: undefined,
|
|
148
|
-
min: 0,
|
|
149
|
-
minLabel: undefined,
|
|
150
|
-
sliderLength: 280,
|
|
151
|
-
snapped: false,
|
|
152
|
-
tooltip: [],
|
|
153
|
-
values: [0]
|
|
154
|
-
};
|
|
155
|
-
Slider.displayName = 'Slider';
|
|
156
|
-
export default withTheme(Slider);
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, fireEvent } from '@testing-library/react-native';
|
|
3
|
-
import ThemeProvider from '../../Theme';
|
|
4
|
-
import Slider from './Slider';
|
|
5
|
-
describe('<Slider />', function () {
|
|
6
|
-
describe('Snapshots', function () {
|
|
7
|
-
describe('With one marker', function () {
|
|
8
|
-
it('should match snapshot with default Slider', function () {
|
|
9
|
-
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, null))),
|
|
10
|
-
container = _render.container,
|
|
11
|
-
toJSON = _render.toJSON;
|
|
12
|
-
|
|
13
|
-
expect(toJSON(container)).toMatchSnapshot();
|
|
14
|
-
});
|
|
15
|
-
it('should match snapshot with Slider with labels', function () {
|
|
16
|
-
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
17
|
-
minLabel: 0,
|
|
18
|
-
maxLabel: 10
|
|
19
|
-
}))),
|
|
20
|
-
container = _render2.container,
|
|
21
|
-
toJSON = _render2.toJSON;
|
|
22
|
-
|
|
23
|
-
expect(toJSON(container)).toMatchSnapshot();
|
|
24
|
-
});
|
|
25
|
-
it('should match snapshot with Slider snapped', function () {
|
|
26
|
-
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
27
|
-
snapped: true
|
|
28
|
-
}))),
|
|
29
|
-
container = _render3.container,
|
|
30
|
-
toJSON = _render3.toJSON;
|
|
31
|
-
|
|
32
|
-
expect(toJSON(container)).toMatchSnapshot();
|
|
33
|
-
});
|
|
34
|
-
});
|
|
35
|
-
describe('With two markers', function () {
|
|
36
|
-
it('should match snapshot', function () {
|
|
37
|
-
var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
38
|
-
values: [3, 7]
|
|
39
|
-
}))),
|
|
40
|
-
container = _render4.container,
|
|
41
|
-
toJSON = _render4.toJSON;
|
|
42
|
-
|
|
43
|
-
expect(toJSON(container)).toMatchSnapshot();
|
|
44
|
-
});
|
|
45
|
-
it('should match snapshot with Slider snapped', function () {
|
|
46
|
-
var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
47
|
-
values: [3, 7],
|
|
48
|
-
snapped: true
|
|
49
|
-
}))),
|
|
50
|
-
container = _render5.container,
|
|
51
|
-
toJSON = _render5.toJSON;
|
|
52
|
-
|
|
53
|
-
expect(toJSON(container)).toMatchSnapshot();
|
|
54
|
-
});
|
|
55
|
-
});
|
|
56
|
-
});
|
|
57
|
-
describe('Labels', function () {
|
|
58
|
-
it('should render labels', function () {
|
|
59
|
-
var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
60
|
-
maxLabel: "max",
|
|
61
|
-
minLabel: "min"
|
|
62
|
-
}))),
|
|
63
|
-
getByText = _render6.getByText;
|
|
64
|
-
|
|
65
|
-
expect(getByText('max')).toHaveTextContent('max');
|
|
66
|
-
expect(getByText('min')).toHaveTextContent('min');
|
|
67
|
-
});
|
|
68
|
-
});
|
|
69
|
-
describe('Tooltip', function () {
|
|
70
|
-
it('should render tooltip', function () {
|
|
71
|
-
var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
72
|
-
values: [0],
|
|
73
|
-
tooltip: [{
|
|
74
|
-
ribbon: 'ribbon',
|
|
75
|
-
title: 'title',
|
|
76
|
-
description: 'description',
|
|
77
|
-
visible: true
|
|
78
|
-
}]
|
|
79
|
-
}))),
|
|
80
|
-
container = _render7.container,
|
|
81
|
-
getByText = _render7.getByText,
|
|
82
|
-
getByRole = _render7.getByRole,
|
|
83
|
-
toJSON = _render7.toJSON;
|
|
84
|
-
|
|
85
|
-
fireEvent(getByRole('adjustable'), 'responderGrant', {
|
|
86
|
-
touchHistory: {
|
|
87
|
-
touchBank: {}
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
expect(getByText('ribbon')).toBeTruthy();
|
|
91
|
-
expect(getByText('title')).toBeTruthy();
|
|
92
|
-
expect(getByText('description')).toBeTruthy();
|
|
93
|
-
expect(toJSON(container)).toMatchSnapshot();
|
|
94
|
-
});
|
|
95
|
-
it('should render tooltip on a specific step', function () {
|
|
96
|
-
var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
97
|
-
values: [2],
|
|
98
|
-
tooltip: [{
|
|
99
|
-
ribbon: 'ribbon',
|
|
100
|
-
title: 'title',
|
|
101
|
-
description: 'description',
|
|
102
|
-
visible: true,
|
|
103
|
-
step: 2
|
|
104
|
-
}]
|
|
105
|
-
}))),
|
|
106
|
-
container = _render8.container,
|
|
107
|
-
getByText = _render8.getByText,
|
|
108
|
-
getByRole = _render8.getByRole,
|
|
109
|
-
toJSON = _render8.toJSON;
|
|
110
|
-
|
|
111
|
-
fireEvent(getByRole('adjustable'), 'responderGrant', {
|
|
112
|
-
touchHistory: {
|
|
113
|
-
touchBank: {}
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
expect(getByText('ribbon')).toBeTruthy();
|
|
117
|
-
expect(getByText('title')).toBeTruthy();
|
|
118
|
-
expect(getByText('description')).toBeTruthy();
|
|
119
|
-
expect(toJSON(container)).toMatchSnapshot();
|
|
120
|
-
});
|
|
121
|
-
});
|
|
122
|
-
});
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { bool } from 'prop-types';
|
|
3
|
-
var Step = styled.View(function (_ref) {
|
|
4
|
-
var active = _ref.active,
|
|
5
|
-
slider = _ref.theme.yoga.components.slider;
|
|
6
|
-
return "\n background-color: " + (active ? slider.step.backgroundColor.active : slider.step.backgroundColor.inactive) + ";\n border-radius: " + slider.step.border.radius + "px;\n height: 10px;\n width: 10px;\n ";
|
|
7
|
-
});
|
|
8
|
-
Step.propTypes = {
|
|
9
|
-
active: bool
|
|
10
|
-
};
|
|
11
|
-
Step.defaultProps = {
|
|
12
|
-
active: false
|
|
13
|
-
};
|
|
14
|
-
export default Step;
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
var _excluded = ["children"],
|
|
2
|
-
_excluded2 = ["title", "description", "ribbon"];
|
|
3
|
-
|
|
4
|
-
var _templateObject, _templateObject2;
|
|
5
|
-
|
|
6
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
7
|
-
|
|
8
|
-
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
9
|
-
|
|
10
|
-
import React from 'react';
|
|
11
|
-
import { string, node } from 'prop-types';
|
|
12
|
-
import styled from 'styled-components';
|
|
13
|
-
import Text from '../../Text';
|
|
14
|
-
import Box from '../../Box';
|
|
15
|
-
var Wrapper = styled(Box).attrs(function (_ref) {
|
|
16
|
-
var slider = _ref.theme.yoga.components.slider;
|
|
17
|
-
return {
|
|
18
|
-
bgColor: slider.tooltip.ribbon.backgroundColor,
|
|
19
|
-
bottom: 38,
|
|
20
|
-
bRadius: slider.tooltip.radius,
|
|
21
|
-
elevation: slider.tooltip.shadow,
|
|
22
|
-
position: 'absolute',
|
|
23
|
-
width: 95
|
|
24
|
-
};
|
|
25
|
-
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
|
|
26
|
-
var Tip = styled.View(function (_ref2) {
|
|
27
|
-
var slider = _ref2.theme.yoga.components.slider;
|
|
28
|
-
return "\n background-color: " + slider.tooltip.backgroundColor + ";\n border-radius: " + slider.tooltip.radius + "px;\n padding: " + slider.tooltip.padding.top + "px " + slider.tooltip.padding.right + "px " + slider.tooltip.padding.bottom + "px " + slider.tooltip.padding.left + "px;\n justify-content: center;\n width: 95px;\n ";
|
|
29
|
-
});
|
|
30
|
-
var Title = styled(Text.Small)(function (_ref3) {
|
|
31
|
-
var slider = _ref3.theme.yoga.components.slider;
|
|
32
|
-
return "\n color: " + slider.tooltip.font.color + ";\n margin-bottom: 5px;\n text-align: center;\n ";
|
|
33
|
-
});
|
|
34
|
-
var Description = styled(Text.Small)(function (_ref4) {
|
|
35
|
-
var slider = _ref4.theme.yoga.components.slider;
|
|
36
|
-
return "\n color: " + slider.tooltip.font.color + ";\n text-align: center;\n ";
|
|
37
|
-
});
|
|
38
|
-
var Arrow = styled(Box).attrs(function (_ref5) {
|
|
39
|
-
var slider = _ref5.theme.yoga.components.slider;
|
|
40
|
-
return {
|
|
41
|
-
alignSelf: 'center',
|
|
42
|
-
bottom: '10px',
|
|
43
|
-
bRadius: '3px',
|
|
44
|
-
bgColor: slider.tooltip.backgroundColor,
|
|
45
|
-
height: 16,
|
|
46
|
-
width: 16,
|
|
47
|
-
mb: -17,
|
|
48
|
-
position: 'absolute'
|
|
49
|
-
};
|
|
50
|
-
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n transform: rotate(45deg);\n"])));
|
|
51
|
-
var RibbonWrapper = styled.View(function (_ref6) {
|
|
52
|
-
var slider = _ref6.theme.yoga.components.slider;
|
|
53
|
-
return "\n align-items: center;\n background-color: " + slider.tooltip.ribbon.backgroundColor + ";\n border-top-left-radius: " + slider.tooltip.ribbon.radius + "px;\n border-top-right-radius: " + slider.tooltip.ribbon.radius + "px;\n justify-content: center;\n padding: " + slider.tooltip.ribbon.padding.top + "px " + slider.tooltip.ribbon.padding.right + "px " + slider.tooltip.ribbon.padding.bottom + "px " + slider.tooltip.ribbon.padding.left + "px;\n position: relative;\n ";
|
|
54
|
-
});
|
|
55
|
-
var RibbonText = styled(Text.Bold)(function (_ref7) {
|
|
56
|
-
var slider = _ref7.theme.yoga.components.slider;
|
|
57
|
-
return "\n color: " + slider.tooltip.ribbon.font.color + ";\n\n font-size: " + slider.tooltip.ribbon.font.size + "px;\n\n text-align: center;\n ";
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
var Ribbon = function Ribbon(_ref8) {
|
|
61
|
-
var children = _ref8.children,
|
|
62
|
-
props = _objectWithoutPropertiesLoose(_ref8, _excluded);
|
|
63
|
-
|
|
64
|
-
return /*#__PURE__*/React.createElement(RibbonWrapper, props, /*#__PURE__*/React.createElement(RibbonText, null, children));
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
Ribbon.propTypes = {
|
|
68
|
-
children: node.isRequired
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
var Tooltip = function Tooltip(_ref9) {
|
|
72
|
-
var title = _ref9.title,
|
|
73
|
-
description = _ref9.description,
|
|
74
|
-
ribbon = _ref9.ribbon,
|
|
75
|
-
props = _objectWithoutPropertiesLoose(_ref9, _excluded2);
|
|
76
|
-
|
|
77
|
-
return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Arrow, null), ribbon && /*#__PURE__*/React.createElement(Ribbon, null, ribbon), (title || description) && /*#__PURE__*/React.createElement(Tip, props, title && /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description)));
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
Tooltip.propTypes = {
|
|
81
|
-
title: string,
|
|
82
|
-
description: string,
|
|
83
|
-
ribbon: string
|
|
84
|
-
};
|
|
85
|
-
Tooltip.defaultProps = {
|
|
86
|
-
title: undefined,
|
|
87
|
-
description: undefined,
|
|
88
|
-
ribbon: undefined
|
|
89
|
-
};
|
|
90
|
-
export default Tooltip;
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, fireEvent } from '@testing-library/react';
|
|
3
|
-
import ThemeProvider from '../../Theme';
|
|
4
|
-
import Slider from './Slider';
|
|
5
|
-
describe('<Slider />', function () {
|
|
6
|
-
describe('Snapshots', function () {
|
|
7
|
-
describe('With one marker', function () {
|
|
8
|
-
it('should match snapshot with default Slider', function () {
|
|
9
|
-
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, null))),
|
|
10
|
-
container = _render.container;
|
|
11
|
-
|
|
12
|
-
expect(container).toMatchSnapshot();
|
|
13
|
-
});
|
|
14
|
-
it('should match snapshot with Slider with labels', function () {
|
|
15
|
-
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
16
|
-
minLabel: 0,
|
|
17
|
-
maxLabel: 10
|
|
18
|
-
}))),
|
|
19
|
-
container = _render2.container;
|
|
20
|
-
|
|
21
|
-
expect(container).toMatchSnapshot();
|
|
22
|
-
});
|
|
23
|
-
it('should match snapshot with Slider snapped', function () {
|
|
24
|
-
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
25
|
-
snapped: true
|
|
26
|
-
}))),
|
|
27
|
-
container = _render3.container;
|
|
28
|
-
|
|
29
|
-
expect(container).toMatchSnapshot();
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
describe('With two markers', function () {
|
|
33
|
-
it('should match snapshot', function () {
|
|
34
|
-
var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
35
|
-
values: [3, 7]
|
|
36
|
-
}))),
|
|
37
|
-
container = _render4.container;
|
|
38
|
-
|
|
39
|
-
expect(container).toMatchSnapshot();
|
|
40
|
-
});
|
|
41
|
-
it('should match snapshot with Slider snapped', function () {
|
|
42
|
-
var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
43
|
-
values: [3, 7],
|
|
44
|
-
snapped: true
|
|
45
|
-
}))),
|
|
46
|
-
container = _render5.container;
|
|
47
|
-
|
|
48
|
-
expect(container).toMatchSnapshot();
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
});
|
|
52
|
-
describe('Labels', function () {
|
|
53
|
-
it('should render labels', function () {
|
|
54
|
-
var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
55
|
-
maxLabel: "max",
|
|
56
|
-
minLabel: "min"
|
|
57
|
-
}))),
|
|
58
|
-
getByText = _render6.getByText;
|
|
59
|
-
|
|
60
|
-
expect(getByText('max').textContent).toBe('max');
|
|
61
|
-
expect(getByText('min').textContent).toBe('min');
|
|
62
|
-
});
|
|
63
|
-
});
|
|
64
|
-
describe('Tooltip', function () {
|
|
65
|
-
it('should render tooltips', function () {
|
|
66
|
-
var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Slider, {
|
|
67
|
-
values: [0],
|
|
68
|
-
tooltip: [{
|
|
69
|
-
ribbon: 'ribbon',
|
|
70
|
-
title: 'title',
|
|
71
|
-
description: 'description',
|
|
72
|
-
visible: true
|
|
73
|
-
}]
|
|
74
|
-
}))),
|
|
75
|
-
container = _render7.container,
|
|
76
|
-
getByRole = _render7.getByRole,
|
|
77
|
-
getByText = _render7.getByText;
|
|
78
|
-
|
|
79
|
-
fireEvent.mouseDown(getByRole('slider'));
|
|
80
|
-
expect(getByText('ribbon')).toBeTruthy();
|
|
81
|
-
expect(getByText('title')).toBeTruthy();
|
|
82
|
-
expect(getByText('description')).toBeTruthy();
|
|
83
|
-
expect(container).toMatchSnapshot();
|
|
84
|
-
});
|
|
85
|
-
});
|
|
86
|
-
});
|