npm - @herca/rn-kit - Versions diffs - 0.1.26 → 0.1.27 - Mend

@herca/rn-kit 0.1.26 → 0.1.27

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.

Files changed (54) hide show

package/lib/module/BottomSheet/BottomSheet.js +4 -1
package/lib/module/BottomSheet/BottomSheet.js.map +1 -1
package/lib/module/Button/tests/Button.test.js +70 -0
package/lib/module/Button/tests/Button.test.js.map +1 -0
package/lib/module/Button/type.js +1 -1
package/lib/module/DatePicker/TimePicker.js +84 -39
package/lib/module/DatePicker/TimePicker.js.map +1 -1
package/lib/module/Icon/Icon.js +7 -1
package/lib/module/Icon/Icon.js.map +1 -1
package/lib/module/Icon/README.md +6 -0
package/lib/module/Icon/icons/Bold.js +25 -0
package/lib/module/Icon/icons/Bold.js.map +1 -0
package/lib/module/Icon/icons/Italic.js +25 -0
package/lib/module/Icon/icons/Italic.js.map +1 -0
package/lib/module/Icon/icons/UnderLine.js +25 -0
package/lib/module/Icon/icons/UnderLine.js.map +1 -0
package/lib/module/Input/InputOtp.js +7 -5
package/lib/module/Input/InputOtp.js.map +1 -1
package/lib/module/Input/README_INPUT_OTP.md +8 -7
package/lib/module/TextEditor/TextEditor.js +206 -4
package/lib/module/TextEditor/TextEditor.js.map +1 -1
package/lib/typescript/src/Button/tests/Button.test.d.ts +2 -0
package/lib/typescript/src/Button/tests/Button.test.d.ts.map +1 -0
package/lib/typescript/src/DatePicker/TimePicker.d.ts.map +1 -1
package/lib/typescript/src/Icon/Icon.d.ts.map +1 -1
package/lib/typescript/src/Icon/icons/Bold.d.ts +9 -0
package/lib/typescript/src/Icon/icons/Bold.d.ts.map +1 -0
package/lib/typescript/src/Icon/icons/Italic.d.ts +9 -0
package/lib/typescript/src/Icon/icons/Italic.d.ts.map +1 -0
package/lib/typescript/src/Icon/icons/UnderLine.d.ts +9 -0
package/lib/typescript/src/Icon/icons/UnderLine.d.ts.map +1 -0
package/lib/typescript/src/Icon/type.d.ts +1 -1
package/lib/typescript/src/Icon/type.d.ts.map +1 -1
package/lib/typescript/src/Input/InputOtp.d.ts +1 -0
package/lib/typescript/src/Input/InputOtp.d.ts.map +1 -1
package/lib/typescript/src/TextEditor/TextEditor.d.ts +2 -1
package/lib/typescript/src/TextEditor/TextEditor.d.ts.map +1 -1
package/lib/typescript/src/TextEditor/types.d.ts +7 -0
package/lib/typescript/src/TextEditor/types.d.ts.map +1 -1
package/package.json +2 -2
package/src/BottomSheet/BottomSheet.tsx +4 -1
package/src/Button/tests/Button.test.tsx +49 -0
package/src/Button/type.tsx +1 -1
package/src/DatePicker/TimePicker.tsx +116 -52
package/src/Icon/Icon.tsx +6 -0
package/src/Icon/README.md +6 -0
package/src/Icon/icons/Bold.tsx +22 -0
package/src/Icon/icons/Italic.tsx +22 -0
package/src/Icon/icons/UnderLine.tsx +26 -0
package/src/Icon/type.tsx +3 -0
package/src/Input/InputOtp.tsx +7 -3
package/src/Input/README_INPUT_OTP.md +8 -7
package/src/TextEditor/TextEditor.tsx +222 -3
package/src/TextEditor/types.tsx +7 -0

package/src/TextEditor/TextEditor.tsx CHANGED Viewed

