weaver-e10-builder 1.0.11-beta → 1.1.0

package/skill-docs/references/components/display-Title.md

@@ -0,0 +1,117 @@
+## 基础用法
+
+```tsx
+import { Component } from 'react';
+import { Title, Button, constants } from '@weapp/ui';
+
+const dataItem = {
+  icon: null,
+  disabled: false,
+  closeable: false,
+  closeIcon: null,
+  data: [],
+};
+
+const data1 = [
+  { ...dataItem, id: 'tab1', content: '可选标签2' },
+  { ...dataItem, id: 'tab2', content: '可选标签3' },
+  { ...dataItem, id: 'tab3', content: '可选标签4' },
+  { ...dataItem, id: 'tab4', content: '可选标签5' },
+]
+
+interface TitleDemoProps {
+
+}
+
+interface TitleDemoState {
+  menuValue: string;
+}
+
+class TitleDemo extends Component {
+  constructor(props: TitleDemoProps) {
+    super(props);
+    this.state = {
+      menuValue: 'tab1',
+    }
+  }
+
+  onMenuChange = (key: any) => this.setState({ menuValue: key });
+
+  render() {
+    const { menuValue } = this.state;
+    return (
+      <>
+        <Title title={'基本用法'} />
+        <Title title={'无底部边线'} hideUnderLine />
+        <Title title={'无图标'} noIcon />
+        <Title icon='Icon-smiling-face' iconBgcolor='red' title={'自定义图标'}  />
+        <Title title={'自定义右侧按钮'}
+          buttons={[
+            <Button key='a'>打开</Button>,
+            <Button key='b'>跳转</Button>,
+          ]}
+        />
+        <Title title={'自定义页签'}
+          menuValue={menuValue}
+          menus={data1}
+          inDialog
+          onMenuChange={this.onMenuChange}
+          buttons={[<Button key='a'>打开</Button>, <Button key='b' >跳转</Button>]}
+        />
+      </>
+    );
+  }
+}
+```
+
+## 参数说明
+### 组件参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| buttons | 按钮组 | ReactNode | 否 | - |
+| customRenderLeft | 自定义渲染左侧内容，含 title 和 icon | (e?: JSX.Element) => ReactNode | 否 | - |
+| customRenderRight | 自定义渲染右侧内容 | (e?: JSX.Element) => ReactNode | 否 | - |
+| customStyleLeft | 自定义左侧行内样式 | CSSProperties | 否 | - |
+| customStyleRight | 自定义左侧行内样式 | CSSProperties | 否 | - |
+| enableAdaptiveLayout | 开启自适应布局 | boolean | 否 | - |
+| getTitle | 自定义左侧区域,仅 title 部分 | () => ReactNode | 否 | - |
+| getTitleLabel | 自定义标题 | () => ReactNode | 否 | - |
+| hideUnderLine | 隐藏底部边线 | boolean | 否 | false |
+| icon | 标题图标 | IconNames | 否 | - |
+| iconBgcolor | 图标颜色 | string | 否 | - |
+| iconBorderColor | 图标边框颜色 | string | 否 | - |
+| iconStyle | 图标样式 | CSSProperties | 否 | - |
+| inDialog | 兼容对话框中使用时的样式,且对话框默认开启 | boolean | 否 | - |
+| leftCol | 左侧布局比例 | number | 否 | - |
+| menuProps | 页签自定义参数配置，兼容 Menu 组件配置 | MenuBaseProps | 否 | - |
+| menuValue | 页签选中值配置 | string | 否 | - |
+| menus | 页签配置 | MenuItemData[] | 否 | - |
+| needProgress | 需要进度条 | boolean | 否 | false |
+| noIcon | 隐藏图标 | boolean | 否 | false |
+| onMenuChange | 切换选中页签的事件 | (value: string) => void | 否 | - |
+| progressProps | 进度条属性 | any | 否 | - |
+| rightCol | 右侧布局比例 | number | 否 | - |
+| title | 标题 | string | 否 | - |
+| titleTipType | 标题提示效果 | 'title' \| 'popover' \| 'scroll' | 否 | - |
+### MenuItemData 参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| activeIcon | 菜单激活的时候左侧显示的激活图标 | string \| React.ReactNode | 否 | - |
+| canBeSelected | 用于控制父级菜单是否可选, 默认为 false | boolean | 否 | - |
+| children | 子数据 | MenuItemData[] | 否 | - |
+| closeIcon | 自定义删除图标 | string \| React.ReactNode | 否 | - |
+| closeTitle | 删除按钮鼠标浮动的的title | string | 否 | '删除' |
+| closeable | 是否可删除 | boolean | 否 | - |
+| content | 显示内容 | string \| React.ReactNode | 否 | - |
+| customRenderItem | 自定义每一项的内容 | (this: any, itemNode: React.ReactNode, itemData: MenuItemData) => ReactElement | 否 | - |
+| disabled | 是否是禁用项 | boolean | 否 | - |
+| editIcon | 自定义编辑图标 | string \| React.ReactNode | 否 | |
+| editTitle | 编辑按钮鼠标浮动的的title | string | 否 | '编辑' |
+| editable | 是否可编辑 | boolean | 否 | |
+| groupId | 分组的 id（分组带分割线） | string | 数据需要分组的情况下需要 | - |
+| hide | 能否展示, 仅在type 为'tab'类型生效 (hide=true, 表示存在数据的情况,页签仍需隐藏) | boolean | 否 | - |
+| icon | 左侧图标 | string \| React.ReactNode | 否 | - |
+| id | 唯一标识 | string | 是 | - |
+| parentId | 对应父级的 id | string | 如果是子菜单则需要,父级菜单不用 | - |
+| rightIcon | 右侧图标 | string \| React.ReactNode | 否 | - |
+| title | 浮动上去的提示文字 | stirng | 是 | - |

