rn-inkpad
Version:
<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />
47 lines (46 loc) • 2.4 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SlideAction = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const __1 = require("../");
const hooks_1 = require("../../hooks");
const theme_1 = require("../../theme");
const SlideAction = ({ height = 56, icon, iconColor = '#F43F5D', iconCompletedColor = '#4ADE80', iconOnCompleted, iconSize = 20, isCompleted, onCompleted, padding = 8, readonly, style, text, textOnCompleted, textPosition = 'center', textStyle, thumbBorderColor, thumbBorderWidth, thumbColor = '#FFFFFF', thumbCompletedColor = '#FFFFFF', thumbWidth = 40, tintColor = '#F43F5D', tintCompletedColor = '#4ADE80', }) => {
const { completed, handleLayout, panResponder, showText, thumbLeft } = (0, hooks_1.useSlideAction)(padding, thumbWidth, isCompleted, onCompleted);
const responders = readonly ? {} : { ...panResponder.panHandlers };
return (<react_native_1.View style={[
{
...theme_1.slideStyles.container,
height,
padding,
backgroundColor: completed ? tintCompletedColor : tintColor,
alignItems: textPosition === 'center'
? 'center'
: completed
? 'flex-start'
: 'flex-end',
},
style,
]} {...responders} onLayout={handleLayout}>
{showText && (<react_native_1.Text style={[theme_1.slideStyles.text, { color: thumbColor }, textStyle]}>
{completed ? textOnCompleted : text}
</react_native_1.Text>)}
<react_native_1.View style={[
theme_1.slideStyles.thumb,
{
backgroundColor: completed ? thumbCompletedColor : thumbColor,
borderWidth: thumbBorderWidth,
borderColor: thumbBorderColor,
width: thumbWidth,
},
{ left: thumbLeft },
]}>
{icon && (<__1.Icon name={completed ? iconOnCompleted ?? icon : icon} color={completed ? iconCompletedColor : iconColor} size={iconSize}/>)}
</react_native_1.View>
</react_native_1.View>);
};
exports.SlideAction = SlideAction;