sag_components 1.0.533 → 1.0.535

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.
Files changed (8) hide show
  1. package/dist/stories/components/AttachedFile.js +9 -7
  2. package/dist/stories/components/AttachedFile.style.js +1 -1
  3. package/dist/stories/components/EventList.js +63 -0
  4. package/dist/stories/components/EventList.style.js +18 -0
  5. package/dist/stories/components/EventListItem.js +61 -0
  6. package/dist/stories/components/EventListItem.style.js +16 -0
  7. package/dist/stories/components/icons/ArrowSelectIcon.js +27 -0
  8. package/package.json +1 -1
package/dist/stories/components/AttachedFile.js CHANGED
@@ -22,16 +22,17 @@ const AttachedFile = props => {
22
22
  const [selectedFiles, setSelectedFiles] = (0, _react.useState)([]);
23
23
  const handleFileChange = event => {
24
24
  const files = Array.from(event.target.files);
25
- setSelectedFiles(files);
25
+ setSelectedFiles(prevFiles => [...prevFiles, ...files]);
26
26
  onSelectFile(files);
27
27
  };
28
28
  const handleRemoveFile = fileToRemove => {
29
- const updatedFiles = selectedFiles.filter(file => file !== fileToRemove);
30
- setSelectedFiles(updatedFiles);
29
+ setSelectedFiles(prevFiles => prevFiles.filter(file => file !== fileToRemove));
30
+ const fileInput = document.getElementById('fileInput');
31
+ fileInput.value = ''; // Reset input value
31
32
  onRemoveFile();
32
33
  };
33
- return /*#__PURE__*/_react.default.createElement(_AttachedFile.AttachedFileContainer, null, selectedFiles.map((file, index) => /*#__PURE__*/_react.default.createElement(_AttachedFile.UploadedFile, {
34
- key: index
34
+ return /*#__PURE__*/_react.default.createElement(_AttachedFile.AttachedFileContainer, null, selectedFiles.map(file => /*#__PURE__*/_react.default.createElement(_AttachedFile.UploadedFile, {
35
+ key: "".concat(file.name, "_").concat(file.lastModified)
35
36
  }, /*#__PURE__*/_react.default.createElement(_FileIcon.default, null), /*#__PURE__*/_react.default.createElement("span", null, file.name), /*#__PURE__*/_react.default.createElement(_AttachedFile.RemoveButton, {
36
37
  onClick: () => handleRemoveFile(file)
37
38
  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null)))), /*#__PURE__*/_react.default.createElement(_AttachedFile.InputLabel, {
@@ -41,8 +42,9 @@ const AttachedFile = props => {
41
42
  fill: inputColor
42
43
  })), /*#__PURE__*/_react.default.createElement("input", {
43
44
  type: "file",
44
- id: "fileInput",
45
- multiple: true,
45
+ id: "fileInput"
46
+ // multiple
47
+ ,
46
48
  accept: acceptedFiles,
47
49
  onChange: e => handleFileChange(e),
48
50
  style: {
package/dist/stories/components/AttachedFile.style.js CHANGED
@@ -10,5 +10,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
11
  const AttachedFileContainer = exports.AttachedFileContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins';\n font-size: 14px;\n font-weight: 400;\n"])));
12
12
  const InputLabel = exports.InputLabel = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n align-items: center;\n cursor: pointer;\n > span {\n color: ", ";\n }\n"])), props => props.inputColor);
13
- const UploadedFile = exports.UploadedFile = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n align-items: center;\n color: #A4A4A4;\n max-width: 200px;\n padding: 2px 8px;\n margin-bottom: 10px;\n"])));
13
+ const UploadedFile = exports.UploadedFile = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n align-items: center;\n color: #A4A4A4;\n max-width: 220px;\n padding: 2px 8px;\n margin-bottom: 10px;\n"])));
14
14
  const RemoveButton = exports.RemoveButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n background: none;\n padding: 0;\n display: flex;\n align-items: center;\n margin-left: auto;\n cursor: pointer;\n"])));
package/dist/stories/components/EventList.js ADDED
@@ -0,0 +1,63 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.EventList = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _EventListItem = require("./EventListItem");
10
+ var _EventList = require("./EventList.style");
11
+ /* EventList */
12
+ const EventList = props => {
13
+ const {
14
+ eventsData,
15
+ selectTextColor,
16
+ width = "100%",
17
+ height = "100%",
18
+ itemWidth = "700px",
19
+ itemHeight = "160px",
20
+ onClick
21
+ } = props;
22
+ const displayEventsItems = () => {
23
+ if (eventsData && eventsData.length > 0) {
24
+ return /*#__PURE__*/_react.default.createElement(_EventList.EventItemsContainer, {
25
+ id: "EventItemsContainer"
26
+ }, eventsData === null || eventsData === void 0 ? void 0 : eventsData.map(item => /*#__PURE__*/_react.default.createElement(_EventList.OneEventItemContainer, {
27
+ id: "OneEventItemContainer"
28
+ }, /*#__PURE__*/_react.default.createElement(_EventListItem.EventListItem, {
29
+ eventName: item.eventName,
30
+ period: item.period,
31
+ selectTextColor: selectTextColor,
32
+ onClick: event => {
33
+ onClick({
34
+ eventName: event === null || event === void 0 ? void 0 : event.eventName
35
+ });
36
+ },
37
+ height: itemHeight,
38
+ width: itemWidth
39
+ }))));
40
+ }
41
+ };
42
+
43
+ //= ======================================== MAIN RETURN ====================================
44
+ return /*#__PURE__*/_react.default.createElement(_EventList.MainContainer, {
45
+ id: "MainContainer",
46
+ height: height,
47
+ width: width
48
+ }, /*#__PURE__*/_react.default.createElement(_EventList.PanelContainer, {
49
+ id: "PanelContainer"
50
+ }, displayEventsItems()));
51
+ //= ======================================== MAIN RETURN END====================================
52
+ };
53
+ exports.EventList = EventList;
54
+ var _default = exports.default = EventList;
55
+ EventList.defaultProps = {
56
+ eventsData: [],
57
+ selectTextColor: "#229E38",
58
+ width: "100%",
59
+ height: "100%",
60
+ itemWidth: "700px",
61
+ itemHeight: "160px",
62
+ onClick: () => {}
63
+ };
package/dist/stories/components/EventList.style.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.PanelContainer = exports.OneEventItemContainer = exports.MainContainer = exports.EventItemsContainer = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 1rem;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n"])), props => {
12
+ return props.width;
13
+ }, props => {
14
+ return props.height;
15
+ });
16
+ const PanelContainer = exports.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: 0 10px;\n font-weight: 400;\n font-size: 14px;\n line-height: 19px;\n white-space: pre-wrap;\n overflow: hidden;\n width: 100%;\n"])));
17
+ const EventItemsContainer = exports.EventItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n white-space: wrap;\n flex-wrap: wrap;\n padding: 10px;\n gap: 30px;\n width: 100%;\n"])));
18
+ const OneEventItemContainer = exports.OneEventItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n //width: 100%;\n margin: 0;\n"])));
package/dist/stories/components/EventListItem.js ADDED
@@ -0,0 +1,61 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.EventListItem = void 0;
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon"));
11
+ var _EventListItem = require("./EventListItem.style");
12
+ /* EventListItem */
13
+ const EventListItem = props => {
14
+ const {
15
+ eventName,
16
+ period,
17
+ width,
18
+ height,
19
+ selectTextColor,
20
+ onClick
21
+ } = props;
22
+ const handleOnClick = event => {
23
+ onClick({
24
+ eventName: eventName,
25
+ event
26
+ });
27
+ };
28
+ return /*#__PURE__*/_react.default.createElement(_EventListItem.EventListItemControlsContainer, {
29
+ id: "EventListItemControlsContainer",
30
+ height: height,
31
+ width: width
32
+ }, /*#__PURE__*/_react.default.createElement(_EventListItem.EventListItemControls, {
33
+ id: "EventListItemControls",
34
+ width: width,
35
+ key: _EventListItem.EventName
36
+ }, /*#__PURE__*/_react.default.createElement(_EventListItem.Period, {
37
+ id: "Period",
38
+ width: width
39
+ }, period), /*#__PURE__*/_react.default.createElement(_EventListItem.EventName, {
40
+ id: "EventName",
41
+ width: width
42
+ }, eventName), /*#__PURE__*/_react.default.createElement(_EventListItem.SelectButtonContainer, {
43
+ id: "SelectButtonContainer"
44
+ }, /*#__PURE__*/_react.default.createElement(_EventListItem.SelectButtonSubContainer, {
45
+ id: "SelectButtonSubContainer",
46
+ width: width,
47
+ selectTextColor: selectTextColor,
48
+ onClick: handleOnClick
49
+ }, "Select ", /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
50
+ id: "ArrowSelectIcon"
51
+ })))));
52
+ };
53
+ exports.EventListItem = EventListItem;
54
+ var _default = exports.default = EventListItem;
55
+ EventListItem.defaultProps = {
56
+ eventName: "",
57
+ period: "DD/MM/YYYY - DD/MM/YYYY",
58
+ width: "260px",
59
+ height: "350px",
60
+ selectTextColor: "#212121"
61
+ };
package/dist/stories/components/EventListItem.style.js ADDED
@@ -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.SelectButtonSubContainer = exports.SelectButtonContainer = exports.Period = exports.EventName = exports.EventListItemControlsContainer = exports.EventListItemControls = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
11
+ const EventListItemControlsContainer = exports.EventListItemControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background: #ffffff;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n padding: 20px 20px 10px 20px;\n"])), props => props.width, props => props.height);
12
+ const EventListItemControls = exports.EventListItemControls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-content: center;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n background: #ffffff;\n"])));
13
+ const EventName = exports.EventName = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n line-height: 30px;\n min-height: 60px;\n font-size: 20px;\n @media (max-width: 1536px) {\n font-size: 18px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n max-width: 90%;\n"])));
14
+ const Period = exports.Period = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #b1b1b1;\n font-weight: 400;\n line-height: 24px;\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
15
+ const SelectButtonContainer = exports.SelectButtonContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n"])));
16
+ const SelectButtonSubContainer = exports.SelectButtonSubContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n //margin: 10px 0 0 0;\n padding: 2px 10px;\n\n justify-content: flex-end;\n gap: 8px;\n color: ", ";\n border-radius: 12px;\n &:hover {\n background-color: #f0f0f0;\n cursor: pointer;\n }\n"])), props => props.selectTextColor);
package/dist/stories/components/icons/ArrowSelectIcon.js ADDED
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.ArrowSelectIcon = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ const ArrowSelectIcon = _ref => {
10
+ let {
11
+ clicked,
12
+ width = "17",
13
+ height = "18"
14
+ } = _ref;
15
+ return /*#__PURE__*/_react.default.createElement("svg", {
16
+ width: width,
17
+ height: height,
18
+ viewBox: "0 0 17 18",
19
+ fill: "none",
20
+ xmlns: "http://www.w3.org/2000/svg"
21
+ }, /*#__PURE__*/_react.default.createElement("path", {
22
+ d: "M15 9C15 6.6875 13.75 4.5625 11.75 3.375C9.71875 2.21875 7.25 2.21875 5.25 3.375C3.21875 4.5625 2 6.6875 2 9C2 11.3438 3.21875 13.4688 5.25 14.6562C7.25 15.8125 9.71875 15.8125 11.75 14.6562C13.75 13.4688 15 11.3438 15 9ZM0.5 9C0.5 6.15625 2 3.53125 4.5 2.09375C6.96875 0.65625 10 0.65625 12.5 2.09375C14.9688 3.53125 16.5 6.15625 16.5 9C16.5 11.875 14.9688 14.5 12.5 15.9375C10 17.375 6.96875 17.375 4.5 15.9375C2 14.5 0.5 11.875 0.5 9ZM9.53125 12.2812C9.21875 12.5938 8.75 12.5938 8.46875 12.2812C8.15625 12 8.15625 11.5312 8.46875 11.2188L9.9375 9.75H5.25C4.8125 9.75 4.5 9.4375 4.5 9C4.5 8.59375 4.8125 8.25 5.25 8.25H9.9375L8.46875 6.78125C8.15625 6.5 8.15625 6.03125 8.46875 5.75C8.75 5.4375 9.21875 5.4375 9.53125 5.75L12.2812 8.5C12.5625 8.78125 12.5625 9.25 12.2812 9.53125L9.53125 12.2812Z",
23
+ fill: "#229E38"
24
+ }));
25
+ };
26
+ exports.ArrowSelectIcon = ArrowSelectIcon;
27
+ var _default = exports.default = ArrowSelectIcon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.533",
3
+ "version": "1.0.535",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {