From 7f8152cf5746a4230d2bace7e88aa482bb65b40c Mon Sep 17 00:00:00 2001 From: grewer Date: Wed, 13 Oct 2021 23:23:22 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=20style=20=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/config/demo-js.json | 5 ++++- scripts/config/demo-ts.json | 6 +++++- snapshots/demo-js/IconAlipay.js | 4 ++-- snapshots/demo-js/IconSetup.js | 4 ++-- snapshots/demo-js/IconUser.js | 4 ++-- snapshots/demo-ts/IconAlipay.tsx | 5 +++-- snapshots/demo-ts/IconSetup.tsx | 5 +++-- snapshots/demo-ts/IconUser.tsx | 5 +++-- src/libs/generateComponent.ts | 4 ++++ src/libs/getConfig.ts | 1 + src/libs/iconfont.json | 5 ++++- src/libs/replace.ts | 8 +++++++- src/templates/SingleIcon.js.template | 4 +--- src/templates/SingleIcon.tsx.template | 4 +--- 14 files changed, 42 insertions(+), 22 deletions(-) diff --git a/scripts/config/demo-js.json b/scripts/config/demo-js.json index ad0beac..c5eee77 100644 --- a/scripts/config/demo-js.json +++ b/scripts/config/demo-js.json @@ -4,5 +4,8 @@ "save_dir": "./snapshots/demo-js", "trim_icon_prefix": "icon", "unit": "px", - "default_icon_size": 14 + "default_icon_size": 14, + "default_style": { + "display": "inline-block" + } } diff --git a/scripts/config/demo-ts.json b/scripts/config/demo-ts.json index d72d023..a1394ed 100644 --- a/scripts/config/demo-ts.json +++ b/scripts/config/demo-ts.json @@ -4,5 +4,9 @@ "save_dir": "./snapshots/demo-ts", "trim_icon_prefix": "icon", "unit": "rem", - "default_icon_size": 16 + "default_icon_size": 16, + "default_style": { + "display": "block", + "color": "red" + } } diff --git a/snapshots/demo-js/IconAlipay.js b/snapshots/demo-js/IconAlipay.js index 170dd0b..9acbf9a 100644 --- a/snapshots/demo-js/IconAlipay.js +++ b/snapshots/demo-js/IconAlipay.js @@ -4,8 +4,8 @@ import React from 'react'; import { getIconColor } from './helper'; const DEFAULT_STYLE = { - display: 'block', -}; + "display": "inline-block" +} const IconAlipay = ({ size, color, style: _style, ...rest }) => { const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; diff --git a/snapshots/demo-js/IconSetup.js b/snapshots/demo-js/IconSetup.js index efe0e28..6e23dec 100644 --- a/snapshots/demo-js/IconSetup.js +++ b/snapshots/demo-js/IconSetup.js @@ -4,8 +4,8 @@ import React from 'react'; import { getIconColor } from './helper'; const DEFAULT_STYLE = { - display: 'block', -}; + "display": "inline-block" +} const IconSetup = ({ size, color, style: _style, ...rest }) => { const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; diff --git a/snapshots/demo-js/IconUser.js b/snapshots/demo-js/IconUser.js index b1b497f..77a477c 100644 --- a/snapshots/demo-js/IconUser.js +++ b/snapshots/demo-js/IconUser.js @@ -4,8 +4,8 @@ import React from 'react'; import { getIconColor } from './helper'; const DEFAULT_STYLE = { - display: 'block', -}; + "display": "inline-block" +} const IconUser = ({ size, color, style: _style, ...rest }) => { const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; diff --git a/snapshots/demo-ts/IconAlipay.tsx b/snapshots/demo-ts/IconAlipay.tsx index 6a9a39e..721b2bd 100644 --- a/snapshots/demo-ts/IconAlipay.tsx +++ b/snapshots/demo-ts/IconAlipay.tsx @@ -10,8 +10,9 @@ interface Props extends Omit, 'color'> { } const DEFAULT_STYLE: CSSProperties = { - display: 'block', -}; + "display": "block", + "color": "red" +} const IconAlipay: FunctionComponent = ({ size, color, style: _style, ...rest }) => { const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; diff --git a/snapshots/demo-ts/IconSetup.tsx b/snapshots/demo-ts/IconSetup.tsx index 86d0f99..0f1b8ed 100644 --- a/snapshots/demo-ts/IconSetup.tsx +++ b/snapshots/demo-ts/IconSetup.tsx @@ -10,8 +10,9 @@ interface Props extends Omit, 'color'> { } const DEFAULT_STYLE: CSSProperties = { - display: 'block', -}; + "display": "block", + "color": "red" +} const IconSetup: FunctionComponent = ({ size, color, style: _style, ...rest }) => { const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; diff --git a/snapshots/demo-ts/IconUser.tsx b/snapshots/demo-ts/IconUser.tsx index 2ba6396..627ae7a 100644 --- a/snapshots/demo-ts/IconUser.tsx +++ b/snapshots/demo-ts/IconUser.tsx @@ -10,8 +10,9 @@ interface Props extends Omit, 'color'> { } const DEFAULT_STYLE: CSSProperties = { - display: 'block', -}; + "display": "block", + "color": "red" +} const IconUser: FunctionComponent = ({ size, color, style: _style, ...rest }) => { const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; diff --git a/src/libs/generateComponent.ts b/src/libs/generateComponent.ts index 0782fd2..d33f4b0 100644 --- a/src/libs/generateComponent.ts +++ b/src/libs/generateComponent.ts @@ -10,6 +10,7 @@ import { getTemplate } from './getTemplate'; import { replaceCases, replaceComponentName, + replaceDefaultStyle, replaceExports, replaceImports, replaceNames, @@ -31,6 +32,8 @@ export const generateComponent = (data: XmlData, config: Config) => { const jsExtension = config.use_typescript ? '.ts' : '.js'; let cases: string = ''; + console.log('debug', config) + mkdirp.sync(saveDir); glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file)); @@ -62,6 +65,7 @@ export const generateComponent = (data: XmlData, config: Config) => { singleFile = replaceComponentName(singleFile, componentName); singleFile = replaceSingleIconContent(singleFile, generateCase(item, 4)); singleFile = replaceSizeUnit(singleFile, config.unit); + singleFile = replaceDefaultStyle(singleFile, config.default_style); fs.writeFileSync(path.join(saveDir, componentName + jsxExtension), singleFile); diff --git a/src/libs/getConfig.ts b/src/libs/getConfig.ts index 7fa0eca..03d3b75 100644 --- a/src/libs/getConfig.ts +++ b/src/libs/getConfig.ts @@ -10,6 +10,7 @@ export interface Config { trim_icon_prefix: string; unit: string; default_icon_size: number; + default_style: Record; } let cacheConfig: Config; diff --git a/src/libs/iconfont.json b/src/libs/iconfont.json index 67c3a49..4700cf7 100644 --- a/src/libs/iconfont.json +++ b/src/libs/iconfont.json @@ -4,5 +4,8 @@ "save_dir": "./src/components/iconfont", "trim_icon_prefix": "icon", "unit": "px", - "default_icon_size": 18 + "default_icon_size": 18, + "default_style": { + "display": "block" + } } diff --git a/src/libs/replace.ts b/src/libs/replace.ts index 95b5009..cabd379 100644 --- a/src/libs/replace.ts +++ b/src/libs/replace.ts @@ -39,4 +39,10 @@ export const replaceExports = (content: string, exports: string[]) => { return content.replace(/#exports#/g, exports.map( (item) => `export { default as ${item} } from './${item}';`).join('\n') ); -} \ No newline at end of file +} + +export const replaceDefaultStyle = (content: string, defaultStyle: Record) => { + return content.replace(/#defaultStyle#/g, JSON.stringify(defaultStyle, null, " ") || `{ + "display": "block", + }`) +}; diff --git a/src/templates/SingleIcon.js.template b/src/templates/SingleIcon.js.template index 559fd21..4bf4a25 100644 --- a/src/templates/SingleIcon.js.template +++ b/src/templates/SingleIcon.js.template @@ -3,9 +3,7 @@ import React from 'react'; import { getIconColor } from './helper'; -const DEFAULT_STYLE = { - display: 'block', -}; +const DEFAULT_STYLE = #defaultStyle# const #componentName# = ({ size, color, style: _style, ...rest }) => { const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; diff --git a/src/templates/SingleIcon.tsx.template b/src/templates/SingleIcon.tsx.template index e86fd17..e887576 100644 --- a/src/templates/SingleIcon.tsx.template +++ b/src/templates/SingleIcon.tsx.template @@ -9,9 +9,7 @@ interface Props extends Omit, 'color'> { color?: string | string[]; } -const DEFAULT_STYLE: CSSProperties = { - display: 'block', -}; +const DEFAULT_STYLE: CSSProperties = #defaultStyle# const #componentName#: FunctionComponent = ({ size, color, style: _style, ...rest }) => { const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; From 8188acba142eb6a53c73b7cf41e7f0225a694d7d Mon Sep 17 00:00:00 2001 From: grewer Date: Wed, 13 Oct 2021 23:39:29 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E5=9B=9E=E9=80=80=E8=87=B3?= =?UTF-8?q?=E6=A0=87=E5=87=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/config/demo-ts.json | 3 +-- snapshots/demo-ts/IconAlipay.tsx | 3 +-- snapshots/demo-ts/IconSetup.tsx | 3 +-- snapshots/demo-ts/IconUser.tsx | 3 +-- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/scripts/config/demo-ts.json b/scripts/config/demo-ts.json index a1394ed..16f8b4a 100644 --- a/scripts/config/demo-ts.json +++ b/scripts/config/demo-ts.json @@ -6,7 +6,6 @@ "unit": "rem", "default_icon_size": 16, "default_style": { - "display": "block", - "color": "red" + "display": "block" } } diff --git a/snapshots/demo-ts/IconAlipay.tsx b/snapshots/demo-ts/IconAlipay.tsx index 721b2bd..755cbf5 100644 --- a/snapshots/demo-ts/IconAlipay.tsx +++ b/snapshots/demo-ts/IconAlipay.tsx @@ -10,8 +10,7 @@ interface Props extends Omit, 'color'> { } const DEFAULT_STYLE: CSSProperties = { - "display": "block", - "color": "red" + "display": "block" } const IconAlipay: FunctionComponent = ({ size, color, style: _style, ...rest }) => { diff --git a/snapshots/demo-ts/IconSetup.tsx b/snapshots/demo-ts/IconSetup.tsx index 0f1b8ed..65dbe6d 100644 --- a/snapshots/demo-ts/IconSetup.tsx +++ b/snapshots/demo-ts/IconSetup.tsx @@ -10,8 +10,7 @@ interface Props extends Omit, 'color'> { } const DEFAULT_STYLE: CSSProperties = { - "display": "block", - "color": "red" + "display": "block" } const IconSetup: FunctionComponent = ({ size, color, style: _style, ...rest }) => { diff --git a/snapshots/demo-ts/IconUser.tsx b/snapshots/demo-ts/IconUser.tsx index 627ae7a..a11e152 100644 --- a/snapshots/demo-ts/IconUser.tsx +++ b/snapshots/demo-ts/IconUser.tsx @@ -10,8 +10,7 @@ interface Props extends Omit, 'color'> { } const DEFAULT_STYLE: CSSProperties = { - "display": "block", - "color": "red" + "display": "block" } const IconUser: FunctionComponent = ({ size, color, style: _style, ...rest }) => { From eb69f3154b55dd05718a77c36c00ae585ef3dc9a Mon Sep 17 00:00:00 2001 From: grewer Date: Wed, 13 Oct 2021 23:41:18 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=E5=8E=BB=E9=99=A4=20console?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/libs/generateComponent.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/generateComponent.ts b/src/libs/generateComponent.ts index d33f4b0..a45b418 100644 --- a/src/libs/generateComponent.ts +++ b/src/libs/generateComponent.ts @@ -32,7 +32,6 @@ export const generateComponent = (data: XmlData, config: Config) => { const jsExtension = config.use_typescript ? '.ts' : '.js'; let cases: string = ''; - console.log('debug', config) mkdirp.sync(saveDir); glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file));