Skip to content

Commit bb99c93

Browse files
DaryaLariDaryaLari
committed
fix
1 parent fb33edc commit bb99c93

File tree

15 files changed

+373
-117
lines changed

15 files changed

+373
-117
lines changed

‎src/shared/constants/widgets.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,6 @@ export const TRANSPARENT_COLOR_HEX = '#00000000';
1111
export const LIKE_CHART_COLOR_TOKEN = 'var(--g-color-base-float)';
1212
export const BASE_GREY_BACKGROUND_COLOR = 'var(--g-color-base-generic)';
1313

14-
export type CustomPaletteBgColor = ValueOf<typeof CustomPaletteBgColors>;
15-
16-
export function isCustomPaletteBgColor(color: string): color is CustomPaletteBgColor {
17-
return Object.values(CustomPaletteBgColors).includes(color as CustomPaletteBgColor);
18-
}
19-
2014
export const WIDGET_BG_HEAVY_COLORS_PRESET = [
2115
'var(--g-color-base-info-heavy)',
2216
'var(--g-color-base-positive-heavy)',
@@ -108,3 +102,10 @@ export function getDefaultDashWidgetBgColorByType(type: DashTabItemType) {
108102
? CustomPaletteBgColors.LIKE_CHART
109103
: CustomPaletteBgColors.NONE;
110104
}
105+
106+
export function getColorSettingsWithValue(
107+
color: string | undefined,
108+
enableSeparateThemeColorSelector: boolean,
109+
) {
110+
return enableSeparateThemeColorSelector ? {light: color, dark: color} : color;
111+
}

‎src/shared/modules/dash-scheme-converter.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@ import {
77
DUPLICATED_WIDGET_BG_COLORS_PRESET,
88
getDefaultDashWidgetBgColorByType,
99
} from '../constants/widgets';
10-
import type {BackgroundSettings, DashData, DashTab, DashTabItem} from '../types';
10+
import type {DashData, DashTab, DashTabItem, OldBackgroundSettings} from '../types';
1111
import {
1212
DashTabConnectionKind,
1313
DashTabItemControlElementType,
1414
DashTabItemType,
15-
isBackgroundSettings,
15+
isOldBackgroundSettings,
1616
} from '../types';
1717

1818
const DATE_FORMAT_V7 = 'YYYY-MM-DD';
1919

2020
export function getResultedOldBgColor(
21-
oldBgColor: BackgroundSettings | undefined,
21+
oldBgColor: OldBackgroundSettings | undefined,
2222
defaultColor: string | undefined,
2323
): string | undefined {
2424
if (!oldBgColor) {
@@ -42,12 +42,12 @@ export function getResultedOldBgColor(
4242
}
4343

4444
export function getActualOldBackground(
45-
background: BackgroundSettings | undefined,
45+
background: OldBackgroundSettings | undefined,
4646
defaultColor: string | undefined,
47-
): Omit<BackgroundSettings, 'enabled'> | undefined {
47+
): Omit<OldBackgroundSettings, 'enabled'> | undefined {
4848
if (
4949
background &&
50-
isBackgroundSettings(background) &&
50+
isOldBackgroundSettings(background) &&
5151
background.color &&
5252
DUPLICATED_WIDGET_BG_COLORS_PRESET.includes(background.color)
5353
) {
@@ -60,6 +60,9 @@ export function getActualOldBackground(
6060
}
6161

6262
export function migrateBgColor(item: DashTabItem, defaultOldColor?: string): DashTabItem {
63+
if (DashTabItemType.GroupControl === item.type || DashTabItemType.Control === item.type) {
64+
return item;
65+
}
6366
const newItem: DashTabItem = Object.assign({...item}, {data: Object.assign({}, item.data)});
6467

6568
if ('background' in newItem.data) {

‎src/shared/types/dash.ts‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,21 @@ export function isColorByTheme(value: unknown): value is ColorByTheme {
180180
);
181181
}
182182

183+
export function isColorSettings(value: unknown): value is ColorSettings {
184+
return typeof value === 'string' || isColorByTheme(value);
185+
}
186+
187+
export function isBackgroundSettings(value: unknown): value is BackgroundSettings {
188+
return (
189+
typeof value === 'object' &&
190+
value !== null &&
191+
'color' in value &&
192+
(value.color === undefined ||
193+
typeof value.color === 'string' ||
194+
isColorSettings(value.color))
195+
);
196+
}
197+
183198
export interface DashTabItemBase {
184199
id: string;
185200
namespace: string;
@@ -189,14 +204,14 @@ export interface DashTabItemBase {
189204
title?: string;
190205
}
191206

192-
export interface DahsTabItemBaseData {
207+
export type DashTabItemBaseData = {
193208
background?: OldBackgroundSettings;
194209
backgroundSettings?: BackgroundSettings;
195-
}
210+
};
196211

197212
export interface DashTabItemText extends DashTabItemBase {
198213
type: DashTabItemType.Text;
199-
data: DahsTabItemBaseData & {
214+
data: DashTabItemBaseData & {
200215
text: string;
201216
autoHeight?: boolean;
202217
};
@@ -211,7 +226,7 @@ export type DashTitleSize =
211226

212227
export interface DashTabItemTitle extends DashTabItemBase {
213228
type: DashTabItemType.Title;
214-
data: DahsTabItemBaseData & {
229+
data: DashTabItemBaseData & {
215230
text: string;
216231
size: DashTitleSize;
217232
showInTOC: boolean;
@@ -224,9 +239,10 @@ export interface DashTabItemTitle extends DashTabItemBase {
224239

225240
export interface DashTabItemWidget extends DashTabItemBase {
226241
type: DashTabItemType.Widget;
227-
data: DahsTabItemBaseData & {
242+
data: {
228243
hideTitle: boolean;
229244
tabs: DashTabItemWidgetTab[];
245+
backgroundSettings?: BackgroundSettings;
230246
};
231247
}
232248

@@ -424,11 +440,9 @@ export interface DashStats {
424440

425441
export interface DashTabItemImage extends DashTabItemBase {
426442
type: DashTabItemType.Image;
427-
data: {
443+
data: DashTabItemBaseData & {
428444
src: string;
429445
alt?: string;
430-
background?: OldBackgroundSettings;
431-
backgroundSettings?: BackgroundSettings;
432446
preserveAspectRatio?: boolean;
433447
};
434448
}

‎src/ui/components/DashKit/plugins/Widget/WidgetPlugin.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,15 @@ const widgetPlugin: PluginWidget = {
4343

4444
const workbookId = props.context.workbookId;
4545
const enableAssistant = props.context.enableAssistant;
46-
const propsBg =
47-
widgetPlugin.scope === 'dash'
48-
? {color: CustomPaletteBgColors.LIKE_CHART}
49-
: props.data.tabs?.[0]?.background;
46+
const propsBg = props.data.tabs?.[0]?.background;
47+
48+
let oldWidgetBg = isOldBackgroundSettings(propsBg) ? propsBg : undefined;
49+
if (widgetPlugin.scope === 'dash' && !props.data.backgroundSettings) {
50+
oldWidgetBg = {color: CustomPaletteBgColors.LIKE_CHART};
51+
}
52+
5053
const {style} = usePreparedWrapSettings({
51-
widgetBackground: isOldBackgroundSettings(propsBg) ? propsBg : undefined,
54+
widgetBackground: oldWidgetBg,
5255
globalBackground: widgetPlugin.globalBackground,
5356
widgetBackgroundSettings: props.backgroundSettings,
5457
globalBackgroundSettings: widgetPlugin.globalBackgroundSettings,

‎src/ui/components/DialogChartWidget/DialogChartWidget.tsx‎

Lines changed: 46 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -145,18 +145,31 @@ const INPUT_DESCRIPTION_ID = 'chartDescriptionField';
145145
const INPUT_AUTOHEIGHT_ID = 'chartAutoheightField';
146146
const INPUT_HINT_ID = 'chartHintField';
147147

148+
const isDashColorPickersByThemeEnabled = isEnabledFeature(Feature.EnableCommonChartDashSettings);
149+
148150
const DEFAULT_OPENED_ITEM_DATA: DashTabItemWidget['data'] = {
149151
hideTitle: false,
152+
...(isDashColorPickersByThemeEnabled
153+
? {
154+
backgroundSettings: {
155+
color: undefined,
156+
},
157+
}
158+
: {}),
150159
tabs: [
151160
{
152161
get title() {
153162
return i18n('dash.widget-dialog.edit', 'value_title-default', {index: 1});
154163
},
155164
isDefault: true,
156165
description: '',
157-
background: {
158-
color: CustomPaletteBgColors.NONE,
159-
},
166+
...(isDashColorPickersByThemeEnabled
167+
? {}
168+
: {
169+
background: {
170+
color: CustomPaletteBgColors.NONE,
171+
},
172+
}),
160173
enableHint: false,
161174
hint: '',
162175
enableDescription: false,
@@ -165,23 +178,24 @@ const DEFAULT_OPENED_ITEM_DATA: DashTabItemWidget['data'] = {
165178
} as DashTabItemWidget['data'];
166179

167180
// TODO: put in defaultPath navigation key from entry
168-
function DialogChartWidget({
169-
enableAutoheight = true,
170-
enableBackgroundColor = false,
171-
enableCustomBgColorSelector = false,
172-
enableSeparateThemeColorSelector = true,
173-
enableFilteringSetting = true,
174-
openedItemData = DEFAULT_OPENED_ITEM_DATA,
175-
dialogIsVisible,
176-
widgetsCurrentTab,
177-
withoutSidebar,
178-
changeNavigationPath,
179-
workbookId,
180-
navigationPath,
181-
closeDialog,
182-
setItemData,
183-
openedItemId,
184-
}: DialogChartWidgetProps) {
181+
function DialogChartWidget(props: DialogChartWidgetProps) {
182+
const {
183+
enableAutoheight = true,
184+
enableBackgroundColor = false,
185+
enableCustomBgColorSelector = false,
186+
enableSeparateThemeColorSelector = true,
187+
enableFilteringSetting = true,
188+
openedItemData = DEFAULT_OPENED_ITEM_DATA,
189+
dialogIsVisible,
190+
widgetsCurrentTab,
191+
withoutSidebar,
192+
changeNavigationPath,
193+
workbookId,
194+
navigationPath,
195+
closeDialog,
196+
setItemData,
197+
openedItemId,
198+
} = props;
185199
const [state, setState] = React.useState<DialogChartWidgetState>({
186200
hideTitle: true,
187201
prevVisible: false,
@@ -194,19 +208,24 @@ function DialogChartWidget({
194208
activeTab: TAB_TYPE.TABS,
195209
});
196210

211+
const couldChangeOldBg = enableCustomBgColorSelector;
212+
197213
const {
198214
oldBackgroundColor,
199215
backgroundColorSettings,
200216
setOldBackgroundColor,
201217
setBackgroundColorSettings,
202218
resultedBackgroundSettings,
203219
} = useBackgroundColorSettings({
204-
background: openedItemData.background,
220+
background: couldChangeOldBg
221+
? openedItemData.tabs[0]?.background
222+
: {color: CustomPaletteBgColors.LIKE_CHART},
205223
backgroundSettings: openedItemData.backgroundSettings,
206-
defaultOldColor: enableCustomBgColorSelector
224+
defaultOldColor: couldChangeOldBg
207225
? CustomPaletteBgColors.NONE
208226
: CustomPaletteBgColors.LIKE_CHART,
209227
enableSeparateThemeColorSelector,
228+
isNewWidget: !props.openedItemData,
210229
});
211230
const [prevDialogIsVisible, setPrevDialogIsVisible] = React.useState<boolean | undefined>();
212231

@@ -275,7 +294,10 @@ function DialogChartWidget({
275294

276295
if (tabWithoutChartIdIndex === -1) {
277296
const newData = {
278-
...resultedBg,
297+
...(resultedBg?.backgroundSettings
298+
? {backgroundSettings: resultedBg.backgroundSettings}
299+
: {}),
300+
279301
hideTitle: tabs.length === 1 && hideTitle,
280302
tabs: tabs.map(({title, params, ...rest}, index) => {
281303
let resultTabParams =
@@ -300,6 +322,7 @@ function DialogChartWidget({
300322
}),
301323
params: resultTabParams,
302324
...rest,
325+
...(resultedBg?.background ? {background: resultedBg.background} : {}),
303326
};
304327
return tab;
305328
}),

‎src/ui/components/DialogImageWidget/DialogImageWidget.tsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import block from 'bem-cn-lite';
77
import {i18n} from 'i18n';
88
import cloneDeep from 'lodash/cloneDeep';
99
import merge from 'lodash/merge';
10-
import {CustomPaletteBgColors, DialogDashWidgetItemQA, DialogDashWidgetQA} from 'shared';
10+
import {CustomPaletteBgColors, DialogDashWidgetItemQA, DialogDashWidgetQA, Feature} from 'shared';
1111
import type {DashTabItemImage, EntryScope, RecursivePartial} from 'shared';
1212
import {registry} from 'ui/registry';
13+
import {isEnabledFeature} from 'ui/utils/isEnabledFeature';
1314

1415
import {PaletteBackground} from '../..//units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
1516
import type {SetItemDataArgs} from '../../units/dash/store/actions/dashTyped';
@@ -21,13 +22,23 @@ const b = block('dialog-image');
2122
const INPUT_SRC_ID = 'dialog-image-input-src';
2223
const INPUT_ALT_ID = 'dialog-image-input-alt';
2324
const INPUT_PRESERVE_ASPECT_RATIO_ID = 'dialog-image-input-preserve-aspect-ratio';
25+
26+
const isDashColorPickersByThemeEnabled = isEnabledFeature(Feature.EnableDashColorPickersByTheme);
27+
2428
const DEFAULT_ITEM_DATA: DashTabItemImage['data'] = {
2529
src: '',
2630
alt: '',
27-
background: {
28-
color: CustomPaletteBgColors.NONE,
29-
},
30-
backgroundSettings: undefined,
31+
...(isDashColorPickersByThemeEnabled
32+
? {
33+
backgroundSettings: {
34+
color: undefined,
35+
},
36+
}
37+
: {
38+
background: {
39+
color: CustomPaletteBgColors.NONE,
40+
},
41+
}),
3142
preserveAspectRatio: true,
3243
};
3344

@@ -64,8 +75,9 @@ export function DialogImageWidget(props: Props) {
6475
onApply,
6576
scope,
6677
theme,
67-
enableSeparateThemeColorSelector,
78+
enableSeparateThemeColorSelector = true,
6879
} = props;
80+
const isNewWidget = !props.openedItemData;
6981
const [data, setData] = React.useState(openedItemData);
7082
const [validationErrors, setValidationErrors] = React.useState<Record<string, string>>({});
7183
const {DialogImageWidgetLinkHint} = registry.common.components.getAll();
@@ -84,7 +96,8 @@ export function DialogImageWidget(props: Props) {
8496
background: openedItemData.background,
8597
backgroundSettings: openedItemData.backgroundSettings,
8698
defaultOldColor: CustomPaletteBgColors.NONE,
87-
enableSeparateThemeColorSelector: enableSeparateThemeColorSelector,
99+
enableSeparateThemeColorSelector,
100+
isNewWidget,
88101
});
89102

90103
const handleSrcUpdate = (nextSrc: string) => {

0 commit comments

Comments
 (0)