Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

nuke-theme-provider

Package Overview
Dependencies
Maintainers
2
Versions
56
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuke-theme-provider - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

93

docs/basic.md

@@ -5,3 +5,3 @@ # ThemeProvider

主题注入、MD 注入demo
主题注入、MD 注入 demo

@@ -13,3 +13,3 @@ ---

/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';

@@ -21,56 +21,57 @@ import Button from 'nuke-button';

let orange = {
Core:{
[`color-brand1-1`]: '#FFF0E6',
[`color-brand1-6`]: '#FF6A00',
[`color-brand1-9`]: '#E35300'
}
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'
}
Core: {
[`color-brand1-1`]: '#00BBD3',
[`color-brand1-6`]: '#009688',
[`color-brand1-9`]: '#0096A6'
}
};
let App = class NukeDemoIndex extends Component {
constructor() {
super();
}
render() {
return (
<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>
);
}
constructor() {
super();
}
render() {
return (
<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>
);
}
}
const styles = {
btns:{
margin:'30rem',
},
btn:{
marginBottom:'20rem'
}
btns: {
margin: '30rem',
},
btn: {
marginBottom: '20rem'
}
}
render(<App/>);
render(<App />);
````

4

HISTORY.md
# Changelog
## 1.0.5 / 2017-12-08
* [[a4e338e](http://gitlab.alibaba-inc.com/nuke/theme-provider/commit/a4e338e5fe6dbea7fc5e101689db74aab8e9e884)] - `feat` add static component support, update demo
## 1.0.4 / 2017-11-16

@@ -5,0 +9,0 @@

50

lib/connect-style.js

@@ -17,6 +17,2 @@ 'use strict';

var _lodash = require('lodash.pickby');
var _lodash2 = _interopRequireDefault(_lodash);
var _theme = require('./theme');

@@ -28,2 +24,4 @@

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -33,6 +31,7 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** @jsx createElement */
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
// import pickby from 'lodash.pickby';
function throwConnectStyleError(errorMessage, componentDisplayName) {

@@ -64,4 +63,7 @@ throw Error(errorMessage + ' - when connecting ' + componentDisplayName + ' component to style.');

// }
var cacheStatic;
function getTheme(context) {
if (context.theme) {
cacheStatic = context.theme;
}
// Fallback to a default theme if the component isn't

@@ -71,3 +73,3 @@ // rendered in a StyleProvider.

// var a = Theme.get();
return context.theme || _theme2.default.getDefaultTheme();
return context.theme || cacheStatic || _theme2.default.getDefaultTheme();
}

@@ -82,13 +84,17 @@

*/
function injectToChildFilter(componentStyle, componentDisplayName) {
var parentPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
return (0, _lodash2.default)(componentStyle, function (value, key) {
var nextPath = [].concat(_toConsumableArray(parentPath));
nextPath.push(componentDisplayName);
var maxCurrentStyleKey = nextPath.join('.');
//当前 keyPath 是否是currentPath 的子路径， 例如 keyPath : Cart.Item.Button, currentPath: Cart.Item, return true
return key.indexOf(maxCurrentStyleKey) === 0 && key.length > maxCurrentStyleKey;
});
}
// function injectToChildFilter(
// componentStyle,
// componentDisplayName,
// parentPath = []
// ) {
// return pickby(componentStyle, (value, key) => {
// let nextPath = [...parentPath];
// nextPath.push(componentDisplayName);
// let maxCurrentStyleKey = nextPath.join('.');
// //当前 keyPath 是否是currentPath 的子路径， 例如 keyPath : Cart.Item.Button, currentPath: Cart.Item, return true
// return (
// key.indexOf(maxCurrentStyleKey) === 0 && key.length > maxCurrentStyleKey
// );
// });
// }
/**

@@ -172,3 +178,7 @@ * add display name property in each componeent to prevent being aliasd.

return {
parentStyle: injectToChildFilter(this.state.componentStyle, this.displayName, this.currentPath),
// parentStyle: injectToChildFilter(
// this.state.componentStyle,
// this.displayName,
// this.currentPath
// ),
namespace: this.getNamespace(),

@@ -175,0 +185,0 @@ // this.context.parentStyle :

3

lib/style-provider.js

@@ -21,4 +21,5 @@ 'use strict';

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** @jsx createElement */
/**

@@ -25,0 +26,0 @@ * Provides a theme to child components trough context.

7

package.json
{
"name": "nuke-theme-provider",
"version": "1.0.4",
"version": "1.0.5",
"description": "主题换肤",

@@ -48,3 +48,2 @@ "main": "lib/index",

"hoist-non-react-statics": "^2.3.0",
"lodash.pickby": "^4.6.0",
"nuke-core": "^1.x.x"

@@ -55,4 +54,4 @@ },

"nuke-page": "^1.x.x",
"rax-text": "^0.x.x",
"rax-view": "^0.x.x"
"nuke-env": "^1.x.x",
"rax-text": "^0.x.x"
},

@@ -59,0 +58,0 @@ "publishConfig": {

5

README.md

@@ -21,3 +21,3 @@ # ThemeProvider

style | 需要替换的主题变量集合 | obj | 无
androidConfigs | 安卓 md 相关配置，如{rippleEnabled:false} | obj|无
androidConfigs | 安卓 md 相关配置，如{materialDesign:false,rippleEnabled:false} | obj|无

@@ -52,2 +52,3 @@ - style

{
materialDesign:true, // 是否启用 materialDesign 效果
rippleEnabled:true // 是否开启水波纹特效

@@ -62,5 +63,5 @@ }

<StyleProvider androidConfigs={{rippleEnabled:true}}>
<StyleProvider androidConfigs={{materialDesign：true,rippleEnabled:true}}>
<Button type="primary" style={styles.btn}>主操作</Button>
</StyleProvider>
````

93

theme/index.jsx

@@ -1,59 +0,60 @@

import {createElement, Component,render} from 'rax';
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
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'
}
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'
}
Core: {
[`color-brand1-1`]: '#00BBD3',
[`color-brand1-6`]: '#009688',
[`color-brand1-9`]: '#0096A6'
}
};
let App = class NukeDemoIndex extends Component {
constructor() {
super();
}
render() {
return (
<Page title="ThemeProvider">
let App = class NukeDemoIndex extends Component {
constructor() {
super();
}
render() {
return (
<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>
);
}
<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>
);
}
}
const styles = {
btns:{
margin:'30rem',
},
btn:{
marginBottom:'20rem'
}
btns: {
margin: '30rem',
},
btn: {
marginBottom: '20rem'
}
}
render(<App/>);
render(<App />);
docs/basic.html
theme/index.html
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc