@rc-component/cascader 1.1.1 → 1.2.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/es/Cascader.d.ts +8 -0
  2. package/es/Cascader.js +14 -0
  3. package/es/OptionList/Column.js +11 -5
  4. package/es/context.d.ts +2 -0
  5. package/lib/Cascader.d.ts +8 -0
  6. package/lib/Cascader.js +14 -0
  7. package/lib/OptionList/Column.js +10 -4
  8. package/lib/context.d.ts +2 -0
  9. package/package.json +4 -3
package/es/Cascader.d.ts CHANGED
@@ -55,7 +55,15 @@ export interface FieldNames<OptionType extends DefaultOptionType = DefaultOption
55
55
  export type ValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> = keyof OptionType extends ValueField ? unknown extends OptionType['value'] ? OptionType[ValueField] : OptionType['value'] : OptionType[ValueField];
56
56
  export type GetValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> = false extends Multiple ? ValueType<Required<OptionType>, ValueField>[] : ValueType<Required<OptionType>, ValueField>[][];
57
57
  export type GetOptionType<OptionType extends DefaultOptionType = DefaultOptionType, Multiple extends boolean | React.ReactNode = false> = false extends Multiple ? OptionType[] : OptionType[][];
58
+ type SemanticName = 'input' | 'prefix' | 'suffix';
59
+ type PopupSemantic = 'list' | 'listItem';
58
60
  export interface CascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> extends BaseCascaderProps<OptionType, ValueField> {
61
+ styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
62
+ popup?: Partial<Record<PopupSemantic, React.CSSProperties>>;
63
+ };
64
+ classNames?: Partial<Record<SemanticName, string>> & {
65
+ popup?: Partial<Record<PopupSemantic, string>>;
66
+ };
59
67
  checkable?: Multiple;
60
68
  value?: GetValueType<OptionType, ValueField, Multiple>;
61
69
  defaultValue?: GetValueType<OptionType, ValueField, Multiple>;
package/es/Cascader.js CHANGED
@@ -45,6 +45,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
45
45
  popupClassName,
46
46
  popupMenuColumnStyle,
47
47
  popupStyle: customPopupStyle,
48
+ classNames,
49
+ styles,
48
50
  placement,
49
51
  onPopupVisibleChange,
50
52
  // Icon
@@ -147,6 +149,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
147
149
 
148
150
  // ========================== Context ===========================
