一个方便的颜色主题组件

代码地址如下：
http://www.demodashi.com/demo/12376.html

演示效果

• 切换 ECharts 图表主题
  

项目文件结构截图

代码实现过程

• 首先，我们必须得熟练使用 babel 进行转译，这样我们做的东西在各大主流浏览器才能够正常使用

{
	"scripts": {
		"build": "rimraf lib && babel src --copy-files --ignore __test__ --source-maps --extensions .js --out-dir lib"
	}
}

• 如果你想最终附带一个 demo，增加用户的满意度，那么我们就必须亲自使用 webpack 来打包，不然，使用 create-react-app 等辅助工具就行

const config = {
  entry: {
    app: path.join(paths.demoSrc, 'app'),
  },
  output: {
    path: paths.demoDist,
  },
  module: {
    rules: [ ],
  },
  plugins,
  devServer: {},
};

• 现在到了最重要的书写我们的组件的环节，其实，只要看破一个颜色主题组件就是对一组拾色器的封装，这个就不会忒难，本组件使用的拾色器是 Photoshop

<PhotoshopPicker
	color={pickerColor}
	header="颜色选择器"
	onAccept={this.handleAccept}
	onCancel={this.handleCancel}
	onChangeComplete={this.handleChangeComplete}
/>

• 剩下的就是解决一些交互问题，比如我们想要的颜色主题组件可以切换背景色，可以切换前景色，还可以同时切换，所以我们在设计的时候肯定少不了一个指定类型的 props，它可以取 theme | color | bg 以上 3 种

class ColorTheme extends Component {
	static propTypes = {
    	type: PropTypes.string.isRequired,
	}
}

• 对于不同类型，颜色主题组件最终处理的方式也会有很多不同，所以，给它传入的颜色 数据格式 也应该是不同的，在这里，我们需要做一个 约定

// theme type
const themes = [
    {
      color: ['#D87C7C', '#919E8B', '#D7AB82', '#6E7074', '#61A0A8'],
      background: '#fff',
    },
  ];

// color type
const colors = [
    {
      color: [],
    },
  ];

// bg type
const bgs = ['#333333', '#293441', '#5B5C6E', '#fff'];

• 再比如我们点击某个色块可以切换它的背景，还可以表示在删除色块时实现选中或取消选中，所以，我们最小的 component 就是这么一个色块，bg 要和 color 跟 theme 单独 区分开

# BackgroundItem
处理 bg 类型的最小 component，对应一个色块，绑定的有处理颜色改变的事件

# ColorItem
处理 color 类型或 theme 类型的最小 component，绑定的有处理删除色块时是否选中的事件

# ColorThemeItem
处理一组 color 类型或 theme 类型的最小 component，绑定的有处理颜色改变，处理色块新增和删除的事件

• 删除色块的交互可以说是比较复杂的，外加组件最小 component 本身就很小， 如果稍不注意，就极易造成整个应用程序 重复渲染 或者 渲染异常 等系列问题，所以，阻止 事件冒泡 和添加 redux 是有必要的

//  当第二次点击同一套主题时，不触发处理颜色改变的事件，不会重新渲染
handleDelete = e => {
    const { id } = this.props;
    const { index } = colorTheme.toJS();

    if (id === index) {
      e.stopPropagation();
    }
  };

// 阻止事件冒泡不止以上一处

• 对于有强迫症和自我要求比较高的开发者，还可以研究一下怎么添加 代码校验，持续集成，如何自动生成 changelog，如何在提交时检验我们的 commit 信息，如何书写优美的 README.md 等内容一个方便的颜色主题组件

代码地址如下：
http://www.demodashi.com/demo/12376.html

注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权