📦 Installation

Kitten

Server JSON Driving UI

📦 Installation

1.kittenjs

yarn add react kittenjs

2.kittenjs-default-ui

yarn add react-dom react-router-dom antd ant-colony-ui styled-components kittenjs-default-ui

🔨 Usage

You can see example for detail

1. Use as a whole application (`example/index.tsx`)

import{Kitten}from'kittenjs'import{Renderer,ui}from'kittenjs-default-ui'importSub1ListPluginfrom'./plugins/Sub1ListPlugin'importOtherListPluginfrom'./plugins/OtherListPlugin'constapp=newKitten(ui,{appKey: "ke",appTitle: 'Kitten Example',pageAPI: 'http://api.example.com/pages',loginUrl: 'http://api.example.com/login',menus: [{key: 'dashbord',label: '仪表盘',index: true,pageJSON: []},{label: '菜单 1',subs: [{label: '子菜单 1',key: 'sub1',},{label: '子菜单 2',key: 'sub2'}]}],},[newSub1ListPlugin(),// pluginsnewOtherListPlugin()],['beforeTableColumnFinalization'// debug kitten hooks])app.render(Renderer,document.getElementById('root')!)

2. Use as a partial component (`example/index-partial.tsx`)

importReactfrom'react';importReactDOMfrom'react-dom';import{BrowserRouterasRouter,Route,Redirect}from"react-router-dom"import{AppProvider,Entry,PageSection}from'kittenjs'import{ui}from'kittenjs-default-ui'importPage1ListPluginfrom'./plugins/Page1ListPlugin'functionHeader(props: any): JSX.Element{return(<div><Entry// Kitten entry component with pageAPI or pageJSONpageKey="test-entry-header"pageJSON={[{key: 'header',type: 'Button',meta: {label: 'Header'}}]}/></div>)}constpage1JSON: PageSection[]=[//...]functionPage1(props: any): JSX.Element{return(<div><EntrypageAPI="http://api.example.com/pages"pageKey="test-entry-page1"pageJSON={page1JSON}// pageJSON can make pageAPI disabledhistory={props.history}match={props.match}/></div>)}functionApp(props: any): JSX.Element{return(<div><Header/><Router><Routeexactpath="/"component={()=><Redirectto="/main"/>}/><Routeexactpath="/main"component={Page1}/></Router></div>)}ReactDOM.render(<AppProvider// You should generally set up a <AppProvider> at the root of your appui={ui}config={{appKey: 'Test-Entry'}}plugins={[newPage1ListPlugin()// plugins]}debugHooks={['beforeTableColumnFinalization'// debug kitten hooks]}><App/></AppProvider>,document.getElementById('root'));

⌨️ Development

1.install

cd kittenjs
yarn install --ignore-scripts
cd kittenjs-default-ui
yarn install --ignore-scripts
cd example
yarn install --ignore-scripts

2.link

cd kittenjs
yarn link
# Fix Duplicate React: https://github.com/facebook/react/issues/15315#issuecomment-479802153
npm link ../example/node_modules/react
cd kittenjs-default-ui
yarn link
yarn link "kittenjs"
npm link ../example/node_modules/react
cd example
yarn link "kittenjs"
yarn link "kittenjs-default-ui"

3.run in development mode

cd kittenjs
yarn start
cd kittenjs-default-ui
yarn start
cd example
yarn run dev

📖 Document

Overview

import{Kitten}from'kittenjs'// 逻辑抽象层import{Renderer,ui}from'kittenjs-default-ui'// UI 渲染层importYourPluginfrom'./plugins/YourPlugin'constapp=newKitten(ui,{// 将 ui 传入，kitten 会使用此进行 UI 渲染appKey: '<--appKey-->',appTitle: '<--appTitle-->',pageAPI: '<--pageAPI-->',loginUrl: '<--loginUrl-->',menus: [],// 菜单配置},[newYourPlugin()],['beforeTableColumnFinalization'// 输出指定插件的调试信息])app.render(Renderer,document.getElementById('root')!)

importReactfrom'react';importReactDOMfrom'react-dom';import{BrowserRouterasRouter,Route,Redirect}from"react-router-dom"import{AppProvider,Entry,PageSection}from'kittenjs'import{ui}from'kittenjs-default-ui'importPage1ListPluginfrom'./plugins/Page1ListPlugin'functionHeader(props: any): JSX.Element{return(<div><Entry// Kitten entry 组件，可以配置 pageAPI 或 pageJSONpageKey="test-entry-header"pageJSON={[{key: 'header',type: 'Button',meta: {label: 'Header'}}]}/></div>)}constpage1JSON: PageSection[]=[//...]functionPage1(props: any): JSX.Element{return(<div><EntrypageAPI="http://api.example.com/pages"pageKey="test-entry-page1"pageJSON={page1JSON}// 配置了 pageJSON 会使 pageAPI 无效// Page1 在 Router 中可配置 history 和 match// 此时 page JSON 里可配置 link 等路由相关功能history={props.history}match={props.match}/></div>)}functionApp(props: any): JSX.Element{return(<div><Header/><Router><Routeexactpath="/"component={()=><Redirectto="/main"/>}/><Routeexactpath="/main"component={Page1}/></Router></div>)}ReactDOM.render(<AppProvider// 需要在使用了 Kitten Entry 组件的最顶层处使用 <AppProvider> 包裹ui={ui}config={{appKey: 'Test-Entry'}}plugins={[newPage1ListPlugin()// 插件]}debugHooks={['beforeTableColumnFinalization'// 输出指定插件的调试信息]}><App/></AppProvider>,document.getElementById('root'));

App

appKey

唯一的应用标识，以字母开头的字母或数字及下划线组合

appTitle

应用标题，会显示在页面标题位置

pageAPI

接收 pageKey 作为参数，返回 pageJSON 的 API 接口

loginUrl

统一的登录 URL
当应用其他接口返回 401 等，会跳转到此 URL

menus

菜单配置

[{key: 'dashbord',label: '仪表盘',pageJSON: [...]// 如果配置了 pageJSON，将不会去请求 pageAPI 获得 pageJSON},{label: '菜单 1',subs: [{label: '子菜单 1',key: 'sub1',pageJSON: [...],subPages: [// KCP 暂不支持{key: 'subpage',label: '子页面1',pageJSON: [{key: 'backToSub1',type: 'Button',meta: {label: '返回',link: '<'}}]}]},{label: '子菜单 2',key: 'sub2',pageJSON: JSON.parse(JSON.stringify(sub2PageJSON))}]},{key: 'menu2',label: '菜单 2'// 没有配置 pageJSON，将会用 key 作为参数，请求 pageAPI 来获取 pageJSON}]

只要配置好 Page , 无需关心 menu 的配置

Plugin

kitten 支持插件，来满足特殊的交互或业务需求

importReactfrom'react'import{Plugin,AppHooks}from'kittenjs'exportdefaultclassYourPluginimplementsPlugin{apply(hooks: AppHooks){
...
}}

需继承 Plugin , 实现 apply 方法
kitten 插件理论上可以通过预先定义好的 hooks 在 kittenjs 的任何位置插入代码

hooks 通过 apply 方法参数传入

...
apply(hooks: AppHooks){hooks.beforeTableColumnFinalization.tap('YourPlugin--beforeTableColumnFinalization',(appkey: string,pageKey: string,tableKey:string,column: TableColumn)=>{// 通常需要通过 pageKey 以及相应组件的 key 等来确定你所关心的页面或组件等if(pageKey!=='other'||tableKey!=='yourTable')return;
...
})}
...

目前 AppHooks 有 (还不完善，之后会根据业务需求来增加和迭代) :
- renderCustomRoutes
  - appKey, RouteComponents, mainRender
  - 可自定义路由，用于添加自定义页面
  - RouteComponents, 包含三个 react-router-dom 路由组件
    - Route
    - Switch
    - Redirect
  - mainRender, 整个 kitten 应用变为一个组件, 需要至少有一个路由指向进行渲染
```
hooks.renderCustomRoutes.tap('OtherRoutePage--renderCustomRoutes',(appkey: string,RouteComponents: any,mainRender: Function)=>{const{Route, Switch, Redirect}=RouteComponentsreturn(<><Routeexactpath="/"component={()=><Redirectto="/main"/>}/><Routepath="/login"component={()=><div>Login</div>}/><Routepath="/main"component={mainRender}/></>)})
```
- renderHeaderActions
  - appKey
- renderSiderTopSection
  - appKey
- renderCustomRoutes
  - appKey, RouteComponents, mainRender
  - 可添加自定义路由，如，增加一个登陆页面
- afterPageLoaded
  - appKey, pageKey, props
  - 页面加载时调用
- afterPageUnloaded
  - appKey, pageKey, props
  - 页面卸载时调用
- afterComponentLoaded
  - appKey, pageKey, componentType, componentKey, props
  - 组件加载时调用
- afterComponentUnloaded
  - appKey, pageKey, componentType, componentKey, props
  - 组件卸载时调用
- beforeSelectDataFetched
  - appKey, pageKey, componentKey, items, selectKey
  - Form 或 Table 有 Select 时，在请求接口获取 Select 数据前调用
- afterSelectDataFetched
  - appKey, pageKey, componentKey, items, selectKey, selectData
  - Form 或 Table 有 Select 时，在请求接口获取 Select 数据后调用
- beforeTableDataSourceFetched
  - appKey, pageKey, tableKey, columns, pagination
  - Table 在请求接口获取数据前调用
- afterTableDataSourceFetched
  - appKey, pageKey, tableKey, columns, dataSource, pagination
  - Table 在请求接口获取数据后调用
- beforeTablePaginationFinalization
  - appKey，pageKey，tableKey，props，dataSource，pagination
  - Table 分页最终确定前调用
- beforeFormItemFinalization
  - appKey, pageKey, formKey, props, item
  - 在 Form 的每个item (表单条目) 最终确定前调用
- beforeFormAllItemsFinalization
  - appKey, pageKey, formKey, props, items
  - 在 Form 的所有 items 最终确定前调用
- beforeTableColumnFinalization
  - appKey, pageKey, tableKey, props, column
  - 在 Table 的每个 Column (列) 最终确定前调用
- beforeTableAllColumnsFinalization
  - appKey, pageKey, tableKey, props, columns
  - 在 Table 的所有 Columns 最终确定前调用
- beforeButtonClick
  - appKey, pageKey, buttonKey
  - 在 Button 点击前调用
- beforeFormSubmit
  - appKey, pageKey, formKey, values
  - 在 Form 提交前调用
- beforeCheckboxChange
  - appKey, pageKey, checkboxKey, value
  - 在 Checkbox 改变前调用
- afterTableCellChanged
  - appKey, pageKey, tableKey, dataSource, row
  - 在 Table Cell 为可编辑时，值改变后调用

Page

pageKey
- 唯一的页面标识，以字母开头的字母或数字及下划线组合

Section

key

唯一的组件块标识，以字母开头的字母或数字及下划线组合

type

组件块类型
- Table, Form, Button, Stack, Checkbox, Modal, Tabs, Panel, Iframe
- Panel
  - items 要么全是 Sections (配置了 type)，要么全是 Items (不配置 type, 配置 key, label, value)
  - item 的 meta 支持 url (当 item 的 value 不是 $# 时, 点击发送请求), link (页面跳转), href (链接跳转)
  - Panel item 的 value 支持 $. 和 $#
    - $. 获取 Panel 的 meta 的 url 请求返回数据的字段
    - $# 获取 Panel Item 的 meta 的 url 请求返回数据的字段

items

Form 或 Table 中的条目

key

Form, Table
字段名称，需跟接口字段一致

label

Form, Table
字段标签名称

type

Form, Table
Form 的条目输入类型，默认为 input
- input, select, radio, checkbox, textArea, date, rangeDate, month, info, codeEditor
当 Table 配置 editable 为 true 时，可以配置 type 类型，默认为 input
- input, select, tags, multiple

showTime

Form
Form 的条目 type 为 date, 或 rangeDate时有效
是否增加日期的时间选择

id

Table
为 true 时，用此字段作为 Table 的唯一标识 rowKey

actionDisabled

Form
为 true 时，Form 不会提交此字段

required

Form, Table
为true时，此字段为必填
Table 时，需配置 editable 为 true 时才生效

editable

Table
为 true 时，Table 此字段可编辑，默认为 input

reg

Form, Table
正则匹配
如：reg: {pattern: '^([1-9][0-9]*)?[05]$', message: '请输入5的倍数'}
- pattern 为正则表达式字符串
- message 为不满足正则时的提示信息

value

Form, Table
默认值

placeholder

Form
输入占位符字符串

disabled

Form, Table
禁止输入

actions

Table
配置为 Table 的操作列
```
actions: [{key: 'yourTableEdit',meta: {label: '修改',modal: 'yourTableEditModal',// $. 取 table record// $# 取 url 请求数据params: {get: {id: '$.id'},id: '$.id',field1: '$#field1'},url: '...',method: 'GET'}},{key: 'yourTableDelete',meta: {label: '删除',confirm: true,confirmLabel: '确定删除?',url: '...,
method: 'POST',params: {post: {id: '$.id'}}}}]
```
- key
  - 唯一标识
- meta
  - label
    - 操作按钮标题
  - url
    - 操作按钮点击请求的 URL
  - method
    - 操作按钮点击请求的 method
  - modal
    - 操作按钮点击弹起 Modal 的 key
  - params
    - get 或 post 可以在请求 url 时增加请求参数，需与 method 的 GET 或 POST 一致
    - 其他字段，当配置了 modal 时有效，会将其传递给 key 为 modal 配置值的 Modal
    - 字段值，可以为 $. 或 $# 开头
      - $. 会取 Table 中的字段值
      - $# 会取请求 url 返回数据中的字段值
show
- 按钮是否显示，true 或 false
  - 支持$. , 会取 Table 中的字段值的真假值
confirm
- 操作按钮点击是否需要确认操作
  - 如删除操作经常需要确认，则将其置为true

confirmLabel

操作确认弹出框的提示信息

如： '确定删除?'

rowAction

actions: [{key: "add",meta: {label: "添加",rowAction: "insert"}},{key: "delete",meta: {label: "删除",rowAction: "delete"}}]

 - insert，当点击操作按钮时，会增加一行；当 Table 为空时，此按钮会显示为占位符位置，点击可增加一行
- delete，当点击操作按钮时，会删除一行
- link
- 跳转页面，同 Section meta 中的 link

alias

Form, Table
当请求接口字段与 key 不一致时，需要配置此字段为接口请求字段
为字符串，只能配置一个字段的别称，与 section meta 中 alias 不同

License

MIT © docoder

Name		Name	Last commit message	Last commit date
assets		assets
example		example
kittenjs-default-ui		kittenjs-default-ui
kittenjs		kittenjs
.gitignore		.gitignore
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation

Kitten

📦 Installation

1.kittenjs

2.kittenjs-default-ui

🔨 Usage

1. Use as a whole application (example/index.tsx)

2. Use as a partial component (example/index-partial.tsx)

⌨️ Development

1.install

2.link

3.run in development mode

📖 Document

Overview

App

appKey

appTitle

pageAPI

loginUrl

menus

Plugin

Page

Section

key

type

meta

url

method

pageSize

disablePagination

label

modal

accessories

form

params

width

filter

direction

columnsCount

rowColCounts

disableGroupCol

style

link

componentKey

alias

actionsShow

labelPostion

submitTitle

clearTitle

actionDirection

clearButtonShow

href

headerBgColor

headerColor

block

offset

items

key

label

type

showTime

id

actionDisabled

required

editable

reg

value

placeholder

disabled

actions

alias

meta

License

About

Topics

Resources

Stars

1. Use as a whole application (`example/index.tsx`)

2. Use as a partial component (`example/index-partial.tsx`)