@itcase/ui 1.1.6 → 1.1.8

package/dist/ListItem-Cf8r3w8t.js

@@ -0,0 +1,479 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import directionProps from './constants/componentProps/direction.js';
+import fillProps from './constants/componentProps/fill.js';
+import textColorProps from './constants/componentProps/textColor.js';
+import sizeProps from './constants/componentProps/size.js';
+import { useStyles } from './hooks/useStyles.js';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import textStyleProps from './constants/componentProps/textStyle.js';
+import textWeightProps from './constants/componentProps/textWeight.js';
+import typeProps from './constants/componentProps/type.js';
+import { L as Link } from './Link-ByBzBRDH.js';
+
+function List(props) {
+  const {
+    children,
+    className,
+    style,
+    type
+  } = props;
+  const sizeClass = useDeviceTargetClass(props, {
+    prefix: 'list_size_',
+    propsKey: 'size'
+  });
+  const bulletSizeClass = useDeviceTargetClass(props, {
+    prefix: 'list_bullet-size_',
+    propsKey: 'bulletSize'
+  });
+  const bulletFillClass = useDeviceTargetClass(props, {
+    prefix: 'list_bullet-fill_',
+    propsKey: 'bulletFill'
+  });
+  const bulletTextColorClass = useDeviceTargetClass(props, {
+    prefix: 'list_bullet-text-color_',
+    propsKey: 'bulletTextColor'
+  });
+  const directionClass = useDeviceTargetClass(props, {
+    prefix: 'list_direction_',
+    propsKey: 'direction'
+  });
+  const {
+    styles: ulStyles
+  } = useStyles(props);
+  return /*#__PURE__*/React__default.createElement("ul", {
+    className: clsx(className, 'list', bulletSizeClass, bulletFillClass, bulletTextColorClass, directionClass, sizeClass, style && `list_style_${style}`, type && `list_type_${type}`),
+    style: ulStyles
+  }, children);
+}
+List.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  bulletFill: PropTypes.oneOf(fillProps),
+  bulletFillDesktop: PropTypes.oneOf(fillProps),
+  bulletFillMobile: PropTypes.oneOf(fillProps),
+  bulletFillTablet: PropTypes.oneOf(fillProps),
+  bulletSize: PropTypes.string,
+  bulletSizeDesktop: PropTypes.string,
+  bulletSizeMobile: PropTypes.string,
+  bulletSizeTablet: PropTypes.string,
+  bulletTextColor: PropTypes.oneOf(textColorProps),
+  bulletTextColorDesktop: PropTypes.oneOf(textColorProps),
+  bulletTextColorMobile: PropTypes.oneOf(textColorProps),
+  bulletTextColorTablet: PropTypes.oneOf(textColorProps),
+  direction: PropTypes.oneOf(directionProps),
+  directionDesktop: PropTypes.oneOf(directionProps),
+  directionMobile: PropTypes.oneOf(directionProps),
+  directionTablet: PropTypes.oneOf(directionProps),
+  size: PropTypes.oneOf(sizeProps),
+  sizeDesktop: PropTypes.oneOf(sizeProps),
+  sizeMobile: PropTypes.oneOf(sizeProps),
+  sizeTablet: PropTypes.oneOf(sizeProps),
+  style: PropTypes.string,
+  type: PropTypes.string,
+  onClick: PropTypes.func
+};
+List.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "List",
+  "props": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "bulletFill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "bulletFillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "bulletFillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "bulletFillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "bulletSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "bulletSizeDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "bulletSizeMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "bulletSizeTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "bulletTextColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "bulletTextColorDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "bulletTextColorMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "bulletTextColorTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "direction": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "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
+    },
+    "style": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+function ListItem(props) {
+  const {
+    after,
+    before,
+    children,
+    className,
+    fill,
+    href,
+    link,
+    text,
+    textColor,
+    textStyle,
+    textWeight
+  } = props;
+  const {
+    styles: liStyles,
+    link: linkStyles
+  } = useStyles(props);
+  if (link) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      className: clsx(className, 'list__item', 'list__item_type_link', textStyle && `text text-style_${textStyle}`, textWeight && `text text-weight_${textWeight}`, textColor && `text-color_${textColor.replace(/([A-Z])/g, '-$1').toLowerCase()}`, fill && `fill_${fill.replace(/([A-Z])/g, '-$1').toLowerCase()}`),
+      style: liStyles
+    }, /*#__PURE__*/React__default.createElement(Link, {
+      href: link || href,
+      className: clsx('list__item-link'),
+      style: linkStyles
+    }, children || text));
+  }
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: clsx(className, 'list__item', textStyle && `text text-style_${textStyle}`, textWeight && `text text-weight_${textWeight}`, textColor && `text-color_${textColor.replace(/([A-Z])/g, '-$1').toLowerCase()}`, fill && `fill_${fill.replace(/([A-Z])/g, '-$1').toLowerCase()}`),
+    style: liStyles
+  }, before, children || text, after);
+}
+ListItem.propTypes = {
+  after: PropTypes.any,
+  before: PropTypes.any,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  link: PropTypes.string,
+  fill: PropTypes.oneOf(fillProps),
+  fillDesktop: PropTypes.oneOf(fillProps),
+  fillMobile: PropTypes.oneOf(fillProps),
+  fillTablet: PropTypes.oneOf(fillProps),
+  type: PropTypes.oneOf(typeProps),
+  text: PropTypes.string,
+  textColor: PropTypes.oneOf(textColorProps),
+  textWeight: PropTypes.oneOf(textWeightProps),
+  textStyle: PropTypes.oneOf(textStyleProps),
+  onClick: PropTypes.func
+};
+ListItem.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ListItem",
+  "props": {
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "href": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "link": {
+      "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
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "text": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "textColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "textWeight": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textWeightProps"
+      },
+      "required": false
+    },
+    "textStyle": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textStyleProps"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+export { List as L, ListItem as a };