|
@@ -1,15 +1,16 @@
|
|
|
'use client'
|
|
|
-import React, { FC } from 'react'
|
|
|
+import type { FC } from 'react'
|
|
|
+import React from 'react'
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
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 OperationBtn from '../base/operation-btn'
|
|
|
import CardItem from './card-item'
|
|
|
-import { useBoolean } from 'ahooks'
|
|
|
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 = (
|
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -23,25 +24,25 @@ const DatasetConfig: FC = () => {
|
|
|
const {
|
|
|
dataSets: dataSet,
|
|
|
setDataSets: setDataSet,
|
|
|
- setFormattingChanged
|
|
|
+ setFormattingChanged,
|
|
|
} = useContext(ConfigContext)
|
|
|
- const selectedIds = dataSet.map((item) => item.id)
|
|
|
+ const selectedIds = dataSet.map(item => item.id)
|
|
|
|
|
|
const hasData = dataSet.length > 0
|
|
|
const [isShowSelectDataSet, { setTrue: showSelectDataSet, setFalse: hideSelectDataSet }] = useBoolean(false)
|
|
|
const handleSelect = (data: DataSet[]) => {
|
|
|
- if (isEqual(data, dataSet)) {
|
|
|
+ if (isEqual(data, dataSet))
|
|
|
hideSelectDataSet()
|
|
|
- }
|
|
|
+
|
|
|
setFormattingChanged(true)
|
|
|
setDataSet(data)
|
|
|
hideSelectDataSet()
|
|
|
}
|
|
|
const onRemove = (id: string) => {
|
|
|
- setDataSet(dataSet.filter((item) => item.id !== id))
|
|
|
+ setDataSet(dataSet.filter(item => item.id !== id))
|
|
|
+ setFormattingChanged(true)
|
|
|
}
|
|
|
|
|
|
-
|
|
|
return (
|
|
|
<FeaturePanel
|
|
|
className='mt-3'
|
|
@@ -50,20 +51,22 @@ const DatasetConfig: FC = () => {
|
|
|
headerRight={<OperationBtn type="add" onClick={showSelectDataSet} />}
|
|
|
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 && (
|
|
|
<SelectDataSet
|