package/skill-docs/references/components/form-Checkbox.md

@@ -0,0 +1,161 @@
+## 基础用法
+
+```tsx
+import React from 'react';
+import { Checkbox, CheckboxEvent, CheckboxDataType, CheckboxValueType, DataType, CheckboxOptionProps } from '@weapp/ui';
+
+const prefixCls = `test-demo-checkbox`;
+
+const optionsWithDisabled: CheckboxDataType = [
+  {
+    id: 'Apple',
+    title: 'Apple',
+    content: 'Apple',
+    color: '#5D9CEC',
+    tips: '我是一个提示信息'
+  },
+  {
+    id: 'Pear',
+    title: 'Pear',
+    content: 'Pear',
+    color: '#FF4D4F'
+  },
+  {
+    id: 'Orange',
+    title: 'Orange',
+    content: 'Orange',
+    disabled: true,
+    color: '#52C41A'
+  },
+];
+
+const defaultValue = [
+  {
+    id: 'Apple',
+    value: 'Apple',
+    content: 'Apple',
+  },
+];
+
+
+export default class CheckboxDemo extends React.Component {
+  state = {
+    checked1: true,
+    checked2: true,
+    checked: true,
+    label: "已选择",
+    value: ['Apple'],
+    value1: ['Apple'],
+    value2: ['Apple'],
+    value3: ['Apple'],
+    value4: ['Apple'],
+  }
+
+  onChange1 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
+    this.setState({ checked1: value })
+  }
+
+  onChange2 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
+    this.setState({ checked2: value })
+  }
+
+  onChange3 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
+    this.setState({ value1: value })
+  }
+  onChange4 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
+    this.setState({ value2: value })
+  }
+  onChange5 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
+    this.setState({ value3: value })
+  }
+  onChange6 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
+    this.setState({ value4: value })
+  }
+
+  onClick = (v: string | DataType, o: DataType, e: CheckboxEvent) => {}
+
+  onBlur = (v: string | DataType, o: DataType, e: React.FocusEvent<HTMLInputElement>) => {}
+
+  onFocus = (v: string | DataType, o: DataType, e: React.FocusEvent<HTMLInputElement>) => {}
+
+  customOptionRender = (props: CheckboxOptionProps, ele: React.ReactNode) => {
+    const option = props.option;
+    return (
+      <div>
+        <span>自定义内容</span>
+        <span>{ele}</span>
+      </div>
+    )
+  }
+
+  render() {
+    const { checked, checked1, checked2, value, value1, value2, value3, value4 } = this.state;
+    return (
+      <div className={prefixCls}>
+        <h4>基本用法</h4>
+        <Checkbox>不受控（defaultValue）</Checkbox>
+        <Checkbox value={checked2} onChange={this.onChange2}>受控（value）</Checkbox>
+        <h4>只读状态</h4>
+        <Checkbox readOnly>只读</Checkbox>
+        <h4>禁用状态</h4>
+        <Checkbox disabled>禁用</Checkbox>
+        <h4>indeterminate 状态</h4>
+        <Checkbox indeterminate >半选</Checkbox>
+        <h4>Checkbox datas -- value</h4>
+        <Checkbox data={optionsWithDisabled} value={value1} onChange={this.onChange3} />
+        <h4>Checkbox datas -- defaultValue</h4>
+        <Checkbox data={optionsWithDisabled} defaultValue={value} />
+        <h4>Checkbox datas 垂直</h4>
+        <Checkbox data={optionsWithDisabled} value={value2} vertical labelMaxWidth={'70%'} onChange={this.onChange4} />
+        <h4>Checkbox datas(标签,不带check框)</h4>
+        <Checkbox data={optionsWithDisabled} defaultValue={value4} optionType='tag' hideCheck onChange={this.onChange6} />
+        <h4>Checkbox (check框居右)</h4>
+        <Checkbox data={optionsWithDisabled} defaultValue={value4}  onChange={this.onChange6} isHoldRight/>
+        <Checkbox isHoldRight>不受控（defaultValue</Checkbox>
+        <h4>Checkbox (check框居右,竖向,左对齐)</h4>
+        <Checkbox data={optionsWithDisabled} value={value2} vertical alignType={'left'} isHoldRight  onChange={this.onChange4} />
+        <h4>Checkbox (check框居右,竖向,右对齐)</h4>
+        <Checkbox data={optionsWithDisabled} value={value2} vertical alignType={'right'} isHoldRight  onChange={this.onChange4} />
+        <h4>Checkbox (check框居右,竖向,两端对齐)</h4>
+        <Checkbox data={optionsWithDisabled} value={value2} vertical alignType={'justify'} isHoldRight onChange={this.onChange4} />
+        <h3>自定义渲染</h3>
+        <Checkbox data={optionsWithDisabled} customOptionRender={this.customOptionRender}/>
+      </div>
+    );
+  }
+}
+```
+
+## 参数说明
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| alignType | 左右对齐方式（仅单个使用或者纵向排列时生效） | string | | left |
+| className | 自定义 className | string | | |
+| customOptionContenRender | 复写任一选项的 content 内容 | (props: RadioOptionProps, ele: ReactNode) => ReactNode | | |
+| customOptionRender | 自定义每一选项 | (props: RadioOptionProps, ele: ReactNode, eventProps?: any) => ReactNode | | |
+| customOverlayRender | 复写整体 radio | (_: any, ele: ReactNode) => ReactNode | | |
+| data | 渲染一组 checkbox 时的数据 | CheckboxDataType | | |
+| defaultValue | 默认值（单个使用时传递 Boolean) | CheckboxValueType | | |
+| disabled | 禁用 | boolean | | false |
+| domKey | 组件唯一标识（使用 data 时唯一标识为 data.id) | string | | |
+| groupClassName | 设置外层 groupClassName（data 存在时生效） | string | | |
+| groupStyle | 设置外层 style（data 存在时生效） | CSSProperties | | |
+| hideCheck | 隐藏 check 框 | boolean | | false |
+| indeterminate | 是否半选 | boolean | | |
+| isHoldRight | checkbox 是否靠右显示 | boolean | | false |
+| labelMaxWidth | label 最大宽度 (在表单中，默认生效，宽度 150，传递 0 则不生效，在竖直排列时可传递百分比,在选框居右模式下不生效) | number \| string | false | |
+| minSelectMessageProps | 复写少于最少传递个数提示信息 props | DialogMessageProps | false | |
+| minSelected | 设置最少选择个数 | number | false | |
+| minSelectedMessage | 少于最少选择个数时提示信息 | string | false | |
+| name | checkbox 的 name 属性 | string | | |
+| onChange | 数据变化回调 | (value: ValueType, option: OptionData , e: RadioEvent) => void | | |
+| onClick | 点击回调 | (value: ValueType, option: OptionData , e: RadioEvent) => void | | |
+| optionType | 选项类型 | 'default' \| 'tag' | | 'default' |
+| overlayClassName | 选项的样式名 | string | | |
+| readOnlyMode | 只读模式选择（区别普通的radio只读模式和表单中仅显示字段的只读模式） | boolean | 否 | false |
+| showTitle | 控制 title 是否显示 api | boolean | false | true |
+| style | 自定义样式 | CSSProperties | | |
+| tips | 提示信息（如果是传递了 data，直接在 data 中设置） | string | false | - |
+| title | 提示文本(适用于担当适用check框情景) | string | 否 | |
+| value | 受控（单个使用时传递 Boolean) | CheckboxValueType | | |
+| vertical | 是否竖直排列（data 时生效） | boolean | | |

