Merge branch 'master' into distance-range

react-component · Nov 6, 2020 · 4255433 · 4255433
2 parents 33a49d6 + cd8b6ac
commit 4255433
Show file tree

Hide file tree

Showing 16 changed files with 890 additions and 170 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,114 @@
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+
+      - name: cache package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: create package-lock.json
+        run: npm i --package-lock-only
+
+      - name: hack for singe file
+        run: |
+          if [ ! -d "package-temp-dir" ]; then
+            mkdir package-temp-dir
+          fi
+          cp package-lock.json package-temp-dir
+
+      - name: cache node_modules
+        id: node_modules_cache_id
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: install
+        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
+        run: npm ci
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: lint
+        run: npm run lint
+
+    needs: setup
+
+  compile:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: compile
+        run: npm run compile
+
+    needs: setup
+
+  coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: coverage
+        run: npm run coverage && bash <(curl -s https://codecov.io/bash)
+
+    needs: setup
diff --git a/.travis.yml b/.travis.yml
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 Slider UI component for React
 
 [![NPM version][npm-image]][npm-url]
-[![build status][travis-image]][travis-url]
+[![build status][github-actions-image]][github-actions-url]
 [![Test coverage][coveralls-image]][coveralls-url]
 [![Dependencies][david-image]][david-url]
 [![DevDependencies][david-dev-image]][david-dev-url]
@@ -13,8 +13,8 @@ Slider UI component for React
 
 [npm-image]: http://img.shields.io/npm/v/rc-slider.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-slider
-[travis-image]: https://img.shields.io/travis/react-component/slider/master?style=flat-square
-[travis-url]: https://travis-ci.org/react-component/slider
+[github-actions-image]: https://github.com/react-component/slider/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/slider/actions
 [circleci-image]: https://img.shields.io/circleci/react-component/slider/master?style=flat-square
 [circleci-url]: https://circleci.com/gh/react-component/slider
 [coveralls-image]: https://img.shields.io/coveralls/react-component/slider.svg?style=flat-square
@@ -64,7 +64,7 @@ const createSliderWithTooltip = Slider.createSliderWithTooltip;
 const Range = createSliderWithTooltip(Slider.Range);
 ```
 
-[Online demo](http://react-component.github.io/slider/examples/handle.html)
+[Online demo](http://react-component.github.io/slider/?path=/story/rc-slider--handle)
 
 After Range or Slider was wrapped by createSliderWithTooltip, it will have the following props:
 
@@ -127,6 +127,10 @@ The following APIs are shared by Slider and Range.
 | allowCross | boolean | `true` | `allowCross` could be set as `true` to allow those handles to cross. |
 | pushable | boolean or number | `false` | `pushable` could be set as `true` to allow pushing of surrounding handles when moving a handle. When set to a number, the number will be the minimum ensured distance between handles. Example: ![](http://i.giphy.com/l46Cs36c9HrHMExoc.gif) |
 
+### SliderTooltip
+
+The Tooltip Component that keep following with content.
+
 ## Development
 
 ```

diff --git a/examples/handle.jsx b/examples/handle.jsx
@@ -1,8 +1,7 @@
 import '../assets/index.less';
 import 'rc-tooltip/assets/bootstrap.css';
 import React from 'react';
-import Tooltip from 'rc-tooltip';
-import Slider from '../src';
+import Slider, { SliderTooltip } from '../src';
 
 const { createSliderWithTooltip } = Slider;
 const Range = createSliderWithTooltip(Slider.Range);
@@ -11,15 +10,15 @@ const { Handle } = Slider;
 const handle = props => {
   const { value, dragging, index, ...restProps } = props;
   return (
-    <Tooltip
+    <SliderTooltip
       prefixCls="rc-slider-tooltip"
-      overlay={value}
+      overlay={`${value} %`}
       visible={dragging}
       placement="top"
       key={index}
     >
       <Handle value={value} {...restProps} />
-    </Tooltip>
+    </SliderTooltip>
   );
 };
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "9.3.1",
+  "version": "9.6.1",
   "description": "Slider UI component for React",
   "engines": {
     "node": ">=8.x"
@@ -31,6 +31,7 @@
   "main": "./lib/index",
   "module": "./es/index",
   "style": "./assets/index.css",
+  "types": "./lib/index.d.ts",
   "scripts": {
     "start": "cross-env NODE_ENV=development father doc dev --storybook",
     "build": "father doc build --storybook",
@@ -44,13 +45,13 @@
     "coverage": "father test --coverage"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.5",
-    "rc-tooltip": "^4.0.0",
+    "rc-tooltip": "^5.0.1",
     "rc-util": "^5.0.0",
     "shallowequal": "^1.1.0"
   },
@@ -67,10 +68,10 @@
     "eslint": "^7.1.0",
     "father": "^2.22.0",
     "less": "^3.10.3",
-    "np": "^6.0.0",
-    "rc-trigger": "^4.0.2",
+    "np": "^7.0.0",
+    "rc-trigger": "^5.0.4",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "typescript": "^3.7.2"
+    "typescript": "^4.0.5"
   }
 }
