@canner/canner-types NPM

canner-types

產生schema的工具

Installation

$ npm install --save canner-types

Usage

import cannerTypes from 'canner-types';

const name = cannerTypes.string();

Basic

const article = cannerTypes.string()
                  .description('名字')
                  .ui('editor');
// same as
const article = {
  type: "string",
  description: "名字",
  ui: "editor"
}

Object

const title = cannerTypes.string()
                  .description('標題');
const content = cannerTypes.string() 
                  .description('內容')
                  .ui('editor');
const article = cannerTypes.object({title, content})
                  .description('文章');


// same as
const article = {
  type: "object",

  description: "文章",
  items: {
    title: {
      type: "string",
      description: "標題"
    },
    content: {
      type: "string",
      description: "內容"
    }
  }
}

Array

// array example
const title = cannerTypes.string()
                  .description('標題');
const content = cannerTypes.string() 
                  .description('內容');
                  .ui('editor');
// 這裡的文章type變成array
const articles = cannerTypes.array({title, content})
                  .description('文章');
                  .ui('leftTab');

// same as 
const articles = {
  type: "array",
  description: "文章",
  items: {
    type: "object",
    items: {
      title: {
        type: "string",
        description: "標題"
      },
      content: {
        type: "string",
        description: "內容"
      }
    }
  }
}

Nested Array

// nested array example
const title = cannerTypes.string();
                  .description('標題');
const content = cannerTypes.string() 
                  .description('內容');
                  .ui('editor');
const articles = cannerTypes.array()
                  .description('文章');
                  .items({title, content});

const name = cannerTypes.string();
                  .description('名字');

const writers = cannerTypes.array({name, articles})
                  .description('作家');
                  .ui('leftTab');


// wrtiers schema
const writers = {
  type: "array",
  description: "作家",
  items: {
    type: "object",
    items: {
      name: {
        type: "string",
        decsiption: "名字"
      },
      articles: {
        type: "array",
        desctiption: "文章",
        ui: "leftTop",
        items: {
          type: "object",
          items: {
            title: {
              type: "string",
              description: "標題"
            },
            content: {
              type: "string",
              description: "內容"
            }
          }
        }
      }
    }
  }
}

Method

type

array

CannerTypes.array(items?: {[key: string]: CannerTypes})

創造 type 為 array 的 schema。在 ui 為 gallery, tags 時，不需給予 arguments。

object

CannerTypes.object(items?: {[key: string]: CannerTypes})

創造 type 為 object 的 schema。在 ui 為 map, options.radio 時，不需給予 arguments

string

CannerTypes.string()

創造 type 為 string 的 schema。

boolean

CannerTypes.boolean()

創造 type 為 boolean 的 schema。

number

CannerTypes.number()

創造 type 為 number 的 schema。

description

CannerTypes.description(string)

ui

CannerTypes.ui(string)

共有以下 ui:

object: map options.radio variants
array: tab tabLeft tabTop tabRight tabBottom panel gallery tag popup tableInput slider bucket
boolean: switch card
string: dateTime time editor link image input textarea select radio card slateEditor assoc.select
number: input rate slider numberInput

uiParams

彈性設定 ui 的樣式。

CannerTypes.uiParams({
  [string]: any
})

object

array

string

boolean

number

association

association 只用於設定 ui(assoc.select)，當使用這個 assoc.select，為必要的 method。

CannerTypes.ui('assoc.select').association({
  path: string,
  textCol: string,
  subtextCol: string
});

path: array key，代表這個 assoc.select plugins，會列出該 array 的資料。
textCol: 顯示名稱，在 assoc.select 之中， options 都是以該 array item 的 id 作為 value，而 textCol 可以決定要以該 item 的哪個值作為顯示的文字。
subtextCol: 顯示次要名稱，會在名稱後面以 (次要名稱) 顯示。

// example
CannerTypes.ui('assoc.select').association({
  path: 'posts',
  textCol: 'title',
  subtextCol: 'subtitle'
});

上述的例子中， assoc.select 會以 posts 這個 array 裡所有 item id 作為 options 的 value，並顯示 title(subtitle)。

posts: [
  {
    id: "23TplPdS23TplPdS",
    title: '標題',
    subtitle: '副標題'
  }
]

<option value="23TplPdS23TplPdS">
  標題(副標題)
</option>

Popup Query

在 plugin popup 中，支援兩種 query 設定，sort 和 filter。

addSort 增加排序選項。可以增加多個。

.addSort(key: string, label: string)

// example
.addSort('viewer', '瀏覽量')
.addSort('title', '標題')

addFilter

.addFilter(key: string, label: string, filter: {
  type: 'select' | 'numberRange' | 'text',
  options?: Array<{
    text: string,
    condition: {
      [operator: '_eq' | '_gt' | '_gte' | '_lt' | '_lte' | '_contain' | '_in' | '_regex']: any
    }
  }>
})

// text example 
.addFilter('title', '標題', {
  type: 'text'
})

// numberRange example 
.addFilter('price', '價錢', {
  type: 'numberRagne'
})

// select example 
.addFilter('brand', '品牌', {
  type: 'select',
  options: [
    { 
      text: '黑松',
      condition: {
        _eq: '黑松'
      }
    },
    {
      text: '可口可樂',
      condition: {
        _eq: '可口可樂'
      }
    }
  ]
})

addOption

addOption 只用在 ui option.radio，這個 plugin，可以讓使用者選擇不同的 plugin 去 render

.addOption({
  title: string,
  key: string,
  schema: CannerTypes,
})

title: 選項名稱
key: 用來區分每個 option，要相異。
schema: 這個選項要 render 的 plugin schema

// example
.addOption({
  title: 'Option1',
  key: 'option1',
  schema: CannerTypes.string().description('選項一'),
})
.addOption({
  title: 'Option2',
  key: 'option2',
  schema: CannerTypes.string().description('選項二'),
})