ripal-ui 1.0.86 → 1.1.2

package/elements/ColorPicker.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { View, Pressable } from 'react-native';
+import Inline from './Inline';
+import Text from './Text';
+import config from '../config';
+
+type ColorPickerProps = {
+	value?: string;
+	label?: string;
+	onChange?: (color: string) => void;
+};
+
+const ColorPicker: React.FC<ColorPickerProps> = ({
+	value = '#fff',
+	label = 'Pilih Warna',
+	onChange = () => {}
+}) => {
+	const [isPicking, setPicking] = useState(false);
+
+	return (
+		<View style={{ gap: 5 }}>
+			<Inline>
+				<Text style={{ flexGrow: 1, fontSize: 11 }}>{label}</Text>
+				<Pressable
+					style={{
+						backgroundColor: value,
+						height: 24,
+						aspectRatio: 16 / 9,
+						borderRadius: 8,
+						borderWidth: 1,
+						borderColor: '#ddd',
+						padding: 4
+					}}
+					onPress={() => setPicking(true)}
+				/>
+			</Inline>
+
+			{isPicking && (
+				<View style={{ marginTop: 20 }}>
+					{Object.entries(config.colors).map((item, i) => {
+						if (typeof item[1] === 'object') {
+							return (
+								<Inline key={i} gap={0}>
+									{Object.entries(item[1] as Record<string, string>).map((sub, s) => (
+										<Pressable
+											key={s}
+											style={{
+												flexBasis: 30,
+												flexGrow: 1,
+												aspectRatio: 1,
+												backgroundColor: sub[1]
+											}}
+											onPress={() => {
+												onChange(sub[1]);
+												setPicking(false);
+											}}
+										/>
+									))}
+								</Inline>
+							);
+						}
+						return null;
+					})}
+				</View>
+			)}
+		</View>
+	);
+};
+
+export default ColorPicker;

package/elements/Input.tsx

@@ -14,6 +14,7 @@ interface InputProps {
 	mode?: TextInputProps["keyboardType"]; // Use keyboardType from TextInputProps
 	secureTextEntry?: boolean;
 	multiline?: boolean;
+	gap?: number;
 	onChangeText: (text: string) => void; // Function to handle text changes
 }
 
@@ -23,6 +24,7 @@ const Input: React.FC<InputProps> = ({
 	left = null,
 	right = null,
 	height = 50,
+	gap = 20,
 	placeholder = null,
 	mode = "default",
 	multiline = false,
@@ -43,6 +45,7 @@ const Input: React.FC<InputProps> = ({
 					...styles.input,
 					borderColor: isFocused ? config.colors.primary : config.colors.slate[200],
 				}}
+				gap={gap}
 			>
 				{left !== null && left}
 				<TextInput

package/elements/Slider.tsx

@@ -0,0 +1,133 @@
+import React, { useRef } from 'react';
+import {
+	View,
+	StyleSheet,
+	PanResponder,
+	Animated,
+	Dimensions,
+	GestureResponderEvent,
+	PanResponderGestureState
+} from 'react-native';
+import config from '../config';
+
+type SliderProps = {
+	start?: number;
+	end?: number;
+	value?: number;
+	rounded?: number;
+	trackColor?: string;
+	color?: string;
+	height?: number;
+	thumbOpacity?: number;
+	thumbColor?: string;
+	onChange?: (value: number) => void;
+	setScrollEnabled?: (enabled: boolean) => void;
+};
+
+const Slider: React.FC<SliderProps> = ({
+	start = 0,
+	end = 100,
+	value = 25,
+	rounded = 8,
+	trackColor = '#ecf0f1',
+	color = config.colors.primary,
+	height = 40,
+	onChange,
+	thumbOpacity = 0.7,
+	thumbColor = '#fff',
+	setScrollEnabled = () => {}
+}) => {
+	const pan = useRef(new Animated.ValueXY()).current;
+	const screenWidth = Dimensions.get('window').width;
+
+	const panResponder = useRef(
+		PanResponder.create({
+			onStartShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponder: (_: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+				return Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
+			},
+			onPanResponderGrant: () => {
+				setScrollEnabled(false);
+			},
+			onPanResponderMove: (_: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+				const clampedX = Math.max(0, Math.min(screenWidth, gestureState.moveX));
+				let percent = clampedX / screenWidth;
+				let newValue = Math.round(start + percent * (end - start));
+				onChange?.(newValue);
+			},
+			onPanResponderRelease: () => {
+				setScrollEnabled(true);
+				Animated.spring(pan, {
+					toValue: { x: 0, y: 0 },
+					useNativeDriver: false
+				}).start();
+			},
+			onPanResponderTerminate: () => {
+				setScrollEnabled(true);
+				Animated.spring(pan, {
+					toValue: { x: 0, y: 0 },
+					useNativeDriver: false
+				}).start();
+			},
+			onPanResponderTerminationRequest: () => false
+		})
+	).current;
+
+	return (
+		<View
+			style={[styles.touchArea, { height }]}
+			{...panResponder.panHandlers}
+		>
+			<View
+				style={[
+					styles.container,
+					{ height, backgroundColor: trackColor, borderRadius: rounded }
+				]}
+			>
+				<View
+					style={{
+						backgroundColor: color,
+						width: `${value / (end - start) * 100}%`,
+						height,
+						alignItems: 'flex-end',
+						justifyContent: 'center',
+						borderRadius: rounded
+					}}
+				>
+					<View
+						style={{
+							...styles.thumb,
+							height: (60 / 100) * height,
+							marginRight: (rounded / height) * 100 > 25 ? 20 : 10,
+							opacity: thumbOpacity,
+							backgroundColor: thumbColor
+						}}
+					/>
+				</View>
+			</View>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	touchArea: {
+		width: '100%'
+	},
+	container: {
+		width: '100%',
+		position: 'relative'
+	},
+	thumb_dot: {
+		width: 4,
+		height: 4,
+		backgroundColor: '#fff',
+		borderRadius: 9
+	},
+	thumb: {
+		width: 3,
+		backgroundColor: '#fff',
+		borderRadius: 9
+	}
+});
+
+export default Slider;

package/elements/index.js

@@ -1,4 +1,5 @@
 export { default as Button } from './Button';
+export { default as ColorPicker } from './ColorPicker';
 export { Dialog, DialogActions } from './Dialog';
 export { default as Dropdown } from './Dropdown';
 export { default as Inline } from './Inline';
@@ -6,6 +7,7 @@ export { default as Input } from './Input';
 export { default as ProgressBar } from './ProgressBar';
 export { default as Separator } from './Separator';
 export { default as Skeleton } from './Skeleton';
+export { default as Slider } from './Slider';
 export { default as Switch } from './Switch';
 export { default as Text } from './Text';
 export { default as Toast } from './Toast';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ripal-ui",
-  "version": "1.0.86",
+  "version": "1.1.02",
   "description": "A collection of React elements and components",
   "main": "index.js",
   "scripts": {