@itcase/ui 1.0.10 → 1.0.13

package/dist/components/Avatar.js

@@ -47,6 +47,8 @@ function Avatar(props) {
   var className = props.className,
     icon = props.icon,
     size = props.size,
+    after = props.after,
+    before = props.before,
     src = props.src,
     type = props.type,
     onClick = props.onClick,
@@ -79,7 +81,7 @@ function Avatar(props) {
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('avatar__wrapper', fillClass, fillHoverClass)
-  }, src ? /*#__PURE__*/React__default.default.createElement(index.Image, {
+  }, before, src ? /*#__PURE__*/React__default.default.createElement(index.Image, {
     className: "avatar__image",
     shape: "circular",
     src: src
@@ -98,7 +100,7 @@ function Avatar(props) {
     shape: iconShape,
     stroke: iconStroke,
     SvgImage: icon
-  })));
+  }), after));
 }
 Avatar.propTypes = {
   children: PropTypes__default.default.any,

package/dist/components/Chips.js

@@ -36,6 +36,7 @@ function Chips(props) {
     label = props.label,
     labelSize = props.labelSize,
     labelTextColor = props.labelTextColor,
+    labelTextWeight = props.labelTextWeight,
     type = props.type;
   var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
@@ -75,6 +76,7 @@ function Chips(props) {
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "chips__label",
     textColor: labelTextColor,
+    textWeight: labelTextWeight,
     size: labelSize
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {
     className: "chips__label"

package/dist/components/Choice.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index = require('./Text.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../useStyles-e4accb53.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+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);
+
+var Choice = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+  var name = props.name,
+    className = props.className,
+    type = props.type,
+    options = props.options,
+    active = props.active,
+    setActiveSegment = props.setActiveSegment,
+    size = props.size,
+    labelTextColor = props.labelTextColor,
+    labelTextActiveColor = props.labelTextActiveColor,
+    labelTextSize = props.labelTextSize;
+  var controlRef = React.useRef(null);
+  var optionsRefs = React.useMemo(function () {
+    return new Map(options.map(function (item) {
+      return [item.value, /*#__PURE__*/React.createRef()];
+    }));
+  }, [options]);
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-type_',
+    propsKey: 'borderType'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'choice_shape_',
+    propsKey: 'shape'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'fillActive'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'choice', shapeClass, fillClass, borderColorClass, borderWidthClass, borderTypeClass, size && "choice_size_" + size, type && "choice_type_" + type),
+    ref: controlRef
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "choice__wrapper"
+  }, options == null ? void 0 : options.map(function (item, i) {
+    return /*#__PURE__*/React__default.default.createElement("div", {
+      className: clsx__default.default('choice__item', borderColorClass, borderWidthClass, borderTypeClass, fillHoverClass, item.value === active.value && fillActiveClass, item.value === active.value && 'choice__item_active'),
+      key: item.value,
+      ref: optionsRefs.get(item.value)
+    }, /*#__PURE__*/React__default.default.createElement("input", {
+      checked: item.value === active.value,
+      className: "choice__item-radio",
+      id: item.label,
+      name: name,
+      type: "radio",
+      value: item.value,
+      onChange: function onChange() {
+        return setActiveSegment(item);
+      }
+    }), /*#__PURE__*/React__default.default.createElement("label", {
+      className: clsx__default.default('choice__item-label'),
+      htmlFor: item.label
+    }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+      textColor: item.value === active.value ? labelTextActiveColor : labelTextColor,
+      size: labelTextSize
+    }, item.label)));
+  })));
+});
+Choice.displayName = 'Choice';
+Choice.propTypes = {
+  active: PropTypes__default.default.object,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.string,
+  name: PropTypes__default.default.string,
+  options: PropTypes__default.default.array,
+  setActiveSegment: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+Choice.defaultProps = {
+  active: {}
+};
+
+exports.Choice = Choice;