sag_components 1.0.139 → 1.0.141
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.
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.TextField = void 0;
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _TextFieldStyle = require("./TextField.style.js");
|
|
12
|
+
var _Box = _interopRequireDefault(require("@mui/material/Box"));
|
|
13
|
+
var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
|
|
14
|
+
var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
|
|
15
|
+
var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
|
|
16
|
+
var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
|
|
17
|
+
var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
|
|
18
|
+
var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
|
|
19
|
+
var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
|
|
20
|
+
var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
|
|
21
|
+
var _styles = require("@mui/material/styles");
|
|
22
|
+
/**
|
|
23
|
+
* SAG TextField
|
|
24
|
+
*/
|
|
25
|
+
var TextField = function TextField(_ref) {
|
|
26
|
+
var _ref$width = _ref.width,
|
|
27
|
+
width = _ref$width === void 0 ? "100%" : _ref$width,
|
|
28
|
+
_ref$height = _ref.height,
|
|
29
|
+
height = _ref$height === void 0 ? "100%" : _ref$height,
|
|
30
|
+
label = _ref.label,
|
|
31
|
+
shape = _ref.shape,
|
|
32
|
+
_ref$placeHolder = _ref.placeHolder,
|
|
33
|
+
placeHolder = _ref$placeHolder === void 0 ? "Type..." : _ref$placeHolder,
|
|
34
|
+
_ref$passwordField = _ref.passwordField,
|
|
35
|
+
passwordField = _ref$passwordField === void 0 ? false : _ref$passwordField,
|
|
36
|
+
defaultValue = _ref.defaultValue,
|
|
37
|
+
resetDefaultValue = _ref.resetDefaultValue,
|
|
38
|
+
required = _ref.required,
|
|
39
|
+
inputRef = _ref.inputRef,
|
|
40
|
+
_ref$allowedInput = _ref.allowedInput,
|
|
41
|
+
allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
|
|
42
|
+
onChange = _ref.onChange;
|
|
43
|
+
var _useState = (0, _react.useState)(null),
|
|
44
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
45
|
+
currentInputValue = _useState2[0],
|
|
46
|
+
setCurrentInputValue = _useState2[1];
|
|
47
|
+
var _React$useState = _react.default.useState(false),
|
|
48
|
+
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
49
|
+
showPassword = _React$useState2[0],
|
|
50
|
+
setShowPassword = _React$useState2[1];
|
|
51
|
+
var handleClickShowPassword = function handleClickShowPassword() {
|
|
52
|
+
return setShowPassword(function (show) {
|
|
53
|
+
return !show;
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
(0, _react.useEffect)(function () {
|
|
57
|
+
var delayDebounceFn = setTimeout(function () {
|
|
58
|
+
onChange(currentInputValue);
|
|
59
|
+
}, 1000);
|
|
60
|
+
return function () {
|
|
61
|
+
return clearTimeout(delayDebounceFn);
|
|
62
|
+
};
|
|
63
|
+
}, [currentInputValue]);
|
|
64
|
+
var onChangeHandler = function onChangeHandler(event) {
|
|
65
|
+
setCurrentInputValue({
|
|
66
|
+
event: event,
|
|
67
|
+
value: event.target.value
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
var theme = (0, _styles.createTheme)({
|
|
71
|
+
components: {
|
|
72
|
+
MuiFormLabel: {
|
|
73
|
+
styleOverrides: {
|
|
74
|
+
asterisk: {
|
|
75
|
+
color: "#db3131"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
var handleMouseDownPassword = function handleMouseDownPassword(event) {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
//defines shape: squire or round
|
|
86
|
+
var getTextFieldStyle = function getTextFieldStyle() {
|
|
87
|
+
if (shape === "round") {
|
|
88
|
+
// round
|
|
89
|
+
return {
|
|
90
|
+
"& .MuiOutlinedInput-root": {
|
|
91
|
+
width: {
|
|
92
|
+
width: width
|
|
93
|
+
},
|
|
94
|
+
height: {
|
|
95
|
+
height: height
|
|
96
|
+
},
|
|
97
|
+
paddingTop: 0,
|
|
98
|
+
marginTop: 0,
|
|
99
|
+
borderRadius: "12px",
|
|
100
|
+
legend: {
|
|
101
|
+
marginLeft: "6px"
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
"& .MuiAutocomplete-inputRoot": {
|
|
105
|
+
paddingLeft: "10px !important",
|
|
106
|
+
borderRadius: "12px"
|
|
107
|
+
},
|
|
108
|
+
"& .MuiInputLabel-outlined": {
|
|
109
|
+
paddingLeft: "10px"
|
|
110
|
+
},
|
|
111
|
+
"& .MuiInputLabel-shrink": {
|
|
112
|
+
marginLeft: "1px",
|
|
113
|
+
paddingLeft: "4px",
|
|
114
|
+
paddingRight: 0,
|
|
115
|
+
background: "white"
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
} else {
|
|
119
|
+
//square
|
|
120
|
+
return null;
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
var isInputAllowed = function isInputAllowed(inputChar) {
|
|
124
|
+
var NUMERIC_REGEX = /^[0-9-]+$/;
|
|
125
|
+
var ALPHA_REGEX = /^[a-zA-Z]+$/;
|
|
126
|
+
var ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
|
|
127
|
+
switch (allowedInput) {
|
|
128
|
+
case "all":
|
|
129
|
+
return true;
|
|
130
|
+
case "alpha":
|
|
131
|
+
if (ALPHA_REGEX.test(inputChar)) return true;else return false;
|
|
132
|
+
case "numeric":
|
|
133
|
+
if (NUMERIC_REGEX.test(inputChar)) return true;else return false;
|
|
134
|
+
case "alphaNumeric":
|
|
135
|
+
if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;else return false;
|
|
136
|
+
default:
|
|
137
|
+
return true;
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
return /*#__PURE__*/_react.default.createElement(_TextFieldStyle.TextFieldContainer, {
|
|
141
|
+
width: width
|
|
142
|
+
}, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
|
|
143
|
+
theme: theme
|
|
144
|
+
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
|
|
145
|
+
sx: {
|
|
146
|
+
display: "flex",
|
|
147
|
+
flexWrap: "wrap"
|
|
148
|
+
}
|
|
149
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, !passwordField && /*#__PURE__*/_react.default.createElement(_TextField.default, {
|
|
150
|
+
key: resetDefaultValue,
|
|
151
|
+
label: label,
|
|
152
|
+
defaultValue: defaultValue,
|
|
153
|
+
placeholder: placeHolder,
|
|
154
|
+
id: "outlined-start-adornment",
|
|
155
|
+
sx: getTextFieldStyle(),
|
|
156
|
+
required: required,
|
|
157
|
+
inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
|
|
158
|
+
onKeyDown: function onKeyDown(event) {
|
|
159
|
+
if (!isInputAllowed(event.key)) {
|
|
160
|
+
event.preventDefault();
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
onChange: function onChange(event) {
|
|
164
|
+
onChangeHandler(event);
|
|
165
|
+
}
|
|
166
|
+
}), passwordField && /*#__PURE__*/_react.default.createElement(_FormControl.default, {
|
|
167
|
+
sx: getTextFieldStyle(),
|
|
168
|
+
variant: "outlined"
|
|
169
|
+
}, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
|
|
170
|
+
htmlFor: "outlined-adornment-password"
|
|
171
|
+
}, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, {
|
|
172
|
+
id: "outlined-adornment-password",
|
|
173
|
+
type: showPassword ? "text" : "password",
|
|
174
|
+
endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
|
|
175
|
+
position: "end"
|
|
176
|
+
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
177
|
+
"aria-label": "toggle password visibility",
|
|
178
|
+
onClick: handleClickShowPassword,
|
|
179
|
+
onMouseDown: handleMouseDownPassword,
|
|
180
|
+
edge: "end"
|
|
181
|
+
}, showPassword ? /*#__PURE__*/_react.default.createElement(_Visibility.default, null) : /*#__PURE__*/_react.default.createElement(_VisibilityOff.default, null))),
|
|
182
|
+
label: label,
|
|
183
|
+
inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
|
|
184
|
+
onKeyDown: function onKeyDown(event) {
|
|
185
|
+
if (!isInputAllowed(event.key)) {
|
|
186
|
+
event.preventDefault();
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
onChange: function onChange(event) {
|
|
190
|
+
onChangeHandler(event);
|
|
191
|
+
}
|
|
192
|
+
}))))));
|
|
193
|
+
};
|
|
194
|
+
exports.TextField = TextField;
|
|
195
|
+
var _default = TextField;
|
|
196
|
+
exports.default = _default;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.TextFieldContainer = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject;
|
|
11
|
+
//import './font.css';
|
|
12
|
+
|
|
13
|
+
var TextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "; \n text-align: left; \n position: relative; \n align-items: center;\n justify-content: center;\n font-family: Lato; \n font-size: \"14px\";\n"])), function (props) {
|
|
14
|
+
return props.width;
|
|
15
|
+
});
|
|
16
|
+
exports.TextFieldContainer = TextFieldContainer;
|
|
@@ -147,7 +147,7 @@ var TitleDescription = function TitleDescription(_ref) {
|
|
|
147
147
|
event: event
|
|
148
148
|
});
|
|
149
149
|
}
|
|
150
|
-
}, "show more ..."))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodsContainer, {
|
|
150
|
+
}, " ", " show more ..."))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodsContainer, {
|
|
151
151
|
id: "PeriodsContainer"
|
|
152
152
|
}, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
|
|
153
153
|
id: "SubLineContainer"
|
|
@@ -157,23 +157,7 @@ var TitleDescription = function TitleDescription(_ref) {
|
|
|
157
157
|
id: "PeriodLabel"
|
|
158
158
|
}, "Event Dates: "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
|
|
159
159
|
id: "PeriodValue"
|
|
160
|
-
}, data.eventDatesValue))
|
|
161
|
-
id: "SubLineContainer"
|
|
162
|
-
}, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodLabel, {
|
|
163
|
-
id: "PeriodLabel"
|
|
164
|
-
}, "In Ad: "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
|
|
165
|
-
id: "PeriodValue"
|
|
166
|
-
}, data.inAdValue)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
|
|
167
|
-
id: "SubLineContainer"
|
|
168
|
-
}, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodLabel, {
|
|
169
|
-
id: "PeriodLabel"
|
|
170
|
-
}, "On Display: "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
|
|
171
|
-
id: "PeriodValue"
|
|
172
|
-
}, data.onDisplayValue1), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FieldsDelimiter, {
|
|
173
|
-
id: "FieldsDelimiter"
|
|
174
|
-
}, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
|
|
175
|
-
id: "PeriodValue"
|
|
176
|
-
}, data.onDisplayValue2))))));
|
|
160
|
+
}, data.eventDatesValue))))));
|
|
177
161
|
};
|
|
178
162
|
exports.TitleDescription = TitleDescription;
|
|
179
163
|
var _default = TitleDescription;
|
|
@@ -16,7 +16,7 @@ var MainContainer = _styledComponents.default.div(_templateObject || (_templateO
|
|
|
16
16
|
return props.height;
|
|
17
17
|
});
|
|
18
18
|
exports.MainContainer = MainContainer;
|
|
19
|
-
var PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-radius: 12px;\n background: #ffffff;\n padding: 1rem;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.4;\n white-space: pre-wrap;\n overflow: hidden;\n"])));
|
|
19
|
+
var PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-radius: 12px;\n background: #ffffff;\n padding: 1rem;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.4;\n white-space: pre-wrap;\n overflow: hidden;\n width: 100%;\n"])));
|
|
20
20
|
exports.PanelContainer = PanelContainer;
|
|
21
21
|
var EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n"])));
|
|
22
22
|
exports.EventNameAndViewCreativeContainer = EventNameAndViewCreativeContainer;
|
|
@@ -34,19 +34,19 @@ var FilterValue = _styledComponents.default.p(_templateObject9 || (_templateObje
|
|
|
34
34
|
exports.FilterValue = FilterValue;
|
|
35
35
|
var FieldsDelimiter = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n color: #ccc;\n margin: 0;\n"])));
|
|
36
36
|
exports.FieldsDelimiter = FieldsDelimiter;
|
|
37
|
-
var Retailer = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n margin: 0;\n"])));
|
|
37
|
+
var Retailer = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n margin: 0;\n margin-inline-end: 5px;\n"])));
|
|
38
38
|
exports.Retailer = Retailer;
|
|
39
39
|
var Space = _styledComponents.default.p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
|
|
40
40
|
exports.Space = Space;
|
|
41
41
|
var RetailerIconContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
|
|
42
42
|
exports.RetailerIconContainer = RetailerIconContainer;
|
|
43
|
-
var ObjectiesContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
43
|
+
var ObjectiesContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n width: 75%;\n"])));
|
|
44
44
|
exports.ObjectiesContainer = ObjectiesContainer;
|
|
45
|
-
var ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
|
|
45
|
+
var ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n"])));
|
|
46
46
|
exports.ObjectiesAndPeriodsContainer = ObjectiesAndPeriodsContainer;
|
|
47
47
|
var ObjectivesTitle = _styledComponents.default.strong(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
48
48
|
exports.ObjectivesTitle = ObjectivesTitle;
|
|
49
|
-
var ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0
|
|
49
|
+
var ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0; \n \n"])));
|
|
50
50
|
exports.ObjectivesDescription = ObjectivesDescription;
|
|
51
51
|
var ObjectivesShowMore = _styledComponents.default.a(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n &:hover {\n cursor: pointer;\n }\n"])));
|
|
52
52
|
exports.ObjectivesShowMore = ObjectivesShowMore;
|
|
@@ -54,7 +54,7 @@ var BottonsContainer = _styledComponents.default.div(_templateObject19 || (_temp
|
|
|
54
54
|
exports.BottonsContainer = BottonsContainer;
|
|
55
55
|
var DownloadButtonContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
56
56
|
exports.DownloadButtonContainer = DownloadButtonContainer;
|
|
57
|
-
var PeriodsContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n align-content: flex-start;\n justify-content: flex-start;\n margin-left:
|
|
57
|
+
var PeriodsContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n align-content: flex-start;\n justify-content: flex-start;\n margin-left: 40px;\n width: 25%;\n"])));
|
|
58
58
|
exports.PeriodsContainer = PeriodsContainer;
|
|
59
59
|
var SubLineContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n"])));
|
|
60
60
|
exports.SubLineContainer = SubLineContainer;
|