feat: 解决config.json冲突

src/config.json

@@ -283,6 +283,16 @@
           "desc": "弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示",
           "author": "szg2008"
         },
+        {
+          "version": "1.0.0",
+          "name": "ActionSheet",
+          "type": "component",
+          "cName": "动作面板",
+          "desc": "从底部弹出的动作菜单面板。",
+          "sort": 11,
+          "show": true,
+          "author": "dsj"
+        },
         {
           "version": "1.0.0",
           "name": "NoticeBar",

src/packages/actionsheet/actionsheet.scss

+.nut-actionsheet {
+  display: block;
+  .nut-actionsheet__title {
+    display: block;
+    padding: 10px;
+    margin: 0;
+    text-align: center;
+    background-color: $white;
+    border-bottom: 1px solid $light-color;
+    font-size: $font-size-base;
+    color: $title-color;
+  }
+
+  .nut-actionsheet-modal {
+    .nut-actionsheet__title,
+    .nut-actionsheet-sub-title {
+      padding: 5px 0;
+    }
+
+    .nut-actionsheet-sub-title {
+      display: block;
+      font-size: $font-size-small;
+      color: $title-color;
+      margin-inline-start: 0px;
+    }
+  }
+
+  .nut-actionsheet__menu {
+    display: block;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .nut-actionsheet__cancel,
+  .nut-actionsheet__item {
+    display: block;
+    //   height: 24px;
+    padding: 10px;
+    line-height: 24px;
+    font-size: $font-size-base;
+    color: $title-color;
+    text-align: center;
+    background-color: #fff;
+    cursor: pointer;
+  }
+
+  .desc {
+    font-size: $font-size-2;
+    color: #999;
+  }
+
+  .subdesc {
+    display: block;
+    font-size: $font-size-small;
+    color: #999;
+  }
+
+  .nut-actionsheet__item-disabled {
+    color: #e1e1e1 !important;
+    cursor: not-allowed;
+  }
+
+  .nut-actionsheet__cancel {
+    margin-top: 5px;
+    border-top: 1px solid $light-color;
+  }
+}

src/packages/actionsheet/actionsheet.tsx

+import React, { FunctionComponent, useState, useEffect } from 'react'
+import Popup from '@/packages/popup'
+import './actionsheet.scss'
+import bem from '@/utils/bem'
+
+export type ItemType<T> = { [key: string]: T }
+
+export interface ActionSheetProps {
+  cancelTxt: string
+  optionTag: string
+  optionSubTag: string
+  chooseTagValue: string
+  title: string
+  color: string
+  description: string
+  menuItems: ItemType<string | boolean>[]
+  cancel: () => void
+  choose: (item: any, index: number) => void
+  visible: boolean
+  className: string
+  style: React.CSSProperties
+}
+const defaultProps = {
+  cancelTxt: '',
+  optionTag: 'name',
+  optionSubTag: 'subname',
+  chooseTagValue: '',
+  title: '',
+  color: '#ee0a24',
+  description: '',
+  menuItems: [],
+  cancel: () => {},
+  choose: () => {},
+  visible: false,
+  className: '',
+  style: {},
+} as ActionSheetProps
+export const ActionSheet: FunctionComponent<
+  Partial<ActionSheetProps> & React.HTMLAttributes<HTMLDivElement>
+> = (props) => {
+  const {
+    cancelTxt,
+    optionTag,
+    optionSubTag,
+    chooseTagValue,
+    title,
+    color,
+    description,
+    menuItems,
+    cancel,
+    choose,
+    visible,
+    className,
+    style,
+    ...rest
+  } = { ...defaultProps, ...props }
+
+  const [isShow, setIsShow] = useState(false)
+  const b = bem('actionsheet')
+
+  useEffect(() => {
+    setIsShow(visible)
+  }, [visible])
+
+  const isHighlight = (item: ItemType<string | boolean>) => {
+    return props.chooseTagValue && props.chooseTagValue === item[props.optionTag || 'name']
+      ? props.color
+      : '#1a1a1a'
+  }
+
+  const cancelActionSheet = () => {
+    cancel && cancel()
+  }
+
+  const chooseItem = (item: ItemType<string | boolean>, index: number) => {
+    if (!item.disable) {
+      choose && choose(item, index)
+    }
+  }
+
+  return (
+    <Popup
+      round
+      visible={visible}
+      position="bottom"
+      onClose={() => {
+        cancel && cancel()
+      }}
+    >
+      <div className={`${b()} ${className}`} style={style} {...rest}>
+        {title && <div className={b('title')}>{title}</div>}
+        {description && <div className={`${b('item')} desc`}>{description}</div>}
+        {menuItems.length ? (
+          <div className={b('menu')}>
+            {menuItems.map((item, index) => {
+              return (
+                <div
+                  className={`${b('item')} ${item.disable ? b('item-disabled') : ''}`}
+                  style={{ color: isHighlight(item) }}
+                  key={index}
+                  onClick={() => chooseItem(item, index)}
+                >
+                  {item[optionTag]}
+                  <div className="subdesc">{item[optionSubTag]}</div>
+                </div>
+              )
+            })}
+          </div>
+        ) : null}
+        {cancelTxt && (
+          <div className={b('cancel')} onClick={() => cancelActionSheet()}>
+            {cancelTxt}
+          </div>
+        )}
+      </div>
+    </Popup>
+  )
+}
+
+ActionSheet.defaultProps = defaultProps
+ActionSheet.displayName = 'NutActionSheet'

src/packages/actionsheet/demo.tsx

+import React, { useState, useEffect } from 'react'
+import { ActionSheet, ItemType } from './actionsheet'
+import Cell from '@/packages/cell'
+interface Item {
+  name: string
+  subname?: string
+  disable?: boolean
+}
+
+const ActionSheetDemo = () => {
+  const [isVisible1, setIsVisible1] = useState(false)
+  const [isVisible2, setIsVisible2] = useState(false)
+  const [isVisible3, setIsVisible3] = useState(false)
+  const [isVisible4, setIsVisible4] = useState(false)
+  const [val1, setVal1] = useState('')
+  const [val2, setVal2] = useState('')
+  const [val3, setVal3] = useState('')
+  const menuItemsOne: ItemType<string>[] = [
+    {
+      name: '选项一',
+    },
+    {
+      name: '选项二',
+    },
+    {
+      name: '选项三',
+    },
+  ]
+  const menuItemsTwo: ItemType<string>[] = [
+    {
+      name: '选项一',
+    },
+    {
+      name: '选项二',
+    },
+    {
+      name: '选项三',
+      subname: '描述信息',
+    },
+  ]
+  const menuItemsThree: ItemType<string | boolean>[] = [
+    {
+      name: '着色选项',
+    },
+    {
+      name: '禁用选项',
+      disable: true,
+    },
+  ]
+
+  const chooseItem = (itemParams: any) => {
+    console.log(itemParams.name, 'itemParams')
+    setVal1(itemParams.name)
+    setIsVisible1(false)
+  }
+
+  const chooseItemTwo = (itemParams: Item) => {
+    setVal2(itemParams.name)
+    setIsVisible2(false)
+  }
+  const chooseItemThree = (itemParams: Item) => {
+    setVal3(itemParams.name)
+    setIsVisible3(false)
+  }
+
+  return (
+    <>
+      <div className="demo">
+        <h2>基本用法</h2>
+        <Cell isLink={true} onClick={() => setIsVisible1(!isVisible1)}>
+          <span>
+            <label>基础用法</label>
+          </span>
+          <div className="selected-option">{val1}</div>
+        </Cell>
+        <Cell isLink={true} onClick={() => setIsVisible2(!isVisible2)}>
+          <span>
+            <label>展示取消按钮</label>
+          </span>
+          <div className="selected-option">{val2}</div>
+        </Cell>
+        <Cell isLink={true} onClick={() => setIsVisible3(!isVisible3)}>
+          <span>
+            <label>展示描述信息</label>
+          </span>
+          <div className="selected-option">{val3}</div>
+        </Cell>
+        <h2>选项状态</h2>
+
+        <Cell isLink={true} onClick={() => setIsVisible4(!isVisible4)}>
+          <span>
+            <label>选项状态</label>
+          </span>
+        </Cell>
+
+        {/* demo 基础用法 */}
+        <ActionSheet
+          visible={isVisible1}
+          menuItems={menuItemsOne}
+          choose={chooseItem}
+          cancel={() => setIsVisible1(false)}
+        ></ActionSheet>
+        {/* demo(带取消按钮） */}
+        <ActionSheet
+          visible={isVisible2}
+          cancelTxt="取消"
+          menuItems={menuItemsOne}
+          choose={chooseItemTwo}
+          cancel={() => setIsVisible2(false)}
+        ></ActionSheet>
+        {/* 展示描述信息 */}
+        <ActionSheet
+          visible={isVisible3}
+          description="这是一段描述信息"
+          menuItems={menuItemsTwo}
+          choose={chooseItemThree}
+          cancelTxt="取消"
+          cancel={() => setIsVisible3(false)}
+        ></ActionSheet>
+        {/* demo 选项状态 */}
+        <ActionSheet
+          visible={isVisible4}
+          cancelTxt="取消"
+          cancel={() => setIsVisible4(false)}
+          menuItems={menuItemsThree}
+          chooseTagValue="着色选项"
+          choose={() => {
+            setIsVisible4(false)
+          }}
+        ></ActionSheet>
+      </div>
+    </>
+  )
+}
+
+export default ActionSheetDemo

src/packages/actionsheet/doc.md

+# ActionSheet 动作面板
+
+
+### 介绍
+从底部弹出的动作菜单面板。
+
+### 安装
+
+``` javascript
+import { ActionSheet } from '@nutui/nutui';
+```
+## 代码示例
+
+### 基本用法
+
+默认
+``` tsx
+<Cell isLink={true} onClick={() => setIsVisible1(!isVisible1)}>
+  <span>
+    <label>基础用法</label>
+  </span>
+  <div className="selected-option">{val1}</div>
+</Cell>
+        
+<ActionSheet
+  visible={isVisible1}
+  menuItems={menuItemsOne}
+  choose={chooseItem}
+  cancel={() => setIsVisible1(false)}
+></ActionSheet>å
+```
+
+### 展示取消按钮
+``` tsx
+<Cell isLink={true} onClick={() => setIsVisible2(!isVisible2)}>
+  <span>
+    <label>展示取消按钮</label>
+  </span>
+  <div className="selected-option">{val2}</div>
+</Cell>
+        
+<ActionSheet
+  visible={isVisible2}
+  cancelTxt="取消"
+  menuItems={menuItemsOne}
+  choose={chooseItemTwo}
+  cancel={() => setIsVisible2(false)}
+></ActionSheet>
+```
+### 展示描述信息
+```tsx
+<Cell isLink={true} onClick={() => setIsVisible3(!isVisible3)}>
+  <span>
+    <label>展示描述信息</label>
+  </span>
+  <div className="selected-option">{val3}</div>
+</Cell>
+<ActionSheet
+  visible={isVisible3}
+  description="这是一段描述信息"
+  menuItems={menuItemsTwo}
+  choose={chooseItemThree}
+  cancelTxt="取消"
+  cancel={() => setIsVisible3(false)}
+></ActionSheet>
+```
+
+### 选项状态
+```tsx
+<Cell isLink={true} onClick={() => setIsVisible4(!isVisible4)}>
+  <span>
+    <label>选项状态</label>
+  </span>
+</Cell>
+<ActionSheet
+  visible={isVisible4}
+  cancelTxt="取消"
+  cancel={() => setIsVisible4(false)}
+  menuItems={menuItemsThree}
+  chooseTagValue="着色选项"
+  choose={() => {
+    setIsVisible4(false)
+  }}
+></ActionSheet>
+```
+
+```javascript
+  const [isVisible1, setIsVisible1] = useState(false)
+  const [isVisible2, setIsVisible2] = useState(false)
+  const [isVisible3, setIsVisible3] = useState(false)
+  const [isVisible4, setIsVisible4] = useState(false)
+  const [val1, setVal1] = useState('')
+  const [val2, setVal2] = useState('')
+  const [val3, setVal3] = useState('')
+  const menuItemsOne: ItemType<string>[] = [
+    {
+      name: '选项一',
+    },
+    {
+      name: '选项二',
+    },
+    {
+      name: '选项三',
+    },
+  ]
+  const menuItemsTwo: ItemType<string>[] = [
+    {
+      name: '选项一',
+    },
+    {
+      name: '选项二',
+    },
+    {
+      name: '选项三',
+      subname: '描述信息',
+    },
+  ]
+  const menuItemsThree: ItemType<string | boolean>[] = [
+    {
+      name: '着色选项',
+    },
+    {
+      name: '禁用选项',
+      disable: true,
+    },
+  ]
+
+  const chooseItem = (itemParams: any) => {
+    console.log(itemParams.name, 'itemParams')
+    setVal1(itemParams.name)
+    setIsVisible1(false)
+  }
+
+  const chooseItemTwo = (itemParams: Item) => {
+    setVal2(itemParams.name)
+    setIsVisible2(false)
+  }
+  const chooseItemThree = (itemParams: Item) => {
+    setVal3(itemParams.name)
+    setIsVisible3(false)
+  }
+
+```
+
+## Prop
+
+| 字段             | 说明                                   | 类型    | 默认值    |
+|------------------|----------------------------------------|---------|-----------|
+| cancelTxt       | 取消文案                               | String  | '取消'    |
+| menuItems       | 列表项                                 | Array   | [ ]       |
+| optionTag       | 设置列表项展示使用参数                 | String  | 'name'    |
+| visible       | 遮罩层可见                             | Boolean | false     |
+| optionSubTag   | 设置列表项描述展示使用参数             | String  | 'subname' |
+| chooseTagValue | 设置选中项的值，和'option-tag'的值对应 | String  | ''        |
+| title            | 设置列表项标题                         | String  | ''        |
+| description      | 设置列表项副标题/描述                  | String  | ''        |
+| color            | 高亮颜色                               | String  | '#ee0a24' |
+
+
+## Event
+
+| 字段   | 说明               | 回调参数                          |
+|--------|--------------------|-----------------------------------|
+| choose | 选择之后触发       | 选中列表项item, 选中的索引值index |
+| cancel | 点击取消文案时触发 | 无                                |
\ No newline at end of file

src/packages/actionsheet/index.ts

+import { ActionSheet } from './actionsheet'
+export default ActionSheet

src/packages/overlay/overlay.tsx

@@ -24,9 +24,6 @@ export const defaultOverlayProps = {
 export const Overlay: FunctionComponent<
   Partial<OverlayProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
-  const [show, setShow] = useState(false)
-  const renderRef = useRef(true)
-  const intervalRef = useRef(0)
   const {
     children,
     zIndex,
@@ -41,9 +38,12 @@ export const Overlay: FunctionComponent<
     ...defaultOverlayProps,
     ...props,
   }
+  const [show, setShow] = useState(visible)
+  const renderRef = useRef(true)
+  const intervalRef = useRef(0)
 
   useEffect(() => {
-    setShow(false)
+    visible && setShow(visible)
     lock()
   }, [visible])
 
@@ -61,7 +61,7 @@ export const Overlay: FunctionComponent<
       'overlay-fade-leave-active': !renderRef.current && !visible,
       'overlay-fade-enter-active': visible,
       'first-render': renderRef.current && !visible,
-      'hidden-render': show,
+      'hidden-render': !visible,
     },
     overlayClass,
     b('')
@@ -86,7 +86,7 @@ export const Overlay: FunctionComponent<
       props.onClick && props.onClick(e)
       renderRef.current = false
       let id = setTimeout(() => {
-        setShow(true)
+        setShow(!visible)
       }, duration * 1000 * 0.8)
       intervalRef.current = id
     }

src/packages/popup/popup.tsx

@@ -129,7 +129,7 @@ export const Popup: FunctionComponent<Partial<PopupProps> & React.HTMLAttributes
         // if(zIndex !== undefined) {
         //   _zIndex = +zIndex;
         // }
-        setInnerVisible(visible)
+        setInnerVisible(true)
         setIndex(++_zIndex)
       }
       if (destroyOnClose) {
@@ -139,8 +139,9 @@ export const Popup: FunctionComponent<Partial<PopupProps> & React.HTMLAttributes
     }
 
     const close = () => {
+      console.log('close', innerVisible, visible)
       if (innerVisible) {
-        setInnerVisible(!visible)
+        setInnerVisible(false)
         if (destroyOnClose) {
           setTimeout(() => {
             setShowChildren(false)
@@ -175,7 +176,9 @@ export const Popup: FunctionComponent<Partial<PopupProps> & React.HTMLAttributes
     }
 
     useEffect(() => {
+      console.log('popup', visible)
       visible && open()
+      !visible && close()
     }, [visible])
 
     useEffect(() => {