@alifd/chat 0.3.0-beta.0 → 0.3.0-beta.10

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.
Files changed (87) hide show
  1. package/es/core/variables.scss +25 -0
  2. package/es/drawer/index.d.ts +60 -0
  3. package/es/drawer/index.js +29 -0
  4. package/es/drawer/main.scss +20 -0
  5. package/es/drawer/style.d.ts +2 -0
  6. package/es/drawer/style.js +2 -0
  7. package/es/drawer/types.d.ts +10 -0
  8. package/es/{HTMLRenderer → html-render}/index.js +3 -3
  9. package/{lib/HTMLRenderer → es/html-render}/main.scss +3 -1
  10. package/es/image-preview/types.js +1 -0
  11. package/es/index.d.ts +5 -2
  12. package/es/index.js +6 -3
  13. package/es/loading/index.d.ts +60 -0
  14. package/es/loading/index.js +29 -0
  15. package/es/loading/main.scss +227 -0
  16. package/es/loading/style.d.ts +2 -0
  17. package/es/loading/style.js +2 -0
  18. package/es/loading/types.d.ts +8 -0
  19. package/es/loading/types.js +1 -0
  20. package/es/markdown/index.js +52 -10
  21. package/es/markdown/main.scss +152 -104
  22. package/es/markdown/style.d.ts +1 -1
  23. package/es/markdown/style.js +1 -1
  24. package/es/origin/index.d.ts +11 -0
  25. package/es/origin/index.js +19 -0
  26. package/es/origin/main.scss +18 -0
  27. package/es/origin/types.d.ts +12 -0
  28. package/es/origin/types.js +1 -0
  29. package/lib/core/variables.scss +25 -0
  30. package/lib/drawer/index.d.ts +60 -0
  31. package/lib/drawer/index.js +31 -0
  32. package/lib/drawer/main.scss +20 -0
  33. package/lib/drawer/style.d.ts +2 -0
  34. package/lib/drawer/style.js +4 -0
  35. package/lib/drawer/types.d.ts +10 -0
  36. package/lib/{HTMLRenderer → html-render}/index.js +3 -3
  37. package/{es/HTMLRenderer → lib/html-render}/main.scss +3 -1
  38. package/lib/html-render/style.d.ts +1 -0
  39. package/lib/image-preview/style.d.ts +1 -0
  40. package/lib/image-preview/types.js +2 -0
  41. package/lib/index.d.ts +5 -2
  42. package/lib/index.js +12 -6
  43. package/lib/loading/index.d.ts +60 -0
  44. package/lib/loading/index.js +31 -0
  45. package/lib/loading/main.scss +227 -0
  46. package/lib/loading/style.d.ts +2 -0
  47. package/lib/loading/style.js +4 -0
  48. package/lib/loading/types.d.ts +8 -0
  49. package/lib/loading/types.js +2 -0
  50. package/lib/markdown/index.js +52 -10
  51. package/lib/markdown/main.scss +152 -104
  52. package/lib/markdown/style.d.ts +1 -1
  53. package/lib/markdown/style.js +1 -1
  54. package/lib/origin/index.d.ts +11 -0
  55. package/lib/origin/index.js +22 -0
  56. package/lib/origin/main.scss +18 -0
  57. package/lib/origin/style.d.ts +1 -0
  58. package/lib/origin/style.js +3 -0
  59. package/lib/origin/types.d.ts +12 -0
  60. package/lib/origin/types.js +2 -0
  61. package/package.json +73 -13
  62. package/es/HTMLRenderer/index.less +0 -194
  63. package/lib/HTMLRenderer/index.less +0 -194
  64. /package/es/{HTMLRenderer → drawer}/types.js +0 -0
  65. /package/es/{HTMLRenderer → html-render}/index.d.ts +0 -0
  66. /package/es/{HTMLRenderer → html-render}/style.d.ts +0 -0
  67. /package/es/{HTMLRenderer → html-render}/style.js +0 -0
  68. /package/es/{HTMLRenderer → html-render}/types.d.ts +0 -0
  69. /package/es/{ImagePreview → html-render}/types.js +0 -0
  70. /package/es/{ImagePreview → image-preview}/index.d.ts +0 -0
  71. /package/es/{ImagePreview → image-preview}/index.js +0 -0
  72. /package/es/{ImagePreview → image-preview}/main.scss +0 -0
  73. /package/es/{ImagePreview → image-preview}/style.d.ts +0 -0
  74. /package/es/{ImagePreview → image-preview}/style.js +0 -0
  75. /package/es/{ImagePreview → image-preview}/types.d.ts +0 -0
  76. /package/{lib/HTMLRenderer → es/origin}/style.d.ts +0 -0
  77. /package/{lib/ImagePreview/style.d.ts → es/origin/style.js} +0 -0
  78. /package/lib/{HTMLRenderer → drawer}/types.js +0 -0
  79. /package/lib/{HTMLRenderer → html-render}/index.d.ts +0 -0
  80. /package/lib/{HTMLRenderer → html-render}/style.js +0 -0
  81. /package/lib/{HTMLRenderer → html-render}/types.d.ts +0 -0
  82. /package/lib/{ImagePreview → html-render}/types.js +0 -0
  83. /package/lib/{ImagePreview → image-preview}/index.d.ts +0 -0
  84. /package/lib/{ImagePreview → image-preview}/index.js +0 -0
  85. /package/lib/{ImagePreview → image-preview}/main.scss +0 -0
  86. /package/lib/{ImagePreview → image-preview}/style.js +0 -0
  87. /package/lib/{ImagePreview → image-preview}/types.d.ts +0 -0
