@mijadesign/nut-mcp 1.0.0-alpha.0

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

@@ -0,0 +1,254 @@
+---
+order: 12
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/feedback/pages/pulltorefresh/index'
+group:
+    title: 操作反馈
+    order: 6
+---
+
+# PullToRefresh 下拉刷新 <Badge>2.0.0</Badge>
+
+
+在列表中通过手指下拉刷新加载新内容的交互操作。
+
+## 引入
+
+```tsx
+import { PullToRefresh } from '@mijadesign/mjui-react-taro'
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import { PullToRefresh, Toast } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo1 = () => {
+  const [list] = useState([1, 2, 3, 4, 5, 6, 7])
+  const [show, SetShow] = useState(false)
+  const [toastMsg, SetToastMsg] = useState('')
+  const toastShow = (msg: any) => {
+    SetToastMsg(msg)
+    SetShow(true)
+  }
+  return (
+    <>
+      <PullToRefresh
+        style={{
+          backgroundColor: `var(--nutui-gray-3)`,
+          color: 'var(--nutui-gray-7)',
+        }}
+        onRefresh={() =>
+          new Promise((resolve) => {
+            toastShow('😊')
+            resolve('done')
+          })
+        }
+        renderIcon={(status) => {
+          return (
+            <>
+              {(status === 'canRelease' || status === 'refreshing') && (
+                <img
+                  alt=""
+                  style={{ height: '26px', width: '36px' }}
+                  src="https://img10.360buyimg.com/imagetools/jfs/t1/230454/20/14523/223/65fab2d1F379c3968/ac35992443abab0c.png"
+                />
+              )}
+            </>
+          )
+        }}
+      >
+        {list.map((item) => (
+          <div
+            style={{
+              textAlign: 'center',
+              height: '50px',
+              lineHeight: '50px',
+            }}
+            key={item}
+          >
+            {item}
+          </div>
+        ))}
+      </PullToRefresh>
+      <Toast
+        type="text"
+        visible={show}
+        content={toastMsg}
+        onClose={() => {
+          SetShow(false)
+        }}
+      />
+    </>
+  )
+}
+
+export default Demo1
+
+```
+    
+> 在 PullToRefresh 组件内部采用 Selector API 获得父滚动元素的 scrollTop 值会带来下拉卡顿的性能问题。因此需要在 PullRefresh 组件外部判断 scrollTop 值，在页面中使用 usePageScroll() 钩子获得 scrollTop 值，在 ScrollView 组件内监听 onScroll 事件获得 scrollTop 值。
+
+### ScrollView
+
+
+```tsx
+import { Cell, PullToRefresh, Toast } from '@mijadesign/mjui-react-taro'
+import { ScrollView } from '@tarojs/components'
+import React, { useState } from 'react'
+
+const Demo2 = () => {
+  const [list] = useState([1, 2, 3, 4, 5, 6, 7])
+  const [show, SetShow] = useState(false)
+  const [toastMsg, SetToastMsg] = useState('')
+  const toastShow = (msg: any) => {
+    SetToastMsg(msg)
+    SetShow(true)
+  }
+  const [scrollTop, setScrollTop] = useState(0)
+  return (
+    <>
+      <ScrollView
+        style={{ height: '150px' }}
+        scrollY
+        onScrollEnd={(e) => {
+          // scrollTop > 0, PullToRefresh 不触发 touchmove 事件。
+          if (e.detail?.scrollTop) {
+            setScrollTop(e.detail?.scrollTop)
+          }
+        }}
+      >
+        <PullToRefresh
+          style={{ padding: '0 16px' }}
+          scrollTop={scrollTop}
+          onRefresh={() =>
+            new Promise((resolve) => {
+              toastShow('😊')
+              resolve('done')
+            })
+          }
+        >
+          {list.map((item) => (
+            <Cell key={item}>{item}</Cell>
+          ))}
+        </PullToRefresh>
+      </ScrollView>
+      <Toast
+        type="text"
+        visible={show}
+        content={toastMsg}
+        onClose={() => {
+          SetShow(false)
+        }}
+      />
+    </>
+  )
+}
+
+export default Demo2
+
+```
+    
+
+### 深色背景-反白模式:type='primary'
+
+
+```tsx
+import { PullToRefresh, Toast } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo1 = () => {
+  const [list] = useState([1, 2, 3, 4, 5, 6, 7])
+  const [show, SetShow] = useState(false)
+  const [toastMsg, SetToastMsg] = useState('')
+  const toastShow = (msg: any) => {
+    SetToastMsg(msg)
+    SetShow(true)
+  }
+  return (
+    <>
+      <PullToRefresh
+        type="primary"
+        onRefresh={() =>
+          new Promise((resolve) => {
+            toastShow('😊')
+            resolve('done')
+          })
+        }
+        renderIcon={(status) => {
+          return (
+            <>
+              {(status === 'canRelease' || status === 'refreshing') && (
+                <img
+                  alt=""
+                  style={{ height: '26px', width: '36px' }}
+                  src="https://img14.360buyimg.com/imagetools/jfs/t1/186707/25/42738/223/65fab272F0965554b/eae33de2f17909b8.png"
+                />
+              )}
+            </>
+          )
+        }}
+      >
+        {list.map((item) => (
+          <div
+            style={{
+              textAlign: 'center',
+              height: '50px',
+              lineHeight: '50px',
+            }}
+            key={item}
+          >
+            {item}
+          </div>
+        ))}
+      </PullToRefresh>
+      <Toast
+        type="text"
+        visible={show}
+        content={toastMsg}
+        onClose={() => {
+          SetShow(false)
+        }}
+      />
+    </>
+  )
+}
+
+export default Demo1
+
+```
+    
+## PullToRefresh
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| canReleaseText | 释放的提示文案 | `ReactNode` | `松手刷新` |
+| completeText | 完成时的提示文案 | `ReactNode` | `刷新成功` |
+| completeDelay | 完成后延迟消失的时间，单位为 ms | `number` | `500` |
+| disabled | 是否禁用下拉刷新 | `boolean` | `false` |
+| catchMove | 是否禁止滚动 | `boolean` | `false` |
+| headHeight | 头部提示内容区的高度，单位为 px | `number` | `40` |
+| scrollTop | 可滚动的父元素的 scrollTop | `number` | `0` |
+| pullingText | 下拉的提示文案 | `ReactNode` | `下拉刷新` |
+| refreshingText | 刷新时的提示文案 | `ReactNode` | `刷新中` |
+| renderIcon | 根据下拉状态，自定义下拉提示图标 | `ReactNode` | `<Loading />` |
+| renderText | 根据下拉状态，自定义下拉提示文案 | `ReactNode` | `-` |
+| threshold | 触发刷新需要下拉多少距离，单位为 px | `number` | `60` |
+| onRefresh | 触发刷新时的处理函数 | `() => Promise<any>` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-pulltorefresh-icon-width | 下拉时icon宽度 | `36px` |
+| \--nutui-pulltorefresh-icon-height | 下拉时icon高度 | `26px` |
+| \--nutui-pulltorefresh-color-primary | 深色背景模式 | `$color-primay` |

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

