feat(docs): update recodo demo (#398)

.recodo/componentDemos/ActionList.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ActionList, Box } from '@ucloud-fe/react-components';
+
+const Demo = () => {
+  const list: { props: { size: 'sm' | 'md' | 'lg'; buttonStyleType: 'primary' | 'border' | 'border-gray' } }[] = [
+    { props: { size: 'sm', buttonStyleType: 'primary' } },
+    { props: { size: 'md', buttonStyleType: 'primary' } },
+    { props: { size: 'lg', buttonStyleType: 'primary' } },
+    { props: { size: 'md', buttonStyleType: 'border' } },
+    { props: { size: 'md', buttonStyleType: 'border-gray' } }
+  ];
+
+  return (
+    <Box container direction="column" spacing="lg">
+      {list.map(l => (
+        <ActionList
+          actionList={new Array(5).fill(null).map((v, i) => ({
+            label: `Action ${i}`
+          }))}
+          exposeCount={3}
+          {...l.props}
+        />
+      ))}
+    </Box>
+  );
+};
+
+export default React.memo(Demo);

.recodo/componentDemos/AutoComplete.tsx

@@ -0,0 +1,84 @@
+// @ts-nocheck
+import { AutoComplete, Box, Form, Icon, Radio, Switch } from '@ucloud-fe/react-components';
+import React from 'react';
+const formLayout = {
+    labelCol: {
+        span: 3
+    },
+    controllerCol: {
+        span: 9
+    }
+};
+// demo start
+
+const options = new Array(100).fill(null).map((v, i) => ({ value: `Item ${i}` }));
+class BaseDemo extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            handleSearch: 'default',
+            disabled: false
+        };
+    }
+    render() {
+        const { handleSearch, disabled, loading, prefix, block } = this.state;
+        const props = {
+            disabled,
+            loading,
+            block
+        };
+        if (handleSearch === 'false') {
+            props.handleSearch = false;
+        } else if (handleSearch === 'custom') {
+            props.handleSearch = (item, searchValue) => {
+                return item.value.toUpperCase().indexOf(searchValue.toUpperCase()) >= 0;
+            };
+        }
+        if (prefix) {
+            props.prefix = <Icon type="circle" />;
+        }
+        return (
+            <div>
+                <Form className="demo-form" itemProps={{ ...formLayout }}>
+                    <Form.Item label="disabled">
+                        <Switch checked={disabled} onChange={disabled => this.setState({ disabled })} />
+                    </Form.Item>
+                    <Form.Item label="loading">
+                        <Switch checked={loading} onChange={loading => this.setState({ loading })} />
+                    </Form.Item>
+                    <Form.Item label="block">
+                        <Switch checked={block} onChange={block => this.setState({ block })} />
+                    </Form.Item>
+                    <Form.Item label="prefix">
+                        <Switch checked={prefix} onChange={prefix => this.setState({ prefix })} />
+                    </Form.Item>
+                    <Form.Item label="handleSearch">
+                        <Radio.Group
+                            value={handleSearch}
+                            onChange={handleSearch => this.setState({ handleSearch })}
+                            options={['default', 'false', 'custom'].map(v => ({ value: v }))}
+                        />
+                    </Form.Item>
+                </Form>
+
+                <AutoComplete options={options} onChange={console.log} {...props} />
+            </div>
+        );
+    }
+}
+// demo end
+
+const Demo = () => {
+    const list = [{ props: { disabled: false } }, { props: { disabled: true } }, { props: { loading: true } }];
+
+    return (
+        <Box container direction="column" spacing="lg">
+            {list.map(({ props }) => (
+                <AutoComplete {...props} status="default" />
+            ))}
+            <BaseDemo />
+        </Box>
+    );
+};
+
+export default React.memo(Demo);

.recodo/componentDemos/Badge.tsx

@@ -1,5 +1,94 @@
+// @ts-nocheck
+import { Badge, BadgeProps, Box, Combine, Form, Input, NumberInput, Radio, Switch } from '@ucloud-fe/react-components';
 import React from 'react';
