decap-cms-widget-object 2.8.0-beta.0

package/dist/esm/ObjectControl.js

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+var _core = require("@emotion/core");
+var _immutable = require("immutable");
+var _decapCmsUiDefault = require("decap-cms-ui-default");
+var _decapCmsLibWidgets = require("decap-cms-lib-widgets");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const styleStrings = {
+  nestedObjectControl: `
+    padding: 6px 14px 14px;
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  `,
+  objectWidgetTopBarContainer: `
+    padding: ${_decapCmsUiDefault.lengths.objectWidgetTopBarContainerPadding};
+  `,
+  collapsedObjectControl: `
+    display: none;
+  `
+};
+class ObjectControl extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "componentValidate", {});
+    _defineProperty(this, "validate", () => {
+      const {
+        field
+      } = this.props;
+      let fields = field.get('field') || field.get('fields');
+      fields = _immutable.List.isList(fields) ? fields : (0, _immutable.List)([fields]);
+      fields.forEach(field => {
+        if (field.get('widget') === 'hidden') return;
+        this.componentValidate[field.get('name')]();
+      });
+    });
+    _defineProperty(this, "handleCollapseToggle", () => {
+      this.setState({
+        collapsed: !this.state.collapsed
+      });
+    });
+    _defineProperty(this, "renderFields", (multiFields, singleField) => {
+      if (multiFields) {
+        return multiFields.map((f, idx) => this.controlFor(f, idx));
+      }
+      return this.controlFor(singleField);
+    });
+    _defineProperty(this, "objectLabel", () => {
+      const {
+        value,
+        field
+      } = this.props;
+      const label = field.get('label', field.get('name'));
+      const summary = field.get('summary');
+      return summary ? _decapCmsLibWidgets.stringTemplate.compileStringTemplate(summary, null, '', value) : label;
+    });
+    this.state = {
+      collapsed: props.field.get('collapsed', false)
+    };
+  }
+
+  /*
+   * Always update so that each nested widget has the option to update. This is
+   * required because ControlHOC provides a default `shouldComponentUpdate`
+   * which only updates if the value changes, but every widget must be allowed
+   * to override this.
+   */
+  shouldComponentUpdate() {
+    return true;
+  }
+  controlFor(field, key) {
+    const {
+      value,
+      onChangeObject,
+      onValidateObject,
+      clearFieldErrors,
+      metadata,
+      fieldsErrors,
+      editorControl: EditorControl,
+      controlRef,
+      parentIds,
+      isFieldDuplicate,
+      isFieldHidden,
+      locale
+    } = this.props;
+    if (field.get('widget') === 'hidden') {
+      return null;
+    }
+    const fieldName = field.get('name');
+    const fieldValue = value && _immutable.Map.isMap(value) ? value.get(fieldName) : value;
+    const isDuplicate = isFieldDuplicate && isFieldDuplicate(field);
+    const isHidden = isFieldHidden && isFieldHidden(field);
+    return (0, _core.jsx)(EditorControl, {
+      key: key,
+      field: field,
+      value: fieldValue,
+      onChange: onChangeObject,
+      clearFieldErrors: clearFieldErrors,
+      fieldsMetaData: metadata,
+      fieldsErrors: fieldsErrors,
+      onValidate: onValidateObject,
+      processControlRef: controlRef && controlRef.bind(this),
+      controlRef: controlRef,
+      parentIds: parentIds,
+      isDisabled: isDuplicate,
+      isHidden: isHidden,
+      isFieldDuplicate: isFieldDuplicate,
+      isFieldHidden: isFieldHidden,
+      locale: locale
+    });
+  }
+  render() {
+    const {
+      field,
+      forID,
+      classNameWrapper,
+      forList,
+      hasError,
+      t
+    } = this.props;
+    const collapsed = forList ? this.props.collapsed : this.state.collapsed;
+    const multiFields = field.get('fields');
+    const singleField = field.get('field');
+    if (multiFields || singleField) {
+      return (0, _core.jsx)(_core.ClassNames, null, ({
+        css,
+        cx
+      }) => (0, _core.jsx)("div", {
+        id: forID,
+        className: cx(classNameWrapper, css`
+                  ${styleStrings.objectWidgetTopBarContainer}
+                `, {
+          [css`
+                    ${styleStrings.nestedObjectControl}
+                  `]: forList
+        }, {
+          [css`
+                    border-color: ${_decapCmsUiDefault.colors.textFieldBorder};
+                  `]: forList ? !hasError : false
+        })
+      }, forList ? null : (0, _core.jsx)(_decapCmsUiDefault.ObjectWidgetTopBar, {
+        collapsed: collapsed,
+        onCollapseToggle: this.handleCollapseToggle,
+        heading: collapsed && this.objectLabel(),
+        t: t
+      }), (0, _core.jsx)("div", {
+        className: cx({
+          [css`
+                    ${styleStrings.collapsedObjectControl}
+                  `]: collapsed
+        })
+      }, this.renderFields(multiFields, singleField))));
+    }
+    return (0, _core.jsx)("h3", null, "No field(s) defined for this widget");
+  }
+}
+exports.default = ObjectControl;
+_defineProperty(ObjectControl, "propTypes", {
+  onChangeObject: _propTypes.default.func.isRequired,
+  onValidateObject: _propTypes.default.func,
+  value: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.object, _propTypes.default.bool]),
+  field: _propTypes.default.object,
+  forID: _propTypes.default.string,
+  classNameWrapper: _propTypes.default.string.isRequired,
+  forList: _propTypes.default.bool,
+  controlRef: _propTypes.default.func,
+  editorControl: _propTypes.default.elementType.isRequired,
+  resolveWidget: _propTypes.default.func.isRequired,
+  clearFieldErrors: _propTypes.default.func.isRequired,
+  fieldsErrors: _reactImmutableProptypes.default.map,
+  hasError: _propTypes.default.bool,
+  t: _propTypes.default.func,
+  locale: _propTypes.default.string
+});
+_defineProperty(ObjectControl, "defaultProps", {
+  value: (0, _immutable.Map)()
+});

