@os-design/core 1.0.191 → 1.0.192
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/FormItem/index.js +18 -45
- package/dist/cjs/FormItem/index.js.map +1 -1
- package/dist/esm/FormItem/index.js +12 -40
- package/dist/esm/FormItem/index.js.map +1 -1
- package/dist/types/FormItem/index.d.ts +0 -1
- package/dist/types/FormItem/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/dist/cjs/FormItem/utils/firstChildHasType.js +0 -15
- package/dist/cjs/FormItem/utils/firstChildHasType.js.map +0 -1
- package/dist/esm/FormItem/utils/firstChildHasType.js +0 -7
- package/dist/esm/FormItem/utils/firstChildHasType.js.map +0 -1
- package/dist/types/FormItem/utils/firstChildHasType.d.ts +0 -4
- package/dist/types/FormItem/utils/firstChildHasType.d.ts.map +0 -1
|
@@ -10,18 +10,8 @@ var _styles = require("@os-design/styles");
|
|
|
10
10
|
var _theming = require("@os-design/theming");
|
|
11
11
|
var _utils = require("@os-design/utils");
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
|
|
14
|
-
var _CheckboxSkeleton = _interopRequireDefault(require("../CheckboxSkeleton"));
|
|
15
13
|
var _FormConfigContext = _interopRequireDefault(require("../Form/FormConfigContext"));
|
|
16
|
-
var
|
|
17
|
-
var _RadioGroup = _interopRequireDefault(require("../RadioGroup"));
|
|
18
|
-
var _RadioGroupSkeleton = _interopRequireDefault(require("../RadioGroupSkeleton"));
|
|
19
|
-
var _Switch = _interopRequireDefault(require("../Switch"));
|
|
20
|
-
var _SwitchSkeleton = _interopRequireDefault(require("../SwitchSkeleton"));
|
|
21
|
-
var _TextArea = _interopRequireDefault(require("../TextArea"));
|
|
22
|
-
var _TextAreaSkeleton = _interopRequireDefault(require("../TextAreaSkeleton"));
|
|
23
|
-
var _firstChildHasType = _interopRequireDefault(require("./utils/firstChildHasType"));
|
|
24
|
-
var _excluded = ["label", "help", "error", "optional", "loading", "id", "children"];
|
|
14
|
+
var _excluded = ["label", "help", "error", "optional", "id", "children"];
|
|
25
15
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
26
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
17
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -57,8 +47,6 @@ var FormItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
57
47
|
error = _ref.error,
|
|
58
48
|
_ref$optional = _ref.optional,
|
|
59
49
|
optional = _ref$optional === void 0 ? false : _ref$optional,
|
|
60
|
-
_ref$loading = _ref.loading,
|
|
61
|
-
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
62
50
|
id = _ref.id,
|
|
63
51
|
children = _ref.children,
|
|
64
52
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -73,37 +61,12 @@ var FormItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
73
61
|
var helpId = (0, _react.useMemo)(function () {
|
|
74
62
|
return "help-".concat(containerId);
|
|
75
63
|
}, [containerId]);
|
|
76
|
-
var
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
'aria-invalid': !!error,
|
|
83
|
-
'aria-describedby': help ? helpId : undefined
|
|
84
|
-
}) : children;
|
|
85
|
-
if (!error) return c;
|
|
86
|
-
return /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
|
|
87
|
-
overrides: function overrides(theme) {
|
|
88
|
-
return {
|
|
89
|
-
inputColorBorder: theme.formItemColorError
|
|
90
|
-
};
|
|
91
|
-
}
|
|
92
|
-
}, c);
|
|
93
|
-
}, [children, error, fieldId, help, helpId]);
|
|
94
|
-
var firstTypeIs = (0, _react.useCallback)(function (component) {
|
|
95
|
-
return (0, _firstChildHasType["default"])(children, component);
|
|
96
|
-
}, [children]);
|
|
97
|
-
var skeleton = (0, _react.useMemo)(function () {
|
|
98
|
-
if (firstTypeIs(_Checkbox["default"])) {
|
|
99
|
-
var firstChild = _react["default"].Children.toArray(children)[0];
|
|
100
|
-
return /*#__PURE__*/_react["default"].createElement(_CheckboxSkeleton["default"], null, /*#__PURE__*/_react["default"].isValidElement(firstChild) && firstChild.props.children);
|
|
101
|
-
}
|
|
102
|
-
if (firstTypeIs(_RadioGroup["default"])) return /*#__PURE__*/_react["default"].createElement(_RadioGroupSkeleton["default"], null);
|
|
103
|
-
if (firstTypeIs(_Switch["default"])) return /*#__PURE__*/_react["default"].createElement(_SwitchSkeleton["default"], null);
|
|
104
|
-
if (firstTypeIs(_TextArea["default"])) return /*#__PURE__*/_react["default"].createElement(_TextAreaSkeleton["default"], null);
|
|
105
|
-
return /*#__PURE__*/_react["default"].createElement(_InputSkeleton["default"], null);
|
|
106
|
-
}, [children, firstTypeIs]);
|
|
64
|
+
var ariaInvalid = (0, _react.useMemo)(function () {
|
|
65
|
+
return !!error;
|
|
66
|
+
}, [error]);
|
|
67
|
+
var ariaDescribedBy = (0, _react.useMemo)(function () {
|
|
68
|
+
return help ? helpId : undefined;
|
|
69
|
+
}, [help, helpId]);
|
|
107
70
|
return /*#__PURE__*/_react["default"].createElement(Container, _extends({
|
|
108
71
|
role: "group",
|
|
109
72
|
id: id
|
|
@@ -111,7 +74,17 @@ var FormItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
111
74
|
ref: ref
|
|
112
75
|
}), label && /*#__PURE__*/_react["default"].createElement(Label, {
|
|
113
76
|
htmlFor: fieldId
|
|
114
|
-
}, label, optional && /*#__PURE__*/_react["default"].createElement(Optional, null, "(", optionalText, ")")),
|
|
77
|
+
}, label, optional && /*#__PURE__*/_react["default"].createElement(Optional, null, "(", optionalText, ")")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
78
|
+
id: fieldId,
|
|
79
|
+
"aria-invalid": ariaInvalid,
|
|
80
|
+
"aria-describedby": ariaDescribedBy
|
|
81
|
+
}, /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
|
|
82
|
+
overrides: function overrides(theme) {
|
|
83
|
+
return {
|
|
84
|
+
inputColorBorder: error ? theme.formItemColorError : theme.inputColorBorder
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
}, children)), error ? /*#__PURE__*/_react["default"].createElement(Error, {
|
|
115
88
|
"aria-live": "polite",
|
|
116
89
|
id: helpId
|
|
117
90
|
}, error) : help && /*#__PURE__*/_react["default"].createElement(Help, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","Help","div","formItemColorHelp","Error","formItemColorError","FormItem","forwardRef","ref","help","error","optional","
|
|
1
|
+
{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","Help","div","formItemColorHelp","Error","formItemColorError","FormItem","forwardRef","ref","help","error","optional","id","children","rest","useContext","FormConfigContext","optionalText","containerId","useMemo","Math","random","toString","slice","fieldId","helpId","ariaInvalid","ariaDescribedBy","undefined","inputColorBorder","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext, useMemo } from 'react';\nimport FormConfigContext from '../Form/FormConfigContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n /**\n * Label of the field.\n * @default undefined\n */\n label?: string;\n /**\n * The help message located at the bottom of the field.\n * @default undefined\n */\n help?: string;\n /**\n * The error message located at the bottom of the field.\n * If specified, the field has a red border.\n * @default undefined\n */\n error?: string | null;\n /**\n * Whether the field is optional.\n * @default false\n */\n optional?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\nconst Label = styled.label`\n display: inline-flex;\n align-items: center;\n margin-bottom: 0.4em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n color: ${(p) => clr(p.theme.formItemColorOptional)};\n margin-left: 0.3em;\n`;\n\nconst Help = styled.div`\n margin-top: 0.1em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.formItemColorHelp)};\n`;\n\nconst Error = styled(Help)`\n color: ${(p) => clr(p.theme.formItemColorError)};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n ({ label, help, error, optional = false, id, children, ...rest }, ref) => {\n const { optionalText } = useContext(FormConfigContext);\n\n const containerId = useMemo(\n () => id || Math.random().toString(36).slice(2, 11),\n [id]\n );\n const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n const ariaInvalid = useMemo(() => !!error, [error]);\n const ariaDescribedBy = useMemo(\n () => (help ? helpId : undefined),\n [help, helpId]\n );\n\n return (\n <Container role='group' id={id} {...rest} ref={ref}>\n {label && (\n <Label htmlFor={fieldId}>\n {label}\n {optional && <Optional>({optionalText})</Optional>}\n </Label>\n )}\n\n <div\n id={fieldId}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n >\n <ThemeOverrider\n overrides={(theme) => ({\n inputColorBorder: error\n ? theme.formItemColorError\n : theme.inputColorBorder,\n })}\n >\n {children}\n </ThemeOverrider>\n </div>\n\n {error ? (\n <Error aria-live='polite' id={helpId}>\n {error}\n </Error>\n ) : (\n help && <Help id={helpId}>{help}</Help>\n )}\n </Container>\n );\n }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}
|
|
@@ -3,18 +3,8 @@ import styled from '@emotion/styled';
|
|
|
3
3
|
import { sizeStyles } from '@os-design/styles';
|
|
4
4
|
import { clr, ThemeOverrider } from '@os-design/theming';
|
|
5
5
|
import { omitEmotionProps } from '@os-design/utils';
|
|
6
|
-
import React, { forwardRef,
|
|
7
|
-
import Checkbox from '../Checkbox';
|
|
8
|
-
import CheckboxSkeleton from '../CheckboxSkeleton';
|
|
6
|
+
import React, { forwardRef, useContext, useMemo } from 'react';
|
|
9
7
|
import FormConfigContext from '../Form/FormConfigContext';
|
|
10
|
-
import InputSkeleton from '../InputSkeleton';
|
|
11
|
-
import RadioGroup from '../RadioGroup';
|
|
12
|
-
import RadioGroupSkeleton from '../RadioGroupSkeleton';
|
|
13
|
-
import Switch from '../Switch';
|
|
14
|
-
import SwitchSkeleton from '../SwitchSkeleton';
|
|
15
|
-
import TextArea from '../TextArea';
|
|
16
|
-
import TextAreaSkeleton from '../TextAreaSkeleton';
|
|
17
|
-
import firstChildHasType from './utils/firstChildHasType';
|
|
18
8
|
const Container = styled('div', omitEmotionProps('size'))`
|
|
19
9
|
${sizeStyles};
|
|
20
10
|
`;
|
|
@@ -46,7 +36,6 @@ const FormItem = /*#__PURE__*/forwardRef(({
|
|
|
46
36
|
help,
|
|
47
37
|
error,
|
|
48
38
|
optional = false,
|
|
49
|
-
loading = false,
|
|
50
39
|
id,
|
|
51
40
|
children,
|
|
52
41
|
...rest
|
|
@@ -57,33 +46,8 @@ const FormItem = /*#__PURE__*/forwardRef(({
|
|
|
57
46
|
const containerId = useMemo(() => id || Math.random().toString(36).slice(2, 11), [id]);
|
|
58
47
|
const fieldId = useMemo(() => `field-${containerId}`, [containerId]);
|
|
59
48
|
const helpId = useMemo(() => `help-${containerId}`, [containerId]);
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
/*#__PURE__*/
|
|
63
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
64
|
-
React.cloneElement(children, {
|
|
65
|
-
id: fieldId,
|
|
66
|
-
'aria-invalid': !!error,
|
|
67
|
-
'aria-describedby': help ? helpId : undefined
|
|
68
|
-
}) : children;
|
|
69
|
-
if (!error) return c;
|
|
70
|
-
return /*#__PURE__*/React.createElement(ThemeOverrider, {
|
|
71
|
-
overrides: theme => ({
|
|
72
|
-
inputColorBorder: theme.formItemColorError
|
|
73
|
-
})
|
|
74
|
-
}, c);
|
|
75
|
-
}, [children, error, fieldId, help, helpId]);
|
|
76
|
-
const firstTypeIs = useCallback(component => firstChildHasType(children, component), [children]);
|
|
77
|
-
const skeleton = useMemo(() => {
|
|
78
|
-
if (firstTypeIs(Checkbox)) {
|
|
79
|
-
const firstChild = React.Children.toArray(children)[0];
|
|
80
|
-
return /*#__PURE__*/React.createElement(CheckboxSkeleton, null, /*#__PURE__*/React.isValidElement(firstChild) && firstChild.props.children);
|
|
81
|
-
}
|
|
82
|
-
if (firstTypeIs(RadioGroup)) return /*#__PURE__*/React.createElement(RadioGroupSkeleton, null);
|
|
83
|
-
if (firstTypeIs(Switch)) return /*#__PURE__*/React.createElement(SwitchSkeleton, null);
|
|
84
|
-
if (firstTypeIs(TextArea)) return /*#__PURE__*/React.createElement(TextAreaSkeleton, null);
|
|
85
|
-
return /*#__PURE__*/React.createElement(InputSkeleton, null);
|
|
86
|
-
}, [children, firstTypeIs]);
|
|
49
|
+
const ariaInvalid = useMemo(() => !!error, [error]);
|
|
50
|
+
const ariaDescribedBy = useMemo(() => help ? helpId : undefined, [help, helpId]);
|
|
87
51
|
return /*#__PURE__*/React.createElement(Container, _extends({
|
|
88
52
|
role: "group",
|
|
89
53
|
id: id
|
|
@@ -91,7 +55,15 @@ const FormItem = /*#__PURE__*/forwardRef(({
|
|
|
91
55
|
ref: ref
|
|
92
56
|
}), label && /*#__PURE__*/React.createElement(Label, {
|
|
93
57
|
htmlFor: fieldId
|
|
94
|
-
}, label, optional && /*#__PURE__*/React.createElement(Optional, null, "(", optionalText, ")")),
|
|
58
|
+
}, label, optional && /*#__PURE__*/React.createElement(Optional, null, "(", optionalText, ")")), /*#__PURE__*/React.createElement("div", {
|
|
59
|
+
id: fieldId,
|
|
60
|
+
"aria-invalid": ariaInvalid,
|
|
61
|
+
"aria-describedby": ariaDescribedBy
|
|
62
|
+
}, /*#__PURE__*/React.createElement(ThemeOverrider, {
|
|
63
|
+
overrides: theme => ({
|
|
64
|
+
inputColorBorder: error ? theme.formItemColorError : theme.inputColorBorder
|
|
65
|
+
})
|
|
66
|
+
}, children)), error ? /*#__PURE__*/React.createElement(Error, {
|
|
95
67
|
"aria-live": "polite",
|
|
96
68
|
id: helpId
|
|
97
69
|
}, error) : help && /*#__PURE__*/React.createElement(Help, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","ThemeOverrider","omitEmotionProps","React","forwardRef","
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","ThemeOverrider","omitEmotionProps","React","forwardRef","useContext","useMemo","FormConfigContext","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","Help","div","formItemColorHelp","Error","formItemColorError","FormItem","help","error","optional","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","ariaInvalid","ariaDescribedBy","undefined","inputColorBorder","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext, useMemo } from 'react';\nimport FormConfigContext from '../Form/FormConfigContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n /**\n * Label of the field.\n * @default undefined\n */\n label?: string;\n /**\n * The help message located at the bottom of the field.\n * @default undefined\n */\n help?: string;\n /**\n * The error message located at the bottom of the field.\n * If specified, the field has a red border.\n * @default undefined\n */\n error?: string | null;\n /**\n * Whether the field is optional.\n * @default false\n */\n optional?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\nconst Label = styled.label`\n display: inline-flex;\n align-items: center;\n margin-bottom: 0.4em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n color: ${(p) => clr(p.theme.formItemColorOptional)};\n margin-left: 0.3em;\n`;\n\nconst Help = styled.div`\n margin-top: 0.1em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.formItemColorHelp)};\n`;\n\nconst Error = styled(Help)`\n color: ${(p) => clr(p.theme.formItemColorError)};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n ({ label, help, error, optional = false, id, children, ...rest }, ref) => {\n const { optionalText } = useContext(FormConfigContext);\n\n const containerId = useMemo(\n () => id || Math.random().toString(36).slice(2, 11),\n [id]\n );\n const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n const ariaInvalid = useMemo(() => !!error, [error]);\n const ariaDescribedBy = useMemo(\n () => (help ? helpId : undefined),\n [help, helpId]\n );\n\n return (\n <Container role='group' id={id} {...rest} ref={ref}>\n {label && (\n <Label htmlFor={fieldId}>\n {label}\n {optional && <Optional>({optionalText})</Optional>}\n </Label>\n )}\n\n <div\n id={fieldId}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n >\n <ThemeOverrider\n overrides={(theme) => ({\n inputColorBorder: error\n ? theme.formItemColorError\n : theme.inputColorBorder,\n })}\n >\n {children}\n </ThemeOverrider>\n </div>\n\n {error ? (\n <Error aria-live='polite' id={helpId}>\n {error}\n </Error>\n ) : (\n help && <Help id={helpId}>{help}</Help>\n )}\n </Container>\n );\n }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}
|
|
@@ -6,7 +6,6 @@ export interface FormItemProps extends JsxDivProps, WithSize {
|
|
|
6
6
|
help?: string;
|
|
7
7
|
error?: string | null;
|
|
8
8
|
optional?: boolean;
|
|
9
|
-
loading?: boolean;
|
|
10
9
|
}
|
|
11
10
|
declare const FormItem: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
11
|
export default FormItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,QAAQ;IAK1D,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,IAAI,CAAC,EAAE,MAAM,CAAC;IAMd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAKtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgCD,QAAA,MAAM,QAAQ,sFAmDb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.192",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react": ">=18",
|
|
59
59
|
"react-dom": ">=18"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "c7fd34a62b42e3f7a9b3f9c7d76dfd05d1c5a416"
|
|
62
62
|
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
|
-
var firstChildHasType = function firstChildHasType(children, component) {
|
|
10
|
-
var firstChild = _react["default"].Children.toArray(children)[0];
|
|
11
|
-
return /*#__PURE__*/_react["default"].isValidElement(firstChild) && firstChild.type === component;
|
|
12
|
-
};
|
|
13
|
-
var _default = firstChildHasType;
|
|
14
|
-
exports["default"] = _default;
|
|
15
|
-
//# sourceMappingURL=firstChildHasType.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"firstChildHasType.js","names":["firstChildHasType","children","component","firstChild","React","Children","toArray","isValidElement","type"],"sources":["../../../../src/FormItem/utils/firstChildHasType.ts"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nconst firstChildHasType = (\n children: ReactNode | ReactNode[],\n component: React.FC\n): boolean => {\n const firstChild = React.Children.toArray(children)[0];\n return React.isValidElement(firstChild) && firstChild.type === component;\n};\n\nexport default firstChildHasType;\n"],"mappings":";;;;;;AAAA;AAAyC;AAEzC,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,CACrBC,QAAiC,EACjCC,SAAmB,EACP;EACZ,IAAMC,UAAU,GAAGC,iBAAK,CAACC,QAAQ,CAACC,OAAO,CAACL,QAAQ,CAAC,CAAC,CAAC,CAAC;EACtD,OAAO,aAAAG,iBAAK,CAACG,cAAc,CAACJ,UAAU,CAAC,IAAIA,UAAU,CAACK,IAAI,KAAKN,SAAS;AAC1E,CAAC;AAAC,eAEaF,iBAAiB;AAAA"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
const firstChildHasType = (children, component) => {
|
|
3
|
-
const firstChild = React.Children.toArray(children)[0];
|
|
4
|
-
return /*#__PURE__*/React.isValidElement(firstChild) && firstChild.type === component;
|
|
5
|
-
};
|
|
6
|
-
export default firstChildHasType;
|
|
7
|
-
//# sourceMappingURL=firstChildHasType.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"firstChildHasType.js","names":["React","firstChildHasType","children","component","firstChild","Children","toArray","isValidElement","type"],"sources":["../../../../src/FormItem/utils/firstChildHasType.ts"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nconst firstChildHasType = (\n children: ReactNode | ReactNode[],\n component: React.FC\n): boolean => {\n const firstChild = React.Children.toArray(children)[0];\n return React.isValidElement(firstChild) && firstChild.type === component;\n};\n\nexport default firstChildHasType;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,MAAMC,iBAAiB,GAAG,CACxBC,QAAiC,EACjCC,SAAmB,KACP;EACZ,MAAMC,UAAU,GAAGJ,KAAK,CAACK,QAAQ,CAACC,OAAO,CAACJ,QAAQ,CAAC,CAAC,CAAC,CAAC;EACtD,OAAO,aAAAF,KAAK,CAACO,cAAc,CAACH,UAAU,CAAC,IAAIA,UAAU,CAACI,IAAI,KAAKL,SAAS;AAC1E,CAAC;AAED,eAAeF,iBAAiB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"firstChildHasType.d.ts","sourceRoot":"","sources":["../../../../src/FormItem/utils/firstChildHasType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,QAAA,MAAM,iBAAiB,aACX,SAAS,GAAG,SAAS,EAAE,aACtB,MAAM,EAAE,KAClB,OAGF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|