baseui 10.8.0 → 10.9.2
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/a11y/a11y.js +2 -2
- package/a11y/a11y.js.flow +3 -3
- package/button/styled-components.js +47 -18
- package/button/styled-components.js.flow +25 -5
- package/combobox/combobox.js +6 -3
- package/combobox/combobox.js.flow +4 -2
- package/combobox/types.js.flow +2 -0
- package/data-table/column-categorical.js +1 -1
- package/data-table/column-categorical.js.flow +2 -2
- package/data-table/column-numerical.js +1 -1
- package/data-table/column-numerical.js.flow +3 -3
- package/datepicker/styled-components.js +1 -1
- package/datepicker/styled-components.js.flow +4 -1
- package/drawer/drawer.js +3 -1
- package/drawer/drawer.js.flow +7 -1
- package/es/a11y/a11y.js +2 -2
- package/es/button/styled-components.js +32 -2
- package/es/combobox/combobox.js +6 -3
- package/es/data-table/column-categorical.js +2 -2
- package/es/data-table/column-numerical.js +2 -2
- package/es/datepicker/styled-components.js +1 -1
- package/es/drawer/drawer.js +3 -1
- package/es/form-control/form-control.js +58 -7
- package/es/form-control/styled-components.js +27 -6
- package/es/index.js +1 -1
- package/es/map-marker/badge-enhancer.js +61 -0
- package/es/map-marker/constants.js +146 -2
- package/es/map-marker/drag-shadow.js +32 -0
- package/es/map-marker/fixed-marker.js +54 -48
- package/es/map-marker/floating-marker.js +21 -12
- package/es/map-marker/index.js +1 -1
- package/es/map-marker/label-enhancer.js +39 -0
- package/es/map-marker/needle.js +26 -0
- package/es/map-marker/pin-head.js +42 -40
- package/es/map-marker/styled-components.js +177 -32
- package/es/map-marker/types.js +1 -1
- package/es/menu/maybe-child-menu.js +0 -2
- package/es/menu/nested-menus.js +49 -3
- package/es/menu/stateful-container.js +13 -12
- package/es/modal/modal.js +3 -1
- package/es/popover/popover.js +4 -2
- package/es/progress-bar/index.js +1 -1
- package/es/progress-bar/progressbar.js +25 -10
- package/es/progress-bar/styled-components.js +9 -5
- package/es/select/select-component.js +2 -10
- package/es/spinner/styled-components.js +34 -16
- package/es/table/filter.js +3 -1
- package/es/themes/dark-theme/color-component-tokens.js +4 -0
- package/es/themes/light-theme/color-component-tokens.js +4 -0
- package/es/timezonepicker/timezone-picker.js +55 -36
- package/es/timezonepicker/tzdata.js +2 -0
- package/es/timezonepicker/update-tzdata.js +69 -0
- package/esm/a11y/a11y.js +3 -3
- package/esm/button/styled-components.js +47 -18
- package/esm/combobox/combobox.js +6 -3
- package/esm/data-table/column-categorical.js +2 -2
- package/esm/data-table/column-numerical.js +2 -2
- package/esm/datepicker/styled-components.js +1 -1
- package/esm/drawer/drawer.js +3 -1
- package/esm/form-control/form-control.js +60 -9
- package/esm/form-control/styled-components.js +23 -3
- package/esm/index.js +1 -1
- package/esm/map-marker/badge-enhancer.js +79 -0
- package/esm/map-marker/constants.js +94 -4
- package/esm/map-marker/drag-shadow.js +53 -0
- package/esm/map-marker/fixed-marker.js +84 -80
- package/esm/map-marker/floating-marker.js +22 -13
- package/esm/map-marker/index.js +1 -1
- package/esm/map-marker/label-enhancer.js +60 -0
- package/esm/map-marker/needle.js +43 -0
- package/esm/map-marker/pin-head.js +77 -66
- package/esm/map-marker/styled-components.js +182 -51
- package/esm/map-marker/types.js +1 -1
- package/esm/menu/maybe-child-menu.js +0 -2
- package/esm/menu/nested-menus.js +66 -5
- package/esm/menu/stateful-container.js +15 -13
- package/esm/modal/modal.js +3 -1
- package/esm/popover/popover.js +4 -2
- package/esm/progress-bar/index.js +1 -1
- package/esm/progress-bar/progressbar.js +32 -10
- package/esm/progress-bar/styled-components.js +9 -4
- package/esm/select/select-component.js +2 -11
- package/esm/spinner/styled-components.js +35 -16
- package/esm/table/filter.js +3 -1
- package/esm/themes/dark-theme/color-component-tokens.js +4 -0
- package/esm/themes/light-theme/color-component-tokens.js +4 -0
- package/esm/timezonepicker/timezone-picker.js +66 -36
- package/esm/timezonepicker/tzdata.js +2 -0
- package/esm/timezonepicker/update-tzdata.js +160 -0
- package/form-control/form-control.js +61 -8
- package/form-control/form-control.js.flow +82 -10
- package/form-control/index.d.ts +1 -0
- package/form-control/styled-components.js +27 -5
- package/form-control/styled-components.js.flow +25 -3
- package/form-control/types.js.flow +20 -8
- package/index.js +6 -0
- package/index.js.flow +1 -1
- package/map-marker/badge-enhancer.js +90 -0
- package/map-marker/badge-enhancer.js.flow +86 -0
- package/map-marker/constants.js +103 -5
- package/map-marker/constants.js.flow +152 -0
- package/map-marker/drag-shadow.js +64 -0
- package/map-marker/drag-shadow.js.flow +52 -0
- package/map-marker/fixed-marker.js +84 -78
- package/map-marker/fixed-marker.js.flow +78 -66
- package/map-marker/floating-marker.js +22 -13
- package/map-marker/floating-marker.js.flow +30 -17
- package/map-marker/index.d.ts +125 -24
- package/map-marker/index.js +18 -0
- package/map-marker/index.js.flow +3 -0
- package/map-marker/label-enhancer.js +71 -0
- package/map-marker/label-enhancer.js.flow +63 -0
- package/map-marker/needle.js +54 -0
- package/map-marker/needle.js.flow +29 -0
- package/map-marker/pin-head.js +80 -69
- package/map-marker/pin-head.js.flow +122 -84
- package/map-marker/styled-components.js +200 -62
- package/map-marker/styled-components.js.flow +172 -22
- package/map-marker/types.js.flow +69 -20
- package/menu/index.d.ts +9 -4
- package/menu/maybe-child-menu.js +0 -2
- package/menu/maybe-child-menu.js.flow +0 -2
- package/menu/nested-menus.js +66 -5
- package/menu/nested-menus.js.flow +50 -5
- package/menu/stateful-container.js +15 -13
- package/menu/stateful-container.js.flow +19 -13
- package/menu/types.js.flow +7 -1
- package/modal/modal.js +3 -1
- package/modal/modal.js.flow +2 -0
- package/package.json +4 -4
- package/popover/popover.js +4 -2
- package/popover/popover.js.flow +3 -1
- package/progress-bar/index.d.ts +2 -0
- package/progress-bar/index.js +6 -0
- package/progress-bar/index.js.flow +1 -0
- package/progress-bar/progressbar.js +32 -10
- package/progress-bar/progressbar.js.flow +35 -9
- package/progress-bar/styled-components.js +9 -4
- package/progress-bar/styled-components.js.flow +15 -4
- package/progress-bar/types.js.flow +12 -2
- package/select/select-component.js +2 -11
- package/select/select-component.js.flow +5 -7
- package/spinner/styled-components.js +35 -16
- package/spinner/styled-components.js.flow +37 -19
- package/spinner/types.js.flow +10 -0
- package/styles/index.js.flow +1 -1
- package/table/filter.js +3 -1
- package/table/filter.js.flow +5 -1
- package/themes/dark-theme/color-component-tokens.js +4 -0
- package/themes/dark-theme/color-component-tokens.js.flow +4 -0
- package/themes/light-theme/color-component-tokens.js +4 -0
- package/themes/light-theme/color-component-tokens.js.flow +4 -0
- package/themes/types.js.flow +4 -0
- package/timezonepicker/timezone-picker.js +71 -41
- package/timezonepicker/timezone-picker.js.flow +55 -46
- package/timezonepicker/types.js.flow +6 -1
- package/timezonepicker/tzdata.js +10 -0
- package/timezonepicker/tzdata.js.flow +347 -0
- package/timezonepicker/update-tzdata.js +164 -0
- package/timezonepicker/update-tzdata.js.flow +70 -0
|
@@ -10,7 +10,6 @@ export const Label = styled('label', props => {
|
|
|
10
10
|
$disabled,
|
|
11
11
|
$theme: {
|
|
12
12
|
colors,
|
|
13
|
-
sizing,
|
|
14
13
|
typography
|
|
15
14
|
}
|
|
16
15
|
} = props;
|
|
@@ -22,14 +21,36 @@ export const Label = styled('label', props => {
|
|
|
22
21
|
paddingTop: 0,
|
|
23
22
|
paddingRight: 0,
|
|
24
23
|
paddingBottom: 0,
|
|
25
|
-
paddingLeft: 0
|
|
26
|
-
marginTop: sizing.scale300,
|
|
27
|
-
marginRight: 0,
|
|
28
|
-
marginBottom: sizing.scale300,
|
|
29
|
-
marginLeft: 0
|
|
24
|
+
paddingLeft: 0
|
|
30
25
|
};
|
|
31
26
|
});
|
|
32
27
|
Label.displayName = "Label";
|
|
28
|
+
export const LabelContainer = styled('span', ({
|
|
29
|
+
$theme: {
|
|
30
|
+
sizing
|
|
31
|
+
}
|
|
32
|
+
}) => ({
|
|
33
|
+
display: 'flex',
|
|
34
|
+
width: '100%',
|
|
35
|
+
marginTop: sizing.scale300,
|
|
36
|
+
marginRight: 0,
|
|
37
|
+
marginBottom: sizing.scale300,
|
|
38
|
+
marginLeft: 0
|
|
39
|
+
}));
|
|
40
|
+
LabelContainer.displayName = "LabelContainer";
|
|
41
|
+
export const LabelEndEnhancer = styled('span', ({
|
|
42
|
+
$disabled,
|
|
43
|
+
$counterError,
|
|
44
|
+
$theme: {
|
|
45
|
+
colors,
|
|
46
|
+
typography
|
|
47
|
+
}
|
|
48
|
+
}) => ({ ...typography.font100,
|
|
49
|
+
flex: 0,
|
|
50
|
+
width: '100%',
|
|
51
|
+
color: $counterError ? colors.negative400 : $disabled ? colors.contentSecondary : colors.contentPrimary
|
|
52
|
+
}));
|
|
53
|
+
LabelEndEnhancer.displayName = "LabelEndEnhancer";
|
|
33
54
|
export const Caption = styled('div', props => {
|
|
34
55
|
const {
|
|
35
56
|
$error,
|
package/es/index.js
CHANGED
|
@@ -8,4 +8,4 @@ export { styled, withStyle, withWrapper, useStyletron, createThemedStyled, creat
|
|
|
8
8
|
export { createTheme, createDarkTheme, createLightTheme, lightThemePrimitives, darkThemePrimitives, darkThemeOverrides, DarkTheme, DarkThemeMove, LightTheme, LightThemeMove } from './themes/index.js';
|
|
9
9
|
export { default as LocaleProvider } from './locale/index.js';
|
|
10
10
|
export { default as BaseProvider } from './helpers/base-provider.js';
|
|
11
|
-
export { mergeOverrides } from './helpers/overrides.js';
|
|
11
|
+
export { getOverrides, mergeOverrides } from './helpers/overrides.js';
|
|
@@ -0,0 +1,61 @@
|
|
|
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
|
+
/*
|
|
4
|
+
Copyright (c) Uber Technologies, Inc.
|
|
5
|
+
|
|
6
|
+
This source code is licensed under the MIT license found in the
|
|
7
|
+
LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
import * as React from 'react';
|
|
10
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
11
|
+
import { StyledBadgeEnhancerRoot } from './styled-components.js';
|
|
12
|
+
import { PINHEAD_TYPES, BADGE_ENHANCER_SIZES, BADGE_ENHANCER_POSITIONS, BADGE_ENHANCER_CONTENT_SIZE } from './constants.js';
|
|
13
|
+
|
|
14
|
+
const BadgeEnhancer = ({
|
|
15
|
+
pinHeadSize,
|
|
16
|
+
markerType,
|
|
17
|
+
badgeEnhancerSize = BADGE_ENHANCER_SIZES.none,
|
|
18
|
+
badgeEnhancerContent: BadgeEnhancerContent,
|
|
19
|
+
overrides = {}
|
|
20
|
+
}) => {
|
|
21
|
+
if (badgeEnhancerSize === null || badgeEnhancerSize == BADGE_ENHANCER_SIZES.none) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && !BadgeEnhancerContent) {
|
|
26
|
+
if (process.env.NODE_ENV !== "production") {
|
|
27
|
+
console.warn(`Badges (except for size ${BADGE_ENHANCER_SIZES.xSmall}) must contain content`);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (markerType === PINHEAD_TYPES.floating) {
|
|
34
|
+
if (process.env.NODE_ENV !== "production") {
|
|
35
|
+
console.warn(`Badges can only be rendered on fixed markers`);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const positions = BADGE_ENHANCER_POSITIONS[pinHeadSize];
|
|
42
|
+
const position = positions ? positions[badgeEnhancerSize] : null;
|
|
43
|
+
|
|
44
|
+
if (!position) {
|
|
45
|
+
if (process.env.NODE_ENV !== "production") {
|
|
46
|
+
console.warn(`Badge size ${badgeEnhancerSize} cannot be rendered with pinhead size ${pinHeadSize}`);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
return null;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
const [BadgeEnhancerRoot, badgeEnhancerRootProps] = getOverrides(overrides.BadgeEnhancer, StyledBadgeEnhancerRoot);
|
|
53
|
+
return /*#__PURE__*/React.createElement(BadgeEnhancerRoot, _extends({
|
|
54
|
+
$size: badgeEnhancerSize,
|
|
55
|
+
$position: position
|
|
56
|
+
}, badgeEnhancerRootProps), BadgeEnhancerContent && badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && /*#__PURE__*/React.createElement(BadgeEnhancerContent, {
|
|
57
|
+
size: BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]
|
|
58
|
+
}));
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export default BadgeEnhancer;
|
|
@@ -17,6 +17,8 @@ export const NEEDLE_HEIGHTS = Object.freeze({
|
|
|
17
17
|
[NEEDLE_SIZES.tall]: 20
|
|
18
18
|
});
|
|
19
19
|
export const PINHEAD_SIZES_SHAPES = Object.freeze({
|
|
20
|
+
xxSmallCircle: 'xx-small-circle',
|
|
21
|
+
xxSmallSquare: 'xx-small-square',
|
|
20
22
|
xSmallCircle: 'x-small-circle',
|
|
21
23
|
xSmallSquare: 'x-small-square',
|
|
22
24
|
small: 'small',
|
|
@@ -27,7 +29,13 @@ export const xSmallPinheadDimension = {
|
|
|
27
29
|
height: 16,
|
|
28
30
|
icon: 4
|
|
29
31
|
};
|
|
32
|
+
export const xxSmallPinheadDimension = {
|
|
33
|
+
height: 8,
|
|
34
|
+
icon: 4
|
|
35
|
+
};
|
|
30
36
|
export const PINHEAD_DIMENSIONS = Object.freeze({
|
|
37
|
+
[PINHEAD_SIZES_SHAPES.xxSmallSquare]: xxSmallPinheadDimension,
|
|
38
|
+
[PINHEAD_SIZES_SHAPES.xxSmallCircle]: xxSmallPinheadDimension,
|
|
31
39
|
[PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadDimension,
|
|
32
40
|
[PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadDimension,
|
|
33
41
|
[PINHEAD_SIZES_SHAPES.small]: {
|
|
@@ -61,9 +69,145 @@ export const FLOATING_MARKER_ANCHOR_POSITIONS = Object.freeze({
|
|
|
61
69
|
});
|
|
62
70
|
export const FLOATING_MARKER_ANCHOR_TYPES = Object.freeze({
|
|
63
71
|
circle: 'circle',
|
|
64
|
-
square: 'square'
|
|
72
|
+
square: 'square',
|
|
73
|
+
xxSmallCircle: 'xx-small-circle',
|
|
74
|
+
xxSmallSquare: 'xx-small-square'
|
|
65
75
|
});
|
|
66
76
|
export const dragShadowHeight = 4;
|
|
67
77
|
export const dragShadowMarginTop = 6;
|
|
68
78
|
export const dragShadowWidth = 6;
|
|
69
|
-
export const anchorSize = 16;
|
|
79
|
+
export const anchorSize = 16;
|
|
80
|
+
const labelSmall = 'LabelSmall';
|
|
81
|
+
export const LABEL_SIZES = {
|
|
82
|
+
[PINHEAD_SIZES_SHAPES.xxSmallCircle]: labelSmall,
|
|
83
|
+
[PINHEAD_SIZES_SHAPES.xxSmallSquare]: labelSmall,
|
|
84
|
+
[PINHEAD_SIZES_SHAPES.xSmallCircle]: labelSmall,
|
|
85
|
+
[PINHEAD_SIZES_SHAPES.xSmallSquare]: labelSmall,
|
|
86
|
+
[PINHEAD_SIZES_SHAPES.small]: labelSmall,
|
|
87
|
+
[PINHEAD_SIZES_SHAPES.medium]: 'LabelMedium',
|
|
88
|
+
[PINHEAD_SIZES_SHAPES.large]: 'LabelLarge'
|
|
89
|
+
};
|
|
90
|
+
export const LABEL_ENHANCER_POSITIONS = Object.freeze({
|
|
91
|
+
none: 'none',
|
|
92
|
+
top: 'top',
|
|
93
|
+
left: 'left',
|
|
94
|
+
right: 'right',
|
|
95
|
+
bottom: 'bottom'
|
|
96
|
+
});
|
|
97
|
+
export const BADGE_ENHANCER_SIZES = Object.freeze({
|
|
98
|
+
none: 'none',
|
|
99
|
+
xSmall: 'x-small',
|
|
100
|
+
small: 'small',
|
|
101
|
+
mediumText: 'medium-text',
|
|
102
|
+
mediumIcon: 'medium-icon'
|
|
103
|
+
});
|
|
104
|
+
const xSmallPinheadBadge = {
|
|
105
|
+
[BADGE_ENHANCER_SIZES.none]: null,
|
|
106
|
+
[BADGE_ENHANCER_SIZES.xSmall]: {
|
|
107
|
+
x: -5,
|
|
108
|
+
y: -3
|
|
109
|
+
},
|
|
110
|
+
[BADGE_ENHANCER_SIZES.small]: null,
|
|
111
|
+
[BADGE_ENHANCER_SIZES.mediumText]: null,
|
|
112
|
+
[BADGE_ENHANCER_SIZES.mediumIcon]: null
|
|
113
|
+
};
|
|
114
|
+
export const BADGE_ENHANCER_POSITIONS = {
|
|
115
|
+
[PINHEAD_SIZES_SHAPES.xxSmallSquare]: null,
|
|
116
|
+
[PINHEAD_SIZES_SHAPES.xxSmallCircle]: null,
|
|
117
|
+
[PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadBadge,
|
|
118
|
+
[PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadBadge,
|
|
119
|
+
[PINHEAD_SIZES_SHAPES.small]: {
|
|
120
|
+
[BADGE_ENHANCER_SIZES.none]: null,
|
|
121
|
+
[BADGE_ENHANCER_SIZES.xSmall]: {
|
|
122
|
+
x: -7,
|
|
123
|
+
y: -1
|
|
124
|
+
},
|
|
125
|
+
[BADGE_ENHANCER_SIZES.small]: {
|
|
126
|
+
x: -8,
|
|
127
|
+
y: -8
|
|
128
|
+
},
|
|
129
|
+
[BADGE_ENHANCER_SIZES.mediumText]: null,
|
|
130
|
+
[BADGE_ENHANCER_SIZES.mediumIcon]: null
|
|
131
|
+
},
|
|
132
|
+
[PINHEAD_SIZES_SHAPES.medium]: {
|
|
133
|
+
[BADGE_ENHANCER_SIZES.none]: null,
|
|
134
|
+
[BADGE_ENHANCER_SIZES.xSmall]: {
|
|
135
|
+
x: -9,
|
|
136
|
+
y: 1
|
|
137
|
+
},
|
|
138
|
+
[BADGE_ENHANCER_SIZES.small]: {
|
|
139
|
+
x: -10,
|
|
140
|
+
y: -4
|
|
141
|
+
},
|
|
142
|
+
[BADGE_ENHANCER_SIZES.mediumText]: {
|
|
143
|
+
x: -12,
|
|
144
|
+
y: -8
|
|
145
|
+
},
|
|
146
|
+
[BADGE_ENHANCER_SIZES.mediumIcon]: {
|
|
147
|
+
x: -12,
|
|
148
|
+
y: -8
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
[PINHEAD_SIZES_SHAPES.large]: {
|
|
152
|
+
[BADGE_ENHANCER_SIZES.none]: null,
|
|
153
|
+
[BADGE_ENHANCER_SIZES.xSmall]: {
|
|
154
|
+
x: -11,
|
|
155
|
+
y: 3
|
|
156
|
+
},
|
|
157
|
+
[BADGE_ENHANCER_SIZES.small]: null,
|
|
158
|
+
[BADGE_ENHANCER_SIZES.mediumText]: {
|
|
159
|
+
x: -14,
|
|
160
|
+
y: -6
|
|
161
|
+
},
|
|
162
|
+
[BADGE_ENHANCER_SIZES.mediumIcon]: {
|
|
163
|
+
x: -14,
|
|
164
|
+
y: -6
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
};
|
|
168
|
+
export const BADGE_ENHANCER_STYLES = {
|
|
169
|
+
[BADGE_ENHANCER_SIZES.none]: {},
|
|
170
|
+
[BADGE_ENHANCER_SIZES.xSmall]: {
|
|
171
|
+
height: '8px',
|
|
172
|
+
width: '8px',
|
|
173
|
+
borderRadius: '50%'
|
|
174
|
+
},
|
|
175
|
+
[BADGE_ENHANCER_SIZES.small]: {
|
|
176
|
+
height: '16px',
|
|
177
|
+
width: '16px',
|
|
178
|
+
borderRadius: '50%',
|
|
179
|
+
display: 'flex',
|
|
180
|
+
alignItems: 'center',
|
|
181
|
+
justifyContent: 'center',
|
|
182
|
+
fontSize: '10px'
|
|
183
|
+
},
|
|
184
|
+
[BADGE_ENHANCER_SIZES.mediumText]: {
|
|
185
|
+
borderRadius: '10px',
|
|
186
|
+
height: '20px',
|
|
187
|
+
padding: '0px 8px',
|
|
188
|
+
display: 'flex',
|
|
189
|
+
alignItems: 'center',
|
|
190
|
+
boxSizing: 'border-box'
|
|
191
|
+
},
|
|
192
|
+
[BADGE_ENHANCER_SIZES.mediumIcon]: {
|
|
193
|
+
height: '20px',
|
|
194
|
+
width: '20px',
|
|
195
|
+
borderRadius: '50%',
|
|
196
|
+
display: 'flex',
|
|
197
|
+
alignItems: 'center',
|
|
198
|
+
justifyContent: 'center',
|
|
199
|
+
boxSizing: 'border-box'
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
export const BADGE_ENHANCER_CONTENT_SIZE = {
|
|
203
|
+
[BADGE_ENHANCER_SIZES.none]: 0,
|
|
204
|
+
[BADGE_ENHANCER_SIZES.xSmall]: 0,
|
|
205
|
+
[BADGE_ENHANCER_SIZES.small]: 10,
|
|
206
|
+
[BADGE_ENHANCER_SIZES.mediumText]: 12,
|
|
207
|
+
[BADGE_ENHANCER_SIZES.mediumIcon]: 12
|
|
208
|
+
};
|
|
209
|
+
export const KIND = Object.freeze({
|
|
210
|
+
default: 'default',
|
|
211
|
+
accent: 'accent',
|
|
212
|
+
negative: 'negative'
|
|
213
|
+
});
|
|
@@ -0,0 +1,32 @@
|
|
|
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
|
+
/*
|
|
4
|
+
Copyright (c) Uber Technologies, Inc.
|
|
5
|
+
|
|
6
|
+
This source code is licensed under the MIT license found in the
|
|
7
|
+
LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
import * as React from 'react';
|
|
10
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
11
|
+
import { dragShadowWidth } from './constants.js';
|
|
12
|
+
import { StyledDragShadow, StyledDragShadowContainer } from './styled-components.js';
|
|
13
|
+
|
|
14
|
+
const DragShadow = ({
|
|
15
|
+
background,
|
|
16
|
+
dragging,
|
|
17
|
+
height,
|
|
18
|
+
overrides = {}
|
|
19
|
+
}) => {
|
|
20
|
+
const [DragShadowContainer, dragShadowContainerProps] = getOverrides(overrides.DragShadowContainer, StyledDragShadowContainer);
|
|
21
|
+
const [DragShadow, dragShadowProps] = getOverrides(overrides.DragShadow, StyledDragShadow);
|
|
22
|
+
return /*#__PURE__*/React.createElement(DragShadowContainer, _extends({
|
|
23
|
+
$width: dragShadowWidth,
|
|
24
|
+
$height: height,
|
|
25
|
+
$dragging: dragging
|
|
26
|
+
}, dragShadowContainerProps), /*#__PURE__*/React.createElement(DragShadow, _extends({
|
|
27
|
+
$width: dragShadowWidth,
|
|
28
|
+
$background: background
|
|
29
|
+
}, dragShadowProps)));
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export default DragShadow;
|
|
@@ -9,39 +9,32 @@ LICENSE file in the root directory of this source tree.
|
|
|
9
9
|
import * as React from 'react';
|
|
10
10
|
import { useStyletron } from '../styles/index.js';
|
|
11
11
|
import { getOverrides } from '../helpers/overrides.js';
|
|
12
|
-
import { PINHEAD_TYPES, NEEDLE_SIZES,
|
|
12
|
+
import { PINHEAD_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, LABEL_ENHANCER_POSITIONS, KIND, dragShadowHeight, dragShadowMarginTop } from './constants.js';
|
|
13
13
|
import PinHead from './pin-head.js';
|
|
14
|
-
import
|
|
14
|
+
import Needle from './needle.js';
|
|
15
|
+
import DragShadow from './drag-shadow.js';
|
|
16
|
+
import { StyledFixedMarkerDragContainer, StyledFixedMarkerRoot } from './styled-components.js';
|
|
15
17
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
$background: background,
|
|
24
|
-
$height: NEEDLE_HEIGHTS[size]
|
|
25
|
-
}, needleProps));
|
|
26
|
-
};
|
|
18
|
+
function getColors(kind, theme) {
|
|
19
|
+
if (kind === KIND.accent) {
|
|
20
|
+
return {
|
|
21
|
+
color: theme.colors.contentInversePrimary,
|
|
22
|
+
backgroundColor: theme.colors.backgroundAccent
|
|
23
|
+
};
|
|
24
|
+
}
|
|
27
25
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}, dragShadowContainerProps), /*#__PURE__*/React.createElement(DragShadow, _extends({
|
|
41
|
-
$width: dragShadowWidth,
|
|
42
|
-
$background: background
|
|
43
|
-
}, dragShadowProps)));
|
|
44
|
-
};
|
|
26
|
+
if (kind === KIND.negative) {
|
|
27
|
+
return {
|
|
28
|
+
color: theme.colors.contentInversePrimary,
|
|
29
|
+
backgroundColor: theme.colors.backgroundNegative
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return {
|
|
34
|
+
color: theme.colors.contentInversePrimary,
|
|
35
|
+
backgroundColor: theme.colors.backgroundInversePrimary
|
|
36
|
+
};
|
|
37
|
+
}
|
|
45
38
|
|
|
46
39
|
const FixedMarker = ({
|
|
47
40
|
size = PINHEAD_SIZES_SHAPES.medium,
|
|
@@ -49,28 +42,36 @@ const FixedMarker = ({
|
|
|
49
42
|
label,
|
|
50
43
|
startEnhancer,
|
|
51
44
|
endEnhancer,
|
|
52
|
-
|
|
53
|
-
background,
|
|
45
|
+
kind = KIND.default,
|
|
54
46
|
dragging = false,
|
|
55
|
-
overrides = {}
|
|
47
|
+
overrides = {},
|
|
48
|
+
labelEnhancerContent = null,
|
|
49
|
+
labelEnhancerPosition = LABEL_ENHANCER_POSITIONS.bottom,
|
|
50
|
+
badgeEnhancerSize = null,
|
|
51
|
+
badgeEnhancerContent = null,
|
|
52
|
+
...restProps
|
|
56
53
|
}) => {
|
|
57
54
|
const [, theme] = useStyletron();
|
|
58
55
|
const {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
color = color || primaryB;
|
|
65
|
-
background = background || backgroundInversePrimary;
|
|
66
|
-
const doesPinHeadTransformOnDrag = needle !== NEEDLE_SIZES.none;
|
|
67
|
-
const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
|
|
56
|
+
color,
|
|
57
|
+
backgroundColor
|
|
58
|
+
} = getColors(kind, theme);
|
|
59
|
+
const doesPinHeadTransformOnDrag = needle !== NEEDLE_SIZES.none && size !== PINHEAD_SIZES_SHAPES.xxSmallCircle && size !== PINHEAD_SIZES_SHAPES.xxSmallSquare;
|
|
60
|
+
const [Root, rootProps] = getOverrides(overrides.Root, StyledFixedMarkerRoot);
|
|
68
61
|
const [FixedMarkerDragContainer, fixedMarkerDragContainerProps] = getOverrides(overrides.DragContainer, StyledFixedMarkerDragContainer);
|
|
62
|
+
const renderNeedle = needle !== NEEDLE_SIZES.none && ![PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare].includes(size);
|
|
63
|
+
|
|
64
|
+
if (process.env.NODE_ENV !== "production") {
|
|
65
|
+
if (needle !== NEEDLE_SIZES.none && [PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare].includes(size)) {
|
|
66
|
+
console.warn(`Needles cannot be rendered with ${PINHEAD_SIZES_SHAPES.xxSmallCircle} or ${PINHEAD_SIZES_SHAPES.xxSmallSquare} pin heads`);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
69
70
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
70
71
|
"data-baseweb": "fixed-map-marker"
|
|
71
72
|
}, rootProps), /*#__PURE__*/React.createElement(FixedMarkerDragContainer, _extends({
|
|
72
73
|
$translateAmount: dragShadowMarginTop + dragShadowHeight,
|
|
73
|
-
$performTranslate: doesPinHeadTransformOnDrag && dragging
|
|
74
|
+
$performTranslate: doesPinHeadTransformOnDrag && !dragging
|
|
74
75
|
}, fixedMarkerDragContainerProps), /*#__PURE__*/React.createElement(PinHead, _extends({
|
|
75
76
|
size: size,
|
|
76
77
|
label: label
|
|
@@ -80,15 +81,20 @@ const FixedMarker = ({
|
|
|
80
81
|
endEnhancer
|
|
81
82
|
} : {}, {
|
|
82
83
|
color: color,
|
|
83
|
-
background:
|
|
84
|
+
background: backgroundColor,
|
|
84
85
|
type: PINHEAD_TYPES.fixed,
|
|
85
|
-
overrides: overrides
|
|
86
|
-
|
|
86
|
+
overrides: overrides,
|
|
87
|
+
badgeEnhancerSize: badgeEnhancerSize,
|
|
88
|
+
badgeEnhancerContent: badgeEnhancerContent,
|
|
89
|
+
labelEnhancerContent: labelEnhancerContent,
|
|
90
|
+
labelEnhancerPosition: labelEnhancerPosition,
|
|
91
|
+
needle: needle
|
|
92
|
+
})), renderNeedle && /*#__PURE__*/React.createElement(Needle, {
|
|
87
93
|
size: needle,
|
|
88
|
-
background:
|
|
94
|
+
background: backgroundColor,
|
|
89
95
|
overrides: overrides
|
|
90
96
|
})), doesPinHeadTransformOnDrag && /*#__PURE__*/React.createElement(DragShadow, {
|
|
91
|
-
background:
|
|
97
|
+
background: backgroundColor,
|
|
92
98
|
dragging: dragging,
|
|
93
99
|
height: dragShadowMarginTop + dragShadowHeight,
|
|
94
100
|
overrides: overrides
|
|
@@ -10,12 +10,22 @@ import * as React from 'react';
|
|
|
10
10
|
import { useStyletron } from '../styles/index.js';
|
|
11
11
|
import PinHead from './pin-head.js';
|
|
12
12
|
import { getOverrides } from '../helpers/overrides.js';
|
|
13
|
-
import {
|
|
14
|
-
import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES,
|
|
13
|
+
import { StyledFloatingMarkerRoot, StyledFloatingMarkerAnchorContainer, StyledFloatingMarkerPinHeadContainer } from './styled-components.js';
|
|
14
|
+
import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, PINHEAD_DIMENSIONS } from './constants.js';
|
|
15
|
+
|
|
16
|
+
function getAnchorPinHeadSize(anchorType) {
|
|
17
|
+
if (anchorType === FLOATING_MARKER_ANCHOR_TYPES.circle) {
|
|
18
|
+
return PINHEAD_SIZES_SHAPES.xSmallCircle;
|
|
19
|
+
} else if (anchorType === FLOATING_MARKER_ANCHOR_TYPES.square) {
|
|
20
|
+
return PINHEAD_SIZES_SHAPES.xSmallSquare;
|
|
21
|
+
} else if (anchorType === FLOATING_MARKER_ANCHOR_TYPES.xxSmallSquare) {
|
|
22
|
+
return PINHEAD_SIZES_SHAPES.xxSmallSquare;
|
|
23
|
+
} else {
|
|
24
|
+
return PINHEAD_SIZES_SHAPES.xxSmallCircle;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
15
27
|
|
|
16
28
|
const FloatingMarker = ({
|
|
17
|
-
color,
|
|
18
|
-
background,
|
|
19
29
|
label,
|
|
20
30
|
size = PINHEAD_SIZES_SHAPES.medium,
|
|
21
31
|
anchor = FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft,
|
|
@@ -33,21 +43,20 @@ const FloatingMarker = ({
|
|
|
33
43
|
primaryB
|
|
34
44
|
}
|
|
35
45
|
} = theme;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const anchorPinHeadSize = anchorType === FLOATING_MARKER_ANCHOR_TYPES.circle ? PINHEAD_SIZES_SHAPES.xSmallCircle : PINHEAD_SIZES_SHAPES.xSmallSquare;
|
|
39
|
-
const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
|
|
46
|
+
const anchorPinHeadSize = getAnchorPinHeadSize(anchorType);
|
|
47
|
+
const [Root, rootProps] = getOverrides(overrides.Root, StyledFloatingMarkerRoot);
|
|
40
48
|
const [FloatingMarkerPinHeadContainer, floatingMarkerPinHeadContainerProps] = getOverrides(overrides.PinHeadContainer, StyledFloatingMarkerPinHeadContainer);
|
|
41
49
|
const [FloatingMarkerAnchorContainer, floatingMarkerAnchorContainerProps] = getOverrides(overrides.AnchorContainer, StyledFloatingMarkerAnchorContainer);
|
|
42
50
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
43
|
-
"data-baseweb": "floating-map-marker"
|
|
51
|
+
"data-baseweb": "floating-map-marker",
|
|
52
|
+
$size: PINHEAD_DIMENSIONS[anchorPinHeadSize].height
|
|
44
53
|
}, rootProps), /*#__PURE__*/React.createElement(FloatingMarkerPinHeadContainer, _extends({
|
|
45
54
|
$anchor: anchor,
|
|
46
|
-
$anchorSize:
|
|
55
|
+
$anchorSize: PINHEAD_DIMENSIONS[anchorPinHeadSize].height
|
|
47
56
|
}, floatingMarkerPinHeadContainerProps), /*#__PURE__*/React.createElement(PinHead, {
|
|
48
57
|
size: size,
|
|
49
|
-
color:
|
|
50
|
-
background:
|
|
58
|
+
color: primaryA,
|
|
59
|
+
background: backgroundPrimary,
|
|
51
60
|
type: PINHEAD_TYPES.floating,
|
|
52
61
|
label: label,
|
|
53
62
|
startEnhancer: startEnhancer,
|
package/es/map-marker/index.js
CHANGED
|
@@ -6,4 +6,4 @@ LICENSE file in the root directory of this source tree.
|
|
|
6
6
|
*/
|
|
7
7
|
export { default as FixedMarker } from './fixed-marker.js';
|
|
8
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';
|
|
9
|
+
export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND } from './constants.js';
|
|
@@ -0,0 +1,39 @@
|
|
|
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
|
+
/*
|
|
4
|
+
Copyright (c) Uber Technologies, Inc.
|
|
5
|
+
|
|
6
|
+
This source code is licensed under the MIT license found in the
|
|
7
|
+
LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
import * as React from 'react';
|
|
10
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
11
|
+
import { RelativeContainer, StyledStrokedLabel, StyledStrokedLabelContainer } from './styled-components.js';
|
|
12
|
+
import { LABEL_ENHANCER_POSITIONS } from './constants.js';
|
|
13
|
+
|
|
14
|
+
const LabelEnhancer = ({
|
|
15
|
+
labelEnhancerContent,
|
|
16
|
+
labelEnhancerPosition,
|
|
17
|
+
needleHeight,
|
|
18
|
+
size,
|
|
19
|
+
overrides = {}
|
|
20
|
+
}) => {
|
|
21
|
+
if (!labelEnhancerPosition || labelEnhancerPosition === LABEL_ENHANCER_POSITIONS.none) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (!labelEnhancerContent) {
|
|
26
|
+
return null;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const [StrokedLabelContainer, strokedLabelContainerProps] = getOverrides(overrides.LabelEnhancerContainer, StyledStrokedLabelContainer);
|
|
30
|
+
const [StrokedLabel, strokedLabelProps] = getOverrides(overrides.LabelEnhancer, StyledStrokedLabel);
|
|
31
|
+
return /*#__PURE__*/React.createElement(StrokedLabelContainer, _extends({
|
|
32
|
+
$position: labelEnhancerPosition,
|
|
33
|
+
$labelOffset: needleHeight
|
|
34
|
+
}, strokedLabelContainerProps), /*#__PURE__*/React.createElement(RelativeContainer, null, /*#__PURE__*/React.createElement(StrokedLabel, _extends({
|
|
35
|
+
$size: size
|
|
36
|
+
}, strokedLabelProps), labelEnhancerContent)));
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export default LabelEnhancer;
|
|
@@ -0,0 +1,26 @@
|
|
|
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
|
+
/*
|
|
4
|
+
Copyright (c) Uber Technologies, Inc.
|
|
5
|
+
|
|
6
|
+
This source code is licensed under the MIT license found in the
|
|
7
|
+
LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
import * as React from 'react';
|
|
10
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
11
|
+
import { NEEDLE_HEIGHTS } from './constants.js';
|
|
12
|
+
import { StyledNeedle } from './styled-components.js';
|
|
13
|
+
|
|
14
|
+
const Needle = ({
|
|
15
|
+
size,
|
|
16
|
+
background,
|
|
17
|
+
overrides = {}
|
|
18
|
+
}) => {
|
|
19
|
+
const [Needle, needleProps] = getOverrides(overrides.Needle, StyledNeedle);
|
|
20
|
+
return /*#__PURE__*/React.createElement(Needle, _extends({
|
|
21
|
+
$background: background,
|
|
22
|
+
$height: NEEDLE_HEIGHTS[size]
|
|
23
|
+
}, needleProps));
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export default Needle;
|