@hipay/hipay-material-ui 3.12.1 → 3.12.3-beta.0

package/src/HiSelect/HiSelect.md

@@ -1,441 +0,0 @@
-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 HiButton from '../HiButton';
-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/>
-```