-
Notifications
You must be signed in to change notification settings - Fork 137
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: themeConfig type & form re-design
- Loading branch information
1 parent
cfcafd8
commit 9b0253d
Showing
7 changed files
with
251 additions
and
234 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
packages/graphic-walker/src/components/visualConfig/config-item.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
|
|
||
| export function ConfigItemContainer (props: { children?: React.ReactNode; className?: string }) { | ||
| return <div className="border border-gray-50 dark:border-gray-700 p-4 m-4 rounded-lg"> | ||
| {props.children} | ||
| </div> | ||
| } | ||
|
|
||
| export function ConfigItemContent (props: { children?: React.ReactNode }) { | ||
| return <div className="border-t border-gray-50 dark:border-gray-700 mt-4 pt-4"> | ||
| {props.children} | ||
| </div> | ||
| } | ||
|
|
||
| export function ConfigItemHeader (props: { children?: React.ReactNode }) { | ||
| return <div className="text-xs text-gray-500 dark:text-gray-400 font-medium"> | ||
| {props.children} | ||
| </div> | ||
| } | ||
|
|
||
| export function ConfigItemTitle (props: { children?: React.ReactNode }) { | ||
| return <h2 className="text-xl text-gray-800 dark:text-gray-50 font-medium"> | ||
| {props.children} | ||
| </h2> | ||
| } |
323 changes: 174 additions & 149 deletions
323
packages/graphic-walker/src/components/visualConfig/index.tsx
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,41 @@ | ||
| import { IThemeKey } from '../interfaces'; | ||
| import { builtInThemes, getColorPalette, getPrimaryColor } from '../vis/theme'; | ||
|
|
||
| const isPlainObject = (a): a is object => typeof a === 'object' && !(a instanceof Array); | ||
| type PlainObject = { [key: string]: any }; | ||
|
|
||
| const clone = <T>(a: T) => { | ||
| if (isPlainObject(a)) { | ||
| if (a === null) return a; | ||
| return Object.fromEntries(Object.keys(a).map((k) => [k, clone(a[k])])); | ||
| const isPlainObject = (obj: any): obj is PlainObject => { | ||
| return obj && typeof obj === 'object' && obj.constructor === Object; | ||
| }; | ||
|
|
||
| const clone = <T>(a: T): T => { | ||
| if (Array.isArray(a)) { | ||
| return a.map(clone) as any; | ||
| } else if (isPlainObject(a)) { | ||
| return { ...a }; | ||
| } | ||
| return a; | ||
| }; | ||
|
|
||
| const merge = (a: any, b: any) => { | ||
| const deepMerge = (a: PlainObject, b: PlainObject): PlainObject => { | ||
| if (isPlainObject(a) && isPlainObject(b)) { | ||
| const result = clone(a); | ||
| Object.keys(b).forEach((k) => { | ||
| result[k] = merge(result[k], b[k]); | ||
| const result = { ...a }; | ||
| Object.keys(b).forEach((key) => { | ||
| result[key] = isPlainObject(result[key]) ? deepMerge(result[key], b[key]) : b[key]; | ||
| }); | ||
| return result; | ||
| } | ||
| return b; | ||
| }; | ||
|
|
||
| const merge2 = (...a: any[]) => { | ||
| if (a.length === 0) return undefined; | ||
| if (a.length === 1) return a[0]; | ||
| let result = merge(a[0], a[1]); | ||
| for (let i = 2; i < a.length; i++) { | ||
| result = merge(result, a[i]); | ||
| } | ||
| return result; | ||
| const deepMergeAll = (...objects: PlainObject[]): PlainObject => { | ||
| return objects.reduce((acc, obj) => deepMerge(acc, obj), {}); | ||
| }; | ||
|
|
||
| export function getTheme(props: { themeKey?: IThemeKey; themeConfig?: any; primaryColor?: string; colorPalette?: string; mediaTheme: 'dark' | 'light' }) { | ||
| const { themeConfig, themeKey, mediaTheme, colorPalette, primaryColor } = props; | ||
| const presetConfig = themeConfig ?? builtInThemes[themeKey ?? 'vega']; | ||
| const colorConfig = primaryColor ? getPrimaryColor(primaryColor) : {}; | ||
| const paletteConfig = colorPalette ? getColorPalette(colorPalette) : {}; | ||
| const config = merge2(presetConfig, colorConfig, paletteConfig)?.[mediaTheme]; | ||
| const config = deepMergeAll(presetConfig, colorConfig, paletteConfig)?.[mediaTheme]; | ||
| return config; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9b0253dThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
graphic-walker – ./
graphic-walker-git-main-kanaries.vercel.app
graphic-walker.kanaries.net
graphic-walker-app.vercel.app
graphic-walker-kanaries.vercel.app