@akinon/ui-breadcrumb 0.3.0 → 0.4.0

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 (9) hide show
  1. package/dist/cjs/index.d.ts +2 -7
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +62 -3
  4. package/dist/esm/index.d.ts +2 -7
  5. package/dist/esm/index.d.ts.map +1 -1
  6. package/dist/esm/index.js +63 -4
  7. package/package.json +4 -9
  8. package/dist/cjs/index.css +0 -12
  9. package/dist/esm/index.css +0 -12
package/dist/cjs/index.d.ts CHANGED
@@ -1,10 +1,5 @@
1
- import './index.css';
2
- import type { BreadcrumbProps as AntBreadcrumbProps } from 'antd';
3
1
  import * as React from 'react';
4
- export type BreadcrumbProps = Omit<AntBreadcrumbProps, 'prefixCls' | 'className' | 'classNames' | 'rootClassName' | 'style' | 'styles' | 'separator'> & {
5
- onAnyItemClick?: ({ href }: {
6
- href: string;
7
- }) => void;
8
- };
2
+ import type { BreadcrumbProps } from './types';
3
+ export type { BreadcrumbProps } from './types';
9
4
  export declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
10
5
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,kBAAkB,EAChB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,eAAe,GACf,OAAO,GACP,QAAQ,GACR,WAAW,CACd,GAAG;IAEF,cAAc,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,eAAe,sBAiChD,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAEzD,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgGhD,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -1,11 +1,70 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Breadcrumb = void 0;
4
- require("./index.css");
4
+ const ui_theme_1 = require("@akinon/ui-theme");
5
+ const cssinjs_1 = require("@ant-design/cssinjs");
5
6
  const antd_1 = require("antd");
6
7
  const React = require("react");
7
8
  const Breadcrumb = (props) => {
8
9
  const { onAnyItemClick, items } = props;
10
+ const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
11
+ const { token, hashId } = (0, ui_theme_1.useToken)();
12
+ const breadcrumbToken = token.Breadcrumb;
13
+ const useStyle = (0, cssinjs_1.useStyleRegister)({
14
+ token: token,
15
+ path: ['Breadcrumb'],
16
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
17
+ theme: theme
18
+ }, () => {
19
+ const prefixCls = `:where(.${hashId}).${getPrefixCls()}-breadcrumb`;
20
+ const prefixClsWithoutHash = `.${getPrefixCls()}-breadcrumb`;
21
+ return {
22
+ [prefixCls]: {
23
+ paddingBottom: breadcrumbToken.paddingBottom,
24
+ color: breadcrumbToken.itemColor,
25
+ ['li:last-child']: {
26
+ color: breadcrumbToken.lastItemColor
27
+ }
28
+ },
29
+ [prefixClsWithoutHash]: {
30
+ borderBottom: breadcrumbToken.borderBottom,
31
+ fontWeight: breadcrumbToken.fontWeight,
32
+ lineHeight: breadcrumbToken.lineHeight,
33
+ letterSpacing: breadcrumbToken.letterSpacing,
34
+ paddingLeft: breadcrumbToken.paddingLeft,
35
+ paddingRight: breadcrumbToken.paddingRight,
36
+ [`li ${prefixClsWithoutHash}-link`]: {
37
+ ['&:hover']: {
38
+ cursor: 'pointer'
39
+ }
40
+ },
41
+ [`li:last-child ${prefixClsWithoutHash}-link`]: {
42
+ ['&:hover']: {
43
+ cursor: 'unset'
44
+ }
45
+ },
46
+ ['a']: {
47
+ color: breadcrumbToken.itemColor,
48
+ paddingLeft: 0,
49
+ paddingRight: 0,
50
+ marginInline: breadcrumbToken.marginInline,
51
+ height: breadcrumbToken.height,
52
+ ['&:hover']: {
53
+ color: 'unset',
54
+ backgroundColor: 'unset'
55
+ }
56
+ },
57
+ [`${prefixClsWithoutHash}-separator`]: {
58
+ marginRight: breadcrumbToken.marginRight,
59
+ marginLeft: breadcrumbToken.marginLeft,
60
+ color: breadcrumbToken.separatorColor,
61
+ ['&:nth-last-child(2)']: {
62
+ color: breadcrumbToken.lastItemColor
63
+ }
64
+ }
65
+ }
66
+ };
67
+ });
9
68
  if (onAnyItemClick) {
10
69
  const newItems = items === null || items === void 0 ? void 0 : items.map((item, i) => {
11
70
  // if it's last item, only return title
@@ -21,8 +80,8 @@ const Breadcrumb = (props) => {
21
80
  } });
22
81
  });
