1 | // import React from 'react'
|
2 |
|
3 | /**
|
4 | * 生成 StyleMapContext
|
5 | */
|
6 | // export const createStyleMapContext = () => {
|
7 | // return React.createContext({})
|
8 | // }
|
9 |
|
10 | // export let StyleMapContext = createStyleMapContext()
|
11 |
|
12 | /**
|
13 | * 将样式表写入到 head 标签内
|
14 | * @param {Object} styleMap
|
15 | */
|
16 | export const checkAndWriteIntoHead = (styleMap = {}) => {
|
17 | if (typeof styleMap !== 'object') return
|
18 | Object.keys(styleMap).forEach(wrapper => {
|
19 | const style = styleMap[wrapper]
|
20 | if (style.count > 0) {
|
21 | // 配置样式
|
22 | if (!document.getElementById(wrapper)) {
|
23 | const styleTag = document.createElement('style')
|
24 | styleTag.innerHTML = style.css
|
25 | styleTag.setAttribute('id', wrapper)
|
26 | document.getElementsByTagName('head')[0].appendChild(styleTag)
|
27 | }
|
28 | } else {
|
29 | // 移除样式
|
30 | if (document.getElementById(wrapper)) {
|
31 | document.getElementById(wrapper).remove()
|
32 | }
|
33 | }
|
34 | })
|
35 | }
|
36 |
|
37 | // const getStyleMap = (passedMap) => {
|
38 | // if (__CLIENT__)
|
39 | // return passedMap
|
40 | // if (typeof __KOOT_SSR__ === 'object') {
|
41 | // // console.log({ LocaleId })
|
42 | // return __KOOT_SSR__.styleMap.get(LocaleId)
|
43 | // }
|
44 | // return passedMap
|
45 | // }
|
46 |
|
47 | /**
|
48 | * 追加样式
|
49 | * @param {Object} styleMap
|
50 | * @param {Object|Array} style
|
51 | */
|
52 | export const append = (styleMap = {}, style) => {
|
53 | // const styleMap = getStyleMap(passedMap)
|
54 |
|
55 | if (Array.isArray(style))
|
56 | return style.forEach(theStyle => append(styleMap, theStyle))
|
57 |
|
58 | if (typeof style !== 'object') return
|
59 |
|
60 | if (!styleMap[style.wrapper]) {
|
61 | styleMap[style.wrapper] = {
|
62 | css: style.css,
|
63 | count: 1
|
64 | }
|
65 | } else {
|
66 | styleMap[style.wrapper].count++
|
67 | }
|
68 |
|
69 | if (__CLIENT__) {
|
70 | checkAndWriteIntoHead(styleMap)
|
71 | }
|
72 | }
|
73 |
|
74 | /**
|
75 | * 移除样式
|
76 | * @param {Object} styleMap
|
77 | * @param {*} style
|
78 | */
|
79 | export const remove = (styleMap = {}, style) => {
|
80 | // const styleMap = getStyleMap(passedMap)
|
81 |
|
82 | if (Array.isArray(style))
|
83 | return style.forEach(theStyle => remove(theStyle))
|
84 |
|
85 | if (typeof style !== 'object') return
|
86 |
|
87 | if (styleMap[style.wrapper]) {
|
88 | styleMap[style.wrapper].count--
|
89 | }
|
90 | }
|
91 |
|
92 | // export const idDivStylesContainer = '__KOOT_ISOMORPHIC_STYLES_CONTAINER__'
|
93 |
|
94 | // /**
|
95 | // * 分析 HTML 代码,解析已有样式表,将其从 HTML 代码中移除,并返回可以直接写入到 head 标签内的样式表代码
|
96 | // * @param {String} html
|
97 | // * @returns {String} htmlStyles
|
98 | // */
|
99 | // export const parseHtmlForStyles = (html) => {
|
100 | // const matches = html.match(new RegExp(`<div id="${idDivStylesContainer}">(.*?)</div>`, 'm'))
|
101 | // if (
|
102 | // !matches ||
|
103 | // typeof matches !== 'object' ||
|
104 | // typeof matches.index === 'undefined' ||
|
105 | // typeof matches[1] === 'undefined'
|
106 | // )
|
107 | // return {
|
108 | // html,
|
109 | // htmlStyles: ''
|
110 | // }
|
111 | // return {
|
112 | // html: html.substr(0, matches.index),
|
113 | // htmlStyles: matches[1]
|
114 | // }
|
115 | // }
|
116 |
|
117 | // /**
|
118 | // * React 组件: 样式表内容容器
|
119 | // */
|
120 | // export class StylesContainer extends React.Component {
|
121 | // static contextType = StyleMapContext
|
122 | // render() {
|
123 | // return (
|
124 | // <div
|
125 | // id={idDivStylesContainer}
|
126 | // dangerouslySetInnerHTML={{
|
127 | // __html: Object.keys(this.context)
|
128 | // .filter(id => !!this.context[id].css)
|
129 | // .map(id => `<style id="${id}">${this.context[id].css}</style>`)
|
130 | // .join('')
|
131 | // }}
|
132 | // />
|
133 | // )
|
134 | // }
|
135 | // }
|