@hanwenbo/x-taro-ui 0.0.1

package/es/components/checkList/checkList.js

@@ -0,0 +1,352 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Children, createContext, useContext, useMemo, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { usePressable } from "../../patterns";
+import { buildSubtleShadow, useTokens } from "../../theme";
+import { scaleMobileSelection } from "../../theme/selectionControl";
+import { classNames } from "../../utils";
+import { Checkbox } from "../checkbox";
+import { useConfigProvider } from "../configProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var CheckListContext = /*#__PURE__*/createContext(null);
+var itemMetrics = {
+  mini: {
+    minHeight: 32,
+    paddingX: scaleMobileSelection(12),
+    paddingY: scaleMobileSelection(6),
+    titleSize: 12,
+    descriptionSize: 10,
+    titleLineHeight: 18,
+    descriptionLineHeight: 12.5,
+    controlGap: scaleMobileSelection(12),
+    controlSize: scaleMobileSelection(16)
+  },
+  small: {
+    minHeight: 40,
+    paddingX: scaleMobileSelection(16),
+    paddingY: scaleMobileSelection(8),
+    titleSize: 12,
+    descriptionSize: 12,
+    titleLineHeight: 18,
+    descriptionLineHeight: 16.5,
+    controlGap: scaleMobileSelection(12),
+    controlSize: scaleMobileSelection(18)
+  },
+  middle: {
+    minHeight: 52,
+    paddingX: scaleMobileSelection(16),
+    paddingY: scaleMobileSelection(12),
+    titleSize: 14,
+    descriptionSize: 14,
+    titleLineHeight: 20,
+    descriptionLineHeight: 21,
+    controlGap: scaleMobileSelection(12),
+    controlSize: scaleMobileSelection(20)
+  },
+  large: {
+    minHeight: 64,
+    paddingX: scaleMobileSelection(20),
+    paddingY: scaleMobileSelection(16),
+    titleSize: 16,
+    descriptionSize: 16,
+    titleLineHeight: 24,
+    descriptionLineHeight: 26,
+    controlGap: scaleMobileSelection(12),
+    controlSize: scaleMobileSelection(24)
+  }
+};
+function renderNode(node, style, attributes) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({}, attributes), {}, {
+      style: style,
+      children: node
+    }));
+  }
+  return node;
+}
+function nodeText(node) {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join('');
+  if ( /*#__PURE__*/React.isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return '';
+}
+export var CheckListItem = function CheckListItem(_ref) {
+  var itemValue = _ref.value,
+    title = _ref.title,
+    description = _ref.description,
+    prefix = _ref.prefix,
+    extra = _ref.extra,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    onClick = _ref.onClick,
+    onPress = _ref.onPress;
+  var context = useContext(CheckListContext);
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    motion = _useTokens.motion;
+  if (!context) {
+    throw new Error('CheckList.Item must be used within CheckList');
+  }
+  var checked = context.value.includes(itemValue);
+  var isDisabled = Boolean(disabled || context.disabled);
+  var isReadOnly = Boolean(readOnly || context.readOnly);
+  var metrics = itemMetrics[context.size];
+  var itemLabel = nodeText(title !== null && title !== void 0 ? title : children) || String(itemValue);
+  var itemBorder = "var(--x-check-list-item-border, ".concat(colors.border, ")");
+  var checkedSurface = "var(--x-check-list-item-checked-surface, ".concat(colors.accent, ")");
+  var activeSurface = "var(--x-check-list-item-active-surface, ".concat(colors.accent, ")");
+  var titleColor = checked ? "var(--x-check-list-title-checked, ".concat(colors.foreground, ")") : "var(--x-check-list-title, ".concat(colors.foreground, ")");
+  var descriptionColor = checked ? "var(--x-check-list-description-checked, ".concat(colors['muted-foreground'], ")") : "var(--x-check-list-description, ".concat(colors['muted-foreground'], ")");
+  var commit = function commit() {
+    if (isDisabled || isReadOnly) return;
+    var nextValue = context.multiple ? checked ? context.value.filter(function (value) {
+      return value !== itemValue;
+    }) : [].concat(_toConsumableArray(context.value), [itemValue]) : checked ? [] : [itemValue];
+    context.onChange(nextValue);
+    onClick === null || onClick === void 0 || onClick();
+    onPress === null || onPress === void 0 || onPress();
+  };
+  var pressable = usePressable({
+    disabled: isDisabled || isReadOnly,
+    onPress: commit,
+    scale: 0.995
+  });
+  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
+    role: "option",
+    "aria-selected": checked,
+    ariaLabel: "".concat(itemLabel).concat(checked ? '，已选中' : '').concat(isDisabled || isReadOnly ? '，已禁用' : ''),
+    "data-slot": "check-list-item",
+    "data-value": String(itemValue),
+    "data-checked": checked ? 'true' : 'false',
+    "data-disabled": isDisabled ? 'true' : 'false',
+    "data-readonly": isReadOnly ? 'true' : 'false',
+    "data-size": context.size,
+    className: classNames("".concat(context.prefixCls, "-check-list__item"), "".concat(context.prefixCls, "-check-list__item--").concat(context.size), checked && "".concat(context.prefixCls, "-check-list__item--checked"), isDisabled && "".concat(context.prefixCls, "-check-list__item--disabled"), isReadOnly && "".concat(context.prefixCls, "-check-list__item--readonly"), className),
+    style: _objectSpread(_objectSpread({
+      boxSizing: 'border-box',
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      minHeight: metrics.minHeight,
+      paddingTop: metrics.paddingY,
+      paddingRight: metrics.paddingX,
+      paddingBottom: metrics.paddingY,
+      paddingLeft: metrics.paddingX,
+      borderBottomWidth: context.lastValue === itemValue ? 0 : 1,
+      borderBottomStyle: 'solid',
+      borderBottomColor: itemBorder,
+      backgroundColor: pressable.pressed ? activeSurface : checked ? checkedSurface : context.variant === 'card' ? "var(--x-check-list-card-surface, ".concat(colors.card, ")") : "var(--x-check-list-surface, ".concat(colors.background, ")"),
+      opacity: isDisabled || isReadOnly ? 0.5 : 1
+    }, pressable.style), {}, {
+      transition: "".concat(pressable.style.transition, ", background-color ").concat(motion.durationsMs.standard, "ms ").concat(motion.easing.standard, ", opacity ").concat(motion.durationsMs.fast, "ms ").concat(motion.easing.standard)
+    }, style)
+  }, pressable.handlers), {}, {
+    children: [/*#__PURE__*/_jsx(View, {
+      "data-slot": "check-list-item-control",
+      className: "".concat(context.prefixCls, "-check-list__control"),
+      style: {
+        width: metrics.controlSize,
+        marginRight: metrics.controlGap,
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        checked: checked,
+        disabled: isDisabled || isReadOnly,
+        size: context.size,
+        ariaLabel: itemLabel,
+        onChange: function onChange() {
+          return undefined;
+        }
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      "data-slot": "check-list-item-content",
+      className: "".concat(context.prefixCls, "-check-list__content"),
+      style: {
+        flex: 1,
+        minWidth: 0,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: [prefix ? /*#__PURE__*/_jsx(View, {
+        "data-slot": "check-list-item-prefix",
+        className: "".concat(context.prefixCls, "-check-list__prefix"),
+        style: {
+          marginRight: metrics.controlGap,
+          flexShrink: 0
+        },
+        children: prefix
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        children: [title !== undefined ? renderNode(title, {
+          display: 'block',
+          fontSize: metrics.titleSize,
+          lineHeight: "".concat(metrics.titleLineHeight, "px"),
+          fontWeight: 500,
+          color: titleColor,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }, {
+          className: "".concat(context.prefixCls, "-check-list__title"),
+          'data-slot': 'check-list-item-title'
+        }) : description === undefined ? renderNode(children, {
+          display: 'block',
+          fontSize: metrics.titleSize,
+          lineHeight: "".concat(metrics.titleLineHeight, "px"),
+          fontWeight: 500,
+          color: titleColor,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }, {
+          className: "".concat(context.prefixCls, "-check-list__title"),
+          'data-slot': 'check-list-item-title'
+        }) : null, description !== undefined ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "check-list-item-description-wrap",
+          children: renderNode(description, {
+            display: 'block',
+            fontSize: metrics.descriptionSize,
+            color: descriptionColor,
+            lineHeight: "".concat(metrics.descriptionLineHeight, "px"),
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }, {
+            className: "".concat(context.prefixCls, "-check-list__description"),
+            'data-slot': 'check-list-item-description'
+          })
+        }) : null]
+      })]
+    }), extra ? /*#__PURE__*/_jsx(View, {
+      "data-slot": "check-list-item-extra",
+      className: "".concat(context.prefixCls, "-check-list__extra"),
+      style: {
+        marginLeft: metrics.controlGap,
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        color: "var(--x-check-list-extra, ".concat(colors['muted-foreground'], ")")
+      },
+      children: extra
+    }) : null]
+  }));
+};
+CheckListItem.displayName = 'CheckList.Item';
+export var CheckList = function CheckList(props) {
+  var hasValueProp = Object.prototype.hasOwnProperty.call(props, 'value');
+  var options = props.options,
+    value = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+    _onChange = props.onChange,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? true : _props$multiple,
+    _props$disabled = props.disabled,
+    propDisabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    propSize = props.size,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
+    children = props.children,
+    className = props.className,
+    style = props.style;
+  var config = useConfigProvider();
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors;
+  var cardShadow = buildSubtleShadow(colors.foreground);
+  var size = propSize !== null && propSize !== void 0 ? propSize : config.size;
+  var disabled = Boolean(propDisabled || config.disabled);
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var currentValue = hasValueProp ? value !== null && value !== void 0 ? value : [] : internalValue;
+  var optionChildren = options === null || options === void 0 ? void 0 : options.map(function (option) {
+    return /*#__PURE__*/_jsx(CheckListItem, {
+      value: option.value,
+      title: option.label,
+      description: option.description,
+      prefix: option.prefix,
+      extra: option.extra,
+      disabled: option.disabled
+    }, String(option.value));
+  });
+  var renderedChildren = options !== null && options !== void 0 && options.length ? optionChildren : children;
+  var directChildren = Children.toArray(renderedChildren);
+  var lastChild = directChildren[directChildren.length - 1];
+  var lastValue = /*#__PURE__*/React.isValidElement(lastChild) ? lastChild.props.value : undefined;
+  var contextValue = useMemo(function () {
+    return {
+      value: currentValue,
+      onChange: function onChange(nextValue) {
+        if (!hasValueProp) setInternalValue(nextValue);
+        _onChange === null || _onChange === void 0 || _onChange(nextValue);
+      },
+      disabled: disabled,
+      readOnly: readOnly,
+      multiple: multiple,
+      size: size,
+      variant: variant,
+      prefixCls: config.prefixCls,
+      lastValue: lastValue
+    };
+  }, [config.prefixCls, currentValue, disabled, hasValueProp, multiple, _onChange, readOnly, size, variant, lastValue]);
+  return /*#__PURE__*/_jsx(CheckListContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(View, {
+      role: "listbox",
+      "aria-multiselectable": multiple,
+      "data-slot": "check-list-root",
+      "data-disabled": disabled ? 'true' : 'false',
+      "data-readonly": readOnly ? 'true' : 'false',
+      "data-multiple": multiple ? 'true' : 'false',
+      "data-size": size,
+      "data-variant": variant,
+      className: classNames("".concat(config.prefixCls, "-check-list"), "".concat(config.prefixCls, "-check-list--").concat(size), "".concat(config.prefixCls, "-check-list--").concat(variant), disabled && "".concat(config.prefixCls, "-check-list--disabled"), className),
+      style: _objectSpread({
+        width: '100%',
+        boxSizing: 'border-box',
+        overflow: variant === 'default' ? 'visible' : 'hidden',
+        borderWidth: variant === 'bordered' ? 1 : 0,
+        borderStyle: 'solid',
+        borderColor: "var(--x-check-list-border, ".concat(colors.border, ")"),
+        borderRadius: variant === 'default' ? 0 : 'var(--x-check-list-radius)',
+        backgroundColor: variant === 'card' ? "var(--x-check-list-card-surface, ".concat(colors.card, ")") : "var(--x-check-list-surface, ".concat(colors.background, ")"),
+        boxShadow: variant === 'card' ? process.env.TARO_ENV === 'weapp' ? cardShadow : 'var(--x-check-list-card-shadow)' : 'none',
+        opacity: 1
+      }, style),
+      children: renderedChildren
+    })
+  });
+};
+CheckList.displayName = 'CheckList';
+CheckList.Item = CheckListItem;
+export default CheckList;

