@activecollab/components 1.0.394 → 1.0.395
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/Input/Input.js +2 -3
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/Input/InputHours.js +4 -1
- package/dist/cjs/components/Input/InputHours.js.map +1 -1
- package/dist/cjs/components/Input/Styles.js +2 -8
- package/dist/cjs/components/Input/Styles.js.map +1 -1
- package/dist/esm/components/Input/Input.d.ts +3 -3
- package/dist/esm/components/Input/Input.d.ts.map +1 -1
- package/dist/esm/components/Input/Input.js +2 -3
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Input/InputHours.d.ts.map +1 -1
- package/dist/esm/components/Input/InputHours.js +4 -1
- package/dist/esm/components/Input/InputHours.js.map +1 -1
- package/dist/esm/components/Input/Styles.d.ts +2 -3
- package/dist/esm/components/Input/Styles.d.ts.map +1 -1
- package/dist/esm/components/Input/Styles.js +2 -8
- package/dist/esm/components/Input/Styles.js.map +1 -1
- package/dist/index.js +8 -12
- 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
|
@@ -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", "wrapperClick"
|
|
12
|
+
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
|
|
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; }
|
|
@@ -32,7 +32,6 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
32
32
|
endAdornment = _ref.endAdornment,
|
|
33
33
|
wrapRef = _ref.wrapRef,
|
|
34
34
|
wrapperClick = _ref.wrapperClick,
|
|
35
|
-
typographyProps = _ref.typographyProps,
|
|
36
35
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
37
36
|
var intInputRef = (0, _react.useRef)(null);
|
|
38
37
|
var handleRef = (0, _useForkRef.default)(ref, intInputRef);
|
|
@@ -57,7 +56,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
57
56
|
className: "c-input",
|
|
58
57
|
"aria-invalid": invalid,
|
|
59
58
|
"data-form-type": "other"
|
|
60
|
-
},
|
|
59
|
+
}, rest)), endAdornment);
|
|
61
60
|
});
|
|
62
61
|
exports.Input = Input;
|
|
63
62
|
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","wrapperClick","
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","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\ninterface OverrideProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n}\n\nexport interface InputProps\n extends OverrideProps,\n Pick<ITypographyProps, \"align\"> {\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\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 ...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 {...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;AAoBzC,IAAMA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CACnC,gBAcEC,GAAG,EACA;EAAA,0BAbDC,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;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAClD,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAACf,GAAG,EAAEY,WAAW,CAAC;EAE9C,IAAMI,kBAAkB,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAAA;IAC3C,wBAAAL,WAAW,CAACM,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;IAC5BT,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,IAAAkB,mBAAU,EAAC,iBAAiB,EAAEnB,SAAS,CAAE;IACpD,OAAO,EAAEe,kBAAmB;IAC5B,GAAG,EAAEP;EAAQ,GAEZF,cAAc,eACf,6BAAC,mBAAW;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,IAAI,EACR,EACDH,YAAY,CACM;AAEzB,CAAC,CACF;AAAC;AAEFX,KAAK,CAACwB,WAAW,GAAG,OAAO"}
|
|
@@ -10,7 +10,7 @@ var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
|
|
|
10
10
|
var _utils = require("../../utils");
|
|
11
11
|
var _Input = require("./Input");
|
|
12
12
|
var _useInputHours2 = require("../../hooks/useInputHours");
|
|
13
|
-
var _excluded = ["value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onChange", "onClick"];
|
|
13
|
+
var _excluded = ["value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onChange", "onClick", "align"];
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
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
16
|
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; }
|
|
@@ -34,6 +34,8 @@ var InputHours = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
34
34
|
className = _ref.className,
|
|
35
35
|
externalOnChange = _ref.onChange,
|
|
36
36
|
externalOnClick = _ref.onClick,
|
|
37
|
+
_ref$align = _ref.align,
|
|
38
|
+
align = _ref$align === void 0 ? "center" : _ref$align,
|
|
37
39
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
38
40
|
var inputRef = (0, _react.useRef)(null);
|
|
39
41
|
var handleRef = (0, _useForkRef.default)(ref, inputRef);
|
|
@@ -58,6 +60,7 @@ var InputHours = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
58
60
|
onClick = inputProps.onClick,
|
|
59
61
|
onDoubleClick = inputProps.onDoubleClick;
|
|
60
62
|
return /*#__PURE__*/_react.default.createElement(_Input.Input, _extends({}, rest, {
|
|
63
|
+
align: align,
|
|
61
64
|
className: className,
|
|
62
65
|
placeholder: withLeadingZero ? "00:00" : "0:00",
|
|
63
66
|
value: value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputHours.js","names":["InputHours","React","forwardRef","ref","defaultValue","value","onCancel","onSave","externalEnterKeyPress","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","validateTimeInput","incrementOnlySelected","minuteIncrement","className","externalOnChange","onChange","externalOnClick","onClick","rest","inputRef","useRef","handleRef","useForkRef","useInputHours","inputProps","onBlur","onKeyDown","onDoubleClick","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport type { InputProps } from \"./Input\";\nimport { IInputHours, useInputHours } from \"../../hooks/useInputHours\";\n\nexport interface InputHoursProps\n extends Omit<InputProps, \"value\" | \"onChange\">,\n IInputHours {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n (\n {\n value: defaultValue,\n onCancel,\n onSave,\n onEnterKeyPress: externalEnterKeyPress,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n onChange: externalOnChange,\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 } = useInputHours(\n {\n value: defaultValue,\n withLeadingZero,\n onSave,\n validation,\n allowEmptyValue,\n onCancel,\n minuteIncrement,\n incrementOnlySelected,\n onEnterKeyPress: externalEnterKeyPress,\n onChange: externalOnChange,\n onClick: externalOnClick,\n },\n inputRef\n );\n\n const { value, onBlur, onKeyDown, onChange, onClick, onDoubleClick } =\n inputProps;\n\n return (\n <Input\n {...rest}\n className={className}\n placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n value={value}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n onChange={onChange}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n ref={handleRef}\n />\n );\n }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEA;AAAuE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhE,IAAMA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CACxC,
|
|
1
|
+
{"version":3,"file":"InputHours.js","names":["InputHours","React","forwardRef","ref","defaultValue","value","onCancel","onSave","externalEnterKeyPress","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","validateTimeInput","incrementOnlySelected","minuteIncrement","className","externalOnChange","onChange","externalOnClick","onClick","align","rest","inputRef","useRef","handleRef","useForkRef","useInputHours","inputProps","onBlur","onKeyDown","onDoubleClick","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport type { InputProps } from \"./Input\";\nimport { IInputHours, useInputHours } from \"../../hooks/useInputHours\";\n\nexport interface InputHoursProps\n extends Omit<InputProps, \"value\" | \"onChange\">,\n IInputHours {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n (\n {\n value: defaultValue,\n onCancel,\n onSave,\n onEnterKeyPress: externalEnterKeyPress,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n onChange: externalOnChange,\n onClick: externalOnClick,\n align = \"center\",\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n const { inputProps } = useInputHours(\n {\n value: defaultValue,\n withLeadingZero,\n onSave,\n validation,\n allowEmptyValue,\n onCancel,\n minuteIncrement,\n incrementOnlySelected,\n onEnterKeyPress: externalEnterKeyPress,\n onChange: externalOnChange,\n onClick: externalOnClick,\n },\n inputRef\n );\n\n const { value, onBlur, onKeyDown, onChange, onClick, onDoubleClick } =\n inputProps;\n\n return (\n <Input\n {...rest}\n align={align}\n className={className}\n placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n value={value}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n onChange={onChange}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n ref={handleRef}\n />\n );\n }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEA;AAAuE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhE,IAAMA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CACxC,gBAiBEC,GAAG,EACA;EAAA,IAhBMC,YAAY,QAAnBC,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACWC,qBAAqB,QAAtCC,eAAe;IACfC,eAAe,QAAfA,eAAe;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAGC,wBAAiB;IAAA,6BAC9BC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,4BAC7BC,eAAe;IAAfA,eAAe,qCAAG,CAAC;IACnBC,SAAS,QAATA,SAAS;IACCC,gBAAgB,QAA1BC,QAAQ;IACCC,eAAe,QAAxBC,OAAO;IAAA,kBACPC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IACbC,IAAI;EAIT,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAACvB,GAAG,EAAEoB,QAAQ,CAAC;EAE3C,qBAAuB,IAAAI,6BAAa,EAClC;MACEtB,KAAK,EAAED,YAAY;MACnBO,eAAe,EAAfA,eAAe;MACfJ,MAAM,EAANA,MAAM;MACNK,UAAU,EAAVA,UAAU;MACVF,eAAe,EAAfA,eAAe;MACfJ,QAAQ,EAARA,QAAQ;MACRS,eAAe,EAAfA,eAAe;MACfD,qBAAqB,EAArBA,qBAAqB;MACrBL,eAAe,EAAED,qBAAqB;MACtCU,QAAQ,EAAED,gBAAgB;MAC1BG,OAAO,EAAED;IACX,CAAC,EACDI,QAAQ,CACT;IAfOK,UAAU,kBAAVA,UAAU;EAiBlB,IAAQvB,KAAK,GACXuB,UAAU,CADJvB,KAAK;IAAEwB,MAAM,GACnBD,UAAU,CADGC,MAAM;IAAEC,SAAS,GAC9BF,UAAU,CADWE,SAAS;IAAEZ,QAAQ,GACxCU,UAAU,CADsBV,QAAQ;IAAEE,OAAO,GACjDQ,UAAU,CADgCR,OAAO;IAAEW,aAAa,GAChEH,UAAU,CADyCG,aAAa;EAGlE,oBACE,6BAAC,YAAK,eACAT,IAAI;IACR,KAAK,EAAED,KAAM;IACb,SAAS,EAAEL,SAAU;IACrB,WAAW,EAAEL,eAAe,GAAG,OAAO,GAAG,MAAO;IAChD,KAAK,EAAEN,KAAM;IACb,MAAM,EAAEwB,MAAO;IACf,SAAS,EAAEC,SAAU;IACrB,QAAQ,EAAEZ,QAAS;IACnB,OAAO,EAAEE,OAAQ;IACjB,aAAa,EAAEW,aAAc;IAC7B,GAAG,EAAEN;EAAU,GACf;AAEN,CAAC,CACF;AAAC;AAEFzB,UAAU,CAACgC,WAAW,GAAG,YAAY"}
|
|
@@ -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);}", " ", " ", " ", " ", "
|
|
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;"]);
|
|
@@ -40,13 +40,7 @@ var StyledInput = _styledComponents.default.input.withConfig({
|
|
|
40
40
|
}, function (props) {
|
|
41
41
|
return props.$loading && (0, _styledComponents.css)(["cursor:progress;"]);
|
|
42
42
|
}, function (props) {
|
|
43
|
-
return props.align
|
|
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;"]);
|
|
43
|
+
return props.align && (0, _styledComponents.css)(["text-align:", ";"], props.align);
|
|
50
44
|
});
|
|
51
45
|
exports.StyledInput = StyledInput;
|
|
52
46
|
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","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 {
|
|
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 { InputProps } from \"./Input\";\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 extends Pick<InputProps, \"align\"> {\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 ${(props) =>\n props.align &&\n css`\n text-align: ${props.align};\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;AAO9C,IAAMC,WAAW,GAAGV,yBAAM,CAACW,KAAK;EAAA;EAAA;AAAA,8SAkBnC,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,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACU,KAAK,QACXR,qBAAG,wBACaF,KAAK,CAACU,KAAK,CAC1B;AAAA,EACJ;AAAC;AAEFJ,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import React, { ReactNode, Ref, InputHTMLAttributes } from "react";
|
|
2
2
|
import { InputSize } from "./types";
|
|
3
3
|
import { ITypographyProps } from "../Typography/Typography";
|
|
4
|
-
|
|
5
|
-
export interface InputProps extends Omit<InputNativeProps, "size" | "ref"> {
|
|
4
|
+
interface OverrideProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "ref"> {
|
|
6
5
|
/** Velicina inputa koja definse font-size i border radius */
|
|
7
6
|
size?: InputSize;
|
|
7
|
+
}
|
|
8
|
+
export interface InputProps extends OverrideProps, Pick<ITypographyProps, "align"> {
|
|
8
9
|
invalid?: boolean;
|
|
9
10
|
startAdornment?: ReactNode;
|
|
10
11
|
endAdornment?: ReactNode;
|
|
11
12
|
wrapRef?: Ref<HTMLDivElement>;
|
|
12
13
|
wrapperClick?: () => void;
|
|
13
|
-
typographyProps?: Omit<ITypographyProps, "size">;
|
|
14
14
|
}
|
|
15
15
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
16
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;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,
|
|
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,UAAU,aACR,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACnE,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,UACf,SAAQ,aAAa,EACnB,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,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;CAC3B;AAED,eAAO,MAAM,KAAK,qFAkDjB,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", "wrapperClick"
|
|
3
|
+
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
|
|
4
4
|
import React, { useCallback, useRef } from "react";
|
|
5
5
|
import classnames from "classnames";
|
|
6
6
|
import { StyledInput, StyledInputWrapper } from "./Styles";
|
|
@@ -21,7 +21,6 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
21
21
|
endAdornment = _ref.endAdornment,
|
|
22
22
|
wrapRef = _ref.wrapRef,
|
|
23
23
|
wrapperClick = _ref.wrapperClick,
|
|
24
|
-
typographyProps = _ref.typographyProps,
|
|
25
24
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
26
25
|
var intInputRef = useRef(null);
|
|
27
26
|
var handleRef = useForkRef(ref, intInputRef);
|
|
@@ -46,7 +45,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
46
45
|
className: "c-input",
|
|
47
46
|
"aria-invalid": invalid,
|
|
48
47
|
"data-form-type": "other"
|
|
49
|
-
},
|
|
48
|
+
}, rest)), endAdornment);
|
|
50
49
|
});
|
|
51
50
|
Input.displayName = "Input";
|
|
52
51
|
//# 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","wrapperClick","
|
|
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","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\ninterface OverrideProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n}\n\nexport interface InputProps\n extends OverrideProps,\n Pick<ITypographyProps, \"align\"> {\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\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 ...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 {...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;AAoB/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,gBAcEC,GAAG,EACA;EAAA,0BAbDC,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;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMoB,SAAS,GAAGhB,UAAU,CAACG,GAAG,EAAEY,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGtB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAoB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;IAC5BN,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,EAAEa,kBAAmB;IAC5B,GAAG,EAAEL;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEM,SAAU;IACf,IAAI,EAAEV,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBK,IAAI,EACR,EACDH,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACmB,WAAW,GAAG,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputHours.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputHours.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAiB,MAAM,2BAA2B,CAAC;AAEvE,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,CAAC,EAC5C,WAAW;CAAG;AAElB,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"InputHours.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputHours.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAiB,MAAM,2BAA2B,CAAC;AAEvE,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,CAAC,EAC5C,WAAW;CAAG;AAElB,eAAO,MAAM,UAAU,0FA2DtB,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 = ["value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onChange", "onClick"];
|
|
3
|
+
var _excluded = ["value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onChange", "onClick", "align"];
|
|
4
4
|
import React, { useRef } from "react";
|
|
5
5
|
import useForkRef from "../../utils/useForkRef";
|
|
6
6
|
import { validateTimeInput } from "../../utils";
|
|
@@ -23,6 +23,8 @@ export var InputHours = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
23
23
|
className = _ref.className,
|
|
24
24
|
externalOnChange = _ref.onChange,
|
|
25
25
|
externalOnClick = _ref.onClick,
|
|
26
|
+
_ref$align = _ref.align,
|
|
27
|
+
align = _ref$align === void 0 ? "center" : _ref$align,
|
|
26
28
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
27
29
|
var inputRef = useRef(null);
|
|
28
30
|
var handleRef = useForkRef(ref, inputRef);
|
|
@@ -47,6 +49,7 @@ export var InputHours = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
47
49
|
onClick = inputProps.onClick,
|
|
48
50
|
onDoubleClick = inputProps.onDoubleClick;
|
|
49
51
|
return /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
|
|
52
|
+
align: align,
|
|
50
53
|
className: className,
|
|
51
54
|
placeholder: withLeadingZero ? "00:00" : "0:00",
|
|
52
55
|
value: value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputHours.js","names":["React","useRef","useForkRef","validateTimeInput","Input","useInputHours","InputHours","forwardRef","ref","defaultValue","value","onCancel","onSave","externalEnterKeyPress","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","incrementOnlySelected","minuteIncrement","className","externalOnChange","onChange","externalOnClick","onClick","rest","inputRef","handleRef","inputProps","onBlur","onKeyDown","onDoubleClick","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport type { InputProps } from \"./Input\";\nimport { IInputHours, useInputHours } from \"../../hooks/useInputHours\";\n\nexport interface InputHoursProps\n extends Omit<InputProps, \"value\" | \"onChange\">,\n IInputHours {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n (\n {\n value: defaultValue,\n onCancel,\n onSave,\n onEnterKeyPress: externalEnterKeyPress,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n onChange: externalOnChange,\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 } = useInputHours(\n {\n value: defaultValue,\n withLeadingZero,\n onSave,\n validation,\n allowEmptyValue,\n onCancel,\n minuteIncrement,\n incrementOnlySelected,\n onEnterKeyPress: externalEnterKeyPress,\n onChange: externalOnChange,\n onClick: externalOnClick,\n },\n inputRef\n );\n\n const { value, onBlur, onKeyDown, onChange, onClick, onDoubleClick } =\n inputProps;\n\n return (\n <Input\n {...rest}\n className={className}\n placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n value={value}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n onChange={onChange}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n ref={handleRef}\n />\n );\n }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAAsBC,aAAa,QAAQ,2BAA2B;AAMtE,OAAO,IAAMC,UAAU,gBAAGN,KAAK,CAACO,UAAU,CACxC,
|
|
1
|
+
{"version":3,"file":"InputHours.js","names":["React","useRef","useForkRef","validateTimeInput","Input","useInputHours","InputHours","forwardRef","ref","defaultValue","value","onCancel","onSave","externalEnterKeyPress","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","incrementOnlySelected","minuteIncrement","className","externalOnChange","onChange","externalOnClick","onClick","align","rest","inputRef","handleRef","inputProps","onBlur","onKeyDown","onDoubleClick","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport type { InputProps } from \"./Input\";\nimport { IInputHours, useInputHours } from \"../../hooks/useInputHours\";\n\nexport interface InputHoursProps\n extends Omit<InputProps, \"value\" | \"onChange\">,\n IInputHours {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n (\n {\n value: defaultValue,\n onCancel,\n onSave,\n onEnterKeyPress: externalEnterKeyPress,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n onChange: externalOnChange,\n onClick: externalOnClick,\n align = \"center\",\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n const { inputProps } = useInputHours(\n {\n value: defaultValue,\n withLeadingZero,\n onSave,\n validation,\n allowEmptyValue,\n onCancel,\n minuteIncrement,\n incrementOnlySelected,\n onEnterKeyPress: externalEnterKeyPress,\n onChange: externalOnChange,\n onClick: externalOnClick,\n },\n inputRef\n );\n\n const { value, onBlur, onKeyDown, onChange, onClick, onDoubleClick } =\n inputProps;\n\n return (\n <Input\n {...rest}\n align={align}\n className={className}\n placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n value={value}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n onChange={onChange}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n ref={handleRef}\n />\n );\n }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAAsBC,aAAa,QAAQ,2BAA2B;AAMtE,OAAO,IAAMC,UAAU,gBAAGN,KAAK,CAACO,UAAU,CACxC,gBAiBEC,GAAG,EACA;EAAA,IAhBMC,YAAY,QAAnBC,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACWC,qBAAqB,QAAtCC,eAAe;IACfC,eAAe,QAAfA,eAAe;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAGd,iBAAiB;IAAA,6BAC9Be,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,4BAC7BC,eAAe;IAAfA,eAAe,qCAAG,CAAC;IACnBC,SAAS,QAATA,SAAS;IACCC,gBAAgB,QAA1BC,QAAQ;IACCC,eAAe,QAAxBC,OAAO;IAAA,kBACPC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IACbC,IAAI;EAIT,IAAMC,QAAQ,GAAG1B,MAAM,CAAmB,IAAI,CAAC;EAC/C,IAAM2B,SAAS,GAAG1B,UAAU,CAACM,GAAG,EAAEmB,QAAQ,CAAC;EAE3C,qBAAuBtB,aAAa,CAClC;MACEK,KAAK,EAAED,YAAY;MACnBO,eAAe,EAAfA,eAAe;MACfJ,MAAM,EAANA,MAAM;MACNK,UAAU,EAAVA,UAAU;MACVF,eAAe,EAAfA,eAAe;MACfJ,QAAQ,EAARA,QAAQ;MACRQ,eAAe,EAAfA,eAAe;MACfD,qBAAqB,EAArBA,qBAAqB;MACrBJ,eAAe,EAAED,qBAAqB;MACtCS,QAAQ,EAAED,gBAAgB;MAC1BG,OAAO,EAAED;IACX,CAAC,EACDI,QAAQ,CACT;IAfOE,UAAU,kBAAVA,UAAU;EAiBlB,IAAQnB,KAAK,GACXmB,UAAU,CADJnB,KAAK;IAAEoB,MAAM,GACnBD,UAAU,CADGC,MAAM;IAAEC,SAAS,GAC9BF,UAAU,CADWE,SAAS;IAAET,QAAQ,GACxCO,UAAU,CADsBP,QAAQ;IAAEE,OAAO,GACjDK,UAAU,CADgCL,OAAO;IAAEQ,aAAa,GAChEH,UAAU,CADyCG,aAAa;EAGlE,oBACE,oBAAC,KAAK,eACAN,IAAI;IACR,KAAK,EAAED,KAAM;IACb,SAAS,EAAEL,SAAU;IACrB,WAAW,EAAEJ,eAAe,GAAG,OAAO,GAAG,MAAO;IAChD,KAAK,EAAEN,KAAM;IACb,MAAM,EAAEoB,MAAO;IACf,SAAS,EAAEC,SAAU;IACrB,QAAQ,EAAET,QAAS;IACnB,OAAO,EAAEE,OAAQ;IACjB,aAAa,EAAEQ,aAAc;IAC7B,GAAG,EAAEJ;EAAU,GACf;AAEN,CAAC,CACF;AAEDtB,UAAU,CAAC2B,WAAW,GAAG,YAAY"}
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { InputSize } from "./types";
|
|
2
|
-
import {
|
|
2
|
+
import { InputProps } from "./Input";
|
|
3
3
|
interface StyledInputWrapperProps {
|
|
4
4
|
$size?: InputSize;
|
|
5
5
|
$invalid?: boolean;
|
|
6
6
|
$disabled?: boolean;
|
|
7
7
|
}
|
|
8
8
|
export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", any, StyledInputWrapperProps, never>;
|
|
9
|
-
interface StyledInputProps {
|
|
9
|
+
interface StyledInputProps extends Pick<InputProps, "align"> {
|
|
10
10
|
$size?: InputSize;
|
|
11
11
|
$loading?: boolean;
|
|
12
|
-
align?: ITypographyProps["align"];
|
|
13
12
|
}
|
|
14
13
|
export declare const StyledInput: import("styled-components").StyledComponent<"input", any, StyledInputProps, never>;
|
|
15
14
|
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;AAGpC,OAAO,EAAE,
|
|
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,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,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,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFA+CvB,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);}", " ", " ", " ", " ", "
|
|
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;"]);
|
|
@@ -30,13 +30,7 @@ export var StyledInput = styled.input.withConfig({
|
|
|
30
30
|
}, function (props) {
|
|
31
31
|
return props.$loading && css(["cursor:progress;"]);
|
|
32
32
|
}, function (props) {
|
|
33
|
-
return props.align
|
|
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;"]);
|
|
33
|
+
return props.align && css(["text-align:", ";"], props.align);
|
|
40
34
|
});
|
|
41
35
|
StyledInput.displayName = "StyledInput";
|
|
42
36
|
//# 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","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 {
|
|
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 { InputProps } from \"./Input\";\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 extends Pick<InputProps, \"align\"> {\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 ${(props) =>\n props.align &&\n css`\n text-align: ${props.align};\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;AAOrD,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,8SAkBnC,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,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,IACXd,GAAG,uBACaK,KAAK,CAACS,KAAK,CAC1B;AAAA,EACJ;AAEDJ,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
package/dist/index.js
CHANGED
|
@@ -11491,7 +11491,7 @@
|
|
|
11491
11491
|
var StyledInput$2 = styled__default["default"].input.withConfig({
|
|
11492
11492
|
displayName: "Styles__StyledInput",
|
|
11493
11493
|
componentId: "sc-ce8kcp-1"
|
|
11494
|
-
})(["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);}", " ", " ", " ", " ", "
|
|
11494
|
+
})(["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) {
|
|
11495
11495
|
return props.$size === "big" && styled.css(["font-size:1rem;"]);
|
|
11496
11496
|
}, function (props) {
|
|
11497
11497
|
return props.$size === "biggest" && styled.css(["font-size:1.25rem;font-weight:500;"]);
|
|
@@ -11500,17 +11500,11 @@
|
|
|
11500
11500
|
}, function (props) {
|
|
11501
11501
|
return props.$loading && styled.css(["cursor:progress;"]);
|
|
11502
11502
|
}, function (props) {
|
|
11503
|
-
return props.align
|
|
11504
|
-
}, function (props) {
|
|
11505
|
-
return props.align === "right" && styled.css(["text-align:right;"]);
|
|
11506
|
-
}, function (props) {
|
|
11507
|
-
return props.align === "center" && styled.css(["text-align:center;"]);
|
|
11508
|
-
}, function (props) {
|
|
11509
|
-
return props.align === "justify" && styled.css(["text-align:justify;"]);
|
|
11503
|
+
return props.align && styled.css(["text-align:", ";"], props.align);
|
|
11510
11504
|
});
|
|
11511
11505
|
StyledInput$2.displayName = "StyledInput";
|
|
11512
11506
|
|
|
11513
|
-
var _excluded$N = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"
|
|
11507
|
+
var _excluded$N = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
|
|
11514
11508
|
var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
11515
11509
|
var _ref$className = _ref.className,
|
|
11516
11510
|
className = _ref$className === void 0 ? "" : _ref$className,
|
|
@@ -11527,7 +11521,6 @@
|
|
|
11527
11521
|
endAdornment = _ref.endAdornment,
|
|
11528
11522
|
wrapRef = _ref.wrapRef,
|
|
11529
11523
|
wrapperClick = _ref.wrapperClick,
|
|
11530
|
-
typographyProps = _ref.typographyProps,
|
|
11531
11524
|
rest = _objectWithoutProperties(_ref, _excluded$N);
|
|
11532
11525
|
var intInputRef = React.useRef(null);
|
|
11533
11526
|
var handleRef = useForkRef(ref, intInputRef);
|
|
@@ -11552,7 +11545,7 @@
|
|
|
11552
11545
|
className: "c-input",
|
|
11553
11546
|
"aria-invalid": invalid,
|
|
11554
11547
|
"data-form-type": "other"
|
|
11555
|
-
},
|
|
11548
|
+
}, rest)), endAdornment);
|
|
11556
11549
|
});
|
|
11557
11550
|
Input.displayName = "Input";
|
|
11558
11551
|
|
|
@@ -12682,7 +12675,7 @@
|
|
|
12682
12675
|
};
|
|
12683
12676
|
};
|
|
12684
12677
|
|
|
12685
|
-
var _excluded$H = ["value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onChange", "onClick"];
|
|
12678
|
+
var _excluded$H = ["value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onChange", "onClick", "align"];
|
|
12686
12679
|
var InputHours = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
12687
12680
|
var defaultValue = _ref.value,
|
|
12688
12681
|
onCancel = _ref.onCancel,
|
|
@@ -12700,6 +12693,8 @@
|
|
|
12700
12693
|
className = _ref.className,
|
|
12701
12694
|
externalOnChange = _ref.onChange,
|
|
12702
12695
|
externalOnClick = _ref.onClick,
|
|
12696
|
+
_ref$align = _ref.align,
|
|
12697
|
+
align = _ref$align === void 0 ? "center" : _ref$align,
|
|
12703
12698
|
rest = _objectWithoutProperties(_ref, _excluded$H);
|
|
12704
12699
|
var inputRef = React.useRef(null);
|
|
12705
12700
|
var handleRef = useForkRef(ref, inputRef);
|
|
@@ -12724,6 +12719,7 @@
|
|
|
12724
12719
|
onClick = inputProps.onClick,
|
|
12725
12720
|
onDoubleClick = inputProps.onDoubleClick;
|
|
12726
12721
|
return /*#__PURE__*/React__default["default"].createElement(Input, _extends({}, rest, {
|
|
12722
|
+
align: align,
|
|
12727
12723
|
className: className,
|
|
12728
12724
|
placeholder: withLeadingZero ? "00:00" : "0:00",
|
|
12729
12725
|
value: value,
|