@ioca/react 1.3.6 → 1.3.62
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/lib/cjs/components/affix/affix.js +5 -1
- package/lib/cjs/components/affix/affix.js.map +1 -1
- package/lib/cjs/components/affix/totop.js +5 -1
- package/lib/cjs/components/affix/totop.js.map +1 -1
- package/lib/cjs/components/badge/badge.js +5 -1
- package/lib/cjs/components/badge/badge.js.map +1 -1
- package/lib/cjs/components/button/button.js +5 -1
- package/lib/cjs/components/button/button.js.map +1 -1
- package/lib/cjs/components/button/group.js +5 -1
- package/lib/cjs/components/button/group.js.map +1 -1
- package/lib/cjs/components/button/toggle.js +5 -1
- package/lib/cjs/components/button/toggle.js.map +1 -1
- package/lib/cjs/components/card/card.js +5 -1
- package/lib/cjs/components/card/card.js.map +1 -1
- package/lib/cjs/components/checkbox/checkbox.js +6 -2
- package/lib/cjs/components/checkbox/checkbox.js.map +1 -1
- package/lib/cjs/components/checkbox/item.js +6 -2
- package/lib/cjs/components/checkbox/item.js.map +1 -1
- package/lib/cjs/components/collapse/collapse.js +6 -2
- package/lib/cjs/components/collapse/collapse.js.map +1 -1
- package/lib/cjs/components/datagrid/cell.js +6 -2
- package/lib/cjs/components/datagrid/cell.js.map +1 -1
- package/lib/cjs/components/datagrid/datagrid.js +6 -2
- package/lib/cjs/components/datagrid/datagrid.js.map +1 -1
- package/lib/cjs/components/datagrid/row.js +6 -2
- package/lib/cjs/components/datagrid/row.js.map +1 -1
- package/lib/cjs/components/datagrid/sorter.js +5 -1
- package/lib/cjs/components/datagrid/sorter.js.map +1 -1
- package/lib/cjs/components/description/description.js +6 -2
- package/lib/cjs/components/description/description.js.map +1 -1
- package/lib/cjs/components/drawer/drawer.js +6 -2
- package/lib/cjs/components/drawer/drawer.js.map +1 -1
- package/lib/cjs/components/editor/editor.js +8 -3
- package/lib/cjs/components/editor/editor.js.map +1 -1
- package/lib/cjs/components/flex/flex.js +5 -1
- package/lib/cjs/components/flex/flex.js.map +1 -1
- package/lib/cjs/components/form/field.js +9 -5
- package/lib/cjs/components/form/field.js.map +1 -1
- package/lib/cjs/components/form/form.js +8 -3
- package/lib/cjs/components/form/form.js.map +1 -1
- package/lib/cjs/components/form/useForm.js +11 -7
- package/lib/cjs/components/form/useForm.js.map +1 -1
- package/lib/cjs/components/icon/icon.js +5 -1
- package/lib/cjs/components/icon/icon.js.map +1 -1
- package/lib/cjs/components/image/image.js +6 -2
- package/lib/cjs/components/image/image.js.map +1 -1
- package/lib/cjs/components/input/container.js +6 -2
- package/lib/cjs/components/input/container.js.map +1 -1
- package/lib/cjs/components/input/input.js +6 -2
- package/lib/cjs/components/input/input.js.map +1 -1
- package/lib/cjs/components/input/number.js +5 -1
- package/lib/cjs/components/input/number.js.map +1 -1
- package/lib/cjs/components/input/range.js +5 -1
- package/lib/cjs/components/input/range.js.map +1 -1
- package/lib/cjs/components/input/textarea.js +5 -1
- package/lib/cjs/components/input/textarea.js.map +1 -1
- package/lib/cjs/components/list/item.js +5 -1
- package/lib/cjs/components/list/item.js.map +1 -1
- package/lib/cjs/components/list/list.js +5 -1
- package/lib/cjs/components/list/list.js.map +1 -1
- package/lib/cjs/components/loading/loading.js +5 -1
- package/lib/cjs/components/loading/loading.js.map +1 -1
- package/lib/cjs/components/message/message.js +5 -1
- package/lib/cjs/components/message/message.js.map +1 -1
- package/lib/cjs/components/modal/modal.js +6 -2
- package/lib/cjs/components/modal/modal.js.map +1 -1
- package/lib/cjs/components/pagination/page.js +5 -1
- package/lib/cjs/components/pagination/page.js.map +1 -1
- package/lib/cjs/components/pagination/pagination.js +5 -1
- package/lib/cjs/components/pagination/pagination.js.map +1 -1
- package/lib/cjs/components/picker/colors/handle.js +5 -1
- package/lib/cjs/components/picker/colors/handle.js.map +1 -1
- package/lib/cjs/components/picker/colors/index.js +6 -2
- package/lib/cjs/components/picker/colors/index.js.map +1 -1
- package/lib/cjs/components/picker/dates/dates.js +7 -2
- package/lib/cjs/components/picker/dates/dates.js.map +1 -1
- package/lib/cjs/components/picker/dates/index.js +8 -3
- package/lib/cjs/components/picker/dates/index.js.map +1 -1
- package/lib/cjs/components/picker/dates/panel.js +11 -6
- package/lib/cjs/components/picker/dates/panel.js.map +1 -1
- package/lib/cjs/components/picker/time/item.js +5 -1
- package/lib/cjs/components/picker/time/item.js.map +1 -1
- package/lib/cjs/components/popup/content.js +5 -1
- package/lib/cjs/components/popup/content.js.map +1 -1
- package/lib/cjs/components/progress/line.js +6 -2
- package/lib/cjs/components/progress/line.js.map +1 -1
- package/lib/cjs/components/progress/progress.js +5 -1
- package/lib/cjs/components/progress/progress.js.map +1 -1
- package/lib/cjs/components/radio/item.js +6 -2
- package/lib/cjs/components/radio/item.js.map +1 -1
- package/lib/cjs/components/radio/radio.js +6 -2
- package/lib/cjs/components/radio/radio.js.map +1 -1
- package/lib/cjs/components/resizable/resizable.js +6 -2
- package/lib/cjs/components/resizable/resizable.js.map +1 -1
- package/lib/cjs/components/select/options.js +5 -1
- package/lib/cjs/components/select/options.js.map +1 -1
- package/lib/cjs/components/select/select.js +7 -3
- package/lib/cjs/components/select/select.js.map +1 -1
- package/lib/cjs/components/step/item.js +5 -1
- package/lib/cjs/components/step/item.js.map +1 -1
- package/lib/cjs/components/step/step.js +5 -1
- package/lib/cjs/components/step/step.js.map +1 -1
- package/lib/cjs/components/swiper/item.js +5 -1
- package/lib/cjs/components/swiper/item.js.map +1 -1
- package/lib/cjs/components/swiper/swiper.js +8 -4
- package/lib/cjs/components/swiper/swiper.js.map +1 -1
- package/lib/cjs/components/tabs/tabs.js +10 -6
- package/lib/cjs/components/tabs/tabs.js.map +1 -1
- package/lib/cjs/components/tag/tag.js +6 -2
- package/lib/cjs/components/tag/tag.js.map +1 -1
- package/lib/cjs/components/text/text.js +5 -1
- package/lib/cjs/components/text/text.js.map +1 -1
- package/lib/cjs/components/tree/item.js +7 -3
- package/lib/cjs/components/tree/item.js.map +1 -1
- package/lib/cjs/components/upload/renderFile.js +5 -1
- package/lib/cjs/components/upload/renderFile.js.map +1 -1
- package/lib/cjs/components/upload/upload.js +5 -1
- package/lib/cjs/components/upload/upload.js.map +1 -1
- package/lib/cjs/components/utils/empty/index.js +5 -1
- package/lib/cjs/components/utils/empty/index.js.map +1 -1
- package/lib/cjs/components/utils/helpericon/helpericon.js +5 -1
- package/lib/cjs/components/utils/helpericon/helpericon.js.map +1 -1
- package/lib/cjs/components/video/video.js +5 -1
- package/lib/cjs/components/video/video.js.map +1 -1
- package/lib/cjs/js/usePreview/content.js +6 -2
- package/lib/cjs/js/usePreview/content.js.map +1 -1
- package/lib/css/index.css +1 -1
- package/lib/css/index.css.map +1 -1
- package/package.json +3 -2
|
@@ -5,10 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var classNames = require('classnames');
|
|
7
7
|
|
|
8
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
9
|
+
|
|
10
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
11
|
+
|
|
8
12
|
const Arrow = (props) => (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', ...props, children: jsxRuntime.jsx("g", { fill: 'none', children: jsxRuntime.jsx("path", { d: 'M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z', fill: 'currentColor' }) }) }));
|
|
9
13
|
function Sorter(props) {
|
|
10
14
|
const { type } = props;
|
|
11
|
-
return (jsxRuntime.jsxs("a", { className:
|
|
15
|
+
return (jsxRuntime.jsxs("a", { className: classNames__default("i-datagrid-sorter", {
|
|
12
16
|
[`i-datagrid-sorter-${type}`]: type,
|
|
13
17
|
}), children: [jsxRuntime.jsx(Arrow, { className: 'i-datagrid-sorter-caret' }), jsxRuntime.jsx(Arrow, { className: 'i-datagrid-sorter-caret' })] }));
|
|
14
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sorter.js","sources":["../../../../packages/components/datagrid/sorter.tsx"],"sourcesContent":["import classNames from \"classnames\";\n\nconst Arrow = (props) => (\n\t<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>\n\t\t<g fill='none'>\n\t\t\t<path\n\t\t\t\td='M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z'\n\t\t\t\tfill='currentColor'\n\t\t\t></path>\n\t\t</g>\n\t</svg>\n);\n\nexport default function Sorter(props) {\n\tconst { type } = props;\n\n\treturn (\n\t\t<a\n\t\t\tclassName={classNames(\"i-datagrid-sorter\", {\n\t\t\t\t[`i-datagrid-sorter-${type}`]: type,\n\t\t\t})}\n\t\t>\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t</a>\n\t);\n}\n"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sorter.js","sources":["../../../../packages/components/datagrid/sorter.tsx"],"sourcesContent":["import classNames from \"classnames\";\n\nconst Arrow = (props) => (\n\t<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>\n\t\t<g fill='none'>\n\t\t\t<path\n\t\t\t\td='M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z'\n\t\t\t\tfill='currentColor'\n\t\t\t></path>\n\t\t</g>\n\t</svg>\n);\n\nexport default function Sorter(props) {\n\tconst { type } = props;\n\n\treturn (\n\t\t<a\n\t\t\tclassName={classNames(\"i-datagrid-sorter\", {\n\t\t\t\t[`i-datagrid-sorter-${type}`]: type,\n\t\t\t})}\n\t\t>\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t</a>\n\t);\n}\n"],"names":["_jsx","_jsxs","classNames"],"mappings":";;;;;;;;;;;AAEA,MAAM,KAAK,GAAG,CAAC,KAAK,MACnBA,cAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAK,GAAA,KAAK,EACpE,QAAA,EAAAA,cAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EACb,QAAA,EAAAA,cAAA,CAAA,MAAA,EAAA,EACC,CAAC,EAAC,6HAA6H,EAC/H,IAAI,EAAC,cAAc,EAAA,CACZ,EACL,CAAA,EAAA,CACC,CACN;AAEuB,SAAA,MAAM,CAAC,KAAK,EAAA;AACnC,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;AAEtB,IAAA,QACCC,eACC,CAAA,GAAA,EAAA,EAAA,SAAS,EAAEC,mBAAU,CAAC,mBAAmB,EAAE;AAC1C,YAAA,CAAC,CAAqB,kBAAA,EAAA,IAAI,CAAE,CAAA,GAAG,IAAI;AACnC,SAAA,CAAC,aAEFF,cAAC,CAAA,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAG,CAAA,EAC7CA,cAAC,CAAA,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAG,CAAA,CAAA,EAAA,CAC1C;AAEN;;;;"}
|
|
@@ -6,9 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var classNames = require('classnames');
|
|
7
7
|
var react = require('react');
|
|
8
8
|
|
|
9
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
10
|
+
|
|
11
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
12
|
+
|
|
9
13
|
const Description = (props) => {
|
|
10
14
|
const { data, colon, columns = 1, gap = ".5em", align, labelWidth, labelAlign, vertical, equally, style, className, } = props;
|
|
11
|
-
return (jsxRuntime.jsx("div", { className:
|
|
15
|
+
return (jsxRuntime.jsx("div", { className: classNames__default("i-description", className), style: {
|
|
12
16
|
["--description-label-width"]: labelWidth,
|
|
13
17
|
gridTemplateColumns: `repeat(${columns}, ${equally ? "1fr" : "auto"})`,
|
|
14
18
|
gap,
|
|
@@ -18,7 +22,7 @@ const Description = (props) => {
|
|
|
18
22
|
const { label, value, style, hidden, rowSpan = 1, colSpan = 1, } = item;
|
|
19
23
|
if (hidden)
|
|
20
24
|
return jsxRuntime.jsx(react.Fragment, {}, i);
|
|
21
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
25
|
+
return (jsxRuntime.jsxs("div", { className: classNames__default("i-description-item", {
|
|
22
26
|
"i-description-item-vertical": vertical,
|
|
23
27
|
}), style: {
|
|
24
28
|
gridColumn: `span ${colSpan}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"description.js","sources":["../../../../packages/components/description/description.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CSSProperties, Fragment } from \"react\";\nimport \"./index.css\";\nimport { IDescription } from \"./type\";\n\nconst Description = (props: IDescription) => {\n\tconst {\n\t\tdata,\n\t\tcolon,\n\t\tcolumns = 1,\n\t\tgap = \".5em\",\n\t\talign,\n\t\tlabelWidth,\n\t\tlabelAlign,\n\t\tvertical,\n\t\tequally,\n\t\tstyle,\n\t\tclassName,\n\t} = props;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-description\", className)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t[\"--description-label-width\"]: labelWidth,\n\t\t\t\t\tgridTemplateColumns: `repeat(${columns}, ${\n\t\t\t\t\t\tequally ? \"1fr\" : \"auto\"\n\t\t\t\t\t})`,\n\t\t\t\t\tgap,\n\t\t\t\t\ttextAlign: align,\n\t\t\t\t\t...style,\n\t\t\t\t} as CSSProperties\n\t\t\t}\n\t\t>\n\t\t\t{data.map((item, i) => {\n\t\t\t\tconst {\n\t\t\t\t\tlabel,\n\t\t\t\t\tvalue,\n\t\t\t\t\tstyle,\n\t\t\t\t\thidden,\n\t\t\t\t\trowSpan = 1,\n\t\t\t\t\tcolSpan = 1,\n\t\t\t\t} = item;\n\n\t\t\t\tif (hidden) return <Fragment key={i} />;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tclassName={classNames(\"i-description-item\", {\n\t\t\t\t\t\t\t\"i-description-item-vertical\": vertical,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tgridColumn: `span ${colSpan}`,\n\t\t\t\t\t\t\tgridRow: `span ${rowSpan}`,\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName='i-description-label'\n\t\t\t\t\t\t\t\tstyle={{ textAlign: labelAlign }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t{colon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className='i-description-value'>{value}</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n};\n\nexport default Description;\n"],"names":["_jsx","Fragment","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"description.js","sources":["../../../../packages/components/description/description.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CSSProperties, Fragment } from \"react\";\nimport \"./index.css\";\nimport { IDescription } from \"./type\";\n\nconst Description = (props: IDescription) => {\n\tconst {\n\t\tdata,\n\t\tcolon,\n\t\tcolumns = 1,\n\t\tgap = \".5em\",\n\t\talign,\n\t\tlabelWidth,\n\t\tlabelAlign,\n\t\tvertical,\n\t\tequally,\n\t\tstyle,\n\t\tclassName,\n\t} = props;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-description\", className)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t[\"--description-label-width\"]: labelWidth,\n\t\t\t\t\tgridTemplateColumns: `repeat(${columns}, ${\n\t\t\t\t\t\tequally ? \"1fr\" : \"auto\"\n\t\t\t\t\t})`,\n\t\t\t\t\tgap,\n\t\t\t\t\ttextAlign: align,\n\t\t\t\t\t...style,\n\t\t\t\t} as CSSProperties\n\t\t\t}\n\t\t>\n\t\t\t{data.map((item, i) => {\n\t\t\t\tconst {\n\t\t\t\t\tlabel,\n\t\t\t\t\tvalue,\n\t\t\t\t\tstyle,\n\t\t\t\t\thidden,\n\t\t\t\t\trowSpan = 1,\n\t\t\t\t\tcolSpan = 1,\n\t\t\t\t} = item;\n\n\t\t\t\tif (hidden) return <Fragment key={i} />;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tclassName={classNames(\"i-description-item\", {\n\t\t\t\t\t\t\t\"i-description-item-vertical\": vertical,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tgridColumn: `span ${colSpan}`,\n\t\t\t\t\t\t\tgridRow: `span ${rowSpan}`,\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName='i-description-label'\n\t\t\t\t\t\t\t\tstyle={{ textAlign: labelAlign }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t{colon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className='i-description-value'>{value}</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n};\n\nexport default Description;\n"],"names":["_jsx","classNames","Fragment","_jsxs"],"mappings":";;;;;;;;;;;;AAKA,MAAM,WAAW,GAAG,CAAC,KAAmB,KAAI;AAC3C,IAAA,MAAM,EACL,IAAI,EACJ,KAAK,EACL,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,MAAM,EACZ,KAAK,EACL,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,KAAK,EACL,SAAS,GACT,GAAG,KAAK;AAET,IAAA,QACCA,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAEC,mBAAU,CAAC,eAAe,EAAE,SAAS,CAAC,EACjD,KAAK,EACJ;YACC,CAAC,2BAA2B,GAAG,UAAU;AACzC,YAAA,mBAAmB,EAAE,CAAA,OAAA,EAAU,OAAO,CAAA,EAAA,EACrC,OAAO,GAAG,KAAK,GAAG,MACnB,CAAG,CAAA,CAAA;YACH,GAAG;AACH,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,GAAG,KAAK;SACS,EAGlB,QAAA,EAAA,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;AACrB,YAAA,MAAM,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,GACX,GAAG,IAAI;AAER,YAAA,IAAI,MAAM;AAAE,gBAAA,OAAOD,cAAC,CAAAE,cAAQ,EAAM,EAAA,EAAA,CAAC,CAAI;AAEvC,YAAA,QACCC,eAEC,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEF,mBAAU,CAAC,oBAAoB,EAAE;AAC3C,oBAAA,6BAA6B,EAAE,QAAQ;iBACvC,CAAC,EACF,KAAK,EAAE;oBACN,UAAU,EAAE,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA;oBAC7B,OAAO,EAAE,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA;AAC1B,oBAAA,GAAG,KAAK;AACR,iBAAA,EAAA,QAAA,EAAA,CAEA,KAAK,KACLE,eAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAC,qBAAqB,EAC/B,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAA,QAAA,EAAA,CAE/B,KAAK,EACL,KAAK,CAAA,EAAA,CACD,CACN,EACDH,wBAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAE,KAAK,EAAO,CAAA,CAAA,EAAA,EAnB7C,CAAC,CAoBD;SAEP,CAAC,EACG,CAAA;AAER;;;;"}
|
|
@@ -10,6 +10,10 @@ var reactDom = require('react-dom');
|
|
|
10
10
|
var hooks = require('../../js/hooks.js');
|
|
11
11
|
var helpericon = require('../utils/helpericon/helpericon.js');
|
|
12
12
|
|
|
13
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
14
|
+
|
|
15
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
16
|
+
|
|
13
17
|
function Drawer(props) {
|
|
14
18
|
const { visible, position = "left", header, footer, backdropClosable = true, hideCloseButton, keepDOM, className, disabledEsc, children, onVisibleChange, onClose, ...restProps } = props;
|
|
15
19
|
const toggable = react.useRef(true);
|
|
@@ -57,9 +61,9 @@ function Drawer(props) {
|
|
|
57
61
|
}, {
|
|
58
62
|
disabled: disabledEsc,
|
|
59
63
|
});
|
|
60
|
-
return reactDom.createPortal(state.show && (jsxRuntime.jsx("div", { className:
|
|
64
|
+
return reactDom.createPortal(state.show && (jsxRuntime.jsx("div", { className: classNames__default("i-backdrop-drawer", className, {
|
|
61
65
|
"i-active": state.active,
|
|
62
|
-
}), onClick: handleBackdropClick, ...restProps, children: jsxRuntime.jsxs("div", { className:
|
|
66
|
+
}), onClick: handleBackdropClick, ...restProps, children: jsxRuntime.jsxs("div", { className: classNames__default("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("header", { className: 'i-drawer-header', children: [header, jsxRuntime.jsx(helpericon.default, { active: !hideCloseButton, className: 'i-drawer-close', onClick: handleHide })] }), jsxRuntime.jsx("div", { className: 'i-drawer-content', children: children }), jsxRuntime.jsx("div", { className: 'i-drawer-footer', children: footer })] }) })), document.body);
|
|
63
67
|
}
|
|
64
68
|
|
|
65
69
|
exports.default = Drawer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sources":["../../../../packages/components/drawer/drawer.tsx"],"sourcesContent":["import { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { useEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown } from \"../../js/hooks\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { IDrawer } from \"./type\";\n\nfunction Drawer(props: IDrawer) {\n\tconst {\n\t\tvisible,\n\t\tposition = \"left\",\n\t\theader,\n\t\tfooter,\n\t\tbackdropClosable = true,\n\t\thideCloseButton,\n\t\tkeepDOM,\n\t\tclassName,\n\t\tdisabledEsc,\n\t\tchildren,\n\t\tonVisibleChange,\n\t\tonClose,\n\t\t...restProps\n\t} = props;\n\tconst toggable = useRef(true);\n\tconst state = useReactive({\n\t\tshow: visible,\n\t\tactive: visible,\n\t\tinit: false,\n\t});\n\n\tuseEffect(() => {\n\t\tvisible ? handleShow() : handleHide();\n\t}, [visible]);\n\n\tconst handleShow = () => {\n\t\tif (!toggable.current) return;\n\n\t\tstate.show = true;\n\t\tonVisibleChange?.(true);\n\t\ttoggable.current = false;\n\t\tsetTimeout(() => {\n\t\t\tstate.active = true;\n\t\t\ttoggable.current = true;\n\t\t\tstate.init = true;\n\t\t}, 24);\n\t};\n\n\tconst handleHide = () => {\n\t\tif (!toggable.current) return;\n\t\ttoggable.current = false;\n\n\t\tstate.active = false;\n\t\tsetTimeout(() => {\n\t\t\tif (!keepDOM) {\n\t\t\t\tstate.show = false;\n\t\t\t}\n\t\t\tonVisibleChange?.(false);\n\t\t\ttoggable.current = true;\n\t\t\tonClose?.();\n\t\t}, 240);\n\t};\n\n\tconst handleBackdropClick = function () {\n\t\tbackdropClosable && handleHide();\n\t};\n\n\tuseKeydown(\n\t\t(e) => {\n\t\t\tif (e.code !== \"Escape\" || !visible) return;\n\t\t\thandleHide();\n\t\t},\n\t\t{\n\t\t\tdisabled: disabledEsc,\n\t\t}\n\t);\n\n\treturn createPortal(\n\t\tstate.show && (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-backdrop-drawer\", className, {\n\t\t\t\t\t\"i-active\": state.active,\n\t\t\t\t})}\n\t\t\t\tonClick={handleBackdropClick}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\"i-drawer\", `i-drawer-${position}`)}\n\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t<header className='i-drawer-header'>\n\t\t\t\t\t\t{header}\n\n\t\t\t\t\t\t<Helpericon\n\t\t\t\t\t\t\tactive={!hideCloseButton}\n\t\t\t\t\t\t\tclassName='i-drawer-close'\n\t\t\t\t\t\t\tonClick={handleHide}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</header>\n\n\t\t\t\t\t<div className='i-drawer-content'>{children}</div>\n\n\t\t\t\t\t<div className='i-drawer-footer'>{footer}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t),\n\t\tdocument.body\n\t);\n}\n\nexport default Drawer;\n"],"names":["useRef","useReactive","useEffect","useKeydown","createPortal","_jsx","_jsxs","Helpericon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"drawer.js","sources":["../../../../packages/components/drawer/drawer.tsx"],"sourcesContent":["import { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { useEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown } from \"../../js/hooks\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { IDrawer } from \"./type\";\n\nfunction Drawer(props: IDrawer) {\n\tconst {\n\t\tvisible,\n\t\tposition = \"left\",\n\t\theader,\n\t\tfooter,\n\t\tbackdropClosable = true,\n\t\thideCloseButton,\n\t\tkeepDOM,\n\t\tclassName,\n\t\tdisabledEsc,\n\t\tchildren,\n\t\tonVisibleChange,\n\t\tonClose,\n\t\t...restProps\n\t} = props;\n\tconst toggable = useRef(true);\n\tconst state = useReactive({\n\t\tshow: visible,\n\t\tactive: visible,\n\t\tinit: false,\n\t});\n\n\tuseEffect(() => {\n\t\tvisible ? handleShow() : handleHide();\n\t}, [visible]);\n\n\tconst handleShow = () => {\n\t\tif (!toggable.current) return;\n\n\t\tstate.show = true;\n\t\tonVisibleChange?.(true);\n\t\ttoggable.current = false;\n\t\tsetTimeout(() => {\n\t\t\tstate.active = true;\n\t\t\ttoggable.current = true;\n\t\t\tstate.init = true;\n\t\t}, 24);\n\t};\n\n\tconst handleHide = () => {\n\t\tif (!toggable.current) return;\n\t\ttoggable.current = false;\n\n\t\tstate.active = false;\n\t\tsetTimeout(() => {\n\t\t\tif (!keepDOM) {\n\t\t\t\tstate.show = false;\n\t\t\t}\n\t\t\tonVisibleChange?.(false);\n\t\t\ttoggable.current = true;\n\t\t\tonClose?.();\n\t\t}, 240);\n\t};\n\n\tconst handleBackdropClick = function () {\n\t\tbackdropClosable && handleHide();\n\t};\n\n\tuseKeydown(\n\t\t(e) => {\n\t\t\tif (e.code !== \"Escape\" || !visible) return;\n\t\t\thandleHide();\n\t\t},\n\t\t{\n\t\t\tdisabled: disabledEsc,\n\t\t}\n\t);\n\n\treturn createPortal(\n\t\tstate.show && (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-backdrop-drawer\", className, {\n\t\t\t\t\t\"i-active\": state.active,\n\t\t\t\t})}\n\t\t\t\tonClick={handleBackdropClick}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\"i-drawer\", `i-drawer-${position}`)}\n\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t<header className='i-drawer-header'>\n\t\t\t\t\t\t{header}\n\n\t\t\t\t\t\t<Helpericon\n\t\t\t\t\t\t\tactive={!hideCloseButton}\n\t\t\t\t\t\t\tclassName='i-drawer-close'\n\t\t\t\t\t\t\tonClick={handleHide}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</header>\n\n\t\t\t\t\t<div className='i-drawer-content'>{children}</div>\n\n\t\t\t\t\t<div className='i-drawer-footer'>{footer}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t),\n\t\tdocument.body\n\t);\n}\n\nexport default Drawer;\n"],"names":["useRef","useReactive","useEffect","useKeydown","createPortal","_jsx","classNames","_jsxs","Helpericon"],"mappings":"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"}
|
|
@@ -8,6 +8,11 @@ var react = require('react');
|
|
|
8
8
|
var xss = require('xss');
|
|
9
9
|
var controls = require('./controls.js');
|
|
10
10
|
|
|
11
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
12
|
+
|
|
13
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
14
|
+
var xss__default = /*#__PURE__*/_interopDefaultCompat(xss);
|
|
15
|
+
|
|
11
16
|
const Editor = (props) => {
|
|
12
17
|
const { ref, width, height = "10em", placeholder, autosize, border = true, richPaste, controls: controls$1 = "simple", className, style, onInput, onPaste, onKeyDown, ...restProps } = props;
|
|
13
18
|
const editorRef = react.useRef(null);
|
|
@@ -51,12 +56,12 @@ const Editor = (props) => {
|
|
|
51
56
|
setValue(html) {
|
|
52
57
|
if (!editorRef.current)
|
|
53
58
|
return;
|
|
54
|
-
const safeHtml =
|
|
59
|
+
const safeHtml = xss__default(html, controls.xssOptions);
|
|
55
60
|
editorRef.current.innerHTML = safeHtml;
|
|
56
61
|
},
|
|
57
62
|
getSafeValue() {
|
|
58
63
|
const html = editorRef.current?.innerHTML ?? "";
|
|
59
|
-
return
|
|
64
|
+
return xss__default(html, controls.xssOptions);
|
|
60
65
|
},
|
|
61
66
|
};
|
|
62
67
|
});
|
|
@@ -68,7 +73,7 @@ const Editor = (props) => {
|
|
|
68
73
|
}
|
|
69
74
|
onInput?.(html, e);
|
|
70
75
|
};
|
|
71
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
76
|
+
return (jsxRuntime.jsxs("div", { className: classNames__default("i-editor", className, {
|
|
72
77
|
"i-editor-borderless": !border,
|
|
73
78
|
}), style: {
|
|
74
79
|
...style,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.js","sources":["../../../../packages/components/editor/editor.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useImperativeHandle, useRef } from \"react\";\nimport xss from \"xss\";\nimport { IButton } from \"../button/type\";\nimport getControls, { exec, xssOptions } from \"./controls\";\nimport \"./index.css\";\nimport { IEditor } from \"./type\";\n\nconst Editor = (props: IEditor) => {\n\tconst {\n\t\tref,\n\t\twidth,\n\t\theight = \"10em\",\n\t\tplaceholder,\n\t\tautosize,\n\t\tborder = true,\n\t\trichPaste,\n\t\tcontrols = \"simple\",\n\t\tclassName,\n\t\tstyle,\n\t\tonInput,\n\t\tonPaste,\n\t\tonKeyDown,\n\t\t...restProps\n\t} = props;\n\tconst editorRef = useRef<HTMLDivElement>(null);\n\tconst controlBtnProps: IButton = {\n\t\tsquare: true,\n\t\tflat: true,\n\t\tsize: \"small\",\n\t};\n\n\tconst handlePaste = async (e) => {\n\t\tonPaste?.(e);\n\n\t\tif (richPaste) return;\n\t\te.preventDefault();\n\t\tconst text = e.clipboardData.getData(\"text/plain\");\n\t\texec(\"insertText\", false, text);\n\t};\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tswitch (e.key) {\n\t\t\tcase \"Tab\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertHTML\", false, \"	\");\n\t\t\t\tbreak;\n\t\t\tcase \"Enter\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertLineBreak\");\n\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\teditorRef.current.scrollBy({\n\t\t\t\t\ttop: 20,\n\t\t\t\t\tleft: -1000,\n\t\t\t\t});\n\n\t\t\t\tif (!autosize) return;\n\t\t\t\teditorRef.current.style.height = `${editorRef.current.scrollHeight}px`;\n\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tuseImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tsetValue(html) {\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\tconst safeHtml = xss(html, xssOptions);\n\n\t\t\t\teditorRef.current.innerHTML = safeHtml;\n\t\t\t},\n\t\t\tgetSafeValue() {\n\t\t\t\tconst html = editorRef.current?.innerHTML ?? \"\";\n\n\t\t\t\treturn xss(html, xssOptions);\n\t\t\t},\n\t\t};\n\t});\n\n\tconst handleInput = (e) => {\n\t\tlet html = editorRef.current?.innerHTML ?? \"\";\n\n\t\tif ([\"<br>\", \"\\n\"].includes(html) && editorRef.current) {\n\t\t\thtml = \"\";\n\t\t\teditorRef.current.innerHTML = html;\n\t\t}\n\n\t\tonInput?.(html, e);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-editor\", className, {\n\t\t\t\t\"i-editor-borderless\": !border,\n\t\t\t})}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\t[autosize ? \"minHeight\" : \"height\"]: height,\n\t\t\t\twidth,\n\t\t\t}}\n\t\t>\n\t\t\t{controls !== \"none\" && (\n\t\t\t\t<div className='i-editor-controls'>\n\t\t\t\t\t{getControls(controls, {\n\t\t\t\t\t\tcontrolBtnProps,\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tref={editorRef}\n\t\t\t\tclassName='i-editor-content'\n\t\t\t\tdata-placeholder={placeholder}\n\t\t\t\tcontentEditable\n\t\t\t\tonPaste={handlePaste}\n\t\t\t\tonInput={handleInput}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Editor;\n"],"names":["controls","useRef","exec","useImperativeHandle","xssOptions","_jsxs","_jsx","getControls"],"mappings":"
|
|
1
|
+
{"version":3,"file":"editor.js","sources":["../../../../packages/components/editor/editor.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useImperativeHandle, useRef } from \"react\";\nimport xss from \"xss\";\nimport { IButton } from \"../button/type\";\nimport getControls, { exec, xssOptions } from \"./controls\";\nimport \"./index.css\";\nimport { IEditor } from \"./type\";\n\nconst Editor = (props: IEditor) => {\n\tconst {\n\t\tref,\n\t\twidth,\n\t\theight = \"10em\",\n\t\tplaceholder,\n\t\tautosize,\n\t\tborder = true,\n\t\trichPaste,\n\t\tcontrols = \"simple\",\n\t\tclassName,\n\t\tstyle,\n\t\tonInput,\n\t\tonPaste,\n\t\tonKeyDown,\n\t\t...restProps\n\t} = props;\n\tconst editorRef = useRef<HTMLDivElement>(null);\n\tconst controlBtnProps: IButton = {\n\t\tsquare: true,\n\t\tflat: true,\n\t\tsize: \"small\",\n\t};\n\n\tconst handlePaste = async (e) => {\n\t\tonPaste?.(e);\n\n\t\tif (richPaste) return;\n\t\te.preventDefault();\n\t\tconst text = e.clipboardData.getData(\"text/plain\");\n\t\texec(\"insertText\", false, text);\n\t};\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tswitch (e.key) {\n\t\t\tcase \"Tab\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertHTML\", false, \"	\");\n\t\t\t\tbreak;\n\t\t\tcase \"Enter\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertLineBreak\");\n\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\teditorRef.current.scrollBy({\n\t\t\t\t\ttop: 20,\n\t\t\t\t\tleft: -1000,\n\t\t\t\t});\n\n\t\t\t\tif (!autosize) return;\n\t\t\t\teditorRef.current.style.height = `${editorRef.current.scrollHeight}px`;\n\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tuseImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tsetValue(html) {\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\tconst safeHtml = xss(html, xssOptions);\n\n\t\t\t\teditorRef.current.innerHTML = safeHtml;\n\t\t\t},\n\t\t\tgetSafeValue() {\n\t\t\t\tconst html = editorRef.current?.innerHTML ?? \"\";\n\n\t\t\t\treturn xss(html, xssOptions);\n\t\t\t},\n\t\t};\n\t});\n\n\tconst handleInput = (e) => {\n\t\tlet html = editorRef.current?.innerHTML ?? \"\";\n\n\t\tif ([\"<br>\", \"\\n\"].includes(html) && editorRef.current) {\n\t\t\thtml = \"\";\n\t\t\teditorRef.current.innerHTML = html;\n\t\t}\n\n\t\tonInput?.(html, e);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-editor\", className, {\n\t\t\t\t\"i-editor-borderless\": !border,\n\t\t\t})}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\t[autosize ? \"minHeight\" : \"height\"]: height,\n\t\t\t\twidth,\n\t\t\t}}\n\t\t>\n\t\t\t{controls !== \"none\" && (\n\t\t\t\t<div className='i-editor-controls'>\n\t\t\t\t\t{getControls(controls, {\n\t\t\t\t\t\tcontrolBtnProps,\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tref={editorRef}\n\t\t\t\tclassName='i-editor-content'\n\t\t\t\tdata-placeholder={placeholder}\n\t\t\t\tcontentEditable\n\t\t\t\tonPaste={handlePaste}\n\t\t\t\tonInput={handleInput}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Editor;\n"],"names":["controls","useRef","exec","useImperativeHandle","xss","xssOptions","_jsxs","classNames","_jsx","getControls"],"mappings":"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"}
|
|
@@ -6,6 +6,10 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var classNames = require('classnames');
|
|
7
7
|
var react = require('react');
|
|
8
8
|
|
|
9
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
10
|
+
|
|
11
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
12
|
+
|
|
9
13
|
const Flex = (props) => {
|
|
10
14
|
const { as: Component = "div", align, justify, direction, wrap, gap, columns, className, style, ...restProps } = props;
|
|
11
15
|
const gridColumns = react.useMemo(() => {
|
|
@@ -23,7 +27,7 @@ const Flex = (props) => {
|
|
|
23
27
|
flexWrap: wrap === true ? "wrap" : wrap,
|
|
24
28
|
gridTemplateColumns: gridColumns,
|
|
25
29
|
...style,
|
|
26
|
-
}, className:
|
|
30
|
+
}, className: classNames__default(className, {
|
|
27
31
|
[columns ? "grid" : "flex"]: true,
|
|
28
32
|
}) }));
|
|
29
33
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flex.js","sources":["../../../../packages/components/flex/flex.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useMemo } from \"react\";\nimport \"./index.css\";\nimport { IFlex } from \"./type\";\n\nconst Flex: React.FC<IFlex> = (props: IFlex) => {\n\tconst {\n\t\tas: Component = \"div\" as any,\n\t\talign,\n\t\tjustify,\n\t\tdirection,\n\t\twrap,\n\t\tgap,\n\t\tcolumns,\n\t\tclassName,\n\t\tstyle,\n\t\t...restProps\n\t} = props;\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns) return;\n\n\t\tif (typeof columns === \"number\") return `repeat(${columns}, 1fr)`;\n\n\t\treturn columns;\n\t}, [columns]);\n\n\treturn (\n\t\t<Component\n\t\t\t{...restProps}\n\t\t\tstyle={{\n\t\t\t\talignItems: align,\n\t\t\t\tjustifyContent: justify,\n\t\t\t\tgap,\n\t\t\t\tflexDirection: direction,\n\t\t\t\tflexWrap: wrap === true ? \"wrap\" : wrap,\n\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\tclassName={classNames(className, {\n\t\t\t\t[columns ? \"grid\" : \"flex\"]: true,\n\t\t\t})}\n\t\t/>\n\t);\n};\n\nexport default Flex;\n"],"names":["useMemo","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"flex.js","sources":["../../../../packages/components/flex/flex.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useMemo } from \"react\";\nimport \"./index.css\";\nimport { IFlex } from \"./type\";\n\nconst Flex: React.FC<IFlex> = (props: IFlex) => {\n\tconst {\n\t\tas: Component = \"div\" as any,\n\t\talign,\n\t\tjustify,\n\t\tdirection,\n\t\twrap,\n\t\tgap,\n\t\tcolumns,\n\t\tclassName,\n\t\tstyle,\n\t\t...restProps\n\t} = props;\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns) return;\n\n\t\tif (typeof columns === \"number\") return `repeat(${columns}, 1fr)`;\n\n\t\treturn columns;\n\t}, [columns]);\n\n\treturn (\n\t\t<Component\n\t\t\t{...restProps}\n\t\t\tstyle={{\n\t\t\t\talignItems: align,\n\t\t\t\tjustifyContent: justify,\n\t\t\t\tgap,\n\t\t\t\tflexDirection: direction,\n\t\t\t\tflexWrap: wrap === true ? \"wrap\" : wrap,\n\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\tclassName={classNames(className, {\n\t\t\t\t[columns ? \"grid\" : \"flex\"]: true,\n\t\t\t})}\n\t\t/>\n\t);\n};\n\nexport default Flex;\n"],"names":["useMemo","_jsx","classNames"],"mappings":";;;;;;;;;;;;AAKA,MAAM,IAAI,GAAoB,CAAC,KAAY,KAAI;AAC9C,IAAA,MAAM,EACL,EAAE,EAAE,SAAS,GAAG,KAAY,EAC5B,KAAK,EACL,OAAO,EACP,SAAS,EACT,IAAI,EACJ,GAAG,EACH,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACZ,GAAG,KAAK;AAET,IAAA,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAK;AAChC,QAAA,IAAI,CAAC,OAAO;YAAE;QAEd,IAAI,OAAO,OAAO,KAAK,QAAQ;YAAE,OAAO,CAAA,OAAA,EAAU,OAAO,CAAA,MAAA,CAAQ;AAEjE,QAAA,OAAO,OAAO;AACf,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACCC,cAAC,CAAA,SAAS,OACL,SAAS,EACb,KAAK,EAAE;AACN,YAAA,UAAU,EAAE,KAAK;AACjB,YAAA,cAAc,EAAE,OAAO;YACvB,GAAG;AACH,YAAA,aAAa,EAAE,SAAS;YACxB,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI;AACvC,YAAA,mBAAmB,EAAE,WAAkB;AACvC,YAAA,GAAG,KAAK;AACR,SAAA,EACD,SAAS,EAAEC,mBAAU,CAAC,SAAS,EAAE;YAChC,CAAC,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;SACjC,CAAC,EAAA,CACD;AAEJ;;;;"}
|
|
@@ -7,6 +7,10 @@ var PubSub = require('pubsub-js');
|
|
|
7
7
|
var react = require('react');
|
|
8
8
|
var context = require('./context.js');
|
|
9
9
|
|
|
10
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
11
|
+
|
|
12
|
+
var PubSub__default = /*#__PURE__*/_interopDefaultCompat(PubSub);
|
|
13
|
+
|
|
10
14
|
function Field(props) {
|
|
11
15
|
const { name, required, children } = props;
|
|
12
16
|
const state = ahooks.useReactive({
|
|
@@ -21,7 +25,7 @@ function Field(props) {
|
|
|
21
25
|
if (!name)
|
|
22
26
|
return;
|
|
23
27
|
form.set(name, v);
|
|
24
|
-
|
|
28
|
+
PubSub__default.publish(`${id}:change`, {
|
|
25
29
|
name,
|
|
26
30
|
value: v,
|
|
27
31
|
});
|
|
@@ -51,11 +55,11 @@ function Field(props) {
|
|
|
51
55
|
react.useEffect(() => {
|
|
52
56
|
if (!name)
|
|
53
57
|
return;
|
|
54
|
-
|
|
58
|
+
PubSub__default.subscribe(`${id}:set:${name}`, (evt, v) => {
|
|
55
59
|
state.value = v;
|
|
56
60
|
state.update += 1;
|
|
57
61
|
});
|
|
58
|
-
|
|
62
|
+
PubSub__default.subscribe(`${id}:invalid:${name}`, (evt, v) => {
|
|
59
63
|
Object.assign(state, v);
|
|
60
64
|
state.update += 1;
|
|
61
65
|
});
|
|
@@ -63,8 +67,8 @@ function Field(props) {
|
|
|
63
67
|
form.set(name, form.cacheData[name] ?? undefined);
|
|
64
68
|
});
|
|
65
69
|
return () => {
|
|
66
|
-
|
|
67
|
-
|
|
70
|
+
PubSub__default.unsubscribe(`${id}:set:${name}`);
|
|
71
|
+
PubSub__default.unsubscribe(`${id}:invalid:${name}`);
|
|
68
72
|
form.delete(name);
|
|
69
73
|
};
|
|
70
74
|
}, [name, children]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sources":["../../../../packages/components/form/field.tsx"],"sourcesContent":["import { useReactive } from \"ahooks\";\nimport PubSub from \"pubsub-js\";\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n} from \"react\";\nimport Context from \"./context\";\nimport { IField } from \"./type\";\n\nfunction Field(props: IField) {\n\tconst { name, required, children } = props;\n\tconst state = useReactive({\n\t\tvalue: undefined,\n\t\tstatus: \"normal\",\n\t\tmessage: undefined,\n\t\tupdate: 0,\n\t});\n\tconst form = useContext(Context);\n\tconst { id } = form;\n\n\tconst handleChange = (v) => {\n\t\tif (!name) return;\n\n\t\tform.set(name, v);\n\t\tPubSub.publish(`${id}:change`, {\n\t\t\tname,\n\t\t\tvalue: v,\n\t\t});\n\t};\n\n\tconst hijackChildren = useMemo(() => {\n\t\treturn Children.map(children, (node) => {\n\t\t\tif (!isValidElement(node)) return null;\n\n\t\t\tconst { onChange } = node.props as any;\n\t\t\tconst { value, status, message } = state;\n\n\t\t\treturn cloneElement(node, {\n\t\t\t\tvalue,\n\t\t\t\tstatus,\n\t\t\t\tmessage,\n\t\t\t\trequired,\n\t\t\t\tonChange: (...args) => {\n\t\t\t\t\thandleChange(args[0]);\n\t\t\t\t\tonChange?.(...args);\n\t\t\t\t\tObject.assign(state, {\n\t\t\t\t\t\tstatus: \"normal\",\n\t\t\t\t\t\tmessage: undefined,\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t} as any);\n\t\t});\n\t}, [children, state.update]);\n\n\tuseEffect(() => {\n\t\tif (!name) return;\n\n\t\tPubSub.subscribe(`${id}:set:${name}`, (evt, v) => {\n\t\t\tstate.value = v;\n\t\t\tstate.update += 1;\n\t\t});\n\t\tPubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {\n\t\t\tObject.assign(state, v);\n\t\t\tstate.update += 1;\n\t\t});\n\n\t\tPromise.resolve().then(() => {\n\t\t\tform.set(name, form.cacheData[name] ?? undefined);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${id}:set:${name}`);\n\t\t\tPubSub.unsubscribe(`${id}:invalid:${name}`);\n\t\t\tform.delete(name);\n\t\t};\n\t}, [name, children]);\n\n\tif (!name) return children;\n\n\treturn hijackChildren;\n}\n\nexport default Field;\n"],"names":["useReactive","useContext","Context","useMemo","Children","isValidElement","cloneElement","useEffect"],"mappings":"
|
|
1
|
+
{"version":3,"file":"field.js","sources":["../../../../packages/components/form/field.tsx"],"sourcesContent":["import { useReactive } from \"ahooks\";\nimport PubSub from \"pubsub-js\";\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n} from \"react\";\nimport Context from \"./context\";\nimport { IField } from \"./type\";\n\nfunction Field(props: IField) {\n\tconst { name, required, children } = props;\n\tconst state = useReactive({\n\t\tvalue: undefined,\n\t\tstatus: \"normal\",\n\t\tmessage: undefined,\n\t\tupdate: 0,\n\t});\n\tconst form = useContext(Context);\n\tconst { id } = form;\n\n\tconst handleChange = (v) => {\n\t\tif (!name) return;\n\n\t\tform.set(name, v);\n\t\tPubSub.publish(`${id}:change`, {\n\t\t\tname,\n\t\t\tvalue: v,\n\t\t});\n\t};\n\n\tconst hijackChildren = useMemo(() => {\n\t\treturn Children.map(children, (node) => {\n\t\t\tif (!isValidElement(node)) return null;\n\n\t\t\tconst { onChange } = node.props as any;\n\t\t\tconst { value, status, message } = state;\n\n\t\t\treturn cloneElement(node, {\n\t\t\t\tvalue,\n\t\t\t\tstatus,\n\t\t\t\tmessage,\n\t\t\t\trequired,\n\t\t\t\tonChange: (...args) => {\n\t\t\t\t\thandleChange(args[0]);\n\t\t\t\t\tonChange?.(...args);\n\t\t\t\t\tObject.assign(state, {\n\t\t\t\t\t\tstatus: \"normal\",\n\t\t\t\t\t\tmessage: undefined,\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t} as any);\n\t\t});\n\t}, [children, state.update]);\n\n\tuseEffect(() => {\n\t\tif (!name) return;\n\n\t\tPubSub.subscribe(`${id}:set:${name}`, (evt, v) => {\n\t\t\tstate.value = v;\n\t\t\tstate.update += 1;\n\t\t});\n\t\tPubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {\n\t\t\tObject.assign(state, v);\n\t\t\tstate.update += 1;\n\t\t});\n\n\t\tPromise.resolve().then(() => {\n\t\t\tform.set(name, form.cacheData[name] ?? undefined);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${id}:set:${name}`);\n\t\t\tPubSub.unsubscribe(`${id}:invalid:${name}`);\n\t\t\tform.delete(name);\n\t\t};\n\t}, [name, children]);\n\n\tif (!name) return children;\n\n\treturn hijackChildren;\n}\n\nexport default Field;\n"],"names":["useReactive","useContext","Context","PubSub","useMemo","Children","isValidElement","cloneElement","useEffect"],"mappings":"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"}
|
|
@@ -10,6 +10,11 @@ var context = require('./context.js');
|
|
|
10
10
|
var field = require('./field.js');
|
|
11
11
|
var useForm = require('./useForm.js');
|
|
12
12
|
|
|
13
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
14
|
+
|
|
15
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
16
|
+
var PubSub__default = /*#__PURE__*/_interopDefaultCompat(PubSub);
|
|
17
|
+
|
|
13
18
|
const Form = (props) => {
|
|
14
19
|
const { form = {}, rules, initialValues, style, className, width, columns = 1, gap = "1em", labelInline, labelWidth, labelRight, children, onKeyDown, onEnter, onChange, ...restProps } = props;
|
|
15
20
|
const handleKeyDown = (e) => {
|
|
@@ -32,11 +37,11 @@ const Form = (props) => {
|
|
|
32
37
|
});
|
|
33
38
|
}, [form]);
|
|
34
39
|
react.useEffect(() => {
|
|
35
|
-
|
|
40
|
+
PubSub__default.subscribe(`${form.id}:change`, (evt, v) => {
|
|
36
41
|
onChange?.(v.name, v.value);
|
|
37
42
|
});
|
|
38
43
|
return () => {
|
|
39
|
-
|
|
44
|
+
PubSub__default.unsubscribe(`${form.id}:change`);
|
|
40
45
|
};
|
|
41
46
|
}, []);
|
|
42
47
|
return (jsxRuntime.jsx(context.default, { value: form, children: jsxRuntime.jsx("form", { style: {
|
|
@@ -46,7 +51,7 @@ const Form = (props) => {
|
|
|
46
51
|
gridTemplateColumns: gridColumns,
|
|
47
52
|
"--label-width": labelWidth,
|
|
48
53
|
"--label-align": labelRight ? "right" : undefined,
|
|
49
|
-
}, className:
|
|
54
|
+
}, className: classNames__default("i-form", className, {
|
|
50
55
|
"i-form-inline": labelInline,
|
|
51
56
|
}), onKeyDown: handleKeyDown, ...restProps, children: children }) }));
|
|
52
57
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.js","sources":["../../../../packages/components/form/form.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport PubSub from \"pubsub-js\";\nimport { CSSProperties, useEffect, useMemo } from \"react\";\nimport Context from \"./context\";\nimport Field from \"./field\";\nimport \"./index.css\";\nimport { IForm } from \"./type\";\nimport useForm, { IFormInstance } from \"./useForm\";\n\nconst Form = (props: IForm) => {\n\tconst {\n\t\tform = {} as IFormInstance,\n\t\trules,\n\t\tinitialValues,\n\t\tstyle,\n\t\tclassName,\n\t\twidth,\n\t\tcolumns = 1,\n\t\tgap = \"1em\",\n\t\tlabelInline,\n\t\tlabelWidth,\n\t\tlabelRight,\n\t\tchildren,\n\t\tonKeyDown,\n\t\tonEnter,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tif (e.keyCode !== 13) return;\n\n\t\tonEnter?.(form.data, form);\n\t};\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns) return;\n\n\t\tif (typeof columns === \"number\")\n\t\t\treturn `minmax(0, 1fr) `.repeat(columns);\n\n\t\treturn columns;\n\t}, [columns]);\n\n\tuseEffect(() => {\n\t\tObject.assign(form, {\n\t\t\tdata: { ...initialValues },\n\t\t\trules,\n\t\t});\n\t}, [form]);\n\n\tuseEffect(() => {\n\t\tPubSub.subscribe(`${form.id}:change`, (evt, v) => {\n\t\t\tonChange?.(v.name, v.value);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${form.id}:change`);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<Context value={form}>\n\t\t\t<form\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\tgap,\n\t\t\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t\t\t\"--label-width\": labelWidth,\n\t\t\t\t\t\t\"--label-align\": labelRight ? \"right\" : undefined,\n\t\t\t\t\t} as CSSProperties\n\t\t\t\t}\n\t\t\t\tclassName={classNames(\"i-form\", className, {\n\t\t\t\t\t\"i-form-inline\": labelInline,\n\t\t\t\t})}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</form>\n\t\t</Context>\n\t);\n};\n\nForm.useForm = useForm;\nForm.Field = Field;\n\nexport default Form;\n"],"names":["useMemo","useEffect","_jsx","Context","useForm","Field"],"mappings":"
|
|
1
|
+
{"version":3,"file":"form.js","sources":["../../../../packages/components/form/form.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport PubSub from \"pubsub-js\";\nimport { CSSProperties, useEffect, useMemo } from \"react\";\nimport Context from \"./context\";\nimport Field from \"./field\";\nimport \"./index.css\";\nimport { IForm } from \"./type\";\nimport useForm, { IFormInstance } from \"./useForm\";\n\nconst Form = (props: IForm) => {\n\tconst {\n\t\tform = {} as IFormInstance,\n\t\trules,\n\t\tinitialValues,\n\t\tstyle,\n\t\tclassName,\n\t\twidth,\n\t\tcolumns = 1,\n\t\tgap = \"1em\",\n\t\tlabelInline,\n\t\tlabelWidth,\n\t\tlabelRight,\n\t\tchildren,\n\t\tonKeyDown,\n\t\tonEnter,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tif (e.keyCode !== 13) return;\n\n\t\tonEnter?.(form.data, form);\n\t};\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns) return;\n\n\t\tif (typeof columns === \"number\")\n\t\t\treturn `minmax(0, 1fr) `.repeat(columns);\n\n\t\treturn columns;\n\t}, [columns]);\n\n\tuseEffect(() => {\n\t\tObject.assign(form, {\n\t\t\tdata: { ...initialValues },\n\t\t\trules,\n\t\t});\n\t}, [form]);\n\n\tuseEffect(() => {\n\t\tPubSub.subscribe(`${form.id}:change`, (evt, v) => {\n\t\t\tonChange?.(v.name, v.value);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${form.id}:change`);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<Context value={form}>\n\t\t\t<form\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\tgap,\n\t\t\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t\t\t\"--label-width\": labelWidth,\n\t\t\t\t\t\t\"--label-align\": labelRight ? \"right\" : undefined,\n\t\t\t\t\t} as CSSProperties\n\t\t\t\t}\n\t\t\t\tclassName={classNames(\"i-form\", className, {\n\t\t\t\t\t\"i-form-inline\": labelInline,\n\t\t\t\t})}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</form>\n\t\t</Context>\n\t);\n};\n\nForm.useForm = useForm;\nForm.Field = Field;\n\nexport default Form;\n"],"names":["useMemo","useEffect","PubSub","_jsx","Context","classNames","useForm","Field"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,IAAI,GAAG,CAAC,KAAY,KAAI;AAC7B,IAAA,MAAM,EACL,IAAI,GAAG,EAAmB,EAC1B,KAAK,EACL,aAAa,EACb,KAAK,EACL,SAAS,EACT,KAAK,EACL,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,KAAK,EACX,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACZ,GAAG,KAAK;AAET,IAAA,MAAM,aAAa,GAAG,CAAC,CAAC,KAAI;AAC3B,QAAA,SAAS,GAAG,CAAC,CAAC;AAEd,QAAA,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE;YAAE;QAEtB,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;AAC3B,KAAC;AAED,IAAA,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAK;AAChC,QAAA,IAAI,CAAC,OAAO;YAAE;QAEd,IAAI,OAAO,OAAO,KAAK,QAAQ;AAC9B,YAAA,OAAO,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC;AAEzC,QAAA,OAAO,OAAO;AACf,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEbC,eAAS,CAAC,MAAK;AACd,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;AACnB,YAAA,IAAI,EAAE,EAAE,GAAG,aAAa,EAAE;YAC1B,KAAK;AACL,SAAA,CAAC;AACH,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAEVA,eAAS,CAAC,MAAK;AACd,QAAAC,eAAM,CAAC,SAAS,CAAC,CAAA,EAAG,IAAI,CAAC,EAAE,CAAS,OAAA,CAAA,EAAE,CAAC,GAAG,EAAE,CAAC,KAAI;YAChD,QAAQ,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC;AAC5B,SAAC,CAAC;AAEF,QAAA,OAAO,MAAK;YACXA,eAAM,CAAC,WAAW,CAAC,CAAA,EAAG,IAAI,CAAC,EAAE,CAAS,OAAA,CAAA,CAAC;AACxC,SAAC;KACD,EAAE,EAAE,CAAC;IAEN,QACCC,cAAC,CAAAC,eAAO,EAAC,EAAA,KAAK,EAAE,IAAI,EAAA,QAAA,EACnBD,cACC,CAAA,MAAA,EAAA,EAAA,KAAK,EACJ;AACC,gBAAA,GAAG,KAAK;gBACR,KAAK;gBACL,GAAG;AACH,gBAAA,mBAAmB,EAAE,WAAkB;AACvC,gBAAA,eAAe,EAAE,UAAU;gBAC3B,eAAe,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS;AAChC,aAAA,EAEnB,SAAS,EAAEE,mBAAU,CAAC,QAAQ,EAAE,SAAS,EAAE;AAC1C,gBAAA,eAAe,EAAE,WAAW;aAC5B,CAAC,EACF,SAAS,EAAE,aAAa,EAAA,GACpB,SAAS,EAAA,QAAA,EAEZ,QAAQ,EAAA,CACH,EACE,CAAA;AAEZ;AAEA,IAAI,CAAC,OAAO,GAAGC,eAAO;AACtB,IAAI,CAAC,KAAK,GAAGC,aAAK;;;;"}
|
|
@@ -6,6 +6,10 @@ var PubSub = require('pubsub-js');
|
|
|
6
6
|
var radash = require('radash');
|
|
7
7
|
var react = require('react');
|
|
8
8
|
|
|
9
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
10
|
+
|
|
11
|
+
var PubSub__default = /*#__PURE__*/_interopDefaultCompat(PubSub);
|
|
12
|
+
|
|
9
13
|
class IFormInstance {
|
|
10
14
|
id;
|
|
11
15
|
data = {};
|
|
@@ -25,13 +29,13 @@ class IFormInstance {
|
|
|
25
29
|
if (typeof field === "string") {
|
|
26
30
|
this.data[field] = value;
|
|
27
31
|
this.cacheData[field] = value;
|
|
28
|
-
|
|
32
|
+
PubSub__default.publish(`${id}:set:${field}`, value);
|
|
29
33
|
return;
|
|
30
34
|
}
|
|
31
35
|
Object.keys(field).map((name) => {
|
|
32
36
|
this.data[name] = field[name];
|
|
33
37
|
this.cacheData[name] = field[name];
|
|
34
|
-
|
|
38
|
+
PubSub__default.publish(`${id}:set:${name}`, field[name]);
|
|
35
39
|
});
|
|
36
40
|
}
|
|
37
41
|
delete(field) {
|
|
@@ -42,7 +46,7 @@ class IFormInstance {
|
|
|
42
46
|
return;
|
|
43
47
|
this.cacheData = {};
|
|
44
48
|
Object.keys(this.data).map((name) => {
|
|
45
|
-
|
|
49
|
+
PubSub__default.publish(`${this.id}:set:${name}`, undefined);
|
|
46
50
|
this.data[name] = undefined;
|
|
47
51
|
});
|
|
48
52
|
}
|
|
@@ -69,13 +73,13 @@ class IFormInstance {
|
|
|
69
73
|
}
|
|
70
74
|
const isValid = rule.validator?.(data[field], this);
|
|
71
75
|
if (!isValid) {
|
|
72
|
-
|
|
76
|
+
PubSub__default.publish(`${id}:invalid:${field}`, {
|
|
73
77
|
message: rule.message,
|
|
74
78
|
status: "error",
|
|
75
79
|
});
|
|
76
80
|
return false;
|
|
77
81
|
}
|
|
78
|
-
|
|
82
|
+
PubSub__default.publish(`${id}:invalid:${name}`, {
|
|
79
83
|
message: null,
|
|
80
84
|
status: "normal",
|
|
81
85
|
});
|
|
@@ -101,14 +105,14 @@ class IFormInstance {
|
|
|
101
105
|
}
|
|
102
106
|
const isValid = rule.validator?.(data[name], this);
|
|
103
107
|
if (!isValid) {
|
|
104
|
-
|
|
108
|
+
PubSub__default.publish(`${id}:invalid:${name}`, {
|
|
105
109
|
message: rule.message,
|
|
106
110
|
status: "error",
|
|
107
111
|
});
|
|
108
112
|
isAllValid = false;
|
|
109
113
|
}
|
|
110
114
|
else {
|
|
111
|
-
|
|
115
|
+
PubSub__default.publish(`${id}:invalid:${name}`, {
|
|
112
116
|
message: null,
|
|
113
117
|
status: "normal",
|
|
114
118
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.js","sources":["../../../../packages/components/form/useForm.ts"],"sourcesContent":["import PubSub from \"pubsub-js\";\nimport { uid } from \"radash\";\nimport { useRef } from \"react\";\nimport { IForm, TRule } from \"./type\";\n\nexport class IFormInstance {\n\treadonly id?: string;\n\tdata: Record<string, any> = {};\n\tcacheData: Record<string, any> = {};\n\trules?: Pick<IForm, \"rules\"> = {};\n\n\tconstructor() {\n\t\tthis.id = uid(8);\n\t\tthis.data = {};\n\t}\n\n\tget(field?: string) {\n\t\treturn field ? this.data[field] : this.data;\n\t}\n\n\tset(field: any, value?: any) {\n\t\tconst id = this.id;\n\t\tif (!this.data) return;\n\n\t\tif (typeof field === \"string\") {\n\t\t\tthis.data[field] = value;\n\t\t\tthis.cacheData[field] = value;\n\t\t\tPubSub.publish(`${id}:set:${field}`, value);\n\t\t\treturn;\n\t\t}\n\n\t\tObject.keys(field).map((name) => {\n\t\t\tthis.data[name] = field[name];\n\t\t\tthis.cacheData[name] = field[name];\n\t\t\tPubSub.publish(`${id}:set:${name}`, field[name]);\n\t\t});\n\t}\n\n\tdelete(field) {\n\t\tdelete this.data[field];\n\t}\n\n\tclear() {\n\t\tif (!this.data) return;\n\t\tthis.cacheData = {};\n\n\t\tObject.keys(this.data).map((name) => {\n\t\t\tPubSub.publish(`${this.id}:set:${name}`, undefined);\n\t\t\tthis.data[name] = undefined;\n\t\t});\n\t}\n\n\tasync validate(field?: string) {\n\t\tconst { id, rules, data } = this;\n\t\tif (!rules) return data;\n\n\t\tif (field) {\n\t\t\tconst o = rules[field];\n\t\t\tconst rule: TRule = {\n\t\t\t\tvalidator: (v) =>\n\t\t\t\t\tArray.isArray(v)\n\t\t\t\t\t\t? v.length > 0\n\t\t\t\t\t\t: ![undefined, null, \"\"].includes(v),\n\t\t\t\tmessage: undefined,\n\t\t\t};\n\n\t\t\tif (typeof o === \"function\") {\n\t\t\t\trule.validator = o;\n\t\t\t} else if (o === true) {\n\t\t\t\trule.message = \"required\";\n\t\t\t} else {\n\t\t\t\tObject.assign(rule, o);\n\t\t\t}\n\n\t\t\tconst isValid = rule.validator?.(data[field], this);\n\n\t\t\tif (!isValid) {\n\t\t\t\tPubSub.publish(`${id}:invalid:${field}`, {\n\t\t\t\t\tmessage: rule.message,\n\t\t\t\t\tstatus: \"error\",\n\t\t\t\t});\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tPubSub.publish(`${id}:invalid:${name}`, {\n\t\t\t\tmessage: null,\n\t\t\t\tstatus: \"normal\",\n\t\t\t});\n\t\t\treturn true;\n\t\t}\n\n\t\tlet isAllValid = true;\n\n\t\tObject.keys(data).map((name) => {\n\t\t\tconst o = rules[name];\n\t\t\tif (o === undefined) return;\n\n\t\t\tconst rule: TRule = {\n\t\t\t\tvalidator: (v) => (Array.isArray(v) ? v.length > 0 : !!v),\n\t\t\t\tmessage: undefined,\n\t\t\t};\n\n\t\t\tif (typeof o === \"function\") {\n\t\t\t\trule.validator = o;\n\t\t\t} else if (o === true) {\n\t\t\t\trule.message = \"required\";\n\t\t\t} else {\n\t\t\t\tObject.assign(rule, o);\n\t\t\t}\n\n\t\t\tconst isValid = rule.validator?.(data[name], this);\n\n\t\t\tif (!isValid) {\n\t\t\t\tPubSub.publish(`${id}:invalid:${name}`, {\n\t\t\t\t\tmessage: rule.message,\n\t\t\t\t\tstatus: \"error\",\n\t\t\t\t});\n\t\t\t\tisAllValid = false;\n\t\t\t} else {\n\t\t\t\tPubSub.publish(`${id}:invalid:${name}`, {\n\t\t\t\t\tmessage: null,\n\t\t\t\t\tstatus: \"normal\",\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\treturn isAllValid ? Promise.resolve(data) : false;\n\t}\n}\n\nexport default function useForm(form?: IFormInstance) {\n\tconst formRef = useRef<IFormInstance>(null);\n\n\tif (!formRef.current) {\n\t\tformRef.current = form ?? new IFormInstance();\n\t}\n\n\treturn formRef.current;\n}\n"],"names":["uid","useRef"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useForm.js","sources":["../../../../packages/components/form/useForm.ts"],"sourcesContent":["import PubSub from \"pubsub-js\";\nimport { uid } from \"radash\";\nimport { useRef } from \"react\";\nimport { IForm, TRule } from \"./type\";\n\nexport class IFormInstance {\n\treadonly id?: string;\n\tdata: Record<string, any> = {};\n\tcacheData: Record<string, any> = {};\n\trules?: Pick<IForm, \"rules\"> = {};\n\n\tconstructor() {\n\t\tthis.id = uid(8);\n\t\tthis.data = {};\n\t}\n\n\tget(field?: string) {\n\t\treturn field ? this.data[field] : this.data;\n\t}\n\n\tset(field: any, value?: any) {\n\t\tconst id = this.id;\n\t\tif (!this.data) return;\n\n\t\tif (typeof field === \"string\") {\n\t\t\tthis.data[field] = value;\n\t\t\tthis.cacheData[field] = value;\n\t\t\tPubSub.publish(`${id}:set:${field}`, value);\n\t\t\treturn;\n\t\t}\n\n\t\tObject.keys(field).map((name) => {\n\t\t\tthis.data[name] = field[name];\n\t\t\tthis.cacheData[name] = field[name];\n\t\t\tPubSub.publish(`${id}:set:${name}`, field[name]);\n\t\t});\n\t}\n\n\tdelete(field) {\n\t\tdelete this.data[field];\n\t}\n\n\tclear() {\n\t\tif (!this.data) return;\n\t\tthis.cacheData = {};\n\n\t\tObject.keys(this.data).map((name) => {\n\t\t\tPubSub.publish(`${this.id}:set:${name}`, undefined);\n\t\t\tthis.data[name] = undefined;\n\t\t});\n\t}\n\n\tasync validate(field?: string) {\n\t\tconst { id, rules, data } = this;\n\t\tif (!rules) return data;\n\n\t\tif (field) {\n\t\t\tconst o = rules[field];\n\t\t\tconst rule: TRule = {\n\t\t\t\tvalidator: (v) =>\n\t\t\t\t\tArray.isArray(v)\n\t\t\t\t\t\t? v.length > 0\n\t\t\t\t\t\t: ![undefined, null, \"\"].includes(v),\n\t\t\t\tmessage: undefined,\n\t\t\t};\n\n\t\t\tif (typeof o === \"function\") {\n\t\t\t\trule.validator = o;\n\t\t\t} else if (o === true) {\n\t\t\t\trule.message = \"required\";\n\t\t\t} else {\n\t\t\t\tObject.assign(rule, o);\n\t\t\t}\n\n\t\t\tconst isValid = rule.validator?.(data[field], this);\n\n\t\t\tif (!isValid) {\n\t\t\t\tPubSub.publish(`${id}:invalid:${field}`, {\n\t\t\t\t\tmessage: rule.message,\n\t\t\t\t\tstatus: \"error\",\n\t\t\t\t});\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tPubSub.publish(`${id}:invalid:${name}`, {\n\t\t\t\tmessage: null,\n\t\t\t\tstatus: \"normal\",\n\t\t\t});\n\t\t\treturn true;\n\t\t}\n\n\t\tlet isAllValid = true;\n\n\t\tObject.keys(data).map((name) => {\n\t\t\tconst o = rules[name];\n\t\t\tif (o === undefined) return;\n\n\t\t\tconst rule: TRule = {\n\t\t\t\tvalidator: (v) => (Array.isArray(v) ? v.length > 0 : !!v),\n\t\t\t\tmessage: undefined,\n\t\t\t};\n\n\t\t\tif (typeof o === \"function\") {\n\t\t\t\trule.validator = o;\n\t\t\t} else if (o === true) {\n\t\t\t\trule.message = \"required\";\n\t\t\t} else {\n\t\t\t\tObject.assign(rule, o);\n\t\t\t}\n\n\t\t\tconst isValid = rule.validator?.(data[name], this);\n\n\t\t\tif (!isValid) {\n\t\t\t\tPubSub.publish(`${id}:invalid:${name}`, {\n\t\t\t\t\tmessage: rule.message,\n\t\t\t\t\tstatus: \"error\",\n\t\t\t\t});\n\t\t\t\tisAllValid = false;\n\t\t\t} else {\n\t\t\t\tPubSub.publish(`${id}:invalid:${name}`, {\n\t\t\t\t\tmessage: null,\n\t\t\t\t\tstatus: \"normal\",\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\treturn isAllValid ? Promise.resolve(data) : false;\n\t}\n}\n\nexport default function useForm(form?: IFormInstance) {\n\tconst formRef = useRef<IFormInstance>(null);\n\n\tif (!formRef.current) {\n\t\tformRef.current = form ?? new IFormInstance();\n\t}\n\n\treturn formRef.current;\n}\n"],"names":["uid","PubSub","useRef"],"mappings":"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"}
|
|
@@ -5,6 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var classNames = require('classnames');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
|
|
8
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
9
|
+
|
|
10
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
11
|
+
|
|
8
12
|
const Icon = (props) => {
|
|
9
13
|
const { ref, icon, size = "1.425em", rotate, style, className, ...restProps } = props;
|
|
10
14
|
if (!react.isValidElement(icon))
|
|
@@ -17,7 +21,7 @@ const Icon = (props) => {
|
|
|
17
21
|
width: size,
|
|
18
22
|
height: size,
|
|
19
23
|
},
|
|
20
|
-
className:
|
|
24
|
+
className: classNames__default("i-icon", className),
|
|
21
25
|
...restProps,
|
|
22
26
|
};
|
|
23
27
|
return react.cloneElement(icon, iconProps);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.js","sources":["../../../../packages/components/icon/icon.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { cloneElement, isValidElement } from \"react\";\nimport \"./index.css\";\nimport { IIcon } from \"./type\";\n\nconst Icon = (props: IIcon) => {\n\tconst {\n\t\tref,\n\t\ticon,\n\t\tsize = \"1.425em\",\n\t\trotate,\n\t\tstyle,\n\t\tclassName,\n\t\t...restProps\n\t} = props;\n\n\tif (!isValidElement(icon)) return icon;\n\n\tconst iconProps = {\n\t\tref,\n\t\tstyle: {\n\t\t\ttransform: rotate ? `rotate(${rotate}deg)` : undefined,\n\t\t\t...style,\n\t\t\twidth: size,\n\t\t\theight: size,\n\t\t},\n\t\tclassName: classNames(\"i-icon\", className),\n\t\t...restProps,\n\t};\n\n\treturn cloneElement(icon, iconProps);\n};\n\nexport default Icon;\n"],"names":["isValidElement","cloneElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"icon.js","sources":["../../../../packages/components/icon/icon.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { cloneElement, isValidElement } from \"react\";\nimport \"./index.css\";\nimport { IIcon } from \"./type\";\n\nconst Icon = (props: IIcon) => {\n\tconst {\n\t\tref,\n\t\ticon,\n\t\tsize = \"1.425em\",\n\t\trotate,\n\t\tstyle,\n\t\tclassName,\n\t\t...restProps\n\t} = props;\n\n\tif (!isValidElement(icon)) return icon;\n\n\tconst iconProps = {\n\t\tref,\n\t\tstyle: {\n\t\t\ttransform: rotate ? `rotate(${rotate}deg)` : undefined,\n\t\t\t...style,\n\t\t\twidth: size,\n\t\t\theight: size,\n\t\t},\n\t\tclassName: classNames(\"i-icon\", className),\n\t\t...restProps,\n\t};\n\n\treturn cloneElement(icon, iconProps);\n};\n\nexport default Icon;\n"],"names":["isValidElement","classNames","cloneElement"],"mappings":";;;;;;;;;;;AAKA,MAAM,IAAI,GAAG,CAAC,KAAY,KAAI;IAC7B,MAAM,EACL,GAAG,EACH,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,MAAM,EACN,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACZ,GAAG,KAAK;AAET,IAAA,IAAI,CAACA,oBAAc,CAAC,IAAI,CAAC;AAAE,QAAA,OAAO,IAAI;AAEtC,IAAA,MAAM,SAAS,GAAG;QACjB,GAAG;AACH,QAAA,KAAK,EAAE;YACN,SAAS,EAAE,MAAM,GAAG,CAAU,OAAA,EAAA,MAAM,CAAM,IAAA,CAAA,GAAG,SAAS;AACtD,YAAA,GAAG,KAAK;AACR,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,MAAM,EAAE,IAAI;AACZ,SAAA;AACD,QAAA,SAAS,EAAEC,mBAAU,CAAC,QAAQ,EAAE,SAAS,CAAC;AAC1C,QAAA,GAAG,SAAS;KACZ;AAED,IAAA,OAAOC,kBAAY,CAAC,IAAI,EAAE,SAAS,CAAC;AACrC;;;;"}
|
|
@@ -12,6 +12,10 @@ var index = require('../../js/usePreview/index.js');
|
|
|
12
12
|
var icon = require('../icon/icon.js');
|
|
13
13
|
var loading = require('../loading/loading.js');
|
|
14
14
|
|
|
15
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
16
|
+
|
|
17
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
18
|
+
|
|
15
19
|
const Image = (props) => {
|
|
16
20
|
const { src, round, size, initSize, lazyload, fallback = (jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.HideImageTwotone, {}), size: '2em', className: 'color-5' })), fit, style, className, cover, coverClass, usePreview: previewable, onLoad, onError, onClick, ...restProps } = props;
|
|
17
21
|
const state = ahooks.useReactive({
|
|
@@ -66,10 +70,10 @@ const Image = (props) => {
|
|
|
66
70
|
width: size ?? iSize,
|
|
67
71
|
height: size ?? iSize,
|
|
68
72
|
...style,
|
|
69
|
-
}, className:
|
|
73
|
+
}, className: classNames__default("i-image", className, {
|
|
70
74
|
rounded: round,
|
|
71
75
|
[`i-image-${state.status}`]: state.status,
|
|
72
|
-
}), children: state.status === "error" ? (fallback) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [src && (jsxRuntime.jsx("img", { ref: ref, style: { objectFit: fit, width: wh, height: wh }, ...restProps, onLoad: handleLoad, onError: handleError, onClick: handleClick })), src && state.status === "loading" && jsxRuntime.jsx(loading.default, { absolute: true }), cover && (jsxRuntime.jsx("div", { className:
|
|
76
|
+
}), children: state.status === "error" ? (fallback) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [src && (jsxRuntime.jsx("img", { ref: ref, style: { objectFit: fit, width: wh, height: wh }, ...restProps, onLoad: handleLoad, onError: handleError, onClick: handleClick })), src && state.status === "loading" && jsxRuntime.jsx(loading.default, { absolute: true }), cover && (jsxRuntime.jsx("div", { className: classNames__default("i-image-cover", coverClass), onClick: handleClick, children: cover }))] })) }));
|
|
73
77
|
};
|
|
74
78
|
|
|
75
79
|
exports.default = Image;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.js","sources":["../../../../packages/components/image/image.tsx"],"sourcesContent":["import { HideImageTwotone } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { useEffect, useRef } from \"react\";\nimport { useIntersectionObserver } from \"../../js/hooks\";\nimport usePreview from \"../../js/usePreview\";\nimport Icon from \"../icon\";\nimport Loading from \"../loading\";\nimport \"./index.css\";\nimport type { CompositionImage, IImage } from \"./type\";\n\nconst Image = (props: IImage) => {\n\tconst {\n\t\tsrc,\n\t\tround,\n\t\tsize,\n\t\tinitSize,\n\t\tlazyload,\n\t\tfallback = (\n\t\t\t<Icon icon={<HideImageTwotone />} size='2em' className='color-5' />\n\t\t),\n\t\tfit,\n\t\tstyle,\n\t\tclassName,\n\t\tcover,\n\t\tcoverClass,\n\t\tusePreview: previewable,\n\t\tonLoad,\n\t\tonError,\n\t\tonClick,\n\t\t...restProps\n\t} = props;\n\n\tconst state = useReactive<{ status?: string }>({\n\t\tstatus: \"loading\",\n\t});\n\tconst ref = useRef<HTMLImageElement>(null);\n\tconst wh = fit ? \"100%\" : undefined;\n\n\tconst { observe, unobserve } = useIntersectionObserver();\n\tconst preview = usePreview();\n\n\tconst handleError = (err) => {\n\t\tonError?.(err);\n\t\tstate.status = \"error\";\n\t};\n\n\tconst handleLoad = (e) => {\n\t\tonLoad?.(e);\n\t\tstate.status = undefined;\n\t};\n\n\tconst handleClick = (e) => {\n\t\tonClick?.(e);\n\n\t\tpreviewable &&\n\t\t\tsrc &&\n\t\t\tpreview({\n\t\t\t\titems: [\n\t\t\t\t\t{\n\t\t\t\t\t\tsrc,\n\t\t\t\t\t\ttype: \"IMAGE\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (!src) return;\n\n\t\tif (!ref.current?.complete) {\n\t\t\tstate.status = \"loading\";\n\t\t}\n\n\t\tif (!lazyload || !ref.current) return;\n\n\t\tobserve(ref.current, (tar: HTMLElement, visible: boolean) => {\n\t\t\tif (!visible) return;\n\n\t\t\ttar.setAttribute(\"src\", tar.dataset.src || \"\");\n\t\t\tunobserve(tar);\n\t\t});\n\n\t\treturn () => {\n\t\t\tref.current && unobserve(ref.current);\n\t\t};\n\t}, [src]);\n\n\trestProps[lazyload ? \"data-src\" : \"src\"] = src;\n\tconst iSize = state.status === \"loading\" ? initSize : undefined;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\twidth: size ?? iSize,\n\t\t\t\theight: size ?? iSize,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\tclassName={classNames(\"i-image\", className, {\n\t\t\t\trounded: round,\n\t\t\t\t[`i-image-${state.status}`]: state.status,\n\t\t\t})}\n\t\t>\n\t\t\t{state.status === \"error\" ? (\n\t\t\t\tfallback\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{src && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\tstyle={{ objectFit: fit, width: wh, height: wh }}\n\t\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t\t\tonLoad={handleLoad}\n\t\t\t\t\t\t\tonError={handleError}\n\t\t\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{src && state.status === \"loading\" && <Loading absolute />}\n\n\t\t\t\t\t{cover && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={classNames(\"i-image-cover\", coverClass)}\n\t\t\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cover}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Image as CompositionImage;\n"],"names":["_jsx","Icon","HideImageTwotone","useReactive","useRef","useIntersectionObserver","usePreview","useEffect","_jsxs","Loading"],"mappings":"
|
|
1
|
+
{"version":3,"file":"image.js","sources":["../../../../packages/components/image/image.tsx"],"sourcesContent":["import { HideImageTwotone } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { useEffect, useRef } from \"react\";\nimport { useIntersectionObserver } from \"../../js/hooks\";\nimport usePreview from \"../../js/usePreview\";\nimport Icon from \"../icon\";\nimport Loading from \"../loading\";\nimport \"./index.css\";\nimport type { CompositionImage, IImage } from \"./type\";\n\nconst Image = (props: IImage) => {\n\tconst {\n\t\tsrc,\n\t\tround,\n\t\tsize,\n\t\tinitSize,\n\t\tlazyload,\n\t\tfallback = (\n\t\t\t<Icon icon={<HideImageTwotone />} size='2em' className='color-5' />\n\t\t),\n\t\tfit,\n\t\tstyle,\n\t\tclassName,\n\t\tcover,\n\t\tcoverClass,\n\t\tusePreview: previewable,\n\t\tonLoad,\n\t\tonError,\n\t\tonClick,\n\t\t...restProps\n\t} = props;\n\n\tconst state = useReactive<{ status?: string }>({\n\t\tstatus: \"loading\",\n\t});\n\tconst ref = useRef<HTMLImageElement>(null);\n\tconst wh = fit ? \"100%\" : undefined;\n\n\tconst { observe, unobserve } = useIntersectionObserver();\n\tconst preview = usePreview();\n\n\tconst handleError = (err) => {\n\t\tonError?.(err);\n\t\tstate.status = \"error\";\n\t};\n\n\tconst handleLoad = (e) => {\n\t\tonLoad?.(e);\n\t\tstate.status = undefined;\n\t};\n\n\tconst handleClick = (e) => {\n\t\tonClick?.(e);\n\n\t\tpreviewable &&\n\t\t\tsrc &&\n\t\t\tpreview({\n\t\t\t\titems: [\n\t\t\t\t\t{\n\t\t\t\t\t\tsrc,\n\t\t\t\t\t\ttype: \"IMAGE\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (!src) return;\n\n\t\tif (!ref.current?.complete) {\n\t\t\tstate.status = \"loading\";\n\t\t}\n\n\t\tif (!lazyload || !ref.current) return;\n\n\t\tobserve(ref.current, (tar: HTMLElement, visible: boolean) => {\n\t\t\tif (!visible) return;\n\n\t\t\ttar.setAttribute(\"src\", tar.dataset.src || \"\");\n\t\t\tunobserve(tar);\n\t\t});\n\n\t\treturn () => {\n\t\t\tref.current && unobserve(ref.current);\n\t\t};\n\t}, [src]);\n\n\trestProps[lazyload ? \"data-src\" : \"src\"] = src;\n\tconst iSize = state.status === \"loading\" ? initSize : undefined;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\twidth: size ?? iSize,\n\t\t\t\theight: size ?? iSize,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\tclassName={classNames(\"i-image\", className, {\n\t\t\t\trounded: round,\n\t\t\t\t[`i-image-${state.status}`]: state.status,\n\t\t\t})}\n\t\t>\n\t\t\t{state.status === \"error\" ? (\n\t\t\t\tfallback\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{src && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\tstyle={{ objectFit: fit, width: wh, height: wh }}\n\t\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t\t\tonLoad={handleLoad}\n\t\t\t\t\t\t\tonError={handleError}\n\t\t\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{src && state.status === \"loading\" && <Loading absolute />}\n\n\t\t\t\t\t{cover && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={classNames(\"i-image-cover\", coverClass)}\n\t\t\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cover}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Image as CompositionImage;\n"],"names":["_jsx","Icon","HideImageTwotone","useReactive","useRef","useIntersectionObserver","usePreview","useEffect","classNames","_jsxs","Loading"],"mappings":"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"}
|
|
@@ -5,11 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var classNames = require('classnames');
|
|
7
7
|
|
|
8
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
9
|
+
|
|
10
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
11
|
+
|
|
8
12
|
function InputContainer(props) {
|
|
9
13
|
const { as: As = "label", label, className, labelInline, style, children, status, tip, required, } = props;
|
|
10
|
-
return (jsxRuntime.jsxs(As, { className:
|
|
14
|
+
return (jsxRuntime.jsxs(As, { className: classNames__default("i-input-label", className, {
|
|
11
15
|
"i-input-inline": labelInline,
|
|
12
|
-
}), style: style, children: [label && (jsxRuntime.jsxs("span", { className: 'i-input-label-text', children: [required && jsxRuntime.jsx("span", { className: 'error', children: "*" }), label] })), children, tip && (jsxRuntime.jsx("span", { className:
|
|
16
|
+
}), style: style, children: [label && (jsxRuntime.jsxs("span", { className: 'i-input-label-text', children: [required && jsxRuntime.jsx("span", { className: 'error', children: "*" }), label] })), children, tip && (jsxRuntime.jsx("span", { className: classNames__default("i-input-message", {
|
|
13
17
|
[`i-input-${status}`]: status !== "normal",
|
|
14
18
|
}), children: tip }))] }));
|
|
15
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.js","sources":["../../../../packages/components/input/container.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { IInputContainer } from \"./type\";\n\nexport default function InputContainer(props: IInputContainer) {\n\tconst {\n\t\tas: As = \"label\",\n\t\tlabel,\n\t\tclassName,\n\t\tlabelInline,\n\t\tstyle,\n\t\tchildren,\n\t\tstatus,\n\t\ttip,\n\t\trequired,\n\t} = props;\n\n\treturn (\n\t\t<As\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<span className='i-input-label-text'>\n\t\t\t\t\t{required && <span className='error'>*</span>}\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t)}\n\n\t\t\t{children}\n\n\t\t\t{tip && (\n\t\t\t\t<span\n\t\t\t\t\tclassName={classNames(\"i-input-message\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{tip}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</As>\n\t);\n}\n"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"container.js","sources":["../../../../packages/components/input/container.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { IInputContainer } from \"./type\";\n\nexport default function InputContainer(props: IInputContainer) {\n\tconst {\n\t\tas: As = \"label\",\n\t\tlabel,\n\t\tclassName,\n\t\tlabelInline,\n\t\tstyle,\n\t\tchildren,\n\t\tstatus,\n\t\ttip,\n\t\trequired,\n\t} = props;\n\n\treturn (\n\t\t<As\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<span className='i-input-label-text'>\n\t\t\t\t\t{required && <span className='error'>*</span>}\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t)}\n\n\t\t\t{children}\n\n\t\t\t{tip && (\n\t\t\t\t<span\n\t\t\t\t\tclassName={classNames(\"i-input-message\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{tip}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</As>\n\t);\n}\n"],"names":["_jsxs","classNames","_jsx"],"mappings":";;;;;;;;;;;AAGwB,SAAA,cAAc,CAAC,KAAsB,EAAA;IAC5D,MAAM,EACL,EAAE,EAAE,EAAE,GAAG,OAAO,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,QAAQ,GACR,GAAG,KAAK;IAET,QACCA,eAAC,CAAA,EAAE,EACF,EAAA,SAAS,EAAEC,mBAAU,CAAC,eAAe,EAAE,SAAS,EAAE;AACjD,YAAA,gBAAgB,EAAE,WAAW;AAC7B,SAAA,CAAC,EACF,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAEX,KAAK,KACLD,eAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAClC,QAAQ,IAAIE,yBAAM,SAAS,EAAC,OAAO,EAAA,QAAA,EAAA,GAAA,EAAA,CAAS,EAC5C,KAAK,CAAA,EAAA,CACA,CACP,EAEA,QAAQ,EAER,GAAG,KACHA,yBACC,SAAS,EAAED,mBAAU,CAAC,iBAAiB,EAAE;AACxC,oBAAA,CAAC,WAAW,MAAM,CAAA,CAAE,GAAG,MAAM,KAAK,QAAQ;AAC1C,iBAAA,CAAC,YAED,GAAG,EAAA,CACE,CACP,CAAA,EAAA,CACG;AAEP;;;;"}
|