migrate boolean widget

packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreview.js

@@ -24,7 +24,7 @@ export default class Preview extends React.Component {
     return (
       <PreviewContainer>
         {fields.filter(isVisible).map(field => (
-          <div>{widgetFor(field.get('name'))}</div>
+          <div key={field.get('name')}>{widgetFor(field.get('name'))}</div>
         ))}
       </PreviewContainer>
     );

packages/netlify-cms-core/src/components/EditorWidgets/Boolean/Boolean.css

@@ -1,9 +0,0 @@
-.nc-booleanControl-switch {
-  & .nc-toggle-background {
-    background-color: var(--textFieldBorderColor);
-  }
-
-  & .nc-toggle-active .nc-toggle-background {
-    background-color: var(--colorActive);
-  }
-}

packages/netlify-cms-core/src/components/EditorWidgets/index.js

@@ -23,7 +23,6 @@ import ObjectControl from './Object/ObjectControl';
 import ObjectPreview from './Object/ObjectPreview';
 import RelationControl from './Relation/RelationControl';
 import RelationPreview from './Relation/RelationPreview';
-import BooleanControl from './Boolean/BooleanControl';
 
 registerWidget('text', TextControl, TextPreview);
 registerWidget('number', NumberControl, NumberPreview);
@@ -36,5 +35,4 @@ registerWidget('datetime', DateTimeControl, DateTimePreview);
 registerWidget('select', SelectControl, SelectPreview);
 registerWidget('object', ObjectControl, ObjectPreview);
 registerWidget('relation', RelationControl, RelationPreview);
-registerWidget('boolean', BooleanControl);
 registerWidget('unknown', UnknownControl, UnknownPreview);

packages/netlify-cms-ui-default/src/Toggle.js

@@ -1,67 +1,67 @@
 import React from 'react'
-import styled, { css, cx } from 'react-emotion';
+import styled, { css } from 'react-emotion';
 import ReactToggled from 'react-toggled';
 import { colors, colorsRaw, shadows, transitions } from './styles';
 
-const styles = {
+const ToggleContainer = styled.span`
-  switch: css`
+  display: inline-flex;
-    display: inline-flex;
+  align-items: center;
-    align-items: center;
+  justify-content: center;
-    justify-content: center;
+  position: relative;
-    position: relative;
+  width: 40px;
-    width: 40px;
+  height: 20px;
-    height: 20px;
+  cursor: pointer;
-    cursor: pointer;
+`
-  `,
+
-  switchHandle: css`
+const ToggleHandle = styled.span`
-    ${shadows.dropDeep};
+  ${shadows.dropDeep};
-    position: absolute;
+  position: absolute;
-    left: 0;
+  left: 0;
-    top: 0;
+  top: 0;
-    width: 20px;
+  width: 20px;
-    height: 20px;
+  height: 20px;
-    border-radius: 50%;
+  border-radius: 50%;
-    background-color: ${colorsRaw.white};
+  background-color: ${colorsRaw.white};
-    transition: transform ${transitions.main};
+  transition: transform ${transitions.main};
-  `,
+
-  switchHandleActive: css`
+  ${props => props.isActive && css`
     transform: translateX(20px);
-  `,
+  `}
-  switchBackground: css`
+`
-    width: 34px;
+
-    height: 14px;
+const ToggleBackground = styled.span`
-    border-radius: 10px;
+  width: 34px;
-    background-color: ${colors.active};
+  height: 14px;
-  `,
+  border-radius: 10px;
-};
+  background-color: ${colors.active};
+`
 
 const Toggle = ({
   active,
   onChange,
-  className,
+  renderBackground,
-  classNameBackground,
-  classNameSwitch,
   onFocus,
-  onBlur
+  onBlur,
-}) =>
+  Container = ToggleContainer,
+  Background = ToggleBackground,
+  Handle = ToggleHandle,
+}) => (
   <ReactToggled on={active} onToggle={onChange}>
     {({on, getElementTogglerProps}) => (
-      <span
+      <Container
-        className={cx(styles.switch, className)}
         role="switch"
         aria-checked={on.toString()}
         onFocus={onFocus}
         onBlur={onBlur}
         {...getElementTogglerProps()}
       >
-        <span className={cx(styles.switchBackground, classNameBackground)}/>
+        <Background isActive={on}/>
-        <span className={cx(
+        <Handle isActive={on}/>
-          styles.switchHandle,
+      </Container>
-          classNameSwitch,
-          { [styles.switchHandleActive]: on },
-        )}/>
-      </span>
     )}
-  </ReactToggled>;
+  </ReactToggled>
+);
 
-export default styled(Toggle)``
+const StyledToggle = styled(Toggle)``;
+
+export { StyledToggle as default, ToggleContainer, ToggleBackground, ToggleHandle };

packages/netlify-cms-ui-default/src/index.js

@@ -2,7 +2,7 @@ export Dropdown, { DropdownItem, DropdownButton, StyledDropdownButton } from './
 export Icon from './Icon';
 export ListItemTopBar from './ListItemTopBar';
 export Loader from './Loader';
-export Toggle from './Toggle';
+export Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
 export AuthenticationPage from './AuthenticationPage';
 export WidgetPreviewContainer from './WidgetPreviewContainer';
 export {

packages/netlify-cms-widget-boolean/package.json

@@ -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"
+  }
+}

packages/netlify-cms-widget-boolean/src/BooleanControl.js

@@ -1,8 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import ImmutablePropTypes from "react-immutable-proptypes";
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from 'react-emotion';
 import { isBoolean } from 'lodash';
-import { Toggle } from 'netlify-cms-ui-default';
+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() {
@@ -16,13 +21,14 @@ export default class BooleanControl extends React.Component {
       setInactiveStyle
     } = this.props;
     return (
-      <div className={`${classNameWrapper} nc-booleanControl-switch`}>
+      <div>
         <Toggle
           id={forID}
           active={isBoolean(value) ? value : field.get('defaultValue', false)}
           onChange={onChange}
           onFocus={setActiveStyle}
           onBlur={setInactiveStyle}
+          Background={BooleanBackground}
         />
       </div>
     );

packages/netlify-cms-widget-boolean/src/index.js

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

packages/netlify-cms-widget-boolean/webpack.config.js

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