sprint-asia-custom-component 0.1.23 → 0.1.25
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/index.js +128 -67
- package/package.json +1 -1
- package/src/components/alert/index.js +33 -12
- package/src/components/button/outlinebutton/index.js +1 -1
- package/src/components/dropdown/dropdownText/index.js +31 -26
- package/src/components/filter/filterDropdown/index.js +10 -6
- package/src/components/footer/index.js +35 -0
- package/src/components/searchdropdown/index.js +1 -1
- package/src/components/switch/index.js +1 -1
- package/src/components/textinput/index.js +10 -8
- package/src/index.js +2 -1
- package/src/templates/index.js +7 -1
package/dist/index.js
CHANGED
|
@@ -99,30 +99,14 @@
|
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
// THIS FILE IS AUTO GENERATED
|
|
102
|
-
function PiCalendarDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,48V88H40V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"}}]})(props);}function PiDownloadSimpleDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M168,112l-40,40L88,112Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M224,152v56a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V152a8,8,0,0,1,16,0v56H208V152a8,8,0,0,1,16,0ZM82.34,117.66A8,8,0,0,1,88,104h32V40a8,8,0,0,1,16,0v64h32a8,8,0,0,1,5.66,13.66l-40,40a8,8,0,0,1-11.32,0Zm25,2.34L128,140.69,148.69,120Z"}}]})(props);}function PiEyeDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Zm0,112a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"}}]})(props);}function PiFileArrowUpDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M208,88H152V32Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-77.66a8,8,0,0,1-11.32,11.32L136,139.31V184a8,8,0,0,1-16,0V139.31l-10.34,10.35a8,8,0,0,1-11.32-11.32l24-24a8,8,0,0,1,11.32,0Z"}}]})(props);}function PiFunnelDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M221.9,61.38l-67.74,72.31a8,8,0,0,0-2.16,5.47v55.49a8,8,0,0,1-3.56,6.66l-32,21.33A8,8,0,0,1,104,216V139.16a8,8,0,0,0-2.16-5.47L34.1,61.38A8,8,0,0,1,40,48H216A8,8,0,0,1,221.9,61.38Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm108.34,72.28A15.92,15.92,0,0,0,144,139.17v55.49L112,216V139.17a15.92,15.92,0,0,0-4.32-10.94L40,56H216Z"}}]})(props);}function PiInfoDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z"}}]})(props);}function PiMagnifyingGlassDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"}}]})(props);}function PiFileTextFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,176H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm-8-56V44l44,44Z"}}]})(props);}function PiReceiptFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,40H40A16,16,0,0,0,24,56V208a8,8,0,0,0,11.58,7.15L64,200.94l28.42,14.21a8,8,0,0,0,7.16,0L128,200.94l28.42,14.21a8,8,0,0,0,7.16,0L192,200.94l28.42,14.21A8,8,0,0,0,232,208V56A16,16,0,0,0,216,40ZM176,144H80a8,8,0,0,1,0-16h96a8,8,0,0,1,0,16Zm0-32H80a8,8,0,0,1,0-16h96a8,8,0,0,1,0,16Z"}}]})(props);}function PiShoppingBagFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm-88,96A48.05,48.05,0,0,1,80,88a8,8,0,0,1,16,0,32,32,0,0,0,64,0,8,8,0,0,1,16,0A48.05,48.05,0,0,1,128,136Z"}}]})(props);}function PiWalletFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,72H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,64V192a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V88A16,16,0,0,0,216,72Zm-36,80a12,12,0,1,1,12-12A12,12,0,0,1,180,152Z"}}]})(props);}function PiEyeClosedLight(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M229.21,165a6,6,0,0,1-10.42,6l-20-35.08a122,122,0,0,1-39,18.09l6.17,37a6,6,0,0,1-4.93,6.91,6.85,6.85,0,0,1-1,.08,6,6,0,0,1-5.91-5L148,156.44a128.86,128.86,0,0,1-40,0L101.92,193A6,6,0,0,1,96,198a6.85,6.85,0,0,1-1-.08A6,6,0,0,1,90.08,191l6.17-37a122,122,0,0,1-39-18.09L37.21,171a6,6,0,1,1-10.42-6l20.85-36.48a152,152,0,0,1-20.31-20.77,6,6,0,0,1,9.34-7.54C53.54,121.11,83.07,146,128,146s74.46-24.89,91.33-45.77a6,6,0,0,1,9.34,7.54,152,152,0,0,1-20.31,20.77Z"}}]})(props);}function PiArchive(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,48H32A16,16,0,0,0,16,64V88a16,16,0,0,0,16,16v88a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V104a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM208,192H48V104H208ZM224,88H32V64H224V88ZM96,136a8,8,0,0,1,8-8h48a8,8,0,0,1,0,16H104A8,8,0,0,1,96,136Z"}}]})(props);}function PiCaretDown(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"}}]})(props);}function PiCaretLeft(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"}}]})(props);}function PiCaretRight(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"}}]})(props);}function PiCaretUp(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"}}]})(props);}function PiClock(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"}}]})(props);}function PiFileArrowDown(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-61.66a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L120,164.69V120a8,8,0,0,1,16,0v44.69l10.34-10.35A8,8,0,0,1,157.66,154.34Z"}}]})(props);}function PiFunnel(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm108.34,72.28A15.92,15.92,0,0,0,144,139.17v55.49L112,216V139.17a15.92,15.92,0,0,0-4.32-10.94L40,56H216Z"}}]})(props);}function PiImage(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"}}]})(props);}function PiMagnifyingGlass(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"}}]})(props);}function PiNotePencil(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,120v88a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h88a8,8,0,0,1,0,16H48V208H208V120a8,8,0,0,1,16,0Z"}}]})(props);}function PiPlus(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"}}]})(props);}function PiTrash(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"}}]})(props);}function PiUser(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"}}]})(props);}
|
|
102
|
+
function PiCalendarDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,48V88H40V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"}}]})(props);}function PiDownloadSimpleDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M168,112l-40,40L88,112Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M224,152v56a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V152a8,8,0,0,1,16,0v56H208V152a8,8,0,0,1,16,0ZM82.34,117.66A8,8,0,0,1,88,104h32V40a8,8,0,0,1,16,0v64h32a8,8,0,0,1,5.66,13.66l-40,40a8,8,0,0,1-11.32,0Zm25,2.34L128,140.69,148.69,120Z"}}]})(props);}function PiFileArrowUpDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M208,88H152V32Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-77.66a8,8,0,0,1-11.32,11.32L136,139.31V184a8,8,0,0,1-16,0V139.31l-10.34,10.35a8,8,0,0,1-11.32-11.32l24-24a8,8,0,0,1,11.32,0Z"}}]})(props);}function PiFunnelDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M221.9,61.38l-67.74,72.31a8,8,0,0,0-2.16,5.47v55.49a8,8,0,0,1-3.56,6.66l-32,21.33A8,8,0,0,1,104,216V139.16a8,8,0,0,0-2.16-5.47L34.1,61.38A8,8,0,0,1,40,48H216A8,8,0,0,1,221.9,61.38Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm108.34,72.28A15.92,15.92,0,0,0,144,139.17v55.49L112,216V139.17a15.92,15.92,0,0,0-4.32-10.94L40,56H216Z"}}]})(props);}function PiInfoDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z"}}]})(props);}function PiMagnifyingGlassDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"}}]})(props);}function PiFileTextFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,176H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm-8-56V44l44,44Z"}}]})(props);}function PiInfoFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z"}}]})(props);}function PiReceiptFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,40H40A16,16,0,0,0,24,56V208a8,8,0,0,0,11.58,7.15L64,200.94l28.42,14.21a8,8,0,0,0,7.16,0L128,200.94l28.42,14.21a8,8,0,0,0,7.16,0L192,200.94l28.42,14.21A8,8,0,0,0,232,208V56A16,16,0,0,0,216,40ZM176,144H80a8,8,0,0,1,0-16h96a8,8,0,0,1,0,16Zm0-32H80a8,8,0,0,1,0-16h96a8,8,0,0,1,0,16Z"}}]})(props);}function PiShoppingBagFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm-88,96A48.05,48.05,0,0,1,80,88a8,8,0,0,1,16,0,32,32,0,0,0,64,0,8,8,0,0,1,16,0A48.05,48.05,0,0,1,128,136Z"}}]})(props);}function PiWalletFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,72H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,64V192a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V88A16,16,0,0,0,216,72Zm-36,80a12,12,0,1,1,12-12A12,12,0,0,1,180,152Z"}}]})(props);}function PiEyeClosedLight(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M229.21,165a6,6,0,0,1-10.42,6l-20-35.08a122,122,0,0,1-39,18.09l6.17,37a6,6,0,0,1-4.93,6.91,6.85,6.85,0,0,1-1,.08,6,6,0,0,1-5.91-5L148,156.44a128.86,128.86,0,0,1-40,0L101.92,193A6,6,0,0,1,96,198a6.85,6.85,0,0,1-1-.08A6,6,0,0,1,90.08,191l6.17-37a122,122,0,0,1-39-18.09L37.21,171a6,6,0,1,1-10.42-6l20.85-36.48a152,152,0,0,1-20.31-20.77,6,6,0,0,1,9.34-7.54C53.54,121.11,83.07,146,128,146s74.46-24.89,91.33-45.77a6,6,0,0,1,9.34,7.54,152,152,0,0,1-20.31,20.77Z"}}]})(props);}function PiArchive(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,48H32A16,16,0,0,0,16,64V88a16,16,0,0,0,16,16v88a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V104a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM208,192H48V104H208ZM224,88H32V64H224V88ZM96,136a8,8,0,0,1,8-8h48a8,8,0,0,1,0,16H104A8,8,0,0,1,96,136Z"}}]})(props);}function PiCaretDown(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"}}]})(props);}function PiCaretLeft(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"}}]})(props);}function PiCaretRight(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"}}]})(props);}function PiCaretUp(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"}}]})(props);}function PiClock(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"}}]})(props);}function PiEye(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"}}]})(props);}function PiFileArrowDown(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-61.66a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L120,164.69V120a8,8,0,0,1,16,0v44.69l10.34-10.35A8,8,0,0,1,157.66,154.34Z"}}]})(props);}function PiFunnel(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm108.34,72.28A15.92,15.92,0,0,0,144,139.17v55.49L112,216V139.17a15.92,15.92,0,0,0-4.32-10.94L40,56H216Z"}}]})(props);}function PiImage(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"}}]})(props);}function PiInfo(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"}}]})(props);}function PiMagnifyingGlass(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"}}]})(props);}function PiNotePencil(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,120v88a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h88a8,8,0,0,1,0,16H48V208H208V120a8,8,0,0,1,16,0Z"}}]})(props);}function PiPlus(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"}}]})(props);}function PiTrash(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"}}]})(props);}function PiUser(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"}}]})(props);}function PiX(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"}}]})(props);}
|
|
103
103
|
|
|
104
|
-
const
|
|
105
|
-
title = "Title",
|
|
106
|
-
subtitle = "Subtitle"
|
|
107
|
-
}) => {
|
|
108
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
109
|
-
className: "w-full flex p-3 bg-primary50 border border-primary500 rounded-md"
|
|
110
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(PiInfoDuotone, {
|
|
111
|
-
size: "24",
|
|
112
|
-
variant: "Bold",
|
|
113
|
-
className: "text-primary500 mr-2"
|
|
114
|
-
})), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
115
|
-
className: "text-md font-semibold text-black"
|
|
116
|
-
}, title), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
117
|
-
className: "text-sm font-normal text-black"
|
|
118
|
-
}, subtitle)));
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
const DangerButton = ({
|
|
104
|
+
const OutlineButton = ({
|
|
122
105
|
title = "Button",
|
|
123
106
|
type = "wrap",
|
|
124
107
|
isActive = true,
|
|
125
108
|
size = "large",
|
|
109
|
+
isIconVisible = false,
|
|
126
110
|
onClick = () => {}
|
|
127
111
|
}) => {
|
|
128
112
|
const [isPressed, setIsPressed] = React.useState(false);
|
|
@@ -137,9 +121,9 @@
|
|
|
137
121
|
};
|
|
138
122
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
139
123
|
className: `
|
|
140
|
-
${isPressed && isActive ? 'bg-
|
|
124
|
+
${isPressed && isActive ? 'bg-white text-primary500 border-2 border-primary500 text-primary500' : isActive ? 'bg-white border-2 border-primary500 text-primary500' : 'bg-neutral30 text-neutral80 cursor-default'}
|
|
141
125
|
${type === "full" && "w-full"}
|
|
142
|
-
${size === "small" && "text-sm h-7"}
|
|
126
|
+
${size === "small" && "text-sm h-7 w-32"}
|
|
143
127
|
${size === "medium" && "text-md h-8"}
|
|
144
128
|
${size === "large" && "text-lg h-10"}
|
|
145
129
|
${size === "very large" && "text-xl h-12"}
|
|
@@ -151,15 +135,56 @@
|
|
|
151
135
|
onMouseUp: handleButtonRelease,
|
|
152
136
|
onTouchStart: handleButtonPress,
|
|
153
137
|
onTouchEnd: handleButtonRelease
|
|
154
|
-
},
|
|
138
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
139
|
+
className: "flex items-center"
|
|
140
|
+
}, isIconVisible && /*#__PURE__*/React__default["default"].createElement(PiDownloadSimpleDuotone, {
|
|
141
|
+
size: 16,
|
|
142
|
+
className: "mr-1"
|
|
143
|
+
}), /*#__PURE__*/React__default["default"].createElement("p", null, title)));
|
|
155
144
|
};
|
|
156
145
|
|
|
157
|
-
const
|
|
146
|
+
const Alert = ({
|
|
147
|
+
title = "Title",
|
|
148
|
+
subtitle = "Subtitle",
|
|
149
|
+
titleLeftButton,
|
|
150
|
+
titleRightButton,
|
|
151
|
+
onClickLeftButton,
|
|
152
|
+
onClickRightButton
|
|
153
|
+
}) => {
|
|
154
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
155
|
+
className: "w-full flex justify-between p-3 bg-primary50 border border-primary600 rounded-md"
|
|
156
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
157
|
+
className: "w-full flex"
|
|
158
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(PiInfoFill, {
|
|
159
|
+
size: "24",
|
|
160
|
+
variant: "Bold",
|
|
161
|
+
className: "text-primary600 mr-2"
|
|
162
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
163
|
+
className: "text-md font-semibold text-black"
|
|
164
|
+
}, title), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
165
|
+
className: "text-sm font-normal text-black"
|
|
166
|
+
}, subtitle))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
167
|
+
className: "flex items-center"
|
|
168
|
+
}, titleLeftButton && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
169
|
+
className: "m-1"
|
|
170
|
+
}, /*#__PURE__*/React__default["default"].createElement(OutlineButton, {
|
|
171
|
+
title: titleLeftButton,
|
|
172
|
+
onClick: onClickLeftButton,
|
|
173
|
+
size: "small"
|
|
174
|
+
})), titleRightButton && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
175
|
+
className: "m-1"
|
|
176
|
+
}, /*#__PURE__*/React__default["default"].createElement(OutlineButton, {
|
|
177
|
+
title: titleRightButton,
|
|
178
|
+
onClick: onClickRightButton,
|
|
179
|
+
size: "small"
|
|
180
|
+
}))));
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
const DangerButton = ({
|
|
158
184
|
title = "Button",
|
|
159
185
|
type = "wrap",
|
|
160
186
|
isActive = true,
|
|
161
187
|
size = "large",
|
|
162
|
-
isIconVisible = false,
|
|
163
188
|
onClick = () => {}
|
|
164
189
|
}) => {
|
|
165
190
|
const [isPressed, setIsPressed] = React.useState(false);
|
|
@@ -174,7 +199,7 @@
|
|
|
174
199
|
};
|
|
175
200
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
176
201
|
className: `
|
|
177
|
-
${isPressed && isActive ? 'bg-
|
|
202
|
+
${isPressed && isActive ? 'bg-danger700 text-white' : isActive ? 'bg-danger500 hover:bg-danger600 text-white' : 'bg-neutral30 text-neutral80 cursor-default'}
|
|
178
203
|
${type === "full" && "w-full"}
|
|
179
204
|
${size === "small" && "text-sm h-7"}
|
|
180
205
|
${size === "medium" && "text-md h-8"}
|
|
@@ -188,12 +213,7 @@
|
|
|
188
213
|
onMouseUp: handleButtonRelease,
|
|
189
214
|
onTouchStart: handleButtonPress,
|
|
190
215
|
onTouchEnd: handleButtonRelease
|
|
191
|
-
},
|
|
192
|
-
className: "flex items-center"
|
|
193
|
-
}, isIconVisible && /*#__PURE__*/React__default["default"].createElement(PiDownloadSimpleDuotone, {
|
|
194
|
-
size: 16,
|
|
195
|
-
className: "mr-1"
|
|
196
|
-
}), /*#__PURE__*/React__default["default"].createElement("p", null, title)));
|
|
216
|
+
}, title);
|
|
197
217
|
};
|
|
198
218
|
|
|
199
219
|
const PrimaryButton = ({
|
|
@@ -23956,16 +23976,21 @@
|
|
|
23956
23976
|
};
|
|
23957
23977
|
|
|
23958
23978
|
const DropdownText = ({
|
|
23959
|
-
options = [
|
|
23960
|
-
|
|
23961
|
-
|
|
23962
|
-
|
|
23963
|
-
|
|
23979
|
+
options = [{
|
|
23980
|
+
option: "Name 1",
|
|
23981
|
+
value: "Value 1"
|
|
23982
|
+
}, {
|
|
23983
|
+
option: "Name 2",
|
|
23984
|
+
value: "Value 2"
|
|
23985
|
+
}],
|
|
23986
|
+
onSelect,
|
|
23964
23987
|
title = "Title Dropdown",
|
|
23965
|
-
placeholder = "
|
|
23966
|
-
isRequired = true
|
|
23988
|
+
placeholder = "Placeholder",
|
|
23989
|
+
isRequired = true,
|
|
23990
|
+
currentOption
|
|
23967
23991
|
}) => {
|
|
23968
23992
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
23993
|
+
const [selectedOption, setSelectedOption] = React.useState(null);
|
|
23969
23994
|
const dropdownRef = React.useRef(null);
|
|
23970
23995
|
React.useEffect(() => {
|
|
23971
23996
|
const handleOutsideClick = event => {
|
|
@@ -23983,11 +24008,13 @@
|
|
|
23983
24008
|
const handleToggleDropdownText = () => {
|
|
23984
24009
|
setIsOpen(!isOpen);
|
|
23985
24010
|
};
|
|
23986
|
-
const handleOptionClick = value => {
|
|
24011
|
+
const handleOptionClick = (option, value) => {
|
|
24012
|
+
console.log("ini option", option);
|
|
24013
|
+
console.log("ini value", value);
|
|
24014
|
+
setSelectedOption(option);
|
|
23987
24015
|
setIsOpen(false);
|
|
23988
|
-
|
|
23989
|
-
|
|
23990
|
-
onSelectValue(value.code);
|
|
24016
|
+
if (onSelect) {
|
|
24017
|
+
onSelect(value);
|
|
23991
24018
|
}
|
|
23992
24019
|
};
|
|
23993
24020
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -24007,7 +24034,7 @@
|
|
|
24007
24034
|
onClick: handleToggleDropdownText
|
|
24008
24035
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
24009
24036
|
className: "flex-grow overflow-hidden"
|
|
24010
|
-
},
|
|
24037
|
+
}, selectedOption ? selectedOption : currentOption ? currentOption : placeholder), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
24011
24038
|
className: "ml-2"
|
|
24012
24039
|
}, isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, {
|
|
24013
24040
|
size: 16,
|
|
@@ -24022,17 +24049,17 @@
|
|
|
24022
24049
|
"aria-labelledby": "options-menu"
|
|
24023
24050
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
24024
24051
|
className: "px-1 py-2 max-h-40 overflow-y-auto"
|
|
24025
|
-
}, options.
|
|
24026
|
-
className: "hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md"
|
|
24027
|
-
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
24028
|
-
className: "text-sm text-black"
|
|
24029
|
-
}, "Loading...")) : options.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
24052
|
+
}, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
24030
24053
|
key: index,
|
|
24031
24054
|
className: "hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md",
|
|
24032
|
-
onClick: () =>
|
|
24055
|
+
onClick: () => {
|
|
24056
|
+
if (option.option !== "Loading...") {
|
|
24057
|
+
handleOptionClick(option.option, option.value);
|
|
24058
|
+
}
|
|
24059
|
+
}
|
|
24033
24060
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
24034
24061
|
className: "text-sm text-black"
|
|
24035
|
-
},
|
|
24062
|
+
}, option.option))))));
|
|
24036
24063
|
};
|
|
24037
24064
|
|
|
24038
24065
|
function _extends$2() {
|
|
@@ -28753,7 +28780,7 @@
|
|
|
28753
28780
|
mode = "default",
|
|
28754
28781
|
isRequired = true,
|
|
28755
28782
|
value,
|
|
28756
|
-
|
|
28783
|
+
onChangeInput
|
|
28757
28784
|
}) => {
|
|
28758
28785
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
28759
28786
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
@@ -28778,7 +28805,7 @@
|
|
|
28778
28805
|
className: "relative rounded-md"
|
|
28779
28806
|
}, leftIcon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
28780
28807
|
className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
|
|
28781
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
28808
|
+
}, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
|
|
28782
28809
|
size: 16,
|
|
28783
28810
|
className: `
|
|
28784
28811
|
${mode === "primary" && "text-black"}
|
|
@@ -28798,13 +28825,13 @@
|
|
|
28798
28825
|
placeholder: placeholder,
|
|
28799
28826
|
disabled: mode === "disable",
|
|
28800
28827
|
value: value,
|
|
28801
|
-
onChange:
|
|
28828
|
+
onChange: onChangeInput,
|
|
28802
28829
|
onFocus: handleFocus,
|
|
28803
28830
|
onBlur: handleBlur
|
|
28804
28831
|
}), type === 'password' && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
28805
28832
|
className: "absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer",
|
|
28806
28833
|
onClick: handleTogglePasswordVisibility
|
|
28807
|
-
}, showPassword ? /*#__PURE__*/React__default["default"].createElement(
|
|
28834
|
+
}, showPassword ? /*#__PURE__*/React__default["default"].createElement(PiEye, {
|
|
28808
28835
|
size: 16,
|
|
28809
28836
|
className: `text-black ${mode === "danger" && "text-danger500"}`
|
|
28810
28837
|
}) : /*#__PURE__*/React__default["default"].createElement(PiEyeClosedLight, {
|
|
@@ -28812,7 +28839,7 @@
|
|
|
28812
28839
|
className: `text-black ${mode === "danger" && "text-danger500"}`
|
|
28813
28840
|
})), rightIcon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
28814
28841
|
className: "absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none"
|
|
28815
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
28842
|
+
}, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
|
|
28816
28843
|
size: 16,
|
|
28817
28844
|
className: `
|
|
28818
28845
|
${mode === "primary" && "text-black"}
|
|
@@ -28822,11 +28849,11 @@
|
|
|
28822
28849
|
}))), footer && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
28823
28850
|
className: "mt-1"
|
|
28824
28851
|
}, mode === "danger" ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
28825
|
-
className: "flex
|
|
28826
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
28827
|
-
size:
|
|
28852
|
+
className: "flex"
|
|
28853
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
|
|
28854
|
+
size: 16,
|
|
28828
28855
|
className: "text-danger500"
|
|
28829
|
-
}), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
28856
|
+
})), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
28830
28857
|
className: "text-danger500 text-xs ml-1"
|
|
28831
28858
|
}, footer)) : /*#__PURE__*/React__default["default"].createElement("p", {
|
|
28832
28859
|
className: "text-black text-xs"
|
|
@@ -44732,7 +44759,7 @@
|
|
|
44732
44759
|
className: `relative inline-block ${checked ? 'bg-primary500' : 'bg-neutral40'} rounded-full w-12 h-6 transition-all duration-300 ${isEdit ? "cursor-pointer" : "cursor-default"}`,
|
|
44733
44760
|
onClick: handleClick
|
|
44734
44761
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
44735
|
-
className: `absolute flex items-center justify-center w-6 h-6 transition-all duration-300 ${checked ? '
|
|
44762
|
+
className: `absolute flex items-center justify-center w-6 h-6 transition-all duration-300 ${checked ? 'right-0' : 'left-0'}`
|
|
44736
44763
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
44737
44764
|
className: `w-4 h-4 bg-white rounded-full shadow-md transition-all`
|
|
44738
44765
|
})));
|
|
@@ -46585,7 +46612,7 @@
|
|
|
46585
46612
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46586
46613
|
className: "flex justify-between"
|
|
46587
46614
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46588
|
-
className: "text-sm text-black
|
|
46615
|
+
className: "text-sm text-black"
|
|
46589
46616
|
}, option)))) : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46590
46617
|
className: "text-sm font-normal text-black flex justify-center"
|
|
46591
46618
|
}, /*#__PURE__*/React__default["default"].createElement("p", null, "Data Not Available"))))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -46660,6 +46687,8 @@
|
|
|
46660
46687
|
role: [],
|
|
46661
46688
|
status: []
|
|
46662
46689
|
});
|
|
46690
|
+
setShowFilterMenu(false);
|
|
46691
|
+
setShowFilterSubmenu(false);
|
|
46663
46692
|
};
|
|
46664
46693
|
const buttonText = dataFilterCheckbox.length + dataFilterStatus.length > 0 ? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected` : 'Filter';
|
|
46665
46694
|
return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
@@ -46668,13 +46697,17 @@
|
|
|
46668
46697
|
className: "flex"
|
|
46669
46698
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
46670
46699
|
type: "button",
|
|
46671
|
-
className: "flex items-center w-60
|
|
46672
|
-
onClick: () => setShowFilterMenu(!showFilterMenu)
|
|
46700
|
+
className: "flex items-center w-60 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
|
|
46673
46701
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
46674
|
-
className: "flex-grow"
|
|
46675
|
-
|
|
46702
|
+
className: "flex-grow py-2.5",
|
|
46703
|
+
onClick: () => setShowFilterMenu(!showFilterMenu)
|
|
46704
|
+
}, buttonText), dataFilterCheckbox.length + dataFilterStatus.length > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
46705
|
+
className: "ml-2",
|
|
46676
46706
|
onClick: handleResetFilter
|
|
46677
|
-
},
|
|
46707
|
+
}, /*#__PURE__*/React__default["default"].createElement(PiX, {
|
|
46708
|
+
size: 16,
|
|
46709
|
+
className: "text-neutral300"
|
|
46710
|
+
})) : /*#__PURE__*/React__default["default"].createElement("span", {
|
|
46678
46711
|
className: "ml-2"
|
|
46679
46712
|
}, /*#__PURE__*/React__default["default"].createElement(PiFunnel, {
|
|
46680
46713
|
size: 16,
|
|
@@ -46711,7 +46744,7 @@
|
|
|
46711
46744
|
fontSize: "8px"
|
|
46712
46745
|
}
|
|
46713
46746
|
}, dataFilterStatus.length))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46714
|
-
className:
|
|
46747
|
+
className: `ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-32 cursor-pointer ${option.type == "checkbox" ? "top-0" : "top-16"}`
|
|
46715
46748
|
}, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46716
46749
|
key: subIndex,
|
|
46717
46750
|
className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
|
|
@@ -46743,6 +46776,33 @@
|
|
|
46743
46776
|
}, submenu)))))))))));
|
|
46744
46777
|
};
|
|
46745
46778
|
|
|
46779
|
+
const Footer = ({
|
|
46780
|
+
titleLeftButton = "Cancel",
|
|
46781
|
+
titleRightButton = "Submit",
|
|
46782
|
+
isActiveLeftButton,
|
|
46783
|
+
isActiveRightButton,
|
|
46784
|
+
onClickLeftButton,
|
|
46785
|
+
onClickRightButton
|
|
46786
|
+
}) => {
|
|
46787
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46788
|
+
className: "sticky bottom-0 flex w-full justify-end items-center py-1 px-6 bg-white"
|
|
46789
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46790
|
+
className: "flex items-center"
|
|
46791
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46792
|
+
className: "m-1"
|
|
46793
|
+
}, /*#__PURE__*/React__default["default"].createElement(OutlineButton, {
|
|
46794
|
+
title: titleLeftButton,
|
|
46795
|
+
onClick: onClickLeftButton,
|
|
46796
|
+
isActive: isActiveLeftButton
|
|
46797
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46798
|
+
className: "m-1"
|
|
46799
|
+
}, /*#__PURE__*/React__default["default"].createElement(PrimaryButton, {
|
|
46800
|
+
title: titleRightButton,
|
|
46801
|
+
onClick: onClickRightButton,
|
|
46802
|
+
isActive: isActiveRightButton
|
|
46803
|
+
}))));
|
|
46804
|
+
};
|
|
46805
|
+
|
|
46746
46806
|
exports.Alert = Alert;
|
|
46747
46807
|
exports.BillerList = BillerList;
|
|
46748
46808
|
exports.BillerProductList = BillerProductList;
|
|
@@ -46765,6 +46825,7 @@
|
|
|
46765
46825
|
exports.FilterCheckbox = FilterCheckbox;
|
|
46766
46826
|
exports.FilterDropdown = FilterDropdown;
|
|
46767
46827
|
exports.FilterText = FilterText;
|
|
46828
|
+
exports.Footer = Footer;
|
|
46768
46829
|
exports.HeaderTable = HeaderTable;
|
|
46769
46830
|
exports.InternalProductList = InternalProductList;
|
|
46770
46831
|
exports.LimitList = LimitList;
|
package/package.json
CHANGED
|
@@ -1,22 +1,43 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import {
|
|
2
|
+
import { PiInfoFill } from 'react-icons/pi'
|
|
3
|
+
import OutlineButton from '../button/outlinebutton'
|
|
3
4
|
|
|
4
5
|
const Alert = ({
|
|
5
6
|
title = "Title",
|
|
6
|
-
subtitle = "Subtitle"
|
|
7
|
+
subtitle = "Subtitle",
|
|
8
|
+
titleLeftButton,
|
|
9
|
+
titleRightButton,
|
|
10
|
+
onClickLeftButton,
|
|
11
|
+
onClickRightButton,
|
|
7
12
|
}) => {
|
|
8
13
|
return (
|
|
9
|
-
<div className='w-full flex p-3 bg-primary50 border border-
|
|
10
|
-
<div>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
<div className='w-full flex justify-between p-3 bg-primary50 border border-primary600 rounded-md'>
|
|
15
|
+
<div className='w-full flex'>
|
|
16
|
+
<div>
|
|
17
|
+
<PiInfoFill
|
|
18
|
+
size="24"
|
|
19
|
+
variant="Bold"
|
|
20
|
+
className="text-primary600 mr-2"
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
<div>
|
|
24
|
+
<p className='text-md font-semibold text-black'>{title}</p>
|
|
25
|
+
<p className='text-sm font-normal text-black'>{subtitle}</p>
|
|
26
|
+
</div>
|
|
16
27
|
</div>
|
|
17
|
-
<div>
|
|
18
|
-
|
|
19
|
-
|
|
28
|
+
<div className='flex items-center'>
|
|
29
|
+
{
|
|
30
|
+
titleLeftButton &&
|
|
31
|
+
<div className='m-1'>
|
|
32
|
+
<OutlineButton title={titleLeftButton} onClick={onClickLeftButton} size='small'/>
|
|
33
|
+
</div>
|
|
34
|
+
}
|
|
35
|
+
{
|
|
36
|
+
titleRightButton &&
|
|
37
|
+
<div className='m-1'>
|
|
38
|
+
<OutlineButton title={titleRightButton} onClick={onClickRightButton} size='small'/>
|
|
39
|
+
</div>
|
|
40
|
+
}
|
|
20
41
|
</div>
|
|
21
42
|
</div>
|
|
22
43
|
)
|
|
@@ -28,7 +28,7 @@ const OutlineButton = ({
|
|
|
28
28
|
className={`
|
|
29
29
|
${(isPressed && isActive) ? 'bg-white text-primary500 border-2 border-primary500 text-primary500' : (isActive ? 'bg-white border-2 border-primary500 text-primary500' : 'bg-neutral30 text-neutral80 cursor-default')}
|
|
30
30
|
${type === "full" && "w-full"}
|
|
31
|
-
${size === "small" && "text-sm h-7"}
|
|
31
|
+
${size === "small" && "text-sm h-7 w-32"}
|
|
32
32
|
${size === "medium" && "text-md h-8"}
|
|
33
33
|
${size === "large" && "text-lg h-10"}
|
|
34
34
|
${size === "very large" && "text-xl h-12"}
|
|
@@ -2,16 +2,24 @@ import React, { useState, useEffect, useRef } from 'react';
|
|
|
2
2
|
import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
|
|
3
3
|
|
|
4
4
|
const DropdownText = ({
|
|
5
|
-
options = [
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
options = [
|
|
6
|
+
{
|
|
7
|
+
option: "Name 1",
|
|
8
|
+
value: "Value 1"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
option: "Name 2",
|
|
12
|
+
value: "Value 2"
|
|
13
|
+
}
|
|
14
|
+
],
|
|
15
|
+
onSelect,
|
|
10
16
|
title = "Title Dropdown",
|
|
11
|
-
placeholder = "
|
|
17
|
+
placeholder = "Placeholder",
|
|
12
18
|
isRequired = true,
|
|
19
|
+
currentOption,
|
|
13
20
|
}) => {
|
|
14
21
|
const [isOpen, setIsOpen] = useState(false);
|
|
22
|
+
const [selectedOption, setSelectedOption] = useState(null);
|
|
15
23
|
const dropdownRef = useRef(null);
|
|
16
24
|
|
|
17
25
|
useEffect(() => {
|
|
@@ -34,11 +42,13 @@ const DropdownText = ({
|
|
|
34
42
|
setIsOpen(!isOpen);
|
|
35
43
|
};
|
|
36
44
|
|
|
37
|
-
const handleOptionClick = (value) => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
45
|
+
const handleOptionClick = (option, value) => {
|
|
46
|
+
console.log("ini option", option)
|
|
47
|
+
console.log("ini value", value)
|
|
48
|
+
setSelectedOption(option);
|
|
49
|
+
setIsOpen(false);
|
|
50
|
+
if (onSelect) {
|
|
51
|
+
onSelect(value);
|
|
42
52
|
}
|
|
43
53
|
};
|
|
44
54
|
|
|
@@ -59,7 +69,7 @@ const DropdownText = ({
|
|
|
59
69
|
className="flex items-center w-full py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden"
|
|
60
70
|
onClick={handleToggleDropdownText}
|
|
61
71
|
>
|
|
62
|
-
<span className='flex-grow overflow-hidden'>{
|
|
72
|
+
<span className='flex-grow overflow-hidden'>{selectedOption ? selectedOption : currentOption ? currentOption : placeholder}</span>
|
|
63
73
|
<span className='ml-2'>
|
|
64
74
|
{isOpen ? <PiCaretUp size={16} className='text-neutral300' /> : <PiCaretDown size={16} className='text-neutral300' />}
|
|
65
75
|
</span>
|
|
@@ -75,24 +85,19 @@ const DropdownText = ({
|
|
|
75
85
|
aria-labelledby='options-menu'
|
|
76
86
|
>
|
|
77
87
|
<div className='px-1 py-2 max-h-40 overflow-y-auto'>
|
|
78
|
-
{
|
|
79
|
-
options.length == 0 ?
|
|
88
|
+
{options.map((option, index) => (
|
|
80
89
|
<div
|
|
90
|
+
key={index}
|
|
81
91
|
className='hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md'
|
|
92
|
+
onClick={() => {
|
|
93
|
+
if (option.option !== "Loading...") {
|
|
94
|
+
handleOptionClick(option.option, option.value)
|
|
95
|
+
}
|
|
96
|
+
}}
|
|
82
97
|
>
|
|
83
|
-
<p className='text-sm text-black'>
|
|
98
|
+
<p className='text-sm text-black'>{option.option}</p>
|
|
84
99
|
</div>
|
|
85
|
-
|
|
86
|
-
options.map((value, index) => (
|
|
87
|
-
<div
|
|
88
|
-
key={index}
|
|
89
|
-
className='hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md'
|
|
90
|
-
onClick={() => handleOptionClick(value)}
|
|
91
|
-
>
|
|
92
|
-
<p className='text-sm text-black'>{value.name}</p>
|
|
93
|
-
</div>
|
|
94
|
-
))
|
|
95
|
-
}
|
|
100
|
+
))}
|
|
96
101
|
</div>
|
|
97
102
|
</div>
|
|
98
103
|
)}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState, useEffect, useRef } from 'react';
|
|
2
|
-
import { PiFunnel, PiCaretRight } from 'react-icons/pi';
|
|
2
|
+
import { PiFunnel, PiCaretRight, PiX } from 'react-icons/pi';
|
|
3
3
|
|
|
4
4
|
const FilterDropdown = ({
|
|
5
5
|
options = [
|
|
@@ -71,6 +71,8 @@ const FilterDropdown = ({
|
|
|
71
71
|
role:[],
|
|
72
72
|
status:[]
|
|
73
73
|
})
|
|
74
|
+
setShowFilterMenu(false)
|
|
75
|
+
setShowFilterSubmenu(false)
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
const buttonText =
|
|
@@ -86,13 +88,15 @@ const FilterDropdown = ({
|
|
|
86
88
|
<div className='flex'>
|
|
87
89
|
<button
|
|
88
90
|
type='button'
|
|
89
|
-
className="flex items-center w-60
|
|
90
|
-
onClick={() => setShowFilterMenu(!showFilterMenu)}
|
|
91
|
+
className="flex items-center w-60 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
|
|
91
92
|
>
|
|
92
|
-
<span className='flex-grow'>{buttonText}</span>
|
|
93
|
+
<span className='flex-grow py-2.5' onClick={() => setShowFilterMenu(!showFilterMenu)}>{buttonText}</span>
|
|
93
94
|
{
|
|
94
95
|
dataFilterCheckbox.length + dataFilterStatus.length > 0 ?
|
|
95
|
-
<
|
|
96
|
+
<span className='ml-2' onClick={handleResetFilter}>
|
|
97
|
+
<PiX size={16} className='text-neutral300' />
|
|
98
|
+
</span>
|
|
99
|
+
:
|
|
96
100
|
<span className='ml-2'>
|
|
97
101
|
<PiFunnel size={16} className='text-neutral300' />
|
|
98
102
|
</span>
|
|
@@ -132,7 +136,7 @@ const FilterDropdown = ({
|
|
|
132
136
|
</div>
|
|
133
137
|
{
|
|
134
138
|
showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu &&
|
|
135
|
-
<div className=
|
|
139
|
+
<div className={`ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-32 cursor-pointer ${option.type == "checkbox" ? "top-0" : "top-16"}`}>
|
|
136
140
|
{
|
|
137
141
|
option.submenu.map((submenu, subIndex) => (
|
|
138
142
|
<div key={subIndex} className='flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5'
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import OutlineButton from '../button/outlinebutton';
|
|
3
|
+
import PrimaryButton from '../button/primarybutton';
|
|
4
|
+
|
|
5
|
+
const Footer = ({
|
|
6
|
+
titleLeftButton = "Cancel",
|
|
7
|
+
titleRightButton = "Submit",
|
|
8
|
+
isActiveLeftButton,
|
|
9
|
+
isActiveRightButton,
|
|
10
|
+
onClickLeftButton,
|
|
11
|
+
onClickRightButton
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<div className='sticky bottom-0 flex w-full justify-end items-center py-1 px-6 bg-white'>
|
|
15
|
+
<div className='flex items-center'>
|
|
16
|
+
<div className='m-1'>
|
|
17
|
+
<OutlineButton
|
|
18
|
+
title={titleLeftButton}
|
|
19
|
+
onClick={onClickLeftButton}
|
|
20
|
+
isActive={isActiveLeftButton}
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
<div className='m-1'>
|
|
24
|
+
<PrimaryButton
|
|
25
|
+
title={titleRightButton}
|
|
26
|
+
onClick={onClickRightButton}
|
|
27
|
+
isActive={isActiveRightButton}
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export default Footer;
|
|
@@ -55,7 +55,7 @@ const SearchDropdown = ({
|
|
|
55
55
|
onClick={() => handleClickOption(option, valueOptions[index])}
|
|
56
56
|
>
|
|
57
57
|
<div className='flex justify-between'>
|
|
58
|
-
<p className='text-sm text-black
|
|
58
|
+
<p className='text-sm text-black'>{option}</p>
|
|
59
59
|
</div>
|
|
60
60
|
</div>
|
|
61
61
|
))
|
|
@@ -14,7 +14,7 @@ const Switch = ({ onChange, checked, isEdit }) => {
|
|
|
14
14
|
>
|
|
15
15
|
<div
|
|
16
16
|
className={`absolute flex items-center justify-center w-6 h-6 transition-all duration-300 ${
|
|
17
|
-
checked ? '
|
|
17
|
+
checked ? 'right-0' : 'left-0'}`}
|
|
18
18
|
>
|
|
19
19
|
<div className={`w-4 h-4 bg-white rounded-full shadow-md transition-all`}></div>
|
|
20
20
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
-
import { PiEyeClosedLight,
|
|
2
|
+
import { PiEyeClosedLight, PiEye, PiInfo } from 'react-icons/pi';
|
|
3
3
|
|
|
4
4
|
const TextInput = ({
|
|
5
5
|
title = "",
|
|
@@ -11,7 +11,7 @@ const TextInput = ({
|
|
|
11
11
|
mode = "default",
|
|
12
12
|
isRequired = true,
|
|
13
13
|
value,
|
|
14
|
-
|
|
14
|
+
onChangeInput
|
|
15
15
|
}) => {
|
|
16
16
|
const [isFocused, setIsFocused] = useState(false);
|
|
17
17
|
const [showPassword, setShowPassword] = useState(false);
|
|
@@ -42,7 +42,7 @@ const TextInput = ({
|
|
|
42
42
|
<div className="relative rounded-md">
|
|
43
43
|
{leftIcon && (
|
|
44
44
|
<span className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
45
|
-
<
|
|
45
|
+
<PiInfo size={16} className={`
|
|
46
46
|
${mode === "primary" && "text-black"}
|
|
47
47
|
${mode === "disable" && "text-neutral50"}
|
|
48
48
|
${mode === "danger" && "text-danger500"}
|
|
@@ -63,20 +63,20 @@ const TextInput = ({
|
|
|
63
63
|
placeholder={placeholder}
|
|
64
64
|
disabled={mode === "disable"}
|
|
65
65
|
value={value}
|
|
66
|
-
onChange={
|
|
66
|
+
onChange={onChangeInput}
|
|
67
67
|
onFocus={handleFocus}
|
|
68
68
|
onBlur={handleBlur}
|
|
69
69
|
/>
|
|
70
70
|
|
|
71
71
|
{type === 'password' && (
|
|
72
72
|
<span className="absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer" onClick={handleTogglePasswordVisibility}>
|
|
73
|
-
{showPassword ? <
|
|
73
|
+
{showPassword ? <PiEye size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} /> : <PiEyeClosedLight size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />}
|
|
74
74
|
</span>
|
|
75
75
|
)}
|
|
76
76
|
|
|
77
77
|
{rightIcon && (
|
|
78
78
|
<span className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
|
|
79
|
-
<
|
|
79
|
+
<PiInfo size={16} className={`
|
|
80
80
|
${mode === "primary" && "text-black"}
|
|
81
81
|
${mode === "disable" && "text-neutral50"}
|
|
82
82
|
${mode === "danger" && "text-danger500"}
|
|
@@ -88,8 +88,10 @@ const TextInput = ({
|
|
|
88
88
|
{footer && (
|
|
89
89
|
<div className='mt-1'>
|
|
90
90
|
{mode === "danger" ? (
|
|
91
|
-
<div className='flex
|
|
92
|
-
<
|
|
91
|
+
<div className='flex'>
|
|
92
|
+
<div>
|
|
93
|
+
<PiInfo size={16} className='text-danger500' />
|
|
94
|
+
</div>
|
|
93
95
|
<p className="text-danger500 text-xs ml-1">{footer}</p>
|
|
94
96
|
</div>
|
|
95
97
|
) : (
|
package/src/index.js
CHANGED
|
@@ -63,8 +63,9 @@ import ModalDeposit from './components/modal/modalDeposit';
|
|
|
63
63
|
import CellModelOne from './components/table/listTable/cellmodelone';
|
|
64
64
|
import SearchDropdown from './components/searchdropdown';
|
|
65
65
|
import FilterDropdown from './components/filter/filterDropdown';
|
|
66
|
+
import Footer from './components/footer';
|
|
66
67
|
|
|
67
68
|
|
|
68
|
-
export {CellModelOne, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
69
|
+
export {Footer, CellModelOne, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
69
70
|
SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
|
|
70
71
|
DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
|
package/src/templates/index.js
CHANGED
|
@@ -729,7 +729,13 @@ const Templates = () => {
|
|
|
729
729
|
<div className='m-9'></div>
|
|
730
730
|
<p className='text-black font-semibold text-xl text-left py-1'>Alert</p>
|
|
731
731
|
<div className='w-full'>
|
|
732
|
-
<Alert title='
|
|
732
|
+
<Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.'/>
|
|
733
|
+
</div>
|
|
734
|
+
<div className='w-full py-3'>
|
|
735
|
+
<Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButton="Add Client" onClickLeftButton={() => console.log("left button clicked")}/>
|
|
736
|
+
</div>
|
|
737
|
+
<div className='w-full py-3'>
|
|
738
|
+
<Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButton="Add Client" titleRightButton="Add Division" onClickLeftButton={() => console.log("left button clicked")} onClickRightButton={() => console.log("right button clicked")}/>
|
|
733
739
|
</div>
|
|
734
740
|
|
|
735
741
|
<div className='m-9'></div>
|