antdesignblazor
/
ant-design-blazor
зеркало из https://github.com/ant-design-blazor/ant-design-blazor.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

update menu style

This commit is contained in:
zhaowenkai 2023-12-12 16:41:03 +08:00
Родитель 01a8bb556d
Коммит e025e6162c
8 изменённых файлов: 1461 добавлений и 193 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
components/menu/Menu.razor
Просмотреть файл

@ -5,4 +5,5 @@
<ul class="@ClassMapper.Class" style="@Style" id="@Id" direction="ltr" role="menu" @ref="Ref">
@ChildContent
</ul>
</CascadingValue>
</CascadingValue>
@_styleContent

2
components/menu/Menu.razor.cs
Просмотреть файл

@ -213,9 +213,11 @@ namespace AntDesign
private void SetClass()
{
var hashId = UseStyle(PrefixCls);
ClassMapper
.Clear()
.Add(PrefixCls)
.Add(hashId)
.Add($"{PrefixCls}-root")
.If($"{PrefixCls}-{MenuTheme.Dark}", () => Theme == MenuTheme.Dark)
.If($"{PrefixCls}-{MenuTheme.Light}", () => Theme == MenuTheme.Light)

1420
components/menu/Style.cs
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

2
components/theme/util/StyleUtil.cs
Просмотреть файл

@ -15,7 +15,7 @@ namespace AntDesign
internal class GenOptions
{
public bool ResetStyle { get; set; }
public List<Tuple<string, string>> DeprecatedTokens { get; set; }
public List<(string, string)> DeprecatedTokens { get; set; }
}
internal class StyleUtil

44
scripts/migrator/Components.ts
Просмотреть файл

@ -851,6 +851,7 @@ const letterI: Component[] = [
csOptions: {
...defaultOptions,
defaultClass: 'Layout',
propertyMap: '_tokens',
typeMap: [
{ from: 'Padding<string | number>', to: 'string' },
{ from: 'Unknown1', to: 'CSSObject', ranges: [[1, 25]] },
@ -1482,32 +1483,57 @@ export const components: Component[] = [
name: 'Menu',
src: [
'components/menu/style/index.tsx',
// 'components/menu/style/horizontal.tsx',
// 'components/menu/style/vertical.tsx',
// 'components/menu/style/rtl.tsx',
// 'components/menu/style/theme.tsx',
'components/menu/style/horizontal.tsx',
'components/menu/style/vertical.tsx',
'components/menu/style/rtl.tsx',
'components/menu/style/theme.tsx',
],
dist: 'components/menu/Style.cs',
csOptions: {
...defaultOptions,
defaultClass: 'Menu',
propertyMap: '_tokens',
typeMap: [
{ from: 'LineHeight<string | number>', to: 'string' },
{ from: 'MarginBlock<string | number>', to: 'string' },
{ from: 'PaddingInline<string | number>', to: 'string' },
{ from: 'LineHeight<string | number>', to: 'string' },
{ from: 'MarginInlineEnd<string | number>', to: 'string' },
{ from: 'LineHeight<string | number>', to: 'double' },
{ from: 'MarginBlock<string | number>', to: 'double' },
{ from: 'PaddingInline<string | number>', to: 'double' },
{ from: 'MarginInlineEnd<string | number>', to: 'double' },
{ from: 'Unknown1', to: 'string[]', includes: [1, 2, 3] },
{ from: 'Unknown2', to: 'string[]', includes: [1] },
{ from: 'Unknown3', to: 'CSSObject', ranges: [[1, 55]] },
{ from: 'Unknown3', to: 'CSSInterpolation[]', includes: [1, 3] },
{ from: 'Unknown3', to: 'MenuToken', includes: [2] },
{ from: 'Unknown3', to: 'string[]', includes: [17, 19, 21] },
{ from: 'Unknown4', to: 'MenuToken', includes: [1, 2, 4] },
{ from: 'Unknown4', to: 'CSSInterpolation[]', includes: [3] },
{ from: 'Unknown4', to: '()', includes: [5] },
{ from: 'Unknown5', to: 'CSSObject', ranges: [[1, 10]] },
{ from: 'Unknown5', to: 'MenuToken', includes: [2] },
{ from: 'Unknown5', to: 'string[]', includes: [9] },
{ from: 'Unknown6', to: 'CSSObject', ranges: [[1, 7]] },
{ from: 'Unknown6', to: 'MenuToken', includes: [2] },
{ from: 'Unknown7', to: 'CSSObject', ranges: [[3, 36]] },
{ from: 'Unknown7', to: 'CSSInterpolation[]', includes: [1, 4] },
{ from: 'Unknown7', to: 'MenuToken', includes: [2] },
{ from: 'Unknown7', to: 'string[]', includes: [18] },
{ from: 'Unknown8', to: 'CSSObject', ranges: [[1, 9]] },
{ from: 'Unknown8', to: 'MenuToken', includes: [2] },
{ from: 'Unknown9', to: 'CSSObject', includes: [1, 2] },
{ from: 'CSSInterpolation', to: 'CSSObject' },
{ from: 'Unknown10', to: 'CSSObject', ranges: [[1, 4]] },
{ from: 'Unknown10', to: 'string[]', includes: [5, 6] },
],
transforms: [
{ source: 'class ComponentToken', target: 'partial class MenuToken' },
{ source: 'class MenuToken', target: 'partial class MenuToken : TokenWithCommonCls' },
{ source: 'class Menu', target: 'partial class Menu' },
{ source: '"-active"', target: `'-active'` },
{ source: 'textEllipsis', target: 'TextEllipsis' },
{ source: 'double HorizontalLineHeight', target: 'string HorizontalLineHeight' },
{ source: '(double)_tokens["horizontalLineHeight"]', target: '(string)_tokens["horizontalLineHeight"]' },
{ source: 'UseComponentStyleResult()', target: 'GenOptions()' },
{ source: 'UseOriginHook(prefixCls)', target: 'useOriginHook' },
{ source: 'activeBarBorderWidth && activeBarWidth', target: 'activeBarBorderWidth != 0 && activeBarWidth != 0' },
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
]
}

105
scripts/migrator/CsBuilder.ts
Просмотреть файл

@ -1,4 +1,4 @@
import { isString, toPascalCase, castType, castFieldName, castFieldValue, init, unknown, castParameter, castFunName, defaultValue, increaseIndex } from "./Util";
import { isString, toPascalCase, castType, castFieldName, castFieldValue, init, unknown, castParameter, castFunName, defaultValue, increaseIndex, castOperator } from "./Util";
export type Transform = {
source: string;
@ -33,6 +33,7 @@ export enum CsKinds {
Action = 6,
VariableDeclaration = 7,
Identifier = 8,
ConditionalExpression = 9,
}
export type ParameterType = {
@ -44,7 +45,7 @@ export type ParameterType = {
export type PropertyAssignment = {
fieldName: string;
fieldValue: string | ObjectExpression | ArrayExpression | CallExpression;
fieldValue: string | ObjectExpression | ArrayExpression | CallExpression | ConditionalExpression;
}
export type BindingItem = {
@ -74,6 +75,15 @@ export type CallExpression = {
returnFlag?: string;
}
export type ConditionalExpression = {
kind: CsKinds;
left: string;
right: string;
operator: string;
whenFalse?: any;
whenTrue?: any;
}
export type ObjectBinding = {
kind: CsKinds;
initializer: string;
@ -198,9 +208,13 @@ export class CsFunction {
}
switch (this.kind) {
case CsKinds.Method:
const bps = this.paramaters.filter(x => x.bindings !== undefined);
const ps = () => this.paramaters.map(x => `${castType(x.type || unknown())} ${defaultValue(x.name, x.defaultValue)}`).join(', ');
codes.push(`${tab}public ${castType(this.returnType || unknown())} ${toPascalCase(this.name)}(${ps()})`);
codes.push(`${tab}{`);
if (bps && bps.length > 0) {
bindingParamaters();
}
codes.push(...this.createBody(tab + ' '));
codes.push(`${tab}}`);
break;
@ -280,20 +294,43 @@ export class CsFunction {
const value = item.fieldValue as any;
if (isString(value)) {
codes.push(`${rootTab} ${name} = ${castFieldValue(value as string)},`);
} else if (value.kind === CsKinds.ArrayExpression) {
const end = i === exp.properties.length - 1 ? '' : ',';
const arrExp = this.createArrayExpression(rootTab + ' ', value as ArrayExpression, end, '');
codes.push(`${rootTab} ${name} = ${arrExp[0].trimStart()}`);
codes.push(...arrExp.slice(1));
} else if (value.kind === CsKinds.CallExpression) {
const end = i === exp.properties.length - 1 ? '' : ',';
const callExp = this.createCallExpression(rootTab + ' ', value as CallExpression, end);
codes.push(`${rootTab} ${name} = ${callExp[0].trimStart()}`);
if (callExp.length > 1) {
codes.push(...callExp.slice(1));
}
} else {
recursion(rootTab + ' ', name, value as ObjectExpression);
switch (value.kind) {
case CsKinds.ArrayExpression:
{
const end = i === exp.properties.length - 1 ? '' : ',';
const arrExp = this.createArrayExpression(rootTab + ' ', value as ArrayExpression, end, '');
codes.push(`${rootTab} ${name} = ${arrExp[0].trimStart()}`);
codes.push(...arrExp.slice(1));
}
break;
case CsKinds.CallExpression:
{
const end = i === exp.properties.length - 1 ? '' : ',';
const callExp = this.createCallExpression(rootTab + ' ', value as CallExpression, end);
codes.push(`${rootTab} ${name} = ${callExp[0].trimStart()}`);
if (callExp.length > 1) {
codes.push(...callExp.slice(1));
}
}
break;
case CsKinds.ConditionalExpression:
{
const end = i === exp.properties.length - 1 ? '' : ',';
const conCodes = this.createConditional(rootTab + ' ', value);
if (conCodes.length > 1) {
codes.push(`${rootTab} ${name} = (${conCodes[0].trim()}`);
codes.push(...conCodes.slice(1, conCodes.length - 1));
codes.push(`${conCodes[conCodes.length - 1]})${end}`);
} else {
codes.push(`${rootTab} ${name} = ${conCodes[0]}${end}`);
}
}
break;
default:
recursion(rootTab + ' ', name, value as ObjectExpression);
break;
}
}
});
codes.push(`${rootTab}}${end}`);
@ -326,6 +363,24 @@ export class CsFunction {
*/
codes.push(...this.createCallExpression(tab + ' ', x as CallExpression, ','));
break;
case CsKinds.ArrayExpression:
/**
* 数组套数组,
* 示例
* [
* ["xxxx", "xxxx"],
* ["xxxx", "xxxx"],
* ]
* 转换为：
* [
* ("", ""),
* ("", ""),
* ]
* 不使用二维数组，直接用tuple类型，因为无法判断类型
*/
const arrItems = (x as ArrayExpression).items.map(y => castParameter(y));
codes.push(`${tab} (${arrItems.join(', ')}),`);
break;
}
}
});
@ -399,6 +454,26 @@ export class CsFunction {
return codes;
}
private createConditional(tab: string, conditional: ConditionalExpression) {
const codes: string[] = [];
codes.push(`${tab}${conditional.left} ${castOperator(conditional.operator)} ${castParameter(conditional.right)}`);
const parse = (when: any, operator: string) => {
if (!when) return;
switch (when.kind) {
case CsKinds.ObjectExpression:
const objCodes = this.createObjectExpression(tab, when, '', '');
if (objCodes.length > 1) {
codes.push(`${tab}${operator} ${objCodes[0].trim()}`);
codes.push(...objCodes.slice(1));
}
break;
}
}
parse(conditional.whenTrue, '?');
parse(conditional.whenFalse, ':');
return codes;
}
}
export class CsClass {

54
scripts/migrator/TsConverter.ts
Просмотреть файл

@ -1,5 +1,5 @@
import * as ts from 'typescript';
import { ArrayExpression, CallExpression, CsBuilder, CsFunction, CsKinds, CsOptions, CsVariable, ObjectBinding, ObjectExpression, ParameterType } from "./CsBuilder";
import { ArrayExpression, CallExpression, CsBuilder, CsFunction, CsKinds, CsOptions, CsVariable, ObjectBinding, ObjectExpression, ConditionalExpression, ParameterType } from "./CsBuilder";
type Context<T> = {
node: T;
@ -60,7 +60,7 @@ function createObjectExpression(type: string, expression: ts.ObjectLiteralExpres
case ts.SyntaxKind.PropertyAssignment:
const initializer = (item as any).initializer;
const fieldName = item.name?.getText() || '';
let fieldValue: string | ObjectExpression | ArrayExpression | CallExpression = '';
let fieldValue: string | ObjectExpression | ArrayExpression | CallExpression | ConditionalExpression = '';
if (initializer.expression && initializer.expression.kind === ts.SyntaxKind.PropertyAccessExpression) {
const propAccessExp = initializer.expression as ts.PropertyAccessExpression;
@ -68,6 +68,9 @@ function createObjectExpression(type: string, expression: ts.ObjectLiteralExpres
case ts.SyntaxKind.ArrayLiteralExpression:
fieldValue = createArrayExpression('', (propAccessExp.expression as any).elements, '.Join(",")');
break;
case ts.SyntaxKind.CallExpression:
fieldValue = createCallExpression('', '', propAccessExp.expression as any);
break;
}
} else {
switch (initializer.kind) {
@ -84,6 +87,9 @@ function createObjectExpression(type: string, expression: ts.ObjectLiteralExpres
case ts.SyntaxKind.ArrayLiteralExpression:
fieldValue = createArrayExpression('', initializer.elements);
break;
case ts.SyntaxKind.ConditionalExpression:
fieldValue = createConditionalExpression(initializer as ts.ConditionalExpression);
break;
default:
fieldValue = initializer.getText() as string;
break;
@ -101,6 +107,15 @@ function createObjectExpression(type: string, expression: ts.ObjectLiteralExpres
const callExp = createCallExpression('', '', item.expression as ts.CallExpression);
objectExp.properties.push({ fieldName: `['...']`, fieldValue: callExp });
break;
case ts.SyntaxKind.ParenthesizedExpression:
const parentExp = item.expression as ts.ParenthesizedExpression;
switch (parentExp.expression.kind) {
case ts.SyntaxKind.ConditionalExpression:
const conExp = createConditionalExpression(parentExp.expression as ts.ConditionalExpression);
objectExp.properties.push({ fieldName: `['...']`, fieldValue: conExp });
break
}
break;
default:
const exp = item.expression.getText();
objectExp.properties.push({ fieldName: `['...']`, fieldValue: exp });
@ -135,6 +150,10 @@ function createArrayExpression(type: string, elements: any[], endInsert?: string
const callExp = createCallExpression('', '', x, '');
arrayExpression.items.push(callExp);
break;
case ts.SyntaxKind.ArrayLiteralExpression:
const arrExp = createArrayExpression('', x.elements);
arrayExpression.items.push(arrExp);
break;
default:
arrayExpression.items.push(x.getText());
break;
@ -156,6 +175,26 @@ function createObjectBinding(initializer: string, elements: any[]): ObjectBindin
return objectBinding;
}
function createConditionalExpression(exp: ts.ConditionalExpression): ConditionalExpression {
const cond = exp.condition as any;
const condition: ConditionalExpression = {
kind: CsKinds.ConditionalExpression,
left: cond.left.getText(),
right: cond.right.getText(),
operator: cond.operatorToken.getText()
}
const getWhenCond = (exp: ts.Expression) => {
if (!exp) return undefined;
switch (exp.kind) {
case ts.SyntaxKind.ObjectLiteralExpression:
return createObjectExpression('', exp as ts.ObjectLiteralExpression);
}
}
condition.whenTrue = getWhenCond(exp.whenTrue);
condition.whenFalse = getWhenCond(exp.whenFalse);
return condition;
}
function createCallExpression(assignment: string, returnType: string, callExp: ts.CallExpression, returnFlag: string = ''): CallExpression {
const callExpression: CallExpression = {
kind: CsKinds.CallExpression,
@ -322,6 +361,7 @@ function convertVariableStatement(context: Context<ts.VariableStatement>) {
}
function convertExportAssignment(context: Context<ts.ExportAssignment>) {
const func = new CsFunction("ExportDefault", [], "UseComponentStyleResult", { statements: [] }, CsKinds.Method);
switch (context.node.expression.kind) {
case ts.SyntaxKind.CallExpression:
const callExp = context.node.expression as ts.CallExpression;
@ -352,9 +392,15 @@ function convertExportAssignment(context: Context<ts.ExportAssignment>) {
paramaters: parameters,
returnFlag: 'return '
};
const func = new CsFunction("ExportDefault", [], "UseComponentStyleResult", { statements: [callExpression] }, CsKinds.Method);
context.csBuilder.addFunction(func);
func.body.statements.push(callExpression);
break;
case ts.SyntaxKind.ArrowFunction:
const arrayFunc = createArrowFunction('', context.node.expression as ts.ArrowFunction);
func.body.statements = arrayFunc.body.statements;
break;
}
if (func.body.statements.length > 0) {
context.csBuilder.addFunction(func);
}
}

24
scripts/migrator/Util.ts
Просмотреть файл

@ -20,6 +20,11 @@ let htmlTag: { [key: string]: string } = {
'bdi': `["bdi"]`,
}
let operatorMap: { [key: string]: string } = {
'===': '==',
'==': '=='
}
export const spFieldName = '_skip_check_';
export const increaseIndex = (reset: boolean) => {
@ -169,15 +174,24 @@ export const castParameter = (value: string) => {
}
export const castFunName = (name: string) => {
let str = toPascalCase(name);
for (const match of str.matchAll(/(\w+)\.(\w+)/g)) {
if (match[2]) {
str = str.replace(match[2], toPascalCase(match[2]));
}
let str = name;
if (!name.startsWith('new')) {
str = toPascalCase(name);
}
// 方法连缀 a.b().c();
const matches = str.matchAll(/\.(\w+)\(*/g);
for (const m of matches) {
str = str.replace(m[1], toPascalCase(m[1]));
}
return str;
}
export const castOperator = (operator: string) => {
if (operatorMap[operator])
return operatorMap[operator];
else return operator;
}
export const unknown = () => {
const key = `Unknown${blockIndex}`;
if (!(key in emptyMap)) {