From 84d97c48085a807fc2b13b1613ede88bc150e4e2 Mon Sep 17 00:00:00 2001
From: oasis-cloud <suanbanren@foxmail.com>
Date: Wed, 30 Nov 2022 15:02:45 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20popover=20demo=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=99=BD=E8=89=B2=E5=BA=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/popover/demo.scss     |   8 ++
 src/packages/popover/demo.taro.tsx | 216 ++++++++++++++--------------
 src/packages/popover/demo.tsx      | 223 +++++++++++++++--------------
 3 files changed, 236 insertions(+), 211 deletions(-)

diff --git a/src/packages/popover/demo.scss b/src/packages/popover/demo.scss
index 2b6b720..afd76af 100644
--- a/src/packages/popover/demo.scss
+++ b/src/packages/popover/demo.scss
@@ -24,3 +24,11 @@
 .customContent .popover-content {
   width: 200px;
 }
+
+.demo-cell-popove {
+  flex-wrap: wrap;
+}
+
+.nut-popover {
+  height: 38px;
+}
diff --git a/src/packages/popover/demo.taro.tsx b/src/packages/popover/demo.taro.tsx
index 32c5f2f..f7ef2e2 100644
--- a/src/packages/popover/demo.taro.tsx
+++ b/src/packages/popover/demo.taro.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react'
-import { Button, Icon, Popover } from '@/packages/nutui.react.taro'
+import { Button, Icon, Popover, Cell } from '@/packages/nutui.react.taro'
 import '@/packages/popover/demo.scss'
 
 interface List {
@@ -130,92 +130,98 @@ const BadgeDemo = () => {
     <>
       <div className="demo">
         <h2>基础用法</h2>
-        <Popover
-          visible={lightTheme}
-          onClick={() => {
-            lightTheme ? setLightTheme(false) : setLightTheme(true)
-          }}
-          list={itemList}
-          style={{ marginRight: '30px' }}
-        >
-          <Button type="primary" shape="square">
-            明朗风格
-          </Button>
-        </Popover>
-        <Popover
-          visible={darkTheme}
-          theme="dark"
-          onClick={() => {
-            darkTheme ? setDarkTheme(false) : setDarkTheme(true)
-          }}
-          list={itemList}
-        >
-          <Button type="primary" shape="square">
-            暗黑风格
-          </Button>
-        </Popover>
-
+        <Cell>
+          <Popover
+            visible={lightTheme}
+            onClick={() => {
+              lightTheme ? setLightTheme(false) : setLightTheme(true)
+            }}
+            list={itemList}
+            style={{ marginRight: '30px' }}
+          >
+            <Button type="primary" shape="square">
+              明朗风格
+            </Button>
+          </Popover>
+          <Popover
+            visible={darkTheme}
+            theme="dark"
+            onClick={() => {
+              darkTheme ? setDarkTheme(false) : setDarkTheme(true)
+            }}
+            list={itemList}
+          >
+            <Button type="primary" shape="square">
+              暗黑风格
+            </Button>
+          </Popover>
+        </Cell>
         <h2>选项配置</h2>
-        <Popover
-          visible={showIcon}
-          theme="dark"
-          onClick={() => {
-            showIcon ? setShowIcon(false) : setShowIcon(true)
-          }}
-          list={iconItemList}
-          style={{ marginRight: '30px' }}
-        >
-          <Button type="primary" shape="square">
-            展示图标
-          </Button>
-        </Popover>
-        <Popover
-          visible={disableAction}
-          onClick={() => {
-            disableAction ? setDisableAction(false) : setDisableAction(true)
-          }}
-          list={itemListDisabled}
-          onChoose={chooseHandle}
-        >
-          <Button type="primary" shape="square">
-            禁用选项
-          </Button>
-        </Popover>
-
+        <Cell>
+          <Popover
+            visible={showIcon}
+            theme="dark"
+            onClick={() => {
+              showIcon ? setShowIcon(false) : setShowIcon(true)
+            }}
+            list={iconItemList}
+            style={{ marginRight: '30px' }}
+          >
+            <Button type="primary" shape="square">
+              展示图标
+            </Button>
+          </Popover>
+          <Popover
+            visible={disableAction}
+            onClick={() => {
+              disableAction ? setDisableAction(false) : setDisableAction(true)
+            }}
+            list={itemListDisabled}
+            onChoose={chooseHandle}
+          >
+            <Button type="primary" shape="square">
+              禁用选项
+            </Button>
+          </Popover>
+        </Cell>
         <h2>自定义内容</h2>
-        <Popover
-          visible={customized}
-          onClick={() => {
-            customized ? setCustomized(false) : setCustomized(true)
-          }}
-          location="bottom-start"
-          className="customContent"
-        >
-          <Button type="primary" shape="square">
-            自定义内容
-          </Button>
-          {customized ? (
-            <div className="self-content" style={selfContentStyle}>
-              {selfContent.map((item: any) => {
-                return (
-                  <div
-                    className="self-content-item"
-                    style={selfContentItem}
-                    key={item.name}
-                  >
-                    <Icon name={item.name} size="15" />
-                    <div className="self-content-desc" style={selfContentDesc}>
-                      {item.desc}
+        <Cell>
+          <Popover
+            visible={customized}
+            onClick={() => {
+              customized ? setCustomized(false) : setCustomized(true)
+            }}
+            location="bottom-start"
+            className="customContent"
+          >
+            <Button type="primary" shape="square">
+              自定义内容
+            </Button>
+            {customized ? (
+              <div className="self-content" style={selfContentStyle}>
+                {selfContent.map((item: any) => {
+                  return (
+                    <div
+                      className="self-content-item"
+                      style={selfContentItem}
+                      key={item.name}
+                    >
+                      <Icon name={item.name} size="15" />
+                      <div
+                        className="self-content-desc"
+                        style={selfContentDesc}
+                      >
+                        {item.desc}
+                      </div>
                     </div>
-                  </div>
-                )
-              })}
-            </div>
-          ) : (
-            ''
-          )}
-        </Popover>
-
+                  )
+                })}
+              </div>
+            ) : (
+              ''
+            )}
+          </Popover>
+        </Cell>
         <h2 className="demoClass">位置自定义</h2>
 
         <Popover
@@ -231,26 +237,28 @@ const BadgeDemo = () => {
           <div className="brick" />
         </Popover>
 
-        <div className="customButtonBox">
-          {customLocation.current.map((location, i) => {
-            const k = Object.keys(location)[0] as any
-            const v = Object.values(location)[0]
-            return (
-              <Button
-                key={i}
-                type="primary"
-                shape="square"
-                style={{ width: '160px', marginBottom: '8px' }}
-                onClick={() => {
-                  setCustomLocationName(k)
-                  setCustomLocationShow(!customLocationShow)
-                }}
-              >
-                {k} 弹出
-              </Button>
-            )
-          })}
-        </div>
+        <Cell className="demo-cell-popover">
+          <div className="customButtonBox">
+            {customLocation.current.map((location, i) => {
+              const k = Object.keys(location)[0] as any
+              const v = Object.values(location)[0]
+              return (
+                <Button
+                  key={i}
+                  type="primary"
+                  shape="square"
+                  style={{ width: '140px', marginBottom: '8px' }}
+                  onClick={() => {
+                    setCustomLocationName(k)
+                    setCustomLocationShow(!customLocationShow)
+                  }}
+                >
+                  {k}
+                </Button>
+              )
+            })}
+          </div>
+        </Cell>
       </div>
     </>
   )
diff --git a/src/packages/popover/demo.tsx b/src/packages/popover/demo.tsx
index 03a089c..4abe10c 100644
--- a/src/packages/popover/demo.tsx
+++ b/src/packages/popover/demo.tsx
@@ -3,6 +3,7 @@ import { useTranslate } from '../../sites/assets/locale'
 import { Popover } from './popover'
 import Button from '@/packages/button'
 import Icon from '@/packages/icon'
+import Cell from '@/packages/cell'
 
 interface T {
   [props: string]: string
@@ -169,24 +170,24 @@ const BadgeDemo = () => {
       flex-wrap: wrap;
       justify-content: space-around;
     }
-    
+
     .brickBox {
       display: flex;
       justify-content: center;
       margin: 80px 0;
     }
-    
+
     .brick {
       width: 60px;
       height: 60px;
       background: #1989fa;
       border-radius: 10px;
     }
-    
+
     .popover-content {
       width: 100px;
     }
-    
+
     .customContent .popover-content{
         width: 200px;
     }
@@ -197,92 +198,99 @@ const BadgeDemo = () => {
       <style>{styles}</style>
       <div className="demo">
         <h2>{translated.title}</h2>
-        <Popover
-          visible={lightTheme}
-          onClick={() => {
-            lightTheme ? setLightTheme(false) : setLightTheme(true)
-          }}
-          list={itemList}
-          style={{ marginRight: '30px' }}
-        >
-          <Button type="primary" shape="square">
-            {translated.light}
-          </Button>
-        </Popover>
-        <Popover
-          visible={darkTheme}
-          theme="dark"
-          onClick={() => {
-            darkTheme ? setDarkTheme(false) : setDarkTheme(true)
-          }}
-          list={itemList}
-        >
-          <Button type="primary" shape="square">
-            {translated.dark}
-          </Button>
-        </Popover>
+        <Cell>
+          <Popover
+            visible={lightTheme}
+            onClick={() => {
+              lightTheme ? setLightTheme(false) : setLightTheme(true)
+            }}
+            list={itemList}
+            style={{ marginRight: '30px' }}
+          >
+            <Button type="primary" shape="square">
+              {translated.light}
+            </Button>
+          </Popover>
+          <Popover
+            visible={darkTheme}
+            theme="dark"
+            onClick={() => {
+              darkTheme ? setDarkTheme(false) : setDarkTheme(true)
+            }}
+            list={itemList}
+          >
+            <Button type="primary" shape="square">
+              {translated.dark}
+            </Button>
+          </Popover>
+        </Cell>
 
         <h2>{translated.title1}</h2>
-        <Popover
-          visible={showIcon}
-          theme="dark"
-          onClick={() => {
-            showIcon ? setShowIcon(false) : setShowIcon(true)
-          }}
-          list={iconItemList}
-          style={{ marginRight: '30px' }}
-        >
-          <Button type="primary" shape="square">
-            {translated.showIcon}
-          </Button>
-        </Popover>
-        <Popover
-          visible={disableAction}
-          onClick={() => {
-            disableAction ? setDisableAction(false) : setDisableAction(true)
-          }}
-          list={itemListDisabled}
-          onChoose={chooseHandle}
-        >
-          <Button type="primary" shape="square">
-            {translated.disableAction}
-          </Button>
-        </Popover>
-
+        <Cell>
+          <Popover
+            visible={showIcon}
+            theme="dark"
+            onClick={() => {
+              showIcon ? setShowIcon(false) : setShowIcon(true)
+            }}
+            list={iconItemList}
+            style={{ marginRight: '30px' }}
+          >
+            <Button type="primary" shape="square">
+              {translated.showIcon}
+            </Button>
+          </Popover>
+          <Popover
+            visible={disableAction}
+            onClick={() => {
+              disableAction ? setDisableAction(false) : setDisableAction(true)
+            }}
+            list={itemListDisabled}
+            onChoose={chooseHandle}
+          >
+            <Button type="primary" shape="square">
+              {translated.disableAction}
+            </Button>
+          </Popover>
+        </Cell>
         <h2>{translated.content}</h2>
-        <Popover
-          visible={customized}
-          onClick={() => {
-            customized ? setCustomized(false) : setCustomized(true)
-          }}
-          location="bottom-start"
-          className="customContent"
-        >
-          <Button type="primary" shape="square">
-            {translated.content}
-          </Button>
-          {customized ? (
-            <div className="self-content" style={selfContentStyle}>
-              {selfContent.map((item: any) => {
-                return (
-                  <div
-                    className="self-content-item"
-                    style={selfContentItem}
-                    key={item.name}
-                  >
-                    <Icon name={item.name} size="15" />
-                    <div className="self-content-desc" style={selfContentDesc}>
-                      {item.desc}
+        <Cell>
+          <Popover
+            visible={customized}
+            onClick={() => {
+              customized ? setCustomized(false) : setCustomized(true)
+            }}
+            location="bottom-start"
+            className="customContent"
+          >
+            <Button type="primary" shape="square">
+              {translated.content}
+            </Button>
+            {customized ? (
+              <div className="self-content" style={selfContentStyle}>
+                {selfContent.map((item: any) => {
+                  return (
+                    <div
+                      className="self-content-item"
+                      style={selfContentItem}
+                      key={item.name}
+                    >
+                      <Icon name={item.name} size="15" />
+                      <div
+                        className="self-content-desc"
+                        style={selfContentDesc}
+                      >
+                        {item.desc}
+                      </div>
                     </div>
-                  </div>
-                )
-              })}
-            </div>
-          ) : (
-            ''
-          )}
-        </Popover>
-
+                  )
+                })}
+              </div>
+            ) : (
+              ''
+            )}
+          </Popover>
+        </Cell>
         <h2 className="demoClass">{translated.title3}</h2>
 
         <Popover
@@ -297,27 +305,28 @@ const BadgeDemo = () => {
         >
           <div className="brick" />
         </Popover>
-
-        <div className="customButtonBox">
-          {customLocation.current.map((location, i) => {
-            const k = Object.keys(location)[0] as any
-            const v = Object.values(location)[0]
-            return (
-              <Button
-                key={i}
-                type="primary"
-                shape="square"
-                style={{ width: '160px', marginBottom: '8px' }}
-                onClick={() => {
-                  setCustomLocationName(k)
-                  setCustomLocationShow(!customLocationShow)
-                }}
-              >
-                {k} {translated.popup}
-              </Button>
-            )
-          })}
-        </div>
+        <Cell className="demo-cell-popover">
+          <div className="customButtonBox">
+            {customLocation.current.map((location, i) => {
+              const k = Object.keys(location)[0] as any
+              const v = Object.values(location)[0]
+              return (
+                <Button
+                  key={i}
+                  type="primary"
+                  shape="square"
+                  style={{ width: '140px', marginBottom: '8px' }}
+                  onClick={() => {
+                    setCustomLocationName(k)
+                    setCustomLocationShow(!customLocationShow)
+                  }}
+                >
+                  {k}
+                </Button>
+              )
+            })}
+          </div>
+        </Cell>
       </div>
     </>
   )
-- 
GitLab