rsuite 5.59.0 → 5.59.2
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/AvatarGroup/styles/index.css +2 -0
- package/AvatarGroup/styles/index.less +2 -0
- package/CHANGELOG.md +26 -0
- package/CheckPicker/styles/index.css +2 -0
- package/CheckTree/styles/index.css +2 -0
- package/CheckTreePicker/styles/index.css +2 -0
- package/Checkbox/styles/index.css +2 -0
- package/Checkbox/styles/index.less +2 -0
- package/DateRangePicker/styles/index.css +27 -0
- package/DateRangePicker/styles/index.less +27 -0
- package/MultiCascadeTree/styles/index.css +2 -0
- package/MultiCascader/styles/index.css +2 -0
- package/Placeholder/styles/index.css +42 -6
- package/Placeholder/styles/index.less +18 -9
- package/Placeholder/styles/mixin.less +7 -0
- package/Sidenav/styles/index.css +3 -0
- package/Sidenav/styles/index.less +4 -0
- package/TagInput/styles/index.css +2 -0
- package/TagPicker/styles/index.css +2 -0
- package/cjs/@types/common.d.ts +1 -1
- package/cjs/Avatar/Avatar.js +16 -8
- package/cjs/Avatar/useImage.js +0 -1
- package/cjs/AvatarGroup/AvatarGroup.d.ts +1 -0
- package/cjs/AvatarGroup/AvatarGroup.js +12 -12
- package/cjs/Calendar/CalendarContainer.js +4 -4
- package/cjs/Checkbox/Checkbox.js +1 -1
- package/cjs/DatePicker/DatePicker.d.ts +3 -38
- package/cjs/DatePicker/DatePicker.js +86 -137
- package/cjs/DatePicker/PredefinedRanges.d.ts +1 -1
- package/cjs/DatePicker/PredefinedRanges.js +3 -3
- package/cjs/DatePicker/Toolbar.d.ts +1 -1
- package/cjs/DatePicker/Toolbar.js +13 -12
- package/cjs/DatePicker/hooks/useFocus.d.ts +13 -0
- package/cjs/DatePicker/hooks/useFocus.js +96 -0
- package/cjs/DatePicker/hooks/useMonthView.d.ts +10 -0
- package/cjs/DatePicker/hooks/useMonthView.js +28 -0
- package/cjs/DatePicker/index.d.ts +2 -1
- package/cjs/DatePicker/types.d.ts +37 -0
- package/cjs/DatePicker/utils.d.ts +9 -0
- package/cjs/DatePicker/utils.js +20 -2
- package/cjs/DateRangePicker/DateRangePicker.d.ts +15 -3
- package/cjs/DateRangePicker/DateRangePicker.js +58 -68
- package/cjs/DateRangePicker/DateRangePickerContext.d.ts +4 -1
- package/cjs/DateRangePicker/DateRangePickerContext.js +4 -4
- package/cjs/DateRangePicker/Header.d.ts +11 -0
- package/cjs/DateRangePicker/Header.js +65 -0
- package/cjs/DateRangePicker/disabledDateUtils.d.ts +1 -1
- package/cjs/DateRangePicker/disabledDateUtils.js +1 -1
- package/cjs/DateRangePicker/index.js +5 -0
- package/cjs/Form/Form.d.ts +56 -39
- package/cjs/Form/Form.js +70 -208
- package/cjs/Form/FormContext.d.ts +13 -10
- package/cjs/Form/FormContext.js +11 -5
- package/cjs/Form/{useFormClassNames.d.ts → hooks/useFormClassNames.d.ts} +2 -2
- package/cjs/Form/{useFormClassNames.js → hooks/useFormClassNames.js} +2 -2
- package/cjs/Form/hooks/useFormRef.d.ts +55 -0
- package/cjs/Form/hooks/useFormRef.js +45 -0
- package/cjs/Form/hooks/useFormValidate.d.ts +19 -0
- package/cjs/Form/hooks/useFormValidate.js +157 -0
- package/cjs/Form/hooks/useFormValue.d.ts +7 -0
- package/cjs/Form/hooks/useFormValue.js +42 -0
- package/cjs/Form/{useSchemaModel.js → hooks/useSchemaModel.js} +5 -0
- package/cjs/Form/index.d.ts +3 -2
- package/cjs/Form/index.js +3 -9
- package/cjs/FormControl/FormControl.d.ts +1 -1
- package/cjs/FormControl/FormControl.js +51 -69
- package/cjs/FormControl/hooks/useField.d.ts +18 -0
- package/cjs/FormControl/hooks/useField.js +54 -0
- package/cjs/FormControl/hooks/useRegisterModel.d.ts +3 -0
- package/cjs/FormControl/hooks/useRegisterModel.js +22 -0
- package/cjs/FormControl/utils.d.ts +1 -0
- package/cjs/FormControl/utils.js +8 -0
- package/cjs/FormControlLabel/FormControlLabel.js +12 -9
- package/cjs/FormErrorMessage/FormErrorMessage.js +2 -5
- package/cjs/FormGroup/FormGroup.d.ts +18 -4
- package/cjs/FormGroup/FormGroup.js +28 -2
- package/cjs/FormGroup/index.d.ts +1 -0
- package/cjs/FormGroup/index.js +4 -3
- package/cjs/FormHelpText/FormHelpText.d.ts +2 -1
- package/cjs/FormHelpText/FormHelpText.js +16 -9
- package/cjs/Input/Input.js +4 -5
- package/cjs/Placeholder/PlaceholderGraph.d.ts +13 -1
- package/cjs/Placeholder/PlaceholderGrid.d.ts +27 -1
- package/cjs/Placeholder/PlaceholderGrid.js +10 -13
- package/cjs/Placeholder/PlaceholderParagraph.d.ts +24 -1
- package/cjs/Placeholder/PlaceholderParagraph.js +13 -9
- package/cjs/utils/dateUtils.d.ts +72 -10
- package/cjs/utils/dateUtils.js +88 -29
- package/dist/rsuite-no-reset-rtl.css +76 -6
- package/dist/rsuite-no-reset-rtl.min.css +1 -1
- package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
- package/dist/rsuite-no-reset.css +76 -6
- package/dist/rsuite-no-reset.min.css +1 -1
- package/dist/rsuite-no-reset.min.css.map +1 -1
- package/dist/rsuite-rtl.css +76 -6
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +76 -6
- package/dist/rsuite.js +221 -57
- package/dist/rsuite.js.map +1 -1
- package/dist/rsuite.min.css +1 -1
- package/dist/rsuite.min.css.map +1 -1
- package/dist/rsuite.min.js +1 -1
- package/dist/rsuite.min.js.LICENSE.txt +35 -0
- package/dist/rsuite.min.js.map +1 -1
- package/esm/@types/common.d.ts +1 -1
- package/esm/Avatar/Avatar.js +12 -4
- package/esm/Avatar/useImage.js +0 -1
- package/esm/AvatarGroup/AvatarGroup.d.ts +1 -0
- package/esm/AvatarGroup/AvatarGroup.js +12 -12
- package/esm/Calendar/CalendarContainer.js +5 -5
- package/esm/Checkbox/Checkbox.js +1 -1
- package/esm/DatePicker/DatePicker.d.ts +3 -38
- package/esm/DatePicker/DatePicker.js +88 -139
- package/esm/DatePicker/PredefinedRanges.d.ts +1 -1
- package/esm/DatePicker/PredefinedRanges.js +3 -3
- package/esm/DatePicker/Toolbar.d.ts +1 -1
- package/esm/DatePicker/Toolbar.js +13 -12
- package/esm/DatePicker/hooks/useFocus.d.ts +13 -0
- package/esm/DatePicker/hooks/useFocus.js +90 -0
- package/esm/DatePicker/hooks/useMonthView.d.ts +10 -0
- package/esm/DatePicker/hooks/useMonthView.js +22 -0
- package/esm/DatePicker/index.d.ts +2 -1
- package/esm/DatePicker/types.d.ts +37 -0
- package/esm/DatePicker/utils.d.ts +9 -0
- package/esm/DatePicker/utils.js +18 -2
- package/esm/DateRangePicker/DateRangePicker.d.ts +15 -3
- package/esm/DateRangePicker/DateRangePicker.js +61 -71
- package/esm/DateRangePicker/DateRangePickerContext.d.ts +4 -1
- package/esm/DateRangePicker/DateRangePickerContext.js +2 -2
- package/esm/DateRangePicker/Header.d.ts +11 -0
- package/esm/DateRangePicker/Header.js +59 -0
- package/esm/DateRangePicker/disabledDateUtils.d.ts +1 -1
- package/esm/DateRangePicker/disabledDateUtils.js +1 -1
- package/esm/DateRangePicker/index.js +4 -0
- package/esm/Form/Form.d.ts +56 -39
- package/esm/Form/Form.js +68 -205
- package/esm/Form/FormContext.d.ts +13 -10
- package/esm/Form/FormContext.js +6 -2
- package/esm/Form/{useFormClassNames.d.ts → hooks/useFormClassNames.d.ts} +2 -2
- package/esm/Form/{useFormClassNames.js → hooks/useFormClassNames.js} +2 -2
- package/esm/Form/hooks/useFormRef.d.ts +55 -0
- package/esm/Form/hooks/useFormRef.js +40 -0
- package/esm/Form/hooks/useFormValidate.d.ts +19 -0
- package/esm/Form/hooks/useFormValidate.js +152 -0
- package/esm/Form/hooks/useFormValue.d.ts +7 -0
- package/esm/Form/hooks/useFormValue.js +37 -0
- package/esm/Form/{useSchemaModel.js → hooks/useSchemaModel.js} +5 -0
- package/esm/Form/index.d.ts +3 -2
- package/esm/Form/index.js +1 -1
- package/esm/FormControl/FormControl.d.ts +1 -1
- package/esm/FormControl/FormControl.js +49 -67
- package/esm/FormControl/hooks/useField.d.ts +18 -0
- package/esm/FormControl/hooks/useField.js +48 -0
- package/esm/FormControl/hooks/useRegisterModel.d.ts +3 -0
- package/esm/FormControl/hooks/useRegisterModel.js +17 -0
- package/esm/FormControl/utils.d.ts +1 -0
- package/esm/FormControl/utils.js +4 -0
- package/esm/FormControlLabel/FormControlLabel.js +12 -8
- package/esm/FormErrorMessage/FormErrorMessage.js +2 -5
- package/esm/FormGroup/FormGroup.d.ts +18 -4
- package/esm/FormGroup/FormGroup.js +27 -1
- package/esm/FormGroup/index.d.ts +1 -0
- package/esm/FormGroup/index.js +1 -0
- package/esm/FormHelpText/FormHelpText.d.ts +2 -1
- package/esm/FormHelpText/FormHelpText.js +17 -9
- package/esm/Input/Input.js +4 -5
- package/esm/Placeholder/PlaceholderGraph.d.ts +13 -1
- package/esm/Placeholder/PlaceholderGrid.d.ts +27 -1
- package/esm/Placeholder/PlaceholderGrid.js +10 -13
- package/esm/Placeholder/PlaceholderParagraph.d.ts +24 -1
- package/esm/Placeholder/PlaceholderParagraph.js +12 -8
- package/esm/utils/dateUtils.d.ts +72 -10
- package/esm/utils/dateUtils.js +86 -28
- package/package.json +2 -2
- package/cjs/FormControl/useRegisterModel.d.ts +0 -4
- package/cjs/FormControl/useRegisterModel.js +0 -18
- package/esm/FormControl/useRegisterModel.d.ts +0 -4
- package/esm/FormControl/useRegisterModel.js +0 -13
- /package/cjs/Form/{useSchemaModel.d.ts → hooks/useSchemaModel.d.ts} +0 -0
- /package/esm/Form/{useSchemaModel.d.ts → hooks/useSchemaModel.d.ts} +0 -0
|
@@ -1,31 +1,35 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
3
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
4
|
-
import React
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import { useClassNames } from '../utils';
|
|
7
|
-
import {
|
|
7
|
+
import { useFormGroup } from '../FormGroup';
|
|
8
8
|
/**
|
|
9
9
|
* The `<Form.ControlLabel>` component renders a label with required indicator, for form controls.
|
|
10
10
|
* @see https://rsuitejs.com/components/form/
|
|
11
11
|
*/
|
|
12
12
|
var FormControlLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
13
|
+
var _useFormGroup = useFormGroup(),
|
|
14
|
+
labelId = _useFormGroup.labelId,
|
|
15
|
+
controlId = _useFormGroup.controlId;
|
|
13
16
|
var _props$as = props.as,
|
|
14
17
|
Component = _props$as === void 0 ? 'label' : _props$as,
|
|
15
18
|
_props$classPrefix = props.classPrefix,
|
|
16
19
|
classPrefix = _props$classPrefix === void 0 ? 'form-control-label' : _props$classPrefix,
|
|
17
|
-
htmlFor = props.htmlFor,
|
|
20
|
+
_props$htmlFor = props.htmlFor,
|
|
21
|
+
htmlFor = _props$htmlFor === void 0 ? controlId : _props$htmlFor,
|
|
18
22
|
className = props.className,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
_props$id = props.id,
|
|
24
|
+
id = _props$id === void 0 ? labelId : _props$id,
|
|
25
|
+
rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "htmlFor", "className", "id"]);
|
|
22
26
|
var _useClassNames = useClassNames(classPrefix),
|
|
23
27
|
withClassPrefix = _useClassNames.withClassPrefix,
|
|
24
28
|
merge = _useClassNames.merge;
|
|
25
29
|
var classes = merge(className, withClassPrefix());
|
|
26
30
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
27
|
-
id:
|
|
28
|
-
htmlFor: htmlFor
|
|
31
|
+
id: id,
|
|
32
|
+
htmlFor: htmlFor
|
|
29
33
|
}, rest, {
|
|
30
34
|
ref: ref,
|
|
31
35
|
className: classes
|
|
@@ -29,10 +29,7 @@ var FormErrorMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
29
29
|
merge = _useClassNames.merge;
|
|
30
30
|
var classes = withClassPrefix('show');
|
|
31
31
|
var wrapperClasses = merge(className, prefix('wrapper', (_prefix = {}, _prefix["placement-" + kebabCase(placementPolyfill(placement))] = placement, _prefix)));
|
|
32
|
-
|
|
33
|
-
return null;
|
|
34
|
-
}
|
|
35
|
-
return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
32
|
+
return show ? /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
36
33
|
ref: ref,
|
|
37
34
|
className: wrapperClasses
|
|
38
35
|
}), /*#__PURE__*/React.createElement("span", {
|
|
@@ -41,7 +38,7 @@ var FormErrorMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
41
38
|
className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["arrow"])))
|
|
42
39
|
}), /*#__PURE__*/React.createElement("span", {
|
|
43
40
|
className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["inner"])))
|
|
44
|
-
}, children)));
|
|
41
|
+
}, children))) : null;
|
|
45
42
|
});
|
|
46
43
|
FormErrorMessage.displayName = 'FormErrorMessage';
|
|
47
44
|
FormErrorMessage.propTypes = {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
|
|
3
2
|
export interface FormGroupProps extends WithAsProps {
|
|
4
3
|
/**
|
|
@@ -7,9 +6,24 @@ export interface FormGroupProps extends WithAsProps {
|
|
|
7
6
|
*/
|
|
8
7
|
controlId?: string;
|
|
9
8
|
}
|
|
10
|
-
export declare const
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
export declare const useFormGroup: (controlId?: string) => {
|
|
10
|
+
/**
|
|
11
|
+
* The `id` of the `<Form.Control>` component.
|
|
12
|
+
*/
|
|
13
|
+
controlId: string;
|
|
14
|
+
/**
|
|
15
|
+
* The `id` of the `<Form.HelpText>` component.
|
|
16
|
+
*/
|
|
17
|
+
helpTextId: string;
|
|
18
|
+
/**
|
|
19
|
+
* The `id` of the `<Form.ControlLabel>` component.
|
|
20
|
+
*/
|
|
21
|
+
labelId: string;
|
|
22
|
+
/**
|
|
23
|
+
* The `id` of the `<Form.ErrorMessage>` component.
|
|
24
|
+
*/
|
|
25
|
+
errorMessageId: string;
|
|
26
|
+
};
|
|
13
27
|
/**
|
|
14
28
|
* The `<Form.Group>` component is the easiest way to add some structure to forms.
|
|
15
29
|
* @see https://rsuitejs.com/components/form/
|
|
@@ -4,7 +4,33 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
|
|
|
4
4
|
import React, { useMemo } from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import { useClassNames, useUniqueId } from '../utils';
|
|
7
|
-
|
|
7
|
+
var FormGroupContext = /*#__PURE__*/React.createContext({});
|
|
8
|
+
export var useFormGroup = function useFormGroup(controlId) {
|
|
9
|
+
var context = React.useContext(FormGroupContext);
|
|
10
|
+
var fallbackId = useUniqueId('rs-');
|
|
11
|
+
var id = controlId || context.controlId || fallbackId;
|
|
12
|
+
var helpTextId = id + "-help-text";
|
|
13
|
+
var labelId = id + "-label";
|
|
14
|
+
var errorMessageId = id + "-error-message";
|
|
15
|
+
return {
|
|
16
|
+
/**
|
|
17
|
+
* The `id` of the `<Form.Control>` component.
|
|
18
|
+
*/
|
|
19
|
+
controlId: id,
|
|
20
|
+
/**
|
|
21
|
+
* The `id` of the `<Form.HelpText>` component.
|
|
22
|
+
*/
|
|
23
|
+
helpTextId: helpTextId,
|
|
24
|
+
/**
|
|
25
|
+
* The `id` of the `<Form.ControlLabel>` component.
|
|
26
|
+
*/
|
|
27
|
+
labelId: labelId,
|
|
28
|
+
/**
|
|
29
|
+
* The `id` of the `<Form.ErrorMessage>` component.
|
|
30
|
+
*/
|
|
31
|
+
errorMessageId: errorMessageId
|
|
32
|
+
};
|
|
33
|
+
};
|
|
8
34
|
|
|
9
35
|
/**
|
|
10
36
|
* The `<Form.Group>` component is the easiest way to add some structure to forms.
|
package/esm/FormGroup/index.d.ts
CHANGED
package/esm/FormGroup/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
|
|
2
|
-
export interface FormHelpTextProps extends WithAsProps {
|
|
3
|
+
export interface FormHelpTextProps extends WithAsProps, React.HTMLAttributes<HTMLSpanElement> {
|
|
3
4
|
/** Whether to show through the Tooltip component */
|
|
4
5
|
tooltip?: boolean;
|
|
5
6
|
}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
3
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
4
|
-
import React
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import Tooltip from '../Tooltip';
|
|
7
7
|
import Whisper from '../Whisper';
|
|
8
8
|
import { useClassNames } from '../utils';
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
9
|
+
import { useFormGroup } from '../FormGroup';
|
|
10
|
+
import HelpIcon from '@rsuite/icons/legacy/HelpO';
|
|
11
11
|
/**
|
|
12
12
|
* The `<Form.HelpText>` component is used to display help information in the form.
|
|
13
13
|
* @see https://rsuitejs.com/components/form/
|
|
14
14
|
*/
|
|
15
15
|
var FormHelpText = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
16
|
+
var _useFormGroup = useFormGroup(),
|
|
17
|
+
helpTextId = _useFormGroup.helpTextId;
|
|
16
18
|
var _props$as = props.as,
|
|
17
19
|
Component = _props$as === void 0 ? 'span' : _props$as,
|
|
18
20
|
_props$classPrefix = props.classPrefix,
|
|
@@ -20,9 +22,9 @@ var FormHelpText = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
20
22
|
className = props.className,
|
|
21
23
|
tooltip = props.tooltip,
|
|
22
24
|
children = props.children,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
_props$id = props.id,
|
|
26
|
+
id = _props$id === void 0 ? helpTextId : _props$id,
|
|
27
|
+
rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "tooltip", "children", "id"]);
|
|
26
28
|
var _useClassNames = useClassNames(classPrefix),
|
|
27
29
|
withClassPrefix = _useClassNames.withClassPrefix,
|
|
28
30
|
merge = _useClassNames.merge;
|
|
@@ -33,13 +35,19 @@ var FormHelpText = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
33
35
|
return /*#__PURE__*/React.createElement(Whisper, {
|
|
34
36
|
ref: ref,
|
|
35
37
|
placement: "topEnd",
|
|
36
|
-
speaker: /*#__PURE__*/React.createElement(Tooltip,
|
|
38
|
+
speaker: /*#__PURE__*/React.createElement(Tooltip, _extends({
|
|
39
|
+
id: id
|
|
40
|
+
}, rest), children)
|
|
37
41
|
}, /*#__PURE__*/React.createElement(Component, {
|
|
42
|
+
role: "img",
|
|
43
|
+
"aria-label": "help",
|
|
38
44
|
className: classes
|
|
39
|
-
}, /*#__PURE__*/React.createElement(
|
|
45
|
+
}, /*#__PURE__*/React.createElement(HelpIcon, {
|
|
46
|
+
"aria-hidden": true
|
|
47
|
+
})));
|
|
40
48
|
}
|
|
41
49
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
42
|
-
id:
|
|
50
|
+
id: id
|
|
43
51
|
}, rest, {
|
|
44
52
|
ref: ref,
|
|
45
53
|
className: classes
|
package/esm/Input/Input.js
CHANGED
|
@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
3
3
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
4
4
|
import React, { useContext } from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
|
-
import {
|
|
6
|
+
import { useFormGroup } from '../FormGroup';
|
|
7
7
|
import { InputGroupContext } from '../InputGroup/InputGroup';
|
|
8
8
|
import Plaintext from '../internals/Plaintext';
|
|
9
9
|
import { createChainedFunction, mergeRefs, useClassNames, KEY_VALUES } from '../utils';
|
|
@@ -54,9 +54,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
54
54
|
plaintext: plaintext
|
|
55
55
|
}));
|
|
56
56
|
var inputGroupContext = useContext(InputGroupContext);
|
|
57
|
-
var
|
|
58
|
-
|
|
59
|
-
// Make the Input component display in plain text,
|
|
57
|
+
var _useFormGroup = useFormGroup(),
|
|
58
|
+
controlId = _useFormGroup.controlId; // Make the Input component display in plain text,
|
|
60
59
|
// and display default characters when there is no value.
|
|
61
60
|
if (plaintext) {
|
|
62
61
|
return /*#__PURE__*/React.createElement(Plaintext, {
|
|
@@ -77,7 +76,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
77
76
|
ref: mergeRefs(ref, inputRef),
|
|
78
77
|
className: classes,
|
|
79
78
|
type: type,
|
|
80
|
-
id: id ||
|
|
79
|
+
id: id || controlId,
|
|
81
80
|
value: value,
|
|
82
81
|
defaultValue: defaultValue,
|
|
83
82
|
disabled: disabled,
|
|
@@ -1,8 +1,20 @@
|
|
|
1
1
|
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
|
|
2
2
|
export interface PlaceholderGraphProps extends WithAsProps {
|
|
3
|
+
/**
|
|
4
|
+
* The height of the graph.
|
|
5
|
+
*
|
|
6
|
+
* @default 200
|
|
7
|
+
*/
|
|
3
8
|
height?: number;
|
|
9
|
+
/**
|
|
10
|
+
* The width of the graph.
|
|
11
|
+
*
|
|
12
|
+
* @default 100%
|
|
13
|
+
*/
|
|
4
14
|
width?: number;
|
|
5
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* Placeholder status, display the loading state.
|
|
17
|
+
*/
|
|
6
18
|
active?: boolean;
|
|
7
19
|
}
|
|
8
20
|
/**
|
|
@@ -1,10 +1,36 @@
|
|
|
1
1
|
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
|
|
2
2
|
export interface PlaceholderGridProps extends WithAsProps {
|
|
3
|
+
/**
|
|
4
|
+
* The number of rows.
|
|
5
|
+
*
|
|
6
|
+
* @default 5
|
|
7
|
+
*/
|
|
3
8
|
rows?: number;
|
|
9
|
+
/**
|
|
10
|
+
* The height of the row.
|
|
11
|
+
*
|
|
12
|
+
* @default 10
|
|
13
|
+
*/
|
|
4
14
|
rowHeight?: number;
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated Use `rowSpacing` instead.
|
|
17
|
+
*/
|
|
5
18
|
rowMargin?: number;
|
|
19
|
+
/**
|
|
20
|
+
* The spacing between rows.
|
|
21
|
+
*
|
|
22
|
+
* @default 20
|
|
23
|
+
* @version 5.59.1
|
|
24
|
+
*/
|
|
25
|
+
rowSpacing?: number;
|
|
26
|
+
/**
|
|
27
|
+
* The number of columns.
|
|
28
|
+
* @default 5
|
|
29
|
+
*/
|
|
6
30
|
columns?: number;
|
|
7
|
-
/**
|
|
31
|
+
/**
|
|
32
|
+
* Placeholder status, display the loading state.
|
|
33
|
+
*/
|
|
8
34
|
active?: boolean;
|
|
9
35
|
}
|
|
10
36
|
/**
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
|
|
3
4
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
|
+
var _templateObject;
|
|
4
6
|
import React from 'react';
|
|
5
7
|
import PropTypes from 'prop-types';
|
|
6
8
|
import classNames from 'classnames';
|
|
@@ -23,8 +25,10 @@ var PlaceholderGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
23
25
|
rowHeight = _props$rowHeight === void 0 ? 10 : _props$rowHeight,
|
|
24
26
|
_props$rowMargin = props.rowMargin,
|
|
25
27
|
rowMargin = _props$rowMargin === void 0 ? 20 : _props$rowMargin,
|
|
28
|
+
_props$rowSpacing = props.rowSpacing,
|
|
29
|
+
rowSpacing = _props$rowSpacing === void 0 ? rowMargin : _props$rowSpacing,
|
|
26
30
|
active = props.active,
|
|
27
|
-
rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "rows", "columns", "rowHeight", "rowMargin", "active"]);
|
|
31
|
+
rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "rows", "columns", "rowHeight", "rowMargin", "rowSpacing", "active"]);
|
|
28
32
|
var _useClassNames = useClassNames(classPrefix),
|
|
29
33
|
merge = _useClassNames.merge,
|
|
30
34
|
prefix = _useClassNames.prefix,
|
|
@@ -33,23 +37,16 @@ var PlaceholderGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
33
37
|
active: active
|
|
34
38
|
}));
|
|
35
39
|
var colItems = [];
|
|
36
|
-
var firstRowItemWidth = Math.random() * 30 + 30;
|
|
37
|
-
var itemWidth = firstRowItemWidth / 2;
|
|
38
40
|
for (var i = 0; i < columns; i++) {
|
|
39
41
|
var rowItems = [];
|
|
40
42
|
for (var j = 0; j < rows; j++) {
|
|
41
|
-
|
|
42
|
-
if (i > 0) {
|
|
43
|
-
// when other columns
|
|
44
|
-
widthPercent = j > 0 ? itemWidth : firstRowItemWidth;
|
|
45
|
-
}
|
|
46
|
-
rowItems.push( /*#__PURE__*/React.createElement("p", {
|
|
43
|
+
rowItems.push( /*#__PURE__*/React.createElement("div", {
|
|
47
44
|
key: j,
|
|
48
45
|
style: {
|
|
49
|
-
width: widthPercent + "%",
|
|
50
46
|
height: rowHeight,
|
|
51
|
-
marginTop: j > 0 ?
|
|
52
|
-
}
|
|
47
|
+
marginTop: j > 0 ? rowSpacing : undefined
|
|
48
|
+
},
|
|
49
|
+
className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["row"])))
|
|
53
50
|
}));
|
|
54
51
|
}
|
|
55
52
|
colItems.push( /*#__PURE__*/React.createElement("div", {
|
|
@@ -69,7 +66,7 @@ PlaceholderGrid.propTypes = {
|
|
|
69
66
|
rows: PropTypes.number,
|
|
70
67
|
columns: PropTypes.number,
|
|
71
68
|
rowHeight: PropTypes.number,
|
|
72
|
-
|
|
69
|
+
rowSpacing: PropTypes.number,
|
|
73
70
|
active: PropTypes.bool
|
|
74
71
|
};
|
|
75
72
|
export default PlaceholderGrid;
|
|
@@ -1,10 +1,33 @@
|
|
|
1
1
|
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
|
|
2
2
|
export interface PlaceholderParagraphProps extends WithAsProps {
|
|
3
|
+
/**
|
|
4
|
+
* The number of rows.
|
|
5
|
+
* @default 2
|
|
6
|
+
*/
|
|
3
7
|
rows?: number;
|
|
8
|
+
/**
|
|
9
|
+
* The height of the row.
|
|
10
|
+
* @default 10
|
|
11
|
+
*/
|
|
4
12
|
rowHeight?: number;
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `rowSpacing` instead.
|
|
15
|
+
*/
|
|
5
16
|
rowMargin?: number;
|
|
17
|
+
/**
|
|
18
|
+
* The spacing between rows.
|
|
19
|
+
* @default 20
|
|
20
|
+
* @version 5.59.1
|
|
21
|
+
*/
|
|
22
|
+
rowSpacing?: number;
|
|
23
|
+
/**
|
|
24
|
+
* The shape of the graph.
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
6
27
|
graph?: boolean | 'circle' | 'square' | 'image';
|
|
7
|
-
/**
|
|
28
|
+
/**
|
|
29
|
+
* Placeholder status, display the loading state.
|
|
30
|
+
*/
|
|
8
31
|
active?: boolean;
|
|
9
32
|
}
|
|
10
33
|
/**
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
|
|
3
4
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
|
+
var _templateObject;
|
|
4
6
|
import React, { useMemo } from 'react';
|
|
5
7
|
import PropTypes from 'prop-types';
|
|
6
8
|
import { useClassNames } from '../utils';
|
|
@@ -19,11 +21,13 @@ var PlaceholderParagraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
19
21
|
rowHeight = _props$rowHeight === void 0 ? 10 : _props$rowHeight,
|
|
20
22
|
_props$rowMargin = props.rowMargin,
|
|
21
23
|
rowMargin = _props$rowMargin === void 0 ? 20 : _props$rowMargin,
|
|
24
|
+
_props$rowSpacing = props.rowSpacing,
|
|
25
|
+
rowSpacing = _props$rowSpacing === void 0 ? rowMargin : _props$rowSpacing,
|
|
22
26
|
graph = props.graph,
|
|
23
27
|
active = props.active,
|
|
24
28
|
_props$classPrefix = props.classPrefix,
|
|
25
29
|
classPrefix = _props$classPrefix === void 0 ? 'placeholder' : _props$classPrefix,
|
|
26
|
-
rest = _objectWithoutPropertiesLoose(props, ["as", "className", "rows", "rowHeight", "rowMargin", "graph", "active", "classPrefix"]);
|
|
30
|
+
rest = _objectWithoutPropertiesLoose(props, ["as", "className", "rows", "rowHeight", "rowMargin", "rowSpacing", "graph", "active", "classPrefix"]);
|
|
27
31
|
var _useClassNames = useClassNames(classPrefix),
|
|
28
32
|
merge = _useClassNames.merge,
|
|
29
33
|
prefix = _useClassNames.prefix,
|
|
@@ -33,17 +37,17 @@ var PlaceholderParagraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
33
37
|
var rowArr = [];
|
|
34
38
|
for (var i = 0; i < rows; i++) {
|
|
35
39
|
var styles = {
|
|
36
|
-
width: Math.random() * 75 + 25 + "%",
|
|
37
40
|
height: rowHeight,
|
|
38
|
-
marginTop: i > 0 ?
|
|
41
|
+
marginTop: i > 0 ? rowSpacing : Number(rowSpacing) / 2
|
|
39
42
|
};
|
|
40
|
-
rowArr.push( /*#__PURE__*/React.createElement("
|
|
43
|
+
rowArr.push( /*#__PURE__*/React.createElement("div", {
|
|
41
44
|
key: i,
|
|
42
|
-
style: styles
|
|
45
|
+
style: styles,
|
|
46
|
+
className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["row"])))
|
|
43
47
|
}));
|
|
44
48
|
}
|
|
45
49
|
return rowArr;
|
|
46
|
-
}, [rowHeight,
|
|
50
|
+
}, [prefix, rowHeight, rowSpacing, rows]);
|
|
47
51
|
var classes = merge(className, withClassPrefix('paragraph', {
|
|
48
52
|
active: active
|
|
49
53
|
}));
|
|
@@ -56,7 +60,7 @@ var PlaceholderParagraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
56
60
|
}, /*#__PURE__*/React.createElement("span", {
|
|
57
61
|
className: prefix('paragraph-graph-inner')
|
|
58
62
|
})), /*#__PURE__*/React.createElement("div", {
|
|
59
|
-
className: prefix('paragraph-
|
|
63
|
+
className: prefix('paragraph-group')
|
|
60
64
|
}, rowElements));
|
|
61
65
|
});
|
|
62
66
|
PlaceholderParagraph.displayName = 'PlaceholderParagraph';
|
|
@@ -65,7 +69,7 @@ PlaceholderParagraph.propTypes = {
|
|
|
65
69
|
classPrefix: PropTypes.string,
|
|
66
70
|
rows: PropTypes.number,
|
|
67
71
|
rowHeight: PropTypes.number,
|
|
68
|
-
|
|
72
|
+
rowSpacing: PropTypes.number,
|
|
69
73
|
graph: PropTypes.oneOfType([PropTypes.bool, oneOf(['circle', 'square', 'image'])]),
|
|
70
74
|
active: PropTypes.bool
|
|
71
75
|
};
|
package/esm/utils/dateUtils.d.ts
CHANGED
|
@@ -43,28 +43,84 @@ export { default as set } from 'date-fns/set';
|
|
|
43
43
|
export { default as differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
|
|
44
44
|
export { default as isLastDayOfMonth } from 'date-fns/isLastDayOfMonth';
|
|
45
45
|
export { default as lastDayOfMonth } from 'date-fns/lastDayOfMonth';
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
declare enum TimeProp {
|
|
47
|
+
DisabledHours = "disabledHours",
|
|
48
|
+
DisabledMinutes = "disabledMinutes",
|
|
49
|
+
DisabledSeconds = "disabledSeconds",
|
|
50
|
+
ShouldDisableHour = "shouldDisableHour",
|
|
51
|
+
ShouldDisableMinute = "shouldDisableMinute",
|
|
52
|
+
ShouldDisableSecond = "shouldDisableSecond",
|
|
53
|
+
HideHours = "hideHours",
|
|
54
|
+
HideMinutes = "hideMinutes",
|
|
55
|
+
HideSeconds = "hideSeconds"
|
|
56
|
+
}
|
|
57
|
+
export declare type CalendarOnlyPropsType = TimeProp;
|
|
58
|
+
export declare const calendarOnlyProps: readonly [TimeProp.DisabledHours, TimeProp.DisabledMinutes, TimeProp.DisabledSeconds, TimeProp.HideHours, TimeProp.HideMinutes, TimeProp.HideSeconds];
|
|
59
|
+
interface CalendarProps {
|
|
60
|
+
[TimeProp.DisabledHours]?: (hours: number, date: Date) => boolean;
|
|
61
|
+
[TimeProp.DisabledMinutes]?: (minutes: number, date: Date) => boolean;
|
|
62
|
+
[TimeProp.DisabledSeconds]?: (seconds: number, date: Date) => boolean;
|
|
63
|
+
[TimeProp.HideHours]?: (hours: number, date: Date) => boolean;
|
|
64
|
+
[TimeProp.HideMinutes]?: (minutes: number, date: Date) => boolean;
|
|
65
|
+
[TimeProp.HideSeconds]?: (seconds: number, date: Date) => boolean;
|
|
66
|
+
}
|
|
48
67
|
/**
|
|
49
68
|
* Verify that the time is valid.
|
|
50
69
|
*
|
|
51
|
-
* @param props
|
|
52
|
-
* @param date
|
|
70
|
+
* @param props - The calendar props.
|
|
71
|
+
* @param date - The date to check.
|
|
72
|
+
* @returns Whether the time is disabled.
|
|
73
|
+
*/
|
|
74
|
+
export declare function disableTime(props: CalendarProps, date: Date): boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Omit the calendar-only props from an object.
|
|
77
|
+
*
|
|
78
|
+
* @param props - The object to omit props from.
|
|
79
|
+
* @returns The object with calendar-only props omitted.
|
|
80
|
+
*/
|
|
81
|
+
export declare const omitHideDisabledProps: <T extends Record<string, any>>(props: T) => Partial<Omit<T, TimeProp>>;
|
|
82
|
+
/**
|
|
83
|
+
* Check if the time should be rendered based on the format.
|
|
84
|
+
*
|
|
85
|
+
* @param format - The format string.
|
|
86
|
+
* @returns Whether the time should be rendered.
|
|
53
87
|
*/
|
|
54
|
-
export declare function disabledTime(props: any, date: Date): boolean;
|
|
55
|
-
export declare const omitHideDisabledProps: <T extends Record<string, any>>(props: T) => Partial<Omit<T, CalendarOnlyPropsType>>;
|
|
56
88
|
export declare const shouldRenderTime: (format: string) => boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Check if the month should be rendered based on the format.
|
|
91
|
+
*
|
|
92
|
+
* @param format - The format string.
|
|
93
|
+
* @returns Whether the month should be rendered.
|
|
94
|
+
*/
|
|
57
95
|
export declare const shouldRenderMonth: (format: string) => boolean;
|
|
96
|
+
/**
|
|
97
|
+
* Check if the date should be rendered based on the format.
|
|
98
|
+
*
|
|
99
|
+
* @param format - The format string.
|
|
100
|
+
* @returns Whether the date should be rendered.
|
|
101
|
+
*/
|
|
58
102
|
export declare const shouldRenderDate: (format: string) => boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Check if only the time should be rendered based on the format.
|
|
105
|
+
*
|
|
106
|
+
* @param format - The format string.
|
|
107
|
+
* @returns Whether only the time should be rendered.
|
|
108
|
+
*/
|
|
59
109
|
export declare const shouldOnlyRenderTime: (format: string) => boolean;
|
|
60
110
|
/**
|
|
61
|
-
* Get all weeks of
|
|
62
|
-
*
|
|
63
|
-
* @
|
|
111
|
+
* Get all weeks of a month.
|
|
112
|
+
*
|
|
113
|
+
* @param monthDate - The date of the month.
|
|
114
|
+
* @param isoWeek - Whether to use ISO week numbering.
|
|
115
|
+
* @returns An array of weeks in the month.
|
|
64
116
|
*/
|
|
65
117
|
export declare function getMonthView(monthDate: Date, isoWeek: boolean): Date[];
|
|
66
118
|
/**
|
|
67
|
-
* Copy the time
|
|
119
|
+
* Copy the time from one date to another.
|
|
120
|
+
*
|
|
121
|
+
* @param from - The source date.
|
|
122
|
+
* @param to - The target date.
|
|
123
|
+
* @returns The target date with the time copied from the source date.
|
|
68
124
|
*/
|
|
69
125
|
export declare function copyTime({ from, to }: {
|
|
70
126
|
from: Date;
|
|
@@ -72,9 +128,15 @@ export declare function copyTime({ from, to }: {
|
|
|
72
128
|
}): Date;
|
|
73
129
|
/**
|
|
74
130
|
* Swap two dates without swapping the time.
|
|
131
|
+
*
|
|
132
|
+
* @param dateRange - The date range to reverse.
|
|
133
|
+
* @returns The reversed date range.
|
|
75
134
|
*/
|
|
76
135
|
export declare function reverseDateRangeOmitTime(dateRange: [Date, Date]): [Date, Date];
|
|
77
136
|
/**
|
|
78
137
|
* Get the time with AM and PM reversed.
|
|
138
|
+
*
|
|
139
|
+
* @param date - The date to reverse the time meridian.
|
|
140
|
+
* @returns The date with the time meridian reversed.
|
|
79
141
|
*/
|
|
80
142
|
export declare const getReversedTimeMeridian: (date: Date) => Date;
|