@ctlyst.id/internal-ui 3.3.1 → 3.3.3
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/index.js +85 -13
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +88 -11
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -4785,10 +4785,82 @@ var import_react81 = require("@chakra-ui/react");
|
|
4785
4785
|
var import_react82 = require("@chakra-ui/react");
|
4786
4786
|
|
4787
4787
|
// src/components/time-input/components/index.tsx
|
4788
|
-
var
|
4788
|
+
var import_react84 = require("@chakra-ui/react");
|
4789
4789
|
var import_internal_icon10 = require("@ctlyst.id/internal-icon");
|
4790
|
-
var
|
4791
|
-
|
4790
|
+
var import_react85 = require("react");
|
4791
|
+
|
4792
|
+
// src/components/time-input/components/integration.tsx
|
4793
|
+
var import_react83 = require("react");
|
4794
|
+
var import_timescape = require("timescape");
|
4795
|
+
var import_timescape2 = require("timescape");
|
4796
|
+
var useTimescape = (options = {}) => {
|
4797
|
+
var _a;
|
4798
|
+
const { date, onChangeDate, ...rest } = options;
|
4799
|
+
const [manager] = (0, import_react83.useState)(() => new import_timescape.TimescapeManager(date, rest));
|
4800
|
+
const onChangeDateRef = (0, import_react83.useRef)(onChangeDate);
|
4801
|
+
(0, import_react83.useLayoutEffect)(() => {
|
4802
|
+
onChangeDateRef.current = onChangeDate;
|
4803
|
+
}, [onChangeDate]);
|
4804
|
+
const [optionsState, update] = (0, import_react83.useState)(() => ({
|
4805
|
+
date,
|
4806
|
+
...rest
|
4807
|
+
}));
|
4808
|
+
(0, import_react83.useEffect)(() => {
|
4809
|
+
manager.resync();
|
4810
|
+
return () => {
|
4811
|
+
manager.remove();
|
4812
|
+
};
|
4813
|
+
}, [manager]);
|
4814
|
+
(0, import_react83.useEffect)(() => {
|
4815
|
+
return manager.on("changeDate", (nextDate) => {
|
4816
|
+
var _a2;
|
4817
|
+
(_a2 = onChangeDateRef.current) == null ? void 0 : _a2.call(onChangeDateRef, nextDate);
|
4818
|
+
update((value) => ({ ...value, date: nextDate }));
|
4819
|
+
});
|
4820
|
+
}, [manager]);
|
4821
|
+
const timestamp = (_a = optionsState.date) == null ? void 0 : _a.getTime();
|
4822
|
+
(0, import_react83.useEffect)(() => {
|
4823
|
+
manager.date = timestamp;
|
4824
|
+
manager.minDate = optionsState.minDate;
|
4825
|
+
manager.maxDate = optionsState.maxDate;
|
4826
|
+
manager.hour12 = optionsState.hour12;
|
4827
|
+
manager.wrapAround = optionsState.wrapAround;
|
4828
|
+
manager.digits = optionsState.digits;
|
4829
|
+
manager.snapToStep = optionsState.snapToStep;
|
4830
|
+
}, [
|
4831
|
+
manager,
|
4832
|
+
timestamp,
|
4833
|
+
optionsState.minDate,
|
4834
|
+
optionsState.maxDate,
|
4835
|
+
optionsState.hour12,
|
4836
|
+
optionsState.wrapAround,
|
4837
|
+
optionsState.digits,
|
4838
|
+
optionsState.snapToStep
|
4839
|
+
]);
|
4840
|
+
return {
|
4841
|
+
_manager: manager,
|
4842
|
+
getInputProps: (type, opts) => ({
|
4843
|
+
_ref: (element) => {
|
4844
|
+
if (!element) return;
|
4845
|
+
manager.registerElement(element, type, opts == null ? void 0 : opts.autofocus);
|
4846
|
+
if (opts == null ? void 0 : opts.ref) opts.ref.current = element;
|
4847
|
+
},
|
4848
|
+
get ref() {
|
4849
|
+
return this._ref;
|
4850
|
+
},
|
4851
|
+
set ref(value) {
|
4852
|
+
this._ref = value;
|
4853
|
+
}
|
4854
|
+
}),
|
4855
|
+
getRootProps: () => ({
|
4856
|
+
ref: (element) => element && manager.registerRoot(element)
|
4857
|
+
}),
|
4858
|
+
options: optionsState,
|
4859
|
+
update
|
4860
|
+
};
|
4861
|
+
};
|
4862
|
+
|
4863
|
+
// src/components/time-input/components/index.tsx
|
4792
4864
|
var import_jsx_runtime63 = require("react/jsx-runtime");
|
4793
4865
|
var Time = class {
|
4794
4866
|
constructor(hours, minutes, seconds) {
|
@@ -4803,9 +4875,9 @@ var Time = class {
|
|
4803
4875
|
return `${this.hours}:${this.minutes}:${this.seconds}`;
|
4804
4876
|
}
|
4805
4877
|
};
|
4806
|
-
var InputTimeArea = (0,
|
4878
|
+
var InputTimeArea = (0, import_react84.forwardRef)((props, ref) => {
|
4807
4879
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
4808
|
-
|
4880
|
+
import_react84.Input,
|
4809
4881
|
{
|
4810
4882
|
_focusWithin: {
|
4811
4883
|
bg: "neutral.300"
|
@@ -4821,7 +4893,7 @@ var InputTimeArea = (0, import_react83.forwardRef)((props, ref) => {
|
|
4821
4893
|
}
|
4822
4894
|
);
|
4823
4895
|
});
|
4824
|
-
var TimeInput2 = (0,
|
4896
|
+
var TimeInput2 = (0, import_react84.forwardRef)(
|
4825
4897
|
({
|
4826
4898
|
config: config2,
|
4827
4899
|
label,
|
@@ -4841,11 +4913,11 @@ var TimeInput2 = (0, import_react83.forwardRef)(
|
|
4841
4913
|
defaultDate.setHours(0, 0, 0, 0);
|
4842
4914
|
const date = dateVal ? new Date(dateVal) : defaultDate;
|
4843
4915
|
const timeValue = new Time();
|
4844
|
-
const { getRootProps, getInputProps, options, update, _manager } =
|
4916
|
+
const { getRootProps, getInputProps, options, update, _manager } = useTimescape({
|
4845
4917
|
date,
|
4846
4918
|
...config2
|
4847
4919
|
});
|
4848
|
-
(0,
|
4920
|
+
(0, import_react85.useEffect)(() => {
|
4849
4921
|
var _a, _b, _c, _d, _e, _f;
|
4850
4922
|
timeValue.hours = (_b = (_a = options == null ? void 0 : options.date) == null ? void 0 : _a.getHours()) != null ? _b : 0;
|
4851
4923
|
timeValue.minutes = (_d = (_c = options == null ? void 0 : options.date) == null ? void 0 : _c.getMinutes()) != null ? _d : 0;
|
@@ -4854,14 +4926,14 @@ var TimeInput2 = (0, import_react83.forwardRef)(
|
|
4854
4926
|
onChangeTime(timeValue);
|
4855
4927
|
}
|
4856
4928
|
}, [options.date]);
|
4857
|
-
(0,
|
4929
|
+
(0, import_react85.useImperativeHandle)(ref, () => ({
|
4858
4930
|
focus() {
|
4859
4931
|
_manager.focusField("hours");
|
4860
4932
|
}
|
4861
4933
|
}));
|
4862
4934
|
const rootProps = getRootProps();
|
4863
4935
|
const hoursProps = getInputProps("hours");
|
4864
|
-
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
4936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Box, { ...boxProps, ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
4865
4937
|
field_default,
|
4866
4938
|
{
|
4867
4939
|
isError,
|
@@ -4871,7 +4943,7 @@ var TimeInput2 = (0, import_react83.forwardRef)(
|
|
4871
4943
|
isDisabled,
|
4872
4944
|
isSuccess,
|
4873
4945
|
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
4874
|
-
|
4946
|
+
import_react84.InputGroup,
|
4875
4947
|
{
|
4876
4948
|
borderRadius: "sm",
|
4877
4949
|
backgroundColor: isDisabled ? "neutral.300" : "white.high",
|
@@ -4879,7 +4951,7 @@ var TimeInput2 = (0, import_react83.forwardRef)(
|
|
4879
4951
|
alignItems: "center",
|
4880
4952
|
gap: 3,
|
4881
4953
|
children: [
|
4882
|
-
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
4954
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react84.Flex, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
|
4883
4955
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...hoursProps }),
|
4884
4956
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
|
4885
4957
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("minutes") }),
|
@@ -4887,7 +4959,7 @@ var TimeInput2 = (0, import_react83.forwardRef)(
|
|
4887
4959
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
|
4888
4960
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("seconds") })
|
4889
4961
|
] }),
|
4890
|
-
options.hour12 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
4962
|
+
options.hour12 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Input, { p: 0, ...getInputProps("am/pm") })
|
4891
4963
|
] }),
|
4892
4964
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon10.Clock, { color: "neutral.400" }),
|
4893
4965
|
addOnRight
|