Skip to content

Commit 3ce2cf0

Browse files
author
梁柱
committed
fix-mobile-active
1 parent 446e60e commit 3ce2cf0

10 files changed

+365
-182
lines changed

README.md

+15-19
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,23 @@ $ npm install --save react-dom-pseudo
1414

1515
**react-dom-pseudo** 支持以下伪类:
1616

17-
| Props | 模拟伪类 | 说明 | 默认值 | 必须 |
18-
| ------------ | -------- | ------------------------------------------- | --------- | ---- |
19-
| merge | | 是否使用 style 和 其他状态的 style 进行合并 | true ||
20-
| disable | | 是否取消事件监听 | false ||
21-
| style | | 默认样式 | undefined ||
22-
| linkStyle | :link | 未被点击之前的样式 | undefined ||
23-
| visitedStyle | :visited | 被点击过的样式 | undefined ||
24-
| focusStyle | :focus | input 等类型元素 onFocus 时的样式 | undefined ||
25-
| hoverStyle | :hover | 鼠标移入时显示的样式 | undefined ||
26-
| activeStyle | :active | 鼠标或者触屏点击时的样式 | undefined ||
27-
| disableStyle | | 当取消事件监听时的样式 | undefined ||
28-
| alwayStyle | | 会和所有样式合并,并且覆盖重复的样式属性 | undefined ||
17+
| Props | 模拟伪类 | 说明 | 默认值 | 必须 |
18+
| ----------------- | -------- | ------------------------------------------- | --------- | ---- |
19+
| merge | | 是否使用 style 和 其他状态的 style 进行合并 | true ||
20+
| disable | | 是否取消事件监听 | false ||
21+
| style | | 默认样式 | undefined ||
22+
| mobileStyle | | 移动端情况下,覆盖默认样式 | undefined ||
23+
| visitedStyle | :visited | 被点击过的样式 | undefined ||
24+
| focusStyle | :focus | input 等类型元素 onFocus 时的样式 | undefined ||
25+
| hoverStyle | :hover | 鼠标移入时显示的样式 | undefined ||
26+
| activeStyle | :active | 鼠标或者触屏点击时的样式 | undefined ||
27+
| activeMobileStyle | :active | 移动端情况下,鼠标或者触屏点击时的样式 | undefined ||
28+
| disableStyle | | 当取消事件监听时的样式 | undefined ||
29+
| alwayStyle | | 会和所有样式合并,并且覆盖重复的样式属性 | undefined ||
2930

3031
他们会根据事件的触发,和 `style` 合并返回, 如 `{...style, ...activeStyle}`, 只有存在的样式会进行合并
3132

32-
样式的组合规则: `{...style, ...linkStyle, ...eventStyle, ...disableStyle, ...alwayStyle}`
33+
样式的组合规则: `{...style, ...eventStyle, ...disableStyle, ...alwayStyle}`
3334

3435
## 使用
3536

