nuke-theme-provider - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

docs/basic.md

@@ -1,6 +0,6 @@
-# 组件特性1
+# ThemeProvider
 
 - order: 0
 
-简单的文档描述
+主题注入、MD 注入demo
 
@@ -14,3 +14,21 @@ ---
 import View from 'nuke-view';
+import Button from 'nuke-button';
+import Page from 'nuke-page';
+import { StyleProvider } from 'nuke-theme-provider';
 
+let orange = {
+    Core:{
+        [`color-brand1-1`]: '#FFF0E6',
+        [`color-brand1-6`]: '#FF6A00',
+        [`color-brand1-9`]: '#E35300'
+    }
+};
+let md = {
+    Core:{
+        [`color-brand1-1`]: '#00BBD3',
+        [`color-brand1-6`]: '#009688',
+        [`color-brand1-9`]: '#0096A6'
+    }
+};
+
 let App = class NukeDemoIndex extends Component {
@@ -20,15 +38,38 @@ constructor() {
     }
-
     render() {
         return (
-            <View>
+            <Page title="ThemeProvider">
+            
+                <Page.Intro main="style"></Page.Intro>
+                <StyleProvider style={orange}>
+                    <Button.Group block style={styles.btns}>
+                        <Button type="primary" style={styles.btn}>主操作</Button>
+                        <Button type="secondary" style={styles.btn}>次要操作</Button>
+                        <Button type="normal" style={styles.btn}>普通</Button>
+                    </Button.Group>
+                </StyleProvider>
                 
-            </View>
-
+                <Page.Intro main="material design 风格"></Page.Intro>
+                <StyleProvider style={md} androidConfigs={{rippleEnabled:true}}>
+                    <Button.Group block style={styles.btns}>
+                        <Button type="primary" rect style={styles.btn}>主操作</Button>
+                        <Button type="secondary" rect style={styles.btn}>次要操作</Button>
+                        <Button type="normal" rect style={styles.btn}>普通</Button>
+                    </Button.Group>
+                </StyleProvider>
+            </Page>
         );
     }
 }
-
+const styles = {
+    btns:{
+        margin:'30rem',
+    },
+    btn:{
+        marginBottom:'20rem'
+    }
+}
 render(<App/>);
 
+
 ````

HISTORY.md

 # Changelog 
 
 
