diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts index a2997f2636..4954e8181a 100644 --- a/src/packages/configprovider/types.ts +++ b/src/packages/configprovider/types.ts @@ -333,19 +333,13 @@ export type NutCSSVariables = | 'nutuiCalendarDayFontWeight' | 'nutuiCalendarDayActiveBorderRadius' | 'nutuiHoverbuttonSpacing' - | 'nutuiSpacing16' | 'nutuiHoverbuttonPositionBottom' | 'nutuiHoverbuttonPositionRight' | 'nutuiHoverbuttonItemBorderColor' - | 'nutuiBlack3' | 'nutuiHoverbuttonItemBackground' - | 'nutuiGray1' | 'nutuiHoverbuttonItemBackgroundActive' - | 'nutuiGray3' | 'nutuiHoverbuttonItemIconColor' - | 'nutuiGray7' | 'nutuiHoverbuttonItemIconColorActive' - | 'nutuiGray6' | 'nutuiOverlayBgColor' | 'nutuiOverlayZIndex' | 'nutuiOverlayContentBgColor' @@ -816,4 +810,5 @@ export type NutCSSVariables = | 'nutuiResultpageDescriptionLineHeight' | 'nutuiResultpageActionsMarginTop' | 'nutuiSafeAreaMultiple' + | 'nutuiBlack3' | 'nutuiBlack1' diff --git a/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap b/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap index 203949b55d..628e966c95 100644 --- a/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap +++ b/src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap @@ -16,7 +16,7 @@ exports[`child element count 1`] = ` > +
+
+ + + +
+ 购物 +
+
{ } /> } /> } /> + }>购物 ) - expect(container.querySelector('.nut-hoverbutton')?.childElementCount).toBe(3) + expect(container.querySelector('.nut-hoverbutton')?.childElementCount).toBe(4) expect(container).toMatchSnapshot() }) @@ -34,7 +35,7 @@ test('tabbar height', () => { expect(container.querySelector('.nut-hoverbutton-container')).toHaveAttribute( 'style', - 'bottom: 64px;' + 'bottom: 108px;' ) expect(container).toMatchSnapshot() }) diff --git a/src/packages/hoverbutton/demo.scss b/src/packages/hoverbutton/demo.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/packages/hoverbutton/demo.taro.tsx b/src/packages/hoverbutton/demo.taro.tsx index c94eddc4e5..71f9f29d29 100644 --- a/src/packages/hoverbutton/demo.taro.tsx +++ b/src/packages/hoverbutton/demo.taro.tsx @@ -8,8 +8,9 @@ import Demo1 from './demos/taro/demo1' import Demo2 from './demos/taro/demo2' import Demo3 from './demos/taro/demo3' import Demo4 from './demos/taro/demo4' +import Demo6 from './demos/taro/demo6' import { harmonyAndRn } from '@/utils/platform-taro' -// import Demo5 from './demos/taro/demo5' +import Demo5 from './demos/taro/demo5' const isNative = harmonyAndRn() @@ -18,6 +19,7 @@ const HoverDemo = () => { 'zh-CN': { show: '展示', basic: '基础用法', + customNode: '自定义内容', multiButtons: '多个按钮', hasTabbar: '有底部导航栏的情况', customZIndex: '自定义层级', @@ -26,6 +28,7 @@ const HoverDemo = () => { 'zh-TW': { show: '展示', basic: '基礎用法', + customNode: '自定义内容', multiButtons: '多個按鈕', hasTabbar: '有底部導航欄的情況', customZIndex: '自定義層級', @@ -34,6 +37,7 @@ const HoverDemo = () => { 'en-US': { show: 'Show ', basic: 'Basic Usage', + customNode: 'Custom Node', multiButtons: 'Multiple Buttons', hasTabbar: 'With Tabbar', customZIndex: 'Custom Z-Index', @@ -82,22 +86,29 @@ const HoverDemo = () => { /> {/* @TODO RN、鸿蒙端暂不支持 ConfigProvider */} - {/* {!isNative && {translated.customSpacing}} - {!isNative && ( - { - setCurDemo('customSpacing') - }} - /> - )} */} + {translated.customSpacing} + { + setCurDemo('customSpacing') + }} + /> + + {translated.customNode} + { + setCurDemo('customNode') + }} + /> {curDemo === 'basic' && } + {curDemo === 'customNode' && } {curDemo === 'multiButtons' && } {curDemo === 'hasTabbar' && } {curDemo === 'customZIndex' && } - {/* {curDemo === 'customSpacing' && } */} + {curDemo === 'customSpacing' && } ) } diff --git a/src/packages/hoverbutton/demo.tsx b/src/packages/hoverbutton/demo.tsx index 31d52fe1f8..0e24c8e4c0 100644 --- a/src/packages/hoverbutton/demo.tsx +++ b/src/packages/hoverbutton/demo.tsx @@ -6,12 +6,14 @@ import Demo2 from './demos/h5/demo2' import Demo3 from './demos/h5/demo3' import Demo4 from './demos/h5/demo4' import Demo5 from './demos/h5/demo5' +import Demo6 from './demos/h5/demo6' const HoverButtonDemo = () => { const [translated] = useTranslate({ 'zh-CN': { show: '展示', basic: '基础用法', + customNode: '自定义内容', multiButtons: '多个按钮', hasTabbar: '有底部导航栏的情况', customZIndex: '自定义层级', @@ -20,6 +22,7 @@ const HoverButtonDemo = () => { 'zh-TW': { show: '展示', basic: '基礎用法', + customNode: '自定義內容', multiButtons: '多個按鈕', hasTabbar: '有底部導航欄的情況', customZIndex: '自定義層級', @@ -28,13 +31,14 @@ const HoverButtonDemo = () => { 'en-US': { show: 'Show ', basic: 'Basic Usage', + customNode: 'Custom Node', multiButtons: 'Multiple Buttons', hasTabbar: 'With Tabbar', customZIndex: 'Custom Z-Index', customSpacing: 'Custom Spacing', }, }) - const [curDemo, setCurDemo] = useState('basic') + const [curDemo, setCurDemo] = useState('customNode') return ( <> @@ -83,6 +87,14 @@ const HoverButtonDemo = () => { }} /> {curDemo === 'customSpacing' && } +

{translated.customNode}

+ { + setCurDemo('customNode') + }} + /> + {curDemo === 'customNode' && }
) diff --git a/src/packages/hoverbutton/demos/h5/demo2.tsx b/src/packages/hoverbutton/demos/h5/demo2.tsx index cb7f5a5317..0131d06d6d 100644 --- a/src/packages/hoverbutton/demos/h5/demo2.tsx +++ b/src/packages/hoverbutton/demos/h5/demo2.tsx @@ -29,7 +29,9 @@ const Demo2 = () => { } onClick={testClick1} /> } onClick={testClick2} /> - } onClick={testClick3} /> + } onClick={testClick3}> + 购物 + ) } diff --git a/src/packages/hoverbutton/demos/h5/demo6.tsx b/src/packages/hoverbutton/demos/h5/demo6.tsx new file mode 100644 index 0000000000..3d0e1eae8b --- /dev/null +++ b/src/packages/hoverbutton/demos/h5/demo6.tsx @@ -0,0 +1,53 @@ +/** + * 基础用法 + */ +import React from 'react' +import { HoverButton } from '@nutui/nutui-react' + +const Demo1 = () => { + return ( + <> + +
+ + 3 + +
+
+ 238 +
+
+ + + ) +} +export default Demo1 diff --git a/src/packages/hoverbutton/demos/taro/demo2.tsx b/src/packages/hoverbutton/demos/taro/demo2.tsx index 5dff2bfb99..c0e0a23e60 100644 --- a/src/packages/hoverbutton/demos/taro/demo2.tsx +++ b/src/packages/hoverbutton/demos/taro/demo2.tsx @@ -20,7 +20,9 @@ const Demo2 = () => { } onClick={testClick1} /> } onClick={testClick2} /> - } onClick={testClick3} /> + } onClick={testClick3}> + 购物 + ) } diff --git a/src/packages/hoverbutton/demos/taro/demo6.tsx b/src/packages/hoverbutton/demos/taro/demo6.tsx new file mode 100644 index 0000000000..3104f48b84 --- /dev/null +++ b/src/packages/hoverbutton/demos/taro/demo6.tsx @@ -0,0 +1,56 @@ +/** + * 基础用法 + */ +import React from 'react' +import { HoverButton } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import pxTransform from '@/utils/px-transform' + +const Demo1 = () => { + return ( + <> + + + + 3 + + + + 238 + + + + + ) +} +export default Demo1 diff --git a/src/packages/hoverbutton/doc.en-US.md b/src/packages/hoverbutton/doc.en-US.md index 1f2b5b347e..82e65aeb18 100644 --- a/src/packages/hoverbutton/doc.en-US.md +++ b/src/packages/hoverbutton/doc.en-US.md @@ -44,6 +44,14 @@ import { HoverButton } from '@nutui/nutui-react-taro' ::: +### Custom Node + +:::demo + + + +::: + ## HoverButton ### Props @@ -79,4 +87,4 @@ The component provides the following CSS variables that can be used for custom s | \--nutui-hoverbutton-item-background | Button normal background color | `#FFFFFF` | | \--nutui-hoverbutton-item-background-active | Button active background color | `#F6F6F6` | | \--nutui-hoverbutton-item-icon-color | Icon normal color | `#1A1A1A` | -| \--nutui-hoverbutton-item-icon-color-active | Icon active color | `#595959` | \ No newline at end of file +| \--nutui-hoverbutton-item-icon-color-active | Icon active color | `#595959` | diff --git a/src/packages/hoverbutton/doc.md b/src/packages/hoverbutton/doc.md index 031165c128..3cc9374aaa 100644 --- a/src/packages/hoverbutton/doc.md +++ b/src/packages/hoverbutton/doc.md @@ -44,6 +44,22 @@ import { HoverButton } from '@nutui/nutui-react' ::: +### 自定义间距 + +:::demo + + + +::: + +### 自定义内容 + +:::demo + + + +::: + ## HoverButton ### Props @@ -79,4 +95,4 @@ import { HoverButton } from '@nutui/nutui-react' | \--nutui-hoverbutton-item-background | 按钮背景色-正常态 | `#FFFFFF` | | \--nutui-hoverbutton-item-background-active | 按钮背景色-点击态 | `#F6F6F6` | | \--nutui-hoverbutton-item-icon-color | 图标色-正常态 | `#1A1A1A` | -| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` | \ No newline at end of file +| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` | diff --git a/src/packages/hoverbutton/doc.taro.md b/src/packages/hoverbutton/doc.taro.md index f0a86c4794..f91cbb9ef5 100644 --- a/src/packages/hoverbutton/doc.taro.md +++ b/src/packages/hoverbutton/doc.taro.md @@ -44,6 +44,14 @@ import { HoverButton } from '@nutui/nutui-react-taro' ::: +### 自定义内容 + +:::demo + + + +::: + ## HoverButton ### Props @@ -79,4 +87,4 @@ import { HoverButton } from '@nutui/nutui-react-taro' | \--nutui-hoverbutton-item-background | 按钮背景色-正常态 | `#FFFFFF` | | \--nutui-hoverbutton-item-background-active | 按钮背景色-点击态 | `#F6F6F6` | | \--nutui-hoverbutton-item-icon-color | 图标色-正常态 | `#1A1A1A` | -| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` | \ No newline at end of file +| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` | diff --git a/src/packages/hoverbutton/doc.zh-TW.md b/src/packages/hoverbutton/doc.zh-TW.md index 54d4ecd65c..96cdd00313 100644 --- a/src/packages/hoverbutton/doc.zh-TW.md +++ b/src/packages/hoverbutton/doc.zh-TW.md @@ -44,6 +44,22 @@ import { HoverButton } from '@nutui/nutui-react-taro' ::: +### 自訂間距 + +:::demo + + + +::: + +### 自定義內容 + +:::demo + + + +::: + ## HoverButton ### Props @@ -79,4 +95,4 @@ import { HoverButton } from '@nutui/nutui-react-taro' | \--nutui-hoverbutton-item-background | 按鈕背景色-正常態 | `#FFFFFF` | | \--nutui-hoverbutton-item-background-active | 按鈕背景色-點擊態 | `#F6F6F6` | | \--nutui-hoverbutton-item-icon-color | 圖標色-正常態 | `#1A1A1A` | -| \--nutui-hoverbutton-item-icon-color-active | 圖標色-點擊態 | `#595959` | \ No newline at end of file +| \--nutui-hoverbutton-item-icon-color-active | 圖標色-點擊態 | `#595959` | diff --git a/src/packages/hoverbutton/hoverbutton.taro.tsx b/src/packages/hoverbutton/hoverbutton.taro.tsx index 6ea440138a..983cf02ada 100644 --- a/src/packages/hoverbutton/hoverbutton.taro.tsx +++ b/src/packages/hoverbutton/hoverbutton.taro.tsx @@ -9,6 +9,7 @@ import HoverButtonItem, { } from '@/packages/hoverbuttonitem/index.taro' import SafeArea from '@/packages/safearea/index.taro' import pxTransform from '@/utils/px-transform' +import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/utils' export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps { zIndex: number @@ -37,7 +38,7 @@ export const HoverButton: FunctionComponent< const baseStyle = { ...style } if (tabbarHeight) { - baseStyle.bottom = pxTransform(tabbarHeight + 16) + baseStyle.bottom = pxTransform(tabbarHeight + UI_BOTTOM_DISTANCE) } if (typeof zIndex !== 'undefined') { diff --git a/src/packages/hoverbutton/hoverbutton.tsx b/src/packages/hoverbutton/hoverbutton.tsx index a044f70fdb..16d5dabc0b 100644 --- a/src/packages/hoverbutton/hoverbutton.tsx +++ b/src/packages/hoverbutton/hoverbutton.tsx @@ -6,6 +6,7 @@ import HoverButtonItem, { HoverButtonItemProps, } from '@/packages/hoverbuttonitem/index' import SafeArea from '@/packages/safearea/index' +import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/utils' export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps { zIndex: number @@ -34,7 +35,7 @@ export const HoverButton: FunctionComponent< const baseStyle = { ...style } if (tabbarHeight) { - const bottom = tabbarHeight + 16 + const bottom = tabbarHeight + UI_BOTTOM_DISTANCE baseStyle.bottom = `${bottom}px` } diff --git a/src/packages/hoverbutton/utils.ts b/src/packages/hoverbutton/utils.ts new file mode 100644 index 0000000000..d3b3791a16 --- /dev/null +++ b/src/packages/hoverbutton/utils.ts @@ -0,0 +1 @@ +export const UI_BOTTOM_DISTANCE = 60 diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss index c0ab4d9bb3..5f9ad95c88 100644 --- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss +++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss @@ -18,6 +18,19 @@ margin-bottom: 0; } } + + &-icontext { + display: flex; + flex-direction: column; + align-items: center; + + .nut-icon { + display: block; + width: 14px; + height: 14px; + font-size: 14px; + } + } } &-icon { @@ -31,6 +44,7 @@ display: block; width: 20px; height: 20px; + font-size: 20px; } } @@ -38,4 +52,15 @@ color: $hoverbutton-item-icon-color-active; fill: $hoverbutton-item-icon-color-active; } + + &-text-icon { + width: 14px; + height: 5px; + } + + &-text { + font-size: 10px; + margin-top: 5px; + line-height: 9px; + } } diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx b/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx index 846ee42180..bf6010de3d 100644 --- a/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx +++ b/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx @@ -1,8 +1,9 @@ -import React, { useState, useMemo } from 'react' +import React, { useMemo, useState } from 'react' import classNames from 'classnames' -import { ITouchEvent, View, BaseEventOrig } from '@tarojs/components' +import { BaseEventOrig, ITouchEvent, View } from '@tarojs/components' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { harmony, harmonyAndRn } from '@/utils/platform-taro' +import { getIcon } from '@/packages/hoverbuttonitem/utils' export interface HoverButtonItemProps extends BasicComponent { icon?: React.ReactNode @@ -24,7 +25,7 @@ const isHarmony = harmony() const isNative = harmonyAndRn() export const HoverButtonItem = (props: Partial) => { - const { className, style, icon, onClick } = { + const { className, style, icon, onClick, children } = { ...defaultProps, ...props, } as any @@ -49,11 +50,36 @@ export const HoverButtonItem = (props: Partial) => { isNative && setTouchStart(false) } + const renderBody = () => { + if (icon && !children) + return {getIcon(icon)} + if (icon && children) { + return ( + <> + + {getIcon(icon)} + + {children} + + + ) + } + } + return ( ) => { onTouchCancel={handleActiveEnd} onClick={handleClick} > - - {React.cloneElement(icon, { - className: 'nut-icon', - size: 20, - ...nativeProps, - })} - + {renderBody()} ) } diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.tsx b/src/packages/hoverbuttonitem/hoverbuttonitem.tsx index 357938595a..3195c99392 100644 --- a/src/packages/hoverbuttonitem/hoverbuttonitem.tsx +++ b/src/packages/hoverbuttonitem/hoverbuttonitem.tsx @@ -1,6 +1,7 @@ import React from 'react' import classNames from 'classnames' import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { getIcon } from '@/packages/hoverbuttonitem/utils' export interface HoverButtonItemProps extends BasicComponent { className?: string @@ -18,7 +19,7 @@ const defaultProps = { const classPrefix = 'nut-hoverbutton-item' export const HoverButtonItem = (props: Partial) => { - const { className, style, icon, onClick } = { + const { className, children, style, icon, onClick } = { ...defaultProps, ...props, } @@ -29,20 +30,39 @@ export const HoverButtonItem = (props: Partial) => { } } + const renderBody = () => { + if (icon && !children) + return
{getIcon(icon)}
+ if (icon && children) { + return ( + <> +
+ {getIcon(icon)} +
+ {children} +
+ + ) + } + } + return (
-
- {React.isValidElement(icon) - ? React.cloneElement(icon, { - // @ts-ignore - size: 20, - }) - : icon} -
+ {renderBody()}
) } diff --git a/src/packages/hoverbuttonitem/utils.ts b/src/packages/hoverbuttonitem/utils.ts new file mode 100644 index 0000000000..2309823be4 --- /dev/null +++ b/src/packages/hoverbuttonitem/utils.ts @@ -0,0 +1,10 @@ +import React from 'react' + +export const getIcon = (icon: React.ReactNode) => { + return React.isValidElement(icon) + ? React.cloneElement(icon, { + // @ts-ignore + className: 'nut-icon', + }) + : icon +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 67894c2019..ebd435f50a 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -998,37 +998,34 @@ $calendar-day-active-border-radius: var( ) !default; //hoverbutton -$hoverbutton-spacing: var( - --nutui-hoverbutton-spacing, - var(--nutui-spacing-16, 16px) -) !default; +$hoverbutton-spacing: var(--nutui-hoverbutton-spacing, $spacing-base) !default; $hoverbutton-position-bottom: var( --nutui-hoverbutton-position-bottom, - 48px + 60px ) !default; $hoverbutton-position-right: var( --nutui-hoverbutton-position-right, - var(--nutui-spacing-16, 16px) + $spacing-base ) !default; $hoverbutton-item-border-color: var( --nutui-hoverbutton-item-border-color, - var(--nutui-black-3, rgba(0, 0, 0, 0.06)) + rgba(0, 0, 0, 0.12) ) !default; $hoverbutton-item-background: var( --nutui-hoverbutton-item-background, - var(--nutui-gray-1, #ffffff) + var(--nutui-white-12) ) !default; $hoverbutton-item-background-active: var( --nutui-hoverbutton-item-background-active, - var(--nutui-gray-3, #f6f6f6) + rgba(247, 248, 252, 0.9) ) !default; $hoverbutton-item-icon-color: var( --nutui-hoverbutton-item-icon-color, - var(--nutui-gray-7, #1a1a1a) + $color-title ) !default; $hoverbutton-item-icon-color-active: var( --nutui-hoverbutton-item-icon-color-active, - var(--nutui-gray-6, #595959) + $color-title ) !default; //overlay（✅）