@sellout/ui 0.0.281 → 0.0.283
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.
|
@@ -17,7 +17,7 @@ var FieldContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTe
|
|
|
17
17
|
}, Polished.darken(0.05, Colors.Grey5), Colors.Grey4);
|
|
18
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"])));
|
|
19
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);
|
|
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 ? "
|
|
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 ? "auto" : "hidden"); });
|
|
21
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: ",
|
|
22
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) {
|
|
23
23
|
return props.selected ? Colors.Grey7 : Colors.White;
|
|
@@ -40,7 +40,7 @@ var Dropdown = function (_a) {
|
|
|
40
40
|
icon && icon,
|
|
41
41
|
React.createElement(Value, null, value)),
|
|
42
42
|
React.createElement(Icon, { icon: Icons.Sort, size: 12, color: Colors.Grey1 })),
|
|
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) {
|
|
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", className: "dropdown-list-menu dropdown-list-height" }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
|
|
44
44
|
return (React.createElement(Item, { key: index, selected: false, onClick: function () { return onChange(item.value); } },
|
|
45
45
|
item.icon && item.icon,
|
|
46
46
|
item.text));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../src/components/Dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../Colors\";\nimport Icon, { Icons } from \"./Icon\";\nimport Label from \"./Label\";\nimport Flex from \"./Flex\";\nimport * as Polished from \"polished\";\n\ntype ContainerProps = {\n width?: string;\n open: boolean;\n height: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n position: relative;\n height: ${(props) =>\n props.open ? (props.height ? props.height : \"65px\") : \"65px\"};\n width: ${(props) => props.width};\n`;\n\ntype FieldContainerProps = {\n open: boolean;\n width: string;\n height: string;\n};\n\nconst FieldContainer = styled.div<FieldContainerProps>`\n position: absolute;\n max-height: ${(props) => (props.open ? props.height : \"38px\")};\n width: ${(props) => props.width};\n background-color: ${Colors.White};\n border: 1px solid ${Colors.Grey5};\n box-sizing: border-box;\n border-radius: 8px;\n transition: all 0.2s;\n z-index: ${(props) => (props.open ? 100 : 0)};\n box-shadow: ${(props) =>\n props.open ? \"0px 4px 16px rgba(0, 0, 0, 0.05)\" : \"\"};\n overflow: hidden;\n outline: none;\n\n &:hover {\n cursor: pointer;\n border: 1px solid ${Polished.darken(0.05, Colors.Grey5)};\n }\n\n &:focus {\n border: 1px solid ${Colors.Grey4};\n }\n`;\n\nconst TopRow = styled.div`\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\nconst Value = styled.div`\n font-size: 1.4rem;\n font-weight: 500;\n color: ${Colors.Grey1};\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n margin-right: 10px;\n white-space: nowrap;\n`;\n\ntype ItemsContainerProps = {\n open: boolean;\n height: string;\n};\n\nconst ItemsContainer = styled.div<ItemsContainerProps>`\n position: relative;\n max-height: ${(props) => (props.open ? props.height : \"0px\")};\n overflow: ${(props) => (props.open ? \"
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../src/components/Dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../Colors\";\nimport Icon, { Icons } from \"./Icon\";\nimport Label from \"./Label\";\nimport Flex from \"./Flex\";\nimport * as Polished from \"polished\";\n\ntype ContainerProps = {\n width?: string;\n open: boolean;\n height: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n position: relative;\n height: ${(props) =>\n props.open ? (props.height ? props.height : \"65px\") : \"65px\"};\n width: ${(props) => props.width};\n`;\n\ntype FieldContainerProps = {\n open: boolean;\n width: string;\n height: string;\n};\n\nconst FieldContainer = styled.div<FieldContainerProps>`\n position: absolute;\n max-height: ${(props) => (props.open ? props.height : \"38px\")};\n width: ${(props) => props.width};\n background-color: ${Colors.White};\n border: 1px solid ${Colors.Grey5};\n box-sizing: border-box;\n border-radius: 8px;\n transition: all 0.2s;\n z-index: ${(props) => (props.open ? 100 : 0)};\n box-shadow: ${(props) =>\n props.open ? \"0px 4px 16px rgba(0, 0, 0, 0.05)\" : \"\"};\n overflow: hidden;\n outline: none;\n\n &:hover {\n cursor: pointer;\n border: 1px solid ${Polished.darken(0.05, Colors.Grey5)};\n }\n\n &:focus {\n border: 1px solid ${Colors.Grey4};\n }\n`;\n\nconst TopRow = styled.div`\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\nconst Value = styled.div`\n font-size: 1.4rem;\n font-weight: 500;\n color: ${Colors.Grey1};\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n margin-right: 10px;\n white-space: nowrap;\n`;\n\ntype ItemsContainerProps = {\n open: boolean;\n height: string;\n};\n\nconst ItemsContainer = styled.div<ItemsContainerProps>`\n position: relative;\n max-height: ${(props) => (props.open ? props.height : \"0px\")};\n overflow: ${(props) => (props.open ? \"auto\" : \"hidden\")};\n`;\n\ntype ItemProps = {\n selected: boolean;\n};\n\nconst Item = styled.div<ItemProps>`\n position: relative;\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 15px;\n background-color: ${(props) =>\n props.selected ? Colors.Grey7 : Colors.White};\n font-size: 1.2rem;\n color: ${Colors.Grey1};\n transition: all 0.2s;\n\n &:hover {\n cursor: pointer;\n background-color: ${Colors.Grey7};\n }\n`;\n\nexport interface IDropdownItem {\n text: string;\n value: any;\n icon?: React.ReactNode;\n color?: string;\n}\n\nexport enum DropdownTypes {\n Regular = \"Regular\",\n Small = \"Small\",\n}\n\ntype DropdownProps = {\n type?: DropdownTypes;\n value?: string;\n onChange: Function;\n placeholder?: string;\n width?: string;\n items: IDropdownItem[];\n label?: string;\n tip?: string;\n icon?: React.ReactNode;\n height?: string;\n};\n\nconst Dropdown: React.FC<DropdownProps> = ({\n // type = DropdownTypes.Regular,\n value,\n onChange,\n width = \"auto\",\n items,\n label,\n tip,\n icon,\n height = \"65px\",\n}) => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <Container width={width} open={open} height={height}>\n {label && <Label text={label} tip={tip} />}\n <FieldContainer\n tabIndex={1}\n open={open}\n height={items?.length > 4 ? \"130px\" : `${items?.length * 30 + 43}px`}\n width={width}\n onClick={() => setOpen(!open)}\n onBlur={() => setOpen(false)}\n >\n <TopRow>\n <Flex align=\"center\">\n {icon && icon}\n <Value>{value}</Value>\n </Flex>\n <Icon icon={Icons.Sort} size={12} color={Colors.Grey1} />\n </TopRow>\n <ItemsContainer\n open={open}\n height={items?.length > 3 ? \"90px\" : `${items?.length * 30}px`}\n className=\"dropdown-list-menu dropdown-list-height\"\n >\n {items?.map((item, index) => {\n return (\n <Item\n key={index}\n selected={false} // don't hightlight selected item in dropdown\n onClick={() => onChange(item.value)}\n >\n {item.icon && item.icon}\n {item.text}\n </Item>\n );\n })}\n </ItemsContainer>\n </FieldContainer>\n </Container>\n );\n};\n\nexport default Dropdown;\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellout/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.283",
|
|
4
4
|
"main": "build/index.js",
|
|
5
5
|
"module": "build/index.es.js",
|
|
6
6
|
"files": [
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@fortawesome/pro-solid-svg-icons": "^5.15.4",
|
|
54
54
|
"@fortawesome/react-fontawesome": "^0.1.19",
|
|
55
55
|
"@hapi/joi": "^17.1.1",
|
|
56
|
-
"@sellout/utils": "^0.0.
|
|
56
|
+
"@sellout/utils": "^0.0.283",
|
|
57
57
|
"csvtojson": "^2.0.10",
|
|
58
58
|
"framer-motion": "^2.9.5",
|
|
59
59
|
"polished": "^3.7.2",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"rollup-plugin-url": "^3.0.1",
|
|
63
63
|
"use-places-autocomplete": "^1.11.0"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "5c76fee7e57bca7c65b6dcfb670fe1765c1243b7",
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"react": "16.14.0",
|
|
68
68
|
"react-dom": "16.14.0",
|