planning

node_modules/decap-cms-widget-boolean/src/BooleanControl.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { css } from '@emotion/react';
+import { Toggle, ToggleBackground, colors } from 'decap-cms-ui-default';
+
+function BooleanBackground({ isActive, ...props }) {
+  return (
+    <ToggleBackground
+      css={css`
+        background-color: ${isActive ? colors.active : colors.textFieldBorder};
+      `}
+      {...props}
+    />
+  );
+}
+
+export default class BooleanControl extends React.Component {
+  render() {
+    const { value, forID, onChange, classNameWrapper, setActiveStyle, setInactiveStyle } =
+      this.props;
+    return (
+      <div className={classNameWrapper}>
+        <Toggle
+          id={forID}
+          active={value}
+          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,
+};

node_modules/decap-cms-widget-boolean/src/index.js

@@ -0,0 +1,12 @@
+import controlComponent from './BooleanControl';
+
+function Widget(opts = {}) {
+  return {
+    name: 'boolean',
+    controlComponent,
+    ...opts,
+  };
+}
+
+export const DecapCmsWidgetBoolean = { Widget, controlComponent };
+export default DecapCmsWidgetBoolean;