@fle-ui/next 1.0.0-alpha.1 → 1.0.0-alpha.2

package/components/divider/demos/customize-style.tsx

@@ -1,27 +0,0 @@
-/**
- * title: 样式自定义
- * desc: 样式自定义
- */
-
-import React from 'react';
-import { Divider } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return (
-    <>
-      <Divider style={{ borderWidth: 2, borderColor: '#7cb305' }} />
-      <Divider style={{ borderColor: '#7cb305' }} dashed />
-      <Divider style={{ borderColor: '#7cb305' }} dashed>
-        Text
-      </Divider>
-      <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
-      <Divider
-        type="vertical"
-        style={{ height: 60, borderColor: '#7cb305' }}
-        dashed
-      />
-    </>
-  );
-};
-
-export default BasicDemo;

package/components/divider/demos/horizontal.tsx

@@ -1,33 +0,0 @@
-/**
- * title: 水平分割线
- * desc: 默认为水平分割线，可在中间加入文字。
- */
-
-import React from 'react';
-import { Divider } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return (
-    <>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-      <Divider />
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-      <Divider dashed />
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-    </>
-  );
-};
-
-export default BasicDemo;

package/components/divider/demos/plain.tsx

@@ -1,43 +0,0 @@
-/**
- * title: 分割文字使用正文样式
- * desc: 使用 `plain` 可以设置为更轻量的分割文字样式。
- */
-
-import React from 'react';
-import { Divider } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return (
-    <>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-      <Divider plain>Text</Divider>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-      <Divider orientation="left" plain>
-        Left Text
-      </Divider>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-      <Divider orientation="right" plain>
-        Right Text
-      </Divider>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-    </>
-  );
-};
-
-export default BasicDemo;

package/components/divider/demos/vertical.tsx

@@ -1,21 +0,0 @@
-/**
- * title: 垂直分割线
- * desc: 使用 `type="vertical"` 设置为行内的垂直分割线。
- */
-
-import React from 'react';
-import { Divider } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return (
-    <>
-      Text
-      <Divider type="vertical" />
-      <a href="#">Link</a>
-      <Divider type="vertical" />
-      <a href="#">Link</a>
-    </>
-  );
-};
-
-export default BasicDemo;

package/components/divider/demos/with-text.tsx

@@ -1,39 +0,0 @@
-/**
- * title: 带文字的分割线
- * desc: 分割线中带有文字，可以用 `orientation` 指定文字位置。
- */
-
-import React from 'react';
-import { Divider } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return (
-    <>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-      <Divider>Text</Divider>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-      <Divider orientation="left">Left Text</Divider>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-      <Divider orientation="right">Right Text</Divider>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
-        merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
-        quo modo.
-      </p>
-    </>
-  );
-};
-
-export default BasicDemo;

package/components/divider/divider.md

