Support for global configuration of the className prefix

package.json

@@ -55,7 +55,7 @@
     "recompose": "^0.26.0",
     "rsuite-intl": "~1.0.4",
     "rsuite-notification": "~3.0.2",
-    "rsuite-table": "~3.1.3",
+    "rsuite-table": "^3.1.4",
     "rsuite-utils": "~1.4.3",
     "schema-typed": "~0.2.0"
   },

src/Alert.js

@@ -5,6 +5,13 @@ import { Alert } from 'rsuite-notification';
 
 import Icon from './Icon';
 import { STATUS_ICON_NAMES } from './utils/constants';
+import { getClassNamePrefix } from './utils/prefix';
+
+const defaultOptions = {
+  classPrefix: `${getClassNamePrefix()}notification`
+};
+
+Alert.config(defaultOptions);
 
 function appendIcon(type: string, content: string) {
   return (
@@ -33,6 +40,9 @@ export default {
   warning: proxy('warning'),
   error: proxy('error'),
   config(options: Options) {
-    Alert.config(options);
+    Alert.config({
+      ...defaultOptions,
+      ...options
+    });
   }
 };

src/AutoComplete.js

@@ -5,13 +5,13 @@ import _ from 'lodash';
 import setStatic from 'recompose/setStatic';
 import OverlayTrigger from 'rsuite-utils/lib/Overlay/OverlayTrigger';
 import shallowEqual from 'rsuite-utils/lib/utils/shallowEqual';
-import { MenuWrapper } from 'rsuite-utils/lib/Picker';
 
 import Input from './Input';
 import AutoCompleteItem from './AutoCompleteItem';
 import onMenuKeyDown from './_picker/onMenuKeyDown';
+import MenuWrapper from './_picker/MenuWrapper';
 import { defaultProps, getUnhandledProps, prefix } from './utils';
-import { globalKey } from './utils/prefix';
+import { getClassNamePrefix } from './utils/prefix';
 import type { Placement } from './utils/TypeDefinition';
 
 type DefaultEvent = SyntheticEvent<*>;
@@ -258,7 +258,7 @@ class AutoComplete extends React.Component<Props, State> {
     const classes = classNames(
       this.addPrefix('menu'),
       menuClassName,
-      `${globalKey}placement-${_.kebabCase(placement)}`
+      `${getClassNamePrefix()}placement-${_.kebabCase(placement)}`
     );
     const items = data.filter(this.shouldDisplay);
 

src/Cascader/Dropdown.js

@@ -5,14 +5,14 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import { IntlProvider, FormattedMessage } from 'rsuite-intl';
 import OverlayTrigger from 'rsuite-utils/lib/Overlay/OverlayTrigger';
-import { MenuWrapper } from 'rsuite-utils/lib/Picker';
 import { findNodeOfTree, shallowEqual, shallowEqualArray } from 'rsuite-utils/lib/utils';
 import { polyfill } from 'react-lifecycles-compat';
 
 import { defaultProps, prefix, getUnhandledProps, createChainedFunction } from '../utils';
 import stringToObject from '../utils/stringToObject';
 import DropdownMenu from './DropdownMenu';
 import PickerToggle from '../_picker/PickerToggle';
+import MenuWrapper from '../_picker/MenuWrapper';
 import getToggleWrapperClassName from '../_picker/getToggleWrapperClassName';
 import type { Placement } from '../utils/TypeDefinition';
 

src/CheckPicker/Dropdown.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
 import OverlayTrigger from 'rsuite-utils/lib/Overlay/OverlayTrigger';
-import { SearchBar, MenuWrapper } from 'rsuite-utils/lib/Picker';
 import {
   reactToString,
   filterNodesOfTree,
@@ -19,6 +18,8 @@ import DropdownMenuItem from '../_picker/DropdownMenuCheckItem';
 import PickerToggle from '../_picker/PickerToggle';
 import getToggleWrapperClassName from '../_picker/getToggleWrapperClassName';
 import onMenuKeyDown from '../_picker/onMenuKeyDown';
+import MenuWrapper from '../_picker/MenuWrapper';
+import SearchBar from '../_picker/SearchBar';
 import type { Placement } from '../utils/TypeDefinition';
 
 type DefaultEvent = SyntheticEvent<*>;

src/CheckTreePicker/CheckTree.js

@@ -14,13 +14,14 @@ import {
   tplTransform
 } from 'rsuite-utils/lib/utils';
 
-import { SearchBar, Toggle, MenuWrapper } from 'rsuite-utils/lib/Picker';
 import CheckTreeNode from './CheckTreeNode';
 import { CHECK_STATE } from '../utils/constants';
 import { clone, defaultProps, prefix, getUnhandledProps, createChainedFunction } from '../utils';
 import PickerToggle from '../_picker/PickerToggle';
 import getToggleWrapperClassName from '../_picker/getToggleWrapperClassName';
 import onMenuKeyDown from '../_picker/onMenuKeyDown';
+import MenuWrapper from '../_picker/MenuWrapper';
+import SearchBar from '../_picker/SearchBar';
 
 type DefaultEvent = SyntheticEvent<*>;
 type Placement =
@@ -326,7 +327,7 @@ class CheckTree extends React.Component<Props, States> {
   getElementByDataKey = (dataKey: string) => {
     const ele = findDOMNode(this.nodeRefs[dataKey]);
     if (ele instanceof Element) {
-      return ele.querySelector('.rs-picker-checktree-view-checknode-label');
+      return ele.querySelector(`.${this.addPrefix('checktree-view-checknode-label')}`);
     }
     return null;
   };

src/DatePicker/DatePicker.js

@@ -6,10 +6,10 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import { IntlProvider } from 'rsuite-intl';
 import OverlayTrigger from 'rsuite-utils/lib/Overlay/OverlayTrigger';
-import { MenuWrapper } from 'rsuite-utils/lib/Picker';
 import { polyfill } from 'react-lifecycles-compat';
 
 import PickerToggle from '../_picker/PickerToggle';
+import MenuWrapper from '../_picker/MenuWrapper';
 import getToggleWrapperClassName from '../_picker/getToggleWrapperClassName';
 import Calendar from '../Calendar';
 import Toolbar from './Toolbar';

src/DateRangePicker/DatePicker.js

@@ -20,7 +20,8 @@ type Props = {
   onChangeCalendarDate?: (index: number, nextPageDate: moment$Moment) => void,
   isoWeek?: boolean,
   limitStartYear?: number,
-  limitEndYear?: number
+  limitEndYear?: number,
+  classPrefix?: string
 };
 
 type State = {
@@ -89,13 +90,15 @@ class DatePicker extends React.Component<Props, State> {
       disabledDate,
       isoWeek,
       limitStartYear,
-      limitEndYear
+      limitEndYear,
+      classPrefix
     } = this.props;
 
     const { calendarState } = this.state;
 
     return (
       <Calendar
+        classPrefix={classPrefix}
         disabledDate={disabledDate}
         format={format}
         value={value}

src/DateRangePicker/DateRangePicker.js

@@ -6,10 +6,10 @@ import classNames from 'classnames';
 import { IntlProvider } from 'rsuite-intl';
 import OverlayTrigger from 'rsuite-utils/lib/Overlay/OverlayTrigger';
 import _ from 'lodash';
-import { MenuWrapper } from 'rsuite-utils/lib/Picker';
 
 import { defaultProps, getUnhandledProps, prefix, createChainedFunction } from '../utils';
 import PickerToggle from '../_picker/PickerToggle';
+import MenuWrapper from '../_picker/MenuWrapper';
 import getToggleWrapperClassName from '../_picker/getToggleWrapperClassName';
 import Toolbar from './Toolbar';
 import DatePicker from './DatePicker';
@@ -464,7 +464,15 @@ class DateRangePicker extends React.Component<Props, State> {
   container = null;
 
   renderDropdownMenu() {
-    const { placement, menuClassName, ranges, isoWeek, limitStartYear, limitEndYear } = this.props;
+    const {
+      placement,
+      menuClassName,
+      ranges,
+      isoWeek,
+      limitStartYear,
+      limitEndYear,
+      classPrefix
+    } = this.props;
     const { calendarDate, selectValue, hoverValue, doneSelected } = this.state;
 
     const classes = classNames(

src/Input.js

@@ -27,7 +27,6 @@ type Props = {
 
 class Input extends React.Component<Props> {
   static defaultProps = {
-    classPrefix: 'input',
     type: 'text'
   };
 

src/InputPicker/Dropdown.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
 import OverlayTrigger from 'rsuite-utils/lib/Overlay/OverlayTrigger';
-import { MenuWrapper } from 'rsuite-utils/lib/Picker';
 import InputAutosize from './InputAutosize';
 import { getWidth } from 'dom-lib';
 import {
@@ -29,6 +28,7 @@ import DropdownMenuCheckItem from '../_picker/DropdownMenuCheckItem';
 import getToggleWrapperClassName from '../_picker/getToggleWrapperClassName';
 import onMenuKeyDown from '../_picker/onMenuKeyDown';
 import PickerToggle from '../_picker/PickerToggle';
+import MenuWrapper from '../_picker/MenuWrapper';
 import InputSearch from './InputSearch';
 import Tag from '../Tag';
 import type { Placement } from '../utils/TypeDefinition';

src/Nav.js

@@ -9,7 +9,7 @@ import shallowEqual from 'rsuite-utils/lib/utils/shallowEqual';
 
 import NavItem from './NavItem';
 import { prefix, getUnhandledProps, defaultProps, ReactChildren } from './utils';
-import { globalKey } from './utils/prefix';
+import { getClassNamePrefix } from './utils/prefix';
 
 type Props = {
   classPrefix: string,
@@ -60,11 +60,12 @@ class Nav extends React.Component<Props> {
     } = this.context;
 
     const addPrefix = prefix(classPrefix);
+    const globalClassNamePrefix = getClassNamePrefix();
 
     const classes = classNames(classPrefix, addPrefix(appearance), className, {
-      [`${globalKey}navbar-nav`]: navbar,
-      [`${globalKey}navbar-right`]: pullRight,
-      [`${globalKey}sidenav-nav`]: sidenav,
+      [`${globalClassNamePrefix}navbar-nav`]: navbar,
+      [`${globalClassNamePrefix}navbar-right`]: pullRight,
+      [`${globalClassNamePrefix}sidenav-nav`]: sidenav,
       [addPrefix('horizontal')]: navbar || (!vertical && !sidenav),
       [addPrefix('vertical')]: vertical || sidenav,
       [addPrefix('justified')]: justified,

src/Notification.js

@@ -6,6 +6,13 @@ import _ from 'lodash';
 import Icon from './Icon';
 
 import { STATUS_ICON_NAMES } from './utils/constants';
+import { getClassNamePrefix } from './utils/prefix';
+
+const defaultOptions = {
+  classPrefix: `${getClassNamePrefix()}notification`
+};
+
+Notify.config(defaultOptions);
 
 type Config = {
   title: React.Node,

src/SelectPicker/Dropdown.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
 import OverlayTrigger from 'rsuite-utils/lib/Overlay/OverlayTrigger';
-import { SearchBar, MenuWrapper } from 'rsuite-utils/lib/Picker';
 import {
   reactToString,
   filterNodesOfTree,
@@ -17,6 +16,8 @@ import { defaultProps, prefix, getUnhandledProps, createChainedFunction } from '
 import DropdownMenu from '../_picker/DropdownMenu';
 import DropdownMenuItem from '../_picker/DropdownMenuItem';
 import PickerToggle from '../_picker/PickerToggle';
+import MenuWrapper from '../_picker/MenuWrapper';
+import SearchBar from '../_picker/SearchBar';
 import getToggleWrapperClassName from '../_picker/getToggleWrapperClassName';
 import onMenuKeyDown from '../_picker/onMenuKeyDown';
 import type { Placement } from '../utils/TypeDefinition';

src/TreePicker/Tree.js

@@ -10,11 +10,11 @@ import OverlayTrigger from 'rsuite-utils/lib/Overlay/OverlayTrigger';
 import _ from 'lodash';
 import { reactToString, shallowEqual, shallowEqualArray } from 'rsuite-utils/lib/utils';
 
-import { SearchBar, MenuWrapper } from 'rsuite-utils/lib/Picker';
-
 import TreeNode from './TreeNode';
 import { clone, defaultProps, prefix, getUnhandledProps, createChainedFunction } from '../utils';
 import PickerToggle from '../_picker/PickerToggle';
+import MenuWrapper from '../_picker/MenuWrapper';
+import SearchBar from '../_picker/SearchBar';
 import getToggleWrapperClassName from '../_picker/getToggleWrapperClassName';
 import onMenuKeyDown from '../_picker/onMenuKeyDown';
 
@@ -320,7 +320,7 @@ class Tree extends React.Component<Props, States> {
   getElementByDataKey = (dataKey: string) => {
     const ele = findDOMNode(this.nodeRefs[dataKey]);
     if (ele instanceof Element) {
-      return ele.querySelector('.rs-picker-tree-view-node-label');
+      return ele.querySelector(`.${this.addPrefix('tree-view-node-label')}`);
     }
     return null;
   };

src/_picker/MenuWrapper.js

@@ -0,0 +1,33 @@
+// @flow
+
+import * as React from 'react';
+import classNames from 'classnames';
+import _ from 'lodash';
+import { defaultProps } from '../utils';
+
+const placementProps = [
+  'placement',
+  'shouldUpdatePosition',
+  'arrowOffsetLeft',
+  'arrowOffsetTop',
+  'positionLeft',
+  'positionTop'
+];
+
+type Props = {
+  classPrefix?: string,
+  className?: string
+};
+
+class MenuWrapper extends React.Component<Props> {
+  render() {
+    const { className, classPrefix, ...rest } = this.props;
+    return <div {..._.omit(rest, placementProps)} className={classNames(classPrefix, className)} />;
+  }
+}
+
+const enhance = defaultProps({
+  classPrefix: 'picker-menu'
+});
+
+export default enhance(MenuWrapper);

src/_picker/SearchBar.js

@@ -0,0 +1,46 @@
+// @flow
+
+import * as React from 'react';
+
+import classNames from 'classnames';
+import { prefix, defaultProps, getUnhandledProps } from '../utils';
+
+type Props = {
+  classPrefix?: string,
+  value?: string,
+  placeholder?: string,
+  className?: string,
+  children?: React.Node,
+  onChange?: (value: string, event: SyntheticInputEvent<HTMLInputElement>) => void
+};
+
+class SearchBar extends React.Component<Props> {
+  handleChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
+    const { onChange } = this.props;
+    onChange && onChange(event.target.value, event);
+  };
+
+  render() {
+    const { value, children, className, classPrefix, placeholder, ...rest } = this.props;
+    const addPrefix = prefix(classPrefix);
+    const unhandled = getUnhandledProps(SearchBar, rest);
+
+    return (
+      <div {...unhandled} className={classNames(classPrefix, className)}>
+        <input
+          className={addPrefix('input')}
+          value={value}
+          onChange={this.handleChange}
+          placeholder={placeholder}
+        />
+        {children}
+      </div>
+    );
+  }
+}
+
+const enhance = defaultProps({
+  classPrefix: 'picker-search-bar'
+});
+
+export default enhance(SearchBar);

src/utils/defaultProps.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { globalKey } from './prefix';
+import { getClassNamePrefix } from './prefix';
 
 type Props = {
   classPrefix: string,
@@ -18,7 +18,7 @@ export default (props: Props): any => {
 
       static defaultProps = {
         ...WrappedComponent.defaultProps,
-        classPrefix: classPrefix ? `${globalKey}${classPrefix}` : undefined,
+        classPrefix: classPrefix ? `${getClassNamePrefix()}${classPrefix}` : undefined,
         ...rest
       };