Merge pull request #15174 from kourge/rheostat

rheostat definitions

rheostat/index.d.ts

@@ -0,0 +1,49 @@
+// Type definitions for rheostat 2.1
+// Project: https://github.com/airbnb/rheostat
+// Definitions by: Sasha Bayan <https://github.com/SashaBayan>, Wil Lee <https://github.com/kourge>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.1
+
+import * as React from 'react';
+
+export type Orientation = 'horizontal' | 'vertical';
+
+export interface Algorithm {
+  getPosition(value: number, min: number, max: number): number;
+  getValue(pos: number, min: number, max: number): number;
+}
+
+export interface PublicState {
+  max: number;
+  min: number;
+  values: number[];
+}
+
+export interface Events {
+  onClick?: () => any;
+  onChange?: (publicState: PublicState) => any;
+  onKeyPress?: () => any;
+  onSliderDragEnd?: () => any;
+  onSliderDragMove?: () => any;
+  onSliderDragStart?: () => any;
+  onValuesUpdated?: (publicState: PublicState) => any;
+}
+
+export interface Props extends Events {
+  algorithm?: Algorithm;
+  className?: string;
+  disabled?: boolean;
+  handle?: React.ReactType;
+  max?: number;
+  min?: number;
+  orientation?: Orientation;
+  pitComponent?: React.ReactType;
+  pitPoints?: number[];
+  progressBar?: React.ReactType;
+  snap?: boolean;
+  snapPoints?: number[];
+  values?: number[];
+}
+
+export default class Rheostat extends React.Component<Props, never> {}
+

rheostat/rheostat-tests.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import Rheostat, {Orientation, Algorithm, PublicState} from 'rheostat';
+
+type Element = React.ReactElement<any>;
+
+function Basic(props: {}): Element {
+  return <Rheostat />;
+}
+
+function MultiHandles(props: {}): Element {
+  return (
+    <Rheostat
+      min={1}
+      max={100}
+      values={[1, 100]}
+    />
+  );
+}
+
+function CustomAlgorithm(props: {}): Element {
+  const geometric: Algorithm = {
+    getPosition(x: number, min: number, max: number) {
+      return ((max / (max - min)) ** 0.5) * (((x - min) / max) ** 0.5) * 100;
+    },
+
+    getValue(x: number, min: number, max: number) {
+      return (Math.floor(((x / 100) ** 2) * (max - min)) + min);
+    }
+  };
+
+  return <Rheostat algorithm={geometric} />;
+}
+
+function ComponentOverrides(props: {}): Element {
+  function Bar(props: {}): Element { return <hr />; }
+  return (
+    <Rheostat
+      handle="button"
+      progressBar={Bar}
+    />
+  );
+}
+
+function Vertical(props: {}): Element {
+  return <Rheostat orientation="vertical" />;
+}
+
+function Pits(props: {}): Element {
+  function Pit(props: {}): Element { return <input type="radio" />; }
+  return (
+    <Rheostat
+      pitComponent={Pit}
+      pitPoints={[50]}
+    />
+  );
+}
+
+function CustomValues(props: {}): Element {
+  return (
+    <Rheostat
+      values={[1, 3, 5, 7, 9]}
+    />
+  );
+}
+
+function Handlers(props: {}): Element {
+  function handler(data: PublicState): void {}
+  return (
+    <Rheostat
+      onChange={handler}
+      onValuesUpdated={handler}
+    />
+  );
+}

rheostat/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["es6", "dom"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "baseUrl": "../",
+    "typeRoots": [
+      "../"
+    ],
+    "types": [],
+    "jsx": "react",
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "files": [
+    "index.d.ts",
+    "rheostat-tests.tsx"
+  ]
+}

rheostat/tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tslint.json"
+}