一个方便的颜色主题组件

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

演示效果

项目文件结构截图

代码实现过程

  • 首先,我们必须得熟练使用 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 要和 colortheme 单独 区分开
# 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大师代发,拒绝转载,转载需要作者授权

posted on 2018-03-06 10:01  demo例子集  阅读(377)  评论(0编辑  收藏  举报

导航