@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTCarousel/components/Slider/layout.js

@@ -0,0 +1,110 @@
+import React, { PureComponent, Fragment } from 'react';
+import { number, shape, bool, func, objectOf, string, node, arrayOf, oneOfType } from 'prop-types';
+import Legend from '../Legend';
+import Button from '../Button';
+import styles from './styles.module.scss';
+import Slide from './component/Slide';
+import { INSIDE } from './constants';
+class Slider extends PureComponent {
+  render() {
+    const {
+      transitionSlide,
+      slides,
+      containerWidth,
+      slideArray,
+      shouldAnimate,
+      index,
+      withBorder,
+      handleLegend,
+      handlePrevSlide,
+      handleNextSlide,
+      timeAnimation,
+      arrow,
+      legend,
+      classes
+    } = this.props;
+    const animationTime = timeAnimation === 35 ? 0.035 : 0.4;
+    return /*#__PURE__*/React.createElement(Fragment, null, arrow && arrow.position === INSIDE && /*#__PURE__*/React.createElement(Button, {
+      ArrowCustom: arrow.arrowCustomLeft,
+      callback: arrow.callbackLeft,
+      left: true,
+      onPress: handlePrevSlide,
+      className: styles.arrowLeft,
+      classes: classes
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        transform: "translate3d(".concat(transitionSlide, "px, 0px, 0px)"),
+        width: "".concat(containerWidth * slideArray.length, "px"),
+        transition: "".concat(shouldAnimate ? "transform ".concat(animationTime, "s linear 0s") : 'none')
+      },
+      className: "".concat(styles.slideContainer),
+      draggable: "false"
+    }, slideArray.map((slide, _index) => /*#__PURE__*/React.createElement(Slide, {
+      animationTime: animationTime,
+      border: withBorder,
+      classes: classes,
+      currentSlide: index - 1,
+      imgSrc: slide.imgSrc,
+      key: "slide-".concat(slide.id || slide.imgSrc),
+      onClick: slide.onClick,
+      position: _index - 1,
+      renderContent: slide.renderContent,
+      shouldAnimate: shouldAnimate,
+      widthContainer: containerWidth
+    }))), legend && legend.position === INSIDE && /*#__PURE__*/React.createElement("div", {
+      className: styles.legendContainer,
+      style: {
+        justifyContent: legend.align || 'center',
+        paddingBottom: legend.paddingBottom,
+        paddingLeft: legend.paddingLeft
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.legend
+    }, slides.map((slide, itemIndex) => /*#__PURE__*/React.createElement(Legend, {
+      key: "legend-in-".concat(slide.id || slide.imgSrc),
+      classes: classes,
+      currentSlide: index === slideArray.length - 1 ? 0 : index === 0 ? 1 : index - 1,
+      index: itemIndex,
+      LegendCustom: legend.legendCustom,
+      onClick: handleLegend
+    })))), arrow && arrow.position === INSIDE && /*#__PURE__*/React.createElement(Button, {
+      ArrowCustom: arrow.arrowCustomRight,
+      callback: arrow.callbackRight,
+      onPress: handleNextSlide,
+      className: styles.arrowRight,
+      classes: classes
+    }));
+  }
+}
+Slider.propTypes = {
+  slideArray: arrayOf(shape({
+    imgSrc: string,
+    id: oneOfType([number, string])
+  })),
+  slides: arrayOf(shape({
+    imgSrc: string,
+    id: oneOfType([number, string])
+  })),
+  arrow: shape({
+    position: string,
+    arrowCustomLeft: node,
+    arrowCustomRight: node,
+    callbackLeft: func,
+    callbackRight: func
+  }),
+  legend: shape({
+    position: string,
+    legendCustom: node
+  }),
+  transitionSlide: number,
+  containerWidth: number,
+  shouldAnimate: bool,
+  index: number,
+  withBorder: number,
+  handleLegend: func,
+  handlePrevSlide: func,
+  handleNextSlide: func,
+  timeAnimation: number,
+  classes: objectOf(string)
+};
+export default Slider;

package/dist/esm/components/UTCarousel/components/Slider/styles.module.scss