package/es/components/checkList/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export { CheckListItem } from './checkList';
+export { default as CheckList } from './checkList';
+export { default } from './checkList';
+//# sourceMappingURL=index.d.ts.map

package/es/components/checkList/index.js

@@ -0,0 +1,4 @@
+export * from "./types";
+export { CheckListItem } from "./checkList";
+export { default as CheckList } from "./checkList";
+export { default } from "./checkList";

package/es/components/checkList/types.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { SizeVariant } from '../../theme/types';
+export declare type CheckListValue = string | number;
+export interface CheckListOption {
+    label: ReactNode;
+    value: CheckListValue;
+    description?: ReactNode;
+    prefix?: ReactNode;
+    extra?: ReactNode;
+    disabled?: boolean;
+}
+export interface CheckListProps {
+    /** Compatibility options API. Prefer CheckList.Item for composed rows. */
+    options?: CheckListOption[];
+    value?: CheckListValue[];
+    defaultValue?: CheckListValue[];
+    onChange?: (value: CheckListValue[]) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: SizeVariant;
+    variant?: 'default' | 'card' | 'bordered';
+    children?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface CheckListItemProps {
+    value: CheckListValue;
+    title?: ReactNode;
+    description?: ReactNode;
+    prefix?: ReactNode;
+    extra?: ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    onPress?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/checkList/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/checkbox/checkbox.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Checkbox Component
+ */
+import React from 'react';
+import type { CheckboxProps, CheckboxGroupProps, CheckboxRef } from './types';
+/**
+ * CheckboxGroup Component
+ */
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+declare type CheckboxComponent = React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<CheckboxRef>> & {
+    Group: typeof CheckboxGroup;
+};
+export declare const Checkbox: CheckboxComponent;
+export default Checkbox;
+//# sourceMappingURL=checkbox.d.ts.map