@@ -0,0 +1,355 @@
+---
+order: 15
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/feedback/pages/toast/index'
+group:
+    title: 操作反馈
+    order: 6
+---
+
+# Toast 吐司 <Badge>2.0.0</Badge>
+
+
+用于轻提示。
+
+> 当前组件 Taro 环境暂不支持函数式调用，推荐使用 Taro.API 使用原生组件 https://taro-docs.jd.com/taro/docs/apis/ui/interaction/showToast
+
+## 引入
+
+```tsx
+import { Toast } from '@mijadesign/mjui-react-taro';
+```
+
+## 基础用法
+
+### 文字提示
+
+
+```tsx
+import React, { useState } from 'react'
+import { Cell, Toast } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  const [state, setState] = useState({
+    content: 'toast',
+    duration: 0,
+    icon: 'text',
+    title: '',
+  })
+  const [showToast, setShowToast] = useState(false)
+
+  const openToast = (icon: string, content: string, duration?: number, title?: string) => {
+    const changeState = Object.assign(state, {
+      content,
+      duration,
+      icon,
+      title,
+    })
+    setState(changeState)
+  }
+  return (
+    <>
+      <Toast
+        content={state.content}
+        duration={state.duration}
+        icon={state.icon}
+        title={state.title}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
+      />
+      <Cell
+        title="Text文字提示"
+        onClick={() => {
+          openToast('text', '网络失败，请稍后再试~')
+          setShowToast(true)
+        }}
+      />
+      <Cell
+        title="Toast 标题提示"
+        onClick={() => {
+          openToast('text', '网络失败，请稍后再试~', undefined, '标题提示')
+          setShowToast(true)
+        }}
+      />
+      <Cell
+        title="Success 成功提示"
+        onClick={() => {
+          openToast('success', '成功提示')
+          setShowToast(true)
+        }}
+      />
+      <Cell
+        title="Error 失败提示"
+        onClick={() => {
+          openToast('fail', '失败提示')
+          setShowToast(true)
+        }}
+      />
+      <Cell
+        title=" Warning 警告提示"
+        onClick={() => {
+          openToast('warn', '警告提示')
+          setShowToast(true)
+        }}
+      />
+      <Cell
+        title=" Loading 加载提示"
+        onClick={() => {
+          openToast('loading', '加载中')
+          setShowToast(true)
+        }}
+      />
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 函数调用
+
+
+```tsx
+import React from 'react'
+import { Cell, Toast } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Cell
+        title="函数调用"
+        onClick={() => {
+          Toast.show('test', {
+            title: '函数调用',
+            content: '函数调用',
+            position: 'middle',
+            lockScroll: true,
+            onClose: () => {
+              console.log('close')
+            },
+          })
+        }}
+      />
+      <Cell
+        title="函数调用"
+        onClick={() => {
+          Toast.show('test', {
+            content:
+              '函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用函数调用',
+            position: 'middle',
+            lockScroll: true,
+            onClose: () => {
+              console.log('close')
+            },
+          })
+        }}
+      />
+    </>
+  )
+}
+export default Demo5
+
+```
+    
+### 设置展示时长
+
+
+```tsx
+import React, { useState } from 'react'
+import { Cell, Toast } from '@mijadesign/mjui-react-taro'
+
+const Demo3 = () => {
+  const [state, setState] = useState({
+    content: 'toast',
+    duration: 2,
+    icon: 'text',
+    title: '',
+  })
+  const [showToast, setShowToast] = useState(false)
+
+  const openToast = (icon: string, content: string, duration?: number, title?: string) => {
+    const changeState = Object.assign(state, {
+      content,
+      duration,
+      icon,
+      title,
+    })
+    setState(changeState)
+  }
+  return (
+    <>
+      <Toast
+        content={state.content}
+        duration={state.duration}
+        icon={state.icon}
+        title={state.title}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
+      />
+      <Cell
+        title="展示时长为10秒"
+        onClick={() => {
+          openToast('text', '设置展示时长为10秒', 10)
+          setShowToast(true)
+        }}
+      />
+      <Cell
+        title="隐藏Toast"
+        onClick={() => {
+          setShowToast(false)
+        }}
+      />
+    </>
+  )
+}
+export default Demo3
+
+```
+    
+### 自定义 Icon
+
+
+```tsx
+import React, { useState } from 'react'
+import { Cell, Toast } from '@mijadesign/mjui-react-taro'
+
+const Demo4 = () => {
+  const [state, setState] = useState({
+    content: 'toast',
+    duration: 2,
+    icon: 'text',
+    title: '',
+  })
+  const [showToast, setShowToast] = useState(false)
+
+  const openToast = (icon: string, content: string, duration?: number, title?: string) => {
+    const changeState = Object.assign(state, {
+      content,
+      duration,
+      icon,
+      title,
+    })
+    setState(changeState)
+  }
+  return (
+    <>
+      <Toast
+        content={state.content}
+        duration={state.duration}
+        icon={state.icon}
+        title={state.title}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
+      />
+      <Cell
+        title="自定义 Icon"
+        onClick={() => {
+          openToast('text', '设置icon为JD', 2, 'JD')
+          setShowToast(true)
+        }}
+      />
+    </>
+  )
+}
+export default Demo4
+
+```
+    
+### 换行截断方式
+
+
+```tsx
+import React, { useState } from 'react'
+import { Cell, Toast, ToastWordBreak } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  const [state, setState] = useState<{
+    content: string
+    wordBreak: ToastWordBreak
+  }>({
+    content: `Let's try hello world hhhhhhhhhh ABCDEFGHIJKLMN here.`,
+    wordBreak: 'break-all',
+  })
+  const [show, setShow] = useState(false)
+  return (
+    <>
+      <Toast
+        content={state.content}
+        visible={show}
+        icon="text"
+        onClose={() => {
+          setShow(false)
+        }}
+        wordBreak={state.wordBreak}
+      />
+      <Cell.Group>
+        <Cell title="换行时截断单词" onClick={() => setShow(true)} />
+        <Cell
+          title="换行时不截断单词"
+          onClick={() => {
+            setState({
+              content: `Let's try hello world hhhhhhhhhh ABCDEFGHIJKLMN here.`,
+              wordBreak: 'break-word',
+            })
+            setShow(true)
+          }}
+        />
+      </Cell.Group>
+    </>
+  )
+}
+export default Demo5
+
+```
+    
+## Toast
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| content | 消息文本内容 | `string` \| `React.ReactNode` | `-` |
+| duration | 展示时长（秒），值为 0 时，toast 不会自动消失（loading类型默认为0） | `number` | `2.5` |
+| title | 标题 | `string` | `-` |
+| position | toast展示位置 | `top` \| `center` \| `bottom` | `center` |
+| contentClassName | 自定义内容区类名 | `string` | `-` |
+| contentStyle | 自定义内容区样式 | `React.CSSProperties` | `-` |
+| icon | 自定义图标，对应icon组件，支持图片链接 | `string` | `-` |
+| size | 文案尺寸，三选一 | `small` \| `base` \| `large` | `base` |
+| closeOnOverlayClick | 是否在点击遮罩层后关闭提示 | `boolean` | `false` |
+| lockScroll | 背景是否锁定 | `boolean` | `false` |
+| type | 弹框类型 可选值（text、success、fail、warn、loading） | `string` | `text` |
+| visible | 弹窗是否显示开关 | `boolean` | `false` |
+| wordBreak | 换行截断方式 | `normal \| break-all \| break-word ` | `break-word` |
+| onClose | 关闭时触发的事件 | `Function` | `null` |
+
+### Methods
+| 方法名 | 说明 | 类型 |
+| --- | --- | --- |
+| Toast.show | 打开 Toast | (id: string, options: ToastOptions) => void |
+| Toast.hide | 关闭 Toast | (id: string) => void |
+
+ToastOptions 是 ToastProps 的子集，包含如下属性：msg, title, type, duration
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-toast-font-color | `toast`文字颜色 | `$color-white` |
+| \--nutui-toast-inner-bg-color | `toast`内容区背景色 | `$color-mask` |
+| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `$radius-2` |
+| \--nutui-toast-inner-padding | `toast`内容区padding值 | `16px 24px` |
+| \--nutui-toast-inner-text-align | `toast`内容区文本对齐方式 | `center` |
+| \--nutui-toast-inner-top | `toast`内容区自定义高度 | `50%` |
+| \--nutui-toast-text-font-size | `toast`内容文字大小 | `$font-size-3` |
+| \--nutui-toast-title-font-size | `toast`标题文字大小 | `$font-size-3` |