diff --git a/src/Range.tsx b/src/Range.tsx
@@ -6,6 +6,7 @@ import Track from './common/Track';
 import createSlider from './common/createSlider';
 import * as utils from './utils';
 import { SliderProps } from './Slider';
+import { GenericSliderProps, GenericSliderState } from './interface';
 
 const trimAlignValue = ({
   value,
@@ -33,7 +34,7 @@ const trimAlignValue = ({
   return utils.ensureValuePrecision(valNotConflict, props);
 };
 
-export interface RangeProps {
+export interface RangeProps extends GenericSliderProps {
   value?: number[];
   defaultValue?: number[];
   count?: number;
@@ -53,16 +54,16 @@ export interface RangeProps {
   prefixCls?: string;
   included?: boolean;
   disabled?: boolean;
-  trackStyle?: React.CSSProperties;
-  handleStyle?: React.CSSProperties;
-  tabIndex?: number;
-  ariaLabelGroupForHandles?: string;
-  ariaLabelledByGroupForHandles?: string;
-  ariaValueTextFormatterGroupForHandles?: string;
-  handle: SliderProps['handle'];
+  trackStyle?: React.CSSProperties[];
+  handleStyle?: React.CSSProperties[];
+  tabIndex?: number | Array<number>;
+  ariaLabelGroupForHandles?: string | Array<string>;
+  ariaLabelledByGroupForHandles?: string | Array<string>;
+  ariaValueTextFormatterGroupForHandles?: string | Array<string>;
+  handle?: SliderProps['handle'];
 }
 
-interface RangeState {
+interface RangeState extends GenericSliderState {
   bounds: number[];
   handle: number | null;
   recent: number;
@@ -134,28 +135,36 @@ class Range extends React.Component<RangeProps, RangeState> {
   }
 
   static getDerivedStateFromProps(props, state) {
-    if ('value' in props || 'min' in props || 'max' in props) {
-      const value = props.value || state.bounds;
-      const nextBounds = value.map((v, i) =>
+    if (!('value' in props || 'min' in props || 'max' in props)) return null;
+
+    const value = props.value || state.bounds;
+    let nextBounds = value.map((v, i) =>
+      trimAlignValue({
+        value: v,
+        handle: i,
+        bounds: state.bounds,
+        props,
+      }),
+    );
+
+    if (state.bounds.length === nextBounds.length) {
+      if (nextBounds.every((v, i) => v === state.bounds[i])) {
+        return null;
+      }
+    } else {
+      nextBounds = value.map((v, i) =>
         trimAlignValue({
           value: v,
           handle: i,
-          bounds: state.bounds,
           props,
         }),
       );
-      if (
-        nextBounds.length === state.bounds.length &&
-        nextBounds.every((v, i) => v === state.bounds[i])
-      ) {
-        return null;
-      }
-      return {
-        ...state,
-        bounds: nextBounds,
-      };
     }
-    return null;
+
+    return {
+      ...state,
+      bounds: nextBounds,
+    };
   }
 
   componentDidUpdate(prevProps, prevState) {

diff --git a/src/Slider.tsx b/src/Slider.tsx
@@ -4,13 +4,14 @@ import warning from 'rc-util/lib/warning';
 import Track from './common/Track';
 import createSlider from './common/createSlider';
 import * as utils from './utils';
+import { GenericSliderProps, GenericSliderState } from './interface';
 
-export interface SliderProps {
+export interface SliderProps extends GenericSliderProps {
   value?: number;
   defaultValue?: number;
   min?: number;
   max?: number;
-  step?: number;
+  step?: number | null;
   prefixCls?: string;
   onChange?: (value: number) => void;
   onBeforeChange?: (value: number) => void;
@@ -27,7 +28,7 @@ export interface SliderProps {
   ariaLabelledByForHandle?: string;
   ariaValueTextFormatterForHandle?: string;
   startPoint?: number;
-  handle: (props: {
+  handle?: (props: {
     className: string;
     prefixCls?: string;
     vertical?: boolean;
@@ -47,7 +48,7 @@ export interface SliderProps {
     ref?: React.Ref<any>;
   }) => React.ReactElement;
 }
-export interface SliderState {
+export interface SliderState extends GenericSliderState {
   value: number;
   dragging: boolean;
 }
@@ -183,10 +184,14 @@ class Slider extends React.Component<SliderProps, SliderState> {
   }
 
   getLowerBound() {
-    return this.props.min;
+    const minPoint = this.props.startPoint || this.props.min;
+    return this.state.value > minPoint ? minPoint : this.state.value;
   }
 
   getUpperBound() {
+    if (this.state.value < this.props.startPoint) {
+      return this.props.startPoint;
+    }
     return this.state.value;
   }