@cbinsights/fds/lib/hooks/useScrollAttributes/Demo.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ExampleItem = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _styleConstants = _interopRequireDefault(require("../../dictionary/js/styleConstants"));

var _2 = _interopRequireDefault(require("."));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var nested = {
  boxSizing: 'border-box',
  border: '1px dashed purple',
  display: 'inline-flex'
};
var intermediary = {
  padding: 12,
  border: "2px dashed ".concat(_styleConstants.default.COLOR_RED),
  overflowY: 'auto',
  marginBottom: '10px'
};

var ExampleItem = function ExampleItem(props) {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "fontSize--xl display--inlineFlex alignChild--center--center media--xl color--red",
    style: {
      outline: '1px dotted red',
      background: 'pink',
      flexBasis: '300px'
    }
  }, props.label);
};

exports.ExampleItem = ExampleItem;

var Demo = function Demo() {
  var ref = (0, _react.useRef)(null);

  var _useScrollAttributes = (0, _2.default)(ref),
      _useScrollAttributes2 = (0, _slicedToArray2.default)(_useScrollAttributes, 2),
      isAtScrollStart = _useScrollAttributes2[0],
      isAtScrollEnd = _useScrollAttributes2[1];

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    style: intermediary,
    ref: ref
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: nested
  }, new Array(20).fill(0).map(function (_, idx) {
    return /*#__PURE__*/_react.default.createElement(ExampleItem, {
      label: "".concat(idx),
      key: idx
    });
  }))), /*#__PURE__*/_react.default.createElement("p", null, isAtScrollStart ? 'is at start' : 'is not at start'), /*#__PURE__*/_react.default.createElement("p", null, isAtScrollEnd ? 'is at end' : 'is not at end'));
};

var _default = Demo;
exports.default = _default;