pixelize-design-library 1.0.45 → 1.0.46

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 (6) hide show
  1. package/dist/Components/NoteTextArea/NoteTextArea.d.ts +1 -1
  2. package/dist/Components/NoteTextArea/NoteTextArea.js +20 -5
  3. package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts +1 -0
  4. package/dist/Components/Switch/Switch.js +16 -14
  5. package/dist/Layout.js +4 -2
  6. package/package.json +1 -1
package/dist/Components/NoteTextArea/NoteTextArea.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { NoteTextAreaProps } from "./NoteTextAreaProps";
3
- export default function NoteTextArea({ width, handleSubmit, value, title, file, isEditable, }: NoteTextAreaProps): React.JSX.Element;
3
+ export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, }: NoteTextAreaProps): React.JSX.Element;
package/dist/Components/NoteTextArea/NoteTextArea.js CHANGED
@@ -83,7 +83,7 @@ var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9
83
83
  var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"])));
84
84
  var FileEdit = (0, styled_1.default)(fi_1.FiX)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n cursor: pointer;\n color: #ff0000;\n"], ["\n cursor: pointer;\n color: #ff0000;\n"])));
85
85
  function NoteTextArea(_a) {
86
- var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c;
86
+ var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c;
87
87
  var noteAreaRef = (0, react_1.useRef)(null);
88
88
  var _d = (0, react_1.useState)(false), isActive = _d[0], setIsActive = _d[1];
89
89
  var _e = (0, react_1.useState)(""), noteValue = _e[0], setNoteValue = _e[1];
@@ -106,7 +106,7 @@ function NoteTextArea(_a) {
106
106
  }
107
107
  }, [value, title, file, isEditable]);
108
108
  var handleTextArea = function () {
109
- setIsActive(!isActive);
109
+ setIsActive(true);
110
110
  if (!isEditable) {
111
111
  setNoteValue("");
112
112
  setTitleValue("");
@@ -114,8 +114,11 @@ function NoteTextArea(_a) {
114
114
  setFiles([]);
115
115
  }
116
116
  };
117
- var resetState = function () {
117
+ var handleCloseTextArea = function () {
118
118
  setIsActive(false);
119
+ if (handleCancel) {
120
+ handleCancel(!isActive);
121
+ }
119
122
  if (!isEditable) {
120
123
  setNoteValue("");
121
124
  setTitleValue("");
@@ -123,6 +126,18 @@ function NoteTextArea(_a) {
123
126
  setFiles([]);
124
127
  }
125
128
  };
129
+ // const resetState = () => {
130
+ // setIsActive(false);
131
+ // if (handleCancel) {
132
+ // handleCancel(false);
133
+ // }
134
+ // if (!isEditable) {
135
+ // setNoteValue("");
136
+ // setTitleValue("");
137
+ // setTitleShow(false);
138
+ // setFiles([]);
139
+ // }
140
+ // };
126
141
  var handleNoteChange = function (event) {
127
142
  setNoteValue(event.target.value);
128
143
  adjustHeight();
@@ -193,10 +208,10 @@ function NoteTextArea(_a) {
193
208
  } }),
194
209
  react_1.default.createElement(AddTitleButton, { onClick: handleSetTitle }, "Add a Title"))),
195
210
  react_1.default.createElement("div", { style: { marginLeft: "auto" } },
196
- react_1.default.createElement(CancelButton, { onClick: handleTextArea }, "Cancel"),
211
+ react_1.default.createElement(CancelButton, { onClick: handleCloseTextArea }, "Cancel"),
197
212
  react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, disabled: !noteValue, onClick: function () {
198
213
  handleSubmit(noteValue, titleValue, files);
199
- resetState();
214
+ handleCloseTextArea();
200
215
  } }, "Save"))),
