From 572a63d5de8a03f4e22d4a523edd118ca8bb6eb0 Mon Sep 17 00:00:00 2001
From: Gervwyk <gervwyk@gmail.com>
Date: Wed, 27 Jan 2021 12:56:40 +0200
Subject: [PATCH] feat(docs): Add optionsSelector displayType.

---
 .../blocks/propertiesFormTransformer.js       | 94 ++++++++++++++++++-
 .../blocks/propertiesGetterTransformer.js     | 29 +++++-
 2 files changed, 118 insertions(+), 5 deletions(-)

diff --git a/packages/docs/templates/blocks/propertiesFormTransformer.js b/packages/docs/templates/blocks/propertiesFormTransformer.js
index 8ab1bc420..12589fafd 100644
--- a/packages/docs/templates/blocks/propertiesFormTransformer.js
+++ b/packages/docs/templates/blocks/propertiesFormTransformer.js
@@ -174,7 +174,7 @@ function makeBlockDefinition(propertyName, propertyDescription) {
         block.type = 'ControlledList';
         block.blocks = [
           {
-            id: 'block.properties.options.$',
+            id: `block.properties.${propertyName}.$`,
             type: 'TextInput',
             properties: {
               size: 'small',
@@ -185,6 +185,90 @@ function makeBlockDefinition(propertyName, propertyDescription) {
           },
         ];
         return block;
+      case 'optionsSelector':
+        block.type = 'Box';
+        block.blocks = [
+          {
+            id: '__optionsType',
+            type: 'ButtonSelector',
+            properties: {
+              title: 'Options type',
+              options: ['Primitive', 'Label-value pairs'],
+              size: 'small',
+              label: { span: 8, align: 'right' },
+            },
+          },
+          {
+            id: `block.properties.options`,
+            type: 'ControlledList',
+            properties: {
+              title: 'options:',
+              size: 'small',
+            },
+            blocks: [
+              {
+                id: `block.properties.options.$.primitive`,
+                type: 'TextInput',
+                visible: {
+                  _if: {
+                    test: { _eq: [{ _state: '__optionsType' }, 'Primitive'] },
+                    then: true,
+                    else: false,
+                  },
+                },
+                properties: {
+                  size: 'small',
+                  label: {
+                    disabled: true,
+                  },
+                },
+              },
+              {
+                id: `block.properties.options.$.label`,
+                type: 'TextInput',
+                visible: {
+                  _if: {
+                    test: {
+                      _eq: [{ _state: '__optionsType' }, 'Label-value pairs'],
+                    },
+                    then: true,
+                    else: false,
+                  },
+                },
+                properties: {
+                  size: 'small',
+                  title: 'label',
+                  label: {
+                    span: 8,
+                    align: 'right',
+                  },
+                },
+              },
+              {
+                id: `block.properties.options.$.value`,
+                type: 'TextInput',
+                visible: {
+                  _if: {
+                    test: {
+                      _eq: [{ _state: '__optionsType' }, 'Label-value pairs'],
+                    },
+                    then: true,
+                    else: false,
+                  },
+                },
+                properties: {
+                  size: 'small',
+                  title: 'value',
+                  label: {
+                    span: 8,
+                    align: 'right',
+                  },
+                },
+              },
+            ],
+          },
+        ];
+        return block;
     }
   }
 
@@ -213,9 +297,11 @@ function makeBlockDefinition(propertyName, propertyDescription) {
 
 function transformer(obj) {
   const blockProperties = obj.schema.properties.properties;
-  const blocks = Object.keys(blockProperties).map((key) => {
-    return makeBlockDefinition(key, blockProperties[key]);
-  });
+  const blocks = Object.keys(blockProperties)
+    .sort()
+    .map((key) => {
+      return makeBlockDefinition(key, blockProperties[key]);
+    });
   return blocks;
 }
 
diff --git a/packages/docs/templates/blocks/propertiesGetterTransformer.js b/packages/docs/templates/blocks/propertiesGetterTransformer.js
index aca06151a..d0429ee78 100644
--- a/packages/docs/templates/blocks/propertiesGetterTransformer.js
+++ b/packages/docs/templates/blocks/propertiesGetterTransformer.js
@@ -17,10 +17,14 @@
 function transformer(obj) {
   const blockProperties = obj.schema.properties.properties;
   const styleProperties = [];
+  const optionsSelector = [];
   Object.keys(blockProperties).forEach((key) => {
     if (blockProperties[key].docs && blockProperties[key].docs.displayType === 'style') {
       styleProperties.push(key);
     }
+    if (blockProperties[key].docs && blockProperties[key].docs.displayType === 'optionsSelector') {
+      optionsSelector.push(key);
+    }
   });
   const styleArray = styleProperties.map((name) => {
     const ret = {};
@@ -31,9 +35,32 @@ function transformer(obj) {
     };
     return ret;
   });
+  const optionsArray = optionsSelector.map((name) => {
+    const ret = {};
+    ret[name] = {
+      _if: {
+        test: { _eq: [{ _state: '__optionsType' }, 'Primitive'] },
+        then: {
+          _get: {
+            key: '0.options',
+            from: {
+              '_mql.aggregate': {
+                pipeline: [{ $addFields: { options: '$options.primitive' } }],
+                on: [{ _state: 'block.properties' }],
+              },
+            },
+          },
+        },
+        else: {
+          _state: 'block.properties.options',
+        },
+      },
+    };
+    return ret;
+  });
   const assignArray = [{ _state: 'block.properties' }];
   return {
-    '_object.assign': assignArray.concat(styleArray),
+    '_object.assign': assignArray.concat(styleArray, optionsArray),
   };
 }