sag_components 1.0.6 → 1.0.8

package/dist/stories/components/SegmentedButton.js

@@ -1,118 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SegmentedButton = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _SegmentedButtonStyle = require("../SegmentedButton.style.js");
-var _excluded = ["name", "options", "segmentWidth", "segmentHeigth", "controlRadius", "segmentRadius", "fontSize", "backgroundColor", "selectedSegmentColor", "selectedTextColor", "unselectedTextColor", "defaultIndex", "onClick"];
-var SegmentedButton = function SegmentedButton(_ref) {
-  var name = _ref.name,
-    options = _ref.options,
-    _ref$segmentWidth = _ref.segmentWidth,
-    segmentWidth = _ref$segmentWidth === void 0 ? 120 : _ref$segmentWidth,
-    _ref$segmentHeigth = _ref.segmentHeigth,
-    segmentHeigth = _ref$segmentHeigth === void 0 ? 41 : _ref$segmentHeigth,
-    _ref$controlRadius = _ref.controlRadius,
-    controlRadius = _ref$controlRadius === void 0 ? 8 : _ref$controlRadius,
-    _ref$segmentRadius = _ref.segmentRadius,
-    segmentRadius = _ref$segmentRadius === void 0 ? 8 : _ref$segmentRadius,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? "#ECF0FF" : _ref$backgroundColor,
-    _ref$selectedSegmentC = _ref.selectedSegmentColor,
-    selectedSegmentColor = _ref$selectedSegmentC === void 0 ? "#3a9df9" : _ref$selectedSegmentC,
-    _ref$selectedTextColo = _ref.selectedTextColor,
-    selectedTextColor = _ref$selectedTextColo === void 0 ? "white" : _ref$selectedTextColo,
-    _ref$unselectedTextCo = _ref.unselectedTextColor,
-    unselectedTextColor = _ref$unselectedTextCo === void 0 ? "black" : _ref$unselectedTextCo,
-    _ref$defaultIndex = _ref.defaultIndex,
-    defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
-    onClick = _ref.onClick,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(defaultIndex),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeIndex = _useState2[0],
-    setActiveIndex = _useState2[1];
-  var controlRef = (0, _react.useRef)();
-  var componentReady = (0, _react.useRef)();
-  var optionsRef = options.map(function (item, i) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-      id: i,
-      ref: (0, _react.useRef)()
-    });
-  });
-
-  // Determine when the component is "ready"
-  (0, _react.useEffect)(function () {
-    componentReady.current = true;
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (defaultIndex >= 0 && defaultIndex < (options === null || options === void 0 ? void 0 : options.length)) {
-      setActiveIndex(defaultIndex);
-    }
-  }, [defaultIndex]);
-  (0, _react.useEffect)(function () {
-    var activeSegmentRef = optionsRef[activeIndex].ref;
-    var _activeSegmentRef$cur = activeSegmentRef.current,
-      offsetWidth = _activeSegmentRef$cur.offsetWidth,
-      offsetLeft = _activeSegmentRef$cur.offsetLeft;
-    var style = controlRef.current.style;
-    style.setProperty("--highlight-width", "".concat(offsetWidth, "px"));
-    style.setProperty("--highlight-x-pos", "".concat(offsetLeft, "px"));
-  }, [activeIndex, controlRef, optionsRef]);
-  var onInputChangeHandler = function onInputChangeHandler(value, index) {
-    setActiveIndex(index);
-    onClick({
-      index: index,
-      value: value
-    });
-  };
-  return /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.ControlsContainer, {
-    fontSize: fontSize,
-    ref: controlRef
-  }, /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.Controls, {
-    backgroundColor: backgroundColor,
-    selectedSegmentColor: selectedSegmentColor,
-    segmentRadius: segmentRadius,
-    controlRadius: controlRadius,
-    segmentWidth: segmentWidth,
-    className: "controls ".concat(componentReady.current ? "ready" : "idle")
-  }, optionsRef === null || optionsRef === void 0 ? void 0 : optionsRef.map(function (item, i) {
-    return /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.Segment, {
-      key: item.id,
-      backgroundColor: backgroundColor,
-      selectedSegmentColor: selectedSegmentColor,
-      segmentRadius: segmentRadius,
-      controlRadius: controlRadius,
-      segmentWidth: segmentWidth,
-      className: "".concat(activeIndex === i ? "active" : "inactive"),
-      ref: item.ref
-    }, /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.ControlsInput, {
-      type: "radio",
-      value: item.value,
-      id: item.id,
-      name: name,
-      onChange: function onChange() {
-        return onInputChangeHandler(item.value, item.id);
-      },
-      checked: i === activeIndex
-    }), /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.SegmentLabel, {
-      selectedTextColor: selectedTextColor,
-      unselectedTextColor: unselectedTextColor,
-      segmentHeigth: segmentHeigth / 5,
-      className: "".concat(activeIndex === i ? "active" : "inactive", " "),
-      htmlFor: item.value
-    }, item.value));
-  })));
-};
-exports.SegmentedButton = SegmentedButton;
-var _default = SegmentedButton;
-exports.default = _default;