@mirai/ui 1.0.42 → 1.0.44

package/build/components/InputDate/InputDate.js

@@ -0,0 +1,158 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputDate = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _InputText = require("../InputText");
+
+var _InputDateModule = _interopRequireDefault(require("./InputDate.module.css"));
+
+var _excluded = ["disabled", "error", "format", "label", "labels", "max", "min", "name", "required", "value", "onChange", "onError", "onEnter", "onLeave"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var InputDate = function InputDate(_ref) {
+  var disabled = _ref.disabled,
+      error = _ref.error,
+      _ref$format = _ref.format,
+      format = _ref$format === void 0 ? 'DD/MM/YYYY' : _ref$format,
+      label = _ref.label,
+      _ref$labels = _ref.labels,
+      labels = _ref$labels === void 0 ? [] : _ref$labels,
+      max = _ref.max,
+      min = _ref.min,
+      name = _ref.name,
+      required = _ref.required,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$onError = _ref.onError,
+      onError = _ref$onError === void 0 ? function () {} : _ref$onError,
+      _ref$onEnter = _ref.onEnter,
+      onEnter = _ref$onEnter === void 0 ? function () {} : _ref$onEnter,
+      _ref$onLeave = _ref.onLeave,
+      onLeave = _ref$onLeave === void 0 ? function () {} : _ref$onLeave,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      focus = _useState2[0],
+      setFocus = _useState2[1];
+
+  var parts = format.split('/');
+  var values = (value === null || value === void 0 ? void 0 : value.split('/')) || [];
+
+  var handleChange = function handleChange() {
+    var partValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var partKey = arguments.length > 1 ? arguments[1] : undefined;
+    var event = arguments.length > 2 ? arguments[2] : undefined;
+    var nextValue = parts.map(function (part, index) {
+      return part !== partKey ? values[index] || '' : partValue;
+    }).join('/');
+    var errors = (0, _helpers.getInputDateErrors)({
+      format: format,
+      max: max,
+      min: min,
+      value: value,
+      required: required
+    });
+    if (Object.keys(errors).length > 0) onError(errors);
+    onChange(nextValue, event);
+  };
+
+  var handleEnter = function handleEnter(event) {
+    setFocus(true);
+    onEnter(event);
+  };
+
+  var handleLeave = function handleLeave(event) {
+    setFocus(false);
+    onLeave(event);
+  };
+
+  var testId = others['data-testid'];
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    className: others.className,
+    "data-testid": testId
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    className: (0, _helpers.styles)(_InputDateModule.default.label, disabled && _InputDateModule.default.disabled, focus && _InputDateModule.default.focus, error && _InputDateModule.default.error)
+  }, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true
+  }, parts.map(function (part, index) {
+    return /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
+      disabled: disabled,
+      error: error,
+      hint: labels[index] || part,
+      key: index,
+      maxLength: part.length,
+      name: "".concat(name, ":").concat(part),
+      value: values[index],
+      onChange: function onChange(value) {
+        for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          rest[_key - 1] = arguments[_key];
+        }
+
+        return handleChange.apply(void 0, [value, part].concat(rest));
+      },
+      onEnter: handleEnter,
+      onLeave: handleLeave,
+      className: (0, _helpers.styles)(_InputDateModule.default.input, _InputDateModule.default[part.substring(0, 1)]),
+      "data-testid": testId ? "".concat(testId, "-").concat(part) : undefined
+    });
+  })));
+};
+
+exports.InputDate = InputDate;
+InputDate.displayName = 'Component:InputDate';
+InputDate.propTypes = {
+  disabled: _propTypes.default.bool,
+  error: _propTypes.default.bool,
+  format: _propTypes.default.string,
+  hint: _propTypes.default.string,
+  // !TODO
+  label: _propTypes.default.string,
+  labels: _propTypes.default.arrayOf(_propTypes.default.string),
+  max: _propTypes.default.string,
+  min: _propTypes.default.string,
+  name: _propTypes.default.string.isRequired,
+  required: _propTypes.default.bool,
+  value: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onError: _propTypes.default.func,
+  onEnter: _propTypes.default.func,
+  onLeave: _propTypes.default.func
+};
+//# sourceMappingURL=InputDate.js.map

package/build/components/InputDate/InputDate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","label","labels","max","min","name","required","value","onChange","onError","onEnter","onLeave","others","focus","setFocus","parts","split","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","Object","keys","length","handleEnter","handleLeave","testId","className","style","rest","input","substring","undefined","displayName","propTypes","PropTypes","bool","string","hint","arrayOf","isRequired","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getInputDateErrors, styles } from '../../helpers';\nimport { Text, View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from './InputDate.module.css';\n\nconst InputDate = ({\n  disabled,\n  error,\n  format = 'DD/MM/YYYY',\n  label,\n  labels = [],\n  max,\n  min,\n  name,\n  required,\n  value = '',\n  onChange = () => {},\n  onError = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const parts = format.split('/');\n  const values = value?.split('/') || [];\n\n  const handleChange = (partValue = '', partKey, event) => {\n    const nextValue = parts.map((part, index) => (part !== partKey ? values[index] || '' : partValue)).join('/');\n    const errors = getInputDateErrors({ format, max, min, value, required });\n    if (Object.keys(errors).length > 0) onError(errors);\n\n    onChange(nextValue, event);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const { ['data-testid']: testId } = others;\n\n  return (\n    <View className={others.className} data-testid={testId}>\n      <Text className={styles(style.label, disabled && style.disabled, focus && style.focus, error && style.error)}>\n        {label}\n      </Text>\n\n      <View row>\n        {parts.map((part, index) => (\n          <InputText\n            disabled={disabled}\n            error={error}\n            hint={labels[index] || part}\n            key={index}\n            maxLength={part.length}\n            name={`${name}:${part}`}\n            value={values[index]}\n            onChange={(value, ...rest) => handleChange(value, part, ...rest)}\n            onEnter={handleEnter}\n            onLeave={handleLeave}\n            className={styles(style.input, style[part.substring(0, 1)])}\n            data-testid={testId ? `${testId}-${part}` : undefined}\n          />\n        ))}\n      </View>\n    </View>\n  );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  format: PropTypes.string,\n  hint: PropTypes.string, // !TODO\n  label: PropTypes.string,\n  labels: PropTypes.arrayOf(PropTypes.string),\n  max: PropTypes.string,\n  min: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onError: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":"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"}

package/build/components/InputDate/InputDate.module.css

@@ -0,0 +1,32 @@
+:root {
+}
+
+.input {
+  max-width: calc(calc(var(--mirai-ui-input-font-size) * 2.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
+}
+
+.input:not(:last-child) {
+  margin-right: var(--mirai-ui-space-S);
+}
+
+.input.Y {
+  max-width: calc(calc(var(--mirai-ui-input-font-size) * 3.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
+}
+
+.label {
+  font-size: var(--mirai-ui-font-size-small);
+  margin-bottom: calc(var(--mirai-ui-font-size-small) * -1);
+  padding: 0 calc(var(--mirai-ui-input-text-padding-x) / 2);
+}
+
+.label.disabled {
+  color: var(--mirai-ui-input-text-disabled);
+}
+
+.label.focus {
+  color: var(--mirai-ui-input-text-focus);
+}
+
+.label.error {
+  color: var(--mirai-ui-error);
+}