storybook-addon-material-ui
Version:
Storybook Addon for Material UI Library
450 lines (400 loc) • 16.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));
var _colorPicker = _interopRequireDefault(require("@usulpro/color-picker"));
var _ = require("../");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var propTypes = {
val: _propTypes.default.string.isRequired,
ind: _propTypes.default.number.isRequired,
settingsObj: _propTypes.default.object.isRequired,
valueHandler: _propTypes.default.func.isRequired,
isCollapsed: _propTypes.default.bool.isRequired,
onCollapsed: _propTypes.default.func.isRequired,
onSelect: _propTypes.default.func.isRequired,
isOpen: _propTypes.default.bool.isRequired,
isHeader: _propTypes.default.bool.isRequired
};
var defaultProps = {
val: 'val',
ind: 7,
settingsObj: {},
valueHandler: function valueHandler() {},
isCollapsed: true,
isOpen: true,
isHeader: true
};
var contextTypes = {
muiTheme: _propTypes.default.object.isRequired
};
var ThemePropItem =
/*#__PURE__*/
function (_React$Component) {
_inherits(ThemePropItem, _React$Component);
function ThemePropItem(props) {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, ThemePropItem);
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ThemePropItem)).call.apply(_getPrototypeOf2, [this, props].concat(args)));
_this.onToolTogle = _this.onToolTogle.bind(_assertThisInitialized(_assertThisInitialized(_this)));
_this.renderProp = _this.renderProp.bind(_assertThisInitialized(_assertThisInitialized(_this)));
return _this;
}
_createClass(ThemePropItem, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps) {
return true; // future: shouldComponentUpdate
// const val = this.props.val;
// const shouldCollapsed = (nextProps.isCollapsed !== this.props.isCollapsed);
// const shouldOpen = (nextProps.isOpen !== this.props.isOpen);
// const shouldsettingsObj = (nextProps.settingsObj[val] !== this.props.settingsObj[val]);
// const shouldUpdate = (shouldCollapsed || shouldOpen || shouldsettingsObj);
// if (shouldUpdate) {
// console.log(
// `shouldUpdate: ${val} ${shouldCollapsed} ${shouldOpen} ${shouldsettingsObj}`
// );
// }
// return shouldUpdate;
}
}, {
key: "onToolTogle",
value: function onToolTogle() {
this.props.onCollapsed(!this.props.isCollapsed);
}
}, {
key: "renderProp",
value: function renderProp(isNotHeader) {
var palette = this.context.muiTheme.palette;
var _this$props = this.props,
ind = _this$props.ind,
val = _this$props.val,
valueHandler = _this$props.valueHandler,
isCollapsed = _this$props.isCollapsed,
isOpen = _this$props.isOpen,
onSelect = _this$props.onSelect;
var settingsObj = this.props.settingsObj || {
isNotHeader: isNotHeader
};
var onToolTogle = this.onToolTogle;
var styleHR = {
borderBottom: "solid ".concat(palette.borderColor, " 1px")
};
return _react.default.createElement("div", null, _react.default.createElement(PropItem, {
ind: ind,
val: val,
settingsObj: settingsObj,
valueHandler: valueHandler,
isNotHeader: isNotHeader,
onToolTogle: onToolTogle,
isOpen: isOpen,
onSelect: onSelect
}), _react.default.createElement(PropToolPicker, _extends({
isCollapsed: isCollapsed,
onToolTogle: onToolTogle
}, {
settingsObj: isNotHeader ? settingsObj[val] : '',
valueHandler: valueHandler(val)
})), _react.default.createElement("div", {
style: {
height: isOpen ? 1 : 0,
overflow: 'hidden'
}
}, _react.default.createElement("div", {
style: styleHR
})));
}
}, {
key: "render",
value: function render() {
return _react.default.createElement("div", null, this.renderProp(!this.props.isHeader));
}
}]);
return ThemePropItem;
}(_react.default.Component);
exports.default = ThemePropItem;
ThemePropItem.propTypes = propTypes;
ThemePropItem.defaultProps = defaultProps;
ThemePropItem.contextTypes = contextTypes;
function PropItem(props, context) {
var palette = context.muiTheme.palette;
var settingsObj = props.settingsObj,
val = props.val,
ind = props.ind,
valueHandler = props.valueHandler,
isNotHeader = props.isNotHeader;
var color = typeof settingsObj[val] === 'string' ? settingsObj[val] : '';
var onSelect = function onSelect() {
var select = {
selectedProp: val,
selectedVal: "'".concat(settingsObj[val], "'")
};
props.onSelect(select);
};
return _react.default.createElement("div", {
className: "".concat(_.CSS_CLASS, "-prop-item"),
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'baseline',
flexWrap: 'wrap',
paddingRight: 4,
paddingTop: isNotHeader ? 4 : 16,
fontSize: 12,
// height: isOpen ? 24 : 0,
transition: 'all 100ms ease 0ms',
overflow: 'hidden',
color: isNotHeader ? '' : palette.secondaryTextColor
},
onClick: onSelect
}, _react.default.createElement(PropHeader, {
val: val,
ind: ind,
isNotHeader: isNotHeader
}), _react.default.createElement("div", {
className: "".concat(_.CSS_CLASS, "-prop-value"),
style: {
width: 'auto',
flexShrink: 1,
flexGrow: 1,
display: 'flex',
justifyContent: 'space-between'
}
}, _react.default.createElement(PropInput, {
valueHandler: valueHandler(val) || null,
settingsObj: settingsObj[val] || '',
isNotHeader: isNotHeader
}), _react.default.createElement(PropTool, {
color: color,
onTool: props.onToolTogle,
isNotHeader: isNotHeader
})));
}
PropItem.propTypes = {
settingsObj: _propTypes.default.shape().isRequired,
val: _propTypes.default.string.isRequired,
ind: _propTypes.default.number.isRequired,
onToolTogle: _propTypes.default.func.isRequired,
onSelect: _propTypes.default.func.isRequired,
valueHandler: _propTypes.default.func.isRequired,
// isOpen: PropTypes.bool.isRequired,
isNotHeader: _propTypes.default.bool.isRequired
};
PropItem.contextTypes = contextTypes;
function PropHeader(props, context) {
var ind = props.ind,
val = props.val,
isNotHeader = props.isNotHeader;
return _react.default.createElement("div", {
className: "".concat(_.CSS_CLASS, "-prop-header"),
title: val,
style: {
display: 'flex',
justifyContent: 'flex-start',
overflowX: 'hidden',
flexShrink: 2,
flexGrow: 10,
width: 90
}
}, _react.default.createElement("div", {
style: {
color: context.muiTheme.palette.secondaryTextColor
}
}, isNotHeader ? ind + 1 : '#'), _react.default.createElement("div", {
style: {
marginLeft: 16,
marginRight: 16,
minWidth: 100,
textAlign: 'left',
overflowX: 'hidden'
}
}, _react.default.createElement("div", null, isNotHeader ? val : 'Prop Name')));
}
PropHeader.propTypes = {
val: _propTypes.default.string.isRequired,
ind: _propTypes.default.number.isRequired,
isNotHeader: _propTypes.default.bool.isRequired
};
PropHeader.contextTypes = contextTypes;
function PropInput(props, context) {
var palette = context.muiTheme.palette;
var valueHandler = props.valueHandler,
settingsObj = props.settingsObj,
isNotHeader = props.isNotHeader;
var isInt = settingsObj === parseInt(settingsObj, 10);
var strStyle = {
width: isInt ? 40 : 'auto',
textAlign: isInt ? 'right' : 'left'
};
return isNotHeader ? _react.default.createElement("input", {
type: "text",
onChange: valueHandler,
value: settingsObj,
title: settingsObj,
style: _objectSpread({
border: 'none',
fontStyle: 'italic',
padding: 2,
backgroundColor: palette.canvasColor,
color: palette.primary2Color
}, strStyle)
}) : _react.default.createElement("div", {
style: _objectSpread({
border: 'none',
minWidth: 162,
padding: 2
}, strStyle)
}, "Prop Value");
}
PropInput.propTypes = {
settingsObj: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
valueHandler: _propTypes.default.func.isRequired,
isNotHeader: _propTypes.default.bool.isRequired
};
PropInput.contextTypes = contextTypes;
function PropTool(props, context) {
var palette = context.muiTheme.palette;
var isNotHeader = props.isNotHeader;
var blockStyle = {
width: 16,
height: 16,
marginLeft: 4,
border: "solid 1px ".concat(palette.borderColor),
backgroundColor: isNotHeader ? props.color : 'rgba(0, 0, 0, 0)',
cursor: isNotHeader ? 'pointer' : ''
};
var toolProps = {
style: blockStyle,
title: isNotHeader ? props.color : 'view',
onClick: isNotHeader ? props.onTool : null
};
return _react.default.createElement("div", toolProps);
}
PropTool.propTypes = {
isNotHeader: _propTypes.default.bool.isRequired,
color: _propTypes.default.string.isRequired,
onTool: _propTypes.default.func.isRequired
};
PropTool.contextTypes = contextTypes;
function PropToolPicker(props, context) {
var settingsObj = props.settingsObj,
valueHandler = props.valueHandler,
onToolTogle = props.onToolTogle;
var initColor = "".concat(settingsObj);
var style = {
height: props.isCollapsed ? 0 : 200,
transition: 'height 300ms ease 0ms',
overflow: 'hidden'
};
var onSubmit = function onSubmit(event) {
valueHandler(event);
onToolTogle();
}; // fixme: check onReset
return _react.default.createElement("div", {
style: style
}, _react.default.createElement("div", {
style: {
border: 'solid 1px grey'
}
}, _react.default.createElement(_colorPicker.default, {
initColor: initColor,
onSubmit: onSubmit,
onSelect: valueHandler,
onHover: valueHandler,
onReset: onSubmit
})));
}
PropToolPicker.propTypes = {
settingsObj: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
isCollapsed: _propTypes.default.bool.isRequired,
valueHandler: _propTypes.default.func.isRequired,
onToolTogle: _propTypes.default.func.isRequired
};
PropToolPicker.contextTypes = contextTypes; // future: we will use when all components be ready
function PropToolPickerFull(props, context) {
var settingsObj = props.settingsObj,
valueHandler = props.valueHandler,
onToolTogle = props.onToolTogle;
var initColor = "".concat(settingsObj);
var style = {
height: props.isCollapsed ? 0 : 200,
transition: 'height 300ms ease 0ms',
overflow: 'hidden'
};
var tabStyle = {
height: 16,
marginTop: -12,
fontSize: 12
};
var onSubmit = function onSubmit(event) {
valueHandler(event);
onToolTogle();
};
return _react.default.createElement("div", {
style: style
}, _react.default.createElement(_Tabs.default, {
tabItemContainerStyle: {
height: 24
}
}, _react.default.createElement(_Tab.default, {
label: "Color",
style: tabStyle
}, _react.default.createElement("div", {
style: {
border: 'solid 1px grey'
}
}, _react.default.createElement(_colorPicker.default, {
initColor: initColor,
onSubmit: onSubmit,
onSelect: valueHandler,
onReset: onSubmit
}))), _react.default.createElement(_Tab.default, {
label: "Number",
style: tabStyle
}, _react.default.createElement("div", null, _react.default.createElement("h2", null, "Tab Two"), _react.default.createElement("p", null, "This is another example tab."))), _react.default.createElement(_Tab.default, {
label: "String",
"data-route": "/home",
onActive: null,
style: tabStyle
}, _react.default.createElement("div", null, _react.default.createElement("h2", null, "Tab Three"), _react.default.createElement("p", null, "This is a third example tab."))), _react.default.createElement(_Tab.default, {
label: "Palette",
style: tabStyle
}, _react.default.createElement("div", null, _react.default.createElement("h2", null, "Tab Two"), _react.default.createElement("p", null, "This is another example tab."), _react.default.createElement(_Slide.default, {
name: "slider0",
defaultValue: 0.5
}))), _react.default.createElement(_Tab.default, {
label: "Icon",
style: tabStyle
}, _react.default.createElement("div", null, _react.default.createElement("h2", null, "Tab Two"), _react.default.createElement("p", null, "This is another example tab."), _react.default.createElement(_Slide.default, {
name: "slider0",
defaultValue: 0.5
})))));
}
PropToolPickerFull.propTypes = {
settingsObj: _propTypes.default.shape().isRequired,
isCollapsed: _propTypes.default.bool.isRequired,
valueHandler: _propTypes.default.func.isRequired,
onToolTogle: _propTypes.default.func.isRequired
};
PropToolPickerFull.contextTypes = contextTypes;