@para-ui/core 2.1.32 → 2.1.35

package/docs/view/colorPicker/api.tsx

@@ -0,0 +1,30 @@
+/**
+ * @author Hanz
+ * @date 2022/2/10 下午4:38
+ * @description colorPicker api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'color',
+        desc: '控制颜色选择器上的活动颜色',
+        type: `string | HSLColor | RGBColor`
+    },
+    {
+        name: 'onChange',
+        desc: '颜色变化时回调',
+        type: '(color: ColorResult, event: React.ChangeEvent<HTMLInputElement>) => void'
+    },
+    {
+        name: 'onChangeComplete',
+        desc: '颜色变化完成时回调',
+        type: '(color: ColorResult, event: React.ChangeEvent<HTMLInputElement>) => void'
+    }
+];
+export default apiData;

package/docs/view/colorPicker/codeString.tsx

@@ -0,0 +1,58 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const SketchCode = `
+import SketchPicker from '@para-ui/core/ColorPicker';
+
+const [color, setColor] = React.useState<any>({});
+
+const handleChange = (color: any) => {
+    console.log(':::::color picker::::', color);
+    setColor({color: color.rgb});
+};
+
+<SketchPicker color={color.color} onChange={handleChange}/>
+`;
+
+export const ChromeCode = `
+import {ChromePicker} from '@para-ui/core/ColorPicker';
+
+const [color, setColor] = React.useState<any>({});
+
+const handleChange = (color: any) => {
+    console.log(':::::color picker::::', color);
+    setColor({color: color.rgb});
+};
+
+<ChromePicker color={color.color} onChange={handleChange}/>
+`;
+
+export const SwatchesCode = `
+import {SwatchesPicker} from '@para-ui/core/ColorPicker';
+
+const [color, setColor] = React.useState<any>({});
+
+const handleChange = (color: any) => {
+    console.log(':::::color picker::::', color);
+    setColor({color: color.rgb});
+};
+
+<SwatchesPicker color={color.color} onChange={handleChange}/>
+`;
+
+export const CompactCode = `
+import {CompactPicker} from '@para-ui/core/ColorPicker';
+
+const [color, setColor] = React.useState<any>({});
+
+const handleChange = (color: any) => {
+    console.log(':::::color picker::::', color);
+    setColor({color: color.rgb});
+};
+
+<CompactPicker color={color.color} onChange={handleChange}/>
+`;
+
+

package/docs/view/colorPicker/index.scss

@@ -0,0 +1,5 @@
+.paraui-colorPicker-demo {
+  .code-box-demo {
+
+  }
+}

package/docs/view/colorPicker/index.tsx

@@ -0,0 +1,39 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import SketchPicker, {ChromePicker, SwatchesPicker, CompactPicker} from 'src/ColorPicker';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {SketchCode, ChromeCode, SwatchesCode, CompactCode} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+//color picker
+const ParaColorPicker: FunctionComponent = () => {
+    const [color, setColor] = React.useState<any>({});
+
+    const handleChange = (color: any) => {
+        console.log(':::::color picker::::', color);
+        setColor({color: color.rgb});
+    };
+
+    return (
+        <div className={'paraui-colorPicker-demo'}>
+            <Title name={'颜色选择器'}>代码演示</Title>
+            <CodeBox code={SketchCode} title={'基本'} description={'最简单的用法。'}>
+                <SketchPicker color={color.color} onChange={handleChange}/>
+            </CodeBox>
+            <CodeBox code={ChromeCode} title={'ChromePicker'} description={'ChromePicker。'}>
+                <ChromePicker color={color.color} onChange={handleChange}/>
+            </CodeBox>
+            <CodeBox code={SwatchesCode} title={'SwatchesPicker'} description={'SwatchesPicker。'}>
+                <SwatchesPicker color={color.color} onChange={handleChange}/>
+            </CodeBox>
+            <CodeBox code={CompactCode} title={'CompactPicker'} description={'CompactPicker。'}>
+                <CompactPicker color={color.color} onChange={handleChange}/>
+            </CodeBox>
+            <APITable data={apiData} link={'https://casesandberg.github.io/react-color/#api'}/>
+        </div>
+    );
+};
+
+export default ParaColorPicker;

package/docs/view/comboSelect/api.tsx

@@ -0,0 +1,255 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:26
+ * @description comboSelect api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'mode',
+        desc: '选择器模式',
+        type: 'table | tree | list',
+        default: 'table'
+    },
+    {
+        name: 'placeholder',
+        desc: '选择器占位符',
+        type: 'string',
+        default: '请选择'
+    },
+    {
+        name: 'searchPlaceholder',
+        desc: '搜索框占位符，showSearch 为 true 时有效',
+        type: 'string',
+        default: '请输入'
+    },
+    {
+        name: 'maxCount',
+        desc: '最大显示数',
+        type: 'number'
+    },
+    {
+        name: 'disabled',
+        desc: '是否禁用选择器',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'allowClear',
+        desc: '是否支持清空',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'showSearch',
+        desc: '是否显示搜索框',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'checkable',
+        desc: '选择器支持单选或多选',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'toggleSelectedOnSingle',
+        desc: '单选时可切换选中值 checkable 为 false 时有效',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'value',
+        desc: '当前选中值',
+        type: `{ disabled?: boolean; closable?: boolean; [key: string]: any; }[]
+        | { disabled?: boolean; closable?: boolean; [key: string]: any; }`
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认选中值',
+        type: `{ disabled?: boolean; closable?: boolean; [key: string]: any; }[]
+        | { disabled?: boolean; closable?: boolean; [key: string]: any; }`
+    },
+    {
+        name: 'popoverClassName',
+        desc: '弹出框类名',
+        type: 'string'
+    },
+    {
+        name: 'maxHeight',
+        desc: '内容容器最大高度',
+        type: 'number'
+    },
+    {
+        name: 'popoverActions',
+        desc: '自定义选择器页脚，showPopoverActions 为 true 有效',
+        type: 'React.ReactNode'
+    },
+    {
+        name: 'showPopoverActions',
+        desc: '是否显示选择器页脚',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'defaultOpen',
+        desc: '默认打开弹出框',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'replaceFields',
+        desc: '自定义节点 title、key、children 的字段',
+        type: `{
+            key?: string;
+            title?: string;
+            children?: string;
+        }`,
+        default: `{key: 'key', title: 'title', children: 'children'}`
+    },
+    {
+        name: 'outputFields',
+        desc: '自定义出参字段 outputKey、outputTitle',
+        type: `{
+            outputKey?: string;
+            outputTitle?: string;
+        }`,
+        default: `{outputKey: 'key', outputTitle: 'label'}`
+    },
+    {
+        name: 'refresh',
+        desc: '刷新组件',
+        type: 'number',
+    },
+    {
+        name: 'error',
+        desc: '错误状态',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'helperText',
+        desc: '辅助文本',
+        type: 'string',
+    },
+    {
+        name: 'fullPathKey',
+        desc: '节点路径字段，mode 为 tree 时有效',
+        type: 'string'
+    },
+    {
+        name: 'fullPathRender',
+        desc: '自定义节点路径，mode 为 tree 时有效',
+        type: '(node: TreeNodeProps) => React.ReactNode',
+    },
+    {
+        name: 'disablePopup',
+        desc: '非弹框模式',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'action',
+        desc: '暴露给外部的行为，closePopup() 可关闭弹出框',
+        type: 'React.Ref<{ closePopup(): void }>'
+    },
+    {
+        name: 'TableProps',
+        desc: 'table 组件属性',
+        type: 'TableProps'
+    },
+    {
+        name: 'TreeProps',
+        desc: 'tree 组件属性',
+        type: 'TreeProps'
+    },
+    {
+        name: 'url',
+        desc: '请求url',
+        type: 'string'
+    },
+    {
+        name: 'ctx',
+        desc: '请求上下文',
+        type: 'string'
+    },
+    {
+        name: 'method',
+        desc: '请求方法',
+        type: 'Get | Post',
+        default: 'GET'
+    },
+    {
+        name: 'params',
+        desc: '请求参数',
+        type: 'Object'
+    },
+    {
+        name: 'paramsCallback',
+        desc: '请求之前参数的回调',
+        type: '(params: { [name: string]: any }) => any'
+    },
+    {
+        name: 'tagRender',
+        desc: '自定义渲染 tag',
+        type: '(option) => React.ReactNode'
+    },
+    {
+        name: 'onTagRemove',
+        desc: 'tag 删除时回调',
+        type: '(option) => void'
+    },
+    {
+        name: 'optionRender',
+        desc: '自定义渲染列表option',
+        type: '(nodeData: TreeNodeProps) => React.ReactNode'
+    },
+    {
+        name: 'getOptionLabel',
+        desc: '获得option label',
+        type: '(nodeData: TreeNodeProps) => string'
+    },
+    {
+        name: 'dropdownMatchSelectWidth',
+        desc: '下拉匹配选择框宽度',
+        type: 'boolean | number',
+        default: 'true'
+    },
+    {
+        name: 'onClose',
+        desc: '选择器关闭时回调',
+        type: '() => void'
+    },
+    {
+        name: 'onOk',
+        desc: '点击确定回调',
+        type: '() => void'
+    },
+    {
+        name: 'onCancel',
+        desc: '点击取消回调',
+        type: '() => void'
+    },
+    {
+        name: 'onSearch',
+        desc: '搜索时回调',
+        type: '(searchKey: string) => void'
+    },
+    {
+        name: 'onChange',
+        desc: 'value 变化时回调',
+        type: '(options) => void'
+    }
+];
+export default apiData;