npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

broadlink-reactui

v1.0.10

Published

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

Downloads

8

Readme

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-intlIntlProvider实现。 增加根据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)。再进行一次匹配,逻辑同上。如果还是没有合适匹配结果,则会报错。

定制主题

broalink-reactui提供了组件主题色的设置功能。
在项目中的package.json中加入theme属性即可

"theme": { "@theme-color": "#33b887" }
定义 theme 属性时,需要配合利用 less-loader 的 modifyVars 配置来覆盖原来的样式变量。