23
82
  const newProps = Object.assign(Object.assign({}, props), { items: newItems });
24
- return (React.createElement(antd_1.Breadcrumb, Object.assign({}, newProps, { items: newItems })));
83
+ return useStyle(React.createElement(antd_1.Breadcrumb, Object.assign({}, newProps)));
25
84
  }
26
- return React.createElement(antd_1.Breadcrumb, Object.assign({}, props));
85
+ return useStyle(React.createElement(antd_1.Breadcrumb, Object.assign({}, props)));
27
86
  };
28
87
  exports.Breadcrumb = Breadcrumb;
package/dist/esm/index.d.ts CHANGED
@@ -1,10 +1,5 @@
1
- import './index.css';
2
- import type { BreadcrumbProps as AntBreadcrumbProps } from 'antd';
3
1
  import * as React from 'react';
4
- export type BreadcrumbProps = Omit<AntBreadcrumbProps, 'prefixCls' | 'className' | 'classNames' | 'rootClassName' | 'style' | 'styles' | 'separator'> & {
5
- onAnyItemClick?: ({ href }: {
6
- href: string;
7
- }) => void;
8
- };
2
+ import type { BreadcrumbProps } from './types';
3
+ export type { BreadcrumbProps } from './types';
9
4
  export declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
10
5
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,kBAAkB,EAChB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,eAAe,GACf,OAAO,GACP,QAAQ,GACR,WAAW,CACd,GAAG;IAEF,cAAc,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,eAAe,sBAiChD,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAEzD,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgGhD,CAAC"}
package/dist/esm/index.js CHANGED
@@ -1,8 +1,67 @@
1
- import './index.css';
2
- import { Breadcrumb as AntBreadcrumb } from 'antd';
1
+ import { useToken } from '@akinon/ui-theme';
2
+ import { useStyleRegister } from '@ant-design/cssinjs';
3
+ import { Breadcrumb as AntBreadcrumb, ConfigProvider } from 'antd';
3
4
  import * as React from 'react';
4
5
  export const Breadcrumb = (props) => {
5
6
  const { onAnyItemClick, items } = props;
7
+ const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
8
+ const { token, hashId } = useToken();
9
+ const breadcrumbToken = token.Breadcrumb;
10
+ const useStyle = useStyleRegister({
11
+ token: token,
12
+ path: ['Breadcrumb'],
13
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
14
+ theme: theme
15
+ }, () => {
16
+ const prefixCls = `:where(.${hashId}).${getPrefixCls()}-breadcrumb`;
17
+ const prefixClsWithoutHash = `.${getPrefixCls()}-breadcrumb`;
18
+ return {
19
+ [prefixCls]: {
20
+ paddingBottom: breadcrumbToken.paddingBottom,
21
+ color: breadcrumbToken.itemColor,
22
+ ['li:last-child']: {
23
+ color: breadcrumbToken.lastItemColor
24
+ }
25
+ },
26
+ [prefixClsWithoutHash]: {
27
+ borderBottom: breadcrumbToken.borderBottom,
28
+ fontWeight: breadcrumbToken.fontWeight,
29
+ lineHeight: breadcrumbToken.lineHeight,
30
+ letterSpacing: breadcrumbToken.letterSpacing,
31
+ paddingLeft: breadcrumbToken.paddingLeft,
32
+ paddingRight: breadcrumbToken.paddingRight,
33
+ [`li ${prefixClsWithoutHash}-link`]: {
34
+ ['&:hover']: {
35
+ cursor: 'pointer'
36
+ }
37
+ },
38
+ [`li:last-child ${prefixClsWithoutHash}-link`]: {
39
+ ['&:hover']: {
40
+ cursor: 'unset'
41
+ }
42
+ },
43
+ ['a']: {
44
+ color: breadcrumbToken.itemColor,
45
+ paddingLeft: 0,
46
+ paddingRight: 0,
47
+ marginInline: breadcrumbToken.marginInline,
48
+ height: breadcrumbToken.height,
49
+ ['&:hover']: {
50
+ color: 'unset',
51
+ backgroundColor: 'unset'
52
+ }
53
+ },
54
+ [`${prefixClsWithoutHash}-separator`]: {
55
+ marginRight: breadcrumbToken.marginRight,
56
+ marginLeft: breadcrumbToken.marginLeft,
57
+ color: breadcrumbToken.separatorColor,
58
+ ['&:nth-last-child(2)']: {
59
+ color: breadcrumbToken.lastItemColor
60
+ }
61
+ }
62
+ }
63
+ };
64
+ });
6
65
  if (onAnyItemClick) {
7
66
  const newItems = items === null || items === void 0 ? void 0 : items.map((item, i) => {
8
67
  // if it's last item, only return title
@@ -18,7 +77,7 @@ export const Breadcrumb = (props) => {
18
77
  } });
19
78
  });
