migrate boolean widget

This commit is contained in:
Shawn Erquhart
2018-07-24 09:18:36 -04:00
parent 0e25b76bb7
commit 6be3c7a839
9 changed files with 91 additions and 63 deletions

View File

@ -0,0 +1,29 @@
{
"name": "netlify-cms-widget-boolean",
"description": "Widget for editing boolean values in Netlify CMS.",
"version": "2.0.0-alpha.0",
"main": "dist/netlify-cms-widget-boolean.js",
"license": "MIT",
"keywords": [
"netlify",
"netlify-cms",
"widget",
"boolean"
],
"sideEffects": false,
"scripts": {
"watch": "webpack -w",
"build": "webpack"
},
"devDependencies": {
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0"
},
"peerDependencies": {
"lodash": "^4.17.10",
"netlify-cms-ui-default": "^2.0.0-alpha.0",
"prop-types": "^15.5.10",
"react": "^16.4.1",
"react-immutable-proptypes": "^2.1.0"
}
}

View File

@ -0,0 +1,50 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import styled from 'react-emotion';
import { isBoolean } from 'lodash';
import { Toggle, ToggleBackground, colors } from 'netlify-cms-ui-default';
const BooleanBackground = styled(ToggleBackground)`
background-color: ${props => props.isActive ? colors.active : colors.textFieldBorder};
`
export default class BooleanControl extends React.Component {
render() {
const {
value,
field,
forID,
onChange,
classNameWrapper,
setActiveStyle,
setInactiveStyle
} = this.props;
return (
<div>
<Toggle
id={forID}
active={isBoolean(value) ? value : field.get('defaultValue', false)}
onChange={onChange}
onFocus={setActiveStyle}
onBlur={setInactiveStyle}
Background={BooleanBackground}
/>
</div>
);
}
}
BooleanControl.propTypes = {
field: ImmutablePropTypes.map.isRequired,
onChange: PropTypes.func.isRequired,
classNameWrapper: PropTypes.string.isRequired,
setActiveStyle: PropTypes.func.isRequired,
setInactiveStyle: PropTypes.func.isRequired,
forID: PropTypes.string,
value: PropTypes.bool,
};
BooleanControl.defaultProps = {
value: false,
};

View File

@ -0,0 +1 @@
export BooleanControl from './BooleanControl';

View File

@ -0,0 +1,3 @@
const { getConfig } = require('../../scripts/webpack.js');
module.exports = getConfig();