@canvas-components/react-components 0.3.4 → 0.3.6

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 (7) hide show
  1. package/dist/index.cjs +143 -59
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +9 -2
  4. package/dist/index.d.ts +9 -2
  5. package/dist/index.js +143 -59
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -6007,7 +6007,8 @@ function formatDisplayValue(value, formatter, precision, step) {
6007
6007
  }
6008
6008
 
6009
6009
  // src/components/pagination/style.css
6010
- styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n --canvas-react-pagination-control-size: 32px;\n --canvas-react-pagination-gap: 8px;\n --canvas-react-pagination-padding-inline: 10px;\n --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--canvas-react-pagination-gap);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-small {\n --canvas-react-pagination-control-size: 24px;\n --canvas-react-pagination-gap: 4px;\n --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination-large {\n --canvas-react-pagination-control-size: 40px;\n --canvas-react-pagination-gap: 10px;\n --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--canvas-react-pagination-control-size);\n height: var(--canvas-react-pagination-control-size);\n padding: 0 var(--canvas-react-pagination-padding-inline);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n color 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n position: relative;\n width: var(--canvas-react-pagination-control-size);\n min-width: var(--canvas-react-pagination-control-size);\n padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n opacity: 0.48;\n cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition:\n border-color 0.18s ease,\n transform 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n');
6010
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n --canvas-react-pagination-control-size: 32px;\n --canvas-react-pagination-gap: 8px;\n --canvas-react-pagination-padding-inline: 10px;\n --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--canvas-react-pagination-gap);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-small {\n --canvas-react-pagination-control-size: 24px;\n --canvas-react-pagination-gap: 4px;\n --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination > .canvas-react-select-wrap {\n flex: 0 0 auto;\n width: auto;\n height: auto;\n}\n.canvas-react-pagination > .canvas-react-select-wrap > .canvas-react-select {\n flex-shrink: 0;\n}\n.canvas-react-pagination-large {\n --canvas-react-pagination-control-size: 40px;\n --canvas-react-pagination-gap: 10px;\n --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--canvas-react-pagination-control-size);\n height: var(--canvas-react-pagination-control-size);\n padding: 0 var(--canvas-react-pagination-padding-inline);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n color 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n position: relative;\n width: var(--canvas-react-pagination-control-size);\n min-width: var(--canvas-react-pagination-control-size);\n padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n opacity: 0.48;\n cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition:\n border-color 0.18s ease,\n transform 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination button,\n.canvas-react-pagination input {\n font-family: inherit;\n font-weight: inherit;\n font-size: inherit;\n}\n');
6011
+ var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
6011
6012
  function ReactPagination(props) {
6012
6013
  const {
6013
6014
  current,
@@ -6015,16 +6016,25 @@ function ReactPagination(props) {
6015
6016
  onChange,
6016
6017
  onPageSizeChange,
6017
6018
  pageSize = 10,
6018
- pageSizeOptions,
6019
+ pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
6019
6020
  showLessItems,
6020
6021
  showQuickJumper,
6021
6022
  showSizeChanger,
6022
6023
  showTotal,
6023
6024
  simple,
6024
6025
  size = "middle",
6025
- total
6026
+ total,
6027
+ style: rootStyle,
6028
+ styles
6026
6029
  } = props;
6030
+ const style = { ...rootStyle, ...styles?.root };
6027
6031
  const [quickValue, setQuickValue] = React.useState("");
6032
+ const resolvedPageSizeOptions = React.useMemo(() => {
6033
+ if (pageSizeOptions.length === 0 || pageSizeOptions.includes(pageSize) || !Number.isSafeInteger(pageSize) || pageSize <= 0) {
6034
+ return pageSizeOptions;
6035
+ }
6036
+ return [...pageSizeOptions, pageSize].sort((left, right) => left - right);
6037
+ }, [pageSizeOptions, pageSize]);
6028
6038
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
6029
6039
  const safeCurrent = clampPage(current, totalPages);
6030
6040
  const range = total === 0 ? [0, 0] : [
@@ -6052,75 +6062,120 @@ function ReactPagination(props) {
6052
6062
  return /* @__PURE__ */ jsxRuntime.jsxs(
6053
6063
  "div",
6054
6064
  {
6065
+ style: {
6066
+ ...style,
6067
+ ...style?.borderColor ? { "--canvas-react-color-border": style.borderColor } : {},
6068
+ ...style?.backgroundColor ? { "--canvas-react-color-bg": style.backgroundColor } : {},
6069
+ ...style?.color ? {
6070
+ "--canvas-react-color-text": style.color,
6071
+ "--canvas-react-color-text-muted": style.color
6072
+ } : {},
6073
+ ...style?.fontSize ? {
6074
+ "--canvas-react-font-size": typeof style.fontSize === "number" ? `${style.fontSize}px` : style.fontSize
6075
+ } : {}
6076
+ },
6055
6077
  className: `${REACT_COMPONENT_PREFIX}-pagination ${REACT_COMPONENT_PREFIX}-pagination-${size}`,
6056
6078
  children: [
6057
- showTotal ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
6079
+ showTotal ? /* @__PURE__ */ jsxRuntime.jsx(
6080
+ "span",
6081
+ {
6082
+ style: styles?.total,
6083
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6084
+ children: showTotal(total, range)
6085
+ }
6086
+ ) : null,
6058
6087
  /* @__PURE__ */ jsxRuntime.jsx(
6059
6088
  "button",
6060
6089
  {
6061
6090
  type: "button",
6062
6091
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6063
6092
  "aria-label": "\u4E0A\u4E00\u9875",
6093
+ style: styles?.prevButton,
6064
6094
  disabled: disabled || safeCurrent <= 1,
6065
6095
  onClick: () => jumpToPage(safeCurrent - 1),
6066
6096
  children: /* @__PURE__ */ jsxRuntime.jsx(
6067
6097
  "span",
6068
6098
  {
6069
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
6099
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`,
6100
+ style: styles?.prevIcon
6070
6101
  }
6071
6102
  )
6072
6103
  }
6073
6104
  ),
6074
- simple ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
6075
- safeCurrent,
6076
- " / ",
6077
- totalPages
6078
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
6079
- (item, index) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
6080
- "span",
6081
- {
6082
- className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6083
- children: "..."
6084
- },
6085
- `ellipsis-${index}`
6086
- ) : /* @__PURE__ */ jsxRuntime.jsx(
6087
- "button",
6088
- {
6089
- type: "button",
6090
- className: [
6091
- `${REACT_COMPONENT_PREFIX}-pagination-page`,
6092
- item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6093
- ].filter(Boolean).join(" "),
6094
- disabled,
6095
- onClick: () => jumpToPage(item),
6096
- children: item
6097
- },
6098
- item
6099
- )
6100
- ) }),
6105
+ simple ? /* @__PURE__ */ jsxRuntime.jsxs(
6106
+ "span",
6107
+ {
6108
+ style: styles?.pageItem,
6109
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6110
+ children: [
6111
+ safeCurrent,
6112
+ " / ",
6113
+ totalPages
6114
+ ]
6115
+ }
6116
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
6117
+ "div",
6118
+ {
6119
+ style: styles?.pages,
6120
+ className: `${REACT_COMPONENT_PREFIX}-pagination-pages`,
6121
+ children: pages.map(
6122
+ (item, index) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
6123
+ "span",
6124
+ {
6125
+ className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6126
+ style: styles?.ellipsis,
6127
+ children: "..."
6128
+ },
6129
+ `ellipsis-${index}`
6130
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
6131
+ "button",
6132
+ {
6133
+ type: "button",
6134
+ style: {
6135
+ ...styles?.pageItem,
6136
+ ...item === safeCurrent ? styles?.activePageItem : void 0
6137
+ },
6138
+ className: [
6139
+ `${REACT_COMPONENT_PREFIX}-pagination-page`,
6140
+ item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6141
+ ].filter(Boolean).join(" "),
6142
+ disabled,
6143
+ onClick: () => jumpToPage(item),
6144
+ children: item
6145
+ },
6146
+ item
6147
+ )
6148
+ )
6149
+ }
6150
+ ),
6101
6151
  /* @__PURE__ */ jsxRuntime.jsx(
6102
6152
  "button",
6103
6153
  {
6104
6154
  type: "button",
6105
6155
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6106
6156
  "aria-label": "\u4E0B\u4E00\u9875",
6157
+ style: styles?.nextButton,
6107
6158
  disabled: disabled || safeCurrent >= totalPages,
6108
6159
  onClick: () => jumpToPage(safeCurrent + 1),
6109
6160
  children: /* @__PURE__ */ jsxRuntime.jsx(
6110
6161
  "span",
6111
6162
  {
6112
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
6163
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`,
6164
+ style: styles?.nextIcon
6113
6165
  }
6114
6166
  )
6115
6167
  }
6116
6168
  ),
6117
- showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsxRuntime.jsx(
6169
+ showSizeChanger && resolvedPageSizeOptions.length ? /* @__PURE__ */ jsxRuntime.jsx(
6118
6170
  ReactSelect,
6119
6171
  {
6120
6172
  value: String(pageSize),
6121
6173
  disabled,
6122
- style: { width: resolvePaginationSelectWidth(size) },
6123
- options: pageSizeOptions.map((size2) => ({
6174
+ style: {
6175
+ width: resolvePaginationSelectWidth(size, resolvedPageSizeOptions),
6176
+ ...styles?.sizeChanger
6177
+ },
6178
+ options: resolvedPageSizeOptions.map((size2) => ({
6124
6179
  label: `${size2} / \u9875`,
6125
6180
  value: size2
6126
6181
  })),
@@ -6133,33 +6188,62 @@ function ReactPagination(props) {
6133
6188
  }
6134
6189
  }
6135
6190
  ) : null,
6136
- showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
6137
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
6138
- /* @__PURE__ */ jsxRuntime.jsx(
6139
- ReactInput,
6140
- {
6141
- value: quickValue,
6142
- disabled,
6143
- style: { width: resolvePaginationInputWidth(size) },
6144
- onChange: (event) => {
6145
- setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6146
- },
6147
- onPressEnter: () => {
6148
- handleQuickCommit();
6149
- },
6150
- onBlur: () => {
6151
- handleQuickCommit();
6152
- }
6153
- }
6154
- ),
6155
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
6156
- ] }) : null
6191
+ showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs(
6192
+ "div",
6193
+ {
6194
+ style: styles?.quickJumper,
6195
+ className: `${REACT_COMPONENT_PREFIX}-pagination-quick`,
6196
+ children: [
6197
+ /* @__PURE__ */ jsxRuntime.jsx(
6198
+ "span",
6199
+ {
6200
+ style: styles?.quickJumperText,
6201
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6202
+ children: "\u8DF3\u81F3"
6203
+ }
6204
+ ),
6205
+ /* @__PURE__ */ jsxRuntime.jsx(
6206
+ ReactInput,
6207
+ {
6208
+ value: quickValue,
6209
+ disabled,
6210
+ style: {
6211
+ width: resolvePaginationInputWidth(size),
6212
+ ...styles?.quickJumperInput
6213
+ },
6214
+ onChange: (event) => {
6215
+ setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6216
+ },
6217
+ onPressEnter: () => {
6218
+ handleQuickCommit();
6219
+ },
6220
+ onBlur: () => {
6221
+ handleQuickCommit();
6222
+ }
6223
+ }
6224
+ ),
6225
+ /* @__PURE__ */ jsxRuntime.jsx(
6226
+ "span",
6227
+ {
6228
+ style: styles?.quickJumperText,
6229
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6230
+ children: "\u9875"
6231
+ }
6232
+ )
6233
+ ]
6234
+ }
6235
+ ) : null
6157
6236
  ]
6158
6237
  }
6159
6238
  );
6160
6239
  }
6161
- function resolvePaginationSelectWidth(size) {
6162
- return size === "small" ? 92 : size === "large" ? 120 : 108;
6240
+ function resolvePaginationSelectWidth(size, pageSizeOptions) {
6241
+ const minWidth = size === "large" ? 120 : 108;
6242
+ const digits = Math.max(
6243
+ 1,
6244
+ ...pageSizeOptions.map((value) => String(value).length)
6245
+ );
6246
+ return `max(${minWidth}px, calc(${digits}ch + 3em + 44px))`;
6163
6247
  }
6164
6248
  function resolvePaginationInputWidth(size) {
6165
6249
  return size === "small" ? 56 : size === "large" ? 80 : 72;