ywana-core8 0.0.393 → 0.0.396

package/dist/index.cjs

@@ -1087,7 +1087,10 @@ var DropDown = function DropDown(props) {
       _props$predictive = props.predictive,
       predictive = _props$predictive === void 0 ? false : _props$predictive,
       _props$readOnly3 = props.readOnly,
-      readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3;
+      readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3,
+      _props$verbose = props.verbose,
+      verbose = _props$verbose === void 0 ? true : _props$verbose,
+      onBlur = props.onBlur;
 
   var _useState = React.useState(false),
       open = _useState[0],
@@ -1098,6 +1101,8 @@ var DropDown = function DropDown(props) {
       setLabel = _useState2[1];
 
   React.useEffect(function () {
+    console.log('DD change value', label);
+
     if (Array.isArray(options)) {
       var option = options.find(function (option) {
         return option.value === value;
@@ -1134,14 +1139,14 @@ var DropDown = function DropDown(props) {
     var option = options.find(function (option) {
       return option.value === next;
     });
-    if (onChange) onChange(id, next);
-    setLabel(option.label);
     setOpen(false);
+    var label = verbose ? option.label : "";
+    setLabel(label);
+    if (onChange) onChange(id, next);
   }
 
   function blur() {
-    console.log("BLUR DD");
-    site.clearFocus();
+    if (onBlur) onBlur();
   }
 
   function renderOptions() {
@@ -1205,7 +1210,8 @@ var FORMATS = {
   HTML: 'HTML',
   URL: 'URL',
   IMG: 'IMG',
-  COLOR: 'COLOR'
+  COLOR: 'COLOR',
+  TOKENS: 'TOKENS'
 };
 /**
  * CHECK
@@ -1888,6 +1894,7 @@ var TokenField = function TokenField(_ref) {
       _ref$init = _ref.init,
       init = _ref$init === void 0 ? [] : _ref$init,
       readOnly = _ref.readOnly,
+      options = _ref.options,
       onChange = _ref.onChange;
   var mounted = React.useRef(false);
 
@@ -1899,6 +1906,8 @@ var TokenField = function TokenField(_ref) {
       tokens = _useState2[0],
       setTokens = _useState2[1];
 
+  React.useState(false);
+
   React.useEffect(function () {
     if (mounted.current) {
       if (onChange) {
@@ -1920,6 +1929,12 @@ var TokenField = function TokenField(_ref) {
     setValue(value);
   }
 
+  function changeDropDown(id, value) {
+    var next = tokens.concat(value);
+    setTokens(next);
+    setValue('xxx');
+  }
+
   function onEnter(event) {
     if (event.key === 'Enter') {
       event.preventDefault();
@@ -1946,7 +1961,12 @@ var TokenField = function TokenField(_ref) {
         return remove(index);
       }
     });
-  }), /*#__PURE__*/React__default["default"].createElement("input", {
+  }), options ? /*#__PURE__*/React__default["default"].createElement(DropDown, {
+    onChange: changeDropDown,
+    options: options,
+    predictive: true,
+    verbose: false
+  }) : /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: value,
     onChange: change,
@@ -4104,7 +4124,8 @@ var StringEditor = function StringEditor(_ref6) {
       case FORMATS.COLOR:
         return /*#__PURE__*/React__default["default"].createElement(ColorField, {
           id: id,
-          onChange: change
+          onChange: change,
+          value: value
         });
 
       case FORMATS.HTML:
@@ -4126,6 +4147,15 @@ var StringEditor = function StringEditor(_ref6) {
           readOnly: !editable
         });
 
+      case FORMATS.TOKENS:
+        return /*#__PURE__*/React__default["default"].createElement(TokenField, {
+          id: id,
+          label: label,
+          onChange: change,
+          readOnly: !editable,
+          options: options
+        });
+
       default:
         return options ? /*#__PURE__*/React__default["default"].createElement(DropDown, {
           outlined: outlined,