feat(slider): add slider component

example/src/examples/SliderExample.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Panel, Slider, Fieldset } from 'react95-native';
+
+const restrictedValues = [0, 20, 80, 100].map(n => ({
+  label: `${n.toString()}°C`,
+  value: n,
+}));
+
+const DividerExample = () => {
+  const [value, setValue] = React.useState(0);
+  const [withTicksValue, setWithTicksValue] = React.useState(0);
+
+  const [restrictedValue, setRestrictedValue] = React.useState(
+    restrictedValues[0].value,
+  );
+
+  const handleChange = (newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Panel style={{ flex: 1, padding: 16 }}>
+      <Fieldset label='Default:' style={{ padding: 16 }}>
+        <Slider
+          onChange={handleChange}
+          onChangeCommitted={v => console.warn('onChangeCommited', v)}
+          value={value}
+        />
+      </Fieldset>
+
+      <Fieldset label='With ticks:' style={{ padding: 16 }}>
+        <Slider
+          onChange={newValue => setWithTicksValue(newValue)}
+          onChangeCommitted={v => console.warn('onChangeCommited', v)}
+          value={withTicksValue}
+          marks
+          step={10}
+          style={{ width: '80%' }}
+        />
+      </Fieldset>
+
+      <Fieldset label='Restricted values:' style={{ padding: 16 }}>
+        <Slider
+          onChange={newValue => setRestrictedValue(newValue)}
+          onChangeCommitted={v => console.warn('onChangeCommited', v)}
+          value={restrictedValue}
+          marks={restrictedValues}
+          step={null}
+        />
+      </Fieldset>
+
+      <Fieldset label='Disabled:' style={{ padding: 16 }}>
+        <Slider
+          disabled
+          // value={restrictedValue}
+          marks={restrictedValues}
+          step={null}
+        />
+      </Fieldset>
+    </Panel>
+  );
+};
+
+export default DividerExample;

example/src/examples/index.tsx

@@ -18,6 +18,7 @@ import ScrollPanelExample from './ScrollPanelExample';
 import ScrollViewExample from './ScrollViewExample';
 import SelectBoxExample from './SelectBoxExample';
 import SelectExample from './SelectExample';
+import SliderExample from './SliderExample';
 import SnackbarExample from './SnackbarExample';
 import TabsExample from './TabsExample';
 import TextInputExample from './TextInputExample';
@@ -51,6 +52,7 @@ export default [
         component: SelectBoxExample,
         title: 'SelectBox',
       },
+      { name: 'SliderExample', component: SliderExample, title: 'Slider' },
       {
         name: 'TextInputExample',
         component: TextInputExample,

src/NumberInput/NumberInput.tsx

@@ -3,39 +3,23 @@ import { View, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import type { DimensionValue } from '../types';
 import { blockSizes } from '../common/styles';
+import { clamp } from '../common/utils';
 
 import { TextInput, Button, Text } from '..';
 
-type OptionalNumber = number | null;
-
 type Props = {
   defaultValue?: number;
   disabled?: boolean;
   inputWidth?: DimensionValue;
-  max?: OptionalNumber;
-  min?: OptionalNumber;
+  max?: number | null;
+  min?: number | null;
   onChange?: (value: number) => void;
   step?: number;
   style?: StyleProp<ViewStyle>;
   value?: number;
   variant?: 'default' | 'flat';
 };
 
-// TODO: test clamp function
-export function clamp(
-  value: number,
-  min: OptionalNumber,
-  max: OptionalNumber,
-): number {
-  if (max !== null && value > max) {
-    return max;
-  }
-  if (min !== null && value < min) {
-    return min;
-  }
-  return value;
-}
-
 // TODO: accessibility etc.
 // TODO: allow to center input text horizontally
 const NumberInput = ({