@@ -5,6 +5,9 @@ $size-base: 4px !default;
5
5
  $shadow-1: 1px 1px 4px 0px rgba(0, 0, 0, 0.16) !default;
6
6
  $shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
7
7
 
8
+ $font-size-display-3: var(--font-size-display-3, 56px) !default;
9
+ $font-size-display-2: var(--font-size-display-2, 48px) !default;
10
+
8
11
  $font-size-headline: var(--font-size-headline, 24px) !default;
9
12
  $font-size-title: var(--font-size-title, 20px) !default;
10
13
  $font-size-subhead: var(--font-size-subhead, 16px) !default;
@@ -32,4 +35,26 @@ $color-line1-3: var(--color-line1-3, #c4c6cf) !default;
32
35
  /// 重
33
36
  $color-line1-4: var(--color-line1-4, #a0a2ad) !default;
34
37
 
38
+ $color-brand1-1: var(--color-brand1-1, #DEE8FF) !default;
39
+
40
+ $color-fill1-2: var(--color-fill1-2, #f2f3f7) !default;
41
+
42
+ $color-fill1-1: var(--color-fill1-1, #030b35) !default;
43
+
44
+ $color-data1-1: var(--color-data1-1, #DEE8FF) !default; // ??
45
+
46
+ $color-data1-2: var(--color-data1-2, #007FFF) !default; // blue
47
+
48
+ $color-data1-3: var(--color-data1-3, #B963D3) !default; // purple
49
+
50
+ $color-data1-4: var(--color-data1-4, #FF5219) !default; // red
51
+
52
+ $color-data1-5: var(--color-data1-5, #FF9200) !default; // orange
53
+
54
+ $color-data1-6: var(--color-data1-6, #F4C800) !default; // yellow
55
+
56
+ $color-data1-7: var(--color-data1-7, #77912b) !default; // ?
57
+
58
+ $color-data1-8: var(--color-data1-8, #4fae51) !default; // water
35
59
 
60
+ $color-data1-9: var(--color-data1-9, #da5388) !default; // ?
@@ -0,0 +1,60 @@
1
+ /**
2
+ * @component 抽屉
3
+ * @en Drawer
4
+ * * @remarks 同 Next Drawer- Same as Next Drawer component.
5
+ * @type 通用 - General
6
+ * @when
7
+ */
8
+ import React from 'react';
9
+ import type { DrawerProps } from './types';
10
+ export * from './types';
11
+ declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<DrawerProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/drawer").DrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
12
+ render(): React.JSX.Element;
13
+ context: any;
14
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/drawer").DrawerProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
15
+ forceUpdate(callback?: (() => void) | undefined): void;
16
+ readonly props: Readonly<import("@alifd/next/types/drawer").DrawerProps> & Readonly<{
17
+ children?: React.ReactNode | undefined;
18
+ }>;
19
+ state: Readonly<{}>;
20
+ refs: {
21
+ [key: string]: React.ReactInstance;
22
+ };
23
+ componentDidMount?(): void;
24
+ shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): boolean;
25
+ componentWillUnmount?(): void;
26
+ componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
27
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, prevState: Readonly<{}>): any;
28
+ componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, prevState: Readonly<{}>, snapshot?: any): void;
29
+ componentWillMount?(): void;
30
+ UNSAFE_componentWillMount?(): void;
31
+ componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextContext: any): void;
32
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextContext: any): void;
33
+ componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): void;
34
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): void;
35
+ }>>, "key" | keyof DrawerProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/drawer").DrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
36
+ render(): React.JSX.Element;
37
+ context: any;
38
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/drawer").DrawerProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
39
+ forceUpdate(callback?: (() => void) | undefined): void;
40
+ readonly props: Readonly<import("@alifd/next/types/drawer").DrawerProps> & Readonly<{
41
+ children?: React.ReactNode | undefined;
42
+ }>;
43
+ state: Readonly<{}>;
44
+ refs: {
45
+ [key: string]: React.ReactInstance;
46
+ };
47
+ componentDidMount?(): void;
48
+ shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): boolean;
49
+ componentWillUnmount?(): void;
50
+ componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
51
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, prevState: Readonly<{}>): any;
52
+ componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, prevState: Readonly<{}>, snapshot?: any): void;
53
+ componentWillMount?(): void;
54
+ UNSAFE_componentWillMount?(): void;
55
+ componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextContext: any): void;
56
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextContext: any): void;
57
+ componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): void;
58
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): void;
59
+ }>, {}>;
60
+ export default _default;
@@ -0,0 +1,29 @@
1
+ /**
2
+ * @component 抽屉
3
+ * @en Drawer
4
+ * * @remarks 同 Next Drawer- Same as Next Drawer component.
5
+ * @type 通用 - General
6
+ * @when
7
+ */
8
+ import { __rest } from "tslib";
9
+ import React, { forwardRef } from 'react';
10
+ import { Drawer as NextDrawer, ConfigProvider } from '@alifd/next';
11
+ import cs from 'classnames';
12
+ import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
13
+ const Drawer = forwardRef((_a, ref) => {
14
+ var { className, headerStyle, children, footer, footerClassName } = _a, props = __rest(_a, ["className", "headerStyle", "children", "footer", "footerClassName"]);
15
+ // 对齐小蜜现有的底部
16
+ const defaultHeaderStyle = {
17
+ "border-bottom:": "1px solid var(--40gmM)",
18
+ "border-top-left-radius": "16px",
19
+ "border-top-right-radius": "16px",
20
+ };
21
+ return (React.createElement(NextDrawer, Object.assign({}, props, { ref: ref, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: cs(`${PREFIX_DEFAULT}drawer`, className) }),
22
+ React.createElement("div", { className: 'draw-content' }, children),
23
+ footer && footer.length && React.createElement("div", { className: cs('draw-footer', footerClassName) }, footer)));
24
+ });
25
+ const DrawerWithSub = assignSubComponent(Drawer, {
26
+ displayName: 'Drawer',
27
+ });
28
+ export * from './types';
29
+ export default ConfigProvider.config(DrawerWithSub);
@@ -0,0 +1,20 @@
1
+ @import "../core/variables.scss";
2
+
3
+ .#{$prefix}drawer {
4
+ border: none;
5
+
6
+ .draw-footer {
7
+ width: calc(100% - 40px);
8
+ position: absolute;
9
+ bottom: 20px;
10
+ display: flex;
11
+ justify-content: space-between;
12
+
13
+ button {
14
+ width: calc(50% - 8px);
15
+ }
16
+ }
17
+
18
+ }
19
+
20
+
@@ -0,0 +1,2 @@
1
+ import '@alifd/next/lib/drawer/style2';
2
+ import './main.scss';
@@ -0,0 +1,2 @@
1
+ import '@alifd/next/lib/drawer/style2';
2
+ import './main.scss';
@@ -0,0 +1,10 @@
1
+ import { type CommonProps } from '@alifd/next';
2
+ import type { DrawerV2Props as FusionDrawerProps } from '@alifd/next/types/drawer/types';
3
+ import type { ButtonProps } from '../button/types';
4
+ /**
5
+ * @api Drawer
6
+ */
7
+ export interface DrawerProps extends FusionDrawerProps, CommonProps {
8
+ footer?: ButtonProps[];
9
+ footerClassName?: string;
10
+ }
@@ -11,9 +11,9 @@ import sanitizeHtml from 'sanitize-html';
11
11
  import parse, { domToReact, Element } from 'html-react-parser';
