2020-05-07 21:53:34 +12:00
|
|
|
import { pipe } from "components/common/core"
|
2020-05-03 02:29:10 +12:00
|
|
|
import { filter, map, reduce, toPairs } from "lodash/fp"
|
2020-02-01 05:01:58 +13:00
|
|
|
|
2020-02-03 22:24:25 +13:00
|
|
|
const self = n => n
|
|
|
|
const join_with = delimiter => a => a.join(delimiter)
|
|
|
|
const empty_string_to_unset = s => (s.length ? s : "0")
|
2020-02-21 06:07:25 +13:00
|
|
|
const add_suffix_if_number = suffix => s => {
|
|
|
|
try {
|
|
|
|
if (isNaN(s) || isNaN(parseFloat(s))) return s
|
|
|
|
} catch (_) {
|
|
|
|
return s
|
|
|
|
}
|
|
|
|
return s + suffix
|
|
|
|
}
|
2020-02-01 05:01:58 +13:00
|
|
|
|
2020-02-03 22:24:25 +13:00
|
|
|
export const make_margin = values =>
|
|
|
|
pipe(values, [
|
|
|
|
map(empty_string_to_unset),
|
2020-02-21 06:07:25 +13:00
|
|
|
map(add_suffix_if_number("px")),
|
2020-02-03 22:24:25 +13:00
|
|
|
join_with(" "),
|
|
|
|
])
|
2020-02-01 05:01:58 +13:00
|
|
|
|
|
|
|
const css_map = {
|
2020-02-03 22:24:25 +13:00
|
|
|
templaterows: {
|
2020-02-21 06:07:25 +13:00
|
|
|
name: "grid-template-rows",
|
2020-02-03 22:24:25 +13:00
|
|
|
generate: self,
|
|
|
|
},
|
|
|
|
templatecolumns: {
|
2020-02-21 06:07:25 +13:00
|
|
|
name: "grid-template-columns",
|
2020-02-03 22:24:25 +13:00
|
|
|
generate: self,
|
|
|
|
},
|
2020-03-07 06:00:54 +13:00
|
|
|
align: {
|
|
|
|
name: "align-items",
|
|
|
|
generate: self,
|
|
|
|
},
|
|
|
|
justify: {
|
|
|
|
name: "justify-content",
|
|
|
|
generate: self,
|
|
|
|
},
|
|
|
|
direction: {
|
|
|
|
name: "flex-direction",
|
2020-03-28 05:58:32 +13:00
|
|
|
generate: self,
|
2020-03-07 06:00:54 +13:00
|
|
|
},
|
2020-02-03 22:24:25 +13:00
|
|
|
gridarea: {
|
|
|
|
name: "grid-area",
|
|
|
|
generate: make_margin,
|
|
|
|
},
|
|
|
|
gap: {
|
|
|
|
name: "grid-gap",
|
|
|
|
generate: n => `${n}px`,
|
|
|
|
},
|
|
|
|
columnstart: {
|
|
|
|
name: "grid-column-start",
|
|
|
|
generate: self,
|
|
|
|
},
|
|
|
|
columnend: {
|
|
|
|
name: "grid-column-end",
|
|
|
|
generate: self,
|
|
|
|
},
|
|
|
|
rowstart: {
|
|
|
|
name: "grid-row-start",
|
|
|
|
generate: self,
|
|
|
|
},
|
|
|
|
rowend: {
|
|
|
|
name: "grid-row-end",
|
|
|
|
generate: self,
|
|
|
|
},
|
|
|
|
padding: {
|
|
|
|
name: "padding",
|
|
|
|
generate: make_margin,
|
|
|
|
},
|
|
|
|
margin: {
|
|
|
|
name: "margin",
|
|
|
|
generate: make_margin,
|
|
|
|
},
|
|
|
|
zindex: {
|
|
|
|
name: "z-index",
|
|
|
|
generate: self,
|
|
|
|
},
|
2020-02-21 06:07:25 +13:00
|
|
|
height: {
|
|
|
|
name: "height",
|
|
|
|
generate: self,
|
|
|
|
},
|
|
|
|
width: {
|
|
|
|
name: "width",
|
|
|
|
generate: self,
|
|
|
|
},
|
2020-02-01 05:01:58 +13:00
|
|
|
}
|
|
|
|
|
2020-05-20 04:00:53 +12:00
|
|
|
//Only used here
|
2020-02-01 05:01:58 +13:00
|
|
|
export const generate_rule = ([name, values]) =>
|
2020-05-07 21:53:34 +12:00
|
|
|
`${css_map[name].name}: ${css_map[name].generate(values)};`
|
2020-02-01 05:01:58 +13:00
|
|
|
|
|
|
|
const handle_grid = (acc, [name, value]) => {
|
2020-02-03 22:24:25 +13:00
|
|
|
let tmp = []
|
2020-02-01 05:01:58 +13:00
|
|
|
|
2020-02-03 22:24:25 +13:00
|
|
|
if (name === "row" || name === "column") {
|
|
|
|
if (value[0]) tmp.push([`${name}start`, value[0]])
|
|
|
|
if (value[1]) tmp.push([`${name}end`, value[1]])
|
|
|
|
return acc.concat(tmp)
|
|
|
|
}
|
2020-02-01 05:01:58 +13:00
|
|
|
|
2020-02-03 22:24:25 +13:00
|
|
|
return acc.concat([[name, value]])
|
2020-02-01 05:01:58 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
const object_to_css_string = [
|
2020-02-03 22:24:25 +13:00
|
|
|
toPairs,
|
|
|
|
reduce(handle_grid, []),
|
|
|
|
filter(v => (Array.isArray(v[1]) ? v[1].some(s => s.length) : v[1].length)),
|
|
|
|
map(generate_rule),
|
|
|
|
join_with("\n"),
|
|
|
|
]
|
2020-02-01 05:01:58 +13:00
|
|
|
|
2020-05-20 04:00:53 +12:00
|
|
|
//USED BY generate_screen_css
|
2020-05-19 03:32:00 +12:00
|
|
|
export const generate_css = style => {
|
|
|
|
// let cssString = pipe(style, object_to_css_string)
|
|
|
|
let cssString = Object.entries(style).reduce((str, [key, value]) => {
|
|
|
|
//TODO Handle arrays and objects here also
|
|
|
|
if (typeof value === "string") {
|
|
|
|
if (value) {
|
|
|
|
return (str += `${key}: ${value};\n`)
|
|
|
|
}
|
|
|
|
} else if (Array.isArray(value)) {
|
2020-05-22 01:28:32 +12:00
|
|
|
return (str += `${key}: ${value
|
|
|
|
.map(v => (!/px$/.test(v) ? `${v}px` : v))
|
|
|
|
.join(" ")};\n`)
|
2020-05-19 03:32:00 +12:00
|
|
|
}
|
|
|
|
}, "")
|
2020-02-01 05:01:58 +13:00
|
|
|
|
2020-05-19 03:32:00 +12:00
|
|
|
return (cssString || "").trim()
|
2020-02-01 05:01:58 +13:00
|
|
|
}
|
|
|
|
|
2020-02-03 22:24:25 +13:00
|
|
|
const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
|
2020-02-01 05:01:58 +13:00
|
|
|
|
2020-05-20 04:00:53 +12:00
|
|
|
//USED IN MULTIPLE PLACES IN THE BUILDER STORE
|
2020-02-03 22:24:25 +13:00
|
|
|
export const generate_screen_css = component_array => {
|
|
|
|
let styles = ""
|
2020-05-23 02:30:29 +12:00
|
|
|
let emptyStyles = { normal: {}, hover: {}, active: {}, selected: {} }
|
2020-02-03 22:24:25 +13:00
|
|
|
for (let i = 0; i < component_array.length; i += 1) {
|
2020-05-23 02:30:29 +12:00
|
|
|
const { _styles, _id, _children, _component } = component_array[i]
|
|
|
|
// let [componentName] = _component.match(/[a-z]*$/)
|
|
|
|
debugger
|
2020-05-19 03:32:00 +12:00
|
|
|
const cssString = generate_css(_styles || emptyStyles) || ""
|
|
|
|
if (cssString) {
|
|
|
|
styles += apply_class(_id, "element", cssString)
|
|
|
|
}
|
2020-02-03 22:24:25 +13:00
|
|
|
if (_children && _children.length) {
|
|
|
|
styles += generate_screen_css(_children) + "\n"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return styles.trim()
|
2020-05-19 03:32:00 +12:00
|
|
|
}
|