weaver-e10-builder 1.0.11-beta → 1.0.12-beta

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

@@ -0,0 +1,145 @@
+## 基础用法
+```tsx
+import React from 'react';
+import { constants, Radio, RadioValueType, RadioOptionType, RadioEvent, RadioDataType } from '@weapp/ui';
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-radio`;
+
+const optionsWithDisabled: RadioDataType = [
+  {
+    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 RadioDemo extends React.Component {
+
+  state = {
+    checked: true,
+    label: "已选择",
+    value: 'Apple'
+  }
+
+  onClick = (v: RadioValueType, o: RadioOptionType, e: RadioEvent) => {
+    console.log('onClick', v, o, e)
+  }
+  onBlur = (v: RadioValueType, o: RadioOptionType, e: React.FocusEvent<HTMLInputElement>) => {
+    console.log('onBlur', v, o, e)
+  }
+  onFocus = (v: RadioValueType, o: RadioOptionType, e: React.FocusEvent<HTMLInputElement>) => {
+    console.log('onFocus', v, o, e)
+  }
+  onKeyPress = (v: RadioValueType, o: RadioOptionType, e: React.KeyboardEvent<HTMLInputElement>) => {
+    console.log('onKeyPress', v, o, e)
+  }
+  onKeyDown = (v: RadioValueType, o: RadioOptionType, e: React.KeyboardEvent<HTMLInputElement>) => {
+    console.log('onKeyDown', v, o, e)
+  }
+  onKeyUp = (v: RadioValueType, o: RadioOptionType, e: React.KeyboardEvent<HTMLInputElement>) => {
+    console.log('onKeyUp', v, o, e)
+  }
+
+  onChange1 = (v: RadioValueType, o: RadioOptionType, e: RadioEvent) => {
+    console.log('onChange1', v, o, e)
+  }
+
+  onChange = (v: RadioValueType, o: RadioOptionType, e: RadioEvent) => {
+    console.log('onChange', v, o, e)
+    this.setState({ value: v })
+  }
+  btnClick = () => {
+    this.setState({ value: !this.state.value })
+  }
+
+  render() {
+    const { checked, value } = this.state;
+    return (
+      <div className={prefixCls}>
+        <h4>基本用法</h4>
+        <Radio defaultValue={false}
+          onChange={this.onChange1}
+          onClick={this.onClick}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        >Apple</Radio>
+        <Radio value={checked} onChange={this.onChange1} onFocus={this.onFocus} onBlur={this.onBlur} onKeyPress={this.onKeyPress} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp}>受控</Radio>
+        <h4>只读状态</h4>
+        <Radio readOnly>只读</Radio>
+        <h4>禁用状态</h4>
+        <Radio disabled>禁用</Radio>
+        <Radio value={true} disabled>禁用</Radio>
+        <h4>Radio datas -- value</h4>
+        <Radio data={optionsWithDisabled} value={value} defaultValue={'Apple'} readOnly onChange={this.onChange} />
+        <h4>Radio datas 垂直</h4>
+        <Radio data={optionsWithDisabled} value={value} vertical onChange={this.onChange} />
+        <h4>Radio datas 标签样式</h4>
+        <Radio data={optionsWithDisabled} defaultValue={value} optionType='tag' onChange={this.onChange}/>
+        <h4>Radio datas 标签样式(不带check框)</h4>
+        <Radio data={optionsWithDisabled} value={value} optionType='tag' hideCheck onChange={this.onChange} />
+        <h4>Checkbox (check框居右)</h4>
+        <Radio data={optionsWithDisabled} defaultValue={value}  onChange={this.onChange} isHoldRight/>
+        <Radio isHoldRight>不受控（defaultValue）</Radio>
+        <h4>Radio (check框居右,竖向,左对齐)</h4>
+        <Radio data={optionsWithDisabled} value={value} vertical alignType={'left'} isHoldRight  onChange={this.onChange} />
+        <h4>Radio (check框居右,竖向,右对齐)</h4>
+        <Radio data={optionsWithDisabled} value={value} vertical alignType={'right'} isHoldRight  onChange={this.onChange} />
+        <h4>Radio (check框居右,竖向,两端对齐)</h4>
+        <Radio data={optionsWithDisabled} value={value} vertical alignType={'justify'} isHoldRight onChange={this.onChange} />
+      </div>
+    );
+  }
+}
+```
+
+## 参数说明
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| canReversedChoose | 是否开启反选 | boolean | 否 | true |
+| className | 自定义 className | string | 否 | |
+| customOptionContenRender | 复写任一选项的 content 内容 | (props: RadioOptionProps, ele: ReactNode) => ReactNode | 否 | |
+| customOptionRender | 自定义每一选项 | (props: RadioOptionProps, ele: ReactNode, eventProps?: any) => ReactNode | 否 | |
+| customOverlayRender | 复写整体 radio | (_: any, ele: ReactNode) => ReactNode | 否 | |
+| defaultValue | 默认值（单个使用时传递 Boolean) | RadioValueType | 否 | |
+| disabled | 禁用 | boolean | 否 | false |
+| domKey | 单个使用 radio 时，radio 的唯一标识（使用 data 时唯一标识为 data 的 id） | RadioValueType | 否 | |
+| groupClassName | 设置外层 groupClassName（data 存在时生效） | string | 否 | |
+| groupStyle | 设置外层 style（data 存在时生效） | CSSProperties | 否 | |
+| hideCheck | 隐藏 check 框 | boolean | 否 | false |
+| isHoldRight | checkbox 是否靠右显示 | boolean | | false |
+| labelMaxWidth | label 最大宽度 (在表单中，默认生效，宽度 150，传递 0 则不生效,在选框居右模式下不生效) | number | 否 | |
+| name | radio 的 name 属性 | string | 否 | |
+| onBlur | blur 回调 | (value: RadioValueType, option: RadioOptionType , e: React.FocusEvent<HTMLInputElement>) => void | 否 | |
+| onChange | 数据变化回调 | (value: RadioValueType, option: RadioOptionType , e: RadioEvent) => void | 否 | |
+| onClick | 点击回调 | (value: RadioValueType, option: RadioOptionType , e: RadioEvent) => void | 否 | |
+| onFocus | focus 回调 | (value: RadioValueType, option: RadioOptionType , e: React.FocusEvent<HTMLInputElement>) => void | 否 | |
+| optionType | 选项类型 | 'default' \| 'tag' | 否 | 'default' |
+| overlayClassName | 选项的样式名 | string | 否 | |
+| readOnlyMode | 只读模式选择（区别普通的radio只读模式和表单中仅显示字段的只读模式） | boolean | 否 | false |
+| showTitle | 控制 title 是否显示 api | boolean | 否 | true |
+| style | 自定义样式 | CSSProperties | 否 | |
+| tips | 提示信息（如果是传递了 data，直接在 data 中设置） | string | false | - |
+| value | 受控（单个使用时传递 Boolean) | RadioValueType | 否 | |
+| vertical | 是否竖直排列（data 存在时生效） | boolean | 否 | |

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

@@ -0,0 +1,191 @@
+## 基础用法
+
+```tsx
+import React, { Component } from "react";
+import {
+  constants,
+  Select,
+  SelectOptionData,
+  SelectValueType,
+  SingleType,
+} from "@weapp/ui";
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-input`;
+
+type SelectDemoState = {
+  value: string;
+};
+
+const options = [
+  { id: "", content: "选项一", other: true, color: "#5D9CEC" },
+  { id: "2", content: "选项二", custom: 3, color: "#FF4D4F" },
+  {
+    id: "3",
+    content:
+      "超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本",
+    color: "#52C41A",
+  },
+  { id: "4", content: "禁用项", disabled: true },
+];
+
+const groupOptions = [
+  { id: "11", content: "选项一", type: "1" },
+  { id: "12", content: "禁用项", type: "1", disabled: true },
+  { id: "13", content: "选项三", type: "1" },
+  { id: "21", content: "选项四", type: "2" },
+  { id: "31", content: "选项五", type: "3" },
+];
+
+const groupTitle = [
+  { id: "1", content: "分组1" },
+  { id: "2", content: "分组2" },
+  { id: "3", content: "分组3" },
+];
+
+class SelectDemo extends Component<any, SelectDemoState> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      value: "",
+      valueArr: ["1"],
+      valueObj: groupOptions[0],
+    };
+  }
+
+  handleChange = (v: SelectValueType, option: any, event: any) => {
+    console.log("handleChange");
+    console.log("v", v);
+    console.log("option", option);
+    console.log("event", event);
+    this.setState({ value: v as string });
+  };
+
+  handleSelect = (
+    value: SingleType<SelectValueType>,
+    option: SelectOptionData,
+  ) => {
+    console.log("selected:", value, option);
+  };
+
+  handleArrChange = (v: SelectValueType) => this.setState({ valueArr: v as string[] });
+
+  handleObjChange = (v: SelectValueType) => this.setState({ valueObj: v as SelectOptionData });
+
+  handleDeselect = (
+    value: SingleType<SelectValueType>,
+    option: SelectOptionData,
+  ) => {
+    console.log("deselected:", value, option);
+  };
+
+  onSelectClick = () => console.info("onSelectClick");
+
+  render() {
+    const { value, valueArr, valueObj } = this.state;
+    return (
+      <div className={prefixCls}>
+        <h4>单选</h4>
+        <Select
+          data={options}
+          value={value}
+          showSearch
+          allowClear
+          onSelect={this.handleSelect}
+          onDeselect={this.handleDeselect}
+          onChange={this.handleChange}
+          onSelectClick={this.onSelectClick}
+        />
+        <h4>多选</h4>
+        <Select
+          style={{ width: 250 }}
+          data={options}
+          multiple
+          showSearch
+          allowClear
+          allowSelectAll
+          value={valueArr}
+          onSelect={this.handleSelect}
+          onChange={this.handleArrChange}
+        />
+        <h4>只读</h4>
+        <Select data={options} value={"2"} readOnly />
+        <h4>禁用</h4>
+        <Select style={{ width: 200 }} data={options} value={"3"} disabled />
+        <h4>分组</h4>
+        <Select
+          style={{ width: 200 }}
+          data={groupOptions}
+          showDataGroupByType
+          dataGroupTitle={groupTitle}
+          value={valueObj}
+          onSelect={this.handleSelect}
+          onChange={this.handleObjChange}
+        />
+      </div>
+    );
+  }
+}
+```
+
+## 参数说明
+### 组件参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| allowCancel | 单选时是否允许取消选中项 | boolean | F | false |
+| allowClear | 是否可以清除输入框 | boolean | F | false |
+| allowSelectAll | 多选时是否允许全选 | boolean | F | false |
+| alwaysTriggerSelect | 单选时允许选中已选数据并触发 onSelect 回调 | F | boolean | false |
+| bindTriggerContainer | 是否绑定弹层容器，若为 true，则调用 getPopupContainer 函数；若为 false，使用 getPopupContainer 这个 props | boolean | F | - |
+| customInputRender | 自定义输入框的渲染 | (selectComponent:any, selectedData: OptionsType) => ReactNode | F | - |
+| customOptionRender | 自定义每一选项的渲染 | (option: OptionData) => ReactNode | F | - |
+| customRenderEmpty | 自定义渲染无数据时暂时的空状态 | customRenderEmpty: () => ReactNode | F | - |
+| data | 下拉选项数据 | SelectOptionsType | F | - |
+| dataGroupTitle | 分组数据 | DataGroupType | F | false |
+| defaultOpen | 是否默认打开下拉框 | boolean | F | false |
+| defaultValue | 当前数(默认值) | string[],SelectOptionsType | F | - |
+| disabled | 是否禁用 | boolean boolean | F | |
+| dropdownClassName | 自定义下拉框的 class | string | F | - |
+| dropdownMatchSelectWidth | 自定义下拉框宽度，若是 boolean 类型，则与 container 同宽；若是 number，则是自定义宽度 | boolean ｜ number | F | - |
+| dropdownPlacement | 自定义下拉框的显示位置 | PopupPlacement | F | - |
+| dropdownRender | 自定义下拉框 | (menu: React.ReactElement) => React.ReactElement | F | - |
+| dropdownStyle | 自定义下拉框的样式 | CSSProperties | F | false |
+| filterOption | 自定义筛选，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false | (inputValue: string, option: SelectOptionData) => boolean | F | - |
+| focusAutoExpand | select 内容区域溢出隐藏情况下,聚焦后自动放大效果功能开关 | boolean | F | - |
+| focusAutoExpandProps | select 内容区域隐藏情况下,聚焦后自动放大效果其它参数 | focusAutoExpandProps | F | - |
+| getPopupContainer | 弹层容器定位 | () => HTMLElement ｜ undefined | F | - |
+| inputIcon | 自定义输入框右侧的图标 | RenderNode | F | - |
+| multiple | 是否多选 | boolean | F | false |
+| onBlur | 失去焦点时触发回调 | () => void | F | - |
+| onChange | 数据修改时触发回调 | (value: string[],SelectOptionsType, option: SelectOptionData SelectOptionsType, event: SelectEvent) => void | F | |
+| onClick | 鼠标点击时触发回调 | React.MouseEventHandler | F | - |
+| onDeselect | 取消选择数据时触发回调 | SelectOptionData, option: SelectOptionData) => void | F | - |
+| onFocus | 聚焦输入框时触发回调 | () => void | F | - |
+| onKeyDown | 按下按键时触发回调 | React.KeyboardEventHandler | F | - |
+| onSearch | 搜索数据时触发回调 | (value: string) => void | F | - |
+| onSelect | 选择数据时触发回调 | (value: string) => void SelectOptionData, option: SelectOptionData) => void | F | |
+| onSelectClick | 点击 select 框的回调 | () => void | F | - |
+| onVisibleChange | 下拉框显示隐藏时触发回调 | (visible: boolean) => void | F | - |
+| open | 是否打开下拉框 | boolean | F | false |
+| optionType | 选项的类型，可以设置为'tag' | string | F | - |
+| optionType | 是否显示为标签样式 | boolean | F | false |
+| readOnly | 是否只读 | boolean | F | false |
+| readOnlyShowPlaceholder | 只读情况下无数据，展示 placeholder | boolean | F | false |
+| showArrow | 是否显示右侧箭头图标 | boolean | F | false |
+| showDataGroupByType | 开启分组功能 | boolean | F | false |
+| showSearch | 是否可以搜索 | boolean | F | false |
+| tagRender | 自定义标签的渲染 | (props: CustomTagProps) => React.ReactNode | F | - |
+| triggerProps | trigger 组件的 props | TriggerConfig | F | - |
+| value | 当前数(受控值) | string[],SelectOptionsType | F | - |
+| vertical | 是否竖向排列 | boolean | F | - |
+
+### focusAutoExpandProps参数说明如下
+autoExpandUseAbsolute 是否开启对应 select 组件展开后使用绝对定位，避免撑开布局。默认情况下不设置此属性时候会撑开布局。
+autoExpandParentCls 对应 select 最大撑开的宽度大小参考系,参考父级 容器 class 类名， 无法直接设置参考容器 可以提供参考容器对应的 class 类名。
+autoExpandContainer 对应 select 最大撑开的宽度大小参考系,参考父级注 如果不设置对应 select 撑开内容区的宽度参考下 默认效果为视口大小。
+```tsx
+export type focusAutoExpandProps = {
+  autoExpandUseAbsolute?: boolean;
+  autoExpandParentCls?: string;
+  autoExpandContainer?: () => HTMLElement | undefined;
+};
+```

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

