sag_components 1.0.8 → 1.0.9

package/dist/stories/components/SegmentedButton.js

@@ -0,0 +1,119 @@
+"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"];
+/*SegmentedButton*/
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "",
   "main": "dist/index.js",                                    
   "scripts": {

package/build/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/build/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow: