@rahmatsaputra-my-id/react-js-library 0.0.64 → 0.0.65
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/components/RadioButtonMultiple/RadioButtonMultiple.component.d.ts +4 -0
- package/dist/components/{RadioButton/RadioButton.types.d.ts → RadioButtonMultiple/RadioButtonMultiple.types.d.ts} +1 -1
- package/dist/components/RadioButtonMultiple/index.d.ts +2 -0
- package/dist/components/RadioButtonSingle/RadioButtonSingle.component.d.ts +4 -0
- package/dist/components/RadioButtonSingle/RadioButtonSingle.component.styles.d.ts +29 -0
- package/dist/components/RadioButtonSingle/RadioButtonSingle.types.d.ts +7 -0
- package/dist/components/RadioButtonSingle/index.d.ts +2 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.es.js +79 -49
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +80 -49
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/RadioButton/RadioButton.component.d.ts +0 -4
- package/dist/components/RadioButton/SingleRadioButton.component.d.ts +0 -4
- package/dist/components/RadioButton/index.d.ts +0 -2
- /package/dist/components/{RadioButton/RadioButton.styles.d.ts → RadioButtonMultiple/RadioButtonMultiple.component.styles.d.ts} +0 -0
|
@@ -5,7 +5,7 @@ export interface SingleRadioButtonProps {
|
|
|
5
5
|
handleChange: (value: string | number) => void;
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
}
|
|
8
|
-
export interface
|
|
8
|
+
export interface RadioButtonMultipleProps {
|
|
9
9
|
label: string;
|
|
10
10
|
options: Array<{
|
|
11
11
|
[key: string]: any;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export declare const styles: {
|
|
2
|
+
singleRadioContainer: {
|
|
3
|
+
display: string;
|
|
4
|
+
marginBottom: string;
|
|
5
|
+
flexDirection: string;
|
|
6
|
+
};
|
|
7
|
+
outterBullet: {
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
borderRadius: number;
|
|
11
|
+
justifyContent: string;
|
|
12
|
+
alignItems: string;
|
|
13
|
+
backgroundColor: "#FFFFFF" | undefined;
|
|
14
|
+
marginRight: number;
|
|
15
|
+
border: string;
|
|
16
|
+
};
|
|
17
|
+
innerBulletActive: {
|
|
18
|
+
width: number;
|
|
19
|
+
height: number;
|
|
20
|
+
borderRadius: number;
|
|
21
|
+
backgroundColor: "#1A1A1A" | undefined;
|
|
22
|
+
};
|
|
23
|
+
innerBulletNotActive: {
|
|
24
|
+
width: number;
|
|
25
|
+
height: number;
|
|
26
|
+
borderRadius: number;
|
|
27
|
+
backgroundColor: "#FFFFFF" | undefined;
|
|
28
|
+
};
|
|
29
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -15,7 +15,8 @@ export * from './components/MultipleImageInput';
|
|
|
15
15
|
export * from './components/NoRecord';
|
|
16
16
|
export * from './components/PopUp';
|
|
17
17
|
export * from './components/PreviewPhoto';
|
|
18
|
-
export * from './components/
|
|
18
|
+
export * from './components/RadioButtonMultiple';
|
|
19
|
+
export * from './components/RadioButtonSingle';
|
|
19
20
|
export * from './components/ScannerQR';
|
|
20
21
|
export * from './components/SearchBox';
|
|
21
22
|
export * from './components/Swipeable';
|
package/dist/index.es.js
CHANGED
|
@@ -93,7 +93,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
93
93
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
94
94
|
};
|
|
95
95
|
|
|
96
|
-
var styles$
|
|
96
|
+
var styles$l = {
|
|
97
97
|
backdrop: {
|
|
98
98
|
position: 'fixed',
|
|
99
99
|
top: 0,
|
|
@@ -186,10 +186,10 @@ var BottomSheet = function (_a) {
|
|
|
186
186
|
}, [visible, onClose]);
|
|
187
187
|
if (!visible)
|
|
188
188
|
return null;
|
|
189
|
-
return ReactDOM.createPortal(jsx("div", __assign({ style: styles$
|
|
189
|
+
return ReactDOM.createPortal(jsx("div", __assign({ style: styles$l.backdrop, onClick: onClose }, { children: jsxs("div", __assign({ style: __assign(__assign({}, styles$l.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxs("div", __assign({ style: styles$l.header }, { children: [jsx("span", __assign({ style: styles$l.title }, { children: title })), jsx("button", __assign({ style: styles$l.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsx("div", __assign({ style: styles$l.content }, { children: children }))] })) })), document.body);
|
|
190
190
|
};
|
|
191
191
|
|
|
192
|
-
var styles$
|
|
192
|
+
var styles$k = {
|
|
193
193
|
content: {
|
|
194
194
|
display: 'flex',
|
|
195
195
|
cursor: 'pointer',
|
|
@@ -204,7 +204,7 @@ var TouchableOpacity = function (_a) {
|
|
|
204
204
|
onPress(event);
|
|
205
205
|
}
|
|
206
206
|
};
|
|
207
|
-
return (jsx("div", __assign({ onClick: handleOnPress, style: __assign(__assign(__assign({}, styles$
|
|
207
|
+
return (jsx("div", __assign({ onClick: handleOnPress, style: __assign(__assign(__assign({}, styles$k.content), style), { opacity: disabled ? 0.5 : 1, pointerEvents: disabled ? 'none' : 'auto' }) }, props, { children: children })));
|
|
208
208
|
};
|
|
209
209
|
|
|
210
210
|
var Colors = {
|
|
@@ -617,7 +617,7 @@ var CameraModal = function (_a) {
|
|
|
617
617
|
return ReactDOM.createPortal(jsxs("div", __assign({ style: cameraStyles$1.overlay }, { children: [capturedImage ? (jsxs(Fragment, { children: [jsx("img", { src: capturedImage, alt: "Captured", style: cameraStyles$1.previewImage }), jsx(TouchableOpacity, __assign({ onPress: handleUsePhoto, style: cameraStyles$1.floatingBottomButtons }, { children: jsx(View, __assign({ style: cameraStyles$1.captureButton }, { children: jsx(View, __assign({ style: cameraStyles$1.innerButton }, { children: jsx(Images, { src: Icons.send, style: cameraStyles$1.sendButton }) })) })) }))] })) : (jsxs(Fragment, { children: [jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, style: __assign(__assign({}, cameraStyles$1.video), { transform: isFrontCamera ? 'scaleX(-1)' : 'none' }) }), jsx("canvas", { ref: canvasRef, style: { display: 'none' } }), isCameraReady && (jsxs(Fragment, { children: [jsx(TouchableOpacity, __assign({ onPress: handleCapture, style: cameraStyles$1.floatingBottomButtons }, { children: jsx(View, __assign({ style: cameraStyles$1.captureButton }, { children: jsx(View, { style: cameraStyles$1.innerButton }) })) })), hasRearCamera && (jsx(TouchableOpacity, __assign({ onPress: toggleCamera, style: cameraStyles$1.floatingBottomRotateButtons }, { children: jsx(View, __assign({ style: cameraStyles$1.captureRotateButton }, { children: jsx(Images, { src: Icons.rotate, style: cameraStyles$1.rotateButton }) })) })))] }))] })), jsx("button", __assign({ onClick: handleOnPressClose, style: cameraStyles$1.closeButton }, { children: "\u00D7" }))] })), document.body);
|
|
618
618
|
};
|
|
619
619
|
|
|
620
|
-
var styles$
|
|
620
|
+
var styles$j = {
|
|
621
621
|
backdrop: {
|
|
622
622
|
position: 'fixed',
|
|
623
623
|
top: 0,
|
|
@@ -670,7 +670,7 @@ var styles$i = {
|
|
|
670
670
|
},
|
|
671
671
|
};
|
|
672
672
|
|
|
673
|
-
var styles$
|
|
673
|
+
var styles$i = {
|
|
674
674
|
h1: {
|
|
675
675
|
fontSize: 32,
|
|
676
676
|
},
|
|
@@ -849,7 +849,7 @@ var styles$h = {
|
|
|
849
849
|
|
|
850
850
|
var Text = function (_a) {
|
|
851
851
|
var _b = _a.bottom, bottom = _b === void 0 ? 0 : _b, _c = _a.center, center = _c === void 0 ? false : _c, children = _a.children, _d = _a.color, color = _d === void 0 ? Colors.black : _d, _e = _a.left, left = _e === void 0 ? 0 : _e, _f = _a.right, right = _f === void 0 ? 0 : _f, _g = _a.style, style = _g === void 0 ? {} : _g, _h = _a.top, top = _h === void 0 ? 0 : _h, _j = _a.type, type = _j === void 0 ? 'normal_16' : _j, props = __rest(_a, ["bottom", "center", "children", "color", "left", "right", "style", "top", "type"]);
|
|
852
|
-
return (jsx(Fragment, { children: jsx("p", __assign({ style: __assign(__assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, color: color, textAlign: center ? 'center' : 'left' }, styles$
|
|
852
|
+
return (jsx(Fragment, { children: jsx("p", __assign({ style: __assign(__assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, color: color, textAlign: center ? 'center' : 'left' }, styles$i[type]), style) }, props, { children: children })) }));
|
|
853
853
|
};
|
|
854
854
|
|
|
855
855
|
var BottomSheetPhoto = function (_a) {
|
|
@@ -931,10 +931,10 @@ var BottomSheetPhoto = function (_a) {
|
|
|
931
931
|
return (jsxs(Fragment, { children: [jsx("input", { type: "file", accept: ".png,.jpg,.jpeg", ref: fileInputRef, onChange: handleFileChange, style: { display: 'none' } }), cameraVisible && (jsx(CameraModal, { onClose: function () { return setCameraVisible(false); }, onCapture: function (base64) {
|
|
932
932
|
onUploadBase64 === null || onUploadBase64 === void 0 ? void 0 : onUploadBase64(base64, null);
|
|
933
933
|
} })), visible &&
|
|
934
|
-
ReactDOM.createPortal(jsx("div", __assign({ style: styles$
|
|
934
|
+
ReactDOM.createPortal(jsx("div", __assign({ style: styles$j.backdrop, onClick: onClose }, { children: jsxs("div", __assign({ style: __assign(__assign({}, styles$j.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxs("div", __assign({ style: styles$j.header }, { children: [jsx("span", __assign({ style: styles$j.title }, { children: title })), jsx("button", __assign({ style: styles$j.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsx("div", __assign({ style: styles$j.content }, { children: bottomSheetData.map(function (val, idx) { return (jsx(TouchableOpacity, __assign({ onPress: val.onPress, style: styles$j.contentBottomSheet }, { children: jsx(Text, { children: val.title }) }), idx)); }) }))] })) })), document.body)] }));
|
|
935
935
|
};
|
|
936
936
|
|
|
937
|
-
var styles$
|
|
937
|
+
var styles$h = {
|
|
938
938
|
content: {
|
|
939
939
|
display: 'flex',
|
|
940
940
|
justifyContent: 'center',
|
|
@@ -945,7 +945,7 @@ var styles$g = {
|
|
|
945
945
|
};
|
|
946
946
|
|
|
947
947
|
var isMobileDisplay = window.innerWidth <= 768;
|
|
948
|
-
var styles$
|
|
948
|
+
var styles$g = {
|
|
949
949
|
content: {
|
|
950
950
|
display: 'flex',
|
|
951
951
|
justifyContent: 'center',
|
|
@@ -1012,9 +1012,9 @@ styleInject(css_248z);
|
|
|
1012
1012
|
var LoadingSpinner = function (_a) {
|
|
1013
1013
|
var _b = _a.loadingType, loadingType = _b === void 0 ? false : _b, _c = _a.loadingIcon, loadingIcon = _c === void 0 ? '' : _c;
|
|
1014
1014
|
var renderSpinnerComponent = function () { return jsx("div", { className: "loading-spinner" }); };
|
|
1015
|
-
var renderSpinnerSection = function () { return (jsx(View, __assign({ style: styles$
|
|
1016
|
-
var renderSpinnerSectionS = function () { return (jsx(View, __assign({ style: styles$
|
|
1017
|
-
var renderSpinnerPage = function () { return (jsx(View, __assign({ style: styles$
|
|
1015
|
+
var renderSpinnerSection = function () { return (jsx(View, __assign({ style: styles$g.loadingSpinnerSectionContainer }, { children: jsx("div", { className: "loading-spinner-section" }) }))); };
|
|
1016
|
+
var renderSpinnerSectionS = function () { return (jsx(View, __assign({ style: styles$g.loadingSpinnerSectionContainer }, { children: jsx("div", { className: "loading-spinner-section-s" }) }))); };
|
|
1017
|
+
var renderSpinnerPage = function () { return (jsx(View, __assign({ style: styles$g.loadingSpinnerPageContainer }, { children: jsxs(View, __assign({ style: styles$g.loadingSpinnerPageContent }, { children: [jsx("div", { className: "loading-spinner-pages" }), loadingIcon ? (jsx("img", { style: styles$g.loadingIcon, src: loadingIcon, alt: '' })) : null] })) }))); };
|
|
1018
1018
|
return (jsx(Fragment, { children: loadingType === 'page'
|
|
1019
1019
|
? renderSpinnerPage()
|
|
1020
1020
|
: loadingType === 'section'
|
|
@@ -1032,10 +1032,10 @@ var Button = function (_a) {
|
|
|
1032
1032
|
? 'transparent'
|
|
1033
1033
|
: backgroundColor
|
|
1034
1034
|
? backgroundColor
|
|
1035
|
-
: Colors.black, border: outlineColor ? '1px solid rgba(0, 0, 0, 1)' : 'none', borderRadius: borderRadius, color: outlineColor ? outlineColor : Colors.white, fontSize: size, fontWeight: bold && 'bold', marginBottom: bottom, marginLeft: left, marginRight: right, marginTop: top, outline: !outlineColor && 'none', padding: padding, textAlign: center ? 'center' : 'left' }, style), styles$
|
|
1035
|
+
: Colors.black, border: outlineColor ? '1px solid rgba(0, 0, 0, 1)' : 'none', borderRadius: borderRadius, color: outlineColor ? outlineColor : Colors.white, fontSize: size, fontWeight: bold && 'bold', marginBottom: bottom, marginLeft: left, marginRight: right, marginTop: top, outline: !outlineColor && 'none', padding: padding, textAlign: center ? 'center' : 'left' }, style), styles$h.content), disabled: isLoading || disabled, onClick: onPress, type: 'submit' }, props, { children: [!isLoading ? label : null, isLoading && jsx(LoadingSpinner, { loadingType: false })] })) }));
|
|
1036
1036
|
};
|
|
1037
1037
|
|
|
1038
|
-
var styles$
|
|
1038
|
+
var styles$f = {
|
|
1039
1039
|
label: {
|
|
1040
1040
|
display: 'flex',
|
|
1041
1041
|
alignItems: 'center',
|
|
@@ -1057,10 +1057,10 @@ var Checkbox = function (_a) {
|
|
|
1057
1057
|
handleOnChecked(event.target.checked);
|
|
1058
1058
|
}
|
|
1059
1059
|
};
|
|
1060
|
-
return (jsx("label", __assign({ style: __assign(__assign({}, styles$
|
|
1060
|
+
return (jsx("label", __assign({ style: __assign(__assign({}, styles$f.label), { cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.6 : 1 }) }, { children: jsx("input", { type: "checkbox", checked: disabled ? false : checked, disabled: disabled, onChange: handleChange, style: __assign(__assign({}, styles$f.input), { cursor: disabled ? 'not-allowed' : 'pointer' }) }) })));
|
|
1061
1061
|
};
|
|
1062
1062
|
|
|
1063
|
-
var styles$
|
|
1063
|
+
var styles$e = {
|
|
1064
1064
|
container: {
|
|
1065
1065
|
flex: 1,
|
|
1066
1066
|
minHeight: '100vh',
|
|
@@ -1075,10 +1075,10 @@ var styles$d = {
|
|
|
1075
1075
|
|
|
1076
1076
|
var Container = function (_a) {
|
|
1077
1077
|
var children = _a.children, containerStyle = _a.containerStyle, contentStyle = _a.contentStyle;
|
|
1078
|
-
return (jsx(View, __assign({ style: __assign(__assign({}, styles$
|
|
1078
|
+
return (jsx(View, __assign({ style: __assign(__assign({}, styles$e.container), { containerStyle: containerStyle }) }, { children: jsx(View, __assign({ style: __assign(__assign({}, styles$e.content), { contentStyle: contentStyle }) }, { children: children })) })));
|
|
1079
1079
|
};
|
|
1080
1080
|
|
|
1081
|
-
var styles$
|
|
1081
|
+
var styles$d = {
|
|
1082
1082
|
badgeContainer: {
|
|
1083
1083
|
position: 'absolute',
|
|
1084
1084
|
zIndex: 1,
|
|
@@ -1115,10 +1115,10 @@ var CornerBadge = function (_a) {
|
|
|
1115
1115
|
var _b = _a.text, text = _b === void 0 ? 'NEW' : _b, _c = _a.visible, visible = _c === void 0 ? true : _c;
|
|
1116
1116
|
if (!visible)
|
|
1117
1117
|
return null;
|
|
1118
|
-
return (jsx(View, __assign({ style: styles$
|
|
1118
|
+
return (jsx(View, __assign({ style: styles$d.badgeContainer }, { children: jsx(View, __assign({ style: styles$d.ribbon }, { children: jsx(Text, __assign({ style: styles$d.text }, { children: text })) })) })));
|
|
1119
1119
|
};
|
|
1120
1120
|
|
|
1121
|
-
var styles$
|
|
1121
|
+
var styles$c = {
|
|
1122
1122
|
cardWrapper: {
|
|
1123
1123
|
flexDirection: 'row',
|
|
1124
1124
|
width: '100%',
|
|
@@ -1195,9 +1195,9 @@ var Countdown = function (_a) {
|
|
|
1195
1195
|
}, [(_b = weddingDate === null || weddingDate === void 0 ? void 0 : weddingDate.reception) === null || _b === void 0 ? void 0 : _b.start]);
|
|
1196
1196
|
var renderCardBox = function (_a, idx) {
|
|
1197
1197
|
var label = _a.label, value = _a.value;
|
|
1198
|
-
return (jsxs(View, __assign({ style: __assign(__assign({}, styles$
|
|
1198
|
+
return (jsxs(View, __assign({ style: __assign(__assign({}, styles$c.cardBox), { cardStyle: cardStyle, marginRight: idx === data.length - 1 ? 0 : 8 }) }, { children: [jsx(Text, { style: __assign(__assign({}, styles$c.cardTitle), { fontStyle: fontStyle }), children: value ? (value < 0 ? '00' : value) : '' }), jsx(Text, { children: label, style: __assign(__assign({}, styles$c.cardDescription), { fontStyle: fontStyle }) })] }), idx));
|
|
1199
1199
|
};
|
|
1200
|
-
var render = function () { return (jsx(View, __assign({ style: __assign(__assign({}, styles$
|
|
1200
|
+
var render = function () { return (jsx(View, __assign({ style: __assign(__assign({}, styles$c.cardWrapper), { containerStyle: containerStyle }) }, { children: data === null || data === void 0 ? void 0 : data.map(function (val, idx) { return renderCardBox(val, idx); }) }))); };
|
|
1201
1201
|
return render();
|
|
1202
1202
|
};
|
|
1203
1203
|
|
|
@@ -1231,7 +1231,7 @@ var translationUS = {
|
|
|
1231
1231
|
maximumLimit: 'Maximum Limit:',
|
|
1232
1232
|
};
|
|
1233
1233
|
|
|
1234
|
-
var styles$
|
|
1234
|
+
var styles$b = {
|
|
1235
1235
|
wrapper: {
|
|
1236
1236
|
width: '100%',
|
|
1237
1237
|
display: 'flex',
|
|
@@ -1376,8 +1376,8 @@ var DocumentUploader = function (_a) {
|
|
|
1376
1376
|
var ext = dot !== -1 ? name.slice(dot) : '';
|
|
1377
1377
|
return name.slice(0, max - ext.length - 3) + '...' + ext;
|
|
1378
1378
|
};
|
|
1379
|
-
return (jsxs("div", __assign({ style: styles$
|
|
1380
|
-
listErrorMessage.map(function (msg, i) { return (jsxs("p", __assign({ style: styles$
|
|
1379
|
+
return (jsxs("div", __assign({ style: styles$b.wrapper }, { children: [jsxs("div", __assign({ style: styles$b.uploadBox }, { children: [jsx("div", __assign({ style: styles$b.cloudIcon }, { children: "\u2601\uFE0F" })), jsx("p", __assign({ style: styles$b.title }, { children: t.selectFileTitle })), jsxs("p", __assign({ style: styles$b.subtitle }, { children: [t.allowedFormat(allowedExtensions.join(', ')), " \u2014 ", t.maximumLimit] })), jsxs(View, __assign({ style: styles$b.noteContainer }, { children: [jsx(Text, __assign({ type: "normal_14", style: styles$b.note }, { children: t.maxSize(maxSizeMB) })), jsx(Text, __assign({ type: "normal_14", style: styles$b.note }, { children: t.maxUpload(maxUpload) })), jsx(Text, __assign({ type: "normal_14", style: styles$b.note }, { children: t.maxData(maxData) }))] })), jsxs("label", __assign({ style: __assign(__assign({}, styles$b.button), { backgroundColor: files.length >= maxUpload ? '#9ca3af' : '#f97316', cursor: files.length >= maxUpload ? 'not-allowed' : 'pointer' }) }, { children: [t.pickFile, jsx("input", { ref: fileInputRef, type: "file", accept: allowedExtensions.join(','), disabled: files.length >= maxUpload, style: styles$b.hiddenInput, onChange: handleFileChange })] })), error && jsxs("p", __assign({ style: styles$b.error }, { children: ["\u26A0\uFE0F ", error] })), Array.isArray(listErrorMessage) &&
|
|
1380
|
+
listErrorMessage.map(function (msg, i) { return (jsxs("p", __assign({ style: styles$b.error }, { children: ["\u26A0\uFE0F ", msg] }), i)); }), successMessage && jsxs("p", __assign({ style: styles$b.success }, { children: ["\u2705 ", successMessage] }))] })), files.length > 0 && (jsxs("div", __assign({ style: styles$b.fileListBox }, { children: [jsx("p", __assign({ style: styles$b.fileListHeader }, { children: t.uploadingFiles(files.length, maxUpload) })), files.map(function (file, i) { return (jsxs("div", __assign({ style: styles$b.fileRow }, { children: [jsxs("p", __assign({ style: styles$b.fileName }, { children: ["\uD83D\uDCC4 ", shortenFileName(file.name)] })), jsx("button", __assign({ style: styles$b.removeButton, onClick: function () { return handleRemove(i); } }, { children: t.remove }))] }), i)); })] })))] })));
|
|
1381
1381
|
};
|
|
1382
1382
|
|
|
1383
1383
|
var DropDown = function (_a) {
|
|
@@ -1391,7 +1391,7 @@ var DropDown = function (_a) {
|
|
|
1391
1391
|
}) })));
|
|
1392
1392
|
};
|
|
1393
1393
|
|
|
1394
|
-
var styles$
|
|
1394
|
+
var styles$a = {
|
|
1395
1395
|
container: {
|
|
1396
1396
|
borderRadius: 8,
|
|
1397
1397
|
paddingRight: 16,
|
|
@@ -1436,7 +1436,7 @@ var styles$9 = {
|
|
|
1436
1436
|
},
|
|
1437
1437
|
};
|
|
1438
1438
|
|
|
1439
|
-
var styles$
|
|
1439
|
+
var styles$9 = {
|
|
1440
1440
|
backdrop: {
|
|
1441
1441
|
position: 'fixed',
|
|
1442
1442
|
top: 0,
|
|
@@ -1487,11 +1487,11 @@ var PhotoPreviewModal = function (_a) {
|
|
|
1487
1487
|
}, [visible, onDismiss]);
|
|
1488
1488
|
if (!visible)
|
|
1489
1489
|
return null;
|
|
1490
|
-
return ReactDOM.createPortal(jsx("div", __assign({ onClick: onDismiss, style: styles$
|
|
1490
|
+
return ReactDOM.createPortal(jsx("div", __assign({ onClick: onDismiss, style: styles$9.backdrop }, { children: jsx("div", __assign({ onClick: function (e) { return e.stopPropagation(); }, style: styles$9.modalContent }, { children: imageUrl ? (jsx("img", { src: imageUrl, alt: '', onError: function (_a) {
|
|
1491
1491
|
var currentTarget = _a.currentTarget;
|
|
1492
1492
|
currentTarget.onerror = null;
|
|
1493
1493
|
currentTarget.src = Icons.image_not_available;
|
|
1494
|
-
}, style: styles$
|
|
1494
|
+
}, style: styles$9.image })) : (jsx("p", __assign({ style: styles$9.noImageContainer }, { children: "No image provided" }))) })) })), document.body);
|
|
1495
1495
|
};
|
|
1496
1496
|
|
|
1497
1497
|
var ImageInput = function (_a) {
|
|
@@ -1501,7 +1501,7 @@ var ImageInput = function (_a) {
|
|
|
1501
1501
|
var _h = useState(false), isPreviewVisible = _h[0], setIsPreviewVisible = _h[1];
|
|
1502
1502
|
var handleOnUpload = function () { return setIsVisibleBottomSheet(true); };
|
|
1503
1503
|
var handleOnPreview = function () { return setIsPreviewVisible(true); };
|
|
1504
|
-
return (jsxs(View, __assign({ style: __assign(__assign({}, styles$
|
|
1504
|
+
return (jsxs(View, __assign({ style: __assign(__assign({}, styles$a.container), containerStyle) }, { children: [jsx(TouchableOpacity, __assign({ style: styles$a.containerImage, onPress: imagePreview ? handleOnPreview : handleOnUpload }, { children: jsx(Images, { src: imagePreview ? imagePreview : Icons.camera, style: imagePreview ? styles$a.image : styles$a.iconCamera }) })), jsxs(View, __assign({ style: styles$a.containerText }, { children: [label && (jsx(Text, __assign({ type: "bold_16", style: styles$a.label }, { children: label }))), subLabel && jsx(Text, { children: subLabel }), isMandatory && jsx(Text, __assign({ type: "normal_14_red" }, { children: '*Wajib' }))] })), isEditAble && imagePreview && (jsx(TouchableOpacity, __assign({ onPress: handleOnUpload }, { children: jsx(Images, { src: Icons.edit, style: styles$a.iconEdit }) }))), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, onUploadBase64: function (base64) {
|
|
1505
1505
|
if (typeof base64 === 'string') {
|
|
1506
1506
|
setImagePreview(base64);
|
|
1507
1507
|
if (typeof handleOnPickImage === 'function') {
|
|
@@ -1511,7 +1511,7 @@ var ImageInput = function (_a) {
|
|
|
1511
1511
|
} })] })));
|
|
1512
1512
|
};
|
|
1513
1513
|
|
|
1514
|
-
var styles$
|
|
1514
|
+
var styles$8 = {
|
|
1515
1515
|
sliderContainer: {
|
|
1516
1516
|
position: 'relative',
|
|
1517
1517
|
maxWidth: '600px',
|
|
@@ -1611,16 +1611,16 @@ var ImageSlider = function (_a) {
|
|
|
1611
1611
|
return prevIndex === images.length - 1 ? 0 : prevIndex + 1;
|
|
1612
1612
|
});
|
|
1613
1613
|
};
|
|
1614
|
-
return (jsxs(Fragment, { children: [images && (images === null || images === void 0 ? void 0 : images.length) > 0 ? (jsxs(TouchableOpacity, __assign({ onPress: function () { return setIsPreviewVisible(true); }, style: __assign(__assign({}, styles$
|
|
1614
|
+
return (jsxs(Fragment, { children: [images && (images === null || images === void 0 ? void 0 : images.length) > 0 ? (jsxs(TouchableOpacity, __assign({ onPress: function () { return setIsPreviewVisible(true); }, style: __assign(__assign({}, styles$8.sliderContainer), style), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave }, { children: [jsx("img", { src: (_b = images === null || images === void 0 ? void 0 : images[currentIndex]) === null || _b === void 0 ? void 0 : _b.file, alt: "slide-".concat(currentIndex), style: styles$8.image, draggable: false, onError: function (_a) {
|
|
1615
1615
|
var currentTarget = _a.currentTarget;
|
|
1616
1616
|
currentTarget.onerror = null;
|
|
1617
1617
|
currentTarget.src = Icons.image_not_available;
|
|
1618
|
-
} }), jsxs("div", __assign({ style: styles$
|
|
1618
|
+
} }), jsxs("div", __assign({ style: styles$8.counter }, { children: [currentIndex + 1, " / ", images.length] }))] }))) : (jsx(Images, { src: '', style: __assign(__assign({}, styles$8.imageNotAvailable), style) })), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: images.length > 0
|
|
1619
1619
|
? (_c = images === null || images === void 0 ? void 0 : images[currentIndex]) === null || _c === void 0 ? void 0 : _c.file
|
|
1620
1620
|
: Icons.image_not_available })] }));
|
|
1621
1621
|
};
|
|
1622
1622
|
|
|
1623
|
-
var styles$
|
|
1623
|
+
var styles$7 = {
|
|
1624
1624
|
container: {
|
|
1625
1625
|
padding: 16,
|
|
1626
1626
|
backgroundColor: Colors.white,
|
|
@@ -1740,20 +1740,20 @@ var MultipleImageInput = function (_a) {
|
|
|
1740
1740
|
return updated;
|
|
1741
1741
|
});
|
|
1742
1742
|
};
|
|
1743
|
-
return (jsxs(Fragment, { children: [jsx(Text, __assign({ style: styles$
|
|
1743
|
+
return (jsxs(Fragment, { children: [jsx(Text, __assign({ style: styles$7.title }, { children: label })), jsxs(View, __assign({ style: __assign(__assign({}, styles$7.container), style) }, { children: [jsx("div", __assign({ style: styles$7.card }, props, { children: jsxs("div", __assign({ style: styles$7.previewContainer }, { children: [images.map(function (_a, index) {
|
|
1744
1744
|
var src = _a.src;
|
|
1745
|
-
return (jsxs("div", __assign({ style: styles$
|
|
1745
|
+
return (jsxs("div", __assign({ style: styles$7.previewWrapper }, { children: [jsx("button", __assign({ onClick: function () { return removeImage(index); }, style: styles$7.closeButton, "aria-label": "Remove image" }, { children: "\u00D7" })), jsx("img", { src: src, alt: "preview", style: styles$7.previewImage }), jsx("button", __assign({ onClick: function () {
|
|
1746
1746
|
setImagePreview(src);
|
|
1747
1747
|
setIsPreviewVisible(true);
|
|
1748
|
-
}, style: styles$
|
|
1749
|
-
}), jsx("div", __assign({ onClick: function () { return setIsVisibleBottomSheet(true); }, style: styles$
|
|
1748
|
+
}, style: styles$7.eyeButton, "aria-label": "Preview image" }, { children: "\uD83D\uDC41\uFE0F" }))] }), index));
|
|
1749
|
+
}), jsx("div", __assign({ onClick: function () { return setIsVisibleBottomSheet(true); }, style: styles$7.addButton, role: "button", tabIndex: 0, onKeyDown: function (e) {
|
|
1750
1750
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
1751
1751
|
setIsVisibleBottomSheet(true);
|
|
1752
1752
|
}
|
|
1753
|
-
}, "aria-label": "Add images" }, { children: jsx("span", __assign({ style: styles$
|
|
1753
|
+
}, "aria-label": "Add images" }, { children: jsx("span", __assign({ style: styles$7.plusSign }, { children: "+" })) }))] })) })), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, title: "Pemilihan Gambar", onUploadBase64: function (data) { return handleChange(data); } })] }))] }));
|
|
1754
1754
|
};
|
|
1755
1755
|
|
|
1756
|
-
var styles$
|
|
1756
|
+
var styles$6 = {
|
|
1757
1757
|
container: {
|
|
1758
1758
|
justifyContent: 'center',
|
|
1759
1759
|
alignItems: 'center',
|
|
@@ -1763,10 +1763,10 @@ var styles$5 = {
|
|
|
1763
1763
|
|
|
1764
1764
|
var NoRecord = function (_a) {
|
|
1765
1765
|
var title = _a.title, _b = _a.style, style = _b === void 0 ? {} : _b, props = __rest(_a, ["title", "style"]);
|
|
1766
|
-
return (jsx(View, __assign({ style: __assign(__assign({}, styles$
|
|
1766
|
+
return (jsx(View, __assign({ style: __assign(__assign({}, styles$6.container), style) }, props, { children: jsx(Text, { children: title !== null && title !== void 0 ? title : 'No Record Found' }) })));
|
|
1767
1767
|
};
|
|
1768
1768
|
|
|
1769
|
-
var styles$
|
|
1769
|
+
var styles$5 = {
|
|
1770
1770
|
container: {
|
|
1771
1771
|
position: 'fixed',
|
|
1772
1772
|
left: 0,
|
|
@@ -1811,10 +1811,10 @@ var PopUp = function (_a) {
|
|
|
1811
1811
|
var _b = _a.backgroundButtonColor, backgroundButtonColor = _b === void 0 ? Colors.black : _b, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, popUpData = _a.popUpData, _d = _a.visible, visible = _d === void 0 ? false : _d, _e = _a.styleContainer, styleContainer = _e === void 0 ? {} : _e;
|
|
1812
1812
|
if (!visible)
|
|
1813
1813
|
return null;
|
|
1814
|
-
return (jsx(View, __assign({ style: __assign(__assign({}, styles$
|
|
1814
|
+
return (jsx(View, __assign({ style: __assign(__assign({}, styles$5.container), styleContainer) }, { children: jsxs(View, __assign({ style: styles$5.card }, { children: [jsxs(View, { children: [jsx(Text, __assign({ style: styles$5.headerTitle }, { children: popUpData === null || popUpData === void 0 ? void 0 : popUpData.title })), (popUpData === null || popUpData === void 0 ? void 0 : popUpData.description) && (jsx(Text, __assign({ style: styles$5.headerDescription }, { children: popUpData.description })))] }), jsxs(View, { children: [(popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelDecline) && (popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressDecline) && (jsx(Button, { style: styles$5.buttonNegative, backgroundColor: backgroundButtonColor, outlineColor: Colors.black, isLoading: isLoading, label: popUpData.labelDecline, onPress: popUpData.onPressDecline })), jsx(Button, { style: styles$5.buttonPositive, backgroundColor: backgroundButtonColor, isLoading: isLoading, label: popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelAccept, onPress: popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressAccept })] })] })) })));
|
|
1815
1815
|
};
|
|
1816
1816
|
|
|
1817
|
-
var styles$
|
|
1817
|
+
var styles$4 = {
|
|
1818
1818
|
label: {
|
|
1819
1819
|
marginBottom: 16,
|
|
1820
1820
|
},
|
|
@@ -1847,14 +1847,44 @@ var styles$3 = {
|
|
|
1847
1847
|
},
|
|
1848
1848
|
};
|
|
1849
1849
|
|
|
1850
|
-
var
|
|
1850
|
+
var styles$3 = {
|
|
1851
|
+
singleRadioContainer: {
|
|
1852
|
+
display: 'flex',
|
|
1853
|
+
marginBottom: '10px',
|
|
1854
|
+
flexDirection: 'row',
|
|
1855
|
+
},
|
|
1856
|
+
outterBullet: {
|
|
1857
|
+
width: 20,
|
|
1858
|
+
height: 20,
|
|
1859
|
+
borderRadius: 10,
|
|
1860
|
+
justifyContent: 'center',
|
|
1861
|
+
alignItems: 'center',
|
|
1862
|
+
backgroundColor: Colors.white,
|
|
1863
|
+
marginRight: 8,
|
|
1864
|
+
border: '1px solid rgba(0, 0, 0, 0.6)',
|
|
1865
|
+
},
|
|
1866
|
+
innerBulletActive: {
|
|
1867
|
+
width: 12,
|
|
1868
|
+
height: 12,
|
|
1869
|
+
borderRadius: 6,
|
|
1870
|
+
backgroundColor: Colors.black100,
|
|
1871
|
+
},
|
|
1872
|
+
innerBulletNotActive: {
|
|
1873
|
+
width: 12,
|
|
1874
|
+
height: 12,
|
|
1875
|
+
borderRadius: 6,
|
|
1876
|
+
backgroundColor: Colors.white,
|
|
1877
|
+
},
|
|
1878
|
+
};
|
|
1879
|
+
|
|
1880
|
+
var RadioButtonSingle = function (_a) {
|
|
1851
1881
|
var value = _a.value, handleChange = _a.handleChange, selectedOption = _a.selectedOption, children = _a.children;
|
|
1852
1882
|
return (jsxs(TouchableOpacity, __assign({ onPress: function () { return handleChange(value); }, style: styles$3.singleRadioContainer }, { children: [jsx(View, __assign({ style: styles$3.outterBullet }, { children: jsx(View, { style: selectedOption === value
|
|
1853
1883
|
? styles$3.innerBulletActive
|
|
1854
1884
|
: styles$3.innerBulletNotActive }) })), jsx(View, __assign({ style: { flex: 1 } }, { children: children }))] })));
|
|
1855
1885
|
};
|
|
1856
1886
|
|
|
1857
|
-
var
|
|
1887
|
+
var RadioButtonMultiple = function (_a) {
|
|
1858
1888
|
var label = _a.label, _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, onSelect = _a.onSelect, _c = _a.keyField, keyField = _c === void 0 ? 'key' : _c, _d = _a.valueField, valueField = _d === void 0 ? 'value' : _d, styleContainer = _a.styleContainer, renderItem = _a.renderItem;
|
|
1859
1889
|
var _e = useState(selectedValue), selectedOption = _e[0], setSelectedOption = _e[1];
|
|
1860
1890
|
var handleChange = function (value) {
|
|
@@ -1862,7 +1892,7 @@ var RadioButton = function (_a) {
|
|
|
1862
1892
|
if (onSelect)
|
|
1863
1893
|
onSelect(value);
|
|
1864
1894
|
};
|
|
1865
|
-
return (jsxs(View, __assign({ style: __assign({}, styleContainer) }, { children: [jsx(Text, __assign({ type: "bold_16", style: styles$
|
|
1895
|
+
return (jsxs(View, __assign({ style: __assign({}, styleContainer) }, { children: [jsx(Text, __assign({ type: "bold_16", style: styles$4.label }, { children: label })), options.map(function (item, index) { return (jsx(RadioButtonSingle, __assign({ value: item[valueField], selectedOption: selectedOption, handleChange: handleChange }, { children: renderItem ? (renderItem(item)) : (jsx(Text, __assign({ type: "normal_14" }, { children: item[valueField] }))) }), item[keyField] || index)); })] })));
|
|
1866
1896
|
};
|
|
1867
1897
|
|
|
1868
1898
|
var cameraStyles = {
|
|
@@ -30672,5 +30702,5 @@ var Switch = function (_a) {
|
|
|
30672
30702
|
return (jsxs("div", __assign({ style: __assign(__assign({}, styleContainer), style) }, { children: [label && jsx(Text, { children: label }), jsxs(View, __assign({ style: styles.toogleContainer }, { children: [jsxs("label", __assign({ className: "switch" }, { children: [jsx("input", { type: "checkbox", checked: checked, onChange: function (e) { return onChange(e.target.checked); } }), jsx("span", { className: "slider" })] })), isShowLabelToogle && (jsx("span", __assign({ style: styles.toogleText }, { children: checked ? labelOn : labelOff })))] }))] })));
|
|
30673
30703
|
};
|
|
30674
30704
|
|
|
30675
|
-
export { BottomSheet, BottomSheetPhoto, Button, Checkbox as CheckBox, Colors, Container, CornerBadge, Countdown as CountDown, DocumentUploader, DropDown, Icons, Images as Image, ImageInput, ImageSlider, LoadingSpinner, MultipleImageInput, NoRecord, PopUp, PhotoPreviewModal as PreviewPhoto,
|
|
30705
|
+
export { BottomSheet, BottomSheetPhoto, Button, Checkbox as CheckBox, Colors, Container, CornerBadge, Countdown as CountDown, DocumentUploader, DropDown, Icons, Images as Image, ImageInput, ImageSlider, LoadingSpinner, MultipleImageInput, NoRecord, PopUp, PhotoPreviewModal as PreviewPhoto, RadioButtonMultiple, RadioButtonSingle, ScannerCamera as ScannerQR, SearchBox, Swipeable, Switch, Text, TextInput, TouchableOpacity, View };
|
|
30676
30706
|
//# sourceMappingURL=index.es.js.map
|