@para-ui/core 2.1.32 → 2.1.35

package/docs/view/switch/index.tsx

@@ -0,0 +1,50 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Switch from 'src/Switch';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicSwitch, disabledSwitch, switchWithLoading, switchWithText, switchWithHelp} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+//switch
+const ParaSwitch: FunctionComponent = () => {
+    const onChange = (checked: boolean) => {
+        console.log(`switch to ${checked}`);
+    };
+    return (
+        <div className={'paraui-switch-demo'}>
+            <Title name={'开关'}>代码演示</Title>
+            <CodeBox code={basicSwitch} title={'基本'} description={'最简单的用法。'}>
+                <Switch defaultChecked onChange={onChange}/>
+            </CodeBox>
+            <CodeBox code={disabledSwitch} title={'不可用'} description={'Switch 失效状态。'}>
+                <Switch disabled/>
+                <br/>
+                <br/>
+                <Switch disabled defaultChecked/>
+            </CodeBox>
+            <CodeBox code={switchWithLoading} title={'加载中'} description={'标识开关操作仍在执行中。'}>
+                <Switch loading/>
+                <br/>
+                <br/>
+                <Switch loading defaultChecked/>
+            </CodeBox>
+            <CodeBox code={switchWithText} title={'带有文字'} description={'带有文字的开关。'}>
+                <Switch defaultChecked label={'启用'}/>
+                <br/>
+                <br/>
+                <Switch label={'禁用'}/>
+            </CodeBox>
+            <CodeBox code={switchWithHelp} title={'帮助提示'} description={'带有帮助提示的开关。'}>
+                <Switch defaultChecked label={'启用'} labelTooltip={{tooltip: '帮助提示'}}/>
+                <br/>
+                <br/>
+                <Switch label={'禁用'} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}/>
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaSwitch;

package/docs/view/table/api.tsx

@@ -0,0 +1,330 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: 'style',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'align',
+        desc: '对齐方式',
+        type: 'left | center | right',
+        default: 'left'
+    },
+    {
+        name: 'fixedTable',
+        desc: '是否等分表格,出滚动条',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'refresh',
+        desc: '刷新表格',
+        type: 'any'
+    },
+    {
+        name: 'emptyProps',
+        desc: '空状态属性',
+        type: 'EmptyProps',
+        default: '具体可以查看空状态组件用法'
+    },
+    {
+        name: 'rowKey',
+        desc: '指定每行key',
+        type: 'string',
+        default: 'key'
+    },
+    {
+        name: 'url',
+        desc: '请求地址',
+        type: 'string'
+    },
+    {
+        name: 'ctx',
+        desc: '请求上下文',
+        type: 'string'
+    },
+    {
+        name: 'method',
+        desc: '请求方式',
+        type: 'Post | Get',
+        default: 'Get'
+    },
+    {
+        name: 'data',
+        desc: '本地数据源',
+        type: '[] | {list: []}'
+    },
+    {
+        name: 'page',
+        desc: '页数',
+        type: 'number',
+        default: '1'
+    },
+    {
+        name: 'size',
+        desc: '一页条数',
+        type: 'number',
+        default: '10'
+    },
+    {
+        name: 'search',
+        desc: '搜索条件',
+        type: 'object | string'
+    },
+    {
+        name: 'sizeArr',
+        desc: '每页显示的条数选择',
+        type: 'number[]',
+        default: '[10, 20, 30]'
+    },
+    {
+        name: 'pagination',
+        desc: '是否分页',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'autoPagination',
+        desc: '自适应分页,根据外容器大小,改变分页模式',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'tableCell',
+        desc: '渲染表格一行数据 (跟表格头部head里面的render参数互斥)',
+        type: '(row: any, params: any) => ReactNode'
+    },
+    {
+        name: 'operate',
+        desc: '操作列',
+        type: 'HeadDataProps'
+    },
+    {
+        name: 'requestCallback',
+        desc: '请求回调参数 requestCallback(data, cb) cb(data) 需要回调数据回来',
+        type: '(data: any, cb: (data: any) => void) => void'
+    },
+    {
+        name: 'showColumns',
+        desc: '是否显示列 外 里面 不显示',
+        type: 'outside | inside | false',
+        default: 'inside'
+    },
+    {
+        name: 'check',
+        desc: '是否开启复选框',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'checkDefaultValue',
+        desc: '默认复选框选中值',
+        type: 'any[]'
+    },
+    {
+        name: 'setCheck',
+        desc: '设置复选框选中值',
+        type: '(arr: any, data: any) => void'
+    },
+    {
+        name: 'radio',
+        desc: '是否开启单选',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'radioDefaultValue',
+        desc: '默认单选选中值',
+        type: 'string | number'
+    },
+    {
+        name: 'setRadio',
+        desc: '设置单选框选中值',
+        type: '(val: any, data: any) => void'
+    },
+    {
+        name: 'checkRememberPage',
+        desc: '多选记住分页数据',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabledArr',
+        desc: '选择框禁用',
+        type: 'Array<string | number>'
+    },
+    {
+        name: 'disabledArrStatus',
+        desc: '选择框禁用时的状态, true选中/false不选中/null不显示',
+        type: '{[name: string]: true | false | null}'
+    },
+    {
+        name: 'sortTable',
+        desc: '是否开启排序',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'filter',
+        desc: '是否过滤',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'paramsCallback',
+        desc: '处理请求参数',
+        type: '(data: any, cb: (handObj: ReqProps) => void) => void'
+    },
+    {
+        name: 'formatter',
+        desc: '用来格式化内容',
+        type: '(row: any, item: any, val: any, index: number) => ReactNode'
+    },
+    {
+        name: 'lineHeight',
+        desc: '用来计算表格行数',
+        type: 'number',
+        default: '56'
+    },
+    {
+        name: 'lineWidth',
+        desc: '表格每列没设置宽度的默认宽度',
+        type: 'number',
+        default: '80'
+    },
+    {
+        name: 'autoSize',
+        desc: '是否自动计算表格函数',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'loadMore',
+        desc: '加载更多',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'loadMoreRender',
+        desc: '加载更多自定义',
+        type: 'ReactNode'
+    },
+    {
+        name: 'onClickMore',
+        desc: '点击加载更多',
+        type: '() => void'
+    },
+    {
+        name: 'expandable',
+        desc: '是否嵌套',
+        type: 'Function'
+    },
+    {
+        name: 'expandValue',
+        desc: '默认展开项',
+        type: 'string[]'
+    },
+    {
+        name: 'expandMultiple',
+        desc: '展开多个',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabledExpand',
+        desc: '禁用展开项',
+        type: 'string[]'
+    },
+    {
+        name: 'onExpand',
+        desc: '展开事件',
+        type: '(row: any, status: ExpandableStatus) => void'
+    },
+    {
+        name: 'defaultExpandAllRows',
+        desc: '是否展开所有行',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'onClickColumns',
+        desc: '勾选列事件 a当前显示列 b当前点击项数据',
+        type: '(a: any[], b?: any) => void'
+    }
+];
+
+export const apiHeadData: RowsData = [
+    {
+        name: 'name',
+        desc: '数据属性',
+        type: 'string'
+    },
+    {
+        name: 'label',
+        desc: '显示名',
+        type: 'string'
+    },
+    {
+        name: 'sort',
+        desc: '是否排序',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'render',
+        desc: '渲染函数 (跟表格tableCell参数互斥)',
+        type: '(item: any) => ReactNode'
+    },
+    {
+        name: 'operateBtnRender',
+        desc: '渲染操作列按钮',
+        type: '(item: any) => OperateBtnProps'
+    },
+    {
+        name: 'align',
+        desc: '对齐方式',
+        type: 'left | center | right',
+        default: 'left'
+    },
+    {
+        name: 'filter',
+        desc: '是否过滤',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'enums',
+        desc: '枚举',
+        type: 'any[]'
+    },
+    {
+        name: 'selected',
+        desc: '是否显示字段',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'fixed',
+        desc: '滚动定位方向, 必须配合width使用',
+        type: 'left | right'
+    },
+    {
+        name: 'width',
+        desc: '宽度',
+        type: 'string | number'
+    }
+]
+
+export default apiData;