baseui 10.2.1 → 10.6.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/button/styled-components.js +1 -1
- package/button/styled-components.js.flow +4 -1
- package/data-table/data-table.js +13 -3
- package/data-table/data-table.js.flow +20 -4
- package/data-table/types.js.flow +2 -1
- package/datepicker/calendar-header.js +227 -95
- package/datepicker/calendar-header.js.flow +270 -139
- package/datepicker/constants.js +4 -2
- package/datepicker/constants.js.flow +2 -0
- package/datepicker/day.js +1 -0
- package/datepicker/day.js.flow +1 -0
- package/datepicker/index.d.ts +1 -0
- package/datepicker/types.js.flow +1 -0
- package/datepicker/utils/calendar-header-helpers.js +51 -0
- package/datepicker/utils/calendar-header-helpers.js.flow +53 -0
- package/dnd-list/index.js.flow +2 -1
- package/drawer/close-icon.js +3 -2
- package/drawer/close-icon.js.flow +2 -2
- package/drawer/drawer.js +5 -2
- package/drawer/drawer.js.flow +2 -2
- package/es/button/styled-components.js +1 -1
- package/es/data-table/data-table.js +13 -3
- package/es/datepicker/calendar-header.js +184 -84
- package/es/datepicker/constants.js +2 -1
- package/es/datepicker/day.js +1 -0
- package/es/datepicker/utils/calendar-header-helpers.js +34 -0
- package/es/dnd-list/index.js +2 -1
- package/es/drawer/close-icon.js +3 -2
- package/es/drawer/drawer.js +5 -2
- package/es/list/list-heading.js +17 -6
- package/es/map-marker/constants.js +69 -0
- package/es/map-marker/fixed-marker.js +98 -0
- package/es/map-marker/floating-marker.js +65 -0
- package/es/map-marker/index.js +9 -0
- package/es/map-marker/pin-head.js +108 -0
- package/es/map-marker/styled-components.js +156 -0
- package/es/map-marker/types.js +8 -0
- package/es/popover/stateful-container.js +4 -0
- package/es/rating/emoticon-rating.js +3 -1
- package/es/rating/star-rating.js +3 -1
- package/es/select/select-component.js +20 -6
- package/es/select/styled-components.js +34 -4
- package/es/snackbar/snackbar-context.js +16 -4
- package/es/spinner/styled-components.js +1 -1
- package/es/table-semantic/styled-components.js +6 -4
- package/es/table-semantic/table-builder.js +3 -0
- package/es/themes/dark-theme/color-component-tokens.js +1 -1
- package/es/themes/dark-theme/color-semantic-tokens.js +8 -7
- package/es/themes/light-theme/color-component-tokens.js +9 -9
- package/es/themes/light-theme/color-semantic-tokens.js +3 -2
- package/es/tokens/colors.js +2 -2
- package/es/tooltip/styled-components.js +8 -0
- package/esm/button/styled-components.js +1 -1
- package/esm/data-table/data-table.js +13 -3
- package/esm/datepicker/calendar-header.js +226 -95
- package/esm/datepicker/constants.js +2 -1
- package/esm/datepicker/day.js +1 -0
- package/esm/datepicker/utils/calendar-header-helpers.js +45 -0
- package/esm/dnd-list/index.js +2 -1
- package/esm/drawer/close-icon.js +3 -2
- package/esm/drawer/drawer.js +5 -2
- package/esm/list/list-heading.js +17 -6
- package/esm/map-marker/constants.js +62 -0
- package/esm/map-marker/fixed-marker.js +137 -0
- package/esm/map-marker/floating-marker.js +94 -0
- package/esm/map-marker/index.js +9 -0
- package/esm/map-marker/pin-head.js +144 -0
- package/esm/map-marker/styled-components.js +168 -0
- package/esm/map-marker/types.js +8 -0
- package/esm/popover/stateful-container.js +4 -0
- package/esm/rating/emoticon-rating.js +2 -2
- package/esm/rating/star-rating.js +2 -2
- package/esm/select/select-component.js +19 -6
- package/esm/select/styled-components.js +28 -4
- package/esm/snackbar/snackbar-context.js +16 -4
- package/esm/spinner/styled-components.js +1 -1
- package/esm/table-semantic/styled-components.js +6 -4
- package/esm/table-semantic/table-builder.js +3 -0
- package/esm/themes/dark-theme/color-component-tokens.js +1 -1
- package/esm/themes/dark-theme/color-semantic-tokens.js +8 -7
- package/esm/themes/light-theme/color-component-tokens.js +9 -9
- package/esm/themes/light-theme/color-semantic-tokens.js +3 -2
- package/esm/tokens/colors.js +2 -2
- package/esm/tooltip/styled-components.js +8 -0
- package/index.d.ts +1 -0
- package/link/index.d.ts +1 -0
- package/list/index.d.ts +36 -0
- package/list/list-heading.js +24 -7
- package/list/list-heading.js.flow +17 -8
- package/map-marker/constants.js +82 -0
- package/map-marker/constants.js.flow +74 -0
- package/map-marker/fixed-marker.js +152 -0
- package/map-marker/fixed-marker.js.flow +137 -0
- package/map-marker/floating-marker.js +109 -0
- package/map-marker/floating-marker.js.flow +102 -0
- package/map-marker/index.d.ts +104 -0
- package/map-marker/index.js +55 -0
- package/map-marker/index.js.flow +23 -0
- package/map-marker/package.json +4 -0
- package/map-marker/pin-head.js +159 -0
- package/map-marker/pin-head.js.flow +155 -0
- package/map-marker/styled-components.js +184 -0
- package/map-marker/styled-components.js.flow +177 -0
- package/map-marker/types.js +11 -0
- package/map-marker/types.js.flow +114 -0
- package/menu/index.d.ts +7 -0
- package/menu/types.js.flow +12 -0
- package/package.json +3 -2
- package/popover/stateful-container.js +4 -0
- package/popover/stateful-container.js.flow +3 -0
- package/rating/emoticon-rating.js +2 -2
- package/rating/emoticon-rating.js.flow +4 -1
- package/rating/star-rating.js +2 -2
- package/rating/star-rating.js.flow +4 -1
- package/select/select-component.js +19 -6
- package/select/select-component.js.flow +19 -6
- package/select/styled-components.js +28 -4
- package/select/styled-components.js.flow +30 -2
- package/select/types.js.flow +9 -0
- package/snackbar/snackbar-context.js +15 -4
- package/snackbar/snackbar-context.js.flow +15 -3
- package/spinner/styled-components.js +1 -1
- package/spinner/styled-components.js.flow +1 -1
- package/table-semantic/index.d.ts +1 -0
- package/table-semantic/styled-components.js +6 -4
- package/table-semantic/styled-components.js.flow +6 -4
- package/table-semantic/table-builder.js +3 -0
- package/table-semantic/table-builder.js.flow +3 -0
- package/theme.ts +2 -0
- package/themes/dark-theme/color-component-tokens.js +1 -1
- package/themes/dark-theme/color-component-tokens.js.flow +1 -1
- package/themes/dark-theme/color-semantic-tokens.js +8 -7
- package/themes/dark-theme/color-semantic-tokens.js.flow +7 -6
- package/themes/light-theme/color-component-tokens.js +9 -9
- package/themes/light-theme/color-component-tokens.js.flow +9 -9
- package/themes/light-theme/color-semantic-tokens.js +3 -2
- package/themes/light-theme/color-semantic-tokens.js.flow +2 -1
- package/themes/types.js.flow +1 -0
- package/tokens/colors.js +2 -2
- package/tokens/colors.js.flow +2 -2
- package/tooltip/styled-components.js +8 -0
- package/tooltip/styled-components.js.flow +8 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
var _Object$freeze, _Object$freeze2;
|
|
2
|
+
|
|
3
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
Copyright (c) Uber Technologies, Inc.
|
|
7
|
+
|
|
8
|
+
This source code is licensed under the MIT license found in the
|
|
9
|
+
LICENSE file in the root directory of this source tree.
|
|
10
|
+
*/
|
|
11
|
+
export var NEEDLE_SIZES = Object.freeze({
|
|
12
|
+
none: 'none',
|
|
13
|
+
short: 'short',
|
|
14
|
+
medium: 'medium',
|
|
15
|
+
tall: 'tall'
|
|
16
|
+
});
|
|
17
|
+
export var NEEDLE_HEIGHTS = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, NEEDLE_SIZES.none, 0), _defineProperty(_Object$freeze, NEEDLE_SIZES.short, 4), _defineProperty(_Object$freeze, NEEDLE_SIZES.medium, 12), _defineProperty(_Object$freeze, NEEDLE_SIZES.tall, 20), _Object$freeze));
|
|
18
|
+
export var PINHEAD_SIZES_SHAPES = Object.freeze({
|
|
19
|
+
xSmallCircle: 'x-small-circle',
|
|
20
|
+
xSmallSquare: 'x-small-square',
|
|
21
|
+
small: 'small',
|
|
22
|
+
medium: 'medium',
|
|
23
|
+
large: 'large'
|
|
24
|
+
});
|
|
25
|
+
export var xSmallPinheadDimension = {
|
|
26
|
+
height: 16,
|
|
27
|
+
icon: 4
|
|
28
|
+
};
|
|
29
|
+
export var PINHEAD_DIMENSIONS = Object.freeze((_Object$freeze2 = {}, _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xSmallSquare, xSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xSmallCircle, xSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.small, {
|
|
30
|
+
height: 24,
|
|
31
|
+
icon: 16
|
|
32
|
+
}), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.medium, {
|
|
33
|
+
height: 36,
|
|
34
|
+
icon: 16
|
|
35
|
+
}), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.large, {
|
|
36
|
+
height: 48,
|
|
37
|
+
icon: 24
|
|
38
|
+
}), _Object$freeze2));
|
|
39
|
+
export var PINHEAD_TYPES = Object.freeze({
|
|
40
|
+
floating: 'floating',
|
|
41
|
+
fixed: 'fixed'
|
|
42
|
+
});
|
|
43
|
+
export var FLOATING_MARKER_SIZES = Object.freeze({
|
|
44
|
+
small: 'small',
|
|
45
|
+
medium: 'medium',
|
|
46
|
+
large: 'large'
|
|
47
|
+
});
|
|
48
|
+
export var FLOATING_MARKER_ANCHOR_POSITIONS = Object.freeze({
|
|
49
|
+
none: 'none',
|
|
50
|
+
topLeft: 'top-left',
|
|
51
|
+
topRight: 'top-right',
|
|
52
|
+
bottomRight: 'bottom-right',
|
|
53
|
+
bottomLeft: 'bottom-left'
|
|
54
|
+
});
|
|
55
|
+
export var FLOATING_MARKER_ANCHOR_TYPES = Object.freeze({
|
|
56
|
+
circle: 'circle',
|
|
57
|
+
square: 'square'
|
|
58
|
+
});
|
|
59
|
+
export var dragShadowHeight = 4;
|
|
60
|
+
export var dragShadowMarginTop = 6;
|
|
61
|
+
export var dragShadowWidth = 6;
|
|
62
|
+
export var anchorSize = 16;
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || 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
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
+
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
|
|
9
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
10
|
+
|
|
11
|
+
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
/*
|
|
16
|
+
Copyright (c) Uber Technologies, Inc.
|
|
17
|
+
|
|
18
|
+
This source code is licensed under the MIT license found in the
|
|
19
|
+
LICENSE file in the root directory of this source tree.
|
|
20
|
+
*/
|
|
21
|
+
import * as React from 'react';
|
|
22
|
+
import { useStyletron } from '../styles/index.js';
|
|
23
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
24
|
+
import { PINHEAD_TYPES, NEEDLE_SIZES, NEEDLE_HEIGHTS, PINHEAD_SIZES_SHAPES, dragShadowHeight, dragShadowMarginTop, dragShadowWidth } from './constants.js';
|
|
25
|
+
import PinHead from './pin-head.js';
|
|
26
|
+
import { FixedMarkerDragContainer as StyledFixedMarkerDragContainer, FixedMarkerRoot as StyledRoot, Needle as StyledNeedle, DragShadow as StyledDragShadow, DragShadowContainer as StyledDragShadowContainer } from './styled-components.js';
|
|
27
|
+
|
|
28
|
+
var Needle = function Needle(_ref) {
|
|
29
|
+
var size = _ref.size,
|
|
30
|
+
background = _ref.background,
|
|
31
|
+
_ref$overrides = _ref.overrides,
|
|
32
|
+
overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
|
|
33
|
+
|
|
34
|
+
var _getOverrides = getOverrides(overrides.Needle, StyledNeedle),
|
|
35
|
+
_getOverrides2 = _slicedToArray(_getOverrides, 2),
|
|
36
|
+
Needle = _getOverrides2[0],
|
|
37
|
+
needleProps = _getOverrides2[1];
|
|
38
|
+
|
|
39
|
+
return /*#__PURE__*/React.createElement(Needle, _extends({
|
|
40
|
+
$background: background,
|
|
41
|
+
$height: NEEDLE_HEIGHTS[size]
|
|
42
|
+
}, needleProps));
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
var DragShadow = function DragShadow(_ref2) {
|
|
46
|
+
var background = _ref2.background,
|
|
47
|
+
dragging = _ref2.dragging,
|
|
48
|
+
height = _ref2.height,
|
|
49
|
+
_ref2$overrides = _ref2.overrides,
|
|
50
|
+
overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides;
|
|
51
|
+
|
|
52
|
+
var _getOverrides3 = getOverrides(overrides.DragShadowContainer, StyledDragShadowContainer),
|
|
53
|
+
_getOverrides4 = _slicedToArray(_getOverrides3, 2),
|
|
54
|
+
DragShadowContainer = _getOverrides4[0],
|
|
55
|
+
dragShadowContainerProps = _getOverrides4[1];
|
|
56
|
+
|
|
57
|
+
var _getOverrides5 = getOverrides(overrides.DragShadow, StyledDragShadow),
|
|
58
|
+
_getOverrides6 = _slicedToArray(_getOverrides5, 2),
|
|
59
|
+
DragShadow = _getOverrides6[0],
|
|
60
|
+
dragShadowProps = _getOverrides6[1];
|
|
61
|
+
|
|
62
|
+
return /*#__PURE__*/React.createElement(DragShadowContainer, _extends({
|
|
63
|
+
$width: dragShadowWidth,
|
|
64
|
+
$height: height,
|
|
65
|
+
$dragging: dragging
|
|
66
|
+
}, dragShadowContainerProps), /*#__PURE__*/React.createElement(DragShadow, _extends({
|
|
67
|
+
$width: dragShadowWidth,
|
|
68
|
+
$background: background
|
|
69
|
+
}, dragShadowProps)));
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
var FixedMarker = function FixedMarker(_ref3) {
|
|
73
|
+
var _ref3$size = _ref3.size,
|
|
74
|
+
size = _ref3$size === void 0 ? PINHEAD_SIZES_SHAPES.medium : _ref3$size,
|
|
75
|
+
_ref3$needle = _ref3.needle,
|
|
76
|
+
needle = _ref3$needle === void 0 ? NEEDLE_SIZES.medium : _ref3$needle,
|
|
77
|
+
label = _ref3.label,
|
|
78
|
+
startEnhancer = _ref3.startEnhancer,
|
|
79
|
+
endEnhancer = _ref3.endEnhancer,
|
|
80
|
+
color = _ref3.color,
|
|
81
|
+
background = _ref3.background,
|
|
82
|
+
_ref3$dragging = _ref3.dragging,
|
|
83
|
+
dragging = _ref3$dragging === void 0 ? false : _ref3$dragging,
|
|
84
|
+
_ref3$overrides = _ref3.overrides,
|
|
85
|
+
overrides = _ref3$overrides === void 0 ? {} : _ref3$overrides;
|
|
86
|
+
|
|
87
|
+
var _useStyletron = useStyletron(),
|
|
88
|
+
_useStyletron2 = _slicedToArray(_useStyletron, 2),
|
|
89
|
+
theme = _useStyletron2[1];
|
|
90
|
+
|
|
91
|
+
var _theme$colors = theme.colors,
|
|
92
|
+
backgroundInversePrimary = _theme$colors.backgroundInversePrimary,
|
|
93
|
+
primaryB = _theme$colors.primaryB;
|
|
94
|
+
color = color || primaryB;
|
|
95
|
+
background = background || backgroundInversePrimary;
|
|
96
|
+
var doesPinHeadTransformOnDrag = needle !== NEEDLE_SIZES.none;
|
|
97
|
+
|
|
98
|
+
var _getOverrides7 = getOverrides(overrides.Root, StyledRoot),
|
|
99
|
+
_getOverrides8 = _slicedToArray(_getOverrides7, 2),
|
|
100
|
+
Root = _getOverrides8[0],
|
|
101
|
+
rootProps = _getOverrides8[1];
|
|
102
|
+
|
|
103
|
+
var _getOverrides9 = getOverrides(overrides.DragContainer, StyledFixedMarkerDragContainer),
|
|
104
|
+
_getOverrides10 = _slicedToArray(_getOverrides9, 2),
|
|
105
|
+
FixedMarkerDragContainer = _getOverrides10[0],
|
|
106
|
+
fixedMarkerDragContainerProps = _getOverrides10[1];
|
|
107
|
+
|
|
108
|
+
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
109
|
+
"data-baseweb": "fixed-map-marker"
|
|
110
|
+
}, rootProps), /*#__PURE__*/React.createElement(FixedMarkerDragContainer, _extends({
|
|
111
|
+
$translateAmount: dragShadowMarginTop + dragShadowHeight,
|
|
112
|
+
$performTranslate: doesPinHeadTransformOnDrag && dragging
|
|
113
|
+
}, fixedMarkerDragContainerProps), /*#__PURE__*/React.createElement(PinHead, _extends({
|
|
114
|
+
size: size,
|
|
115
|
+
label: label
|
|
116
|
+
}, startEnhancer ? {
|
|
117
|
+
startEnhancer: startEnhancer
|
|
118
|
+
} : {}, endEnhancer ? {
|
|
119
|
+
endEnhancer: endEnhancer
|
|
120
|
+
} : {}, {
|
|
121
|
+
color: color,
|
|
122
|
+
background: background,
|
|
123
|
+
type: PINHEAD_TYPES.fixed,
|
|
124
|
+
overrides: overrides
|
|
125
|
+
})), /*#__PURE__*/React.createElement(Needle, {
|
|
126
|
+
size: needle,
|
|
127
|
+
background: background,
|
|
128
|
+
overrides: overrides
|
|
129
|
+
})), doesPinHeadTransformOnDrag && /*#__PURE__*/React.createElement(DragShadow, {
|
|
130
|
+
background: background,
|
|
131
|
+
dragging: dragging,
|
|
132
|
+
height: dragShadowMarginTop + dragShadowHeight,
|
|
133
|
+
overrides: overrides
|
|
134
|
+
}));
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
export default FixedMarker;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || 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
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
+
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
|
|
9
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
10
|
+
|
|
11
|
+
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
/*
|
|
16
|
+
Copyright (c) Uber Technologies, Inc.
|
|
17
|
+
|
|
18
|
+
This source code is licensed under the MIT license found in the
|
|
19
|
+
LICENSE file in the root directory of this source tree.
|
|
20
|
+
*/
|
|
21
|
+
import * as React from 'react';
|
|
22
|
+
import { useStyletron } from '../styles/index.js';
|
|
23
|
+
import PinHead from './pin-head.js';
|
|
24
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
25
|
+
import { FloatingMarkerRoot as StyledRoot, FloatingMarkerAnchorContainer as StyledFloatingMarkerAnchorContainer, FloatingMarkerPinHeadContainer as StyledFloatingMarkerPinHeadContainer } from './styled-components.js';
|
|
26
|
+
import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, anchorSize } from './constants.js';
|
|
27
|
+
|
|
28
|
+
var FloatingMarker = function FloatingMarker(_ref) {
|
|
29
|
+
var color = _ref.color,
|
|
30
|
+
background = _ref.background,
|
|
31
|
+
label = _ref.label,
|
|
32
|
+
_ref$size = _ref.size,
|
|
33
|
+
size = _ref$size === void 0 ? PINHEAD_SIZES_SHAPES.medium : _ref$size,
|
|
34
|
+
_ref$anchor = _ref.anchor,
|
|
35
|
+
anchor = _ref$anchor === void 0 ? FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft : _ref$anchor,
|
|
36
|
+
endEnhancer = _ref.endEnhancer,
|
|
37
|
+
startEnhancer = _ref.startEnhancer,
|
|
38
|
+
_ref$anchorType = _ref.anchorType,
|
|
39
|
+
anchorType = _ref$anchorType === void 0 ? FLOATING_MARKER_ANCHOR_TYPES.circle : _ref$anchorType,
|
|
40
|
+
_ref$overrides = _ref.overrides,
|
|
41
|
+
overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
|
|
42
|
+
|
|
43
|
+
var _useStyletron = useStyletron(),
|
|
44
|
+
_useStyletron2 = _slicedToArray(_useStyletron, 2),
|
|
45
|
+
theme = _useStyletron2[1];
|
|
46
|
+
|
|
47
|
+
var _theme$colors = theme.colors,
|
|
48
|
+
backgroundPrimary = _theme$colors.backgroundPrimary,
|
|
49
|
+
backgroundInversePrimary = _theme$colors.backgroundInversePrimary,
|
|
50
|
+
primaryA = _theme$colors.primaryA,
|
|
51
|
+
primaryB = _theme$colors.primaryB;
|
|
52
|
+
color = color || primaryA;
|
|
53
|
+
background = background || backgroundPrimary;
|
|
54
|
+
var anchorPinHeadSize = anchorType === FLOATING_MARKER_ANCHOR_TYPES.circle ? PINHEAD_SIZES_SHAPES.xSmallCircle : PINHEAD_SIZES_SHAPES.xSmallSquare;
|
|
55
|
+
|
|
56
|
+
var _getOverrides = getOverrides(overrides.Root, StyledRoot),
|
|
57
|
+
_getOverrides2 = _slicedToArray(_getOverrides, 2),
|
|
58
|
+
Root = _getOverrides2[0],
|
|
59
|
+
rootProps = _getOverrides2[1];
|
|
60
|
+
|
|
61
|
+
var _getOverrides3 = getOverrides(overrides.PinHeadContainer, StyledFloatingMarkerPinHeadContainer),
|
|
62
|
+
_getOverrides4 = _slicedToArray(_getOverrides3, 2),
|
|
63
|
+
FloatingMarkerPinHeadContainer = _getOverrides4[0],
|
|
64
|
+
floatingMarkerPinHeadContainerProps = _getOverrides4[1];
|
|
65
|
+
|
|
66
|
+
var _getOverrides5 = getOverrides(overrides.AnchorContainer, StyledFloatingMarkerAnchorContainer),
|
|
67
|
+
_getOverrides6 = _slicedToArray(_getOverrides5, 2),
|
|
68
|
+
FloatingMarkerAnchorContainer = _getOverrides6[0],
|
|
69
|
+
floatingMarkerAnchorContainerProps = _getOverrides6[1];
|
|
70
|
+
|
|
71
|
+
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
72
|
+
"data-baseweb": "floating-map-marker"
|
|
73
|
+
}, rootProps), /*#__PURE__*/React.createElement(FloatingMarkerPinHeadContainer, _extends({
|
|
74
|
+
$anchor: anchor,
|
|
75
|
+
$anchorSize: anchorSize
|
|
76
|
+
}, floatingMarkerPinHeadContainerProps), /*#__PURE__*/React.createElement(PinHead, {
|
|
77
|
+
size: size,
|
|
78
|
+
color: color,
|
|
79
|
+
background: background,
|
|
80
|
+
type: PINHEAD_TYPES.floating,
|
|
81
|
+
label: label,
|
|
82
|
+
startEnhancer: startEnhancer,
|
|
83
|
+
endEnhancer: endEnhancer,
|
|
84
|
+
overrides: overrides
|
|
85
|
+
})), anchor !== FLOATING_MARKER_ANCHOR_POSITIONS.none && /*#__PURE__*/React.createElement(FloatingMarkerAnchorContainer, floatingMarkerAnchorContainerProps, /*#__PURE__*/React.createElement(PinHead, {
|
|
86
|
+
size: anchorPinHeadSize,
|
|
87
|
+
color: primaryB,
|
|
88
|
+
background: backgroundInversePrimary,
|
|
89
|
+
type: PINHEAD_TYPES.fixed,
|
|
90
|
+
overrides: overrides
|
|
91
|
+
})));
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
export default FloatingMarker;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright (c) Uber Technologies, Inc.
|
|
3
|
+
|
|
4
|
+
This source code is licensed under the MIT license found in the
|
|
5
|
+
LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export { default as FixedMarker } from './fixed-marker.js';
|
|
8
|
+
export { default as FloatingMarker } from './floating-marker.js';
|
|
9
|
+
export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES } from './constants.js';
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || 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
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
+
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
|
|
9
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
10
|
+
|
|
11
|
+
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
16
|
+
|
|
17
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
18
|
+
|
|
19
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
20
|
+
|
|
21
|
+
/*
|
|
22
|
+
Copyright (c) Uber Technologies, Inc.
|
|
23
|
+
|
|
24
|
+
This source code is licensed under the MIT license found in the
|
|
25
|
+
LICENSE file in the root directory of this source tree.
|
|
26
|
+
*/
|
|
27
|
+
import * as React from 'react';
|
|
28
|
+
import { useStyletron, styled } from '../styles/index.js';
|
|
29
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
30
|
+
import { InnerXSmallAnchor as StyledInnerXSmallAnchor, OuterXSmallAnchor as StyledOuterXSmallAnchor, PinHead as StyledPinHead } from './styled-components.js';
|
|
31
|
+
import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES } from './constants.js';
|
|
32
|
+
export var _ContentItem = styled('div', function (_ref) {
|
|
33
|
+
var _match;
|
|
34
|
+
|
|
35
|
+
var $theme = _ref.$theme,
|
|
36
|
+
$color = _ref.$color,
|
|
37
|
+
$height = _ref.$height,
|
|
38
|
+
$size = _ref.$size;
|
|
39
|
+
var match = (_match = {}, _defineProperty(_match, PINHEAD_SIZES_SHAPES.xSmallCircle, 'LabelSmall'), _defineProperty(_match, PINHEAD_SIZES_SHAPES.xSmallSquare, 'LabelSmall'), _defineProperty(_match, PINHEAD_SIZES_SHAPES.small, 'LabelSmall'), _defineProperty(_match, PINHEAD_SIZES_SHAPES.medium, 'LabelMedium'), _defineProperty(_match, PINHEAD_SIZES_SHAPES.large, 'LabelLarge'), _match);
|
|
40
|
+
return _objectSpread(_objectSpread({}, $theme.typography[match[$size]]), {}, {
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
textAlign: 'center',
|
|
44
|
+
lineHeight: "".concat($height, "px"),
|
|
45
|
+
height: "".concat($height, "px"),
|
|
46
|
+
color: $color
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
_ContentItem.displayName = "_ContentItem";
|
|
50
|
+
|
|
51
|
+
var PinHead = function PinHead(_ref2) {
|
|
52
|
+
var _ref2$size = _ref2.size,
|
|
53
|
+
size = _ref2$size === void 0 ? PINHEAD_SIZES_SHAPES.medium : _ref2$size,
|
|
54
|
+
_ref2$label = _ref2.label,
|
|
55
|
+
label = _ref2$label === void 0 ? '' : _ref2$label,
|
|
56
|
+
StartEnhancer = _ref2.startEnhancer,
|
|
57
|
+
EndEnhancer = _ref2.endEnhancer,
|
|
58
|
+
color = _ref2.color,
|
|
59
|
+
background = _ref2.background,
|
|
60
|
+
_ref2$type = _ref2.type,
|
|
61
|
+
type = _ref2$type === void 0 ? PINHEAD_TYPES.fixed : _ref2$type,
|
|
62
|
+
anchorType = _ref2.anchorType,
|
|
63
|
+
_ref2$overrides = _ref2.overrides,
|
|
64
|
+
overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides;
|
|
65
|
+
|
|
66
|
+
var _useStyletron = useStyletron(),
|
|
67
|
+
_useStyletron2 = _slicedToArray(_useStyletron, 2),
|
|
68
|
+
theme = _useStyletron2[1];
|
|
69
|
+
|
|
70
|
+
var _theme$colors = theme.colors,
|
|
71
|
+
backgroundPrimary = _theme$colors.backgroundPrimary,
|
|
72
|
+
primaryA = _theme$colors.primaryA;
|
|
73
|
+
color = color || backgroundPrimary;
|
|
74
|
+
background = background || primaryA;
|
|
75
|
+
var activeElements = [label, StartEnhancer, EndEnhancer].filter(function (x) {
|
|
76
|
+
return x;
|
|
77
|
+
});
|
|
78
|
+
var gridTemplateColumns = activeElements.map(function () {
|
|
79
|
+
return 'auto';
|
|
80
|
+
}).join(' ');
|
|
81
|
+
var forceCircle = activeElements.length === 1 && !label;
|
|
82
|
+
var _PINHEAD_DIMENSIONS$s = PINHEAD_DIMENSIONS[size],
|
|
83
|
+
height = _PINHEAD_DIMENSIONS$s.height,
|
|
84
|
+
icon = _PINHEAD_DIMENSIONS$s.icon;
|
|
85
|
+
|
|
86
|
+
var _getOverrides = getOverrides(overrides.PinHead, StyledPinHead),
|
|
87
|
+
_getOverrides2 = _slicedToArray(_getOverrides, 2),
|
|
88
|
+
PinHead = _getOverrides2[0],
|
|
89
|
+
pinHeadProps = _getOverrides2[1];
|
|
90
|
+
|
|
91
|
+
var _getOverrides3 = getOverrides(overrides.PinHeadContent, _ContentItem),
|
|
92
|
+
_getOverrides4 = _slicedToArray(_getOverrides3, 2),
|
|
93
|
+
ContentItem = _getOverrides4[0],
|
|
94
|
+
contentItemProps = _getOverrides4[1];
|
|
95
|
+
|
|
96
|
+
var _getOverrides5 = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor),
|
|
97
|
+
_getOverrides6 = _slicedToArray(_getOverrides5, 2),
|
|
98
|
+
InnerXSmallAnchor = _getOverrides6[0],
|
|
99
|
+
innerXSmallAnchorProps = _getOverrides6[1];
|
|
100
|
+
|
|
101
|
+
var _getOverrides7 = getOverrides(overrides.OuterAnchor, StyledOuterXSmallAnchor),
|
|
102
|
+
_getOverrides8 = _slicedToArray(_getOverrides7, 2),
|
|
103
|
+
OuterXSmallAnchor = _getOverrides8[0],
|
|
104
|
+
outerXSmallAnchorProps = _getOverrides8[1];
|
|
105
|
+
|
|
106
|
+
if (type === PINHEAD_TYPES.fixed && (size === PINHEAD_SIZES_SHAPES.xSmallSquare || size === PINHEAD_SIZES_SHAPES.xSmallCircle)) {
|
|
107
|
+
var round = size === PINHEAD_SIZES_SHAPES.xSmallCircle;
|
|
108
|
+
return /*#__PURE__*/React.createElement(OuterXSmallAnchor, _extends({
|
|
109
|
+
$round: round,
|
|
110
|
+
$background: background,
|
|
111
|
+
$size: height
|
|
112
|
+
}, outerXSmallAnchorProps), /*#__PURE__*/React.createElement(InnerXSmallAnchor, _extends({
|
|
113
|
+
$color: color,
|
|
114
|
+
$round: round,
|
|
115
|
+
$size: icon
|
|
116
|
+
}, innerXSmallAnchorProps)));
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
return /*#__PURE__*/React.createElement(PinHead, _extends({
|
|
120
|
+
$background: background,
|
|
121
|
+
$height: height,
|
|
122
|
+
$gridTemplateColumns: gridTemplateColumns,
|
|
123
|
+
$forceCircle: forceCircle,
|
|
124
|
+
$type: type
|
|
125
|
+
}, pinHeadProps), StartEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
|
|
126
|
+
$height: height,
|
|
127
|
+
$color: color,
|
|
128
|
+
$size: size
|
|
129
|
+
}, contentItemProps), /*#__PURE__*/React.createElement(StartEnhancer, {
|
|
130
|
+
size: icon
|
|
131
|
+
})), label && /*#__PURE__*/React.createElement(ContentItem, _extends({
|
|
132
|
+
$height: height,
|
|
133
|
+
$color: color,
|
|
134
|
+
$size: size
|
|
135
|
+
}, contentItemProps), label), EndEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
|
|
136
|
+
$height: height,
|
|
137
|
+
$color: color,
|
|
138
|
+
$size: size
|
|
139
|
+
}, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
|
|
140
|
+
size: icon
|
|
141
|
+
})));
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
export default PinHead;
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
/*
|
|
8
|
+
Copyright (c) Uber Technologies, Inc.
|
|
9
|
+
|
|
10
|
+
This source code is licensed under the MIT license found in the
|
|
11
|
+
LICENSE file in the root directory of this source tree.
|
|
12
|
+
*/
|
|
13
|
+
import { styled } from '../styles/index.js';
|
|
14
|
+
import { FLOATING_MARKER_ANCHOR_POSITIONS, xSmallPinheadDimension } from './constants.js';
|
|
15
|
+
export var getAnchorTransform = function getAnchorTransform(anchor, anchorSize) {
|
|
16
|
+
var _FLOATING_MARKER_ANCH;
|
|
17
|
+
|
|
18
|
+
return (_FLOATING_MARKER_ANCH = {}, _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.none, ""), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.topLeft, "translate(".concat(anchorSize, "px, ").concat(anchorSize, "px)")), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.topRight, "translate(-100%, ".concat(anchorSize, "px)")), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft, "translate(".concat(anchorSize, "px, -100%)")), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight, "translate(-100%, -100%)"), _FLOATING_MARKER_ANCH)[anchor];
|
|
19
|
+
};
|
|
20
|
+
export var DragShadowContainer = styled('div', function (_ref) {
|
|
21
|
+
var $theme = _ref.$theme,
|
|
22
|
+
$height = _ref.$height,
|
|
23
|
+
$width = _ref.$width,
|
|
24
|
+
$dragging = _ref.$dragging;
|
|
25
|
+
return {
|
|
26
|
+
width: "".concat($width, "px"),
|
|
27
|
+
height: "".concat($height, "px"),
|
|
28
|
+
opacity: $dragging ? 1 : 0,
|
|
29
|
+
visibility: $dragging ? 'visible' : 'hidden',
|
|
30
|
+
transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
|
|
31
|
+
position: 'relative',
|
|
32
|
+
boxShadow: $theme.lighting.shadow600
|
|
33
|
+
};
|
|
34
|
+
});
|
|
35
|
+
DragShadowContainer.displayName = "DragShadowContainer";
|
|
36
|
+
export var DragShadow = styled('div', function (_ref2) {
|
|
37
|
+
var $theme = _ref2.$theme,
|
|
38
|
+
$background = _ref2.$background,
|
|
39
|
+
$width = _ref2.$width;
|
|
40
|
+
return {
|
|
41
|
+
background: $background,
|
|
42
|
+
borderRadius: '50%',
|
|
43
|
+
width: "".concat($width, "px"),
|
|
44
|
+
height: "".concat(4, "px"),
|
|
45
|
+
position: 'absolute',
|
|
46
|
+
bottom: 0
|
|
47
|
+
};
|
|
48
|
+
});
|
|
49
|
+
DragShadow.displayName = "DragShadow";
|
|
50
|
+
export var Needle = styled('div', function (_ref3) {
|
|
51
|
+
var $theme = _ref3.$theme,
|
|
52
|
+
$background = _ref3.$background,
|
|
53
|
+
$height = _ref3.$height;
|
|
54
|
+
return {
|
|
55
|
+
background: $background,
|
|
56
|
+
width: '4px',
|
|
57
|
+
height: "".concat($height, "px"),
|
|
58
|
+
boxShadow: $theme.lighting.shadow600
|
|
59
|
+
};
|
|
60
|
+
});
|
|
61
|
+
Needle.displayName = "Needle";
|
|
62
|
+
export var FloatingMarkerRoot = styled('div', function () {
|
|
63
|
+
return {
|
|
64
|
+
position: 'relative',
|
|
65
|
+
height: "".concat(xSmallPinheadDimension.height, "px"),
|
|
66
|
+
width: "".concat(xSmallPinheadDimension.height, "px")
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
FloatingMarkerRoot.displayName = "FloatingMarkerRoot";
|
|
70
|
+
export var FloatingMarkerPinHeadContainer = styled('div', function (_ref4) {
|
|
71
|
+
var $theme = _ref4.$theme,
|
|
72
|
+
$anchor = _ref4.$anchor,
|
|
73
|
+
$anchorSize = _ref4.$anchorSize;
|
|
74
|
+
return {
|
|
75
|
+
position: 'absolute',
|
|
76
|
+
transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
|
|
77
|
+
transform: getAnchorTransform($anchor, $anchorSize)
|
|
78
|
+
};
|
|
79
|
+
});
|
|
80
|
+
FloatingMarkerPinHeadContainer.displayName = "FloatingMarkerPinHeadContainer";
|
|
81
|
+
export var FloatingMarkerAnchorContainer = styled('div', function () {
|
|
82
|
+
return {
|
|
83
|
+
position: 'absolute'
|
|
84
|
+
};
|
|
85
|
+
});
|
|
86
|
+
FloatingMarkerAnchorContainer.displayName = "FloatingMarkerAnchorContainer";
|
|
87
|
+
export var FixedMarkerRoot = styled('div', function () {
|
|
88
|
+
return {
|
|
89
|
+
display: 'flex',
|
|
90
|
+
alignItems: 'center',
|
|
91
|
+
flexDirection: 'column'
|
|
92
|
+
};
|
|
93
|
+
});
|
|
94
|
+
FixedMarkerRoot.displayName = "FixedMarkerRoot";
|
|
95
|
+
export var FixedMarkerDragContainer = styled('div', function (_ref5) {
|
|
96
|
+
var $theme = _ref5.$theme,
|
|
97
|
+
$translateAmount = _ref5.$translateAmount,
|
|
98
|
+
$performTranslate = _ref5.$performTranslate;
|
|
99
|
+
return {
|
|
100
|
+
transform: "translateY(".concat($performTranslate ? '0px' : "".concat($translateAmount, "px"), ")"),
|
|
101
|
+
transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
|
|
102
|
+
display: 'flex',
|
|
103
|
+
alignItems: 'center',
|
|
104
|
+
flexDirection: 'column'
|
|
105
|
+
};
|
|
106
|
+
});
|
|
107
|
+
FixedMarkerDragContainer.displayName = "FixedMarkerDragContainer";
|
|
108
|
+
export var OuterXSmallAnchor = styled('div', function (_ref6) {
|
|
109
|
+
var $theme = _ref6.$theme,
|
|
110
|
+
$round = _ref6.$round,
|
|
111
|
+
$background = _ref6.$background,
|
|
112
|
+
$size = _ref6.$size;
|
|
113
|
+
return {
|
|
114
|
+
background: $background,
|
|
115
|
+
display: 'flex',
|
|
116
|
+
alignItems: 'center',
|
|
117
|
+
justifyContent: 'center',
|
|
118
|
+
height: "".concat($size, "px"),
|
|
119
|
+
width: "".concat($size, "px"),
|
|
120
|
+
borderRadius: $round ? '50%' : 0,
|
|
121
|
+
boxShadow: $theme.lighting.shadow600
|
|
122
|
+
};
|
|
123
|
+
});
|
|
124
|
+
OuterXSmallAnchor.displayName = "OuterXSmallAnchor";
|
|
125
|
+
export var InnerXSmallAnchor = styled('div', function (_ref7) {
|
|
126
|
+
var $round = _ref7.$round,
|
|
127
|
+
$color = _ref7.$color,
|
|
128
|
+
$size = _ref7.$size;
|
|
129
|
+
return {
|
|
130
|
+
background: $color,
|
|
131
|
+
height: "".concat($size, "px"),
|
|
132
|
+
width: "".concat($size, "px"),
|
|
133
|
+
borderRadius: $round ? '50%' : 0
|
|
134
|
+
};
|
|
135
|
+
});
|
|
136
|
+
InnerXSmallAnchor.displayName = "InnerXSmallAnchor";
|
|
137
|
+
export var PinHead = styled('div', function (_ref8) {
|
|
138
|
+
var $theme = _ref8.$theme,
|
|
139
|
+
$height = _ref8.$height,
|
|
140
|
+
$background = _ref8.$background,
|
|
141
|
+
$gridTemplateColumns = _ref8.$gridTemplateColumns,
|
|
142
|
+
$type = _ref8.$type,
|
|
143
|
+
$forceCircle = _ref8.$forceCircle;
|
|
144
|
+
var sharedStyles = {
|
|
145
|
+
fixed: {
|
|
146
|
+
padding: '0px 12px',
|
|
147
|
+
borderRadius: "".concat($height, "px")
|
|
148
|
+
},
|
|
149
|
+
floating: {
|
|
150
|
+
padding: '0px 8px'
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
return _objectSpread(_objectSpread({
|
|
154
|
+
background: $background,
|
|
155
|
+
height: "".concat($height, "px"),
|
|
156
|
+
display: 'grid',
|
|
157
|
+
gridTemplateColumns: $gridTemplateColumns,
|
|
158
|
+
gap: '8px',
|
|
159
|
+
boxShadow: $theme.lighting.shadow600,
|
|
160
|
+
whiteSpace: 'nowrap'
|
|
161
|
+
}, sharedStyles[$type]), $forceCircle && {
|
|
162
|
+
width: "".concat($height, "px"),
|
|
163
|
+
display: 'flex',
|
|
164
|
+
justifyContent: 'center',
|
|
165
|
+
boxSizing: 'border-box'
|
|
166
|
+
});
|
|
167
|
+
});
|
|
168
|
+
PinHead.displayName = "PinHead";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright (c) Uber Technologies, Inc.
|
|
3
|
+
|
|
4
|
+
This source code is licensed under the MIT license found in the
|
|
5
|
+
LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { FLOATING_MARKER_ANCHOR_POSITIONS, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, FLOATING_MARKER_SIZES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES } from './constants.js';
|
|
@@ -213,8 +213,8 @@ var EmoticonRating = /*#__PURE__*/function (_React$Component) {
|
|
|
213
213
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
214
214
|
"data-baseweb": "emoticon-rating",
|
|
215
215
|
role: "radiogroup",
|
|
216
|
-
onBlur: function onBlur() {
|
|
217
|
-
|
|
216
|
+
onBlur: function onBlur(e) {
|
|
217
|
+
if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
|
|
218
218
|
},
|
|
219
219
|
onMouseLeave: function onMouseLeave() {
|
|
220
220
|
return _this2.updatePreview(undefined);
|
|
@@ -216,8 +216,8 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
|
|
|
216
216
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
217
217
|
"data-baseweb": "star-rating",
|
|
218
218
|
role: "radiogroup",
|
|
219
|
-
onBlur: function onBlur() {
|
|
220
|
-
|
|
219
|
+
onBlur: function onBlur(e) {
|
|
220
|
+
if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
|
|
221
221
|
},
|
|
222
222
|
onMouseLeave: function onMouseLeave() {
|
|
223
223
|
return _this2.updatePreview(undefined);
|