@@ -0,0 +1,74 @@
+.generalContainer {
+  display: flex;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.slideContainer {
+  height: 100%;
+  margin: auto;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+  width: 100%;
+}
+
+.animation {
+  transition: transform 0.035s linear 0s;
+}
+
+.noAnimation {
+  transition: none;
+}
+
+.sliderContainer {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.legendContainer {
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+}
+
+.arrowContainer {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  margin: 0 10px;
+}
+
+%arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 3;
+}
+
+.arrowLeft {
+  @extend %arrow;
+  left: 10px;
+}
+
+.arrowRight {
+  @extend %arrow;
+  right: 10px;
+}
+
+.legendContainerOut {
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  transform: translateY(100%);
+  width: 100%;
+}
+
+.legend {
+  display: flex;
+  justify-content: center;
+}

package/dist/esm/components/UTCarousel/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { shape, number, bool, arrayOf, string, node, func, objectOf, oneOfType } from 'prop-types';
+import Sizes from '../../scss/variables/sizes.module.scss';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import Slider from './components/Slider';
+const UTCarousel = _ref => {
+  let {
+    arrow,
+    legend,
+    imgArray,
+    borderSize,
+    autoPlay,
+    autoPlayDelay = 2000,
+    classes,
+    height = Sizes.defaultCarrouselHeight,
+    activeEvents,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Slider, {
+    arrow: arrow,
+    legend: legend,
+    slides: imgArray,
+    withBorder: borderSize,
+    autoPlay: autoPlay,
+    autoPlayDelay: autoPlayDelay,
+    classes: classes,
+    height: height,
+    activeEvents: activeEvents,
+    className: className
+  });
+};
+UTCarousel.propTypes = {
+  arrow: shape({
+    position: string,
+    arrowCustomLeft: node,
+    arrowCustomRight: node,
+    callbackLeft: func,
+    callbackRight: func
+  }),
+  legend: shape({
+    align: string,
+    legendCustom: func,
+    paddingBottom: string,
+    paddingLeft: string,
+    position: string
+  }),
+  imgArray: arrayOf(shape({
+    id: oneOfType([number, string]),
+    imgSrc: string,
+    renderContent: node
+  })),
+  borderSize: number,
+  autoPlay: bool,
+  autoPlayDelay: number,
+  height: string,
+  activeEvents: bool,
+  className: string,
+  classes: objectOf(string)
+};
+export default WithTheme(retrieveStyle)(UTCarousel);

package/dist/esm/components/UTCarousel/theme.js

@@ -0,0 +1,44 @@
+import { getIn } from 'seamless-immutable';
+import Colors from '../../scss/variables/colors.module.scss';
+import Sizes from '../../scss/variables/sizes.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    arrowStyle: {
+      fontSize: getIn(theme, ['UTCarousel', 'arrowStyle', 'fontSize'], Sizes.defaultCarrouselArrowSize),
+      height: getIn(theme, ['UTCarousel', 'arrowStyle', 'height'], Sizes.defaultCarrouselArrowSize),
+      width: getIn(theme, ['UTCarousel', 'arrowStyle', 'width'], Sizes.defaultCarrouselArrowSize),
+      color: getIn(theme, ['UTCarousel', 'arrowStyle', 'color'], Colors.white),
+      backgroundColor: getIn(theme, ['UTCarousel', 'arrowStyle', 'backgroundColor'], Colors.lightBlue),
+      transition: 'opacity 0.5s ease-out',
+      '&:hover': {
+        backgroundColor: getIn(theme, ['UTCarousel', 'arrowStyle', 'hover', 'backgroundColor'], Colors.lightBlue)
+      }
+    },
+    legendStyleContainer: {
+      backgroundColor: getIn(theme, ['UTCarousel', 'legendStyleContainer', 'backgroundColor'], Colors.gray2),
+      height: getIn(theme, ['UTCarousel', 'legendStyleContainer', 'height'], Sizes.defaultCarrouselLegendSize),
+      width: getIn(theme, ['UTCarousel', 'legendStyleContainer', 'width'], Sizes.defaultCarrouselLegendSize),
+      borderRadius: '100% ',
+      userSelect: 'none',
+      boxShadow: '0px 1px 2px 0px rgba(0,0,0,0.75)',
+      transition: 'transform 0.3s ease-in, background-color 0.3s ease-in',
+      transform: 'scale(0.8)'
+    },
+    legendStyleIsActive: {
+      backgroundColor: getIn(theme, ['UTCarousel', 'legendStyleIsActive', 'backgroundColor'], Colors.white),
+      userSelect: 'none',
+      transform: 'scale(1)'
+    },
+    legendStyleTouchable: {
+      alignItems: 'center',
+      height: getIn(theme, ['UTCarousel', 'legendStyleTouchable', 'height'], Sizes.defaultCarrouselLegendTouchable),
+      width: getIn(theme, ['UTCarousel', 'legendStyleTouchable', 'width'], Sizes.defaultCarrouselLegendTouchable),
+      justifyContent: 'center',
+      display: 'flex',
+      userSelect: 'none'
+    }
+  };
+};

