diff --git a/.gitignore b/.gitignore index 8ca35990..498bf6bf 100644 --- a/.gitignore +++ b/.gitignore @@ -26,4 +26,5 @@ lib coverage yarn.lock /es/ -package-lock.json \ No newline at end of file +package-lock.json +.doc \ No newline at end of file diff --git a/examples/styleChecker.tsx b/examples/styleChecker.tsx new file mode 100644 index 00000000..549f31b9 --- /dev/null +++ b/examples/styleChecker.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { isStyleSupport, isStyleValueSupport } from '../src/Dom/styleChecker'; + +export default () => { + const supportFlex = isStyleSupport('flex'); + const supportSticky = isStyleValueSupport('position', 'sticky'); + const supportNotExistValue = isStyleValueSupport('position', 'sticky2'); + + return ( + + ); +}; diff --git a/now.json b/now.json new file mode 100644 index 00000000..8eab5ca7 --- /dev/null +++ b/now.json @@ -0,0 +1,11 @@ +{ + "version": 2, + "name": "rc-util", + "builds": [ + { + "src": "package.json", + "use": "@now/static-build", + "config": { "distDir": ".doc" } + } + ] +} diff --git a/package.json b/package.json index 082aea87..71e4ba14 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "compile": "father build", "prepublishOnly": "npm run compile && np --yolo --no-publish", "test": "father test", - "coverage": "father test --coverage && cat ./coverage/lcov.info | coveralls" + "coverage": "father test --coverage && cat ./coverage/lcov.info | coveralls", + "now-build": "father doc build --storybook" }, "devDependencies": { "@types/enzyme": "^3.10.5", diff --git a/src/Dom/styleChecker.ts b/src/Dom/styleChecker.ts new file mode 100644 index 00000000..ab63f4fd --- /dev/null +++ b/src/Dom/styleChecker.ts @@ -0,0 +1,22 @@ +import canUseDom from './canUseDom'; + +export const isStyleSupport = (styleName: string | string[]): boolean => { + if (canUseDom() && window.document.documentElement) { + const styleNameList = Array.isArray(styleName) ? styleName : [styleName]; + const { documentElement } = window.document; + + return styleNameList.some(name => name in documentElement.style); + } + return false; +}; + +export const isStyleValueSupport = (styleName: string, value: any) => { + if (!isStyleSupport(styleName)) { + return false; + } + + const ele = document.createElement('div'); + const origin = ele.style[styleName]; + ele.style[styleName] = value; + return ele.style[styleName] !== origin; +}; diff --git a/tests/style.test.js b/tests/style.test.js new file mode 100644 index 00000000..ba345325 --- /dev/null +++ b/tests/style.test.js @@ -0,0 +1,8 @@ +import { isStyleSupport } from '../src/Dom/styleChecker'; + +describe('StyleChecker', () => { + it('isStyleSupport', () => { + expect(isStyleSupport('position')).toBeTruthy(); + expect(isStyleSupport('not-exist')).toBeFalsy(); + }); +});