Broadlink-reactui NPM

broadlink-reactui

broadlink-reactui 为开发设备控制面板提供了一系列react组件

安装

npm install --save broadlink-reactui

组件

跨平台通用组件

京东平台UI风格组件

组件	说明
Modal	弹出框，如confirm 、alert等。可以直接通过静态方法调用。如Modal.alert
TimePicker	时间选择插件，支持时间点与时长
Toast	toast小时，使用方法类似Modal
Scroller	非时间类型的滚动选择插件，如枚举、数字选择
Image	封装thml中的img，解决svg的适配性问题
stateful	HOC组件，接收一个key:props的map，让组件变得有状态
TransitionSwitch	让改switch下的页面切换有动画效果

dna/

智慧星设备面板组件

组件	说明
dna/ActivityIndicator	弹出框形式的加载中界面
dna/BottomButton	永远置于屏幕底部的Button
dna/Button	普通Button组件，一般与stateful-button或者stateful HOC组件配合使用
dna/CircleSelect	空调中圆形选择框的组件
dna/ColorPicker	颜色选择组件
dna/Delay	提供设置延时功能的组件，包括 ShortcutDelay（弹出框）&CustomDelay
dna/FromNowDescription	现实给定时间距离现在的描述
dna/HistoryRecord	历史记录组件
dna/LoadingPage	嵌入整个界面的加载中界面
dna/NavBar	导航栏
dna/Page	Page组件，同事提供了iphonex的实现
dna/Popup	弹出框组件
dna/SDKTimer	sdk定时组件
Slider	滑动条，基于bootstrap-slider实现
SwitchButton	checkbox风格的开关button
function-grid	HOC组件，提供枚举类型的排列、选择、disable等功能
countdown-timer	HOC组件提供最新定时倒计时功能，注入countdown prop

jd/

京东平台UI风格组件

组件	说明
jd/BottomButton	永远置于屏幕底部的Button
jd/Popup	弹出框组件
jd/MainSwitch	插座类型设备的总开关部分
jd/PowerButton	开关按钮
jd/Popup	弹出框组件
jd/FunctionBlock	京东UI上的一个功能区域，一般代表一个功能参数如 pwr、mode
jd/Slider	滑动条，基于bootstrap-slider实现
jd/SwitchButton	checkbox风格的开关button
jd/Top	头部状态显示区域（不包括导航栏）
jd/function-grid	HOC组件，提供枚举类型的排列、选择、disable等功能

gome/

国美平台UI风格组件

开发中

国际化

LocaleProvider

broalink-reactui提供了一个组件LocaleProvider用于全局配置国际化文案。 LocaleProvider基于react-intl的IntlProvider实现。增加根据navigator.languages/navigator.language中的语言信息，自动判断语言环境加载对应的语言包的功能。如果未匹配到支持的语言，则使用默认语言。

import LocaleProvider from 'broadlink-ractui/LocaleProvider';

return (
  <LocaleProvider>
    <App />
  </LocaleProvider>
);

目前支持以下语言

简体中文
英文

项目国际化

本模块不仅可以用于组件内部的国际化文案，LocaleProvider也能为使用了'broadlink-ractui'进行开发的项目进行国际化。

import React, { Component } from 'react';
import App from './panel/App';

import withLogic from 'broadlink-reactui/with-logic';
import LocaleProvider from 'broadlink-reactui/LocaleProvider';

let EnhanceApp = withLogic(App,{type:'async'});

const messages = {
    zh:{
        mainSwitch:'总开关',
        timer:'定时',
        delay:'延时',
        usbSwitch:'USB',
        lightSwitch:'夜灯',
        electricIcon:'电量'
    },
    en:{
        mainSwitch:'Main',
        timer:'Timer',
        delay:'Delay',
        usbSwitch:'USB',
        lightSwitch:'Light',
        electricIcon:'Electric'
    }
};

export default class extends Component {

    render() {
        return (
            <LocaleProvider messages={messages}>
                <EnhanceApp/>
            </LocaleProvider>
        );
    }
}

增加或者修改语言包

目前组件内部支持以下语言

简体中文（zh）
英文 (en) 如果找不到你需要的语言包，可以对照 ‘broadlink-reactui/local/en.js’

LocaleProvider.addInternalMessage 静态方法进行添加

如新增繁体中文和修改组件内部默认文案：

LocaleProvider.addInternalMessage({
    'zh-tw':{
        'internal.loading':'加載中',
        ...
    },
    'en':{
        'internal.loading':'please wait',
        ...
    }
});

组件内部国际化文案都以internal域开头。请注意区分

匹配规则

LocaleProvider会基于navigator.languages/navigator.language中的语言信息，自动判断语言环境加载对应的语言包的功能。

当前浏览器语言为 ‘zh-CN’，会有一下几种情况：

支持种类：zh en zh-cn zh-tw
选择语言：zh-CN

支持种类：zh zh-tw en
选择语言：zh

支持种类：zh-hk zh-tw zh-SG en en-us
选择语言：zh-hk zh-tw zh-SG 三者的任意一种

支持种类：en en-us fr fr-ca
选择语言：无

如果根据浏览器语言无法匹配到合适语言，会在用defaultLocale（默认：en）。再进行一次匹配，逻辑同上。如果还是没有合适匹配结果，则会报错。