@builder.io/sdk-react-native 0.0.1-32 → 0.0.1-36

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.1-32",
+  "version": "0.0.1-36",
   "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"

package/src/blocks/button.js

@@ -8,10 +8,16 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) =>
   key in obj
-    ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value })
+    ? __defProp(obj, key, {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value,
+      })
     : (obj[key] = value);
 var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
@@ -32,6 +38,7 @@ function Button(props) {
           /* @__PURE__ */ React.createElement(
             View,
             __spreadProps(__spreadValues({}, props.attributes), {
+              role: 'button',
               href: props.link,
               target: props.openLinkInNewTab ? '_blank' : void 0,
             }),
@@ -58,7 +65,7 @@ registerComponent(Button, {
     paddingBottom: '15px',
     paddingLeft: '25px',
     paddingRight: '25px',
-    backgroundColor: '#3898EC',
+    backgroundColor: '#000000',
     color: 'white',
     borderRadius: '4px',
     textAlign: 'center',

package/src/blocks/button.lite.tsx

@@ -9,6 +9,7 @@ export default function Button(props) {
         <>
           <View
             {...props.attributes}
+            role="button"
             href={props.link}
             target={props.openLinkInNewTab ? '_blank' : undefined}
           >

package/src/blocks/columns.js

@@ -29,7 +29,7 @@ function Columns(props) {
     },
     (_a = props.columns) == null
       ? void 0
-      : _a.map(column =>
+      : _a.map((column) =>
           /* @__PURE__ */ React.createElement(
             View,
             {
@@ -107,7 +107,10 @@ registerComponent(Columns, {
                   height: 'auto',
                 },
               },
-              component: { name: 'Text', options: { text: '<p>Enter some text...</p>' } },
+              component: {
+                name: 'Text',
+                options: { text: '<p>Enter some text...</p>' },
+              },
             },
           ],
         },
@@ -120,7 +123,8 @@ registerComponent(Columns, {
         {
           name: 'link',
           type: 'url',
-          helperText: 'Optionally set a url that clicking this column will link to',
+          helperText:
+            'Optionally set a url that clicking this column will link to',
         },
       ],
       defaultValue: [
@@ -170,7 +174,10 @@ registerComponent(Columns, {
                   height: 'auto',
                 },
               },
-              component: { name: 'Text', options: { text: '<p>Enter some text...</p>' } },
+              component: {
+                name: 'Text',
+                options: { text: '<p>Enter some text...</p>' },
+              },
             },
           ],
         },
@@ -220,7 +227,10 @@ registerComponent(Columns, {
                   height: 'auto',
                 },
               },
-              component: { name: 'Text', options: { text: '<p>Enter some text...</p>' } },
+              component: {
+                name: 'Text',
+                options: { text: '<p>Enter some text...</p>' },
+              },
             },
           ],
         },
@@ -247,7 +257,8 @@ registerComponent(Columns, {
       name: 'reverseColumnsWhenStacked',
       type: 'boolean',
       defaultValue: false,
-      helperText: 'When stacking columns for mobile devices, reverse the ordering',
+      helperText:
+        'When stacking columns for mobile devices, reverse the ordering',
       advanced: true,
     },
   ],

package/src/blocks/columns.lite.tsx

@@ -26,7 +26,7 @@ export default function Columns(props) {
 
   return (
     <View className="builder-columns" style={styles.view1}>
-      {props.columns?.map(column => (
+      {props.columns?.map((column) => (
         <View className="builder-column" style={styles.view2}>
           <RenderBlocks blocks={column.blocks} />
         </View>

package/src/blocks/custom-code.js

@@ -22,9 +22,11 @@ function CustomCode(props) {
           document.head.appendChild(newScript);
         } else if (
           !script.type ||
-          ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(
-            script.type
-          )
+          [
+            'text/javascript',
+            'application/javascript',
+            'application/ecmascript',
+          ].includes(script.type)
         ) {
           if (scriptsRun.includes(script.innerText)) {
             continue;
@@ -45,7 +47,8 @@ function CustomCode(props) {
   }, []);
   return /* @__PURE__ */ React.createElement(View, {
     ref: elem,
-    className: 'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : ''),
+    className:
+      'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : ''),
     dangerouslySetInnerHTML: { __html: 'props.code' },
   });
 }

package/src/blocks/custom-code.lite.tsx

@@ -28,9 +28,11 @@ export default function CustomCode(props) {
           document.head.appendChild(newScript);
         } else if (
           !script.type ||
-          ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(
-            script.type
-          )
+          [
+            'text/javascript',
+            'application/javascript',
+            'application/ecmascript',
+          ].includes(script.type)
         ) {
           if (scriptsRun.includes(script.innerText)) {
             continue;
@@ -56,7 +58,9 @@ export default function CustomCode(props) {
   return (
     <View
       ref={elem}
-      className={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}
+      className={
+        'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')
+      }
       dangerouslySetInnerHTML={{ __html: 'props.code' }}
     />
   );

package/src/blocks/embed.js

@@ -22,9 +22,11 @@ function Embed(props) {
           document.head.appendChild(newScript);
         } else if (
           !script.type ||
-          ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(
-            script.type
-          )
+          [
+            'text/javascript',
+            'application/javascript',
+            'application/ecmascript',
+          ].includes(script.type)
         ) {
           if (scriptsRun.includes(script.innerText)) {
             continue;
@@ -68,7 +70,8 @@ registerComponent(Embed, {
     {
       name: 'content',
       type: 'html',
-      defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+      defaultValue:
+        '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
       hideFromUI: true,
     },
   ],

package/src/blocks/embed.lite.tsx

@@ -28,9 +28,11 @@ export default function Embed(props) {
           document.head.appendChild(newScript);
         } else if (
           !script.type ||
-          ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(
-            script.type
-          )
+          [
+            'text/javascript',
+            'application/javascript',
+            'application/ecmascript',
+          ].includes(script.type)
         ) {
           if (scriptsRun.includes(script.innerText)) {
             continue;

package/src/blocks/form.js

@@ -8,10 +8,16 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) =>
   key in obj
-    ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value })
+    ? __defProp(obj, key, {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value,
+      })
     : (obj[key] = value);
 var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
@@ -21,22 +27,24 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
-    var fulfilled = value => {
+    var fulfilled = (value) => {
       try {
         step(generator.next(value));
       } catch (e) {
         reject(e);
       }
     };
-    var rejected = value => {
+    var rejected = (value) => {
       try {
         step(generator.throw(value));
       } catch (e) {
         reject(e);
       }
     };
-    var step = x =>
-      x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    var step = (x) =>
+      x.done
+        ? resolve(x.value)
+        : Promise.resolve(x.value).then(fulfilled, rejected);
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
@@ -67,9 +75,11 @@ function FormComponent(props) {
       const headers = props.customHeaders || {};
       let body;
       const formData = new FormData(el);
-      const formPairs = Array.from(event.currentTarget.querySelectorAll('input,select,textarea'))
-        .filter(el2 => !!el2.name)
-        .map(el2 => {
+      const formPairs = Array.from(
+        event.currentTarget.querySelectorAll('input,select,textarea')
+      )
+        .filter((el2) => !!el2.name)
+        .map((el2) => {
           let value;
           const key = el2.name;
           if (el2 instanceof HTMLInputElement) {
@@ -124,7 +134,12 @@ function FormComponent(props) {
         body = JSON.stringify(json);
       }
       if (contentType && contentType !== 'multipart/form-data') {
-        if (!(sendWithJs && ((_a2 = props.action) == null ? void 0 : _a2.includes('zapier.com')))) {
+        if (
+          !(
+            sendWithJs &&
+            ((_a2 = props.action) == null ? void 0 : _a2.includes('zapier.com'))
+          )
+        ) {
           headers['content-type'] = contentType;
         }
       }
@@ -146,11 +161,14 @@ function FormComponent(props) {
         headers,
         method: props.method || 'post',
       }).then(
-        res =>
+        (res) =>
           __async(this, null, function* () {
             let body2;
             const contentType2 = res.headers.get('content-type');
-            if (contentType2 && contentType2.indexOf('application/json') !== -1) {
+            if (
+              contentType2 &&
+              contentType2.indexOf('application/json') !== -1
+            ) {
               body2 = yield res.json();
             } else {
               body2 = yield res.text();
@@ -194,7 +212,7 @@ function FormComponent(props) {
               }
             }
           }),
-        err => {
+        (err) => {
           const submitErrorEvent = new CustomEvent('submit:error', {
             detail: { error: err },
           });
@@ -219,16 +237,17 @@ function FormComponent(props) {
       action: !props.sendWithJs && props.action,
       method: props.method,
       name: props.name,
-      onSubmit: event => onSubmit(event),
+      onSubmit: (event) => onSubmit(event),
     }),
     ' ',
     props.builderBlock && props.builderBlock.children
       ? /* @__PURE__ */ React.createElement(
           React.Fragment,
           null,
-          (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null
+          (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) ==
+            null
             ? void 0
-            : _b.map(block =>
+            : _b.map((block) =>
                 /* @__PURE__ */ React.createElement(RenderBlock, {
                   block,
                 })
@@ -269,7 +288,11 @@ function FormComponent(props) {
               style: styles.view1,
             },
             ' ',
-            /* @__PURE__ */ React.createElement(Text, null, JSON.stringify(responseData, null, 2)),
+            /* @__PURE__ */ React.createElement(
+              Text,
+              null,
+              JSON.stringify(responseData, null, 2)
+            ),
             ' '
           )
         )
@@ -296,7 +319,9 @@ export { FormComponent as default };
 registerComponent(FormComponent, {
   name: 'Form:Form',
   builtIn: true,
-  defaults: { responsiveStyles: { large: { marginTop: '15px', paddingBottom: '15px' } } },
+  defaults: {
+    responsiveStyles: { large: { marginTop: '15px', paddingBottom: '15px' } },
+  },
   image:
     'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
   inputs: [
@@ -307,7 +332,8 @@ registerComponent(FormComponent, {
         {
           label: 'Send to email',
           value: 'email',
-          helperText: 'Send form submissions to the email address of your choosing',
+          helperText:
+            'Send form submissions to the email address of your choosing',
         },
         {
           label: 'Custom',
@@ -344,8 +370,13 @@ registerComponent(FormComponent, {
       type: 'string',
       defaultValue: 'application/json',
       advanced: true,
-      enum: ['application/json', 'multipart/form-data', 'application/x-www-form-urlencoded'],
-      showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
+      enum: [
+        'application/json',
+        'multipart/form-data',
+        'application/x-www-form-urlencoded',
+      ],
+      showIf:
+        'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
     },
     {
       name: 'method',
@@ -361,18 +392,22 @@ registerComponent(FormComponent, {
       defaultValue: 'unsubmitted',
       helperText:
         'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
-      showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true',
+      showIf:
+        'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true',
     },
     {
       name: 'successUrl',
       type: 'url',
-      helperText: 'Optional URL to redirect the user to on form submission success',
-      showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true',
+      helperText:
+        'Optional URL to redirect the user to on form submission success',
+      showIf:
+        'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true',
     },
     {
       name: 'resetFormOnSubmit',
       type: 'boolean',
-      showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
+      showIf:
+        "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
       advanced: true,
     },
     {
@@ -383,7 +418,10 @@ registerComponent(FormComponent, {
         {
           '@type': '@builder.io/sdk:Element',
           responsiveStyles: { large: { marginTop: '10px' } },
-          component: { name: 'Text', options: { text: '<span>Thanks!</span>' } },
+          component: {
+            name: 'Text',
+            options: { text: '<span>Thanks!</span>' },
+          },
         },
       ],
     },
@@ -404,7 +442,8 @@ registerComponent(FormComponent, {
           '@type': '@builder.io/sdk:Element',
           responsiveStyles: { large: { marginTop: '10px' } },
           bindings: {
-            'component.options.text': 'state.formErrorMessage || block.component.options.text',
+            'component.options.text':
+              'state.formErrorMessage || block.component.options.text',
           },
           component: {
             name: 'Text',
@@ -423,7 +462,10 @@ registerComponent(FormComponent, {
         {
           '@type': '@builder.io/sdk:Element',
           responsiveStyles: { large: { marginTop: '10px' } },
-          component: { name: 'Text', options: { text: '<span>Sending...</span>' } },
+          component: {
+            name: 'Text',
+            options: { text: '<span>Sending...</span>' },
+          },
         },
       ],
     },
@@ -432,7 +474,8 @@ registerComponent(FormComponent, {
       type: 'map',
       valueType: { type: 'string' },
       advanced: true,
-      showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
+      showIf:
+        'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
     },
   ],
   noWrap: true,
@@ -441,22 +484,34 @@ registerComponent(FormComponent, {
     {
       '@type': '@builder.io/sdk:Element',
       responsiveStyles: { large: { marginTop: '10px' } },
-      component: { name: 'Text', options: { text: '<span>Enter your name</span>' } },
+      component: {
+        name: 'Text',
+        options: { text: '<span>Enter your name</span>' },
+      },
     },
     {
       '@type': '@builder.io/sdk:Element',
       responsiveStyles: { large: { marginTop: '10px' } },
-      component: { name: 'Form:Input', options: { name: 'name', placeholder: 'Jane Doe' } },
+      component: {
+        name: 'Form:Input',
+        options: { name: 'name', placeholder: 'Jane Doe' },
+      },
     },
     {
       '@type': '@builder.io/sdk:Element',
       responsiveStyles: { large: { marginTop: '10px' } },
-      component: { name: 'Text', options: { text: '<span>Enter your email</span>' } },
+      component: {
+        name: 'Text',
+        options: { text: '<span>Enter your email</span>' },
+      },
     },
     {
       '@type': '@builder.io/sdk:Element',
       responsiveStyles: { large: { marginTop: '10px' } },
-      component: { name: 'Form:Input', options: { name: 'email', placeholder: 'jane@doe.com' } },
+      component: {
+        name: 'Form:Input',
+        options: { name: 'email', placeholder: 'jane@doe.com' },
+      },
     },
     {
       '@type': '@builder.io/sdk:Element',

package/src/blocks/form.lite.tsx

@@ -31,9 +31,11 @@ export default function FormComponent(props) {
       let body;
       const formData = new FormData(el); // TODO: maybe support null
 
-      const formPairs = Array.from(event.currentTarget.querySelectorAll('input,select,textarea'))
-        .filter(el => !!el.name)
-        .map(el => {
+      const formPairs = Array.from(
+        event.currentTarget.querySelectorAll('input,select,textarea')
+      )
+        .filter((el) => !!el.name)
+        .map((el) => {
           let value;
           const key = el.name;
 
@@ -126,7 +128,7 @@ export default function FormComponent(props) {
           : props.action /* TODO: throw error if no action URL */,
         { body, headers, method: props.method || 'post' }
       ).then(
-        async res => {
+        async (res) => {
           let body;
           const contentType = res.headers.get('content-type');
           if (contentType && contentType.indexOf('application/json') !== -1) {
@@ -135,15 +137,12 @@ export default function FormComponent(props) {
             body = await res.text();
           }
           if (!res.ok && props.errorMessagePath) {
-            /* TODO: allow supplying an error formatter function */ let message = get(
-              body,
-              props.errorMessagePath
-            );
+            /* TODO: allow supplying an error formatter function */ let message =
+              get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== 'string') {
-                /* TODO: ideally convert json to yaml so it woul dbe like             error: - email has been taken */ message = JSON.stringify(
-                  message
-                );
+                /* TODO: ideally convert json to yaml so it woul dbe like             error: - email has been taken */ message =
+                  JSON.stringify(message);
               }
               setFormErrorMessage(message);
             }
@@ -159,7 +158,9 @@ export default function FormComponent(props) {
               if (submitSuccessEvent.defaultPrevented) {
                 return;
               }
-              /* TODO: option to turn this on/off? */ if (props.resetFormOnSubmit !== false) {
+              /* TODO: option to turn this on/off? */ if (
+                props.resetFormOnSubmit !== false
+              ) {
                 formRef.current.reset();
               }
             }
@@ -180,7 +181,7 @@ export default function FormComponent(props) {
             }
           }
         },
-        err => {
+        (err) => {
           const submitErrorEvent = new CustomEvent('submit:error', {
             detail: { error: err },
           });
@@ -205,12 +206,12 @@ export default function FormComponent(props) {
       action={!props.sendWithJs && props.action}
       method={props.method}
       name={props.name}
-      onSubmit={event => onSubmit(event)}
+      onSubmit={(event) => onSubmit(event)}
     >
       {' '}
       {props.builderBlock && props.builderBlock.children ? (
         <>
-          {props.builderBlock?.children?.map(block => (
+          {props.builderBlock?.children?.map((block) => (
             <RenderBlock block={block} />
           ))}
         </>
@@ -222,7 +223,10 @@ export default function FormComponent(props) {
       ) : null}{' '}
       {submissionState() === 'sending' ? (
         <>
-          <BuilderBlocks dataPath="sendingMessage" blocks={props.sendingMessage} />
+          <BuilderBlocks
+            dataPath="sendingMessage"
+            blocks={props.sendingMessage}
+          />
         </>
       ) : null}{' '}
       {submissionState() === 'error' && responseData ? (
@@ -235,7 +239,10 @@ export default function FormComponent(props) {
       ) : null}{' '}
       {submissionState() === 'success' ? (
         <>
-          <BuilderBlocks dataPath="successMessage" blocks={props.successMessage} />
+          <BuilderBlocks
+            dataPath="successMessage"
+            blocks={props.successMessage}
+          />
         </>
       ) : null}{' '}
     </View>

package/src/blocks/image.lite.tsx

@@ -20,14 +20,17 @@ export default function Image(props) {
         <View srcSet={props.srcset} />
       </View>
 
-      {props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length) ? (
+      {props.aspectRatio &&
+      !(props.fitContent && props.builderBlock?.children?.length) ? (
         <View className="builder-image-sizer" style={styles.view3}>
           <Text> </Text>
         </View>
       ) : null}
 
       {props.builderBlock?.children?.length && props.fitContent ? (
-        <Text>{props.children}</Text>
+        <>
+          <Text>{props.children}</Text>
+        </>
       ) : null}
 
       {!props.fitContent ? (

package/src/blocks/img.js

@@ -8,10 +8,16 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) =>
   key in obj
-    ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value })
+    ? __defProp(obj, key, {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value,
+      })
     : (obj[key] = value);
 var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);

package/src/blocks/input.js

@@ -8,10 +8,16 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) =>
   key in obj
-    ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value })
+    ? __defProp(obj, key, {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value,
+      })
     : (obj[key] = value);
 var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
@@ -26,7 +32,8 @@ function FormInputComponent(props) {
   return /* @__PURE__ */ React.createElement(
     View,
     __spreadProps(__spreadValues({}, props.attributes), {
-      key: isEditing() && props.defaultValue ? props.defaultValue : 'default-key',
+      key:
+        isEditing() && props.defaultValue ? props.defaultValue : 'default-key',
       placeholder: props.placeholder,
       type: props.type,
       name: props.name,