package/dist/esm/ObjectPreview.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _decapCmsUiDefault = require("decap-cms-ui-default");
+var _core = require("@emotion/core");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ObjectPreview({
+  field
+}) {
+  return (0, _core.jsx)(_decapCmsUiDefault.WidgetPreviewContainer, null, field && field.get('fields') || field.get('field') || null);
+}
+ObjectPreview.propTypes = {
+  field: _propTypes.default.node
+};
+var _default = ObjectPreview;
+exports.default = _default;

package/dist/esm/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DecapCmsWidgetObject = void 0;
+var _ObjectControl = _interopRequireDefault(require("./ObjectControl"));
+var _ObjectPreview = _interopRequireDefault(require("./ObjectPreview"));
+var _schema = _interopRequireDefault(require("./schema"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function Widget(opts = {}) {
+  return _objectSpread({
+    name: 'object',
+    controlComponent: _ObjectControl.default,
+    previewComponent: _ObjectPreview.default,
+    schema: _schema.default
+  }, opts);
+}
+const DecapCmsWidgetObject = {
+  Widget,
+  controlComponent: _ObjectControl.default,
+  previewComponent: _ObjectPreview.default
+};
+exports.DecapCmsWidgetObject = DecapCmsWidgetObject;
+var _default = DecapCmsWidgetObject;
+exports.default = _default;

package/dist/esm/schema.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  properties: {
+    collapsed: {
+      type: 'boolean'
+    },
+    i18n: {
+      type: 'boolean'
+    }
+  }
+};
+exports.default = _default;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "decap-cms-widget-object",
+  "description": "Widget for displaying an object of fields for Decap CMS.",
+  "version": "2.8.0-beta.0",
+  "homepage": "https://www.decapcms.org/docs/widgets/#object",
+  "repository": "https://github.com/decaporg/decap-cms/tree/master/packages/decap-cms-widget-object",
+  "bugs": "https://github.com/decaporg/decap-cms/issues",
+  "module": "dist/esm/index.js",
+  "main": "dist/decap-cms-widget-object.js",
+  "license": "MIT",
+  "keywords": [
+    "decap-cms",
+    "widget",
+    "fields",
+    "object",
+    "nested"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "develop": "yarn build:esm --watch",
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
+  },
+  "peerDependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/styled": "^10.0.27",
+    "decap-cms-ui-default": "^2.12.1",
+    "immutable": "^3.7.6",
+    "lodash": "^4.17.11",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.4 || ^17.0.0",
+    "react-immutable-proptypes": "^2.1.0"
+  },
+  "gitHead": "1bdf716e5655bf088a343cd90210a2d361a9db52"
+}

