# eah

> 解放前端生产力工具

Latest version **0.3.1** (published 2023-10-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install eah
pnpm add eah
yarn add eah
bun add eah
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2023-10-17 |
| First published | 2021-04-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 152.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sleepingj |
| Maintainers | sleepingj |

## Links

- npm: https://www.npmjs.com/package/eah
- npm.io page: https://npm.io/package/eah

## Dependencies (2)

- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.5
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.8.1

## Recent versions

- 0.3.1 (latest) — 2023-10-17
- 0.3.0 — 2023-07-05
- 0.2.9 — 2023-07-03
- 0.2.8 — 2023-03-26
- 0.2.7 — 2023-03-08
- 0.2.6 — 2023-02-20
- 0.2.5 — 2023-02-16
- 0.2.4 — 2023-02-12
- 0.2.3 — 2023-01-29
- 0.2.2 — 2023-01-28
- 0.2.1 — 2022-11-23
- 0.2.0 — 2022-10-07
- 0.1.9 — 2022-09-30
- 0.1.8 — 2022-08-16
- 0.1.7 — 2022-07-27
- … 16 more at https://npm.io/package/eah/versions

## README

#### EAH = Eat All Hurry = 吃掉所有的忙碌
解放前端生产力工具

<img style="width:100px;" src="https://github.com/sleepingj/stayhungry_kps/blob/master/eah-icon.png?raw=true"/>

### Usage

```
npm i eah -S

```

### FEAT

已适配pc 移动端

### 数据驱动

需要配合
eah-mh

可以在vscode搜索EAH扩展 根据ts一键生成表单/列表页面

```
import {injectComp, setFeat} from 'eah'
import convertComp from 'eah-mh';
import * as antdComp from 'antd';

injectComp({
    ...convertComp(antdComp, 'antd'),
    CitySelect
})


```

```


//异步方式
injectComp(Promise.resolve({
    CompOverload: (props) => {
        return (
            <>
                overLoad....
            </>
        )
    }
}))
```


## examples

#### easy form

config.ts

```ts
export default {
    items: [
        {
            attr:'attr0',
            name:'属性1',
            default: 'foo'
        },
        {
            attr:'attr1',
            name:'属性2'
        },
        {
            attr:'attr2',
            name:'属性3'
        },
       
    ],
    onSubmit(params:any) {
        console.log(params)
        return Promise.resolve()
    }
}

```

#### complex form

index.tsx
```tsx

import React, { useState, useEffect } from 'react';
import config from './config'
import {Editor} from 'eah'



export default () => {
    return (
       <main>
            <Editor {...config}/>
       </main>
    )
}

```

#### complex form

contfig.ts
```ts
export default ({disabled}:any): FormConfig=> ({
    items: [
        {
            attr: 'attr1',
            name: '含校验',
            compName: 'Input',
            required:'',
            props: {
                disabled
            }
        },
        {
            attr: 'attr2',
            name: '选项',
            compName: 'Radio',
            props: {
                options:  [
                    { label: 'show', value: '1' },
                    { label: 'hide', value: '2' },
                  ]
            }
        },
        {
            attr: 'attr3',
            name: '名称2',
            default:'1',
            compName: 'Select',
            link: {
                attr2: (v, self, data) => {
                    self.isHide = v == '2'
                    return self
                }
            },
            props: {
                options: [
                    {value:'1', label:'all'}
                ],
                disabled
            }
        },
        {
            attr: 'attr4',
            name: '混合组件',
            style:{alignItems:'flex-start'},
            compName: 'MapComp',
            props: {
                disabled
            }
        },
        {
            attr: ['begin', 'end'],
            name: '时间段',
            compName: 'DateRangePicker',
            props: {
                disabled
            }
        }
    ],
    onSubmit(params:any) {
        console.log(params)
        return Promise.resolve()
    }
})


```

index.tsx
```tsx
import React, { useState, useEffect } from 'react';
import config from './config'
import {Editor} from 'eah'
import MyMapItem from './comp/MapItem'
import {Button} from 'antd'


const _editData = {
    attr1: 'zzj',
    attr4: [{price:111}]
}



export default () => {
    const [editData, setEditData] = useState({});
    const [disabled, setDisabled] = useState(false)




    return (
       <main>
            <Button onClick={_=>setDisabled(!disabled)}>disable</Button>
            <Button onClick={_=>setEditData(_editData)}>edit</Button>
            <Editor {...config({disabled})} extendComp={{MyMapItem}} editData={editData}/>
       </main>
    )
}
```

#### map comp

config.ts

``` ts 
export default {
    mapItem: {
        items: [
            {
                attr: 'time',
                name: '时间',
                default: '',
                compName: 'TimePicker'
            },
            {
                attr: 'price',
                name: '金额'
            }
        ],
    }
}

```

index.tsx

```tsx

import React,{useRef, useEffect, useState} from 'react';
import config from './config'
import {ListItem} from 'eah'


export default ({disabled, value, onChange}:any) => {
  return <ListItem {...config({disabled})} value={value} onChange={onChange} />
}

```

#### complex lister
config.ts
```ts

const  selectable = {
    operations: [{
        name:'批量',
        func:(keys, records) => {
            return Promise.resolve()
        },
        // checkDisable: (keys, records) => {
        //     return true
        // }
    }]
}


export default {
    filter: {
        items: [
            {
                attr: 'field1',
                name: '字段1',
                default: 'foo'
            },
            {
                attr: 'field2',
                name: '字段2',
            },
            {
                attr: ['begin', 'end'],
                name: '时间',
                compName: 'DateRangePicker'
            }
        ],
        appendActs: [
            {name:'test', func({dataInput}) {
                console.log(dataInput)
            }}
        ]
    },
    service(params) {
        console.log(params)
        return new Promise(resolve=>{
            setTimeout(() => {
                resolve({data: {list: Array.from(new Array(10)).map((_,i) => {
                    return {id:i, key:i, time:'2020-12-12'}
                }) ,total:100}})
            }, 600);
        })
    },
    cols: [
        {title: "ID", dataIndex:'id'},
        {title: "Time", dataIndex:'time'},
        {
            title: "操作", 
            operations: [
                {name:'view', func:record=>location.href= './demo/view?id='+record.id},
                {name:'edit', vis:record=>record.id>1, func:record=>location.href= './demo/edit?id='+record.id},
                {
                    name: 'del', 
                    confirm: (record, doQry) => ({
                        content: `确定删除${record.id}?`,
                        onOk() {
                            doQry()
                        }
                    })
                }
            ],
        }
    ],
    selectable,
    operations: [
        {name:'简单表单', func:_=>location.href= './demo/quickForm'},
        {name:'复杂表单', func:_=>location.href= './demo/form'},
        {name:'log', func({getCurQryParams}) {
            console.log(getCurQryParams())
        }},
    ],
    page: {
        pageNum: 1,
        pageSize: 20
    }
}

```
index.tsx
```tsx

import React from 'react';
import {Lister} from 'eah';
import config from './config'



export default () => {
    return (
      <Lister {...config}/>
    )
};



```

### slot 
```tsx

const {Filter, Desc, Operations} = Lister;

export default () => {
  return (
    <Lister {...config}>
      <Filter.Operations>
        {
          ({dataInput, doSubmit, reset}) => (
            <>
               <a onClick={doSubmit}>submit</a>
               <a onClick={reset}>reset</a>
            </> 
          )
        }
      </Filter.Operations>
      <Desc>foo</Desc>
      <Operations right>
          <Button>bar</Button>
      </Operations>
    </Lister>
  );
};


```
### lazyProps & subField & MapItem + link
```ts
const lazyOptions = Promise.resolve({options: [{label:'foo', value:1}]});

const config = {
  items: [
      {
        attr: "lazyChoose",
        name: "选项",
        compName: 'Select',
        props:{
          lazy:lazyOptions
        }
      },
      {
          attr:'parentField',
          isHide: true,
          default: {}
      }
      {
        attr: "parentField.childField",
        name: "金额",
        compName:'InputNumber'
      },
      {
        attr: "mixItem",
        name: "复合选项",
        compName:'MapItem',
        props: {
            classNameSpace:'inline-config',
            items: [
                {
                    attr: 'foo',
                    compName:'Radio',
                    props: {
                         options: [
                            { label: "是", value: 1 },
                            { label: "否", value: 0 },
                        ]
                    }
                },
                {
                  attr: 'bar',
                  isHide: true,
                  link: {
                    foo: (v: any, self: any, data) => {
                      self.isHide = !v;
                      return self;
                    },
                  },
                },
                
            ]
        }
      },
  ]
}


```

---
_Source: https://npm.io/package/eah · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._