-import { Badge, BadgeProps, Box, Combine } from '@ucloud-fe/react-components';
+
+// demo start
+
+const formLayout = {
+    labelCol: {
+        span: 3
+    },
+    controllerCol: {
+        span: 9
+    }
+};
+
+const { Placement, Color, defaultProps } = Badge;
+class BaseDemo extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: 1,
+            dot: false,
+            hideWhenZero: false,
+            placement: defaultProps.placement,
+            maxValue: defaultProps.maxValue,
+            color: defaultProps.color,
+            noneContent: false
+        };
+    }
+    render() {
+        const { value, dot, hideWhenZero, placement, maxValue, noneContent, color, cColor, cBackground } = this.state;
+        return (
+            <div>
+                <Form className="demo-form" itemProps={{ ...formLayout }}>
+                    <Form.Item label="value">
+                        <Input value={value} onChange={e => this.setState({ value: e.target.value })} />
+                    </Form.Item>
+                    <Form.Item label="maxValue">
+                        <NumberInput value={maxValue} onNumberChange={maxValue => this.setState({ maxValue })} />
+                    </Form.Item>
+                    <Form.Item label="dot">
+                        <Switch checked={dot} onChange={dot => this.setState({ dot })} />
+                    </Form.Item>
+                    <Form.Item label="hideWhenZero">
+                        <Switch checked={hideWhenZero} onChange={hideWhenZero => this.setState({ hideWhenZero })} />
+                    </Form.Item>
+                    <Form.Item label="noneContent">
+                        <Switch checked={noneContent} onChange={noneContent => this.setState({ noneContent })} />
+                    </Form.Item>
+                    <Form.Item label="placement">
+                        <Radio.Group
+                            options={Placement.map(p => ({ value: p }))}
+                            value={placement}
+                            onChange={placement => {
+                                this.setState({ placement });
+                            }}
+                        />
+                    </Form.Item>
+                    <Form.Item label="color">
+                        <Radio.Group
+                            options={Color.map(p => ({ value: p }))}
+                            value={color}
+                            onChange={color => {
+                                this.setState({ color });
+                            }}
+                        />
+                    </Form.Item>
+                    <Form.Item label="badgeStyle.color">
+                        <input type="color" onChange={e => this.setState({ cColor: e.target.value })} />
+                    </Form.Item>
+                    <Form.Item label="badgeStyle.background">
+                        <input type="color" onChange={e => this.setState({ cBackground: e.target.value })} />
+                    </Form.Item>
+                </Form>
+
+                <Badge
+                    value={value}
+                    maxValue={+maxValue}
+                    dot={dot}
+                    hideWhenZero={hideWhenZero}
+                    placement={placement}
+                    color={color}
+                    badgeStyle={{ color: cColor, background: cBackground }}
+                >
+                    {noneContent ? null : <div style={{ width: 50, height: 50, background: '#ddd' }} />}
+                </Badge>
+            </div>
+        );
+    }
+}
+// demo end
 
 const square = <div style={{ width: 50, height: 50, background: '#ddd' }} />;
 
@@ -39,6 +128,8 @@ const Demo = () => {
             ].map(render => (
                 <Box spacing={24}>{(['red', 'green', 'yellow', 'primary'] as Color[]).map(render)}</Box>
             ))}
+
+            <BaseDemo />
         </Box>
     );
 };

.recodo/componentDemos/Button.tsx

@@ -1,5 +1,100 @@
+// @ts-nocheck
+import { Box, Button, Form, Radio, Switch } from '@ucloud-fe/react-components';
 import React from 'react';
