| 'use client' | 'use client' | ||||
| import React, { FC } from 'react' | |||||
| import type { FC } from 'react' | |||||
| import React from 'react' | |||||
| import { useTranslation } from 'react-i18next' | import { useTranslation } from 'react-i18next' | ||||
| import { useContext } from 'use-context-selector' | import { useContext } from 'use-context-selector' | ||||
| import ConfigContext from '@/context/debug-configuration' | |||||
| import { useBoolean } from 'ahooks' | |||||
| import { isEqual } from 'lodash-es' | |||||
| import FeaturePanel from '../base/feature-panel' | import FeaturePanel from '../base/feature-panel' | ||||
| import OperationBtn from '../base/operation-btn' | import OperationBtn from '../base/operation-btn' | ||||
| import CardItem from './card-item' | import CardItem from './card-item' | ||||
| import { useBoolean } from 'ahooks' | |||||
| import SelectDataSet from './select-dataset' | import SelectDataSet from './select-dataset' | ||||
| import { DataSet } from '@/models/datasets' | |||||
| import { isEqual } from 'lodash-es' | |||||
| import ConfigContext from '@/context/debug-configuration' | |||||
| import type { DataSet } from '@/models/datasets' | |||||
| const Icon = ( | const Icon = ( | ||||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||||
| const { | const { | ||||
| dataSets: dataSet, | dataSets: dataSet, | ||||
| setDataSets: setDataSet, | setDataSets: setDataSet, | ||||
| setFormattingChanged | |||||
| setFormattingChanged, | |||||
| } = useContext(ConfigContext) | } = useContext(ConfigContext) | ||||
| const selectedIds = dataSet.map((item) => item.id) | |||||
| const selectedIds = dataSet.map(item => item.id) | |||||
| const hasData = dataSet.length > 0 | const hasData = dataSet.length > 0 | ||||
| const [isShowSelectDataSet, { setTrue: showSelectDataSet, setFalse: hideSelectDataSet }] = useBoolean(false) | const [isShowSelectDataSet, { setTrue: showSelectDataSet, setFalse: hideSelectDataSet }] = useBoolean(false) | ||||
| const handleSelect = (data: DataSet[]) => { | const handleSelect = (data: DataSet[]) => { | ||||
| if (isEqual(data, dataSet)) { | |||||
| if (isEqual(data, dataSet)) | |||||
| hideSelectDataSet() | hideSelectDataSet() | ||||
| } | |||||
| setFormattingChanged(true) | setFormattingChanged(true) | ||||
| setDataSet(data) | setDataSet(data) | ||||
| hideSelectDataSet() | hideSelectDataSet() | ||||
| } | } | ||||
| const onRemove = (id: string) => { | const onRemove = (id: string) => { | ||||
| setDataSet(dataSet.filter((item) => item.id !== id)) | |||||
| setDataSet(dataSet.filter(item => item.id !== id)) | |||||
| setFormattingChanged(true) | |||||
| } | } | ||||
| return ( | return ( | ||||
| <FeaturePanel | <FeaturePanel | ||||
| className='mt-3' | className='mt-3' | ||||
| headerRight={<OperationBtn type="add" onClick={showSelectDataSet} />} | headerRight={<OperationBtn type="add" onClick={showSelectDataSet} />} | ||||
| hasHeaderBottomBorder={!hasData} | hasHeaderBottomBorder={!hasData} | ||||
| > | > | ||||
| {hasData ? ( | |||||
| <div className='flex flex-wrap justify-between'> | |||||
| {dataSet.map((item) => ( | |||||
| <CardItem | |||||
| className="mb-2" | |||||
| key={item.id} | |||||
| config={item} | |||||
| onRemove={onRemove} | |||||
| /> | |||||
| ))} | |||||
| </div> | |||||
| ) : ( | |||||
| <div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.feature.dataSet.noData')}</div> | |||||
| )} | |||||
| {hasData | |||||
| ? ( | |||||
| <div className='flex flex-wrap justify-between'> | |||||
| {dataSet.map(item => ( | |||||
| <CardItem | |||||
| className="mb-2" | |||||
| key={item.id} | |||||
| config={item} | |||||
| onRemove={onRemove} | |||||
| /> | |||||
| ))} | |||||
| </div> | |||||
| ) | |||||
| : ( | |||||
| <div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.feature.dataSet.noData')}</div> | |||||
| )} | |||||
| {isShowSelectDataSet && ( | {isShowSelectDataSet && ( | ||||
| <SelectDataSet | <SelectDataSet |