@wix/design-system
Version:
@wix/design-system
445 lines (444 loc) • 11.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _dynamicStories = require("@wix/wix-storybook-utils/dynamic-stories");
var _NestableList = _interopRequireDefault(require("../NestableList"));
var _WixDesignSystemProvider = _interopRequireDefault(require("../../WixDesignSystemProvider"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/NestableList/test/NestableList.visual.jsx",
_this = void 0;
var counter = 0;
var getSimpleExampleItems = function getSimpleExampleItems() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var draggable = options.draggable,
addItemLabel = options.addItemLabel,
dragDisabled = options.dragDisabled,
hideDragHandle = options.hideDragHandle;
return Array.from(new Array(2)).map(function (_, index) {
return {
id: counter++,
options: [{
value: "Node ".concat(index)
}],
draggable: draggable,
hideDragHandle: hideDragHandle,
dragDisabled: dragDisabled,
addItemLabel: addItemLabel ? "".concat(addItemLabel, " to Node ").concat(index) : undefined,
children: [{
id: counter++,
options: [{
value: "Node ".concat(index, " child")
}],
draggable: draggable,
dragDisabled: dragDisabled,
hideDragHandle: hideDragHandle
}]
};
});
};
var getNestedExampleItems = function getNestedExampleItems() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var actions = options.actions,
addItemLabel = options.addItemLabel,
expandable = options.expandable;
return [{
id: 'root-1',
options: [{
value: 'Root 1'
}],
addItemLabel: addItemLabel ? "".concat(addItemLabel, " to Root 1") : undefined,
children: [{
id: 'child-1',
options: [{
value: 'Child 1'
}],
actions: actions,
actionsDataHook: actions ? 'child-1-actions' : undefined,
addItemLabel: addItemLabel ? "".concat(addItemLabel, " to Child 1") : undefined,
children: [{
id: 'grandchild-1',
options: [{
value: 'Grandchild 1'
}]
}]
}]
}, {
id: 'root-2',
expandable: expandable,
expanded: expandable,
isCollapsed: false,
options: [{
value: 'Root 2'
}],
children: [{
id: 'child-2',
options: [{
value: 'Child 2'
}]
}]
}];
};
var exampleActions = [{
label: 'Action',
onClick: function onClick() {}
}];
var containerWrapper = function containerWrapper(_ref) {
var children = _ref.children;
return /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: '600px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 3
}
}, children);
};
var commonProps = {
// use for repeated props across the tests (e.g. {buttonText: 'example'})
};
var tests = [{
describe: 'sanity',
// prop name (e.g. size)
its: [{
it: 'default',
// prop variation (e.g. small)
props: {
items: getSimpleExampleItems()
}
}, {
it: 'With bottom border',
// prop variation (e.g. small)
props: {
items: getSimpleExampleItems(),
withBottomBorder: true
}
}, {
it: 'With add button',
// prop variation (e.g. small)
props: {
maxDepth: 2,
items: getSimpleExampleItems(),
addItemLabel: 'Add item'
}
}, {
it: 'With dragDisable icon',
// prop variation (e.g. small)
props: {
maxDepth: 2,
items: getSimpleExampleItems({
draggable: true,
dragDisabled: true
})
}
}, {
it: 'Draggable without dragHandle',
props: {
maxDepth: 2,
items: getSimpleExampleItems({
draggable: true,
hideDragHandle: true
})
}
}, {
it: 'Dragging disabled',
// prop variation (e.g. small)
props: {
maxDepth: 2,
items: getSimpleExampleItems({
draggable: false
})
}
}, {
it: 'Static (non-draggable)',
props: {
maxDepth: 2,
items: getSimpleExampleItems({
draggable: false,
hideDragHandle: true
})
}
}, {
it: 'Without dividers',
props: {
dividers: false,
items: getSimpleExampleItems()
}
}, {
it: 'Without dividers, with bottom border',
props: {
dividers: false,
withBottomBorder: true,
items: getSimpleExampleItems()
}
}, {
it: 'Small indent',
props: {
indentSize: 'small',
items: getSimpleExampleItems()
}
}, {
it: 'Small indent, without dividers',
props: {
indentSize: 'small',
dividers: false,
items: getSimpleExampleItems()
}
}, {
it: 'Medium indent',
props: {
indentSize: 'medium',
items: getSimpleExampleItems()
}
}, {
it: 'Medium indent, without dividers',
props: {
indentSize: 'medium',
dividers: false,
items: getSimpleExampleItems()
}
}, {
it: 'Expandable',
props: {
items: [{
id: 'item-1',
options: [{
value: 'Item 1'
}]
}, {
id: 'item-2',
expandable: true,
expanded: true,
isCollapsed: false,
options: [{
value: 'Show and hide children'
}],
children: [{
id: 'item-2-child-1',
options: [{
value: 'Child 1'
}]
}, {
id: 'item-2-child-2',
expandable: true,
expanded: true,
options: [{
value: 'Child 2'
}],
children: [{
id: 'item-2-child-2-child-1',
options: [{
value: 'Child 3'
}]
}]
}]
}, {
id: 'item-3',
options: [{
value: 'Item 3'
}]
}]
}
}, {
it: 'Without dividers, without hierarchy indicator, small indent, small drag handle size',
props: {
dividers: false,
indentSize: 'small',
dragHandleSize: 'small',
hierarchyIndicator: false,
items: getSimpleExampleItems()
}
}, {
it: 'Static and Draggable alignment',
props: {
items: [{
id: 'item-1',
options: [{
value: 'Item 1'
}]
}, {
id: 'item-2',
options: [{
value: 'Item 2'
}],
draggable: false,
hideDragHandle: true,
children: [{
id: 'item-2-child-1',
options: [{
value: 'Child 1'
}],
draggable: false,
hideDragHandle: true
}, {
id: 'item-2-child-2',
options: [{
value: 'Child 2'
}]
}]
}, {
id: 'item-3',
options: [{
value: 'Item 3'
}]
}]
}
}]
}, {
describe: 'fullWidthItems',
its: [{
it: 'default',
props: {
fullWidthItems: true,
items: getNestedExampleItems()
},
wrapper: containerWrapper
}, {
it: 'Small indent',
props: {
fullWidthItems: true,
indentSize: 'small',
items: getNestedExampleItems()
},
wrapper: containerWrapper
}, {
it: 'Medium indent',
props: {
fullWidthItems: true,
indentSize: 'medium',
items: getNestedExampleItems()
},
wrapper: containerWrapper
}, {
it: 'Without dividers',
props: {
fullWidthItems: true,
dividers: false,
items: getNestedExampleItems()
},
wrapper: containerWrapper
}, {
it: 'With bottom border',
props: {
fullWidthItems: true,
withBottomBorder: true,
items: getNestedExampleItems()
},
wrapper: containerWrapper
}, {
it: 'With hierarchy indicator suppressed',
props: {
fullWidthItems: true,
hierarchyIndicator: true,
items: getNestedExampleItems()
},
wrapper: containerWrapper
}, {
it: 'With add buttons',
props: {
fullWidthItems: true,
maxDepth: 3,
addItemLabel: 'Add item',
items: getNestedExampleItems({
addItemLabel: 'Add item'
})
},
wrapper: containerWrapper
}, {
it: 'With actions',
props: {
fullWidthItems: true,
actions: exampleActions,
items: getNestedExampleItems({
actions: exampleActions
})
},
wrapper: containerWrapper
}, {
it: 'Expandable',
props: {
fullWidthItems: true,
items: getNestedExampleItems({
expandable: true
})
},
wrapper: containerWrapper
}, {
it: 'Read only',
props: {
fullWidthItems: true,
readOnly: true,
items: getNestedExampleItems()
},
wrapper: containerWrapper
}, {
it: 'Read only, small indent',
props: {
fullWidthItems: true,
readOnly: true,
indentSize: 'small',
items: getNestedExampleItems()
},
wrapper: containerWrapper
}, {
it: 'Static (non-draggable)',
props: {
fullWidthItems: true,
items: getSimpleExampleItems({
draggable: false,
hideDragHandle: true
})
},
wrapper: containerWrapper
}]
}];
tests.forEach(function (_ref2) {
var describe = _ref2.describe,
its = _ref2.its;
its.forEach(function (_ref3) {
var it = _ref3.it,
props = _ref3.props,
_ref3$wrapper = _ref3.wrapper,
Wrapper = _ref3$wrapper === void 0 ? _react["default"].Fragment : _ref3$wrapper;
(0, _dynamicStories.storiesOf)("".concat(_NestableList["default"].displayName).concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement(Wrapper, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 398,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_NestableList["default"], (0, _extends2["default"])({}, commonProps, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 399,
columnNumber: 9
}
})));
});
});
});
(0, _dynamicStories.storiesOf)("".concat(_NestableList["default"].displayName, "/mobile"), module).add('drag handle', function () {
return /*#__PURE__*/_react["default"].createElement(_WixDesignSystemProvider["default"], {
mobile: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 408,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(_NestableList["default"], {
showDragHandleOnHover: true,
onChange: function onChange() {},
items: getSimpleExampleItems(),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 409,
columnNumber: 7
}
}));
});