@@ -1,5 +1,224 @@
-import { View } from 'react-native';
+import { useRef, useState, useEffect } from 'react';
+import {
+  View,
+  StyleSheet,
+  Platform,
+  KeyboardAvoidingView,
+  TouchableOpacity,
+  Keyboard,
+  type KeyboardEvent,
+} from 'react-native';
+import { WebView } from 'react-native-webview';
+import Color from '../Color/Color';
+import type { TextEditorType } from './types';
+import LabelForm from '../LabelForm/LabelForm';
+import Typography from '../Typography/Typography';
+import Icon from '../Icon';
-export default function TextEditor() {
-  return <View></View>;
+export default function TextEditor({
+  label,
+  hasError,
+  hint,
+  onChange,
+  height = 300,
+}: TextEditorType) {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [showToolbar, setShowToolbar] = useState<boolean>(false);
+  const webviewRef = useRef<WebView>(null);
+  const handleOnChange = (data: string) => {
+    onChange?.(data);
+  };
+  const htmlEditor = `
+    <html>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+          html, body {
+            margin: 0;
+            padding: 0;
+            width: 99.9%;
+            height: 100%;
+            overflow-x: hidden;
+          }
+          #editor {
+            min-height: ${height};
+            width: 100%;
+            max-width: 100%;
+            padding: 12px;
+            font-size: 12px;
+            border: 1px solid ${Color.gray[200]};
+            border-radius: 6px;
+            outline: none;
+            transition: border 0.2s;
+            overflow-wrap: break-word;
+            font-weight: 500;
+            word-wrap: break-word;
+            word-break: break-word;
+          }
+          #editor.focused {
+            border-color: ${Color.gray[200]}
+          }
+        </style>
+      </head>
+      <body>
+        <div id="editor" contenteditable="true">Tulis sesuatu di sini...</div>
+        <script>
+          const editor = document.getElementById("editor");
+          editor.addEventListener("focus", () => {
+            editor.classList.add("focused");
+          });
+          editor.addEventListener("blur", () => {
+            editor.classList.remove("focused");
+          });
+          const handleMessage = (command) => {
+            if (command === 'getContent') {
+              window.ReactNativeWebView.postMessage(editor.innerHTML);
+            } else {
+              editor.focus();
+              document.execCommand(command, false, '');
+            }
+          };
+          // ini untuk Android
+          document.addEventListener("message", (event) => {
+            handleMessage(event.data);
+          });
+          // ini untuk iOS
+          window.addEventListener("message", (event) => {
+            handleMessage(event.data);
+          });
+        </script>
+      </body>
+    </html>
+  `;
+  const formatText = (command: string) => {
+    if (webviewRef.current) {
+      if (Platform.OS === 'ios') {
+        webviewRef.current.injectJavaScript(`
+          document.execCommand('${command}', false, '');
+          true; //di ios harus biar berfunsi boldnya
+        `);
+      } else {
+        webviewRef.current.postMessage(command);
+      }
+    }
+  };
+  useEffect(() => {
+    const showSub = Keyboard.addListener(
+      'keyboardDidShow',
+      (e: KeyboardEvent) => {
+        if (Platform.OS === 'ios')
+          setKeyboardHeight(e.endCoordinates.height - 35);
+        setShowToolbar(true);
+      }
+    );
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      if (Platform.OS === 'ios') setKeyboardHeight(0);
+      setShowToolbar(false);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  return (
+    <View style={styles.container}>
+      {label ? <LabelForm title={label} /> : null}
+      <KeyboardAvoidingView
+        style={(styles.editorWrapper, [{ minHeight: height }])}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <WebView
+          ref={webviewRef}
+          originWhitelist={['*']}
+          source={{ html: htmlEditor }}
+          onMessage={(event) => {
+            handleOnChange(event.nativeEvent.data);
+          }}
+          style={styles.webview}
+          javaScriptEnabled={true}
+          domStorageEnabled={true}
+          mixedContentMode="always"
+          allowUniversalAccessFromFileURLs={true}
+          allowFileAccess={true}
+        />
+      </KeyboardAvoidingView>
+      {hint ? (
+        <Typography
+          color={hasError ? Color.danger[500] : Color.gray[700]}
+          variant="t3"
+          weight="medium"
+        >
+          {hint}
+        </Typography>
+      ) : null}
+      {showToolbar ? (
+        <View style={[styles.toolbar, { bottom: keyboardHeight }]}>
+          <TouchableOpacity
+            onPress={() => formatText('bold')}
+            style={styles.toolButton}
+          >
+            <Icon name="Bold" />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => formatText('italic')}
+            style={styles.toolButton}
+          >
+            <Icon name="Italic" />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => formatText('underline')}
+            style={styles.toolButton}
+          >
+            <Icon name="UnderLine" />
+          </TouchableOpacity>
+        </View>
+      ) : null}
+    </View>
+  );
 }
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    gap: 4,
+    position: 'relative',
+  },
+  editorWrapper: { flex: 1 },
+  toolbar: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderColor: Color.gray[200],
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    alignItems: 'center',
+  },
+  toolButton: {
+    padding: 8,
+    marginHorizontal: 4,
+    borderRadius: 6,
+  },
+  toolText: {
+    fontWeight: 'bold',
+  },
+  webview: { flex: 1 },
+});

package/src/TextEditor/types.tsx CHANGED Viewed

@@ -0,0 +1,7 @@
+export interface TextEditorType {
+  label?: string;
+  hint?: string;
+  hasError?: boolean;
+  onChange?: (data: string) => void;
+  height?: number;
+}