Merge branch 'develop' into master

voidagency · Oct 20, 2020 · 5021bce · 5021bce
2 parents c19a4b0 + 063dc88
commit 5021bce
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 35 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.modern.js b/dist/index.modern.js
diff --git a/dist/index.modern.js.map b/dist/index.modern.js.map
diff --git a/src/components/Form/README.md b/src/components/Form/README.md
@@ -61,5 +61,6 @@ Select components are used for collecting user provided information from a list
 
 | props         | Description   | type   | valeur par défaut   |
 |---------------|---------------|--------|---------------------|
+| options       | An object of the form `"{" [ opt1: "{" "value": val1, [ attr: attr_value ].. "}" ].. "}"`. The Object key is used as the option's name, the rest of its sub-keys are set as attributes to the option. In the presense of this prop, the `children` are not rendered. | object of objects with a mandatory `value` key | `undefined` |
 | variant         | La nom ou le chemin de `variant` pour styler  le composant via `Theme Object` | `string`   | `radio`   |
 | Box's props         | Vous pouvez utiliser toutes le proporiétés de `Box`   |    | -   |
diff --git a/src/components/Form/Select.js b/src/components/Form/Select.js
@@ -38,22 +38,17 @@ const SelectIcon = ({ icon }) => {
     </Flex>;
 };
 
-const Select = forwardRef(({ variant, ...props }, ref) => {
+const Select = forwardRef(({ variant, children, options, ...props }, ref) => {
 
     const selectRef = ref || useRef();
 
-    const handleOnChange = (ev) => {
-        const value = selectRef.current.value;
-        props.onChange(value);
-    }
     return <Flex {...getMarginProps(props)} {...getLayoutProps(props)} __css={{ width: 'fit-content',
     position: 'relative' }}>
         <Box
             ref={selectRef}
             as='select'
             variant={`select${variant ? '.' + variant : ''}`}
             {...omitMarginProps(props)}
-            onChange={handleOnChange}
             __css={{
                 display: 'block',
                 width: 'auto',
@@ -72,9 +67,17 @@ const Select = forwardRef(({ variant, ...props }, ref) => {
                     outline: 'none',
                     boxShadow: t => `0 0 0 2px ${t.colors.primary500}`,
                 }
-            }}
-        />
-        <SelectIcon {...props} />
+            }} >
+
+            { options
+                ? Object.entries(options).map( ([option, attrs], i) => (
+                    <option key={i} {...attrs}>{option}</option>
+                ) )
+                : children
+            }
+
+        </Box>
+        <SelectIcon />
 
     </Flex>
 });

diff --git a/src/components/Form/stories/select.stories.js b/src/components/Form/stories/select.stories.js
@@ -36,6 +36,29 @@ export const DefaultSelect = () => {
         </Box>);
 }
 
+export const UsingOptionsProp = () => {
+    return (
+        <Box p="medium">
+            <Label alignItems="center">Villes</Label>
+            <Select
+                id='ville'
+                name='ville'
+                mt="small"
+                options={{
+                    "Agadir": {value: "Agadir"},
+                    "EL Jadida": {value: "EL Jadida"},
+                    "Casablanca": {
+                        value: "Casablanca",
+                    },
+                    "Tanger": {
+                        value: "Tanger",
+                        disabled: true,
+                    },
+                }}
+                />
+        </Box>);
+}
+
 export const CustomDownarrow = () => {
     return (
         <Box p="medium">