@wix/design-system/dist/cjs/AngleInput/AngleInput.story.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.WithNumberInput = exports.Disabled = exports.Basic = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _AngleInput = _interopRequireDefault(require("./AngleInput"));
var _NumberInput = _interopRequireDefault(require("../NumberInput"));
var _Input = _interopRequireDefault(require("../Input/Input"));
var _Box = _interopRequireDefault(require("../Box"));
var _ = require("..");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AngleInput/AngleInput.story.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var meta = {
  component: _AngleInput.default
};
var _default = exports.default = meta;
var BasicAngleInput = () => {
  var [angle, setAngle] = (0, _react.useState)(0);
  var handleAngleChange = newAngle => {
    setAngle(newAngle);
  };
  var props = {
    step: 1,
    value: angle,
    onChange: handleAngleChange
  };
  return /*#__PURE__*/_react.default.createElement(_AngleInput.default, (0, _extends2.default)({}, props, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 30,
      columnNumber: 10
    }
  }));
};
var WithNumberInputAngleInput = () => {
  var [angle, setAngle] = (0, _react.useState)(0);
  var [callbackHistory, setCallbackHistory] = (0, _react.useState)([]);
  var logCallback = function logCallback(callbackName) {
    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
    setCallbackHistory(prev => {
      var updatedHistory = [...prev, {
        name: callbackName,
        value
      }];
      return updatedHistory.length > 10 ? updatedHistory.slice(-10) : updatedHistory;
    });
  };
  var handleAngleChange = newAngle => {
    logCallback('onChange', newAngle);
    setAngle(newAngle);
  };
  var handleFocus = () => {
    logCallback('onFocus');
  };
  var handleBlur = () => {
    logCallback('onBlur');
  };
  var props = {
    step: 1,
    value: angle,
    onChange: handleAngleChange,
    onFocus: handleFocus,
    onBlur: handleBlur
  };
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    direction: "vertical",
    gap: "2",
    border: "thin dashed black",
    borderRadius: 3,
    padding: "2",
    width: "fit-content",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    width: "150px",
    gap: "2",
    verticalAlign: "middle",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_AngleInput.default, (0, _extends2.default)({}, props, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement(_NumberInput.default, {
    size: "small",
    suffix: /*#__PURE__*/_react.default.createElement(_Input.default.Affix, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 82,
        columnNumber: 19
      }
    }, "\xB0"),
    value: angle,
    onChange: handleAngleChange,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 80,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement(_Box.default, {
    direction: "vertical",
    gap: "1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 87,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 9
    }
  }, "Last 10 calls (callback, value):"), callbackHistory.map((callback, index) => /*#__PURE__*/_react.default.createElement(_.Text, {
    key: index,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90,
      columnNumber: 11
    }
  }, callback.name, ": ", callback.value !== null ? callback.value : 'N/A'))));
};
var DisabledAngleInput = () => {
  var [angle, setAngle] = (0, _react.useState)(0);
  var handleAngleChange = newAngle => {
    setAngle(newAngle);
  };
  var props = {
    step: 1,
    value: angle,
    onChange: handleAngleChange,
    disabled: true
  };
  return /*#__PURE__*/_react.default.createElement(_AngleInput.default, (0, _extends2.default)({}, props, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 113,
      columnNumber: 10
    }
  }));
};
var Basic = exports.Basic = {
  render: () => /*#__PURE__*/_react.default.createElement(BasicAngleInput, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 117,
      columnNumber: 17
    }
  })
};
var WithNumberInput = exports.WithNumberInput = {
  render: () => /*#__PURE__*/_react.default.createElement(WithNumberInputAngleInput, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 121,
      columnNumber: 17
    }
  })
};
var Disabled = exports.Disabled = {
  render: () => /*#__PURE__*/_react.default.createElement(DisabledAngleInput, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 125,
      columnNumber: 17
    }
  })
};
//# sourceMappingURL=AngleInput.story.js.map