@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/HiSelect/HiSelect.md

@@ -0,0 +1,440 @@
+HiSelect example:
+
+```js
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import HiSwitch from '../HiSwitch';
+import Tag from 'mdi-material-ui/Tag';
+
+
+class HiSelectExample extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            alert: null,
+            value: 1,
+            multiple: false,
+            hasAll: false,
+            sort: false,
+            sortAppendList: [],
+            hideCheckbox: false,
+            searchable: false,
+            startAdornment: false,
+            staticPosition: false,
+            disabled: false,
+            error: false,
+            type: 'icon',
+            onlySelectContent: false,
+            hiSearchInputPropsDisabled: false,
+            displayAlert: false,
+        };
+    }
+    
+    handleClickStartAdornment() {
+        // eslint-disable-next-line no-alert
+        alert('Click sur le startAdornment');
+    };
+
+    handleSubmit() {
+        // eslint-disable-next-line no-alert
+        alert('Formulaire soumis');
+    };
+    
+    render () {
+        const { classes } = this.props;
+        const {
+            value,
+            multiple,
+            hasAll,
+            sort,
+            sortAppendList,
+            hideCheckbox,
+            searchable,
+            staticPosition,
+            startAdornment,
+            disabled,
+            error,
+            type,
+            reset,
+            onlySelectContent,
+            hiSearchInputPropsDisabled,
+            displayAlert,
+            alert,
+        } = this.state;
+                
+        const optionsA = [
+            { id: 1, label: 'Carte de crédit', labelHighlight: '<strong>Carte</strong> de crédit' },
+            { id: 2, label: 'Carte de débit' },
+            { id: 3, label: 'Opération bancaire en temps réel - looooooooooooooooooooooooooooooooooooooooooong label' },
+            { id: 4, label: 'Portefeuille électronique' },
+            { id: 5, label: 'Carte prépayée' },
+            { id: 6, label: 'Facture en cours' },
+            { id: 7, label: 'Image par défaut' },
+            { id: 8, label: 'Consommation des crédits' },
+            { id: 9, label: 'Multi-paiement' },
+            { id: 10, label: 'Carte cadeau' },
+            { id: 11, label: 'First element sortable' },
+        ];
+        
+        const options = optionsA.map((item) => {
+            return {
+                ...item,
+                ...(type === 'icon' && {
+                    type: 'icon',
+                    icon: 'credit_card',
+                    color: 'primary',
+                }),
+                ...(type === 'iconComponent' && {
+                    type: 'icon',
+                    icon: <Tag/>,
+                }),
+                ...(type === 'image' && {
+                    type: 'image',
+                    img: '/static/hmu/images/countries/us.svg',
+                }),
+                ...(type === '' && {
+                    type: 'text',
+                }),
+            };
+        });
+
+        options[6].img = '/static/hmu/images/countries/unknown.svg';
+        options[6].fallbackImage = '/static/hmu/images/countries/ad.svg';
+        
+        let effectiveType = type;
+        if (type === 'iconComponent') {
+            effectiveType = 'icon';
+        }
+        
+        return (<div>
+        <Box display="block" m={1}>
+            <HiSelect
+                id="paymentMethod"     
+                name="paymentMethod"    
+                value={this.state.value}
+                onChange={(e, v) => this.setState({ value: v })}
+                options={options}
+                type={effectiveType}
+                iconAll="fa-credit-card"
+                translations={{
+                    all: 'Tout',
+                    n_items_selected: '%s éléments sélectionnés',
+                }}
+                label="test"
+                hiSelectableListProps={{
+                    type: 'icon',
+                    hideCheckbox,
+                    sort,
+                    sortAppendList,
+                }}
+                onSubmit={this.handleSubmit}
+                multiple={multiple}
+                hasAll={hasAll}
+                searchable={searchable}
+                staticPosition={staticPosition}
+                startAdornment={
+                    startAdornment ? (
+                        <div style={{ textAlign: 'center' }}>
+                            <HiButton onClick={this.handleClickStartAdornment}>
+                                Alert
+                            </HiButton>
+                        </div>
+                    ) : undefined
+                }
+                disabled={disabled}
+                error={error}
+                onReset={reset && ((multiple && value.length) || (!multiple && value)) && this.handleReset}
+                alert={alert}
+            />
+            <div>value = {JSON.stringify(value)}</div>
+            <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={multiple}
+                             onChange={(event, checked) =>
+                                 this.setState(prevState => ({
+                                     multiple: checked,
+                                     hasAll: checked ? prevState.hasAll : false,
+                                     value: checked
+                                         ? [prevState.value]
+                                         : prevState.value[0],
+                                 }))
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="multiple"
+                 />
+            </FormGroup>
+            <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={hasAll}
+                             onChange={(event, checked) =>
+                                 this.setState({ hasAll: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="hasAll"
+                     disabled={!multiple}
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={sort}
+                             onChange={(event, checked) =>
+                                 this.setState({ sort: checked, sortAppendList: checked ? ['_all', 10] : [] })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="sort"
+                     disabled={!multiple}
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={hideCheckbox}
+                             onChange={(event, checked) =>
+                                 this.setState({ hideCheckbox: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="hideCheckbox"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={searchable}
+                             onChange={(event, checked) =>
+                                 this.setState({ searchable: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="searchable"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={startAdornment}
+                             onChange={(event, checked) =>
+                                 this.setState({ startAdornment: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="startAdornment"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={staticPosition}
+                             onChange={(event, checked) =>
+                                 this.setState({ staticPosition: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="staticPosition"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={disabled}
+                             onChange={(event, checked) =>
+                                 this.setState({ disabled: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="disabled"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={error}
+                             onChange={(event, checked) =>
+                                 this.setState({ error: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="error"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={type === 'icon'}
+                             onChange={() =>
+                                 this.setState(prevState => { return { ...(prevState.type === 'icon' ? { type: '' } : { type: 'icon' }) }; })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="icon"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={type === 'iconComponent'}
+                             onChange={() =>
+                                 this.setState(prevState => { return { ...(prevState.type === 'iconComponent' ? { type: '' } : { type: 'iconComponent' }) }; })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="iconComponent"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={type === 'image'}
+                             onChange={() =>
+                                 this.setState(prevState => { return { ...(prevState.type === 'image' ? { type: '' } : { type: 'image' }) }; })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="image"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={reset}
+                             onChange={(event, checked) =>
+                                 this.setState({ reset: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="reset"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={onlySelectContent}
+                             onChange={(event, checked) =>
+                                 this.setState({ onlySelectContent: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="onlySelectContent (HiSelectContent)"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={displayAlert}
+                             onChange={(event, checked) =>
+                                 this.handleAlert(checked)
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="Display alert"
+                 />
+             </FormGroup>
+             <FormGroup>
+                 <FormControlLabel
+                     control={
+                         <HiSwitch
+                             checked={hiSearchInputPropsDisabled}
+                             onChange={(event, checked) =>
+                                 this.setState({ hiSearchInputPropsDisabled: checked })
+                             }
+                             color="primary"
+                         />
+                     }
+                     label="Search input disabled"
+                 />
+             </FormGroup>
+        </Box>
+        </div>);
+    }
+}
+;<HiSelectExample />
+```
+
+
+```js
+import React, { useCallback, useState } from 'react';
+import Box from '@material-ui/core/Box';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import HiSwitch from '../HiSwitch';
+import Tag from 'mdi-material-ui/Tag';
+
+import HiSelect from './HiSelect';
+
+const DemoA = props => {
+    
+    const options = [
+        { id: "a", label: "Option A" },
+        { id: "b", label: "Option B" },
+        { id: "c", label: "Option C", icon: <Tag/> },
+        { id: "d", label: "Option D", icon: <Tag/>, hideCheckbox: true },
+        {
+            id: "e",
+            label: "Option E",
+            icon: "favorite_border",
+            hoverIcon: "favorite_border",
+            checkedIcon: "favorite",
+            hideCheckbox: false,
+            color: "secondary",
+            img: "public/assets/countries/fr.svg",
+            type: "image",
+        },
+        { id: "transaction", label: "Transaction", icon: "hi_transaction", hideCheckbox: true },
+        { id: "finance", label: "Finance", icon: "hi_finance", hideCheckbox: true },
+
+    ];
+    
+    const [value, setValue] = useState("a");
+    
+    const handleChange = useCallback((e, v) => setValue(v), [setValue]);
+    
+    return (
+        <HiSelect
+            name="demoA"
+            value={value}
+            options={options}
+            onChange={handleChange}
+            hideCheckbox
+        />
+    );
+};
+<DemoA/>
+```