package/dist/esm/components/UTCheckList/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTCheckList = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTCheckList.propTypes = {
+  version: string
+};
+export default UTCheckList;

package/dist/esm/components/UTCheckList/versions/V0/constants.js

@@ -0,0 +1 @@
+export const defaultAdditionalInfoHeader = 'Seleccionar Todo';

package/dist/esm/components/UTCheckList/versions/V0/index.js

@@ -0,0 +1,165 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useEffect } from 'react';
+import { arrayOf, shape, number, string, any, func, bool, element, objectOf, object, oneOfType } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import WithTheme from '../../../WithTheme';
+import UTCheckbox from '../../../UTCheckbox';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import UTLabel from '../../../UTLabel';
+import { fieldType, metaPropTypes } from '../../../../types/formTypes';
+import { retrieveMuiTheme, retrieveStyle } from './theme';
+import { defaultAdditionalInfoHeader } from './constants';
+import styles from './styles.module.scss';
+const UTCheckList = _ref => {
+  var _field$configuration;
+  let {
+    additionalInfo,
+    allChecked,
+    CustomCheckedIcon,
+    CustomUncheckedIcon,
+    customRowLabel: CustomRowLabel,
+    customSelectAllRowLabel: CustomSelectAllRowLabel,
+    classes: themeClasses = {},
+    className,
+    classNames,
+    disabled,
+    disabledItemTooltip,
+    field,
+    getSelectAllNewValues,
+    header,
+    headerLabel,
+    input,
+    labelKey,
+    list,
+    meta,
+    shouldShowErrors,
+    titleProps,
+    useCustomIcons,
+    valueKey,
+    withCheckRow,
+    withUpperTitle
+  } = _ref;
+  const shouldShowUpperTitle = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
+  const handleChange = id => {
+    const newValues = input.value.indexOf(id) === -1 ? [...input.value, id] : input.value.filter(elem => elem !== id);
+    input.onChange(isEmpty(newValues) ? null : newValues);
+  };
+  const handleCheckAll = () => {
+    if (getSelectAllNewValues) {
+      input.onChange(getSelectAllNewValues());
+    } else if (list.length !== input.value.length) {
+      input.onChange(list.map(item => item[valueKey]));
+    } else {
+      input.onChange(null);
+    }
+  };
+  useEffect(() => {
+    if (allChecked) handleCheckAll();
+  }, []);
+  const classes = mergeClasses(themeClasses, classNames);
+  const label = function () {
+    let key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let item = arguments.length > 1 ? arguments[1] : undefined;
+    return key.map(keyValue => /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "xsmall",
+      className: classes.rowItem
+    }, item[keyValue]));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(className)
+  }, shouldShowUpperTitle && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: classes.title
+  }, titleProps, {
+    withMarkdown: true
+  }), field.title), /*#__PURE__*/React.createElement("div", {
+    className: header ? classes.tableHeader : classes.selectAll
+  }, header && header.map(item => /*#__PURE__*/React.createElement(UTLabel, {
+    weight: "bold",
+    className: classes.headerItem,
+    key: item.text
+  }, item.text)), /*#__PURE__*/React.createElement(UTCheckbox, {
+    disabled: disabled,
+    onChange: handleCheckAll,
+    value: list.length === input.value.length,
+    label: header ? headerLabel : additionalInfo && additionalInfo.header || defaultAdditionalInfoHeader,
+    classNames: {
+      root: !header && classes.selectAllRowRoot,
+      checkedIcon: classes.checkedIcon,
+      uncheckedIcon: classes.uncheckedIcon
+    },
+    customRowLabel: CustomSelectAllRowLabel,
+    useCustomIcons: useCustomIcons,
+    CustomCheckedIcon: CustomCheckedIcon,
+    CustomUncheckedIcon: CustomUncheckedIcon
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "".concat(styles.rows, " ").concat(classes.rowContainerClassName)
+  }, list.map(item => /*#__PURE__*/React.createElement("div", {
+    className: "\n              ".concat(styles.row, "\n              ").concat(withCheckRow && classes.checkRowContainer, "\n              ").concat(!isEmpty(input.value) && !!input.value.find(val => val === item[valueKey]) && classes.customRowRootChecked, " "),
+    key: item[valueKey]
+  }, withCheckRow && label([valueKey, labelKey], item), /*#__PURE__*/React.createElement(UTCheckbox, {
+    disabled: disabled || item.disabled,
+    item: item,
+    key: item[valueKey],
+    value: input.value.indexOf(item[valueKey]) !== -1,
+    label: withCheckRow ? '' : item[labelKey],
+    onChange: () => handleChange(item[valueKey]),
+    customRowLabel: CustomRowLabel,
+    classNames: {
+      root: !withCheckRow && classes.customRowRoot,
+      checkedIcon: classes.checkedIcon,
+      uncheckedIcon: classes.uncheckedIcon,
+      label: classes.label
+    },
+    useCustomIcons: useCustomIcons,
+    CustomCheckedIcon: CustomCheckedIcon,
+    CustomUncheckedIcon: CustomUncheckedIcon,
+    tooltipContent: item.disabled && disabledItemTooltip ? disabledItemTooltip(item, list) : undefined
+  })))), additionalInfo && additionalInfo.footer && /*#__PURE__*/React.createElement(FormHelperText, null, additionalInfo.footer), shouldShowErrors && /*#__PURE__*/React.createElement(FormHelperText, {
+    error: true
+  }, meta && meta.error));
+};
+UTCheckList.defaultProps = {
+  list: []
+};
+UTCheckList.propTypes = {
+  additionalInfo: shape({
+    header: string,
+    footer: string
+  }),
+  allChecked: bool,
+  classes: objectOf(string),
+  className: string,
+  classNames: objectOf(string),
+  CustomCheckedIcon: element,
+  customRowLabel: oneOfType([func, element, string]),
+  customSelectAllRowLabel: oneOfType([func, element, string]),
+  CustomUncheckedIcon: element,
+  disabled: bool,
+  disabledItemTooltip: func,
+  field: fieldType,
+  getSelectAllNewValues: func,
+  header: shape({
+    text: string
+  }),
+  headerLabel: string,
+  input: shape({
+    onChange: func,
+    value: any
+  }),
+  labelKey: string.isRequired,
+  list: arrayOf(shape({
+    id: oneOfType([number, string]),
+    label: string,
+    checked: bool
+  })),
+  meta: metaPropTypes,
+  shouldShowErrors: bool,
+  titleProps: object,
+  useCustomIcons: bool,
+  valueKey: string.isRequired,
+  withCheckRow: bool,
+  withUpperTitle: bool
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTCheckList);

