@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/bundle.js +1 -1
- package/dist/main.css +1 -1
- package/dist/types/components/Footer2/index.d.ts +18 -7
- package/package.json +1 -1
- package/src/components/Footer2/Footer.stories.tsx +17 -2
- package/src/components/Footer2/index.tsx +82 -88
- package/src/components/Footer2/styles.module.scss +6 -0
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
|
-
|
|
30
|
-
|
|
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,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
|
-
|
|
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
|
-
|
|
48
|
-
|
|
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
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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 =
|
|
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
|
-
|
|
202
|
-
<
|
|
203
|
-
|
|
204
|
-
|
|
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
|
-
|
|
236
|
-
<
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
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
|
-
|
|
244
|
-
|
|
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
|
+
};
|