@tamagui/slider 1.0.1-beta.56 → 1.0.1-beta.60

package/src/constants.tsx

@@ -0,0 +1,32 @@
+import { SizeTokens } from '@tamagui/core'
+import { createContextScope } from '@tamagui/create-context'
+
+import { Direction, SliderContextValue } from './types'
+
+export const SLIDER_NAME = 'Slider'
+
+export const [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME)
+
+export const [SliderProvider, useSliderContext] =
+  createSliderContext<SliderContextValue>(SLIDER_NAME)
+
+export const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{
+  startEdge: 'bottom' | 'left' | 'right'
+  endEdge: 'top' | 'right' | 'left'
+  sizeProp: 'width' | 'height'
+  size: number | SizeTokens
+  direction: number
+}>(SLIDER_NAME, {
+  startEdge: 'left',
+  endEdge: 'right',
+  sizeProp: 'width',
+  size: 0,
+  direction: 1,
+})
+
+export const PAGE_KEYS = ['PageUp', 'PageDown']
+export const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+export const BACK_KEYS: Record<Direction, string[]> = {
+  ltr: ['ArrowDown', 'Home', 'ArrowLeft', 'PageDown'],
+  rtl: ['ArrowDown', 'Home', 'ArrowRight', 'PageDown'],
+}

package/src/helpers.tsx

