{"meta":"

Guide #

\n

When To Use #

\n\n

Basic Usage #

\n

Specify language

\n

Now support four languages: Simplified Chinese, Traditional Chinese, English and Japanese.

\n
import { ConfigProvider, DatePicker } from '@alifd/next';\nimport enUS from '@alifd/next/lib/locale/en-us';\n// import zhCN from '@alifd/next/lib/locale/zh-cn';\n// import zhHK from '@alifd/next/lib/locale/zh-hk';\n// import zhTW from '@alifd/next/lib/locale/zh-tw';\n// import jaJP from '@alifd/next/lib/locale/ja-jp';\n\n// If the application directly imports the next-with-locales.js file from cdn\n// it need to import locale file in the following way\n// const { ConfigProvider, DatePicker, locales } = window.Next;\n// const enUS = locales['en-us'];\n\nclass App extends React.Component {\n    render() {\n        return (\n            <ConfigProvider locale={enUS}>\n                <DatePicker />\n            </ConfigProvider>\n        );\n    }\n}\n
\n

The passed locale object has the following format:

\n
{\n    DatePicker: {\n        datePlaceholder: 'Select date',\n        monthPlaceholder: 'Select month',\n        yearPlaceholder: 'Select year',\n        rangeStartPlaceholder: 'Start date',\n        rangeEndPlaceholder: 'End date',\n        ok: 'OK',\n        clear: 'Clear'\n    },\n    Dialog: {\n        // ...\n    },\n    // ...\n}\n
\n

Modify the component class name prefix

\n
    \n
  1. \n

    Wrapper ConfigProvider for your application and set the custom prefix

    \n

    entry.jsx

    \n
    class App extends React.Component {\n    render() {\n        return (\n            <ConfigProvider prefix="my-">\n                <div>\n                    <Input />\n                    <Button>Submit</Button>\n                </div>\n            </ConfigProvider>\n        );\n    }\n}\n
    \n
    2. \n
  2. \n

    Set the $css-prefix to the same value before importing the theme scss file in the scss entry file.

    \n

    entry.scss

    \n
    $css-prefix: 'my-';\n@import '~@alifd/theme-xxx/index.scss';\n
    \n
    3. \n
\n

Enable Pure Render

\n
import { ConfigProvider, DatePicker } from '@alifd/next';\n\nclass App extends React.Component {\n    render() {\n        return (\n            <ConfigProvider pure>\n                <DatePicker />\n            </ConfigProvider>\n        );\n    }\n}\n
\n

How to make the component support ConfigProvider ？

\n
import { ConfigProvider } from '@alifd/next';\nimport locale from './locale';\n\nconst { config } = ConfigProvider;\n\nclass Component extends React.Component {\n    static propTypes = {\n        prefix: PropTypes.string,\n        locale: PropTypes.object,\n        pure: PropTypes.bool,\n    };\n\n    static defaultProps = {\n        prefix: 'next-',\n        locale: locale,\n        pure: false,\n    };\n\n    render() {\n        const { prefix, locale, pure } = this.props;\n        // ...\n    }\n}\n\nexport default config(Component);\n
\n","api":"

API #

\n

ConfigProvider #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault ValueRequired
prefixPrefix of component classNamestring-
pureEnable the Pure Render mode, it will improve performance, but it will also have side effectsboolean-
deviceResponsive of deviceDeviceType-
rtlEnable right to left modeboolean-
errorBoundaryTurn errorBoundary on or notErrorBoundaryTypefalse
warningWhether to display the warning prompt for component properties being deprecated in development modebooleantrue
localeLocale object for componentsPartial<Locale>-
popupContainerShell container nodePopupContainerType-
childrenChildren nodesReact.ReactNode-
defaultPropsConfigSet default props of components in batchesRecord<string, object>-
\n

DeviceType #

\n
export type DeviceType = 'tablet' | 'desktop' | 'phone';\n
\n

PopupContainerType #

\n
export type PopupContainerType = string | HTMLElement | ((target: HTMLElement) => HTMLElement);\n
\n\n

ConfigProvider.config(Component) #

\n

Pass the component and generate the HOC that is controlled by the ConfigProvider. If the component does not declare the shouldComponentUpdate method, the following shouldComponentUpdate method is added to support the pure property of the ConfigProvider.

\n
Component.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {\n    if (this.props.pure) {\n        return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);\n    }\n\n    return true;\n};\n
\n

ConfigProvider.getContextProps(props, displayName) #

\n

Pass the props and displayName of the component to get the object containing preifx/locale/pure calculated by childContext, it is generally used to generate components that are separated from the component tree through static methods.

\n

ConfigProvider.getContext() #

\n

You can get the context of ConfigProvider via this method. The format of the value returned as follows. For multiple ConfigProvider nested, the results will be merged and the nearer the higher priority。

\n
{\n    prefix: nextPrefix,\n    locale: nextLocale,\n    pure: nextPure,\n    warning: nextWarning\n}\n
\n

ConfigProvider.initLocales(locales) #

\n

Config locales, together with method ConfigProvider.setLanguage to specify the language package

\n
ConfigProvider.initLocales({\n    'zh-cn': {},\n    'en-us': {},\n});\n
\n

ConfigProvider.setLanguage(language) #

\n

Set language, the parameter language needs to be one of the keys of locales which is the input of ConfigProvider.initLocales. zh-cn by default.

\n
ConfigProvider.setLanguage('zh-cn');\n
\n

ConfigProvider.setLocale(locale) #

\n

Set language package directly.

\n
// The effect is the same as using ConfigProvider.initLocales and ConfigProvider.setLanguage\nConfigProvider.setLocale({\n    DatePicker: {},\n    Dialog: {},\n});\n
\n

ConfigProvider.setDirection(dir) #

\n

Set dir, when it is rtl, dir="rtl" will be added on the DOM element of each component's root node.

\n
ConfigProvider.setDirection('rtl');\n
\n

ConfigProvider.getLocale() #

\n

Return the setted language package.

\n

ConfigProvider.getLanguage() #

\n

Return the language's name.

\n

ConfigProvider.getDirection() #

\n

Return the direction.

\n\n

Note #

\n

Reduce moment size built with webpack #

\n

Next 1.x will use moment as its peerDependencies instead of dependencies, so the user needs to import the moment's cdn file moment-with-locales.js or the local moment module into his own application. For the latter, due to the moment has such code: require('./locale/' + name) to import locale files, if built with webpack, it will be packaged into all locale files to increase the size of files. There are two main solutions in the current community:

\n
const webpack = require('webpack');\n\nmodule.exports = {\n    // ...\n    plugins: [\n        // Package the specified language files\n        new webpack.ContextReplacementPlugin(/moment[\\/\\\\]locale$/, /zh-cn|ja/),\n        // Only package the language files referenced, and should add `import 'moment/locale/zh-cn';` in the application\n        // new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)\n    ],\n};\n
\n

Add displayName for the custom component #

\n

ConfigProvider use a Component's displayName or name to get its locale. However, the name of the function may be modified in the process of compression and uglifying. Therefore, if you want to support multi-language, you shoul add displayName to the component manually:

\n
class CustomComponent extends React.Component {\n    static displayName = 'CustomComponent';\n    // ...\n}\n
\n

Or use babel-plugin-transform-react-es6-displayname to add displayName during compilation automatically.

\n

Get the internal component's reference of the HOC #

\n

Due to the limit of the HOC itself, we can't get the reference of an internal component and call some of its internal methods as below:

\n
class App extends React.Component {\n    componentDidMount() {\n        // throw an error\n        this.refs.hoc.someMethod();\n    }\n\n    render() {\n        return <HOC ref="hoc" />;\n    }\n}\n
\n

To solve this problem, we provide a method called getInstance of the HOC generated by calling the config method. You can call it as below:

\n
class App extends React.Component {\n    componentDidMount() {\n        this.refs.hoc.getInstance().someMethod();\n    }\n\n    render() {\n        return <HOC ref="hoc" />;\n    }\n}\n
\n"}