@activecollab/components 1.0.390 → 1.0.391
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/EditableContent/EditableContent.js +5 -3
- package/dist/cjs/components/EditableContent/EditableContent.js.map +1 -1
- package/dist/cjs/components/EditableHours/EditableHours.js +54 -22
- package/dist/cjs/components/EditableHours/EditableHours.js.map +1 -1
- package/dist/esm/components/EditableContent/EditableContent.d.ts.map +1 -1
- package/dist/esm/components/EditableContent/EditableContent.js +5 -3
- package/dist/esm/components/EditableContent/EditableContent.js.map +1 -1
- package/dist/esm/components/EditableHours/EditableHours.d.ts +3 -1
- package/dist/esm/components/EditableHours/EditableHours.d.ts.map +1 -1
- package/dist/esm/components/EditableHours/EditableHours.js +48 -23
- package/dist/esm/components/EditableHours/EditableHours.js.map +1 -1
- package/dist/index.js +52 -25
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ exports.EditableContent = void 0;
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _utils = require("../../utils");
|
|
10
10
|
var _Styles = require("./Styles");
|
|
11
|
-
var _excluded = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef"];
|
|
11
|
+
var _excluded = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children"];
|
|
12
12
|
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); }
|
|
13
13
|
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; }
|
|
14
14
|
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); }
|
|
@@ -23,6 +23,7 @@ var EditableContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
23
23
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
24
24
|
inputProps = _ref.inputProps,
|
|
25
25
|
wrapRef = _ref.wrapRef,
|
|
26
|
+
children = _ref.children,
|
|
26
27
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
27
28
|
var intInputRef = (0, _react.useRef)(null);
|
|
28
29
|
var handleRef = (0, _utils.useForkRef)(ref, intInputRef);
|
|
@@ -39,8 +40,9 @@ var EditableContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
39
40
|
variant: variant,
|
|
40
41
|
forwardedAs: "span",
|
|
41
42
|
weight: weight,
|
|
42
|
-
$disabled: disabled
|
|
43
|
-
|
|
43
|
+
$disabled: disabled,
|
|
44
|
+
className: "presentation"
|
|
45
|
+
}, children ? children : inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/_react.default.createElement(_Styles.StyledInput, _extends({}, inputProps, {
|
|
44
46
|
ref: handleRef,
|
|
45
47
|
forwardedAs: "input",
|
|
46
48
|
variant: variant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableContent.js","names":["EditableContent","forwardRef","ref","className","variant","weight","disabled","inputProps","wrapRef","props","intInputRef","useRef","handleRef","useForkRef","handleBlur","useCallback","evt","current","scrollLeft","onBlur","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={wrapRef} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n >\n {inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={handleRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n disabled={disabled}\n data-form-type=\"other\"\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAA8D;AAAA;AAAA;AAAA;AAAA;AAAA;AAevD,IAAMA,eAAe,gBAAG,IAAAC,iBAAU,EAKvC,
|
|
1
|
+
{"version":3,"file":"EditableContent.js","names":["EditableContent","forwardRef","ref","className","variant","weight","disabled","inputProps","wrapRef","children","props","intInputRef","useRef","handleRef","useForkRef","handleBlur","useCallback","evt","current","scrollLeft","onBlur","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n children,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={wrapRef} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n className=\"presentation\"\n >\n {children ? children : inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={handleRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n disabled={disabled}\n data-form-type=\"other\"\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAA8D;AAAA;AAAA;AAAA;AAAA;AAAA;AAevD,IAAMA,eAAe,gBAAG,IAAAC,iBAAU,EAKvC,gBAWEC,GAAG,EACA;EAAA,IAVDC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,QAAQ;IAClBC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,UAAU,QAAVA,UAAU;IACVC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACLC,KAAK;EAIV,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAClD,IAAMC,SAAS,GAAG,IAAAC,iBAAU,EAACZ,GAAG,EAAES,WAAW,CAAC;EAE9C,IAAMI,UAAU,GAAG,IAAAC,kBAAW,EAC5B,UAACC,GAAG,EAAK;IACP,IAAIN,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAEO,OAAO,EAAE;MACxBP,WAAW,CAACO,OAAO,CAACC,UAAU,GAAG,CAAC;IACpC;IACA,QAAOZ,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEa,MAAM,gBAAe,KAAIb,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEa,MAAM,CAACH,GAAG,CAAC;EACrE,CAAC,EACD,CAACV,UAAU,CAAC,CACb;EAED,oBACE,6BAAC,iBAAS;IAAC,SAAS,EAAEJ,SAAU;IAAC,GAAG,EAAEK;EAAQ,GAAKE,KAAK,gBACtD,6BAAC,kBAAU;IACT,OAAO,EAAEN,OAAQ;IACjB,WAAW,EAAC,MAAM;IAClB,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC,QAAS;IACpB,SAAS,EAAC;EAAc,GAEvBG,QAAQ,GAAGA,QAAQ,GAAGF,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEc,KAAK,CAC7B,eACb,6BAAC,mBAAW,eACNd,UAAU;IACd,GAAG,EAAEM,SAAU;IACf,WAAW,EAAC,OAAO;IACnB,OAAO,EAAET,OAAQ;IACjB,MAAM,EAAEC,MAAO;IACf,KAAK,EAAEE,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEc,KAAM;IACzB,MAAM,EAAEN,UAAW;IACnB,QAAQ,EAAET,QAAS;IACnB,kBAAe;EAAO,GACtB,CACQ;AAEhB,CAAC,CACF;AAAC;AAEFN,eAAe,CAACsB,WAAW,GAAG,iBAAiB"}
|
|
@@ -10,7 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
|
|
11
11
|
var _utils = require("../../utils");
|
|
12
12
|
var _useInputHours2 = require("../../hooks/useInputHours");
|
|
13
|
-
var
|
|
13
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
14
|
+
var _excluded = ["value", "onCancel", "onSave", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onEnterKeyPress", "inputProps", "onClick", "ticking", "onFocus"];
|
|
14
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
16
|
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); }
|
|
16
17
|
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; }
|
|
@@ -18,26 +19,41 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
18
19
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
19
20
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
20
21
|
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; }
|
|
22
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
23
|
+
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."); }
|
|
24
|
+
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); }
|
|
25
|
+
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; }
|
|
26
|
+
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; }
|
|
27
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
21
28
|
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; }
|
|
22
29
|
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; }
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
30
|
+
var StyledEditableContent = (0, _styledComponents.default)(_EditableContent.EditableContent).withConfig({
|
|
31
|
+
displayName: "EditableHours__StyledEditableContent",
|
|
32
|
+
componentId: "sc-nvi34j-0"
|
|
33
|
+
})(["", ""], function (_ref) {
|
|
34
|
+
var $ticking = _ref.$ticking;
|
|
35
|
+
return $ticking && (0, _styledComponents.css)([".presentation{visibility:visible;}input{opacity:0;}"]);
|
|
36
|
+
});
|
|
37
|
+
var EditableHours = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
|
|
38
|
+
var defaultValue = _ref2.value,
|
|
39
|
+
onCancel = _ref2.onCancel,
|
|
40
|
+
onSave = _ref2.onSave,
|
|
41
|
+
allowEmptyValue = _ref2.allowEmptyValue,
|
|
42
|
+
_ref2$withLeadingZero = _ref2.withLeadingZero,
|
|
43
|
+
withLeadingZero = _ref2$withLeadingZero === void 0 ? true : _ref2$withLeadingZero,
|
|
44
|
+
_ref2$validation = _ref2.validation,
|
|
45
|
+
validation = _ref2$validation === void 0 ? _utils.validateTimeInput : _ref2$validation,
|
|
46
|
+
_ref2$incrementOnlySe = _ref2.incrementOnlySelected,
|
|
47
|
+
incrementOnlySelected = _ref2$incrementOnlySe === void 0 ? false : _ref2$incrementOnlySe,
|
|
48
|
+
_ref2$minuteIncrement = _ref2.minuteIncrement,
|
|
49
|
+
minuteIncrement = _ref2$minuteIncrement === void 0 ? 1 : _ref2$minuteIncrement,
|
|
50
|
+
className = _ref2.className,
|
|
51
|
+
externalEnterKeyPress = _ref2.onEnterKeyPress,
|
|
52
|
+
externalInputProps = _ref2.inputProps,
|
|
53
|
+
externalOnClick = _ref2.onClick,
|
|
54
|
+
ticking = _ref2.ticking,
|
|
55
|
+
onFocus = _ref2.onFocus,
|
|
56
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
41
57
|
var inputRef = (0, _react.useRef)(null);
|
|
42
58
|
var handleRef = (0, _useForkRef.default)(ref, inputRef);
|
|
43
59
|
var _useInputHours = (0, _useInputHours2.useInputHours)({
|
|
@@ -79,7 +95,19 @@ var EditableHours = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
79
95
|
return prevState;
|
|
80
96
|
});
|
|
81
97
|
}, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);
|
|
82
|
-
|
|
98
|
+
var splitTime = (0, _react.useMemo)(function () {
|
|
99
|
+
if (value && ticking) {
|
|
100
|
+
var _value$split = value.split(":"),
|
|
101
|
+
_value$split2 = _slicedToArray(_value$split, 2),
|
|
102
|
+
hours = _value$split2[0],
|
|
103
|
+
minutes = _value$split2[1];
|
|
104
|
+
return {
|
|
105
|
+
hours: hours,
|
|
106
|
+
minutes: minutes
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
}, [value, ticking]);
|
|
110
|
+
return /*#__PURE__*/_react.default.createElement(StyledEditableContent, _extends({
|
|
83
111
|
ref: handleRef,
|
|
84
112
|
className: className,
|
|
85
113
|
inputProps: _objectSpread(_objectSpread({}, externalInputProps), {}, {
|
|
@@ -89,9 +117,13 @@ var EditableHours = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
89
117
|
onChange: onChange,
|
|
90
118
|
onClick: onClick,
|
|
91
119
|
onDoubleClick: onDoubleClick,
|
|
120
|
+
onFocus: onFocus,
|
|
92
121
|
type: "text"
|
|
93
|
-
})
|
|
94
|
-
|
|
122
|
+
}),
|
|
123
|
+
$ticking: ticking
|
|
124
|
+
}, rest), ticking && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, splitTime === null || splitTime === void 0 ? void 0 : splitTime.hours, /*#__PURE__*/_react.default.createElement("span", {
|
|
125
|
+
className: "tw-animate-ping"
|
|
126
|
+
}, ":"), splitTime === null || splitTime === void 0 ? void 0 : splitTime.minutes));
|
|
95
127
|
});
|
|
96
128
|
exports.EditableHours = EditableHours;
|
|
97
129
|
EditableHours.displayName = "EditableHours";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableHours.js","names":["EditableHours","React","forwardRef","ref","defaultValue","value","onCancel","onSave","allowEmptyValue","withLeadingZero","validation","validateTimeInput","incrementOnlySelected","minuteIncrement","className","externalEnterKeyPress","onEnterKeyPress","externalInputProps","inputProps","externalOnClick","onClick","rest","inputRef","useRef","handleRef","useForkRef","useInputHours","setCurrentValue","setPrevValue","onBlur","onKeyDown","onChange","onDoubleClick","useEffect","_value","undefined","decimalToHours","prevState","type","displayName"],"sources":["../../../../src/components/EditableHours/EditableHours.tsx"],"sourcesContent":["import { EditableContent, EditableContentInterface } from \"../EditableContent\";\nimport React, { useEffect, useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { decimalToHours, validateTimeInput } from \"../../utils\";\nimport { IInputHours, useInputHours } from \"../../hooks/useInputHours\";\n\nexport interface EditableHoursProps\n extends EditableContentInterface,\n Omit<IInputHours, \"onChange\"> {\n className?: string;\n}\nexport const EditableHours = React.forwardRef<\n HTMLDivElement,\n EditableHoursProps\n>(\n (\n {\n value: defaultValue,\n onCancel,\n onSave,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n onEnterKeyPress: externalEnterKeyPress,\n inputProps: externalInputProps,\n onClick: externalOnClick,\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n const { inputProps, setCurrentValue, setPrevValue } = useInputHours(\n {\n value: defaultValue,\n withLeadingZero,\n onSave,\n validation,\n allowEmptyValue,\n onCancel,\n minuteIncrement,\n incrementOnlySelected,\n onEnterKeyPress: externalEnterKeyPress,\n onClick: externalOnClick,\n },\n inputRef\n );\n\n const { value, onBlur, onKeyDown, onChange, onClick, onDoubleClick } =\n inputProps;\n\n useEffect(() => {\n let _value;\n if (defaultValue !== undefined) {\n _value = decimalToHours(defaultValue, withLeadingZero);\n }\n setCurrentValue((prevState) => {\n if (prevState !== _value) {\n return _value;\n }\n return prevState;\n });\n setPrevValue((prevState) => {\n if (prevState !== _value) {\n return _value;\n }\n return prevState;\n });\n }, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);\n\n return (\n <
|
|
1
|
+
{"version":3,"file":"EditableHours.js","names":["StyledEditableContent","styled","EditableContent","$ticking","css","EditableHours","React","forwardRef","ref","defaultValue","value","onCancel","onSave","allowEmptyValue","withLeadingZero","validation","validateTimeInput","incrementOnlySelected","minuteIncrement","className","externalEnterKeyPress","onEnterKeyPress","externalInputProps","inputProps","externalOnClick","onClick","ticking","onFocus","rest","inputRef","useRef","handleRef","useForkRef","useInputHours","setCurrentValue","setPrevValue","onBlur","onKeyDown","onChange","onDoubleClick","useEffect","_value","undefined","decimalToHours","prevState","splitTime","useMemo","split","hours","minutes","type","displayName"],"sources":["../../../../src/components/EditableHours/EditableHours.tsx"],"sourcesContent":["import { EditableContent, EditableContentInterface } from \"../EditableContent\";\nimport React, { useEffect, useMemo, useRef, FocusEvent } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { decimalToHours, validateTimeInput } from \"../../utils\";\nimport { IInputHours, useInputHours } from \"../../hooks/useInputHours\";\nimport styled, { css } from \"styled-components\";\n\nexport interface EditableHoursProps\n extends EditableContentInterface,\n Omit<IInputHours, \"onChange\"> {\n className?: string;\n ticking?: boolean;\n onFocus?: (event: FocusEvent) => void;\n}\n\nconst StyledEditableContent = styled(EditableContent)<{ $ticking?: boolean }>`\n ${({ $ticking }) =>\n $ticking &&\n css`\n .presentation {\n visibility: visible;\n }\n\n input {\n opacity: 0;\n }\n `}\n`;\n\nexport const EditableHours = React.forwardRef<\n HTMLDivElement,\n EditableHoursProps\n>(\n (\n {\n value: defaultValue,\n onCancel,\n onSave,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n onEnterKeyPress: externalEnterKeyPress,\n inputProps: externalInputProps,\n onClick: externalOnClick,\n ticking,\n onFocus,\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n const { inputProps, setCurrentValue, setPrevValue } = useInputHours(\n {\n value: defaultValue,\n withLeadingZero,\n onSave,\n validation,\n allowEmptyValue,\n onCancel,\n minuteIncrement,\n incrementOnlySelected,\n onEnterKeyPress: externalEnterKeyPress,\n onClick: externalOnClick,\n },\n inputRef\n );\n\n const { value, onBlur, onKeyDown, onChange, onClick, onDoubleClick } =\n inputProps;\n\n useEffect(() => {\n let _value;\n if (defaultValue !== undefined) {\n _value = decimalToHours(defaultValue, withLeadingZero);\n }\n setCurrentValue((prevState) => {\n if (prevState !== _value) {\n return _value;\n }\n return prevState;\n });\n setPrevValue((prevState) => {\n if (prevState !== _value) {\n return _value;\n }\n return prevState;\n });\n }, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);\n\n const splitTime = useMemo(() => {\n if (value && ticking) {\n const [hours, minutes] = value.split(\":\");\n\n return {\n hours,\n minutes,\n };\n }\n }, [value, ticking]);\n\n return (\n <StyledEditableContent\n ref={handleRef}\n className={className}\n inputProps={{\n ...externalInputProps,\n value,\n onBlur,\n onKeyDown,\n onChange,\n onClick,\n onDoubleClick,\n onFocus,\n type: \"text\",\n }}\n $ticking={ticking}\n {...rest}\n >\n {ticking && (\n <>\n {splitTime?.hours}\n <span className=\"tw-animate-ping\">:</span>\n {splitTime?.minutes}\n </>\n )}\n </StyledEditableContent>\n );\n }\n);\n\nEditableHours.displayName = \"EditableHours\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,GAAG,EAAuB,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAGnD,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IACjD,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,GAAG,EAAuB,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAGnD,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IACjD,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,yuJAwD3B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef"];
|
|
3
|
+
var _excluded = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children"];
|
|
4
4
|
import React, { forwardRef, useCallback, useRef } from "react";
|
|
5
5
|
import { useForkRef } from "../../utils";
|
|
6
6
|
import { StyledDiv, StyledInput, StyledSpan } from "./Styles";
|
|
@@ -13,6 +13,7 @@ export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
13
13
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
14
14
|
inputProps = _ref.inputProps,
|
|
15
15
|
wrapRef = _ref.wrapRef,
|
|
16
|
+
children = _ref.children,
|
|
16
17
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
17
18
|
var intInputRef = useRef(null);
|
|
18
19
|
var handleRef = useForkRef(ref, intInputRef);
|
|
@@ -29,8 +30,9 @@ export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
29
30
|
variant: variant,
|
|
30
31
|
forwardedAs: "span",
|
|
31
32
|
weight: weight,
|
|
32
|
-
$disabled: disabled
|
|
33
|
-
|
|
33
|
+
$disabled: disabled,
|
|
34
|
+
className: "presentation"
|
|
35
|
+
}, children ? children : inputProps == null ? void 0 : inputProps.value), /*#__PURE__*/React.createElement(StyledInput, _extends({}, inputProps, {
|
|
34
36
|
ref: handleRef,
|
|
35
37
|
forwardedAs: "input",
|
|
36
38
|
variant: variant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableContent.js","names":["React","forwardRef","useCallback","useRef","useForkRef","StyledDiv","StyledInput","StyledSpan","EditableContent","ref","className","variant","weight","disabled","inputProps","wrapRef","props","intInputRef","handleRef","handleBlur","evt","current","scrollLeft","onBlur","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={wrapRef} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n >\n {inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={handleRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n disabled={disabled}\n data-form-type=\"other\"\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAOC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,UAAU,QAAQ,aAAa;AAExC,SAASC,SAAS,EAAEC,WAAW,EAAEC,UAAU,QAAQ,UAAU;AAe7D,OAAO,IAAMC,eAAe,gBAAGP,UAAU,CAKvC,
|
|
1
|
+
{"version":3,"file":"EditableContent.js","names":["React","forwardRef","useCallback","useRef","useForkRef","StyledDiv","StyledInput","StyledSpan","EditableContent","ref","className","variant","weight","disabled","inputProps","wrapRef","children","props","intInputRef","handleRef","handleBlur","evt","current","scrollLeft","onBlur","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n children,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={wrapRef} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n className=\"presentation\"\n >\n {children ? children : inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={handleRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n disabled={disabled}\n data-form-type=\"other\"\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAOC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,UAAU,QAAQ,aAAa;AAExC,SAASC,SAAS,EAAEC,WAAW,EAAEC,UAAU,QAAQ,UAAU;AAe7D,OAAO,IAAMC,eAAe,gBAAGP,UAAU,CAKvC,gBAWEQ,GAAG,EACA;EAAA,IAVDC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,QAAQ;IAClBC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,UAAU,QAAVA,UAAU;IACVC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACLC,KAAK;EAIV,IAAMC,WAAW,GAAGf,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMgB,SAAS,GAAGf,UAAU,CAACK,GAAG,EAAES,WAAW,CAAC;EAE9C,IAAME,UAAU,GAAGlB,WAAW,CAC5B,UAACmB,GAAG,EAAK;IACP,IAAIH,WAAW,YAAXA,WAAW,CAAEI,OAAO,EAAE;MACxBJ,WAAW,CAACI,OAAO,CAACC,UAAU,GAAG,CAAC;IACpC;IACA,QAAOT,UAAU,oBAAVA,UAAU,CAAEU,MAAM,gBAAe,KAAIV,UAAU,oBAAVA,UAAU,CAAEU,MAAM,CAACH,GAAG,CAAC;EACrE,CAAC,EACD,CAACP,UAAU,CAAC,CACb;EAED,oBACE,oBAAC,SAAS;IAAC,SAAS,EAAEJ,SAAU;IAAC,GAAG,EAAEK;EAAQ,GAAKE,KAAK,gBACtD,oBAAC,UAAU;IACT,OAAO,EAAEN,OAAQ;IACjB,WAAW,EAAC,MAAM;IAClB,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC,QAAS;IACpB,SAAS,EAAC;EAAc,GAEvBG,QAAQ,GAAGA,QAAQ,GAAGF,UAAU,oBAAVA,UAAU,CAAEW,KAAK,CAC7B,eACb,oBAAC,WAAW,eACNX,UAAU;IACd,GAAG,EAAEK,SAAU;IACf,WAAW,EAAC,OAAO;IACnB,OAAO,EAAER,OAAQ;IACjB,MAAM,EAAEC,MAAO;IACf,KAAK,EAAEE,UAAU,oBAAVA,UAAU,CAAEW,KAAM;IACzB,MAAM,EAAEL,UAAW;IACnB,QAAQ,EAAEP,QAAS;IACnB,kBAAe;EAAO,GACtB,CACQ;AAEhB,CAAC,CACF;AAEDL,eAAe,CAACkB,WAAW,GAAG,iBAAiB"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { EditableContentInterface } from "../EditableContent";
|
|
2
|
-
import React from "react";
|
|
2
|
+
import React, { FocusEvent } from "react";
|
|
3
3
|
import { IInputHours } from "../../hooks/useInputHours";
|
|
4
4
|
export interface EditableHoursProps extends EditableContentInterface, Omit<IInputHours, "onChange"> {
|
|
5
5
|
className?: string;
|
|
6
|
+
ticking?: boolean;
|
|
7
|
+
onFocus?: (event: FocusEvent) => void;
|
|
6
8
|
}
|
|
7
9
|
export declare const EditableHours: React.ForwardRefExoticComponent<EditableHoursProps & React.RefAttributes<HTMLDivElement>>;
|
|
8
10
|
//# sourceMappingURL=EditableHours.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableHours.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableHours/EditableHours.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,
|
|
1
|
+
{"version":3,"file":"EditableHours.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableHours/EditableHours.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,KAAK,EAAE,EAA8B,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,WAAW,EAAiB,MAAM,2BAA2B,CAAC;AAGvE,MAAM,WAAW,kBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAgBD,eAAO,MAAM,aAAa,2FAwGzB,CAAC"}
|
|
@@ -1,29 +1,39 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["value", "onCancel", "onSave", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onEnterKeyPress", "inputProps", "onClick"];
|
|
3
|
+
var _excluded = ["value", "onCancel", "onSave", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onEnterKeyPress", "inputProps", "onClick", "ticking", "onFocus"];
|
|
4
4
|
import { EditableContent } from "../EditableContent";
|
|
5
|
-
import React, { useEffect, useRef } from "react";
|
|
5
|
+
import React, { useEffect, useMemo, useRef } from "react";
|
|
6
6
|
import useForkRef from "../../utils/useForkRef";
|
|
7
7
|
import { decimalToHours, validateTimeInput } from "../../utils";
|
|
8
8
|
import { useInputHours } from "../../hooks/useInputHours";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
9
|
+
import styled, { css } from "styled-components";
|
|
10
|
+
var StyledEditableContent = styled(EditableContent).withConfig({
|
|
11
|
+
displayName: "EditableHours__StyledEditableContent",
|
|
12
|
+
componentId: "sc-nvi34j-0"
|
|
13
|
+
})(["", ""], function (_ref) {
|
|
14
|
+
var $ticking = _ref.$ticking;
|
|
15
|
+
return $ticking && css([".presentation{visibility:visible;}input{opacity:0;}"]);
|
|
16
|
+
});
|
|
17
|
+
export var EditableHours = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
18
|
+
var defaultValue = _ref2.value,
|
|
19
|
+
onCancel = _ref2.onCancel,
|
|
20
|
+
onSave = _ref2.onSave,
|
|
21
|
+
allowEmptyValue = _ref2.allowEmptyValue,
|
|
22
|
+
_ref2$withLeadingZero = _ref2.withLeadingZero,
|
|
23
|
+
withLeadingZero = _ref2$withLeadingZero === void 0 ? true : _ref2$withLeadingZero,
|
|
24
|
+
_ref2$validation = _ref2.validation,
|
|
25
|
+
validation = _ref2$validation === void 0 ? validateTimeInput : _ref2$validation,
|
|
26
|
+
_ref2$incrementOnlySe = _ref2.incrementOnlySelected,
|
|
27
|
+
incrementOnlySelected = _ref2$incrementOnlySe === void 0 ? false : _ref2$incrementOnlySe,
|
|
28
|
+
_ref2$minuteIncrement = _ref2.minuteIncrement,
|
|
29
|
+
minuteIncrement = _ref2$minuteIncrement === void 0 ? 1 : _ref2$minuteIncrement,
|
|
30
|
+
className = _ref2.className,
|
|
31
|
+
externalEnterKeyPress = _ref2.onEnterKeyPress,
|
|
32
|
+
externalInputProps = _ref2.inputProps,
|
|
33
|
+
externalOnClick = _ref2.onClick,
|
|
34
|
+
ticking = _ref2.ticking,
|
|
35
|
+
onFocus = _ref2.onFocus,
|
|
36
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
27
37
|
var inputRef = useRef(null);
|
|
28
38
|
var handleRef = useForkRef(ref, inputRef);
|
|
29
39
|
var _useInputHours = useInputHours({
|
|
@@ -65,7 +75,18 @@ export var EditableHours = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
65
75
|
return prevState;
|
|
66
76
|
});
|
|
67
77
|
}, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);
|
|
68
|
-
|
|
78
|
+
var splitTime = useMemo(function () {
|
|
79
|
+
if (value && ticking) {
|
|
80
|
+
var _value$split = value.split(":"),
|
|
81
|
+
hours = _value$split[0],
|
|
82
|
+
minutes = _value$split[1];
|
|
83
|
+
return {
|
|
84
|
+
hours: hours,
|
|
85
|
+
minutes: minutes
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
}, [value, ticking]);
|
|
89
|
+
return /*#__PURE__*/React.createElement(StyledEditableContent, _extends({
|
|
69
90
|
ref: handleRef,
|
|
70
91
|
className: className,
|
|
71
92
|
inputProps: _extends({}, externalInputProps, {
|
|
@@ -75,9 +96,13 @@ export var EditableHours = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
75
96
|
onChange: onChange,
|
|
76
97
|
onClick: onClick,
|
|
77
98
|
onDoubleClick: onDoubleClick,
|
|
99
|
+
onFocus: onFocus,
|
|
78
100
|
type: "text"
|
|
79
|
-
})
|
|
80
|
-
|
|
101
|
+
}),
|
|
102
|
+
$ticking: ticking
|
|
103
|
+
}, rest), ticking && /*#__PURE__*/React.createElement(React.Fragment, null, splitTime == null ? void 0 : splitTime.hours, /*#__PURE__*/React.createElement("span", {
|
|
104
|
+
className: "tw-animate-ping"
|
|
105
|
+
}, ":"), splitTime == null ? void 0 : splitTime.minutes));
|
|
81
106
|
});
|
|
82
107
|
EditableHours.displayName = "EditableHours";
|
|
83
108
|
//# sourceMappingURL=EditableHours.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableHours.js","names":["EditableContent","React","useEffect","useRef","useForkRef","decimalToHours","validateTimeInput","useInputHours","EditableHours","forwardRef","ref","defaultValue","value","onCancel","onSave","allowEmptyValue","withLeadingZero","validation","incrementOnlySelected","minuteIncrement","className","externalEnterKeyPress","onEnterKeyPress","externalInputProps","inputProps","externalOnClick","onClick","rest","inputRef","handleRef","setCurrentValue","setPrevValue","onBlur","onKeyDown","onChange","onDoubleClick","_value","undefined","prevState","type","displayName"],"sources":["../../../../src/components/EditableHours/EditableHours.tsx"],"sourcesContent":["import { EditableContent, EditableContentInterface } from \"../EditableContent\";\nimport React, { useEffect, useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { decimalToHours, validateTimeInput } from \"../../utils\";\nimport { IInputHours, useInputHours } from \"../../hooks/useInputHours\";\n\nexport interface EditableHoursProps\n extends EditableContentInterface,\n Omit<IInputHours, \"onChange\"> {\n className?: string;\n}\nexport const EditableHours = React.forwardRef<\n HTMLDivElement,\n EditableHoursProps\n>(\n (\n {\n value: defaultValue,\n onCancel,\n onSave,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n onEnterKeyPress: externalEnterKeyPress,\n inputProps: externalInputProps,\n onClick: externalOnClick,\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n const { inputProps, setCurrentValue, setPrevValue } = useInputHours(\n {\n value: defaultValue,\n withLeadingZero,\n onSave,\n validation,\n allowEmptyValue,\n onCancel,\n minuteIncrement,\n incrementOnlySelected,\n onEnterKeyPress: externalEnterKeyPress,\n onClick: externalOnClick,\n },\n inputRef\n );\n\n const { value, onBlur, onKeyDown, onChange, onClick, onDoubleClick } =\n inputProps;\n\n useEffect(() => {\n let _value;\n if (defaultValue !== undefined) {\n _value = decimalToHours(defaultValue, withLeadingZero);\n }\n setCurrentValue((prevState) => {\n if (prevState !== _value) {\n return _value;\n }\n return prevState;\n });\n setPrevValue((prevState) => {\n if (prevState !== _value) {\n return _value;\n }\n return prevState;\n });\n }, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);\n\n return (\n <
|
|
1
|
+
{"version":3,"file":"EditableHours.js","names":["EditableContent","React","useEffect","useMemo","useRef","useForkRef","decimalToHours","validateTimeInput","useInputHours","styled","css","StyledEditableContent","$ticking","EditableHours","forwardRef","ref","defaultValue","value","onCancel","onSave","allowEmptyValue","withLeadingZero","validation","incrementOnlySelected","minuteIncrement","className","externalEnterKeyPress","onEnterKeyPress","externalInputProps","inputProps","externalOnClick","onClick","ticking","onFocus","rest","inputRef","handleRef","setCurrentValue","setPrevValue","onBlur","onKeyDown","onChange","onDoubleClick","_value","undefined","prevState","splitTime","split","hours","minutes","type","displayName"],"sources":["../../../../src/components/EditableHours/EditableHours.tsx"],"sourcesContent":["import { EditableContent, EditableContentInterface } from \"../EditableContent\";\nimport React, { useEffect, useMemo, useRef, FocusEvent } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { decimalToHours, validateTimeInput } from \"../../utils\";\nimport { IInputHours, useInputHours } from \"../../hooks/useInputHours\";\nimport styled, { css } from \"styled-components\";\n\nexport interface EditableHoursProps\n extends EditableContentInterface,\n Omit<IInputHours, \"onChange\"> {\n className?: string;\n ticking?: boolean;\n onFocus?: (event: FocusEvent) => void;\n}\n\nconst StyledEditableContent = styled(EditableContent)<{ $ticking?: boolean }>`\n ${({ $ticking }) =>\n $ticking &&\n css`\n .presentation {\n visibility: visible;\n }\n\n input {\n opacity: 0;\n }\n `}\n`;\n\nexport const EditableHours = React.forwardRef<\n HTMLDivElement,\n EditableHoursProps\n>(\n (\n {\n value: defaultValue,\n onCancel,\n onSave,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n onEnterKeyPress: externalEnterKeyPress,\n inputProps: externalInputProps,\n onClick: externalOnClick,\n ticking,\n onFocus,\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n const { inputProps, setCurrentValue, setPrevValue } = useInputHours(\n {\n value: defaultValue,\n withLeadingZero,\n onSave,\n validation,\n allowEmptyValue,\n onCancel,\n minuteIncrement,\n incrementOnlySelected,\n onEnterKeyPress: externalEnterKeyPress,\n onClick: externalOnClick,\n },\n inputRef\n );\n\n const { value, onBlur, onKeyDown, onChange, onClick, onDoubleClick } =\n inputProps;\n\n useEffect(() => {\n let _value;\n if (defaultValue !== undefined) {\n _value = decimalToHours(defaultValue, withLeadingZero);\n }\n setCurrentValue((prevState) => {\n if (prevState !== _value) {\n return _value;\n }\n return prevState;\n });\n setPrevValue((prevState) => {\n if (prevState !== _value) {\n return _value;\n }\n return prevState;\n });\n }, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);\n\n const splitTime = useMemo(() => {\n if (value && ticking) {\n const [hours, minutes] = value.split(\":\");\n\n return {\n hours,\n minutes,\n };\n }\n }, [value, ticking]);\n\n return (\n <StyledEditableContent\n ref={handleRef}\n className={className}\n inputProps={{\n ...externalInputProps,\n value,\n onBlur,\n onKeyDown,\n onChange,\n onClick,\n onDoubleClick,\n onFocus,\n type: \"text\",\n }}\n $ticking={ticking}\n {...rest}\n >\n {ticking && (\n <>\n {splitTime?.hours}\n <span className=\"tw-animate-ping\">:</span>\n {splitTime?.minutes}\n </>\n )}\n </StyledEditableContent>\n );\n }\n);\n\nEditableHours.displayName = \"EditableHours\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -16191,7 +16191,7 @@
|
|
|
16191
16191
|
});
|
|
16192
16192
|
StyledInput$1.displayName = "StyledInput";
|
|
16193
16193
|
|
|
16194
|
-
var _excluded$e = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef"];
|
|
16194
|
+
var _excluded$e = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children"];
|
|
16195
16195
|
var EditableContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
16196
16196
|
var className = _ref.className,
|
|
16197
16197
|
_ref$variant = _ref.variant,
|
|
@@ -16201,6 +16201,7 @@
|
|
|
16201
16201
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
16202
16202
|
inputProps = _ref.inputProps,
|
|
16203
16203
|
wrapRef = _ref.wrapRef,
|
|
16204
|
+
children = _ref.children,
|
|
16204
16205
|
props = _objectWithoutProperties(_ref, _excluded$e);
|
|
16205
16206
|
var intInputRef = React.useRef(null);
|
|
16206
16207
|
var handleRef = useForkRef(ref, intInputRef);
|
|
@@ -16217,8 +16218,9 @@
|
|
|
16217
16218
|
variant: variant,
|
|
16218
16219
|
forwardedAs: "span",
|
|
16219
16220
|
weight: weight,
|
|
16220
|
-
$disabled: disabled
|
|
16221
|
-
|
|
16221
|
+
$disabled: disabled,
|
|
16222
|
+
className: "presentation"
|
|
16223
|
+
}, children ? children : inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({}, inputProps, {
|
|
16222
16224
|
ref: handleRef,
|
|
16223
16225
|
forwardedAs: "input",
|
|
16224
16226
|
variant: variant,
|
|
@@ -16296,25 +16298,34 @@
|
|
|
16296
16298
|
});
|
|
16297
16299
|
EditableText.displayName = "EditableText";
|
|
16298
16300
|
|
|
16299
|
-
var _excluded$c = ["value", "onCancel", "onSave", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onEnterKeyPress", "inputProps", "onClick"];
|
|
16300
|
-
var
|
|
16301
|
-
|
|
16302
|
-
|
|
16303
|
-
|
|
16304
|
-
|
|
16305
|
-
|
|
16306
|
-
|
|
16307
|
-
|
|
16308
|
-
|
|
16309
|
-
|
|
16310
|
-
|
|
16311
|
-
|
|
16312
|
-
|
|
16313
|
-
|
|
16314
|
-
|
|
16315
|
-
|
|
16316
|
-
|
|
16317
|
-
|
|
16301
|
+
var _excluded$c = ["value", "onCancel", "onSave", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onEnterKeyPress", "inputProps", "onClick", "ticking", "onFocus"];
|
|
16302
|
+
var StyledEditableContent = styled__default["default"](EditableContent).withConfig({
|
|
16303
|
+
displayName: "EditableHours__StyledEditableContent",
|
|
16304
|
+
componentId: "sc-nvi34j-0"
|
|
16305
|
+
})(["", ""], function (_ref) {
|
|
16306
|
+
var $ticking = _ref.$ticking;
|
|
16307
|
+
return $ticking && styled.css([".presentation{visibility:visible;}input{opacity:0;}"]);
|
|
16308
|
+
});
|
|
16309
|
+
var EditableHours = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
|
|
16310
|
+
var defaultValue = _ref2.value,
|
|
16311
|
+
onCancel = _ref2.onCancel,
|
|
16312
|
+
onSave = _ref2.onSave,
|
|
16313
|
+
allowEmptyValue = _ref2.allowEmptyValue,
|
|
16314
|
+
_ref2$withLeadingZero = _ref2.withLeadingZero,
|
|
16315
|
+
withLeadingZero = _ref2$withLeadingZero === void 0 ? true : _ref2$withLeadingZero,
|
|
16316
|
+
_ref2$validation = _ref2.validation,
|
|
16317
|
+
validation = _ref2$validation === void 0 ? validateTimeInput : _ref2$validation,
|
|
16318
|
+
_ref2$incrementOnlySe = _ref2.incrementOnlySelected,
|
|
16319
|
+
incrementOnlySelected = _ref2$incrementOnlySe === void 0 ? false : _ref2$incrementOnlySe,
|
|
16320
|
+
_ref2$minuteIncrement = _ref2.minuteIncrement,
|
|
16321
|
+
minuteIncrement = _ref2$minuteIncrement === void 0 ? 1 : _ref2$minuteIncrement,
|
|
16322
|
+
className = _ref2.className,
|
|
16323
|
+
externalEnterKeyPress = _ref2.onEnterKeyPress,
|
|
16324
|
+
externalInputProps = _ref2.inputProps,
|
|
16325
|
+
externalOnClick = _ref2.onClick,
|
|
16326
|
+
ticking = _ref2.ticking,
|
|
16327
|
+
onFocus = _ref2.onFocus,
|
|
16328
|
+
rest = _objectWithoutProperties(_ref2, _excluded$c);
|
|
16318
16329
|
var inputRef = React.useRef(null);
|
|
16319
16330
|
var handleRef = useForkRef(ref, inputRef);
|
|
16320
16331
|
var _useInputHours = useInputHours({
|
|
@@ -16356,7 +16367,19 @@
|
|
|
16356
16367
|
return prevState;
|
|
16357
16368
|
});
|
|
16358
16369
|
}, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);
|
|
16359
|
-
|
|
16370
|
+
var splitTime = React.useMemo(function () {
|
|
16371
|
+
if (value && ticking) {
|
|
16372
|
+
var _value$split = value.split(":"),
|
|
16373
|
+
_value$split2 = _slicedToArray(_value$split, 2),
|
|
16374
|
+
hours = _value$split2[0],
|
|
16375
|
+
minutes = _value$split2[1];
|
|
16376
|
+
return {
|
|
16377
|
+
hours: hours,
|
|
16378
|
+
minutes: minutes
|
|
16379
|
+
};
|
|
16380
|
+
}
|
|
16381
|
+
}, [value, ticking]);
|
|
16382
|
+
return /*#__PURE__*/React__default["default"].createElement(StyledEditableContent, _extends({
|
|
16360
16383
|
ref: handleRef,
|
|
16361
16384
|
className: className,
|
|
16362
16385
|
inputProps: _objectSpread2(_objectSpread2({}, externalInputProps), {}, {
|
|
@@ -16366,9 +16389,13 @@
|
|
|
16366
16389
|
onChange: onChange,
|
|
16367
16390
|
onClick: onClick,
|
|
16368
16391
|
onDoubleClick: onDoubleClick,
|
|
16392
|
+
onFocus: onFocus,
|
|
16369
16393
|
type: "text"
|
|
16370
|
-
})
|
|
16371
|
-
|
|
16394
|
+
}),
|
|
16395
|
+
$ticking: ticking
|
|
16396
|
+
}, rest), ticking && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, splitTime === null || splitTime === void 0 ? void 0 : splitTime.hours, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
16397
|
+
className: "tw-animate-ping"
|
|
16398
|
+
}, ":"), splitTime === null || splitTime === void 0 ? void 0 : splitTime.minutes));
|
|
16372
16399
|
});
|
|
16373
16400
|
EditableHours.displayName = "EditableHours";
|
|
16374
16401
|
|