Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: custom padding on android #648

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions example/src/Examples.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -433,6 +433,11 @@ const styles = StyleSheet.create({
borderRadius: 1,
backgroundColor: '#334488',
},
noPaddingContainer: {
backgroundColor: '#645f5f',
borderRadius: 4,
paddingVertical: 8,
},
});

export const examples: Props[] = [
Expand Down Expand Up @@ -460,6 +465,23 @@ export const examples: Props[] = [
return <SliderExample step={0.25} tapToSeek={true} />;
},
},
{
title: 'Custom padding on Android',
render(): React.ReactElement {
return (
<View style={styles.noPaddingContainer}>
<SliderExample
padding={{
left: 0,
right: 0,
}}
step={0.25}
tapToSeek={true}
/>
</View>
);
},
},
{
title: 'Limit on positive values [30, 80]',
render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ public static ReactSlider createViewInstance(ThemedReactContext context) {
return slider;
}

public static void setPadding(ReactSlider view, int left, int top, int right, int bottom) {
view.setPadding(left, top, right, bottom);
}

public static void setValue(ReactSlider view, double value) {
if (view.isSliding() == false) {
view.setValue(value);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ public void setDisabled(ReactSlider view, boolean disabled) {
ReactSliderManagerImpl.setDisabled(view, disabled);
}


@Override
@ReactProp(name = "value", defaultFloat = 0f)
public void setValue(ReactSlider view, float value) {
Expand Down Expand Up @@ -165,6 +166,18 @@ public void setAccessibilityIncrements(ReactSlider view, ReadableArray accessibi
ReactSliderManagerImpl.setAccessibilityIncrements(view, accessibilityIncrements);
}

@ReactProp(name = "padding")
public void setPadding(ReactSlider view, ReadableMap paddingMap) {
if (paddingMap != null) {
int left = paddingMap.hasKey("left") ? paddingMap.getInt("left") : view.getPaddingLeft();
int top = paddingMap.hasKey("top") ? paddingMap.getInt("top") : view.getPaddingTop();
int right = paddingMap.hasKey("right") ? paddingMap.getInt("right") : view.getPaddingRight();
int bottom = paddingMap.hasKey("bottom") ? paddingMap.getInt("bottom") : view.getPaddingBottom();

ReactSliderManagerImpl.setPadding(view, left, top, right, bottom);
}
}

@ReactProp(name = "lowerLimit")
public void setLowerLimit(ReactSlider view, float value) {
ReactSliderManagerImpl.setLowerLimit(view, value);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,18 @@ public void setMaximumValue(ReactSlider view, float value) {
ReactSliderManagerImpl.setMaximumValue(view, value);
}

@ReactProp(name = "padding")
public void setPadding(ReactSlider view, ReadableMap paddingMap) {
if (paddingMap != null) {
int left = paddingMap.hasKey("left") ? paddingMap.getInt("left") : view.getPaddingLeft();
int top = paddingMap.hasKey("top") ? paddingMap.getInt("top") : view.getPaddingTop();
int right = paddingMap.hasKey("right") ? paddingMap.getInt("right") : view.getPaddingRight();
int bottom = paddingMap.hasKey("bottom") ? paddingMap.getInt("bottom") : view.getPaddingBottom();

ReactSliderManagerImpl.setPadding(view, left, top, right, bottom);
}
}

@ReactProp(name = "lowerLimit")
public void setLowerLimit(ReactSlider view, float value) {
ReactSliderManagerImpl.setLowerLimit(view, value);
Expand Down
11 changes: 11 additions & 0 deletions package/src/Slider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,17 @@ type Props = ViewProps &
* The number of elements must be the same as `maximumValue`.
*/
accessibilityIncrements?: Array<string>;

/**
* Android Only.
* Custom padding configuration
*/
padding?: {
left?: number;
top?: number;
right?: number;
bottom?: number;
};
}>;

const SliderComponent = (
Expand Down
16 changes: 13 additions & 3 deletions package/typings/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { FC } from 'react';
import {FC} from 'react';
import * as ReactNative from 'react-native';
import { ImageURISource } from 'react-native';
import {ImageURISource} from 'react-native';

type Constructor<T> = new (...args: any[]) => T;

Expand Down Expand Up @@ -113,6 +113,16 @@ export interface SliderProps
*/
minimumValue?: number;

/**
* Custom padding on android
*/
padding?: {
left?: number;
top?: number;
right?: number;
bottom?: number;
};

/**
* Callback that is called when the user picks up the slider.
* The initial value is passed as an argument to the callback handler.
Expand Down Expand Up @@ -168,7 +178,7 @@ export interface SliderProps
StepMarker?: FC<MarkerProps>;

/**
*
*
*/
renderStepNumber?: boolean;

Expand Down
Loading