feat(dropdown): add dropdown component

moecasts · Jul 4, 2024 · 85d6bee · 85d6bee
1 parent 244753b
commit 85d6bee
Show file tree

Hide file tree

Showing 41 changed files with 1,644 additions and 0 deletions.
diff --git a/packages/casts-dropdown/.fatherrc.ts b/packages/casts-dropdown/.fatherrc.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'father';
+import { StandardConfig } from '@casts/standard';
+
+export default defineConfig({
+  ...StandardConfig.father,
+});
diff --git a/packages/casts-dropdown/.gitignore b/packages/casts-dropdown/.gitignore
@@ -0,0 +1,3 @@
+/node_modules
+/dist
+.DS_Store
diff --git a/packages/casts-dropdown/README.md b/packages/casts-dropdown/README.md
@@ -0,0 +1,23 @@
+# @casts/dropdown
+
+[![NPM version](https://img.shields.io/npm/v/@casts/dropdown.svg?style=flat)](https://npmjs.org/package/@casts/dropdown)
+[![NPM downloads](http://img.shields.io/npm/dm/@casts/dropdown.svg?style=flat)](https://npmjs.org/package/@casts/dropdown)
+
+## Install
+
+```bash
+$ pnpm add @casts/dropdown
+```
+
+```bash
+$ pnpm run dev
+$ pnpm run build
+```
+
+## Options
+
+TODO
+
+## License
+
+MIT © [moecasts &lt;moecasts.caster@gmail.com&gt;](https://github.com/moecasts &lt;moecasts.caster@gmail.com&gt;)
diff --git a/packages/casts-dropdown/docs/dropdown.en-US.md b/packages/casts-dropdown/docs/dropdown.en-US.md
@@ -0,0 +1,35 @@
+---
+title: Dropdown
+group:
+  title: Navigator
+nav:
+  title: Components
+  path: /components
+description: Displays a list of actions or options that a user can choose.
+---
+
+## Installation
+
+```bash
+$ pnpm add @casts/dropdown
+```
+
+## Basic
+
+<code src="../examples/basic.tsx" />
+
+## Different sizes
+
+<code src="../examples/different-sizes.tsx" />
+
+## Disable hide after click
+
+<code src="../examples/disable-hide-after-click.tsx" />
+
+## Render by function
+
+<code src="../examples/render-by-function.tsx" />
+
+## API
+
+<API src="@casts/dropdown"></API>
diff --git a/packages/casts-dropdown/docs/dropdown.zh-CN.md b/packages/casts-dropdown/docs/dropdown.zh-CN.md
@@ -0,0 +1,35 @@
+---
+title: Dropdown
+group:
+  title: 导航
+nav:
+  title: 组件
+  path: /components
+description: 用于承载过多的操作集合，通过下拉拓展的形式，收纳更多的操作。
+---
+
+## 安装
+
+```bash
+$ pnpm add @casts/dropdown
+```
+
+## 基础示例
+
+<code src="../examples/basic.tsx" />
+
+## 不同尺寸
+
+<code src="../examples/different-sizes.tsx" />
+
+## 点击后不关闭
+
+<code src="../examples/disable-hide-after-click.tsx" />
+
+## 函数渲染
+
+<code src="../examples/render-by-function.tsx" />
+
+## API
+
+<API src="@casts/dropdown"></API>
diff --git a/packages/casts-dropdown/examples/.gitkeep b/packages/casts-dropdown/examples/.gitkeep
diff --git a/packages/casts-dropdown/examples/basic.tsx b/packages/casts-dropdown/examples/basic.tsx
@@ -0,0 +1,218 @@
+// @ts-ignore example should import React
+import React from 'react';
+import { Avatar } from '@casts/avatar';
+import { Button } from '@casts/button';
+import {
+  Dropdown,
+  DropdownDivider,
+  DropdownItem,
+  DropdownMenu,
+  DropdownProps,
+} from '@casts/dropdown';
+import { User5Line } from '@casts/icons';
+import { Space } from '@casts/space';
+
+const DropdownBasicDemo = () => {
+  const handleOpenChange: DropdownProps['onOpenChange'] = (open) => {
+    console.log('debug onOpenChange', { open });
+  };
+
+  const handleClick: DropdownProps['onClick'] = (value, context) => {
+    console.log('debug onClick', { value, context });
+  };
+
+  return (
+    <Space size={100} wrap>
+      <Dropdown
+        onOpenChange={handleOpenChange}
+        onClick={handleClick}
+        maxColumnWidth={200}
+        trigger="hover"
+        options={[
+          {
+            label: 'Option 1 Option 1 Option 1 Option 1 Option 1',
+            value: '1',
+            children: [
+              {
+                label: 'Nested Option 1',
+                value: '1-1',
+              },
+              {
+                label: 'Nested Option 2',
+                value: '1-2',
+                children: [
+                  {
+                    label: 'Nested Option 1',
+                    value: '1-2-1',
+                  },
+                  {
+                    label: 'Nested Option 2',
+                    value: '1-2-2',
+                  },
+                ],
+              },
+              {
+                label: 'Nested Option 3',
+                value: '1-3',
+              },
+              {
+                label: 'Nested Option 4',
+                value: '1-4',
+              },
+            ],
+          },
+          {
+            label: 'Option 2',
+            value: '2',
+          },
+          {
+            label: 'Option 3',
+            value: '3',
+          },
+          { type: 'divider' },
+          {
+            label: 'Option 4',
+            value: '4',
+          },
+          {
+            label: 'Option 5',
+            value: '5',
+          },
+          {
+            label: 'Section 1',
+            type: 'section',
+            children: [
+              {
+                label: 'Section 1 - Option 1',
+                value: 'section-1-1',
+              },
+              {
+                label: 'Section 1 - Option 2',
+                value: 'section-1-2',
+              },
+            ],
+          },
+          { type: 'divider' },
+          {
+            label: 'Section 2',
+            type: 'section',
+            children: [
+              {
+                label: 'Section 2 - Option 1',
+                value: 'section-2-1',
+              },
+              {
+                label: 'Section 2 - Option 2',
+                value: 'section-2-2',
+              },
+            ],
+          },
+        ]}
+      >
+        <Button>MORE</Button>
+      </Dropdown>
+
+      <Dropdown
+        onOpenChange={handleOpenChange}
+        onClick={handleClick}
+        options={[
+          {
+            label: 'Option 1',
+            value: '1',
+          },
+          {
+            label: 'Option 2',
+            value: '2',
+          },
+          {
+            label: 'Option 3',
+            value: '3',
+          },
+          {
+            label: 'Option 4',
+            value: '4',
+          },
+          {
+            label: 'Option 5',
+            value: '5',
+          },
+        ]}
+      >
+        <Button>MORE</Button>
+      </Dropdown>
+
+      <Dropdown
+        onOpenChange={handleOpenChange}
+        onClick={handleClick}
+        maxHeight={200}
+        minColumnWidth={100}
+        maxColumnWidth={150}
+        renderContent={() => (
+          <DropdownMenu>
+            <DropdownItem value={1}>Option 1</DropdownItem>
+            <DropdownItem value={2}>Option 2</DropdownItem>
+            <DropdownItem value={3}>Option 3</DropdownItem>
+            <DropdownItem value={4}>Option 4</DropdownItem>
+            <DropdownItem value={5}>Option 5</DropdownItem>
+            <DropdownItem value={6}>This is a long option label</DropdownItem>
+          </DropdownMenu>
+        )}
+      >
+        <Button>MORE</Button>
+      </Dropdown>
+
+      <Dropdown
+        onOpenChange={handleOpenChange}
+        onClick={handleClick}
+        maxHeight={200}
+        minColumnWidth={100}
+        maxColumnWidth={150}
+        renderContent={() => (
+          <DropdownMenu>
+            <DropdownItem value={1}>Option 1</DropdownItem>
+            <DropdownItem value={2}>Option 2</DropdownItem>
+            <DropdownDivider />
+            <DropdownItem value={3}>Option 3</DropdownItem>
+            <DropdownItem value={4}>Option 4</DropdownItem>
+            <DropdownItem value={5}>Option 5</DropdownItem>
+            <DropdownDivider />
+            <DropdownItem value={6} style={{ height: 'fit-content' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                <Avatar
+                  shape="circle"
+                  size={20}
+                  style={{
+                    backgroundColor: '#87d068',
+                    marginRight: '4px',
+                    flexShrink: 0,
+                  }}
+                  icon={<User5Line />}
+                />
+                <span
+                  style={{
+                    display: 'inline-block',
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  Custom Dropdown Item
+                </span>
+              </div>
+            </DropdownItem>
+          </DropdownMenu>
+        )}
+      >
+        <Button>MORE</Button>
+      </Dropdown>
+    </Space>
+  );
+};
+
+export default DropdownBasicDemo;