Add Reason React + Checkbox in Reason (#86)
This commit is contained in:
Yannis Petitot
+2
-1
@@ -3,4 +3,5 @@ build
|
||||
node_modules
|
||||
assets
|
||||
config
|
||||
scripts
|
||||
scripts
|
||||
**/*.bs.js
|
||||
@@ -24,6 +24,9 @@ npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
lib
|
||||
.merlin
|
||||
|
||||
todo
|
||||
conf.json
|
||||
src/Bot/conf.js
|
||||
|
||||
Vendored
+2
-1
@@ -4,6 +4,7 @@
|
||||
"recommendations": [
|
||||
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
|
||||
"esbenp.prettier-vscode",
|
||||
"dbaeumer.vscode-eslint"
|
||||
"dbaeumer.vscode-eslint",
|
||||
"jaredly.reason-vscode"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "beatconnect_client",
|
||||
"reason": {
|
||||
"react-jsx": 3
|
||||
},
|
||||
"sources": [
|
||||
{
|
||||
"dir": "src",
|
||||
"subdirs": true
|
||||
}
|
||||
],
|
||||
"package-specs": [
|
||||
{
|
||||
"module": "es6",
|
||||
"in-source": true
|
||||
}
|
||||
],
|
||||
"suffix": ".bs.js",
|
||||
"namespace": true,
|
||||
"bs-dependencies": ["reason-react", "bs-css"],
|
||||
"refmt": 3,
|
||||
"gentypeconfig": {
|
||||
"language": "untyped",
|
||||
"shims": {
|
||||
"ReasonReact": "ReactShim"
|
||||
}
|
||||
}
|
||||
}
|
||||
Generated
+142
-2
@@ -931,6 +931,64 @@
|
||||
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz",
|
||||
"integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA=="
|
||||
},
|
||||
"@emotion/cache": {
|
||||
"version": "10.0.19",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.19.tgz",
|
||||
"integrity": "sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==",
|
||||
"requires": {
|
||||
"@emotion/sheet": "0.9.3",
|
||||
"@emotion/stylis": "0.8.4",
|
||||
"@emotion/utils": "0.11.2",
|
||||
"@emotion/weak-memoize": "0.2.4"
|
||||
}
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz",
|
||||
"integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw=="
|
||||
},
|
||||
"@emotion/memoize": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz",
|
||||
"integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow=="
|
||||
},
|
||||
"@emotion/serialize": {
|
||||
"version": "0.11.14",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz",
|
||||
"integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==",
|
||||
"requires": {
|
||||
"@emotion/hash": "0.7.3",
|
||||
"@emotion/memoize": "0.7.3",
|
||||
"@emotion/unitless": "0.7.4",
|
||||
"@emotion/utils": "0.11.2",
|
||||
"csstype": "^2.5.7"
|
||||
}
|
||||
},
|
||||
"@emotion/sheet": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz",
|
||||
"integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A=="
|
||||
},
|
||||
"@emotion/stylis": {
|
||||
"version": "0.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz",
|
||||
"integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ=="
|
||||
},
|
||||
"@emotion/unitless": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
|
||||
"integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
|
||||
},
|
||||
"@emotion/utils": {
|
||||
"version": "0.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz",
|
||||
"integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA=="
|
||||
},
|
||||
"@emotion/weak-memoize": {
|
||||
"version": "0.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz",
|
||||
"integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA=="
|
||||
},
|
||||
"@hapi/address": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.2.tgz",
|
||||
@@ -2229,6 +2287,23 @@
|
||||
"object.assign": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"babel-plugin-emotion": {
|
||||
"version": "10.0.23",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz",
|
||||
"integrity": "sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@emotion/hash": "0.7.3",
|
||||
"@emotion/memoize": "0.7.3",
|
||||
"@emotion/serialize": "^0.11.14",
|
||||
"babel-plugin-macros": "^2.0.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"convert-source-map": "^1.5.0",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"find-root": "^1.1.0",
|
||||
"source-map": "^0.5.7"
|
||||
}
|
||||
},
|
||||
"babel-plugin-istanbul": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
|
||||
@@ -2263,6 +2338,11 @@
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz",
|
||||
"integrity": "sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw=="
|
||||
},
|
||||
"babel-plugin-syntax-jsx": {
|
||||
"version": "6.18.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
|
||||
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
|
||||
},
|
||||
"babel-plugin-syntax-object-rest-spread": {
|
||||
"version": "6.13.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
|
||||
@@ -2802,6 +2882,20 @@
|
||||
"node-releases": "^1.1.38"
|
||||
}
|
||||
},
|
||||
"bs-css": {
|
||||
"version": "11.0.0",
|
||||
"resolved": "https://registry.npmjs.org/bs-css/-/bs-css-11.0.0.tgz",
|
||||
"integrity": "sha512-bpSwj1VvmWNMoJ5qnsHMQC+Mj0zjL9iwcOhl5ipP7Hfr7v+ZyKqjSMaMK+L1EdukuCp0rJmRD2I/MbS4BHnMmQ==",
|
||||
"requires": {
|
||||
"emotion": "^10.0.7"
|
||||
}
|
||||
},
|
||||
"bs-platform": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/bs-platform/-/bs-platform-5.2.1.tgz",
|
||||
"integrity": "sha512-3ISP+RBC/NYILiJnphCY0W3RTYpQ11JGa2dBBLVug5fpFZ0qtSaL3ZplD8MyjNeXX2bC7xgrWfgBSn8Tc9om7Q==",
|
||||
"dev": true
|
||||
},
|
||||
"bser": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
|
||||
@@ -3560,6 +3654,17 @@
|
||||
"elliptic": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"create-emotion": {
|
||||
"version": "10.0.14",
|
||||
"resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.14.tgz",
|
||||
"integrity": "sha512-5G4naKMxokOur+94eDz7iPKBfwzy4wa/+0isnPhxXyosIQHBq7yvBy4jjdZw/nnRm7G3PM7P9Ug8mUmtoqcaHg==",
|
||||
"requires": {
|
||||
"@emotion/cache": "^10.0.14",
|
||||
"@emotion/serialize": "^0.11.8",
|
||||
"@emotion/sheet": "0.9.3",
|
||||
"@emotion/utils": "0.11.2"
|
||||
}
|
||||
},
|
||||
"create-hash": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
|
||||
@@ -3915,6 +4020,11 @@
|
||||
"cssom": "0.3.x"
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "2.6.7",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
|
||||
"integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
|
||||
},
|
||||
"currently-unhandled": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
|
||||
@@ -4579,7 +4689,7 @@
|
||||
}
|
||||
},
|
||||
"electron-download-manager": {
|
||||
"version": "git+https://github.com/yadPe/electron-download-manager.git#51e0ed8f1b6dfd063b46f39f24cec73586586805",
|
||||
"version": "git+https://github.com/yadPe/electron-download-manager.git#0d0754e28c923ec32c3cf172ce8d18f89969949e",
|
||||
"from": "git+https://github.com/yadPe/electron-download-manager.git"
|
||||
},
|
||||
"electron-is-dev": {
|
||||
@@ -4709,6 +4819,15 @@
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
|
||||
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
|
||||
},
|
||||
"emotion": {
|
||||
"version": "10.0.23",
|
||||
"resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.23.tgz",
|
||||
"integrity": "sha512-H/x+5rJUnSvI0rdYsAFyDfuQwE0poZgTMj5TQsKirLzyHVWqs6CiUponsdE86sisXw0vS60j91HAbidJJeDt1g==",
|
||||
"requires": {
|
||||
"babel-plugin-emotion": "^10.0.23",
|
||||
"create-emotion": "^10.0.14"
|
||||
}
|
||||
},
|
||||
"encodeurl": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||
@@ -6008,6 +6127,11 @@
|
||||
"pkg-dir": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"find-root": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
|
||||
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
|
||||
},
|
||||
"find-up": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
|
||||
@@ -6768,6 +6892,12 @@
|
||||
"integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
|
||||
"dev": true
|
||||
},
|
||||
"gentype": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/gentype/-/gentype-3.4.2.tgz",
|
||||
"integrity": "sha512-0VjtYFR2EZgLYRAHi9eLVoTWQqBksBmQTccMiNEo1FUTjMxe7KaD4nViFKKF6uWYsrDLj6IS4vtq5v5VyhCBmQ==",
|
||||
"dev": true
|
||||
},
|
||||
"get-caller-file": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
|
||||
@@ -6966,6 +7096,7 @@
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.2.tgz",
|
||||
"integrity": "sha512-29Zxv/cynYB7mkT1rVWQnV7mGX6v7H/miQ6dbEpYTKq5eJBN7PsRB+ViYJlcT6JINTSu4dVB9kOqEun78h6Exg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"neo-async": "^2.6.0",
|
||||
"optimist": "^0.6.1",
|
||||
@@ -7507,7 +7638,7 @@
|
||||
"integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA=="
|
||||
},
|
||||
"irc": {
|
||||
"version": "git+https://github.com/yadPe/node-irc.git#c39f303175957332ddf7c07620566a6185087078",
|
||||
"version": "git+https://github.com/yadPe/node-irc.git#78a7442744e37bd72ff52e7fcb7c3d8832619aab",
|
||||
"from": "git+https://github.com/yadPe/node-irc.git",
|
||||
"requires": {
|
||||
"irc-colors": "^1.1.0"
|
||||
@@ -12072,6 +12203,15 @@
|
||||
"util.promisify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"reason-react": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/reason-react/-/reason-react-0.7.0.tgz",
|
||||
"integrity": "sha512-czR/f0lY5iyLCki9gwftOFF5Zs40l7ZSFmpGK/Z6hx2jBVeFDmIiXB8bAQW/cO6IvtuEt97OmsYueiuOYG9XjQ==",
|
||||
"requires": {
|
||||
"react": ">=16.8.1",
|
||||
"react-dom": ">=16.8.1"
|
||||
}
|
||||
},
|
||||
"recursive-readdir": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
|
||||
|
||||
+8
-1
@@ -18,6 +18,9 @@
|
||||
"lint:fix:prettier": "prettier --write '**/*.{json,jsx,tsx,mjs,js,ts}'",
|
||||
"lint:es": "eslint '**/*.{js,jsx,mjs,ts,tsx}'",
|
||||
"lint:fix:es": "eslint --fix '**/*.{js,jsx,mjs,ts,tsx}'",
|
||||
"bsb": "bsb -make-world",
|
||||
"bsb:watch": "bsb -make-world -w",
|
||||
"bsb:clean": "bsb -clean-world",
|
||||
"go": "electron .",
|
||||
"dist": "cross-env NODE_ENV=production npm run build && npx electron-builder build --win --linux --mac --ia32 --x64",
|
||||
"dist:win": "npm run build && npx electron-builder build --win --x64",
|
||||
@@ -96,6 +99,7 @@
|
||||
"babel-loader": "8.0.5",
|
||||
"babel-plugin-named-asset-import": "^0.3.2",
|
||||
"babel-preset-react-app": "^9.0.0",
|
||||
"bs-css": "^11.0.0",
|
||||
"camelcase": "^5.2.0",
|
||||
"case-sensitive-paths-webpack-plugin": "2.2.0",
|
||||
"css-loader": "2.1.1",
|
||||
@@ -128,6 +132,7 @@
|
||||
"react-jss": "^8.6.1",
|
||||
"react-redux": "^7.1.0",
|
||||
"react-window": "^1.8.5",
|
||||
"reason-react": "^0.7.0",
|
||||
"redux": "^4.0.1",
|
||||
"resolve": "1.10.0",
|
||||
"sass-loader": "7.1.0",
|
||||
@@ -150,19 +155,21 @@
|
||||
"@typescript-eslint/eslint-plugin": "1.6.0",
|
||||
"@typescript-eslint/parser": "1.6.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"bs-platform": "^5.2.1",
|
||||
"cross-env": "^6.0.3",
|
||||
"electron": "^5.0.5",
|
||||
"electron-builder": "^20.44.4",
|
||||
"eslint": "^6.1.0",
|
||||
"eslint-config-airbnb": "^18.0.1",
|
||||
"eslint-config-react-app": "^4.0.1",
|
||||
"eslint-config-prettier": "^6.4.0",
|
||||
"eslint-config-react-app": "^4.0.1",
|
||||
"eslint-loader": "2.1.2",
|
||||
"eslint-plugin-flowtype": "2.50.1",
|
||||
"eslint-plugin-import": "^2.18.2",
|
||||
"eslint-plugin-jsx-a11y": "^6.2.3",
|
||||
"eslint-plugin-react": "^7.16.0",
|
||||
"eslint-plugin-react-hooks": "^1.7.0",
|
||||
"gentype": "^3.4.2",
|
||||
"is-wsl": "^1.1.0",
|
||||
"jest": "24.7.1",
|
||||
"jest-environment-jsdom-fourteen": "0.1.0",
|
||||
|
||||
@@ -3,8 +3,9 @@ import injectSheet from 'react-jss';
|
||||
import TextInput from '../common/TextInput';
|
||||
import Toggle from '../common/Toggle';
|
||||
import DropDown from '../common/DropDown';
|
||||
import CheckBox from '../common/CheckBox';
|
||||
// import CheckBox from '../common/CheckBox';
|
||||
import Button from '../common/Button';
|
||||
import { make as CheckBox } from '../common/Checkbox.bs';
|
||||
|
||||
const styles = {
|
||||
settingWrapper: {
|
||||
@@ -152,7 +153,12 @@ const Setting = ({ classes, theme, settingCategory }) => {
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<CheckBox onChange={item.action} checked={item.value} disabled={item.disabled} />
|
||||
<CheckBox
|
||||
checked={item.value}
|
||||
disabled={item.disabled}
|
||||
color={theme.palette.primary.main.substr(1)}
|
||||
activeColor={theme.palette.primary.accent.substr(1)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
|
||||
@@ -4,10 +4,8 @@ import { compose } from 'redux';
|
||||
import { withTheme } from 'theming';
|
||||
|
||||
const styles = {
|
||||
CheckBox: {
|
||||
margin: 'auto 0',
|
||||
},
|
||||
input: {
|
||||
margin: 'auto 1rem',
|
||||
'-webkit-appearance': 'none',
|
||||
border: ({ theme }) => `1px solid ${theme.palette.primary.main}`,
|
||||
verticalAlign: 'middle',
|
||||
@@ -21,19 +19,9 @@ const styles = {
|
||||
},
|
||||
},
|
||||
};
|
||||
const CheckBox = ({ classes, checked, onChange, disabled }) => {
|
||||
return (
|
||||
<div className={classes.CheckBox}>
|
||||
<input
|
||||
className={classes.input}
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
// onChange={onChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const CheckBox = ({ classes, checked, disabled }) => (
|
||||
<input className={classes.input} type="checkbox" checked={checked} disabled={disabled} />
|
||||
);
|
||||
|
||||
export default compose(
|
||||
withTheme,
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE
|
||||
|
||||
import * as Css from "bs-css/src/Css.js";
|
||||
import * as React from "react";
|
||||
|
||||
function checkBoxStyle(color, activeColor) {
|
||||
return Css.style(/* :: */[
|
||||
Css.unsafe("-webkit-appearance", "none"),
|
||||
/* :: */[
|
||||
Css.margin2(Css.auto, Css.rem(1)),
|
||||
/* :: */[
|
||||
Css.width(Css.px(20)),
|
||||
/* :: */[
|
||||
Css.height(Css.px(20)),
|
||||
/* :: */[
|
||||
Css.border(Css.px(1), Css.solid, Css.hex(color)),
|
||||
/* :: */[
|
||||
Css.borderRadius(Css.px(2)),
|
||||
/* :: */[
|
||||
Css.verticalAlign(Css.middle),
|
||||
/* :: */[
|
||||
Css.backgroundColor(Css.transparent),
|
||||
/* :: */[
|
||||
Css.selector("&:checked", /* :: */[
|
||||
Css.borderColor(Css.hex(activeColor)),
|
||||
/* :: */[
|
||||
Css.backgroundColor(Css.hex(activeColor)),
|
||||
/* [] */0
|
||||
]
|
||||
]),
|
||||
/* [] */0
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]);
|
||||
}
|
||||
|
||||
function Checkbox(Props, _children) {
|
||||
var checked = Props.checked;
|
||||
var disabled = Props.disabled;
|
||||
var color = Props.color;
|
||||
var activeColor = Props.activeColor;
|
||||
return React.createElement("input", {
|
||||
className: checkBoxStyle(color, activeColor),
|
||||
checked: checked,
|
||||
disabled: disabled,
|
||||
type: "checkbox"
|
||||
});
|
||||
}
|
||||
|
||||
var make = Checkbox;
|
||||
|
||||
export {
|
||||
checkBoxStyle ,
|
||||
make ,
|
||||
|
||||
}
|
||||
/* Css Not a pure module */
|
||||
@@ -0,0 +1,28 @@
|
||||
open Css;
|
||||
|
||||
let checkBoxStyle = (~color, ~activeColor) =>
|
||||
style([
|
||||
unsafe("-webkit-appearance", "none"),
|
||||
margin2(~v=auto, ~h=rem(1.)),
|
||||
width(px(20)),
|
||||
height(px(20)),
|
||||
border(px(1), solid, hex(color)),
|
||||
borderRadius(px(2)),
|
||||
verticalAlign(middle),
|
||||
backgroundColor(transparent),
|
||||
selector(
|
||||
"&:checked",
|
||||
[borderColor(hex(activeColor)), backgroundColor(hex(activeColor))],
|
||||
),
|
||||
]);
|
||||
|
||||
[@react.component]
|
||||
[@genType]
|
||||
let make = (~checked, ~disabled, ~color, ~activeColor, _children) => {
|
||||
<input
|
||||
className={checkBoxStyle(~color, ~activeColor)}
|
||||
type_="checkbox"
|
||||
checked
|
||||
disabled
|
||||
/>;
|
||||
};
|
||||
Reference in New Issue
Block a user