Semantic-UI的React實現（三）：基本元素組件

Semantic-UI官方的React組件化已經快要接近完成了，最近開放了官網:http://react.semantic-ui.com/。從官網看，基本組件已經基本完備，還有幾個Addon也在進行中。

基本元素組件

Semantic-UI中的基本元素均爲純CSS類定義的組件，沒有js的操做，所以實現起來比較簡單。有了前面基礎類UiElement和輔助類PropsHelper的實現，要實現一個基本元素組件很是輕鬆。

以Button組件舉例。Button組件能夠單獨存在，也能夠做爲組組件使用。另外Button組件也容許簡單的Animation存在，即一對顯示/隱藏的組件能夠隨鼠標狀態而切換。外部調用的大體形式爲：

<Button.Group size='small'>
    <Button primary onClick={this.handleClickBtn1}>按鍵1</Button>
    <Button color='blue' onClick={this.handleClickBtn2}>按鍵2</Button>
    <Button animated  onClick={this.handleClickBtn3}>
        <Button.Content visible>按鍵3顯示內容</Button>
        <Button.Content hidden>按鍵3隱藏內容</Button>
    </Button>
</Button.Group>

調用方式其實是很直觀的，屬性均做爲props傳入到Button組件中，事件系統的回調方法也與普通方式並沒有二致。相對複雜的處理，是要整理全部組件的共通屬性，定義它們的類型和取值範圍。

Button

Button做爲基本組件，有很是多經常使用的屬性。這些屬性在命名上，基本參照Semantic-UI的原有CSS類名，在Button.js中用常量PROP_TYPES來定義。

const PROP_TYPES = [
  'primary', 'secondary', 'animated', 'labeled', 'basic', 'inverted', 'color',
  'size', 'fluid', 'active', 'disabled', 'loading', 'compact', 'circular', 'positive',
  'negative', 'floated', 'attached', 'iconed', 'dropdown'
];

組件根據PropsHelper的相關方法來生成propTypes定義，而且經過父類（UiElement）的createElementStyle方法來編輯和組裝所使用的CSS類。另外，還經過父類的getEventCallback方法，來聲明相關的事件系統回調處理。

class Button extends UiElement {
  
  // 類型定義
  static propTypes = {
    ...PropsHelper.createPropTypes(PROP_TYPES)
  };
  
  render() {
  
    // 生成元素style
    let style = this.createElementStyle(this.props, PROP_TYPES, 'button');
    
    return (
      <div id={this.props.id} className={style} {...this.getEventCallback()} tabIndex='0'>
        {this.props.children}
      </div>
    );
  }
}

Button.Group

與Button組件相似，Group組件也繼承於UiElement以生成其聲明的公有屬性對應的CSS類。

// 屬性定義
const GROUP_PROP_TYPES = [
  'iconed', 'vertical', 'labeled', 'equalWidth', 'color',
];

/**
 * 按鍵組組件
 */
class Group extends UiElement {

  // 類型定義
  static propTypes = {
    ...PropsHelper.createPropTypes(GROUP_PROP_TYPES)
  };

  /**
   * 取得渲染內容
   */
  render() {

    // 生成元素Style
    let style = this.createElementStyle(this.props, PROP_TYPES, 'buttons');

    return (
      <div id={this.props.id} className={style} {...this.getEventCallback()}>
        {this.props.children}
      </div>
    );
  }
}

Button.Content

Content組件的實現更簡單，直接貼代碼。

class Content extends React.Component {

  static propTypes = {
    visible: React.PropTypes.bool
  };

  render() {
    return (
      <div className={this.props.visible ? 'visible content' : 'hidden content'}>
        {this.props.children}
      </div>
    )
  }
}

其餘組件

經過以上示例能夠看出，有了UiElement和PropsHelper類的處理，基本元素組件的實現是很是簡單的。只需聲明組件所使用的屬性，並使用父類方法編輯和組裝CSS類便可。其餘組件如Label，Icon，Image，Grid等，均沿同一思路封裝便可完成。

難點是什麼？

在封裝基本元素組件的過程當中，我感受難點在於：

1. 封裝和抽象元素的共通處理（目前已基本成型）

2. 管理衆多組件的共通屬性（目前還在摸索中）

看過官方相關處理的源碼，感受思路仍是大致一致的，這點讓我感受多了一些自信(๑•̀ㅂ•́)و✧