12
12
  import { PhotoProvider } from 'react-photo-view';
13
13
  import qs from 'query-string';
14
- import ImagePreview from '../ImagePreview';
14
+ import ImagePreview from '../image-preview';
15
15
  import { ConfigProvider } from '@alifd/next';
16
- import { assignSubComponent } from '../utils';
16
+ import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
17
17
  const sanitizeHtmlOptions = {
18
18
  allowedTags: sanitizeHtml.defaults.allowedTags.concat([
19
19
  'acronym', 'audio', 'big', 'center', 'del', 'dir', 'font',
@@ -125,7 +125,7 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
125
125
  const element = useMemo(() => {
126
126
  return parse(sanitizeHtml(children || '', sanitizeHtmlOptions), parserOptions);
127
127
  }, [children]);
128
- return (React.createElement("div", { className: classnames('box', className, {
128
+ return (React.createElement("div", { className: classnames(`${PREFIX_DEFAULT}html`, className, {
129
129
  'loose': loose,
130
130
  }) }, imagePreview ?
131
131
  React.createElement(PhotoProvider, null, element)
@@ -1,4 +1,6 @@
1
- .box {
1
+ @import "../core/variables.scss";
2
+
3
+ .#{$prefix}html {
2
4
  font-size: 14px;
3
5
  // color: hsla(230, 10%, 11%, 0.9);
4
6
  word-break: break-word;
@@ -0,0 +1 @@
1
+ export {};
package/es/index.d.ts CHANGED
@@ -13,8 +13,11 @@ export { default as Message } from './message';
13
13
  export { default as Icon } from './icon';
14
14
  export { default as Balloon } from './balloon';
15
15
  export { default as List } from './list';
16
- export { default as ImagePreview } from './ImagePreview';
17
- export { default as HTMLRenderer } from './HTMLRenderer';
16
+ export { default as ImagePreview } from './image-preview';
17
+ export { default as HtmlRender } from './html-render';
18
18
  export { default as Markdown } from './markdown';
19
19
  export { default as CardLoading } from './card-loading';
20
+ export { default as Origin } from './origin';
21
+ export { default as Loading } from './loading';
22
+ export { default as Drawer } from './drawer';
20
23
  export declare const version: string;
package/es/index.js CHANGED
@@ -13,8 +13,11 @@ export { default as Message } from './message';
13
13
  export { default as Icon } from './icon';
14
14
  export { default as Balloon } from './balloon';
15
15
  export { default as List } from './list';
16
- export { default as ImagePreview } from './ImagePreview';
17
- export { default as HTMLRenderer } from './HTMLRenderer';
16
+ export { default as ImagePreview } from './image-preview';
17
+ export { default as HtmlRender } from './html-render';
18
18
  export { default as Markdown } from './markdown';
19
19
  export { default as CardLoading } from './card-loading';
20
- export const version = '0.3.0-beta.0';
20
+ export { default as Origin } from './origin';
21
+ export { default as Loading } from './loading';
22
+ export { default as Drawer } from './drawer';
23
+ export const version = '0.3.0-beta.10';
@@ -0,0 +1,60 @@
1
+ /**
2
+ * @component 加载
3
+ * @en Loading
4
+ * * @remarks 同 Next Loading- Same as Next Loading component.
5
+ * @type 通用 - General
6
+ * @when
7
+ */
8
+ import React from 'react';
9
+ import type { LoadingProps } from './types';
10
+ export * from './types';
11
+ declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<LoadingProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/loading").LoadingProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
12
+ render(): React.JSX.Element | React.ReactNode[];
13
+ context: any;
14
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/loading").LoadingProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
15
+ forceUpdate(callback?: (() => void) | undefined): void;
16
+ readonly props: Readonly<import("@alifd/next/types/loading").LoadingProps> & Readonly<{
17
+ children?: React.ReactNode | undefined;
18
+ }>;
19
+ state: Readonly<{}>;
20
+ refs: {
21
+ [key: string]: React.ReactInstance;
22
+ };
23
+ componentDidMount?(): void;
24
+ shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): boolean;
25
+ componentWillUnmount?(): void;
26
+ componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
27
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>): any;
28
+ componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>, snapshot?: any): void;
29
+ componentWillMount?(): void;
30
+ UNSAFE_componentWillMount?(): void;
31
+ componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
32
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
33
+ componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
34
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
35
+ }>>, "key" | keyof LoadingProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/loading").LoadingProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
36
+ render(): React.JSX.Element | React.ReactNode[];
37
+ context: any;
38
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/loading").LoadingProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
39
+ forceUpdate(callback?: (() => void) | undefined): void;
40
+ readonly props: Readonly<import("@alifd/next/types/loading").LoadingProps> & Readonly<{
41
+ children?: React.ReactNode | undefined;
42
+ }>;
43
+ state: Readonly<{}>;
44
+ refs: {
45
+ [key: string]: React.ReactInstance;
46
+ };
47
+ componentDidMount?(): void;
48
+ shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): boolean;
49
+ componentWillUnmount?(): void;
50
+ componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
51
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>): any;
52
+ componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>, snapshot?: any): void;
53
+ componentWillMount?(): void;
54
+ UNSAFE_componentWillMount?(): void;
55
+ componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
56
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
57
+ componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
58
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
59
+ }>, {}>;
60
+ export default _default;
@@ -0,0 +1,29 @@
1
+ /**
2
+ * @component 加载
3
+ * @en Loading
4
+ * * @remarks 同 Next Loading- Same as Next Loading component.
5
+ * @type 通用 - General
6
+ * @when
7
+ */
8
+ import { __rest } from "tslib";
9
+ import React, { forwardRef } from 'react';
10
+ import { Loading as NextLoading, ConfigProvider } from '@alifd/next';
11
+ import cs from 'classnames';
12
+ import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
13
+ const Loading = forwardRef((_a, ref) => {
14
+ var { className, indicator, shape = 'default', size = 'large' } = _a, props = __rest(_a, ["className", "indicator", "shape", "size"]);
15
+ let indicatorDom = indicator;
16
+ const nextProps = Object.assign(Object.assign({}, props), { size });
17
+ if (!indicator && shape && shape !== 'default') {
18
+ const indicatorClass = `load-container ${shape}`;
19
+ indicatorDom = (React.createElement("div", { className: indicatorClass },
20
+ React.createElement("div", { className: "loader" })));
21
+ nextProps.indicator = indicatorDom;
22
+ }
23
+ return (React.createElement(NextLoading, Object.assign({}, nextProps, { ref: ref, className: cs(`${PREFIX_DEFAULT}loading ${size} ${shape}`, className) })));
24
+ });
25
+ const LoadingWithSub = assignSubComponent(Loading, {
26
+ displayName: 'Loading',
27
+ });
28
+ export * from './types';
29
+ export default ConfigProvider.config(LoadingWithSub);
@@ -0,0 +1,227 @@
1
+ @import "../core/variables.scss";
2
+
3
+ .#{$prefix}loading {
4
+ .load-container {
5
+ margin: 0 auto;
6
+ position: relative;
7
+ }
8
+
9
+ &.medium {
10
+ /* animation 1 */
11
+ .bar .loader,
12
+ .bar .loader:before,
13
+ .bar .loader:after {
14
+ width: 0.5em;
15
+ height: 1em;
16
+ border-radius: 0.5em;
17
+ }
18
+
19
+ .bar .loader:before,
20
+ .bar .loader:after {
21
+ }
22
+ .bar .loader:before {
23
+ left: -0.8em;
24
+ }
25
+ .bar .loader {
26
+ }
27
+ .bar .loader:after {
28
+ left: 0.8em;
29
+ }
30
+ @-webkit-keyframes bar {
31
+ 0%,
32
+ 80%,
33
+ 100% {
34
+ box-shadow: 0 0 ;
35
+ height: 1em;
36
+ }
37
+ 40% {
38
+ box-shadow: 0 -1em ;
39
+ height: 1.2em;
40
+ }
41
+ }
42
+ @keyframes bar {
43
+ 0%,
44
+ 80%,
45
+ 100% {
46
+ box-shadow: 0 0 ;
47
+ height: 1em;
48
+ }
49
+ 40% {
50
+ box-shadow: 0 -1em ;
51
+ height: 1.2em;
52
+ }
53
+ }
54
+ /* animation 2 */
55
+ .dot .loader:before,
56
+ .dot .loader:after,
57
+ .dot .loader {
58
+ width: 1em;
59
+ height: 1em;
60
+ // top: -1em;
61
+ }
62
+ .dot .loader:before {
63
+ left: -1.5em;
64
+ }
65
+ .dot .loader:after {
66
+ left: 1.5em;
67
+ }
68
+
69
+ @-webkit-keyframes dot {
70
+ 0%,
71
+ 80%,
72
+ 100% {
73
+ box-shadow: 0 1 0 -0.5em $color-brand1-6;
74
+ }
75
+ 40% {
76
+ box-shadow: 0 1 0 0 $color-brand1-6;
77
+ }
78
+ }
79
+
80
+ @keyframes dot {
81
+ 0%,
82
+ 80%,
83
+ 100% {
84
+ box-shadow: 0 1em 0 -0.5em $color-brand1-6;
85
+ }
86
+ 40% {
87
+ box-shadow: 0 1em 0 0 $color-brand1-6;
88
+ }
89
+ }
90
+ }
91
+
92
+ /* animation 1 */
93
+ .bar .loader,
94
+ .bar .loader:before,
95
+ .bar .loader:after {
96
+ background: $color-brand1-6;
97
+ color: $color-brand1-6;
98
+ -webkit-animation: bar 1s infinite ease-in-out;
99
+ animation: bar 1s infinite ease-in-out;
100
+ width: 0.8em;
101
+ height: 2em;
102
+ border-radius: 0.8em;
103
+ }
104
+
105
+ .bar .loader:before,
106
+ .bar .loader:after {
107
+ position: absolute;
108
+ top: 0;
109
+ content: '';
110
+ }
111
+ .bar .loader:before {
112
+ left: -1em;
113
+ -webkit-animation-delay: -0.32s;
114
+ animation-delay: -0.32s;
115
+ }
116
+ .bar .loader {
117
+ text-indent: -9999em;
118
+ margin: 0 auto !important;
119
+ position: relative;
120
+ font-size: 11px;
121
+ -webkit-animation-delay: -0.16s;
122
+ animation-delay: -0.16s;
123
+ }
124
+ .bar .loader:after {
125
+ left: 1em;
126
+ }
127
+ @-webkit-keyframes bar {
128
+ 0%,
129
+ 80%,
130
+ 100% {
131
+ box-shadow: 0 0 ;
132
+ height: 2em;
133
+ }
134
+ 40% {
135
+ box-shadow: 0 -1.5em ;
136
+ height: 2.2em;
137
+ }
138
+ }
139
+ @keyframes bar {
140
+ 0%,
141
+ 80%,
142
+ 100% {
143
+ box-shadow: 0 0 ;
144
+ height: 2em;
145
+ }
146
+ 40% {
147
+ box-shadow: 0 -1.5em ;
148
+ height: 2.2em;
149
+ }
150
+ }
151
+ /* animation 2 */
152
+ .dot .loader:before,
153
+ .dot .loader:after,
154
+ .dot .loader {
155
+ border-radius: 50%;
156
+ width: 1.5em;
157
+ height: 1.5em;
158
+ -webkit-animation-fill-mode: both;
159
+ animation-fill-mode: both;
160
+ -webkit-animation: dot 1.8s infinite ease-in-out;
161
+ animation: dot 1.8s infinite ease-in-out;
162
+ top: -1.5em;
163
+
164
+ &.medium {
165
+ width: 1.0em;
166
+ height: 1.0em;
167
+ top: -1.0em;
168
+ }
169
+ }
170
+
171
+ .dot .loader {
172
+ margin: 0 auto !important;
173
+ font-size: 10px;
174
+ position: relative;
175
+ text-indent: -9999em;
176
+ -webkit-animation-delay: -0.16s;
177
+ animation-delay: -0.16s;
178
+ }
179
+
180
+ .dot .loader:before {
181
+ left: -2em;
182
+ -webkit-animation-delay: -0.32s;
183
+ animation-delay: -0.32s;
184
+
185
+ &.medium {
186
+ left: -1.5em;
187
+ }
188
+ }
189
+
190
+ .dot .loader:after {
191
+ left: 2em;
192
+ &.medium {
193
+ left: 1.5em;
194
+ }
195
+ }
196
+
197
+ .dot .loader:before,
198
+ .dot .loader:after {
199
+ content: '';
200
+ position: absolute;
201
+ top: 0;
202
+ }
203
+
204
+ @-webkit-keyframes dot {
205
+ 0%,
206
+ 80%,
207
+ 100% {
208
+ box-shadow: 0 1.5em 0 -0.8em $color-brand1-6;
209
+ }
210
+ 40% {
211
+ box-shadow: 0 1.5em 0 0 $color-brand1-6;
212
+ }
213
+ }
214
+
215
+ @keyframes dot {
216
+ 0%,
217
+ 80%,
218
+ 100% {
219
+ box-shadow: 0 1.5em 0 -0.8em $color-brand1-6;
220
+ }
221
+ 40% {
222
+ box-shadow: 0 1.5em 0 0 $color-brand1-6;
223
+ }
224
+ }
225
+ }
226
+
227
+
@@ -0,0 +1,2 @@
1
+ import '@alifd/next/lib/loading/style2';
2
+ import './main.scss';
@@ -0,0 +1,2 @@
1
+ import '@alifd/next/lib/loading/style2';
2
+ import './main.scss';
@@ -0,0 +1,8 @@
1
+ import { type CommonProps } from '@alifd/next';
2
+ import type { LoadingProps as FusionLoadingProps } from '@alifd/next/types/loading';
3
+ /**
4
+ * @api Loading
5
+ */
6
+ export interface LoadingProps extends FusionLoadingProps, CommonProps {
7
+ shape?: 'default' | 'bar' | 'dot';
8
+ }
@@ -0,0 +1 @@
1
+ export {};