package/skill-docs/references/components/form-DepartmentBrowser-api.md

@@ -0,0 +1,52 @@
+## 基础用法
+```ts
+import React, { PureComponent } from 'react';
+import { Browser} from "@weapp/ui";
+
+
+class DepartBrowserDemo extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: []
+    };
+  }
+
+  onHandleChange = (value) => {
+    this.setState({value});
+  }
+  
+  render() {
+    const { value } = this.state;
+    
+    return (
+      <Browser
+        module="hrm"
+        type="department"
+        multiple={true}
+        value={value}
+        onChange={this.onHandleChange}
+      />
+    )
+  }
+}
+
+export default DepartBrowserDemo
+```
+
+## 具体参数
+
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| - | - | - | - | - |
+| module | 接口的模块标示 | string| 是 | 'hrm' |
+| type | 浏览按钮类别 | string | 是 | 'department' |
+| value | 浏览按钮已选数据 受控值 | object[] | 否 | - |
+| onChange | 浏览按钮数据改变回调 | (data: object[]) => void | 否 | - |
+| multiple | 是否多选 | boolean | 否 | - |
+
+> 注意事项：
+1. module、type这两个类型需要固定写死，不能随意修改！
+2. 根据用户需求再给部门浏览框组件开启多选功能！
+3. 此 `multiple` 是**页面浏览框组件**的多选 prop。**表单里的"部门字段"多选**是字段级配置——fields.json 写 `"multiple":true` 或 `form add-field --multiple`（见 `references/form/guide-create-form.md` 多选小节）。两者用途不同，别混淆。
+
+- **z-index 层级冲突**：与人员选择框相同，`Browser` 弹窗默认 z-index 约为 1000。放在自定义弹窗内时，弹窗遮罩层 z-index 需低于 1000（建议 800）。

