@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -0,0 +1,158 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import TextBox from '../TextBox/TextBox';
+import { Container, Box } from '../Layout';
+import { Icon } from '@zohodesk/icons';
+import btnStyle from '../../semantic/Button/semanticButton.module.css';
+import style from '../../TextBoxIcon/TextBoxIcon.module.css';
+/* eslint-disable react/forbid-component-props */
+
+export default function TextBoxIcon(props) {
+  const {
+    type,
+    name,
+    id,
+    maxLength,
+    placeHolder,
+    size,
+    onKeyUp,
+    isReadOnly,
+    isDisabled,
+    children,
+    onKeyDown,
+    onClick,
+    value,
+    iconRotated,
+    needBorder,
+    variant,
+    onClear,
+    onChange,
+    title,
+    dataId,
+    dataSelectorId,
+    needReadOnlyStyle,
+    isClickable,
+    needEffect,
+    onKeyPress,
+    borderColor,
+    onMouseDown,
+    showClearIcon,
+    htmlId,
+    i18nKeys,
+    customClass,
+    iconOnHover,
+    isFocus,
+    onClearMouseDown,
+    customProps,
+    inputRef,
+    onFocus,
+    onBlur,
+    isScrollPrevent
+  } = props;
+  const {
+    customTBoxWrap = '',
+    customTextBox = '',
+    customTBoxIcon = '',
+    customTBoxLine = ''
+  } = customClass;
+  const {
+    clearText = 'Clear'
+  } = i18nKeys;
+  let {
+    TextBoxProps = {}
+  } = customProps;
+  const [isActive, setActive] = useState(false);
+  const inputEle = useRef();
+  const handleRef = useCallback(ele => {
+    inputEle.current = ele;
+    inputRef && inputRef(ele);
+  }, []);
+
+  const handleClear = () => {
+    onClear && onClear();
+    inputEle.current && inputEle.current.focus({
+      preventScroll: true
+    });
+  };
+
+  const handleFocus = e => {
+    if (!needReadOnlyStyle || !isReadOnly && needReadOnlyStyle) {
+      setActive(true);
+      onFocus && onFocus(e);
+    }
+  };
+
+  const handleBlur = e => {
+    setActive(false);
+    onBlur && onBlur(e);
+  };
+
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+    dataSelectorId: dataSelectorId,
+    "data-title": isDisabled ? title : null
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(TextBox, { ...props,
+    dataId: dataId,
+    size: size,
+    variant: variant,
+    type: type,
+    value: value,
+    name: name,
+    id: id,
+    htmlId: htmlId,
+    maxLength: maxLength,
+    placeHolder: placeHolder,
+    onKeyUp: onKeyUp,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    onChange: onChange,
+    onBlur: handleBlur,
+    onClick: onClick,
+    isReadOnly: isReadOnly,
+    isDisabled: isDisabled,
+    inputRef: handleRef,
+    needReadOnlyStyle: needReadOnlyStyle,
+    isClickable: isClickable,
+    onKeyPress: onKeyPress,
+    onMouseDown: onMouseDown,
+    needBorder: false,
+    isScrollPrevent: isScrollPrevent,
+    customClass: customTextBox,
+    customProps: TextBoxProps
+  })), /*#__PURE__*/React.createElement(Box, {
+    className: `${style.iconContainer} ${customTBoxIcon}`
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row"
+  }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? /*#__PURE__*/React.createElement(Box, {
+    className: `${btnStyle.buttonReset} ${style.icon}`,
+    onClick: handleClear,
+    dataId: `${dataId}_ClearIcon`,
+    "data-title": clearText,
+    tagName: "button"
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    "aria-hidden": true,
+    onMouseDown: onClearMouseDown
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-delete",
+    size: "14"
+  }))) : null, children ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.icon} ${iconRotated ? style.rotated : ''}`
+  }, children) : null)), needBorder && /*#__PURE__*/React.createElement("div", {
+    className: `${style.line} ${style[`borderColor_${borderColor}`]} ${customTBoxLine}`
+  }));
+}
+TextBoxIcon.defaultProps = defaultProps;
+TextBoxIcon.propTypes = propTypes; // if (__DOCS__) {
+//   TextBoxIcon.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/v1/TextBoxIcon/props/defaultProps.js

@@ -0,0 +1,23 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  iconRotated: false,
+  maxLength: '250',
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  needReadOnlyStyle: true,
+  isClickable: false,
+  needEffect: true,
+  dataId: 'textBoxIcon',
+  borderColor: 'default',
+  showClearIcon: false,
+  i18nKeys: {},
+  customClass: {},
+  iconOnHover: false,
+  isFocus: false,
+  isScrollPrevent: false,
+  customProps: {},
+  dataSelectorId: 'textBoxIcon'
+};

package/es/v1/TextBoxIcon/props/propTypes.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
+export const propTypes = { ...TextBox_propTypes,
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  htmlId: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string
+  }),
+  iconRotated: PropTypes.bool,
+  id: PropTypes.string,
+  inputRef: PropTypes.func,
+  isClickable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.string,
+  name: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  showClearIcon: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
+  title: PropTypes.func,
+  type: PropTypes.oneOf(['text', 'password', 'number']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'default']),
+  customClass: PropTypes.shape({
+    customTBoxWrap: PropTypes.string,
+    customTextBox: PropTypes.string,
+    customTBoxIcon: PropTypes.string,
+    customTBoxLine: PropTypes.string
+  }),
+  iconOnHover: PropTypes.bool,
+  isFocus: PropTypes.bool,
+  onClearMouseDown: PropTypes.func,
+  isScrollPrevent: PropTypes.bool,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object
+  })
+};

package/es/v1/Textarea/Textarea.js

@@ -0,0 +1,100 @@
+import React, { useRef } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../Textarea/Textarea.module.css';
+export default function Textarea(props) {
+  let {
+    size,
+    placeHolder,
+    needBorder,
+    text,
+    isDisabled,
+    resize,
+    maxLength,
+    animated,
+    variant,
+    getRef,
+    onFocus,
+    dataId,
+    dataSelectorId,
+    isReadOnly,
+    needAppearance,
+    needReadOnlyStyle,
+    borderColor,
+    needEffect,
+    autoFocus,
+    htmlId,
+    a11y,
+    customClass,
+    onChange,
+    onBlur,
+    onKeyDown
+  } = props;
+  let {
+    ariaLabel,
+    ariaLabelledby
+  } = a11y;
+
+  const handleChange = e => {
+    e && e.preventDefault();
+    onChange && onChange(e.target.value, e);
+  };
+
+  const handleBlur = e => {
+    e && e.preventDefault();
+    onBlur && onBlur(e.target.value, e);
+  };
+
+  const handleKeyDown = e => {
+    onKeyDown && onKeyDown(e);
+  };
+
+  let resizes = useRef({
+    horizontal: 'resizeX',
+    vertical: 'resizeY',
+    both: 'resizeboth',
+    none: 'noresize'
+  });
+  let options = useRef({});
+
+  if (isReadOnly) {
+    options.current.readOnly = 'readOnly';
+  }
+
+  if (isDisabled) {
+    options.current.disabled = 'disabled';
+  }
+
+  if (autoFocus) {
+    options.current.autoFocus = true;
+  }
+
+  let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes.current[resize]] : style[resizes.current.none]}  ${animated ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
+  return /*#__PURE__*/React.createElement("textarea", {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
+    placeholder: placeHolder,
+    ...options.current,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    maxLength: maxLength,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: onFocus,
+    onBlur: handleBlur,
+    ref: getRef,
+    value: text,
+    id: htmlId,
+    "data-selector-id": dataSelectorId
+  });
+}
+Textarea.defaultProps = defaultProps;
+Textarea.propTypes = propTypes; // if (__DOCS__) {
+//   Textarea.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/v1/Textarea/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  dataId: 'TextareaComp',
+  needBorder: true,
+  resize: 'none',
+  size: 'small',
+  variant: 'default',
+  needAppearance: true,
+  needReadOnlyStyle: true,
+  borderColor: 'default',
+  needEffect: true,
+  autoFocus: false,
+  customClass: '',
+  a11y: {},
+  dataSelectorId: 'textarea'
+};

package/es/v1/Textarea/props/propTypes.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  animated: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  getRef: PropTypes.func,
+  htmlId: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
+  size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  text: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'primary']),
+  customClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};