@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/feedback/infiniteloading/index.md

@@ -0,0 +1,397 @@
+---
+order: 6
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/feedback/pages/infiniteloading/index'
+group:
+    title: 操作反馈
+    order: 6
+---
+
+# InfiniteLoading 滚动加载 <Badge>2.0.0</Badge>
+
+
+列表滚动到底部自动加载更多数据。
+
+## 引入
+
+```tsx
+import { InfiniteLoading } from '@mijadesign/mjui-react-taro'
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import { Cell, InfiniteLoading } from '@mijadesign/mjui-react-taro'
+import React, { CSSProperties, useEffect, useState } from 'react'
+
+const sleep = (time: number): Promise<unknown> =>
+  new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+const InfiniteUlStyle: CSSProperties = {
+  height: '300px',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
+
+const InfiniteLiStyle: CSSProperties = {
+  marginTop: '10px',
+  fontSize: '14px',
+  color: 'rgba(100, 100, 100, 1)',
+  textAlign: 'center',
+}
+const Demo1 = () => {
+  const [defaultList, setDefaultList] = useState<string[]>([])
+  const [hasMore, setHasMore] = useState(true)
+
+  useEffect(() => {
+    init()
+  }, [])
+
+  const loadMore = async () => {
+    await sleep(2000)
+    const curLen = defaultList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      defaultList.push(`${i}`)
+    }
+    if (defaultList.length >= 30) {
+      setHasMore(false)
+    } else {
+      setDefaultList([...defaultList])
+    }
+  }
+
+  const init = () => {
+    for (let i = 0; i < 10; i++) {
+      defaultList.push(`${i}`)
+    }
+    setDefaultList([...defaultList])
+  }
+
+  return (
+    <>
+      <Cell>
+        <ul style={InfiniteUlStyle} id="scroll">
+          <InfiniteLoading
+            target="scroll"
+            hasMore={hasMore}
+            onLoadMore={loadMore}
+            loadingText={<>加载中</>}
+            loadMoreText={<>没有更多了</>}
+          >
+            {defaultList.map((item, index) => {
+              return (
+                <li style={InfiniteLiStyle} key={index}>
+                  {item}
+                </li>
+              )
+            })}
+          </InfiniteLoading>
+        </ul>
+      </Cell>
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 下拉刷新
+
+
+```tsx
+import { Cell, InfiniteLoading, Toast } from '@mijadesign/mjui-react-taro'
+import React, { CSSProperties, useEffect, useState } from 'react'
+
+const sleep = (time: number): Promise<unknown> =>
+  new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+const InfiniteUlStyle: CSSProperties = {
+  height: '300px',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
+
+const InfiniteLiStyle: CSSProperties = {
+  marginTop: '10px',
+  fontSize: '14px',
+  color: 'rgba(100, 100, 100, 1)',
+  textAlign: 'center',
+}
+const Demo2 = () => {
+  const [refreshList, setRefreshList] = useState<string[]>([])
+  const [refreshHasMore, setRefreshHasMore] = useState(true)
+
+  const [show, SetShow] = useState(false)
+  const [toastMsg, SetToastMsg] = useState('')
+  const toastShow = (msg: any) => {
+    SetToastMsg(msg)
+    SetShow(true)
+  }
+
+  useEffect(() => {
+    init()
+  }, [])
+
+  const init = () => {
+    for (let i = 0; i < 10; i++) {
+      refreshList.push(`${i}`)
+    }
+    setRefreshList([...refreshList])
+  }
+
+  const refreshLoadMore = async () => {
+    await sleep(2000)
+    const curLen = refreshList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      refreshList.push(`${i}`)
+    }
+    if (refreshList.length >= 30) {
+      setRefreshHasMore(false)
+    } else {
+      setRefreshList([...refreshList])
+    }
+  }
+
+  const refresh = async () => {
+    await sleep(1000)
+    toastShow('刷新成功')
+  }
+
+  return (
+    <>
+      <Cell>
+        <ul id="refreshScroll" style={InfiniteUlStyle}>
+          <InfiniteLoading
+            pullingText={<>下拉刷新</>}
+            loadingText={<>加载中</>}
+            target="refreshScroll"
+            pullRefresh
+            hasMore={refreshHasMore}
+            onLoadMore={refreshLoadMore}
+            onRefresh={refresh}
+          >
+            {refreshList.map((item, index) => {
+              return (
+                <li className="infiniteLi" key={index} style={InfiniteLiStyle}>
+                  {item}
+                </li>
+              )
+            })}
+          </InfiniteLoading>
+        </ul>
+        <Toast
+          type="text"
+          visible={show}
+          content={toastMsg}
+          onClose={() => {
+            SetShow(false)
+          }}
+        />
+      </Cell>
+    </>
+  )
+}
+export default Demo2
+
+```
+    
+### 自定义加载文案
+
+
+```tsx
+import React, { useState, useEffect, CSSProperties } from 'react'
+import { Cell, InfiniteLoading } from '@mijadesign/mjui-react-taro'
+
+const sleep = (time: number): Promise<unknown> =>
+  new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+const InfiniteUlStyle: CSSProperties = {
+  height: '300px',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
+
+const InfiniteLiStyle: CSSProperties = {
+  marginTop: '10px',
+  fontSize: '14px',
+  color: 'rgba(100, 100, 100, 1)',
+  textAlign: 'center',
+}
+const Demo3 = () => {
+  const [customList, setCustomList] = useState<string[]>([])
+  const [customHasMore, setCustomHasMore] = useState(true)
+
+  useEffect(() => {
+    init()
+  }, [])
+
+  const init = () => {
+    for (let i = 0; i < 10; i++) {
+      customList.push(`${i}`)
+    }
+    setCustomList([...customList])
+  }
+
+  const customLoadMore = async () => {
+    await sleep(2000)
+    const curLen = customList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      customList.push(`${i}`)
+    }
+    if (customList.length >= 30) {
+      setCustomHasMore(false)
+    } else {
+      setCustomList([...customList])
+    }
+  }
+
+  return (
+    <>
+      <Cell>
+        <ul id="customScroll" style={InfiniteUlStyle}>
+          <InfiniteLoading
+            target="customScroll"
+            loadingText="loading"
+            loadMoreText="没有啦～"
+            hasMore={customHasMore}
+            onLoadMore={customLoadMore}
+          >
+            {customList.map((item, index) => {
+              return (
+                <li key={index} style={InfiniteLiStyle}>
+                  {item}
+                </li>
+              )
+            })}
+          </InfiniteLoading>
+        </ul>
+      </Cell>
+    </>
+  )
+}
+export default Demo3
+
+```
+    
+### primary主题
+
+
+```tsx
+import { Cell, InfiniteLoading } from '@mijadesign/mjui-react-taro'
+import React, { CSSProperties, useEffect, useState } from 'react'
+
+const sleep = (time: number): Promise<unknown> =>
+  new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+const InfiniteUlStyle: CSSProperties = {
+  height: '300px',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
+
+const InfiniteLiStyle: CSSProperties = {
+  margin: '10px 10px 0',
+  fontSize: '14px',
+  color: 'rgba(100, 100, 100, 1)',
+  textAlign: 'center',
+  backgroundColor: '#FFF',
+}
+const Demo4 = () => {
+  const [customList, setCustomList] = useState<string[]>([])
+  const [customHasMore, setCustomHasMore] = useState(true)
+
+  useEffect(() => {
+    init()
+  }, [])
+
+  const init = () => {
+    for (let i = 0; i < 10; i++) {
+      customList.push(`${i}`)
+    }
+    setCustomList([...customList])
+  }
+
+  const customLoadMore = async () => {
+    await sleep(2000)
+    const curLen = customList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      customList.push(`${i}`)
+    }
+    if (customList.length >= 30) {
+      setCustomHasMore(false)
+    } else {
+      setCustomList([...customList])
+    }
+  }
+
+  return (
+    <>
+      <Cell>
+        <ul id="primaryScroll" style={InfiniteUlStyle}>
+          <InfiniteLoading
+            target="primaryScroll"
+            type="primary"
+            loadingText={<>加载中</>}
+            loadMoreText={<>没有更多了</>}
+            hasMore={customHasMore}
+            onLoadMore={customLoadMore}
+          >
+            {customList.map((item, index) => {
+              return (
+                <li key={index} style={InfiniteLiStyle}>
+                  {item}
+                </li>
+              )
+            })}
+          </InfiniteLoading>
+        </ul>
+      </Cell>
+    </>
+  )
+}
+export default Demo4
+
+```
+    
+## InfiniteLoading
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 主题类型 | `default`\| `primary` | `default` |
+| hasMore | 是否还有更多数据 | `boolean` | `true` |
+| threshold | 距离底部多远加载 | `number` | `200` |
+| target | 获取监听的目标元素 | `string` | `-` |
+| loadMoreText | “没有更多数据”展示文案 | `string` | `哎呀，这里是底部了啦` |
+| pullRefresh | 是否开启下拉刷新 | `boolean` | `false` |
+| pullingText | 下拉刷新提示文案 | `ReactNode` | `松手刷新` |
+| loadingText | 上拉加载提示文案 | `ReactNode` | `刷新中` |
+| onRefresh | 下拉刷新事件回调 | `() => Promise<void>` | `-` |
+| onLoadMore | 继续加载的回调函数 | `() => Promise<void>` | `-` |
+| onScroll | 实时监听滚动高度 | `(param: number) => void` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-infiniteloading-color | 滑动到底部的文字颜色 | `$color-text-help` |
+| \--nutui-infiniteloading-icon-size | 滑动到底部的文字颜色 | `24px` |

package/docs/docs/components/feedback/noticebar/index.md

@@ -0,0 +1,175 @@
+---
+order: 8
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/feedback/pages/noticebar/index'
+group:
+    title: 操作反馈
+    order: 6
+---
+
+# NoticeBar 公告栏 <Badge>2.0.0</Badge>
+
+
+用于循环播放展示一组消息通知。
+
+## 引入
+
+```tsx
+import { NoticeBar } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import { NoticeBar } from '@mijadesign/mjui-react-taro'
+import { ConfigProvider } from '@nutui/nutui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  const text = '商保理赔结果已出，请就诊人确认'
+  const styles = { padding: '12px 0', fontSize: '13px', fontWeight: 'normal', marginLeft: '16px' }
+  return (
+    <>
+      <h2 style={styles}>纯文字的公告栏</h2>
+      <NoticeBar content={text} leftIcon={null} scrollable={false} />
+      <h2 style={styles}>带图标的公告栏</h2>
+      <NoticeBar content={text} scrollable={false} />
+      <h2 style={styles}>带关闭的公告栏</h2>
+      <NoticeBar content={text} scrollable={false} closeable />
+      <h2 style={styles}>自定义样式的公告栏</h2>
+      <ConfigProvider
+        theme={{
+          nutuiNoticebarBackground: '#F8F8F8',
+          nutuiNoticebarColor: '#0D0D0D',
+        }}
+      >
+        <NoticeBar content={text} scrollable={false} closeable />
+      </ConfigProvider>
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+
+### 居中布局，不支持滚动
+
+
+```tsx
+import React from 'react'
+import { NoticeBar, Space } from '@mijadesign/mjui-react-taro'
+
+const Demo2 = () => {
+  return (
+    <Space direction="vertical">
+      <NoticeBar content="认证失败，商保认证不通过认证失败" leftIcon={null} scrollable={false} type="danger" />
+      <NoticeBar content="保险公司认证中，请稍等" leftIcon={null} scrollable={false} type="warning" />
+      <NoticeBar content="认证通过，等待治疗完成后进入理赔处理" leftIcon={null} scrollable={false} type="success" />
+      <NoticeBar content="商保理赔结果已出，请就诊人确认" leftIcon={null} scrollable={false} />
+    </Space>
+  )
+}
+export default Demo2
+
+```
+    
+
+### 滚动播放
+
+通知栏的内容长度溢出时会自动开启滚动播放，可通过 scrollable 属性可以控制该行为
+
+
+```tsx
+import React from 'react'
+import { NoticeBar, Space } from '@mijadesign/mjui-react-taro'
+
+const Demo3 = () => {
+  const text = '商保理赔结果已出，请就诊人确认商保理赔结果已出，请就诊人确认商保理赔结果已出，请就诊人确认'
+  const textShort = '商保理赔结果已出，请就诊人确认商保理赔结果已出，请就诊人确认'
+  return (
+    <Space direction="vertical">
+      <NoticeBar content={textShort} leftIcon={null} wrap />
+      <NoticeBar content={text} closeable wrap />
+      <NoticeBar content={text} wrap />
+    </Space>
+  )
+}
+export default Demo3
+
+```
+    
+### 关闭模式
+
+
+```tsx
+import React from 'react'
+import { NoticeBar } from '@mijadesign/mjui-react-taro'
+
+const Demo4 = () => {
+  const text = '商保理赔结果已出，请就诊人确认'
+  return <NoticeBar scrollable>{text}</NoticeBar>
+}
+export default Demo4
+
+```
+    
+## NoticeBar
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| align | 布局方式, 值为`center`时，不支持滚动 | `left` \| `center` | `left` |
+| direction | 滚动的方向，可选 horizontal、vertical | `string` | `horizontal` |
+| content | 提示的信息 | `string` | `-` |
+| closeable | 是否启用关闭模式 | `boolean` | `false` |
+| leftIcon | 左边的 icon，closeable 模式下默认为空 | `ReactNode` | `-` |
+| rightIcon | closeable 模式下，默认为 `<Close />` | `ReactNode` | `-` |
+| right | 区别于rightIcon，为右边自定义区域，仅用于 direction='horizontal' 模式 | `ReactNode` | `-` |
+| delay | 延时多少秒 | `string` \| `number` | `1` |
+| scrollable | 是否可以滚动 | `boolean` | `true` |
+| speed | 滚动速率 (px/s) | `number` | `50` |
+| wrap | 是否开启文本换行 | `boolean` | `false` |
+| onClick | 外层点击事件回调 | `(event: any) => void` | `-` |
+| onClose | 关闭通知栏时触发 | `(event: any) => void` | `-` |
+| onItemClick | 垂直滚动多条数据时，点击当前展示的信息时触发 | `(event: any, value: any) => void` | `-` |
+| type | 公告栏类型 | `primary` \| `success` \| `danger` \| `warning` | `primary` |
+
+### Props（direction=vertical）
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| list | 纵向滚动数据列表 | `Array` | `[]` |
+| speed | 滚动的速度 | `number` | `50` |
+| duration | 停留时间(毫秒) | `number` | `1000` |
+| height | 每一个滚动列的高度(px) | `number` | `40` |
+| closeable | 是否启用右侧关闭图标，可以通过 rightIcon 自定义图标 | `boolean` | `false` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-noticebar-background | 背景色 | `$color-primary-background` |
+| \--nutui-noticebar-border-radius | 圆角 | `0` |
+| \--nutui-noticebar-box-padding | padding值 | `0 $spacing-3` |
+| \--nutui-noticebar-color | 文字色 | `$color-primary` |
+| \--nutui-noticebar-error-background | error 的背景色 | `$color-danger-background` |
+| \--nutui-noticebar-error-color | error 的文字色 | `$color-danger` |
+| \--nutui-noticebar-font-size | 字号 | `$font-size-2` |
+| \--nutui-noticebar-height | 高度 | `40px` |
+| \--nutui-noticebar-icon-gap | icon、text间距 | `$spacing-1` |
+| \--nutui-noticebar-left-icon-width | 左侧icon的宽度和高度的设定 | `20px` |
+| \--nutui-noticebar-line-height | 行高 | `24px` |
+| \--nutui-noticebar-right-icon-width | 右侧icon的宽度和高度的设定 | `20px` |
+| \--nutui-noticebar-success-background | success 的背景色 | `$color-success-background` |
+| \--nutui-noticebar-success-color | success 的文字色 | `$color-success` |
+| \--nutui-noticebar-warning-background | warning 的背景色 | `$color-warning-background` |
+| \--nutui-noticebar-warning-color | warning 的文字色 | `$color-warning` |
+| \--nutui-noticebar-wrapable-padding | 多行展示的padding值 | `$spacing-2` |