@@ -0,0 +1,102 @@
+import { SizeTokens, getTokens, getVariableValue } from '@tamagui/core'
+
+export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {
+  const nextValues = [...prevValues]
+  nextValues[atIndex] = nextValue
+  return nextValues.sort((a, b) => a - b)
+}
+
+export function convertValueToPercentage(value: number, min: number, max: number) {
+  const maxSteps = max - min
+  const percentPerStep = 100 / maxSteps
+  return percentPerStep * (value - min)
+}
+
+/**
+ * Returns a label for each thumb when there are two or more thumbs
+ */
+export function getLabel(index: number, totalValues: number) {
+  if (totalValues > 2) {
+    return `Value ${index + 1} of ${totalValues}`
+  } else if (totalValues === 2) {
+    return ['Minimum', 'Maximum'][index]
+  } else {
+    return undefined
+  }
+}
+
+/**
+ * Given a `values` array and a `nextValue`, determine which value in
+ * the array is closest to `nextValue` and return its index.
+ *
+ * @example
+ * // returns 1
+ * getClosestValueIndex([10, 30], 25);
+ */
+export function getClosestValueIndex(values: number[], nextValue: number) {
+  if (values.length === 1) return 0
+  const distances = values.map((value) => Math.abs(value - nextValue))
+  const closestDistance = Math.min(...distances)
+  return distances.indexOf(closestDistance)
+}
+
+/**
+ * Offsets the thumb centre point while sliding to ensure it remains
+ * within the bounds of the slider when reaching the edges
+ */
+export function getThumbInBoundsOffset(width: number, left: number, direction: number) {
+  const halfWidth = width / 2
+  const halfPercent = 50
+  const offset = linearScale([0, halfPercent], [0, halfWidth])
+  return (halfWidth - offset(left) * direction) * direction
+}
+
+/**
+ * Gets an array of steps between each value.
+ *
+ * @example
+ * // returns [1, 9]
+ * getStepsBetweenValues([10, 11, 20]);
+ */
+function getStepsBetweenValues(values: number[]) {
+  return values.slice(0, -1).map((value, index) => values[index + 1] - value)
+}
+
+/**
+ * Verifies the minimum steps between all values is greater than or equal
+ * to the expected minimum steps.
+ *
+ * @example
+ * // returns false
+ * hasMinStepsBetweenValues([1,2,3], 2);
+ *
+ * @example
+ * // returns true
+ * hasMinStepsBetweenValues([1,2,3], 1);
+ */
+export function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values)
+    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)
+    return actualMinStepsBetweenValues >= minStepsBetweenValues
+  }
+  return true
+}
+
+// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
+export function linearScale(input: readonly [number, number], output: readonly [number, number]) {
+  return (value: number) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0]
+    const ratio = (output[1] - output[0]) / (input[1] - input[0])
+    return output[0] + ratio * (value - input[0])
+  }
+}
+
+export function getDecimalCount(value: number) {
+  return (String(value).split('.')[1] || '').length
+}
+
+export function roundValue(value: number, decimalCount: number) {
+  const rounder = Math.pow(10, decimalCount)
+  return Math.round(value * rounder) / rounder
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './Slider'
+export type {
+  SliderProps,
+  SliderHorizontalProps,
+  SliderVerticalProps,
+  SliderTrackProps,
+} from './types'

package/src/types.ts

@@ -0,0 +1,78 @@
+import type { GestureReponderEvent, SizeTokens } from '@tamagui/core'
+import type { Scope } from '@tamagui/create-context'
+import type { SizableStackProps } from '@tamagui/stacks'
+import type { View } from 'react-native'
+
+export type ScopedProps<P> = P & { __scopeSlider?: Scope }
+
+export type Direction = 'ltr' | 'rtl'
+
+export type SliderImplElement = HTMLElement | View
+
+type SliderImplPrivateProps = {
+  onSlideStart(event: GestureReponderEvent, target: 'thumb' | 'track'): void
+  onSlideMove(event: GestureReponderEvent): void
+  onSlideEnd(event: GestureReponderEvent): void
+  onHomeKeyDown(event: React.KeyboardEvent): void
+  onEndKeyDown(event: React.KeyboardEvent): void
+  onStepKeyDown(event: React.KeyboardEvent): void
+}
+
+export interface SliderTrackProps extends SizableStackProps {}
+
+export interface SliderImplProps extends SliderTrackProps, SliderImplPrivateProps {
+  dir?: Direction
+  orientation: 'horizontal' | 'vertical'
+}
+
+type SliderOrientationPrivateProps = {
+  min: number
+  max: number
+  onSlideStart?(value: number, target: 'thumb' | 'track'): void
+  onSlideMove?(value: number): void
+  onHomeKeyDown(event: React.KeyboardEvent): void
+  onEndKeyDown(event: React.KeyboardEvent): void
+  onStepKeyDown(step: { event: React.KeyboardEvent; direction: number }): void
+}
+
+interface SliderOrientationProps
+  extends Omit<SliderImplProps, keyof SliderImplPrivateProps | 'orientation'>,
+    SliderOrientationPrivateProps {}
+
+export interface SliderHorizontalProps extends SliderOrientationProps {
+  dir?: Direction
+}
+
+export interface SliderVerticalProps extends SliderOrientationProps {
+  dir?: Direction
+}
+
+export interface SliderProps
+  extends Omit<
+    SliderHorizontalProps | SliderVerticalProps,
+    keyof SliderOrientationPrivateProps | 'defaultValue'
+  > {
+  size?: SizeTokens
+  name?: string
+  disabled?: boolean
+  orientation?: React.AriaAttributes['aria-orientation']
+  dir?: Direction
+  min?: number
+  max?: number
+  step?: number
+  minStepsBetweenThumbs?: number
+  value?: number[]
+  defaultValue?: number[]
+  onValueChange?(value: number[]): void
+}
+
+export type SliderContextValue = {
+  size?: SizeTokens | number | null
+  disabled?: boolean
+  min: number
+  max: number
+  values: number[]
+  valueIndexToChangeRef: React.MutableRefObject<number>
+  thumbs: Set<any>
+  orientation: SliderProps['orientation']
+}

package/types/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAkB,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAA;AAwBpD,OAAO,EAIL,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAEjB,MAAM,SAAS,CAAA;AAMhB,aAAK,uBAAuB,GAAG,iBAAiB,CAAA;AAiEhD,aAAK,qBAAqB,GAAG,iBAAiB,CAAA;AAgE9C,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAY5C,QAAA,MAAM,WAAW,6FAehB,CAAA;AAUD,aAAK,wBAAwB,GAAG,WAAW,GAAG,IAAI,CAAA;AAClD,UAAU,sBAAuB,SAAQ,WAAW;CAAG;AAQvD,QAAA,MAAM,iBAAiB,yGAqCtB,CAAA;AAqCD,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAC5C,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,WAAW,6FAoFhB,CAAA;AAQD,aAAK,aAAa,GAAG,uBAAuB,GAAG,qBAAqB,CAAA;AAEpE,QAAA,MAAM,MAAM;;;;CAoIX,CAAA;AAuCD,QAAA,MAAM,KAAK,6FAAc,CAAA;AACzB,QAAA,MAAM,KAAK,yGAAoB,CAAA;AAC/B,QAAA,MAAM,KAAK,6FAAc,CAAA;AAEzB,OAAO,EACL,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,WAAW,EAEX,KAAK,EACL,KAAK,EACL,KAAK,GACN,CAAA;AACD,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAkB,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAA;AAwBpD,OAAO,EAIL,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAEjB,MAAM,SAAS,CAAA;AAMhB,aAAK,uBAAuB,GAAG,iBAAiB,CAAA;AAiEhD,aAAK,qBAAqB,GAAG,iBAAiB,CAAA;AAgE9C,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAY5C,QAAA,MAAM,WAAW,6FAehB,CAAA;AAUD,aAAK,wBAAwB,GAAG,WAAW,GAAG,IAAI,CAAA;AAClD,UAAU,sBAAuB,SAAQ,WAAW;CAAG;AAQvD,QAAA,MAAM,iBAAiB,yGAqCtB,CAAA;AAqCD,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAC5C,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,WAAW,6FAoFhB,CAAA;AAQD,aAAK,aAAa,GAAG,uBAAuB,GAAG,qBAAqB,CAAA;AAEpE,QAAA,MAAM,MAAM;;;;CAsIX,CAAA;AAuCD,QAAA,MAAM,KAAK,6FAAc,CAAA;AACzB,QAAA,MAAM,KAAK,yGAAoB,CAAA;AAC/B,QAAA,MAAM,KAAK,6FAAc,CAAA;AAEzB,OAAO,EACL,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,WAAW,EAEX,KAAK,EACL,KAAK,EACL,KAAK,GACN,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,CAAA"}