object-knob v1.1.9

可配置自动图元属性面板

StoryBook

http://10.10.247.1:4877/api/packages/@gw/wind-prop-panel/1.1.5/storybook-static/index.html

使用

 <PropPanel input={action('prop-change')} switched={action('toggle-change')} tabs={tabs} object={props} styles={ panelStyle } />

参数

tabs

ConfigTab:
    type: "object"
    description: "面板的每个配置tab页"
    properties:
      label:
        type: "string"
        description: "Tab页标签名称"
      items:
        type: "array"
        description: "配置项列表，具体配置见ConfigItem"
        items:
          $ref: "#/definitions/ConfigItem"
ConfigItem:
    type: "object"
    description: "每个配置项信息"
    properties:
      label:
        type: "string"
        description: "配置项标题"
      bind:
        type: "string"
        description: "绑定到对象的属性路径，支持多层指定。具体见 https://github.com/jonschlinkert/get-value"
      type:
        type: "string"
        description: "配置项类型，可以为js基础类型及扩展类型"
        enum:
          - 'string'
          - 'number'
          - 'boolean'
          - 'array'
          - 'color'  
        default: String
      items:
        type: "array"
        description: "type=array 并且 arrayType=object情况下，具体指定object类型下的成员绑定"
        items:
          $ref: "#/definitions/ConfigItem"
      header:
        type: "string"
        description: "type=array 并且 arrayType=object情况下, 具体指定每个数组成员的标识"
      arrayType:
        type: "string"
        description: "type=array情况下，指定array成员的数据类型"
        enum:
          - 'string'
          - 'number'
          - 'boolean'
          - 'object'
          - 'color'  
        default: 'object'
      show:
        type: "string"
        description: "按照指定属性路径的对象值决定本配置项是否显示"

示例 (Story)

import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import PropPanel from '../src/PropPanel.jsx'

const tabs = [{
  label: '内容样式',
  items: [{
    label: '标题',
    bind: 'title',
    type: String
  }, {
    label: '单位',
    bind: 'unit',
    type: String
  }, {
    label: '计算比例',
    bind: 'indicator.percent',
    type: Boolean
  }, {
    label: '比例',
    bind: 'indicator.percentValue',
    type: Number,
    show: 'indicator.percent'
  }, {
    label: '颜色',
    bind: 'backColor',
    type: 'color'
  },{
    label: '系列',
    bind: 'series',
    type: Array,
    header: 'title',
    items: [{
      label: '系列标题',
      bind: 'title',
      type: String
    }, {
      label: '颜色',
      bind: 'backColor',
      type: 'color'
    },{
      label: '系列值',
      bind: 'value',
      type: Number
    },]
  }, {
    label: '字符串数组',
    bind: 'baseValues',
    type: Array,
    arrayType: String
  }]
}, {
  label: '数据绑定',
  items: [{
    label: '当前值',
    bind: 'indicator.value',
    type: Number
  }, {
    label: '总值',
    bind: 'indicator.total',
    type: Number
  }]
}]

storiesOf('PropPanel', module).add('to Storybook', () => {
  let props = {
    'title': '累计天数',
    'unit': '天',
    'backColor': '#343',
    'indicator': {
      'value': 22,
      'total': 31,
      'percent': false
    },
    baseValues: ['12', '11', '234'],
    'series': [{
      'title': '系列1',
      'backColor': '#13cffe',
      'value': 121
    }, {
      'title': '系列2',
      'backColor': '#61f9b8',
      'value': 63
    }],
    'ringStyle': {
      'inner': {
        'fillStyle': 'transparent',
        'strokeStyle': 'rgba(19,92,139,0.3)',
        'lineWidth': 4
      },
      'outer': {
        'shadowBlur': '10',
        'shadowColor': '#13cffe',
        'fillStyle': 'transparent',
        'strokeStyle': '#61f9b8',
        'lineWidth': 6,
        'lineCap': 'round'
      },
      'marker': {
        'fillStyle': 'white',
        'shadowBlur': '10',
        'shadowColor': 'white',
        'radius': 8.5
      }
    }
  }

  const panelStyle = {
    width: 320,
    height: 640
  }
  return <PropPanel input={action('prop-change')} tabs={tabs} props={props} size={ panelStyle } />
})

测试

npm run storybook