@@ -0,0 +1,46 @@
+## 基础用法
+```js
+import React from 'react';
+import { Switch, SwitchChangeEventHandler, SwitchClickEventHandler } from '@weapp/ui';
+
+class SwitchDemo extends React.Component {
+
+  state = {
+    checked: false,
+    isLoading: true
+  }
+
+  handleClick: SwitchClickEventHandler = (checked, e) => {
+    this.setState({ checked: !this.state.checked, isLoading: !this.state.isLoading })
+  }
+
+  render() {
+    const { checked, isLoading } = this.state;
+    return (
+      <div>
+        <h3>基础用法</h3>
+        <div style={{width: '140px', display: 'flex',justifyContent: 'space-between'}}>
+        <Switch size="sm" />
+        <Switch size="md" loading={isLoading} />
+        <Switch size="lg" value={checked} onClick={this.handleClick}/>
+        </div>
+      </div>
+    );
+  }
+}
+```
+
+## 参数配置
+
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| checkedChildren | 选中时的内容 | `React.ReactNode` | 否 | |
+| defaultValue | 默认是否选中 | `boolean` | 否 | |
+| loading | 加载中的开关 | `boolean` | 否 | |
+| loadingIcon | switch 加载中图标 | `React.ReactNode` | 否 | |
+| onBeforeChange | 变化前回调 | `(checked: boolean, e: React.MouseEvent \| React.KeyboardEvent) => Promise` | 否 | |
+| onChange | 变化回调 | `(checked: boolean, event: React.MouseEvent \| React.KeyboardEvent) => void` | 否 | |
+| onClick | 点击事件回调 | `SwitchClickEventHandler` | 否 | |
+| size | switch 大小 | `'sm' \| 'md' \| 'lg'` | 否 | |
+| unCheckedChildren | 非选中时的内容 | `React.ReactNode` | 否 | |
+| value | 是否选中（受控） | `boolean` | 否 | |

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

