Add Select, Tabs barStyles

C-D-Lewis · Mar 25, 2024 · df8d197 · df8d197
1 parent 67e4cdc
commit df8d197
Show file tree

Hide file tree

Showing 4 changed files with 593 additions and 499 deletions.
diff --git a/README.md b/README.md
@@ -588,6 +588,8 @@ See `examples/components` for a page displaying all example components.
 * [`Fader`](#fader)
 * [`Pill`](#pill)
 * [`FabricateAttribution`](#fabricateattribution)
+* [`Tabs`](#tabs)
+* [`Select`](#select)
 
 #### `Row`
 
@@ -734,8 +736,8 @@ FabricateAttribution()
 
 Tab bar and tabs components which can be used for horizontal navigation
 between a number of different views. Tabs are specified as key name and a
-function that builds the view. Additional customisation of the tabs themselves
-is available.
+function that builds the view. Additional customisation of the tab bar and
+tabs themselves is available.
 
 ```js
 fabricate('Tabs', {
@@ -748,6 +750,21 @@ fabricate('Tabs', {
     color: 'white',
     backgroundColor: 'green',
   },
+  barStyles: { width: '400px' },
+})
+```
+
+#### `Select`
+
+Slightly styles select component that provides options.
+
+```js
+fabricate('Select', {
+  options: [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Orange', value: 'orange' },
+    { label: 'Lemon', value: 'lemon' },
+  ],
 })
 ```
 

diff --git a/examples/components.html b/examples/components.html
@@ -72,8 +72,17 @@
               color: 'gold',
               backgroundColor: 'green',
             },
-          })
-            .setStyles({ width: '400px' }),
+            barStyles: { width: '400px' },
+          }),
+
+          Title().setText('Select'),
+          fabricate('Select', {
+            options: [
+              { label: 'Apple', value: 'apple' },
+              { label: 'Orange', value: 'orange' },
+              { label: 'Lemon', value: 'lemon' },
+            ],
+          }),
         ]);
 
       fabricate.app(App, { showFader: false });

diff --git a/fabricate.js b/fabricate.js
@@ -1026,38 +1026,21 @@ fabricate.declare('FabricateAttribution', () => fabricate('img')
 /**
  * Tabs component built-in component.
  * Child 'tabs' specified with object key names and value builderCb.
- *
- * Example:
- *
- * fabricate('Tabs', {
- *   tabs: {
- *     Home: HomeTab,
- *     'User Settings': SettingsTab,
- *   },
- *   tabStyles: {
- *     color: 'white',
- *     backgroundColor: 'orange',
- *   }
- * })
  */
 fabricate.declare('Tabs', ({
   tabs = {},
+  barStyles = {},
   tabStyles = {},
 } = {}) => {
   // Validation
   const names = Object.keys(tabs);
   const allTabsValid = Object
     .entries(tabs)
-    .every(([name, builderCb]) => typeof name === 'string' && typeof builderCb === 'function');
-  if (names.length === 0 || !allTabsValid) {
-    throw new Error('Invalid \'tabs\' configuration');
-  }
+    .every(([name, cb]) => typeof name === 'string' && typeof cb === 'function');
+  if (names.length === 0 || !allTabsValid) throw new Error('Invalid \'tabs\' configuration');
 
   const stateKey = `fabricate:Tabs:${names.join('_')}`;
-  const {
-    color = 'white',
-    backgroundColor = '#666',
-  } = tabStyles;
+  const { color = 'white', backgroundColor = '#666' } = tabStyles;
 
   /**
    * Tab component.
@@ -1067,10 +1050,7 @@ fabricate.declare('Tabs', ({
    * @param {number} props.index - Tab index.
    * @returns {FabricateComponent} Tab component.
    */
-  const Tab = ({
-    name,
-    index,
-  }) => fabricate('div')
+  const Tab = ({ name, index }) => fabricate('div')
     .setStyles({
       alignItems: 'center',
       textAlign: 'center',
@@ -1098,9 +1078,8 @@ fabricate.declare('Tabs', ({
 
   // Build tabs
   const bar = fabricate('Row')
-    .setChildren([
-      ...names.map((name, index) => Tab({ name, index })),
-    ]);
+    .setStyles({ ...barStyles })
+    .setChildren([...names.map((name, index) => Tab({ name, index }))]);
 
   // Build views
   const views = Object.values(tabs)
@@ -1109,16 +1088,38 @@ fabricate.declare('Tabs', ({
       builderCb,
     ));
 
-  const root = fabricate('Column')
-    .setChildren([
-      bar,
-      ...views,
-    ]);
+  const root = fabricate('Column').setChildren([bar, ...views]);
 
   fabricate.update(stateKey, 0);
   return root;
 });
 
+/**
+ * Select component with options of 'label' and 'value'.
+ */
+fabricate.declare('Select', ({ options = [] } = {}) => {
+  // Validate options
+  if (!options.length || !options.every((p) => typeof p.label === 'string' && !!p.value)) {
+    throw new Error('Invalid \'options\' configuration');
+  }
+
+  const root = fabricate('select')
+    .setStyles({
+      padding: '5px',
+      fontSize: '1rem',
+      maxWidth: '400px',
+    });
+
+  options.forEach((p) => {
+    const option = document.createElement('option');
+    option.value = p.value;
+    option.innerHTML = p.label;
+    root.appendChild(option);
+  });
+
+  return root;
+});
+
 /// //////////////////////////////// Convenience alias / constants /////////////////////////////////
 
 // Convenient alternative