@antv/s2-react-components
Version:
React components for S2
138 lines • 6.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateColorTheme = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
const tinygradient_1 = tslib_1.__importDefault(require("tinygradient"));
const common_1 = require("../../common");
function clearBorderWidth(theme) {
for (const key in theme) {
if (typeof theme[key] === 'object' && theme[key] !== null) {
// 如果属性值是对象，递归调用函数
clearBorderWidth(theme[key]);
}
else if (key.includes('BorderWidth')) {
// 如果属性名包含是 'BorderWidth'，替换其值
theme[key] = 0;
}
}
}
function getBackgroundColorOpacity(themeColorType) {
if (themeColorType === common_1.SheetThemeColorType.SECONDARY) {
return 0.25;
}
if (themeColorType === common_1.SheetThemeColorType.GRAY) {
return 0.5;
}
return 0.05;
}
/**
* 生成表格对应的主题 schema
* @param params 生成主题的参数
* @returns s2 主题配置
*/
function generateColorTheme(params) {
const { themeType: sheetThemeType, colorType: sheetThemeColorType, customColor: sheetThemeCustomColor, } = params;
/**
* 先根据 sheetThemeColorType 确定主题色板
* - gray: s2 自带灰色
* - primary: s2 自带 colorful + 主题色派生
* - custom: s2 自带 colorful + 用户自选色派生
*/
let themePalette;
if (sheetThemeColorType === common_1.SheetThemeColorType.GRAY) {
themePalette = (0, s2_1.getPalette)('gray');
}
else {
let brandColor = sheetThemeColorType === common_1.SheetThemeColorType.CUSTOM
? sheetThemeCustomColor !== null && sheetThemeCustomColor !== void 0 ? sheetThemeCustomColor : common_1.DEFAULT_THEME_COLOR_LIST[0]
: '#326EF4';
if (sheetThemeColorType === common_1.SheetThemeColorType.SECONDARY) {
// 浅色主题需要在主题色的基础上, 加上 20% 不透明度
brandColor = (0, tinygradient_1.default)([
{ color: brandColor, pos: 0 },
{ color: 'white', pos: 1 },
])
.rgbAt(0.8)
.toHexString();
}
if (sheetThemeType === common_1.SheetThemeType.DEFAULT) {
themePalette = (0, s2_1.getPalette)('default');
}
else if (sheetThemeType === common_1.SheetThemeType.BASIC) {
/**
* 多彩+basic
* 需要通过basicColorRelations来特殊定制色板
*/
themePalette = (0, s2_1.generatePalette)(Object.assign(Object.assign({}, (0, s2_1.getPalette)('colorful')), { brandColor, basicColorRelations: common_1.BASIC_SHEET_THEME_TYPE_COLOR_RELATIONS }));
}
else {
// 普通多彩色板
const palette = Object.assign({}, (0, s2_1.getPalette)('colorful'));
if (sheetThemeColorType === common_1.SheetThemeColorType.SECONDARY) {
palette.basicColorRelations = common_1.SECONDARY_THEME_COLOR_TYPE_RELATIONS;
}
themePalette = (0, s2_1.generatePalette)(Object.assign(Object.assign({}, palette), { brandColor }));
}
}
/**
* 根据 sheetThemeType 使用色板填充生成 theme schema
* - colorful: 使用 s2 默认内置 schema，有斑马纹
* - normal: colorful 基础上，去掉斑马纹
* - basic: colorful+gray文字基础上，去掉斑马纹、表头色等等
*/
const baseTheme = (0, s2_1.getTheme)({
palette: themePalette,
});
if (sheetThemeType === common_1.SheetThemeType.NORMAL) {
// 处理行头/数据单元格背景色
const dataCellBgColor = baseTheme.dataCell.cell.backgroundColor;
baseTheme.dataCell.cell.crossBackgroundColor = dataCellBgColor;
baseTheme.rowCell.cell.backgroundColor = dataCellBgColor;
}
else if (sheetThemeType === common_1.SheetThemeType.BASIC) {
// 处理行头/数据单元格背景色
const dataCellBgColor = baseTheme.dataCell.cell.backgroundColor;
baseTheme.dataCell.cell.crossBackgroundColor = dataCellBgColor;
baseTheme.cornerCell.cell.backgroundColor = dataCellBgColor;
baseTheme.rowCell.cell.backgroundColor = dataCellBgColor;
baseTheme.colCell.cell.backgroundColor = dataCellBgColor;
// 强化分割线
baseTheme.splitLine.verticalBorderColorOpacity = 1;
baseTheme.splitLine.horizontalBorderColorOpacity = 1;
// 弱化角头/列头border颜色（取表体单元格border颜色）
const rowBorderColor = baseTheme.rowCell.cell.verticalBorderColor;
baseTheme.cornerCell.cell.horizontalBorderColor = rowBorderColor;
baseTheme.cornerCell.cell.verticalBorderColor = rowBorderColor;
baseTheme.colCell.cell.horizontalBorderColor = rowBorderColor;
baseTheme.colCell.cell.verticalBorderColor = rowBorderColor;
}
else if (sheetThemeType === common_1.SheetThemeType.ZEBRA) {
clearBorderWidth(baseTheme);
baseTheme.rowCell.text.fontWeight = `bold`;
const backgroundColorSettings = {
crossBackgroundColor: `#FFFFFF`,
backgroundColor: baseTheme.colCell.cell.backgroundColor,
backgroundColorOpacity: getBackgroundColorOpacity(sheetThemeColorType),
};
baseTheme.dataCell.cell = Object.assign(Object.assign({}, baseTheme.dataCell.cell), backgroundColorSettings);
const zebraFontColor = `#1D2129`;
baseTheme.dataCell.text.fill = zebraFontColor;
baseTheme.dataCell.bolderText.fill = zebraFontColor;
baseTheme.rowCell.cell = Object.assign(Object.assign({}, baseTheme.rowCell.cell), backgroundColorSettings);
baseTheme.rowCell.text.fill = zebraFontColor;
baseTheme.rowCell.bolderText.fill = zebraFontColor;
if (sheetThemeColorType === common_1.SheetThemeColorType.SECONDARY ||
sheetThemeColorType === common_1.SheetThemeColorType.GRAY) {
const zebraFontColor80 = (0, tinycolor2_1.default)(zebraFontColor)
.setAlpha(0.8)
.toRgbString();
baseTheme.colCell.text.fill = zebraFontColor80;
baseTheme.colCell.bolderText.fill = zebraFontColor80;
}
}
return baseTheme;
}
exports.generateColorTheme = generateColorTheme;
//# sourceMappingURL=utils.js.map