@@ -0,0 +1,53 @@
+## 基础用法
+```js
+import { Component } from 'react';
+import { Upload, UploadData, Icon } from '@weapp/ui';
+import { data } from '../mock';
+
+class UploadDemo extends Component<any> {
+  state = { data: data }
+  onChange = (data?: UploadData[]) => {
+    this.setState({ data })
+  }
+  renderListUploaded = (data: UploadData[], instance: any, com: any) => {
+    return <div>{
+      data.map((item) => {
+        return <div key={item.fileid} style={{ display: 'flex', height: '20px', alignItems: 'center' }}>
+          <Icon name="Icon-Knowledge-document-o" />
+          <span style={{ display: 'inline-block', width: '200px', marginLeft: '10px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</span>
+        </div>
+      })
+    }
+    </div>
+  }
+  beforeUpload = (file: File): Promise<void | File> => {
+    return new Promise((rs, rj) => {
+      // xxxxx
+      rj()
+    })
+    // or return false
+    // or return this.encryFile(file)
+  }
+  encryFile = (file: File) => {
+    // 可以在这里对文件进行校验,压缩,加密等操作
+    // return xxx
+  }
+  render() {
+    return (
+      <div>
+        <Upload
+         
+          data={this.state.data}
+          onChange={this.onChange}
+          uploadParams={{
+            module: 'document'
+          }}
+          beforeUpload={this.beforeUpload}
+        />
+      </div>
+    );
+  }
+}
+
+export default UploadDemo;
+```

