@sellout/ui 0.0.212 → 0.0.213
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.
|
@@ -30,7 +30,7 @@ var InputStyled = styled.input(templateObject_6 || (templateObject_6 = __makeTem
|
|
|
30
30
|
";\n\n ",
|
|
31
31
|
";\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
|
|
32
32
|
return props.disabled ? Colors.Grey6 + " !important" : null;
|
|
33
|
-
}, function (props) { return (props.disabled ? Colors.Grey4 : Colors.Grey1); }, function (props) { return props.inputWidth ? "90px" : "
|
|
33
|
+
}, function (props) { return (props.disabled ? Colors.Grey4 : Colors.Grey1); }, function (props) { return props.inputWidth ? "90px" : "60px"; }, media.mobile(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 1.6rem;\n "], ["\n font-size: 1.6rem;\n "]))), media.desktop(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 1.4rem;\n "], ["\n font-size: 1.4rem;\n "]))), Colors.Grey4);
|
|
34
34
|
var IconText = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: 1.4rem;\n font-weight: 600;\n color: ", ";\n"], ["\n font-size: 1.4rem;\n font-weight: 600;\n color: ", ";\n"])), Colors.Grey3);
|
|
35
35
|
function Input(_a) {
|
|
36
36
|
var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, _b = _a.format, format = _b === void 0 ? InputFormats.Price : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, width = _a.width, inputWidth = _a.inputWidth, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
|
|
@@ -16,7 +16,7 @@ var InputSizes;
|
|
|
16
16
|
InputSizes["Large"] = "Large";
|
|
17
17
|
InputSizes["Regular"] = "Regular";
|
|
18
18
|
})(InputSizes || (InputSizes = {}));
|
|
19
|
-
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n margin: ", ";\n
|
|
19
|
+
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n margin: ", ";\n"], ["\n width: ", ";\n margin: ", ";\n"])), function (props) { return props.width; }, function (props) { return props.margin; });
|
|
20
20
|
var Form = styled.form(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n overflow: hidden;\n background-color: ", ";\n\n > * {\n background-color: ", ";\n }\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
|
|
21
21
|
";\n overflow: hidden;\n background-color: ", ";\n\n > * {\n background-color: ", ";\n }\n"])), function (props) { return props.width; }, function (props) {
|
|
22
22
|
if (props.focused)
|
|
@@ -58,8 +58,8 @@ var RightContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTe
|
|
|
58
58
|
return null;
|
|
59
59
|
}, Colors.White, function (props) { return (props.onClick ? "pointer" : null); });
|
|
60
60
|
var Spacer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 50px;\n background-color: ", ";\n"], ["\n width: 50px;\n background-color: ", ";\n"])), Colors.White);
|
|
61
|
-
var InputStyled = styled.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ", ";\n width:
|
|
62
|
-
";\n width:
|
|
61
|
+
var InputStyled = styled.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ", ";\n width: fill-available;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ", ";\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ",
|
|
62
|
+
";\n width: fill-available;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ", ";\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ",
|
|
63
63
|
";\n\n ",
|
|
64
64
|
";\n"])), Colors.White, function (props) { return props.disabled ? Colors.Grey4 : Colors.Grey1; }, function (props) {
|
|
65
65
|
if (props.inputSize === InputSizes.Large)
|
|
@@ -5,20 +5,18 @@ import styled from 'styled-components';
|
|
|
5
5
|
import { IconEnum } from './Icons.js';
|
|
6
6
|
import Icon from './Icon.js';
|
|
7
7
|
import Label from './Label.js';
|
|
8
|
-
import { media } from '../utils/MediaQuery.js';
|
|
9
8
|
|
|
10
9
|
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n height: ", ";\n"], ["\n position: relative;\n height: ", ";\n"])), function (props) { return (props.hasLabel ? "65px" : "40px"); });
|
|
11
|
-
var Inner = styled.div(
|
|
12
|
-
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var Item = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 16px;\n background-color: ", ";\n font-size: 1.2rem;\n color: ", ";\n transition: all 0.2s;\n z-index: 100;\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 16px;\n background-color: ",
|
|
10
|
+
var Inner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n 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\n &:focus, &:active {\n /* border: 0px; */\n outline: 0px;\n }\n"], ["\n position: absolute;\n 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\n &:focus, &:active {\n /* border: 0px; */\n outline: 0px;\n }\n"])), function (props) { return (props.open ? "187px" : "38px"); }, function (props) { return props.width; }, Colors.White, Colors.Grey5, function (props) { return props.open ? 100 : 0; }, function (props) { return props.open ? '0px 4px 16px rgba(0, 0, 0, 0.05)' : ''; });
|
|
11
|
+
var TopRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 38px;\n padding: 0 16px;\n z-index: 100;\n background-color: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 38px;\n padding: 0 16px;\n z-index: 100;\n background-color: ", ";\n"])), Colors.White);
|
|
12
|
+
var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n border: 0px;\n outline: 0px;\n width: calc(100% - 30px);\n margin-left: 8px;\n height: 38px;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0;\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n border: 0px;\n outline: 0px;\n width: calc(100% - 30px);\n margin-left: 8px;\n height: 38px;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0;\n\n ::placeholder {\n color: ", ";\n }\n"])), Colors.Grey1, Colors.Grey4);
|
|
13
|
+
var ItemsContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n max-height: ", ";\n overflow: scroll;\n\n"], ["\n position: relative;\n max-height: ", ";\n overflow: scroll;\n\n"])), function (props) { return props.footer ? '108px' : '158px'; });
|
|
14
|
+
var NoItems = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 1.2rem;\n font-weight: 500;\n color: ", ";\n height: 30px;\n padding: 0 16px;\n display: flex;\n align-items: center;\n"], ["\n font-size: 1.2rem;\n font-weight: 500;\n color: ", ";\n height: 30px;\n padding: 0 16px;\n display: flex;\n align-items: center;\n"])), Colors.Grey3);
|
|
15
|
+
var Item = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 16px;\n background-color: ", ";\n font-size: 1.2rem;\n color: ", ";\n transition: all 0.2s;\n z-index: 100;\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 16px;\n background-color: ",
|
|
18
16
|
";\n font-size: 1.2rem;\n color: ", ";\n transition: all 0.2s;\n z-index: 100;\n\n &:hover {\n cursor: pointer;\n background-color: ", ";\n }\n"])), function (props) {
|
|
19
17
|
return props.selected ? Colors.Grey7 : Colors.White;
|
|
20
18
|
}, Colors.Grey1, Colors.Grey7);
|
|
21
|
-
var Footer = styled.div(
|
|
19
|
+
var Footer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n bottom: 0px;\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 16px;\n border-top: 1px solid ", ";\n width: fill-available;\n"], ["\n position: absolute;\n bottom: 0px;\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 16px;\n border-top: 1px solid ", ";\n width: fill-available;\n"])), Colors.Grey7);
|
|
22
20
|
var SearchDropdownTypes;
|
|
23
21
|
(function (SearchDropdownTypes) {
|
|
24
22
|
SearchDropdownTypes["MultiSelect"] = "Multi-Select";
|
|
@@ -69,7 +67,7 @@ function SearchDropdown(_a) {
|
|
|
69
67
|
!items || (!items.length && React.createElement(NoItems, null, "No results found..."))),
|
|
70
68
|
footer && React.createElement(Footer, null, footer))));
|
|
71
69
|
}
|
|
72
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8
|
|
70
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
73
71
|
|
|
74
72
|
export default SearchDropdown;
|
|
75
73
|
export { SearchDropdownTypes };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellout/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.213",
|
|
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": "b2d5c538eb4826f0780524176342349019206661",
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"react": "^16.13.0",
|
|
76
76
|
"react-dom": "^16.13.0",
|