@@ -1,47 +0,0 @@
----
-title: Divider 分割线
-order: 0
-legacy: /divider
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Divider 按钮
-
-区隔内容的分割线。
-
-## 何时使用
-
-- 对不同章节的文本段落进行分割。
-- 对行内文字/链接进行分割，例如表格的操作列。
-
-## 代码演示
-
-### 水平分割线
-<code src="./demos/horizontal.tsx" />
-
-### 分割文字使用正文样式
-<code src="./demos/plain.tsx" />
-
-### 垂直分割线
-<code src="./demos/vertical.tsx" />
-
-### 带文字的分割线
-<code src="./demos/with-text.tsx" />
-
-### 样式自定义
-<code src="./demos/customize-style.tsx" />
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| className | 分割线样式类 | string | - |  |
-| dashed | 是否虚线 | boolean | false |  |
-| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` |  |
-| plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
-| style | 分割线样式对象 | CSSProperties | - |  |
-| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |

package/components/divider/index.tsx

@@ -1,13 +0,0 @@
-import React, { FC } from 'react';
-import { Divider as AntdDivider } from 'antd';
-import { DividerProps as AntdDividerProps } from 'antd/es/divider';
-
-export interface DividerProps extends AntdDividerProps {}
-
-const Divider: FC<DividerProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdDivider {...otherProps}>{children}</AntdDivider>;
-};
-
-export default Divider;

package/components/drawer/demos/basic-right.tsx

@@ -1,39 +0,0 @@
-/**
- * title: 基础抽屉
- * desc: 基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭。
- */
-
-import React, { useState } from 'react';
-import { Drawer, Button } from '@fle-ui/next';
-
-const BasicRightDemo = () => {
-  const App: React.FC = () => {
-    const [visible, setVisible] = useState(false);
-    const showDrawer = () => {
-      setVisible(true);
-    };
-    const onClose = () => {
-      setVisible(false);
-    };
-    return (
-      <>
-        <Button type="primary" onClick={showDrawer}>
-          Open
-        </Button>
-        <Drawer
-          title="Basic Drawer"
-          placement="right"
-          onClose={onClose}
-          visible={visible}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Drawer>
-      </>
-    );
-  };
-  return <App />;
-};
-
-export default BasicRightDemo;

package/components/drawer/demos/extra.tsx

@@ -1,59 +0,0 @@
-// /**
-//  * title: 额外操作
-//  * desc: 在 Ant Design 规范中，操作按钮建议放在抽屉的右上角，可以使用 `extra` 属性来实现。
-//  */
-
-// import React, { useState } from 'react';
-// import { Drawer, Button, Space, Radio } from '@fle-ui/next';
-// import { DrawerProps } from '@fle-ui/next';
-// import { RadioChangeEvent } from 'antd/es/radio';
-
-// const BasicRightDemo = () => {
-//   const [visible, setVisible] = useState(false);
-//   const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
-//   const showDrawer = () => {
-//     setVisible(true);
-//   };
-//   const onChange = (e: RadioChangeEvent) => {
-//     setPlacement(e.target.value);
-//   };
-//   const onClose = () => {
-//     setVisible(false);
-//   };
-//   return (
-//     <>
-//       <Space>
-//         <Radio.Group value={placement} onChange={onChange}>
-//           <Radio value="top">top</Radio>
-//           <Radio value="right">right</Radio>
-//           <Radio value="bottom">bottom</Radio>
-//           <Radio value="left">left</Radio>
-//         </Radio.Group>
-//         <Button type="primary" onClick={showDrawer}>
-//           Open
-//         </Button>
-//       </Space>
-//       <Drawer
-//         title="Drawer with extra actions"
-//         placement={placement}
-//         width={500}
-//         onClose={onClose}
-//         visible={visible}
-//         extra={
-//           <Space>
-//             <Button onClick={onClose}>Cancel</Button>
-//             <Button type="primary" onClick={onClose}>
-//               OK
-//             </Button>
-//           </Space>
-//         }
-//       >
-//         <p>Some contents...</p>
-//         <p>Some contents...</p>
-//         <p>Some contents...</p>
-//       </Drawer>
-//     </>
-//   );
-// };
-
-// export default BasicRightDemo;

package/components/drawer/demos/form-in-drawer.tsx

@@ -1,140 +0,0 @@
-// /**
-//  * title: 抽屉表单
-//  * desc: 在抽屉中使用表单。
-//  */
-
-//  import React, { useState } from 'react';
-//  import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Space } from 'antd';
-// import { PlusOutlined } from '@ant-design/icons';
-//  const FormInDrawerDemo = () => {
-//   const { Option } = Select;
-//   const [visible,setVisible]=useState(false);
-
-//   const showDrawer = () => {
-//    setVisible(true);
-//   };
-
-//   const onClose = () => {
-//    setVisible(false);
-//   };
-//    return (
-//     <>
-//     <Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
-//       New account
-//     </Button>
-//     <Drawer
-//       title="Create a new account"
-//       width={720}
-//       onClose={onClose}
-//       visible={visible}
-//       bodyStyle={{ paddingBottom: 80 }}
-//       extra={
-//         <Space>
-//           <Button onClick={onClose}>Cancel</Button>
-//           <Button onClick={onClose} type="primary">
-//             Submit
-//           </Button>
-//         </Space>
-//       }
-//     >
-//       <Form layout="vertical" hideRequiredMark>
-//         <Row gutter={16}>
-//           <Col span={12}>
-//             <Form.Item
-//               name="name"
-//               label="Name"
-//               rules={[{ required: true, message: 'Please enter user name' }]}
-//             >
-//               <Input placeholder="Please enter user name" />
-//             </Form.Item>
-//           </Col>
-//           <Col span={12}>
-//             <Form.Item
-//               name="url"
-//               label="Url"
-//               rules={[{ required: true, message: 'Please enter url' }]}
-//             >
-//               <Input
-//                 style={{ width: '100%' }}
-//                 addonBefore="http://"
-//                 addonAfter=".com"
-//                 placeholder="Please enter url"
-//               />
-//             </Form.Item>
-//           </Col>
-//         </Row>
-//         <Row gutter={16}>
-//           <Col span={12}>
-//             <Form.Item
-//               name="owner"
-//               label="Owner"
-//               rules={[{ required: true, message: 'Please select an owner' }]}
-//             >
-//               <Select placeholder="Please select an owner">
-//                 <Option value="xiao">Xiaoxiao Fu</Option>
-//                 <Option value="mao">Maomao Zhou</Option>
-//               </Select>
-//             </Form.Item>
-//           </Col>
-//           <Col span={12}>
-//             <Form.Item
-//               name="type"
-//               label="Type"
-//               rules={[{ required: true, message: 'Please choose the type' }]}
-//             >
-//               <Select placeholder="Please choose the type">
-//                 <Option value="private">Private</Option>
-//                 <Option value="public">Public</Option>
-//               </Select>
-//             </Form.Item>
-//           </Col>
-//         </Row>
-//         <Row gutter={16}>
-//           <Col span={12}>
-//             <Form.Item
-//               name="approver"
-//               label="Approver"
-//               rules={[{ required: true, message: 'Please choose the approver' }]}
-//             >
-//               <Select placeholder="Please choose the approver">
-//                 <Option value="jack">Jack Ma</Option>
-//                 <Option value="tom">Tom Liu</Option>
-//               </Select>
-//             </Form.Item>
-//           </Col>
-//           <Col span={12}>
-//             <Form.Item
-//               name="dateTime"
-//               label="DateTime"
-//               rules={[{ required: true, message: 'Please choose the dateTime' }]}
-//             >
-//               <DatePicker.RangePicker
-//                 style={{ width: '100%' }}
-//                 getPopupContainer={trigger => trigger.parentElement}
-//               />
-//             </Form.Item>
-//           </Col>
-//         </Row>
-//         <Row gutter={16}>
-//           <Col span={24}>
-//             <Form.Item
-//               name="description"
-//               label="Description"
-//               rules={[
-//                 {
-//                   required: true,
-//                   message: 'please enter url description',
-//                 },
-//               ]}
-//             >
-//               <Input.TextArea rows={4} placeholder="please enter url description" />
-//             </Form.Item>
-//           </Col>
-//         </Row>
-//       </Form>
-//     </Drawer>
-//   </>
-//    );
-//  };
-
-//  export default RenderInCurrentDemo;