package/skill-docs/references/components/form-EmployeeBrowser-api.md

@@ -0,0 +1,51 @@
+## 基础用法
+```ts
+import React, { PureComponent } from 'react';
+import { Browser} from "@weapp/ui";
+
+
+class HrmBrowserDemo extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: []
+    };
+  }
+
+  onHandleChange = (value) => {
+    this.setState({value});
+  }
+  
+  render() {
+    const { value } = this.state;
+    
+    return (
+      <Browser
+        module="hrm"
+        type="resource"
+        multiple={true}
+        value={value}
+        onChange={this.onHandleChange}
+      />
+    )
+  }
+}
+
+export default HrmBrowserDemo
+```
+
+## 具体参数
+
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| - | - | - | - | - |
+| module | 接口的模块标示 | string| 是 | 'hrm' |
+| type | 浏览按钮类别 | string | 是 | 'resource' |
+| value | 浏览按钮已选数据 受控值 | object[] | 否 | - |
+| onChange | 浏览按钮数据改变回调 | (data: object[]) => void | 否 | - |
+| multiple | 是否多选 | boolean | 否 | - |
+
+> 注意事项：
+1. module、type这两个类型需要固定写死，不能随意修改！
+2. 根据用户需求再给人员浏览框组件开启多选功能！
+
+- **z-index 层级冲突**：与人员选择框相同，`Browser` 弹窗默认 z-index 约为 1000。放在自定义弹窗内时，弹窗遮罩层 z-index 需低于 1000（建议 800）。

package/skill-docs/references/components/form-EmployeeBrowser.md

@@ -0,0 +1,51 @@
+## 基础用法
+```ts
+import React, { PureComponent } from 'react';
+import { Browser} from "@weapp/ui";
+
+
+class HrmBrowserDemo extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: []
+    };
+  }
+
+  onHandleChange = (value) => {
+    this.setState({value});
+  }
+  
+  render() {
+    const { value } = this.state;
+    
+    return (
+      <Browser
+        module="hrm"
+        type="resource"
+        multiple={true}
+        value={value}
+        onChange={this.onHandleChange}
+      />
+    )
+  }
+}
+
+export default HrmBrowserDemo
+```
+
+## 具体参数
+
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| - | - | - | - | - |
+| module | 接口的模块标示 | string| 是 | 'hrm' |
+| type | 浏览按钮类别 | string | 是 | 'resource' |
+| value | 浏览按钮已选数据 受控值 | object[] | 否 | - |
+| onChange | 浏览按钮数据改变回调 | (data: object[]) => void | 否 | - |
+| multiple | 是否多选 | boolean | 否 | - |
+
+> 注意事项：
+1. module、type这两个类型需要固定写死，不能随意修改！
+2. 根据用户需求再给人员浏览框组件开启多选功能！
+3. 此 `multiple` 是**页面浏览框组件**的多选 prop。**表单里的"人员字段"多选**是字段级配置——fields.json 写 `"multiple":true` 或 `form add-field --multiple`（见 `references/form/guide-create-form.md` 多选小节）。两者用途不同，别混淆。
+

