[],
6 | onClickAway: (event: KeyboardEvent) => void,
7 | events: string[] = defaultEvents
8 | ) {
9 | React.useEffect(() => {
10 | const handler = event => {
11 | const test = refs.map(ref => {
12 | return ref.current && !ref.current.contains(event.target)
13 | })
14 | if (test.every(Boolean)) {
15 | onClickAway(event)
16 | }
17 | }
18 |
19 | for (const eventName of events) {
20 | window.addEventListener(eventName, handler)
21 | }
22 |
23 | return () => {
24 | for (const eventName of events) {
25 | window.removeEventListener(eventName, handler)
26 | }
27 | }
28 | }, [refs, onClickAway])
29 | }
30 |
31 | export const useEnhancedEffect = window !== undefined ? React.useLayoutEffect : React.useEffect
32 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | const ENV = 'localdev'
2 | const os = require('os')
3 |
4 | const localIp = () => {
5 | const ip = []
6 | const allNwIntf = os.networkInterfaces()
7 | Object.keys(allNwIntf).map(intf => {
8 | allNwIntf[intf].map(it => {
9 | if (it.family === 'IPv4' && !it.internal) {
10 | ip.push(it.address)
11 | }
12 | })
13 | })
14 | return ip
15 | }
16 |
17 | function getHost() {
18 | return {
19 | localdev: '127.0.0.1',
20 | development: localIp()[0] // 开发环境
21 | }[ENV]
22 | }
23 |
24 | function getPort() {
25 | return { localdev: 7878, development: 12325 }[ENV]
26 | }
27 |
28 | module.exports = {
29 | port: getPort(),
30 | host: getHost(),
31 | hostName: `http://${getHost()}:${getPort()}`
32 | }
33 |
--------------------------------------------------------------------------------
/docs/about/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # 更新日志
2 |
3 | ## 更新内容
4 |
5 | * 升级 `webpack` 到 4、增加 `husky`
6 |
--------------------------------------------------------------------------------
/docs/about/CONTRIBUTION.md:
--------------------------------------------------------------------------------
1 | # Contributing Guide
2 |
3 | ## 贡献流程
4 |
5 | * 首先 fork `front-swordsman/snake-design` 到自己的项目;
6 | * 接着 clone 自己项目下的 `snake-design` 到本地;
7 | * 然后在本地项目中执行以下 git 操作;
8 |
9 | ```
10 | # 列出远程仓库 URL
11 | $ git remote -v
12 | # 设置一个新的远程仓库
13 | $ git remote add remote https://github.com/front-swordsman/snake-design.git
14 |
15 | # 再次列出远程仓库 URL
16 | $ git remote -v
17 | # origin https://github.com/MuYunyun/snake-design.git (fetch)
18 | # origin https://github.com/MuYunyun/snake-design.git (push)
19 | # remote https://github.com/front-swordsman/snake-design.git (fetch)
20 | # remote https://github.com/front-swordsman/snake-design.git (push)
21 |
22 | # 获取上游代码
23 | $ git fetch remote
24 |
25 | # 检查你的 fork’s 本地 master 分支，如果不在 master 分支就切换到该分支
26 | $ git checkout master
27 | # Switched to branch 'master'
28 |
29 | # 合并来自 remote/master 的更改到本地 master 分支上。
30 | $ git merge remote/master
31 | ```
32 |
33 | ### 提交之后：
34 |
35 | 提交合并到 `front-swordsman/snake-design` 之后，为了保证与主仓库代码的一致性，还需要进行一次本地与远程仓库的手动更新。
36 |
37 | ## Pull Request 规范
38 |
39 | * 不要提交 `dist` 或 `build` 文件夹下的文件
40 |
41 | * 执行 `npm run build` 后可以正确打包文件。
42 |
43 | * 如果是修复 bug，请在 PR 中给出描述信息。
44 |
45 | ## 如何开发新组建
46 |
47 | 采用 TDD 的形式进行开发。形式如下:
48 |
49 | 1. pull request 设计的接口和测试用例给 [https://github.com/orgs/ming-cult/people](https://github.com/orgs/ming-cult/people) 中至少两人;
50 | 2. 在步骤一通过以后 pull request 具体代码的实现给 [https://github.com/orgs/ming-cult/people](https://github.com/orgs/ming-cult/people) 中至少两人;
51 |
52 | 请参考 `README` 文件
53 |
54 | ## 代码规范
55 |
56 |
--------------------------------------------------------------------------------
/docs/about/changeLog.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import CHANGELOG from './CHANGELOG.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/about/contribution.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import CONTRIBUTION from './CONTRIBUTION.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/about/install.md:
--------------------------------------------------------------------------------
1 | ## 安装
2 |
3 | ### npm / yarn 安装
4 |
5 | ```bash
6 | yarn install snake-design
7 | ```
--------------------------------------------------------------------------------
/docs/about/install.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Install from './install.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/about/usage.md:
--------------------------------------------------------------------------------
1 | ## 使用
2 |
3 |
--------------------------------------------------------------------------------
/docs/about/usage.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import USAGE from './usage.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/app.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as ReactDOM from 'react-dom'
3 | import Router from './routes'
4 |
5 | import './index.scss'
6 |
7 | ReactDOM.render(, document.getElementById('app'))
8 |
--------------------------------------------------------------------------------
/docs/components/Affix/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | imports:
3 | import AffixDemoCode from '!raw-loader!./simpleAffix.tsx';
4 | import AffixDemo from './simpleAffix.tsx';
5 | ---
6 |
7 | # Affix 固钉
8 |
9 | 将页面元素钉在可视范围。当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
10 |
11 | ### 简单示例
12 |
13 | :::demo
14 |
15 |
16 |
17 | :::
18 |
19 | ## Props
20 | | 参数 | 说明 | 类型 | 默认值 |
21 | |:-|:-|:-|:-|
22 | | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
23 | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - |
24 | | onChange | 固定状态改变时触发的回调函数 | Function(affixed) | - |
25 | | target | 设置 Affix 需要监听其滚动事件的元素 | () => HTMLElement | () => window |
26 |
--------------------------------------------------------------------------------
/docs/components/Affix/demo.scss:
--------------------------------------------------------------------------------
1 | .scrollable-container {
2 | height: 100px;
3 | overflow-y: scroll;
4 | }
5 |
6 | .background1 {
7 | padding-top: 60px;
8 | height: 300px;
9 | background-image: url(https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg);
10 | }
11 |
12 | .background2 {
13 | padding-top: 120px;
14 | height: 300px;
15 | background-image: url(https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg);
16 | }
--------------------------------------------------------------------------------
/docs/components/Affix/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import README from './README.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/components/Affix/simpleAffix.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Button from 'components/Button'
3 | import Affix from 'components/Affix'
4 | import './demo.scss'
5 |
6 | const { useState } = React
7 |
8 | function SimpleAffix() {
9 | const [top, setTop] = useState(100)
10 | const [bottom, setBottom] = useState(100)
11 | let container1, container2
12 |
13 | return (
14 | <>
15 | 基础用法
16 | 最简单的用法。
17 |
21 |
27 |
28 |
32 |
38 |
39 | 固定状态改变的回调
40 | 可以获得是否固定的状态。
41 | console.log(affixed)}
44 | >
45 |
50 |
51 | 滚动容器
52 | 用 target 设置 Affix 需要监听其滚动事件的元素，默认为 window。
53 | { container1 = node; }}>
54 |
55 |
container1} offsetTop={0}>
56 |
59 |
60 |
61 |
{ container2 = node; }} style={{ marginTop: 10 }}>
63 |
64 |
container2} offsetBottom={0}>
65 |
68 |
69 |
70 |
9 | Scroll down to see the bottom-right green button.
10 |
11 |
16 |
17 | )
18 | }
19 |
20 | export default CustomBackTop
21 |
--------------------------------------------------------------------------------
/docs/components/BackTop/demo.scss:
--------------------------------------------------------------------------------
1 | .snake-back-top-inner {
2 | height: 40px;
3 | width: 40px;
4 | line-height: 40px;
5 | border-radius: 4px;
6 | background-color: #01C1B2;
7 | color: #fff;
8 | text-align: center;
9 | font-size: 20px;
10 | }
11 |
12 | #components-back-top-demo-custom .snake-design-backtop-default {
13 | bottom: 100px;
14 | }
--------------------------------------------------------------------------------
/docs/components/BackTop/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import README from './README.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/components/BackTop/simpleBackTop.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import BackTop from 'components/BackTop'
3 | import './demo.scss'
4 |
5 | function SimpleBackTop() {
6 | return (
7 | <>
8 | Scroll down to see the bottom-right gray button.
9 |
10 |
11 | )
12 | }
13 |
14 | export default SimpleBackTop
15 |
--------------------------------------------------------------------------------
/docs/components/Breadcrumb/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | imports: import DemoCode from '!raw-loader!./simple.tsx';
3 | import Demo from './simple.tsx';
4 | ---
5 |
6 | # Breadcrumb 面包屑
7 |
8 | 导航类组件，便于在几个关联页面之间快速跳转
9 |
10 | ## 简单示例
11 |
12 | :::demo
13 |
14 |
15 |
16 | :::
17 |
18 | ## Props
19 |
20 | | 参数 | 说明 | 类型 | 默认值 |
21 | | ---------- | ------------------- | ------------------------------------- | ------ |
22 | | prefixCls | 组件 className 前缀 | string | - |
23 | | className | 样式相关 | string | - |
24 | | style | 样式 | React.CSSProperties | - |
25 | | onClick | 点击的回调 | (index:number,url: string) => void | - |
26 | | size | 尺寸 | string, "default" / "small" / "large" | - |
27 | | dataSource | 数据源 | BreadcrumbItemProps[] | - |
28 | | separator | 分隔符 | React.ReactNode | - |
29 | | expandMax | 最大显示多少级 | number | - |
30 |
31 | BreadcrumbItemProps:
32 |
33 | | 参数 | 说明 | 类型 | 默认值 |
34 | | ------- | :------------: | :-------------: | -----: |
35 | | content | 该级的展示内容 | React.ReactNode | - |
36 | | link | 该级的链接 | string | - |
37 |
--------------------------------------------------------------------------------
/docs/components/Breadcrumb/demo.scss:
--------------------------------------------------------------------------------
1 | .breadcrumb-demo-page {
2 | h3 {
3 | font-weight: normal;
4 | }
5 | .snake-breadcrumb {
6 | margin: 10px 0 10px 40px;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/docs/components/Breadcrumb/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import README from './README.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/components/Breadcrumb/simple.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Breadcrumb from 'components/Breadcrumb'
3 | import './demo.scss'
4 | const { useState } = React
5 |
6 | const defaultDataSource = [
7 | {
8 | link: 'customer',
9 | content: '客户'
10 | },
11 | {
12 | link: 'customer-list',
13 | content: '客户列表'
14 | },
15 | {
16 | link: 'customer-xiaochuan',
17 | content: '小船出海有限公司'
18 | }
19 | ]
20 |
21 | export default function Demo() {
22 | const [dataSource, setDataSource] = useState(defaultDataSource)
23 |
24 | const reset = () => setDataSource(defaultDataSource)
25 |
26 | const handleClick = (index: number, url: string) => {
27 | console.log('goto url: ' + url)
28 | setDataSource(dataSource.slice(0, index + 1))
29 | }
30 |
31 | return (
32 |
33 |
面包屑 Breadcrumb
34 | （1）默认
35 |
36 | （2）自定义点击事件
37 |
38 | （3）自定义分隔符
39 |
40 | （4）Size：大/中/小/自定义
41 | 大：
42 |
43 | 中：
44 |
45 | 小：
46 |
47 | 自定义：
48 |
56 | （5）超过最大expandMax，则省略
57 |
58 | {dataSource.length !== defaultDataSource.length && (
59 |
62 | )}
63 |
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/docs/components/Button/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | imports:
3 | import ButtomDemoCode from '!raw-loader!./simpleButton.tsx';
4 | import ButtomDemo from './simpleButton.tsx';
5 | ---
6 |
7 | # Button 按钮
8 |
9 | 基础组件，触发业务逻辑时使用。
10 |
11 | ### 简单示例
12 |
13 | :::demo
14 |
15 |
16 |
17 | :::
18 |
19 | ## Props
20 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
21 | | -------- | ----------------- | ------ | ------ | ------ |
22 | | prefixCls | `类名前缀` | string | - | - |
23 | | children | `子组件` | ReactNode | - | - |
24 | | className | `按钮类名` | string | - | - |
25 | | style | `按钮样式` | object | - | - |
26 | | size | `按钮尺寸` | string | "default" / "small" / "large" | "default" |
27 | | disabled | `按钮是否禁用` | boolean | false / true | false |
28 | | loading | `按钮是否加载中` | boolean | false / true | false |
29 | | type | `按钮种类` | string | "primary" / "gray" / "warn" | "primary" |
30 | | text | `是否为文字按钮` | boolean | false / true | false |
31 | | icon | `icon类名` | string | - | - |
32 | | iconStyle | `icon样式` | object | - | - |
33 | | onClick | `点击回调` | function | - | - |
34 |
--------------------------------------------------------------------------------
/docs/components/Button/demo.scss:
--------------------------------------------------------------------------------
1 | .btn-demo-page{
2 | .snake-button{
3 | margin: 0 10px;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/docs/components/Button/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import README from './README.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/components/Button/simpleButton.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Button from 'components/Button'
3 | import Icon from 'components/Icon'
4 | import './demo.scss'
5 |
6 | export default class SimpleButton extends React.Component {
7 | render() {
8 | return (
9 |
10 |
按钮 button
11 | （1）按钮类型展示
12 |
13 |
14 |
15 | （2）默认不同尺寸的按钮
16 |
17 |
18 | （3）文字链
19 |
20 |
21 |
22 | （4）禁用按钮
23 |
24 |
25 | （5）加载中按钮
26 |
27 |
28 | （6）内置icon按钮
29 |
30 |
31 | （7）引入icon按钮
32 |
33 |
34 | )
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/docs/components/Checkbox/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | imports: import CheckboxDemoCode from '!raw-loader!./demo.tsx';
3 | import CheckboxDemo from './demo.tsx';
4 | ---
5 |
6 | # Checkbox 复选框
7 |
8 | 在一组可选项中进行多项选择时
9 |
10 | ## 简单示例
11 |
12 | :::demo
13 |
14 |
15 |
16 | :::
17 |
18 | ## Api
19 |
20 | ### Checkbox
21 |
22 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
23 | | ------------- | -------------- | --------------------------------- | ------ | ------- |
24 | | checked | 是否选中 | boolean | -- | `false` |
25 | | onChange | 触发事件的回调 | function(checked: boolean) : void | -- | noop |
26 | | autoFocus | 是否自动聚焦 | boolean | -- | `false` |
27 | | disabled | 是都不可选 | boolean | -- | `false` |
28 | | className | 类名 | string | -- | -- |
29 | | indeterminate | 是否半选 | boolean | -- | `false` |
30 |
31 | ### CheckboxGroup
32 |
33 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
34 | | -------- | -------------- | -------------------------------- | ------ | ------- |
35 | | options | 数据源 | Data[] | -- | [] |
36 | | disabled | 是否全部不可用 | boolean | -- | `false` |
37 | | value | 选中的值的集合 | string[] | -- | [] |
38 | | onChange | 触发事件的回调 | function(value: string[]) : void | -- | -- |
39 |
40 | ### Data
41 |
42 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
43 | | --------- | ------------ | --------- | ------ | ------ |
44 | | label | 文本信息 | ReactNode | 否 | -- |
45 | | value | 用于选定的值 | string | 否 | -- |
46 | | disabled | 是否不可用 | boolean | -- | -- |
47 | | autoFocus | 是否自动聚焦 | boolean | -- | -- |
48 |
--------------------------------------------------------------------------------
/docs/components/Checkbox/demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Checkbox } from 'components'
3 |
4 | const CheckboxItem = Checkbox.item
5 | const options = [
6 | {
7 | label: '篮球',
8 | value: 'basketball'
9 | },
10 | {
11 | label: '足球',
12 | value: 'football'
13 | },
14 | {
15 | label: '滑板',
16 | value: 'skateboard'
17 | },
18 | {
19 | label: '跳伞',
20 | value: 'parachute'
21 | }
22 | ]
23 |
24 | export default function CheckboxDemo() {
25 | const [checked, setChecked] = React.useState(false)
26 | const [value, setValue] = React.useState([])
27 | console.log(value)
28 | return (
29 |
30 |
基础用法
31 |
setChecked(checked)}>
32 | 点击选择
33 |
34 |
不可用
35 |
36 | 点击选择
37 |
38 |
点击选择
39 |
group 用法
40 |
41 |
42 | 全部
43 |
44 |
45 |
setValue(value)} />
46 |
8 |
setVisible(visible)}
11 | content={
12 |
13 |
console.log('click')}>这是内容区
14 |
这是内容区
15 |
这是内容区
16 |
21 |
12 |
13 | setAction(value)}
17 | />
18 |
19 |
20 | setDirection(value)}
31 | />
32 |
33 |
34 |
37 | 数字数字数字数字数字
38 | 数字数字数字数字数字
39 | 数字数字数字数字数字
40 |
41 | }
42 | visible={visible}
43 | trigger={action}
44 | placement={direction}
45 | wrapperComponent="div"
46 | wrapperStyle={{ display: 'inline-block' }}
47 | onVisibleChange={visible => {
48 | setVisible(visible)
49 | }}
50 | >
51 |
52 |
53 |
10 |
11 | {icons.map((n) => {
12 | return (
13 | -
14 |
15 | {n}
16 |
17 | )
18 | })}
19 |
20 |
15 |
快捷调用
16 |
29 |
35 |
43 |
51 |
59 |
60 | )
61 | }
62 |
--------------------------------------------------------------------------------
/docs/components/Modal/basicModal.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button, Modal } from 'components'
3 |
4 | export default function BasicModal() {
5 | const [visible, setVisible] = React.useState(false)
6 | return (
7 |
8 |
基础 Modal
9 |
10 |
setVisible(false)}
13 | title="基础 Modal "
14 | onOk={() => setVisible(false)}
15 | >
16 | 基础modal内容区
17 |
18 |
9 |
自定义底部
10 |
11 |
setVisible(false)}
14 | title="基础 Modal "
15 | onOk={() => setVisible(false)}
16 | footer={
17 | <>
18 |
21 |
33 |
34 | }
35 | >
36 | 基础modal
37 |
38 |
8 |
点击遮罩层不消失
9 |
10 |
setVisible(false)}
13 | title="基础 Modal "
14 | onOk={() => setVisible(false)}
15 | maskClosable={false}
16 | >
17 | 基础modal
18 |
19 |
10 |
默认关闭弹窗销毁组件
11 |
setVisible(false)} zIndex={1020}>
12 | 内容区
13 |
14 |
15 |
关闭弹窗不销毁组件
16 |
setVisible1(false)} destroy={false}>
17 | 内容区(不销毁组件)
18 |
19 |
20 |
8 |
setVisible(visible)}
11 | content={内容内容区
}
12 | title="标题"
13 | wrapperComponent="div"
14 | wrapperStyle={{ display: 'inline-block' }}
15 | trigger="hover"
16 | >
17 |
18 |
19 |
10 |
setVisible(visible)}
13 | content={内容内容区
}
14 | title="标题"
15 | wrapperComponent="div"
16 | wrapperStyle={{ display: 'inline-block' }}
17 | trigger={action}
18 | placement={direction}
19 | >
20 |
21 |
22 |
23 | setDirection(value)}
40 | />
41 |
42 |
43 | setAction(value)}
47 | />
48 |
49 |
17 |
不同颜色
18 |
21 |
24 |
27 |
28 |
17 |
17 |
圆形
18 |
19 |
20 |
21 |
22 |
17 |
不同尺寸
18 |
21 |
24 |
27 |
28 |
17 |
不同状态
18 |
21 |
24 |
27 |
28 |
28 |
填充
29 | setValue(value)}
33 | shape="button"
34 | buttonStyle="solid"
35 | />
36 | 描边(默认)
37 | setValue(value)}
41 | shape="button"
42 | />
43 | 大尺寸
44 | setValue(value)}
48 | shape="button"
49 | size="large"
50 | />
51 | 小尺寸
52 | setValue(value)}
56 | shape="button"
57 | size="small"
58 | />
59 |
60 | )
61 | }
62 |
--------------------------------------------------------------------------------
/docs/components/Radio/demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Radio } from 'components'
3 |
4 | const RadioItem = Radio.item
5 |
6 | const options = [
7 | {
8 | label: '篮球',
9 | value: 'basketball'
10 | },
11 | {
12 | label: '足球',
13 | value: 'football'
14 | },
15 | {
16 | label: '滑板',
17 | value: 'skateboard'
18 | },
19 | {
20 | label: '跳伞',
21 | value: 'parachute'
22 | }
23 | ]
24 |
25 | export default function RadioDemo() {
26 | const [checked, setChecked] = React.useState(false)
27 | const [value, setValue] = React.useState('basketball')
28 | console.log(value)
29 | return (
30 |
31 |
基础用法
32 | setChecked(checked)}>
33 | 点击选择
34 |
35 | 不可用
36 |
37 | 点击选择
38 |
39 | 点击选择
40 | group 用法
41 | setValue(value)} />
42 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/docs/components/Radio/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import README from './README.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/components/Spin/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | imports:
3 | import SimpleDemoCode from '!raw-loader!./simpleDemo.tsx';
4 | import SimpleDemo from './simpleDemo.tsx';
5 | import SizeDemoCode from '!raw-loader!./sizeDemo.tsx';
6 | import SizeDemo from './sizeDemo.tsx';
7 | import TipDemoCode from '!raw-loader!./tipDemo.tsx';
8 | import TipDemo from './tipDemo.tsx';
9 | import ContainerDemoCode from '!raw-loader!./container.tsx';
10 | import ContainerDemo from './container.tsx';
11 | ---
12 |
13 | # Spin 加载中
14 |
15 | 用于页面和区块的加载中状态。
16 |
17 | ## 简单示例
18 |
19 | :::demo
20 |
21 |
22 |
23 | :::
24 |
25 | ## 多尺寸示例
26 |
27 | :::demo
28 |
29 |
30 |
31 | :::
32 |
33 | ## 文字提示
34 |
35 | :::demo
36 |
37 |
38 |
39 | :::
40 |
41 | ## 区块加载
42 |
43 | :::demo
44 |
45 |
46 |
47 | :::
48 |
49 | ## Api
50 |
51 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
52 | | --------- | ---------------- | ----------------- | ------ | -------- |
53 | | indicator | 自定义的指示器 | ReactNode | -- | -- |
54 | | size | 尺寸 | `small`, `normal` | -- | `normal` |
55 | | tip | 自定义的文字提示 | ReactNode | -- | -- |
--------------------------------------------------------------------------------
/docs/components/Spin/container.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Spin } from 'components'
3 |
4 | export default function Container() {
5 | return (
6 |
7 |
8 |
9 | 内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区
10 | 内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区
11 | 内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区
12 | 内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区
13 | 内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区
14 |
15 |
16 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/docs/components/Tabs/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | imports: import TabsDemoCode from '!raw-loader!./simpleTabs.tsx';
3 | import TabDemo from './simpleTabs.tsx';
4 | ---
5 |
6 | # Tabs 标签页
7 |
8 | 选项卡切换组件。
9 |
10 | ## 简单示例
11 |
12 | :::demo
13 |
14 |
15 |
16 | :::
17 |
18 | ## Api
19 |
20 | | 属性 | 说明 | 类型 | 默认值 | 必填 |
21 | | :------------------- | :----------------------------- | :-------------------------------- | :------- | :--- |
22 | | options | tabs 中的展示项 | TabsItemProps[] | [] | 否 |
23 | | activeTab | tab 当前选中页 | number | 0 | 否 |
24 | | onChange | Tab 切换时触发 | Function | -- | 否 |
25 | | onTabClick | 点击 Tab 时触发 | Function | -- | 否 |
26 | | tabBarPosition | TabBar 位置 | 'top' \| 'bottom \| left \| right | top | 否 |
27 | | tabItemStyle | tabItem 的样式 | React.CSSProperties | -- | 否 |
28 | | type | 提供 'line' \| 'card' 两种模式 | string | 'line' | 否 |
29 | | tabBarUnderlineColor | 下划线颜色 | string | '01C1B2' | 否 |
30 |
31 | ## TabsItemProps Api
32 |
33 | | 属性 | 说明 | 类型 | 默认值 | 必填 |
34 | | :------- | :-------------------- | :---------------------------- | :----- | :--- |
35 | | title | Tabs 中的单项 | String \| Number \| ReactNode | -- | 是 |
36 | | content | Tabs 中的内容 | ReactNode | -- | 是 |
37 | | disabled | Tabs 中的单项是否禁用 | boolean | false | 否 |
38 |
--------------------------------------------------------------------------------
/docs/components/Tabs/demo.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ming-cult/snake-design/2ae6723911ef670c4e141108a99508be8597299d/docs/components/Tabs/demo.scss
--------------------------------------------------------------------------------
/docs/components/Tabs/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import README from './README.md'
3 |
4 | export default function () {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/components/Tooltip/basic.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Tooltip, Button } from 'components'
3 |
4 | export default function SimpleDemo() {
5 | const [visible, setVisible] = React.useState(false)
6 | return (
7 |
8 | setVisible(visible)}
11 | title="内容区"
12 | wrapperComponent="div"
13 | wrapperStyle={{ display: 'inline-block' }}
14 | trigger="click"
15 | >
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/docs/components/Tooltip/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import README from './README.md'
3 |
4 | export default function() {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/docs/components/Tooltip/simpleDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Tooltip, Button, Radio } from 'components'
3 |
4 | export default function SimpleDemo() {
5 | const [visible, setVisible] = React.useState(false)
6 | const [direction, setDirection] = React.useState('top')
7 | const [action, setAction] = React.useState('click')
8 | return (
9 |
10 |
setVisible(visible)}
13 | title="内容内容区内容"
14 | wrapperComponent="div"
15 | wrapperStyle={{ display: 'inline-block' }}
16 | trigger={action}
17 | placement={direction}
18 | >
19 |
20 |
21 |
22 | setDirection(value)}
39 | />
40 |
41 |
42 | setAction(value)}
46 | />
47 |
48 |
13 | { children }
14 |
15 |
16 | { des }
17 | setOpen(!open)}/>
18 |
19 | {
20 | open &&
21 | {code}
22 |
23 | }
24 |
25 | )
26 | }
--------------------------------------------------------------------------------
/docs/layout/docsNav.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { NavLink } from 'react-router-dom'
3 | import { Affix } from 'components/index'
4 |
5 | interface ComponentProps {
6 | name: string
7 | path: string
8 | isDevelopmenting?: boolean
9 | }
10 |
11 | interface NavProps {
12 | basicCList: Array
13 | aboutSnakeDesignList: Array
14 | }
15 |
16 | export default function DocsNav(props: NavProps) {
17 | const { basicCList, aboutSnakeDesignList } = props
18 |
19 | // 渲染左侧导航
20 | const renderNavList = (list: Array) => {
21 | return list.map((item, index) => {
22 | if (item.isDevelopmenting && process.env.NODE_ENV !== 'localdev') {
23 | return null
24 | }
25 | return (
26 |
27 | {item.name}
28 |
29 | )
30 | })
31 | }
32 |
33 | return (
34 |
35 |
36 |
37 |
38 |
39 |
40 | {renderNavList(aboutSnakeDesignList.filter(item => item.path.match(/\/guide\//)))}
41 |
42 |
43 |
44 |
45 | {renderNavList(basicCList)}
46 |
47 |
49 |
24 |
25 |
29 |
{children}
30 |
31 |
12 |
13 | {children}
14 |
15 |
5 |