ywana-core8 0.0.237 → 0.0.241

package/__reactpreview__/Wrapper.tsx

@@ -1,14 +1,23 @@
 import React from "react";
 
 // You can import global CSS files here.
-import '../src/css/html.css'
-import '../src/css/theme.css'
-import 'material-design-icons-iconfont/dist/material-design-icons.css'
-
+import "../src/css/html.css";
+import "../src/css/theme.css";
+import "material-design-icons-iconfont/dist/material-design-icons.css";
 
 // No-op wrapper.
 export const Wrapper: React.FC = ({ children }) => {
-
-
-  return <div style={{ padding: "2rem" }}>{children}</div>;
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        padding: "2rem",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      {children}
+    </div>
+  );
 };

package/dist/index.cjs

@@ -885,7 +885,7 @@ var TextField = function TextField(props) {
   }
 
   function focus() {
-    if (site) {
+    if (site && site.changeFocus) {
       site.changeFocus({
         lose: function lose() {// DO NOTHING
         }
@@ -899,7 +899,7 @@ var TextField = function TextField(props) {
 
   var borderStyle = outlined ? "textfield-outlined" : "textfield";
   var labelStyle = label ? "" : "no-label";
-  var style = labelStyle + " " + borderStyle;
+  var style = labelStyle + " " + borderStyle + " textfield-" + type;
   var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "" + style,
@@ -923,6 +923,79 @@ var TextField = function TextField(props) {
     className: "bar"
   }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
 };
+/**
+ * Text Area
+ */
+
+var TextArea = function TextArea(props) {
+  var site = React.useContext(SiteContext);
+  var id = props.id,
+      _props$type2 = props.type,
+      type = _props$type2 === void 0 ? 'text' : _props$type2,
+      label = props.label,
+      placeholder = props.placeholder,
+      value = props.value,
+      _props$readOnly2 = props.readOnly,
+      readOnly = _props$readOnly2 === void 0 ? false : _props$readOnly2,
+      _props$canClear2 = props.canClear,
+      canClear = _props$canClear2 === void 0 ? true : _props$canClear2,
+      onChange = props.onChange,
+      onEnter = props.onEnter,
+      onClick = props.onClick;
+
+  function onKeyPress(event) {
+    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+
+    if (key == 13) {
+      if (onEnter) onEnter();
+    }
+  }
+
+  function change(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    var value = event.target.value;
+    console.log(value);
+    if (onChange) onChange(id, value);
+  }
+
+  function focus() {
+    if (site && site.changeFocus) {
+      site.changeFocus({
+        lose: function lose() {// DO NOTHING
+        }
+      });
+    }
+  }
+
+  function clear() {
+    if (onChange) onChange(id, "");
+  }
+
+  var labelStyle = label ? "" : "no-label";
+  var style = "textarea " + labelStyle + " textarea-" + type;
+  var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "" + style,
+    onClick: onClick
+  }, /*#__PURE__*/React__default["default"].createElement("textarea", {
+    id: id,
+    placeholder: placeholder,
+    value: value,
+    required: true,
+    onChange: change,
+    onKeyDown: onKeyPress,
+    onFocus: focus,
+    readOnly: readOnly
+  }), !readOnly && canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    size: "small",
+    action: clear
+  }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "bar"
+  }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
+};
 /**
  * Dropdown
  */
@@ -936,8 +1009,8 @@ var DropDown = function DropDown(props) {
       onChange = props.onChange,
       _props$canFilter = props.canFilter,
       canFilter = _props$canFilter === void 0 ? false : _props$canFilter,
-      _props$readOnly2 = props.readOnly,
-      readOnly = _props$readOnly2 === void 0 ? false : _props$readOnly2;
+      _props$readOnly3 = props.readOnly,
+      readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3;
 
   var _useState = React.useState(false),
       open = _useState[0],
@@ -968,7 +1041,7 @@ var DropDown = function DropDown(props) {
   }
 
   function toggle() {
-    if (site) {
+    if (site && site.changeFocus) {
       site.changeFocus({
         lose: function lose() {
           setOpen(false);
@@ -4833,7 +4906,7 @@ var TableEditor = function TableEditor(props) {
 
   function renderGroupLabel(groupName) {
     var grouper = schema[groupBy];
-    if (!groupName) return "...";
+    if (!groupName || !grouper) return "";
 
     if (grouper.options) {
       var options = CHECK['isFunction'](grouper.options) ? grouper.options() : grouper.options;
@@ -4916,8 +4989,8 @@ var TableEditor = function TableEditor(props) {
       return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
         key: groupName
       }, /*#__PURE__*/React__default["default"].createElement(Header, {
-        title: groupName
-      }, renderGroupLabel(groupName), /*#__PURE__*/React__default["default"].createElement("span", {
+        title: renderGroupLabel(groupName)
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "size"
       }, groupSize)), /*#__PURE__*/React__default["default"].createElement(DataTable, _extends({}, table, {
         onRowSelection: select,
@@ -5488,6 +5561,7 @@ exports.TabbedContentEditor = TabbedContentEditor;
 exports.TablePage = TablePage;
 exports.Tabs = Tabs;
 exports.Text = Text$1;
+exports.TextArea = TextArea;
 exports.TextField = TextField;
 exports.Thumbnail = Thumbnail;
 exports.TokenField = TokenField;