@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/components/Label.js

@@ -0,0 +1,643 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Text = require('../Text-CfBPhwqK.js');
+var index = require('./Tooltip.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var size = require('../constants/componentProps/size.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var textAlign = require('../constants/componentProps/textAlign.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('./Title.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../constants/componentProps/textSize.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+const labelConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    labelConfig.appearance = newComponent;
+  }
+};
+function Label(props) {
+  const {
+    appearance,
+    children,
+    className,
+    label,
+    labelTextSize,
+    labelTextWrap,
+    labelTextColor,
+    labelTextColorHover,
+    labelTextWeight,
+    mode,
+    set,
+    before,
+    after,
+    dataTour,
+    type,
+    cursor,
+    showTooltip,
+    tooltipAlignment,
+    tooltipText,
+    tooltipTextSize,
+    tooltipTitle,
+    tooltipTitleSize,
+    tooltipAppearance,
+    tooltipContent,
+    tooltipArrowPosition,
+    onClick
+  } = props;
+  const tooltipRef = React.useRef(null);
+  const onMouseEnterLabel = React.useCallback(() => {
+    tooltipRef.current?.openTooltip();
+  }, []);
+  const onMouseLeaveLabel = React.useCallback(() => {
+    tooltipRef.current?.closeTooltip();
+  }, []);
+  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'label_size_',
+    propsKey: 'size'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'label_shape_',
+    propsKey: 'shape'
+  });
+  const borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'label_text-align_',
+    propsKey: 'textAlign'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'label_width_',
+    propsKey: 'width'
+  });
+  const wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'word-wrap_',
+    propsKey: 'labelTextWrap'
+  });
+  const {
+    styles: labelStyles
+  } = useStyles.useStyles(props);
+  const labelAppearanceItem = labelConfig.appearance[appearance] || {};
+  // const {
+  //   fill: labelAppearanceFill,
+  //   fillHover: labelAppearanceFillHover,
+  //   labelTextColor: labelAppearanceLabelTextColor,
+  //   labelTextColorHover: labelAppearanceLabelTextColorHover,
+  // } = labelAppearanceItem
+
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'label', fillClass || labelAppearanceItem.fill && `fill_${labelAppearanceItem.fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelAppearanceItem.fillHover && `fill_hover_${labelAppearanceItem.fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass || labelAppearanceItem.shape && `label_shape_${labelAppearanceItem.shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderClass, borderTypeClass, sizeClass || labelAppearanceItem.size && `label_size_${labelAppearanceItem.size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), wrapClass, widthClass, alignDirectionClass, alignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
+    "data-tour": dataTour,
+    style: labelStyles,
+    onClick: onClick,
+    onMouseEnter: onMouseEnterLabel,
+    onMouseLeave: onMouseLeaveLabel
+  }, before, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "label__inner"
+  }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "label__label",
+    size: labelTextSize || labelAppearanceItem.labelTextSize,
+    textColor: labelTextColor || labelAppearanceItem.labelTextColor,
+    textColorHover: labelTextColorHover || labelAppearanceItem.labelTextColorHover,
+    textWeight: labelTextWeight || labelAppearanceItem.labelTextWeight,
+    textWrap: labelTextWrap
+  }, label || labelAppearanceItem.label) : /*#__PURE__*/React__default.default.createElement("div", {
+    className: "label__label"
+  }, label), children, showTooltip && /*#__PURE__*/React__default.default.createElement(index.Tooltip, {
+    alignment: tooltipAlignment,
+    appearance: tooltipAppearance,
+    arrowPosition: tooltipArrowPosition,
+    className: "label__tooltip",
+    ref: tooltipRef,
+    text: tooltipText,
+    textSize: tooltipTextSize,
+    title: tooltipTitle,
+    titleSize: tooltipTitleSize
+  }, tooltipContent)), after);
+}
+Label.propTypes = {
+  after: PropTypes__default.default.any,
+  appearance: PropTypes__default.default.string,
+  before: PropTypes__default.default.any,
+  border: PropTypes__default.default.string,
+  borderDesktop: PropTypes__default.default.string,
+  borderMobile: PropTypes__default.default.string,
+  borderTablet: PropTypes__default.default.string,
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
+  borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
+  borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  cursor: PropTypes__default.default.string,
+  dataTour: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  label: PropTypes__default.default.any,
+  labelTextColor: PropTypes__default.default.string,
+  labelTextColorHover: PropTypes__default.default.string,
+  labelTextSize: PropTypes__default.default.oneOf(size.default),
+  labelTextSizeDesktop: PropTypes__default.default.oneOf(size.default),
+  labelTextSizeMobile: PropTypes__default.default.oneOf(size.default),
+  labelTextSizeTablet: PropTypes__default.default.oneOf(size.default),
+  labelTextWeight: PropTypes__default.default.string,
+  labelTextWrap: PropTypes__default.default.string,
+  mode: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  showTooltip: PropTypes__default.default.bool,
+  size: PropTypes__default.default.oneOf(size.default),
+  sizeDesktop: PropTypes__default.default.oneOf(size.default),
+  sizeMobile: PropTypes__default.default.oneOf(size.default),
+  sizeTablet: PropTypes__default.default.oneOf(size.default),
+  textAlign: PropTypes__default.default.oneOf(textAlign.default),
+  tooltipAlignment: PropTypes__default.default.string,
+  tooltipAppearance: PropTypes__default.default.string,
+  tooltipArrowPosition: PropTypes__default.default.string,
+  tooltipContent: PropTypes__default.default.any,
+  tooltipText: PropTypes__default.default.string,
+  tooltipTextSize: PropTypes__default.default.string,
+  tooltipTitle: PropTypes__default.default.string,
+  tooltipTitleSize: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func,
+  onMouseLeave: PropTypes__default.default.func
+};
+Label.defaultProps = {
+  label: 'Label'
+};
+Label.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Label",
+  "props": {
+    "label": {
+      "defaultValue": {
+        "value": "'Label'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "appearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "border": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "borderDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "borderMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "borderTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "borderType": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "borderTypeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "borderTypeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "borderTypeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "cursor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "dataTour": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "labelTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextColorHover": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "labelTextSizeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "labelTextSizeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "labelTextSizeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "labelTextWeight": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextWrap": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "mode": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "shape": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "showTooltip": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "size": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "textAlign": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textAlignProps"
+      },
+      "required": false
+    },
+    "tooltipAlignment": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipAppearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipArrowPosition": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipContent": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "tooltipText": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTitle": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTitleSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onMouseEnter": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onMouseLeave": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Label = Label;
+exports.labelConfig = labelConfig;