-import { Button, Box } from '@ucloud-fe/react-components';
+
+// demo start
+const { StyleTypes, Sizes, Shapes, defaultProps } = Button;
+const IconTypes = ['undefined', 'circle-fill', 'circle', 'loading'];
+class BaseDemo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            styleType: defaultProps.styleType,
+            size: defaultProps.size,
+            shape: 'undefined',
+            icon: IconTypes[0],
+            disabled: false,
+            fakeDisabled: false
+        };
+    }
+    render() {
+        const { styleType, size, shape, icon, loading, disabled, fakeDisabled, block } = this.state;
+        const itemLayout = {
+            labelCol: {
+                span: 3
+            },
+            controllerCol: {
+                span: 9
+            }
+        };
+        const props = {
+            styleType,
+            shape,
+            size,
+            icon,
+            loading,
+            disabled,
+            fakeDisabled,
+            block
+        };
+        if (shape === 'undefined') {
+            delete props.shape;
+        }
+        if (icon === 'undefined') {
+            delete props.icon;
+        }
+        return (
+            <div>
+                <Form className="demo-form">
+                    <Form.Item label="styleType" {...itemLayout}>
+                        <Radio.Group
+                            options={StyleTypes.map(styleType => ({ value: styleType }))}
+                            value={styleType}
+                            onChange={styleType => this.setState({ styleType })}
+                        />
+                    </Form.Item>
+                    <Form.Item label="size" {...itemLayout}>
+                        <Radio.Group
+                            options={Sizes.map(size => ({ value: size }))}
+                            value={size}
+                            onChange={size => this.setState({ size })}
+                        />
+                    </Form.Item>
+                    <Form.Item label="shape" {...itemLayout}>
+                        <Radio.Group
+                            options={['undefined', ...Shapes].map(shape => ({ value: shape }))}
+                            value={shape}
+                            onChange={shape => this.setState({ shape })}
+                        />
+                    </Form.Item>
+                    <Form.Item label="icon" {...itemLayout}>
+                        <Radio.Group
+                            options={IconTypes.map(icon => ({ value: icon }))}
+                            value={icon}
+                            onChange={icon => this.setState({ icon })}
+                        />
+                    </Form.Item>
+                    <Form.Item label="loading" {...itemLayout}>
+                        <Switch checked={loading} onChange={loading => this.setState({ loading })} />
+                    </Form.Item>
+                    <Form.Item label="disabled" {...itemLayout}>
+                        <Switch checked={disabled} onChange={disabled => this.setState({ disabled })} />
+                    </Form.Item>
+                    <Form.Item label="fakeDisabled" {...itemLayout}>
+                        <Switch checked={fakeDisabled} onChange={fakeDisabled => this.setState({ fakeDisabled })} />
+                    </Form.Item>
+                    <Form.Item label="block" {...itemLayout}>
+                        <Switch checked={block} onChange={block => this.setState({ block })} />
+                    </Form.Item>
+                </Form>
+                <Button {...props} onClick={console.log}>
+                    Button
+                </Button>
+            </div>
+        );
+    }
+}
+// demo end
 
 const Demo = () => {
     return (
@@ -23,6 +118,7 @@ const Demo = () => {
                 <Button icon="plus" />
                 <Button icon="plus" disabled />
             </Box>
+            <BaseDemo />
         </Box>
     );
 };

.recodo/componentDemos/Calendar.tsx

@@ -1,10 +1,41 @@
+import { Box, Calendar, Form } from '@ucloud-fe/react-components';
 import React from 'react';
-import { Box, Calendar } from '@ucloud-fe/react-components';
 
 const Demo = () => {
     return (
         <Box container direction="column" spacing="lg">
-            <Calendar />
+            <Form.Group title="默认">
+                <Calendar />
+            </Form.Group>
+            <Form.Group title="区间禁用">
+                <Calendar
+                    rules={{ range: [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now() + 7 * 24 * 60 * 60 * 1000] }}
+                />
+            </Form.Group>
+            <Form.Group title="区间范围">
+                <Calendar
+                    value={null}
+                    rangeValue={[
+                        new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+                        new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)
+                    ]}
+                />
+            </Form.Group>
+            <Form.Group title="month - 月历">
+                <Calendar
+                    type="month"
+                    rules={{
+                        range: [Date.now() - 3 * 30 * 24 * 60 * 60 * 1000, Date.now() + 3 * 30 * 24 * 60 * 60 * 1000]
+                    }}
+                />
+            </Form.Group>
+            <Form.Group title="组合">
+                <Calendar.TwoSide
+                    rules={{
+                        range: [Date.now() - 3 * 30 * 24 * 60 * 60 * 1000, Date.now() + 3 * 30 * 24 * 60 * 60 * 1000]
+                    }}
+                />
+            </Form.Group>
         </Box>
     );
 };