149
151
  const cascaderContext = React.useMemo(() => ({
152
+ classNames,
153
+ styles,
150
154
  options: mergedOptions,
151
155
  fieldNames: mergedFieldNames,
152
156
  values: checkedValues,
@@ -184,6 +188,16 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
184
188
  prefixCls: prefixCls,
185
189
  autoClearSearchValue: autoClearSearchValue,
186
190
  popupMatchSelectWidth: popupMatchSelectWidth,
191
+ classNames: {
192
+ prefix: classNames?.prefix,
193
+ suffix: classNames?.suffix,
194
+ input: classNames?.input
195
+ },
196
+ styles: {
197
+ prefix: styles?.prefix,
198
+ suffix: styles?.suffix,
199
+ input: styles?.input
200
+ },
187
201
  popupStyle: {
188
202
  ...popupStyle,
189
203
  ...customPopupStyle
package/es/OptionList/Column.js CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import cls from 'classnames';
2
2
  import * as React from 'react';
3
3
  import CascaderContext from "../context";
4
4
  import { SEARCH_MARK } from "../hooks/useSearchOptions";
@@ -30,7 +30,9 @@ export default function Column({
30
30
  expandIcon,
31
31
  loadingIcon,
32
32
  popupMenuColumnStyle,
33
- optionRender
33
+ optionRender,
34
+ classNames,
35
+ styles
34
36
  } = React.useContext(CascaderContext);
35
37
  const hoverOpen = expandTrigger === 'hover';
36
38
  const isOptionDisabled = disabled => propsDisabled || disabled;
@@ -85,7 +87,8 @@ export default function Column({
85
87
 
86
88
  // ============================ Render ============================
87
89
  return /*#__PURE__*/React.createElement("ul", {
88
- className: menuPrefixCls,
90
+ className: cls(menuPrefixCls, classNames?.popup?.list),
91
+ style: styles?.popup?.list,
89
92
  ref: menuRef,
90
93
  role: "menu"
91
94
  }, optionInfoList.map(({
@@ -131,13 +134,16 @@ export default function Column({
131
134
  // >>>>> Render
132
135
  return /*#__PURE__*/React.createElement("li", {
133
136
  key: fullPathKey,
134
- className: classNames(menuItemPrefixCls, {
137
+ className: cls(menuItemPrefixCls, classNames?.popup?.listItem, {
135
138
  [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
136
139
  [`${menuItemPrefixCls}-active`]: activeValue === value || activeValue === fullPathKey,
137
140
  [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(disabled),
138
141
  [`${menuItemPrefixCls}-loading`]: isLoading
139
142
  }),
140
- style: popupMenuColumnStyle,
143
+ style: {
144
+ ...popupMenuColumnStyle,
145
+ ...styles?.popup?.listItem
146
+ },
141
147
  role: "menuitemcheckbox",
142
148
  title: title,
143
149
  "aria-checked": checked,
package/es/context.d.ts CHANGED
@@ -16,6 +16,8 @@ export interface CascaderContextProps {
16
16
  loadingIcon?: React.ReactNode;
17
17
  popupMenuColumnStyle?: React.CSSProperties;
18
18
  optionRender?: CascaderProps['optionRender'];
19
+ classNames?: CascaderProps['classNames'];
20
+ styles?: CascaderProps['styles'];
19
21
  }
20
22
  declare const CascaderContext: React.Context<CascaderContextProps>;
21
23
  export default CascaderContext;
package/lib/Cascader.d.ts CHANGED
@@ -55,7 +55,15 @@ export interface FieldNames<OptionType extends DefaultOptionType = DefaultOption
55
55
  export type ValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> = keyof OptionType extends ValueField ? unknown extends OptionType['value'] ? OptionType[ValueField] : OptionType['value'] : OptionType[ValueField];
56
56
  export type GetValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> = false extends Multiple ? ValueType<Required<OptionType>, ValueField>[] : ValueType<Required<OptionType>, ValueField>[][];
57
57
  export type GetOptionType<OptionType extends DefaultOptionType = DefaultOptionType, Multiple extends boolean | React.ReactNode = false> = false extends Multiple ? OptionType[] : OptionType[][];
58
+ type SemanticName = 'input' | 'prefix' | 'suffix';
59
+ type PopupSemantic = 'list' | 'listItem';
58
60
  export interface CascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> extends BaseCascaderProps<OptionType, ValueField> {
61
+ styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
62
+ popup?: Partial<Record<PopupSemantic, React.CSSProperties>>;
63
+ };
64
+ classNames?: Partial<Record<SemanticName, string>> & {
65
+ popup?: Partial<Record<PopupSemantic, string>>;
66
+ };
59
67
  checkable?: Multiple;
60
68
  value?: GetValueType<OptionType, ValueField, Multiple>;
61
69
  defaultValue?: GetValueType<OptionType, ValueField, Multiple>;
package/lib/Cascader.js CHANGED
@@ -54,6 +54,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
54
54
  popupClassName,
55
55
  popupMenuColumnStyle,
56
56
  popupStyle: customPopupStyle,
57
+ classNames,
58
+ styles,
57
59
  placement,
58
60
  onPopupVisibleChange,
59
61
  // Icon
@@ -156,6 +158,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
156
158
 
157
159
  // ========================== Context ===========================
158
160
  const cascaderContext = React.useMemo(() => ({
161
+ classNames,
162
+ styles,
159
163
  options: mergedOptions,
160
164
  fieldNames: mergedFieldNames,
161
165
  values: checkedValues,
@@ -193,6 +197,16 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
193
197
  prefixCls: prefixCls,
194
198
  autoClearSearchValue: autoClearSearchValue,
195
199
  popupMatchSelectWidth: popupMatchSelectWidth,
200
+ classNames: {
201
+ prefix: classNames?.prefix,
202
+ suffix: classNames?.suffix,
203
+ input: classNames?.input
204
+ },
205
+ styles: {
206
+ prefix: styles?.prefix,
207
+ suffix: styles?.suffix,
208
+ input: styles?.input
209
+ },
196
210
  popupStyle: {
197
211
  ...popupStyle,
198
212
  ...customPopupStyle
package/lib/OptionList/Column.js CHANGED
@@ -40,7 +40,9 @@ function Column({
40
40
  expandIcon,
41
41
  loadingIcon,
42
42
  popupMenuColumnStyle,
43
- optionRender
43
+ optionRender,
44
+ classNames,
45
+ styles
44
46
  } = React.useContext(_context.default);
45
47
  const hoverOpen = expandTrigger === 'hover';
46
48
  const isOptionDisabled = disabled => propsDisabled || disabled;
@@ -95,7 +97,8 @@ function Column({
95
97
 
96
98
  // ============================ Render ============================
97
99
  return /*#__PURE__*/React.createElement("ul", {
98
- className: menuPrefixCls,
100
+ className: (0, _classnames.default)(menuPrefixCls, classNames?.popup?.list),
101
+ style: styles?.popup?.list,
99
102
  ref: menuRef,
100
103
  role: "menu"
101
104
  }, optionInfoList.map(({
@@ -141,13 +144,16 @@ function Column({
141
144
  // >>>>> Render
142
145
  return /*#__PURE__*/React.createElement("li", {
143
146
  key: fullPathKey,
144
- className: (0, _classnames.default)(menuItemPrefixCls, {
147
+ className: (0, _classnames.default)(menuItemPrefixCls, classNames?.popup?.listItem, {
145
148
  [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
146
149
  [`${menuItemPrefixCls}-active`]: activeValue === value || activeValue === fullPathKey,
147
150
  [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(disabled),
148
151
  [`${menuItemPrefixCls}-loading`]: isLoading
149
152
  }),
150
- style: popupMenuColumnStyle,
153
+ style: {
154
+ ...popupMenuColumnStyle,
155
+ ...styles?.popup?.listItem
156
+ },
151
157
  role: "menuitemcheckbox",
152
158
  title: title,
153
159
  "aria-checked": checked,
package/lib/context.d.ts CHANGED
@@ -16,6 +16,8 @@ export interface CascaderContextProps {
16
16
  loadingIcon?: React.ReactNode;
17
17
  popupMenuColumnStyle?: React.CSSProperties;
18
18
  optionRender?: CascaderProps['optionRender'];
19
+ classNames?: CascaderProps['classNames'];
20
+ styles?: CascaderProps['styles'];
19
21
  }
20
22
  declare const CascaderContext: React.Context<CascaderContextProps>;
21
23
  export default CascaderContext;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/cascader",
3
- "version": "1.1.1",
3
+ "version": "1.2.0",
4
4
  "description": "cascade select ui component for react",
5
5
  "keywords": [
6
6
  "react",
@@ -46,7 +46,8 @@
46
46
  "@rc-component/select": "~1.0.0",
47
47
  "@rc-component/tree": "~1.0.0",
48
48
  "@rc-component/util": "^1.2.1",
49
- "classnames": "^2.3.1"
49
+ "classnames": "^2.3.1",
50
+ "eslint-plugin-unicorn": "^47.0.0"
50
51
  },
51
52
  "devDependencies": {
52
53
  "@rc-component/father-plugin": "^2.0.2",
@@ -70,7 +71,7 @@
70
71
  "enzyme-to-json": "^3.2.1",
71
72
  "eslint": "^8.54.0",
72
73
  "eslint-plugin-jest": "^28.8.3",
73
- "eslint-plugin-unicorn": "^52.0.0",
74
+ "eslint-plugin-unicorn": "^58.0.0",
74
75
  "father": "^4.0.0",
75
76
  "gh-pages": "^6.1.1",
76
77
  "glob": "^7.1.6",