mcarman
/
React_Client_App_Access


			
				
					
						
						
							
							{"ast":null,"code":"var _this = this,\n    _jsxFileName = \"/Users/michielcarman/Projects/React Access/React_Client_App_Access/src/shared/components/Modal.tsx\";\n\nimport React from \"react\"; //import {} from '../components/ModalStyle'; // Import styles\n\nimport './Modal.css';\n;\n\nvar Modal = function Modal(props) {\n  var handleClose = props.handleClose,\n      handleSave = props.handleSave;\n  var show = props.show,\n      children = props.children,\n      title = props.title,\n      modalMode = props.modalMode,\n      rowId = props.rowId; // const showHideClassName = show ? \"modal d-block\" : \"modal d-none\";\n  //const showHideClassName = show ? \"modalOverlay\" : \"modal d-none\";\n\n  return /*#__PURE__*/React.createElement(\"div\", {\n    className: \"modal-wrapper\",\n    style: {\n      transform: show ? 'translateY(0vh)' : 'translateY(-100vh)',\n      opacity: show ? '1' : '0'\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 27,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/React.createElement(\"div\", {\n    className: \"modal-header\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 33,\n      columnNumber: 7\n    }\n  }, title == \"applications\" && (modalMode == 'New' ? /*#__PURE__*/React.createElement(\"h3\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 36,\n      columnNumber: 13\n    }\n  }, \"Create New Record for Application\") : /*#__PURE__*/React.createElement(\"h3\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 37,\n      columnNumber: 15\n    }\n  }, \"Edit Record for Application \", /*#__PURE__*/React.createElement(\"em\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 37,\n      columnNumber: 47\n    }\n  }, \"(Id: \", rowId, \")\"), \" \")), title == 'productionmaterial' && (modalMode == 'New' ? /*#__PURE__*/React.createElement(\"h3\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 41,\n      columnNumber: 13\n    }\n  }, \"Create New Record for Production Material\") : /*#__PURE__*/React.createElement(\"h3\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 15\n    }\n  }, \"Edit Record for Production Material \", /*#__PURE__*/React.createElement(\"em\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 55\n    }\n  }, \"Id: \", rowId))), /*#__PURE__*/React.createElement(\"span\", {\n    className: \"close-modal-btn\",\n    onClick: handleClose,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 44,\n      columnNumber: 9\n    }\n  }, \"\\xD7\")), /*#__PURE__*/React.createElement(\"div\", {\n    className: \"modal-body\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 47,\n      columnNumber: 7\n    }\n  }, title == \"applications\" && /*#__PURE__*/React.createElement(\"h6\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 49,\n      columnNumber: 37\n    }\n  }, \"NOTE: Mandatory Values are Make, Model, and Type.\"), title == 'productionmaterial' && /*#__PURE__*/React.createElement(\"h6\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 50,\n      columnNumber: 43\n    }\n  }, \"NOTE: Must enter a description for Production Material.\"), /*#__PURE__*/React.createElement(\"div\", {\n    className: \"align-left\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 52,\n      columnNumber: 9\n    }\n  }, children), /*#__PURE__*/React.createElement(\"p\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 56,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/React.createElement(\"button\", {\n    className: \"btn-cancel\",\n    onClick: handleClose,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 57,\n      columnNumber: 11\n    }\n  }, \"CANCEL\"), /*#__PURE__*/React.createElement(\"button\", {\n    className: \"btn-continue\",\n    onClick: function onClick() {\n      return handleSave();\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 61,\n      columnNumber: 11\n    }\n  }, \"SAVE\"))));\n};\n\nexport default Modal;","map":{"version":3,"sources":["/Users/michielcarman/Projects/React Access/React_Client_App_Access/src/shared/components/Modal.tsx"],"names":["React","Modal","props","handleClose","handleSave","show","children","title","modalMode","rowId","transform","opacity"],"mappings":";;;AAAA,OAAOA,KAAP,MAAyD,OAAzD,C,CACA;;AACA,OAAO,aAAP;AAeC;;AAED,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD,EAAuB;AAAA,MAC3BC,WAD2B,GACCD,KADD,CAC3BC,WAD2B;AAAA,MACdC,UADc,GACCF,KADD,CACdE,UADc;AAAA,MAE3BC,IAF2B,GAEiBH,KAFjB,CAE3BG,IAF2B;AAAA,MAErBC,QAFqB,GAEiBJ,KAFjB,CAErBI,QAFqB;AAAA,MAEXC,KAFW,GAEiBL,KAFjB,CAEXK,KAFW;AAAA,MAEJC,SAFI,GAEiBN,KAFjB,CAEJM,SAFI;AAAA,MAEOC,KAFP,GAEiBP,KAFjB,CAEOO,KAFP,EAGnC;AACA;;AAEA,sBACE;AAAK,IAAA,SAAS,EAAC,eAAf;AACE,IAAA,KAAK,EAAE;AACLC,MAAAA,SAAS,EAAEL,IAAI,GAAG,iBAAH,GAAuB,oBADjC;AAELM,MAAAA,OAAO,EAAEN,IAAI,GAAG,GAAH,GAAS;AAFjB,KADT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAME;AAAK,IAAA,SAAS,EAAC,cAAf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGE,KAAK,IAAI,cAAT,KACCC,SAAS,IAAI,KAAb,gBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCADF,gBAEI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kDAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAUC,KAAV,MAAhC,MAHL,CADH,EAMGF,KAAK,IAAI,oBAAT,KACCC,SAAS,IAAI,KAAb,gBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iDADF,gBAEI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0DAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAASC,KAAT,CAAxC,CAHL,CANH,eAWE;AAAM,IAAA,SAAS,EAAC,iBAAhB;AAAkC,IAAA,OAAO,EAAEN,WAA3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAXF,CANF,eAoBE;AAAK,IAAA,SAAS,EAAC,YAAf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAEGI,KAAK,IAAI,cAAT,iBAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yDAF9B,EAGGA,KAAK,IAAI,oBAAT,iBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+DAHpC,eAKE;AAAK,IAAA,SAAS,EAAC,YAAf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGD,QADH,CALF,eASE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AACE,IAAA,SAAS,EAAC,YADZ;AAEE,IAAA,OAAO,EAAEH,WAFX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cADF,eAKE;AACE,IAAA,SAAS,EAAC,cADZ;AAEE,IAAA,OAAO,EAAE;AAAA,aAAMC,UAAU,EAAhB;AAAA,KAFX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YALF,CATF,CApBF,CADF;AA4CD,CAlDD;;AAoDA,eAAeH,KAAf","sourcesContent":["import React, { PropsWithChildren, ReactPropTypes } from \"react\";\n//import {} from '../components/ModalStyle'; // Import styles\nimport './Modal.css';\n\ninterface ModalProps {\n  title: string,\n  message?: string,\n  // color?: string,\n  // colored?: boolean,\n  header?: boolean,\n  // btn?: string,\n  show: boolean,\n  handleClose: any,\n  children: any\n  modalMode: 'Edit' | \"New\" | undefined\n  rowId: number | null;\n  handleSave: any\n};\n\nconst Modal = (props: ModalProps) => {\n  const { handleClose, handleSave } = props\n  const { show, children, title, modalMode, rowId } = props\n  // const showHideClassName = show ? \"modal d-block\" : \"modal d-none\";\n  //const showHideClassName = show ? \"modalOverlay\" : \"modal d-none\";\n\n  return (\n    <div className=\"modal-wrapper\"\n      style={{\n        transform: show ? 'translateY(0vh)' : 'translateY(-100vh)',\n        opacity: show ? '1' : '0'\n      }}\n    >\n      <div className=\"modal-header\">\n        {title == \"applications\" && (\n          modalMode == 'New' ?\n            <h3>Create New Record for Application</h3>\n            : <h3>Edit Record for Application <em>(Id: {rowId})</em> </h3>)\n        }\n        {title == 'productionmaterial' && (\n          modalMode == 'New' ?\n            <h3>Create New Record for Production Material</h3>\n            : <h3>Edit Record for Production Material <em>Id: {rowId}</em></h3>)\n        }\n        <span className=\"close-modal-btn\" onClick={handleClose}>×</span>\n      </div>\n\n      <div className=\"modal-body\">\n\n        {title == \"applications\" && <h6 >NOTE: Mandatory Values are Make, Model, and Type.</h6>}\n        {title == 'productionmaterial' && <h6>NOTE: Must enter a description for Production Material.</h6>}\n\n        <div className=\"align-left\">\n          {children}\n        </div>\n\n        <p>\n          <button\n            className=\"btn-cancel\"\n            onClick={handleClose}\n          >CANCEL</button>\n          <button\n            className=\"btn-continue\"\n            onClick={() => handleSave()}>SAVE</button>\n        </p>\n\n      </div>\n\n    </div>\n  )\n}\n\nexport default Modal;\n"]},"metadata":{},"sourceType":"module"}