react-misc-toolbox
Version:
- [ ] diagramexample | optimize creating from blank slate
323 lines (278 loc) • 10.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require("babel-runtime/helpers/extends");
var _extends3 = _interopRequireDefault(_extends2);
var _stringify = require("babel-runtime/core-js/json/stringify");
var _stringify2 = _interopRequireDefault(_stringify);
var _slicedToArray2 = require("babel-runtime/helpers/slicedToArray");
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");
var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n position: fixed;\n top: ", ";\n right: ", ";\n bottom: ", ";\n left: ", ";\n"], ["\n position: fixed;\n top: ", ";\n right: ", ";\n bottom: ", ";\n left: ", ";\n"]),
_templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n display: flex;\n align-items: center;\n flex-direction: ", ";\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: ", ";\n justify-content: center;\n"]);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require("styled-components");
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _OutsideClickListener = require("./OutsideClickListener");
var _KBListener = require("./KBListener");
var _helperFunctions = require("./helperFunctions");
var _SelectOne = require("./SelectOne");
var _SelectOne2 = _interopRequireDefault(_SelectOne);
var _InputBox = require("./InputBox");
var _InputBox2 = _interopRequireDefault(_InputBox);
var _Button = require("./Button");
var _Button2 = _interopRequireDefault(_Button);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var CONTAINER = (0, _styledComponents2.default)("div")(_templateObject, function (_ref) {
var position = _ref.position;
return position[0] ? position[0] + "rem" : null;
}, function (_ref2) {
var position = _ref2.position;
return position[1] ? position[1] + "rem" : null;
}, function (_ref3) {
var position = _ref3.position;
return position[2] ? position[2] + "rem" : null;
}, function (_ref4) {
var position = _ref4.position;
return position[3] ? position[3] + "rem" : null;
});
var BUTTON = (0, _styledComponents2.default)(_Button2.default)(_templateObject2, function (_ref5) {
var layout = _ref5.layout;
return layout === "row" ? "row" : "column";
});
var defaultSetStateProps = {
selectLinkedComponent: false,
selectTypeComponent: false,
selectIsCentralComponent: false,
fixedUIIsOn: false,
activeUIComponent: 0,
activeParentUI: 0
};
var FixedUI = function FixedUI(_ref6) {
var hotkeys = _ref6.hotkeys,
_ref6$layout = _ref6.layout,
layout = _ref6$layout === undefined ? "row" : _ref6$layout,
parentUIs = _ref6.parentUIs,
_ref6$position = _ref6.position,
position = _ref6$position === undefined ? [null, 3, 3, null] : _ref6$position,
children = _ref6.children,
options = _ref6.options,
_ref6$onSubmit = _ref6.onSubmit,
onSubmit = _ref6$onSubmit === undefined ? function () {
console.log("onSubmit()");
} : _ref6$onSubmit,
_ref6$pivotFrom = _ref6.pivotFrom,
pivotFrom = _ref6$pivotFrom === undefined ? "UPRIGHT" : _ref6$pivotFrom;
var _useSafeSetState = (0, _helperFunctions.useSafeSetState)(defaultSetStateProps),
_useSafeSetState2 = (0, _slicedToArray3.default)(_useSafeSetState, 2),
state = _useSafeSetState2[0],
setState = _useSafeSetState2[1];
var fixedUIIsOn = state.fixedUIIsOn,
activeUIComponent = state.activeUIComponent,
activeParentUI = state.activeParentUI;
var parentUIsLength = parentUIs.length;
var UIComponentsLength = options.filter(function (option) {
return option.parentID === activeParentUI;
}).length;
var goNext = function goNext(currentIndex, length) {
return currentIndex === length - 1 ? 0 : currentIndex + 1;
};
var goPrev = function goPrev(currentIndex, length) {
return currentIndex === 0 ? length - 1 : currentIndex - 1;
};
var goToNextUIComponent = function goToNextUIComponent() {
setState({
activeUIComponent: goNext(activeUIComponent, UIComponentsLength)
});
};
var goToPrevUIComponent = function goToPrevUIComponent() {
setState({
activeUIComponent: goPrev(activeUIComponent, UIComponentsLength)
});
};
var goToNextParentUI = function goToNextParentUI() {
setState({
activeParentUI: goNext(activeParentUI, parentUIsLength)
});
};
var goToPrevParentUI = function goToPrevParentUI() {
setState({
activeParentUI: goPrev(activeParentUI, parentUIsLength)
});
};
var resetActiveUIComponent = function resetActiveUIComponent() {
setState({
activeUIComponent: 0
});
};
var refs = parentUIs.map(function (parentUI, i) {
return options.filter(function (option) {
return option.parentID === parentUI.ID;
}).map(function (filteredOption, j) {
return _react2.default.createRef(null);
});
});
(0, _react.useEffect)(function () {
parentUIs.forEach(function (pUI, j) {
return options.filter(function (o) {
return o.parentID === pUI.ID;
}).forEach(function (option, i) {
if (option.type === "input" && activeUIComponent === i && activeParentUI === j && fixedUIIsOn === true) {
refs[j][i].current && refs[j][i].current.focus();
} else if (activeUIComponent !== i || fixedUIIsOn === false || activeParentUI !== j) {
refs[j][i].current && refs[j][i].current.blur();
}
});
});
}, [activeUIComponent, activeParentUI, fixedUIIsOn]);
(0, _KBListener.useKBListener)({
keyCodes: [[hotkeys && hotkeys.toggleIsOn ? hotkeys.toggleIsOn : [78, "altKey"], function () {
//console.log(nextOptionIndex)
//setCurrentOption(nextOptionIndex)
setState({ fixedUIIsOn: !fixedUIIsOn });
}], [[39, "altKey"], function () {
if (fixedUIIsOn) {
goToNextUIComponent();
}
}], [[37, "altKey"], function () {
if (fixedUIIsOn) {
goToPrevUIComponent();
}
}], [[39, "ctrlKey"], function () {
if (fixedUIIsOn) {
goToNextParentUI();
resetActiveUIComponent();
}
}], [[37, "ctrlKey"], function () {
if (fixedUIIsOn) {
goToPrevParentUI();
resetActiveUIComponent();
}
}], [[13, "altKey"], function () {
if (fixedUIIsOn) {
onSubmit();
}
}]]
});
var _useOutsideClickListe = (0, _OutsideClickListener.useOutsideClickListener)({
shouldCallHandler: true,
insideHandler: function insideHandler() {
return setState({ fixedUIIsOn: true });
},
outsideHandler: function outsideHandler() {
return setState({ fixedUIIsOn: false });
}
}),
elClickListenerRef = _useOutsideClickListe.elClickListenerRef;
return _react2.default.createElement(
_react.Fragment,
null,
parentUIs.map(function (parentUI, j) {
return _react2.default.createElement(
CONTAINER,
{
key: j,
layout: parentUI.layout ? parentUI.layout : "row",
position: parentUI.position ? parentUI.position : [null, 3, 3, null],
ref: elClickListenerRef
},
_react2.default.createElement(
BUTTON,
{
layout: parentUI.layout ? parentUI.layout : "row",
isOn: fixedUIIsOn === true && activeParentUI === parentUI.ID,
colors: "neutral"
},
"c:",
(0, _stringify2.default)(activeUIComponent),
"pui:",
(0, _stringify2.default)(activeParentUI),
options && options.filter(function (option) {
return option.parentID === parentUI.ID;
}).map(function (option, i) {
if (option.type === "button") {
return _react2.default.createElement(
_Button2.default,
(0, _extends3.default)({
externalInputRef: refs[j][i],
key: i,
onClick: function onClick(e) {
setState({
activeUIComponent: i,
activeParentUI: j
}), option.onClick(e);
},
isOn: fixedUIIsOn && activeUIComponent === i && activeParentUI === j || option.externalIsOn,
setExternalIsOnTo: function setExternalIsOnTo(x) {
if (x === true) {
setState({
activeUIComponent: i,
activeParentUI: j
});
}
}
}, option),
option.title
);
}
if (option.type === "input") {
return (
//console.log(j, i, refs[j][i]) || (
_react2.default.createElement(_InputBox2.default, (0, _extends3.default)({
externalInputRef: refs[j][i],
key: i,
onClick: function onClick() {
return setState({
activeUIComponent: i,
activeParentUI: j
});
},
externalIsOn: activeUIComponent === i && activeParentUI === j,
setExternalIsOnTo: function setExternalIsOnTo(x) {
if (x === true) {
setState({
activeUIComponent: i,
activeParentUI: j
});
}
}
}, option))
);
}
if (option.type === "selectone") {
return _react2.default.createElement(
_SelectOne2.default,
(0, _extends3.default)({
width: "10rem",
pivotFrom: pivotFrom,
key: i,
onClick: function onClick() {
return setState({
activeUIComponent: i,
activeParentUI: j
});
},
externalIsOn: activeUIComponent === i && activeParentUI === j,
setExternalIsOnTo: function setExternalIsOnTo(x) {
if (x === true) {
setState({
activeUIComponent: i,
activeParentUI: j
});
}
}
}, option),
option.options
);
}
}),
children
)
);
})
);
};
exports.default = FixedUI;