@sellout/ui 0.0.151 → 0.0.152
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.
|
@@ -7,14 +7,17 @@ import Icon, { Icons } from './Icon.js';
|
|
|
7
7
|
import Label from './Label.js';
|
|
8
8
|
import Flex from './Flex.js';
|
|
9
9
|
|
|
10
|
-
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n height:
|
|
10
|
+
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n height: ", ";\n width: ", ";\n"], ["\n position: relative;\n height: ",
|
|
11
|
+
";\n width: ", ";\n"])), function (props) {
|
|
12
|
+
return props.open ? (props.height ? props.height : "65px") : "65px";
|
|
13
|
+
}, function (props) { return props.width; });
|
|
11
14
|
var FieldContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n max-height: ", ";\n width: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n box-sizing: border-box;\n border-radius: 8px;\n transition: all 0.2s;\n z-index: ", ";\n box-shadow: ", ";\n overflow: hidden;\n outline: none;\n\n &:hover {\n cursor: pointer;\n border: 1px solid ", ";\n }\n\n &:focus {\n border: 1px solid ", ";\n }\n"], ["\n position: absolute;\n max-height: ", ";\n width: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n box-sizing: border-box;\n border-radius: 8px;\n transition: all 0.2s;\n z-index: ", ";\n box-shadow: ",
|
|
12
15
|
";\n overflow: hidden;\n outline: none;\n\n &:hover {\n cursor: pointer;\n border: 1px solid ", ";\n }\n\n &:focus {\n border: 1px solid ", ";\n }\n"])), function (props) { return (props.open ? props.height : "38px"); }, function (props) { return props.width; }, Colors.White, Colors.Grey5, function (props) { return (props.open ? 100 : 0); }, function (props) {
|
|
13
16
|
return props.open ? "0px 4px 16px rgba(0, 0, 0, 0.05)" : "";
|
|
14
17
|
}, darken(0.05, Colors.Grey5), Colors.Grey4);
|
|
15
18
|
var TopRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n height: 38px;\n padding: 0 15px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n height: 38px;\n padding: 0 15px;\n"])));
|
|
16
19
|
var Value = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n margin-right: 10px;\n white-space: nowrap;\n"], ["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n margin-right: 10px;\n white-space: nowrap;\n"])), Colors.Grey1);
|
|
17
|
-
var ItemsContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n max-height: ", ";\n overflow: ", ";\n
|
|
20
|
+
var ItemsContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n max-height: ", ";\n overflow: ", ";\n"], ["\n position: relative;\n max-height: ", ";\n overflow: ", ";\n"])), function (props) { return (props.open ? props.height : "0px"); }, function (props) { return (props.open ? "scroll" : "hidden"); });
|
|
18
21
|
var Item = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 15px;\n background-color: ", ";\n font-size: 1.2rem;\n color: ", ";\n transition: all 0.2s;\n\n &:hover {\n cursor: pointer;\n background-color: ", ";\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 15px;\n background-color: ",
|
|
19
22
|
";\n font-size: 1.2rem;\n color: ", ";\n transition: all 0.2s;\n\n &:hover {\n cursor: pointer;\n background-color: ", ";\n }\n"])), function (props) {
|
|
20
23
|
return props.selected ? Colors.Grey7 : Colors.White;
|
|
@@ -27,17 +30,17 @@ var DropdownTypes;
|
|
|
27
30
|
var Dropdown = function (_a) {
|
|
28
31
|
var
|
|
29
32
|
// type = DropdownTypes.Regular,
|
|
30
|
-
value = _a.value, onChange = _a.onChange, _b = _a.width, width = _b === void 0 ?
|
|
33
|
+
value = _a.value, onChange = _a.onChange, _b = _a.width, width = _b === void 0 ? "auto" : _b, items = _a.items, label = _a.label, tip = _a.tip, icon = _a.icon, _c = _a.height, height = _c === void 0 ? "65px" : _c;
|
|
31
34
|
var _d = React.useState(false), open = _d[0], setOpen = _d[1];
|
|
32
35
|
return (React.createElement(Container, { width: width, open: open, height: height },
|
|
33
36
|
label && React.createElement(Label, { text: label, tip: tip }),
|
|
34
|
-
React.createElement(FieldContainer, { tabIndex: 1, open: open, height: items.length > 4 ? "130px" : items.length * 30 + 43 + "px", width: width, onClick: function () { return setOpen(!open); }, onBlur: function () { return setOpen(false); } },
|
|
37
|
+
React.createElement(FieldContainer, { tabIndex: 1, open: open, height: (items === null || items === void 0 ? void 0 : items.length) > 4 ? "130px" : (items === null || items === void 0 ? void 0 : items.length) * 30 + 43 + "px", width: width, onClick: function () { return setOpen(!open); }, onBlur: function () { return setOpen(false); } },
|
|
35
38
|
React.createElement(TopRow, null,
|
|
36
39
|
React.createElement(Flex, { align: "center" },
|
|
37
40
|
icon && icon,
|
|
38
41
|
React.createElement(Value, null, value)),
|
|
39
42
|
React.createElement(Icon, { icon: Icons.Sort, size: 12, color: Colors.Grey1 })),
|
|
40
|
-
React.createElement(ItemsContainer, { open: open, height: items.length > 3 ? "90px" : items.length * 30 + "px" }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
|
|
43
|
+
React.createElement(ItemsContainer, { open: open, height: (items === null || items === void 0 ? void 0 : items.length) > 3 ? "90px" : (items === null || items === void 0 ? void 0 : items.length) * 30 + "px" }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
|
|
41
44
|
return (React.createElement(Item, { key: index, selected: false, onClick: function () { return onChange(item.value); } },
|
|
42
45
|
item.icon && item.icon,
|
|
43
46
|
item.text));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellout/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.152",
|
|
4
4
|
"main": "build/index.js",
|
|
5
5
|
"module": "build/index.es.js",
|
|
6
6
|
"files": [
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"shortid": "^2.2.16",
|
|
71
71
|
"use-places-autocomplete": "^1.9.4"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "3c2f6fad1f5f53d07fbed31de455ee797114080a",
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"react": "^16.13.0",
|
|
76
76
|
"react-dom": "^16.13.0",
|