kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
84 lines • 4.06 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _excluded = ["hook", "label"];
var _templateObject, _templateObject2;
import React from 'react';
import PropTypes from 'prop-types';
import { BASE_CABINET_LAYOUTPOS, DEFAULT_FONT_FAMILY, TALL_CABINET_LAYOUTPOS, TEXT_COLOR_NEUTRAL_0, UNIT_CENTIMETER, UNIT_INCH } from "../../constants";
import { convert } from "../../utils/convert-units-lite";
import { FormNumberInput } from "../../components/style/export";
import { Map } from 'immutable';
import { toFixedFloat } from "../../utils/math";
import styled from 'styled-components';
var DistanceFloorWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n margin-top: 3px;\n"])));
var DistanceFloorTitle = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-right: auto;\n width: 110px;\n color: ", ";\n font-family: ", ";\n font-size: 16px;\n\n @media screen and (min-width: 1024) {\n font-size: 11px;\n }\n @media screen and (max-width: 1024) {\n font-size: 11px;\n }\n @media screen and (min-width: 1366) {\n font-size: 13px;\n }\n @media screen and (max-width: 1366) {\n font-size: 13px;\n }\n @media screen and (min-width: 1440) {\n font-size: 16px;\n }\n @media screen and (max-width: 1440) {\n font-size: 16px;\n }\n font-weight: 400;\n line-height: 15px;\n text-align: left;\n"])), TEXT_COLOR_NEUTRAL_0, DEFAULT_FONT_FAMILY);
export default function PropertyLengthMeasure(_ref, _ref2) {
var value = _ref.value,
onUpdate = _ref.onUpdate,
onValid = _ref.onValid,
configs = _ref.configs,
sourceElement = _ref.sourceElement,
internalState = _ref.internalState,
state = _ref.state;
var catalog = _ref2.catalog;
var _unit = value.get('_unit');
var unit = state.getIn(['scene', 'layers', state.scene.selectedLayer, 'unit']);
var length = value.get('length') || 0; // in centi
var _length = value.get('_length') || length; // in _unit
if (!_unit) {
_unit = UNIT_INCH;
_length = convert(length).from(UNIT_CENTIMETER).to(UNIT_INCH);
}
var type = value.get('type') || BASE_CABINET_LAYOUTPOS;
var hook = configs.hook,
label = configs.label,
configRest = _objectWithoutProperties(configs, _excluded);
var update = function update(lengthInput, unitInput, type) {
var newLength = toFixedFloat(lengthInput);
var merged = null;
if (type === 0) {
merged = value.merge({
_length: newLength,
_unit: unitInput,
length: convert(newLength).from(unitInput).to(UNIT_CENTIMETER)
});
} else {
merged = value.merge({
_length: convert(newLength).from(UNIT_CENTIMETER).to(unitInput),
_unit: unitInput,
length: newLength
});
}
if (hook) {
return hook(merged, sourceElement, internalState, state).then(function (val) {
return onUpdate(val);
});
}
return onUpdate(merged);
};
return /*#__PURE__*/React.createElement(DistanceFloorWrapper, null, /*#__PURE__*/React.createElement(DistanceFloorTitle, null, label), /*#__PURE__*/React.createElement(FormNumberInput, _extends({
disabled: type === TALL_CABINET_LAYOUTPOS,
value: convert(_length).from('in').to(unit),
onChange: function onChange(event) {
return update(event.target.value, _unit, 0);
},
onValid: onValid,
labelName: label,
style: {
paddingRight: '40px'
}
}, configRest)));
}
PropertyLengthMeasure.propTypes = {
value: PropTypes.instanceOf(Map).isRequired,
onUpdate: PropTypes.func.isRequired,
onValid: PropTypes.func,
configs: PropTypes.object.isRequired,
sourceElement: PropTypes.object,
internalState: PropTypes.object,
state: PropTypes.object.isRequired
};
PropertyLengthMeasure.contextTypes = {
catalog: PropTypes.object.isRequired
};