react-qa-pick-plugins v0.2.0

react-qa-pick-plugins

pick plugins in react-qa，這是可以讓你去 select 不同的 cannerJSON field 然後進行 pick value

除了 core plugin 以外的，qa plugin 都要加上 prefix 所以以這個 plugin 應該要變成 pick.block, pick.radio

Installation

$ npm install --save react-qa-pick-plugins

Usage

可以看 docs/object https://github.com/Canner/react-qa-pick-plugins/tree/master/docs/objects

var reactQaPickPlugins = require('react-qa-pick-plugins');

  ...
  render() {
    return (
      <div>
        <h3>1. Pick a team</h3>
        <Block
          {...this.props}
          cannerJSON={this.props.cannerJSON.get('parent')}
          id="games/0/teamA" // 這是從 qa 傳給這個 plugin 的 id
          api={[
            {
              name: "id", // 這邊是跟後台連接 api 相關資料
              data: "id"
            }
          ]}
          meta={{
            relative: true, // 這邊可以放很多要多餘的 meta data 看要放啥
            key: 'parent'
          }}
          uiParams={{
            header: "name", // 選擇 header 要哪個 field
            body: ["id"] // 選擇 body 要呈現哪個 field (radio 不能有 body)
          }}
          pick={{
            from: "teams", // 要從哪個 field 接 data
            key: "id" // 接那個 data 哪個 value
          }}/>
        <h3>2. Pick a player</h3>
        <Block
          {...this.props}
          cannerJSON={this.props.cannerJSON.get('children')}
          id="games/0/statA/0/player"
          variables={[
            {
              name: "teamAId", // 宣告一個在這個 plugin 的 variable，所以在這個 plugin 用 $teamAId 會拿到這個 data
              path: "../../../teamA/id" // 這個 value 參照哪個 field
            }
          ]}
          visible="$teamAId" // 這就是拿 variable $teamAId 的 value，有值就 show 沒值 hide
          meta={{
            relative: true,
            key: 'children'
          }}
          api={[
            {
              name: "id",
              data: "id"
            }
          ]}
          uiParams={{
            header: "name", // ui 
            body: ["id"]
          }}
          pick={{
            from: "teams[@id=$teamAId]/0/player", // 從哪裡 pick，用 xpath syntax
            key: "id" // 要拿他的 id
          }}/>
      </div>
    );
  }

...

Start example server

node devServer.js

License

MIT © Canner