一个方便的颜色主题组件

心已赠人 2022-05-28 14:06 230阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/12376.html][http_www.demodashi.com_demo_12376.html]

## 演示效果 ##

*  [切换 ECharts 图表主题][ECharts]  
    ![H63IYSUTVUf1AY1eTBS.png][]

## 项目文件结构截图 ##

![I1BSQnSlYvaGJsHtqWb.png][]

## 代码实现过程 ##

*  首先，我们必须得熟练使用 `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 种
    
    
    
    
    
    <div class="se-preview-section-delimiter"></div> ```javascript 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();
        }
      };
    
    // 阻止事件冒泡不止以上一处

![nQmGW94Y2kqx0OYqhE7.png][]

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

> 代码地址如下：  
> [http://www.demodashi.com/demo/12376.html][http_www.demodashi.com_demo_12376.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_12376.html]: http://www.demodashi.com/demo/12376.html
[ECharts]: https://fengshangwuqi.github.io/color-theme/demo/dist
[H63IYSUTVUf1AY1eTBS.png]: /images/20220528/1778ec4642364355ace225cfa39cffd7.png
[I1BSQnSlYvaGJsHtqWb.png]: /images/20220528/3df3f57e03bd46d9a98391fbeca59c27.png
[nQmGW94Y2kqx0OYqhE7.png]: /images/20220528/79b7d50bcbad4090ad9d4086515f223a.png