package/dist/esm/components/UTCheckList/versions/V0/styles.module.scss

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.rows {
+  display: grid;
+  grid-auto-rows: 1fr;
+}
+
+.row {
+  label {
+    height: 100%;
+  }
+}

package/dist/esm/components/UTCheckList/versions/V0/theme.js

@@ -0,0 +1,84 @@
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import Colors from '../../../../scss/variables/colors.module.scss';
+import { withImportant } from '../../../../utils/classesUtils';
+export const retrieveMuiTheme = theme => createTheme({
+  typography: {
+    fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    MuiFormControlLabel: {
+      label: {
+        fontSize: getIn(theme, ['UTCheckList', 'label', 'fontSize'], 14),
+        color: getIn(theme, ['UTCheckList', 'label', 'color'], Colors.primary)
+      }
+    },
+    MuiFormHelperText: {
+      root: {
+        fontSize: getIn(theme, ['UTCheckList', 'helperText', 'fontSize'], 14),
+        color: getIn(theme, ['UTCheckList', 'helperText', 'color'], Colors.primary),
+        '&$error': {
+          color: theme.Palette.error['05']
+        }
+      }
+    },
+    MuiCheckbox: {
+      root: {
+        color: getIn(theme, ['UTCheckList', 'checkbox', 'color'], Colors.gray)
+      },
+      colorPrimary: {
+        color: getIn(theme, ['UTCheckList', 'checkbox', 'color'], Colors.gray),
+        '&$checked': {
+          color: getIn(theme, ['UTCheckList', 'checkbox', 'checkedColor'], Colors.inputPrimary)
+        }
+      }
+    }
+  }
+});
+export const retrieveStyle = _ref => {
+  var _theme$UTCheckList, _theme$UTCheckList2;
+  let {
+    theme
+  } = _ref;
+  return {
+    selectAllRowRoot: {
+      color: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'color']),
+      display: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'display']),
+      flexDirection: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'flexDirection']),
+      height: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'height']),
+      justifyContent: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'justifyContent']),
+      margin: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'margin']),
+      padding: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'padding'])
+    },
+    customRowRoot: {
+      color: getIn(theme, ['UTCheckList', 'customRow', 'root', 'color']),
+      display: getIn(theme, ['UTCheckList', 'customRow', 'root', 'display']),
+      flexDirection: getIn(theme, ['UTCheckList', 'customRow', 'root', 'flexDirection']),
+      height: getIn(theme, ['UTCheckList', 'customRow', 'root', 'height']),
+      justifyContent: getIn(theme, ['UTCheckList', 'customRow', 'root', 'justifyContent']),
+      margin: getIn(theme, ['UTCheckList', 'customRow', 'root', 'margin']),
+      padding: getIn(theme, ['UTCheckList', 'customRow', 'root', 'padding'])
+    },
+    headerItem: {
+      marginRight: getIn(theme, ['UTCheckList', 'customCheckRow', 'headerItem', 'marginRight'], '60px'),
+      fontSize: withImportant((theme === null || theme === void 0 || (_theme$UTCheckList = theme.UTCheckList) === null || _theme$UTCheckList === void 0 || (_theme$UTCheckList = _theme$UTCheckList.customCheckRow) === null || _theme$UTCheckList === void 0 || (_theme$UTCheckList = _theme$UTCheckList.headerItem) === null || _theme$UTCheckList === void 0 ? void 0 : _theme$UTCheckList.fontSize) || 14)
+    },
+    checkRowContainer: {
+      alignItems: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'alignItems']),
+      borderTop: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'borderTop']),
+      display: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'display']),
+      flexDirection: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'flexDirection']),
+      flexShrink: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'flexShrink']),
+      height: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'height']),
+      justifyContent: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'justifyContent']),
+      padding: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'padding']),
+      width: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'width'])
+    },
+    rowItem: {
+      display: getIn(theme, ['UTCheckList', 'customCheckRow', 'rowItem', 'display']),
+      fontSize: withImportant((theme === null || theme === void 0 || (_theme$UTCheckList2 = theme.UTCheckList) === null || _theme$UTCheckList2 === void 0 || (_theme$UTCheckList2 = _theme$UTCheckList2.customCheckRow) === null || _theme$UTCheckList2 === void 0 || (_theme$UTCheckList2 = _theme$UTCheckList2.rowItem) === null || _theme$UTCheckList2 === void 0 ? void 0 : _theme$UTCheckList2.fontSize) || 12),
+      justifyContent: getIn(theme, ['UTCheckList', 'customCheckRow', 'rowItem', 'justifyContent']),
+      width: getIn(theme, ['UTCheckList', 'customCheckRow', 'rowItem', 'width'])
+    }
+  };
+};