@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/HiStepper/HiStep.js

@@ -0,0 +1,192 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import Step from '@material-ui/core/Step';
+import StepButton from '@material-ui/core/StepButton';
+import StepContent from '@material-ui/core/StepContent';
+import StepLabel from '@material-ui/core/StepLabel';
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+import Remove from '@material-ui/icons/Remove';
+import DefaultIndicator from "./DefaultIndicator";
+
+/**
+ * HiStepIcon used internally by HiStep
+ */
+const HiStepIcon = ({ color, indicator, status }) => {
+
+    // get icon style from color
+    const style = useMemo(() => ({
+        backgroundColor: color,
+        color: "#fff",
+        borderRadius: "50%",
+        width: 20,
+        height: 20,
+        lineHeight: "20px",
+        fontWeight: 600,
+        fontSize: 13,
+    }), [color]);
+
+    // get component from status
+    const StepIconComponent = useMemo(() => {
+        switch (status)
+        {
+            case "done":
+                return Check;
+            case "error":
+                return Close;
+            case "warning":
+                return Remove;
+            case "in_progress":
+            default:
+                return props => <div {...props}>{indicator}</div>;
+        }
+    }, [status, indicator]);
+
+    return <StepIconComponent style={style} />;
+};
+
+/**
+ * Custom style for StepButton
+ */
+const useStepButtonStyle = makeStyles(theme => ({
+    root: {
+        fontFamily: theme.typography.fontFamily,
+    },
+    vertical: {
+        marginBottom: 'auto',
+    },
+}));
+
+/**
+ * Custom style for StepContent
+ */
+const useStepContentStyle = makeStyles(theme => ({
+    root: {
+        marginLeft: 9,
+        marginTop: 0,
+        textAlign: "left",
+        borderLeft: `2px solid ${theme.palette.neutral.light}`,
+    },
+    last: {
+        borderLeft: "none",
+    },
+}));
+
+/**
+ * Custom style for StepLabel
+ */
+const useStepLabelStyle = makeStyles((theme) => ({
+    label: {
+        ...theme.typography.button,
+        fontWeight: '600 !important',
+        color: "inherit !important",
+        fontSize: '13px'
+    },
+    active: {},
+    completed: {},
+}));
+
+const HiStep = React.forwardRef(
+    (props, ref) => {
+
+        const {
+            content,
+            disabled,
+            indicator,
+            label,
+            onClick,
+            status,
+            ...others
+        } = props;
+
+        const theme = useTheme();
+        const stepButtonClasses = useStepButtonStyle(props);
+        const stepContentClasses = useStepContentStyle(props);
+        const stepLabelClasses = useStepLabelStyle(props);
+
+        const color = useMemo(() => {
+            switch (status)
+            {
+                case "done":
+                    return theme.palette.positive.main;
+                case "error":
+                    return theme.palette.negative.main;
+                case "in_progress":
+                    return theme.palette.primary.main;
+                case "warning":
+                    return theme.palette.middle.main;
+                default:
+                    return disabled ? theme.palette.text.disabled : theme.palette.neutral.light;
+            }
+        }, [status, disabled]);
+
+        // set label color
+        const stepLabelStyle = useMemo(() => ({ color }), [color]);
+
+        const StepIconProps = useMemo(() => ({
+            icon: <HiStepIcon color={color} indicator={indicator} status={status}/>,
+        }), [color, indicator, status]);
+
+        return(
+            <Step
+                ref={ref}
+                completed={status === "done"}
+                disabled={disabled}
+                {...others}
+            >
+                <StepButton
+                    classes={stepButtonClasses}
+                    onClick={onClick}
+                >
+                    <StepLabel
+                        classes={stepLabelClasses}
+                        StepIconProps={StepIconProps}
+                        style={stepLabelStyle}
+                    >
+                        {label}
+                    </StepLabel>
+                </StepButton>
+                {content && (
+                    <StepContent
+                        classes={stepContentClasses}
+                    >
+                        {content}
+                    </StepContent>
+                )}
+            </Step>
+        )
+    }
+);
+
+HiStep.propTypes = {
+    ...Step.propTypes,
+    /**
+     * Contenu de l'étape, composant à afficher à l'ouverture del'étape
+     */
+    content: PropTypes.any,
+    /**
+     * Désactive le bouton de l'étapes
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Caractère à afficher dans l'icône lorsque le statut n'est pas défini ou in_progress
+     */
+    indicator: PropTypes.node,
+    /**
+     * Intitulé de l'étape
+     */
+    label: PropTypes.string,
+    /**
+     * Status de l'étape
+     */
+    status: PropTypes.oneOf(["done", "error", "in_progress", "warning"]),
+};
+HiStep.defaultProps = {
+    /**
+     * Default indicator
+     */
+    indicator: <DefaultIndicator />
+};
+
+export default HiStep;

