@omniumretail/component-library 1.1.53 → 1.1.55

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.
package/dist/main.css CHANGED
@@ -22,7 +22,8 @@
22
22
  .vw302ajYc4_7bIROncyM{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase;margin-bottom:32px}.DrsaZTs1Ny6wZ76RwDR9{font-size:var(--font-size-body-2);color:var(--color-black);font-weight:700;text-transform:uppercase}.HVSssNqaNxLcYT_1lxBL{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.ACPbYsV0wNkissVLHcFh{margin-top:16px}Label{margin-bottom:8px}.mIHYAri6ebHm4Oeb1ogj{min-width:200px}@media(max-width: 768px){.mIHYAri6ebHm4Oeb1ogj{min-width:150px}}.g19LZsD26yzPPjBtV31w .ant-select{width:100%}.g19LZsD26yzPPjBtV31w .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}.g19LZsD26yzPPjBtV31w .ant-select-arrow{color:var(--color-black)}.g19LZsD26yzPPjBtV31w .ant-switch{width:30px}
23
23
  .j8_c3JHTX0JOkT36fF6A{contain:inline-size}.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{height:50px;width:300px}@media(min-width: 1024px){.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{width:450px}}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close{color:var(--color-white);font-size:12px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close:hover{color:var(--color-black)}
24
24
  .BWmwZ5nFKyctBZyOAXzg{width:100%}.GWTSauaAl_v9W8o4YPxW{background:rgba(44,45,46,.0509803922);height:100%;position:relative}.GWTSauaAl_v9W8o4YPxW .ant-menu-light{background-color:rgba(0,0,0,0) !important;border-inline-end:none !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content{font-size:17px;line-height:20px;font-weight:var(--font-weight-semibold)}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content:hover{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-title-content{font-size:15px;line-height:18px;font-weight:var(--font-weight-medium)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item{height:30px;line-height:30px;margin-bottom:16px}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item:first-child{margin-top:-10px}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu{border-top:1px solid var(--color-orange);border-radius:0}.GWTSauaAl_v9W8o4YPxW .ant-menu-item:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-item-selected,.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-selected>.ant-menu-submenu-title{color:var(--color-orange);background-color:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline .ant-menu-sub.ant-menu-inline{background:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title{height:50px !important;line-height:50px !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title .anticon{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline.ant-menu-root .ant-menu-item>.ant-menu-title-content{overflow-x:auto;text-overflow:unset}.hWGer1IJ7RdkfQWwYfsw{position:absolute;top:24px;left:24px;right:24px;height:144px}.MD1FhirslDDwd2izGwai{font-size:var(--font-size-body-2);line-height:14px;font-weight:var(--font-weight-light);display:inline-block;padding:12px;cursor:pointer;position:absolute;right:0;top:60px}.RxGn4c38kNq8Ai4ypW_x{position:absolute;top:144px;left:24px;right:24px;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:24px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,.1)}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2)}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.9)}
25
- .rdjN4ln3xiUoa6Q0NMMm{display:flex;flex-direction:column;gap:16px;height:100%}@media(min-width: 600px){.rdjN4ln3xiUoa6Q0NMMm{display:grid;grid-template-columns:220px auto}}@media(min-width: 768px){.rdjN4ln3xiUoa6Q0NMMm{grid-template-columns:300px auto}}.Q4flbvKEPN6Jx9Cob22I{background:#ebeced;overflow:auto;padding:20px}@media(max-width: 599px){.Q4flbvKEPN6Jx9Cob22I{padding:20px 20px 0 20px;max-height:80px}}.hK3soC6m563VuiLnNutq{background:var(--color-white);overflow:auto;padding:20px}@media(max-width: 599px){.hK3soC6m563VuiLnNutq{height:100%}}.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-2);color:var(--color-blue);margin-bottom:12px;font-weight:var(--font-weight-semibold);text-transform:uppercase}@media(min-width: 768px){.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-4);margin-bottom:36px}}.wRCQxnQc_MZGDeiY1bcL{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-2)}@media(min-width: 768px){.wRCQxnQc_MZGDeiY1bcL{font-size:var(--font-size-body-4)}}.JRmeFBsSP1f1HJwarMpc{cursor:pointer}.Y6yF3VITdrKdQzDtqTZX{padding-left:16px}.Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-semibold)}.Y6yF3VITdrKdQzDtqTZX .aKZCkmPsc0LiPdj3sEeG .Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-light)}.aKZCkmPsc0LiPdj3sEeG{display:block}.U_3frSKmaOQyTCb9oBkg{color:var(--color-orange)}.GEZDeWAneRLnZQyf4y9l{margin-bottom:16px}@media(min-width: 768px){.GEZDeWAneRLnZQyf4y9l{margin-bottom:24px}}.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-3);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-4)}}.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-2);font-weight:var(--font-weight-light);color:var(--color-black)}@media(min-width: 768px){.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-3)}}.NZ_ohAxNxhxZsCBr2PRA{display:flex;flex-direction:row;gap:12px;margin-bottom:24px}@media(min-width: 768px){.NZ_ohAxNxhxZsCBr2PRA{margin-bottom:36px}}.CArVrMs2ac6JvM1VGLSw{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.CArVrMs2ac6JvM1VGLSw .OpqJ6gab6fPIq3KyckPO{width:100%;border-bottom:none}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV{width:100%;height:auto}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-input{min-height:140px}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-form-item{margin-bottom:16px}.OpqJ6gab6fPIq3KyckPO{width:calc(100% - 112px);border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2)}.E9TXHxbgaI6LGMZHG9bV{width:100px;height:50px;align-self:flex-end}.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-2);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-3)}}.r5obiTduSUBq1uL7oceW{font-weight:var(--font-weight-light);margin-bottom:4px}
25
+ .rdjN4ln3xiUoa6Q0NMMm{display:flex;flex-direction:column;gap:16px;height:100%}@media(min-width: 600px){.rdjN4ln3xiUoa6Q0NMMm{display:grid;grid-template-columns:220px auto}}@media(min-width: 768px){.rdjN4ln3xiUoa6Q0NMMm{grid-template-columns:300px auto}}.Q4flbvKEPN6Jx9Cob22I{background:#ebeced;overflow:auto;padding:20px}@media(max-width: 599px){.Q4flbvKEPN6Jx9Cob22I{padding:20px 20px 0 20px;max-height:80px}}.hK3soC6m563VuiLnNutq{background:var(--color-white);overflow:auto;padding:20px}@media(max-width: 599px){.hK3soC6m563VuiLnNutq{height:100%}}.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-2);color:var(--color-blue);margin-bottom:12px;font-weight:var(--font-weight-semibold);text-transform:uppercase}@media(min-width: 768px){.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-4);margin-bottom:36px}}.wRCQxnQc_MZGDeiY1bcL{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-2)}@media(min-width: 768px){.wRCQxnQc_MZGDeiY1bcL{font-size:var(--font-size-body-4)}}.JRmeFBsSP1f1HJwarMpc{cursor:pointer}.Y6yF3VITdrKdQzDtqTZX{padding-left:16px}.Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-semibold)}.Y6yF3VITdrKdQzDtqTZX .aKZCkmPsc0LiPdj3sEeG .Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-light)}.aKZCkmPsc0LiPdj3sEeG{display:block}.U_3frSKmaOQyTCb9oBkg{color:var(--color-orange)}.GEZDeWAneRLnZQyf4y9l{margin-bottom:16px}@media(min-width: 768px){.GEZDeWAneRLnZQyf4y9l{margin-bottom:24px}}.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-3);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-4)}}.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-2);font-weight:var(--font-weight-light);color:var(--color-black)}@media(min-width: 768px){.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-3)}}.NZ_ohAxNxhxZsCBr2PRA{display:flex;flex-direction:row;gap:12px;margin-bottom:24px}@media(min-width: 768px){.NZ_ohAxNxhxZsCBr2PRA{margin-bottom:36px}}.CArVrMs2ac6JvM1VGLSw{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.CArVrMs2ac6JvM1VGLSw .OpqJ6gab6fPIq3KyckPO{width:100%;border-bottom:none}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV{width:100%;height:auto}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-input{min-height:140px}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-form-item{margin-bottom:16px}.OpqJ6gab6fPIq3KyckPO{width:100%;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2)}.E9TXHxbgaI6LGMZHG9bV{width:100px;height:50px;align-self:flex-end}.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-2);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-3)}}.r5obiTduSUBq1uL7oceW{font-weight:var(--font-weight-light);margin-bottom:4px}.CHFuXtnqohUXV_oCAEKD{font-weight:var(--font-weight-light);margin-top:20px;display:flex;gap:4px}._Bw2YaPxzqqQRpeCMde6{word-wrap:break-word;white-space:pre-wrap;max-height:100px;overflow:auto}.bIiuhNuRh643knAaSeyC{font-weight:var(--font-weight-semibold)}.DdqSfNoeh7KPEQiD0Zpe{margin-bottom:unset;width:100%}.sZh7rUlP4vu0LIE2fcab{font-weight:var(--font-weight-light);margin-bottom:4px;margin-top:16px}.mdSJ5YgFou8MwSkVypYb{margin-left:46px;margin-top:12px}.AvKaftoXc2t7E53rqtq6{display:flex;flex-direction:row;gap:4px;margin-top:12px;margin-bottom:12px;width:100%}.SgT02NKW7ogui8ih5ehj{color:var(--color-black);background-color:var(--color-white);border:1px var(--color-black) solid;min-width:100px;height:20px;font-size:10px;padding:unset}@media(max-width: 767px){.SgT02NKW7ogui8ih5ehj{min-width:0px}}.SgT02NKW7ogui8ih5ehj:hover{background-color:var(--color-grey-light);color:var(--color-black) !important;border:1px var(--color-black) solid !important}.WPOztO5lxS5PXlAz75dE{color:var(--color-black);background-color:var(--color-white);border:1px var(--color-black) solid;min-width:100px;height:20px;font-size:10px;padding:unset}@media(max-width: 767px){.WPOztO5lxS5PXlAz75dE{min-width:0px}}.WPOztO5lxS5PXlAz75dE:hover{background-color:var(--color-grey-light);color:var(--color-black) !important;border:1px var(--color-black) solid !important}.ant-upload-wrapper{line-height:12px}.ant-upload-wrapper .ant-upload-list .ant-upload-list-item{max-width:100px}
26
+ .lvTuRa6cS5HtBGBJWfyE{color:var(--color-black);background-color:var(--color-white);border:1px var(--color-black) solid;min-width:100px;height:20px;font-size:10px;padding:unset}@media(max-width: 767px){.lvTuRa6cS5HtBGBJWfyE{min-width:0px}}.lvTuRa6cS5HtBGBJWfyE:hover{background-color:var(--color-grey-light);color:var(--color-black) !important;border:1px var(--color-black) solid !important}.ant-upload-wrapper{line-height:12px}.ant-upload-wrapper .ant-upload-list .ant-upload-list-item{max-width:100px}
26
27
  .qaO99d3JMWSM8DLS1LvS{display:flex;flex-direction:column;background-color:var(--white-color);padding:24px;color:var(--color-black);width:150px;word-wrap:break-word}.G3bzjyAQXu8uaFGhNMLG{width:150px}.Zv6hI_F5yvuBDnPK8u2C{color:var(--color-blue) !important;font-size:var(--font-size-body-5);font-weight:var(--font-weight-bold)}.JxTKMPM3nEvZB42uuV1e{font-weight:var(--font-weight-semibold);font-size:var(--font-size-label);margin-top:0px}.JKKhO8apIWdMp0JLU0iD{font-weight:var(--font-weight-bold);font-size:var(--font-size-body-base)}.GqgjW40ocDFW4xi4Mszm{font-weight:var(--font-weight-regular);font-size:var(--font-size-label)}
27
28
  .zsvRMmfrmqBj9iRjtQpO{display:grid;grid-template-columns:300px auto;gap:16px;height:100%}.pb4QP8qfuDG2T6wfXkUC{overflow:auto;background:#ebeced}.gP05vt1R1r67eWteznvr{overflow:auto;background:var(--color-white)}.pb4QP8qfuDG2T6wfXkUC,.gP05vt1R1r67eWteznvr{padding:20px}.btRPAI8631Q2XXYP6nZ7{font-size:var(--font-size-body-4);color:var(--color-blue);margin-bottom:36px;font-weight:var(--font-weight-semibold);text-transform:uppercase}.SbA9dHRh1JSG4xp1Aqie{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-4)}.ZsQJQ__gMgYGYau95r8U{cursor:pointer}.PPF4FGgo1aDsBm13cNj8{padding-left:16px}.PPF4FGgo1aDsBm13cNj8 .SbA9dHRh1JSG4xp1Aqie{font-weight:var(--font-weight-semibold)}.PPF4FGgo1aDsBm13cNj8 .QEsWraNRLBQux4k4KNAE .PPF4FGgo1aDsBm13cNj8 .SbA9dHRh1JSG4xp1Aqie{font-weight:var(--font-weight-light)}.QEsWraNRLBQux4k4KNAE{display:block}.VQ09MnwMcIzpW1iabb4A{color:var(--color-orange)}.cmcMqdZJEUjlu34ag1Md{margin-bottom:32px;display:flex;justify-content:space-between;align-items:center}.i_U4mKg0Sxl4EvVzgv0L{font-size:var(--font-size-body-4);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}.Tnut0v2OeSU0e7XwrCXI{font-size:var(--font-size-body-3);font-weight:var(--font-weight-light);color:var(--color-black)}.W2hZQFsItdqKPcBu4UrA{display:flex;flex-direction:row;gap:36px;margin-bottom:36px;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);padding-bottom:4px}.tIVLagS5XxibJ4PBCNpp{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.tIVLagS5XxibJ4PBCNpp .RenA6EOwu2sFJGoqYbYz{width:100%;border-bottom:none}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9{width:100%;height:auto}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9 .ant-input{min-height:140px}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9 .ant-form-item{margin-bottom:16px}.RenA6EOwu2sFJGoqYbYz{width:calc(100% - 149px);display:flex;align-items:center}.N0_FbFF8bLYtEcr8_2B9{width:130px;min-width:130px;align-self:flex-end;display:flex;justify-content:space-between;padding-right:15px}.GaBbmrXh2G03hz6ha5vB{display:none}.QYrBVtDmfSFNxJFztXVl{min-width:130px;align-self:flex-end;display:flex;justify-content:space-between;gap:34px}.V_qOYQwuQ9mXa8aniYgl{font-size:var(--font-size-body-3);font-weight:var(--font-weight-medium)}.pvSzNydRHp3dkh3WrOeA{font-weight:var(--font-weight-light);margin-bottom:4px}.Ehgx39o1k8blh7IDJ2mg{padding:6px;font-size:var(--font-size-body-4);font-weight:var(--font-weight-medium);color:var(--color-white);border-radius:5px;display:inline-flex;letter-spacing:3px}.ifR0bkZtK7yVHD6YZ_Zz{background-color:rgba(217,217,217,.5);border-radius:5px;padding:8px 15px;display:flex;flex-direction:row;gap:50px;align-items:center}.NL5HeemkTIg0oPHDXVtO{font-size:var(--font-size-body-3);font-weight:var(--font-weight-medium);color:var(--color-black)}.koYqEMOf6wzxWpwvrFkL{display:flex;justify-content:space-between;margin-bottom:12px;margin-left:16px;gap:40px;width:100%}
28
29
  .vhUOPe6KeB6afW8Pj3M1{font-size:32px}
@@ -1,10 +1,14 @@
1
+ import { UploadFile } from 'antd';
1
2
  import React from 'react';
2
3
  interface CategoryResponse {
3
4
  data: any;
4
5
  serverReadyData: any;
5
6
  onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
6
7
  onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
7
- selectYesNoOption: any;
8
+ selectYesNoOption?: any;
9
+ addAction?: () => void;
10
+ addButtons?: boolean;
11
+ fileList?: React.Dispatch<React.SetStateAction<Record<string, UploadFile<any>[]>>>;
8
12
  }
9
13
  export declare const CategoryResponse: React.ForwardRefExoticComponent<CategoryResponse & React.RefAttributes<unknown>>;
10
14
  export {};
@@ -1,9 +1,12 @@
1
1
  import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
2
+ import { Dispatch, SetStateAction } from 'react';
2
3
  interface UploadPropsExtended extends UploadProps {
3
4
  onImageChange?: (file: UploadFile | null) => void;
4
5
  initialFileList?: UploadFile[];
5
6
  initialImageUrl?: string;
6
7
  disable?: boolean;
8
+ file?: boolean;
9
+ setFiles?: Dispatch<SetStateAction<UploadFile<any>[]>> | any;
7
10
  }
8
11
  export declare const Upload: (props: UploadPropsExtended) => import("react/jsx-runtime").JSX.Element;
9
12
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omniumretail/component-library",
3
- "version": "1.1.53",
3
+ "version": "1.1.55",
4
4
  "private": false,
5
5
  "main": "dist/bundle.js",
6
6
  "typings": "./dist/types/index",
@@ -2,6 +2,7 @@ import { Meta, Story } from "@storybook/react";
2
2
  import { Button } from "components/Button";
3
3
  import { useEffect, useRef, useState } from "react";
4
4
  import { CategoryResponse } from '.';
5
+ import { UploadFile } from "antd";
5
6
 
6
7
  export default {
7
8
  title: 'CategoryResponse',
@@ -13,6 +14,7 @@ const Template: Story<any> = (args) => {
13
14
  const categoryResponseRef = useRef(null);
14
15
  const [hasNext, setHasNext] = useState(true);
15
16
  const [hasPrevious, setHasPrevious] = useState(false);
17
+ const [fileLists, setFileLists] = useState<Record<string, UploadFile[]>>({});
16
18
 
17
19
  const handleNextCategoryAvailabilityChange = (hasNext: boolean) => {
18
20
  setHasNext(hasNext);
@@ -31,7 +33,7 @@ const Template: Story<any> = (args) => {
31
33
  }
32
34
 
33
35
  useEffect(() => {
34
- console.log(serverData);
36
+ // console.log(serverData);
35
37
  }, [serverData])
36
38
 
37
39
  return (
@@ -43,6 +45,8 @@ const Template: Story<any> = (args) => {
43
45
  ref={categoryResponseRef}
44
46
  onNextCategoryAvailabilityChange={handleNextCategoryAvailabilityChange}
45
47
  onPreviousCategoryAvailabilityChange={handlePreviousCategoryAvailabilityChange}
48
+ addButtons
49
+ fileList={setFileLists}
46
50
  >
47
51
  </CategoryResponse>
48
52
  </div>
@@ -89,9 +93,11 @@ Primary.args = {
89
93
  "Id": "65562A64-A24B-425A-A345-560238CA2468",
90
94
  "QuestionId": "7D17A8A5-E299-47D3-AB49-684135DB23A3",
91
95
  "Subject": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit",
92
- "Description": "This is a description",
96
+ "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit",
93
97
  "Grade": "0",
94
- "Answer": null
98
+ "Note": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit",
99
+ "Answer": null,
100
+ "ActionNames": ["Ação12345662323", "A"]
95
101
  },
96
102
  {
97
103
  "Id": "85562A64-A24B-425A-A345-560238CA2468",
@@ -99,6 +105,7 @@ Primary.args = {
99
105
  "Subject": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit",
100
106
  "Description": "This is a description ",
101
107
  "Grade": "0",
108
+ "Note": "asasas",
102
109
  "Answer": null
103
110
  }
104
111
  ]
@@ -231,7 +238,7 @@ Primary.args = {
231
238
  "Subject": "This is a Subject",
232
239
  "Description": "This is a description",
233
240
  "Grade": "0",
234
- "Answer": null
241
+ "Answer": "dwjdiwjdiwjdi"
235
242
  },
236
243
  {
237
244
  "Id": "93862A64-A24B-425A-A345-560238CA2468",
@@ -1,6 +1,6 @@
1
1
  import styles from './styles.module.scss';
2
2
  import { useEffect, useImperativeHandle, useState } from 'react';
3
- import { Form } from 'antd';
3
+ import { Form, UploadFile, Upload } from 'antd';
4
4
  import { useForm } from 'antd/es/form/Form';
5
5
  import classNames from 'classnames';
6
6
  import TextArea from 'antd/es/input/TextArea';
@@ -8,13 +8,17 @@ import { Select } from '../Select';
8
8
  import { evaluationOptions } from './evaluationOptions';
9
9
  import React from 'react';
10
10
  import { t } from 'i18next';
11
+ import { Button } from '../Button';
11
12
 
12
13
  interface CategoryResponse {
13
14
  data: any;
14
15
  serverReadyData: any;
15
16
  onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
16
17
  onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
17
- selectYesNoOption: any;
18
+ selectYesNoOption?: any;
19
+ addAction?: () => void;
20
+ addButtons?: boolean;
21
+ fileList?: React.Dispatch<React.SetStateAction<Record<string, UploadFile<any>[]>>>;
18
22
  };
19
23
 
20
24
  type Category = {
@@ -30,7 +34,8 @@ const updateCategoryAnswers = (CategoryAnswers: any[], categoryToUpdate: any, up
30
34
  category.Data.Questions = category.Data.Questions.map((question: any, index: any) => {
31
35
  return {
32
36
  ...question,
33
- Answer: updatedQuestions[index].Answer
37
+ Answer: updatedQuestions[index].Answer,
38
+ Note: updatedQuestions[index].Note
34
39
  };
35
40
  });
36
41
  }
@@ -96,9 +101,10 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
96
101
  // Setting first set of questions as default open
97
102
  const [selectedCategory, setSelectedCategory] = useState<any>(data.CategoryAnswers[0]);
98
103
  const [initialValues, setInitialValues] = useState<any>(data.CategoryAnswers[0].Data);
104
+ const [fileLists, setFileLists] = useState<Record<string, UploadFile[]>>({});
105
+ const [isNoteVisible, setIsNoteVisible] = useState<{ categoryIndex: number; questionIndex: number } | null>(null);
99
106
  const [form] = useForm();
100
107
 
101
-
102
108
  const updateInitialValues = (data: any) => {
103
109
  const {
104
110
  Questions,
@@ -110,7 +116,8 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
110
116
  Questions: Questions.map((question: any) => ({
111
117
  Subject: question.Subject,
112
118
  Description: question.Description,
113
- Answer: question.Answer || ""
119
+ Answer: question.Answer || "",
120
+ Note: question.Note || ""
114
121
  })),
115
122
  OpenAnswer: OpenAnswer,
116
123
  IsYesOrNo: IsYesOrNo
@@ -126,11 +133,42 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
126
133
  setCurrentKey(index);
127
134
  };
128
135
 
136
+ const handleFileChange = (fileList: UploadFile[], categoryIndex: number, questionIndex: number) => {
137
+ const key = `${categoryIndex}_${questionIndex}`;
138
+ setFileLists((prev) => ({
139
+ ...prev,
140
+ [key]: fileList,
141
+ }));
142
+ };
143
+
144
+ useEffect(() => {
145
+ if (props.fileList) {
146
+ props.fileList(fileLists);
147
+ }
148
+ }, [fileLists]);
149
+
150
+ const onPreview = async (file: UploadFile) => {
151
+ let src = file.url as string;
152
+ if (!src) {
153
+ src = await new Promise((resolve) => {
154
+ const reader = new FileReader();
155
+ reader.readAsDataURL(file.originFileObj!);
156
+ reader.onload = () => resolve(reader.result as string);
157
+ });
158
+ }
159
+ const image = new Image();
160
+ image.src = src;
161
+ const imgWindow = window.open(src);
162
+ imgWindow?.document.write(image.outerHTML);
163
+ };
164
+
129
165
  const onFinish = (values: any) => {
130
166
  const updatedQuestions = initialValues.Questions.map((question: any, index: number) => {
131
167
  return {
132
168
  ...question,
133
- Answer: values.Questions[index].Answer
169
+ Answer: values.Questions[index].Answer,
170
+ Note: values.Questions[index].Note,
171
+ Files: fileLists[`${selectedCategory.Data.CategoryId}_${index}`] || [], // Include files in the form data
134
172
  };
135
173
  });
136
174
 
@@ -250,9 +288,59 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
250
288
  <div className={styles.subject}>
251
289
  {question.Subject}
252
290
  </div>
291
+
253
292
  <div className={styles.description}>
254
293
  {question.Description}
255
294
  </div>
295
+
296
+ {props.addButtons &&
297
+ <>
298
+ {(form.getFieldValue(`Questions`)?.[index].Note || isNoteVisible) &&
299
+ <div className={styles.noteContainer}>
300
+ <span className={styles.note}>{t('components.categoryResponse.note')}: </span>
301
+ {isNoteVisible?.categoryIndex === currentKey && isNoteVisible?.questionIndex === index ? (
302
+ <Form.Item name={["Questions", index, "Note"]} className={styles.form}>
303
+ <TextArea onBlur={() => setIsNoteVisible(null)} />
304
+ </Form.Item>
305
+ ) : (
306
+ <div className={styles.noteText}>{form.getFieldValue(`Questions`)?.[index].Note}</div>
307
+ )}
308
+ </div>
309
+
310
+ }
311
+
312
+ {question?.ActionNames &&
313
+ <div className={styles.actionContainer}>
314
+ <span className={styles.note}>{t('components.categoryResponse.actions')}: </span>
315
+
316
+ {question?.ActionNames?.map((action: any, index: number) => (
317
+ <span key={index} className={index > 0 ? styles.action : ''}>
318
+ {action}
319
+ <br />
320
+ </span>
321
+ ))}
322
+ </div>
323
+ }
324
+
325
+ <div className={styles.actionsButtonsContainer}>
326
+ <Upload
327
+ listType={"text"}
328
+ fileList={fileLists[`${selectedCategory.Data.CategoryId}_${question.QuestionId}`] || []}
329
+ beforeUpload={() => false} // Prevent automatic upload
330
+ onChange={({ fileList }) => handleFileChange(fileList, selectedCategory.Data.CategoryId, question.QuestionId)}
331
+ onPreview={onPreview}
332
+ >
333
+ <Button customClass={styles.loadFile}>{t('components.upload.loadFile')}</Button>
334
+ </Upload>
335
+
336
+ <Button customClass={styles.actionsButtons} onClick={() => setIsNoteVisible({ categoryIndex: currentKey, questionIndex: index })}>
337
+ {form.getFieldValue(`Questions`)?.[index].Note ? t('components.categoryResponse.editNote') : t('components.categoryResponse.addNote')}
338
+ </Button>
339
+
340
+ <Button customClass={styles.actionsButtons} onClick={props.addAction}>{t('components.categoryResponse.createAction')}</Button>
341
+ </div>
342
+ </>
343
+ }
256
344
  </div>
257
345
  <div className={styles.answer}>
258
346
  {selectedCategory.Data.OpenAnswer
@@ -262,28 +350,25 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
262
350
  <TextArea />
263
351
  </Form.Item>
264
352
 
265
- : selectedCategory.Data.IsYesOrNo
266
- ? <Form.Item
267
- name={["Questions", index, "Answer"]}
268
- >
269
- <Select options={props.selectYesNoOption}
270
- style={{ minWidth: '100%' }}
271
- />
272
- </Form.Item>
273
-
274
- : <Form.Item
275
- name={["Questions", index, "Answer"]}
276
- >
277
- <Select options={evaluationOptions[selectedEvaluationOption]}
278
- style={{ minWidth: '100%' }}
279
- />
280
- </Form.Item>
353
+ : <Form.Item
354
+ name={["Questions", index, "Answer"]}
355
+ >
356
+ <Select
357
+ options={selectedCategory.Data.IsYesOrNo
358
+ ? props.selectYesNoOption
359
+ : question?.Options?.length > 0
360
+ ? question?.Options?.map((option: any) => ({ label: option.Value, value: option.Value }))
361
+ : evaluationOptions[selectedEvaluationOption]
362
+ }
363
+ style={{ minWidth: '100%' }}
364
+ />
365
+ </Form.Item>
281
366
  }
282
367
  </div>
283
368
  </div>
284
369
  ))}
285
370
  </Form>
286
- </div>
287
- </div>
371
+ </div >
372
+ </div >
288
373
  );
289
374
  });
@@ -154,7 +154,7 @@
154
154
  }
155
155
 
156
156
  .question {
157
- width: calc(100% - 112px);
157
+ width: 100%;
158
158
  border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
159
159
  }
160
160
 
@@ -178,3 +178,96 @@
178
178
  font-weight: var(--font-weight-light);
179
179
  margin-bottom: 4px;
180
180
  }
181
+
182
+ .noteContainer {
183
+ font-weight: var(--font-weight-light);
184
+ margin-top: 20px;
185
+ display: flex;
186
+ gap: 4px;
187
+ }
188
+
189
+ .noteText {
190
+ word-wrap: break-word;
191
+ white-space: pre-wrap;
192
+ max-height: 100px;
193
+ overflow: auto;
194
+ }
195
+
196
+ .note {
197
+ font-weight: var(--font-weight-semibold);
198
+ }
199
+
200
+ .form {
201
+ margin-bottom: unset;
202
+ width: 100%;
203
+ }
204
+
205
+ .actionContainer {
206
+ font-weight: var(--font-weight-light);
207
+ margin-bottom: 4px;
208
+ margin-top: 16px;
209
+ }
210
+
211
+ .action {
212
+ margin-left: 46px;
213
+ margin-top: 12px;
214
+ }
215
+
216
+ .actionsButtonsContainer {
217
+ display: flex;
218
+ flex-direction: row;
219
+ gap: 4px;
220
+ margin-top: 12px;
221
+ margin-bottom: 12px;
222
+ width: 100%;
223
+ }
224
+
225
+ .actionsButtons {
226
+ color: var(--color-black);
227
+ background-color: var(--color-white);
228
+ border: 1px var(--color-black) solid;
229
+ min-width: 100px;
230
+ height: 20px;
231
+ font-size: 10px;
232
+ padding: unset;
233
+
234
+ @media(max-width: 767px) {
235
+ min-width: 0px;
236
+ }
237
+
238
+ &:hover {
239
+ background-color: var(--color-grey-light);
240
+ color: var(--color-black) !important;
241
+ border: 1px var(--color-black) solid !important;
242
+ }
243
+ }
244
+
245
+ .loadFile {
246
+ color: var(--color-black);
247
+ background-color: var(--color-white);
248
+ border: 1px var(--color-black) solid;
249
+ min-width: 100px;
250
+ height: 20px;
251
+ font-size: 10px;
252
+ padding: unset;
253
+
254
+ @media(max-width: 767px) {
255
+ min-width: 0px;
256
+ }
257
+
258
+ &:hover {
259
+ background-color: var(--color-grey-light);
260
+ color: var(--color-black) !important;
261
+ border: 1px var(--color-black) solid !important;
262
+ }
263
+ }
264
+
265
+ :global {
266
+ .ant-upload-wrapper {
267
+ line-height: 12px;
268
+ }
269
+
270
+ .ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
271
+ max-width: 100px;
272
+ }
273
+ }
@@ -11,10 +11,9 @@ const Template: Story<NavigationProps> = (args) => <Navigation {...args}></Navig
11
11
  export const Primary = Template.bind({});
12
12
  Primary.args = {
13
13
  backLink: true,
14
- homeLink: false,
14
+ homeLink: true,
15
15
  title: 'Gestão de Aplicações',
16
16
  loginLink: true,
17
- userName: "Diogo Silva Coutinho",
18
17
  options: [
19
18
  { label: 'Option 1', action: () => alert('Option 1 clicked') },
20
19
  { label: 'Option 2', action: () => alert('Option 2 clicked') },
@@ -1,13 +1,18 @@
1
+ import styles from './styles.module.scss';
1
2
  import { Upload as UploadAntd } from 'antd';
2
3
  import ImgCrop from 'antd-img-crop';
3
4
  import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
4
- import { useEffect, useState } from 'react';
5
+ import { Button } from '../Button';
6
+ import { Dispatch, SetStateAction, useEffect, useState } from 'react';
7
+ import { useTranslation } from 'react-i18next';
5
8
 
6
9
  interface UploadPropsExtended extends UploadProps {
7
10
  onImageChange?: (file: UploadFile | null) => void;
8
11
  initialFileList?: UploadFile[];
9
12
  initialImageUrl?: string;
10
13
  disable?: boolean;
14
+ file?: boolean;
15
+ setFiles?: Dispatch<SetStateAction<UploadFile<any>[]>> | any;
11
16
  }
12
17
 
13
18
  function generateRandomString() {
@@ -19,8 +24,11 @@ export const Upload = (props: UploadPropsExtended) => {
19
24
  onImageChange,
20
25
  initialFileList,
21
26
  initialImageUrl,
22
- disable
27
+ disable,
28
+ setFiles
23
29
  } = props;
30
+
31
+ const { t } = useTranslation();
24
32
  const [fileList, setFileList] = useState<UploadFile[]>(initialFileList || []);
25
33
 
26
34
  // when component mounts or initialImageUrl changes, update fileList
@@ -36,6 +44,12 @@ export const Upload = (props: UploadPropsExtended) => {
36
44
  }
37
45
  }, [initialImageUrl]);
38
46
 
47
+ useEffect(() => {
48
+ if (setFiles) {
49
+ setFiles(fileList);
50
+ }
51
+ }, [fileList, setFiles]);
52
+
39
53
  const beforeUpload: UploadProps['beforeUpload'] = async (file: RcFile) => {
40
54
  const newFile: UploadFile = {
41
55
  uid: file.uid,
@@ -45,7 +59,7 @@ export const Upload = (props: UploadPropsExtended) => {
45
59
  originFileObj: file,
46
60
  status: 'done',
47
61
  };
48
-
62
+
49
63
  setFileList((prevFileList) => [...prevFileList, newFile]);
50
64
  if (onImageChange) {
51
65
  onImageChange(newFile);
@@ -80,14 +94,18 @@ export const Upload = (props: UploadPropsExtended) => {
80
94
  return (
81
95
  <ImgCrop rotationSlider>
82
96
  <UploadAntd
83
- listType="picture-card"
97
+ listType={props.file ? "text" : "picture-card"}
84
98
  fileList={fileList}
85
99
  beforeUpload={beforeUpload}
86
100
  onChange={onChange}
87
101
  onPreview={onPreview}
88
102
  disabled={disable}
89
103
  >
90
- {fileList.length < 1 && '+ Upload'}
104
+ {props.file
105
+ ? <Button customClass={styles.loadFile}>{t('components.upload.loadFile')}</Button>
106
+
107
+ : fileList.length < 1 && '+ Upload'
108
+ }
91
109
  </UploadAntd>
92
110
  </ImgCrop>
93
111
  );
@@ -0,0 +1,29 @@
1
+ .loadFile {
2
+ color: var(--color-black);
3
+ background-color: var(--color-white);
4
+ border: 1px var(--color-black) solid;
5
+ min-width: 100px;
6
+ height: 20px;
7
+ font-size: 10px;
8
+ padding: unset;
9
+
10
+ @media(max-width: 767px) {
11
+ min-width: 0px;
12
+ }
13
+
14
+ &:hover {
15
+ background-color: var(--color-grey-light);
16
+ color: var(--color-black) !important;
17
+ border: 1px var(--color-black) solid !important;
18
+ }
19
+ }
20
+
21
+ :global {
22
+ .ant-upload-wrapper {
23
+ line-height: 12px;
24
+ }
25
+
26
+ .ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
27
+ max-width: 100px;
28
+ }
29
+ }
@@ -69,7 +69,12 @@
69
69
  "notApplicable": "Not Applicable",
70
70
  "answer": "Answer",
71
71
  "yes": "Yes",
72
- "no": "No"
72
+ "no": "No",
73
+ "note": "Note",
74
+ "actions": "Actions",
75
+ "editNote": "Edit Note",
76
+ "addNote": "Add Note",
77
+ "createAction": "Create Action"
73
78
  },
74
79
  "categoryReadOnly": {
75
80
  "categories": "Categories",
@@ -97,6 +102,9 @@
97
102
  "takePhoto": "Take Photo",
98
103
  "confirm": "Confirm",
99
104
  "takeAgain": "Take Again"
100
- }
105
+ },
106
+ "upload": {
107
+ "loadFile": "Upload file"
108
+ }
101
109
  }
102
110
  }
@@ -69,7 +69,12 @@
69
69
  "notApplicable": "No Aplicable",
70
70
  "answer": "Respuesta",
71
71
  "yes": "Si",
72
- "no": "No"
72
+ "no": "No",
73
+ "note": "Nota",
74
+ "actions": "Acciones",
75
+ "editNote": "Editar Nota",
76
+ "addNote": "Agregar Nota",
77
+ "createAction": "Crear Acción"
73
78
  },
74
79
  "categoryReadOnly": {
75
80
  "categories": "Categorías",
@@ -97,6 +102,9 @@
97
102
  "takePhoto": "Tomar foto",
98
103
  "confirm": "Confirme",
99
104
  "takeAgain": "Tomar de nuevo"
100
- }
105
+ },
106
+ "upload": {
107
+ "loadFile": "Cargar archivo"
108
+ }
101
109
  }
102
110
  }
@@ -69,7 +69,12 @@
69
69
  "notApplicable": "Não Aplicável",
70
70
  "answer": "Resposta",
71
71
  "yes": "Sim",
72
- "no": "Não"
72
+ "no": "Não",
73
+ "note": "Nota",
74
+ "actions": "Ações",
75
+ "editNote": "Editar Nota",
76
+ "addNote": "Adicionar Nota",
77
+ "createAction": "Criar ação"
73
78
  },
74
79
  "categoryReadOnly": {
75
80
  "categories": "Categorias",
@@ -97,6 +102,9 @@
97
102
  "takePhoto": "Tirar Foto",
98
103
  "confirm": "Confirmar",
99
104
  "takeAgain": "Tirar Novamente"
105
+ },
106
+ "upload": {
107
+ "loadFile": "Carregar ficheiro"
100
108
  }
101
109
  }
102
110
  }