@gympass/yoga 7.87.0 → 7.88.0

package/esm/Slider/web/Marker.js

@@ -1,72 +1,100 @@
-var _excluded = ["values", "dragging", "index", "tooltip"];
-
-var _templateObject;
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import React from 'react';
-import { arrayOf, number, shape, bool, string } from 'prop-types';
-import { hexToRgb } from '@gympass/yoga-common';
-import styled from 'styled-components';
-import RCHandle from 'rc-slider/lib/Handle';
-import Tooltip from './Tooltip';
-var Circle = styled(RCHandle)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  height: 24px;\n  margin-top: -10px;\n  outline: none;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  ", "\n"])), function (_ref) {
-  var dataDragging = _ref['data-dragging'],
-      slider = _ref.theme.yoga.components.slider;
-  return "\n    background-color: " + slider.marker.backgroundColor + ";\n    border: 6px solid " + slider.marker.border.color + ";\n    border-radius: " + slider.marker.border.radius + "px;\n    box-shadow: " + (dataDragging ? slider.marker.shadow + ",\n          0 0 0 8px " + hexToRgb(slider.marker.backgroundColor, 0.2) : slider.marker.shadow) + ";\n  ";
-});
-
-var Marker = function Marker(_ref2) {
-  var values = _ref2.values,
-      dragging = _ref2.dragging,
-      index = _ref2.index,
-      tooltip = _ref2.tooltip,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-
-  var renderTooltip = function renderTooltip() {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { arrayOf, number, shape, bool, string } from "prop-types";
+import { hexToRgb } from "@gympass/yoga-common";
+import styled from "styled-components";
+import RCHandle from "rc-slider/lib/Handle";
+import Tooltip from "./Tooltip";
+const Circle = styled(RCHandle)`
+  cursor: pointer;
+  height: 24px;
+  margin-top: -10px;
+  outline: none;
+  position: absolute;
+  top: 0;
+  width: 24px;
+  ${({
+  "data-dragging": dataDragging,
+  theme: {
+    yoga: {
+      components: { slider }
+    }
+  }
+}) => `
+    background-color: ${slider.marker.backgroundColor};
+    border: 6px solid ${slider.marker.border.color};
+    border-radius: ${slider.marker.border.radius}px;
+    box-shadow: ${dataDragging ? `${slider.marker.shadow},
+          0 0 0 8px ${hexToRgb(slider.marker.backgroundColor, 0.2)}` : slider.marker.shadow};
+  `}
+`;
+const Marker = (_a) => {
+  var _b = _a, { values, dragging, index, tooltip } = _b, props = __objRest(_b, ["values", "dragging", "index", "tooltip"]);
+  const renderTooltip = () => {
     if (!dragging) {
       return false;
     }
-
-    return tooltip.filter(function (_ref3) {
-      var step = _ref3.step,
-          visible = _ref3.visible;
-
+    return tooltip.filter(({ step, visible }) => {
       if (!step && step !== 0) {
         return visible;
       }
-
       return visible && values[index] === step;
     })[0];
   };
-
-  return /*#__PURE__*/React.createElement(Circle, _extends({
-    "data-dragging": Boolean(dragging)
-  }, props), dragging && /*#__PURE__*/React.createElement(Tooltip, {
-    data: renderTooltip()
-  }));
+  return /* @__PURE__ */ jsx(Circle, __spreadProps(__spreadValues({ "data-dragging": Boolean(dragging) }, props), { children: dragging && /* @__PURE__ */ jsx(Tooltip, { data: renderTooltip() }) }));
 };
-
 Marker.propTypes = {
   values: arrayOf(number),
   dragging: bool,
   index: number,
-  tooltip: arrayOf(shape({
-    ribbon: string,
-    title: string,
-    description: string,
-    visible: bool,
-    step: number
-  }))
+  tooltip: arrayOf(
+    shape({
+      ribbon: string,
+      title: string,
+      description: string,
+      visible: bool,
+      step: number
+    })
+  )
 };
 Marker.defaultProps = {
   values: [0],
   dragging: false,
   index: 0,
-  tooltip: undefined
+  tooltip: void 0
+};
+var Marker_default = Marker;
+export {
+  Marker_default as default
 };
-export default Marker;

package/esm/Slider/web/Slider.js

@@ -1,53 +1,95 @@
-var _excluded = ["snapped", "tooltip", "values", "max", "maxLabel", "min", "minLabel", "theme"],
-    _excluded2 = ["ref", "index"],
-    _excluded3 = ["ref", "index"];
-
-var _templateObject, _templateObject2;
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import React from 'react';
-import { bool, string, number, arrayOf, shape, oneOfType } from 'prop-types';
-import styled, { withTheme } from 'styled-components';
-import RCSlider from 'rc-slider/lib/Slider';
-import RCRange from 'rc-slider/lib/Range';
-import Marker from './Marker';
-var StyledSlider = styled(RCSlider)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  ", "\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (_ref) {
-  var marks = _ref.marks;
-  return "\n    padding-bottom: " + (marks ? 40 : 15) + "px;\n  ";
-});
-var StyledRange = styled(RCRange)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  ", "\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (_ref2) {
-  var marks = _ref2.marks;
-  return "\n    padding-bottom: " + (marks ? 40 : 15) + "px;\n  ";
-});
-/** Sliders allow users to make selections from a range of values. Sliders
-reflect a range of values along a bar, from which users may select a single
-value. They are ideal for adjusting settings such as volume, brightness, or
-applying image filters. */
-
-var Slider = function Slider(_ref3) {
-  var _ref4, _ref6;
-
-  var snapped = _ref3.snapped,
-      tooltip = _ref3.tooltip,
-      values = _ref3.values,
-      max = _ref3.max,
-      maxLabel = _ref3.maxLabel,
-      min = _ref3.min,
-      minLabel = _ref3.minLabel,
-      slider = _ref3.theme.yoga.components.slider,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded);
-
-  var styles = {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { bool, string, number, arrayOf, shape, oneOfType } from "prop-types";
+import styled, { withTheme } from "styled-components";
+import RCSlider from "rc-slider/lib/Slider";
+import RCRange from "rc-slider/lib/Range";
+import Marker from "./Marker";
+const StyledSlider = styled(RCSlider)`
+  position: relative;
+  width: 100%;
+
+  ${({ marks }) => `
+    padding-bottom: ${marks ? 40 : 15}px;
+  `}
+
+  * {
+    box-sizing: border-box;
+  }
+`;
+const StyledRange = styled(RCRange)`
+  position: relative;
+  width: 100%;
+
+  ${({ marks }) => `
+    padding-bottom: ${marks ? 40 : 15}px;
+  `}
+
+  * {
+    box-sizing: border-box;
+  }
+`;
+const Slider = (_a) => {
+  var _b = _a, {
+    snapped,
+    tooltip,
+    values,
+    max,
+    maxLabel,
+    min,
+    minLabel,
+    theme: {
+      yoga: {
+        components: { slider }
+      }
+    }
+  } = _b, props = __objRest(_b, [
+    "snapped",
+    "tooltip",
+    "values",
+    "max",
+    "maxLabel",
+    "min",
+    "minLabel",
+    "theme"
+  ]);
+  const styles = {
     commonTrackStyle: {
       borderRadius: slider.track.border.radius,
       height: 4,
-      position: 'absolute',
-      width: '100%'
+      position: "absolute",
+      width: "100%"
     },
     trackStyle: {
       backgroundColor: slider.track.backgroundColor.active
@@ -58,7 +100,7 @@ var Slider = function Slider(_ref3) {
     commonStepStyle: {
       borderRadius: slider.step.border.radius,
       marginLeft: -4,
-      position: 'absolute',
+      position: "absolute",
       height: 10,
       top: -3,
       width: 10
@@ -70,115 +112,119 @@ var Slider = function Slider(_ref3) {
       backgroundColor: slider.track.backgroundColor.inactive
     },
     labelStyle: {
-      position: 'absolute',
+      position: "absolute",
       top: 15
     }
   };
-  return values.length > 1 ? /*#__PURE__*/React.createElement(StyledRange, _extends({}, props, {
-    dots: snapped,
-    value: values,
-    allowCross: false,
-    marks: (_ref4 = {}, _ref4[min] = {
-      label: minLabel,
-      style: _extends({}, styles.labelStyle, {
-        transform: 'translateX(0%)'
-      })
-    }, _ref4[max] = {
-      label: maxLabel,
-      style: _extends({}, styles.labelStyle, {
-        transform: 'translateX(-100%)'
-      })
-    }, _ref4),
-    trackStyle: [_extends({}, styles.commonTrackStyle, styles.trackStyle)],
-    railStyle: _extends({}, styles.commonTrackStyle, styles.railStyle),
-    dotStyle: snapped ? _extends({}, styles.commonStepStyle, styles.inactiveStepStyle) : undefined,
-    activeDotStyle: snapped ? _extends({}, styles.commonStepStyle, styles.activeStepStyle) : undefined,
-    max: max,
-    min: min,
-    handle: function handle(_ref5) {
-      var ref = _ref5.ref,
-          index = _ref5.index,
-          rest = _objectWithoutPropertiesLoose(_ref5, _excluded2);
-
-      return /*#__PURE__*/React.createElement(Marker, _extends({
-        values: values,
-        tooltip: tooltip,
-        key: index,
-        index: index
-      }, rest));
-    }
-  })) : /*#__PURE__*/React.createElement(StyledSlider, _extends({}, props, {
-    prefixCls: "yoga",
-    dots: snapped,
-    value: values[0],
-    marks: (_ref6 = {}, _ref6[min] = {
-      label: minLabel,
-      style: _extends({}, styles.labelStyle, {
-        transform: 'translateX(0%)'
-      })
-    }, _ref6[max] = {
-      label: maxLabel,
-      style: _extends({}, styles.labelStyle, {
-        transform: 'translateX(-100%)'
-      })
-    }, _ref6),
-    trackStyle: _extends({}, styles.commonTrackStyle, styles.trackStyle),
-    railStyle: _extends({}, styles.commonTrackStyle, styles.railStyle),
-    dotStyle: snapped ? _extends({}, styles.commonStepStyle, styles.inactiveStepStyle) : undefined,
-    activeDotStyle: snapped ? _extends({}, styles.commonStepStyle, styles.activeStepStyle) : undefined,
-    max: max,
-    min: min,
-    handle: function handle(_ref7) {
-      var ref = _ref7.ref,
-          index = _ref7.index,
-          rest = _objectWithoutPropertiesLoose(_ref7, _excluded3);
-
-      return /*#__PURE__*/React.createElement(Marker, _extends({
-        values: values,
-        tooltip: tooltip,
-        key: index,
-        index: index
-      }, rest));
-    }
-  }));
+  return values.length > 1 ? /* @__PURE__ */ jsx(
+    StyledRange,
+    __spreadProps(__spreadValues({}, props), {
+      dots: snapped,
+      value: values,
+      allowCross: false,
+      marks: {
+        [min]: {
+          label: minLabel,
+          style: __spreadProps(__spreadValues({}, styles.labelStyle), { transform: "translateX(0%)" })
+        },
+        [max]: {
+          label: maxLabel,
+          style: __spreadProps(__spreadValues({}, styles.labelStyle), { transform: "translateX(-100%)" })
+        }
+      },
+      trackStyle: [
+        __spreadValues(__spreadValues({}, styles.commonTrackStyle), styles.trackStyle)
+      ],
+      railStyle: __spreadValues(__spreadValues({}, styles.commonTrackStyle), styles.railStyle),
+      dotStyle: snapped ? __spreadValues(__spreadValues({}, styles.commonStepStyle), styles.inactiveStepStyle) : void 0,
+      activeDotStyle: snapped ? __spreadValues(__spreadValues({}, styles.commonStepStyle), styles.activeStepStyle) : void 0,
+      max,
+      min,
+      handle: (_a2) => {
+        var _b2 = _a2, { ref, index } = _b2, rest = __objRest(_b2, ["ref", "index"]);
+        return /* @__PURE__ */ jsx(
+          Marker,
+          __spreadValues({
+            values,
+            tooltip,
+            index
+          }, rest),
+          index
+        );
+      }
+    })
+  ) : /* @__PURE__ */ jsx(
+    StyledSlider,
+    __spreadProps(__spreadValues({}, props), {
+      prefixCls: "yoga",
+      dots: snapped,
+      value: values[0],
+      marks: {
+        [min]: {
+          label: minLabel,
+          style: __spreadProps(__spreadValues({}, styles.labelStyle), { transform: "translateX(0%)" })
+        },
+        [max]: {
+          label: maxLabel,
+          style: __spreadProps(__spreadValues({}, styles.labelStyle), { transform: "translateX(-100%)" })
+        }
+      },
+      trackStyle: __spreadValues(__spreadValues({}, styles.commonTrackStyle), styles.trackStyle),
+      railStyle: __spreadValues(__spreadValues({}, styles.commonTrackStyle), styles.railStyle),
+      dotStyle: snapped ? __spreadValues(__spreadValues({}, styles.commonStepStyle), styles.inactiveStepStyle) : void 0,
+      activeDotStyle: snapped ? __spreadValues(__spreadValues({}, styles.commonStepStyle), styles.activeStepStyle) : void 0,
+      max,
+      min,
+      handle: (_c) => {
+        var _d = _c, { ref, index } = _d, rest = __objRest(_d, ["ref", "index"]);
+        return /* @__PURE__ */ jsx(
+          Marker,
+          __spreadValues({
+            values,
+            tooltip,
+            index
+          }, rest),
+          index
+        );
+      }
+    })
+  );
 };
-
 Slider.propTypes = {
   /** set the max value */
   max: number,
-
   /** label to be displayed at max value */
   maxLabel: oneOfType([string, number]),
-
   /** set the min value */
   min: number,
-
   /** label to be displayed at min value */
   minLabel: oneOfType([string, number]),
-
   /** make slider be snap through dots */
   snapped: bool,
-
   /** accepts a shape with 'ribbon', 'title', 'description', 'visible' and 'step' properties */
-  tooltip: arrayOf(shape({
-    ribbon: string,
-    title: string,
-    description: string,
-    visible: bool,
-    step: number
-  })),
-
+  tooltip: arrayOf(
+    shape({
+      ribbon: string,
+      title: string,
+      description: string,
+      visible: bool,
+      step: number
+    })
+  ),
   /** an array that accepts one or two numbers, this determines how many markers will be displayed */
   values: arrayOf(number)
 };
 Slider.defaultProps = {
   max: 10,
-  maxLabel: undefined,
+  maxLabel: void 0,
   min: 0,
-  minLabel: undefined,
+  minLabel: void 0,
   snapped: false,
   tooltip: [],
   values: [0]
 };
-Slider.displayName = 'Slider';
-export default withTheme(Slider);
+Slider.displayName = "Slider";
+var Slider_default = withTheme(Slider);
+export {
+  Slider_default as default
+};