Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(hoverbutton): v14 #2810

Merged
merged 15 commits into from
Dec 5, 2024
Merged

feat(hoverbutton): v14 #2810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b4c186d
feat: hoverbutton 适配 v14
oasis-cloud Dec 2, 2024
a8996d0
feat: add demo, docs; update css
oasis-cloud Dec 3, 2024
ce87ad1
Merge branch 'feat_v3.x' into feat_v14_hoverbutton
oasis-cloud Dec 3, 2024
ffde486
feat: add demo, docs; update css
oasis-cloud Dec 3, 2024
c979752
feat: harmony doesn't support gap, so use margin-bottom instead
oasis-cloud Dec 3, 2024
7cf51a7
test: update case and snap
oasis-cloud Dec 3, 2024
89906af
fix: extracting constants
oasis-cloud Dec 4, 2024
10c8625
fix: update demo’s order
oasis-cloud Dec 4, 2024
d16bb67
fix: add constant
oasis-cloud Dec 4, 2024
9a10f48
chore: extract function
oasis-cloud Dec 4, 2024
d5e39c4
chore: test
oasis-cloud Dec 4, 2024
d596e96
chore: test
oasis-cloud Dec 4, 2024
4b68760
chore: build
oasis-cloud Dec 4, 2024
76e8f49
chore: build
oasis-cloud Dec 4, 2024
58b3240
fix: 修订demo
xiaoyatong Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions src/packages/configprovider/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -816,4 +810,5 @@ export type NutCSSVariables =
| 'nutuiResultpageDescriptionLineHeight'
| 'nutuiResultpageActionsMarginTop'
| 'nutuiSafeAreaMultiple'
| 'nutuiBlack3'
| 'nutuiBlack1'
37 changes: 31 additions & 6 deletions src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`child element count 1`] = `
>
<svg
aria-labelledby="Cart"
class="nut-icon nut-icon-Cart "
class="nut-icon nut-icon-Cart nut-icon"
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -37,7 +37,7 @@ exports[`child element count 1`] = `
>
<svg
aria-labelledby="Cart"
class="nut-icon nut-icon-Cart "
class="nut-icon nut-icon-Cart nut-icon"
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -58,7 +58,7 @@ exports[`child element count 1`] = `
>
<svg
aria-labelledby="Cart"
class="nut-icon nut-icon-Cart "
class="nut-icon nut-icon-Cart nut-icon"
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -71,6 +71,31 @@ exports[`child element count 1`] = `
</svg>
</div>
</div>
<div
class="nut-hoverbutton-item-container nut-hoverbutton-item-container-icontext"
>
<div
class="nut-hoverbutton-item-text-icon"
/>
<svg
aria-labelledby="Cart"
class="nut-icon nut-icon-Cart nut-icon"
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 65.17c0-24.21 19.37-43.84 43.24-43.84h51.14c70.46 0 128.85 55.4 133.55 126.68l.74 11.12h661.46c81.45 0 144 73.15 132.48 154.9l-33.02 234.45c-14.63 103.94-97.49 184.23-200.58 194.35l-467.47 45.86C246.4 796.07 180.12 739 175.1 662.63l-30.03-456.32v-.76l-3.42-51.69c-1.66-25.24-22.34-44.84-47.27-44.85H43.24C19.35 109.01 0 89.38 0 65.17m234.45 181.66 26.95 409.98c1.77 27.03 25.22 47.21 51.82 44.59l467.47-45.87c63.36-6.19 114.28-55.55 123.29-119.44L937 301.63c4.1-28.93-18.05-54.83-46.87-54.82h-655.7zm64.22 670.5a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0M896 1002.67A85.33 85.33 0 1 0 896 832a85.33 85.33 0 0 0 0 170.67"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<div
class="nut-hoverbutton-item-text"
>
购物
</div>
</div>
</div>
<div
class="nut-safe-area nut-safe-area-position-bottom"
Expand All @@ -95,7 +120,7 @@ exports[`emit click event 1`] = `
>
<svg
aria-labelledby="Cart"
class="nut-icon nut-icon-Cart "
class="nut-icon nut-icon-Cart nut-icon"
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -120,7 +145,7 @@ exports[`tabbar height 1`] = `
<div>
<div
class="nut-hoverbutton-container"
style="bottom: 64px;"
style="bottom: 108px;"
>
<div
class="nut-hoverbutton"
Expand All @@ -133,7 +158,7 @@ exports[`tabbar height 1`] = `
>
<svg
aria-labelledby="Cart"
class="nut-icon nut-icon-Cart "
class="nut-icon nut-icon-Cart nut-icon"
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
Expand Down
5 changes: 3 additions & 2 deletions src/packages/hoverbutton/__test__/hoverbutton.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@ test('child element count', () => {
<HoverButton.Item icon={<Cart />} />
<HoverButton.Item icon={<Cart />} />
<HoverButton.Item icon={<Cart />} />
<HoverButton.Item icon={<Cart />}>购物</HoverButton.Item>
</HoverButton>
)
expect(container.querySelector('.nut-hoverbutton')?.childElementCount).toBe(3)
expect(container.querySelector('.nut-hoverbutton')?.childElementCount).toBe(4)
expect(container).toMatchSnapshot()
})

Expand All @@ -34,7 +35,7 @@ test('tabbar height', () => {

expect(container.querySelector('.nut-hoverbutton-container')).toHaveAttribute(
'style',
'bottom: 64px;'
'bottom: 108px;'
)
expect(container).toMatchSnapshot()
})
Empty file removed src/packages/hoverbutton/demo.scss
View file
Open in desktop
Empty file.
33 changes: 22 additions & 11 deletions src/packages/hoverbutton/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand All @@ -18,6 +19,7 @@ const HoverDemo = () => {
'zh-CN': {
show: '展示',
basic: '基础用法',
customNode: '自定义内容',
multiButtons: '多个按钮',
hasTabbar: '有底部导航栏的情况',
customZIndex: '自定义层级',
Expand All @@ -26,6 +28,7 @@ const HoverDemo = () => {
'zh-TW': {
show: '展示',
basic: '基礎用法',
customNode: '自定义内容',
multiButtons: '多個按鈕',
hasTabbar: '有底部導航欄的情況',
customZIndex: '自定義層級',
Expand All @@ -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',
Expand Down Expand Up @@ -82,22 +86,29 @@ const HoverDemo = () => {
/>

{/* @TODO RN、鸿蒙端暂不支持 ConfigProvider */}
{/* {!isNative && <View className="h2">{translated.customSpacing}</View>}
{!isNative && (
<Cell
title={`${translated.show}${translated.customSpacing}`}
onClick={() => {
setCurDemo('customSpacing')
}}
/>
)} */}
<View className="h2">{translated.customSpacing}</View>
<Cell
title={`${translated.show}${translated.customSpacing}`}
onClick={() => {
setCurDemo('customSpacing')
}}
/>
Comment on lines +89 to +95
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

代码注释与实现不一致

上方的注释表明 RN 和鸿蒙端暂不支持 ConfigProvider，但是这里直接启用了 customSpacing 的功能。建议添加平台检测逻辑。

+ {!isNative && (
    <>
      <View className="h2">{translated.customSpacing}</View>
      <Cell
        title={`${translated.show}${translated.customSpacing}`}
        onClick={() => {
          setCurDemo('customSpacing')
        }}
      />
    </>
+ )}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<View className="h2">{translated.customSpacing}</View>
<Cell
title={`${translated.show}${translated.customSpacing}`}
onClick={() => {
setCurDemo('customSpacing')
}}
/>
{!isNative && (
<>
<View className="h2">{translated.customSpacing}</View>
<Cell
title={`${translated.show}${translated.customSpacing}`}
onClick={() => {
setCurDemo('customSpacing')
}}
/>
</>
)}


<View className="h2">{translated.customNode}</View>
<Cell
title={`${translated.show}${translated.customNode}`}
onClick={() => {
setCurDemo('customNode')
}}
/>
</ScrollView>

{curDemo === 'basic' && <Demo1 />}
{curDemo === 'customNode' && <Demo6 />}
{curDemo === 'multiButtons' && <Demo2 />}
{curDemo === 'hasTabbar' && <Demo3 />}
{curDemo === 'customZIndex' && <Demo4 />}
{/* {curDemo === 'customSpacing' && <Demo5 />} */}
{curDemo === 'customSpacing' && <Demo5 />}
</View>
)
}
Expand Down
14 changes: 13 additions & 1 deletion src/packages/hoverbutton/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '自定义层级',
Expand All @@ -20,6 +22,7 @@ const HoverButtonDemo = () => {
'zh-TW': {
show: '展示',
basic: '基礎用法',
customNode: '自定義內容',
multiButtons: '多個按鈕',
hasTabbar: '有底部導航欄的情況',
customZIndex: '自定義層級',
Expand All @@ -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')
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved

return (
<>
Expand Down Expand Up @@ -83,6 +87,14 @@ const HoverButtonDemo = () => {
}}
/>
{curDemo === 'customSpacing' && <Demo5 />}
<h2>{translated.customNode}</h2>
<Cell
title={`${translated.show}${translated.customNode}`}
onClick={() => {
setCurDemo('customNode')
}}
/>
{curDemo === 'customNode' && <Demo6 />}
</div>
</>
)
Expand Down
4 changes: 3 additions & 1 deletion src/packages/hoverbutton/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ const Demo2 = () => {
<HoverButton>
<HoverButton.Item icon={<Cart />} onClick={testClick1} />
<HoverButton.Item icon={<Cart />} onClick={testClick2} />
<HoverButton.Item icon={<Cart />} onClick={testClick3} />
<HoverButton.Item icon={<Cart />} onClick={testClick3}>
购物
</HoverButton.Item>
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
</HoverButton>
)
}
Expand Down
53 changes: 53 additions & 0 deletions src/packages/hoverbutton/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/**
* 基础用法
*/
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
import React from 'react'
import { HoverButton } from '@nutui/nutui-react'

const Demo1 = () => {
return (
<>
<HoverButton>
<div
className="nut-hoverbutton-item-container"
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<span
style={{
fontSize: 12,
fontWeight: 700,
lineHeight: 1,
marginTop: 5,
fontFamily: 'JD',
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
}}
>
3
</span>
<div
style={{
height: 1,
width: 20,
background: '#1A1A1A',
marginTop: 3,
marginBottom: 3,
}}
/>
<div
style={{
fontSize: 10,
lineHeight: '9px',
fontFamily: 'JD',
}}
>
238
</div>
</div>
</HoverButton>
</>
)
}
export default Demo1
4 changes: 3 additions & 1 deletion src/packages/hoverbutton/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ const Demo2 = () => {
<HoverButton>
<HoverButton.Item icon={<Cart />} onClick={testClick1} />
<HoverButton.Item icon={<Cart />} onClick={testClick2} />
<HoverButton.Item icon={<Cart />} onClick={testClick3} />
<HoverButton.Item icon={<Cart />} onClick={testClick3}>
购物
</HoverButton.Item>
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
</HoverButton>
)
}
Expand Down
56 changes: 56 additions & 0 deletions src/packages/hoverbutton/demos/taro/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
<HoverButton>
<View
className="nut-hoverbutton-item nut-hoverbutton-item-container"
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginBottom: 8,
}}
>
<View
style={{
fontSize: 12,
fontWeight: 700,
lineHeight: 1,
marginTop: 5,
fontFamily: 'JD',
}}
>
3
</View>
<View
style={{
height: 1,
width: 20,
background: '#1A1A1A',
marginTop: 3,
marginBottom: 3,
}}
/>
<View
style={{
fontSize: 10,
lineHeight: pxTransform(9),
fontFamily: 'JD',
}}
>
238
</View>
</View>
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
</HoverButton>
</>
)
}
export default Demo1
Loading
Loading