@stokr/components-library
Version:
STOKR - Components Library
111 lines (110 loc) • 3.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ScrollAutoHeight2000 = exports.ScrollAutoHeight1000 = exports.ModalWithScroll = void 0;
var _react = _interopRequireDefault(require("react"));
var _ComponentScroll = require("./ComponentScroll");
var _SvgIcons = require("../SvgIcons");
var _Modal = require("../Modal/Modal");
var _global = _interopRequireDefault(require("../../styles/global"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
title: 'Components Library/ComponentScroll',
component: _ComponentScroll.ComponentScroll,
argTypes: {
children: {
type: 'node',
defaultValue: [],
required: true
},
className: {
type: 'string',
defaultValue: ''
},
noMobileScroll: {
type: 'boolean',
defaultValue: false
},
autoHeight: {
type: 'boolean',
defaultValue: false
},
autoHeightMax: {
type: 'number or string',
defaultValue: 0
},
autoHeightMin: {
type: 'number or string',
defaultValue: 0
},
barPadding: {
type: 'number',
defaultValue: 32
},
topPadding: {
type: 'number',
defaultValue: 0
},
offset: {
type: 'number',
defaultValue: 0
},
handleScroll: {
type: 'function',
defaultValue: null
},
setRef: {
type: 'function',
action: 'setRef'
},
onMouseMove: {
type: 'function',
action: 'mouseMove'
},
onDebounce: {
type: 'function',
action: 'debounceRefresh'
},
refreshScrollBar: {
type: 'function',
action: 'refreshScrollbar'
},
onScroll: {
type: 'function',
action: 'handleScroll'
}
},
parameters: {
backgrounds: {
default: 'grey'
}
}
}; //making default background grey in story as this reveals height /offset properties ..
const Template = args => /*#__PURE__*/_react.default.createElement(_ComponentScroll.ComponentScroll, args);
const ScrollAutoHeight1000 = exports.ScrollAutoHeight1000 = Template.bind({});
ScrollAutoHeight1000.args = {
children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
autoHeight: true,
autoHeightMax: 1000,
autoHeightMin: 1000
};
const ScrollAutoHeight2000 = exports.ScrollAutoHeight2000 = Template.bind({});
ScrollAutoHeight2000.args = {
children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
autoHeight: true,
autoHeightMax: 2000,
autoHeightMin: 2000
};
const ModalWithScroll = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
thin: true,
fullscreen: true,
isOpen: true
}, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
noPadding: true
}, /*#__PURE__*/_react.default.createElement(_ComponentScroll.ComponentScroll, args, /*#__PURE__*/_react.default.createElement("div", {
style: {
height: 350
}
}, "some text")))));
exports.ModalWithScroll = ModalWithScroll;