@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,62 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { screen, render, fireEvent, cleanup } from '@testing-library/react';
|
|
3
|
-
import { ThemeProvider, Button } from '../..';
|
|
4
|
-
import Dialog from '.';
|
|
5
|
-
describe('<Dialog />', function () {
|
|
6
|
-
afterEach(cleanup);
|
|
7
|
-
it('should match snapshot', function () {
|
|
8
|
-
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
|
|
9
|
-
isOpen: true
|
|
10
|
-
}, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"), /*#__PURE__*/React.createElement(Dialog.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
|
|
11
|
-
secondary: true
|
|
12
|
-
}, "Ok, got it"))))),
|
|
13
|
-
baseElement = _render.baseElement;
|
|
14
|
-
|
|
15
|
-
expect(baseElement).toMatchSnapshot();
|
|
16
|
-
});
|
|
17
|
-
it('should match snapshot with close button', function () {
|
|
18
|
-
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
|
|
19
|
-
isOpen: true,
|
|
20
|
-
onClose: jest.fn()
|
|
21
|
-
}, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"), /*#__PURE__*/React.createElement(Dialog.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
|
|
22
|
-
secondary: true
|
|
23
|
-
}, "Ok, got it"))))),
|
|
24
|
-
baseElement = _render2.baseElement;
|
|
25
|
-
|
|
26
|
-
expect(baseElement).toMatchSnapshot();
|
|
27
|
-
});
|
|
28
|
-
it('should render a minimal dialog', function () {
|
|
29
|
-
var onActionMock = jest.fn();
|
|
30
|
-
render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
|
|
31
|
-
isOpen: true
|
|
32
|
-
}, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"), /*#__PURE__*/React.createElement(Dialog.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
|
|
33
|
-
onClick: onActionMock,
|
|
34
|
-
secondary: true
|
|
35
|
-
}, "Ok, got it")))));
|
|
36
|
-
screen.getByText('Title');
|
|
37
|
-
screen.getByText('Subtitle');
|
|
38
|
-
var button = screen.getByRole('button', {
|
|
39
|
-
name: /Ok, got it/i
|
|
40
|
-
});
|
|
41
|
-
fireEvent.click(button);
|
|
42
|
-
expect(onActionMock).toHaveBeenCalledTimes(1);
|
|
43
|
-
});
|
|
44
|
-
it('should render with close button', function () {
|
|
45
|
-
var onCloseMock = jest.fn();
|
|
46
|
-
render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
|
|
47
|
-
isOpen: true,
|
|
48
|
-
onClose: onCloseMock
|
|
49
|
-
}, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"))));
|
|
50
|
-
var button = screen.getByRole('button');
|
|
51
|
-
fireEvent.click(button);
|
|
52
|
-
expect(onCloseMock).toHaveBeenCalledTimes(1);
|
|
53
|
-
});
|
|
54
|
-
it('should hide the close button when hideCloseButton prop is true', function () {
|
|
55
|
-
render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
|
|
56
|
-
isOpen: true,
|
|
57
|
-
hideCloseButton: true,
|
|
58
|
-
onClose: function onClose() {}
|
|
59
|
-
}, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"))));
|
|
60
|
-
expect(screen.queryByRole('button')).toBeNull();
|
|
61
|
-
});
|
|
62
|
-
});
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
var _templateObject, _templateObject2;
|
|
2
|
-
|
|
3
|
-
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
4
|
-
|
|
5
|
-
import { bool } from 'prop-types';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import styled, { css, withTheme } from 'styled-components';
|
|
8
|
-
var StyledDivider = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9
|
-
var _ref$theme$yoga = _ref.theme.yoga,
|
|
10
|
-
borders = _ref$theme$yoga.borders,
|
|
11
|
-
colors = _ref$theme$yoga.colors,
|
|
12
|
-
vertical = _ref.vertical;
|
|
13
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n\n border-color: ", ";\n "])), vertical ? 'height: auto' : 'width: auto', vertical ? "border-left-width: " + borders.small : "border-bottom-width: " + borders.small, colors.text.disabled);
|
|
14
|
-
});
|
|
15
|
-
var Divider = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
16
|
-
var vertical = _ref2.vertical;
|
|
17
|
-
return /*#__PURE__*/React.createElement(StyledDivider, {
|
|
18
|
-
vertical: vertical,
|
|
19
|
-
ref: ref
|
|
20
|
-
});
|
|
21
|
-
});
|
|
22
|
-
Divider.propTypes = {
|
|
23
|
-
/** If this value is defined, the divider will be in vertical when the flexDirection is row type */
|
|
24
|
-
vertical: bool
|
|
25
|
-
};
|
|
26
|
-
Divider.defaultProps = {
|
|
27
|
-
vertical: false
|
|
28
|
-
};
|
|
29
|
-
export default withTheme(Divider);
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render } from '@testing-library/react-native';
|
|
3
|
-
import { ThemeProvider, Divider, Box, Text } from '../..';
|
|
4
|
-
describe('<Divider />', function () {
|
|
5
|
-
it('should create a divider component', function () {
|
|
6
|
-
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
|
|
7
|
-
display: "flex",
|
|
8
|
-
flexDirection: "column",
|
|
9
|
-
minWidth: 300,
|
|
10
|
-
justifyContent: "space-between"
|
|
11
|
-
}, /*#__PURE__*/React.createElement(Text.H4, null, "First Content"), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Text.H4, null, "Second Content")))),
|
|
12
|
-
toJSON = _render.toJSON;
|
|
13
|
-
|
|
14
|
-
expect(toJSON()).toMatchSnapshot();
|
|
15
|
-
});
|
|
16
|
-
it('should create vertical divider component', function () {
|
|
17
|
-
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
|
|
18
|
-
display: "flex",
|
|
19
|
-
flexDirection: "row",
|
|
20
|
-
minWidth: 300,
|
|
21
|
-
justifyContent: "space-between"
|
|
22
|
-
}, /*#__PURE__*/React.createElement(Text.H4, null, "First Content"), /*#__PURE__*/React.createElement(Divider, {
|
|
23
|
-
vertical: true
|
|
24
|
-
}), /*#__PURE__*/React.createElement(Text.H4, null, "Second Content")))),
|
|
25
|
-
toJSON = _render2.toJSON;
|
|
26
|
-
|
|
27
|
-
expect(toJSON()).toMatchSnapshot();
|
|
28
|
-
});
|
|
29
|
-
});
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render } from '@testing-library/react';
|
|
3
|
-
import { ThemeProvider, Divider, Box, Text } from '../..';
|
|
4
|
-
describe('<Divider />', function () {
|
|
5
|
-
it('should create a divider component', function () {
|
|
6
|
-
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
|
|
7
|
-
flex: 1,
|
|
8
|
-
display: "flex",
|
|
9
|
-
flexDirection: "column",
|
|
10
|
-
minHeight: 50
|
|
11
|
-
}, /*#__PURE__*/React.createElement(Text.Regular, null, "First Content"), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Text.Regular, null, "Second Content")))),
|
|
12
|
-
container = _render.container;
|
|
13
|
-
|
|
14
|
-
expect(container).toMatchSnapshot();
|
|
15
|
-
});
|
|
16
|
-
it('should create a vertical divider component', function () {
|
|
17
|
-
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
|
|
18
|
-
flex: 1,
|
|
19
|
-
display: "flex",
|
|
20
|
-
flexDirection: "row",
|
|
21
|
-
minHeight: 50
|
|
22
|
-
}, /*#__PURE__*/React.createElement(Text.Regular, null, "First Content"), /*#__PURE__*/React.createElement(Divider, {
|
|
23
|
-
vertical: true
|
|
24
|
-
}), /*#__PURE__*/React.createElement(Text.Regular, null, "Second Content")))),
|
|
25
|
-
container = _render2.container;
|
|
26
|
-
|
|
27
|
-
expect(container).toMatchSnapshot();
|
|
28
|
-
});
|
|
29
|
-
});
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { screen, render, fireEvent, cleanup } from '@testing-library/react';
|
|
3
|
-
import { ThemeProvider, Button } from '../..';
|
|
4
|
-
import Drawer from '.';
|
|
5
|
-
describe('<Drawer />', function () {
|
|
6
|
-
afterEach(cleanup);
|
|
7
|
-
it('should match snapshot', function () {
|
|
8
|
-
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Drawer, {
|
|
9
|
-
isOpen: true
|
|
10
|
-
}, /*#__PURE__*/React.createElement(Drawer.Header, null, "Title"), /*#__PURE__*/React.createElement(Drawer.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Drawer.Footer, null, /*#__PURE__*/React.createElement(Button, {
|
|
11
|
-
secondary: true
|
|
12
|
-
}, "Ok, got it"))))),
|
|
13
|
-
baseElement = _render.baseElement;
|
|
14
|
-
|
|
15
|
-
expect(baseElement).toMatchSnapshot();
|
|
16
|
-
});
|
|
17
|
-
it('should render a minimal drawer', function () {
|
|
18
|
-
var onActionMock = jest.fn();
|
|
19
|
-
render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Drawer, {
|
|
20
|
-
isOpen: true
|
|
21
|
-
}, /*#__PURE__*/React.createElement(Drawer.Header, null, "Title"), /*#__PURE__*/React.createElement(Drawer.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Drawer.Footer, null, /*#__PURE__*/React.createElement(Button, {
|
|
22
|
-
onClick: onActionMock,
|
|
23
|
-
secondary: true
|
|
24
|
-
}, "Ok, got it")))));
|
|
25
|
-
screen.getByText('Title');
|
|
26
|
-
screen.getByText('Subtitle');
|
|
27
|
-
var button = screen.getByRole('button', {
|
|
28
|
-
name: /Ok, got it/i
|
|
29
|
-
});
|
|
30
|
-
fireEvent.click(button);
|
|
31
|
-
expect(onActionMock).toHaveBeenCalledTimes(1);
|
|
32
|
-
});
|
|
33
|
-
});
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
var _excluded = ["visible", "title", "children", "onClose", "theme"];
|
|
2
|
-
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
4
|
-
|
|
5
|
-
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); }
|
|
6
|
-
|
|
7
|
-
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; }
|
|
8
|
-
|
|
9
|
-
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
10
|
-
|
|
11
|
-
import React, { useEffect, useState } from 'react';
|
|
12
|
-
import styled, { withTheme } from 'styled-components';
|
|
13
|
-
import { node, string, func, bool } from 'prop-types';
|
|
14
|
-
import { Animated, TouchableWithoutFeedback, Easing, Modal } from 'react-native';
|
|
15
|
-
import Text from '../../Text';
|
|
16
|
-
var ClosableArea = styled(Animated.View)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
17
|
-
var colors = _ref.theme.yoga.colors;
|
|
18
|
-
return "\n position: relative;\n width: 100%;\n height: 100%;\n\n background-color: " + colors.text.primary + ";\n ";
|
|
19
|
-
});
|
|
20
|
-
var ContentWrapper = styled(Animated.View)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n justify-content: flex-end;\n\n width: 100%;\n"])));
|
|
21
|
-
var Content = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
|
|
22
|
-
var dropdown = _ref2.theme.yoga.components.dropdown;
|
|
23
|
-
return "\n justify-content: center;\n width: 100%;\n\n background-color: " + dropdown.backdrop.content.backgroundColor + ";\n border-top-left-radius: " + dropdown.backdrop.content.border.radius.topLeft + "px;\n border-top-right-radius: " + dropdown.backdrop.content.border.radius.topRight + "px;\n ";
|
|
24
|
-
});
|
|
25
|
-
var Title = styled(Text.Bold)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref3) {
|
|
26
|
-
var dropdown = _ref3.theme.yoga.components.dropdown;
|
|
27
|
-
return "\n width: 100%;\n padding:\n " + dropdown.backdrop.content.title.padding.top + "px\n " + dropdown.backdrop.content.title.padding.right + "px\n " + dropdown.backdrop.content.title.padding.bottom + "px\n " + dropdown.backdrop.content.title.padding.left + "px;\n\n font-size: " + dropdown.backdrop.content.title.font.size + "px;\n\n text-align: center;\n ";
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
var Backdrop = function Backdrop(_ref4) {
|
|
31
|
-
var visible = _ref4.visible,
|
|
32
|
-
title = _ref4.title,
|
|
33
|
-
children = _ref4.children,
|
|
34
|
-
onClose = _ref4.onClose,
|
|
35
|
-
_ref4$theme$yoga = _ref4.theme.yoga,
|
|
36
|
-
transition = _ref4$theme$yoga.transition,
|
|
37
|
-
dropdown = _ref4$theme$yoga.components.dropdown,
|
|
38
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded);
|
|
39
|
-
|
|
40
|
-
var _useState = useState(visible),
|
|
41
|
-
isOpen = _useState[0],
|
|
42
|
-
toggleIsOpen = _useState[1];
|
|
43
|
-
|
|
44
|
-
var _useState2 = useState(new Animated.Value(0)),
|
|
45
|
-
backgroundAnimation = _useState2[0];
|
|
46
|
-
|
|
47
|
-
var _useState3 = useState(new Animated.Value(-dropdown.backdrop.content.height)),
|
|
48
|
-
contentAnimation = _useState3[0];
|
|
49
|
-
|
|
50
|
-
var animate = function animate(animation, toValue) {
|
|
51
|
-
return Animated.timing(animation, {
|
|
52
|
-
toValue: toValue,
|
|
53
|
-
duration: transition.duration[0],
|
|
54
|
-
easing: Easing.out(Easing.ease),
|
|
55
|
-
useNativeDriver: false
|
|
56
|
-
}).start(function () {
|
|
57
|
-
return !visible && toggleIsOpen(false);
|
|
58
|
-
});
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
useEffect(function () {
|
|
62
|
-
if (visible) toggleIsOpen(true);
|
|
63
|
-
animate(backgroundAnimation, visible ? 0.5 : 0);
|
|
64
|
-
animate(contentAnimation, visible ? 0 : -dropdown.backdrop.content.height);
|
|
65
|
-
}, [visible]);
|
|
66
|
-
return isOpen && /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
|
|
67
|
-
transparent: true,
|
|
68
|
-
animationType: "none"
|
|
69
|
-
}), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
|
|
70
|
-
onPress: onClose
|
|
71
|
-
}, /*#__PURE__*/React.createElement(ClosableArea, {
|
|
72
|
-
style: {
|
|
73
|
-
opacity: backgroundAnimation
|
|
74
|
-
}
|
|
75
|
-
})), /*#__PURE__*/React.createElement(ContentWrapper, {
|
|
76
|
-
style: {
|
|
77
|
-
bottom: contentAnimation
|
|
78
|
-
}
|
|
79
|
-
}, /*#__PURE__*/React.createElement(Content, null, title && /*#__PURE__*/React.createElement(Title, null, title), children)));
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
Backdrop.propTypes = {
|
|
83
|
-
visible: bool,
|
|
84
|
-
title: string,
|
|
85
|
-
children: node.isRequired,
|
|
86
|
-
onClose: func
|
|
87
|
-
};
|
|
88
|
-
Backdrop.defaultProps = {
|
|
89
|
-
visible: false,
|
|
90
|
-
title: null,
|
|
91
|
-
onClose: function onClose() {}
|
|
92
|
-
};
|
|
93
|
-
export default withTheme(Backdrop);
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render } from '@testing-library/react-native';
|
|
3
|
-
import { ThemeProvider } from '../..';
|
|
4
|
-
import Backdrop from './Backdrop';
|
|
5
|
-
jest.useFakeTimers();
|
|
6
|
-
describe('<Backdrop />', function () {
|
|
7
|
-
describe('Snapshots', function () {
|
|
8
|
-
it('should match snapshot', function () {
|
|
9
|
-
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Backdrop, {
|
|
10
|
-
title: "Find an Activity"
|
|
11
|
-
}, "Some Content"))),
|
|
12
|
-
toJSON = _render.toJSON;
|
|
13
|
-
|
|
14
|
-
expect(toJSON()).toMatchSnapshot();
|
|
15
|
-
});
|
|
16
|
-
it('should match snapshot when visible', function () {
|
|
17
|
-
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Backdrop, {
|
|
18
|
-
visible: true,
|
|
19
|
-
title: "Find an Activity"
|
|
20
|
-
}, "Some Content"))),
|
|
21
|
-
toJSON = _render2.toJSON;
|
|
22
|
-
|
|
23
|
-
expect(toJSON()).toMatchSnapshot();
|
|
24
|
-
});
|
|
25
|
-
});
|
|
26
|
-
});
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
var _excluded = ["error", "label", "disabled", "full", "options", "cancelActionLabel", "confirmActionLabel", "onChange", "theme"];
|
|
2
|
-
|
|
3
|
-
var _templateObject, _templateObject2;
|
|
4
|
-
|
|
5
|
-
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); }
|
|
6
|
-
|
|
7
|
-
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; }
|
|
8
|
-
|
|
9
|
-
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
10
|
-
|
|
11
|
-
import React, { useState } from 'react';
|
|
12
|
-
import styled, { withTheme } from 'styled-components';
|
|
13
|
-
import { arrayOf, func, shape, number, string, bool, oneOfType } from 'prop-types';
|
|
14
|
-
import { TouchableWithoutFeedback, View } from 'react-native';
|
|
15
|
-
import { ChevronDown } from '@gympass/yoga-icons';
|
|
16
|
-
import Options from './Options';
|
|
17
|
-
import Backdrop from './Backdrop';
|
|
18
|
-
import Text from '../../Text';
|
|
19
|
-
import Helper from '../../Input/native/Helper';
|
|
20
|
-
var Selector = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
21
|
-
var disabled = _ref.disabled,
|
|
22
|
-
selected = _ref.selected,
|
|
23
|
-
error = _ref.error,
|
|
24
|
-
full = _ref.full,
|
|
25
|
-
_ref$theme$yoga = _ref.theme.yoga,
|
|
26
|
-
colors = _ref$theme$yoga.colors,
|
|
27
|
-
dropdown = _ref$theme$yoga.components.dropdown;
|
|
28
|
-
return "\n position: relative;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n width: " + (full ? '100%' : dropdown.width + "px") + ";\n padding: " + dropdown.selector.padding.top + "px\n " + dropdown.selector.padding.right + "px\n " + dropdown.selector.padding.bottom + "px\n " + dropdown.selector.padding.left + "px;\n\n background-color: " + dropdown.selector.background + ";\n border-radius: " + dropdown.selector.border.radius + "px;\n border-width: " + dropdown.selector.border.width + "px;\n border-style: solid;\n border-color: " + (error ? colors.feedback.attention[1] : dropdown.selector.border.color) + ";\n\n " + (disabled ? "border-color: " + dropdown.disabled.selector.border.color + ";" : '') + ";\n " + (selected ? "border-color: " + dropdown.selected.selector.border.color + ";" : '') + ";\n ";
|
|
29
|
-
});
|
|
30
|
-
var Label = styled(Text)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
|
|
31
|
-
var disabled = _ref2.disabled,
|
|
32
|
-
selected = _ref2.selected,
|
|
33
|
-
dropdown = _ref2.theme.yoga.components.dropdown;
|
|
34
|
-
return "\n color: " + dropdown.input.font.color + ";\n " + (disabled ? "color: " + dropdown.disabled.input.font.color + ";" : '') + "\n " + (selected ? "color: " + dropdown.selected.input.font.color + ";" : '') + "\n ";
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
var getSelectedOption = function getSelectedOption(options) {
|
|
38
|
-
return options.find(function (item) {
|
|
39
|
-
return item.selected === true;
|
|
40
|
-
});
|
|
41
|
-
};
|
|
42
|
-
/** Gympass Dropdown is a multiple choice type of menu. */
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
46
|
-
var error = _ref3.error,
|
|
47
|
-
label = _ref3.label,
|
|
48
|
-
disabled = _ref3.disabled,
|
|
49
|
-
full = _ref3.full,
|
|
50
|
-
options = _ref3.options,
|
|
51
|
-
cancelActionLabel = _ref3.cancelActionLabel,
|
|
52
|
-
confirmActionLabel = _ref3.confirmActionLabel,
|
|
53
|
-
onChange = _ref3.onChange,
|
|
54
|
-
dropdown = _ref3.theme.yoga.components.dropdown,
|
|
55
|
-
rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
|
|
56
|
-
|
|
57
|
-
var _useState = useState(getSelectedOption(options)),
|
|
58
|
-
selected = _useState[0],
|
|
59
|
-
toggleIsSelected = _useState[1];
|
|
60
|
-
|
|
61
|
-
var _useState2 = useState(false),
|
|
62
|
-
isOpen = _useState2[0],
|
|
63
|
-
toggleIsOpen = _useState2[1];
|
|
64
|
-
|
|
65
|
-
var iconColor = function iconColor() {
|
|
66
|
-
if (disabled) return dropdown.disabled.arrow.fill;
|
|
67
|
-
if (selected) return dropdown.selected.arrow.fill;
|
|
68
|
-
return dropdown.arrow.fill;
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
|
|
72
|
-
accessibilityRole: "button",
|
|
73
|
-
onPress: function onPress() {
|
|
74
|
-
return !disabled && toggleIsOpen(true);
|
|
75
|
-
}
|
|
76
|
-
}, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Selector, _extends({
|
|
77
|
-
full: full,
|
|
78
|
-
disabled: disabled,
|
|
79
|
-
selected: selected,
|
|
80
|
-
error: error
|
|
81
|
-
}, rest, {
|
|
82
|
-
ref: ref
|
|
83
|
-
}), /*#__PURE__*/React.createElement(Label, {
|
|
84
|
-
disabled: disabled,
|
|
85
|
-
selected: selected
|
|
86
|
-
}, selected && selected.label || label), /*#__PURE__*/React.createElement(ChevronDown, {
|
|
87
|
-
width: 20,
|
|
88
|
-
height: 20,
|
|
89
|
-
fill: iconColor()
|
|
90
|
-
})), error && !selected && /*#__PURE__*/React.createElement(Helper, {
|
|
91
|
-
error: error
|
|
92
|
-
}))), /*#__PURE__*/React.createElement(Backdrop, {
|
|
93
|
-
visible: isOpen,
|
|
94
|
-
title: label,
|
|
95
|
-
onClose: function onClose() {
|
|
96
|
-
return toggleIsOpen(false);
|
|
97
|
-
}
|
|
98
|
-
}, /*#__PURE__*/React.createElement(Options, {
|
|
99
|
-
options: options,
|
|
100
|
-
selectedOption: selected,
|
|
101
|
-
cancelActionLabel: cancelActionLabel,
|
|
102
|
-
confirmActionLabel: confirmActionLabel,
|
|
103
|
-
onClose: function onClose() {
|
|
104
|
-
return toggleIsOpen(false);
|
|
105
|
-
},
|
|
106
|
-
onSelect: function onSelect(item) {
|
|
107
|
-
toggleIsSelected(item);
|
|
108
|
-
onChange(item);
|
|
109
|
-
toggleIsOpen(false);
|
|
110
|
-
}
|
|
111
|
-
})));
|
|
112
|
-
});
|
|
113
|
-
Dropdown.propTypes = {
|
|
114
|
-
label: string,
|
|
115
|
-
disabled: bool,
|
|
116
|
-
error: string,
|
|
117
|
-
full: bool,
|
|
118
|
-
|
|
119
|
-
/** { label (string), value (string or number), selected: (boolean) } */
|
|
120
|
-
options: arrayOf(shape({
|
|
121
|
-
label: string,
|
|
122
|
-
value: oneOfType([string, number]),
|
|
123
|
-
selected: bool
|
|
124
|
-
})).isRequired,
|
|
125
|
-
|
|
126
|
-
/** Cancel label that will be shown in iOS option chooser */
|
|
127
|
-
cancelActionLabel: string,
|
|
128
|
-
|
|
129
|
-
/** Confirm label that will be shown in iOS option chooser */
|
|
130
|
-
confirmActionLabel: string,
|
|
131
|
-
onChange: func
|
|
132
|
-
};
|
|
133
|
-
Dropdown.defaultProps = {
|
|
134
|
-
label: '',
|
|
135
|
-
error: undefined,
|
|
136
|
-
full: false,
|
|
137
|
-
cancelActionLabel: 'Cancel',
|
|
138
|
-
confirmActionLabel: 'Confirm',
|
|
139
|
-
disabled: false,
|
|
140
|
-
onChange: function onChange() {}
|
|
141
|
-
};
|
|
142
|
-
export default withTheme(Dropdown);
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
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); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { render } from '@testing-library/react-native';
|
|
5
|
-
import { ThemeProvider, Dropdown } from '../..';
|
|
6
|
-
jest.useFakeTimers();
|
|
7
|
-
var dropdownProps = {
|
|
8
|
-
label: 'Find an activity to love',
|
|
9
|
-
options: [{
|
|
10
|
-
label: 'Yoga',
|
|
11
|
-
value: 'yoga'
|
|
12
|
-
}, {
|
|
13
|
-
label: 'Crossfit',
|
|
14
|
-
value: 'crossfit'
|
|
15
|
-
}, {
|
|
16
|
-
label: 'Tenis',
|
|
17
|
-
value: 'tenis'
|
|
18
|
-
}, {
|
|
19
|
-
label: 'Soccer',
|
|
20
|
-
value: 'soccer'
|
|
21
|
-
}, {
|
|
22
|
-
label: 'Pilates',
|
|
23
|
-
value: 'pilates'
|
|
24
|
-
}, {
|
|
25
|
-
label: 'Run',
|
|
26
|
-
value: 'running'
|
|
27
|
-
}]
|
|
28
|
-
};
|
|
29
|
-
describe('<Dropdown />', function () {
|
|
30
|
-
describe('Snapshots', function () {
|
|
31
|
-
it('should match snapshot', function () {
|
|
32
|
-
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, dropdownProps))),
|
|
33
|
-
toJSON = _render.toJSON;
|
|
34
|
-
|
|
35
|
-
expect(toJSON()).toMatchSnapshot();
|
|
36
|
-
});
|
|
37
|
-
it('should match snapshot when disabled', function () {
|
|
38
|
-
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
39
|
-
disabled: true
|
|
40
|
-
}, dropdownProps)))),
|
|
41
|
-
toJSON = _render2.toJSON;
|
|
42
|
-
|
|
43
|
-
expect(toJSON()).toMatchSnapshot();
|
|
44
|
-
});
|
|
45
|
-
it('should match snapshot when full', function () {
|
|
46
|
-
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
47
|
-
full: true
|
|
48
|
-
}, dropdownProps)))),
|
|
49
|
-
toJSON = _render3.toJSON;
|
|
50
|
-
|
|
51
|
-
expect(toJSON()).toMatchSnapshot();
|
|
52
|
-
});
|
|
53
|
-
it('should match snapshot when has a selected value', function () {
|
|
54
|
-
var selectedOption = {
|
|
55
|
-
label: 'Swimming',
|
|
56
|
-
value: 'swimming',
|
|
57
|
-
selected: true
|
|
58
|
-
};
|
|
59
|
-
var props = dropdownProps;
|
|
60
|
-
props.options.push(selectedOption);
|
|
61
|
-
|
|
62
|
-
var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
63
|
-
disabled: true
|
|
64
|
-
}, props)))),
|
|
65
|
-
toJSON = _render4.toJSON;
|
|
66
|
-
|
|
67
|
-
expect(toJSON()).toMatchSnapshot();
|
|
68
|
-
});
|
|
69
|
-
it('should match snapshot with error', function () {
|
|
70
|
-
var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
|
|
71
|
-
error: "Please, select one activity"
|
|
72
|
-
})))),
|
|
73
|
-
toJSON = _render5.toJSON;
|
|
74
|
-
|
|
75
|
-
expect(toJSON()).toMatchSnapshot();
|
|
76
|
-
});
|
|
77
|
-
});
|
|
78
|
-
});
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
var _templateObject, _templateObject2;
|
|
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 styled from 'styled-components';
|
|
7
|
-
import { func, arrayOf, string, shape, number, oneOfType } from 'prop-types';
|
|
8
|
-
import { TouchableWithoutFeedback } from 'react-native';
|
|
9
|
-
import Text from '../../Text';
|
|
10
|
-
import List from '../../List';
|
|
11
|
-
var Option = styled(List.Item)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
12
|
-
var isSelected = _ref.isSelected,
|
|
13
|
-
dropdown = _ref.theme.yoga.components.dropdown;
|
|
14
|
-
return "\n padding:\n " + dropdown.backdrop.content.option.padding.top + "px\n " + dropdown.backdrop.content.option.padding.right + "px\n " + dropdown.backdrop.content.option.padding.bottom + "px\n " + dropdown.backdrop.content.option.padding.left + "px;\n\n border-bottom-width: " + dropdown.option.border.width + "px;\n background-color: " + (isSelected ? "" + dropdown.hover.option.backgroundColor : 'transparent') + ";\n ";
|
|
15
|
-
});
|
|
16
|
-
var OptionText = styled.Text(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
|
|
17
|
-
var isSelected = _ref2.isSelected,
|
|
18
|
-
dropdown = _ref2.theme.yoga.components.dropdown;
|
|
19
|
-
return "\n font-size: " + dropdown.option.font.size + "px;\n line-height: " + dropdown.option.font.lineHeight + "px;\n color: " + (isSelected ? "" + dropdown.selected.option.font.color : "" + dropdown.option.font.color) + ";\n ";
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
var Options = function Options(_ref3) {
|
|
23
|
-
var options = _ref3.options,
|
|
24
|
-
selectedOption = _ref3.selectedOption,
|
|
25
|
-
onSelect = _ref3.onSelect;
|
|
26
|
-
return /*#__PURE__*/React.createElement(List, {
|
|
27
|
-
style: {
|
|
28
|
-
height: 60 * 3.6
|
|
29
|
-
},
|
|
30
|
-
data: options.map(function (item) {
|
|
31
|
-
return item;
|
|
32
|
-
}),
|
|
33
|
-
keyExtractor: function keyExtractor(_, index) {
|
|
34
|
-
return index.toString();
|
|
35
|
-
},
|
|
36
|
-
renderItem: function renderItem(_ref4) {
|
|
37
|
-
var item = _ref4.item;
|
|
38
|
-
return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
|
|
39
|
-
onPress: function onPress() {
|
|
40
|
-
return onSelect(item);
|
|
41
|
-
}
|
|
42
|
-
}, /*#__PURE__*/React.createElement(Option, {
|
|
43
|
-
key: item.value,
|
|
44
|
-
isSelected: selectedOption && selectedOption.value === item.value
|
|
45
|
-
}, /*#__PURE__*/React.createElement(OptionText, {
|
|
46
|
-
isSelected: selectedOption && selectedOption.value === item.value,
|
|
47
|
-
as: selectedOption && selectedOption.value === item.value ? Text.Bold : Text.Regular
|
|
48
|
-
}, item.label)));
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
var optionShape = {
|
|
54
|
-
label: string,
|
|
55
|
-
value: oneOfType([string, number])
|
|
56
|
-
};
|
|
57
|
-
Options.propTypes = {
|
|
58
|
-
options: arrayOf(shape(optionShape)).isRequired,
|
|
59
|
-
selectedOption: shape(optionShape),
|
|
60
|
-
onSelect: func
|
|
61
|
-
};
|
|
62
|
-
Options.defaultProps = {
|
|
63
|
-
selectedOption: null,
|
|
64
|
-
onSelect: function onSelect() {}
|
|
65
|
-
};
|
|
66
|
-
export default Options;
|