package/src/HiStepper/HiStepper.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import StepConnector from '@material-ui/core/StepConnector';
+
+const HiStepConnector = withStyles(theme => ({
+    line: {
+        border: 0,
+        backgroundColor: theme.palette.neutral.light,
+        borderRadius: 2,
+        width: 2,
+        marginLeft: -3,
+        marginTop: -1,
+    },
+}))(StepConnector);
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        padding: 0,
+    },
+}));
+
+const HiStepper = React.forwardRef(
+    ({ children, ...props }, ref) => {
+
+        const classes = useStyles(props);
+
+        return (
+            <Stepper
+                ref={ref}
+                classes={classes}
+                connector={<HiStepConnector />}
+                nonLinear={true}
+                orientation="vertical"
+                {...props}
+            >
+                {children}
+            </Stepper>
+        );
+    }
+);
+
+HiStepper.propTypes = {};
+HiStepper.defaultProps = {};
+
+export default HiStepper;

package/src/HiStepper/HiStepper.md

@@ -0,0 +1,238 @@
+HiStepper example:
+
+Le composant HiStep prend une props "status" correspondant au statut de l'étape.
+
+["in_progress", "done", "warning", "error"]
+
+Exemple d'utilisation classique d'étapes non linéaires ( il n'est pas nécessaire de résoudre les étapes dans l'ordre ).
+
+```js
+import React from 'react';
+import { useCounter, useMap } from 'react-use';
+import Typography from '@material-ui/core/Typography';
+
+import HiButton from '../HiButton';
+import HiStepper, { HiStep } from '../HiStepper';
+
+const steps = [
+    {
+      content: <Typography>This is a text.</Typography>,
+      label: "Step 1",
+    },
+    {
+      content: <Typography>This is a text.</Typography>,
+      label: "Step 2",
+    },
+    {
+      content: <Typography>This is a text.</Typography>,
+      label: "Step 3",
+    },
+    {
+      content: <Typography>This is a text.</Typography>,
+      label: "Step 4",
+    },
+];
+
+function HiSteppers() {
+    
+    // Step statuses
+    const [status, {set, reset: resetStatus }] = useMap({ 2: "warning", 3: "error" });
+    const [activeStep, { inc, dec, reset: resetActiveStep, set: setActiveStep }] = useCounter(0, 4, 0); // counter from 0 to 3
+
+    const handleClick = index => e => setActiveStep(index);
+    
+    const handleComplete = () => set(activeStep, "done");
+    
+    const handleNext = () => inc();
+    
+    const handlePrevious = () => dec();
+    
+    const handleReset = () => {
+        resetActiveStep();
+        resetStatus();
+    };
+    
+    const handleStart = () => set(activeStep, "in_progress");
+
+
+    return (
+        <div>
+            <HiStepper
+                activeStep={activeStep}
+            >
+                {steps.map((step, index) => (
+                    <HiStep
+                        key={index}
+                        onClick={handleClick(index)}
+                        content={(
+                            <div>
+                                {step.content}
+                                <div>
+                                    <HiButton onClick={handlePrevious}>Previous</HiButton>
+                                    <HiButton onClick={handleNext}>Next</HiButton>
+                                    {!status[index] && <HiButton onClick={handleStart}>Start step</HiButton>}
+                                    {status[index] === "in_progress" && <HiButton onClick={handleComplete}>Complete step</HiButton>}
+                                    {status[index] === "warning" && <HiButton onClick={handleComplete}>Fix warnings</HiButton>}
+                                    {status[index] === "error" && <HiButton onClick={handleComplete}>Fix errors</HiButton>}
+                                </div>
+                            </div>
+                        )}
+                        indicator={index+1}
+                        label={step.label}
+                        status={status[index]}
+                    />
+                 ))}
+            </HiStepper>
+            <div>
+                <HiButton onClick={handleReset}>Reset</HiButton>
+            </div>
+        </div>
+    );
+}
+;<HiSteppers/>
+```
+
+Exemple d'utilisation classique d'étapes linéaires ( il est nécessaire de résoudre les étapes dans l'ordre ).
+
+```js
+import React from 'react';
+import { useCounter } from 'react-use';
+import Typography from '@material-ui/core/Typography';
+
+import HiButton from '../HiButton';
+import HiStepper, { HiStep } from '../HiStepper';
+import HiMap from '../HiMap';
+
+const steps = [
+    {
+        indicator: "A",
+        content: <Typography>This is a text.</Typography>,
+        label: "Step 1 with text",
+    },
+    {
+        indicator: "B",
+        content: <HiMap address={"74 Boulevard de la Prairie au Duc, 44200 Nantes"}/>,
+        label: "Step 2 with component",
+    },
+    {
+        indicator: "C",
+        label: "Step 3 empty",
+    },
+    {
+        indicator: "D",
+        content: <Typography>This is a text.</Typography>,
+        label: "Step 4",
+    }
+];
+
+function HiSteppers() {
+    
+    // Step statuses
+    const [activeStep, { inc, dec, reset: resetActiveStep, set: setActiveStep }] = useCounter(0, 4, 0); // counter from 0 to 4
+        
+    const handleClick = index => e => setActiveStep(index);
+        
+    const handleNext = () => inc();
+    
+    const handlePrevious = () => dec();
+    
+    const handleReset = () => resetActiveStep();
+
+    return (
+        <div>
+            <HiStepper
+                activeStep={activeStep}
+            >
+                {steps.map((step, index) => (
+                    <HiStep
+                        key={index}
+                        indicator={step.indicator}
+                        content={step.content}
+                        label={step.label}
+                        onClick={handleClick(index)}
+                        status={activeStep === index ? "in_progress" : index < activeStep ? "done" : null}
+                        disabled={index > activeStep}
+                    />
+                 ))}
+            </HiStepper>
+            <div>
+                <HiButton onClick={handleReset}>Reset</HiButton>
+                <HiButton onClick={handlePrevious}>Previous</HiButton>
+                <HiButton onClick={handleNext}>Next</HiButton>
+            </div>
+        </div>
+    );
+}
+;<HiSteppers/>
+```
+Exemple de HiStep sans indicator
+```js
+import React from 'react';
+import { useCounter } from 'react-use';
+import Typography from '@material-ui/core/Typography';
+
+import HiButton from '../HiButton';
+import HiStepper, { HiStep } from '../HiStepper';
+import HiMap from '../HiMap';
+
+const steps = [
+    {
+        indicator: "A",
+        content: <Typography>This is a text.</Typography>,
+        label: "Step 1 with text",
+    },
+    {
+        indicator: "B",
+        content: <HiMap address={"74 Boulevard de la Prairie au Duc, 44200 Nantes"}/>,
+        label: "Step 2 with component",
+    },
+    {
+        indicator: "C",
+        label: "Step 3 empty",
+    },
+    {
+        indicator: "D",
+        content: <Typography>This is a text.</Typography>,
+        label: "Step 4",
+    }
+];
+
+function HiSteppers() {
+    
+    // Step statuses
+    const [activeStep, { inc, dec, reset: resetActiveStep, set: setActiveStep }] = useCounter(0, 4, 0); // counter from 0 to 4
+        
+    const handleClick = index => e => setActiveStep(index);
+        
+    const handleNext = () => inc();
+    
+    const handlePrevious = () => dec();
+    
+    const handleReset = () => resetActiveStep();
+
+    return (
+        <div>
+            <HiStepper
+                activeStep={activeStep}
+            >
+                {steps.map((step, index) => (
+                    <HiStep
+                        key={index}
+                        content={step.content}
+                        label={step.label}
+                        onClick={handleClick(index)}
+                        status={activeStep === index ? "in_progress" : index < activeStep ? "done" : null}
+                        disabled={index > activeStep}
+                    />
+                 ))}
+            </HiStepper>
+            <div>
+                <HiButton onClick={handleReset}>Reset</HiButton>
+                <HiButton onClick={handlePrevious}>Previous</HiButton>
+                <HiButton onClick={handleNext}>Next</HiButton>
+            </div>
+        </div>
+    );
+}
+;<HiSteppers/>
+```

package/src/HiStepper/index.js

@@ -0,0 +1,2 @@
+export { default } from './HiStepper';
+export { default as HiStep } from './HiStep';

package/src/HiSwitch/HiSwitch.js

@@ -0,0 +1,227 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import SwitchBase from '@material-ui/core/internal/SwitchBase';
+import Check from '@material-ui/icons/Check';
+import { capitalize } from '../utils/helpers';
+import { withStyles } from '@material-ui/core/styles';
+
+export const styles = theme => ({
+    root: {
+        display: 'inline-flex',
+        width: 62,
+        position: 'relative',
+        flexShrink: 0,
+        zIndex: 0,
+    },
+    bar: {
+        borderRadius: 7,
+        display: 'block',
+        position: 'absolute',
+        width: 34,
+        height: 14,
+        top: '50%',
+        marginTop: -7,
+        left: '50%',
+        marginLeft: -17,
+        transition: theme.transitions.create(['opacity', 'background-color'], {
+            duration: theme.transitions.duration.shortest,
+        }),
+        backgroundColor: theme.palette.type === 'light' ? theme.palette.neutral.main : '#fff',
+        opacity: theme.palette.type === 'light' ? 0.38 : 0.3,
+    },
+    icon: {
+        boxShadow: theme.shadows[1],
+        width: 20,
+        height: 20,
+        borderRadius: '50%',
+        backgroundColor: theme.palette.background2,
+        color: theme.palette.background2,
+        padding: 2,
+    },
+    iconDisabled: {
+        backgroundColor:
+            theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+        color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
+        '&:not($iconChecked)': {
+            color:
+                theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+        },
+    },
+    // For SwitchBase
+    switchBaseRoot: {
+        zIndex: 1,
+        color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
+        transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shortest,
+        }),
+        height: 40,
+        width: 40,
+    },
+    disabled: {
+        color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+        '& + $bar': {
+            backgroundColor: theme.palette.type === 'light' ? '#000' : '#fff',
+            opacity: theme.palette.type === 'light' ? 0.12 : 0.1,
+        },
+    },
+    iconChecked: {},
+    iconCheckedPrimary: {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+    },
+    iconCheckedSecondary: {
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.secondary.contrastText,
+    },
+    iconCheckedPositive: {
+        backgroundColor: theme.palette.positive.main,
+        color: theme.palette.positive.contrastText,
+    },
+    iconCheckedNegative: {
+        backgroundColor: theme.palette.negative.main,
+        color: theme.palette.negative.contrastText,
+    },
+    iconCheckedMiddle: {
+        backgroundColor: theme.palette.middle.main,
+        color: theme.palette.middle.contrastText,
+    },
+    iconCheckedNeutral: {
+        backgroundColor: theme.palette.neutral.main,
+        color: theme.palette.neutral.contrastText,
+    },
+    checkedPrimary: {
+        transform: 'translateX(18px)',
+        '& + $bar': {
+            backgroundColor: theme.palette.primary.main,
+            opacity: 0.5,
+        },
+    },
+    checkedSecondary: {
+        transform: 'translateX(18px)',
+        '& + $bar': {
+            backgroundColor: theme.palette.secondary.main,
+            opacity: 0.5,
+        },
+    },
+    checkedPositive: {
+        transform: 'translateX(18px)',
+        '& + $bar': {
+            backgroundColor: theme.palette.positive.main,
+            opacity: 0.5,
+        },
+    },
+    checkedNegative: {
+        transform: 'translateX(18px)',
+        '& + $bar': {
+            backgroundColor: theme.palette.negative.main,
+            opacity: 0.5,
+        },
+    },
+    checkedMiddle: {
+        transform: 'translateX(18px)',
+        '& + $bar': {
+            backgroundColor: theme.palette.middle.main,
+            opacity: 0.5,
+        },
+    },
+    checkedNeutral: {
+        transform: 'translateX(18px)',
+        '& + $bar': {
+            backgroundColor: theme.palette.neutral.main,
+            opacity: 0.5,
+        },
+    },
+});
+
+function HiSwitch(props) {
+    const { classes, className, checked, color, disabled, ...other } = props;
+
+    const isHiColor = [
+        'primary',
+        'secondary',
+        'positive',
+        'negative',
+        'middle',
+        'neutral',
+    ].includes(color);
+
+    const iconClass = classNames(classes.icon, {
+        [classes.iconChecked]: checked,
+        [classes.iconCheckedNeutral]: !disabled && checked && !isHiColor,
+        [classes[`iconChecked${capitalize(color)}`]]: !disabled && checked && isHiColor,
+        [classes.iconDisabled]: disabled,
+    });
+
+    const icon = <Check className={iconClass} />;
+
+    return (
+        <div className={classNames(classes.root, className)}>
+            <SwitchBase
+                type="checkbox"
+                icon={icon}
+                classes={{
+                    root: classes.switchBaseRoot,
+                    checked:
+                        isHiColor && !disabled
+                            ? classes[`checked${capitalize(color)}`]
+                            : classes.checkedNeutral,
+                    disabled: classes.disabled,
+                }}
+                checkedIcon={icon}
+                checked={checked}
+                disabled={disabled}
+                inputProps={{ value: checked ? "on" : "off" }}
+                {...other}
+            />
+            <div className={classes.bar} />
+        </div>
+    );
+}
+
+HiSwitch.propTypes = {
+    /**
+     * If `true`, the component is checked.
+     */
+    checked: PropTypes.bool,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     */
+    color: PropTypes.oneOf([
+        'inherit',
+        'primary',
+        'secondary',
+        'action',
+        'error',
+        'disabled',
+        'positive',
+        'negative',
+        'middle',
+        'neutral',
+    ]),
+    /**
+     * If `true`, the switch will be disabled.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Callback fired when the state is changed.
+     *
+     * @param {object} event The event source of the callback
+     * @param {boolean} checked The `checked` value of the switch
+     */
+    onChange: PropTypes.func,
+};
+
+HiSwitch.defaultProps = {
+    color: 'inherit',
+};
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiSwitch' })(HiSwitch);