forked from tsai/budibase
mike12345567
6 years ago
16 changed files with 75 additions and 203 deletions
@ -1,43 +0,0 @@ |
|||
export const generate_screen_css = component_arr => { |
|||
let styles = "" |
|||
for (const { _styles, _id, _children, _component } of component_arr) { |
|||
let [componentName] = _component.match(/[a-z]*$/) |
|||
Object.keys(_styles).forEach(selector => { |
|||
const cssString = generate_css(_styles[selector]) |
|||
if (cssString) { |
|||
styles += apply_class(_id, componentName, cssString, selector) |
|||
} |
|||
}) |
|||
if (_children && _children.length) { |
|||
styles += generate_screen_css(_children) + "\n" |
|||
} |
|||
} |
|||
return styles.trim() |
|||
} |
|||
|
|||
export const generate_css = style => { |
|||
let cssString = Object.entries(style).reduce((str, [key, value]) => { |
|||
if (typeof value === "string") { |
|||
if (value) { |
|||
return (str += `${key}: ${value};\n`) |
|||
} |
|||
} else if (Array.isArray(value)) { |
|||
if (value.length > 0 && !value.every(v => v === "")) { |
|||
return (str += `${key}: ${value.join(" ")};\n`) |
|||
} |
|||
} |
|||
|
|||
return str |
|||
}, "") |
|||
|
|||
return (cssString || "").trim() |
|||
} |
|||
|
|||
export const apply_class = (id, name = "element", styles, selector) => { |
|||
if (selector === "normal") { |
|||
return `.${name}-${id} {\n${styles}\n}` |
|||
} else { |
|||
let sel = selector === "selected" ? "::selection" : `:${selector}` |
|||
return `.${name}-${id}${sel} {\n${styles}\n}` |
|||
} |
|||
} |
|||
@ -1,4 +1,4 @@ |
|||
<script> |
|||
import { params } from "@sveltech/routify" |
|||
store.actions.pages.select($params.page) |
|||
store.actions.layouts.select($params.page) |
|||
</script> |
|||
|
|||
@ -1,51 +0,0 @@ |
|||
import { |
|||
generate_css, |
|||
generate_screen_css, |
|||
} from "../src/builderStore/generate_css.js" |
|||
|
|||
describe("generate_css", () => { |
|||
|
|||
|
|||
test("Check how array styles are output", () => { |
|||
expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;") |
|||
}) |
|||
|
|||
test("Check handling of an array with empty string values", () => { |
|||
expect(generate_css({ padding: ["", "", "", ""] })).toBe("") |
|||
}) |
|||
|
|||
test("Check handling of an empty array", () => { |
|||
expect(generate_css({ margin: [] })).toBe("") |
|||
}) |
|||
|
|||
test("Check handling of valid font property", () => { |
|||
expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;") |
|||
}) |
|||
}) |
|||
|
|||
|
|||
describe("generate_screen_css", () => { |
|||
const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } } |
|||
|
|||
test("Test generation of normal css styles", () => { |
|||
expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}") |
|||
}) |
|||
|
|||
const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } } |
|||
|
|||
test("Test generation of hover css styles", () => { |
|||
expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}") |
|||
}) |
|||
|
|||
const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } } |
|||
|
|||
test("Test generation of selection css styles", () => { |
|||
expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}") |
|||
}) |
|||
|
|||
const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } } |
|||
|
|||
test.only("Testing handling of empty component styles", () => { |
|||
expect(generate_screen_css([emptyComponent])).toBe("") |
|||
}) |
|||
}) |
|||
Loading…
Reference in new issue