ywana-core8 0.0.191 → 0.0.195

package/dist/index.modern.js

@@ -907,7 +907,7 @@ var TextField = function TextField(props) {
     onKeyDown: onKeyPress,
     onFocus: focus,
     readOnly: readOnly
-  }), canClear && value && value.length > 0 ? /*#__PURE__*/React.createElement(Icon, {
+  }), !readOnly && canClear && value && value.length > 0 ? /*#__PURE__*/React.createElement(Icon, {
     icon: "close",
     clickable: true,
     size: "small",
@@ -2459,7 +2459,7 @@ var ContentType = /*#__PURE__*/function () {
  * Content
  */
 
-var Content = /*#__PURE__*/function () {
+var Content$1 = /*#__PURE__*/function () {
   function Content(type, value) {
     this.type = type;
     this._type = new ContentType(type);
@@ -2773,7 +2773,7 @@ var TreededContentEditor = function TreededContentEditor(_ref3) {
       setSelected = _useState2[1];
 
   function select(index, field, node) {
-    var item = new Content(node.item, field);
+    var item = new Content$1(node.item, field);
     setSelected({
       index: index,
       item: item,
@@ -2923,7 +2923,7 @@ var EntityEditor = function EntityEditor(_ref5) {
   var id = field.id,
       item = field.item,
       label = field.label;
-  var content = new Content(item, value);
+  var content = new Content$1(item, value);
 
   function change(fid, value) {
     var _Object$assign4;
@@ -3349,7 +3349,7 @@ var CreateContentDialog$1 = function CreateContentDialog(_ref) {
   var title = /*#__PURE__*/React.createElement(Text, {
     use: "headline6"
   }, label);
-  var content = new Content(type, form);
+  var content = new Content$1(type, form);
   return /*#__PURE__*/React.createElement(Dialog, {
     title: title,
     open: true,
@@ -3438,7 +3438,7 @@ var EditContentDialog = function EditContentDialog(_ref) {
   var title = /*#__PURE__*/React.createElement(Text, {
     use: "headline6"
   }, label);
-  var content = new Content(type, form);
+  var content = new Content$1(type, form);
   return /*#__PURE__*/React.createElement(Dialog, {
     title: title,
     open: true,
@@ -3531,7 +3531,7 @@ var CreateContentDialog = function CreateContentDialog(_ref) {
   var title = /*#__PURE__*/React.createElement(Text, {
     use: "headline6"
   }, label);
-  var content = new Content(type, form);
+  var content = new Content$1(type, form);
   return /*#__PURE__*/React.createElement(Dialog, {
     title: title,
     open: true,
@@ -3864,7 +3864,7 @@ var CollectionEditor = function CollectionEditor(props) {
   }
 
   function renderEditor() {
-    var content = new Content(schema, form);
+    var content = new Content$1(schema, form);
 
     switch (layout) {
       case 'TABBED':
@@ -4064,6 +4064,91 @@ var CollectionAPI = function CollectionAPI(url) {
   };
 };
 
+/**
+ * Content Viewer
+ * 
+ * @param {*} props 
+ * @returns 
+ */
+
+var ContentViewer = function ContentViewer(props) {
+  var content = props.content;
+  if (!content) return /*#__PURE__*/React.createElement("div", null, "No Content...");
+  var sections = content.sections();
+  var value = content.value();
+  console.log(value);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "content-viewer"
+  }, sections.map(function (section) {
+    var title = section.title,
+        fields = section.fields;
+    return /*#__PURE__*/React.createElement("section", {
+      key: title,
+      className: "content-viewer"
+    }, /*#__PURE__*/React.createElement("header", null, title), /*#__PURE__*/React.createElement("main", null, fields.map(function (field) {
+      return /*#__PURE__*/React.createElement(FieldViewer, {
+        key: field.id,
+        field: field,
+        value: value[field.id]
+      });
+    })));
+  }));
+};
+/**
+ * Field Viewer
+ * @param {} props 
+ * @returns 
+ */
+
+var FieldViewer = function FieldViewer(props) {
+  var field = props.field,
+      value = props.value;
+  var type = field.type,
+      label = field.label;
+  console.log('FieldViewer', field, value);
+
+  switch (type) {
+    case TYPES.STRING:
+      return /*#__PURE__*/React.createElement(Property, {
+        label: label,
+        value: value
+      });
+
+    case TYPES.ENTITY:
+      return /*#__PURE__*/React.createElement(EntityViewer, {
+        field: field,
+        value: value
+      });
+
+    default:
+      return /*#__PURE__*/React.createElement("div", null, label);
+  }
+};
+/**
+ * EntityViewer
+ */
+
+
+var EntityViewer = function EntityViewer(props) {
+  var field = props.field,
+      value = props.value;
+  var item = field.item,
+      label = field.label;
+  var content = new Content(item, value);
+  var form = content.form();
+  var fields = Object.keys(form).map(function (key) {
+    return form[key];
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "entity-viewer"
+  }, /*#__PURE__*/React.createElement("header", null, label), /*#__PURE__*/React.createElement("main", null, fields.map(function (field) {
+    return /*#__PURE__*/React.createElement(FieldViewer, {
+      field: field,
+      value: value[field.id]
+    });
+  })));
+};
+
 function _catch(body, recover) {
   try {
     var result = body();
@@ -4245,10 +4330,11 @@ var TablePage = function TablePage(props) {
       return /*#__PURE__*/React.createElement("aside", {
         className: "table-page"
       }, rowSelected ? /*#__PURE__*/React.createElement(TableRowEditor, {
-        content: new Content(schema, form),
+        content: new Content$1(schema, form),
         filter: editorFilter,
         onChange: change,
-        onClose: closeAside
+        onClose: closeAside,
+        editable: editable
       }) : null, rowChecked ? /*#__PURE__*/React.createElement(TableSelector, {
         schema: schema,
         actions: selectionActions
@@ -4313,6 +4399,7 @@ var TableRowEditor = function TableRowEditor(props) {
   var name = props.name,
       content = props.content,
       filter = props.filter,
+      editable = props.editable,
       onChange = props.onChange,
       onClose = props.onClose;
   return /*#__PURE__*/React.createElement("div", {
@@ -4324,10 +4411,12 @@ var TableRowEditor = function TableRowEditor(props) {
     icon: "close",
     clickable: true,
     action: onClose
-  })), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(ContentEditor, {
+  })), /*#__PURE__*/React.createElement("main", null, editable ? /*#__PURE__*/React.createElement(ContentEditor, {
     content: content,
     onChange: onChange,
     filter: filter
+  }) : /*#__PURE__*/React.createElement(ContentViewer, {
+    content: content
   })));
 };
 /**
@@ -4439,7 +4528,7 @@ var TableFilters = function TableFilters(props) {
     change({});
   }
 
-  var content = new Content(filterSchema, form);
+  var content = new Content$1(filterSchema, form);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
     className: "table-filters",
     title: /*#__PURE__*/React.createElement(Text, null, "Filters")
@@ -5144,5 +5233,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Avatar, Button$1 as Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, Content, ContentEditor, ContentForm, CreateContentDialog$1 as CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TYPES, Tab, TabbedContentEditor, TablePage, Tabs, Text, TextField, TokenField, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadButton, UploadDialog, UploadFile, Uploader, Viewer, isFunction };
+export { Avatar, Button$1 as Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, Content$1 as Content, ContentEditor, ContentForm, CreateContentDialog$1 as CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TYPES, Tab, TabbedContentEditor, TablePage, Tabs, Text, TextField, TokenField, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadButton, UploadDialog, UploadFile, Uploader, Viewer, isFunction };
 //# sourceMappingURL=index.modern.js.map