201
216
  files.length > 0 && (react_1.default.createElement("div", null, files.map(function (item, index) { return (react_1.default.createElement(FileViewer, { key: index },
202
217
  react_1.default.createElement(react_1.default.Fragment, null,
package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts CHANGED
@@ -5,4 +5,5 @@ export type NoteTextAreaProps = {
5
5
  title?: string;
6
6
  file?: File[];
7
7
  isEditable?: boolean;
8
+ handleCancel?: (isActive: boolean) => void;
8
9
  };
package/dist/Components/Switch/Switch.js CHANGED
@@ -10,28 +10,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var react_1 = __importDefault(require("react"));
11
11
  var styled_1 = __importDefault(require("@emotion/styled"));
12
12
  var react_2 = require("@emotion/react");
13
- var SwitchContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 200px;\n height: 32px;\n background-color: white;\n border-radius: 20px;\n overflow: hidden;\n"], ["\n position: relative;\n width: 200px;\n height: 32px;\n background-color: white;\n border-radius: 20px;\n overflow: hidden;\n"])));
14
- var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n width: 50%;\n background-color: #3182ce;\n border-radius: 16px;\n transition: transform 0.3s ease;\n transform: ", ";\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n width: 50%;\n background-color: #3182ce;\n border-radius: 16px;\n transition: transform 0.3s ease;\n transform: ", ";\n"])), function (_a) {
13
+ var SwitchContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: auto;\n background-color: white;\n border-radius: 20px;\n overflow: hidden;\n"], ["\n position: relative;\n width: 100%;\n height: auto;\n background-color: white;\n border-radius: 20px;\n overflow: hidden;\n"])));
14
+ var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n width: 50%;\n background-color: #eff7ff;\n border-radius: 16px;\n border: 1px solid #88c9f3;\n transition: transform 0.3s ease;\n transform: ", ";\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n width: 50%;\n background-color: #eff7ff;\n border-radius: 16px;\n border: 1px solid #88c9f3;\n transition: transform 0.3s ease;\n transform: ", ";\n"])), function (_a) {
15
15
  var position = _a.position;
16
16
  return position === "left" ? "translateX(0%)" : "translateX(100%)";
17
17
  });
18
18
  // background-color: ${({ backgroundColor }) => backgroundColor};
19
19
  var SwitchList = styled_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n list-style-type: none;\n margin: 0;\n padding: 1px;\n height: 100%;\n z-index: 1;\n"], ["\n display: flex;\n list-style-type: none;\n margin: 0;\n padding: 1px;\n height: 100%;\n z-index: 1;\n"])));
20
- var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n ", "\n"])), function (_a) {
20
+ var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n font-weight: 400;\n padding: 2px;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n font-weight: 400;\n padding: 2px;\n ", "\n"])), function (_a) {
21
21
  var isActive = _a.isActive;
22
- return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: white;\n background-color: transparent;\n z-index: 1;\n "], ["\n color: white;\n background-color: transparent;\n z-index: 1;\n "])));
22
+ return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 500;\n background-color: transparent;\n z-index: 1;\n "], ["\n font-weight: 500;\n background-color: transparent;\n z-index: 1;\n "])));
23
23
  });
24
+ var SwitchContainerHeader = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: white;\n height: auto;\n padding: 3px 3px 3px 3px;\n width: 200px;\n border-radius: 20px;\n border: 1px solid #e2e7ee;\n"], ["\n background-color: white;\n height: auto;\n padding: 3px 3px 3px 3px;\n width: 200px;\n border-radius: 20px;\n border: 1px solid #e2e7ee;\n"])));
24
25
  function Switch(_a) {
25
26
  var leftText = _a.leftText, rightText = _a.rightText, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onSwitchToggle = _a.onSwitchToggle, switchActive = _a.switchActive;
26
- return (react_1.default.createElement(SwitchContainer, null,
27
- react_1.default.createElement(Highlight, { position: switchActive }),
28
- react_1.default.createElement(SwitchList, null,
29
- react_1.default.createElement(SwitchOption, { isActive: switchActive === "left", onClick: function () { return onSwitchToggle("left"); } },
30
- leftIcon,
31
- leftText),
32
- react_1.default.createElement(SwitchOption, { isActive: switchActive === "right", onClick: function () { return onSwitchToggle("right"); } },
33
- rightIcon,
34
- rightText))));
27
+ return (react_1.default.createElement(SwitchContainerHeader, null,
28
+ react_1.default.createElement(SwitchContainer, null,
29
+ react_1.default.createElement(Highlight, { position: switchActive }),
30
+ react_1.default.createElement(SwitchList, null,
31
+ react_1.default.createElement(SwitchOption, { isActive: switchActive === "left", onClick: function () { return onSwitchToggle("left"); } },
32
+ leftIcon,
33
+ leftText),
34
+ react_1.default.createElement(SwitchOption, { isActive: switchActive === "right", onClick: function () { return onSwitchToggle("right"); } },
35
+ rightIcon,
36
+ rightText)))));
35
37
  }
36
38
  exports.default = Switch;
37
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
39
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/Layout.js CHANGED
@@ -418,11 +418,13 @@ var Layout = function () {
418
418
  // isEditable={true}
419
419
  isView: true }),
420
420
  react_2.default.createElement("br", null),
421
- react_2.default.createElement(Switch_1.default, { leftText: "left", rightText: "right", switchActive: switchActive, onSwitchToggle: handleSwitchToggle }),
421
+ react_2.default.createElement(Switch_1.default, { leftText: "Overview", rightText: "Timeline", switchActive: switchActive, onSwitchToggle: handleSwitchToggle }),
422
422
  react_2.default.createElement("br", null),
423
423
  react_2.default.createElement(NoteTextArea_1.default, { width: "720px", handleSubmit: function (noteValue, titleValue, file) {
424
424
  handleNoteValue(noteValue, titleValue, file);
425
- }, value: "text", title: "hello", isEditable: true }),
425
+ }, value: "text", title: "hello", isEditable: false, handleCancel: function (isActive) {
426
+ console.log("isActive", isActive);
427
+ } }),
426
428
  react_2.default.createElement("br", null),
427
429
  react_2.default.createElement(DropDown_1.default, { ButtonText: "Vibility", options: exportOptionss, handleOptionSelect: function (id) {
428
430
  console.log("optionid", id);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.0.45",
3
+ "version": "1.0.46",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",