package/skill-docs/references/components/generic-Echarts.md

@@ -0,0 +1,102 @@
+## 基础用法
+### 直接引入组件进行使用
+```js
+import { ECharts } from "echarts/core";
+import React, { Component } from "react";
+import { constants, EChart } from "@weapp/ui";
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-echarts`;
+
+interface EChartDemoState {
+  barEchartOpt: any;
+  newOption: any
+}
+export default class EChartDemo extends Component<{}, EChartDemoState> {
+  echarts: any;
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      barEchartOpt: {
+        title: {
+          show: true,
+          text: "销量柱状图"
+        },
+        tooltip: {},
+        legend: {
+          data: ["销量"]
+        },
+        xAxis: {
+          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "销量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20]
+          }
+        ]
+      },
+      newOption: {
+        series: [{
+          type: 'custom',
+          coordinateSystem: 'none',
+          renderItem: (params: any, api: any) => {
+            // console.log(this.echarts)
+            return {
+              type: 'myCustomShape',
+              shape: {
+                x: api.value(0),
+                y: api.value(1),
+                width: api.value(2),
+                height: api.value(3)
+              },
+              style: {
+                fill: 'red'
+              }
+            };
+          },
+          data: [[10, 20, 30, 40]]
+        }]
+      }
+    }
+  }
+
+
+  getInstance = (echart: ECharts) => {
+    console.log(echart);
+  }
+  onReady = (echarts: any) => {
+    this.echarts = echarts;
+    const MyShape = echarts.graphic.extendShape({
+      shape: {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      },
+      buildPath: function (ctx: any, shape: any) {
+        ctx.moveTo(shape.x, shape.y);
+        ctx.lineTo(shape.x + shape.width, shape.y);
+        ctx.lineTo(shape.x, shape.y + shape.height);
+        ctx.lineTo(shape.x + shape.width, shape.y + shape.height);
+        ctx.closePath();
+      }
+    });
+    echarts.graphic.registerShape('myCustomShape', MyShape);
+  }
+  render() {
+
+    return (
+      <div className={prefixCls}>
+        <div className={`${prefixCls}-content`}>
+          <EChart option={this.state.barEchartOpt} />
+          {/* <EChart option={JSON.parse(JSON.stringify(this.state.barEchartOpt))} isEmpty={true} /> */}
+          {/* <EChart option={this.state.newOption} onReady={this.onReady} /> */}
+        </div>
+      </div>
+    )
+  }
+}
+```