@activecollab/components 1.0.391 → 1.0.393
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/Styles.js +1 -1
- package/dist/cjs/components/EditableContent/Styles.js.map +1 -1
- package/dist/cjs/components/EditableText/EditableText.js +1 -1
- package/dist/cjs/components/EditableText/EditableText.js.map +1 -1
- package/dist/cjs/components/Input/Input.js +4 -4
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/Input/Styles.js +9 -1
- package/dist/cjs/components/Input/Styles.js.map +1 -1
- package/dist/cjs/hooks/useInputHours.js +2 -1
- package/dist/cjs/hooks/useInputHours.js.map +1 -1
- package/dist/esm/components/EditableContent/Styles.js +1 -1
- package/dist/esm/components/EditableContent/Styles.js.map +1 -1
- package/dist/esm/components/EditableText/EditableText.js +1 -1
- package/dist/esm/components/EditableText/EditableText.js.map +1 -1
- package/dist/esm/components/Input/Input.d.ts +2 -1
- package/dist/esm/components/Input/Input.d.ts.map +1 -1
- package/dist/esm/components/Input/Input.js +4 -4
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Input/Styles.d.ts +2 -0
- package/dist/esm/components/Input/Styles.d.ts.map +1 -1
- package/dist/esm/components/Input/Styles.js +9 -1
- package/dist/esm/components/Input/Styles.js.map +1 -1
- package/dist/esm/hooks/useInputHours.d.ts.map +1 -1
- package/dist/esm/hooks/useInputHours.js +2 -1
- package/dist/esm/hooks/useInputHours.js.map +1 -1
- package/dist/index.js +17 -8
- 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
|
@@ -32,7 +32,7 @@ StyledSpan.displayName = "StyledSpan";
|
|
|
32
32
|
var StyledInput = (0, _styledComponents.default)(_Typography.Typography).withConfig({
|
|
33
33
|
displayName: "Styles__StyledInput",
|
|
34
34
|
componentId: "sc-1wapx2a-2"
|
|
35
|
-
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{
|
|
35
|
+
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{opacity:0;}"], {
|
|
36
36
|
"position": "absolute",
|
|
37
37
|
"inset": "0px",
|
|
38
38
|
"boxSizing": "border-box",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledDiv","styled","div","FontStyle","BoxSizingStyle","StyledSpan","Typography","$disabled","css","displayName","StyledInput"],"sources":["../../../../src/components/EditableContent/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-relative tw-inline-block tw-max-w-full`}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n visibility: hidden;\n display: block;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n position: relative;\n border: 1px solid transparent;\n border-radius: 6px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n font-variant-numeric: tabular-nums;\n\n ${({ $disabled }) =>\n $disabled &&\n css`\n visibility: visible;\n `}\n\n &:empty:before {\n content: \" \";\n }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-transparent\n tw-border-solid\n hover:tw-border-theme-700\n focus-within:tw-border-theme-700\n tw-rounded-md\n tw-box-border\n tw-overflow-hidden\n tw-whitespace-nowrap\n focus-within:tw-overflow-scroll\n tw-w-full`}\n\n background-color: inherit;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n text-overflow: ellipsis;\n font-variant-numeric: tabular-nums;\n &:focus-whitin {\n text-overflow: clip;\n }\n outline-width: 0px;\n outline: none;\n &:disabled {\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledDiv","styled","div","FontStyle","BoxSizingStyle","StyledSpan","Typography","$disabled","css","displayName","StyledInput"],"sources":["../../../../src/components/EditableContent/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-relative tw-inline-block tw-max-w-full`}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n visibility: hidden;\n display: block;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n position: relative;\n border: 1px solid transparent;\n border-radius: 6px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n font-variant-numeric: tabular-nums;\n\n ${({ $disabled }) =>\n $disabled &&\n css`\n visibility: visible;\n `}\n\n &:empty:before {\n content: \" \";\n }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-transparent\n tw-border-solid\n hover:tw-border-theme-700\n focus-within:tw-border-theme-700\n tw-rounded-md\n tw-box-border\n tw-overflow-hidden\n tw-whitespace-nowrap\n focus-within:tw-overflow-scroll\n tw-w-full`}\n\n background-color: inherit;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n text-overflow: ellipsis;\n font-variant-numeric: tabular-nums;\n &:focus-whitin {\n text-overflow: clip;\n }\n outline-width: 0px;\n outline: none;\n &:disabled {\n opacity: 0;\n }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAAsD;AAAA;AAE/C,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,uBAC/BC,oBAAS,EACTC,8BAAc,EAEZ;EAAA;EAAA;EAAA;AAA0C,CAAC,CAChD;AAAC;AAEK,IAAMC,UAAU,GAAG,IAAAJ,yBAAM,EAACK,sBAAU,CAAC;EAAA;EAAA;AAAA,2TAgBxC;EAAA,IAAGC,SAAS,QAATA,SAAS;EAAA,OACZA,SAAS,QACTC,qBAAG,0BAEF;AAAA,EAKJ;AAAC;AAEFH,UAAU,CAACI,WAAW,GAAG,YAAY;AAE9B,IAAMC,WAAW,GAAG,IAAAT,yBAAM,EAACK,sBAAU,CAAC;EAAA;EAAA;AAAA,8PACvC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAaO,CAAC,CAiBb;AAAC;AAEFI,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
|
@@ -75,7 +75,7 @@ var EditableText = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
75
75
|
setCurrentValue(e.target.value);
|
|
76
76
|
}, []);
|
|
77
77
|
return /*#__PURE__*/_react.default.createElement(_EditableContent.EditableContent, _extends({}, props, {
|
|
78
|
-
|
|
78
|
+
ref: ref,
|
|
79
79
|
inputProps: _objectSpread(_objectSpread({}, inputProps), {}, {
|
|
80
80
|
value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
|
|
81
81
|
onBlur: handleBlur,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.js","names":["EditableText","forwardRef","ref","onSave","onCancel","value","inputProps","allowEmptyString","props","useState","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","useRef","useEffect","handleBlur","useCallback","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","classNames","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\nimport classNames from \"classnames\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n { onSave, onCancel, value, inputProps, allowEmptyString, ...props },\n ref\n ) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n\n useEffect(() => {\n if (currentValue !== value) {\n setCurrentValue(value);\n setPrevValue(value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n },\n [allowEmptyString, onSave, prevValue]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n return (\n <EditableContent\n {...props}\n
|
|
1
|
+
{"version":3,"file":"EditableText.js","names":["EditableText","forwardRef","ref","onSave","onCancel","value","inputProps","allowEmptyString","props","useState","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","useRef","useEffect","handleBlur","useCallback","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","classNames","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\nimport classNames from \"classnames\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n { onSave, onCancel, value, inputProps, allowEmptyString, ...props },\n ref\n ) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n\n useEffect(() => {\n if (currentValue !== value) {\n setCurrentValue(value);\n setPrevValue(value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n },\n [allowEmptyString, onSave, prevValue]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n return (\n <EditableContent\n {...props}\n ref={ref}\n inputProps={{\n ...inputProps,\n value: currentValue ?? \"\",\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: classNames(\"c-input\", inputProps?.className),\n }}\n />\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
10
|
var _Styles = require("./Styles");
|
|
11
11
|
var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
|
|
12
|
-
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "
|
|
12
|
+
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick", "typographyProps"];
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
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); }
|
|
15
15
|
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; }
|
|
@@ -31,8 +31,8 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
31
31
|
startAdornment = _ref.startAdornment,
|
|
32
32
|
endAdornment = _ref.endAdornment,
|
|
33
33
|
wrapRef = _ref.wrapRef,
|
|
34
|
-
inputClassName = _ref.inputClassName,
|
|
35
34
|
wrapperClick = _ref.wrapperClick,
|
|
35
|
+
typographyProps = _ref.typographyProps,
|
|
36
36
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
37
37
|
var intInputRef = (0, _react.useRef)(null);
|
|
38
38
|
var handleRef = (0, _useForkRef.default)(ref, intInputRef);
|
|
@@ -54,10 +54,10 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
54
54
|
type: type,
|
|
55
55
|
$size: size,
|
|
56
56
|
disabled: disabled,
|
|
57
|
-
className:
|
|
57
|
+
className: "c-input",
|
|
58
58
|
"aria-invalid": invalid,
|
|
59
59
|
"data-form-type": "other"
|
|
60
|
-
}, rest)), endAdornment);
|
|
60
|
+
}, typographyProps, rest)), endAdornment);
|
|
61
61
|
});
|
|
62
62
|
exports.Input = Input;
|
|
63
63
|
Input.displayName = "Input";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","typographyProps","rest","intInputRef","useRef","handleRef","useForkRef","handleWrapperClick","useCallback","current","focus","classnames","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n ReactNode,\n Ref,\n useCallback,\n useRef,\n InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\n typographyProps?: Omit<ITypographyProps, \"size\">;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n style,\n type = \"text\",\n disabled = false,\n size = \"regular\",\n invalid = false,\n startAdornment,\n endAdornment,\n wrapRef,\n wrapperClick,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleWrapperClick = useCallback(() => {\n intInputRef.current?.focus();\n wrapperClick && wrapperClick();\n }, [wrapperClick]);\n\n return (\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n $disabled={disabled}\n style={style}\n className={classnames(\"c-input-wrapper\", className)}\n onClick={handleWrapperClick}\n ref={wrapRef}\n >\n {startAdornment}\n <StyledInput\n ref={handleRef}\n type={type}\n $size={size}\n disabled={disabled}\n className=\"c-input\"\n aria-invalid={invalid}\n data-form-type=\"other\"\n {...typographyProps}\n {...rest}\n />\n {endAdornment}\n </StyledInputWrapper>\n );\n }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;AAAA;AAOA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBzC,IAAMA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,YAAY,QAAZA,YAAY;IACZC,eAAe,QAAfA,eAAe;IACZC,IAAI;EAIT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAClD,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAAChB,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAMI,kBAAkB,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAAA;IAC3C,wBAAAL,WAAW,CAACM,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;IAC5BV,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,6BAAC,0BAAkB;IACjB,KAAK,EAAEL,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAmB,mBAAU,EAAC,iBAAiB,EAAEpB,SAAS,CAAE;IACpD,OAAO,EAAEgB,kBAAmB;IAC5B,GAAG,EAAER;EAAQ,GAEZF,cAAc,eACf,6BAAC,mBAAW;IACV,GAAG,EAAEQ,SAAU;IACf,IAAI,EAAEZ,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBK,eAAe,EACfC,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAAC;AAEFX,KAAK,CAACyB,WAAW,GAAG,OAAO"}
|
|
@@ -31,7 +31,7 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
|
|
|
31
31
|
var StyledInput = _styledComponents.default.input.withConfig({
|
|
32
32
|
displayName: "Styles__StyledInput",
|
|
33
33
|
componentId: "sc-ce8kcp-1"
|
|
34
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", ""], function (props) {
|
|
34
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
|
|
35
35
|
return props.$size === "big" && (0, _styledComponents.css)(["font-size:1rem;"]);
|
|
36
36
|
}, function (props) {
|
|
37
37
|
return props.$size === "biggest" && (0, _styledComponents.css)(["font-size:1.25rem;font-weight:500;"]);
|
|
@@ -39,6 +39,14 @@ var StyledInput = _styledComponents.default.input.withConfig({
|
|
|
39
39
|
return props.disabled && (0, _styledComponents.css)(["cursor:default;"]);
|
|
40
40
|
}, function (props) {
|
|
41
41
|
return props.$loading && (0, _styledComponents.css)(["cursor:progress;"]);
|
|
42
|
+
}, function (props) {
|
|
43
|
+
return props.align === "left" && (0, _styledComponents.css)(["text-align:left;"]);
|
|
44
|
+
}, function (props) {
|
|
45
|
+
return props.align === "right" && (0, _styledComponents.css)(["text-align:right;"]);
|
|
46
|
+
}, function (props) {
|
|
47
|
+
return props.align === "center" && (0, _styledComponents.css)(["text-align:center;"]);
|
|
48
|
+
}, function (props) {
|
|
49
|
+
return props.align === "justify" && (0, _styledComponents.css)(["text-align:justify;"]);
|
|
42
50
|
});
|
|
43
51
|
exports.StyledInput = StyledInput;
|
|
44
52
|
StyledInput.displayName = "StyledInput";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAyC;AAAA;
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading","align"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n align?: ITypographyProps[\"align\"];\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n /* @TODO: Po potrebi dodati jos propertija iz tipografije. */\n\n ${(props) =>\n props.align === \"left\" &&\n css`\n text-align: left;\n `}\n\n ${(props) =>\n props.align === \"right\" &&\n css`\n text-align: right;\n `}\n\n ${(props) =>\n props.align === \"center\" &&\n css`\n text-align: center;\n `}\n \n ${(props) =>\n props.align === \"justify\" &&\n css`\n text-align: justify;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAyC;AAAA;AASlC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2TAexCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,QACvBC,qBAAG,qCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,mBAEF;AAAA,GAEC,UAACF,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,kCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChB,CAACH,KAAK,CAACI,QAAQ,QACfF,qBAAG,iEAKF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChBH,KAAK,CAACI,QAAQ,QACdF,qBAAG,qCAEF;AAAA,EACJ;AAAC;AAEFP,kBAAkB,CAACU,WAAW,GAAG,oBAAoB;AAQ9C,IAAMC,WAAW,GAAGV,yBAAM,CAACW,KAAK;EAAA;EAAA;AAAA,6TAkBnC,UAACP,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,sBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,yCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,QACdN,qBAAG,sBAEF;AAAA,GACD,UAACF,KAAK;EAAA,OACNA,KAAK,CAACS,QAAQ,QACdP,qBAAG,uBAEF;AAAA,GAIC,UAACF,KAAK;EAAA,OACRA,KAAK,CAACU,KAAK,KAAK,MAAM,QACtBR,qBAAG,uBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACU,KAAK,KAAK,OAAO,QACvBR,qBAAG,wBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACU,KAAK,KAAK,QAAQ,QACxBR,qBAAG,yBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACU,KAAK,KAAK,SAAS,QACzBR,qBAAG,0BAEF;AAAA,EACJ;AAAC;AAEFI,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
|
@@ -107,6 +107,7 @@ var useInputHours = function useInputHours(_ref, inputRef) {
|
|
|
107
107
|
var newValue = "".concat(newHoursString, ":").concat(newMinutesString);
|
|
108
108
|
if (validation(newValue, withLeadingZero)) {
|
|
109
109
|
setCurrentValue(newValue);
|
|
110
|
+
if (onChange) onChange(newValue);
|
|
110
111
|
requestAnimationFrame(function () {
|
|
111
112
|
var _inputRef$current;
|
|
112
113
|
var newDotsIndex = newValue.indexOf(":");
|
|
@@ -118,7 +119,7 @@ var useInputHours = function useInputHours(_ref, inputRef) {
|
|
|
118
119
|
}
|
|
119
120
|
}
|
|
120
121
|
}
|
|
121
|
-
}, [currentValue, incrementOnlySelected, inputRef, minuteIncrement, validation, withLeadingZero]);
|
|
122
|
+
}, [currentValue, incrementOnlySelected, inputRef, minuteIncrement, onChange, validation, withLeadingZero]);
|
|
122
123
|
var handleKeyDown = (0, _react.useCallback)(function (e) {
|
|
123
124
|
if (e.key === "Enter") {
|
|
124
125
|
e.target.blur();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInputHours.js","names":["useInputHours","inputRef","value","withLeadingZero","onSave","validation","validateTimeInput","allowEmptyValue","onCancel","minuteIncrement","incrementOnlySelected","onEnterKeyPress","onChange","onClick","useState","decimalToHours","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","useRef","handleBlur","useCallback","e","current","target","trim","length","_value","handleIncrementDecrement","increment","selectionStart","dotsIndex","indexOf","split","map","Number","hours","minutes","newHours","newMinutes","newMinutesString","newHoursString","newValue","requestAnimationFrame","newDotsIndex","isHoursSelected","newSelectionStart","selectionEnd","setSelectionRange","handleKeyDown","key","blur","metaKey","ctrlKey","select","input","start","end","shiftKey","isMinutesSelected","preventDefault","substring","handleChange","handleClick","handleDoubleClick","inputProps","useMemo","onBlur","onKeyDown","onDoubleClick"],"sources":["../../../src/hooks/useInputHours.tsx"],"sourcesContent":["import {\n RefObject,\n useCallback,\n useMemo,\n useRef,\n useState,\n MouseEvent,\n} from \"react\";\nimport { decimalToHours } from \"../utils\";\nimport { validateTimeInput } from \"../utils\";\n\nexport interface IInputHours {\n value?: string | number;\n withLeadingZero?: boolean;\n onSave?: (e: Event) => void;\n validation?: (...args) => boolean;\n allowEmptyValue?: boolean;\n onCancel?: (e: Event) => void;\n minuteIncrement?: number;\n incrementOnlySelected?: boolean;\n onEnterKeyPress?: (val: string) => void;\n onChange?: (val: string) => void;\n onClick?: (event: MouseEvent<HTMLInputElement>) => void;\n}\n\nexport const useInputHours = (\n {\n value,\n withLeadingZero,\n onSave,\n validation = validateTimeInput,\n allowEmptyValue,\n onCancel,\n minuteIncrement = 1,\n incrementOnlySelected,\n onEnterKeyPress,\n onChange,\n onClick,\n }: IInputHours,\n inputRef: RefObject<HTMLInputElement | null>\n) => {\n const [currentValue, setCurrentValue] = useState(() =>\n decimalToHours(value, withLeadingZero)\n );\n const [prevValue, setPrevValue] = useState(() =>\n decimalToHours(value, withLeadingZero)\n );\n\n const escapeRef = useRef(false);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n } else {\n if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {\n const _value = decimalToHours(e.target.value, withLeadingZero);\n setPrevValue(_value);\n setCurrentValue(_value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n if (!allowEmptyValue) {\n setCurrentValue(prevValue);\n typeof onCancel === \"function\" && onCancel(e);\n } else {\n if (typeof onSave === \"function\" && prevValue !== e.target.value) {\n onSave(e);\n } else {\n typeof onCancel === \"function\" && onCancel(e);\n }\n }\n }\n }\n },\n [allowEmptyValue, onCancel, onSave, prevValue, withLeadingZero]\n );\n\n const handleIncrementDecrement = useCallback(\n (increment: boolean) => {\n if (inputRef.current) {\n const selectionStart = inputRef.current.selectionStart;\n if (selectionStart !== null) {\n const dotsIndex = currentValue.indexOf(\":\");\n const [hours, minutes] = currentValue.split(\":\").map(Number);\n let newHours = hours;\n let newMinutes = minutes;\n\n if (selectionStart < dotsIndex) {\n if (increment) {\n newHours += 1;\n } else {\n newHours -= 1;\n if (newHours < 0) newHours = 0;\n }\n } else if (selectionStart > dotsIndex) {\n if (increment) {\n newMinutes += minuteIncrement;\n if (newMinutes > 59) {\n newMinutes = 0;\n if (!incrementOnlySelected) newHours += 1;\n }\n } else {\n if (newMinutes >= minuteIncrement || newMinutes === 0) {\n newMinutes -= minuteIncrement;\n if (newMinutes < 0 && newHours > 0) {\n newMinutes = 60 - minuteIncrement;\n if (!incrementOnlySelected) newHours -= 1;\n }\n if (newHours < 0) {\n newHours = 0;\n }\n } else {\n newMinutes = 0;\n }\n }\n }\n\n const newMinutesString =\n newMinutes < 10 ? `0${newMinutes}` : newMinutes;\n const newHoursString =\n withLeadingZero && newHours < 10 ? `0${newHours}` : newHours;\n const newValue = `${newHoursString}:${newMinutesString}`;\n\n if (validation(newValue, withLeadingZero)) {\n setCurrentValue(newValue);\n\n requestAnimationFrame(() => {\n const newDotsIndex = newValue.indexOf(\":\");\n const isHoursSelected = selectionStart < newDotsIndex;\n const newSelectionStart = isHoursSelected ? 0 : newDotsIndex + 1;\n const selectionEnd = isHoursSelected\n ? newDotsIndex\n : newValue.length;\n inputRef.current?.setSelectionRange(\n newSelectionStart,\n selectionEnd\n );\n });\n }\n }\n }\n },\n [\n currentValue,\n incrementOnlySelected,\n inputRef,\n minuteIncrement,\n validation,\n withLeadingZero,\n ]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n if (typeof onEnterKeyPress === \"function\")\n onEnterKeyPress(e.target.value);\n }\n if (e.key === \"ArrowLeft\") {\n return;\n }\n if (e.key === \"ArrowRight\") {\n return;\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel(e);\n escapeRef.current = false;\n }\n if (e.key === \"Backspace\") {\n return;\n }\n if ((e.metaKey || e.ctrlKey) && e.key === \"a\") {\n inputRef.current?.select();\n return;\n }\n const input = e.target;\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const currentValue = input.value;\n if (e.key === \"Tab\") {\n if (start !== end) {\n if (e.shiftKey) {\n const newDotsIndex = currentValue.indexOf(\":\");\n const isMinutesSelected = start > newDotsIndex;\n if (isMinutesSelected) {\n e.preventDefault();\n inputRef.current?.setSelectionRange(0, newDotsIndex);\n }\n } else {\n const newDotsIndex = currentValue.indexOf(\":\");\n const isHoursSelected = start < newDotsIndex;\n if (isHoursSelected) {\n e.preventDefault();\n inputRef.current?.setSelectionRange(\n newDotsIndex + 1,\n currentValue.length\n );\n }\n }\n }\n return;\n }\n\n if (start !== end) {\n if (e.key === \"ArrowUp\") {\n handleIncrementDecrement(true);\n return;\n }\n if (e.key === \"ArrowDown\") {\n handleIncrementDecrement(false);\n return;\n }\n const newValue =\n currentValue.substring(0, start) +\n e.key +\n currentValue.substring(end);\n if (!validation(newValue, withLeadingZero)) {\n e.preventDefault();\n return;\n }\n } else {\n const newValue =\n currentValue.substring(0, start) +\n e.key +\n currentValue.substring(end);\n\n if (!validation(newValue, withLeadingZero)) {\n e.preventDefault();\n return;\n }\n }\n },\n [\n handleIncrementDecrement,\n inputRef,\n onCancel,\n onEnterKeyPress,\n validation,\n withLeadingZero,\n ]\n );\n\n const handleChange = useCallback(\n (e) => {\n setCurrentValue(e.target.value);\n if (onChange) onChange(e.target.value);\n },\n [onChange]\n );\n\n const handleClick = useCallback(\n (e) => {\n const selectionStart = inputRef.current?.selectionStart;\n if (\n inputRef.current &&\n currentValue &&\n currentValue.length > 0 &&\n typeof selectionStart === \"number\"\n ) {\n const dotsIndex = currentValue.indexOf(\":\");\n if (selectionStart < dotsIndex) {\n inputRef.current?.setSelectionRange(0, dotsIndex);\n } else if (selectionStart >= dotsIndex) {\n inputRef.current?.setSelectionRange(\n dotsIndex + 1,\n currentValue.length\n );\n }\n }\n\n if (typeof onClick === \"function\") {\n onClick(e);\n }\n },\n [currentValue, inputRef, onClick]\n );\n\n const handleDoubleClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current?.select();\n }\n }, [inputRef]);\n\n const inputProps = useMemo(() => {\n return {\n value: currentValue,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n onClick: handleClick,\n onDoubleClick: handleDoubleClick,\n };\n }, [\n currentValue,\n handleBlur,\n handleChange,\n handleClick,\n handleDoubleClick,\n handleKeyDown,\n ]);\n\n return {\n inputProps,\n setCurrentValue,\n setPrevValue,\n };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useInputHours.js","names":["useInputHours","inputRef","value","withLeadingZero","onSave","validation","validateTimeInput","allowEmptyValue","onCancel","minuteIncrement","incrementOnlySelected","onEnterKeyPress","onChange","onClick","useState","decimalToHours","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","useRef","handleBlur","useCallback","e","current","target","trim","length","_value","handleIncrementDecrement","increment","selectionStart","dotsIndex","indexOf","split","map","Number","hours","minutes","newHours","newMinutes","newMinutesString","newHoursString","newValue","requestAnimationFrame","newDotsIndex","isHoursSelected","newSelectionStart","selectionEnd","setSelectionRange","handleKeyDown","key","blur","metaKey","ctrlKey","select","input","start","end","shiftKey","isMinutesSelected","preventDefault","substring","handleChange","handleClick","handleDoubleClick","inputProps","useMemo","onBlur","onKeyDown","onDoubleClick"],"sources":["../../../src/hooks/useInputHours.tsx"],"sourcesContent":["import {\n RefObject,\n useCallback,\n useMemo,\n useRef,\n useState,\n MouseEvent,\n} from \"react\";\nimport { decimalToHours } from \"../utils\";\nimport { validateTimeInput } from \"../utils\";\n\nexport interface IInputHours {\n value?: string | number;\n withLeadingZero?: boolean;\n onSave?: (e: Event) => void;\n validation?: (...args) => boolean;\n allowEmptyValue?: boolean;\n onCancel?: (e: Event) => void;\n minuteIncrement?: number;\n incrementOnlySelected?: boolean;\n onEnterKeyPress?: (val: string) => void;\n onChange?: (val: string) => void;\n onClick?: (event: MouseEvent<HTMLInputElement>) => void;\n}\n\nexport const useInputHours = (\n {\n value,\n withLeadingZero,\n onSave,\n validation = validateTimeInput,\n allowEmptyValue,\n onCancel,\n minuteIncrement = 1,\n incrementOnlySelected,\n onEnterKeyPress,\n onChange,\n onClick,\n }: IInputHours,\n inputRef: RefObject<HTMLInputElement | null>\n) => {\n const [currentValue, setCurrentValue] = useState(() =>\n decimalToHours(value, withLeadingZero)\n );\n const [prevValue, setPrevValue] = useState(() =>\n decimalToHours(value, withLeadingZero)\n );\n\n const escapeRef = useRef(false);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n } else {\n if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {\n const _value = decimalToHours(e.target.value, withLeadingZero);\n setPrevValue(_value);\n setCurrentValue(_value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n if (!allowEmptyValue) {\n setCurrentValue(prevValue);\n typeof onCancel === \"function\" && onCancel(e);\n } else {\n if (typeof onSave === \"function\" && prevValue !== e.target.value) {\n onSave(e);\n } else {\n typeof onCancel === \"function\" && onCancel(e);\n }\n }\n }\n }\n },\n [allowEmptyValue, onCancel, onSave, prevValue, withLeadingZero]\n );\n\n const handleIncrementDecrement = useCallback(\n (increment: boolean) => {\n if (inputRef.current) {\n const selectionStart = inputRef.current.selectionStart;\n if (selectionStart !== null) {\n const dotsIndex = currentValue.indexOf(\":\");\n const [hours, minutes] = currentValue.split(\":\").map(Number);\n let newHours = hours;\n let newMinutes = minutes;\n\n if (selectionStart < dotsIndex) {\n if (increment) {\n newHours += 1;\n } else {\n newHours -= 1;\n if (newHours < 0) newHours = 0;\n }\n } else if (selectionStart > dotsIndex) {\n if (increment) {\n newMinutes += minuteIncrement;\n if (newMinutes > 59) {\n newMinutes = 0;\n if (!incrementOnlySelected) newHours += 1;\n }\n } else {\n if (newMinutes >= minuteIncrement || newMinutes === 0) {\n newMinutes -= minuteIncrement;\n if (newMinutes < 0 && newHours > 0) {\n newMinutes = 60 - minuteIncrement;\n if (!incrementOnlySelected) newHours -= 1;\n }\n if (newHours < 0) {\n newHours = 0;\n }\n } else {\n newMinutes = 0;\n }\n }\n }\n\n const newMinutesString =\n newMinutes < 10 ? `0${newMinutes}` : newMinutes;\n const newHoursString =\n withLeadingZero && newHours < 10 ? `0${newHours}` : newHours;\n const newValue = `${newHoursString}:${newMinutesString}`;\n\n if (validation(newValue, withLeadingZero)) {\n setCurrentValue(newValue);\n\n if (onChange) onChange(newValue);\n\n requestAnimationFrame(() => {\n const newDotsIndex = newValue.indexOf(\":\");\n const isHoursSelected = selectionStart < newDotsIndex;\n const newSelectionStart = isHoursSelected ? 0 : newDotsIndex + 1;\n const selectionEnd = isHoursSelected\n ? newDotsIndex\n : newValue.length;\n inputRef.current?.setSelectionRange(\n newSelectionStart,\n selectionEnd\n );\n });\n }\n }\n }\n },\n [\n currentValue,\n incrementOnlySelected,\n inputRef,\n minuteIncrement,\n onChange,\n validation,\n withLeadingZero,\n ]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n if (typeof onEnterKeyPress === \"function\")\n onEnterKeyPress(e.target.value);\n }\n if (e.key === \"ArrowLeft\") {\n return;\n }\n if (e.key === \"ArrowRight\") {\n return;\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel(e);\n escapeRef.current = false;\n }\n if (e.key === \"Backspace\") {\n return;\n }\n if ((e.metaKey || e.ctrlKey) && e.key === \"a\") {\n inputRef.current?.select();\n return;\n }\n const input = e.target;\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const currentValue = input.value;\n if (e.key === \"Tab\") {\n if (start !== end) {\n if (e.shiftKey) {\n const newDotsIndex = currentValue.indexOf(\":\");\n const isMinutesSelected = start > newDotsIndex;\n if (isMinutesSelected) {\n e.preventDefault();\n inputRef.current?.setSelectionRange(0, newDotsIndex);\n }\n } else {\n const newDotsIndex = currentValue.indexOf(\":\");\n const isHoursSelected = start < newDotsIndex;\n if (isHoursSelected) {\n e.preventDefault();\n inputRef.current?.setSelectionRange(\n newDotsIndex + 1,\n currentValue.length\n );\n }\n }\n }\n return;\n }\n\n if (start !== end) {\n if (e.key === \"ArrowUp\") {\n handleIncrementDecrement(true);\n return;\n }\n if (e.key === \"ArrowDown\") {\n handleIncrementDecrement(false);\n return;\n }\n const newValue =\n currentValue.substring(0, start) +\n e.key +\n currentValue.substring(end);\n if (!validation(newValue, withLeadingZero)) {\n e.preventDefault();\n return;\n }\n } else {\n const newValue =\n currentValue.substring(0, start) +\n e.key +\n currentValue.substring(end);\n\n if (!validation(newValue, withLeadingZero)) {\n e.preventDefault();\n return;\n }\n }\n },\n [\n handleIncrementDecrement,\n inputRef,\n onCancel,\n onEnterKeyPress,\n validation,\n withLeadingZero,\n ]\n );\n\n const handleChange = useCallback(\n (e) => {\n setCurrentValue(e.target.value);\n if (onChange) onChange(e.target.value);\n },\n [onChange]\n );\n\n const handleClick = useCallback(\n (e) => {\n const selectionStart = inputRef.current?.selectionStart;\n if (\n inputRef.current &&\n currentValue &&\n currentValue.length > 0 &&\n typeof selectionStart === \"number\"\n ) {\n const dotsIndex = currentValue.indexOf(\":\");\n if (selectionStart < dotsIndex) {\n inputRef.current?.setSelectionRange(0, dotsIndex);\n } else if (selectionStart >= dotsIndex) {\n inputRef.current?.setSelectionRange(\n dotsIndex + 1,\n currentValue.length\n );\n }\n }\n\n if (typeof onClick === \"function\") {\n onClick(e);\n }\n },\n [currentValue, inputRef, onClick]\n );\n\n const handleDoubleClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current?.select();\n }\n }, [inputRef]);\n\n const inputProps = useMemo(() => {\n return {\n value: currentValue,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n onClick: handleClick,\n onDoubleClick: handleDoubleClick,\n };\n }, [\n currentValue,\n handleBlur,\n handleChange,\n handleClick,\n handleDoubleClick,\n handleKeyDown,\n ]);\n\n return {\n inputProps,\n setCurrentValue,\n setPrevValue,\n };\n};\n"],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ StyledSpan.displayName = "StyledSpan";
|
|
|
21
21
|
export var StyledInput = styled(Typography).withConfig({
|
|
22
22
|
displayName: "Styles__StyledInput",
|
|
23
23
|
componentId: "sc-1wapx2a-2"
|
|
24
|
-
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{
|
|
24
|
+
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{opacity:0;}"], {
|
|
25
25
|
"position": "absolute",
|
|
26
26
|
"inset": "0px",
|
|
27
27
|
"boxSizing": "border-box",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","Typography","StyledDiv","div","StyledSpan","$disabled","displayName","StyledInput"],"sources":["../../../../src/components/EditableContent/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-relative tw-inline-block tw-max-w-full`}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n visibility: hidden;\n display: block;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n position: relative;\n border: 1px solid transparent;\n border-radius: 6px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n font-variant-numeric: tabular-nums;\n\n ${({ $disabled }) =>\n $disabled &&\n css`\n visibility: visible;\n `}\n\n &:empty:before {\n content: \" \";\n }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-transparent\n tw-border-solid\n hover:tw-border-theme-700\n focus-within:tw-border-theme-700\n tw-rounded-md\n tw-box-border\n tw-overflow-hidden\n tw-whitespace-nowrap\n focus-within:tw-overflow-scroll\n tw-w-full`}\n\n background-color: inherit;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n text-overflow: ellipsis;\n font-variant-numeric: tabular-nums;\n &:focus-whitin {\n text-overflow: clip;\n }\n outline-width: 0px;\n outline: none;\n &:disabled {\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","Typography","StyledDiv","div","StyledSpan","$disabled","displayName","StyledInput"],"sources":["../../../../src/components/EditableContent/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-relative tw-inline-block tw-max-w-full`}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n visibility: hidden;\n display: block;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n position: relative;\n border: 1px solid transparent;\n border-radius: 6px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n font-variant-numeric: tabular-nums;\n\n ${({ $disabled }) =>\n $disabled &&\n css`\n visibility: visible;\n `}\n\n &:empty:before {\n content: \" \";\n }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-transparent\n tw-border-solid\n hover:tw-border-theme-700\n focus-within:tw-border-theme-700\n tw-rounded-md\n tw-box-border\n tw-overflow-hidden\n tw-whitespace-nowrap\n focus-within:tw-overflow-scroll\n tw-w-full`}\n\n background-color: inherit;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n text-overflow: ellipsis;\n font-variant-numeric: tabular-nums;\n &:focus-whitin {\n text-overflow: clip;\n }\n outline-width: 0px;\n outline: none;\n &:disabled {\n opacity: 0;\n }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,UAAU,QAAQ,0BAA0B;AAErD,OAAO,IAAMC,SAAS,GAAGL,MAAM,CAACM,GAAG;EAAA;EAAA;AAAA,uBAC/BH,SAAS,EACTD,cAAc,EAEZ;EAAA;EAAA;EAAA;AAA0C,CAAC,CAChD;AAED,OAAO,IAAMK,UAAU,GAAGP,MAAM,CAACI,UAAU,CAAC;EAAA;EAAA;AAAA,2TAgBxC;EAAA,IAAGI,SAAS,QAATA,SAAS;EAAA,OACZA,SAAS,IACTP,GAAG,yBAEF;AAAA,EAKJ;AAEDM,UAAU,CAACE,WAAW,GAAG,YAAY;AAErC,OAAO,IAAMC,WAAW,GAAGV,MAAM,CAACI,UAAU,CAAC;EAAA;EAAA;AAAA,8PACvC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAaO,CAAC,CAiBb;AAEDM,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
|
@@ -53,7 +53,7 @@ export var EditableText = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
53
53
|
setCurrentValue(e.target.value);
|
|
54
54
|
}, []);
|
|
55
55
|
return /*#__PURE__*/React.createElement(EditableContent, _extends({}, props, {
|
|
56
|
-
|
|
56
|
+
ref: ref,
|
|
57
57
|
inputProps: _extends({}, inputProps, {
|
|
58
58
|
value: currentValue != null ? currentValue : "",
|
|
59
59
|
onBlur: handleBlur,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","EditableContent","classNames","EditableText","ref","onSave","onCancel","value","inputProps","allowEmptyString","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","handleBlur","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\nimport classNames from \"classnames\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n { onSave, onCancel, value, inputProps, allowEmptyString, ...props },\n ref\n ) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n\n useEffect(() => {\n if (currentValue !== value) {\n setCurrentValue(value);\n setPrevValue(value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n },\n [allowEmptyString, onSave, prevValue]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n return (\n <EditableContent\n {...props}\n
|
|
1
|
+
{"version":3,"file":"EditableText.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","EditableContent","classNames","EditableText","ref","onSave","onCancel","value","inputProps","allowEmptyString","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","handleBlur","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\nimport classNames from \"classnames\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n { onSave, onCancel, value, inputProps, allowEmptyString, ...props },\n ref\n ) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n\n useEffect(() => {\n if (currentValue !== value) {\n setCurrentValue(value);\n setPrevValue(value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n },\n [allowEmptyString, onSave, prevValue]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n return (\n <EditableContent\n {...props}\n ref={ref}\n inputProps={{\n ...inputProps,\n value: currentValue ?? \"\",\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: classNames(\"c-input\", inputProps?.className),\n }}\n />\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode, Ref, InputHTMLAttributes } from "react";
|
|
2
2
|
import { InputSize } from "./types";
|
|
3
|
+
import { ITypographyProps } from "../Typography/Typography";
|
|
3
4
|
declare type InputNativeProps = InputHTMLAttributes<HTMLInputElement>;
|
|
4
5
|
export interface InputProps extends Omit<InputNativeProps, "size" | "ref"> {
|
|
5
6
|
/** Velicina inputa koja definse font-size i border radius */
|
|
@@ -9,7 +10,7 @@ export interface InputProps extends Omit<InputNativeProps, "size" | "ref"> {
|
|
|
9
10
|
endAdornment?: ReactNode;
|
|
10
11
|
wrapRef?: Ref<HTMLDivElement>;
|
|
11
12
|
wrapperClick?: () => void;
|
|
12
|
-
|
|
13
|
+
typographyProps?: Omit<ITypographyProps, "size">;
|
|
13
14
|
}
|
|
14
15
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
15
16
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,aAAK,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,KAAK,CAAC;IACxE,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,KAAK,qFAoDjB,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", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "
|
|
3
|
+
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick", "typographyProps"];
|
|
4
4
|
import React, { useCallback, useRef } from "react";
|
|
5
5
|
import classnames from "classnames";
|
|
6
6
|
import { StyledInput, StyledInputWrapper } from "./Styles";
|
|
@@ -20,8 +20,8 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
20
20
|
startAdornment = _ref.startAdornment,
|
|
21
21
|
endAdornment = _ref.endAdornment,
|
|
22
22
|
wrapRef = _ref.wrapRef,
|
|
23
|
-
inputClassName = _ref.inputClassName,
|
|
24
23
|
wrapperClick = _ref.wrapperClick,
|
|
24
|
+
typographyProps = _ref.typographyProps,
|
|
25
25
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
26
26
|
var intInputRef = useRef(null);
|
|
27
27
|
var handleRef = useForkRef(ref, intInputRef);
|
|
@@ -43,10 +43,10 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
43
43
|
type: type,
|
|
44
44
|
$size: size,
|
|
45
45
|
disabled: disabled,
|
|
46
|
-
className:
|
|
46
|
+
className: "c-input",
|
|
47
47
|
"aria-invalid": invalid,
|
|
48
48
|
"data-form-type": "other"
|
|
49
|
-
}, rest)), endAdornment);
|
|
49
|
+
}, typographyProps, rest)), endAdornment);
|
|
50
50
|
});
|
|
51
51
|
Input.displayName = "Input";
|
|
52
52
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","
|
|
1
|
+
{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","typographyProps","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n ReactNode,\n Ref,\n useCallback,\n useRef,\n InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\n typographyProps?: Omit<ITypographyProps, \"size\">;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n style,\n type = \"text\",\n disabled = false,\n size = \"regular\",\n invalid = false,\n startAdornment,\n endAdornment,\n wrapRef,\n wrapperClick,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleWrapperClick = useCallback(() => {\n intInputRef.current?.focus();\n wrapperClick && wrapperClick();\n }, [wrapperClick]);\n\n return (\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n $disabled={disabled}\n style={style}\n className={classnames(\"c-input-wrapper\", className)}\n onClick={handleWrapperClick}\n ref={wrapRef}\n >\n {startAdornment}\n <StyledInput\n ref={handleRef}\n type={type}\n $size={size}\n disabled={disabled}\n className=\"c-input\"\n aria-invalid={invalid}\n data-form-type=\"other\"\n {...typographyProps}\n {...rest}\n />\n {endAdornment}\n </StyledInputWrapper>\n );\n }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,MAAM,QAED,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAC1D,OAAOC,UAAU,MAAM,wBAAwB;AAiB/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,YAAY,QAAZA,YAAY;IACZC,eAAe,QAAfA,eAAe;IACZC,IAAI;EAIT,IAAMC,WAAW,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMqB,SAAS,GAAGjB,UAAU,CAACG,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGvB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAqB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;IAC5BP,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,oBAAC,kBAAkB;IACjB,KAAK,EAAEL,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEO,SAAS,CAAE;IACpD,OAAO,EAAEc,kBAAmB;IAC5B,GAAG,EAAEN;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEO,SAAU;IACf,IAAI,EAAEX,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBK,eAAe,EACfC,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACoB,WAAW,GAAG,OAAO"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { InputSize } from "./types";
|
|
2
|
+
import { ITypographyProps } from "../Typography/Typography";
|
|
2
3
|
interface StyledInputWrapperProps {
|
|
3
4
|
$size?: InputSize;
|
|
4
5
|
$invalid?: boolean;
|
|
@@ -8,6 +9,7 @@ export declare const StyledInputWrapper: import("styled-components").StyledCompo
|
|
|
8
9
|
interface StyledInputProps {
|
|
9
10
|
$size?: InputSize;
|
|
10
11
|
$loading?: boolean;
|
|
12
|
+
align?: ITypographyProps["align"];
|
|
11
13
|
}
|
|
12
14
|
export declare const StyledInput: import("styled-components").StyledComponent<"input", any, StyledInputProps, never>;
|
|
13
15
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,oFAmEvB,CAAC"}
|
|
@@ -21,7 +21,7 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
|
|
|
21
21
|
export var StyledInput = styled.input.withConfig({
|
|
22
22
|
displayName: "Styles__StyledInput",
|
|
23
23
|
componentId: "sc-ce8kcp-1"
|
|
24
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", ""], function (props) {
|
|
24
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
|
|
25
25
|
return props.$size === "big" && css(["font-size:1rem;"]);
|
|
26
26
|
}, function (props) {
|
|
27
27
|
return props.$size === "biggest" && css(["font-size:1.25rem;font-weight:500;"]);
|
|
@@ -29,6 +29,14 @@ export var StyledInput = styled.input.withConfig({
|
|
|
29
29
|
return props.disabled && css(["cursor:default;"]);
|
|
30
30
|
}, function (props) {
|
|
31
31
|
return props.$loading && css(["cursor:progress;"]);
|
|
32
|
+
}, function (props) {
|
|
33
|
+
return props.align === "left" && css(["text-align:left;"]);
|
|
34
|
+
}, function (props) {
|
|
35
|
+
return props.align === "right" && css(["text-align:right;"]);
|
|
36
|
+
}, function (props) {
|
|
37
|
+
return props.align === "center" && css(["text-align:center;"]);
|
|
38
|
+
}, function (props) {
|
|
39
|
+
return props.align === "justify" && css(["text-align:justify;"]);
|
|
32
40
|
});
|
|
33
41
|
StyledInput.displayName = "StyledInput";
|
|
34
42
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading","align"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n align?: ITypographyProps[\"align\"];\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n /* @TODO: Po potrebi dodati jos propertija iz tipografije. */\n\n ${(props) =>\n props.align === \"left\" &&\n css`\n text-align: left;\n `}\n\n ${(props) =>\n props.align === \"right\" &&\n css`\n text-align: right;\n `}\n\n ${(props) =>\n props.align === \"center\" &&\n css`\n text-align: center;\n `}\n \n ${(props) =>\n props.align === \"justify\" &&\n css`\n text-align: justify;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AASxC,OAAO,IAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,2TAexCF,SAAS,EACTD,cAAc,EAEd,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBN,GAAG,oCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,kBAEF;AAAA,GAEC,UAACK,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfP,GAAG,iCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChB,CAACF,KAAK,CAACG,QAAQ,IACfR,GAAG,gEAKF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChBF,KAAK,CAACG,QAAQ,IACdR,GAAG,oCAEF;AAAA,EACJ;AAEDG,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAQrD,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,6TAkBnC,UAACN,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,qBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,wCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,IACdZ,GAAG,qBAEF;AAAA,GACD,UAACK,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdb,GAAG,sBAEF;AAAA,GAIC,UAACK,KAAK;EAAA,OACRA,KAAK,CAACS,KAAK,KAAK,MAAM,IACtBd,GAAG,sBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,KAAK,OAAO,IACvBd,GAAG,uBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,KAAK,QAAQ,IACxBd,GAAG,wBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,KAAK,SAAS,IACzBd,GAAG,yBAEF;AAAA,EACJ;AAEDU,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInputHours.d.ts","sourceRoot":"","sources":["../../../src/hooks/useInputHours.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAKT,UAAU,EACX,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,OAAA,KAAK,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACzD;AAED,eAAO,MAAM,aAAa,2JAarB,WAAW,YACJ,UAAU,gBAAgB,GAAG,IAAI,CAAC;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useInputHours.d.ts","sourceRoot":"","sources":["../../../src/hooks/useInputHours.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAKT,UAAU,EACX,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,OAAA,KAAK,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACzD;AAED,eAAO,MAAM,aAAa,2JAarB,WAAW,YACJ,UAAU,gBAAgB,GAAG,IAAI,CAAC;;;;;;;;;;;CAiR7C,CAAC"}
|
|
@@ -93,6 +93,7 @@ export var useInputHours = function useInputHours(_ref, inputRef) {
|
|
|
93
93
|
var newValue = newHoursString + ":" + newMinutesString;
|
|
94
94
|
if (validation(newValue, withLeadingZero)) {
|
|
95
95
|
setCurrentValue(newValue);
|
|
96
|
+
if (onChange) onChange(newValue);
|
|
96
97
|
requestAnimationFrame(function () {
|
|
97
98
|
var _inputRef$current;
|
|
98
99
|
var newDotsIndex = newValue.indexOf(":");
|
|
@@ -104,7 +105,7 @@ export var useInputHours = function useInputHours(_ref, inputRef) {
|
|
|
104
105
|
}
|
|
105
106
|
}
|
|
106
107
|
}
|
|
107
|
-
}, [currentValue, incrementOnlySelected, inputRef, minuteIncrement, validation, withLeadingZero]);
|
|
108
|
+
}, [currentValue, incrementOnlySelected, inputRef, minuteIncrement, onChange, validation, withLeadingZero]);
|
|
108
109
|
var handleKeyDown = useCallback(function (e) {
|
|
109
110
|
if (e.key === "Enter") {
|
|
110
111
|
e.target.blur();
|