rsuite 4.10.1 → 4.10.5

package/src/Navbar/Navbar.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 import NavbarBody from './NavbarBody';
 import NavbarHeader from './NavbarHeader';
-import { prefix, defaultProps, createContext } from '../utils';
+import { setStatic, prefix, defaultProps, createContext } from '../utils';
 import { NavbarProps } from './Navbar.d';
 
 export const NavbarContext = createContext(null);

package/src/Pagination/Pagination.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 import PaginationButton from './PaginationButton';
 import SafeAnchor from '../SafeAnchor';
 import Icon from '../Icon';
 
-import { withStyleProps, defaultProps, getUnhandledProps } from '../utils';
+import { compose, withStyleProps, defaultProps, getUnhandledProps } from '../utils';
 import { PAGINATION_ICON_NAMES } from '../constants';
 import { PaginationProps } from './Pagination.d';
 

package/src/Rate/Rate.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
-import { defaultProps, prefix, getUnhandledProps, withStyleProps } from '../utils';
+import { compose, defaultProps, prefix, getUnhandledProps, withStyleProps } from '../utils';
 import { transformValueToCharacterMap, transformCharacterMapToValue } from './utils';
 import shallowEqualArray from '../utils/shallowEqualArray';
 import Icon from '../Icon';

package/src/Sidenav/Sidenav.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 import Transition from '../Animation/Transition';
 import shallowEqual from '../utils/shallowEqual';
 import _ from 'lodash';
 import SidenavBody from './SidenavBody';
 import SidenavHeader from './SidenavHeader';
 import SidenavToggle from './SidenavToggle';
-import { prefix, defaultProps, getUnhandledProps, createContext } from '../utils';
+import { setStatic, prefix, defaultProps, getUnhandledProps, createContext } from '../utils';
 import { SidenavProps } from './Sidenav.d';
 
 export const SidenavContext = createContext(null);

package/src/Slider/Slider.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { StandardProps } from '../@types/common';
+import { StandardProps, FormControlBaseProps } from '../@types/common';
 
