# Button Demo

- order: 2


个性化颜色定制

---

````js

/** @jsx createElement */
import {createElement, Component,render, PropTypes } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Btn from 'nuke-button';
import Input from 'nuke-input';
import Page from 'nuke-page';
import { isWeb } from 'nuke-env';
import { StyleProvider } from 'nuke-theme-provider';

const varsMap = {"size-s-height":{"component":"button","desc":"height","kind":"size/bounding"},"size-m-height":{"component":"button","desc":"height","kind":"size/bounding"},"size-l-height":{"component":"button","desc":"height","kind":"size/bounding"},"size-s-padding-lr":{"component":"button","desc":"padding(l, r)","kind":"size/bounding"},"size-m-padding-lr":{"component":"button","desc":"padding(l, r)","kind":"size/bounding"},"size-l-padding-lr":{"component":"button","desc":"padding(l, r)","kind":"size/bounding"},"size-l-font":{"component":"button","desc":"text","kind":"size/text"},"size-m-font":{"component":"button","desc":"text","kind":"size/text"},"size-s-font":{"component":"button","desc":"text","kind":"size/text"},"icon-l-margin-lr":{"component":"button","desc":"margin(l, r)","kind":"size/icon"},"icon-m-margin-lr":{"component":"button","desc":"margin(l, r)","kind":"size/icon"},"icon-s-margin-lr":{"component":"button","desc":"margin(l, r)","kind":"size/icon"},"icon-size-l":{"component":"button","desc":"size","kind":"size/icon"},"icon-size-m":{"component":"button","desc":"size","kind":"size/icon"},"icon-size-s":{"component":"button","desc":"size","kind":"size/icon"},"corner-l":{"component":"button","desc":"corner","kind":"statements"},"corner-m":{"component":"button","desc":"corner","kind":"statements"},"corner-s":{"component":"button","desc":"corner","kind":"statements"},"size-border-width-l":{"component":"button","desc":"width","kind":"size/border"},"size-border-width-m":{"component":"button","desc":"width","kind":"size/border"},"size-border-width-s":{"component":"button","desc":"width","kind":"size/border"},"normal-line-style":{"component":"button","desc":"border-style","kind":"statements"},"normal-disabled-color":{"component":"button","desc":"text","kind":"statements/disabled"},"normal-disabled-bg-color":{"component":"button","desc":"bg","kind":"statements/disabled"},"normal-disabled-border-color":{"component":"button","desc":"border","kind":"statements/disabled"},"normal-normal-color":{"component":"button","desc":"color","kind":"statements/normal"},"normal-normal-bg-color":{"component":"button","desc":"bg","kind":"statements/normal"},"normal-normal-border-color":{"component":"button","desc":"border","kind":"statements/normal"}}

const action = {
  listeners: {},
  change: function(type, vars) {
    this.listeners[type] && this.listeners[type].map(item => {
      item(vars);
    })
  },
  push: function(type, item) {
    this.listeners[type] =  this.listeners[type] || []
    this.listeners[type].push(item)
  }
}

const vars = Base => class extends Component {
  static childContextTypes = {
    getConfig: PropTypes.func
  }

  getConfig = (style = {}) => {
    const ret = [];
    Object.keys(style).forEach(item => {
      if (style[item].value) {
        ret.push(style[item]);
      }
    });
    this._variables = ret;
  }

  getChildContext() {
    return {
      getConfig: this.getConfig
    }
  }
  onPress = () => {
    action.change('vars', this._variables);
  }
  render() {
    return <Base {...this.props} ref={(com) => this._component = com} onPress={this.onPress}/>
  }
}

const Button = vars(Btn);

Object.keys(Btn).forEach(item => {
  Button[item] = Btn[item];
});

class Panel extends Component {
  constructor(props) {
    super(props)
    action.push('vars', this._actionChange)
    this.state = {
      vars: []
    }
  }
  onChange(name, value){
    if(/\d+/.test(value)) {
      value = parseInt(value, 10);
    }
    action.change('value', {
      name,
      value
    })
  }
  _actionChange = (vars) => {
    this.setState({vars});
  }
  _render(vars) {
    return vars.map(key => {
      let object;
      if(object = varsMap[key.name]) {
        return <View>
          <Text>{object.kind}</Text>
          <Text>{object.desc}</Text>
          <Input value={key.value} onChange={this.onChange.bind(this, key.name)}></Input>
        </View>
      }
    })
  }
  render() {
    return <View>{this._render(this.state.vars)}</View>
  }
}

let md = {
    Core:{
        [`color-brand1-1`]: '#00BBD3',
        [`color-brand1-6`]: '#009688',
        [`color-brand1-9`]: '#0096A6'
    }

};
let extForMD = {
    Button:{
        [`normal-secondary-bg-color`]: '#ffffff',
        [`normal-secondary-border-color`]: '#DD2727',
        [`normal-secondary-color`]: '#DD2727',
        [`normal-normal-color`]: '#F53172',
        [`normal-normal-bg-color`]: '#eeeeee'
    },

};


let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state = {
          orange: {
            Core:{
                [`color-brand1-1`]: '#FFF0E6',
                [`color-brand1-6`]: '#FF6A00',
                [`color-brand1-9`]: '#E35300'
            },
            Button: {}
          }
        }
        action.push('value', this.onChange);
    }

    onChange = (config) => {
      const orange = {...this.state.orange};
      orange.Button[config.name] = config.value;
      this.setState({
        orange
      })
    }

    render() {
        return (
            <Page title="Button">
                <Panel/>
                <Page.Intro main="淘宝黄"></Page.Intro>
                <StyleProvider style={this.state.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>


        );
    }
}
const styles = {
    btns:{
        margin:'30rem',
    },
    btn:{
        marginBottom:'20rem'
    }
}
render(<App/>);



````