@wix/patterns 0.8.0

package/dist/cjs/components/CustomFieldModal/CustomFieldForm.js

@@ -0,0 +1,652 @@
+"use strict";
+
+exports.__esModule = true;
+exports._CustomFieldForm = exports.CustomFieldForm = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _designSystem = require("@wix/design-system");
+var _react2 = require("@wix/bex-core/react");
+var _CustomFieldTypeDropdown = require("./CustomFieldTypeDropdown");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _Trans = require("../Trans");
+var _mobx = require("mobx");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/CustomFieldModal/CustomFieldForm.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const _CustomFieldForm = props => {
+  const {
+    state
+  } = props;
+  const {
+    form: {
+      $: {
+        key,
+        type,
+        name,
+        readApps,
+        readUsers,
+        writeApps,
+        writeUsers
+      }
+    },
+    disabledFields: {
+      permissions
+    },
+    mode,
+    settings,
+    customFieldModalBiReporter,
+    generateUniqueKey,
+    setKeyFieldIfNotDirty
+  } = state;
+  const {
+    reportAdvancedSettingsClick,
+    reportKeyFormFieldChange
+  } = customFieldModalBiReporter;
+  const {
+    translate: t,
+    environment: {
+      language
+    }
+  } = (0, _react2.useWixPatternsContainer)();
+  (0, _react.useEffect)(() => customFieldModalBiReporter.init(), []);
+  const getFloatingNotification = () => {
+    switch (state.submitError) {
+      case 'network':
+        return t('cairo.customFields.modal.networkError');
+      case 'technical':
+        return t('cairo.customFields.modal.technicalError');
+      case 'max_size':
+        return /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
+          i18nKey: "cairo.customFields.modal.maxFieldsError",
+          components: {
+            supportLink: /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
+              underline: "always",
+              size: "small",
+              as: "a",
+              rel: "noopener",
+              target: "_blank",
+              href: "https://www.wix.com/contact",
+              __self: void 0,
+              __source: {
+                fileName: _jsxFileName,
+                lineNumber: 63,
+                columnNumber: 17
+              }
+            })
+          },
+          __self: void 0,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 59,
+            columnNumber: 11
+          }
+        });
+      default:
+        return '';
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: 552,
+    direction: "vertical",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 81,
+      columnNumber: 5
+    }
+  }, state.submitError && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    position: "absolute",
+    top: "24px",
+    left: "49%",
+    transform: "translateX(-50%)",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 83,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.FloatingNotification, {
+    dataHook: "custom-field-modal-error-state",
+    type: "destructive",
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircle, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 92,
+        columnNumber: 25
+      }
+    }),
+    text: getFloatingNotification(),
+    onClose: () => {
+      (0, _mobx.runInAction)(() => {
+        state.submitError = null;
+      });
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 89,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    paddingLeft: "SP1",
+    paddingRight: "SP1",
+    direction: "vertical",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 6,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
+    dataHook: "custom-field-modal-field-type",
+    required: true,
+    label: t('cairo.customFields.addCustomField.modal.fieldType'),
+    status: type.hasError ? 'error' : undefined,
+    statusMessage: type.error,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 105,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomFieldTypeDropdown.CustomFieldTypeDropdown, {
+    state: state,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 15
+    }
+  }), mode === 'edit' && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 114,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "tiny",
+    secondary: true,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 115,
+      columnNumber: 19
+    }
+  }, t('cairo.customFields.editCustomField.fieldType.tooltip'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 6,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 122,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
+    dataHook: "custom-field-modal-field-name",
+    required: true,
+    label: t('cairo.customFields.addCustomField.modal.fieldName'),
+    status: name.hasError ? 'error' : undefined,
+    statusMessage: name.error,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 123,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
+    dataHook: "custom-field-modal-name",
+    onChange: e => {
+      name.onChange(e.target.value);
+      setKeyFieldIfNotDirty(generateUniqueKey(e.target.value));
+    },
+    value: name.value,
+    maxLength: 64,
+    placeholder: state.namePlaceholder,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 130,
+      columnNumber: 15
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "SP4",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 143,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
+    dataHook: "custom-field-modal-settings-button",
+    size: "small",
+    suffixIcon: settings.isOn ? /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronUp, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 147,
+        columnNumber: 41
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronDown, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 147,
+        columnNumber: 57
+      }
+    }),
+    onClick: () => settings.toggle(),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 144,
+      columnNumber: 11
+    }
+  }, t('cairo.customFields.addCustomField.modal.advancedSettings'))), /*#__PURE__*/_react.default.createElement(_designSystem.Collapse, {
+    open: settings.isOn,
+    onExpandAnimationEnd: () => {
+      reportAdvancedSettingsClick('Open');
+    },
+    onCollapseAnimationEnd: () => {
+      reportAdvancedSettingsClick('Close');
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 153,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "SP4",
+    direction: "vertical",
+    width: "320px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 162,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "small",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 163,
+      columnNumber: 13
+    }
+  }, t('cairo.customFields.addCustomField.modal.advancedSettings.readPermissions')), /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "tiny",
+    light: true,
+    secondary: true,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 168,
+      columnNumber: 13
+    }
+  }, t('cairo.customFields.addCustomField.modal.advancedSettings.readPermissions.tooltip'))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "SP3",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 174,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 175,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 4,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 176,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    verticalAlign: "middle",
+    gap: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 177,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "small",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 178,
+      columnNumber: 19
+    }
+  }, t('cairo.customFields.addCustomField.modal.advancedSettings.externalApps')), /*#__PURE__*/_react.default.createElement(_designSystem.InfoIcon, {
+    size: "small",
+    content: /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
+      i18nKey: "cairo.customFields.addCustomField.modal.advancedSettings.externalApps.tooltip",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 186,
+        columnNumber: 23
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 183,
+      columnNumber: 19
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 2,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 191,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
+    dataHook: "custom-field-modal-read-apps",
+    disabled: mode === 'edit' && permissions.read.apps,
+    size: "small",
+    onChange: () => {
+      readApps.onChange(!readApps.value);
+    },
+    checked: readApps.value,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 192,
+      columnNumber: 17
+    }
+  }, t('cairo.customFields.addCustomField.modal.advancedSettings.read'))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 2,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 206,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
+    dataHook: "custom-field-modal-write-apps",
+    disabled: mode === 'edit' && permissions.write.apps,
+    size: "small",
+    onChange: () => {
+      writeApps.onChange(!writeApps.value);
+    },
+    checked: writeApps.value,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 207,
+      columnNumber: 17
+    }
+  }, t('cairo.customFields.addCustomField.modal.advancedSettings.write'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "SP2",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 223,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 224,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 4,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 225,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    verticalAlign: "middle",
+    gap: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 226,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "small",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 227,
+      columnNumber: 19
+    }
+  }, t('cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors')), /*#__PURE__*/_react.default.createElement(_designSystem.InfoIcon, {
+    size: "small",
+    content: /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
+      i18nKey: "cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.tooltip",
+      components: {
+        learnMore: /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
+          underline: "always",
+          skin: "light",
+          size: "small",
+          as: "a",
+          rel: "noopener",
+          target: "_blank",
+          href: `https://support.wix.com/${language}/article/content-manager-connecting-elements-to-a-collection-using-a-dataset`,
+          __self: void 0,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 239,
+            columnNumber: 29
+          }
+        })
+      },
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 235,
+        columnNumber: 23
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 232,
+      columnNumber: 19
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 2,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 255,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
+    dataHook: "custom-field-modal-read-users",
+    disabled: mode === 'edit' && permissions.read.users,
+    size: "small",
+    onChange: () => {
+      readUsers.onChange(!readUsers.value);
+    },
+    checked: readUsers.value,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 256,
+      columnNumber: 17
+    }
+  }, t('cairo.customFields.addCustomField.modal.advancedSettings.read'))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 2,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 270,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
+    dataHook: "custom-field-modal-write-users",
+    disabled: mode === 'edit' && permissions.write.users,
+    size: "small",
+    onChange: () => {
+      writeUsers.onChange(!writeUsers.value);
+    },
+    checked: writeUsers.value,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 271,
+      columnNumber: 17
+    }
+  }, t('cairo.customFields.addCustomField.modal.advancedSettings.write'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 287,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "tiny",
+    light: true,
+    secondary: true,
+    dataHook: "permissions-note",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 288,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
+    i18nKey: "cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.note",
+    components: {
+      learnMore: /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
+        underline: "always",
+        size: "tiny",
+        as: "a",
+        rel: "noopener",
+        target: "_blank",
+        href: `https://support.wix.com/${language}/article/content-manager-connecting-elements-to-a-collection-using-a-dataset`,
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 293,
+          columnNumber: 21
+        }
+      })
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 289,
+      columnNumber: 15
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 306,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "SP3",
+    marginBottom: "SP3",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 307,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 308,
+      columnNumber: 15
+    }
+  })), /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
+    dataHook: "custom-field-modal-field-key",
+    required: true,
+    label: t('cairo.customFields.addCustomField.modal.advancedSettings.key.title'),
+    status: key.hasError ? 'error' : undefined,
+    statusMessage: key.error,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 311,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 320,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 6,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 321,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
+    dataHook: "custom-field-modal-key",
+    disabled: mode === 'edit',
+    value: key.value,
+    onChange: e => {
+      key.onChange(e.target.value.toLowerCase());
+      reportKeyFormFieldChange();
+    },
+    placeholder: t('cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 322,
+      columnNumber: 19
+    }
+  })))), !key.hasError && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 339,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "tiny",
+    secondary: true,
+    dataHook: "custom-field-modal-fieldKey-tooltip",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 340,
+      columnNumber: 17
+    }
+  }, mode === 'new' ? t('cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip') : t('cairo.customFields.editCustomField.fieldKey.tooltip')))))));
+};
+exports._CustomFieldForm = _CustomFieldForm;
+const CustomFieldForm = exports.CustomFieldForm = (0, _mobxReactLite.observer)(_CustomFieldForm);
+//# sourceMappingURL=CustomFieldForm.js.map