-export interface SliderProps<ValueType = number> extends StandardProps {
+export interface SliderProps<ValueType = number>
+  extends StandardProps,
+    FormControlBaseProps<ValueType> {
   /** Minimum value of sliding range */
   min?: number;
 
@@ -11,12 +13,6 @@ export interface SliderProps<ValueType = number> extends StandardProps {
   /** Slide the value of one step */
   step?: number;
 
-  /** Value (Controlled) */
-  value?: ValueType;
-
-  /** Default value */
-  defaultValue?: ValueType;
-
   /** A css class to apply to the Handle node. */
   handleClassName?: string;
 
@@ -44,9 +40,6 @@ export interface SliderProps<ValueType = number> extends StandardProps {
   /** Vertical Slide */
   vertical?: boolean;
 
-  /** Callback function that changes data */
-  onChange?: (value: ValueType, event: React.MouseEvent) => void;
-
   /** Customize labels on the render ruler */
   renderMark?: (mark: number) => React.ReactNode;
 }

package/src/Steps/Steps.tsx

@@ -2,10 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 
 import StepItem from './StepItem';
-import { prefix, defaultProps, ReactChildren, isIE10 } from '../utils';
+import { setStatic, prefix, defaultProps, ReactChildren, isIE10 } from '../utils';
 import { StepsProps } from './Steps.d';
 
 class Steps extends React.Component<StepsProps> {

package/src/Table/Table.tsx

@@ -1,7 +1,6 @@
-import { setStatic, compose } from 'recompose';
 import { Table, Column, Cell, HeaderCell, ColumnGroup } from 'rsuite-table';
 
-import { defaultProps } from '../utils';
+import { setStatic, compose, defaultProps } from '../utils';
 import withLocale from '../IntlProvider/withLocale';
 import TablePagination from './TablePagination';
 

package/src/Table/TablePagination.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
 import Pagination from '../Pagination';
 import SelectPicker from '../SelectPicker';
 import Divider from '../Divider';
 
-import { prefix, tplTransform, getUnhandledProps, defaultProps } from '../utils';
+import { compose, prefix, tplTransform, getUnhandledProps, defaultProps } from '../utils';
 import withLocale from '../IntlProvider/withLocale';
 import { TablePaginationProps } from './TablePagination.d';
 

package/src/Tag/Tag.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { compose } from 'recompose';
-import { prefix, withStyleProps, defaultProps } from '../utils';
+import { compose, prefix, withStyleProps, defaultProps } from '../utils';
 import { TagProps } from './Tag.d';
 
 class Tag extends React.Component<TagProps> {

package/src/TagPicker/index.tsx

@@ -1,6 +1,4 @@
-import { compose } from 'recompose';
-
-import { defaultProps } from '../utils';
+import { compose, defaultProps } from '../utils';
 import InputPicker from '../InputPicker/InputPicker';
 import withLocale from '../IntlProvider/withLocale';
 

package/src/Timeline/Timeline.tsx

@@ -2,10 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { setStatic } from 'recompose';
 
 import TimelineItem from './TimelineItem';
-import { defaultProps, prefix, ReactChildren } from '../utils';
+import { setStatic, defaultProps, prefix, ReactChildren } from '../utils';
 import { TimelineProps } from './Timeline.d';
 
 class Timeline extends React.Component<TimelineProps> {

package/src/Timeline/TimelineItem.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
-import { prefix, defaultProps, withStyleProps } from '../utils';
+import { compose, prefix, defaultProps, withStyleProps } from '../utils';
 import { TimelineItemProps } from './TimelineItem.d';
 
 class TimelineItem extends React.Component<TimelineItemProps> {

package/src/Toggle/Toggle.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
-import { prefix, withStyleProps, defaultProps, getUnhandledProps } from '../utils';
+import { compose, prefix, withStyleProps, defaultProps, getUnhandledProps } from '../utils';
 import { ToggleProps } from './Toggle.d';
 
 interface ToggleState {

package/src/TreePicker/test/TreePickerSpec.js

@@ -2,13 +2,22 @@ import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import { findDOMNode } from 'react-dom';
+import ReactDOM, { findDOMNode } from 'react-dom';
 import { getDOMNode, getInstance } from '@test/testUtils';
 import TreePicker from '../TreePicker';
 
 Enzyme.configure({ adapter: new Adapter() });
+let container;
 
-export const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+});
 
 const data = [
   {
@@ -157,7 +166,7 @@ describe('TreePicker', () => {
   });
 
   it('Should call `onChange` callback', done => {
-    const doneOp = values => {
+    const doneOp = () => {
       done();
     };
     const instance = getDOMNode(<TreePicker inline onChange={doneOp} data={data} />);
@@ -243,7 +252,7 @@ describe('TreePicker', () => {
   });
 
   it('Should focus item by keyCode=13 ', done => {
-    const doneOp = values => {
+    const doneOp = () => {
       done();
     };
     const instance = mount(<TreePicker data={data} onChange={doneOp} inline defaultExpandAll />);
@@ -271,8 +280,6 @@ describe('TreePicker', () => {
   });
 
   it('Should load data async', () => {
-    let activeNode = null;
-    let layer = 0;
     const data = [
       {
         label: 'Master',
@@ -293,8 +300,6 @@ describe('TreePicker', () => {
 
     let newData = [];
     const mockOnExpand = (node, l, concat) => {
-      activeNode = node;
-      layer = l;
       newData = concat(data, children);
     };
 
@@ -391,13 +396,36 @@ describe('TreePicker', () => {
     assert.ok(list[0].innerText, 'Louisa');
   });
 
-  it('Should call renderValue', () => {
-    const instance1 = getDOMNode(<TreePicker value="Test" renderValue={() => '1'} />);
-    const instance2 = getDOMNode(<TreePicker value="Test" renderValue={() => null} />);
-    const instance3 = getDOMNode(<TreePicker value="Test" renderValue={() => undefined} />);
+  it('Should controlled by expandItemValues', () => {
+    const TestApp = React.forwardRef((props, ref) => {
+      const [expandItemValues, setExpandItemValues] = React.useState();
+      const pickerRef = React.useRef();
+      React.useImperativeHandle(ref, () => ({
+        picker: pickerRef.current,
+        setExpandItemValues
+      }));
+
+      return <TreePicker data={data} ref={pickerRef} expandItemValues={expandItemValues} open />;
+    });
+
+    TestApp.displayName = 'TestCheckTreePicker';
+
+    const ref = React.createRef();
+    ReactTestUtils.act(() => {
+      ReactDOM.render(<TestApp ref={ref} />, container);
+    });
 
-    assert.equal(instance1.querySelector('.rs-picker-toggle-value').innerText, '1');
-    assert.equal(instance2.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
-    assert.equal(instance3.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-tree-node-expanded').length,
+      0
+    );
+
+    ReactTestUtils.act(() => {
+      ref.current.setExpandItemValues(['Master']);
+    });
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-tree-node-expanded').length,
+      1
+    );
   });
 });

package/src/Uploader/Uploader.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { compose } from 'recompose';
 
 import IntlContext from '../IntlProvider/IntlContext';
 import withLocale from '../IntlProvider/withLocale';
 import FileItem from './UploadFileItem';
 import UploadTrigger from './UploadTrigger';
-import { prefix, ajaxUpload, defaultProps, getUnhandledProps } from '../utils';
+import { compose, prefix, ajaxUpload, defaultProps, getUnhandledProps } from '../utils';
 import { getFiles, guid } from './utils';
 import { UploaderProps, FileType } from './Uploader.d';
 
@@ -285,7 +284,7 @@ class Uploader extends React.Component<UploaderProps, UploaderState> {
       fileList: nextFileList
     };
 
-    if (nextFile.progress) {
+    if (nextFile.progress || nextFile.status === 'error') {
       const { fileMap } = this.state;
 
       fileMap[nextFile.fileKey] = {

package/src/utils/defaultProps.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { setDisplayName, wrapDisplayName } from 'recompose';
+import { setDisplayName, wrapDisplayName } from './recompose';
 import { getClassNamePrefix } from './prefix';
 import { StandardProps } from '../@types/common';
 import extendReactStatics from './extendReactStatics';

package/src/utils/index.ts

@@ -3,6 +3,7 @@ export * from './htmlPropsUtils';
 
 export { default as withStyleProps } from './withStyleProps';
 
+export * from './recompose';
 export { default as prefix, defaultClassPrefix, getClassNamePrefix, globalKey } from './prefix';
 export { default as createChainedFunction } from './createChainedFunction';
 export { default as defaultProps } from './defaultProps';

package/src/utils/recompose.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+
+interface ComponentEnhancer<TInner, TOutter> {
+  (component: React.ComponentType<TInner>): React.ComponentClass<TOutter>;
+}
+
+export function compose<TInner, TOutter>(...funcs: Function[]): ComponentEnhancer<TInner, TOutter> {
+  return funcs.reduce(
+    (a, b) => (...args) => a(b(...args)),
+    arg => arg
+  ) as ComponentEnhancer<TInner, TOutter>;
+}
+
+export function setStatic(
+  key: string,
+  value: any
+): <T extends React.ComponentType<any>>(component: T) => T {
+  return BaseComponent => {
+    /* eslint-disable no-param-reassign */
+    BaseComponent[key] = value;
+    /* eslint-enable no-param-reassign */
+    return BaseComponent;
+  };
+}
+
+export function setDisplayName(
+  displayName: string
+): <T extends React.ComponentType<any>>(component: T) => T {
+  return setStatic('displayName', displayName);
+}
+
+export function getDisplayName(component: React.ComponentType<any>): string {
+  if (typeof component === 'string') {
+    return component;
+  }
+
+  if (!component) {
+    return undefined;
+  }
+
+  return component.displayName || component.name || 'Component';
+}
+
+export function wrapDisplayName(component: React.ComponentType<any>, wrapperName: string): string {
+  return `${wrapperName}(${getDisplayName(component)})`;
+}
+
+export function setPropTypes<P>(
+  propTypes: React.ValidationMap<P>
+): <T extends React.ComponentType<P>>(component: T) => T {
+  return setStatic('propTypes', propTypes);
+}

package/src/utils/test/recomposeSpec.js

@@ -0,0 +1,107 @@
+// Ref: https://github.com/acdlite/recompose/tree/master/src/packages/recompose/__tests__
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  compose,
+  setStatic,
+  setDisplayName,
+  getDisplayName,
+  wrapDisplayName,
+  setPropTypes
+} from '../recompose';
+
+describe('compose', function() {
+  it('composes from right to left', () => {
+    const double = x => x * 2;
+    const square = x => x * x;
+    expect(compose(square)(5)).to.equal(25);
+    expect(compose(square, double)(5)).to.equal(100);
+    expect(compose(double, square, double)(5)).to.equal(200);
+  });
+
+  it('can be seeded with multiple arguments', () => {
+    const square = x => x * x;
+    const add = (x, y) => x + y;
+    expect(compose(square, add)(1, 2)).to.equal(9);
+  });
+
+  it('returns the identity function if given no arguments', () => {
+    expect(compose()(1, 2)).to.equal(1);
+    expect(compose()(3)).to.equal(3);
+    expect(compose()()).to.equal(undefined);
+  });
+
+  it('the first function if given only one', () => {
+    const fn = x => x * x;
+    expect(compose(fn)(3)).to.equal(fn(3));
+  });
+});
+
+describe('setStatic', () => {
+  it('sets a static property on the base component', () => {
+    const BaseComponent = () => <div />;
+    const NewComponent = setStatic('propTypes', { foo: PropTypes.object })(BaseComponent);
+
+    expect(NewComponent.propTypes).to.eql({
+      foo: PropTypes.object
+    });
+  });
+});
+
+describe('setDisplayName', () => {
+  it('sets a static property on the base component', () => {
+    const BaseComponent = () => <div />;
+    const NewComponent = setDisplayName('Foo')(BaseComponent);
+    expect(NewComponent.displayName).to.equal('Foo');
+  });
+});
+
+describe('getDisplayName', () => {
+  it('gets the display name of a React component', () => {
+    class SomeComponent extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    class SomeOtherComponent extends React.Component {
+      static displayName = 'CustomDisplayName';
+      render() {
+        return <div />;
+      }
+    }
+
+    function YetAnotherComponent() {
+      return <div />;
+    }
+
+    expect(getDisplayName(SomeComponent)).to.equal('SomeComponent');
+    expect(getDisplayName(SomeOtherComponent)).to.equal('CustomDisplayName');
+    expect(getDisplayName(YetAnotherComponent)).to.equal('YetAnotherComponent');
+    expect(getDisplayName(() => <div />)).to.equal('Component');
+    expect(getDisplayName('div')).to.equal('div');
+  });
+});
+
+describe('wrapDisplayName', () => {
+  it('wraps the display name of a React component with the name of an HoC, Relay-style', () => {
+    class SomeComponent extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    expect(wrapDisplayName(SomeComponent, 'someHoC')).to.equal('someHoC(SomeComponent)');
+  });
+});
+
+describe('setPropTypes', () => {
+  it(' sets a static property on the base component', () => {
+    const BaseComponent = () => <div />;
+    const NewComponent = setPropTypes({ foo: PropTypes.object })(BaseComponent);
+
+    expect(NewComponent.propTypes).to.eql({
+      foo: PropTypes.object
+    });
+  });
+});

package/src/utils/treeUtils.ts

@@ -123,7 +123,10 @@ export function treeDeprecatedWarning(
  * @param b
  */
 export function compareArray(a: any[], b: any[]) {
-  return _.isArray(a) && _.isArray(b) && !shallowEqualArray(a, b);
+  if (!(_.isArray(a) && _.isArray(b))) {
+    return a !== b;
+  }
+  return !shallowEqualArray(a, b);
 }
 
 /**

package/src/utils/withStyleProps.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setDisplayName, wrapDisplayName, setPropTypes } from 'recompose';
+import { setDisplayName, wrapDisplayName, setPropTypes } from './recompose';
 
 import { TypeAttributes } from '../@types/common';
 import prefix from './prefix';