20
79
  const newProps = Object.assign(Object.assign({}, props), { items: newItems });
21
- return (React.createElement(AntBreadcrumb, Object.assign({}, newProps, { items: newItems })));
80
+ return useStyle(React.createElement(AntBreadcrumb, Object.assign({}, newProps)));
22
81
  }
23
- return React.createElement(AntBreadcrumb, Object.assign({}, props));
82
+ return useStyle(React.createElement(AntBreadcrumb, Object.assign({}, props)));
24
83
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-breadcrumb",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "private": false,
5
5
  "description": "A basic button react component.",
6
6
  "type": "module",
@@ -10,16 +10,15 @@
10
10
  "dist"
11
11
  ],
12
12
  "dependencies": {
13
- "antd": "5.17.0"
13
+ "antd": "5.17.0",
14
+ "@akinon/ui-theme": "0.6.0"
14
15
  },
15
16
  "devDependencies": {
16
17
  "clean-package": "2.2.0",
17
18
  "copyfiles": "^2.4.1",
18
19
  "rimraf": "^5.0.5",
19
20
  "typescript": "^5.2.2",
20
- "@akinon/typescript-config": "0.2.0",
21
- "@akinon/eslint-config": "0.1.0",
22
- "@akinon/vite-config": "0.4.0"
21
+ "@akinon/typescript-config": "0.3.0"
23
22
  },
24
23
  "peerDependencies": {
25
24
  "react": ">=18",
@@ -41,10 +40,6 @@
41
40
  "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
42
41
  "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
43
42
  "clean": "rimraf dist/",
44
- "lint": "eslint *.ts*",
45
- "test": "vitest run",
46
- "test:ui": "vitest --ui",
47
- "test:watch": "vitest watch",
48
43
  "typecheck": "tsc --noEmit"
49
44
  }
50
45
  }
package/dist/cjs/index.css DELETED
@@ -1,12 +0,0 @@
1
- .akinon-breadcrumb {
2
- padding-left: 1rem;
3
- padding-right: 1rem;
4
- padding-top: 0.625rem;
5
- padding-bottom: 0.625rem;
6
- border-bottom: 1px solid var(--color-gray-900);
7
-
8
- .akinon-breadcrumb-separator {
9
- margin-left: 0.4rem;
10
- margin-right: 0.4rem;
11
- }
12
- }
package/dist/esm/index.css DELETED
@@ -1,12 +0,0 @@
1
- .akinon-breadcrumb {
2
- padding-left: 1rem;
3
- padding-right: 1rem;
4
- padding-top: 0.625rem;
5
- padding-bottom: 0.625rem;
6
- border-bottom: 1px solid var(--color-gray-900);
7
-
8
- .akinon-breadcrumb-separator {
9
- margin-left: 0.4rem;
10
- margin-right: 0.4rem;
11
- }
12
- }