package/src/ObjectControl.js

@@ -0,0 +1,195 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { ClassNames } from '@emotion/core';
+import { List, Map } from 'immutable';
+import { colors, lengths, ObjectWidgetTopBar } from 'decap-cms-ui-default';
+import { stringTemplate } from 'decap-cms-lib-widgets';
+
+const styleStrings = {
+  nestedObjectControl: `
+    padding: 6px 14px 14px;
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  `,
+  objectWidgetTopBarContainer: `
+    padding: ${lengths.objectWidgetTopBarContainerPadding};
+  `,
+  collapsedObjectControl: `
+    display: none;
+  `,
+};
+
+export default class ObjectControl extends React.Component {
+  componentValidate = {};
+
+  static propTypes = {
+    onChangeObject: PropTypes.func.isRequired,
+    onValidateObject: PropTypes.func,
+    value: PropTypes.oneOfType([PropTypes.node, PropTypes.object, PropTypes.bool]),
+    field: PropTypes.object,
+    forID: PropTypes.string,
+    classNameWrapper: PropTypes.string.isRequired,
+    forList: PropTypes.bool,
+    controlRef: PropTypes.func,
+    editorControl: PropTypes.elementType.isRequired,
+    resolveWidget: PropTypes.func.isRequired,
+    clearFieldErrors: PropTypes.func.isRequired,
+    fieldsErrors: ImmutablePropTypes.map,
+    hasError: PropTypes.bool,
+    t: PropTypes.func,
+    locale: PropTypes.string,
+  };
+
+  static defaultProps = {
+    value: Map(),
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      collapsed: props.field.get('collapsed', false),
+    };
+  }
+
+  /*
+   * Always update so that each nested widget has the option to update. This is
+   * required because ControlHOC provides a default `shouldComponentUpdate`
+   * which only updates if the value changes, but every widget must be allowed
+   * to override this.
+   */
+  shouldComponentUpdate() {
+    return true;
+  }
+
+  validate = () => {
+    const { field } = this.props;
+    let fields = field.get('field') || field.get('fields');
+    fields = List.isList(fields) ? fields : List([fields]);
+    fields.forEach(field => {
+      if (field.get('widget') === 'hidden') return;
+      this.componentValidate[field.get('name')]();
+    });
+  };
+
+  controlFor(field, key) {
+    const {
+      value,
+      onChangeObject,
+      onValidateObject,
+      clearFieldErrors,
+      metadata,
+      fieldsErrors,
+      editorControl: EditorControl,
+      controlRef,
+      parentIds,
+      isFieldDuplicate,
+      isFieldHidden,
+      locale,
+    } = this.props;
+
+    if (field.get('widget') === 'hidden') {
+      return null;
+    }
+    const fieldName = field.get('name');
+    const fieldValue = value && Map.isMap(value) ? value.get(fieldName) : value;
+
+    const isDuplicate = isFieldDuplicate && isFieldDuplicate(field);
+    const isHidden = isFieldHidden && isFieldHidden(field);
+
+    return (
+      <EditorControl
+        key={key}
+        field={field}
+        value={fieldValue}
+        onChange={onChangeObject}
+        clearFieldErrors={clearFieldErrors}
+        fieldsMetaData={metadata}
+        fieldsErrors={fieldsErrors}
+        onValidate={onValidateObject}
+        processControlRef={controlRef && controlRef.bind(this)}
+        controlRef={controlRef}
+        parentIds={parentIds}
+        isDisabled={isDuplicate}
+        isHidden={isHidden}
+        isFieldDuplicate={isFieldDuplicate}
+        isFieldHidden={isFieldHidden}
+        locale={locale}
+      />
+    );
+  }
+
+  handleCollapseToggle = () => {
+    this.setState({ collapsed: !this.state.collapsed });
+  };
+
+  renderFields = (multiFields, singleField) => {
+    if (multiFields) {
+      return multiFields.map((f, idx) => this.controlFor(f, idx));
+    }
+    return this.controlFor(singleField);
+  };
+
+  objectLabel = () => {
+    const { value, field } = this.props;
+    const label = field.get('label', field.get('name'));
+    const summary = field.get('summary');
+    return summary ? stringTemplate.compileStringTemplate(summary, null, '', value) : label;
+  };
+
+  render() {
+    const { field, forID, classNameWrapper, forList, hasError, t } = this.props;
+    const collapsed = forList ? this.props.collapsed : this.state.collapsed;
+    const multiFields = field.get('fields');
+    const singleField = field.get('field');
+
+    if (multiFields || singleField) {
+      return (
+        <ClassNames>
+          {({ css, cx }) => (
+            <div
+              id={forID}
+              className={cx(
+                classNameWrapper,
+                css`
+                  ${styleStrings.objectWidgetTopBarContainer}
+                `,
+                {
+                  [css`
+                    ${styleStrings.nestedObjectControl}
+                  `]: forList,
+                },
+                {
+                  [css`
+                    border-color: ${colors.textFieldBorder};
+                  `]: forList ? !hasError : false,
+                },
+              )}
+            >
+              {forList ? null : (
+                <ObjectWidgetTopBar
+                  collapsed={collapsed}
+                  onCollapseToggle={this.handleCollapseToggle}
+                  heading={collapsed && this.objectLabel()}
+                  t={t}
+                />
+              )}
+              <div
+                className={cx({
+                  [css`
+                    ${styleStrings.collapsedObjectControl}
+                  `]: collapsed,
+                })}
+              >
+                {this.renderFields(multiFields, singleField)}
+              </div>
+            </div>
+          )}
+        </ClassNames>
+      );
+    }
+
+    return <h3>No field(s) defined for this widget</h3>;
+  }
+}

package/src/ObjectPreview.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WidgetPreviewContainer } from 'decap-cms-ui-default';
+
+function ObjectPreview({ field }) {
+  return (
+    <WidgetPreviewContainer>
+      {(field && field.get('fields')) || field.get('field') || null}
+    </WidgetPreviewContainer>
+  );
+}
+
+ObjectPreview.propTypes = {
+  field: PropTypes.node,
+};
+
+export default ObjectPreview;

package/src/index.js

@@ -0,0 +1,16 @@
+import controlComponent from './ObjectControl';
+import previewComponent from './ObjectPreview';
+import schema from './schema';
+
+function Widget(opts = {}) {
+  return {
+    name: 'object',
+    controlComponent,
+    previewComponent,
+    schema,
+    ...opts,
+  };
+}
+
+export const DecapCmsWidgetObject = { Widget, controlComponent, previewComponent };
+export default DecapCmsWidgetObject;

package/src/schema.js

@@ -0,0 +1,6 @@
+export default {
+  properties: {
+    collapsed: { type: 'boolean' },
+    i18n: { type: 'boolean' },
+  },
+};

package/webpack.config.js

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