@canvas-components/react-components 0.3.5 → 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 +141 -58
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +8 -2
  4. package/dist/index.d.ts +8 -2
  5. package/dist/index.js +141 -58
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -6007,7 +6007,7 @@ 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
6011
  var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
6012
6012
  function ReactPagination(props) {
6013
6013
  const {
@@ -6023,9 +6023,18 @@ function ReactPagination(props) {
6023
6023
  showTotal,
6024
6024
  simple,
6025
6025
  size = "middle",
6026
- total
6026
+ total,
6027
+ style: rootStyle,
6028
+ styles
6027
6029
  } = props;
6030
+ const style = { ...rootStyle, ...styles?.root };
6028
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]);
6029
6038
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
6030
6039
  const safeCurrent = clampPage(current, totalPages);
6031
6040
  const range = total === 0 ? [0, 0] : [
@@ -6053,75 +6062,120 @@ function ReactPagination(props) {
6053
6062
  return /* @__PURE__ */ jsxRuntime.jsxs(
6054
6063
  "div",
6055
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
+ },
6056
6077
  className: `${REACT_COMPONENT_PREFIX}-pagination ${REACT_COMPONENT_PREFIX}-pagination-${size}`,
6057
6078
  children: [
6058
- 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,
6059
6087
  /* @__PURE__ */ jsxRuntime.jsx(
6060
6088
  "button",
6061
6089
  {
6062
6090
  type: "button",
6063
6091
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6064
6092
  "aria-label": "\u4E0A\u4E00\u9875",
6093
+ style: styles?.prevButton,
6065
6094
  disabled: disabled || safeCurrent <= 1,
6066
6095
  onClick: () => jumpToPage(safeCurrent - 1),
6067
6096
  children: /* @__PURE__ */ jsxRuntime.jsx(
6068
6097
  "span",
6069
6098
  {
6070
- 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
6071
6101
  }
6072
6102
  )
6073
6103
  }
6074
6104
  ),
6075
- simple ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
6076
- safeCurrent,
6077
- " / ",
6078
- totalPages
6079
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
6080
- (item, index) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
6081
- "span",
6082
- {
6083
- className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6084
- children: "..."
6085
- },
6086
- `ellipsis-${index}`
6087
- ) : /* @__PURE__ */ jsxRuntime.jsx(
6088
- "button",
6089
- {
6090
- type: "button",
6091
- className: [
6092
- `${REACT_COMPONENT_PREFIX}-pagination-page`,
6093
- item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6094
- ].filter(Boolean).join(" "),
6095
- disabled,
6096
- onClick: () => jumpToPage(item),
6097
- children: item
6098
- },
6099
- item
6100
- )
6101
- ) }),
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
+ ),
6102
6151
  /* @__PURE__ */ jsxRuntime.jsx(
6103
6152
  "button",
6104
6153
  {
6105
6154
  type: "button",
6106
6155
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6107
6156
  "aria-label": "\u4E0B\u4E00\u9875",
6157
+ style: styles?.nextButton,
6108
6158
  disabled: disabled || safeCurrent >= totalPages,
6109
6159
  onClick: () => jumpToPage(safeCurrent + 1),
6110
6160
  children: /* @__PURE__ */ jsxRuntime.jsx(
6111
6161
  "span",
6112
6162
  {
6113
- 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
6114
6165
  }
6115
6166
  )
6116
6167
  }
6117
6168
  ),
6118
- showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsxRuntime.jsx(
6169
+ showSizeChanger && resolvedPageSizeOptions.length ? /* @__PURE__ */ jsxRuntime.jsx(
6119
6170
  ReactSelect,
6120
6171
  {
6121
6172
  value: String(pageSize),
6122
6173
  disabled,
6123
- style: { width: resolvePaginationSelectWidth(size) },
6124
- options: pageSizeOptions.map((size2) => ({
6174
+ style: {
6175
+ width: resolvePaginationSelectWidth(size, resolvedPageSizeOptions),
6176
+ ...styles?.sizeChanger
6177
+ },
6178
+ options: resolvedPageSizeOptions.map((size2) => ({
6125
6179
  label: `${size2} / \u9875`,
6126
6180
  value: size2
6127
6181
  })),
@@ -6134,33 +6188,62 @@ function ReactPagination(props) {
6134
6188
  }
6135
6189
  }
6136
6190
  ) : null,
6137
- showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
6138
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
6139
- /* @__PURE__ */ jsxRuntime.jsx(
6140
- ReactInput,
6141
- {
6142
- value: quickValue,
6143
- disabled,
6144
- style: { width: resolvePaginationInputWidth(size) },
6145
- onChange: (event) => {
6146
- setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6147
- },
6148
- onPressEnter: () => {
6149
- handleQuickCommit();
6150
- },
6151
- onBlur: () => {
6152
- handleQuickCommit();
6153
- }
6154
- }
6155
- ),
6156
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
6157
- ] }) : 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
6158
6236
  ]
6159
6237
  }
6160
6238
  );
6161
6239
  }
6162
- function resolvePaginationSelectWidth(size) {
6163
- 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))`;
6164
6247
  }
6165
6248
  function resolvePaginationInputWidth(size) {
6166
6249
  return size === "small" ? 56 : size === "large" ? 80 : 72;