+## 1.0.1 / 2017-10-21 
+
+  * [[a5debbd](http://gitlab.alibaba-inc.com/nuke/theme-provider/commit/a5debbd18e6cbfa480982824f50a3a56257e66d0)] - `feat` lodash minimize 
+  * [[82575c4](http://gitlab.alibaba-inc.com/nuke/theme-provider/commit/82575c4e26750590a8690a59d9e90b8315f3bbab)] - `fix` bugfixes 
+  * [[2c1264e](http://gitlab.alibaba-inc.com/nuke/theme-provider/commit/2c1264e57539d79e60a23be82b7c2812bb488578)] - `feat` add androidConfigs inject 
+
 ## 1.0.0 / 2017-09-11 
@@ -5,0 +11,0 @@

lib/connect-style.js

@@ -17,5 +17,5 @@ 'use strict';
 
-var _lodash = require('lodash');
+var _lodash = require('lodash.pickby');
 
-var _ = _interopRequireWildcard(_lodash);
+var _lodash2 = _interopRequireDefault(_lodash);
 
@@ -26,4 +26,2 @@ var _theme = require('./theme');
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -84,3 +82,3 @@
 
-  return _.pickBy(componentStyle, function (value, key) {
+  return (0, _lodash2.default)(componentStyle, function (value, key) {
 
@@ -106,16 +104,2 @@ var nextPath = [].concat(_toConsumableArray(parentPath));
 
-    // if (!_.isPlainObject(componentStyle)) {
-    //   throwConnectStyleError(
-    //     'Component style must be plain object',
-    //     componentDisplayName
-    //   );
-    // }
-
-    // if (!_.isString(componentStyleName)) {
-    //   throwConnectStyleError(
-    //     'Component Style Name must be string',
-    //     componentDisplayName
-    //   );
-    // }
-
     var StyledComponent = function (_Component) {
@@ -127,3 +111,2 @@ _inherits(StyledComponent, _Component);
 
-        // console.log(context.parentPath);
         var _this = _possibleConstructorReturn(this, (StyledComponent.__proto__ || Object.getPrototypeOf(StyledComponent)).call(this, props, context));
@@ -133,2 +116,3 @@
         var theme = getTheme(context);
+        var testStyle = _this.getStyleFromKlsName(props.klassName);
         // const themeStyle = theme.getComponentRelavantStyle(this.displayName);
@@ -144,5 +128,2 @@ _this.displayName = componentDisplayName;
           componentStyle: componentStyle,
-          // AddedProps are additional WrappedComponent props
-          // Usually they are set trough alternative ways,
-          // such as theme style, or trough options
           addedProps: _this.resolveAddedProps()
@@ -154,2 +135,7 @@ };
       _createClass(StyledComponent, [{
+        key: 'getStyleFromKlsName',
+        value: function getStyleFromKlsName(klassName) {
+          // console.log(klassName);
+        }
+      }, {
         key: 'getFinalStyle',
@@ -156,0 +142,0 @@ value: function getFinalStyle(componentStyle, context, style) {

lib/style-provider.js

@@ -37,2 +37,3 @@ 'use strict';
       theme: _this.createTheme(props)
+
     };
@@ -46,3 +47,4 @@ return _this;
       return {
-        theme: this.state.theme
+        theme: this.state.theme,
+        androidConfigs: this.getAndroidConfigs(this.props)
       };
@@ -65,2 +67,7 @@ }
   }, {
+    key: 'getAndroidConfigs',
+    value: function getAndroidConfigs(props) {
+      return props.androidConfigs || {};
+    }
+  }, {
     key: 'render',
@@ -67,0 +74,0 @@ value: function render() {

package.json

 {
   "name": "nuke-theme-provider",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "主题换肤",
@@ -48,9 +48,10 @@ "main": "lib/index",
     "hoist-non-react-statics": "^2.3.0",
-    "lodash": "^4.17.4",
+    "lodash.pickby": "^4.6.0",
     "nuke-core": "^1.x.x"
   },
   "devDependencies": {
+    "nuke-button": "^1.x.x",
     "nuke-page": "^0.x.x",
-    "rax-view": "^0.x.x",
-    "rax-text": "^0.x.x"
+    "rax-text": "^0.x.x",
+    "rax-view": "^0.x.x"
   },
@@ -57,0 +58,0 @@ "publishConfig": {

README.md

 # ThemeProvider
+
+- category: Util
+- chinese: 主题注入
+- type: 工具
+
+---
+
+## 何时使用
+
+当你需要全局换肤的时候
+
+
+## API
+
+### StyleProvider
+
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+style | 需要替换的主题变量集合 | obj | 无
+androidConfigs | 安卓 md 相关配置，如{rippleEnabled:false} | obj|无
+
+- style
+
+  style 注入提供了主题换肤能力，使用 style 注入变量后，可以直接替换全局的颜色、大小配置。
+
+  使用 demo:
+
+  ````js
+  import { StyleProvider } from 'nuke-theme-provider';
+
+  let orange = {
+      Core:{
+          [`color-brand1-1`]: '#FFF0E6', // [主品牌色-浅]
+          [`color-brand1-6`]: '#FF6A00', // [主品牌色-常规]
+          [`color-brand1-9`]: '#E35300'  // [主品牌色-深]
+      },
+      
+  };
+  <StyleProvider style={orange}>          
+       <Button type="primary" style={styles.btn}>主操作</Button>
+  </StyleProvider>
+  ````
+
+- androidConfigs
+
+  androidConfigs 是为安卓定制，主要用于 MD 开关的开启、关闭。当前开放的 api 为：
+
+  ```
+  {
+      rippleEnabled:true // 是否开启水波纹特效
+  }
+  ```
+
+  使用 demo:
+
+  ````js
+  import { StyleProvider } from 'nuke-theme-provider';
+
+  <StyleProvider androidConfigs={{rippleEnabled:true}}>          
+       <Button type="primary" style={styles.btn}>主操作</Button>
+  </StyleProvider>
+  ````

theme/index.jsx

@@ -1,5 +0,22 @@
-/** @jsx createElement */
 import {createElement, Component,render} from 'rax';
 import View from 'nuke-view';
+import Button from 'nuke-button';
+import { StyleProvider } from 'nuke-theme-provider';
 
+let orange = {
+    Core:{
+        [`color-brand1-1`]: '#FFF0E6',
+        [`color-brand1-6`]: '#FF6A00',
+        [`color-brand1-9`]: '#E35300'
+    }
+};
+let md = {
+    Core:{
+        [`color-brand1-1`]: '#00BBD3',
+        [`color-brand1-6`]: '#009688',
+        [`color-brand1-9`]: '#0096A6'
+    }
+};
+
+
 let App = class NukeDemoIndex extends Component {
@@ -9,12 +26,35 @@ constructor() {
     }
-
     render() {
         return (
-            <View>
-            </View>
-
+            <Page title="ThemeProvider">
+            
+                <Page.Intro main="style"></Page.Intro>
+                <StyleProvider style={orange}>
+                    <Button.Group block style={styles.btns}>
+                        <Button type="primary" style={styles.btn}>主操作</Button>
+                        <Button type="secondary" style={styles.btn}>次要操作</Button>
+                        <Button type="normal" style={styles.btn}>普通</Button>
+                    </Button.Group>
+                </StyleProvider>
+                
+                <Page.Intro main="material design 风格"></Page.Intro>
+                <StyleProvider style={md} androidConfigs={{rippleEnabled:true}}>
+                    <Button.Group block style={styles.btns}>
+                        <Button type="primary" rect style={styles.btn}>主操作</Button>
+                        <Button type="secondary" rect style={styles.btn}>次要操作</Button>
+                        <Button type="normal" rect style={styles.btn}>普通</Button>
+                    </Button.Group>
+                </StyleProvider>
+            </Page>
         );
     }
 }
-
-render(<App/>);
+const styles = {
+    btns:{
+        margin:'30rem',
+    },
+    btn:{
+        marginBottom:'20rem'
+    }
+}
+render(<App/>);

No alert changes

Improved metrics

Total package byte prevSize

25637

increased by21.91%

Lines of code

448

increased by7.95%

Number of lines in readme file

64

increased by3100%

Worsened metrics

Dev dependency count

4

increased by33.33%

Dependency changes

• + Addedlodash.pickby@^4.6.0

• + Addedlodash.pickby@4.6.0(transitive)

• - Removedlodash@^4.17.4

• - Removedlodash@4.17.21(transitive)