package/skill-docs/references/components/form-Input.md

@@ -0,0 +1,123 @@
+## 基础用法
+
+```js
+import React, { Component, CSSProperties, ReactText } from 'react';
+import { Input, constants, Icon } from '@weapp/ui';
+
+const { Password, InputNumber, Textarea } = Input;
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-input`;
+
+type InputDemoState = {
+  value: ReactText;
+  visible: boolean;
+  style?: CSSProperties;
+}
+
+class InputDemo extends Component<any, InputDemoState> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      value: '默认内容',
+      numValue: 1,
+      textareaValue:'基本Textarea',
+      visible: false,
+      style: {
+        width: 200
+      }
+    };
+  }
+
+  handleChange = (v: ReactText) => this.setState({ value: v })
+
+  handleNumChange = (v: ReactText) => this.setState({numValue: v})
+
+  handleTextareaChange = (v: ReactText) => this.setState({ textareaValue: v })
+
+  render() {
+    const { value, style, numValue, textareaValue } = this.state;
+    return (
+      <div className={prefixCls}>
+        <Input
+          style={{ width: 200 }}
+          value={value}
+          onChange={this.handleChange}
+          placeholder="请输入内容"
+          suffix={''}
+        />
+        <h4>受控(未注册onChange事件,数据输入无变化)</h4>
+        <Input style={style} value={value} placeholder="请输入内容"/>
+        <h4>只读状态(内容渲染span标签)</h4>
+        <Input style={style} value={'只读状态'} readOnly/>
+        <h4>只读状态(显示input)</h4>
+        <Input style={style} value={'只读状态'} inputReadOnly/>
+        <h4>禁用状态</h4>
+        <Input style={style} placeholder="Disabled Input" disabled defaultValue={'文字超长'}/>
+        <h4>可清空</h4>
+        <Input defaultValue="基本Input" style={style} allowClear
+               placeholder="请输入内容"/>
+        <h4>密码框</h4>
+        <Password
+          style={style}
+          defaultValue="password"
+          placeholder="请输入内容"
+        />
+        <h4>密码框 只读</h4>
+        <Password
+          style={style}
+          readOnly
+          defaultValue="password"
+          placeholder="请输入内容"
+        />
+        <h4>密码框 禁用</h4>
+        <Password
+          style={style}
+          disabled
+          allowClear
+          defaultValue="password"
+          placeholder="请输入内容"
+        />
+
+        <h4>文本框限制长度5位</h4>
+        <Input style={style} value={value} onChange={this.handleChange} placeholder="请输入内容" maxLength={5}/>
+
+        <h4>带icon的输入框</h4>
+        <Input readOnly 
+          style={style} 
+          prefix="Date:" 
+          suffix={<Icon 
+          size={'s'} name={'Icon-date-o'} />} 
+          placeholder="请选择日期"
+          inputStyle={{ color: 'red' }}
+          value={this.state.value}
+         />
+
+        <Input style={style} prefix="Search:" suffix={<Icon size={'s'} name="Icon-search" />} placeholder="请输入内容" />
+
+        <h4>带前缀后缀的输入框</h4>
+        <Input style={style} prepend="https://" append=".com.cn" defaultValue="e-cology" allowClear />
+
+        <h4>InputNumber 数字框</h4>
+        <InputNumber style={style} precision={0} placeholder={'请输入'} />
+        <h4>InputNumber 数字框 数据受控</h4>
+        <InputNumber style={style} min={0} max={10} value={value} onChange={this.handleNumChange} />
+        <h4>InputNumber 数字框 千分位分隔符和精度</h4>
+        <InputNumber defaultValue={100000} hasSeparator precision={3} style={style} />
+        <h4>InputNumber 数字框 按钮位置两端显示</h4>
+        <InputNumber style={style} hideOps={false} min={-3} max={10} />
+        <h4>使用箭头按钮</h4>
+        <InputNumber showArrow style={style} hideOps={false} align="right" />
+
+        <h4>Textarea 多行文本框</h4>
+        <Textarea style={style} onChange={this.handleTextareaChange} value={textareaValue} placeholder="请输入内容" />
+
+        <h4>Textarea 多行文本框 高度自适应(autoHeight)</h4>
+        <Textarea style={style} onChange={this.handleTextareaChange} defaultValue={textareaValue} autoHeight />
+
+        <h4>Textarea 多行文本框 显示上限计数功能(showCount)</h4>
+        <Textarea style={style} rows={3} showCount maxLength={30} allowClear value={textareaValue} onChange={this.handleTextareaChange} placeholder="请输入内容" />
+      </div>
+    );
+  }
+}
+```