@spothero/ui 13.9.0-beta.0 → 13.10.0-beta.0
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/CHANGELOG.md +12 -1
- package/CHANGELOG.tmp +7 -1
- package/backlog/GooglePlacesSearchInput/GooglePlacesSearchInput.js +5 -10
- package/package.json +1 -1
- package/styles/GooglePlacesSearchInput/GooglePlacesSearchInput.jsx +20 -10
- package/styles/v2/components/ImageCarousel/ImageCarousel.jsx +9 -3
- package/styles/v2/components/Popover/Popover.jsx +28 -0
- package/styles/v2/components/Popover/Popover.stories.js +113 -0
- package/styles/v2/components/Popover/PopoverArrow.jsx +10 -0
- package/styles/v2/components/Popover/PopoverCloseButton.jsx +10 -0
- package/styles/v2/components/Popover/PopoverContent.jsx +41 -0
- package/styles/v2/components/Popover/index.js +3 -0
- package/styles/v2/components/Popover/styles/index.js +21 -0
- package/styles/v2/components/Popover/styles/popover-arrow.js +5 -0
- package/styles/v2/components/Popover/styles/popover-body.js +5 -0
- package/styles/v2/components/Popover/styles/popover-close-button.js +17 -0
- package/styles/v2/components/Popover/styles/popover-content.js +5 -0
- package/styles/v2/components/Popover/styles/popover-header.js +6 -0
- package/styles/v2/components/Popover/styles/popper.js +12 -0
- package/styles/v2/components/index.js +1 -0
- package/styles/v2/components/styles.js +1 -0
- package/v2/index-bundled-cjs/ImageCarousel-e8e079e8.js +2 -0
- package/v2/index-bundled-cjs/ImageCarousel-e8e079e8.js.map +1 -0
- package/v2/index-bundled-cjs/index-e7e488ba.js +25 -0
- package/v2/index-bundled-cjs/index-e7e488ba.js.map +1 -0
- package/v2/index-bundled-cjs/index.js +1 -1
- package/v2/index-bundled-esm/ImageCarousel-64780662.js +2 -0
- package/v2/index-bundled-esm/ImageCarousel-64780662.js.map +1 -0
- package/v2/index-bundled-esm/index-0fa0fa5c.js +24 -0
- package/v2/index-bundled-esm/index-0fa0fa5c.js.map +1 -0
- package/v2/index-bundled-esm/index.js +1 -1
- package/v2/index-unbundled-cjs/{ImageCarousel-faf73c8f.js → ImageCarousel-bc41393b.js} +3 -30
- package/v2/index-unbundled-cjs/ImageCarousel-bc41393b.js.map +1 -0
- package/v2/index-unbundled-cjs/{index-6faea84f.js → index-beb87ca2.js} +4691 -963
- package/v2/index-unbundled-cjs/index-beb87ca2.js.map +1 -0
- package/v2/index-unbundled-cjs/index.js +4 -1
- package/v2/index-unbundled-cjs/index.js.map +1 -1
- package/v2/index-unbundled-esm/{ImageCarousel-98a6f276.js → ImageCarousel-d3597a8c.js} +2 -29
- package/v2/index-unbundled-esm/ImageCarousel-d3597a8c.js.map +1 -0
- package/v2/index-unbundled-esm/{index-0ffe7573.js → index-0ea45e07.js} +4676 -951
- package/v2/index-unbundled-esm/index-0ea45e07.js.map +1 -0
- package/v2/index-unbundled-esm/index.js +1 -1
- package/v2/index-bundled-cjs/ImageCarousel-27b16e10.js +0 -2
- package/v2/index-bundled-cjs/ImageCarousel-27b16e10.js.map +0 -1
- package/v2/index-bundled-cjs/index-707d3bd2.js +0 -25
- package/v2/index-bundled-cjs/index-707d3bd2.js.map +0 -1
- package/v2/index-bundled-esm/ImageCarousel-c171c392.js +0 -2
- package/v2/index-bundled-esm/ImageCarousel-c171c392.js.map +0 -1
- package/v2/index-bundled-esm/index-403b1b51.js +0 -24
- package/v2/index-bundled-esm/index-403b1b51.js.map +0 -1
- package/v2/index-unbundled-cjs/ImageCarousel-faf73c8f.js.map +0 -1
- package/v2/index-unbundled-cjs/index-6faea84f.js.map +0 -1
- package/v2/index-unbundled-esm/ImageCarousel-98a6f276.js.map +0 -1
- package/v2/index-unbundled-esm/index-0ffe7573.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,8 +1,19 @@
|
|
|
1
|
-
# 13.
|
|
1
|
+
# 13.10.0-beta.0 - 02/22/2022
|
|
2
|
+
## Miscellaneous Updates
|
|
2
3
|
|
|
3
4
|
## New Features
|
|
4
5
|
* [[4193a26](https://github.com/spothero/fe-ui/commit/4193a26)] - Updated Autocomplete to accept biasing options (Nathan)
|
|
5
6
|
|
|
7
|
+
## Miscellaneous Updates
|
|
8
|
+
* [[3a93a18](https://github.com/spothero/fe-ui/commit/3a93a18)] - 13.9.0-beta.0 (sh-devtools-bot)
|
|
9
|
+
* [[e6ab74b](https://github.com/spothero/fe-ui/commit/e6ab74b)] - `chore:` Updated location options (Nathan)
|
|
10
|
+
* [[19f8451](https://github.com/spothero/fe-ui/commit/19f8451)] - `chore:` Updated PropTypes for geolocation biasing (Nathan)
|
|
11
|
+
|
|
12
|
+
# 13.9.0 - 02/17/2022
|
|
13
|
+
|
|
14
|
+
## New Features
|
|
15
|
+
* [[5229309](https://github.com/spothero/fe-ui/commit/5229309)] - Adds Popover component ([#270](https://github.com/spothero/fe-ui/pull/270)) (Tyler Williams)
|
|
16
|
+
|
|
6
17
|
# 13.8.0 - 01/26/2022
|
|
7
18
|
|
|
8
19
|
## New Features
|
package/CHANGELOG.tmp
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
# 13.
|
|
1
|
+
# 13.10.0-beta.0 - 02/22/2022
|
|
2
|
+
## Miscellaneous Updates
|
|
2
3
|
|
|
3
4
|
## New Features
|
|
4
5
|
* [[4193a26](https://github.com/spothero/fe-ui/commit/4193a26)] - Updated Autocomplete to accept biasing options (Nathan)
|
|
5
6
|
|
|
7
|
+
## Miscellaneous Updates
|
|
8
|
+
* [[3a93a18](https://github.com/spothero/fe-ui/commit/3a93a18)] - 13.9.0-beta.0 (sh-devtools-bot)
|
|
9
|
+
* [[e6ab74b](https://github.com/spothero/fe-ui/commit/e6ab74b)] - `chore:` Updated location options (Nathan)
|
|
10
|
+
* [[19f8451](https://github.com/spothero/fe-ui/commit/19f8451)] - `chore:` Updated PropTypes for geolocation biasing (Nathan)
|
|
11
|
+
|
|
@@ -149,9 +149,7 @@ var GooglePlacesSearchInput = /*#__PURE__*/function (_Component) {
|
|
|
149
149
|
country = _this$props.country,
|
|
150
150
|
types = _this$props.types,
|
|
151
151
|
bounds = _this$props.bounds,
|
|
152
|
-
|
|
153
|
-
location = _this$props$biasOptio.location,
|
|
154
|
-
radius = _this$props$biasOptio.radius;
|
|
152
|
+
biasOptions = _this$props.biasOptions;
|
|
155
153
|
var autocompleteSessionToken = _this.state.autocompleteSessionToken;
|
|
156
154
|
|
|
157
155
|
var options = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
@@ -164,9 +162,9 @@ var GooglePlacesSearchInput = /*#__PURE__*/function (_Component) {
|
|
|
164
162
|
}
|
|
165
163
|
}), types && {
|
|
166
164
|
types: types
|
|
167
|
-
}), location && {
|
|
168
|
-
location: location,
|
|
169
|
-
radius: radius
|
|
165
|
+
}), (biasOptions === null || biasOptions === void 0 ? void 0 : biasOptions.location) && {
|
|
166
|
+
location: new _this._gmaps.LatLng(location.latitude, location.longitude),
|
|
167
|
+
radius: biasOptions === null || biasOptions === void 0 ? void 0 : biasOptions.radius
|
|
170
168
|
}), {}, {
|
|
171
169
|
sessionToken: autocompleteSessionToken
|
|
172
170
|
});
|
|
@@ -255,8 +253,5 @@ exports.default = GooglePlacesSearchInput;
|
|
|
255
253
|
(0, _defineProperty2.default)(GooglePlacesSearchInput, "defaultProps", {
|
|
256
254
|
placeholder: 'Search Address or Venue',
|
|
257
255
|
country: 'us',
|
|
258
|
-
icon: /*#__PURE__*/_react.default.createElement(_search.default, null)
|
|
259
|
-
biasOptions: {
|
|
260
|
-
radius: 8000
|
|
261
|
-
}
|
|
256
|
+
icon: /*#__PURE__*/_react.default.createElement(_search.default, null)
|
|
262
257
|
});
|
package/package.json
CHANGED
|
@@ -31,22 +31,26 @@ export default class GooglePlacesSearchInput extends Component {
|
|
|
31
31
|
biasOptions: PropTypes.shape({
|
|
32
32
|
/** The location (lat and long), to bias the search results around.
|
|
33
33
|
* * @see https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest.location
|
|
34
|
-
|
|
34
|
+
*/
|
|
35
35
|
location: PropTypes.shape({
|
|
36
36
|
latitude: PropTypes.number,
|
|
37
|
-
|
|
37
|
+
longitude: PropTypes.number,
|
|
38
38
|
}),
|
|
39
|
-
/** The radius, in meters, to bias the search results within */
|
|
40
|
-
radius:
|
|
41
|
-
|
|
39
|
+
/** The radius, in meters, to bias the search results within - required when providing a location for biasing */
|
|
40
|
+
radius: (props, propName) =>
|
|
41
|
+
props.biasOptions.location.latitude &&
|
|
42
|
+
props.biasOptions.location.longitude &&
|
|
43
|
+
(Boolean(props[propName]) === false ||
|
|
44
|
+
typeof props[propName] !== 'number') &&
|
|
45
|
+
new Error(
|
|
46
|
+
'A radius value is required when biasing autocomplete suggestions'
|
|
47
|
+
),
|
|
48
|
+
}),
|
|
42
49
|
};
|
|
43
50
|
static defaultProps = {
|
|
44
51
|
placeholder: 'Search Address or Venue',
|
|
45
52
|
country: 'us',
|
|
46
53
|
icon: <IconSearch />,
|
|
47
|
-
biasOptions: {
|
|
48
|
-
radius: 8000,
|
|
49
|
-
}
|
|
50
54
|
};
|
|
51
55
|
|
|
52
56
|
constructor(props) {
|
|
@@ -129,7 +133,7 @@ export default class GooglePlacesSearchInput extends Component {
|
|
|
129
133
|
};
|
|
130
134
|
|
|
131
135
|
_searchSuggestions = value => {
|
|
132
|
-
const {country, types, bounds, biasOptions
|
|
136
|
+
const {country, types, bounds, biasOptions} = this.props;
|
|
133
137
|
const {autocompleteSessionToken} = this.state;
|
|
134
138
|
|
|
135
139
|
const options = {
|
|
@@ -141,7 +145,13 @@ export default class GooglePlacesSearchInput extends Component {
|
|
|
141
145
|
},
|
|
142
146
|
}),
|
|
143
147
|
...(types && {types}),
|
|
144
|
-
...(location && {
|
|
148
|
+
...(biasOptions?.location && {
|
|
149
|
+
location: new this._gmaps.LatLng(
|
|
150
|
+
location.latitude,
|
|
151
|
+
location.longitude
|
|
152
|
+
),
|
|
153
|
+
radius: biasOptions?.radius,
|
|
154
|
+
}),
|
|
145
155
|
sessionToken: autocompleteSessionToken,
|
|
146
156
|
};
|
|
147
157
|
|
|
@@ -48,7 +48,13 @@ const ImageCarousel = ({images, width, height, ...props}) => {
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
return (
|
|
51
|
-
<Box
|
|
51
|
+
<Box
|
|
52
|
+
as="section"
|
|
53
|
+
position="relative"
|
|
54
|
+
overflow="hidden"
|
|
55
|
+
width={imgWidth}
|
|
56
|
+
{...props}
|
|
57
|
+
>
|
|
52
58
|
<Box ref={viewportRef}>
|
|
53
59
|
<Box display="flex" role="group">
|
|
54
60
|
{images.map((image, index) => {
|
|
@@ -103,7 +109,7 @@ const ImageCarousel = ({images, width, height, ...props}) => {
|
|
|
103
109
|
bgColor="black"
|
|
104
110
|
opacity="0.6"
|
|
105
111
|
>
|
|
106
|
-
<IconChevronLeft/>
|
|
112
|
+
<IconChevronLeft />
|
|
107
113
|
</Box>
|
|
108
114
|
</Button>
|
|
109
115
|
<Button
|
|
@@ -132,7 +138,7 @@ const ImageCarousel = ({images, width, height, ...props}) => {
|
|
|
132
138
|
bgColor="black"
|
|
133
139
|
opacity="0.6"
|
|
134
140
|
>
|
|
135
|
-
<IconChevronRight/>
|
|
141
|
+
<IconChevronRight />
|
|
136
142
|
</Box>
|
|
137
143
|
</Button>
|
|
138
144
|
<Box
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React, {forwardRef, cloneElement, Children} from 'react';
|
|
2
|
+
import {Popover as ChakraPopover} from '@chakra-ui/react';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
|
|
5
|
+
const Popover = forwardRef((props, ref) => {
|
|
6
|
+
const {children, ...rest} = props;
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<ChakraPopover {...rest} ref={ref}>
|
|
10
|
+
{Children.toArray(children).map((child, index) =>
|
|
11
|
+
cloneElement(child, {
|
|
12
|
+
ref,
|
|
13
|
+
variant: props.variant,
|
|
14
|
+
key: `Popover-child-${index}`,
|
|
15
|
+
})
|
|
16
|
+
)}
|
|
17
|
+
</ChakraPopover>
|
|
18
|
+
);
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
Popover.propTypes = {
|
|
22
|
+
/** React children */
|
|
23
|
+
children: PropTypes.node,
|
|
24
|
+
/** Styles the Popover */
|
|
25
|
+
variant: PropTypes.oneOf(['light', 'dark']),
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export default Popover;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
|
|
4
|
+
import disableArgs from 'storybook/utils/disable-args';
|
|
5
|
+
import {createSelectControl} from 'storybook/utils/create-control';
|
|
6
|
+
|
|
7
|
+
import {Popover, PopoverContent, PopoverTrigger} from './index';
|
|
8
|
+
|
|
9
|
+
import {Flex} from '@chakra-ui/react';
|
|
10
|
+
import Button from 'v2/components/Button/Button';
|
|
11
|
+
|
|
12
|
+
export default {
|
|
13
|
+
title: 'v2/Popover',
|
|
14
|
+
component: Popover,
|
|
15
|
+
subcomponents: {
|
|
16
|
+
PopoverContent,
|
|
17
|
+
PopoverTrigger,
|
|
18
|
+
},
|
|
19
|
+
parameters: {
|
|
20
|
+
importBy: 'Popover',
|
|
21
|
+
removeBaseHtmlClass: true,
|
|
22
|
+
chakraLink: 'https://chakra-ui.com/docs/overlay/popover',
|
|
23
|
+
},
|
|
24
|
+
argTypes: {
|
|
25
|
+
...disableArgs('children'),
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const OverviewTemplate = props => (
|
|
30
|
+
<Popover defaultIsOpen {...props}>
|
|
31
|
+
<Flex justifyContent="center" alignItems="center">
|
|
32
|
+
<PopoverTrigger>
|
|
33
|
+
<Button>Trigger</Button>
|
|
34
|
+
</PopoverTrigger>
|
|
35
|
+
</Flex>
|
|
36
|
+
|
|
37
|
+
<PopoverContent header="Confirmation!">
|
|
38
|
+
Are you sure you want to have that milkshake?
|
|
39
|
+
</PopoverContent>
|
|
40
|
+
</Popover>
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
OverviewTemplate.propTypes = {
|
|
44
|
+
variant: PropTypes.oneOf(['light', 'dark']),
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export const Variant = OverviewTemplate.bind({});
|
|
48
|
+
Variant.argTypes = {
|
|
49
|
+
...createSelectControl('variant', ['light', 'dark']),
|
|
50
|
+
};
|
|
51
|
+
Variant.args = {
|
|
52
|
+
variant: 'light',
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export const Placement = OverviewTemplate.bind({});
|
|
56
|
+
Placement.argTypes = {
|
|
57
|
+
...createSelectControl('placement', [
|
|
58
|
+
'top',
|
|
59
|
+
'right',
|
|
60
|
+
'bottom',
|
|
61
|
+
'left',
|
|
62
|
+
'auto',
|
|
63
|
+
'auto-start',
|
|
64
|
+
'auto-end',
|
|
65
|
+
'top-start',
|
|
66
|
+
'top-end',
|
|
67
|
+
'bottom-start',
|
|
68
|
+
'bottom-end',
|
|
69
|
+
'right-start',
|
|
70
|
+
'right-end',
|
|
71
|
+
'left-start',
|
|
72
|
+
'left-end',
|
|
73
|
+
]),
|
|
74
|
+
|
|
75
|
+
...disableArgs('variant'),
|
|
76
|
+
};
|
|
77
|
+
Placement.args = {
|
|
78
|
+
placement: 'bottom',
|
|
79
|
+
};
|
|
80
|
+
const NoHeaderTemplate = props => (
|
|
81
|
+
<Popover defaultIsOpen {...props}>
|
|
82
|
+
<PopoverTrigger>
|
|
83
|
+
<Button>Trigger</Button>
|
|
84
|
+
</PopoverTrigger>
|
|
85
|
+
|
|
86
|
+
<PopoverContent>
|
|
87
|
+
Are you sure you want to have that milkshake?
|
|
88
|
+
</PopoverContent>
|
|
89
|
+
</Popover>
|
|
90
|
+
);
|
|
91
|
+
|
|
92
|
+
export const NoHeader = NoHeaderTemplate.bind({});
|
|
93
|
+
|
|
94
|
+
NoHeader.argTypes = {
|
|
95
|
+
...disableArgs(['variant', 'placement']),
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
const NoCloseButtonTemplate = props => (
|
|
99
|
+
<Popover defaultIsOpen {...props}>
|
|
100
|
+
<PopoverTrigger>
|
|
101
|
+
<Button>Trigger</Button>
|
|
102
|
+
</PopoverTrigger>
|
|
103
|
+
|
|
104
|
+
<PopoverContent hideCloseButton header="Confirmation!">
|
|
105
|
+
Are you sure you want to have that milkshake?
|
|
106
|
+
</PopoverContent>
|
|
107
|
+
</Popover>
|
|
108
|
+
);
|
|
109
|
+
|
|
110
|
+
export const NoCloseButton = NoCloseButtonTemplate.bind({});
|
|
111
|
+
NoCloseButton.argTypes = {
|
|
112
|
+
...disableArgs(['variant', 'placement']),
|
|
113
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, {forwardRef} from 'react';
|
|
2
|
+
import {PopoverArrow as ChakraPopoverArrow} from '@chakra-ui/react';
|
|
3
|
+
|
|
4
|
+
import styles from './styles/popover-arrow';
|
|
5
|
+
|
|
6
|
+
const PopoverArrow = forwardRef((props, ref) => {
|
|
7
|
+
return <ChakraPopoverArrow ref={ref} {...props} {...styles(props)} />;
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
export default PopoverArrow;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, {forwardRef} from 'react';
|
|
2
|
+
import {PopoverCloseButton as ChakraPopoverCloseButton} from '@chakra-ui/react';
|
|
3
|
+
|
|
4
|
+
import styles from './styles/popover-close-button';
|
|
5
|
+
|
|
6
|
+
const PopoverCloseButton = forwardRef((props, ref) => {
|
|
7
|
+
return <ChakraPopoverCloseButton ref={ref} {...props} {...styles(props)} />;
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
export default PopoverCloseButton;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React, {forwardRef} from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import {
|
|
4
|
+
PopoverBody,
|
|
5
|
+
PopoverHeader,
|
|
6
|
+
PopoverContent as ChakraPopoverContent,
|
|
7
|
+
} from '@chakra-ui/react';
|
|
8
|
+
|
|
9
|
+
import PopoverArrow from './PopoverArrow';
|
|
10
|
+
import PopoverCloseButton from './PopoverCloseButton';
|
|
11
|
+
|
|
12
|
+
const PopoverContent = forwardRef((props, ref) => {
|
|
13
|
+
const {header, variant, children, hideCloseButton, ...rest} = props;
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<ChakraPopoverContent {...rest} ref={ref}>
|
|
17
|
+
<PopoverArrow variant={variant} />
|
|
18
|
+
{hideCloseButton ? null : <PopoverCloseButton variant={variant} />}
|
|
19
|
+
{header ? <PopoverHeader>{header}</PopoverHeader> : null}
|
|
20
|
+
<PopoverBody>{children}</PopoverBody>
|
|
21
|
+
</ChakraPopoverContent>
|
|
22
|
+
);
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
PopoverContent.propTypes = {
|
|
26
|
+
/** React children */
|
|
27
|
+
children: PropTypes.node,
|
|
28
|
+
/** Whether or not to hide the close button */
|
|
29
|
+
hideCloseButton: PropTypes.bool,
|
|
30
|
+
/** Styles the Popover */
|
|
31
|
+
variant: PropTypes.oneOf(['light', 'dark']),
|
|
32
|
+
/** The string or node for the header (optional) */
|
|
33
|
+
header: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
PopoverContent.defaultProps = {
|
|
37
|
+
variant: 'light',
|
|
38
|
+
hideCloseButton: false,
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export default PopoverContent;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import merge from 'lodash/merge';
|
|
2
|
+
import chakraDefaultTheme from '@chakra-ui/theme';
|
|
3
|
+
|
|
4
|
+
import popper from './popper';
|
|
5
|
+
import body from './popover-body';
|
|
6
|
+
import header from './popover-header';
|
|
7
|
+
import content from './popover-content';
|
|
8
|
+
|
|
9
|
+
const parts = ['popper', 'content', 'header', 'body'];
|
|
10
|
+
|
|
11
|
+
const baseStyle = props => ({
|
|
12
|
+
header,
|
|
13
|
+
content,
|
|
14
|
+
body: body(props),
|
|
15
|
+
popper: popper(props),
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export default merge(chakraDefaultTheme.components.Popover, {
|
|
19
|
+
parts,
|
|
20
|
+
baseStyle,
|
|
21
|
+
});
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
const pseudoStyles = variant => ({
|
|
2
|
+
bgColor: variant === 'dark' ? 'gray.600' : 'gray.50',
|
|
3
|
+
});
|
|
4
|
+
|
|
5
|
+
const closeButtonStyles = ({variant}) => ({
|
|
6
|
+
color: variant === 'dark' ? 'white' : 'black',
|
|
7
|
+
fontSize: '0.5rem',
|
|
8
|
+
position: 'absolute',
|
|
9
|
+
top: 0,
|
|
10
|
+
right: 0,
|
|
11
|
+
padding: 4,
|
|
12
|
+
borderTopRightRadius: 4,
|
|
13
|
+
_hover: pseudoStyles(variant),
|
|
14
|
+
_focus: pseudoStyles(variant),
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export default closeButtonStyles;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const popperStyles = ({variant}) => ({
|
|
2
|
+
borderRadius: 4,
|
|
3
|
+
boxShadow: '2px 2px 4px 0 rgba(0,45,91,0.1)',
|
|
4
|
+
color: variant === 'dark' ? 'white' : 'black',
|
|
5
|
+
background: variant === 'dark' ? 'secondary.default' : 'white',
|
|
6
|
+
borderColor: 'gray.100',
|
|
7
|
+
'--popper-arrow-shadow-color': t => t.colors.gray['100'],
|
|
8
|
+
borderWidth: '1px',
|
|
9
|
+
borderStyle: 'solid',
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
export default popperStyles;
|
|
@@ -23,6 +23,7 @@ export {default as Image} from './Image/Image';
|
|
|
23
23
|
export const ImageCarousel = import('./ImageCarousel/ImageCarousel');
|
|
24
24
|
export {default as Loader} from './Loader/Loader';
|
|
25
25
|
export {default as Checkbox} from './Checkbox';
|
|
26
|
+
export {Popover, PopoverTrigger, PopoverContent} from './Popover';
|
|
26
27
|
|
|
27
28
|
// generic chakra reexports
|
|
28
29
|
export {
|
|
@@ -10,3 +10,4 @@ export {default as Heading} from './Heading/Heading.styles';
|
|
|
10
10
|
export {default as Tabs} from './Tabs/styles';
|
|
11
11
|
export {default as Select} from './Select/styles';
|
|
12
12
|
export {default as Checkbox} from './Checkbox/styles';
|
|
13
|
+
export {default as Popover} from './Popover/styles';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("./index-e7e488ba.js"),t=require("react"),n=require("prop-types"),r=require("@spothero/icons/chevron-left"),o=require("@spothero/icons/chevron-right");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("lodash/merge"),require("@spothero/utils/environment"),require("lodash/template"),require("react-dom");var i=a(t),u=a(n),c=a(r),l=a(o);e._export({target:"Array",stat:!0},{isArray:e.isArray});var s=e.path.Array.isArray;var d=Object.freeze({__proto__:null});e.defineWellKnownSymbol("asyncIterator");var f=Object.freeze({__proto__:null});e.defineWellKnownSymbol("hasInstance"),e.defineWellKnownSymbol("isConcatSpreadable"),e.defineWellKnownSymbol("iterator"),e.defineWellKnownSymbol("match"),e.defineWellKnownSymbol("matchAll"),e.defineWellKnownSymbol("replace"),e.defineWellKnownSymbol("search"),e.defineWellKnownSymbol("species"),e.defineWellKnownSymbol("split"),e.defineWellKnownSymbol("toPrimitive"),e.defineWellKnownSymbol("toStringTag"),e.defineWellKnownSymbol("unscopables"),e.setToStringTag(e.global_1.JSON,"JSON",!0);var p=Object.freeze({__proto__:null}),g=Object.freeze({__proto__:null});e.getCjsExportFromNamespace(d),e.getCjsExportFromNamespace(f),e.getCjsExportFromNamespace(p),e.getCjsExportFromNamespace(g);var m=e.path.Symbol;e.defineWellKnownSymbol("asyncDispose"),e.defineWellKnownSymbol("dispose"),e.defineWellKnownSymbol("matcher"),e.defineWellKnownSymbol("metadata"),e.defineWellKnownSymbol("observable"),e.defineWellKnownSymbol("patternMatch"),e.defineWellKnownSymbol("replaceAll");var v=m,h=e.functionUncurryThis("".charAt),b=e.functionUncurryThis("".charCodeAt),y=e.functionUncurryThis("".slice),x=function(t){return function(n,r){var o,a,i=e.toString_1(e.requireObjectCoercible(n)),u=e.toIntegerOrInfinity(r),c=i.length;return u<0||u>=c?t?"":void 0:(o=b(i,u))<55296||o>56319||u+1===c||(a=b(i,u+1))<56320||a>57343?t?h(i,u):o:t?y(i,u,u+2):a-56320+(o-55296<<10)+65536}},w={codeAt:x(!1),charAt:x(!0)}.charAt,S=e.internalState.set,A=e.internalState.getterFor("String Iterator");e.defineIterator(String,"String",(function(t){S(this,{type:"String Iterator",string:e.toString_1(t),index:0})}),(function(){var e,t=A(this),n=t.string,r=t.index;return r>=n.length?{value:void 0,done:!0}:(e=w(n,r),t.index+=e.length,{value:e,done:!1})}));var E=e.wellKnownSymbol("iterator"),C=function(t){if(null!=t)return e.getMethod(t,E)||e.getMethod(t,"@@iterator")||e.iterators[e.classof(t)]},M=C;var O=e.arrayMethodHasSpeciesSupport("slice"),I=e.wellKnownSymbol("species"),T=e.global_1.Array,j=Math.max;e._export({target:"Array",proto:!0,forced:!O},{slice:function(t,n){var r,o,a,i=e.toIndexedObject(this),u=e.lengthOfArrayLike(i),c=e.toAbsoluteIndex(t,u),l=e.toAbsoluteIndex(void 0===n?u:n,u);if(e.isArray(i)&&(r=i.constructor,(e.isConstructor(r)&&(r===T||e.isArray(r.prototype))||e.isObject(r)&&null===(r=r[I]))&&(r=void 0),r===T||void 0===r))return e.arraySlice(i,c,l);for(o=new(void 0===r?T:r)(j(l-c,0)),a=0;c<l;c++,a++)c in i&&e.createProperty(o,a,i[c]);return o.length=a,o}});var _=e.entryVirtual("Array").slice,k=Array.prototype,P=function(t){var n=t.slice;return t===k||e.objectIsPrototypeOf(k,t)&&n===k.slice?_:n},B=function(t,n,r,o){try{return o?n(e.anObject(r)[0],r[1]):n(r)}catch(n){!function(t,n,r){var o,a;e.anObject(t);try{if(!(o=e.getMethod(t,"return"))){if("throw"===n)throw r;return r}o=e.functionCall(o,t)}catch(e){a=!0,o=e}if("throw"===n)throw r;if(a)throw o;e.anObject(o)}(t,"throw",n)}},L=e.wellKnownSymbol("iterator"),K=Array.prototype,W=function(t){return void 0!==t&&(e.iterators.Array===t||K[L]===t)},D=e.global_1.TypeError,N=function(t,n){var r=arguments.length<2?C(t):n;if(e.aCallable(r))return e.anObject(e.functionCall(r,t));throw D(e.tryToString(t)+" is not iterable")},z=e.global_1.Array,q=e.wellKnownSymbol("iterator"),R=!1;try{var F=0,H={next:function(){return{done:!!F++}},return:function(){R=!0}};H[q]=function(){return this},Array.from(H,(function(){throw 2}))}catch(e){}var U=!function(e,t){if(!t&&!R)return!1;var n=!1;try{var r={};r[q]=function(){return{next:function(){return{done:n=!0}}}},e(r)}catch(e){}return n}((function(e){Array.from(e)}));e._export({target:"Array",stat:!0,forced:U},{from:function(t){var n=e.toObject(t),r=e.isConstructor(this),o=arguments.length,a=o>1?arguments[1]:void 0,i=void 0!==a;i&&(a=e.functionBindContext(a,o>2?arguments[2]:void 0));var u,c,l,s,d,f,p=C(n),g=0;if(!p||this==z&&W(p))for(u=e.lengthOfArrayLike(n),c=r?new this(u):z(u);u>g;g++)f=i?a(n[g],g):n[g],e.createProperty(c,g,f);else for(d=(s=N(n,p)).next,c=r?new this:[];!(l=e.functionCall(d,s)).done;g++)f=i?B(s,a,[l.value,g],!0):l.value,e.createProperty(c,g,f);return c.length=g,c}});var G=e.path.Array.from;function V(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function X(e,t){return function(e){if(s(e))return e}(e)||function(e,t){var n=null==e?null:void 0!==v&&M(e)||e["@@iterator"];if(null!=n){var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}}(e,t)||function(e,t){var n;if(e){if("string"==typeof e)return V(e,t);var r=P(n=Object.prototype.toString.call(e)).call(n,8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?G(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?V(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function J(){return J=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},J.apply(this,arguments)}function Y(e,t){var n={start:function(){return 0},center:function(e){return r(e)/2},end:r};function r(e){return t-e}return{measure:function(r){return"number"==typeof e?t*Number(e):n[e](r)}}}function $(e,t){var n=Math.abs(e-t);function r(t){return t<e}function o(e){return e>t}function a(e){return r(e)||o(e)}return{constrain:function(n){return a(n)?r(n)?e:t:n},length:n,max:t,min:e,reachedAny:a,reachedMax:o,reachedMin:r,removeOffset:function(e){return n?e-n*Math.ceil((e-t)/n):e}}}function Q(e,t,n){var r=$(0,e),o=r.min,a=r.constrain,i=e+1,u=c(t);function c(e){return n?Math.abs((i+e)%i):a(e)}function l(){return u}function s(e){return u=c(e),d}var d={add:function(e){return s(l()+e)},clone:function(){return Q(e,l(),n)},get:l,set:s,min:o,max:e};return d}function Z(){var e=[];var t={add:function(n,r,o,a){return void 0===a&&(a=!1),n.addEventListener(r,o,a),e.push((function(){return n.removeEventListener(r,o,a)})),t},removeAll:function(){return e=e.filter((function(e){return e()})),t}};return t}function ee(e){var t=e;function n(e){return t/=e,o}function r(e){return"number"==typeof e?e:e.get()}var o={add:function(e){return t+=r(e),o},divide:n,get:function(){return t},multiply:function(e){return t*=e,o},normalize:function(){return 0!==t&&n(t),o},set:function(e){return t=r(e),o},subtract:function(e){return t-=r(e),o}};return o}function te(e){return e?e/Math.abs(e):0}function ne(e,t){return Math.abs(e-t)}function re(e,t){for(var n=[],r=0;r<e.length;r+=t)n.push(e.slice(r,r+t));return n}function oe(e){return Object.keys(e).map(Number)}function ae(e){return e[ie(e)]}function ie(e){return Math.max(0,e.length-1)}function ue(e,t){var n=e.classList;t&&n.contains(t)&&n.remove(t)}function ce(e,t){var n=e.classList;t&&!n.contains(t)&&n.add(t)}function le(e,t,n,r,o,a,i,u,c,l,s,d,f,p,g){var m=e.scroll,v=e.cross,h=["INPUT","SELECT","TEXTAREA"],b=ee(0),y=ee(0),x=ee(0),w=Z(),S=Z(),A={mouse:2.5,touch:3.5},E={mouse:5,touch:7},C=o?5:16,M=!1,O=!1,I=!1,T=!1;function j(e){if(!(T="mousedown"===e.type)||0===e.button){var t,o,u=ne(r.get(),i.get())>=2,c=T||!u,s=(t=e.target,o=t.nodeName||"",!(h.indexOf(o)>-1)),d=u||T&&s;M=!0,a.pointerDown(e),x.set(r),r.set(i),l.useBaseMass().useSpeed(80),function(){var e=T?document:n;S.add(e,"touchmove",_).add(e,"touchend",k).add(e,"mousemove",_).add(e,"mouseup",k)}(),b.set(a.readPoint(e,m)),y.set(a.readPoint(e,v)),f.emit("pointerDown"),c&&(I=!1),d&&e.preventDefault()}}function _(e){if(!O&&!T){if(!e.cancelable)return k();var n=a.readPoint(e,m).get(),o=a.readPoint(e,v).get(),i=ne(n,b.get()),c=ne(o,y.get());if(!(O=i>c)&&!I)return k()}var l=a.pointerMove(e);!I&&l&&(I=!0),u.start(),r.add(t.applyTo(l)),e.preventDefault()}function k(){var e=s.byDistance(0,!1).index!==d.get(),n=a.pointerUp()*(o?E:A)[T?"mouse":"touch"],i=function(e,t){var n=d.clone().add(-1*te(e)),r=n.get()===d.min||n.get()===d.max,a=s.byDistance(e,!o).distance;return o||Math.abs(e)<20?a:!p&&r?.6*a:g&&t?.5*a:s.byIndex(n.get(),0).distance}(t.applyTo(n),e),u=function(e,t){if(0===e||0===t)return 0;if(Math.abs(e)<=Math.abs(t))return 0;var n=ne(Math.abs(e),Math.abs(t));return Math.abs(n/e)}(n,i),m=ne(r.get(),x.get())>=.5,v=e&&u>.75,h=Math.abs(n)<20,b=v?10:C,y=v?1+2.5*u:1;m&&!T&&(I=!0),O=!1,M=!1,S.removeAll(),l.useSpeed(h?9:b).useMass(y),c.distance(i,!o),T=!1,f.emit("pointerUp")}function P(e){I&&e.preventDefault()}return{addActivationEvents:function(){var e=n;w.add(e,"touchmove",(function(){})).add(e,"touchend",(function(){})).add(e,"touchstart",j).add(e,"mousedown",j).add(e,"touchcancel",k).add(e,"contextmenu",k).add(e,"click",P)},clickAllowed:function(){return!I},pointerDown:function(){return M},removeAllEvents:function(){w.removeAll(),S.removeAll()}}}function se(e,t,n){var r,o,a=(r=2,o=Math.pow(10,r),function(e){return Math.round(e*o)/o}),i=ee(0),u=ee(0),c=ee(0),l=0,s=t,d=n;function f(e){return s=e,g}function p(e){return d=e,g}var g={direction:function(){return l},seek:function(t){c.set(t).subtract(e);var n,r,o,a=(n=c.get(),(o=0)+(n-(r=0))/(100-r)*(s-o));return l=te(c.get()),c.normalize().multiply(a).subtract(i),function(e){e.divide(d),u.add(e)}(c),g},settle:function(t){var n=t.get()-e.get(),r=!a(n);return r&&e.set(t),r},update:function(){i.add(u),e.add(i),u.multiply(0)},useBaseMass:function(){return p(n)},useBaseSpeed:function(){return f(t)},useMass:p,useSpeed:f};return g}function de(e,t,n,r){var o=!1;return{constrain:function(a){if(!o&&e.reachedAny(n.get())&&e.reachedAny(t.get())){var i=a?.7:.45,u=n.get()-t.get();n.subtract(u*i),!a&&Math.abs(u)<10&&(n.set(e.constrain(n.get())),r.useSpeed(10).useMass(3))}},toggleActive:function(e){o=!e}}}function fe(e,t,n,r,o){var a=$(-t+e,n[0]),i=r.map(a.constrain),u=function(){if(t<=e)return[a.max];if("keepSnaps"===o)return i;var n=function(){var e=i[0],t=ae(i),n=i.lastIndexOf(e),r=i.indexOf(t)+1;return $(n,r)}(),r=n.min,u=n.max;return i.slice(r,u)}();return{snapsContained:u}}function pe(e,t,n,r,o){var a=$(n.min+t.measure(.1),n.max+t.measure(.1)),i=a.reachedMin,u=a.reachedMax;return{loop:function(t){if(function(e){return 1===e?u(r.get()):-1===e&&i(r.get())}(t)){var n=e*(-1*t);o.forEach((function(e){return e.add(n)}))}}}}function ge(e){var t=e.max,n=e.length;return{get:function(e){return(e-t)/-n}}}function me(e,t,n,r,o,a){var i,u,c=e.startEdge,l=e.endEdge,s=o.map((function(e){return r[c]-e[c]})).map(n.measure).map((function(e){return-Math.abs(e)})),d=(i=re(s,a).map((function(e){return e[0]})),u=re(o,a).map((function(e){return ae(e)[l]-e[0][c]})).map(n.measure).map(Math.abs).map(t.measure),i.map((function(e,t){return e+u[t]})));return{snaps:s,snapsAligned:d}}function ve(e,t,n,r,o){var a=r.reachedAny,i=r.removeOffset,u=r.constrain;function c(e,t){return Math.abs(e)<Math.abs(t)?e:t}function l(t,r){var o=t,a=t+n,i=t-n;if(!e)return o;if(!r)return c(c(o,a),i);var u=c(o,1===r?a:i);return Math.abs(u)*r}var s={byDistance:function(n,r){var c=o.get()+n,s=function(n){var r=e?i(n):u(n);return{index:t.map((function(e){return e-r})).map((function(e){return l(e,0)})).map((function(e,t){return{diff:e,index:t}})).sort((function(e,t){return Math.abs(e.diff)-Math.abs(t.diff)}))[0].index,distance:r}}(c),d=s.index,f=s.distance,p=!e&&a(c);return!r||p?{index:d,distance:n}:{index:d,distance:n+l(t[d]-f,0)}},byIndex:function(e,n){return{index:e,distance:l(t[e]-o.get(),n)}},shortcut:l};return s}function he(e,t,n,r,o,a,i,u){var c,l=oe(r),s=oe(r).reverse(),d=(c=o[0]-1,g(p(s,c),"end")).concat(function(){var e=t-o[0]-1;return g(p(l,e),"start")}());function f(e,t){return e.reduce((function(e,t){return e-r[t]}),t)}function p(e,t){return e.reduce((function(e,n){return f(e,t)>0?e.concat([n]):e}),[])}function g(e,t){var r="start"===t,o=r?-n:n,u=a.findSlideBounds(o);return e.map((function(e){var t=r?0:-n,o=r?n:0,a=u.filter((function(t){return t.index===e}))[0][r?"end":"start"];return{point:a,getTarget:function(){return i.get()>a?t:o},index:e,location:-1}}))}var m={canLoop:function(){return d.every((function(e){var n=e.index;return f(l.filter((function(e){return e!==n})),t)<=0}))},clear:function(){d.forEach((function(t){var n=t.index;u[n].style[e.startEdge]=""}))},loop:function(){d.forEach((function(t){var n=t.getTarget,r=t.location,o=t.index,a=n();a!==r&&(u[o].style[e.startEdge]=a+"%",t.location=a)}))},loopPoints:d};return m}function be(e,t,n){var r=Z(),o=r.removeAll,a=0;function i(e){9===e.keyCode&&(a=(new Date).getTime())}function u(o,i){r.add(o,"focus",(function(){if(!((new Date).getTime()-a>10)){e.scrollLeft=0;var r=Math.floor(i/n);t.index(r,0)}}),!0)}return{addActivationEvents:function(e){r.add(document,"keydown",i,!1),e.forEach(u)},removeAllEvents:o}}function ye(e,t,n){var r=n.style,o="x"===e.scroll?function(e){return"translate3d("+e+"%,0px,0px)"}:function(e){return"translate3d(0px,"+e+"%,0px)"},a=!1;return{clear:function(){r.transform=""},to:function(e){a||(r.transform=o(t.applyTo(e.get())))},toggleActive:function(e){a=!e}}}function xe(e,t,n,r,o){var a,i=r.align,u=r.axis,c=r.direction,l=r.startIndex,s=r.inViewThreshold,d=r.loop,f=r.speed,p=r.dragFree,g=r.slidesToScroll,m=r.skipSnaps,v=r.containScroll,h=t.getBoundingClientRect(),b=n.map((function(e){return e.getBoundingClientRect()})),y=function(e){var t="rtl"===e?-1:1;return{applyTo:function(e){return e*t}}}(c),x=function(e,t){var n="y"===e?"y":"x";return{scroll:n,cross:"y"===e?"x":"y",startEdge:"y"===n?"top":"rtl"===t?"right":"left",endEdge:"y"===n?"bottom":"rtl"===t?"left":"right",measureSize:function(e){var t=e.width,r=e.height;return"x"===n?t:r}}}(u,c),w=(a=x.measureSize(h),{measure:function(e){return 0===a?0:e/a*100},totalPercent:100}),S=w.totalPercent,A=Y(i,S),E=function(e,t,n,r,o){var a=e.measureSize,i=e.startEdge,u=e.endEdge,c=r.map(a),l=c.map(t.measure),s=r.map((function(e,t,r){var a=t===ie(r),l=window.getComputedStyle(ae(n)),s=parseFloat(l.getPropertyValue("margin-"+u));return a?c[t]+(o?s:0):r[t+1][i]-e[i]})).map(t.measure).map(Math.abs);return{slideSizes:l,slideSizesWithGaps:s}}(x,w,n,b,d),C=E.slideSizes,M=E.slideSizesWithGaps,O=me(x,A,w,h,b,g),I=O.snaps,T=O.snapsAligned,j=-ae(I)+ae(M),_=fe(S,j,I,T,v).snapsContained,k=!d&&""!==v?_:T,P=function(e,t,n){var r,o;return{limit:(r=t[0],o=ae(t),$(n?r-e:o,r))}}(j,k,d).limit,B=Q(ie(k),l,d),L=B.clone(),K=oe(n),W=function(e){var t=0;function n(e,n){return function(){e===!!t&&n()}}function r(){t=window.requestAnimationFrame(e)}return{proceed:n(!0,r),start:n(!1,r),stop:n(!0,(function(){window.cancelAnimationFrame(t),t=0}))}}((function(){d||G.scrollBounds.constrain(G.dragHandler.pointerDown()),G.scrollBody.seek(z).update();var e=G.scrollBody.settle(z);e&&!G.dragHandler.pointerDown()&&(G.animation.stop(),o.emit("settle")),e||o.emit("scroll"),d&&(G.scrollLooper.loop(G.scrollBody.direction()),G.slideLooper.loop()),G.translate.to(N),G.animation.proceed()})),D=k[B.get()],N=ee(D),z=ee(D),q=se(N,f,1),R=ve(d,k,j,P,z),F=function(e,t,n,r,o,a){function i(r){var i=r.distance,u=r.index!==t.get();i&&(e.start(),o.add(i)),u&&(n.set(t.get()),t.set(r.index),a.emit("select"))}return{distance:function(e,t){i(r.byDistance(e,t))},index:function(e,n){var o=t.clone().set(e);i(r.byIndex(o.get(),n))}}}(W,B,L,R,z,o),H=function(e,t,n,r,o,a){var i=Math.min(Math.max(a,.01),.99),u=(o?[0,t,-t]:[0]).reduce((function(e,t){return e.concat(c(t,i))}),[]);function c(t,o){var a=n.map((function(e){return e*(o||0)}));return r.map((function(r,o){return{start:r-n[o]+a[o]+t,end:r+e-a[o]+t,index:o}}))}var l={check:function(e){return u.reduce((function(t,n){var r=n.index,o=n.start,a=n.end;return-1===t.indexOf(r)&&o<e&&a>e?t.concat([r]):t}),[])},findSlideBounds:c};return l}(S,j,C,I,d,s),U=le(x,y,e,z,p,function(e,t){var n=e.scroll,r={x:"clientX",y:"clientY"},o=ee(0),a=ee(0),i=ee(0),u=ee(0),c=[],l=(new Date).getTime(),s=!1;function d(e,t){s=!e.touches;var n=r[t],o=s?e[n]:e.touches[0][n];return u.set(o)}return{pointerDown:function(e){var r=d(e,n);return o.set(r),i.set(r),t.measure(o.get())},pointerMove:function(e){var r=d(e,n),o=(new Date).getTime(),u=o-l;return u>=10&&(u>=100&&(c=[]),c.push(r.get()),l=o),a.set(r).subtract(i),i.set(r),t.measure(a.get())},pointerUp:function(){var e=(new Date).getTime()-l,n=i.get(),r=c.slice(-5).map((function(e){return n-e})).sort((function(e,t){return Math.abs(e)<Math.abs(t)?1:-1}))[0];return i.set(e>100||!r?0:r),c=[],t.measure(i.get())},readPoint:d}}(x,w),N,W,F,q,R,B,o,d,m),G={animation:W,axis:x,direction:y,dragHandler:U,pxToPercent:w,index:B,indexPrevious:L,limit:P,location:N,options:r,scrollBody:q,scrollBounds:de(P,N,z,q),scrollLooper:pe(j,w,P,N,[N,z]),scrollProgress:ge(P),scrollSnaps:k,scrollTarget:R,scrollTo:F,slideFocus:be(e,F,g),slideLooper:he(x,S,j,M,k,H,N,n),slidesInView:H,slideIndexes:K,target:z,translate:ye(x,y,t)};return G}var we={align:"center",axis:"x",containScroll:"",direction:"ltr",dragFree:!1,draggable:!0,draggableClass:"is-draggable",draggingClass:"is-dragging",inViewThreshold:0,loop:!1,skipSnaps:!0,selectedClass:"is-selected",slidesToScroll:1,speed:10,startIndex:0};function Se(e,t){var n,r,o,a,i,u,c,l=function(){var e={};function t(t){return e[t]||[]}var n={emit:function(e){return t(e).forEach((function(t){return t(e)})),n},off:function(r,o){return e[r]=t(r).filter((function(e){return e!==o})),n},on:function(r,o){return e[r]=t(r).concat([o]),n}};return n}(),s=Z(),d=(n=function(){if(m){var t=a.axis.measureSize(e.getBoundingClientRect());b!==t&&E(),l.emit("resize")}},r=500,o=0,function(){window.clearTimeout(o),o=window.setTimeout(n,r)||0}),f=E,p=l.on,g=l.off,m=!1,v=J({},we),h=J({},v),b=0;function y(){if(!e)throw new Error("Missing root node 😢");var t,n=e.querySelector("*");if(!n)throw new Error("Missing container node 😢");u=n,c=Array.prototype.slice.call(u.children),t=getComputedStyle(e,":before").content,i={get:function(){try{return JSON.parse(t.slice(1,-1).replace(/\\/g,""))}catch(e){}return{}}}}function x(t){if(y(),v=J({},v,t),h=J({},v,i.get()),a=xe(e,u,c,h,l),s.add(window,"resize",d),a.translate.to(a.location),b=a.axis.measureSize(e.getBoundingClientRect()),h.loop){if(!a.slideLooper.canLoop())return A(),x({loop:!1});a.slideLooper.loop()}h.draggable&&u.offsetParent&&c.length&&(a.dragHandler.addActivationEvents(),h.draggableClass&&ce(e,h.draggableClass),h.draggingClass&&l.on("pointerDown",w).on("pointerUp",w)),c.length&&a.slideFocus.addActivationEvents(c),h.selectedClass&&(S(),l.on("select",S).on("pointerUp",S)),m||(setTimeout((function(){return l.emit("init")}),0),m=!0)}function w(t){var n=h.draggingClass;"pointerDown"===t?ce(e,n):ue(e,n)}function S(){var e=h.selectedClass,t=C(!0);M(!0).forEach((function(t){return ue(c[t],e)})),t.forEach((function(t){return ce(c[t],e)}))}function A(){a.dragHandler.removeAllEvents(),a.slideFocus.removeAllEvents(),a.animation.stop(),s.removeAll(),a.translate.clear(),a.slideLooper.clear(),ue(e,h.draggableClass),c.forEach((function(e){return ue(e,h.selectedClass)})),l.off("select",S).off("pointerUp",S).off("pointerDown",w).off("pointerUp",w)}function E(e){if(m){var t=J({startIndex:I()},e);A(),x(t),l.emit("reInit")}}function C(e){var t=a[e?"target":"location"].get(),n=h.loop?"removeOffset":"constrain";return a.slidesInView.check(a.limit[n](t))}function M(e){var t=C(e);return a.slideIndexes.filter((function(e){return-1===t.indexOf(e)}))}function O(e,t,n){a.scrollBody.useBaseMass().useSpeed(t?100:h.speed),m&&a.scrollTo.index(e,n||0)}function I(){return a.index.get()}return x(t),{canScrollNext:function(){return a.index.clone().add(1).get()!==I()},canScrollPrev:function(){return a.index.clone().add(-1).get()!==I()},clickAllowed:function(){return a.dragHandler.clickAllowed()},containerNode:function(){return u},dangerouslyGetEngine:function(){return a},destroy:function(){m&&(A(),m=!1,l.emit("destroy"))},off:g,on:p,previousScrollSnap:function(){return a.indexPrevious.get()},reInit:f,rootNode:function(){return e},scrollNext:function(e){O(a.index.clone().add(1).get(),!0===e,-1)},scrollPrev:function(e){O(a.index.clone().add(-1).get(),!0===e,1)},scrollProgress:function(){return a.scrollProgress.get(a.location.get())},scrollSnapList:function(){return a.scrollSnaps.map(a.scrollProgress.get)},scrollTo:O,selectedScrollSnap:I,slideNodes:function(){return c},slidesInView:C,slidesNotInView:M}}function Ae(e){void 0===e&&(e={});var n=t.useState(),r=n[0],o=n[1],a=t.useState(),i=a[0],u=a[1],c=t.useRef(e),l=t.useMemo((function(){var t,n;return t=c.current,n=e,Object.keys(t).length===Object.keys(n).length&&Object.keys(t).every((function(e){return!!Object.prototype.hasOwnProperty.call(n,e)&&t[e]===n[e]}))||(c.current=e),c.current}),[c,e]);return t.useEffect((function(){if("undefined"!=typeof window&&window.document&&window.document.createElement&&i){var e=Se(i,l);return o(e),function(){return e.destroy()}}o(void 0)}),[i,l,o]),[u,r]}var Ee,Ce=["images","width","height"];(Ee="undefined"!=typeof reactHotLoaderGlobal?reactHotLoaderGlobal.enterModule:void 0)&&Ee(module);var Me="undefined"!=typeof reactHotLoaderGlobal?reactHotLoaderGlobal.default.signature:function(e){return e},Oe=function(n){var r=n.images,o=n.width,a=n.height,u=e._objectWithoutProperties(n,Ce),s=o?"".concat(o,"rem"):"100%",d="".concat(a,"rem"),f=X(Ae({skipSnaps:!1,loop:!0}),2),p=f[0],g=f[1],m=X(t.useState(0),2),v=m[0],h=m[1],b=t.useCallback((function(){return g&&g.scrollPrev()}),[g]),y=t.useCallback((function(){return g&&g.scrollNext()}),[g]),x=t.useCallback((function(){g&&h(g.selectedScrollSnap())}),[g,h]);if(t.useEffect((function(){g&&(x(),g.on("select",x))}),[g,x]),1===r.length){var w=r[0];return i.default.createElement(e.Box,e._extends({width:s,height:d},u),i.default.createElement("img",{style:{width:"100%",height:"100%",objectFit:"cover"},src:w.src,alt:w.alt}))}return i.default.createElement(e.Box,e._extends({as:"section",position:"relative",overflow:"hidden",width:s},u),i.default.createElement(e.Box,{ref:p},i.default.createElement(e.Box,{display:"flex",role:"group"},e.map(r).call(r,(function(t,n){var o;return i.default.createElement(e.Box,{position:"relative",flex:"0 0 100%",key:n,"aria-label":e.concat(o="Slide ".concat(n+1," of ")).call(o,r.length)},i.default.createElement(e.Box,{position:"relative",height:d},i.default.createElement("img",{style:{width:"100%",height:"100%",objectFit:"cover"},src:t.src,alt:t.alt})))})))),i.default.createElement(e._default,{onClick:b,width:"16",height:"100%",position:"absolute",left:"0",top:"0",bg:"none",borderRadius:"0",border:"0",_hover:{bg:"none",border:0},_focus:{boxShadow:"none"},padding:"3"},i.default.createElement(e.Box,{width:"100%",padding:"3",borderRadius:"50%",bgColor:"black",opacity:"0.6"},i.default.createElement(c.default,null))),i.default.createElement(e._default,{onClick:y,width:"16",height:"100%",position:"absolute",right:"0",top:"0",bg:"none",borderRadius:"0",border:"0",_hover:{bg:"none",border:0},_focus:{boxShadow:"none"},padding:"3"},i.default.createElement(e.Box,{width:"100%",padding:"3",borderRadius:"50%",bgColor:"black",opacity:"0.6"},i.default.createElement(l.default,null))),i.default.createElement(e.Box,{color:"white",borderRadius:"1rem",bgColor:"black",opacity:"0.6",paddingX:3,paddingY:1,fontSize:"xs",position:"absolute",bottom:3,left:"50%",transform:"translateX(-50%)"},v+1,"/",r.length))};Me(Oe,"useEmblaCarousel{[viewportRef, embla]}\nuseState{[selectedIndex, setSelectedIndex](0)}\nuseCallback{scrollPrev}\nuseCallback{scrollNext}\nuseCallback{onSelect}\nuseEffect{}",(function(){return[Ae]})),Oe.propTypes={images:u.default.arrayOf(u.default.shape({src:u.default.string.isRequired,alt:u.default.string.isRequired})).isRequired,height:u.default.number.isRequired,width:u.default.number};var Ie,Te,je=Oe;(Ie="undefined"!=typeof reactHotLoaderGlobal?reactHotLoaderGlobal.default:void 0)&&(Ie.register(Oe,"ImageCarousel","/tmp/build/d4767a07/beta-pr/src/v2/components/ImageCarousel/ImageCarousel.jsx"),Ie.register(je,"default","/tmp/build/d4767a07/beta-pr/src/v2/components/ImageCarousel/ImageCarousel.jsx")),(Te="undefined"!=typeof reactHotLoaderGlobal?reactHotLoaderGlobal.leaveModule:void 0)&&Te(module),exports.default=je;
|
|
2
|
+
//# sourceMappingURL=ImageCarousel-e8e079e8.js.map
|