@@ -40,11 +41,7 @@ export default () => {
4041
return (
4142
<div>
4243
<div>example:</div>
43-
<Pseudo
44-
style={sheet.input}
45-
hoverStyle={sheet.inputHover}
46-
focusStyle={sheet.inputFocus}
47-
>
44+
<Pseudo style={sheet.input} hoverStyle={sheet.inputHover} focusStyle={sheet.inputFocus}>
4845
{events => <input {...events} />}
4946
</Pseudo>
5047
</div>
@@ -112,7 +109,6 @@ class Input extend React.Component {
112109

113110
一切看起来不错,但是它**不利于扩展**, 例如:我们如果需要给一个 `div``SignButton` 也添加以上功能,我们需要再写一个以上组件
114111

115-
116112
当然,我们也可以使用 HOC 的方式, 编写一个 `withHover` 的组件, 即便如此,也需要在使用之前创建一个新的组件:
117113

118114
```js

config/libPaths.js

-125
This file was deleted.

config/paths.lib.js

+210
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
/**
2+
* 在项目根路径创建一个 .libconfig.js 文件
3+
* 运行 node scripts/build.lib.js
4+
* 即可对路径中的文件逐个进行编译
5+
*/
6+
7+
/* .libconfig.js 文件例子
8+
module.exports = {
9+
lib: ['./src/components', './src/assets', './src/units'],
10+
dontLib: ['./src/units/paths.js'],
11+
};
12+
*/
13+
14+
const path = require('path');
15+
const fs = require('fs-extra');
16+
const url = require('url');
17+
const rootPath = path.resolve(__dirname, '../');
18+
19+
let libConfig = { lib: {}, dontLib: {} };
20+
21+
const libConfigPath = path.resolve(rootPath, '.libconfig.js');
22+
if (fs.existsSync(libConfigPath)) {
23+
let tempLib = require(libConfigPath);
24+
if (tempLib.lib) {
25+
for (let i = 0; i < tempLib.lib.length; i++) {
26+
libConfig.lib[path.resolve(rootPath, tempLib.lib[i])] = true;
27+
}
28+
}
29+
if (tempLib.dontLib) {
30+
for (let i = 0; i < tempLib.dontLib.length; i++) {
31+
libConfig.dontLib[path.resolve(rootPath, tempLib.dontLib[i])] = true;
32+
}
33+
}
34+
}
35+
36+
// 递归 src/, 如果有 *.lib.js 的文件就添加到lib编译中, 请确保 *.lib.js 不要重名
37+
// index.lib.js 为库的默认main文件
38+
// 如果文件夹包含 .lib 就会把文件夹拷贝到输出目录
39+
// 读取根目录的 .libconfig.js 文件,文件返回一个数组,数组的路径如果满足以上规则也会进行编译
40+
41+
const entryList = {};
42+
const copyList = {};
43+
function loadAllEnters(rootP) {
44+
const ignoreFiles = {
45+
'.DS_Store': true,
46+
};
47+
function loadFiles(p, isReal = false) {
48+
const libList = fs.readdirSync(p);
49+
for (let i = 0; i < libList.length; i++) {
50+
const v = libList[i];
51+
const vp = p + '/' + v;
52+
if (ignoreFiles[v]) {
53+
continue;
54+
}
55+
56+
const stat = fs.statSync(vp);
57+
if (stat && stat.isDirectory()) {
58+
// 如果匹配 isReal === 0, 所有子层级不进行抽离
59+
if (isReal === 0) {
60+
loadFiles(vp, 0);
61+
}
62+
// 如果匹配 isReal === * 所有子层级都抽离
63+
else if (isReal === '*') {
64+
loadFiles(vp, '*');
65+
}
66+
// 如果匹配 dontLib, 不进行抽离
67+
else if (libConfig.dontLib[vp + '/*']) {
68+
loadFiles(vp, 0);
69+
} else if (libConfig.dontLib[vp]) {
70+
loadFiles(vp, false);
71+
}
72+
// 如果匹配 lib, 进行抽离
73+
else if (libConfig.lib[vp + '/*']) {
74+
loadFiles(vp, '*');
75+
} else if (libConfig.lib[vp]) {
76+
loadFiles(vp, true);
77+
}
78+
// 如果文件夹名字包含 .lib 进行抽离
79+
else if (v.search(/\.lib/) > 0) {
80+
loadFiles(vp, true);
81+
}
82+
// 以上不满足,此文件夹不进行抽离
83+
else {
84+
loadFiles(vp, false);
85+
}
86+
} else {
87+
// 如果isReal,并且 dotLib 中没有这个文件, 不管文件名有没有包含 .lib 都进行抽离文件
88+
if (isReal && !libConfig.dontLib[vp]) {
89+
if (v.search(/\.js/) > -1) {
90+
const vlist = v.split('.');
91+
entryList[vlist[0]] = vp;
92+
} else if (v.search(/\.d\.ts/) > -1) {
93+
const vlist = v.split('.');
94+
copyList[vlist[0] + '.d.ts'] = vp;
95+
} else if (v.search(/\.less/) > -1) {
96+
const vlist = v.split('.');
97+
copyList[vlist[0] + '.less'] = vp;
98+
} else if (v.search(/\.scss/) > -1) {
99+
const vlist = v.split('.');
100+
copyList[vlist[0] + '.scss'] = vp;
101+
} else if (v.search(/\.css/) > -1) {
102+
const vlist = v.split('.');
103+
copyList[vlist[0] + '.css'] = vp;
104+
}
105+
}
106+
// 如果以上条件不满足,但是文件名中包含 .lib 进行抽离
107+
else {
108+
if (v.search(/\.lib\.js/) > -1) {
109+
const vlist = v.split('.');
110+
entryList[vlist[0]] = vp;
111+
} else if (v.search(/\.lib\.d\.ts/) > -1) {
112+
const vlist = v.split('.');
113+
copyList[vlist[0] + '.d.ts'] = vp;
114+
} else if (v.search(/\.lib\.less/) > -1) {
115+
const vlist = v.split('.');
116+
copyList[vlist[0] + '.less'] = vp;
117+
} else if (v.search(/\.lib\.scss/) > -1) {
118+
const vlist = v.split('.');
119+
copyList[vlist[0] + '.scss'] = vp;
120+
} else if (v.search(/\.lib\.css/) > -1) {
121+
const vlist = v.split('.');
122+
copyList[vlist[0] + '.css'] = vp;
123+
}
124+
}
125+
}
126+
}
127+
}
128+
loadFiles(rootP);
129+
}
130+
loadAllEnters(path.resolve(__dirname, '../src'));
131+
132+
// Make sure any symlinks in the project folder are resolved:
133+
// https://github.com/facebook/create-react-app/issues/637
134+
const appDirectory = fs.realpathSync(process.cwd());
135+
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
136+
137+
const envPublicUrl = process.env.PUBLIC_URL;
138+
139+
function ensureSlash(inputPath, needsSlash) {
140+
const hasSlash = inputPath.endsWith('/');
141+
if (hasSlash && !needsSlash) {
142+
return inputPath.substr(0, inputPath.length - 1);
143+
} else if (!hasSlash && needsSlash) {
144+
return `${inputPath}/`;
145+
} else {
146+
return inputPath;
147+
}
148+
}
149+
150+
const getPublicUrl = appPackageJson => envPublicUrl || require(appPackageJson).homepage;
151+
152+
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
153+
// "public path" at which the app is served.
154+
// Webpack needs to know it to put the right <script> hrefs into HTML even in
155+
// single-page apps that may serve index.html for nested URLs like /todos/42.
156+
// We can't use a relative path in HTML because we don't want to load something
157+
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
158+
function getServedPath(appPackageJson) {
159+
const publicUrl = getPublicUrl(appPackageJson);
160+
const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
161+
return ensureSlash(servedUrl, true);
162+
}
163+
164+
const moduleFileExtensions = [
165+
'web.mjs',
166+
'mjs',
167+
'web.js',
168+
'js',
169+
'web.ts',
170+
'ts',
171+
'web.tsx',
172+
'tsx',
173+
'json',
174+
'web.jsx',
175+
'jsx',
176+
];
177+
178+
// Resolve file paths in the same order as webpack
179+
const resolveModule = (resolveFn, filePath) => {
180+
const extension = moduleFileExtensions.find(extension => fs.existsSync(resolveFn(`${filePath}.${extension}`)));
181+
182+
if (extension) {
183+
return resolveFn(`${filePath}.${extension}`);
184+
}
185+
186+
return resolveFn(`${filePath}.js`);
187+
};
188+
189+
// config after eject: we're in ./config/
190+
module.exports = {
191+
entryList,
192+
copyList,
193+
dotenv: resolveApp('.env'),
194+
appPath: resolveApp('.'),
195+
appBuild: resolveApp('dist'),
196+
appPublic: resolveApp('public'),
197+
appHtml: resolveApp('public/index.html'),
198+
appIndexJs: resolveModule(resolveApp, 'src/index'),
199+
appPackageJson: resolveApp('package.json'),
200+
appSrc: resolveApp('src'),
201+
appTsConfig: resolveApp('tsconfig.json'),
202+
yarnLockFile: resolveApp('yarn.lock'),
203+
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
204+
proxySetup: resolveApp('src/setupProxy.js'),
205+
appNodeModules: resolveApp('node_modules'),
206+
publicUrl: getPublicUrl(resolveApp('package.json')),
207+
servedPath: getServedPath(resolveApp('package.json')),
208+
};
209+
210+
module.exports.moduleFileExtensions = moduleFileExtensions;

0 commit comments

Comments
 (0)