esewa-ui-library 1.0.2 → 1.0.4
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/README.md +128 -13
- package/dist/@types/index.d.ts +8 -5
- package/dist/index.js +8 -9
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +8 -9
- package/dist/index.modern.js.map +1 -1
- package/dist/services/eSewaService.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -108,15 +108,25 @@ export default App;
|
|
|
108
108
|
|
|
109
109
|
The `ESewaAlertCard` component is customizable app bar for your eSewa Mini App with support for back, title, and action icons, making navigation and interactions seamless.
|
|
110
110
|
|
|
111
|
+
Use useESewaDataProvider to set title for appbar.
|
|
112
|
+
|
|
111
113
|
### Usage:
|
|
112
114
|
|
|
113
115
|
```tsx
|
|
114
|
-
import { ESewaAppBar } from 'esewa-ui-library';
|
|
116
|
+
import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
|
|
115
117
|
|
|
116
118
|
const App = () => {
|
|
119
|
+
const { updateData } = useESewaDataProvider();
|
|
120
|
+
|
|
121
|
+
useEffect(() => {
|
|
122
|
+
updateData({
|
|
123
|
+
title: "Merchant Product Form",
|
|
124
|
+
});
|
|
125
|
+
}, []);
|
|
126
|
+
|
|
117
127
|
return (
|
|
118
128
|
<ESewaAppBar
|
|
119
|
-
|
|
129
|
+
icon="icon-es-arrow-left"
|
|
120
130
|
titleposition="left"
|
|
121
131
|
onBackIconClick={() => console.log('Back icon clicked')}
|
|
122
132
|
onTitleClick={() => console.log('Title clicked')}
|
|
@@ -582,17 +592,19 @@ const App = () => {
|
|
|
582
592
|
<div>
|
|
583
593
|
<button onClick={openDialog}>Open Dialog</button>
|
|
584
594
|
|
|
585
|
-
|
|
586
|
-
isOpen
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
595
|
+
{
|
|
596
|
+
isOpen && (<ESewaDialog
|
|
597
|
+
isOpen={isOpen}
|
|
598
|
+
title="Sample Dialog"
|
|
599
|
+
okText="Confirm"
|
|
600
|
+
cancelText="Cancel"
|
|
601
|
+
onOk={handleOk}
|
|
602
|
+
onCancel={closeDialog}
|
|
603
|
+
position="center"
|
|
604
|
+
>
|
|
605
|
+
<p>Dialog content goes here.</p>
|
|
606
|
+
</ESewaDialog>)
|
|
607
|
+
}
|
|
596
608
|
</div>
|
|
597
609
|
);
|
|
598
610
|
};
|
|
@@ -1487,7 +1499,110 @@ export default TooltipExample
|
|
|
1487
1499
|
### Providers
|
|
1488
1500
|
|
|
1489
1501
|
- **ThemeProvider**: `ThemeProvider`
|
|
1502
|
+
|
|
1503
|
+
Wrap your component with this provider to apply theme.
|
|
1504
|
+
|
|
1505
|
+
```tsx
|
|
1506
|
+
import { StrictMode } from 'react'
|
|
1507
|
+
import { createRoot } from 'react-dom/client'
|
|
1508
|
+
import { ESewaThemeProvider } from 'esewa-ui-library'
|
|
1509
|
+
import App from './App.tsx'
|
|
1510
|
+
|
|
1511
|
+
createRoot(document.getElementById('root')!).render(
|
|
1512
|
+
<StrictMode>
|
|
1513
|
+
<ESewaThemeProvider>
|
|
1514
|
+
<App />
|
|
1515
|
+
</ESewaThemeProvider>
|
|
1516
|
+
</StrictMode>,
|
|
1517
|
+
)
|
|
1518
|
+
|
|
1519
|
+
```
|
|
1520
|
+
|
|
1521
|
+
In your page
|
|
1522
|
+
|
|
1523
|
+
```tsx
|
|
1524
|
+
import { useEffect, useState } from "react";
|
|
1525
|
+
import {
|
|
1526
|
+
MoonIcon,
|
|
1527
|
+
SunIcon,
|
|
1528
|
+
} from "@heroicons/react/24/outline";
|
|
1529
|
+
|
|
1530
|
+
const [darkMode, setDarkMode] = useState<boolean>(
|
|
1531
|
+
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
1532
|
+
);
|
|
1533
|
+
|
|
1534
|
+
const handleThemeToggle = () => {
|
|
1535
|
+
setDarkMode((prevMode) => !prevMode);
|
|
1536
|
+
};
|
|
1537
|
+
|
|
1538
|
+
useEffect(() => {
|
|
1539
|
+
const theme = darkMode ? 'dark' : 'light';
|
|
1540
|
+
document.documentElement.setAttribute('data-theme', theme);
|
|
1541
|
+
}, [darkMode]);
|
|
1542
|
+
|
|
1543
|
+
<button
|
|
1544
|
+
onClick={handleThemeToggle}
|
|
1545
|
+
>
|
|
1546
|
+
{darkMode ? (
|
|
1547
|
+
<SunIcon className="h-6 w-6" />
|
|
1548
|
+
) : (
|
|
1549
|
+
<MoonIcon className="h-6 w-6" />
|
|
1550
|
+
)}
|
|
1551
|
+
</button>
|
|
1552
|
+
|
|
1553
|
+
```
|
|
1554
|
+
|
|
1490
1555
|
- **ESewaProvider**: `ESewaProvider`
|
|
1556
|
+
|
|
1557
|
+
Wrap your component with this provider.
|
|
1558
|
+
|
|
1559
|
+
```tsx
|
|
1560
|
+
import { StrictMode } from 'react'
|
|
1561
|
+
import { createRoot } from 'react-dom/client'
|
|
1562
|
+
import { ESewaProvider } from 'esewa-ui-library'
|
|
1563
|
+
import App from './App.tsx'
|
|
1564
|
+
|
|
1565
|
+
createRoot(document.getElementById('root')!).render(
|
|
1566
|
+
<StrictMode>
|
|
1567
|
+
<ESewaProvider>
|
|
1568
|
+
<App />
|
|
1569
|
+
</ESewaProvider>
|
|
1570
|
+
</StrictMode>,
|
|
1571
|
+
)
|
|
1572
|
+
|
|
1573
|
+
```
|
|
1574
|
+
|
|
1575
|
+
then you can use useESewaDataProvider
|
|
1576
|
+
|
|
1577
|
+
```tsx
|
|
1578
|
+
import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
|
|
1579
|
+
|
|
1580
|
+
const App = () => {
|
|
1581
|
+
const { updateData } = useESewaDataProvider();
|
|
1582
|
+
|
|
1583
|
+
useEffect(() => {
|
|
1584
|
+
updateData({
|
|
1585
|
+
title: "Merchant Product Form",
|
|
1586
|
+
});
|
|
1587
|
+
}, []);
|
|
1588
|
+
|
|
1589
|
+
return (
|
|
1590
|
+
<ESewaAppBar
|
|
1591
|
+
icon="icon-es-arrow-left"
|
|
1592
|
+
titleposition="left"
|
|
1593
|
+
onBackIconClick={() => console.log('Back icon clicked')}
|
|
1594
|
+
onTitleClick={() => console.log('Title clicked')}
|
|
1595
|
+
onActionIconClick={() => console.log('Action icon clicked')}
|
|
1596
|
+
actionIcon="icon-settings"
|
|
1597
|
+
/>
|
|
1598
|
+
);
|
|
1599
|
+
};
|
|
1600
|
+
|
|
1601
|
+
export default App;
|
|
1602
|
+
|
|
1603
|
+
```
|
|
1604
|
+
|
|
1605
|
+
|
|
1491
1606
|
- **ESewaPaymentProvider**: `ESewaPaymentProvider`
|
|
1492
1607
|
|
|
1493
1608
|
# Services
|
package/dist/@types/index.d.ts
CHANGED
|
@@ -46,16 +46,19 @@ declare global {
|
|
|
46
46
|
VALIDATE_TRANSACTION_CALLBACK?: Callback | null;
|
|
47
47
|
};
|
|
48
48
|
webkit: {
|
|
49
|
-
requestApp: (data: any) => void;
|
|
50
|
-
receiveFromApp: (data: any) => void;
|
|
51
49
|
messageHandlers: {
|
|
52
50
|
iOSNative: {
|
|
53
|
-
|
|
51
|
+
postMessage: (data: any) => void;
|
|
52
|
+
INIT_APP_CALLBACK?: Callback | null;
|
|
53
|
+
REQUEST_PAYMENT_CALLBACK?: Callback | null;
|
|
54
|
+
USER_DETAIL_ACCESS_CALLBACK?: Callback | null;
|
|
55
|
+
MEDIA_ACCESS_CALLBACK?: Callback | null;
|
|
56
|
+
LOCATION_ACCESS_CALLBACK?: Callback | null;
|
|
57
|
+
VALIDATE_TRANSACTION_CALLBACK?: Callback | null;
|
|
54
58
|
};
|
|
55
59
|
};
|
|
56
|
-
receiveDataFromWeb: (data: any) => void;
|
|
57
|
-
receiveDataFromApp: (data: any) => void;
|
|
58
60
|
};
|
|
59
61
|
}
|
|
60
62
|
function getDataFromMiniApp(e: any): void;
|
|
61
63
|
}
|
|
64
|
+
export declare type CallbackKey = keyof Window['Android'] | 'INIT_APP_CALLBACK' | 'REQUEST_PAYMENT_CALLBACK' | 'USER_DETAIL_ACCESS_CALLBACK' | 'MEDIA_ACCESS_CALLBACK' | 'LOCATION_ACCESS_CALLBACK' | 'VALIDATE_TRANSACTION_CALLBACK';
|
package/dist/index.js
CHANGED
|
@@ -186,7 +186,7 @@ var StyledAppBar = styled__default.header.attrs(function (_ref) {
|
|
|
186
186
|
return {
|
|
187
187
|
titleposition: titleposition
|
|
188
188
|
};
|
|
189
|
-
})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n .e-app-bar {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n background-color: var(--appbar-bg-top);\n padding: 7px 12px;\n position:
|
|
189
|
+
})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n\n .e-app-bar {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n background-color: var(--appbar-bg-top);\n padding: 7px 12px;\n position: relative;\n height: 42px;\n // left: 0;\n // right: 0;\n gap: var(--values-value-8);\n\n &--nav-icon, &--close-icon {\n padding: 7px;\n color: var(--white);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* Title section */\n &--title-wrapper {\n display: flex;\n justify-content: ", ";\n align-items: center;\n width: 100%; // Ensures the title section takes full width to apply the alignment\n }\n\n &--title {\n display: flex;\n align-items: center;\n gap: 12px;\n overflow: hidden;\n // display: -webkit-box;\n // -webkit-line-clamp: 1;\n // line-clamp: 1;\n // -webkit-box-orient: vertical;\n }\n\n &--title-image img {\n width: 32px;\n object-fit: cover;\n // margin-left: -32px;\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--grid-borderradius-border-radius-xs);\n }\n\n &--title-label {\n color: var(--white);\n letter-spacing: 0.4px;\n font-size: var(--values-value-16);\n font-weight: 500;\n }\n }\n"])), function (props) {
|
|
190
190
|
return props.titleposition === 'left' ? 'flex-start' : props.titleposition === 'right' ? 'flex-end' : 'center';
|
|
191
191
|
});
|
|
192
192
|
var ESewaAppBar = function ESewaAppBar(_ref2) {
|
|
@@ -253,7 +253,7 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
|
|
|
253
253
|
};
|
|
254
254
|
|
|
255
255
|
var _templateObject$4;
|
|
256
|
-
var StyledCheckBox = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n .container {\n display: flex;\n align-items: flex-start;\n position: relative;\n padding-left: 24px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n .checkmark {\n position: absolute;\n top: 8%;\n left: 0;\n height: 16px;\n width: 16px;\n // transform: translateY(-50%);\n background-color: var(--gray-50);\n border-radius: var(--grid-borderradius-border-radius-xxxs);\n }\n\n .container
|
|
256
|
+
var StyledCheckBox = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n .container {\n display: flex;\n align-items: flex-start;\n position: relative;\n padding-left: 24px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n .checkmark {\n position: absolute;\n top: 8%;\n left: 0;\n height: 16px;\n width: 16px;\n // transform: translateY(-50%);\n background-color: var(--gray-50);\n border-radius: var(--grid-borderradius-border-radius-xxxs);\n }\n\n .container input:checked ~ .checkmark {\n background-color: var(--primary-500);\n }\n\n .checkmark:after {\n content: '';\n position: absolute;\n display: none;\n }\n\n /* Show the checkmark when checked */\n .container input:checked ~ .checkmark:after {\n display: block;\n content: '\uEA58';\n }\n\n /* Style the checkmark/indicator */\n .container .checkmark:after {\n font-family: 'esewa-font';\n content: '';\n left: 1px;\n top: -4px;\n width: 4px;\n height: 8px;\n color:var(--white);\n }\n\n .container.disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .container input:disabled ~ .checkmark {\n background-color: var(--gray-200);\n }\n"])));
|
|
257
257
|
var ESewaCheckbox = function ESewaCheckbox(_ref) {
|
|
258
258
|
var label = _ref.label,
|
|
259
259
|
className = _ref.className,
|
|
@@ -662,7 +662,7 @@ var ESewaInputFeildTextArea = React.forwardRef(function (_ref, ref) {
|
|
|
662
662
|
});
|
|
663
663
|
|
|
664
664
|
var _templateObject$c;
|
|
665
|
-
var StyledMultiSelect = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n .multi-select {\n position: relative;\n width: auto;\n\n &__toggle {\n border: 1px solid var(--default-input-border);\n padding: var(--values-value-10) var(--values-value-12);\n cursor: pointer;\n border-radius: 8px;\n background-color: var(--input-bg);\n transition: border-color 0.2s;\n user-select: none;\n color: var(--input-placeholder);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n height: 48px;\n display: flex;\n align-items: center;\n &:hover {\n border-color: var(--input-bg);\n }\n }\n\n &__dropdown {\n position: absolute;\n top: 52px;\n left: 0;\n right: 0;\n border-radius: 8px;\n background-color: var(--card-bg);\n max-height: 200px;\n overflow-y: auto;\n z-index: 1000;\n box-shadow: var(--shadow--2--umbra);\n border: 1px solid var(--default-input-border);\n padding: 8px 0;\n animation: fadeIn 0.2s ease-in-out;\n min-width: 100%;\n }\n\n &__dropdown-inner {\n padding: 8px;\n width: 100%;\n box-sizing: border-box;\n }\n\n &__search {\n width: 100%;\n padding: 8px;\n border-radius:
|
|
665
|
+
var StyledMultiSelect = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n .multi-select {\n position: relative;\n width: auto;\n\n &__toggle {\n border: 1px solid var(--default-input-border);\n padding: var(--values-value-10) var(--values-value-12);\n cursor: pointer;\n border-radius: 8px;\n background-color: var(--input-bg);\n transition: border-color 0.2s;\n user-select: none;\n color: var(--input-placeholder);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n height: 48px;\n display: flex;\n align-items: center;\n &:hover {\n border-color: var(--input-bg);\n }\n }\n\n &__dropdown {\n position: absolute;\n top: 52px;\n left: 0;\n right: 0;\n border-radius: 8px;\n background-color: var(--card-bg);\n max-height: 200px;\n overflow-y: auto;\n z-index: 1000;\n box-shadow: var(--shadow--2--umbra);\n border: 1px solid var(--default-input-border);\n padding: 8px 0;\n animation: fadeIn 0.2s ease-in-out;\n min-width: 100%;\n }\n\n &__dropdown-inner {\n padding: 8px;\n width: 100%;\n box-sizing: border-box;\n }\n\n &__search {\n width: 100%;\n padding: 8px;\n border-radius: 8px;\n margin-bottom: 5px;\n border: 1px solid var(--default-input-border);\n background-color: var(--input-bg);\n transition: border-color 0.2s;\n user-select: none;\n color: var(--input-placeholder);\n box-sizing: border-box;\n &::placeholder {\n color: var(--input-placeholder);\n letter-spacing: -0.5px;\n font-weight: 500;\n opacity: 1;\n }\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n &.error {\n border-color: var(--danger);\n outline: none;\n }\n }\n\n &__option {\n display: flex;\n align-items: center;\n padding: 8px;\n cursor: pointer;\n\n &:hover {\n background-color: var(--success-bg-light);\n border-radius: 8px;\n }\n\n input {\n font-family: 'esewa-font';\n position: relative;\n margin-right: 8px;\n\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 4px;\n background-color: var(--default-input-border);\n border: 2px solid var(--default-input-border);\n transition: background-color 0.3s ease, border-color 0.3s ease;\n }\n\n input:checked {\n background-color: var(--primary);\n border-color: var(--primary);\n }\n\n input:checked::after {\n content: '\uEA58';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 10px;\n color: white;\n }\n }\n\n &__no-options {\n padding: 10px;\n color: #999;\n text-align: center;\n }\n }\n"])));
|
|
666
666
|
var ESewaMultiSelect = function ESewaMultiSelect(_ref) {
|
|
667
667
|
var options = _ref.options,
|
|
668
668
|
onChange = _ref.onChange,
|
|
@@ -2738,7 +2738,7 @@ var ESewaRating = function ESewaRating(_ref) {
|
|
|
2738
2738
|
};
|
|
2739
2739
|
return React__default.createElement(StyledRating, null, React__default.createElement("div", {
|
|
2740
2740
|
className: "rating " + className
|
|
2741
|
-
},
|
|
2741
|
+
}, renderStars(), count && React__default.createElement("span", {
|
|
2742
2742
|
className: 'rating-count'
|
|
2743
2743
|
}, "(", count, ")")));
|
|
2744
2744
|
};
|
|
@@ -7683,7 +7683,7 @@ var CONNECT_APP = function CONNECT_APP(data) {
|
|
|
7683
7683
|
if (isiOS) {
|
|
7684
7684
|
var _window$webkit;
|
|
7685
7685
|
if ((_window$webkit = window.webkit) !== null && _window$webkit !== void 0 && _window$webkit.messageHandlers.iOSNative) {
|
|
7686
|
-
window.webkit.messageHandlers.iOSNative.
|
|
7686
|
+
window.webkit.messageHandlers.iOSNative.postMessage(data);
|
|
7687
7687
|
} else {
|
|
7688
7688
|
console.warn('iOS interface not available');
|
|
7689
7689
|
}
|
|
@@ -7691,11 +7691,10 @@ var CONNECT_APP = function CONNECT_APP(data) {
|
|
|
7691
7691
|
};
|
|
7692
7692
|
var requestFromMiniApp = function requestFromMiniApp(data, callbackKey, callback) {
|
|
7693
7693
|
var _window$webkit2, _window$webkit2$messa;
|
|
7694
|
-
if (window.Android) {
|
|
7694
|
+
if (window.Android && callbackKey in window.Android) {
|
|
7695
7695
|
window.Android[callbackKey] = callback;
|
|
7696
|
-
} else if ((_window$webkit2 = window.webkit) !== null && _window$webkit2 !== void 0 && (_window$webkit2$messa = _window$webkit2.messageHandlers) !== null && _window$webkit2$messa !== void 0 && _window$webkit2$messa.iOSNative) {
|
|
7697
|
-
window.
|
|
7698
|
-
window.miniAppResponse[callbackKey] = callback;
|
|
7696
|
+
} else if ((_window$webkit2 = window.webkit) !== null && _window$webkit2 !== void 0 && (_window$webkit2$messa = _window$webkit2.messageHandlers) !== null && _window$webkit2$messa !== void 0 && _window$webkit2$messa.iOSNative && callbackKey in window.webkit.messageHandlers.iOSNative) {
|
|
7697
|
+
window.webkit.messageHandlers.iOSNative[callbackKey] = callback;
|
|
7699
7698
|
}
|
|
7700
7699
|
CONNECT_APP(JSON.stringify(data));
|
|
7701
7700
|
};
|