@omniumretail/component-library 1.2.50 → 1.2.52

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
@@ -33,4 +33,4 @@
33
33
  :root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5}.SF5f_Q_Ggz_4JHUHS2Xa{display:flex;align-items:center;padding:13px 20px;box-sizing:border-box;height:72px}.SF5f_Q_Ggz_4JHUHS2Xa *{box-sizing:border-box}.gSVYvBn1sLbcMsGI32b9{display:flex;flex-grow:1;align-items:flex-end;justify-content:center;max-width:calc(100% - 60px)}.gSVYvBn1sLbcMsGI32b9 img{max-width:196px}.gSVYvBn1sLbcMsGI32b9 .fVSt3bSZBcJGsOdA5nIN{font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--color-black)}.BIBQmS_NwoMw2Ncq5yuN{cursor:pointer;padding:4px 4px 4px 0;font-size:20px;width:30px;display:flex;align-items:center;justify-content:center}.ZinSgUtysxITkbGRKdux{position:fixed;top:0;left:-100%;bottom:0;width:100%;max-width:430px;background-color:var(--color-white);padding-inline:15px;z-index:999;box-shadow:0 3px 12px rgba(0,0,0,.45);transition:.6s ease-out}.ZinSgUtysxITkbGRKdux.FW1pOdad0uN5LO9h5PgQ{left:0;transition:.3s ease-in}.ZfA8OEmbRzRsNqLAmdtn{background-color:rgba(0,0,0,.3);backdrop-filter:blur(1px);position:absolute;left:0;top:0;right:0;bottom:0;z-index:998;pointer-events:none;opacity:0;transition:.3s}.ZfA8OEmbRzRsNqLAmdtn.FW1pOdad0uN5LO9h5PgQ{opacity:1;pointer-events:all}.YKSQJmdRP_7tKwvQpeuV{width:calc(100% + 30px);margin-left:-15px;background-color:var(--color-orange);display:flex;align-items:center;justify-content:center}.ISssYC5Uz452JVWP0xDc img{max-width:160px}.E6YZPpa60LxA7qqIW7jQ{position:absolute;top:23px;right:15px;font-size:25px;cursor:pointer;color:var(--color-white)}.YYp3pzktjEDEyW8knAZQ{overflow-y:auto;height:calc(100% - 51px);margin:0;padding:0}.u7k2VQ30AQDk6mKA22GX{height:60px;padding:10px;display:flex;align-items:center;border-bottom:1px solid var(--color-black);cursor:pointer;transition:.3s;text-transform:uppercase;width:100%}.u7k2VQ30AQDk6mKA22GX:hover{background-color:var(--color-grey);color:var(--color-black)}.QQoDB9XPcAK18l2DIym4{list-style:none}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN{height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-bottom:0}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX{position:relative}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa{position:absolute;width:60px;height:100%;background:var(--color-black);right:0;display:flex;align-items:center;justify-content:center}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa:hover{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .zo7CFksIKx7Fahu4e4S_{color:var(--color-white)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E{background:var(--color-grey)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .NytmT59TmaWHc4FLM2wa{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .uLgjMU9sbvfaa0qKEguP{height:auto;opacity:1}.uLgjMU9sbvfaa0qKEguP{padding:0;width:100%;margin:0;background-color:var(--color-orange);color:var(--color-white);height:0;opacity:0;overflow:hidden;transition:height .3s ease,opacity .3s ease}.uLgjMU9sbvfaa0qKEguP .u7k2VQ30AQDk6mKA22GX{min-height:60px;height:auto;padding-inline:40px}.efnjUnudkE0UTVQ6wrgH{cursor:pointer}.u7k2VQ30AQDk6mKA22GX .fjNRYZMP1O0pTvBDBB3L span{margin-left:8px;transform:translateY(-2px);display:inline-block;font-size:var(--font-size-body-3);text-transform:capitalize}
34
34
  .muC1BdCbIEMIs70EtJoA{position:fixed}@media(max-width: 768px){.muC1BdCbIEMIs70EtJoA{position:absolute;top:0 !important;left:0 !important;right:0 !important;width:100% !important}}.msELhnfhfo6un3c4Spoc{max-height:calc(100vh - 70px);padding:0 !important;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15)}@media(max-width: 768px){.msELhnfhfo6un3c4Spoc{max-width:100vw;border-radius:0}}@media(min-width: 768px){.msELhnfhfo6un3c4Spoc{max-width:500px;max-height:calc(100vh - 100px);transform:translate(25%);margin-block-end:20px;margin-bottom:20px !important}}@media(max-width: 768px){.oGsIq0O_Hzwg2mLR72la{position:absolute}}.KSVguXBQ_A1SUSR6e8Wq{overflow-y:auto;max-height:calc(100vh - 200px)}@media(max-width: 768px){.KSVguXBQ_A1SUSR6e8Wq{max-height:calc(100vh - 120px)}}.GeNg2HVTmhQDmsLLTpWj{display:flex;flex-direction:column;align-items:unset !important;padding:10px;border-bottom:1px solid #f0f0f0;background-color:#fff !important;cursor:pointer}.GeNg2HVTmhQDmsLLTpWj:hover{background-color:#f9f9f9}@media(max-width: 768px){.GeNg2HVTmhQDmsLLTpWj{padding:8px}}.GBb48KXbGnQtAY8xqmUp{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background-color:#f5f5f5;border-bottom:1px solid #e8e8e8}.LoCH7sYpmK3VgRASqTgz{font-size:20px;cursor:pointer;color:#595959;padding:4px;border-radius:4px}.LoCH7sYpmK3VgRASqTgz:hover{background-color:#e8e8e8}.Xjs10kZPSsD_BVFomnIe{color:#ff674c;margin-right:8px}.oibCayv_cOyhyWCKzHSr{display:flex;align-items:center;gap:10px}.oibCayv_cOyhyWCKzHSr span{font-size:14px;font-weight:500;color:#595959}.hhwYXSd0CR75D8ETnUML{display:flex;align-items:center;position:relative;padding-left:12px;width:100%}@media(max-width: 768px){.hhwYXSd0CR75D8ETnUML{padding-left:8px}}.LkP1cqeAyAYI9rCurnE8{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:16px}@media(max-width: 768px){.LkP1cqeAyAYI9rCurnE8{font-size:12px}}.u_jT9kmq2kyThRlj8HT1{width:50px;height:50px;margin-left:10px;margin-right:10px;flex-shrink:0}@media(max-width: 768px){.u_jT9kmq2kyThRlj8HT1{width:40px;height:40px;margin-left:8px;margin-right:8px}}.ieGdf5FTgLUPcfuZi7Xz{flex:1;overflow:hidden;min-width:0}.QgZ3oHW9IRTexL8xWVqP{font-weight:bold;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}@media(max-width: 768px){.QgZ3oHW9IRTexL8xWVqP{font-size:12px}}.JwfbSOSIRAz5OO2hiSFc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%;font-size:12px;color:#666;margin-top:2px}@media(max-width: 768px){.JwfbSOSIRAz5OO2hiSFc{font-size:10px}}.XfXQBYqMfZc4p8s2Mhla{width:6px;height:6px;background-color:#1890ff;border-radius:50%;margin-left:10px;flex-shrink:0}@media(max-width: 768px){.XfXQBYqMfZc4p8s2Mhla{width:4px;height:4px;margin-left:8px}}.RGXTlVxCxbZpD6__J5_g .ant-badge-count{font-size:12px !important;min-width:16px !important;height:16px !important;line-height:16px !important;transform:translate(40%, -50%) !important}.rWa5cnbZQLDtxFxJU6qA{font-size:26px;cursor:pointer;color:#0033a0}@media(min-width: 767px){.rWa5cnbZQLDtxFxJU6qA{color:var(--color-grey-light)}}.Pus_rAoqX05D4Qz2pYxo{animation:Pus_rAoqX05D4Qz2pYxo 1s ease-in-out infinite}@keyframes Pus_rAoqX05D4Qz2pYxo{0%{transform:rotate(0deg)}25%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}100%{transform:rotate(0deg)}}
35
35
  .rUOcBpTPxrzfRw36v939{display:flex;align-items:center;width:100%;margin:16px 0;box-sizing:border-box}.rUOcBpTPxrzfRw36v939 .ant-descriptions{width:calc(100vw - 24px)}.rUOcBpTPxrzfRw36v939 .ant-descriptions-item-label{max-width:140px !important;padding:8px 16px !important;color:var(--color-blue) !important;font-weight:700 !important;font-size:12px !important}.rUOcBpTPxrzfRw36v939 .ant-descriptions-item-content{padding:8px 16px !important;font-size:12px !important}.cyz9pmVdkD7z1n7QUlfu{width:100vw !important;max-width:100vw !important;padding:0px 12px}.PQ794lq3KZF_sigL5bbI{overflow:hidden !important}.PQ794lq3KZF_sigL5bbI .ant-modal .ant-modal-body{overflow-y:auto;overflow-x:hidden;max-height:80vh}.PQ794lq3KZF_sigL5bbI .ant-modal .ant-modal-content{padding:20px 12px !important}.PQ794lq3KZF_sigL5bbI .ant-modal-header{text-align:center !important}.PQ794lq3KZF_sigL5bbI .ant-modal-close{color:var(--button-default-background-hover-color)}.b23UIWngPXOEh5FC2mcC{display:flex;justify-content:center}.b23UIWngPXOEh5FC2mcC.DEfmwZ5CmWvodIcPVgfo{justify-content:space-between}.lIEwxxVD_vq2cGux3ehI{color:var(--button-default-background);font-size:26px}.ckRiBia09XQRtMVbNqvy{color:#c7cac9;pointer-events:none}
36
- .TRyfXWNBGEHsogA6eGN_{display:flex;justify-content:space-between;align-items:center;position:fixed;bottom:0px;width:100%;height:70px;padding:0 10px;box-sizing:border-box;z-index:10;padding-bottom:2px;background-color:#fff}.TRyfXWNBGEHsogA6eGN_::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:#e5e7eb;width:100%}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_{background-color:var(--color-black) !important;padding-bottom:0px}}.TRyfXWNBGEHsogA6eGN_ .wJU9Lx1mlSJ82yM1uy5i{display:flex;justify-content:space-between;width:100%}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .wJU9Lx1mlSJ82yM1uy5i{width:fit-content;gap:100px}}.TRyfXWNBGEHsogA6eGN_ .X3NLcQLxnunLpbrTQW8h{font-size:var(--font-size-body-1);color:var(--color-grey-light)}.TRyfXWNBGEHsogA6eGN_ .wkmxxKMcpmBG8oshX8yW{width:100%;margin-bottom:4px}.TRyfXWNBGEHsogA6eGN_ .TCBuRot8X1MeAAQ9p9SW{margin-left:8px}.TRyfXWNBGEHsogA6eGN_ .X6xkdc8XoFcYrQWq3hB7,.TRyfXWNBGEHsogA6eGN_ .TCBuRot8X1MeAAQ9p9SW{display:inline-block}.TRyfXWNBGEHsogA6eGN_ .u7LoVIvRXqdjsXffoRjw{height:25px;align-self:flex-end}.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_{flex-direction:row;gap:12px;flex:unset}}.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_ .YA6MXmjAZZwtbSZYmcEw{font-size:26px;color:#0033a0;cursor:pointer}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_ .YA6MXmjAZZwtbSZYmcEw{color:var(--color-grey-light)}}.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_ .C4jdW5oFYxdgldUsYeMg{font-size:12px;margin-top:4px;color:#0033a0}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_ .C4jdW5oFYxdgldUsYeMg{color:var(--color-grey-light)}}.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg{display:flex;justify-content:center;flex:1}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg{flex:unset}}.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg .iFeWqTLSjbpgaVFy6shj{display:flex;justify-content:center;align-items:center;width:50px;height:50px;background-color:#0033a0;border-radius:8px;cursor:pointer}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg .iFeWqTLSjbpgaVFy6shj{background-color:var(--color-grey-light)}}.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg .iFeWqTLSjbpgaVFy6shj .wbWHzMmDsgEQ056VQENK{font-size:20px;color:#fff}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg .iFeWqTLSjbpgaVFy6shj .wbWHzMmDsgEQ056VQENK{color:#2c2d2e}}.TRyfXWNBGEHsogA6eGN_ .pPyAGD44QA4U6r5_xMLN{position:relative}.MGvcBnUleTUDOtqafxZd{transform:rotate(45deg);transition:transform .3s ease}.m5JXPA_4FcCHUN17ucxY{position:absolute;bottom:70px;width:180px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:999}@media(min-width: 767px){.m5JXPA_4FcCHUN17ucxY{transform:translateX(-65%)}}.Rtyw1XuncdBWZdUEV1qj{display:flex;align-items:center;background-color:#fff;padding:8px 16px;border-radius:20px;box-shadow:0 4px 12px rgba(0,51,160,.5);cursor:pointer;transition:all .2s ease;animation:g8HDTZ2GSb3rGEQ5ICmJ .3s cubic-bezier(0.34, 1.56, 0.64, 1)}.Rtyw1XuncdBWZdUEV1qj:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}@keyframes g8HDTZ2GSb3rGEQ5ICmJ{from{opacity:0;transform:scale(0.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.ZVQGcR7lZkCRgAxqbZt1{width:28px;height:28px;border-radius:50%;background-color:#f3f4f6;display:flex;align-items:center;justify-content:center;margin-right:10px;color:#4b5563}.c87nj1oXjBwCQjx_Jq7T{font-size:14px;font-weight:500;color:#374151}
36
+ .TRyfXWNBGEHsogA6eGN_{display:flex;justify-content:space-between;align-items:center;position:fixed;bottom:0px;width:100%;height:70px;padding:0 10px;box-sizing:border-box;z-index:10;padding-bottom:2px;background-color:#fff}.TRyfXWNBGEHsogA6eGN_::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:#e5e7eb;width:100%}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_{background-color:var(--color-black) !important;padding-bottom:0px}}.TRyfXWNBGEHsogA6eGN_ .wJU9Lx1mlSJ82yM1uy5i{display:flex;justify-content:space-between;width:100%}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .wJU9Lx1mlSJ82yM1uy5i{width:fit-content;gap:100px}}.TRyfXWNBGEHsogA6eGN_ .X3NLcQLxnunLpbrTQW8h{font-size:var(--font-size-body-1);color:var(--color-grey-light)}.TRyfXWNBGEHsogA6eGN_ .wkmxxKMcpmBG8oshX8yW{width:100%;margin-bottom:4px}.TRyfXWNBGEHsogA6eGN_ .TCBuRot8X1MeAAQ9p9SW{margin-left:8px}.TRyfXWNBGEHsogA6eGN_ .X6xkdc8XoFcYrQWq3hB7,.TRyfXWNBGEHsogA6eGN_ .TCBuRot8X1MeAAQ9p9SW{display:inline-block}.TRyfXWNBGEHsogA6eGN_ .u7LoVIvRXqdjsXffoRjw{height:25px;align-self:flex-end}.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_{flex-direction:row;gap:12px;flex:unset}}.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_ .YA6MXmjAZZwtbSZYmcEw{font-size:26px;color:#0033a0;cursor:pointer}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_ .YA6MXmjAZZwtbSZYmcEw{color:var(--color-grey-light)}}.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_ .C4jdW5oFYxdgldUsYeMg{font-size:12px;margin-top:4px;color:#0033a0}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .EqVJkSj9Vem7EVpPIYW_ .C4jdW5oFYxdgldUsYeMg{color:var(--color-grey-light)}}.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg{display:flex;justify-content:center;flex:1}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg{flex:unset}}.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg .iFeWqTLSjbpgaVFy6shj{display:flex;justify-content:center;align-items:center;width:50px;height:50px;background-color:#0033a0;border-radius:8px;cursor:pointer}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg .iFeWqTLSjbpgaVFy6shj{background-color:var(--color-grey-light)}}.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg .iFeWqTLSjbpgaVFy6shj .wbWHzMmDsgEQ056VQENK{font-size:20px;color:#fff}@media(min-width: 767px){.TRyfXWNBGEHsogA6eGN_ .FiQHpDUl90uFjStr9OAg .iFeWqTLSjbpgaVFy6shj .wbWHzMmDsgEQ056VQENK{color:#2c2d2e}}.TRyfXWNBGEHsogA6eGN_ .pPyAGD44QA4U6r5_xMLN{position:relative}.ziO_hsrPyI74unWMlZKA{opacity:.5;cursor:not-allowed !important;pointer-events:none}.MGvcBnUleTUDOtqafxZd{transform:rotate(45deg);transition:transform .3s ease}.m5JXPA_4FcCHUN17ucxY{position:absolute;bottom:70px;width:180px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:999}@media(min-width: 767px){.m5JXPA_4FcCHUN17ucxY{transform:translateX(-65%)}}.Rtyw1XuncdBWZdUEV1qj{display:flex;align-items:center;background-color:#fff;padding:8px 16px;border-radius:20px;box-shadow:0 4px 12px rgba(0,51,160,.5);cursor:pointer;transition:all .2s ease;animation:g8HDTZ2GSb3rGEQ5ICmJ .3s cubic-bezier(0.34, 1.56, 0.64, 1)}.Rtyw1XuncdBWZdUEV1qj:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}@keyframes g8HDTZ2GSb3rGEQ5ICmJ{from{opacity:0;transform:scale(0.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.ZVQGcR7lZkCRgAxqbZt1{width:28px;height:28px;border-radius:50%;background-color:#f3f4f6;display:flex;align-items:center;justify-content:center;margin-right:10px;color:#4b5563}.c87nj1oXjBwCQjx_Jq7T{font-size:14px;font-weight:500;color:#374151}
@@ -4,6 +4,7 @@ interface Action {
4
4
  label: string;
5
5
  icon: React.ReactNode;
6
6
  onClick?: () => void;
7
+ disabled?: boolean;
7
8
  }
8
9
  interface Criticality {
9
10
  Id: string;
@@ -20,20 +21,30 @@ interface BellNotification {
20
21
  Criticality: Criticality;
21
22
  IsRead: boolean;
22
23
  }
24
+ export declare enum ActionType {
25
+ DELETE = "delete",
26
+ UPDATE = "update",
27
+ CREATE = "create",
28
+ EDIT = "edit",
29
+ EXPORT = "export",
30
+ PRINT = "print"
31
+ }
32
+ export interface ActionConfig {
33
+ type: ActionType | string;
34
+ onClick: () => void;
35
+ disabled?: boolean;
36
+ }
23
37
  export interface Footer2Props {
24
38
  onBackClick?: () => void;
25
39
  notifications: BellNotification[];
26
40
  onFilterChange: (filter: 'all' | 'unread') => void;
27
41
  onNotificationClick: (id: string, url: string) => void;
28
42
  handleMarkAllAsRead: () => void;
29
- actions?: Action[];
30
- onDelete?: () => void;
31
- onUpdate?: () => void;
32
- onCreate?: () => void;
33
- onEdit?: () => void;
34
- onExport?: () => void;
35
- onPrint?: () => void;
43
+ customActions?: Action[];
44
+ actions?: ActionConfig[];
36
45
  footerName: string;
46
+ disableBackButton?: boolean;
47
+ disableNotifications?: boolean;
37
48
  }
38
49
  export declare const Footer2: (props: Footer2Props) => import("react/jsx-runtime").JSX.Element;
39
50
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omniumretail/component-library",
3
- "version": "1.2.50",
3
+ "version": "1.2.52",
4
4
  "private": false,
5
5
  "main": "dist/bundle.js",
6
6
  "typings": "./dist/types/index",
@@ -1,5 +1,5 @@
1
1
  import { Meta, Story } from "@storybook/react";
2
- import { Footer2, Footer2Props } from '.';
2
+ import { Footer2, Footer2Props, ActionType } from '.';
3
3
  import {
4
4
  SettingOutlined,
5
5
  } from '@ant-design/icons';
@@ -188,11 +188,26 @@ const actions = [
188
188
  label: 'Definições',
189
189
  icon: <SettingOutlined />,
190
190
  onClick: () => console.log('Definições'),
191
+ disabled: true
191
192
  }
192
193
  ];
193
194
 
195
+ const handleCreate = () => console.log('Criar novo item');
196
+ const handleEdit = () => console.log('Editar item');
197
+ const handleDelete = () => console.log('Excluir item');
198
+ const handleExport = () => console.log('Exportar item');
199
+
200
+ const actions2 = [
201
+ { type: ActionType.CREATE, onClick: handleCreate },
202
+ { type: ActionType.EDIT, onClick: handleEdit, disabled: true },
203
+ { type: ActionType.DELETE, onClick: handleDelete },
204
+ { type: ActionType.EXPORT, onClick: handleExport }
205
+ ];
206
+
194
207
  export const Primary = Template.bind({});
195
208
  Primary.args = {
196
209
  notifications: notifications,
197
- actions: actions,
210
+ customActions: actions,
211
+ actions: actions2,
212
+ disableBackButton: true
198
213
  };
@@ -9,16 +9,17 @@ import {
9
9
  ExportOutlined,
10
10
  PrinterOutlined
11
11
  } from '@ant-design/icons';
12
- import { t } from 'i18next';
13
12
  import moment from 'moment';
14
13
  import React, { useEffect, useRef, useState } from 'react';
15
14
  import omniumLogo from '../../assets/images/omnium-retail-logo-white.png';
15
+ import { useTranslation } from 'react-i18next';
16
16
 
17
17
  interface Action {
18
18
  key: string;
19
19
  label: string;
20
20
  icon: React.ReactNode;
21
21
  onClick?: () => void;
22
+ disabled?: boolean;
22
23
  }
23
24
 
24
25
  interface Criticality {
@@ -38,20 +39,33 @@ interface BellNotification {
38
39
  IsRead: boolean;
39
40
  }
40
41
 
42
+ // Definindo ações padrão disponíveis
43
+ export enum ActionType {
44
+ DELETE = 'delete',
45
+ UPDATE = 'update',
46
+ CREATE = 'create',
47
+ EDIT = 'edit',
48
+ EXPORT = 'export',
49
+ PRINT = 'print'
50
+ }
51
+
52
+ export interface ActionConfig {
53
+ type: ActionType | string;
54
+ onClick: () => void;
55
+ disabled?: boolean;
56
+ }
57
+
41
58
  export interface Footer2Props {
42
59
  onBackClick?: () => void;
43
60
  notifications: BellNotification[];
44
61
  onFilterChange: (filter: 'all' | 'unread') => void;
45
62
  onNotificationClick: (id: string, url: string) => void;
46
63
  handleMarkAllAsRead: () => void;
47
- actions?: Action[];
48
- onDelete?: () => void;
49
- onUpdate?: () => void;
50
- onCreate?: () => void;
51
- onEdit?: () => void;
52
- onExport?: () => void;
53
- onPrint?: () => void;
64
+ customActions?: Action[];
65
+ actions?: ActionConfig[];
54
66
  footerName: string;
67
+ disableBackButton?: boolean;
68
+ disableNotifications?: boolean;
55
69
  }
56
70
 
57
71
  export const Footer2 = (props: Footer2Props) => {
@@ -61,20 +75,28 @@ export const Footer2 = (props: Footer2Props) => {
61
75
  onFilterChange,
62
76
  onNotificationClick,
63
77
  handleMarkAllAsRead,
78
+ customActions = [],
64
79
  actions = [],
65
- onDelete,
66
- onUpdate,
67
- onCreate,
68
- onEdit,
69
- onExport,
70
- onPrint,
71
80
  footerName = '',
81
+ disableBackButton = false,
82
+ disableNotifications = false,
72
83
  } = props;
73
84
 
74
85
  const [date, setDate] = useState(moment());
75
86
  const [isMenuOpen, setIsMenuOpen] = useState(false);
76
87
  const menuRef = useRef<HTMLDivElement>(null);
77
88
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
89
+ const { t } = useTranslation();
90
+
91
+ // Mapeamento de tipos de ações para seus ícones e labels padrão
92
+ const defaultActionProps: Record<string, { icon: React.ReactNode; label: string }> = {
93
+ [ActionType.DELETE]: { icon: <DeleteOutlined />, label: t('navigation.delete') },
94
+ [ActionType.UPDATE]: { icon: <ReloadOutlined />, label: t('navigation.update') },
95
+ [ActionType.CREATE]: { icon: <PlusOutlined />, label: t('navigation.create') },
96
+ [ActionType.EDIT]: { icon: <EditOutlined />, label: t('navigation.edit') },
97
+ [ActionType.EXPORT]: { icon: <ExportOutlined />, label: t('navigation.export') },
98
+ [ActionType.PRINT]: { icon: <PrinterOutlined />, label: t('navigation.print') },
99
+ };
78
100
 
79
101
  useEffect(() => {
80
102
  const time = (function updateDate() {
@@ -99,67 +121,32 @@ export const Footer2 = (props: Footer2Props) => {
99
121
  };
100
122
  }, []);
101
123
 
102
- const getDefaultAndCustomActions = (): Action[] => {
103
- const combinedActions = [...actions];
104
-
105
- if (onDelete) {
106
- combinedActions.push({
107
- key: 'delete',
108
- label: t('navigation.delete'),
109
- icon: <DeleteOutlined />,
110
- onClick: onDelete
111
- });
112
- }
113
-
114
- if (onUpdate) {
115
- combinedActions.push({
116
- key: 'update',
117
- label: t('navigation.update'),
118
- icon: <ReloadOutlined />,
119
- onClick: onUpdate
120
- });
121
- }
122
-
123
- if (onCreate) {
124
- combinedActions.push({
125
- key: 'create',
126
- label: t('navigation.create'),
127
- icon: <PlusOutlined />,
128
- onClick: onCreate
129
- });
130
- }
131
-
132
- if (onEdit) {
133
- combinedActions.push({
134
- key: 'edit',
135
- label: t('navigation.edit'),
136
- icon: <EditOutlined />,
137
- onClick: onEdit
138
- });
139
- }
140
-
141
- if (onExport) {
142
- combinedActions.push({
143
- key: 'export',
144
- label: t('navigation.export'),
145
- icon: <ExportOutlined />,
146
- onClick: onExport
147
- });
148
- }
149
-
150
- if (onPrint) {
151
- combinedActions.push({
152
- key: 'print',
153
- label: t('navigation.print'),
154
- icon: <PrinterOutlined />,
155
- onClick: onPrint
156
- });
157
- }
158
-
124
+ const getAllActions = (): Action[] => {
125
+ // Converter ActionConfig para Action
126
+ const standardActions = actions.map(actionConfig => {
127
+ const actionType = actionConfig.type;
128
+ const defaultProps = defaultActionProps[actionType] || {
129
+ label: String(actionType),
130
+ icon: <PlusOutlined />
131
+ };
132
+
133
+ return {
134
+ key: actionType,
135
+ label: defaultProps.label,
136
+ icon: defaultProps.icon,
137
+ onClick: actionConfig.onClick,
138
+ disabled: actionConfig.disabled || false
139
+ };
140
+ });
141
+
142
+ // Combinar com ações personalizadas
143
+ const combinedActions = [...standardActions, ...customActions];
144
+
145
+ // Ordenar por label
159
146
  return combinedActions.sort((a, b) => a.label.localeCompare(b.label));
160
147
  };
161
148
 
162
- const allActions = getDefaultAndCustomActions();
149
+ const allActions = getAllActions();
163
150
 
164
151
  const toggleMenu = () => {
165
152
  setIsMenuOpen(!isMenuOpen);
@@ -198,10 +185,15 @@ export const Footer2 = (props: Footer2Props) => {
198
185
  }
199
186
 
200
187
  <div className={styles.navigation}>
201
- <div className={styles.navItem} onClick={onBackClick}>
202
- <ArrowLeftOutlined className={styles.navIcon} />
203
- <span className={styles.navText}>{t('navigation.back')}</span>
204
- </div>
188
+ {onBackClick && (
189
+ <div
190
+ className={`${styles.navItem} ${disableBackButton ? styles.disabled : ''}`}
191
+ onClick={disableBackButton ? undefined : onBackClick}
192
+ >
193
+ <ArrowLeftOutlined className={styles.navIcon} />
194
+ <span className={styles.navText}>{t('navigation.back')}</span>
195
+ </div>
196
+ )}
205
197
 
206
198
  <div className={styles.addButtonContainer}>
207
199
  <div className={styles.addButton} onClick={toggleMenu}>
@@ -213,9 +205,9 @@ export const Footer2 = (props: Footer2Props) => {
213
205
  {allActions?.map((action) => (
214
206
  <div
215
207
  key={action.key}
216
- className={styles.circleMenuItem}
208
+ className={`${styles.circleMenuItem} ${action.disabled ? styles.disabled : ''}`}
217
209
  onClick={() => {
218
- if (action.onClick) {
210
+ if (action.onClick && !action.disabled) {
219
211
  action.onClick();
220
212
  setIsMenuOpen(false);
221
213
  }
@@ -232,16 +224,18 @@ export const Footer2 = (props: Footer2Props) => {
232
224
  )}
233
225
  </div>
234
226
 
235
- <div className={styles.navItem}>
236
- <BellNotifications
237
- notifications={notifications}
238
- onFilterChange={onFilterChange}
239
- onNotificationClick={onNotificationClick}
240
- handleMarkAllAsRead={handleMarkAllAsRead}
241
- />
227
+ {!disableNotifications && (
228
+ <div className={styles.navItem}>
229
+ <BellNotifications
230
+ notifications={notifications}
231
+ onFilterChange={onFilterChange}
232
+ onNotificationClick={onNotificationClick}
233
+ handleMarkAllAsRead={handleMarkAllAsRead}
234
+ />
242
235
 
243
- <span className={styles.navText}>{t('navigation.notifications')}</span>
244
- </div>
236
+ <span className={styles.navText}>{t('navigation.notifications')}</span>
237
+ </div>
238
+ )}
245
239
  </div>
246
240
 
247
241
  {!isMobile &&
@@ -251,4 +245,4 @@ export const Footer2 = (props: Footer2Props) => {
251
245
  }
252
246
  </div>
253
247
  );
254
- };
248
+ };
@@ -136,6 +136,12 @@
136
136
  }
137
137
  }
138
138
 
139
+ .disabled {
140
+ opacity: 0.5;
141
+ cursor: not-allowed !important;
142
+ pointer-events: none;
143
+ }
144
+
139
145
  .rotateIcon {
140
146
  transform: rotate(45deg);
141
147
  transition: transform 0.3s ease;