xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat(购物车): 使用context解决跨层级问题

Browse Source
This commit is contained in:
xuan 2022-09-23 15:46:56 +08:00
parent 553445f111
commit b9a0b64826
8 changed files with 225 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/checkbox/index.tsx
View File

@ -10,9 +10,9 @@ type params = {
onSelect?: () => void //选择触发
onClose?: () => void //取消触发
status?: boolean //是否选中
hidden?: boolean // 隐藏单选框
hiddenCheckboxIcon?: boolean // 隐藏多选框
disabled?: boolean //是否禁用
triggerLabel?: boolean // 点击label是否触发选中
triggerLabel?: boolean // 点击label是否触发选中
circle?: boolean
round?: boolean
size?: CheckboxSize
@ -35,7 +35,7 @@ export default forwardRef((props: params, ref) => {
customStyles = {},
customClassName = '',
customTextClass = '',
hidden = false,
hiddenCheckboxIcon = false,
} = props
const [selected, SetSelected] = useState(false)
const onSelectEven = () => {
@ -81,11 +81,14 @@ export default forwardRef((props: params, ref) => {
}, [status])
return (
<View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
<View className={classnames(styles.checkbox_main, getMainClassName())} hidden={hidden}>
<View className={classnames(styles.checkbox_item, getClassName())}>
{selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
{!hiddenCheckboxIcon && (
<View className={classnames(styles.checkbox_main, getMainClassName())}>
<View className={classnames(styles.checkbox_item, getClassName())}>
{selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
</View>
</View>
</View>
)}
{children && (
<View className={classnames(styles['checkbox--text'], customTextClass)} onClick={handleClickChildren}>
{children}

22
src/components/counter/index.tsx
View File

@ -12,22 +12,24 @@ type params = {
onBlue?:(val:number) => void, //失去焦点触发
onClickBtn?:(val:number) => void,
unit?: string,
disable?: true|false, //是否禁用
disable?: boolean, //是否禁用
}
export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
const [value, setValue] = useState<any>({count:defaultNum})
const onPlus = () => {
if(disable) return false
let {count} = value
const onPlus = (event) => {
event.stopPropagation()
if (disable) return false
let { count } = value
let num_res = Big(count).add(step).toNumber()
num_res = num_res >= maxNum?maxNum:num_res
num_res = num_res >= maxNum ? maxNum : num_res
num_res = formatDigits(num_res)
setValue({...value, count:num_res})
setValue({ ...value, count: num_res })
onChange?.(parseFloat(num_res))
onClickBtn?.(parseFloat(num_res))
}
const minus = () => {
const minus = (event) => {
event.stopPropagation()
if(disable) return false
let {count} = value
let num_res = Big(count).minus(step).toNumber()
@ -98,7 +100,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
}
return (
<View className={styles.main}>
<View className={styles.reduce} onClick={() => minus()}>-</View>
<View className={styles.reduce} onClick={minus}>-</View>
<View className={styles.input}>
<Input
value={String(value.count)}
@ -109,7 +111,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
/>
<View className={styles.unit}>{unit}</View>
</View>
<View className={styles.plus} onClick={() => onPlus()}>+</View>
<View className={styles.plus} onClick={onPlus}>+</View>
</View>
)
}
}

33
src/pages/shopping/components/colorKindItem/index.tsx
View File

@ -9,18 +9,23 @@ import { formatPriceDiv } from '@/common/format'
import { EnumSaleMode } from '@/common/Enumerate'
import { useNeedMemoCallback } from '@/use/useCommon'
import {selectList} from '../../config'
import { useShoppingContext, useWatch } from '../../context'
type PropsType = {
item: Record<string, any> & object
orderType: EnumSaleMode
isSelected: boolean
onChecked?: Function
onUnChecked?: Function
}
// 注意：如果在表单控件内部使用 useWatch，由于是直接从Context中取值，memo也会直接失去作用。
const ColorKindItem: FC<PropsType> = memo(
(props) => {
const { item, orderType = EnumSaleMode.Bulk, isSelected = false, onChecked, onUnChecked } = props
console.log('重新渲染', item.id, orderType)
const { item, orderType = EnumSaleMode.Bulk} = props
const { setChangedCheckbox } = useShoppingContext()
console.log('重新渲染 ColorKindItem', item.id, orderType)
const { checked } = useWatch(item?.id)
//格式化金额
const formatPirce = useCallback((price) => {
return Number(formatPriceDiv(price))
@ -38,12 +43,12 @@ const ColorKindItem: FC<PropsType> = memo(
const handleSelect = () => {
console.log('handleSelect')
// setCheck(true)
onChecked && onChecked({ ...item, checked: true })
setChangedCheckbox({id: item?.id, checked: true})
// onChecked && onChecked({ ...item, checked: true })
}
const handleClose = () => {
// setCheck(false)
onUnChecked && onUnChecked({ ...item, checked: false })
setChangedCheckbox({ id: item?.id, checked: false })
// onUnChecked && onUnChecked({ ...item, checked: false })
}
const getInputValue = debounce(async (num, item) => {
@ -52,16 +57,15 @@ const ColorKindItem: FC<PropsType> = memo(
}else{
item.length = num
}
onChecked && onChecked({ ...item, checked: true })
// onChecked && onChecked({ ...item, checked: true })
}, 300)
return (
<MCheckbox
triggerLabel={false}
status={isSelected}
status={checked}
onSelect={handleSelect}
onClose={handleClose}
customClassName={classnames(styles.checkbox, isSelected ? styles.selected : '')}
customClassName={classnames(styles.checkbox, checked ? styles.selected : '')}
customTextClass={styles.colorKindItem}>
<View className={styles['colorKindItem__left']}>
<Image className={styles['colorKindItem__left--image']} mode='aspectFill' src='https://test.cdn.zzfzyc.com/mall/no_img.png'></Image>
@ -96,9 +100,6 @@ const ColorKindItem: FC<PropsType> = memo(
const stringifyNextProp = JSON.stringify(nextProp.item)
console.log('memo==>', preProp, nextProp);
let needMemoized = true
if (preProp.isSelected !== nextProp.isSelected) {
needMemoized = false
}
if (preProp.orderType !== nextProp.orderType) {
needMemoized = false
}

48
src/pages/shopping/components/shoppingCart/index.tsx
View File

@ -1,37 +1,67 @@
import { FC, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
import { ShoppingContext } from '../../context'
import { FC, ReactNode, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import { InternalShoppingCartAction, ShoppingCartAction, ShoppingContext, useShoppingCart } from '../../context'
import { ColorMeta, ColorStore, ShoppingContextValue } from '../../context'
export type TriggerCheckboxOptions = { colorStore: ColorStore; changedCheckbox: ColorMeta }
export interface ShoppingCartPropsType {
initialValues?: ColorStore
onTriggerCheckbox?: (options: { colorStore: ColorStore; changedCheckbox: ColorMeta }) => void
onTriggerCheckbox?: (options: TriggerCheckboxOptions) => void
children?: ReactNode
ref?: ShoppingCartAction
}
// 购物车上下文组件
export const ShoppingCart: FC<ShoppingCartPropsType> = (props) => {
const { children, onTriggerCheckbox, initialValues } = props
const { children, onTriggerCheckbox, initialValues, ref: refProps } = props
console.log('重新渲染 ShoppingCart context', refProps)
const defaultShoppingCart = useShoppingCart()
const ref = (refProps || defaultShoppingCart) as InternalShoppingCartAction
const onTriggerCheckboxRef = useRef(onTriggerCheckbox)
onTriggerCheckboxRef.current = onTriggerCheckbox
const [colorStore, setColorStore] = useState<ColorStore>(() => initialValues || {})
const [changedCheckbox, setChangedCheckbox] = useState<ColorMeta>({})
// 当前高亮的客户
const [currentCheckedPurchaserId, setCurrentCheckedPurchaserId] = useState<number>(-1)
// 是否管理状态
const [isManageStatus, setManageStatus] = useState(false)
const ctx: ShoppingContextValue = useMemo(() => {
console.log('useMemo ShoppingContextValue')
return {
isManageStatus,
setManageStatus,
currentCheckedPurchaserId, // 当前高亮的客户
setCurrentCheckedPurchaserId, // 设置高亮当前客户
colorStore,
setChangedCheckbox() {},
setChangedCheckbox(color) {
setColorStore((prev) => ({ ...prev, [color.id as number]: color }))
setChangedCheckbox(color)
},
}
}, [colorStore])
}, [colorStore, currentCheckedPurchaserId, isManageStatus])
// 暴露给外界
useImperativeHandle(
ref.__INTERNAL__,
() => ({
getManageStatus() {
return ctx.isManageStatus
},
setManageStatus: ctx.setManageStatus,
}),
[ctx.isManageStatus, ctx.setManageStatus],
)
// 这里要在 useEffect 也就是刷新 state 后再调用，否则如果在 onFieldsChangeRef 修改值会覆盖掉上次修改
useEffect(() => {
onTriggerCheckboxRef.current?.({
colorStore,
changedCheckbox,
})
}, [colorStore, changedCheckbox])
return <ShoppingContext.Provider value={ctx}>{children}</ShoppingContext.Provider>
}

131
src/pages/shopping/components/shoppingCartItem/index.tsx
View File

@ -13,11 +13,10 @@ import ColorKindItem from '../colorKindItem'
import { EnumSaleMode } from '@/common/Enumerate'
import { useNeedMemoCallback } from '@/use/useCommon'
import { selectList } from '../../config'
import { useShoppingContext } from '../../context'
type PropsType = {
itemData?: ShoppingCartData
selectedId?: number
onSelectedId?: Function
}
const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
@ -34,13 +33,14 @@ enum BackEndSaleModeListFieldMap {
export default memo<PropsType>((props) => {
console.log('props==>', props)
const { itemData, selectedId } = props
const { itemData } = props
console.log('重新渲染 shoppingCartItem', selectedId)
console.log('重新渲染 shoppingCartItem')
const [openDetail, setOpenDetail] = useState(false)
const handleOpenDetail = () => {
setOpenDetail((isOpen) => !isOpen)
handleClickLayout()
}
const [selected, setSelect] = useState<EnumSaleMode>(0)
@ -52,96 +52,82 @@ export default memo<PropsType>((props) => {
const saleModeList = useRef({
bulk_color_list: itemData?.bulk_color_list,
length_cut_color_list: itemData?.length_cut_color_list,
weight_cut_color_list: itemData?.weight_cut_color_list
weight_cut_color_list: itemData?.weight_cut_color_list,
})
saleModeList.current = {
bulk_color_list: itemData?.bulk_color_list,
length_cut_color_list: itemData?.length_cut_color_list,
weight_cut_color_list: itemData?.weight_cut_color_list
weight_cut_color_list: itemData?.weight_cut_color_list,
}
const [mockList, setMockList] = useState({
0: [
{ id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
{ id: 1, sale_mode: 0, roll: 6, length: 0, checked: false },
{ id: 2, sale_mode: 0, roll: 7, length: 0, checked: true },
],
1: [
{ id: 5, sale_mode: 1, roll: 0, length: 77700, checked: false },
{ id: 6, sale_mode: 1, roll: 0, length: 7600, checked: true },
{ id: 7, sale_mode: 1, roll: 0, length: 400, checked: true },
],
2: [
{ id: 8, sale_mode: 2, roll: 0, length: 11100, checked: false },
{ id: 9, sale_mode: 2, roll: 0, length: 8540, checked: true },
],
})
// const handleChecked = useCallback(
// (current: any) => {
// console.log('handleChecked', current)
// const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
// if (item.id === current.id) {
// item = current
// }
// return item
// })
// setMockList((pre) => {
// return {
// ...pre,
// [selected]: tempList,
// }
// })
// },
// [mockList, selected],
// )
const handleChecked = useCallback(
(current: any) => {
console.log('handleChecked', current)
const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
if (item.id === current.id) {
item = current
}
return item
})
setMockList((pre) => {
return {
...pre,
[selected]: tempList,
}
})
},
[mockList, selected],
)
// const handleUnChecked = useCallback(
// (current: any) => {
// console.log('handleChecked', current)
// const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
// if (item.id === current.id) {
// item = current
// }
// return item
// })
// setMockList((pre) => {
// return {
// ...pre,
// [selected]: tempList,
// }
// })
// },
// [mockList, selected],
// )
const handleUnChecked = useCallback(
(current: any) => {
console.log('handleChecked', current)
const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
if (item.id === current.id) {
item = current
}
return item
})
setMockList((pre) => {
return {
...pre,
[selected]: tempList,
}
})
},
[mockList, selected],
)
const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, isManageStatus } = useShoppingContext()
const memoList = useMemo(() => {
return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
return (
<ColorKindItem
key={item.id}
isSelected={item.checked}
item={item}
orderType={selected}
onChecked={handleChecked}
onUnChecked={handleUnChecked}></ColorKindItem>
)
// 初始化选中状态
setChangedCheckbox({ id: item.id, checked: false })
return <ColorKindItem key={item.id} item={item} orderType={selected}></ColorKindItem>
})
) : (
<View className={styles.noList}>暂无数据</View>
)
}, [mockList, selected])
}, [itemData, selected])
const handleClickLayout = () => {
console.log('itemData===>', itemData)
if (currentCheckedPurchaserId === itemData?.purchaser_id) {
return
}
setCurrentCheckedPurchaserId(itemData?.purchaser_id as number)
}
// const { isManager } = useContext(ShoppingContext)
return (
<LayoutBlock circle customClassName={classnames(styles.layout, itemData?.purchaser_id === selectedId ? styles.selected : '')} onClick={handleClickLayout}>
<MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
<LayoutBlock
circle
customClassName={classnames(styles.layout, itemData?.purchaser_id === currentCheckedPurchaserId ? styles.selected : '')}
onClick={handleClickLayout}>
<MCheckbox hiddenCheckboxIcon={!isManageStatus} customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
<View className='flex-row justify-between' onClick={handleOpenDetail}>
<View className={styles.topItem}>
<View className='flex-row items-center'>
@ -152,7 +138,8 @@ export default memo<PropsType>((props) => {
</View>
<View className={styles.summary}>
<Text>
已选 {mockList[selected].filter((item) => item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
已选 {itemData?.[BackEndSaleModeListFieldMap[selected]].filter((item) => item.checked).length} 种面料，1 个颜色，共{' '}
{selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
</Text>
</View>
</View>

48
src/pages/shopping/context/index.ts
View File

@ -1,15 +1,13 @@
import React from 'react'
import React, { useRef } from 'react'
import { useContext } from 'react'
/**
* 456: {
* id: 456,
* name: 'asdfasf',
* checked: true
* },
* 457: {
* id: 457,
* name: 'dsfaf654',
* checked: true
* }
*/
@ -21,6 +19,10 @@ export interface ColorMeta {
}
export interface ShoppingContextValue {
isManageStatus: boolean
setManageStatus: (isManageStatus: boolean) => void
currentCheckedPurchaserId: number
setCurrentCheckedPurchaserId: (purchaserId: number) => void
colorStore: ColorStore
setChangedCheckbox: (color: ColorMeta) => void
}
@ -34,3 +36,43 @@ export function useShoppingContext() {
}
return ctx
}
export function useWatch(id: ColorMeta['id']) {
const { colorStore } = useShoppingContext()
console.log('colorStore==>', colorStore)
return id ? colorStore[id] : colorStore
}
export interface ShoppingCartAction {
setManageStatus: (manageStatus: boolean) => void
getManageStatus: () => boolean
}
export interface InternalShoppingCartAction extends ShoppingCartAction {
__INTERNAL__: React.MutableRefObject<ShoppingCartAction | null>
}
function throwError(): never {
throw new Error('有没有用 ref 这个props？')
}
export function useShoppingCart(): ShoppingCartAction {
const __INTERNAL__ = useRef<ShoppingCartAction | null>(null)
return {
__INTERNAL__,
setManageStatus(manageStatus: boolean) {
const action = __INTERNAL__.current
if (!action) {
throwError()
}
action.setManageStatus(manageStatus)
},
getManageStatus() {
const action = __INTERNAL__.current
if (!action) {
throwError()
}
return action.getManageStatus()
},
} as InternalShoppingCartAction
}

70
src/pages/shopping/index.tsx
View File

@ -1,7 +1,7 @@
import Search from '@/components/search'
import { View } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import React, { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react'
import React, { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import IconText from '@/components/iconText'
@ -13,22 +13,48 @@ import BottomSettleBar from './components/bottomSettleBar'
import BottomEditBar from './components/bottomEditBar'
import { ShoppingCartListApi } from '@/api/index'
import { dataLoadingStatus } from '@/common/util'
import { ShoppingCart } from './components/shoppingCart/index'
import { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index'
import { useShoppingCart, useShoppingContext } from './context'
export const Shopping: FC = () => {
const [checkboxData, setCheckboxData] = useState<Partial<TriggerCheckboxOptions>>({})
const handleTriggerCheckbox = ({ colorStore, changedCheckbox }) => {
console.log('handleTriggerCheckbox==>', colorStore, changedCheckbox)
setCheckboxData({ colorStore, changedCheckbox })
}
return (
<ShoppingCart onTriggerCheckbox={handleTriggerCheckbox}>
<ShoppingCartContainer checkboxData={checkboxData} />
</ShoppingCart>
)
}
interface InternalContainer {
checkboxData?: Partial<TriggerCheckboxOptions>
}
const ShoppingCartContainer:FC<InternalContainer> = (props) => {
const { checkboxData } = props
const { isManageStatus, setManageStatus } = useShoppingContext()
//输入了搜索关键字
const getSearchData = useCallback((e) => {
// pageNum.current.page = 1
// setOrderData(() => ({ list: [], total: 0 }))
// setSearchField((val) => ({ ...val, name: e, size: 10 }))
}, [])
// 是否在 管理 状态
const [isManage, setManage] = useState(false)
const shoppingCart = useShoppingCart()
console.log('shoppingCart==>', shoppingCart)
// 管理
const onStartToManage = () => {
setManage((isManage) => !isManage)
// ShoppingContext.Consumer
setManageStatus(!isManageStatus)
// shoppingCart.setManageStatus(!isManageStatus)
}
const [selectedAmount, setSelectedAmount] = useState(0)
@ -76,24 +102,14 @@ export const Shopping: FC = () => {
setShoppingCartData({ list: state.data, total: state.data.length })
}, [state])
useDidShow(() => {})
const [selectedId, setSelectedId] = useState<number>()
const handleSelectedItem = (item: ShoppingCartData) => {
setSelectedId(item.purchaser_id)
}
const handleTriggerCheckbox = () => {
}
return (
<View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
<View className={styles['shopping--topBar']} id='topBar'>
<Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
<View className={styles.flexBox} onClick={onStartToManage}>
{isManage ? (
{isManageStatus ? (
<IconText iconName='icon-guanlidingdan' text='取消' customClass={styles['icon--manage--cancel']} />
) : (
<IconText iconName='icon-guanlidingdan' text='管理' />
@ -103,18 +119,15 @@ export const Shopping: FC = () => {
</View>
<View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
<View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
<ShoppingCart onTriggerCheckbox={handleTriggerCheckbox}>
<InfiniteScroll statusMore={statusMore}>
{!!shoppingCartData?.list?.length &&
shoppingCartData?.list?.map((item, index) => {
console.log('item==>', item)
return <ItemList itemData={item} key={index} selectedId={selectedId}></ItemList>
})}
</InfiniteScroll>
</ShoppingCart>
<InfiniteScroll statusMore={statusMore}>
{!!shoppingCartData?.list?.length &&
shoppingCartData?.list?.map((item, index) => {
return <ItemList itemData={item} key={index}></ItemList>
})}
</InfiniteScroll>
</View>
<View id='bottomBar'>
{isManage ? (
{isManageStatus ? (
<BottomEditBar onDelete={handleDelete} onSelectCheckbox={handleSelectAllCheckbox}></BottomEditBar>
) : (
<BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
@ -124,4 +137,5 @@ export const Shopping: FC = () => {
</View>
)
}
export default Shopping

2
src/styles/iconfont.scss
View File

@ -3,7 +3,7 @@
/* Project id 3619513 */
// url('/src/styles/iconfont.ttf') format('truetype');
src:
url('iconfont.ttf?t=1663556335905') format('truetype');
url('/src/styles/iconfont.ttf?t=1663556335905') format('truetype');
}
.iconfont {