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

sheva發表於2016-10-08
UIReact元件

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. 管理眾多元件的共通屬性（目前還在摸索中）

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

相關文章